:root{--font-body:'Satoshi',system-ui,sans-serif;--font-display:'Cabinet Grotesk',system-ui,sans-serif;--text-xs:clamp(.75rem,.72rem + .15vw,.82rem);--text-sm:clamp(.875rem,.82rem + .2vw,.95rem);--text-base:1rem;--text-xl:clamp(1.5rem,1.3rem + .8vw,2rem);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--bg:oklch(96% .012 80);--surface:oklch(99% .006 80);--inset:oklch(92% .012 80);--text:oklch(24% .015 165);--muted:oklch(46% .012 165);--line:oklch(25% .01 160 / .16);--accent:#d66a14;--accent-bright:#f7a445;--accent-soft:#f6e5d2;--meter-bg:#c3c0b6;--stage:#e7e1d5;--stage-ink:#64665f;--stage-line:#bec0b4;--enemy:#697578;--rider:#ec8c28;--danger:#aa4f39;--blue:#218aaf}
[data-theme=dark]{--bg:oklch(17% .008 165);--surface:oklch(21% .009 165);--inset:oklch(25% .01 165);--text:oklch(94% .013 80);--muted:oklch(70% .012 80);--line:oklch(90% .02 80 / .15);--accent:#f0a14c;--accent-soft:#3d3021;--meter-bg:#414746;--stage:#282e2d;--stage-ink:#a3aaa3;--stage-line:#454f4b;--enemy:#9aa3a0;--blue:#65bad4}
body{font-family:var(--font-body);font-size:var(--text-base);background:var(--bg);color:var(--text);line-height:1.5}button,select{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:4px;font-size:var(--text-sm);padding:var(--space-2) var(--space-3);transition:background .15s,border-color .15s}button:hover:not(:disabled){background:var(--inset);border-color:var(--muted)}kbd{font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;border:1px solid var(--line);border-bottom-width:2px;padding:2px 6px;border-radius:3px;white-space:nowrap}small{font-size:var(--text-xs)}.shell{max-width:1680px;margin:auto;padding:0 var(--space-8)}.masthead{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:var(--space-4)}.brand{display:flex;align-items:center;gap:var(--space-3)}.brand svg{width:42px;height:48px;color:var(--accent)}h1{font:800 var(--text-xl)/1 var(--font-display);letter-spacing:.015em}.brand span,.eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--muted)}.brand span{display:block;margin-top:var(--space-2)}b{font-weight:700}.brand span b,footer b{margin:0 var(--space-2);color:var(--accent)}.header-tools{display:flex;align-items:center;gap:var(--space-3)}.quiet{border-color:transparent;background:transparent}.build-tag{font-size:var(--text-xs);letter-spacing:.09em;display:flex;align-items:center;gap:var(--space-2);color:var(--muted)}.build-tag i{width:6px;height:6px;background:var(--accent);border-radius:50%}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:var(--space-8);padding-top:var(--space-6)}.stage-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:var(--space-4);min-height:62px}.stage-heading h2{font:700 var(--text-xl)/1.1 var(--font-display);margin-top:var(--space-1)}.stage-status{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted)}.dot{height:3px;width:3px;border-radius:50%;background:var(--muted)}.arena{position:relative;aspect-ratio:16/9;background:var(--stage);border:1px solid var(--line);overflow:hidden;border-radius:4px}canvas{display:block;width:100%;height:100%}.hud{position:absolute;left:var(--space-6);right:var(--space-6);top:var(--space-5);display:flex;justify-content:space-between;gap:var(--space-10);pointer-events:none}.health{width:34%;font-size:var(--text-xs)}.health>div:first-child{display:flex;justify-content:space-between;gap:var(--space-2);font-size:var(--text-xs);letter-spacing:.04em}.health meter{height:6px;width:100%;display:block;margin-top:var(--space-2);--accent:var(--rider)}.target-health meter{--accent:var(--enemy)}.gauge{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--text-xs)}#meter-track{height:3px;position:relative;flex:1;background:var(--meter-bg)}#meter-fill{display:block;height:100%;background:var(--accent);width:0}.threshold{position:absolute;left:25%;top:-3px;width:1px;height:9px;background:var(--stage-ink)}.target-caption{display:block;text-align:right;color:var(--muted);margin-top:var(--space-2)}.stage-corner{position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-3);display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--muted);letter-spacing:.06em;pointer-events:none}.overlay{position:absolute;inset:0;background:color-mix(in srgb,var(--stage) 92%,transparent);display:flex;align-items:center;justify-content:center;text-align:center;z-index:5}.intro h2,.pause-card h2{font:800 clamp(28px,3vw,48px)/1.05 var(--font-display);margin:var(--space-3) 0}.intro p,.pause-card p{color:var(--muted);font-size:var(--text-base);margin-bottom:var(--space-5)}.primary{background:var(--accent);color:#171b1b;border:none;font-weight:700;min-width:185px;padding:var(--space-3) var(--space-5)}.primary:hover:not(:disabled){background:var(--accent-bright)}.primary span{margin-left:var(--space-6)}.intro-note{display:block;font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-3)}.feedback{position:absolute;top:24%;left:50%;transform:translateX(-50%);font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;white-space:nowrap;color:var(--text);background:var(--surface);border:1px solid var(--line);padding:var(--space-1) var(--space-3);opacity:0;pointer-events:none}.feedback.on{opacity:1}.combo{position:absolute;left:var(--space-6);top:27%;display:none;color:var(--accent)}.combo.on{display:flex;flex-direction:column}.combo strong{font:800 48px/1 var(--font-display)}.combo span{font-size:var(--text-xs);letter-spacing:.1em}.transport{display:flex;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) 0}.transport-left,.transport-right{display:flex;gap:var(--space-2)}.transport button{background:transparent}.transport kbd{margin-left:var(--space-2)}.inspector{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:var(--space-4)}.inspector-title{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--muted)}.frame-readout{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-2) 0 var(--space-3)}.frame-readout strong{font-size:var(--text-sm);letter-spacing:.06em;min-width:150px}.frame-readout>span{color:var(--muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.phase-legend{display:flex;gap:var(--space-3);margin-left:auto;font-size:var(--text-xs);color:var(--muted)}.phase-legend span:before{content:"";width:6px;height:6px;display:inline-block;margin-right:5px;background:#a3aba9}.phase-legend span:nth-child(2):before{background:var(--rider)}.phase-legend span:nth-child(3):before{background:#646f71}.frame-track{height:14px;position:relative;background:var(--inset);display:flex;gap:2px}.frame-track>span{height:100%;flex:1;background:var(--inset)}.frame-track .startup{background:#a3aba9}.frame-track .active{background:var(--rider)}.frame-track .recovery{background:#646f71}.frame-track i{position:absolute;width:2px;top:-4px;bottom:-4px;background:var(--text);z-index:2}.telemetry{display:flex;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-3)}.telemetry b{color:var(--text);font-weight:500;margin-left:var(--space-1);font-variant-numeric:tabular-nums}.practice{padding:var(--space-5) 0 0}.practice h2{font:700 var(--text-xl)/1.15 var(--font-display);margin:var(--space-2) 0 var(--space-3)}.practice p{color:var(--muted);font-size:var(--text-sm);line-height:1.6}.route{list-style:none;padding:0;margin:var(--space-5) 0}.route li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}.route-num{color:var(--muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.route li>div{flex:1}.route b{display:block;font-size:var(--text-sm);font-weight:500}.route small{color:var(--muted)}.route li.done .route-num,.route li.done b{color:var(--accent)}.route li.done kbd{background:var(--accent-soft);border-color:var(--accent)}.demo-row{display:flex;gap:var(--space-2)}.demo-row button{flex:1;text-align:left;background:var(--inset)}.demo-row button span{float:right}.demo-row select{width:108px;padding-inline:var(--space-2);font-size:var(--text-xs)}.practice-divider{height:1px;background:var(--line);margin:var(--space-6) 0}.practice>select{width:100%;margin:var(--space-2) 0 var(--space-3);font-size:var(--text-sm)}.options{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-4) 0;font-size:var(--text-xs)}.options label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;min-height:30px}.options input{accent-color:var(--accent);width:15px;height:15px}.session-stats{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:var(--space-4);gap:var(--space-2)}.session-stats span{font-size:var(--text-xs);color:var(--muted);letter-spacing:.02em}.session-stats strong{font:700 28px/1.4 var(--font-display);display:block}.replay{width:100%;margin:var(--space-3) 0 var(--space-2);text-align:left}.practice .save-note,.save-note{font-size:var(--text-xs);color:var(--muted)}.quick-controls{display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-5) 0;border-bottom:1px solid var(--line)}.quick-controls>div{display:flex;flex-direction:column;gap:var(--space-2)}.quick-controls span{font-size:var(--text-sm)}.quick-controls .eyebrow{font-size:var(--text-xs)}.quick-controls kbd{margin-right:var(--space-1)}.quick-controls small{color:var(--muted)}footer{display:flex;justify-content:space-between;color:var(--muted);font-size:var(--text-xs);padding:var(--space-5) 0;gap:var(--space-4)}dialog{max-width:560px;width:calc(100% - 32px);background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:var(--space-8)}dialog::backdrop{background:#0d1218a0;backdrop-filter:blur(3px)}dialog h2{font:700 var(--text-xl) var(--font-display);margin:var(--space-3) 0}dialog p,dialog dd{font-size:var(--text-sm);color:var(--muted)}dialog dt{font-weight:700;font-size:var(--text-sm);margin-top:var(--space-4)}dialog dd{margin:var(--space-1) 0;line-height:1.8}.close{position:absolute;right:var(--space-3);top:var(--space-3);width:44px;font-size:24px;background:transparent;border:none}#error{position:fixed;inset:auto 16px 16px;background:#642f26;color:white;padding:24px;z-index:40}
@media(min-width:1600px){.shell{padding-inline:var(--space-10)}.workspace{grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:1100px){.shell{padding:0 var(--space-5)}.workspace{gap:var(--space-5);grid-template-columns:minmax(0,1fr) 260px}.build-tag{display:none}.hud{left:var(--space-3);right:var(--space-3);top:var(--space-3);gap:var(--space-4)}.health{width:42%}.health>div:first-child b{font-size:11px}.stage-corner{font-size:10px}.transport kbd{display:none}.phase-legend{gap:var(--space-2)}.quick-controls{gap:var(--space-3);flex-wrap:wrap}.practice p{font-size:var(--text-xs)}}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.practice{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-6)}.practice>.eyebrow,.practice>h2,.practice>p,.practice>.route,.practice>.demo-row{grid-column:1}.practice>.practice-divider{display:none}.practice>label[for=mode]{grid-column:2;grid-row:1}.practice>#mode{grid-column:2;grid-row:2;align-self:start}.practice>.mode-description{grid-column:2;grid-row:3}.practice>.options{grid-column:2;grid-row:4;align-self:start}.practice>.session-stats{grid-column:2;grid-row:4;align-self:center}.practice>.replay{grid-column:2;grid-row:4;align-self:end}.practice>.save-note{grid-column:2;grid-row:5}.route{margin-block:var(--space-3)}.stage-heading{min-height:48px}.masthead{height:88px}.intro h2{font-size:36px}.quick-controls{display:none}footer{border-top:1px solid var(--line)}}
@media(max-width:560px){.shell{padding:0 var(--space-3)}.masthead{gap:var(--space-2);height:80px}.brand svg{width:30px;height:38px}.brand h1{font-size:22px}.brand span{font-size:10px;letter-spacing:.06em}.header-tools{gap:0}.header-tools #help{font-size:var(--text-xs);padding-inline:var(--space-2)}.header-tools #help kbd{display:none}.header-tools #theme{font-size:0;width:44px}.header-tools #theme:before{content:'◐';font-size:22px}.workspace{padding-top:var(--space-3)}.stage-heading h2{font-size:24px}.stage-status{font-size:11px}.stage-heading .eyebrow{font-size:10px}.hud{left:8px;right:8px;top:8px;gap:8px}.health{width:44%}.health>div:first-child b{font-size:8px;letter-spacing:0}.health>div:first-child>span{font-size:9px}.health meter{margin-top:4px;height:4px}.gauge,.target-caption{font-size:8px;margin-top:4px;gap:4px}.stage-corner{font-size:8px;left:8px;right:8px;bottom:6px;letter-spacing:0}.intro .eyebrow{font-size:9px}.intro h2{font-size:27px;margin:8px 0}.intro p{font-size:12px;margin-bottom:10px}.intro .primary{min-height:40px;padding:8px 12px;font-size:13px}.intro-note{font-size:9px;margin-top:6px}.intro-note{display:none}.transport button{font-size:12px;padding:8px}.transport,.transport-left,.transport-right{gap:4px}.inspector{padding:var(--space-3)}.frame-readout strong{min-width:100px;font-size:12px}.phase-legend{font-size:10px;gap:5px}.phase-legend span:before{width:4px;height:4px;margin-right:3px}.frame-readout{gap:8px}.telemetry{font-size:11px;gap:8px}.practice{display:block;padding-top:var(--space-2)}.practice p{font-size:14px}.practice-divider{display:block!important}.session-stats{margin-top:16px}.route b{font-size:14px}.feedback{font-size:9px;top:33%;padding:2px 6px}.combo{top:36%;left:12px}.combo strong{font-size:28px}.combo span{font-size:8px}.pause-card h2{font-size:28px}.pause-card p{font-size:12px;margin-bottom:12px}.pause-card button{min-height:40px;padding:8px}.pause-card .eyebrow{font-size:10px}footer{flex-direction:column;gap:4px;font-size:10px}dialog{padding:var(--space-6)}}