*{box-sizing:border-box}body{margin:0;background:#c4c5c7;color:#393d3c;font-family:Arial,'PingFang SC',sans-serif;overflow:hidden}header{position:absolute;top:0;right:0;z-index:2;padding:36px 46px}nav{display:flex;gap:30px;align-items:center}nav button{border:0;background:none;color:inherit;padding:5px 0;font:400 20px Arial;cursor:pointer;position:relative}nav button[aria-current=page]:after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor}nav button:disabled{cursor:default;opacity:.75}.linkedin{width:25px;height:25px;display:block}button:focus-visible{outline:2px solid #525d65;outline-offset:7px}#stage{position:absolute;inset:0;touch-action:none;cursor:grab}#stage:active{cursor:grabbing}canvas{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:650px){header{padding:25px 24px}nav{gap:23px}nav button{font-size:16px}.linkedin{width:21px;height:21px}}
.project-page{position:absolute;width:1400px;height:1100px;border:0;transform-origin:0 0;pointer-events:none;z-index:1;opacity:0;transition:opacity 180ms ease;background:transparent;clip-path:inset(0 round 53px)}
/* Portfolio Design System: UI/navigation uses the body Helvetica family. */
nav button{font-family:Helvetica,'Helvetica Neue',Arial,sans-serif}
/* Barely visible notebook dots, below all paper and content overlays. */
#stage::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(42,53,70,.075) .65px,transparent .85px);background-size:22px 22px;z-index:0;mask-image:radial-gradient(ellipse at center,transparent 38%,#000 76%)}
#home-signature-button{position:absolute;left:44px;top:27px;z-index:3;border:0;background:none;padding:0;color:#303640;cursor:pointer}.sig{display:block;width:auto;overflow:visible}.sig__pen{fill:none;stroke:#fff;stroke-width:120;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:sig-draw linear forwards}@keyframes sig-draw{to{stroke-dashoffset:0}}.music-player{position:absolute;bottom:22px;right:28px;z-index:4;font:12px Helvetica,Arial,sans-serif}#music-toggle{display:flex;gap:10px;align-items:center;padding:11px 15px;border:1px solid #ffffff80;border-radius:24px;background:#ffffffa8;color:#3d4652;cursor:pointer;backdrop-filter:blur(8px)}.music-bars{height:14px;display:flex;align-items:center;gap:3px}.music-bars i{display:block;width:2px;height:5px;background:currentColor;border-radius:2px}.music-bars i:nth-child(2){height:11px}.music-player.is-playing .music-bars i{animation:music-bar .8s ease-in-out infinite alternate}.music-bars i:nth-child(2){animation-delay:-.3s!important}.music-bars i:nth-child(3){animation-delay:-.6s!important}@keyframes music-bar{to{height:14px}}#music-panel{position:relative;width:290px;padding:28px 10px 12px;margin-bottom:10px;border-radius:14px;background:#fffffff0;box-shadow:0 8px 30px #26324822}#music-video{display:block;width:270px;height:152px;border:0;border-radius:7px}#music-panel a{display:block;margin-top:9px;color:#526075;text-decoration:none;font-size:11px}#music-close{position:absolute;right:8px;top:3px;border:0;background:none;font-size:22px;color:#526075;cursor:pointer}@media(max-width:650px){#home-signature-button{left:20px;top:22px}.sig{height:30px}header{padding-left:100px;padding-right:20px}nav{gap:16px}nav button{font-size:14px}.music-player{bottom:15px;right:17px}}@media(prefers-reduced-motion:reduce){.sig__pen{animation:none;stroke-dashoffset:0}.music-player.is-playing .music-bars i{animation:none}}
#music-panel{width:320px}#music-video{width:300px;height:200px}
#turntable{position:absolute;left:2.4vw;top:48%;width:clamp(135px,15vw,210px);padding:0;border:0;background:transparent;z-index:3;cursor:pointer;transform:rotate(-9deg);filter:drop-shadow(0 9px 7px #26324830);color:#505966}#turntable svg{display:block;width:100%;height:auto;overflow:visible}.tonearm{transform-origin:650px 140px;transform:rotate(-45deg);transition:transform 650ms cubic-bezier(.3,.1,.3,1)}#turntable.is-playing .tonearm,#turntable.is-cueing .tonearm{transform:rotate(0deg)}.vinyl-spin{transform-origin:354px 350px;animation:vinyl-turn 7s linear infinite;animation-play-state:paused}#turntable.is-playing .vinyl-spin{animation-play-state:running}.turntable-caption{display:block;margin-top:13px;font:14px 'Courier Prime',monospace;letter-spacing:.3px}@keyframes vinyl-turn{to{transform:rotate(360deg)}}@media(max-width:950px){#turntable{width:110px;top:112px;left:25px}.turntable-caption{font-size:10px}}@media(max-width:420px){#turntable{width:85px;left:18px;top:95px}.turntable-caption{font-size:8px}}@media(prefers-reduced-motion:reduce){.tonearm{transition:none}.vinyl-spin{animation:none}}

#matcha-pasture{position:absolute;left:1.3vw;top:70%;width:clamp(125px,15vw,205px);z-index:3;pointer-events:none;filter:drop-shadow(0 7px 6px #27352d22)}#matcha-pasture>svg{display:block;width:100%;height:auto;overflow:visible}.foam-sheep{transform-box:fill-box;transform-origin:center;animation:foam-wander var(--duration) ease-in-out var(--delay) infinite}.foam-flower{transform-box:fill-box;transform-origin:center;animation:foam-flower 8s ease-in-out var(--delay) infinite}@keyframes foam-wander{0%,100%{transform:translate(0,0) rotate(0)}35%{transform:translate(var(--dx),var(--dy)) rotate(var(--turn))}70%{transform:translate(calc(var(--dx)*.3),calc(var(--dy)*-.5)) rotate(calc(var(--turn)*-.5))}}@keyframes foam-flower{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(3px) rotate(7deg)}}@media(max-width:950px){#matcha-pasture{width:100px;left:23px;top:240px}}@media(max-width:420px){#matcha-pasture{width:80px;left:15px;top:200px}}@media(prefers-reduced-motion:reduce){.foam-sheep,.foam-flower{animation:none}}

#turntable{left:-22px;top:18%;width:clamp(145px,14vw,205px)}
#matcha-pasture{left:max(-12px,calc(var(--paper-left) - 142px));top:var(--latte-top);width:clamp(155px,17vw,235px)}
.music-player #music-toggle{display:none}.music-player.is-playing #music-toggle{display:flex}
@media(max-width:950px){#turntable{left:18px;top:var(--objects-below);width:115px}#matcha-pasture{left:155px;top:calc(var(--objects-below) + 7px);width:130px}.turntable-caption{font-size:10px}}
@media(max-width:420px){#turntable{left:12px;width:100px}#matcha-pasture{left:135px;width:115px}.turntable-caption{font-size:9px}}

@media(min-width:951px){#matcha-pasture{transform:translateX(-85%)}}

#matcha-pasture{transform-origin:50% 0;transform:scale(1.1)}@media(min-width:951px){#matcha-pasture{transform:translateX(-85%) scale(1.1)}}

#notebook-cat{position:absolute;left:calc(var(--paper-left) + 20px);top:calc(var(--paper-top) - 99px);width:calc(var(--paper-width) - 40px);height:120px;z-index:3;pointer-events:none}#notebook-cat-canvas{width:100%;height:100%;image-rendering:pixelated}

#notebook-cat{pointer-events:auto;cursor:pointer;touch-action:pan-y}

html,body{width:100%;height:100%;min-height:100%;overflow:hidden;background:var(--scene-background,#c4c5c7)}#stage{position:fixed;inset:0}

/* Live content uses the prototype's board transforms, including its perspective. */
.page-surface{position:absolute;left:0;top:0;width:700px;height:1100px;transform-origin:0 0;z-index:1;pointer-events:none;opacity:0;visibility:hidden;will-change:transform}
.page-surface .intro-sticker{left:0!important;top:0!important;transform:none!important;opacity:1!important}
.surface-right .intro-sticker{left:-700px!important;clip-path:inset(-600px -600px -600px 700px)}
.surface-left .intro-sticker{clip-path:inset(-600px 700px -600px -600px)}
.live-project{position:absolute;top:0;left:0;width:1400px;height:1100px;border:0;pointer-events:none;background:transparent}
.page-surface:has(.live-project){overflow:hidden}.surface-right .live-project{left:-700px}
.surface-left:has(.live-project){border-radius:63px 0 0 63px}.surface-right:has(.live-project){border-radius:0 63px 63px 0}
#stage{background:var(--scene-background,#c4c5c7)}

#stage,#stage:active{cursor:default}#stage.edge-ready{cursor:grab}#stage.dragging{cursor:grabbing}.page-surface .tool-sticker,.page-surface .art-sticker{pointer-events:auto;cursor:default}

.live-project{will-change:transform;transform:translateZ(0)}

#book-content-layer{position:fixed;inset:0;z-index:1;pointer-events:none;transform-style:preserve-3d}.page-surface{z-index:auto;background:#fff}.surface-left{border-radius:63px 0 0 63px}.surface-right{border-radius:0 63px 63px 0}

.closing-art{position:absolute;left:0;top:0;width:1400px;height:1100px;display:block;pointer-events:none}.surface-right .closing-art{left:-700px}.page-surface:has(.closing-art){overflow:hidden}

#stage.project-link-ready{cursor:pointer}#stage.edge-ready{cursor:grab}

@keyframes case-open-reveal{from{clip-path:circle(0 at 50% 50%)}to{clip-path:circle(150vmax at 50% 50%)}}
.cursor-hint{position:fixed;left:0;top:0;z-index:100;pointer-events:none;opacity:0;will-change:transform;transition:opacity 90ms linear}.cursor-hint.is-visible{opacity:1}.cursor-tag{display:block;position:absolute;left:17px;top:17px;white-space:nowrap;padding:9px 15px;border-radius:999px;background:#242424;color:#fff;box-shadow:0 3px 10px #0002;font:500 13px/1.2 Helvetica,Arial,sans-serif}.cursor-orb{display:none;position:absolute;width:12px;height:12px;border:2px solid #242424;border-radius:50%;left:-6px;top:-6px;background:#ffffffb3}.cursor-hint[data-mode="open"] .cursor-orb{display:block}#stage.open-cursor,#stage.open-cursor:active{cursor:none}#stage.edge-ready{cursor:pointer}#stage.dragging{cursor:grabbing}
@media(hover:none),(pointer:coarse){.cursor-hint{display:none!important}}
@media(prefers-reduced-motion:reduce){.cursor-hint{transition:none}}

.cursor-hint.align-left .cursor-tag{left:auto;right:17px}.cursor-hint.align-above .cursor-tag{top:auto;bottom:17px}

/* Keep the native cursor; only the contextual label follows the pointer. */
.cursor-hint[data-mode="open"] .cursor-orb{display:none}
#stage.open-cursor,#stage.open-cursor:active{cursor:default}

/* Hand-drawn page navigation, separate from the flip geometry. */
.page-cue{position:fixed;top:max(85px,calc(var(--paper-top) - 79px));z-index:6;width:116px;padding:0;border:0;background:transparent;color:#2348cf;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;transform:rotate(-5deg)}
.page-cue[hidden]{display:none}.page-cue:disabled{cursor:default}.page-cue span{font:700 23px 'Courier Prime',monospace;letter-spacing:-1px}.page-cue svg{width:116px;height:44px;overflow:visible;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}.cue-prev{left:max(18px,var(--paper-left));transform:rotate(5deg)}.cue-prev svg{scale:-1 1}.cue-next{right:max(18px,var(--paper-left))}.page-cue:hover svg{transform:translateX(5px)}.cue-prev:hover svg{transform:translateX(5px)}
@media(max-width:950px){.page-cue{width:76px;top:max(88px,calc(var(--paper-top) - 58px))}.page-cue span{font-size:18px}.page-cue svg{width:76px;height:29px}#matcha-pasture{top:calc(var(--objects-below) + 7px)!important}}
@media(prefers-reduced-motion:reduce){.page-cue svg{transition:none}}

/* Neutral home backdrop and prominent page-edge navigation. */
html,body{background:var(--scene-background,#c4c5c7)}
.page-cue{top:calc(var(--paper-top) + var(--paper-height) * .5 - 36px);width:112px;transform:rotate(-5deg);filter:drop-shadow(0 2px 1px #ffffff60)}
.page-cue span{font-size:21px}.page-cue svg{width:112px;height:45px;fill:currentColor;stroke-width:1.2}
/* centred on the page's edge: half the arrow outside the book, half over it */
.cue-prev{left:max(8px,calc(var(--paper-left) - 56px));transform:rotate(5deg)}.cue-next{right:max(8px,calc(var(--paper-left) - 56px))}
@media(max-width:950px){.page-cue{top:calc(var(--paper-top) + var(--paper-height) * .5 - 32px);width:85px}.page-cue svg{width:85px;height:37px}.page-cue span{font-size:20px}.cue-prev{left:8px}.cue-next{right:8px}}

/* White sticker edging keeps blue navigation readable over every spread. */
.page-cue{top:calc(var(--paper-top) + var(--paper-height) * .5 - 90px);filter:drop-shadow(0 3px 2px #27324628)}
.page-cue span{-webkit-text-stroke:5px #fff;paint-order:stroke fill}
.page-cue svg{stroke:#fff;stroke-width:9px;paint-order:stroke fill;stroke-linejoin:round}
@media(max-width:950px){.page-cue{top:calc(var(--paper-top) + var(--paper-height) * .5 - 62px)}.page-cue span{-webkit-text-stroke:4px #fff}.page-cue svg{stroke-width:8px}}

/* Broad marker silhouette with a loose directional ink gesture. */
.page-cue .arrow-marker{fill:#2348cf;stroke:#fff;stroke-width:5px;paint-order:stroke fill;stroke-linejoin:round}
.page-cue .arrow-gesture{fill:none;stroke:#182c70;stroke-width:2.8px;stroke-linecap:round;stroke-linejoin:round;paint-order:normal}

/* Reveal only once the book-relative cup position has been computed. */
#matcha-pasture{visibility:hidden}
#matcha-pasture[data-positioned="true"]{visibility:visible}
@media(min-width:951px){#matcha-pasture{z-index:0}}

/* No unpositioned cat may paint while the book engine is starting. */
#notebook-cat{visibility:hidden}
html[data-book-positioned="true"] #notebook-cat{visibility:visible}

.page-cue svg{height:51px}.page-cue .arrow-marker{stroke-width:4px}
@media(max-width:950px){.page-cue svg{height:33px}}

/* The entire WebGL book (covers and stacked pages) occludes the cup. */
@media(min-width:951px){
 #stage{z-index:1;background:transparent}
 #matcha-pasture{z-index:0}
}

.about-spread{position:absolute;left:0;top:0;width:1400px;height:1100px;padding:72px 40px 0;box-sizing:border-box;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;color:#303640}
.surface-right .about-spread{left:-700px}
.page-surface:has(.about-spread){overflow:hidden}
.about-spread__title{margin:0;font:700 60px/1.08 Helvetica,Arial,sans-serif;letter-spacing:-.015em;text-align:center}
.about-spread__lede{margin:12px 0 0;font:400 30px/1.45 Helvetica,Arial,sans-serif;color:#6e7482;text-align:center}

/* The cards rise out of the book when the page opens: they start small and low, as if still lying
   in the gutter, and come up to size with a little overshoot. */
#about-cards{position:fixed;left:var(--paper-left);top:var(--paper-top);width:var(--paper-width);height:var(--paper-height);
 z-index:5;pointer-events:none;display:flex;align-items:flex-start;justify-content:center;
 opacity:0;visibility:hidden;transform:translateY(8px) scale(.87);transform-origin:50% 21%;
 transition:opacity .32s ease,transform .5s cubic-bezier(.2,.9,.3,1.08),visibility 0s linear .5s}
#about-cards.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
.about-cards__fan,.about-preview{display:flex;align-items:flex-start;justify-content:center;gap:calc(var(--paper-width) * .035);margin-top:21%}
.about-preview{position:absolute;left:0;right:0;top:294px;margin:0;gap:34px}
.about-preview .acard{position:relative;--acard-w:414px;pointer-events:none}
.about-preview .acard__face{cursor:default;box-shadow:0 3px 8px #2a354624}
.cards-lifted .about-preview{visibility:hidden;transition:visibility 0s linear 90ms}
#about-cards.is-closing{left:calc(var(--paper-left) + var(--about-offset,0px));--card-turn:220ms}
#about-cards.is-closing:not(.is-open){transform:scale(.87);transition-duration:220ms,70ms,0s;transition-delay:0s,150ms,220ms}
/* A fan: the outer two lean away and sit lower, the middle one stands on top. */
.about-cards__fan .acard:nth-child(1){transform:rotate(-3deg) translateY(3%);z-index:1}
.about-cards__fan .acard:nth-child(2){z-index:3}
.about-cards__fan .acard:nth-child(3){transform:rotate(3deg) translateY(3%);z-index:1}

/* A card, measured off the book so it keeps its proportions at any window size — and wide enough
   that the three of them reach past the spread. */
/* the type is sized off the card, which is sized off the book: everything scales together, so
   the text cannot outgrow the card when the window gets smaller */
.acard{--acard-w:calc(var(--paper-width) * .338);width:var(--acard-w);height:calc(var(--acard-w) * 1.72);
 font-size:calc(var(--acard-w) / 23);flex:none;pointer-events:auto}
.acard__inner{position:relative;width:100%;height:100%;border-radius:22px;
 box-shadow:0 3px 5px #2a354624,0 18px 34px #2a35462e,0 40px 80px #2a354626;transform:translateY(-4px)}

/* The turn is 2D: the card squashes to nothing and comes back, and the two faces swap at the
   exact midpoint of that. */
.acard__face{position:absolute;inset:0;border-radius:22px;overflow:hidden;opacity:0;margin:0;border:0;display:block;background:#fdfbf7}
.acard[data-face="back"] .acard__back,.acard[data-face="front"] .acard__front{opacity:1}
.acard.is-turning .acard__face{transition:opacity 0s linear calc(var(--turn-delay,0s) + var(--card-turn,.5s) / 2)}
.acard.is-turning .acard__inner{animation:acard-turn var(--card-turn,.5s) cubic-bezier(.45,0,.55,1) var(--turn-delay,0s) both}
@keyframes acard-turn{0%{transform:translateY(-4px) scaleX(1)}50%{transform:translateY(-4px) scaleX(.03)}100%{transform:translateY(-4px) scaleX(1)}}

/* The five pieces, all cut out of the one square illustration this card carries. */
.acard__corner,.acard__hero,.acard__art{background-image:var(--card-img);background-repeat:no-repeat;pointer-events:none}
/* a generous square off each corner of the source, so the motif sits inside it whole */
.acard__corner{position:absolute;width:17%;height:17%;background-size:385% auto}
.acard__corner[data-c="tl"]{left:5px;top:5px}
.acard__corner[data-c="tr"]{right:5px;top:5px}
.acard__corner[data-c="bl"]{left:5px;bottom:5px}
.acard__corner[data-c="br"]{right:5px;bottom:5px}
.acard__hero{position:absolute;left:5%;right:5%;top:12%;bottom:12%;background-size:188% auto;background-position:50% 50%}
.acard__art{width:42%;aspect-ratio:1;margin:6% 0 0;flex:none;background-size:195% auto;background-position:50% 50%}

.acard__back{cursor:pointer}
.acard__front{cursor:pointer;text-align:center;padding:0 0 calc(20% + 6px);font-family:inherit;display:flex;flex-direction:column;align-items:center}
.acard__n{margin:3% 0 0;flex:none;font:700 .72em/1 'Courier Prime',monospace;letter-spacing:.2em;color:#bdb6aa}
.acard__front h3{margin:5% 10% 0;flex:none;font:600 1.3em/1.32 Helvetica,Arial,sans-serif;color:#2b2f36}
.acard__front p{margin:6% 9% 0;flex:none;font:400 1em/1.68 Helvetica,Arial,sans-serif;color:#5a5f6a}
.acard__front p b{font-weight:700;color:#2b2f36}

@media(min-width:1280px){
 .acard{font-size:clamp(14px,calc(var(--acard-w) / 17),28px)}
 .acard__front{font-size:inherit}
 .acard__front h3{margin-inline:8%;line-height:1.22}
 .acard__front p{margin:4% 8% 0;line-height:1.48}
 .acard__art{width:38%}
}
@media(min-width:1700px){
 .acard{font-size:clamp(16px,calc(var(--acard-w) / 15.5),31px)}
}
@media(max-width:950px){
 #about-cards{display:none}
}
@media(prefers-reduced-motion:reduce){
 #about-cards{transition-duration:.01s}
 .acard.is-turning .acard__inner{animation-duration:1ms;animation-delay:0s}
 .acard.is-turning .acard__face{transition-delay:0s}
}

/* Apply the shadow outside the iframe clip so it follows the rounded screen edge. */
.floating-media-layer{position:fixed;inset:0;z-index:2;pointer-events:none}
.floating-media-layer:has(.is-visible){filter:drop-shadow(0 3px 5px rgba(30,40,60,.12))}

/* Anchor the screen's own center to the colored part of the paper at both sizes. */
.live-project.floating-project-media{
 --lift-scale:calc(var(--media-scale,1) * .97);
 --anchor-y:calc(var(--paper-height) * .355);
 position:fixed;left:calc(var(--paper-left) + var(--paper-width) / 2);top:var(--paper-top);z-index:2;
 transform-origin:50% 0;
 transform:translate(-50%,calc(var(--anchor-y) - var(--media-center-y,434px) * var(--lift-scale))) scale(var(--lift-scale));
 clip-path:inset(18px 35px 250px);visibility:hidden;opacity:0;
 transition:transform 230ms cubic-bezier(.4,0,.35,1),opacity 80ms ease-in 120ms,visibility 0s linear 230ms;
}
.live-project.floating-project-media.is-visible{
 --lift-scale:calc(var(--media-scale,1) * 1.035);
 visibility:visible;opacity:1;
 transition:transform 310ms cubic-bezier(.25,.1,.25,1),opacity 0s,visibility 0s;
}
@media(prefers-reduced-motion:reduce){
 .live-project.floating-project-media,.live-project.floating-project-media.is-visible{transition:none}
}

@media(prefers-reduced-motion:reduce){#about-cards.is-closing:not(.is-open){transition:none;--card-turn:1ms}}


/* Match the board's narrow edge shadow on the live printed faces. */
.page-surface{box-shadow:var(--edge-offset) 0 9px -3px rgb(36 43 54 / var(--edge-shadow,0))}
.surface-left{--edge-offset:-7px}
.surface-right{--edge-offset:7px}

.turning-edge-layer{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;visibility:hidden}
.turning-edge-layer path{fill:#e6e4de}

.turning-edge-layer .turning-edge-seam{fill:#d4d0c7}

@media(max-width:950px){
 /* The scene's shadow projection ends below the navigation on narrow screens. */
 #stage canvas{clip-path:inset(max(0px,calc(var(--paper-top,120px) - 35px)) 0 0)}
}
@media(max-width:600px){
 .page-cue,.page-cue svg{width:66px}
 .page-cue span{font-size:17px}
}