:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{
  --paper:#F1F4EE; --surface:#FAFBF7; --surface-2:#E7ECE4; --ink:#1B2130; --muted:#586173;
  --line:#D3DACF; --grid:#E0E6DC;
  --amber:#C07F00; --cobalt:#2D49D6; --verm:#CF4236; --violet:#7743C6; --slate:#7A8393; --teal:#12817B;
  --ok:#1C8556; --bad:#C0392B;
  --cobalt-soft:rgba(45,73,214,.11); --amber-soft:rgba(192,127,0,.13); --ok-soft:rgba(28,133,86,.12); --bad-soft:rgba(192,57,43,.11);
  --hud:rgba(241,244,238,.92);
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F131B; --surface:#161B26; --surface-2:#1C2230; --ink:#E5E8EE; --muted:#98A1B1;
    --line:#2A3243; --grid:#1E2533;
    --amber:#F0B42E; --cobalt:#8397FF; --verm:#FF6B5F; --violet:#B98DFF; --slate:#8D96A6; --teal:#3BC5BA;
    --ok:#3DBE84; --bad:#FF6B5F;
    --cobalt-soft:rgba(131,151,255,.15); --amber-soft:rgba(240,180,46,.15); --ok-soft:rgba(61,190,132,.14); --bad-soft:rgba(255,107,95,.13);
    --hud:rgba(15,19,27,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0F131B; --surface:#161B26; --surface-2:#1C2230; --ink:#E5E8EE; --muted:#98A1B1;
  --line:#2A3243; --grid:#1E2533;
  --amber:#F0B42E; --cobalt:#8397FF; --verm:#FF6B5F; --violet:#B98DFF; --slate:#8D96A6; --teal:#3BC5BA;
  --ok:#3DBE84; --bad:#FF6B5F;
  --cobalt-soft:rgba(131,151,255,.15); --amber-soft:rgba(240,180,46,.15); --ok-soft:rgba(61,190,132,.14); --bad-soft:rgba(255,107,95,.13);
  --hud:rgba(15,19,27,.9);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;background-attachment:fixed}
.wrap{max-width:1040px;margin:0 auto;padding-inline:16px}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:var(--cobalt)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* HUD */
.hud{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--hud);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hud-row{display:flex;align-items:center;gap:18px;padding-block:10px;flex-wrap:wrap}
.mark{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;display:flex;align-items:baseline;gap:8px}
.mark span{font-family:var(--body);font-weight:700;font-size:13px;color:var(--muted)}
.route{list-style:none;display:flex;align-items:center;gap:0;margin:0;padding:0}
.route li{display:flex;align-items:center}
.route li+li::before{content:"";width:18px;height:2px;background:var(--line)}
.route li.done+li::before{background:var(--cobalt)}
.route a{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;background:var(--surface)}
.route li.done a{background:var(--cobalt);border-color:var(--cobalt);color:var(--surface)}
.xp{margin-left:auto;min-width:190px;flex:0 1 260px}
.xp-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px}
.xp-top b{font-weight:600}
#rank{font-family:var(--display);font-size:12px;font-weight:500}
.xp-bar{height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:4px;border:1px solid var(--line)}
.xp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--cobalt));transition:width .5s ease}

