/* Yagrumo Learn · v3 (Oct 2026)
   Layout: one Learn page with three labs (Mind, Query, Code). Each lab is a sequence of benches:
   notes on the left, a live stage on the right, one column on phones. Progress is a living yagrumo
   tree: every challenge grows a leaf, every finished lab bears a gold fruit.
   Family rules: night ground, Geist + Geist Mono, celeste leads (Learn), gold only for value. */
:root{
  --night:#0F1012; --night-2:#17191C; --night-3:#202327; --night-4:#2A2E33;
  --line:rgba(242,243,239,.10); --line-2:rgba(242,243,239,.18);
  --bone:#F2F3EF; --mist:#CDD1C8; --moss:#9CA28F;
  --celeste:#5DB3E4; --celeste-hi:#A8DCF7; --leaf:#8FAD5C; --gold:#E9B949; --silver:#C9D3CF; --ember:#E07A4F;
  --sans:"Geist","SF Pro Display","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --gut-l:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:var(--night);color:var(--mist);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--night)}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
h1,h2,h3{color:var(--bone);font-weight:600;letter-spacing:-.02em;line-height:1.08;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--celeste);outline-offset:3px}
::selection{background:var(--celeste);color:var(--night)}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--celeste)}
.lbl{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--moss)}

/* ---------- family canopy bar + footer row (shared kit) ---------- */
.ygf{position:relative;z-index:70;background:var(--night);color:var(--moss);border-bottom:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ygf-in{display:flex;align-items:center;gap:18px;height:30px;max-width:1180px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r);overflow-x:auto;scrollbar-width:none}
.ygf-in::-webkit-scrollbar{display:none}
.ygf a,.ygf span.ygf-i{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:inherit;white-space:nowrap}
.ygf a:hover{color:var(--bone)}
.ygf .ygf-m{width:14px;height:14px;flex:none}
.ygf .ygf-dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.ygf .ygf-on{color:var(--bone)}
.ygf .ygf-on .ygf-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent),0 0 12px var(--c)}
.ygf .ygf-soon{opacity:.45}
.ygf .ygf-soon small{font-size:9px;letter-spacing:.12em;border:1px solid var(--line);border-radius:999px;padding:2px 5px}
.ygf .ygf-sep{width:1px;height:12px;background:var(--line);flex:none}
.ygf .ygf-home b{color:var(--bone);font-weight:500}
.ygf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--moss)}
.ygf-foot a,.ygf-foot span{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:inherit}
.ygf-foot a:hover{color:var(--bone)}
.ygf-foot i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.ygf-foot .ygf-soon{opacity:.5}

/* ---------- app bar ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(15,16,18,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:14px;height:58px}
.brand{display:flex;align-items:center;gap:10px;color:var(--bone);text-decoration:none;font-weight:600;letter-spacing:-.02em;flex:none}
.brand svg{width:26px;height:26px;flex:none}
.tag{font:500 10px/1 var(--mono);letter-spacing:.16em;color:var(--night);background:var(--celeste);padding:4px 6px 3px;border-radius:5px}
.tabs{display:flex;gap:2px;margin-left:10px}
.tabs a{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:10px;color:var(--moss);white-space:nowrap;transition:color .2s,background .2s}
.tabs a:hover{color:var(--bone);background:var(--night-2)}
.tabs a[aria-current="page"]{color:var(--bone);background:var(--night-3)}
.tabs a small{font:500 11px/1 var(--mono);color:var(--leaf)}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.leafpill{display:flex;align-items:center;gap:8px;font:500 13px/1 var(--mono);color:var(--bone);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px 6px 8px;background:var(--night-2);text-decoration:none}
.leafpill svg{width:18px;height:18px;color:var(--leaf)}
.leafpill.grew{animation:pillflip .9s var(--ease)}
@keyframes pillflip{40%{transform:perspective(400px) rotateX(70deg);background:var(--silver);color:var(--night)}}
.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;color:var(--mist);flex:none}
.icon-btn svg{width:18px;height:18px}
.icon-btn[aria-pressed="false"] .on,.icon-btn[aria-pressed="true"] .off{display:none}
.bar .wrap.mrow{display:none;height:auto}
.tabs-m{display:none}
@media (max-width:820px){
  .tabs{display:none}
  .bar .wrap.mrow{display:block}
  .tabs-m{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:8px;border-top:1px solid var(--line)}
  .tabs-m::-webkit-scrollbar{display:none}
  .tabs-m a{flex:none;text-decoration:none;font-size:13px;font-weight:500;padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--moss)}
  .tabs-m a[aria-current="page"]{color:var(--night);background:var(--celeste);border-color:var(--celeste)}
}

/* ---------- buttons, pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 20px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--line-2);background:var(--night-3);color:var(--bone);transition:transform .3s var(--ease),background .3s,border-color .3s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);border-color:rgba(242,243,239,.3)}
.btn.gold{background:var(--gold);color:var(--night);border-color:var(--gold);box-shadow:0 0 0 1px rgba(233,185,73,.35),0 10px 40px -10px rgba(233,185,73,.45)}
.btn.cel{background:var(--celeste);border-color:var(--celeste);color:var(--night)}
.btn.ghost{background:transparent}
.btn.sm{padding:8px 14px;font-size:14px}
.btn:disabled{opacity:.42;cursor:default;transform:none}
.btn kbd{font:500 10px/1 var(--mono);opacity:.6;border:1px solid currentColor;border-radius:4px;padding:2px 4px}
.pill{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:7px 12px;font-size:13px;color:var(--mist);transition:all .25s var(--ease);white-space:nowrap}
.pill:hover{border-color:var(--celeste);color:var(--bone)}
.pill[aria-pressed="true"]{background:var(--celeste);border-color:var(--celeste);color:var(--night);font-weight:600}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cv{display:block;width:100%;border-radius:14px;background:var(--night);touch-action:none}

/* ---------- views ---------- */
.view[hidden]{display:none!important}
.view{animation:viewin .6s var(--ease)}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}}

