:root{--ink-950: #0f1020;--ink-900: #181a30;--ink-800: #23264a;--ink-700: #343866;--ink-300: #b4b8dc;--ink-50: #f3f4ff;--pink-400: #ff7ab6;--pink-300: #ff9cc8;--pink-ink: #1d0b17;--green-400: #5be0a0;--amber-400: #ffc857;--red-400: #ff6b6b;--gray-400: #8a8fb8;--sky-200: #cfe3ff;--color-bg: var(--ink-950);--color-surface: var(--ink-900);--color-surface-raised: var(--ink-800);--color-surface-hover: var(--ink-700);--color-text: var(--ink-50);--color-text-secondary: var(--ink-300);--color-accent-solid: var(--pink-400);--color-accent-hover: var(--pink-300);--color-on-accent: var(--pink-ink);--color-focus: var(--sky-200);--color-status-live: var(--green-400);--color-status-stale: var(--amber-400);--color-status-offline: var(--red-400);--color-status-connecting: var(--gray-400);--color-scrim: rgb(15 16 32 / .94);--text-label: .75rem;--text-ui: .875rem;--text-body: 1rem;--text-value: 1.25rem;--text-display: 1.75rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--radius-control: 12px;--radius-panel: 16px;--ease-out: cubic-bezier(.2, 0, 0, 1);--header-h: 56px;--pad-h: 64px;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:100%;line-height:1.5;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-inline-size:320px}h1,h2,h3,p,dl,dd,ul{margin:0}button{font:inherit;color:inherit}a{color:var(--color-text);text-decoration-thickness:from-font;text-underline-position:from-font}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.app{min-block-size:100dvh;display:flex;flex-direction:column}.topbar{block-size:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-inline:var(--space-4)}.brand{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-value);font-weight:700;line-height:1.1;white-space:nowrap}.utilities{display:flex;gap:var(--space-1)}.utilities .btn{white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-block-size:44px;padding-inline:var(--space-4);border:0;border-radius:var(--radius-control);font-size:var(--text-body);font-weight:600;line-height:1.1;cursor:pointer;transition-property:background-color,scale;transition-duration:.15s;transition-timing-function:var(--ease-out);touch-action:manipulation}.btn:active:not(:disabled){scale:.96}.btn:disabled{cursor:not-allowed}.btn-primary{background:var(--color-accent-solid);color:var(--color-on-accent)}.btn-secondary{background:var(--color-surface-raised);color:var(--color-text)}.btn-ghost{background:transparent;color:var(--color-text);padding-inline:var(--space-3)}.btn-small{min-block-size:36px;font-size:var(--text-ui)}@media(hover:hover){.btn-primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn-secondary:hover:not(:disabled),.btn-ghost:hover{background:var(--color-surface-hover)}}.btn-primary:disabled,.btn-secondary:disabled{background:var(--color-surface);color:var(--color-text-secondary)}.icon{inline-size:20px;block-size:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.layout{display:flex;flex-direction:column;min-block-size:calc(100dvh - var(--header-h));gap:var(--space-2);padding-inline:var(--space-3);padding-block-end:var(--space-3)}.panel{background:var(--color-surface);border-radius:var(--radius-panel);padding:var(--space-3) var(--space-4)}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2) var(--space-3)}.stat dt{font-size:var(--text-label);color:var(--color-text-secondary);line-height:1.3}.stat dd{font-size:var(--text-body);font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.hud{grid-area:hud;display:flex;flex-direction:column;gap:var(--space-2)}.hud-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.hud h2{font-size:var(--text-ui);font-weight:600;line-height:1.3}.hud-age{font-size:var(--text-label);color:var(--color-text-secondary);font-variant-numeric:tabular-nums;margin-block-start:calc(var(--space-1) * -1)}.feed{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-ui);font-weight:600;white-space:nowrap}.feed-dot{inline-size:10px;block-size:10px;border-radius:50%;background:var(--feed-color)}.feed-live{--feed-color: var(--color-status-live)}.feed-stale{--feed-color: var(--color-status-stale)}.feed-offline{--feed-color: var(--color-status-offline)}.feed-connecting{--feed-color: var(--color-status-connecting)}.feed-label{color:var(--feed-color)}.score{grid-area:score;display:flex;flex-direction:column;gap:var(--space-2)}.mult{color:var(--color-text-secondary)}.energy{display:grid;grid-template-columns:auto 1fr 3ch;align-items:center;gap:var(--space-3);font-size:var(--text-label);color:var(--color-text-secondary)}.energy-value{text-align:end;font-variant-numeric:tabular-nums}.meter{block-size:8px;border-radius:4px;background:var(--color-surface-raised);overflow:hidden}.meter-fill{block-size:100%;background:var(--color-status-live);border-radius:4px;transition-property:inline-size;transition-duration:.15s;transition-timing-function:var(--ease-out)}.meter-fill.is-low{background:var(--color-status-offline)}.bests{font-size:var(--text-ui);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.stage-wrap{grid-area:stage;flex:1;display:flex;flex-direction:column;gap:var(--space-2);min-inline-size:0}.stage{position:relative;flex:1;min-block-size:360px;border-radius:var(--radius-panel);background:var(--color-surface);overflow:hidden;touch-action:manipulation}.stage:focus{outline:none}.playfield{position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%;block-size:100%;display:block}.stage-bar{position:absolute;inset-block-start:var(--space-2);inset-inline:var(--space-2);display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.mode-tag{font-size:var(--text-ui);font-weight:600;padding:var(--space-1) var(--space-2);border-radius:8px;background:var(--color-surface-raised)}.stage-bar .btn-ghost{background:var(--color-surface-raised)}.judgement{position:absolute;inset-inline:0;inset-block-start:calc(86% - 96px);display:flex;flex-direction:column;align-items:center;pointer-events:none;text-align:center}.judgement-label{font-size:var(--text-value);font-weight:700;line-height:1.1}.judgement-detail{font-size:var(--text-label);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.judgement-perfect .judgement-label{color:var(--color-status-live)}.judgement-good .judgement-label{color:var(--color-text)}.judgement-miss .judgement-label{color:var(--color-status-offline)}@media(prefers-reduced-motion:no-preference){.judgement{animation:judgement-in .3s var(--ease-out) both}}@keyframes judgement-in{0%{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:var(--space-4);background:var(--color-scrim);overflow-y:auto}.overlay-body{inline-size:100%;max-inline-size:26rem;display:flex;flex-direction:column;gap:var(--space-3)}.headline{font-size:var(--text-display);font-weight:700;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}.title{font-size:var(--text-value);font-weight:700;line-height:1.1}.title:focus{outline:none}.lede{font-size:var(--text-body);color:var(--color-text-secondary);text-wrap:pretty}.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-block-start:var(--space-1)}.actions .btn{flex:1 1 auto;white-space:nowrap}.note,.hint{flex-basis:100%;font-size:var(--text-ui);color:var(--color-text-secondary);text-wrap:pretty}.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2) var(--space-3)}.summary dt{font-size:var(--text-label);color:var(--color-text-secondary)}.summary dd{font-size:var(--text-value);font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}.pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}.pad{block-size:var(--pad-h);border:0;border-block-start:4px solid var(--lane);border-radius:var(--radius-control);background:var(--color-surface-raised);font-size:var(--text-value);font-weight:700;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition-property:background-color,color;transition-duration:.1s}.pad:disabled{cursor:default}.pad.is-down{background:var(--lane);color:var(--color-on-accent)}.footer{padding:var(--space-3) var(--space-4) var(--space-6);font-size:var(--text-label);color:var(--color-text-secondary)}.help{inline-size:min(34rem,calc(100% - 2 * var(--space-4)));max-block-size:calc(100dvh - 2 * var(--space-4));padding:0;border:0;border-radius:var(--radius-panel);background:var(--color-surface);color:var(--color-text);overscroll-behavior:contain}.help::backdrop{background:var(--color-scrim)}.help-body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);max-inline-size:65ch}.help h2{font-size:var(--text-value);line-height:1.1}.help h3{font-size:var(--text-body);margin-block-start:var(--space-2)}.help p,.help ul{font-size:var(--text-body);color:var(--color-text-secondary)}.help ul{padding-inline-start:var(--space-6)}.help .btn{align-self:flex-start;margin-block-start:var(--space-2)}@media(max-width:26rem){.utilities .btn-ghost{padding-inline:var(--space-2)}.sound-word{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}@media(max-width:22rem){.topbar{padding-inline:var(--space-2);gap:var(--space-1)}.brand{font-size:var(--text-body)}}@media(min-width:60rem){:root{--text-display: 2.25rem}.layout{display:grid;min-block-size:0;grid-template-columns:minmax(15rem,18rem) minmax(22rem,34rem) minmax(15rem,18rem);grid-template-areas:"hud stage score";justify-content:center;align-items:start;gap:var(--space-4);padding-inline:var(--space-6)}.panel{padding:var(--space-4)}.hud,.score{gap:var(--space-3)}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.stat dd{font-size:var(--text-value)}.score-stats{grid-template-columns:minmax(0,1fr)}.stage{flex:none;block-size:clamp(480px,calc(100dvh - var(--header-h) - var(--pad-h) - 40px),820px)}}