/* Workstation v3: bold board-game map. Sticker tiles, marker routes, a little agent with eyes. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&display=swap');
:root{
  --bg:#ffffff;--bg-2:#f6f6f3;--surface:#ffffff;--surface-2:#efefea;--surface-3:#e2e2dc;
  --line:rgba(20,20,20,.12);--line-2:rgba(20,20,20,.2);--line-3:rgba(20,20,20,.4);
  --text:#141414;--text-dim:#3b3b38;--text-mute:#62625d;--text-faint:#a3a39c;
  --ink:#141414;--bad:#d43a1f;--sim-bg:#ffffff;--sim-wall:rgba(20,20,20,.85);--sim-grid:rgba(20,20,20,.08);--sim-start:#141414;
  --c-ml:#b9a3ff;--c-algo:#ffa94d;--c-swe:#c6f05a;--d-ml:#5b3fc4;--d-algo:#a3540b;--d-swe:#557a0a;--c-data:#39e0a8;--c-ai:#6cc6ff;--c-safe:#ff6a4d;--c-rl:#ffd84a;--c-me:#ff9ad5;
  --d-data:#0b7a55;--d-ai:#1f64a8;--d-safe:#c4341a;--d-rl:#8a6200;--d-me:#a8307a;
  --font-display:'Bricolage Grotesque','Geist',system-ui,sans-serif;
  --o:2.5px solid var(--ink);--sh:6px 6px 0 var(--ink);
}
html,body{height:100%}
body{overflow:hidden;background:var(--bg);color:var(--text)}
.ws{display:grid;grid-template-rows:68px minmax(0,1fr);height:100vh;height:100dvh;background-image:radial-gradient(rgba(20,20,20,.13) 1px,transparent 1.2px);background-size:22px 22px}
.ws a{color:inherit}

/* top bar */
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 22px}
.bar__brand{justify-self:start;display:inline-flex;align-items:center;gap:10px;font:800 18px var(--font-display);letter-spacing:-0.02em;white-space:nowrap;background:var(--c-rl);border:var(--o);box-shadow:4px 4px 0 var(--ink);padding:6px 14px;border-radius:10px;transform:rotate(-1.5deg)}
.bar__brand i{display:none}
.bar__nav{display:flex;gap:6px}
.bar__nav button{font:700 14.5px var(--font-display);color:var(--ink);background:#fff;border:var(--o);padding:7px 15px;border-radius:999px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .15s}
.bar__nav button:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--c-ai)}
.bar__nav button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.bar__right{justify-self:end;display:flex;align-items:center;gap:14px;white-space:nowrap}
.bar__clock{font:500 12.5px var(--font-mono);color:var(--text-mute)}
.bar__cv{font:700 14.5px var(--font-display);background:var(--ink);color:#fff!important;border:var(--o);border-radius:999px;padding:8px 16px;box-shadow:3px 3px 0 var(--c-safe);transition:transform .15s,box-shadow .15s}
.bar__cv:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--c-safe)}

/* main */
.ws__main{display:grid;grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:22px;padding:6px 22px 22px;min-height:0}
.intro{overflow-y:auto;padding:28px 28px 24px;display:flex;flex-direction:column;gap:16px;background:#fff;border:var(--o);border-radius:20px;box-shadow:var(--sh);scrollbar-width:thin}
.intro__tag{align-self:flex-start;font:700 13px var(--font-display);letter-spacing:.02em;background:var(--c-ai);border:var(--o);border-radius:8px;padding:5px 11px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink)}
.intro h1{font:800 clamp(2.1rem,3vw,2.9rem)/.98 var(--font-display);letter-spacing:-0.04em;text-wrap:balance}
.intro h1 em{font-style:normal;background:linear-gradient(transparent 58%,var(--c-rl) 58%,var(--c-rl) 92%,transparent 92%);padding:0 2px}
.intro p{font-size:15px;line-height:1.62;color:var(--text-dim);text-wrap:pretty}
.intro__open{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:var(--o);border-radius:999px;background:var(--c-data);font:700 14px var(--font-display);transform:rotate(1.2deg);box-shadow:3px 3px 0 var(--ink)}
.intro__open i{width:9px;height:9px;border-radius:50%;background:var(--ink);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.intro__cta{display:flex;flex-wrap:wrap;gap:10px}
.intro__cta .btn{font:700 15px var(--font-display);padding:11px 18px;border-radius:12px;border:var(--o);box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .15s}
.intro__cta .btn--primary{background:var(--c-safe);color:var(--ink)}
.intro__cta .btn--ghost{background:#fff;color:var(--ink)}
.intro__cta .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);color:var(--ink)}
.intro__cta .btn--primary:hover{background:var(--c-rl)}
.intro__cta .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.legend{display:grid;gap:8px;padding-top:16px;border-top:2px dashed var(--line-3)}
.legend__h{font:700 13px var(--font-display);color:var(--text-mute)}
.legend__row{display:flex;flex-wrap:wrap;gap:7px}
.legend button{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--font-sans);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;padding:5px 12px 5px 6px;cursor:pointer;transition:background .15s,transform .15s}
.legend button i{width:16px;height:16px;border-radius:50%;background:var(--k);border:2px solid var(--ink)}
.legend button:hover,.legend button[aria-pressed="true"]{background:var(--k);transform:rotate(-2deg)}
.intro__foot{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:6px 16px;font:600 14px var(--font-display)}
.intro__foot a{border-bottom:2px solid var(--ink)}
.intro__foot a:hover{background:var(--c-rl)}

/* scene */
.scene{position:relative;min-height:0;border:var(--o);border-radius:20px;background:#fff;box-shadow:var(--sh);overflow:hidden}
.scene__head{position:absolute;left:22px;top:18px;right:22px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.scene__title{font:800 22px var(--font-display);letter-spacing:-0.03em;white-space:nowrap}
@media (max-width:1320px){.scene__title span{display:none}}
.scene__title span{font:500 14px var(--font-sans);color:var(--text-mute);margin-left:12px;letter-spacing:0}
.scene__hint{font:600 13px var(--font-display);background:var(--c-me);border:2px solid var(--ink);border-radius:8px;padding:4px 10px;transform:rotate(2deg)}
.stage{position:absolute;inset:62px 22px 66px}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:manipulation}
.hud{position:absolute;left:22px;right:22px;bottom:16px;z-index:4;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:600 13.5px var(--font-display)}
.hud>span{white-space:nowrap;padding:6px 12px;border:2px solid var(--ink);border-radius:999px;background:#fff}
.hud b{font:600 13px var(--font-mono)}
.hud .hud__msg{border:0;background:var(--c-safe);border:2px solid var(--ink)}
.hud .hud__msg:empty{display:none}
.hud__toggle{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font:700 13.5px var(--font-display);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;cursor:pointer;padding:5px 12px 5px 6px}
.hud__toggle i{position:relative;width:34px;height:20px;border-radius:999px;background:var(--surface-2);border:2px solid var(--ink);transition:background .2s}
.hud__toggle i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--ink);transition:transform .2s var(--ease)}
.hud__toggle[aria-pressed="true"] i{background:var(--c-data)}
.hud__toggle[aria-pressed="true"] i::after{transform:translateX(14px)}