/* hero */
.hero{padding-block:44px 28px;display:grid;gap:22px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt)}
.hero h1{font-size:clamp(30px,5.4vw,58px);line-height:1.04;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero h1 strong{font-weight:700;color:var(--cobalt)}
.lede{font-size:18px;max-width:64ch;color:var(--ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:stretch}
.hero-fig{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:8px}
#heroCanvas{width:100%;height:250px;display:block}
.hero-fig figcaption{font-size:13px;color:var(--muted)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:baseline;margin-right:4px}
.eq-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:12px;align-content:start}
.eq{font-family:var(--mono);font-size:clamp(15px,2vw,18px);padding:12px;border-radius:8px;background:var(--cobalt-soft);color:var(--ink);overflow-x:auto;white-space:nowrap}
.eq sub,.eq sup{font-size:.68em}
.defs{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:14px}
.defs dt{font-family:var(--mono);font-weight:600;color:var(--cobalt)}
.defs dd{margin:0;color:var(--ink)}
.small{font-size:13px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:transform .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.cobalt{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.btn.sm{padding:6px 12px;font-size:13px}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* levels */
.level{padding-block:40px;border-top:1px solid var(--line);display:grid;gap:18px}
.lvl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.lvl-head h2{font-size:clamp(22px,3.2vw,32px)}
.lvl-tag{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);margin-bottom:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:12px;padding:4px 10px;border-radius:999px;border:1px dashed var(--line);color:var(--muted);white-space:nowrap}
.chip.got{border-style:solid;border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.brief{max-width:68ch;font-size:16.5px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px}

/* rules */
.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.rule{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;gap:10px;align-content:space-between}
.rule.right{border-color:var(--ok);background:linear-gradient(var(--ok-soft),var(--ok-soft)),var(--surface)}
.rule.wrong{border-color:var(--bad);background:linear-gradient(var(--bad-soft),var(--bad-soft)),var(--surface)}
.rule p.move{font-weight:700}
.rule .acts{display:flex;gap:8px}
.rule .acts button{flex:1;border:1.5px solid var(--line);background:var(--paper);border-radius:8px;padding:7px;font-weight:700;font-size:13px;cursor:pointer}
.rule .acts button:hover{border-color:var(--ink)}
.rule .acts button:disabled{cursor:default}
.rule .acts button.pick-ok{border-color:var(--ok);color:var(--ok)}
.rule .acts button.pick-bad{border-color:var(--bad);color:var(--bad)}
.rule .why{font-size:14px;color:var(--ink)}
.rule .verdict{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.rule.right .verdict{color:var(--ok)} .rule.wrong .verdict{color:var(--bad)}

/* survey */
.survey{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:start}
.canvas-box{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;gap:6px}
.canvas-box canvas{width:100%;display:block;touch-action:none}
#l2in{aspect-ratio:1}
#l2out{aspect-ratio:1;cursor:grab}
.stats{display:grid;gap:12px}
.meter{height:12px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;position:relative}
.meter i{display:block;height:100%;width:0;background:var(--cobalt);transition:width .15s ease}
.meter::after{content:"";position:absolute;left:90%;top:-2px;bottom:-2px;width:2px;background:var(--ink);opacity:.5}
.mats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mat{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px}
.mat .label{font-size:10px;display:block;margin-bottom:4px}
.mat table{border-collapse:collapse;width:100%}
.mat td{text-align:right;padding:1px 3px}
.sliders{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:center;font-family:var(--mono);font-size:12px}
.sliders input{width:100%;accent-color:var(--cobalt)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* race */
.arena{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.racer{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;gap:8px}
.racer header{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px}
.racer header .sw{width:18px;height:4px;border-radius:2px}
.racer canvas{width:100%;aspect-ratio:1;display:block;border-radius:6px}
.racer .nums{display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:12px}
.racer .nums b{display:block;font-family:var(--mono);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.racer .note{font-size:12px;color:var(--muted)}
.racer.lead{border-color:var(--ok)}
.race-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:14px;align-items:start}
.bet fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
.bet legend{font-weight:700;margin-bottom:6px;padding:0}
.bet label{display:flex;gap:8px;align-items:center;font-size:14px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);cursor:pointer}
.bet input{accent-color:var(--cobalt)}
#raceChart{width:100%;height:230px;display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:16px;height:3px;border-radius:2px;display:inline-block}
.result{font-size:14.5px;padding:10px 12px;border-radius:8px;background:var(--cobalt-soft)}

/* lab */
.lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:14px;align-items:start}
.knob{display:grid;gap:4px}
.knob .k-top{display:flex;justify-content:space-between;align-items:baseline}
.knob .k-top b{font-family:var(--mono);font-weight:600;font-size:14px}
.knob input{width:100%;accent-color:var(--cobalt)}
.knob p{font-size:13px;color:var(--muted)}
.progress{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--amber)}
.table-wrap{overflow-x:auto}
table.nb{border-collapse:collapse;width:100%;font-size:13.5px;min-width:520px}
table.nb th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1.5px solid var(--line)}
table.nb td{padding:7px 8px;border-bottom:1px solid var(--line);font-family:var(--mono);font-variant-numeric:tabular-nums}
table.nb tr.base td{color:var(--muted)}
table.nb tr.win td:nth-child(6){color:var(--ok);font-weight:600}
table.nb td.empty{font-family:var(--body);color:var(--muted)}

/* transformer */
.tf{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:start}
.svg-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px}
#tfSvg{display:block;width:100%;min-width:560px;height:auto}
#tfSvg text{font-family:var(--mono)}
.quiz fieldset{border:0;padding:0;margin:0;display:grid;gap:6px}
.quiz legend{font-weight:700;margin-bottom:6px;padding:0}
.quiz label{display:flex;gap:8px;align-items:flex-start;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);cursor:pointer}
.quiz input{accent-color:var(--cobalt);margin-top:4px}
.facts{display:grid;gap:6px;font-size:14px;margin:0;padding-left:18px}

/* finale */
.finale{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;align-items:start}
.badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.badge{border:1.5px dashed var(--line);border-radius:10px;padding:10px;display:grid;gap:3px;color:var(--muted);background:var(--surface)}
.badge b{font-family:var(--display);font-size:12.5px;font-weight:500;color:var(--muted)}
.badge span{font-size:12px}
.badge.got{border-style:solid;border-color:var(--cobalt);background:linear-gradient(var(--cobalt-soft),var(--cobalt-soft)),var(--surface)}
.badge.got b{color:var(--cobalt)}
.notes{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.notes li{padding-left:14px;border-left:3px solid var(--amber);font-size:14.5px}
footer{padding-block:28px 48px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:grid;gap:6px}
footer code{font-family:var(--mono);font-size:12px}

#toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:13.5px;font-weight:600;padding:10px 16px;border-radius:999px;transition:opacity .25s ease,transform .25s ease;z-index:40;box-shadow:0 8px 24px rgba(0,0,0,.18)}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .hero-grid,.race-bar,.lab,.tf,.finale{grid-template-columns:minmax(0,1fr)}
  .survey{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
  .survey .stats{grid-column:1/-1}
  .arena{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .survey{grid-template-columns:minmax(0,1fr)}
  .xp{margin-left:0;flex-basis:100%}
  .hud-row{gap:10px}
  #heroCanvas{height:200px}
  .mats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}