:root{color-scheme:dark;--ink:#0b1020;--paper:#edf1ff;--blue:#7cbcff;--purple:#b9a0ff;--line:#344368}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,a,canvas{outline-offset:4px}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--blue)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;touch-action:manipulation;color:var(--paper)}button:disabled{cursor:default}header{height:54px;max-width:1400px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #26314d;gap:12px;font-size:12px}header>strong{letter-spacing:.12em}header>strong span{font-size:10px;color:var(--purple)}.brand{display:flex;align-items:center;gap:8px}.brand b{color:var(--purple);font-size:25px;letter-spacing:-2px}header>a:last-child{color:#b7c5e8}main{max-width:1400px;margin:auto}.hud{height:68px;display:flex;align-items:center;gap:30px;padding:8px 24px;background:#121b33}.hud>div>span{display:block;font-size:9px;letter-spacing:.1em;color:#b8c4e3;margin-bottom:5px}.hud strong{font-size:18px;font-variant-numeric:tabular-nums}.hud>div:first-child{flex:1}.hud #lives{color:var(--purple);letter-spacing:3px}.hud button{background:transparent;border:1px solid var(--line);border-radius:8px;width:44px;height:44px;flex-shrink:0;font-size:19px}.hud button:disabled{opacity:.4}.track-progress{height:3px;background:#243355;overflow:hidden}.track-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));transform-origin:left;transform:scaleX(0)}.stage{height:calc(100svh - 197px);position:relative;background:#101b32;min-height:0}canvas{width:100%;height:100%;display:block;touch-action:none}.route-hud{position:absolute;top:18px;left:22px;right:22px;display:flex;align-items:flex-start;gap:24px;pointer-events:none;text-shadow:0 2px 6px #000}.route-hud>div:first-child>span{font-size:11px;display:block;color:#d0dfff}.route-hud strong{font-size:33px;display:block;margin-top:7px}.route-hud small{font-size:10px}.turbo{width:130px;font-size:9px;letter-spacing:.08em}.turbo>div{height:6px;background:#0c1633bb;border:1px solid #7683aa;margin-top:9px;overflow:hidden}.turbo i{display:block;width:100%;height:100%;background:var(--blue);transform-origin:left}.route-hud>span{margin-left:auto;max-width:180px;text-align:right;font-size:11px;line-height:1.5;color:#e2dbff}.driving{height:72px;display:flex;align-items:center;gap:10px;padding:10px 24px;background:#10182c}.driving button{min-width:56px;height:48px;border:1px solid #536e9a;background:#182742;border-radius:9px;font-weight:700}.driving button.pressed{background:#739fde;color:#0b1020}.driving #boost{background:#b9a0ff;color:#17102c;border-color:#b9a0ff;padding:0 20px}.driving #boost.pressed{background:#e1d5ff}.driving #brake{padding:0 16px}.driving>span{flex:1;text-align:center;font-size:11px;color:#b8c8e8}.overlay{position:absolute;inset:0;z-index:3;padding:18px;display:grid;place-items:center;background:#080f24c9;backdrop-filter:blur(6px)}.panel{width:min(100%,650px);max-height:100%;overflow:auto;padding:25px 30px;border:1px solid #415982;border-radius:16px;background:#111a31;box-shadow:0 22px 70px #0006;scrollbar-width:thin}.eyebrow{font:10px monospace;color:var(--purple);letter-spacing:.15em;margin:0 0 10px}.panel h1{font-size:36px;letter-spacing:-.05em;line-height:1.1;margin:0 0 10px}.panel #copy{font-size:13px;line-height:1.6;color:#c5d1eb;margin:0 0 17px}.progress-caption{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#b5c2df;margin-bottom:10px}.progress-caption strong{color:var(--purple)}.stage-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.stage-picker button{text-align:left;display:flex;flex-direction:column;gap:8px;min-height:87px;padding:12px;border:1px solid #3d4b6e;background:#18243d;border-radius:9px}.stage-picker button[aria-pressed=true]{border-color:var(--blue);background:#233959}.stage-picker button:disabled{opacity:.5}.stage-picker button>span{font-size:9px;color:#b1c9f1;letter-spacing:.05em}.stage-picker strong{font-size:12px;line-height:1.35}.stage-picker small{font-size:9px;color:#d2beff;margin-top:auto}.brief{font-size:12px;line-height:1.6;padding:10px 12px;background:#1b2945;border-left:3px solid var(--blue);margin:14px 0}.primary,.secondary{width:100%;min-height:46px;border-radius:8px;font-weight:700;padding:12px 16px}.primary{background:var(--purple);color:#17112d;border:0;margin-top:8px}.secondary{background:transparent;border:1px solid #52668d;margin-top:8px;color:#d7e5ff}.tips{font-size:11px;line-height:1.7;color:#c2cdea;margin:12px 0}.storage-note{font-size:10px;line-height:1.5;color:#a9b8d6;margin:10px 0 0}.back{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);font-size:12px}.result{text-align:center;margin:16px 0;padding:15px;background:#1b2945;border-radius:9px}.result strong{font-size:40px;letter-spacing:7px;color:#e8c37f}.result p{font-size:13px;line-height:1.6}.result span{font-size:12px;color:#b8cdf2}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:700px){header{height:48px;padding:0 12px;font-size:10px}header>strong span{display:none}.brand{font-size:10px}.brand b{font-size:23px}.hud{height:68px;padding:8px 12px;gap:13px}.hud strong{font-size:14px}.hud>div>span{font-size:8px;letter-spacing:0}.hud>div:first-child{max-width:110px}.hud #stage-name{font-size:12px;line-height:1.3}.hud #lives{font-size:12px;letter-spacing:1px}.hud .distance strong{font-size:13px}.stage{height:calc(100svh - 191px)}.driving{height:72px;padding:10px 12px;gap:8px}.driving>span{display:none}.driving button{min-width:48px;flex:1}.driving #boost{flex:1.4;padding:0 12px}.driving #brake{padding:0 10px}.route-hud{top:14px;left:14px;right:14px;gap:15px}.route-hud strong{font-size:28px}.turbo{width:104px;font-size:8px}.route-hud>span{max-width:112px;font-size:10px}.panel{padding:20px;max-width:480px}.stage-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-picker button{min-height:72px;padding:9px;gap:5px}.panel h1{font-size:30px}.panel #copy{font-size:12px;margin-bottom:12px}.overlay{position:fixed;inset:48px 0 0;padding:12px}.brief{font-size:11px}.eyebrow{font-size:9px}}
@media(max-width:359px){.hud{gap:8px;padding-inline:9px}.hud>div:first-child{max-width:88px}.hud strong{font-size:12px}.hud #stage-name{font-size:11px}.hud .distance strong{font-size:11px}.hud button{width:44px}.panel{padding:15px}.panel h1{font-size:27px}.stage-picker button{min-height:66px}.stage-picker strong{font-size:11px}.tips{font-size:10px}}
@media(max-height:550px) and (min-width:701px){header{height:42px}.hud{height:54px}.stage{height:calc(100svh - 163px)}.driving{height:64px}.overlay{position:fixed;inset:42px 0 0;padding:10px}.panel{padding:17px 22px}.stage-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.stage-picker button{min-height:66px;padding:8px;gap:4px}.panel h1{font-size:28px}.panel #copy{margin-bottom:10px}.brief{margin:10px 0}.tips{margin:8px 0}}
.panel>#primary{position:sticky;bottom:0;z-index:2;box-shadow:0 10px 0 #111a31,0 -8px 16px #111a31}
@media(max-height:620px){.panel{padding:13px 17px}.panel .eyebrow{display:none}.panel h1{font-size:27px;margin-bottom:7px}.panel #copy{font-size:11px;line-height:1.4;margin-bottom:10px}.stage-picker button{min-height:62px;padding:8px;gap:4px}.stage-picker strong{font-size:11px}.brief{padding:8px 10px;margin:10px 0}.tips{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}