:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--lightningcss-light,#f4f5f7)var(--lightningcss-dark,#14161b);--panel:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1d2027);--bar:var(--lightningcss-light,#e4e7ec)var(--lightningcss-dark,#23262e);--line:var(--lightningcss-light,#cfd3db)var(--lightningcss-dark,#343844);--text:var(--lightningcss-light,#1b1e24)var(--lightningcss-dark,#e6e8ee);--muted:var(--lightningcss-light,#5a606d)var(--lightningcss-dark,#8b90a0);--ok:var(--lightningcss-light,#23864a)var(--lightningcss-dark,#6cc28b);--bad:var(--lightningcss-light,#c23b3b)var(--lightningcss-dark,#e06c6c);--gold:var(--lightningcss-light,#946a00)var(--lightningcss-dark,#f2c94c);--glow:var(--lightningcss-light,#00000040)var(--lightningcss-dark,#fff9)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html:not([data-ready]) :is(#streak,.stats,#mute,#theme){visibility:hidden}html,body{height:100%;margin:0}body{background:var(--bg);min-height:100dvh;color:var(--text);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex-direction:column;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex}header{padding:.75rem max(1.25rem, env(safe-area-inset-right)) .75rem max(1.25rem, env(safe-area-inset-left));padding-top:max(.75rem, env(safe-area-inset-top));background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;display:flex}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}h1{white-space:nowrap;margin:0;font-size:1rem}button{border:1px solid var(--line);color:var(--muted);font:inherit;cursor:pointer;background:0 0;border-radius:.375rem;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.8125rem;display:inline-flex}button:hover{border-color:var(--muted);color:var(--text)}button:focus-visible{outline:2px solid var(--ok);outline-offset:2px}.icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:1rem;height:1rem}#mute .slash,#mute[data-muted=true] .waves{display:none}#mute[data-muted=true] .slash{display:inline}#mute[data-muted=true]{border-color:var(--bad);color:var(--bad)}button.danger{border-color:var(--bad);background:var(--bad);color:var(--bg);font-weight:600}main{padding:1.5rem max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1.5rem;display:flex}main p{margin:0}.streak{color:var(--muted);flex-direction:column;align-items:center;font-size:.875rem;display:flex}#streak{color:var(--text);font-variant-numeric:tabular-nums;font-size:clamp(2.5rem,12vw,3.5rem);font-weight:700}#bar{background:var(--bar);border:1px solid var(--line);border-radius:.625rem;width:min(100%,45rem);height:3.5rem;transition:box-shadow .15s;position:relative;overflow:hidden}#zone{background:repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ok) 40%, transparent) 0 6px, color-mix(in srgb, var(--ok) 22%, transparent) 6px 12px);box-shadow:inset 2px 0 var(--ok), inset -2px 0 var(--ok);position:absolute;inset-block:0}#zone:after{content:"";inset-block:0;left:calc(50% - var(--perfect-core) * 100%);width:calc(var(--perfect-core) * 200%);background:color-mix(in srgb, var(--ok) 45%, transparent);position:absolute}#needle{pointer-events:none;will-change:transform;position:absolute;inset:0}#needle:before{content:"";inset-block:0;background:var(--text);width:4px;box-shadow:0 0 8px var(--glow);border-radius:2px;position:absolute;left:-2px}#feedback{text-align:center;flex-direction:column;align-items:center;gap:.25rem;display:flex}#result{min-height:1.5em;font-size:1.375rem;font-weight:700}#quip{min-height:1.5em;color:var(--muted)}.hint{color:var(--muted);text-align:center;font-size:.8125rem}.hint-touch{display:none}@media (pointer:coarse){.hint-touch{display:inline}.hint-desktop{display:none}}kbd{border:1px solid var(--line);font:inherit;border-bottom-width:2px;border-radius:.25rem;padding:.0625rem .375rem}.stats{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:.5rem 1.25rem;font-size:.8125rem;display:flex}.stats b{color:var(--text);font-variant-numeric:tabular-nums}dialog{border:1px solid var(--line);background:var(--panel);max-width:min(24rem,100% - 2rem);color:var(--text);border-radius:.625rem;padding:1.25rem}.header-actions{gap:.5rem;display:flex}dialog::backdrop{background:#0009}dialog h2{margin:0 0 .5rem;font-size:1.125rem}dialog p{color:var(--muted);margin:0 0 1.25rem;font-size:.875rem}.actions{justify-content:flex-end;gap:.5rem;display:flex}[data-outcome=hit] #bar{box-shadow:0 0 0 3px var(--ok)}[data-outcome=perfect] #bar{box-shadow:0 0 0 3px var(--gold), 0 0 24px #f2c94c66}[data-outcome=miss] #bar{box-shadow:0 0 0 3px var(--bad)}[data-outcome=hit] #result{color:var(--ok)}[data-outcome=perfect] #result{color:var(--gold)}[data-outcome=miss] #result{color:var(--bad)}@media (prefers-reduced-motion:reduce){#bar{transition:none}}