.surf-stage{aspect-ratio:4/5;background:var(--color-accent-strong,#017b7f);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:1.25rem;width:100%;min-height:18rem;max-height:calc(100svh - 15rem);position:relative;overflow:hidden}@media (width>=640px){.surf-stage{aspect-ratio:16/9;max-height:80vh}}.surf-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.surf-hud{color:var(--color-ink-0,#0b0b0c);font-variant-numeric:tabular-nums;pointer-events:none;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;padding:.9rem 1.1rem;display:flex;position:absolute;inset:0 0 auto}.surf-hud strong{font-size:1.35rem}.surf-hud-label{text-transform:uppercase;letter-spacing:.08em;opacity:.7;font-size:.75rem}.surf-hud-combo{color:var(--color-accent-strong,#017b7f);min-width:3rem;font-weight:700}.surf-callouts{flex-basis:100%;margin:0;padding:0;font-size:.95rem;font-weight:700;list-style:none}.surf-callouts li{opacity:.95}.surf-callouts li.is-old{opacity:.45}.surf-cue{text-align:center;width:max-content;max-width:calc(100% - 2rem);font:800 clamp(1.1rem, 3.4vw, 2.2rem)/1.1 var(--font-display,"Inter Tight", ui-sans-serif, system-ui, sans-serif);color:var(--color-surface-0,#fbfbfa);pointer-events:none;background:#0b0b0c9e;border-radius:999px;margin:0;padding:.45em .9em;position:absolute;bottom:14%;left:50%;transform:translate(-50%)}.surf-cue:empty{display:none}.tube-verdict{text-align:center;pointer-events:none;place-content:center;gap:.6rem;padding:1rem;display:grid;position:absolute;inset:0}.tube-verdict[hidden]{display:none}.is-rulez .surf-hud,.is-rulez .surf-hud-combo{color:#fff}.tube-verdict-title{font:800 clamp(2rem, 7vw, 4.5rem)/1 var(--font-display,"Inter Tight", ui-sans-serif, system-ui, sans-serif);letter-spacing:-.01em;color:#fff;text-shadow:0 4px 24px #00000040;margin:0}.tube-verdict-score{font:700 clamp(1.25rem, 3.5vw, 2rem)/1.1 var(--font-display,"Inter Tight", ui-sans-serif, system-ui, sans-serif);color:#fff;font-variant-numeric:tabular-nums;margin:0}.tube-verdict-score:empty{display:none}.tube-verdict.is-fail{place-content:start center;padding-top:12%}.tube-verdict.is-fail .tube-verdict-title{color:var(--color-ink-0,#0b0b0c);text-shadow:0 2px 18px #fff9;font-size:clamp(1.6rem,5.5vw,3.5rem)}.surf-ov{background:#0b0b0c47;place-items:center;padding:1rem;display:grid;position:absolute;inset:0}.surf-ov[hidden]{display:none}.surf-card{background:var(--color-surface-0,#fbfbfa);width:min(26rem,100%);max-height:100%;color:var(--color-ink-1,#1a1b1d);text-align:center;border-radius:1.25rem;padding:1.5rem 1.5rem 1.25rem;overflow:auto;box-shadow:0 20px 60px #00000040}.surf-card-title{color:var(--color-ink-0,#0b0b0c);margin:0 0 1rem;font-size:clamp(1.5rem,3vw,2rem);font-weight:800}.surf-howto{margin:0 0 1.25rem;padding:0;font-size:.95rem;line-height:1.7;list-style:none}@media (width<=639px){.surf-card{padding:1.1rem 1rem 1rem}.surf-card-title{margin-bottom:.6rem}.surf-howto{margin-bottom:.9rem;font-size:.85rem;line-height:1.55}}@media (pointer:coarse){.surf-kb{display:none}}.surf-howto kbd{border:1.5px solid var(--color-rule,#e3e2de);background:var(--color-surface-2,#fff);border-radius:.35rem;min-width:1.6em;padding:0 .35em;font:600 .8rem/1.5 ui-monospace,monospace;display:inline-block}.surf-play{background:var(--color-ink-0,#0b0b0c);min-height:48px;color:var(--color-surface-0,#fbfbfa);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;padding:0 2rem;font-size:1.05rem;font-weight:600;display:inline-flex}.surf-play:hover{background:var(--color-coral,#ff835e);color:var(--color-ink-0,#0b0b0c)}.surf-play:focus-visible,.surf-btn:focus-visible{outline:3px solid var(--color-focus,#0b0b0c);outline-offset:3px}.surf-best{margin:1rem 0 .25rem;font-weight:600}.surf-recent,.surf-waves{color:var(--color-ink-2,#6e6f73);font-variant-numeric:tabular-nums;margin:0;padding:0;font-size:.9rem;list-style:none}.surf-waves{color:var(--color-ink-1,#1a1b1d);font-size:1rem;line-height:1.8}.surf-total{margin:.5rem 0 1.25rem;font-size:1.15rem}.surf-total strong{color:var(--color-accent-text,#017b7f);font-size:1.6rem}.surf-newbest{background:var(--color-coral,#ff835e);color:var(--color-ink-0,#0b0b0c);border-radius:999px;margin:0 0 .75rem;padding:.2rem .8rem;font-weight:700;display:inline-block}.surf-newbest[hidden]{display:none}.surf-controls{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:stretch;gap:1rem;margin-top:1rem;display:flex}.surf-steer{gap:.75rem;display:flex}.surf-btn{border:1.5px solid var(--color-ink-0,#0b0b0c);background:var(--color-surface-2,#fff);min-width:64px;min-height:64px;color:var(--color-ink-0,#0b0b0c);cursor:pointer;touch-action:none;-webkit-touch-callout:none;border-radius:1rem;font-size:1.5rem;font-weight:700}.surf-btn--action{background:var(--color-accent,#00c4ca);border-color:var(--color-accent-strong,#017b7f);flex:1;max-width:18rem;font-size:1.05rem}.surf-btn:active,.surf-btn.is-down{background:var(--color-accent-glow,#7dfcff)}@media (hover:hover) and (pointer:fine){.surf-controls{opacity:.85}}@media (orientation:landscape) and (height<=520px){.surf-stage{aspect-ratio:auto;height:calc(100svh - 11rem);min-height:0;max-height:none}.surf-controls{margin-top:.5rem}.surf-btn{min-height:48px}}.surf-note{color:var(--color-ink-2,#6e6f73);margin-top:1rem;font-size:.875rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}