:root{
  --mist:#D9E4DF; --mist-2:#C8D6CF; --ink:#1C2633; --ink-soft:#4A5666;
  --plum:#4B2E6F; --lamp:#F2C14E; --teal:#2F7F7A; --lilac:#E9E1F5; --sky:#7FA7C9;
  --display:'Big Shoulders Display', Impact, 'Arial Narrow', sans-serif;
  --body:'Atkinson Hyperlegible', system-ui, sans-serif;
  --pad:clamp(1rem,4vw,3rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--mist);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit}
img,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Hero (top of the room page) ---------- */
.hero{position:relative;height:100vh;min-height:560px;background:radial-gradient(120% 90% at 50% 40%,#E3ECE7 0%,var(--mist) 45%,#BFCFC7 100%);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.38;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .15  0 0 0 0 .2  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero-name{position:absolute;left:0;right:0;top:40%;z-index:1;transition:scale .45s cubic-bezier(.2,.8,.2,1);text-align:center;font-family:var(--display);font-weight:900;font-size:clamp(3.5rem,16vw,22rem);line-height:.82;text-transform:uppercase;color:var(--ink);transform:translateY(-50%);pointer-events:none}
.hero-name .word{display:inline-block;white-space:nowrap;margin:0 .07em;pointer-events:auto;cursor:default}
.hero-name .ch{display:inline-block;transform:translateY(110%);opacity:0;animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise{to{transform:none;opacity:1}}
.hero-portrait{position:absolute;left:50%;bottom:0;z-index:2;height:var(--ph);width:auto;max-width:none;transform:translate(-50%,8%);opacity:0;animation:portraitIn 1.4s .6s cubic-bezier(.2,.8,.2,1) forwards;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);pointer-events:none}
.hero{--ph:min(96vh,1200px)}
canvas.hero-portrait{filter:drop-shadow(var(--sx,0px) 18px 24px rgba(28,38,51,.28));height:calc(var(--ph) * 1.15);aspect-ratio:829/1000;bottom:calc(var(--ph) * -0.075)}
.hero-portrait[hidden]{display:none}
.sticker{position:absolute;z-index:3;padding:.55rem 1rem;border-radius:14px;font-weight:700;font-size:clamp(.85rem,1.1vw,1.05rem);line-height:1.2;box-shadow:0 10px 24px rgba(28,38,51,.16);opacity:0;animation:stick .6s cubic-bezier(.3,1.6,.5,1) forwards;pointer-events:none;white-space:nowrap}
.sticker small{display:block;font-weight:400;font-size:.8em;opacity:.8;margin-top:.15rem}
.sticker.s-plum{background:var(--plum);color:var(--lamp)}
.sticker.s-lamp{background:var(--lamp);color:var(--ink)}
.sticker.s-lilac{background:var(--lilac);color:var(--ink)}
.sticker.s-teal{background:var(--teal);color:#fff}
.sticker.s-ink{background:var(--ink);color:var(--mist)}
@keyframes stick{from{opacity:0;transform:scale(.6) rotate(var(--r))}to{opacity:1;transform:scale(1) rotate(var(--r))}}
@media (max-width:760px){.sticker{display:none}.sticker.keep{display:block;font-size:.78rem}
  .sticker[data-i="0"]{left:5%!important;top:14%!important}
  .sticker[data-i="1"]{left:auto!important;right:5%!important;top:21%!important}}
/* portrait layer, blob and doodles */
.portrait-wrap{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .45s ease, filter .45s ease}
.hero.reveal .portrait-wrap{opacity:.1;filter:blur(6px)}
.hero.reveal .hero-name{z-index:6;scale:1.04}
.hero.reveal .doodles{opacity:0}
.hero.over-face{cursor:pointer}
.blob{position:absolute;z-index:0;left:calc(50% - .02 * var(--ph));top:calc(100% - var(--ph) + .27 * var(--ph));width:calc(.5 * var(--ph));aspect-ratio:1;translate:-50% -50%;background:conic-gradient(from 120deg,#F2C14E,#C9637E,#B7A6D6,#7FD0C4,#F2C14E);border-radius:42% 58% 62% 38% / 45% 40% 60% 55%;opacity:0;animation:blobIn 1.2s .4s ease forwards, morph 12s ease-in-out infinite alternate;filter:saturate(.9)}
@keyframes blobIn{to{opacity:.75}}
.blob{transition:filter .45s}
.hero.reveal .blob{filter:blur(30px) saturate(.4)}
@keyframes morph{0%{border-radius:42% 58% 62% 38% / 45% 40% 60% 55%;rotate:0deg}50%{border-radius:60% 40% 35% 65% / 55% 62% 38% 45%}100%{border-radius:38% 62% 55% 45% / 40% 55% 45% 60%;rotate:40deg}}
.doodles{position:absolute;inset:0;z-index:3;pointer-events:none;transition:opacity .3s}
.doodle{position:absolute;opacity:0;animation:fade .6s forwards}
.doodle.spin svg{animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.75) rotate(25deg)}}
.hint{font-family:'Caveat','Segoe Print','Comic Sans MS',cursive;font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:700;color:var(--plum);white-space:nowrap;rotate:-6deg}
.hint-m{display:none}
@media (max-width:760px){.doodle:not(.keep){display:none}.doodle.keep{left:auto!important;right:5%}.hint-d{display:none}.hint-m{display:inline}}
@keyframes portraitIn{to{opacity:1;transform:translate(-50%,0)}}
.hero-corner{position:absolute;z-index:5;top:clamp(1rem,3vw,2rem);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:1rem;font-weight:700;opacity:0;animation:fade .8s 1.2s forwards}
.about-link{text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px}
.about-link:hover{color:var(--plum);border-color:var(--plum)}
.hero-corner span:last-child{color:var(--ink-soft);font-weight:400;text-align:right}
.hero-bottom{position:absolute;z-index:5;left:var(--pad);right:var(--pad);bottom:clamp(1.2rem,4vh,2.5rem);display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;opacity:0;animation:fade .8s 1.4s forwards}
.hero-line{max-width:min(36ch,25vw);font-size:1.02rem;line-height:1.45}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:.5rem;font-weight:700}
.cue-line{width:2px;height:42px;background:var(--ink);transform-origin:top;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fade{to{opacity:1}}
@media (max-width:760px){
  .hero-line{max-width:none}
  .hero-name{top:33%}
  .hero{--ph:60vh}
  .hero-portrait{height:64vh}
  .hero-bottom{background:linear-gradient(to top,var(--mist) 65%,transparent);left:0;right:0;bottom:0;padding:3rem var(--pad) 1.4rem;flex-direction:column;align-items:flex-start}
  .scroll-cue{flex-direction:row}
  .cue-line{width:30px;height:2px}
}

/* ---------- Header ---------- */
header.site{position:fixed;top:0;left:0;right:0;transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--pad);background:color-mix(in srgb,var(--mist) 86%,transparent);backdrop-filter:blur(10px)}
.logo{font-family:var(--display);font-weight:900;font-size:1.7rem;line-height:1;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(.8rem,2.4vw,1.8rem)}
.nav a{text-decoration:none;font-weight:700;padding:.2rem 0;border-bottom:2px solid transparent}
.nav a[aria-current="page"]{border-color:var(--ink)}
.nav a:hover{border-color:var(--ink-soft)}
.sound{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;padding:.35rem .8rem;border:2px solid var(--ink);border-radius:999px;font-size:.85rem}
.bars{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.bars i{width:3px;height:4px;background:currentColor;border-radius:1px}
body.playing .bars i{animation:eq .9s ease-in-out infinite}
body.playing .bars i:nth-child(2){animation-delay:-.3s}
body.playing .bars i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}

main{padding-top:84px}
body.route-room main{padding-top:0}
body.at-hero header.site{transform:translateY(-110%)}
/* ---------- Veil (route change) ---------- */
#veil{position:fixed;inset:0;z-index:55;background:var(--plum);transform:translateY(100%);pointer-events:none;visibility:hidden}
#veil.in,#veil.out{visibility:visible}
#veil.in{transform:translateY(0);transition:transform .38s cubic-bezier(.7,0,.3,1)}
#veil.out{transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.3,1)}

/* ---------- Room ---------- */
.room-wrap{height:100vh;height:100svh;padding:0}
.room-scroll{width:100%;height:100%}
.swipe-hint{display:none}
@media (max-width:760px){
  .room-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .room-scroll::-webkit-scrollbar{display:none}
  .room-scroll{display:flex;align-items:center}
  .room-scroll svg.room{height:min(100%, 140vw);width:auto;max-width:none;flex:none;aspect-ratio:12/7}
  .swipe-hint{top:84px;bottom:auto!important}
  .swipe-hint{display:block;position:absolute;z-index:3;left:14px;bottom:20px;background:var(--ink);color:var(--lilac);font-weight:700;font-size:.8rem;padding:.4rem .8rem;border-radius:999px;transition:opacity .4s}
  .swipe-hint.gone{opacity:0}
}
.room-card{position:absolute;z-index:4;left:50%;bottom:18px;translate:-50% 0;width:min(360px,calc(100% - 32px));background:var(--lilac);color:var(--ink);border-radius:18px;padding:1.1rem 1.2rem 1.1rem;box-shadow:0 18px 40px rgba(8,12,24,.35);animation:cardIn .35s cubic-bezier(.2,.8,.2,1)}
.room-card[hidden]{display:none}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}}
.room-card h3{font-family:var(--display);font-weight:900;font-size:1.9rem;line-height:1;margin:.2rem 0 .4rem}
.rc-k{font-weight:700;font-size:.85rem;color:var(--plum)}
.rc-links{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.7rem}
.rc-links a{font-weight:700;text-decoration-thickness:2px;text-underline-offset:4px}
body.playing .me-head{transform-box:fill-box;transform-origin:50% 100%;animation:bob .79s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(0)}50%{transform:translateY(2px) rotate(2deg)}}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker 1.2s ease-in-out infinite alternate}
@keyframes flicker{0%{transform:scale(1,1) rotate(-2deg)}50%{transform:scale(.92,1.08) rotate(2deg)}100%{transform:scale(1.04,.95) rotate(-1deg)}}
.rec{animation:blink 1.4s infinite}
#objCat .eyes-open,#objCat .heart{opacity:0}
#objCat .heart{transform-box:fill-box;transform-origin:center}
#objCat .zzz{animation:zzz 3s ease-in-out infinite}
@keyframes zzz{0%{opacity:0;transform:translate(0,4px)}40%{opacity:.9}100%{opacity:0;transform:translate(8px,-10px)}}
#objCat.awake .eyes-shut,#objCat.awake .zzz{opacity:0;animation:none}
#objCat.awake .eyes-open{opacity:1}
#objCat.awake .heart{animation:heart 1.4s ease-out}
#objCat.awake .tail{transform-box:fill-box;transform-origin:100% 100%;animation:swish .5s ease-in-out 4 alternate}
#objCat.awake .cat-head{transform-box:fill-box;transform-origin:50% 100%;animation:perk .4s ease-out}
@keyframes heart{0%{opacity:0;transform:translateY(0) scale(.4)}30%{opacity:1;transform:translateY(-6px) scale(1.1)}100%{opacity:0;transform:translateY(-24px) scale(1)}}
@keyframes swish{from{transform:rotate(-8deg)}to{transform:rotate(14deg)}}
@keyframes perk{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.rc-close{position:absolute;top:.7rem;right:.8rem;font-weight:700;font-size:.85rem;text-decoration:underline}
.room-music{position:absolute;z-index:3;bottom:16px;left:16px;display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .9rem;border-radius:999px;background:rgba(233,225,245,.92);color:var(--ink);font-weight:700;font-size:.85rem}
.room-music:hover{background:var(--lamp)}
.audio-hint{position:absolute;z-index:3;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:var(--lilac);font-weight:700;font-size:.85rem;padding:.4rem .9rem;border-radius:999px;opacity:0;transition:opacity .3s;pointer-events:none}
.audio-hint.show{opacity:1}
.room-frame{position:relative;width:100%;height:100%;overflow:hidden;background:#1A2030}
svg.room{width:100%;height:100%}
.room-hint{position:absolute;z-index:3;bottom:22px;right:var(--pad);font-family:'Caveat',cursive;font-weight:700;font-size:1.35rem;color:var(--lilac);opacity:.9;pointer-events:none;text-shadow:0 2px 8px rgba(8,12,24,.5)}
.rh-m{display:none}
.room-frame::before{content:"";position:absolute;inset:0 0 auto 0;height:110px;z-index:2;pointer-events:none;background:linear-gradient(rgba(10,14,26,.55),transparent)}
.room-frame{background:linear-gradient(var(--wallc,#2B3550) 58%,var(--floorc,#1C2234) 58%)}
@media (hover:none),(max-width:760px){.rh-d{display:none}.rh-m{display:inline}}
body.in-room header.site{background:transparent;backdrop-filter:none;color:var(--lilac)}
body.in-room .logo{visibility:hidden}
@media (hover:hover){body.in-room:not(.show-head) header.site:not(:focus-within),body.route-dark:not(.show-head) header.site:not(:focus-within){transform:translateY(-110%)}}
body.route-dark .logo{visibility:hidden}
body.in-room .nav a[aria-current="page"]{border-color:var(--lilac)}
body.in-room .sound{border-color:var(--lilac)}
svg.room{width:100%;height:100%}
.obj{cursor:pointer;outline:none;transition:filter .25s}
.obj:hover,.obj:focus-visible,.obj.hot{filter:brightness(1.25) drop-shadow(0 0 10px rgba(242,193,78,.7))}
#shadeLayer{transition:opacity 1.2s ease;pointer-events:none}
#glowLayer,#cone{transition:opacity .5s ease;pointer-events:none}
.room-frame #shadeLayer{opacity:.22}
.room-frame.lamp-off #shadeLayer{opacity:.62}
.room-frame.lamp-off #glowLayer,.room-frame.lamp-off #cone{opacity:0}
.room-frame.t-day #shadeLayer{opacity:.03}
.room-frame.t-day.lamp-off #shadeLayer{opacity:.07}
.room-frame.t-dawn #shadeLayer,.room-frame.t-sunset #shadeLayer{opacity:.12}
.room-frame.t-dawn.lamp-off #shadeLayer,.room-frame.t-sunset.lamp-off #shadeLayer{opacity:.3}
.room-frame.boot #shadeLayer{opacity:.94!important;transition:none}
.room-frame.boot #glowLayer,.room-frame.boot #cone{opacity:0;transition:none}
.room-frame.flicker #glowLayer,.room-frame.flicker #cone{animation:flick 1s steps(1) forwards}
@keyframes flick{0%{opacity:0}12%{opacity:1}20%{opacity:.1}34%{opacity:.9}42%{opacity:.2}60%{opacity:1}100%{opacity:1}}
#term .cur{animation:blink 1s steps(1) infinite}
@keyframes scrollcode{to{transform:translateY(-150px)}}
#disc{transform-origin:0 0}
body.playing #disc{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
body.playing .cone-sp{animation:thump .79s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes thump{0%{transform:scale(1.12)}40%{transform:scale(1)}}
#antennaBall{animation:blink 2.4s infinite}
@keyframes blink{0%,80%,100%{opacity:1}88%{opacity:.25}}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.5}100%{opacity:0;transform:translateY(-16px)}}
.tip{position:absolute;z-index:3;pointer-events:none;background:var(--lilac);color:var(--ink);font-weight:700;font-size:.9rem;padding:.4rem .75rem;border-radius:10px;transform:translate(-50%,calc(-100% - 14px));opacity:0;transition:opacity .15s;white-space:nowrap}
.tip.show{opacity:1}

/* ---------- Page head ---------- */

/* ---------- Project list ---------- */
.project{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(1.5rem,3vw,3rem);padding:2.4rem var(--pad) 3rem;border-top:2px solid var(--ink);align-items:end}
.project.flip{grid-template-columns:1fr 1.7fr}
.project.flip .visual{order:2}
a.visual:hover svg,a.visual:focus-visible svg{transform:scale(1.035)}
.project h2{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,5.4vw,6.5rem);line-height:.82;text-transform:uppercase}
.project h2 a{text-decoration:none}
.tags{display:flex;gap:.4rem;flex-wrap:wrap;margin:1rem 0 .9rem}
.tag{font-size:.8rem;font-weight:700;padding:.18rem .6rem;border-radius:6px}
.tag[data-t="AI Agents"]{background:var(--plum);color:var(--lamp)}
.tag[data-t="LLM Apps"]{background:var(--teal);color:#fff}
.tag[data-t="Enterprise"]{background:var(--ink);color:var(--mist)}
.tag[data-t="Tools"]{background:var(--lamp);color:var(--ink)}
.tag[data-t="Web"]{background:var(--sky);color:var(--ink)}
.links{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.2rem;font-weight:700}
.links a{text-decoration-thickness:2px;text-underline-offset:5px}
.links a:hover{color:var(--plum)}
.achieve{list-style:none;display:grid;gap:.9rem}
.achieve b{display:block}
.achieve span{color:var(--ink-soft)}
.summary{max-width:36ch}
.read{display:inline-block;margin-top:1.1rem;font-weight:700;text-decoration-thickness:2px;text-underline-offset:5px}
.read:hover{color:var(--plum)}
.empty{padding:3rem var(--pad);border-top:2px solid var(--ink)}


/* ---------- Work page: inside the monitor ---------- */
body.route-dark{background:#2B3550}
body.route-dark main{padding-top:0}
body.route-dark header.site{background:rgba(27,34,56,.72);color:var(--lilac)}
body.route-dark .nav a[aria-current="page"]{border-color:var(--lilac)}
body.route-dark .sound{border-color:var(--lilac)}
body.route-dark footer{background:#2B3550;color:#AAB6C8}
.work-page{min-height:100vh;padding:90px var(--pad) 5rem;color:var(--lilac);background:#2B3550 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><rect width='2' height='44' fill='%23303B59'/><circle cx='22' cy='22' r='2' fill='%23344064'/></svg>")}
.wp-head{position:relative;margin-bottom:1rem}
.wp-cur{display:inline-block;width:.5em;height:.82em;background:#7FD0C4;margin-left:.12em;vertical-align:-.06em;animation:blink 1s steps(1) infinite}
.wp-hint{position:fixed;z-index:3;right:var(--pad);bottom:22px;font-family:'Caveat',cursive;font-weight:700;font-size:1.35rem;color:var(--lilac);opacity:.85;pointer-events:none}
.wg-intro{max-width:46rem;margin-bottom:2.4rem;padding-top:2.4rem;border-top:2px dashed rgba(233,225,245,.25)}
.wg-cmd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#7FD0C4;font-size:.95rem;margin-bottom:.7rem}
.wg-intro h2{font-family:var(--body);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.2;color:var(--lilac)}
.wg-intro p:last-child{color:#AAB6C8;margin-top:.6rem;max-width:52ch}
.wp-head h1{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:clamp(2.6rem,7vw,6.2rem);line-height:1;letter-spacing:-.02em;color:var(--lilac)}
.wp-all{display:inline-block;margin-top:1rem;font-weight:700;color:var(--lilac)}
.wgroup + .wgroup{margin-top:4.5rem}
.win-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 2.4rem}
.win{position:relative;min-width:0;display:flex;flex-direction:column;background:#121826;border-radius:18px;color:inherit;text-decoration:none;box-shadow:0 26px 50px rgba(6,10,22,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
.win:hover,.win:focus-visible{transform:translateY(-8px) rotate(-.5deg);box-shadow:0 36px 60px rgba(6,10,22,.55)}
.win-bar{display:flex;align-items:center;gap:.45rem;padding:.8rem 1rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;color:#8A97A8}
.win-bar i{width:11px;height:11px;border-radius:50%;background:#C9637E}
.win-bar i:nth-child(2){background:#F2C14E}.win-bar i:nth-child(3){background:#7FD0C4}
.win-bar span{margin-left:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-when{font-weight:700;font-size:.85rem;color:#7FD0C4!important;margin-bottom:.4rem}
.win.wide{grid-column:1/-1;display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto 1fr}
.win.wide .win-bar{grid-column:1/-1}
.win.wide .win-art{margin-bottom:.8rem}
.win.wide .win-body{align-self:center}
.win.wide .win-body h2{font-size:clamp(2.6rem,5vw,4.6rem)}
.win-bar em{margin-left:auto;font-style:normal;color:#AAB6C8;font-family:var(--body);font-weight:700}
.win-art{margin:0 .8rem;border-radius:10px;overflow:hidden;aspect-ratio:16/9}
.win-art svg{width:100%;height:100%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.win:hover .win-art svg{transform:scale(1.04)}
.win-body{padding:1.3rem 1.4rem 1.5rem}
.win-body h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:.9;color:var(--lilac)}
.win-body p{color:#C3CCDA;max-width:48ch}
.win-open{display:inline-block;margin-top:1rem;font-weight:700;color:var(--lamp);border-bottom:2px solid var(--lamp)}
.win-note{position:absolute;top:-18px;right:-12px;z-index:2;font-family:'Caveat',cursive;font-weight:700;font-size:1.35rem;line-height:1.1;color:var(--ink);padding:.55rem .9rem .45rem;max-width:12rem;box-shadow:0 10px 20px rgba(6,10,22,.35)}
.win-note::before{content:"";position:absolute;top:-8px;left:50%;translate:-50% 0;width:44px;height:14px;background:rgba(233,225,245,.6);rotate:-4deg}
@media (max-width:860px){.win.wide{display:flex}.win-grid{grid-template-columns:minmax(0,1fr)}.win-note{right:8px}.work-page{padding-top:110px}}


/* ---------- Case study: inside the monitor ---------- */
.case{padding-top:60px}
.cd-back{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#7FD0C4;text-decoration:none;font-size:1rem;padding:.3rem .6rem;margin-left:-.6rem;border-radius:8px}
.cd-back:hover{background:rgba(127,208,196,.12)}
.case-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#8A97A8;font-size:clamp(.95rem,1.4vw,1.15rem);margin:1rem 0 1.2rem;overflow-wrap:anywhere}
.case-path b{color:var(--lilac)}
.case-top2{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start;margin-bottom:2.4rem}
.case-h{font-family:var(--body);font-weight:700;font-size:clamp(2rem,3.6vw,3rem);line-height:1.1;color:var(--lilac)}
.case-sum{color:#C3CCDA;font-size:1.1rem;max-width:52ch;margin:.8rem 0 .4rem}
.case-links{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}
.btn-lamp{display:inline-block;background:var(--lamp);color:var(--ink);font-weight:700;padding:.6rem 1.1rem;border-radius:999px;text-decoration:none}
.btn-lamp:hover{background:#fff}
.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.6rem;background:#121826;border-radius:16px;padding:1.3rem 1.4rem}
.case-facts dt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:#7FD0C4}
.case-facts dd{color:var(--lilac);font-size:.95rem;margin-top:.2rem}
.case-win{max-width:1100px;margin:0 auto 3.5rem;cursor:default}
.case-win:hover{transform:none}
.case-art{margin:0 .8rem .8rem;border-radius:10px;overflow:hidden;aspect-ratio:16/10;max-height:calc(100vh - 160px)}
.case-art svg{width:100%;height:100%}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-bottom:3rem}
.case-sec{background:rgba(18,24,38,.55);border:1px solid rgba(233,225,245,.1);border-radius:16px;padding:1.5rem 1.6rem}
.sec-k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#7FD0C4;font-size:.95rem;margin-bottom:.8rem}
.case-sec p:not(.sec-k){color:#D5DCE6;max-width:60ch}
.case-sec p + p{margin-top:.9rem}
.case-impact{margin-bottom:2.5rem}
.notes{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1rem}
.note{width:min(250px,100%);color:var(--ink);padding:1.1rem 1.2rem 1.2rem;box-shadow:0 14px 26px rgba(6,10,22,.35)}
.note b{display:block;font-family:'Caveat',cursive;font-size:2.6rem;line-height:1}
.note span{display:block;margin-top:.4rem;font-size:.92rem}
.conf{font-family:'Caveat',cursive;font-weight:700;font-size:1.3rem;color:#AAB6C8;margin-bottom:2.5rem}
.next-win{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;background:#121826;border-radius:16px;padding:1.3rem 1.6rem;text-decoration:none;color:var(--lilac);transition:transform .3s}
.next-win:hover{transform:translateX(6px)}
.nx-k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#8A97A8}
.nx-t{font-weight:700;font-size:1.4rem;color:var(--lamp)}
@media (hover:none),(max-width:860px){.case,.work-page{padding-top:96px}}
@media (max-width:860px){.case-top2,.case-grid{grid-template-columns:1fr;gap:1.6rem}.case-facts{grid-template-columns:1fr 1fr}}


/* ---------- Info: inside the monitor ---------- */
.info2 .wp-head{margin-bottom:2.4rem}
.ab-hero{display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:3rem;align-items:start;margin-bottom:4.5rem}
.ab-photo{cursor:default;position:sticky;top:40px}.ab-photo:hover{transform:none}
.ab-img{margin:0 .8rem .8rem;border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#F2C14E 0,#C9637E 45%,#4B2E6F 100%)}
.ab-img{display:flex;align-items:flex-end;justify-content:center;padding-top:1.6rem}
.ab-img img{display:block;width:92%;height:auto}
.i-sec.ach-sec .sec-k{text-align:center}
.i-sec.ach-sec .notes{justify-content:center}
.ab-state{font-family:var(--body);font-weight:700;font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.15;color:var(--lilac);margin-bottom:1.2rem}
.ab-p{color:#C3CCDA;max-width:60ch}
.ab-p + .ab-p{margin-top:.9rem}
.ab-lead{color:var(--lilac)!important;font-size:1.12rem;font-weight:700}
.ab-now{font-family:'Caveat',cursive;font-weight:700;font-size:1.55rem;line-height:1.25;color:var(--lamp);rotate:-1deg;margin-top:1.2rem;max-width:34ch}
.ab-now span{color:#7FD0C4}
.btn-ghost{display:inline-block;border:2px solid var(--lilac);color:var(--lilac);font-weight:700;padding:.5rem 1.1rem;border-radius:999px;text-decoration:none}
.btn-ghost:hover{background:var(--lilac);color:var(--ink)}
.i-sec{margin-bottom:4.5rem}
.log{list-style:none;position:relative;margin-top:1.2rem;padding-left:1.6rem;border-left:2px dashed rgba(233,225,245,.25)}
.log li{position:relative;display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;padding-bottom:1.6rem}
.log li::before{content:"";position:absolute;left:calc(-1.6rem - 8px);top:.35rem;width:14px;height:14px;border-radius:50%;background:#3A4566;border:2px solid var(--lilac)}
.log li.now::before{background:var(--lamp);border-color:var(--lamp);box-shadow:0 0 0 6px rgba(242,193,78,.2)}
.log-when{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#7FD0C4;font-size:.9rem;padding-top:.15rem}
.log-card{background:rgba(18,24,38,.55);border:1px solid rgba(233,225,245,.1);border-radius:14px;padding:1.1rem 1.3rem}
.log-card h3{font-size:1.1rem;color:var(--lilac)}
.log-card p{color:#C3CCDA;margin-top:.3rem;max-width:62ch}
.info2 .tl-links a{color:var(--lamp);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;font-weight:400}
.kit2{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1.2rem}
.kit-col{background:rgba(18,24,38,.55);border:1px solid rgba(233,225,245,.1);border-radius:16px;padding:1.3rem}
.kit-col h3{color:var(--lilac);margin-bottom:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip2{color:#fff;font-size:.88rem;font-weight:700;padding:.3rem .7rem;border-radius:8px}
.note.ach b{font-family:var(--body);font-size:1.15rem;line-height:1.25}
.note.ach{width:min(280px,100%)}
.contact2 .win{cursor:default;max-width:900px}.contact2 .win:hover{transform:none}
.c2-body{padding:.6rem 1.6rem 1.8rem}
.c2-body h2{font-family:var(--body);font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.25;color:var(--lilac);max-width:30ch}
.info2 .contact-row{margin-top:1.4rem}
.info2 .email{color:var(--lamp)}
.info2 .socials a{color:var(--lilac)}
@media (max-width:860px){.ab-photo{position:static}.ab-hero,.kit2{grid-template-columns:1fr}.ab-photo{max-width:360px}.log li{grid-template-columns:1fr;gap:.5rem}}

/* ---------- Case study ---------- */
.back{font-weight:700;text-decoration:none;display:inline-block;margin-bottom:1.2rem}
.back:hover{color:var(--plum)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.stat b{font-family:var(--display);font-weight:900;font-size:clamp(3rem,5.5vw,4.6rem);line-height:.9;display:block;color:var(--plum)}
.stat span{display:block;margin-top:.4rem;max-width:24ch}
.trace{background:var(--ink);color:#E4EBE8;border-radius:22px;padding:1.4rem 1.6rem 1.6rem;font-size:.95rem}
.trace ol{list-style:none;display:grid;gap:.55rem;min-height:12rem}
.trace li{display:grid;grid-template-columns:5.2rem 1fr;gap:.8rem;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.trace li.on{opacity:1;transform:none}
.trace .k{font-weight:700}
.trace li[data-k="thinks"] .k{color:#B7A6D6}
.trace li[data-k="thinks"] .v{font-style:italic;color:#B9C3CF}
.trace li[data-k="calls"] .k{color:var(--lamp)}
.trace li[data-k="calls"] .v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem}
.trace li[data-k="gets"] .k{color:#7FD0C4}
.trace li[data-k="answers"] .k{color:#fff}
.trace li[data-k="answers"] .v{color:#fff;font-weight:700}
.next{display:block;text-decoration:none;padding:2.5rem var(--pad) 3.5rem;border-top:2px solid var(--ink);margin-top:3rem}
.next small{font-weight:700;color:var(--ink-soft);font-size:1rem}
.next span{display:block;font-family:var(--display);font-weight:900;overflow-wrap:anywhere;font-size:clamp(2.8rem,13vw,11rem);line-height:.82;text-transform:uppercase;transition:color .25s, transform .4s}
.next:hover span{color:var(--plum);transform:translateX(.5rem)}

/* ---------- Info ---------- */
@media (max-width:860px){.info-hero{grid-template-columns:1fr;padding:0 var(--pad)}.info-hero .statement{padding:0}.info-photo{max-width:360px}}
.statement{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,6vw,5.4rem);line-height:.92;max-width:19ch;padding:0 var(--pad) 2.5rem}
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.kit h3{font-size:1rem;margin-bottom:.4rem}
.kit ul{list-style:none;color:var(--ink-soft)}
@media (max-width:760px){.wg-head{grid-template-columns:1fr;gap:.4rem}}
.tl-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem}
.tl-links a{font-weight:700;color:var(--plum);text-decoration-thickness:2px;text-underline-offset:4px}
.contact{padding:3rem var(--pad) 4rem;border-top:2px solid var(--ink);background:var(--plum);color:var(--lilac)}
.contact h2{font-family:var(--display);font-weight:900;font-size:clamp(2.8rem,11vw,9rem);line-height:.82;text-transform:uppercase;color:var(--lamp)}
.contact-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.6rem}
.email{font-size:clamp(1.3rem,3vw,2rem);font-weight:700;word-break:break-all}
.contact .btn{border-color:var(--lamp);color:var(--lamp)}
.contact .btn:hover{background:var(--lamp);color:var(--ink)}
.socials{display:flex;gap:1.5rem;margin-top:1.6rem;font-weight:700}
footer{padding:1.4rem var(--pad);color:var(--ink-soft);font-size:.85rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media (max-width:860px){
  .project,.project.flip{grid-template-columns:1fr}
  .project.flip .visual{order:0}
  .case-meta{grid-template-columns:1fr 1fr}
  .section,.info-grid{grid-template-columns:1fr;gap:1.2rem}
  .stats{grid-template-columns:1fr}
  .frames{grid-template-columns:1fr}
  .kit{grid-template-columns:1fr 1fr}
  .case-hero{aspect-ratio:4/3}
}
.project > *, .section > *, .info-grid > *, .frames > *, .case-meta > *, .stats > *{min-width:0}
.trace .v{overflow-wrap:anywhere}
.project h2{overflow-wrap:normal;word-break:keep-all}
@media (max-width:560px){.project h2{overflow-wrap:anywhere;word-break:normal}}
.logo-short{display:none}
@media (max-width:560px){
  header.site{padding:.8rem var(--pad)}
  .nav{gap:1rem}
  .sound{padding:.35rem .6rem}
  .sound .lbl{display:none}
  .logo{font-size:1.6rem}
  .logo-full{display:none}
  .logo-short{display:inline}
  main{padding-top:68px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .intro-name span{opacity:1;transform:none}
}

.win-body h2{overflow-wrap:anywhere}
html,body{max-width:100%;overflow-x:clip}
@media (hover:none),(max-width:760px){.wp-hint{position:static;margin:-.2rem 0 1.6rem;font-size:1.2rem;color:var(--lamp)}}

/* ---------- Scroll progress bar ---------- */
#progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:70;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--lamp),#E879A6 55%,#7FD0C4);box-shadow:0 0 10px rgba(232,121,166,.6);transition:opacity .3s}
#progress.idle{opacity:0}
/* "Hire me" stands out a little in the menu */
.nav a.nav-hire{color:var(--lamp)}
body:not(.route-dark):not(.in-room) .nav a.nav-hire{color:var(--plum)}

/* ---------- Bug Squash game ---------- */
.game-bob{animation:bob2 1.6s ease-in-out infinite}
@keyframes bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.game{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:16px;background:rgba(8,12,24,.72);backdrop-filter:blur(4px)}
.game.open{display:grid;animation:cardIn .3s ease}
body.game-open header.site{transform:translateY(-110%)}
.game-win{width:min(920px,100%);background:#121826;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.5);color:var(--lilac);overflow:hidden}
.game-x{margin-left:auto;color:#C3CCDA;font-weight:700;font-size:.85rem;text-decoration:underline;font-family:var(--body)}
.game-hud{display:flex;gap:1.4rem;flex-wrap:wrap;padding:.2rem 1.1rem .8rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;color:#8A97A8}
.game-hud b{color:var(--lamp);font-size:1.05rem}
.game-area{position:relative;margin:0 .8rem .8rem;height:min(60vh,520px);border-radius:12px;overflow:hidden;background:#1B2A3F;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}
.game-area.slowmo{box-shadow:inset 0 0 0 3px #F2C14E, inset 0 0 60px rgba(242,193,78,.25)}
.game-code{position:absolute;inset:0;padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(.75rem,1.6vw,.95rem);line-height:2;color:#4E6178;pointer-events:none}
.game-code span{color:#33445A;margin-right:1.2em}
.g-item{position:absolute;left:0;top:0;will-change:translate;pointer-events:none}
.g-item svg{display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.p1tag{position:absolute;top:-10px;right:-14px;background:#C9637E;color:#fff;font:700 10px/1 var(--body);padding:3px 5px;border-radius:6px;rotate:0deg}
.g-coffee{animation:glow 1s ease-in-out infinite alternate}
@keyframes glow{to{filter:drop-shadow(0 0 10px rgba(242,193,78,.9))}}
.g-hiss{animation:hiss .3s ease}
@keyframes hiss{50%{scale:1.2}}
.g-splat{position:absolute;left:0;top:0;border-radius:50%;opacity:.7;pointer-events:none;animation:splat .6s ease-out forwards;clip-path:polygon(50% 0,62% 30%,95% 20%,72% 48%,100% 70%,64% 66%,55% 100%,42% 68%,8% 85%,30% 52%,0 28%,36% 32%)}
@keyframes splat{from{transform:scale(.3)}30%{transform:scale(1.15)}to{transform:scale(1);opacity:0}}
.g-pop{position:absolute;transform:translate(-50%,-50%);font-family:'Caveat',cursive;font-weight:700;font-size:1.6rem;color:#7FD0C4;pointer-events:none;animation:pop .7s ease-out forwards;white-space:nowrap}
.g-pop.g-p1{color:#F4A6C0;font-size:2rem}.g-pop.g-good{color:var(--lamp)}.g-pop.g-bad{color:#F87171;font-size:1.9rem}.g-pop.g-miss{color:#4E6178;font-size:1.1rem}
@keyframes pop{to{transform:translate(-50%,-160%);opacity:0}}
#gScreen{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;text-align:center;padding:1.4rem;background:rgba(18,24,38,.88);cursor:default}
#gScreen[hidden]{display:none}
#gScreen h2{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(2rem,5vw,3.2rem);color:var(--lamp);letter-spacing:.04em}
#gScreen p{color:#C3CCDA;max-width:44ch}
.g-big{font-family:'Caveat',cursive;font-size:4rem!important;line-height:1;color:var(--lilac)!important}
.g-big small{font-size:1.6rem;color:#8A97A8}
.g-rules{list-style:none;display:grid;gap:.45rem;text-align:left;color:#D5DCE6;font-size:.95rem}
.g-rules li{display:flex;align-items:center;gap:.7rem}
.g-ico{width:28px;height:28px;flex:none}.g-ico.g-cat{width:40px}
.g-btns{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
@media (max-width:600px){.game{padding:8px}.game-area{height:66vh}.game-hud{gap:.9rem;font-size:.8rem}}