/* ---------- home ---------- */
.home-hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.home-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 78% 30%,rgba(93,179,228,.13),transparent 70%),radial-gradient(40% 50% at 10% 100%,rgba(143,173,92,.08),transparent 70%);pointer-events:none}
.hh{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px 48px;align-items:center;padding-block:56px 48px}
.hh h1{font-size:clamp(42px,6.6vw,84px);letter-spacing:-.035em;line-height:.98;max-width:11ch;margin-top:18px}
.hh h1 em{font-style:normal;color:var(--celeste)}
.lede{font-size:clamp(17px,1.9vw,20px);max-width:44ch;color:var(--mist);margin-top:20px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.line2{font:500 13px/1 var(--mono);letter-spacing:.08em;color:var(--moss)}
.tree-card{position:relative;border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,rgba(23,25,28,.7),rgba(15,16,18,.4));padding:18px 18px 16px;display:grid;gap:12px}
.tree-card canvas{display:block;width:100%;height:auto;aspect-ratio:1/1.02;max-width:100%}
.tree-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tree-count{font:500 13px/1 var(--mono);color:var(--bone)}
.tree-note{font-size:14px;color:var(--moss)}
@media (max-width:860px){.hh{grid-template-columns:minmax(0,1fr);padding-block:36px 36px}.tree-card{max-width:520px}}

.labs{padding-block:64px 72px}
.labs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.labs-head h2{font-size:clamp(28px,3.6vw,42px);margin-top:12px}
.lab-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:960px){.lab-cards{grid-template-columns:minmax(0,1fr)}}
.lab-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:22px;background:var(--night-2);overflow:hidden;text-decoration:none;color:inherit;transition:transform .4s var(--ease),border-color .3s}
.lab-card:hover{transform:translateY(-3px);border-color:rgba(93,179,228,.45)}
.lab-card .pv{position:relative;min-height:150px;white-space:pre-wrap;padding:18px;background:var(--night);border-bottom:1px solid var(--line);font:500 13px/1.7 var(--mono);color:var(--mist);overflow:hidden}
.lab-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.lab-card h3{font-size:24px}
.lab-card p{font-size:15px}
.lab-card .foot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.leafrow{display:flex;gap:3px;flex-wrap:wrap}
.leafrow svg{width:16px;height:16px;color:rgba(242,243,239,.16)}
.leafrow svg.on{color:var(--leaf)}
.leafrow svg.fruit{color:var(--gold)}
.go{font:500 13px/1 var(--mono);color:var(--celeste);white-space:nowrap}
.pv .tk{display:inline-block;padding:4px 6px 3px;border-radius:5px;color:var(--night);margin:0 3px 5px 0;font:500 13px/1 var(--sans)}
.pv .k{color:var(--celeste)} .pv .n{color:var(--gold)} .pv .f{color:var(--bone)} .pv .c{color:var(--moss)} .pv .s{color:#A9C17E}
.also{margin-top:26px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;border:1px dashed var(--line-2);border-radius:18px;padding:16px 18px;text-decoration:none;color:inherit;transition:border-color .3s}
.also:hover{border-color:rgba(232,85,59,.6)}
.also .dot{width:10px;height:10px;border-radius:50%;background:#E8553B;box-shadow:0 0 12px #E8553B}
.also b{color:var(--bone);font-weight:600}
.also span{font-size:15px}
@media (max-width:560px){.also{grid-template-columns:auto minmax(0,1fr)}.also .go{grid-column:2}}

/* ---------- lab header + stations ---------- */
.lab-hero{border-bottom:1px solid var(--line);padding-block:56px 40px;position:relative;overflow:hidden}
.lab-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 90% at 85% 10%,rgba(93,179,228,.10),transparent 70%);pointer-events:none}
.lab-hero .wrap{position:relative;display:grid;gap:16px}
.lab-hero h1{font-size:clamp(38px,6vw,72px);letter-spacing:-.03em;line-height:1;max-width:14ch}
.lab-hero .lede{margin-top:0}
.lab-progress{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.station{border-bottom:1px solid var(--line);padding-block:72px}
.st-head{margin-bottom:30px;display:grid;gap:14px}
.st-head h2{font-size:clamp(28px,4.4vw,50px);max-width:17ch}
.bench{display:grid;gap:22px 48px;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"lead stage" "why stage";grid-template-rows:auto 1fr;align-items:start}
.lead{grid-area:lead;font-size:18px;color:var(--mist);max-width:46ch}
.stage{grid-area:stage;min-width:0;background:var(--night-2);border:1px solid var(--line);border-radius:22px;padding:20px;display:grid;gap:16px}
.quests{grid-area:quests}
.why{grid-area:why;border-top:1px solid var(--line);padding-top:18px;display:grid;gap:10px;font-size:15px;max-width:52ch}
.why h3{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--moss)}
.why strong{color:var(--bone);font-weight:600}
@media (max-width:880px){.bench{grid-template-columns:minmax(0,1fr);grid-template-areas:"lead" "stage" "why";grid-template-rows:auto}.station{padding-block:56px}.stage{padding:14px;border-radius:18px}}

