/* jonathangu.com in the Paper look: a dark page where live shaders (/assets/paper/fx.js) carry the colour, a bento
   grid up front with everything on it, and the hand-inked figures on light paper cards further down.
   Every [data-fx] element has a CSS background that echoes its shader: that is what shows without WebGL or JS. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;overflow-x:clip;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color .4s ease,color .4s ease}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.035em;line-height:1}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;left:16px;top:-90px;z-index:90;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 14px/1 var(--sans);text-decoration:none}
.skip-link:focus{top:12px}
.js .no-js{display:none!important}
html:not(.js) .js-only{display:none!important}
.i{width:1.1em;height:1.1em;flex:none;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.i .solid,.i circle.solid{fill:currentColor;stroke:none}
:root{--gut:clamp(12px,1.7vw,24px);--wrap:1440px;--nav-h:60px;--tile-r:clamp(18px,1.6vw,24px)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 max(var(--gut),env(safe-area-inset-left))}

/* ---------- pills: the page's buttons ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 82%,transparent);
  color:var(--text);font:560 14px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .2s var(--ease),background-color .2s,border-color .2s}
.pill:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--text) 34%,transparent);transform:translateY(-1px)}
.pill:active{transform:translateY(1px)}
.pill.solid{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.pill.solid:hover{background:color-mix(in srgb,var(--accent) 86%,#fff)}
.pill.big{min-height:52px;padding:0 24px;font-size:15.5px}
.pill[disabled]{opacity:.5;cursor:default;transform:none}
.inline{color:var(--text);font-weight:560;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--text) 45%,transparent);padding-block:12px}
.inline:hover{text-decoration-color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:100%;padding:6px 11px;border-radius:999px;background:rgba(8,8,12,.74);color:#f3f1ec;
  font:600 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.live-dot{width:7px;height:7px;border-radius:50%;background:#56e39f;box-shadow:0 0 0 3px rgba(86,227,159,.2);flex:none}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;gap:10px;height:var(--nav-h);max-width:1640px;margin:0 auto;padding:0 var(--gut)}
@property --sheen{syntax:"<angle>";inherits:false;initial-value:0deg}
.monogram{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;text-decoration:none;flex:none;
  background:conic-gradient(from var(--sheen) at 38% 30%,#fdfcff,#8e8a9c 14%,#f7f5ff 27%,#4f4b5c 41%,#d9d6e4 55%,#7b7789 70%,#ffffff 84%,#fdfcff);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -2px 3px rgba(0,0,0,.35),0 8px 22px -10px rgba(0,0,0,.9)}
.monogram::after{content:"";position:absolute;inset:3px;border-radius:11px;background:radial-gradient(120% 80% at 30% 0%,rgba(255,255,255,.55),transparent 55%);pointer-events:none}
.monogram span{position:relative;z-index:1;font:800 17px/1 var(--sans);letter-spacing:-.06em;color:#14121a;text-shadow:0 1px 0 rgba(255,255,255,.6)}
@media (prefers-reduced-motion:no-preference){.monogram{animation:sheen 14s linear infinite}.monogram:hover{animation-duration:2.4s}}
@keyframes sheen{to{--sheen:360deg}}
.topnav{display:flex;align-items:center;gap:2px;margin-left:auto;font:520 14px/1 var(--sans)}
.topnav a{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 12px;border-radius:999px;color:var(--muted);text-decoration:none;transition:color .2s,background-color .2s}
.topnav a:hover{color:var(--text);background:var(--surface)}
.lights{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;
  color:var(--text);font:520 14px/1 var(--sans);cursor:pointer;transition:background-color .2s}
.lights:hover{background:var(--surface)}

/* ---------- the front grid ---------- */
.front{display:grid;gap:var(--gap);max-width:1640px;margin:0 auto;padding:0 var(--gut);
  grid-template-columns:repeat(14,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));height:clamp(600px,calc(100svh - var(--nav-h) - 22px),900px);
  grid-template-areas:
    "id id id id gm gm gm gm gm gm ca ca ca ca"
    "id id id id gm gm gm gm gm gm ca ca ca ca"
    "id id id id gm gm gm gm gm gm ev ev mg mg"
    "wk wk wk wk gm gm gm gm gm gm ev ev mg mg"
    "wk wk wk wk mu mu mu sh sh sh fa fa as as"
    "pi pi pi pi mu mu mu sh sh sh fa fa as as"}
.t-id{grid-area:id}.t-game{grid-area:gm}.t-cart{grid-area:ca}.t-ev{grid-area:ev}.t-mg{grid-area:mg}.t-fam{grid-area:fa}
.t-music{grid-area:mu}.t-shelf{grid-area:sh}.t-work{grid-area:wk}.t-pi{grid-area:pi}.t-ask{grid-area:as}