/* sticker tiles */
.tile{position:absolute;z-index:2;container-type:size;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--ink);--k:var(--c-me)}
.tile__in{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:14px;background:var(--k);border:var(--o);box-shadow:5px 5px 0 var(--ink);transform:rotate(var(--rot,0deg));transition:transform .22s var(--ease),box-shadow .22s,opacity .25s,filter .25s}
.tile__top{display:flex;align-items:center;gap:8px}
.tile__n{font:800 13px var(--font-mono);background:var(--ink);color:#fff;border-radius:6px;padding:1px 6px}
.tile__cat{font:600 11.5px var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__t{font:800 clamp(12px,min(10.5cqw,18cqh),20px)/1.14 var(--font-display);letter-spacing:-0.025em;text-wrap:balance;padding-bottom:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile__m{margin-top:auto;font:600 11.5px var(--font-mono)}
.tile__door{display:none}
.tile:hover .tile__in,.tile:focus-visible .tile__in,.tile.is-target .tile__in{transform:rotate(0deg) translate(-3px,-4px) scale(1.03);box-shadow:9px 10px 0 var(--ink)}
.tile:active .tile__in{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.tile:focus-visible{outline:none}
.tile.is-visited .tile__top::after{content:"";margin-left:auto;width:14px;height:14px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 3px #fff}
.tile.is-dim .tile__in{opacity:.22;filter:grayscale(1)}
.tile--me .tile__in{background:#fff;background-image:repeating-linear-gradient(-45deg,transparent 0 9px,color-mix(in srgb,var(--k) 55%,transparent) 9px 12px)}
@container (max-height:96px){.tile__m{display:none}}
@container (max-height:74px){.tile__cat{display:none}.tile__in{padding:8px 10px}.tile__t{-webkit-line-clamp:1;display:block;white-space:nowrap;text-overflow:ellipsis}}
@container (max-width:150px){.tile__cat{display:none}.tile__in{padding:9px 10px}}
.agent-tip{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,calc(-100% - 20px)) rotate(-3deg);background:var(--ink);color:#fff;font:700 14px var(--font-display);padding:7px 13px;border-radius:12px;white-space:nowrap;transition:opacity .4s}
.agent-tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:var(--ink);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.agent-tip.off{opacity:0}
.stlist{display:none}

/* windows */
.win{position:fixed;z-index:50;display:flex;flex-direction:column;background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:10px 10px 0 var(--ink);overflow:hidden;outline:none;--k:var(--c-me);--kd:var(--d-me)}
.win[hidden]{display:none}
.win.is-in{animation:winIn .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes winIn{from{opacity:0;transform:scale(.4) rotate(-4deg)}to{opacity:1;transform:none}}
.win.is-max{left:14px!important;top:76px!important;width:calc(100vw - 32px)!important;height:calc(100vh - 92px)!important}
.win__bar{flex:none;display:flex;align-items:center;gap:12px;height:56px;padding:0 10px 0 18px;background:var(--k);border-bottom:3px solid var(--ink);cursor:grab;user-select:none;touch-action:none}
.win__bar:active{cursor:grabbing}
.win__n{font:800 13px var(--font-mono);color:#fff;background:var(--ink);border-radius:6px;padding:2px 7px}
.win__t{font:800 17px var(--font-display);letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win__btns{margin-left:auto;display:flex;gap:6px}
.win__btns button{width:34px;height:34px;display:grid;place-items:center;background:#fff;border:2.5px solid var(--ink);border-radius:9px;color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.win__btns button:hover{background:var(--ink);color:#fff}
.win__btns svg{width:15px;height:15px}
.win__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(22px,3vw,40px)}

/* content inside windows */
.win{--accent:var(--kd);--accent-2:var(--kd);--accent-dim:var(--kd);--accent-soft:color-mix(in srgb,var(--k) 30%,transparent)}
.win h1,.win h2,.win h3,.win h4{font-family:var(--font-display);font-weight:800;letter-spacing:-0.03em}
.win .case{display:flex;flex-direction:column;padding:0;border:0}
.win .case__top{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:14px}
.win .case__top .no{font:800 1.3rem var(--font-mono);color:#fff;background:var(--ink);padding:2px 8px;border-radius:8px}
.win .case__badge{background:var(--k);border:2px solid var(--ink);color:var(--ink)}
.win .case h3{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1}
.win .case__nums li::before{background:var(--ink);height:3px;width:10px}
.win .ev{position:static;background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--k)}
.win .ev__bar{background:color-mix(in srgb,var(--k) 25%,#fff);border-bottom:2px solid var(--ink)}
.win .ev__blk{border-top-color:var(--line-2)}
.win .bar--hi .bar__f,.win .ev.in .yr span{background:var(--ink)}
.win .bar__f{background:var(--k)}
.win .bar__t{background:var(--surface-2)}
.win .gauge__pin{background:var(--ink)}
.win .gauge__band{background:color-mix(in srgb,var(--k) 40%,transparent);border-color:var(--ink)}
.win .flow span{border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink)}
.win .flow span.k{background:var(--k)}
.win .steps{border:2px solid var(--ink);border-radius:10px}
.win .steps div:last-child{background:var(--k);color:var(--ink)}
.win .proc>div{border:2px solid var(--ink);background:#fff}
.win .pane{background:#fff;color:var(--ink)}
.win .panes{border-bottom:2px solid var(--ink)}
.win .pane+.pane{border-left:2px solid var(--ink)}
.win .proof figcaption{background:linear-gradient(to top,rgba(10,10,10,.92) 15%,rgba(10,10,10,.5) 65%,transparent)}
.win .proof__txt{color:#eee}.win .proof__live{color:#fff}
.win .proj__link{border:2px solid var(--ink);border-radius:10px;padding:8px 13px;background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.win .proj__link:hover{background:var(--k);color:var(--ink)}
.win .case__more summary::before{border:2px solid var(--ink);color:var(--ink);background:var(--k)}
.win .section-head{margin-bottom:28px}
.win .section-head h2{font-size:clamp(1.8rem,3vw,2.6rem)}
.win .exp{grid-template-columns:130px minmax(0,1fr)}
.win .exp__org{color:var(--kd)}
.win .exp ul li::before{background:var(--ink)}
.win .about{grid-template-columns:minmax(180px,240px) minmax(0,1fr)}
.win .about__media img{border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--k)}
.win .skill-card{grid-template-columns:190px minmax(0,1fr)}
.win .contact-in h2{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:.98;max-width:15ch}
.win .contact-in .contact__lead{margin-top:16px;color:var(--text-dim);max-width:52ch}
.win .links{margin-top:28px;border-top:2.5px solid var(--ink)}
.win .link-card{color:var(--ink);border-bottom:2px solid var(--line-2);font-weight:600}
.win .link-card--accent{color:var(--kd)}
.win .sim{max-width:520px;margin:0 auto;justify-self:auto}
.win .sim__stage{border:2.5px solid var(--ink)}
.win .w-index{margin-bottom:40px;border-top:2.5px solid var(--ink)}
.win .w-index a{grid-template-columns:40px minmax(0,1.4fr) minmax(0,1fr) minmax(0,.9fr)}
.win .w-index a:hover{background:var(--c-rl);color:var(--ink)}
.win .w-index .s{color:var(--ink)}
.win .shot__img{background:var(--surface-2)}
@media (max-width:700px){.win .exp,.win .about,.win .skill-card{grid-template-columns:minmax(0,1fr)}.win .w-index a{grid-template-columns:32px minmax(0,1fr)}}

/* dock */
.dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9000;display:flex;gap:6px;padding:6px;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);max-width:calc(100vw - 24px);overflow-x:auto}
.dock[hidden]{display:none}
.dock button{display:inline-flex;align-items:center;gap:8px;font:700 13.5px var(--font-display);color:var(--ink);background:none;border:2px solid transparent;border-radius:10px;padding:6px 11px;cursor:pointer;white-space:nowrap}
.dock button:hover,.dock button.is-front{border-color:var(--ink);background:var(--k,var(--c-me))}
.dock button i{width:12px;height:12px;border-radius:50%;background:var(--k,var(--c-me));border:2px solid var(--ink)}
.dock__all{color:var(--text-mute)!important}
.lightbox{z-index:20000}

@media (max-width:1180px){.bar__nav button{padding:6px 11px;font-size:13.5px}}
@media (max-width:1100px) and (min-width:861px){body{overflow-x:hidden;overflow-y:auto}.ws{height:auto;min-height:100vh;grid-template-rows:68px auto}.ws__main{grid-template-columns:minmax(0,1fr)}.intro{overflow:visible}.intro p{max-width:72ch}.intro__foot{display:none}.scene{height:max(580px,min(80vh,700px))}}
@media (max-width:860px){
  body{overflow:auto}
  .ws{height:auto;min-height:100vh;grid-template-rows:64px auto}
  .bar{grid-template-columns:1fr auto;padding:0 14px;position:sticky;top:0;z-index:40;background:#fff;border-bottom:2.5px solid var(--ink)}
  .bar__nav,.bar__clock{display:none}
  .ws__main{grid-template-columns:minmax(0,1fr);padding:16px 14px 28px;gap:18px}
  .intro{overflow:visible;padding:22px 20px}
  .intro__foot{display:none}
  .scene{padding-bottom:16px}
  .scene__head{position:static;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:4px}
  .scene__title span{display:block;margin:4px 0 0}
  .stage{position:relative;inset:auto;margin:12px 12px 0;aspect-ratio:16/8.4}
  .tile__in{padding:0;border-radius:7px;border-width:2px;box-shadow:2px 2px 0 var(--ink);align-items:center;justify-content:center}
  .tile__cat,.tile__t,.tile__m{display:none}
  .tile__n{font-size:10px;padding:0 4px}
  .tile--me .tile__top::before{content:attr(data-s);font:700 9.5px var(--font-display)}
  .tile.is-visited .tile__top::after{display:none}
  .hud{position:static;padding:12px 12px 0}
  .stlist{display:grid;gap:12px;padding:16px 12px 4px}
  .stlist button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;align-items:center;text-align:left;padding:14px 16px;border-radius:14px;border:var(--o);background:var(--k);box-shadow:4px 4px 0 var(--ink);color:var(--ink);font:inherit;cursor:pointer}
  .stlist button:nth-child(odd){transform:rotate(-.6deg)}.stlist button:nth-child(even){transform:rotate(.6deg)}
  .stlist .n{font:800 12px var(--font-mono);background:var(--ink);color:#fff;border-radius:6px;padding:1px 6px}
  .stlist .t{font:800 17px var(--font-display);letter-spacing:-0.02em}
  .stlist .m{grid-column:2;font:600 12px var(--font-mono)}
  .stlist .go{grid-row:1/span 2;grid-column:3;font:800 13px var(--font-display)}
  .win{left:0!important;top:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;border-radius:0;border:0;box-shadow:none}
  .win.is-in{animation:sheetIn .32s var(--ease-out)}
  @keyframes sheetIn{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
  .win__bar{cursor:default}
  .win__btns .win__max{display:none}
  .dock{display:none}
}
@media (prefers-reduced-motion:reduce){.win.is-in{animation:none}.intro__open i{animation:none}}

.tile__t{min-height:0;flex:none;max-height:calc(2 * 1.14em + 1px)}

/* no tilts: keep labels and tiles straight */
.bar__brand,.intro__tag,.intro__open,.scene__hint,.agent-tip,.legend button:hover,.legend button[aria-pressed="true"],.stlist button:nth-child(odd),.stlist button:nth-child(even){transform:none!important}
.tile__in{transform:none}
.tile:hover .tile__in,.tile:focus-visible .tile__in,.tile.is-target .tile__in{transform:translate(-3px,-4px) scale(1.03)}
.agent-tip{transform:translate(-50%,calc(-100% - 20px))!important}

/* board (replaces the town map) */
.scene{overflow-y:auto;scrollbar-width:thin}
.board{padding:26px 26px 30px;display:grid;gap:16px}
.board__h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.board__h h2{font:800 26px var(--font-display);letter-spacing:-0.03em}
.board__h span{font-size:14px;color:var(--text-mute)}
.board__h--sm{margin-top:10px}.board__h--sm h2{font-size:19px}
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fcard,.mcard,.game,.cvbox{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;font:inherit;color:var(--ink);background:var(--k,#fff);border:var(--o);border-radius:16px;box-shadow:5px 5px 0 var(--ink);padding:18px 20px;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s,opacity .25s,filter .25s}
.fcard:hover,.mcard:hover,.game:hover,.cvbox:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink);color:var(--ink)}
.fcard:active,.mcard:active,.game:active,.cvbox:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.fcard.is-dim,.mcard.is-dim{opacity:.25;filter:grayscale(1)}
.fcard{min-height:230px;padding:22px 24px}
.fcard__top{display:flex;align-items:center;gap:10px}
.fcard__cat{font:600 12.5px var(--font-sans)}
.fcard__t{font:800 clamp(1.3rem,1.9vw,1.75rem)/1.05 var(--font-display);letter-spacing:-0.03em;text-wrap:balance}
.fcard__d{font-size:14.5px;line-height:1.5;max-width:44ch;text-wrap:pretty}
.fcard__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:2px solid var(--ink)}
.fcard__big{display:grid;font:800 clamp(1.6rem,2.4vw,2.2rem)/1 var(--font-display);letter-spacing:-0.03em}
.fcard__big small{font:600 12px var(--font-mono);letter-spacing:0;margin-top:6px}
.fcard__go{font:700 13.5px var(--font-display);background:var(--ink);color:#fff;border-radius:999px;padding:7px 13px;white-space:nowrap}
.mcard__t{font:800 18px/1.1 var(--font-display);letter-spacing:-0.02em}
.mcard__m{font:600 12.5px var(--font-mono)}
.extras{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.game{flex-direction:row;align-items:center;gap:18px;--k:var(--c-rl)}
.game__grid{flex:none;display:grid;grid-template-columns:repeat(4,16px);gap:3px;padding:6px;background:#fff;border:2px solid var(--ink);border-radius:8px}
.game__grid i{width:16px;height:16px;border-radius:3px;background:var(--surface-2)}
.game__grid i:nth-child(1){background:var(--ink);border-radius:50%}
.game__grid i:nth-child(6),.game__grid i:nth-child(11){background:var(--ink);opacity:.85}
.game__grid i:nth-child(2),.game__grid i:nth-child(3),.game__grid i:nth-child(7),.game__grid i:nth-child(12){background:var(--c-data)}
.game__grid i:nth-child(16){background:#fff;border:2.5px solid var(--ink)}
.game__txt{display:grid;gap:4px;min-width:0}
.game__play{margin-left:auto;font:800 15px var(--font-display);background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px}
.cvbox{--k:#fff;justify-content:center}
.cvbox svg{width:26px;height:26px}
.chips-row{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.chips-row button{font:700 15px var(--font-display);color:var(--ink);background:#fff;border:var(--o);border-radius:999px;padding:9px 18px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .15s}
.chips-row button:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--c-me)}
.more{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1240px){.more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px) and (min-width:861px){.scene{height:auto}}
@media (max-width:760px){.feat,.more,.extras{grid-template-columns:minmax(0,1fr)}.board{padding:18px 14px 22px}.game{flex-wrap:wrap}.fcard{min-height:0}}
@media (max-width:860px){.scene{overflow:visible}}
/* mini game window in the sticker style */
.win .sim{max-width:540px}
.win .sim__bar{border-bottom:2.5px solid var(--ink)}
.win .sim__bar::before{content:"Fig. 1";font:800 13px var(--font-mono);background:var(--ink);color:#fff;border-radius:6px;padding:2px 7px}
.win .sim__bar .t{font:700 15px var(--font-display);color:var(--ink)}
.win .sim__stage{border:var(--o);border-radius:14px;box-shadow:5px 5px 0 var(--k);background:#fff}
.win .sim__hud{border-bottom:2px solid var(--ink);font:600 12px var(--font-mono);color:var(--ink)}
.win .sim__hud b{color:var(--ink)}
.win .sim__hud button{font:700 13.5px var(--font-display);color:var(--ink);background:var(--k);border:2px solid var(--ink);border-radius:999px;padding:5px 14px;box-shadow:2px 2px 0 var(--ink)}
.win .sim__phase[data-state="learned"]{color:var(--d-rl)}
.win .sim__hint{border:2px solid var(--ink);background:#fff;color:var(--ink);font-weight:700}
.win .sim__cap{color:var(--text-dim)}
.win .sim__cap b{font-family:var(--font-display);font-weight:800}
.bar__cv{cursor:pointer}
.win .about__list li::before{background:var(--ink)}.win .about__list a{color:var(--ink);border-bottom-color:var(--k)}.win .about__list a:hover{background:var(--k)}.win .about__lead{font-family:var(--font-display);font-weight:800;letter-spacing:-0.03em}
.intro__body{display:grid;gap:12px}.intro__body p{margin:0}.intro__body .about__list{margin:2px 0 4px;gap:8px}.intro__body .about__list li{font-size:14.5px;color:var(--text-dim)}.intro__body .about__list li::before{background:var(--ink)}.intro__body .about__list a{color:var(--ink);border-bottom:2px solid var(--c-rl)}.intro__body .about__list a:hover{background:var(--c-rl)}.intro__body .about__edu{margin-top:2px;color:var(--ink)!important}
.fcard__foot{flex-wrap:wrap;align-items:center}.fcard__big{font-size:clamp(1.4rem,2vw,1.9rem);white-space:nowrap}.fcard__big small{white-space:normal}
.edus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ecard{display:flex;flex-direction:column;gap:6px;padding:16px 20px;background:var(--k);color:var(--ink);border:var(--o);border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
.ecard__d{font-size:14px;line-height:1.45}
@media (max-width:760px){.edus{grid-template-columns:minmax(0,1fr)}}

/* vault run game */
.vault{display:grid;gap:14px;padding:20px 22px 18px;background:#fff;border:var(--o);border-radius:18px;box-shadow:6px 6px 0 var(--c-rl)}
.vault__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:end}
.vault__head h2{font:800 30px/1 var(--font-display);letter-spacing:-0.035em;margin-top:4px}
.vault__head p{font-size:14px;line-height:1.55;color:var(--text-dim);max-width:62ch;text-wrap:pretty}
.vault__stage{position:relative;aspect-ratio:17/11;border:2px solid var(--ink);border-radius:12px;background:#fbfbf8;overflow:hidden}
.vault__stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.vault__hud{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font:600 13px var(--font-display)}
.vault__hud b{font:600 12.5px var(--font-mono)}
.vault__phase{padding:5px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--surface-2)}
.vault__phase[data-state="mid"]{background:var(--c-rl)}
.vault__phase[data-state="done"]{background:var(--c-data)}
.vault__msg{color:var(--d-safe)}
.vault__msg:empty{display:none}
.vault__ctl{margin-left:auto;display:flex;gap:10px;align-items:center}
.seg{display:flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.seg button{font:700 13px var(--font-mono);background:#fff;color:var(--ink);border:0;padding:5px 11px;cursor:pointer}
.seg button+button{border-left:2px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.vault__new{font:700 13.5px var(--font-display);background:var(--c-rl);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:6px 14px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.vault__new:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.vault__key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--text-mute)}
.vault__key span{display:inline-flex;align-items:center;gap:6px}
.lg{width:12px;height:12px;border:2px solid var(--ink);border-radius:3px}
.lg--key,.lg--gate{background:var(--c-rl)}.lg--key{border-radius:50%}
.lg--trap{background:var(--c-safe);transform:rotate(45deg);border-radius:2px}
.lg--vault{background:#fff}
.lg--v1{background:var(--c-data);border-color:transparent}.lg--v2{background:var(--c-ai);border-color:transparent}
.extras{grid-template-columns:minmax(0,1fr)}
.cvbox{flex-direction:row;align-items:center;gap:14px;justify-content:flex-start}
@media (max-width:760px){.vault{padding:16px}.vault__head{grid-template-columns:minmax(0,1fr)}.vault__ctl{margin-left:0}}

/* inline Q-learning sim */
.playbox{padding:20px 22px;background:#fff;border:var(--o);border-radius:18px;box-shadow:6px 6px 0 var(--c-rl)}
.playbox .sim{max-width:560px;margin:0 auto}
.playbox .sim__bar{border-bottom:2.5px solid var(--ink)}
.playbox .sim__bar::before{content:"Mini game";font:800 12px var(--font-mono);background:var(--ink);color:#fff;border-radius:6px;padding:2px 7px}
.playbox .sim__bar .t{font:700 15px var(--font-display);color:var(--ink)}
.playbox .sim__stage{border:var(--o);border-radius:14px;background:#fff}
.playbox .sim__hud{border-bottom:2px solid var(--ink);font:600 12px var(--font-mono);color:var(--ink)}
.playbox .sim__hud b{color:var(--ink)}
.playbox .sim__hud button{font:700 13.5px var(--font-display);color:var(--ink);background:var(--c-rl);border:2px solid var(--ink);border-radius:999px;padding:5px 14px;box-shadow:2px 2px 0 var(--ink)}
.playbox .sim__phase[data-state="learned"]{color:var(--d-rl)}
.playbox .sim__hint{border:2px solid var(--ink);background:#fff;color:var(--ink);font-weight:700}
.playbox .sim__cap{color:var(--text-dim)}
.playbox{padding:16px 18px}.playbox .sim{max-width:360px}.playbox .sim__cap{font-size:13px}
.playbox{justify-self:start;width:fit-content;max-width:100%;padding:12px 14px}.playbox .sim{width:340px;max-width:100%;margin:0}.playbox .sim__stage{margin-top:10px}.playbox .sim__cap{padding-top:10px}
.playbox{justify-self:stretch;width:auto;display:flex;align-items:center;gap:28px}
.playbox .sim{flex:0 0 340px;width:340px;max-width:100%;margin:0;justify-self:auto}
.playbox__cap{flex:1 1 0;min-width:0;max-width:46ch;font-size:14.5px;line-height:1.6;color:var(--text-dim);text-wrap:pretty}
@media (max-width:760px){.playbox{flex-direction:column;align-items:stretch;gap:12px}.playbox .sim{flex-basis:auto;width:100%}}
.win .sim__bar::before{content:"Mini agent"}

/* featured work as 3D books */
.feat{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;padding:8px 26px 26px 6px}
.book{--T:30px;position:relative;display:block;aspect-ratio:3/4.15;min-height:290px;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;perspective:1100px;transition:opacity .25s,filter .25s}
.book::after{content:"";position:absolute;left:6%;right:-8%;bottom:-14px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,20,20,.38),transparent);filter:blur(3px);transition:transform .5s var(--ease),opacity .5s;z-index:0}
.book__3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-28deg) rotateX(4deg);transition:transform .6s var(--ease)}
.book__cover,.book__back,.book__page1{position:absolute;inset:0;border-radius:3px 9px 9px 3px}
.book__cover{z-index:2;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px 26px;transform:translateZ(calc(var(--T) / 2));transform-origin:left center;transition:transform .6s var(--ease);
  background:linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(255,255,255,.18) 5px,rgba(0,0,0,.06) 9px,rgba(0,0,0,.16) 12px,rgba(255,255,255,.1) 15px,transparent 22px),linear-gradient(160deg,rgba(255,255,255,.22),transparent 45%,rgba(0,0,0,.08)),var(--k);
  border:2px solid var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);backface-visibility:hidden}
.book__back{transform:translateZ(calc(var(--T) / -2));background:color-mix(in srgb,var(--k) 55%,var(--ink));border:2px solid var(--ink)}
.book__pages{position:absolute;top:5px;bottom:5px;left:calc(100% - var(--T) / 2 - 5px);width:var(--T);transform:rotateY(90deg);background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.12)),repeating-linear-gradient(90deg,#fbfaf5 0 2px,#ddd8cb 2px 3px);border-top:1px solid #cfc9ba;border-bottom:1px solid #cfc9ba}
.book__page1{top:5px;bottom:5px;right:5px;left:2px;transform:translateZ(calc(var(--T) / 2 - 2px));background:linear-gradient(90deg,rgba(0,0,0,.14),transparent 18px),#fbfaf5;border-radius:2px 6px 6px 2px;display:flex;align-items:center;justify-content:center}
.book__page1 span{font:800 15px var(--font-display);color:var(--ink);border-bottom:3px solid var(--k);padding-bottom:2px;opacity:0;transition:opacity .3s .15s}
.book__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.book__dept{font:700 11px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:3px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.book__sn{flex:none;font:800 12px var(--font-mono);background:var(--ink);color:#fff;border-radius:6px;padding:2px 6px}
.book__t{font:800 clamp(1.1rem,1.5vw,1.45rem)/1.05 var(--font-display);letter-spacing:-0.03em;text-wrap:balance;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.book__d{font-size:13.5px;line-height:1.45;text-wrap:pretty}
.book__tech{margin-top:auto;display:flex;flex-wrap:wrap;gap:5px}
.book__tech i{font:600 11.5px var(--font-mono);font-style:normal;background:var(--ink);color:#fff;border-radius:5px;padding:3px 7px}
.book:hover .book__3d,.book:focus-visible .book__3d{transform:rotateY(-14deg) rotateX(2deg) translateY(-8px)}
.book:hover .book__cover,.book:focus-visible .book__cover{transform:translateZ(calc(var(--T) / 2)) rotateY(-32deg)}
.book:hover .book__page1 span,.book:focus-visible .book__page1 span{opacity:1}
.book:hover::after{transform:scaleX(.9) translateY(6px);opacity:.7}
.book:focus-visible{outline:none}
.book.is-dim{opacity:.25;filter:grayscale(1)}
@media (max-width:1320px){.feat{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}.book{aspect-ratio:auto;min-height:300px}}
@media (max-width:560px){.feat{grid-template-columns:minmax(0,1fr)}.book{min-height:280px}}
@media (prefers-reduced-motion:reduce){.book__3d,.book__cover{transition:none}}
.more{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:1240px){.more{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:760px){.more{grid-template-columns:minmax(0,1fr)}}

.bar__dl{display:grid;place-items:center;width:38px;height:38px;border:var(--o);border-radius:50%;background:#fff;color:var(--ink)!important;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .15s}
.bar__dl svg{width:17px;height:17px}
.bar__dl:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--c-rl)}
.cvbox{align-self:start;justify-self:start}
.cvbox .mcard__m{margin-left:4px}
@media (max-width:860px){
  .ws{grid-template-rows:auto auto}
  .bar{grid-template-columns:1fr auto;row-gap:10px;padding:10px 14px 10px}
  .bar__nav{display:flex;grid-column:1/-1;grid-row:2;overflow-x:auto;scrollbar-width:none;padding:2px 4px 6px 2px;gap:8px;-webkit-overflow-scrolling:touch}
  .bar__nav::-webkit-scrollbar{display:none}
  .bar__nav button{flex:none;padding:8px 16px;font-size:14px}
  .bar__brand{font-size:16px;padding:5px 12px}
}
button.bar__brand{font:800 18px var(--font-display);color:var(--ink);cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s}
button.bar__brand:hover{background:var(--c-me);transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 var(--ink)}
@media (max-width:860px){button.bar__brand{font-size:16px}}

/* experience timeline */
.xp{list-style:none;display:grid;gap:0;position:relative}
.xp__item{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:0 0 30px;position:relative}
.xp__item::before{content:"";position:absolute;left:162px;top:10px;bottom:0;width:2.5px;background:var(--ink)}
.xp__item:last-child::before{bottom:auto;height:12px}
.xp__when{font:600 12.5px var(--font-mono);color:var(--text-mute);padding-top:6px;display:grid;gap:6px;align-content:start;justify-items:start}
.xp__now{font:700 11px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--c-data);border:2px solid var(--ink);border-radius:999px;padding:2px 8px}
.xp__main{position:relative;padding-left:26px}
.xp__main::before{content:"";position:absolute;left:-17px;top:6px;width:16px;height:16px;border-radius:50%;background:#fff;border:2.5px solid var(--ink)}
.xp__item--now .xp__main::before{background:var(--c-rl)}
.xp__role{font:800 clamp(1.25rem,2vw,1.6rem)/1.1 var(--font-display);letter-spacing:-0.025em}
.xp__org{margin-top:4px;font-weight:600;font-size:15px}
.xp__org span{font-weight:400;color:var(--text-mute)}
.xp__sum{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--text-dim);max-width:64ch;text-wrap:pretty}
.xp__impact{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.xp__impact div{display:grid;padding:8px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--c-data);box-shadow:3px 3px 0 var(--ink)}
.xp__impact b{font:800 18px var(--font-display);letter-spacing:-0.02em}
.xp__impact span{font-size:12.5px}
.xp__more{margin-top:12px}
.xp__more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:700 14px var(--font-display);padding:5px 12px 5px 6px;border:2px solid var(--ink);border-radius:999px;background:#fff}
.xp__more summary::-webkit-details-marker{display:none}
.xp__more summary::before{content:"+";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;line-height:1}
.xp__more[open] summary::before{content:"\2212"}
.xp__more summary:hover{background:var(--c-rl)}
.xp__more ul{list-style:none;display:grid;gap:9px;margin-top:14px;max-width:70ch}
.xp__more li{position:relative;padding-left:20px;font-size:15px;line-height:1.6;color:var(--text-dim);text-wrap:pretty}
.xp__more li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:3px;background:var(--ink)}
.xp__foot{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.xp__lab{font:700 12px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);margin-right:4px}
.xp__tag{font:600 12px var(--font-mono);background:var(--ink);color:#fff;border-radius:5px;padding:3px 8px}
.xp__link{margin-left:8px;font:700 13.5px var(--font-display);border-bottom:2px solid var(--ink)}
.xp__link:hover{background:var(--c-rl)}
@media (max-width:700px){.xp__item{grid-template-columns:minmax(0,1fr);gap:6px;padding-left:26px}.xp__item::before{left:7px}.xp__main{padding-left:0}.xp__main::before{left:-26px;top:-24px}.xp__when{grid-auto-flow:column;align-items:center}}

/* colour only on featured books */
:root{--neutral:#efeee9}
.mcard,.ecard,.game,.cvbox{background:#fff!important}
.bar__brand,.intro__tag,.intro__open,.intro__cta .btn--primary,.scene__hint,.xp__now,.xp__impact div,.vault__new,.playbox .sim__hud button{background:var(--neutral)!important}
.intro__cta .btn--primary{background:var(--ink)!important;color:#fff!important}
.intro__cta .btn--primary:hover{color:#fff!important}
.intro h1 em{background:linear-gradient(transparent 58%,var(--neutral) 58%,var(--neutral) 92%,transparent 92%)}
.bar__cv,.bar__cv:hover{box-shadow:3px 3px 0 var(--text-faint)}
.vault,.playbox{box-shadow:6px 6px 0 var(--ink)}
.bar__nav button:hover,.intro__foot a:hover,.chips-row button:hover,.bar__dl:hover,button.bar__brand:hover,.xp__more summary:hover,.win .w-index a:hover{background:var(--neutral)!important}
.xp__item--now .xp__main::before,.hud__toggle[aria-pressed="true"] i{background:var(--ink)}
.bar__cv{background:#fff!important;color:var(--ink)!important;box-shadow:3px 3px 0 var(--ink)!important}
.bar__cv:hover{background:var(--neutral)!important;box-shadow:5px 5px 0 var(--ink)!important}
@media (max-width:860px){
.bar{row-gap:8px;padding:10px 14px}
.bar__brand{font-size:15px!important;padding:4px 10px!important;box-shadow:2px 2px 0 var(--ink)!important}
.bar__cv{font-size:13.5px;padding:6px 13px;box-shadow:2px 2px 0 var(--ink)!important}
.bar__nav{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0;overflow:hidden;border:2px solid var(--ink);border-radius:10px}
.bar__nav button{border:0;border-radius:0;box-shadow:none;padding:8px 4px;font-size:13px;text-align:center;background:#fff}
.bar__nav button+button{border-left:2px solid var(--ink)}
.bar__nav button:hover,.bar__nav button:active{transform:none;box-shadow:none}
}
/* featured case study structure */
.win .fstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 6px}
.win .fstats div{display:grid;gap:4px;align-content:start;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--k);box-shadow:3px 3px 0 var(--ink)}
.win .fstats b{font:800 clamp(1.25rem,2.2vw,1.6rem)/1.05 var(--font-display);letter-spacing:-0.03em}
.win .fstats span{font-size:13px;line-height:1.4}
.win .fsec{margin-top:20px}
.win .fsec h4{font-size:15px;letter-spacing:-0.01em;margin-bottom:6px}
.win .fsec p{font-size:15px;line-height:1.6;color:var(--text-dim);text-wrap:pretty}
.win .fflow{list-style:none;counter-reset:f;display:grid;gap:8px;padding:0}
.win .fflow li{counter-increment:f;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-size:14.5px;line-height:1.5}
.win .fflow li::before{content:counter(f);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);background:#fff;font:700 12px var(--font-mono)}
.win .fflow code{font:600 13px var(--font-mono);background:var(--neutral);padding:1px 5px;border-radius:4px}
.win .fdec{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.win .fdec div{display:grid;gap:4px;align-content:start;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:#fff}
.win .fdec b{font:800 14.5px var(--font-display)}
.win .fdec span{font-size:14px;line-height:1.5;color:var(--text-dim)}
.win .ftable{overflow-x:auto;border:2px solid var(--ink);border-radius:12px}
.win .ftable table{width:100%;border-collapse:collapse;font-size:14px}
.win .ftable th{text-align:left;font:700 12px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;background:var(--neutral);padding:9px 12px;border-bottom:2px solid var(--ink)}
.win .ftable td{padding:9px 12px;border-top:1px solid var(--line-2);vertical-align:top;line-height:1.45}
.win .ftable tr:first-child td{border-top:0}
.win .fnote{font-size:13px!important;margin-top:8px;color:var(--text-mute)!important}
.win .fstory{margin:22px 0 0;padding:16px 18px;border:2.5px solid var(--ink);border-radius:14px;background:var(--k);box-shadow:4px 4px 0 var(--ink)}
.win .fstory span{font:700 11.5px var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.win .fstory p{margin-top:6px;font:600 15.5px/1.55 var(--font-sans);color:var(--ink);text-wrap:pretty}
.win .case__more{margin-top:20px}
.book__d{font-size:12.5px;line-height:1.4}
.book__dept{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-size:10px!important;line-height:1.25;border-radius:8px!important}
.book__row{align-items:flex-start}
.win .privacy{max-width:68ch;padding:8px 4px 16px}.win .privacy h3{font-size:clamp(1.6rem,3vw,2.2rem)}.win .privacy a{color:var(--ink);border-bottom:2px solid var(--ink)}.win .privacy code{font:600 13px var(--font-mono);background:var(--neutral);padding:1px 5px;border-radius:4px}
.book__cover{overflow:hidden}
.book__d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;flex:none}
.book__tech{flex-wrap:wrap;min-width:0}.book__tech i{font-size:10.5px;padding:2px 6px;white-space:nowrap}
.xp__item{padding-bottom:56px}.xp__item:last-child{padding-bottom:8px}
.xp__item+.xp__item .xp__main{padding-top:28px;border-top:2px dashed var(--line-3)}
.xp__item+.xp__item .xp__main::before{top:34px}.xp__item+.xp__item .xp__when{padding-top:34px}
@media (max-width:700px){.xp__item{padding-bottom:40px}.xp__item+.xp__item .xp__when{padding-top:24px}.xp__item+.xp__item .xp__main{padding-top:0;border-top:0}}
/* projects folder */
.folder{position:relative;display:block;width:100%;max-width:560px;padding:22px 0 0;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.folder__tab{position:absolute;top:0;left:0;height:30px;padding:5px 18px 0;font:700 13px var(--font-display);background:var(--neutral);border:var(--o);border-bottom:0;border-radius:12px 12px 0 0}
.folder__body{position:relative;display:grid;gap:8px;padding:20px 22px 18px;background:var(--neutral);border:var(--o);border-radius:0 16px 16px 16px;box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.folder:hover .folder__body{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.folder:active .folder__body{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.folder__t{font:800 22px/1.1 var(--font-display);letter-spacing:-0.025em}
.folder__m{font-size:14px;color:var(--text-dim)}
.folder__list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.folder__list i{font:600 12px var(--font-mono);font-style:normal;background:#fff;border:2px solid var(--ink);border-radius:6px;padding:3px 8px}
.folder__go{justify-self:start;margin-top:6px;font:700 13.5px var(--font-display);background:var(--ink);color:#fff;border-radius:999px;padding:7px 14px}
#w-projects .win__body{padding:22px}
#w-projects .more{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
/* sim speed */
.sim__speed{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.playbox .sim__hud .sim__speed button,.sim__speed button{font:700 12.5px var(--font-display);color:var(--ink);background:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:5px 11px;cursor:pointer}
.sim__speed button+button{border-left:2px solid var(--ink)!important}
.sim__speed button[aria-pressed="true"]{background:var(--ink)!important;color:#fff}
/* mac-style folder */
.mfolder{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin:14px 0 6px;padding:10px 14px 8px;border:0;border-radius:14px;background:none;font:inherit;color:var(--ink);cursor:pointer;transition:background .15s}
.mfolder:hover{background:rgba(20,20,20,.06)}
.mfolder:hover .mfolder__icon{transform:translateY(-3px)}
.mfolder:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mfolder__icon{position:relative;display:block;width:132px;height:104px;transition:transform .2s var(--ease)}
.mfolder__back{position:absolute;left:0;right:0;top:8px;bottom:0;border-radius:8px;background:#4aa8e8}
.mfolder__back::before{content:"";position:absolute;left:0;top:-8px;width:46px;height:16px;border-radius:7px 9px 0 0;background:#4aa8e8}
.mfolder__paper{position:absolute;left:8px;right:8px;top:18px;height:30px;border-radius:4px;background:#f4f8fb}
.mfolder__front{position:absolute;left:0;right:0;top:26px;bottom:0;border-radius:6px 6px 8px 8px;background:linear-gradient(180deg,#8fd0ff 0%,#6cbcf5 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 14px -6px rgba(20,60,110,.45)}
.mfolder__label{font:800 18px var(--font-display);letter-spacing:-0.01em}
.mfolder{align-self:flex-start;justify-self:start;width:max-content}
/* subtle unique book colours */
:root{--b1:#e8d7a8;--bd1:#7a5d12;--b2:#b9d8c6;--bd2:#2f6b4c;--b3:#bccde3;--bd3:#2f4f7a;--b4:#dcc3d6;--bd4:#74406a}
:root{--b1:#ffd166;--bd1:#8a6200;--b2:#6fdcae;--bd2:#0b7a55;--b3:#8fc4ff;--bd3:#1f64a8;--b4:#ff9fb8;--bd4:#a8305a}
/* folder row */
.deskrow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 28px;margin:14px 0 6px}
.deskrow .mfolder{margin:0}
.mfolder__label{text-align:center}
.mfile{display:inline-flex;flex-direction:column;align-items:center;gap:10px;padding:10px 14px 8px;border-radius:14px;color:var(--ink)!important;transition:background .15s}
.mfile:hover{background:rgba(20,20,20,.06)}
.mfile:hover .mfile__icon{transform:translateY(-3px)}
.mfile__icon{position:relative;display:block;width:82px;height:104px;margin:0 25px;background:#fff;border:1.5px solid #cfd3d8;border-radius:6px;clip-path:polygon(0 0,72% 0,100% 22%,100% 100%,0 100%);box-shadow:0 6px 14px -8px rgba(0,0,0,.35);transition:transform .2s var(--ease)}
.mfile__icon::after{content:"";position:absolute;top:-1px;right:-1px;width:28%;height:22%;background:#e6e8eb;border-bottom-left-radius:5px}
.mfile__tag{position:absolute;left:10px;bottom:14px;font:800 13px var(--font-display);color:#fff;background:#d43a1f;border-radius:4px;padding:2px 7px}
.lightbox__cap{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.lightbox__dl{font:700 14px var(--font-display);color:var(--ink)!important;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:7px 15px;box-shadow:3px 3px 0 var(--ink)}
.lightbox__dl:hover{background:var(--neutral)}
@media (max-width:760px){.deskrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:12px}.deskrow .mfolder__icon{width:104px;height:82px}.deskrow .mfile__icon{width:66px;height:82px;margin:0 19px}.mfolder__label{font-size:15px}}
/* nav pushed right */
@media (min-width:861px){.bar{grid-template-columns:auto minmax(0,1fr)!important}.bar__right{gap:12px}}
@media (max-width:860px){.bar__right{display:contents}.bar__cv{justify-self:end}.bar__nav{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
#w-education .win__body{padding:24px 26px 30px}
.deskrow{gap:8px 18px}
.bar__clock{margin-right:10px;padding-right:18px;border-right:2px solid var(--line-3)}

.bar__theme{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.bar__theme:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.bar__theme svg{width:17px;height:17px}.bar__theme .i-sun{display:none}
html.is-dark .bar__theme .i-sun{display:block}html.is-dark .bar__theme .i-moon{display:none}

/* mobile header: mail + menu */
.bar{position:relative}
.bar__mail,.bar__menu{display:none;place-items:center;width:44px;height:44px;border-radius:12px;border:2px solid var(--ink);background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.bar__mail svg,.bar__menu svg{width:20px;height:20px}
.bar__menu .i-close{display:none}.bar__menu.is-open .i-close{display:block}.bar__menu.is-open .i-open{display:none}
.mnav{position:absolute;right:12px;top:calc(100% + 6px);z-index:60;display:grid;min-width:210px;padding:6px;border:2px solid var(--ink);border-radius:14px;background:#fff;box-shadow:5px 5px 0 var(--ink)}
.mnav[hidden]{display:none}
.mnav button,.mnav a{display:block;width:100%;text-align:left;font:600 16px var(--font-display);color:var(--ink);background:none;border:0;border-radius:9px;padding:12px 14px;cursor:pointer}
.mnav button:hover,.mnav a:hover{background:var(--neutral)}
.mnav a{border-top:2px solid var(--line-2);border-radius:0 0 9px 9px;margin-top:4px}
@media (max-width:860px){
.bar{display:flex!important;align-items:center;justify-content:space-between;flex-wrap:nowrap!important}
.bar__right{display:flex!important;align-items:center;gap:10px;width:auto!important}
.bar__nav,.bar__clock,.bar__cv{display:none!important}
.bar__mail,.bar__menu{display:grid}
.bar__theme{width:44px;height:44px;border-radius:12px}
}

/* full book descriptions on laptop */
.book__d{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;font-size:clamp(11.5px,.82vw,13px)!important;line-height:1.38!important}
.book__cover{gap:8px}
.book__tech{margin-top:auto}
.intro__open i{display:none}

@media (min-width:1321px){.book{min-height:350px!important;aspect-ratio:auto!important}.book__cover{padding:16px 15px!important}.book__t{font-size:clamp(1.02rem,1.3vw,1.3rem)!important}.book__tech i{font-size:10px!important;padding:2px 5px!important}}

/* fit left panel on laptop heights */
@media (min-width:1101px){
.intro{padding:22px 26px 20px;gap:12px}
.intro h1{font-size:clamp(1.9rem,min(2.6vw,4.6vh),2.7rem)}
.intro p,.intro__body p{font-size:clamp(13.5px,1.75vh,15px);line-height:1.52}
.intro__body{gap:9px}
.intro__body .about__list{gap:5px;margin:0 0 2px}
.intro__body .about__list li{font-size:clamp(13px,1.7vh,14.5px);line-height:1.45}
}
@media (min-width:1101px) and (max-height:860px){
.intro{padding:18px 24px 16px;gap:10px}
.intro__tag{font-size:12px;padding:4px 10px}
.intro h1{font-size:clamp(1.7rem,4.2vh,2.3rem)}
.intro p,.intro__body p{line-height:1.46}
}

@media (min-width:1101px){.intro{padding-top:30px;gap:15px}.intro__body{gap:11px}.intro__body .about__list{gap:7px}}
@media (min-width:1101px) and (max-height:860px){.intro{padding-top:24px;gap:12px}}

@media (min-width:1101px){.intro{padding-bottom:30px;gap:13px}.intro__body{gap:10px}.intro__body .about__list{gap:6px}.intro__open{flex:none;font-size:13.5px;padding:7px 14px;margin-bottom:4px}}
@media (min-width:1101px) and (max-height:860px){.intro{padding-top:22px;gap:11px}}

/* restore book proportions */
@media (min-width:1321px){.book{min-height:290px!important;aspect-ratio:3/4.15!important}.book__cover{padding:14px 14px 14px 18px!important;gap:6px!important}.book__t{font-size:clamp(.98rem,1.2vw,1.25rem)!important;padding-bottom:7px!important}.book__d{font-size:clamp(11px,.74vw,12.5px)!important;line-height:1.34!important}}
@media (min-width:1101px) and (max-width:1560px){.book__tech{display:none!important}}

/* experience: line ends at last dot */
.xp__item:last-child::before{bottom:auto;height:32px}
@media (max-width:700px){.xp__item:last-child::before{height:30px}}
/* book tech as inline bullets on laptops */
@media (min-width:1101px) and (max-width:1560px){
.book__tech{display:flex!important;flex-wrap:wrap;gap:0 4px;margin-top:auto;font:600 10.5px/1.4 var(--font-mono);letter-spacing:.02em}
.book__tech i{background:none!important;border:0!important;padding:0!important;color:inherit!important;font:inherit!important;white-space:nowrap}
.book__tech i+i::before{content:"·";margin-right:4px;opacity:.7}
}
/* index right column: tech stack */
.w-index .s{font:500 12px var(--font-mono);text-align:right}

@media (min-width:1101px) and (max-width:1560px){.book__tech{flex-wrap:nowrap!important;gap:0 3px!important;font-size:clamp(8.5px,.62vw,10.5px)!important;letter-spacing:0!important;overflow:hidden}.book__tech i+i::before{margin-right:3px}}

/* book tech as plain bullets at every width */
.book__tech{display:flex!important;flex-wrap:nowrap!important;gap:0 4px!important;margin-top:auto;font:600 10.5px/1.4 var(--font-mono)!important;letter-spacing:0!important;overflow:hidden}
.book .book__tech i{background:none!important;border:0!important;padding:0!important;color:#141414!important;font:inherit!important;white-space:nowrap}
.book__tech i+i::before{content:"·";margin-right:4px;opacity:.7}

/* experience as defined cards */
.xp{display:grid!important;gap:18px!important}
.xp__item{display:grid!important;grid-template-columns:150px minmax(0,1fr)!important;gap:22px!important;padding:22px 24px!important;border:2px solid var(--ink);border-radius:16px;background:var(--surface,#fff);box-shadow:4px 4px 0 var(--ink)}
.xp__item::before,.xp__item:last-child::before,.xp__main::before,.xp__item+.xp__item .xp__main::before{display:none!important;content:none!important}
.xp__main,.xp__item+.xp__item .xp__main{padding:0!important;border:0!important}
.xp__when,.xp__item+.xp__item .xp__when{padding:2px 0 0!important;border:0!important}
.xp__item:last-child{padding-bottom:22px!important}
@media (max-width:700px){
.xp{gap:14px!important}
.xp__item{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding:18px 16px!important;box-shadow:3px 3px 0 var(--ink)}
.xp__item:last-child{padding-bottom:18px!important}
.xp__when,.xp__item+.xp__item .xp__when{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;padding:0 0 10px!important;border-bottom:1.5px dashed var(--line-3)!important}
}

@media (hover:none){
.book.is-peek .book__3d{transform:rotateY(-14deg) rotateX(2deg) translateY(-8px)}
.book.is-peek .book__cover{transform:translateZ(calc(var(--T) / 2)) rotateY(-32deg)}
.book.is-peek .book__page1 span{opacity:1}
.book.is-peek::after{transform:scaleX(.9) translateY(6px);opacity:.7}
}