/* leaves list (replaces quests/stamps) */
.leaves{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.leafq{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:transparent;font-size:15px;color:var(--mist);perspective:500px;transition:border-color .4s,color .4s}
.leafq .lf{width:24px;height:24px;display:grid;place-items:center;color:rgba(242,243,239,.2);transition:color .5s}
.leafq .lf svg{width:22px;height:22px}
.leafq.on{color:var(--bone);border-color:rgba(143,173,92,.35)}
.leafq.on .lf{color:var(--leaf)}
.leafq.just .lf{animation:leafflip 1.1s var(--ease)}
@keyframes leafflip{0%{transform:rotateY(0) scale(.6)}35%{transform:rotateY(90deg) scale(1.25);color:var(--silver)}70%{transform:rotateY(180deg) scale(1.1);color:var(--silver)}100%{transform:rotateY(360deg) scale(1)}}
.leafq button{all:unset;cursor:pointer}

/* lab end */
.lab-end{padding-block:72px}
.lab-end-grid{display:grid;grid-template-columns:minmax(0,1fr);max-width:760px;gap:40px}
.lab-end h2{font-size:clamp(30px,4.6vw,54px);max-width:14ch;margin-top:14px}
.lab-end canvas{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:1/1.02;margin-inline:auto}
.recap{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;counter-reset:r}
.recap li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;font-size:17px}
.recap li::before{counter-increment:r;content:counter(r,decimal-leading-zero);font:500 12px/1.9 var(--mono);color:var(--celeste)}
.recap strong{color:var(--bone)}
@media (max-width:880px){.lab-end-grid{grid-template-columns:minmax(0,1fr)}}