.tile{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border-radius:var(--tile-r);color:#f3f1ec;text-decoration:none;
  background-color:#121119;container-type:inline-size;--mx:50%;--my:50%;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);box-shadow:0 24px 60px -40px rgba(0,0,0,.9)}
.tile>canvas{border-radius:inherit}
/* a hairline edge above the shader, and a soft light that follows the pointer */
.tile::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.08)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.16),rgba(255,255,255,.04) 38%,transparent 62%)}
.tile>:not(canvas):not(img){position:relative;z-index:2}
@media (hover:hover) and (pointer:fine){
  .tile:hover{transform:translateY(-4px);box-shadow:0 34px 70px -34px rgba(0,0,0,.95)}
  .tile:hover::after{opacity:1}
  .tile:hover::before{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.12)}
}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tile:focus-within::before{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.t-title{display:block;font:650 clamp(19px,7.2cqi,30px)/1.02 var(--sans);letter-spacing:-.035em;color:#f3f1ec}
.t-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;width:max-content;font:560 13.5px/1 var(--sans);color:#f3f1ec;text-decoration:none}
.t-link:hover{text-decoration:underline;text-underline-offset:4px}
.t-kicker{display:flex;align-items:center;gap:8px;font:600 11px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
/* glass: the panel text sits on, dark enough over any shader */
.glass{background:rgba(9,9,13,.76);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid rgba(255,255,255,.08);border-radius:calc(var(--tile-r) - 6px)}

/* identity */
.t-id{padding:clamp(8px,1vw,12px);justify-content:flex-end;
  background:radial-gradient(120% 90% at 0% 0%,#5b8cff 0%,transparent 55%),radial-gradient(90% 80% at 100% 10%,#f75092 0%,transparent 60%),radial-gradient(90% 90% at 70% 100%,#ffb36b 0%,transparent 60%),#2a1b6e}
.id-panel{display:flex;flex-direction:column;gap:clamp(8px,2.6cqi,14px);padding:clamp(16px,6cqi,28px);color:var(--text)}
.t-id h1{font:680 clamp(40px,15.5cqi,74px)/.92 var(--sans);letter-spacing:-.055em;color:var(--text);margin-top:2px}
.lead{font:500 clamp(17px,5.6cqi,24px)/1.22 var(--sans);letter-spacing:-.025em;color:var(--text);max-width:19em}
.lead em{font-size:1.14em;line-height:1;color:var(--text)}
.bio{font:400 clamp(13.5px,3.9cqi,15.5px)/1.45 var(--sans);color:var(--muted);max-width:28em}
.bio .inline{color:var(--text)}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.quick .pill{min-height:44px;padding:0 15px;font-size:13.5px}
@container (max-width:350px){
  .t-id .k-more{display:none}
  .quick{gap:5px}
  .quick .pill{padding:0 11px;font-size:13px}
}

/* the game */
.t-game{justify-content:flex-end;background:#160b1c}
.t-game>img,.t-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .55s ease .12s,transform .8s var(--ease),filter .5s ease}
.t-game>img{object-position:50% 45%}
.fx-live>img{opacity:0}
.game-body{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1.8cqi,12px);padding:clamp(16px,4.2cqi,30px);padding-top:70px;
  background:linear-gradient(180deg,transparent 0%,rgba(6,5,10,.6) 26%,rgba(6,5,10,.84) 52%,rgba(6,5,10,.94) 100%)}
.game-name{font:700 clamp(36px,9.6cqi,76px)/.9 var(--sans);letter-spacing:-.055em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.game-line{font:450 clamp(14px,2.6cqi,17px)/1.4 var(--sans);color:#e9e6f0;max-width:30em}
.btn-play{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 26px 0 20px;margin-top:4px;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font:650 clamp(15px,2.7cqi,17px)/1 var(--sans);letter-spacing:-.015em;text-decoration:none;box-shadow:0 10px 40px -8px color-mix(in srgb,var(--accent) 60%,transparent);transition:transform .25s var(--ease),box-shadow .25s}
.btn-play .i{width:18px;height:18px}
.btn-play:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 50px -8px color-mix(in srgb,var(--accent) 75%,transparent)}
.btn-play:focus-visible{outline-color:#fff;outline-offset:4px;border-radius:999px}

/* photos: a shader at rest, the real photo on hover, focus or tap */
.t-photo{justify-content:flex-end;padding:10px;background:#1b1820}
.t-photo>img{filter:saturate(.5) contrast(1.05) brightness(.94)}
.t-ev>img,.t-mg>img{object-position:50% 30%}
.t-cart>img{object-position:50% 28%}
.t-fam>img{object-position:50% 22%}
.cap{align-self:flex-start;display:inline-flex;align-items:center;min-height:30px;padding:6px 12px;border-radius:999px;background:rgba(8,8,12,.78);color:#f6f4ef;
  font:560 12.5px/1.2 var(--sans);letter-spacing:-.005em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .4s var(--ease)}
@media (hover:hover){
  .t-photo:hover>img{opacity:1;filter:none}
  .t-photo:hover .cap{transform:translateY(-2px)}
  .t-game:hover>img{opacity:1;filter:none}
}
.t-photo:focus-visible>img,.t-photo.revealed>img,.t-game:focus-within>img{opacity:1;filter:none}

/* Side A: the play button sits in the smoke ring */
.t-music{justify-content:space-between;align-items:flex-start;padding:clamp(10px,4.5cqi,14px);
  background:radial-gradient(closest-side at 50% 40%,transparent 42%,rgba(255,122,89,.6) 56%,rgba(247,80,146,.35) 70%,transparent 84%),#07060c}
.t-music .m-play{position:absolute;left:50%;top:40%;z-index:2;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:0;background:#f3f1ec;color:#111;cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.8),0 0 0 6px rgba(255,255,255,.1);transition:transform .25s var(--ease),background-color .2s}
.m-play .i{width:24px;height:24px}
.m-play .on-play{margin-left:3px}
.m-play .on-pause,.t-music.playing .m-play .on-play{display:none}
.t-music.playing .m-play .on-pause{display:block}
.m-play:hover{transform:scale(1.07)}
.m-play:focus-visible{outline-color:#fff;border-radius:50%}
.music-panel{align-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title go" "now go";align-items:center;gap:4px 10px;padding:12px 10px 12px 14px;color:var(--text)}
.music-panel .t-title{grid-area:title;font-size:clamp(17px,7cqi,22px);color:var(--text)}
.m-now{grid-area:now;min-width:0;font:500 12.5px/1.3 var(--sans);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-label{font:600 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.m-track{color:var(--text)}
.music-panel .t-go{grid-area:go;position:static;width:44px;height:44px}
.t-go:hover{transform:translateY(3px);background:var(--accent);color:var(--accent-ink)}
.t-music.playing .m-play{animation:beat 1.1s ease-in-out infinite}
.t-music.playing .m-label{color:#56e39f}

/* your shelf */
.t-shelf{gap:8px;padding:clamp(14px,5.6cqi,20px);background:radial-gradient(120% 80% at 100% 0%,rgba(86,227,159,.14),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(91,140,255,.16),transparent 60%),#121119;
  background-image:radial-gradient(120% 80% at 100% 0%,rgba(86,227,159,.14),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(91,140,255,.16),transparent 60%),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:auto,auto,14px 14px}
.t-head{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:#f3f1ec;min-height:44px}
.t-head .chip{background:rgba(255,255,255,.08)}
.t-head:hover .t-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.mini{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px}
.mini a{display:grid;grid-template-columns:24px 44px minmax(0,1fr);align-items:center;gap:10px;min-height:46px;padding:3px 10px 3px 6px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.07);text-decoration:none;color:#f3f1ec;transition:background-color .2s,transform .3s var(--ease)}
.mini a:hover{background:rgba(255,255,255,.12);transform:translateX(2px)}
.mini-rank{font:600 11.5px/1 var(--mono);color:#c9c5d3;text-align:center}
.mini li:first-child .mini-rank{color:var(--accent)}
.mini-thumb{display:block;width:44px;height:34px;border-radius:7px;background:#f2efe7;overflow:hidden}
.mini-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.mini-name{font:560 13px/1.2 var(--sans);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.mini-why{margin-top:auto;font:500 11.5px/1.4 var(--sans);color:#c9c5d3}
.mini a.moved{border-color:color-mix(in srgb,#56e39f 55%,transparent)}

/* work */
.t-work{padding:clamp(8px,1vw,12px);background:radial-gradient(80% 90% at 80% 20%,rgba(107,77,255,.55),transparent 62%),radial-gradient(60% 70% at 10% 100%,rgba(217,204,255,.18),transparent 60%),#06050c}
.work-panel{position:relative;display:flex;flex-direction:column;gap:clamp(6px,2cqi,10px);height:100%;padding:clamp(14px,4.5cqi,20px);background:rgba(9,9,13,.62);color:var(--text);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.work-panel .chip{background:rgba(255,255,255,.1)}
.work-panel .t-title{font-size:clamp(19px,6.2cqi,26px);color:var(--text);padding-right:44px;margin-bottom:auto}
.work-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(6px,2cqi,10px);font:400 clamp(12.5px,3.3cqi,14px)/1.35 var(--sans);color:var(--muted)}
.work-list li{padding-left:16px;position:relative}
.work-list li::before{content:"";position:absolute;left:0;top:.42em;width:6px;height:6px;border-radius:2px;background:#9d8bff}
.work-list b{display:block;font-weight:600;font-size:1.08em;color:var(--text)}
.t-go{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--text);text-decoration:none;transition:transform .35s var(--ease),background-color .2s}
.t-work:hover .t-go{transform:translateY(3px);background:var(--accent);color:var(--accent-ink)}

/* Priced In: the panel on one side, the button out among the drops */
.t-pi{flex-direction:row;align-items:stretch;justify-content:space-between;gap:10px;padding:clamp(8px,1vw,10px);
  background:radial-gradient(14% 34% at 76% 40%,#ff5500 0%,transparent 100%),radial-gradient(12% 30% at 86% 66%,#ffc105 0%,transparent 100%),radial-gradient(10% 28% at 93% 34%,#f585ff 0%,transparent 100%),radial-gradient(14% 36% at 80% 18%,#6e33cc 0%,transparent 100%),#08070d}
.pi-panel{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;flex:0 1 62%;padding:clamp(12px,4cqi,16px);color:var(--text)}
.pi-panel .chip{background:rgba(255,255,255,.1);margin-bottom:2px}
.pi-panel .t-title{font-size:clamp(20px,6.4cqi,26px);color:var(--text)}
.pi-line{font:450 12.5px/1.35 var(--sans);color:var(--muted)}
.pi-play{align-self:center;margin-right:clamp(8px,3cqi,16px);box-shadow:0 10px 30px -8px rgba(0,0,0,.7)}

/* ask the page */
.t-ask{gap:10px;padding:clamp(12px,6cqi,18px);background:linear-gradient(160deg,#1d1c27,#121119 60%);border:0}
.t-ask .t-title{font-size:clamp(17px,9cqi,22px)}
.ask-sub{font:450 12.5px/1.4 var(--sans);color:#c9c5d3}
.t-ask .ask-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:1}
.ask-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);
  font:560 13.5px/1.15 var(--sans);letter-spacing:-.01em;cursor:pointer;transition:transform .2s var(--ease),background-color .2s,border-color .2s}
.ask-btn:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--text) 30%,transparent);transform:translateY(-1px)}
.ask-btn:active{transform:translateY(1px)}
.ask-btn .i{width:18px;height:18px}
.ask-btn.busy .i{animation:spin 1s linear infinite}
.ask-btn.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.t-ask .ask-btn{flex-direction:column;gap:6px;padding:8px 6px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#f3f1ec;font-size:12.5px;text-align:center}
.t-ask .ask-btn:hover{background:rgba(255,255,255,.12)}
.t-ask .ask-btn[data-do="newlook"]{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.t-ask .ask-btn .i{width:20px;height:20px}
/* what the page says back: a toast */
.ask-status{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:80;width:max-content;max-width:min(560px,calc(100vw - 100px));padding:11px 18px;border-radius:16px;
  background:#f3f1ec;color:#16141c;font:520 14px/1.4 var(--sans);box-shadow:0 18px 50px -12px rgba(0,0,0,.7);transform:translate(-50%,16px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,transform .4s var(--ease),visibility 0s linear .4s}
.ask-status.show{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;transition:opacity .3s ease,transform .4s var(--ease)}
.ask-status a{color:#2d3fb8;font-weight:650;padding-block:12px}

/* entrance: the tiles rise in, one after another */
@media (prefers-reduced-motion:no-preference){
  .js .tile{animation:rise .8s var(--ease) backwards;animation-delay:calc(var(--i,0) * 55ms + 60ms)}
}

/* ---------- the deck: more asks and the figures ---------- */
.deck{display:grid;gap:10px;max-width:1640px;margin:var(--gap) auto 0;padding:0 var(--gut)}
.deck-row{display:flex;align-items:center;gap:12px;min-width:0;padding:8px 8px 8px 16px;border-radius:18px;background:var(--bg-2);border:1px solid var(--line)}
.deck-label{flex:none;width:7.5em;font:600 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.deck-scroll{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.deck .ask-btn{border-radius:999px;padding:0 16px 0 13px}
.ask-fig{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px 0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);
  font:520 13.5px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,transform .2s var(--ease)}
.ask-fig::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--chip,#8aa8ff);flex:none}
.ask-fig.kid{--chip:#ff8fb8}
.ask-fig.play{--chip:var(--accent)}
.ask-fig:hover{background:var(--surface-2);border-color:var(--line-2);transform:translateY(-1px)}

/* the floating "Ask" pill and its sheet (built by site.js) */
.ask-float{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:70;display:inline-flex;align-items:center;gap:9px;
  min-height:52px;padding:0 20px 0 14px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);cursor:pointer;font:650 14.5px/1 var(--sans);
  box-shadow:0 14px 40px -10px rgba(0,0,0,.7);transform:translateY(150%);transition:transform .35s var(--ease)}
.ask-float .ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ask-float .ico .solid{fill:currentColor;stroke:none}
.ask-float.show{transform:none}
.ask-pop{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 64px);z-index:71;width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 110px);overflow:auto;
  padding:16px;border-radius:22px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.ask-pop[hidden]{display:none}
.ask-pop h2{font:650 20px/1.1 var(--sans);margin:0 0 12px}
.ask-pop .ask-main{display:grid;grid-template-columns:1fr;gap:8px}
.ask-pop .ask-btn{justify-content:flex-start;min-height:48px}
.ask-pop .ask-status{position:static;transform:none;opacity:1;visibility:visible;width:auto;max-width:none;margin-top:10px;padding:0;background:none;box-shadow:none;color:var(--text);font-size:13.5px;transition:none}
.ask-pop .ask-status a{color:var(--text)}

/* ---------- sections ---------- */
.band{position:relative;padding:clamp(56px,8vw,112px) 0 clamp(24px,4vw,40px)}
.sec-head{max-width:860px;margin-bottom:clamp(26px,4vw,44px)}
.kicker{font:600 11.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.sec-head h2{font:650 clamp(38px,5.8vw,76px)/.96 var(--sans);letter-spacing:-.05em}
.sec-head h2 em,.sub-title em{font-size:1.06em}
.sub{font:450 clamp(17px,1.8vw,21px)/1.4 var(--sans);letter-spacing:-.015em;color:var(--muted);margin-top:14px}
.intro{font:400 17px/1.65 var(--sans);color:var(--muted);max-width:46em;margin-top:16px}
.lede{margin:0 0 clamp(28px,4vw,48px);font-size:clamp(16.5px,1.5vw,19px);color:var(--text);opacity:.92}
/* shader-backed section headers */
.banner{position:relative;isolation:isolate;max-width:none;display:flex;align-items:flex-end;min-height:clamp(240px,26vw,340px);padding:clamp(10px,1.2vw,14px);border-radius:28px;overflow:hidden;
  background:radial-gradient(70% 120% at 85% 0%,rgba(107,77,255,.6),transparent 60%),#07060c}
.banner>canvas{border-radius:inherit}
.banner-panel{width:min(100%,720px);padding:clamp(18px,3vw,32px);border-radius:20px}
.banner-panel .kicker{color:#c9c5d3}
.banner-panel h2,.banner-panel .sub{color:#f3f1ec}
.banner-panel .sub{color:#d5d2dd}
.side-a .banner{background:repeating-linear-gradient(170deg,transparent 0 22px,rgba(255,212,71,.5) 22px 26px),#07060c}
.arcade-band .banner{background:conic-gradient(from 200deg at 50% 0%,#07060c,#ff47d4 12%,#07060c 22%,#ff8c00 34%,#07060c 46%,#ff47d4 60%,#07060c 72%,#ff8c00 86%,#07060c)}
.family-band .banner{background:radial-gradient(70% 120% at 10% 0%,#ffb36b,transparent 60%),radial-gradient(60% 100% at 90% 30%,#f75092,transparent 60%),radial-gradient(80% 90% at 50% 100%,#2a1b6e,transparent 70%),#ffd447}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}

/* ---------- ink figures on paper cards ---------- */
.plate,.lit{--paper:#f2efe7;--ink:#231e16;--muted:#5f574a;--rule:#ddd6c8;--soft:#ebe6da;--link:#2f4f9a;color:var(--ink)}
.plate{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px 18px 20px;border-radius:var(--r);background:var(--paper);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 60px -40px rgba(0,0,0,.9),0 0 0 1px rgba(35,30,22,.06);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.plate-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.fig-no{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;align-self:center}
.plate-title{font:650 clamp(20px,1.9vw,25px)/1.1 var(--sans);letter-spacing:-.03em;margin:0;color:var(--ink)}
.plate-line{flex-basis:100%;font:500 13px/1.4 var(--mono);color:var(--muted);margin:0}
.plate-note{font:400 15.5px/1.6 var(--sans);color:var(--ink);max-width:40em}
.ink-slot{position:relative;scroll-margin-top:24px;min-width:0}
.ink-mount{position:relative;min-width:0}
.ink-mount>img{display:block;width:100%;height:auto;aspect-ratio:4/3}
.js .ink-mount:not(.ink-fig){padding-top:56px}
.ink-mount:not(.ink-fig){background:var(--ph) center 62%/72% auto no-repeat}
.ink-mount{--ph:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'><g fill='none' stroke='%23231e16' stroke-linecap='round' stroke-linejoin='round' opacity='.22'><path d='M200 30L330 95L200 160L70 95Z' stroke-width='3'/><path d='M70 95L70 170L200 236L330 170L330 95M200 160L200 236' stroke-width='3'/></g></svg>")}
.ink-mount.snap-missing>img{visibility:hidden}
.ink-mount.ink-fig{padding-top:0;background:none}
.ink-slot.near .ink-svg{will-change:transform}
.ink-slot .ink-svg{transform:translateY(calc(var(--bob,0) * 1px)) rotate(calc(var(--bob,0) * .045deg))}
.ink-btn:focus-visible,.ink-chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- your shelf ---------- */
.shelf-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,2.4vw,28px);align-items:start;margin-bottom:clamp(36px,5vw,56px)}
.console{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.console-title{font:650 22px/1.1 var(--sans);letter-spacing:-.03em}
.meter{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.meter li{display:grid;grid-template-columns:1fr 46px;grid-template-areas:"label value" "bar bar";gap:4px 8px;align-items:end}
.meter .label{grid-area:label;font:500 13.5px/1.2 var(--sans);color:var(--text)}
.meter .value{grid-area:value;text-align:right;font:600 13.5px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.meter .bar{grid-area:bar;display:block;height:10px}
.meter svg{display:block;width:100%;height:100%;overflow:visible}
.meter .track{fill:none;stroke:var(--line-2);stroke-width:8;stroke-linecap:round}
.meter .fill{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--v,.2));transition:stroke-dashoffset .7s var(--ease)}
.meter li[data-topic="ml"] .fill{--v:.38}.meter li[data-topic="platform"] .fill{--v:.2}
.meter li[data-topic="experiments"] .fill,.meter li[data-topic="play"] .fill,.meter li[data-topic="learning"] .fill{--v:.14}
.meter li.up .value{color:#56e39f}
.console-note{font:450 13px/1.55 var(--sans);color:var(--muted)}
.console-foot{font:600 12.5px/1.4 var(--mono);color:var(--text)}
.console-actions{display:flex;flex-wrap:wrap;gap:10px}
.shelf-status{display:flex;align-items:center;gap:10px;font:500 14px/1.45 var(--sans);margin-bottom:18px;min-height:22px;color:var(--text)}
.live{width:9px;height:9px;border-radius:50%;background:#56e39f;flex:none;box-shadow:0 0 0 4px rgba(86,227,159,.18)}
.js .live{animation:pulse 2.4s ease-in-out infinite}
.shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.shelf li{min-width:0}
.item{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"thumb" "name" "line" "why";align-content:start;gap:6px;height:100%;padding:8px 8px 12px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:transform .35s var(--ease),border-color .25s,background-color .25s}
.item:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--surface-2)}
.thumb{grid-area:thumb;display:block;aspect-ratio:4/3;border-radius:12px;background:#f2efe7 var(--ph) center/70% auto no-repeat;overflow:hidden}
.thumb{--ph:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'><g fill='none' stroke='%23231e16' stroke-linecap='round' stroke-linejoin='round' opacity='.22'><path d='M200 30L330 95L200 160L70 95Z' stroke-width='5'/><path d='M70 95L70 170L200 236L330 170L330 95M200 160L200 236' stroke-width='5'/></g></svg>")}
.thumb img{display:block;width:100%;height:100%;object-fit:contain}
.thumb.snap-missing img{visibility:hidden}
.rank{position:absolute;left:14px;top:14px;z-index:2;display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 7px;border-radius:999px;background:#16141c;color:#f3f1ec;font:600 11.5px/1 var(--mono)}
.item[data-rank="1"] .rank{background:var(--accent);color:var(--accent-ink)}
.item.moved .rank{background:#56e39f;color:#0b1a12}
.name{grid-area:name;padding:4px 4px 0;font:600 15px/1.2 var(--sans);letter-spacing:-.02em;min-width:0;overflow-wrap:break-word}
.line{grid-area:line;padding:0 4px;font:400 12.5px/1.4 var(--sans);color:var(--muted)}
.why{grid-area:why;justify-self:start;align-self:end;margin:2px 4px 0;padding:4px 9px;border-radius:999px;border:1px solid var(--line-2);font:600 10px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.item.moved .why{color:#0b1a12;background:#56e39f;border-color:transparent}
.compare{margin-top:clamp(36px,5vw,56px);padding:24px 24px 14px}
.compare h3{font:650 clamp(22px,2.4vw,28px)/1.1 var(--sans);letter-spacing:-.03em;margin-bottom:12px}
.table-wrap{overflow-x:auto}
.compare table{width:100%;border-collapse:collapse;font:400 14px/1.45 var(--sans);min-width:520px}
.compare th,.compare td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-top:1px solid var(--line)}
.compare thead th{border-top:0;font:600 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.compare tbody th{font-weight:600;width:24%;color:var(--text)}
.compare td{color:var(--muted)}

/* ---------- workshop ---------- */
.plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.sub-head{margin:clamp(48px,6vw,80px) 0 clamp(22px,3vw,34px)}
.sub-title{font:650 clamp(28px,3.4vw,44px)/1.02 var(--sans);letter-spacing:-.04em}
.loop{margin-top:clamp(36px,5vw,56px);padding:24px 26px}
.loop-title{font:650 24px/1.1 var(--sans);letter-spacing:-.03em;margin-bottom:14px}
.loop-steps{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0}
.loop-steps li{display:inline-flex;align-items:center;font:500 13.5px/1.2 var(--mono);white-space:nowrap;color:var(--text)}
.loop-steps li+li::before{content:"→";margin:0 12px;color:var(--faint)}
.loop-end span{background:var(--accent);color:var(--accent-ink);padding:6px 12px;border-radius:999px}
.loop p{font-size:16px;color:var(--muted);max-width:52em}

/* ---------- side A ---------- */
.side-a-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,2.4vw,28px);align-items:start}
.side-a-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.show:empty{display:none}
.show.lit{padding:14px;border-radius:var(--r);background:var(--paper)}
.tracks{list-style:none;margin:0;padding:6px 18px}
.tracks li{display:grid;grid-template-columns:36px 1fr auto;grid-template-areas:"num title len" "num for for";gap:2px 10px;padding:14px 0;align-items:center}
.tracks li+li{border-top:1px solid var(--line)}
.js .tracks li:has(.t-play){grid-template-columns:48px 1fr auto;grid-template-areas:"play title len" "play for for"}
.js .tracks li:has(.t-play) .t-num{display:none}
.t-play{grid-area:play;width:44px;height:44px;border:0;border-radius:50%;background:var(--text);color:var(--bg);cursor:pointer;padding:0;display:grid;place-items:center;transition:transform .2s var(--ease)}
.t-play:hover{transform:scale(1.07)}
.t-play:focus-visible{border-radius:50%}
.t-play svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.t-play .bars{display:none;fill:none;stroke-width:3}
.t-play.on .tri{display:none}
.t-play.on .bars{display:inline}
.tracks li.playing .t-play{background:var(--accent);color:var(--accent-ink)}
.t-num{grid-area:num;font:600 13px/1.6 var(--mono);color:var(--muted)}
.t-name{grid-area:title;font:600 17px/1.25 var(--sans);letter-spacing:-.02em}
.t-for{grid-area:for;font:400 13px/1.4 var(--sans);color:var(--muted)}
.t-len{grid-area:len;font:500 13px/1.6 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.tracks-audio{display:grid;gap:6px;padding:16px;font:500 13px/1.4 var(--sans)}
.tracks-audio audio{width:100%}
.side-note{font:400 13px/1.5 var(--sans);color:var(--muted)}

/* ---------- arcade ---------- */
.arcade-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(18px,2.4vw,28px);align-items:start}
.arcade-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.game{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px}
.game .kicker{margin-bottom:0}
.game-title{font:650 clamp(30px,3.4vw,44px)/1 var(--sans);letter-spacing:-.045em}
.game-sub{font:500 18px/1.3 var(--sans);letter-spacing:-.02em}
.game p:not([class]){font-size:16px;line-height:1.6;color:var(--muted)}
.game-note{font:500 12.5px/1.4 var(--mono);color:var(--muted)}

/* ---------- family ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(300px,30vw,440px);grid-template-areas:"cart cart a b" "ev mg note note";gap:clamp(12px,1.6vw,20px);margin-bottom:clamp(40px,6vw,72px)}
.print-cart{grid-area:cart}.print-a{grid-area:a}.print-b{grid-area:b}.print-ev{grid-area:ev}.print-mg{grid-area:mg}
.print{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.print a{position:relative;isolation:isolate;display:block;flex:1;min-height:0;border-radius:18px;overflow:hidden;background:#e9e4d6}
.print a>canvas{border-radius:inherit}
.print img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:opacity .5s ease .1s,transform .9s var(--ease)}
.print-a img{object-position:50% 20%}
.print a.fx-live img{opacity:0}
@media (hover:hover){.print a.fx-live:hover img{opacity:1}}
.print a.fx-live:focus-visible img,.print a.revealed img{opacity:1}
.print figcaption{font:500 14px/1.3 var(--sans);color:var(--muted);padding:0 4px}
.spread-note{grid-area:note;align-self:center;font:600 clamp(24px,2.6vw,36px)/1.15 var(--sans);letter-spacing:-.04em;padding:0 8px}
.spread-note em{color:var(--muted)}
.plates-family{margin-top:clamp(12px,2vw,20px)}
.pull{margin:clamp(48px,6vw,80px) auto 0;max-width:860px;text-align:center}
.pull p{font:400 clamp(26px,3.2vw,40px)/1.25 var(--serif);font-style:italic;letter-spacing:-.01em}

/* ---------- credo ---------- */
.credo{padding:clamp(40px,6vw,80px) 0}
.credo-card{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:clamp(320px,36vw,460px);padding:clamp(12px,2vw,24px);border-radius:32px;
  background:radial-gradient(60% 80% at 0% 0%,#6b4dff,transparent 60%),radial-gradient(60% 80% at 100% 100%,#f75092,transparent 60%),radial-gradient(50% 60% at 100% 0%,#ffb36b,transparent 60%),#07060c}
.credo-card>canvas{border-radius:inherit}
.credo-panel{max-width:900px;padding:clamp(22px,4vw,44px);text-align:center;border-radius:24px}
.credo-text{font:600 clamp(26px,4vw,52px)/1.12 var(--sans);letter-spacing:-.045em;color:#f3f1ec}
.credo-text em{font-size:1.08em}
.credo-note{margin-top:18px;font:500 13px/1.4 var(--mono);color:#c9c5d3}

/* ---------- footer ---------- */
.footer{padding:clamp(20px,4vw,48px) 0 clamp(48px,6vw,80px)}
.footer-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:center}
.footer-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.footer-name{font:680 clamp(40px,5.4vw,72px)/.95 var(--sans);letter-spacing:-.055em}
.footer-sub{font:450 16px/1.4 var(--sans);color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:10px}
.dedication{font:400 italic 26px/1.3 var(--serif)}
.credit{font:400 13px/1.6 var(--sans);color:var(--muted);max-width:40em}
.credit a{color:var(--text);font-weight:560;padding-block:13px;text-underline-offset:3px}

/* ---------- light ---------- */
:root[data-theme="light"] .glass{background:rgba(255,255,255,.8);border-color:rgba(255,255,255,.6)}
:root[data-theme="light"] .t-kicker{color:#4b4855}
:root[data-theme="light"] .work-panel{background:rgba(255,255,255,.8);border-color:rgba(255,255,255,.6)}
:root[data-theme="light"] .t-go,:root[data-theme="light"] .pi-panel .chip,:root[data-theme="light"] .music-panel .chip{background:rgba(20,18,30,.08);color:#16141c;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="light"] .t-music.playing .m-label{color:#137a4a}
:root[data-theme="light"] .work-list li::before{background:#6b4dff}
:root[data-theme="light"] .work-panel .chip{background:rgba(20,18,30,.08);color:#16141c;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="light"] .banner-panel .kicker{color:#4b4855}
:root[data-theme="light"] .banner-panel h2{color:#16141c}
:root[data-theme="light"] .banner-panel .sub{color:#3d3a46}
:root[data-theme="light"] .credo-text{color:#16141c}
:root[data-theme="light"] .credo-note{color:#4b4855}
:root[data-theme="light"] .tile{box-shadow:0 24px 50px -36px rgba(20,18,30,.55)}
:root[data-theme="light"] .t-ask{background:linear-gradient(160deg,#ffffff,#efece6);color:#16141c}
:root[data-theme="light"] .t-ask .t-title{color:#16141c}
:root[data-theme="light"] .t-ask .ask-sub{color:#4b4855}
:root[data-theme="light"] .t-ask .ask-btn{background:rgba(20,18,30,.05);border-color:rgba(20,18,30,.12);color:#16141c}
:root[data-theme="light"] .t-ask .ask-btn[data-do="newlook"]{background:#16141c;color:#fff}
:root[data-theme="light"] .t-shelf{background-color:#ffffff;background-image:radial-gradient(120% 80% at 100% 0%,rgba(86,227,159,.22),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(91,140,255,.2),transparent 60%),radial-gradient(rgba(20,18,30,.09) 1px,transparent 1.4px)}
:root[data-theme="light"] .t-shelf,:root[data-theme="light"] .t-shelf .t-title,:root[data-theme="light"] .t-head{color:#16141c}
:root[data-theme="light"] .t-head .chip{background:rgba(20,18,30,.07);color:#16141c;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="light"] .mini a{background:rgba(20,18,30,.04);border-color:rgba(20,18,30,.09);color:#16141c}
:root[data-theme="light"] .mini-rank,:root[data-theme="light"] .mini-why{color:#4b4855}
:root[data-theme="light"] .mini li:first-child .mini-rank{color:#16141c}
:root[data-theme="light"] .rank{background:#16141c;color:#fff}
:root[data-theme="light"] .meter li.up .value{color:#137a4a}
:root[data-theme="light"] .ask-status{background:#16141c;color:#f3f1ec}
:root[data-theme="light"] .ask-status a{color:#b9c4ff}
:root[data-theme="light"] .ask-pop .ask-status{background:none;color:var(--text)}
:root[data-theme="light"] .ask-pop .ask-status a{color:var(--text)}
:root[data-theme="light"] .plate{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 50px -36px rgba(20,18,30,.5),0 0 0 1px rgba(35,30,22,.1)}
:root[data-theme="light"] .monogram{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.25),0 0 0 1px rgba(20,18,30,.12)}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(86,227,159,.18)}50%{box-shadow:0 0 0 8px rgba(86,227,159,.06)}}
@keyframes beat{0%,100%{box-shadow:0 10px 30px -10px rgba(0,0,0,.8),0 0 0 6px rgba(255,255,255,.08)}50%{box-shadow:0 10px 30px -10px rgba(0,0,0,.8),0 0 0 13px rgba(255,212,71,.2)}}
@keyframes jiggle{0%,100%{transform:none}25%{transform:rotate(-.8deg) translateY(-2px)}75%{transform:rotate(.8deg) translateY(1px)}}
@media (prefers-reduced-motion:no-preference){
  html.wiggling .plate,html.wiggling .print,html.wiggling .item{animation:jiggle .3s ease-in-out infinite}
  .js.wiggling .tile{animation:rise .8s var(--ease) backwards,jiggle .3s ease-in-out infinite;animation-delay:calc(var(--i,0) * 55ms + 60ms),0s}
  .t-photo>img{transform:scale(1.04)}
  .t-photo:hover>img,.t-photo.revealed>img{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body{transition:none}
  .js .live,.ask-btn.busy .i,.t-music.playing .m-play{animation:none}
  .meter .fill{transition:none}
  .tile,.tile::after,.pill,.btn-play,.ask-btn,.ask-fig,.item,.ask-float,.plate,.m-play,.cap,.mini a,.t-photo>img,.t-game>img,.print img,.ask-status{transition:none}
  .ink-slot .ink-svg{transform:none}
}

/* ---------- desktop, shorter screens ---------- */
@media (min-width:1100px) and (max-height:820px){
  :root{--nav-h:54px}
  .game-body{padding-top:40px}
}

/* ---------- tablet ---------- */
@media (max-width:1099px){
  .front{height:auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;
    grid-template-areas:"id id id id" "gm gm gm gm" "ev mg ca ca" "fa sh sh sh" "as as as as" "mu mu pi pi" "wk wk wk wk"}
  .t-game{min-height:clamp(380px,56vw,520px)}
  .t-photo{min-height:clamp(230px,34vw,320px)}
  .t-music,.t-pi{min-height:260px}
  .t-pi{flex-direction:column;justify-content:flex-end;background:radial-gradient(26% 20% at 40% 18%,#ff5500 0%,transparent 100%),radial-gradient(24% 18% at 62% 26%,#ffc105 0%,transparent 100%),radial-gradient(20% 16% at 50% 10%,#f585ff 0%,transparent 100%),#08070d}
  .pi-panel{flex:none}
  .pi-play{align-self:stretch;margin:0}
  .t-work{min-height:300px}
  .t-ask .ask-main{grid-template-columns:repeat(4,minmax(0,1fr))}
  .t-ask .ask-btn{min-height:64px}
  .shelf{grid-template-columns:repeat(4,minmax(0,1fr))}
  .shelf-top{grid-template-columns:minmax(0,1fr)}
  .wide-only{display:none!important}
}
@media (max-width:900px){
  .plates{grid-template-columns:minmax(0,1fr)}
  .side-a-grid,.arcade-grid,.footer-grid{grid-template-columns:minmax(0,1fr)}
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;grid-template-areas:"cart cart" "a b" "ev mg" "note note"}
  .print a{flex:none;aspect-ratio:3/4}
  .print-cart a{aspect-ratio:1.3}
  .spread-note{text-align:center;padding:8px 0 0}
}

/* ---------- phone ---------- */
@media (max-width:699px){
  :root{--nav-h:56px;--gap:10px;--tile-r:20px;--gut:14px}
  body{font-size:16px}
  .top{gap:4px}
  .topnav{font-size:14px}
  .topnav a{padding:0 10px}
  .lights{padding:0;width:44px}
  .lights span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .front{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"id id" "gm gm" "ev mg" "ca fa" "sh sh" "as as" "mu pi" "wk wk"}
  .t-id{padding:7px}
  .id-panel{padding:16px 16px 14px;gap:9px}
  .t-kicker{font-size:10px;gap:7px}
  .t-id h1{font-size:clamp(38px,12.6vw,52px);margin-top:0}
  .lead{font-size:clamp(17px,5vw,20px)}
  .bio{font-size:13.5px}
  .quick{gap:6px;flex-wrap:nowrap}
  .quick .pill{padding:0 10px;font-size:13px;flex:1 1 auto}
  .t-game{min-height:0;aspect-ratio:1.32}
  .game-body{padding:16px;padding-top:30px;gap:7px}
  .game-body .chip{font-size:10px;padding:5px 9px}
  .game-name{font-size:clamp(32px,10.4vw,44px)}
  .game-line{font-size:13.5px}
  .game-line-more{display:none}
  .btn-play{min-height:48px;padding:0 20px 0 16px;font-size:15px}
  .t-photo{min-height:0;aspect-ratio:1.02;padding:7px}
  .cap{font-size:12px;padding:5px 10px;min-height:26px}
  .t-music,.t-pi{min-height:0;aspect-ratio:.74}
  .t-music{padding:8px}
  .t-music>.chip{font-size:10px;padding:5px 9px}
  .m-play{width:56px;height:56px;margin:-28px 0 0 -28px;top:38%}
  .music-panel{grid-template-areas:"title go";padding:8px 6px 8px 12px}
  .m-now{display:none}
  .music-panel .t-title{font-size:16px}
  .t-pi{padding:8px;gap:8px}
  .pi-panel{padding:12px}
  .pi-panel .chip{font-size:10px;padding:5px 9px}
  .pi-panel .t-title{font-size:20px}
  .pi-line{font-size:12px}
  .pi-play{padding:0 10px}
  .t-shelf{padding:16px}
  .t-work{min-height:0}
  .t-ask{padding:16px}
  .t-ask .ask-main{grid-template-columns:repeat(2,minmax(0,1fr));flex:none}
  .t-ask .ask-btn{min-height:56px;flex-direction:row;font-size:13.5px}
  .deck{gap:8px}
  .deck-row{flex-direction:column;align-items:stretch;gap:6px;padding:12px 0 6px 12px;border-radius:18px}
  .deck-label{width:auto}
  .deck-scroll{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 12px 8px 0;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
  .deck-scroll::-webkit-scrollbar{display:none}
  .deck-scroll>*{flex:none;scroll-snap-align:start}
  .ask-row{display:grid;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:max-content}
  .banner{min-height:0;border-radius:24px;padding:110px 8px 8px}
  .banner-panel{padding:18px}
  .sec-head h2{font-size:clamp(34px,10vw,46px)}
  .plate{padding:12px 10px 14px;gap:10px}
  .plate-head,.plate-note{padding:0 4px}
  .plate-note{font-size:15px}
  .js .ink-mount:not(.ink-fig){padding-top:108px}
  .shelf{grid-template-columns:minmax(0,1fr);gap:10px}
  .item{grid-template-columns:104px minmax(0,1fr);grid-template-areas:"thumb name" "thumb line" "thumb why";gap:3px 12px;padding:8px;align-items:center}
  .thumb{align-self:stretch}
  .rank{left:12px;top:12px;min-width:26px;height:22px;font-size:11px}
  .name{padding:0}
  .line{padding:0}
  .why{margin:2px 0 0}
  .console{padding:18px}
  .compare{padding:18px 16px 8px}
  .loop{padding:20px 18px}
  .loop-steps li{font-size:12.5px}
  .loop-steps li+li::before{margin:0 8px}
  .tracks{padding:4px 14px}
  .game{padding:20px}
  .gallery{gap:12px}
  .credo-card{border-radius:24px;padding:10px}
  .credo-text{font-size:clamp(24px,7.4vw,32px)}
  .footer-links .pill{padding:0 16px}
  .ask-status{left:14px;right:84px;width:auto;max-width:none;transform:translateY(16px)}
  .ask-status.show{transform:none}
  .ask-float{padding:0;width:56px;justify-content:center}
  .ask-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:369px){
  .topnav a{padding:0 7px;font-size:13px}
  .quick{flex-wrap:wrap}
  .t-ask .ask-main{grid-template-columns:minmax(0,1fr)}
}

/* print: ink on paper */
@media print{
  body{background:#fff;color:#000}
  .deck,.ask-float,.ask-pop,.ink-btns,.console-actions,.lights,.t-ask{display:none!important}
}