.gr-root{background:#4f9be0;position:fixed;inset:0;overflow:hidden}.gr-canvas{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.gr-hud{pointer-events:none;padding:max(12px, env(safe-area-inset-top)) 16px 16px;flex-direction:column;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.gr-topbar{justify-content:space-between;align-items:flex-start;gap:12px;width:100%;display:flex}.gr-btn{pointer-events:auto;font-family:var(--font-display);color:var(--ink);background:var(--sun);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;border-radius:999px;padding:10px 22px;font-size:18px;font-weight:600;transition:transform 80ms,box-shadow 80ms}.gr-btn:hover{box-shadow:0 5px 0 var(--ink);transform:translateY(-1px)}.gr-btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.gr-btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}.gr-btn-quiet{background:var(--snow);padding:8px 16px;font-size:16px}.gr-btn-quiet[aria-pressed=true]{background:var(--stop);color:#fff}.gr-btn-go{padding:14px 44px;font-size:26px}.gr-stats{border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);background:#f6f9fceb;border-radius:20px;flex-direction:column;align-items:center;gap:8px;padding:8px 16px;display:flex}.gr-hearts{gap:4px;display:flex}.gr-heart path{fill:#22263a26;stroke:var(--ink);stroke-width:1.6px}.gr-heart.on path{fill:var(--stop)}.gr-practice{font-family:var(--font-display);color:var(--ink);background:var(--sky);border:2px solid var(--ink);border-radius:999px;padding:5px 12px;font-size:15px;font-weight:600;line-height:1}.gr-pips{gap:5px;display:flex}.gr-pip{border:2px solid var(--ink);background:var(--snow);border-radius:50%;width:13px;height:13px}.gr-pip-correct{background:var(--go)}.gr-pip-wrong{background:var(--stop)}.gr-pip-now{background:var(--sun)}.gr-score{font-family:var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;line-height:1}.gr-problem{font-family:var(--font-display);color:var(--ink);background:var(--snow);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;border-radius:28px;align-items:baseline;gap:.35em;padding:.18em .6em .22em;font-size:clamp(40px,8.5vw,88px);font-weight:700;line-height:1;display:flex}.gr-problem-eq{opacity:.55;font-size:.7em}.gr-flash{font-family:var(--font-display);color:#fff;border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);white-space:nowrap;border-radius:999px;padding:.2em .7em;font-size:clamp(32px,6vw,60px);font-weight:700;animation:.32s cubic-bezier(.2,1.4,.4,1) forwards gr-pop;transform:scale(.6)}.gr-flash-correct{background:var(--go)}.gr-flash-wrong{background:var(--stop)}@keyframes gr-pop{to{transform:scale(1)}}.gr-note{font-family:var(--font-display);color:var(--ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);background:#f6f9fceb;border-radius:999px;padding:8px 18px;font-size:20px;font-weight:600}.gr-note kbd,.gr-keys kbd{font-family:var(--font-display);border:2px solid var(--ink);color:var(--ink);background:#fff;border-bottom-width:4px;border-radius:8px;padding:1px 8px;font-size:.85em}.gr-touch{justify-content:space-between;gap:12px;width:100%;margin-top:auto;display:none}.gr-touch .gr-btn{padding:14px 26px;font-size:20px}@media (pointer:coarse){.gr-touch{display:flex}}.gr-overlay{background:#22263a52;place-items:center;padding:16px;display:grid;position:absolute;inset:0;overflow:auto}.gr-card{background:var(--snow);border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);text-align:center;border-radius:28px;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:880px;padding:28px 32px 30px;display:flex}.gr-card-title{font-family:var(--font-display);color:var(--ink);margin:0;font-size:34px;font-weight:700;line-height:1.1}.gr-card-body{color:var(--ink);max-width:40ch;margin:0;font-size:18px;line-height:1.45}.gr-card-fine{color:var(--ink-soft);max-width:44ch;margin:0;font-size:15px;line-height:1.4}.gr-keys{color:var(--ink);flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0;padding:0;font-size:16px;list-style:none;display:flex}.gr-card-actions{flex-direction:column;align-items:center;gap:4px;margin-top:4px;display:flex}.gr-picker,.gr-level-picker{--gr-gap:12px;justify-content:center;gap:var(--gr-gap);flex-wrap:wrap;width:100%;display:flex}.gr-picker{--gr-cols:5}.gr-level-picker{--gr-cols:3}.gr-car,.gr-level{--gr-col:calc((100% - (var(--gr-cols) - 1) * var(--gr-gap)) / var(--gr-cols));pointer-events:auto;flex:0 1 var(--gr-col);max-width:var(--gr-col);border:3px solid var(--snow-deep);cursor:pointer;color:var(--ink);text-align:center;background:#fff;border-radius:20px;flex-direction:column;align-items:center;transition:transform 80ms;display:flex}.gr-car:hover,.gr-level:hover{transform:translateY(-2px)}.gr-car:focus-visible,.gr-level:focus-visible{outline:3px solid var(--sky);outline-offset:2px}.gr-car-on,.gr-level-on{border-color:var(--ink);box-shadow:0 4px 0 var(--ink);background:#fff8dd}.gr-car{gap:4px;padding:10px 10px 12px}.gr-level{justify-content:center;gap:6px;padding:16px 12px 18px}.gr-car-preview{aspect-ratio:150/96;width:150px;max-width:100%;height:auto}.gr-car-name,.gr-level-name{font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1}.gr-level-name{font-size:22px}.gr-car-tag,.gr-level-tag{color:var(--ink-soft);font-size:13px;line-height:1.3}@media (height<=820px){.gr-card{gap:10px;padding:20px 24px 22px}}@media (height<=740px){.gr-car-tag{display:none}}@media (width<=640px){.gr-topbar{flex-wrap:wrap}.gr-stats{flex-direction:row;order:-1;justify-content:space-between;width:100%}.gr-card{gap:6px;padding:12px 12px 14px}.gr-keys{gap:4px 16px}.gr-car-tag{display:none}.gr-picker{--gr-cols:3}.gr-level-picker{--gr-cols:2}.gr-car{padding:6px 6px 8px}.gr-level{padding:6px 8px}}@media (width>=520px) and (width<=640px) and (height<=820px){.gr-card{padding:10px 12px 12px}.gr-picker{--gr-cols:5}.gr-level-picker{--gr-cols:3}}@media (prefers-reduced-motion:reduce){.gr-flash{animation:none;transform:none}.gr-btn,.gr-car,.gr-level{transition:none}}.gr-root-3d .gr-note{margin-top:auto;margin-bottom:0}.gr-root-3d .gr-note~.gr-touch{margin-top:0}:root{--snow:#f6f9fc;--snow-deep:#dde7f0;--ice:#bfe0f7;--sky:#4f9be0;--ink:#22263a;--ink-soft:#5b6275;--asphalt:#474d5b;--asphalt-deep:#2c3039;--kerb:#e0463f;--go:#4cbb6a;--go-deep:#2f8f4e;--sun:#ffc53d;--sun-deep:#e6a600;--stop:#e8465e;--rock:#a7b0c0;--pine:#2f6f53;--font-display:"Fredoka", "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;--font-body:"Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;--step-0:17px;--step-1:21px;--step-2:27px;--step-3:34px;--step-4:44px;--step-5:56px}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-body);font-size:var(--step-0);color:var(--ink);background:var(--snow);-webkit-font-smoothing:antialiased;margin:0;line-height:1.5}button{font:inherit}.st-btn{font-family:var(--font-display);font-weight:600;font-size:var(--step-1);color:var(--ink);background:var(--sun);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;border-radius:999px;align-self:flex-start;padding:10px 26px;transition:transform 80ms,box-shadow 80ms}.st-btn:hover{box-shadow:0 5px 0 var(--ink);transform:translateY(-1px)}.st-btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.st-btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}.st-title{background:linear-gradient(180deg, var(--sky) 0%, var(--ice) 45%, var(--snow) 70%);place-items:center;min-height:100%;padding:24px 20px;display:grid;position:relative}.st-title-peaks{pointer-events:none;height:min(42vh,300px);position:absolute;bottom:0;left:0;right:0}.st-title-peaks span{position:absolute;inset:0}.st-title-ridge-far{background:var(--rock);clip-path:polygon(0 100%,0 62%,14% 30%,27% 58%,43% 18%,58% 52%,72% 26%,88% 56%,100% 38%,100% 100%)}.st-title-ridge-near{background:var(--snow-deep);clip-path:polygon(0 100%,0 78%,18% 48%,34% 76%,52% 40%,70% 72%,86% 54%,100% 80%,100% 100%)}.st-title-col{text-align:center;flex-direction:column;align-items:center;gap:clamp(8px,2.2vh,20px);width:100%;max-width:560px;display:flex;position:relative}.st-title-name{font-family:var(--font-display);color:var(--snow);text-shadow:.07em .07em 0 var(--ink);margin:0;font-size:clamp(34px,min(11vw,9vh),64px);font-weight:700;line-height:1.05}.st-title-sub{max-width:34ch;font-size:var(--step-1);margin:0}.st-title-play,.st-title-quiet{align-self:center}.st-title-play{padding:.45em 1.6em;font-size:clamp(24px,3.6vh,34px)}.st-title-stars{font-family:var(--font-display);font-weight:600;font-size:var(--step-1);font-variant-numeric:tabular-nums;align-items:center;gap:8px;margin:0;display:flex}.st-title-stars svg{width:28px;height:28px}.st-title-quiet{background:var(--snow);padding:8px 18px;font-size:16px}.st-title-yes{background:var(--stop);color:#fff}.st-title-confirm{flex-direction:column;align-items:center;gap:8px;display:flex}.st-title-confirm p{margin:0;font-size:16px}.st-title-confirm-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.st-results{background:linear-gradient(180deg, var(--sky) 0%, var(--ice) 45%, var(--snow) 70%);place-items:center;min-height:100%;padding:24px;display:grid}.st-results-card{border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);text-align:center;background:#fff;border-radius:32px;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:520px;padding:32px 36px 36px;display:flex}.st-results-card h1{font-family:var(--font-display);font-weight:700;font-size:var(--step-4);margin:0;line-height:1.05}.st-results-sub{color:var(--ink-soft);margin:0}.st-big-stars{gap:8px;margin:8px 0;display:flex}.st-big-stars svg{width:84px;height:84px;animation:.42s cubic-bezier(.2,1.5,.4,1) forwards st-star-in;transform:scale(0)}.st-big-stars svg:nth-child(2){animation-delay:.22s}.st-big-stars svg:nth-child(3){animation-delay:.44s}.st-big-stars svg path,.st-title-stars svg path{fill:var(--snow-deep);stroke:var(--ink);stroke-width:1.4px}.st-big-stars svg.on path,.st-title-stars svg.on path{fill:var(--sun)}@keyframes st-star-in{to{transform:scale(1)}}.st-results-line{font-family:var(--font-display);font-weight:600;font-size:var(--step-2);font-variant-numeric:tabular-nums;margin:0}.st-results-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:12px;display:flex}@media (prefers-reduced-motion:reduce){.st-big-stars svg{animation:none;transform:none}.st-btn{transition:none}}