footer{padding-block:34px calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:14px;color:var(--moss)}
footer .wrap{display:flex;flex-direction:column;gap:18px}
footer .frow{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center}
footer small{font-size:12.5px;max-width:80ch;color:var(--moss)}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,40px);opacity:0;z-index:100;display:flex;align-items:center;gap:12px;background:var(--night-3);border:1px solid rgba(143,173,92,.5);border-radius:999px;padding:8px 18px 8px 8px;box-shadow:0 20px 50px -10px rgba(0,0,0,.6);transition:all .5s var(--ease);pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{transform:translate(-50%,0);opacity:1}
.toast .ti{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--leaf);color:var(--night);flex:none;animation:none}
.toast.on .ti{animation:leafflip 1.1s var(--ease)}
.toast.fruit{border-color:rgba(233,185,73,.6)}
.toast.fruit .ti{background:var(--gold)}
.toast .ti svg{width:20px;height:20px}
.toast .tt{display:grid;line-height:1.25;min-width:0}
.toast .tt small{font:500 10px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf)}
.toast.fruit .tt small{color:var(--gold)}
.toast .tt span{color:var(--bone);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ======================= MIND LAB ======================= */
textarea.tok{width:100%;resize:vertical;min-height:84px;background:var(--night);border:1px solid var(--line-2);border-radius:14px;color:var(--bone);font:500 clamp(18px,2.4vw,22px)/1.4 var(--sans);padding:14px 16px}
.tok-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font:500 13px/1 var(--mono);color:var(--moss)}
.tok-meta b{font-size:22px;color:var(--bone);font-weight:500;margin-right:4px}
.tok-meta .spacer{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;min-height:120px;align-content:flex-start;padding:14px;border-radius:14px;background:var(--night);border:1px solid var(--line)}
.chip{position:relative;display:inline-grid;font:500 16px/1 var(--sans);color:var(--night);padding:8px 9px 7px;border-radius:7px;white-space:pre}
.chip.new{animation:shatter .7s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes shatter{from{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.6);opacity:0}}
.chip .sp{color:rgba(15,16,18,.38);font-style:normal;margin-right:1px}
.chip .n{display:none;font:500 13px/1.15 var(--mono)}
.chips.nums .chip .w{display:none}
.chips.nums .chip .n{display:block}
.chips.flipping .chip{animation:cflip .5s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes cflip{50%{transform:rotateX(90deg)}}
.c0{background:#7FC2EA}.c1{background:#A9C17E}.c2{background:#D3DBD7}.c3{background:#93A9C1}
.chip.byte{background:transparent;color:var(--silver);border:1px dashed var(--silver);font:500 12px/1.3 var(--mono)}
.chip.win{box-shadow:0 0 0 2px var(--gold)}
.gal-info{min-height:52px;font-size:15px;color:var(--mist)}
.gal-info strong{color:var(--gold);font-weight:600}
.nb{display:inline-flex;gap:6px;align-items:baseline;margin:4px 10px 0 0}
.nb span{color:var(--bone)}
.nb small{font:500 11px/1 var(--mono);color:var(--celeste)}
.riddle{border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px;background:var(--night)}
.riddle-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.eq{font:500 clamp(19px,2.8vw,26px)/1.25 var(--mono);color:var(--bone);letter-spacing:-.01em}
.eq .q{color:var(--gold)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1px solid var(--line-2);background:var(--night-3);border-radius:10px;padding:10px 16px;font-weight:600;color:var(--bone)}
.opt:hover:not(:disabled){border-color:var(--celeste)}
.opt.right{background:var(--leaf);border-color:var(--leaf);color:var(--night)}
.opt.wrong{border-color:var(--ember);color:var(--ember)}
.opt:disabled{cursor:default}
.rd-msg{font-size:15px;min-height:24px}
.score{font:500 12px/1 var(--mono);color:var(--moss)}
.story{min-height:96px;padding:16px;border-radius:14px;background:var(--night);border:1px solid var(--line);font:500 clamp(19px,2.6vw,24px)/1.45 var(--sans);color:var(--mist)}
.story .seed{color:var(--moss)}
.story .w{color:var(--bone)}
.story .w.last{color:var(--gold)}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--celeste);vertical-align:-3px;margin-left:3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.wheel-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}
.wheel-box{position:relative;max-width:340px;width:100%;margin:0 auto}
.odds{display:grid;gap:7px;min-width:0}
.odd{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:4px 10px;align-items:center;font-size:15px}
.odd .bar2{grid-column:1/-1;height:6px;border-radius:3px;background:var(--night-3);overflow:hidden}
.odd .bar2 i{display:block;height:100%;border-radius:3px;background:var(--c,var(--celeste));transition:width .45s var(--ease)}
.odd span{color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.odd em{font:500 13px/1 var(--mono);font-style:normal;color:var(--moss);text-align:right}
.memo{font:500 12px/1.5 var(--mono);color:var(--moss)}
.memo b{color:var(--celeste);font-weight:500}
.temp{display:grid;gap:8px}
.temp-top{display:flex;justify-content:space-between;align-items:baseline}
.temp output{font:500 14px/1 var(--mono);color:var(--bone)}
input[type=range]{width:100%;accent-color:var(--celeste);height:28px}
.ends{display:flex;justify-content:space-between;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
select{background:var(--night-3);color:var(--bone);border:1px solid var(--line-2);border-radius:999px;padding:10px 14px;font:inherit;font-size:14px}
@media (max-width:640px){.wheel-row{grid-template-columns:minmax(0,1fr)}}
.brain-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.fig-cap{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--moss);margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--night);min-width:0}
.stat small{display:block;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--moss);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b{display:block;font:500 22px/1.2 var(--mono);color:var(--bone);margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat.good b{color:var(--leaf)}
.banner{border-radius:12px;padding:12px 14px;font-size:15px;background:rgba(143,173,92,.12);border:1px solid rgba(143,173,92,.4);color:var(--bone)}
.banner.hint{background:rgba(93,179,228,.08);border-color:rgba(93,179,228,.35)}
.banner.bad{background:rgba(224,122,79,.10);border-color:rgba(224,122,79,.45)}
.paint{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.paint[hidden]{display:none}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;vertical-align:-1px;margin-right:6px}
@media (max-width:640px){.brain-row{grid-template-columns:minmax(0,1fr)}}

/* ======================= shared code surfaces ======================= */
.code{position:relative;background:#0B0C0E;border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
.code-tab{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font:500 12px/1 var(--mono);color:var(--moss)}
.code-tab i{width:8px;height:8px;border-radius:50%;background:var(--celeste)}
.code-tab b{color:var(--bone);font-weight:500}
.code-tab .r{margin-left:auto}
.tk-kw{color:var(--celeste)}
.tk-fn{color:#D3DBD7}
.tk-num{color:var(--gold)}
.tk-str{color:#A9C17E}
.tk-com{color:#6E7568;font-style:italic}
.tk-op{color:var(--moss)}
.tk-col{color:var(--bone)}

/* ======================= QUERY LAB ======================= */
.qlab{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;align-items:start;padding-block:40px 72px}
.qside{display:grid;gap:18px;position:sticky;top:76px}
.qmain{display:grid;gap:16px;min-width:0}
@media (max-width:960px){.qlab{grid-template-columns:minmax(0,1fr)}.qside{position:static;order:2}}
.qcard{border:1px solid var(--line);border-radius:18px;background:var(--night-2);padding:16px}
.qlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px;counter-reset:q}
.qlist li button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;font-size:14px;color:var(--mist)}
.qlist li button:hover{background:var(--night-3)}
.qlist li button:focus-visible{outline:2px solid var(--celeste)}
.qlist li.cur button{background:var(--night-3);color:var(--bone)}
.qlist li .lf{color:rgba(242,243,239,.18);display:grid}
.qlist li .lf svg{width:18px;height:18px}
.qlist li.on .lf{color:var(--leaf)}
.qlist li code{font:500 11px/1 var(--mono);color:var(--celeste)}
.schema{font:500 13px/1.8 var(--mono);color:var(--mist);margin-top:10px}
.schema div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding-block:2px}
.schema b{color:var(--bone);font-weight:500}
.schema span{color:var(--moss)}
.qtask{display:grid;gap:8px;padding:20px;border-radius:20px;background:linear-gradient(135deg,rgba(93,179,228,.10),rgba(93,179,228,.02));border:1px solid rgba(93,179,228,.28)}
.qtask h2{font-size:clamp(22px,3vw,32px);letter-spacing:-.02em}
.qtask p{font-size:16px;max-width:60ch}
.qtask .kw{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--night);background:var(--celeste);border-radius:5px;padding:4px 6px 3px;margin-left:6px;vertical-align:2px}
.ed{position:relative;font:500 15px/1.7 var(--mono);min-height:150px}
.ed pre,.ed textarea{margin:0;border:0;padding:16px 16px 16px 52px;font:inherit;letter-spacing:0;tab-size:2;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.ed pre{position:absolute;inset:0;pointer-events:none;color:var(--mist);overflow:hidden}
.ed textarea{position:relative;display:block;width:100%;min-height:150px;resize:none;overflow:hidden;background:transparent;color:transparent;caret-color:var(--gold);outline:none}
.ed textarea::selection{background:rgba(93,179,228,.35);color:transparent}
.ed .gutter{position:absolute;left:0;top:0;bottom:0;width:40px;padding:16px 0;text-align:right;font:inherit;color:#4A4F55;border-right:1px solid var(--line);pointer-events:none;white-space:pre}
.kbd-row{display:flex;gap:6px;overflow-x:auto;padding:10px 12px;border-top:1px solid var(--line);scrollbar-width:none}
.kbd-row::-webkit-scrollbar{display:none}
.kbd-row button{flex:none;border:1px solid var(--line-2);background:var(--night-2);color:var(--mist);border-radius:8px;padding:6px 9px;font:500 12px/1 var(--mono)}
.kbd-row button:hover{border-color:var(--celeste);color:var(--bone)}
.kbd-row button.k{color:var(--celeste)}
.qmsg{font-size:15px;min-height:24px}
.qmsg.good{color:var(--leaf)}
.qmsg.bad{color:var(--ember)}
.err{padding:12px 14px;border-radius:12px;background:rgba(224,122,79,.08);border:1px solid rgba(224,122,79,.4);color:#F2B59A;font:500 13px/1.5 var(--mono)}
.err b{color:var(--bone);font-family:var(--sans);font-weight:600;display:block;margin-bottom:4px;font-size:14px}
.res{border:1px solid var(--line);border-radius:18px;background:var(--night-2);overflow:hidden}
.res-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.tablewrap{overflow:auto;max-height:440px}
.rtable{width:100%;border-collapse:collapse;font-size:14px}
.rtable th{position:sticky;top:0;background:var(--night-2);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--moss);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.rtable th.n{text-align:right}
.rtable td{padding:8px 12px;border-bottom:1px solid var(--line);color:var(--bone);white-space:nowrap}
.rtable td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.rtable tr.in{animation:rowin .45s var(--ease) both}
@keyframes rowin{from{opacity:0;transform:translateX(-10px)}}
.rtable .bc{width:38%;min-width:90px}
.rtable .bc i{display:block;height:8px;border-radius:0 4px 4px 0;background:var(--celeste);transform-origin:left;animation:barin .7s var(--ease) both;animation-delay:inherit}
.rtable tr:first-child .bc i{background:var(--gold)}
@keyframes barin{from{transform:scaleX(0)}}
.res-empty{padding:28px 16px;text-align:center;color:var(--moss);font-size:14px}
.learned{padding:16px 18px;border-radius:16px;border:1px solid rgba(143,173,92,.4);background:rgba(143,173,92,.08);font-size:15px;display:grid;gap:6px}
.learned b{color:var(--bone);font-weight:600}
.learned .lbl{color:var(--leaf)}
.loading{display:flex;align-items:center;gap:10px;font:500 13px/1 var(--mono);color:var(--moss)}
.loading i{width:8px;height:8px;border-radius:50%;background:var(--celeste);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}

/* ======================= CODE LAB ======================= */
.clab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:start;padding-block:40px 72px}
@media (max-width:900px){.clab{grid-template-columns:minmax(0,1fr)}}
.lvls{display:flex;gap:6px;flex-wrap:wrap}
.lvls button{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);background:var(--night-2);color:var(--mist);font:500 14px/1 var(--mono);position:relative}
.lvls button.cur{border-color:var(--celeste);color:var(--bone);background:var(--night-3)}
.lvls button.on::after{content:"";position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--leaf);border:2px solid var(--night)}
.lvls button:disabled{opacity:.35;cursor:default}
.board-card{border:1px solid var(--line);border-radius:22px;background:var(--night-2);padding:16px;display:grid;gap:14px}
.board-head{display:grid;gap:6px}
.board-head h2{font-size:clamp(22px,2.8vw,30px)}
.board-head p{font-size:15px}
.board{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:10px;border-radius:18px;background:#0B1A12;aspect-ratio:1;max-width:100%;width:100%}
.cell{position:relative;border-radius:9px;background:#21361F;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.cell.alt{background:#253C22}
.cell.water{background:linear-gradient(140deg,#1D5E86,#3B8FBF);overflow:hidden}
.cell.water::after{content:"";position:absolute;inset:-40%;background:repeating-linear-gradient(115deg,transparent 0 10px,rgba(168,220,247,.18) 10px 12px);animation:ripple 4s linear infinite}
@keyframes ripple{to{transform:translateX(24px)}}
.cell.rock::after{content:"";position:absolute;inset:16%;border-radius:38% 46% 40% 44%;background:radial-gradient(circle at 35% 30%,#D9DEDB,#8C9592 60%,#5D6563);box-shadow:0 4px 0 rgba(0,0,0,.35)}
.cell.trail::before{content:"";position:absolute;inset:42%;border-radius:50%;background:rgba(233,185,73,.6)}
.cell.fruit{display:grid;place-items:center}
.cell.fruit svg{width:70%;height:70%;filter:drop-shadow(0 0 10px rgba(233,185,73,.55));animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8%)}}
.qui{position:absolute;left:10px;top:10px;width:calc((100% - 20px - 20px)/6);aspect-ratio:1;transition:transform .32s var(--ease);z-index:3;pointer-events:none}
.qui .dir{position:absolute;inset:-2%;transition:transform .25s var(--ease)}
.qui .dir svg{width:100%;height:100%}
.qui .body{position:absolute;inset:6%}
.qui .body svg{width:100%;height:100%;display:block}
.qui.hop .body{animation:hop .3s var(--ease)}
@keyframes hop{50%{transform:translateY(-28%) scale(1.06)}}
.qui.bump .body{animation:bump .4s}
@keyframes bump{25%{transform:translateX(-10%)}50%{transform:translateX(10%)}75%{transform:translateX(-6%)}}
.qui.win .body{animation:winjump .8s var(--ease)}
@keyframes winjump{30%{transform:translateY(-40%) rotate(-8deg)}60%{transform:translateY(0) rotate(6deg)}}
.cstat{font-size:15px;min-height:24px;color:var(--mist)}
.cstat.good{color:var(--leaf)} .cstat.bad{color:var(--ember)}
.py{padding:12px 0;font:500 15px/1.65 var(--mono);min-height:120px}
.pl{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;cursor:pointer;border-left:3px solid transparent;transition:background .15s}
.pl:hover{background:rgba(242,243,239,.03)}
.pl .ln{color:#4A4F55;text-align:right;padding-right:12px;font-size:13px;user-select:none}
.pl .src{white-space:pre;overflow:hidden;text-overflow:ellipsis;padding-right:12px;color:var(--mist)}
.pl.sel{background:rgba(93,179,228,.10);border-left-color:var(--celeste)}
.pl.run{background:rgba(233,185,73,.12);border-left-color:var(--gold)}
.pl.errl{background:rgba(224,122,79,.12);border-left-color:var(--ember)}
.pl .num{color:var(--gold);border-bottom:1px dashed rgba(233,185,73,.6);cursor:pointer}
.pl.ghost .src{color:#4A4F55;font-style:italic}
.tools{display:grid;gap:10px;padding:12px;border-top:1px solid var(--line)}
.tools .row{gap:6px}
.tools button.ins{border:1px solid var(--line-2);background:var(--night-2);color:var(--bone);border-radius:8px;padding:7px 10px;font:500 13px/1 var(--mono)}
.tools button.ins .k{color:var(--celeste)}
.tools button.ins:hover:not(:disabled){border-color:var(--celeste)}
.tools button.ins:disabled{opacity:.3;cursor:default}
.tools button.edb{border:1px solid var(--line);background:transparent;color:var(--moss);border-radius:8px;padding:7px 10px;font:500 12px/1 var(--mono)}
.tools button.edb:hover:not(:disabled){color:var(--bone);border-color:var(--line-2)}
.tools button.edb:disabled{opacity:.3;cursor:default}
.linecount{font:500 12px/1 var(--mono);color:var(--moss)}
.linecount b{color:var(--bone);font-weight:500}
.linecount.over b{color:var(--ember)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}

/* ======================= MIND LAB · THE GUESSING GAME ======================= */
.mg-st{padding-block:40px 64px}
.mg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px;align-items:start}
@media (max-width:900px){.mg{grid-template-columns:minmax(0,1fr)}}
.mg-play{display:grid;gap:12px;min-width:0;position:sticky;top:76px}
@media (max-width:900px){.mg-play{position:static}}
.mg-card{position:relative;border-radius:22px;padding:18px 20px 16px;background:radial-gradient(120% 140% at 0% 0%,rgba(93,179,228,.2),transparent 60%),linear-gradient(160deg,#1C2733,#14181D);border:1px solid rgba(93,179,228,.35);display:grid;gap:8px;perspective:600px}
.mg-card.deal{animation:deal .7s var(--ease)}
@keyframes deal{from{transform:rotateY(80deg) scale(.96);opacity:.2}}
.mg-card.shake{animation:bump .4s}
@keyframes bump{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.mg-card-top{display:flex;justify-content:space-between}
.mg-word{font:700 clamp(38px,5.4vw,60px)/1 var(--sans);letter-spacing:-.035em;color:var(--bone)}
.mg-taboo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mg-taboo #mgTaboo{display:flex;gap:6px;flex-wrap:wrap}
.mg-taboo #mgTaboo span{font:500 13px/1 var(--mono);color:#F2B59A;border:1px solid rgba(224,122,79,.5);border-radius:999px;padding:6px 10px;text-decoration:line-through;text-decoration-color:rgba(224,122,79,.8)}
.mg-in{min-height:76px}
.mg-msg{font-size:15px;min-height:24px;color:var(--mist)}
.mg-msg.good{color:var(--leaf)} .mg-msg.bad{color:var(--ember)}
.mg-msg b{color:var(--bone)}
.mg-guess{display:grid;gap:8px;padding:14px;border-radius:16px;background:var(--night-2);border:1px solid var(--line);min-height:96px;perspective:500px}
.g-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:4px 10px;align-items:end}
.g-w{color:var(--mist);font-size:15px;display:grid}
.g-w small{font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.g-p{font:500 13px/1 var(--mono);color:var(--moss);text-align:right}
.g-bar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--night-3);overflow:hidden}
.g-bar i{display:block;height:100%;background:var(--celeste);border-radius:3px;transition:width .6s var(--ease)}
.g-row.top .g-w{font:600 24px/1.15 var(--sans);color:var(--bone);letter-spacing:-.02em}
.g-row.top .g-p{font-size:16px;color:var(--bone)}
.g-row.hit .g-bar i{background:var(--leaf)}
.g-row.top.hit .g-w{color:var(--leaf)}
.g-row.flip{animation:leafflip 1.1s var(--ease)}
@keyframes leafflip{0%{transform:rotateX(0)}40%{transform:rotateX(90deg);color:var(--silver)}100%{transform:rotateX(0)}}
.mg-mind{display:grid;gap:14px;padding:18px;border-radius:22px;background:#0B0C0E;border:1px solid var(--line-2);min-width:0}
.mg-mind-top{display:grid;gap:4px}
.mg-src{font-size:15px;color:var(--bone);overflow-wrap:anywhere}
.mg-step{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.mg-n{display:flex;gap:10px;align-items:baseline;font-size:14px;color:var(--mist)}
.mg-n b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:500 11px/1 var(--mono);color:var(--night);background:var(--celeste)}
.mtoks{display:flex;flex-wrap:wrap;gap:6px}
.mtok{display:grid;justify-items:center;gap:3px;border-radius:7px;padding:6px 8px 5px;color:var(--night);animation:shatter .6s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes shatter{from{transform:translateY(-10px) rotate(-6deg) scale(.7);opacity:0}}
.mtok b{font:500 15px/1 var(--sans)}
.mtok em{font:500 10px/1 var(--mono);font-style:normal;opacity:.7}
.mtok.c0{background:#7FC2EA}.mtok.c1{background:#A9C17E}.mtok.c2{background:#D3DBD7}.mtok.c3{background:#93A9C1}
.vgrid{display:grid;gap:5px;overflow-x:auto}
.vhead,.vrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;min-width:430px}
.vw{font:500 13px/1.2 var(--mono);color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vstrip,.vlab{display:grid;grid-template-columns:repeat(22,minmax(0,1fr));gap:2px}
.vstrip i{display:block;height:16px;border-radius:3px;transition:background .5s var(--ease)}
.vlab i{font:500 8.5px/1 var(--mono);color:var(--moss);writing-mode:vertical-rl;transform:rotate(180deg);height:46px;text-align:left;font-style:normal;justify-self:center;white-space:nowrap}
.vrow.sum{margin-top:4px;padding-top:6px;border-top:1px dashed var(--line-2)}
.vrow.sum .vw{color:var(--gold)}
.vrow.sum .vstrip i{height:20px}
.vnote{font-size:13.5px;color:var(--moss);margin-top:4px;min-width:0}
.vnote b{color:var(--leaf);font-weight:500}
.vnote s{color:var(--moss);opacity:.7}
.mg-why{margin-top:28px;max-width:72ch}

/* ======================= QUERY LAB · ISLAND TRIVIA ======================= */
.lab-hero.compact{padding-block:40px 28px}
.lab-hero.compact h1{font-size:clamp(34px,5vw,58px)}
.qz{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:start;padding-block:28px 72px;scroll-margin-top:70px}
@media (max-width:900px){.qz{grid-template-columns:minmax(0,1fr);padding-top:20px}}
.qz-left{display:grid;gap:14px;min-width:0;position:sticky;top:76px}
@media (max-width:900px){.qz-left{position:static}}
.qz-right{display:grid;gap:12px;min-width:0}
.qz-card,.qz-end{border-radius:22px;padding:20px;background:radial-gradient(120% 140% at 0% 0%,rgba(233,185,73,.12),transparent 55%),var(--night-2);border:1px solid var(--line-2);display:grid;gap:16px}
.qz-card h2,.qz-end h2{font-size:clamp(24px,3.2vw,34px)}
.qz-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.qz-dots{display:flex;gap:5px}
.qz-dots i{width:9px;height:9px;border-radius:50%;background:rgba(242,243,239,.14)}
.qz-dots i.cur{background:var(--bone)}
.qz-dots i.spot{background:var(--leaf)} .qz-dots i.close{background:var(--gold)} .qz-dots i.miss{background:rgba(224,122,79,.7)}
.qz-ans.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qz-ans.pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
.qz-or{font:500 12px/1 var(--mono);color:var(--moss);text-transform:uppercase;letter-spacing:.14em}
.qz-opt{min-height:64px;border-radius:16px;border:1px solid var(--line-2);background:var(--night-3);color:var(--bone);font:600 clamp(16px,2vw,19px)/1.2 var(--sans);padding:12px;text-align:center;transition:transform .2s var(--ease),border-color .2s,background .3s;overflow-wrap:anywhere}
.qz-ans.pair .qz-opt{min-height:96px;font-size:clamp(18px,2.4vw,24px)}
.qz-opt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--gold)}
.qz-opt:disabled{cursor:default}
.qz-opt.picked{border-color:var(--bone)}
.qz-opt.right{background:var(--leaf);border-color:var(--leaf);color:var(--night);animation:leafflip 1s var(--ease)}
.qz-opt.wrong{border-color:var(--ember);color:#F2B59A}
.qz-ans.num{display:grid;gap:10px}
.qz-big{font:700 clamp(30px,4.6vw,46px)/1 var(--sans);letter-spacing:-.03em;color:var(--gold)}
.qz-ans.num .btn{justify-self:start}
.qz-verdict{border-radius:18px;padding:16px 18px;border:1px solid var(--line);background:var(--night-2);display:grid;gap:6px;animation:viewin .5s var(--ease)}
.qz-head{font:700 24px/1.1 var(--sans);letter-spacing:-.02em}
.qz-head.good{color:var(--leaf)} .qz-head.close{color:var(--gold)} .qz-head.bad{color:var(--ember)}
.qz-yours{font:500 13px/1 var(--mono);color:var(--moss)}
.qz-fact{font-size:16px;color:var(--mist)}
.qz-fact b{color:var(--bone)}
#qzNext{justify-self:start}
.qz-state{font:500 11px/1 var(--mono);color:var(--moss)}
.qz-code{margin:0;padding:16px 18px;font:500 clamp(14px,1.6vw,16px)/1.7 var(--mono);color:var(--mist);white-space:pre-wrap;overflow-wrap:anywhere;min-height:120px;transition:opacity .4s}
.qz-code.dim{opacity:.6}
.qz-code.ran{animation:ranflash .9s var(--ease)}
@keyframes ranflash{0%{background:rgba(93,179,228,.18)}100%{background:transparent}}
.rtable tr.hi td{background:rgba(143,173,92,.14);color:var(--bone)}
.rtable tr.hi td:first-child{box-shadow:inset 3px 0 0 var(--leaf)}
.qz-src{font-size:12.5px;line-height:1.5}
.qz-src code{font:500 12px/1 var(--mono);color:var(--celeste)}

/* ======================= CODE LAB · ONE-SCREEN WORKBENCH ======================= */
/* The board and the code always share the screen: side by side on wide screens, stacked and
   sized to the viewport on phones, so nobody scrolls between running code and watching Quí. */
.cw{--bs:min(560px,calc(100vh - 250px));display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;padding-block:20px 24px;scroll-margin-top:66px}
@supports (height:100dvh){.cw{--bs:min(560px,calc(100dvh - 250px))}}
.cw-board{display:grid;gap:10px;width:var(--bs);min-width:300px}
.cw-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cw-title{display:flex;align-items:baseline;gap:10px;min-width:0}
.cw-title b{color:var(--bone);font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw .lvls button{width:34px;height:34px;border-radius:10px;font-size:13px}
.board-wrap{position:relative;width:100%}
.cw .board{width:100%;border-radius:16px}
.cw-win{position:absolute;inset:0;display:grid;place-items:end center;padding:12px;background:linear-gradient(180deg,transparent 30%,rgba(11,26,18,.85));border-radius:16px;animation:viewin .5s var(--ease);z-index:5}
.cw-win-in{width:100%;display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:rgba(23,25,28,.95);border:1px solid rgba(143,173,92,.5);box-shadow:0 18px 40px -10px rgba(0,0,0,.6)}
.cw-win-h{font:700 22px/1 var(--sans);color:var(--leaf);letter-spacing:-.02em}
.cw-win-in p{font-size:14px;color:var(--mist)}
.cw-win-in b{color:var(--bone)}
.cw .cstat{font-size:14px;min-height:42px;line-height:1.45}
.cw-code{display:flex;flex-direction:column;max-height:calc(var(--bs) + 110px);min-width:0}
.cw-code .code-tab{gap:8px}
.cw-code .code-tab .r{margin-left:auto}
.cw-code .py{flex:1;overflow:auto;min-height:120px;padding:10px 0}
.cw-code .tools{padding:10px 12px;gap:8px}
.ins-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.ins-row::-webkit-scrollbar{display:none}
.ins-row .ins{flex:none}
.edit-row{display:flex;gap:6px;flex-wrap:wrap}
.edit-row .edb{min-width:38px}
.edit-row #cReset{margin-left:auto}
.cw-help{margin-bottom:56px;border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:var(--night-2);font-size:15px}
.cw-help summary{cursor:pointer;font:500 12px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.cw-help p{margin-top:10px;max-width:80ch}
.cw-help strong{color:var(--bone)}
@media (max-width:860px){
  .cw{--bs:clamp(220px,calc(100vh - 430px),100%);grid-template-columns:minmax(0,1fr);gap:10px;padding-top:10px}
  @supports (height:100dvh){.cw{--bs:clamp(220px,calc(100dvh - 430px),100%)}}
  .cw-board{width:100%;min-width:0;justify-items:center;gap:8px}
  .cw-head{width:100%;justify-content:space-between;gap:8px}
  .cw-title .lbl{display:none}
  .cw-title b{font-size:15px}
  .cw .lvls{gap:4px}
  .cw .lvls button{width:30px;height:30px;border-radius:9px}
  .board-wrap{width:var(--bs)}
  .cw .cstat{min-height:0;font-size:13.5px;width:100%;text-align:center}
  .cw-code{max-height:none}
  .cw-code .py{max-height:150px;min-height:96px;font-size:14px;line-height:1.55;padding:6px 0}
  .cw-code .tools{padding:8px 10px;gap:6px}
  .edit-row .edb{padding:6px 9px}
  .lab-hero.compact .lede{display:none}
  .lab-hero.compact{padding-block:24px 14px}
}