:root{--bg:#0a0a0a;--surface:#141414;--border:#6a6a6a;--text:#e8e8e0;--muted:#a0a0a0;--accent:#c8a850;--danger:#e07070;--focus:#fff;--display:"Bebas Neue", Impact, "Arial Narrow", sans-serif;--app-name:"Oswald", "Arial Narrow", sans-serif;--mono:"Courier Prime", "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--mono)}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}:focus-visible{outline:.15em solid var(--focus);outline-offset:.12em}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.sizer{height:100%}.page{flex-direction:column;max-width:64em;height:100%;margin:0 auto;padding:.8em 1.2em;display:flex}.top{flex-wrap:wrap;align-items:center;gap:.6em 1.2em;margin-bottom:.7em;display:flex}.heading{align-items:center;gap:.7em;display:flex}.brand{width:auto;height:1.9em;display:block}.title{font-family:var(--app-name);letter-spacing:.06em;text-transform:uppercase;color:var(--text);font-size:1.23em;font-weight:300;line-height:1}.top .transport{margin-left:auto}.big{font-family:var(--display);letter-spacing:.1em;border:.06em solid var(--border);background:var(--surface);padding:.35em 1.1em;font-size:1.1em}.big:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.big.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}.transport{flex-wrap:wrap;align-items:center;gap:.7em;display:flex}.stepper{align-items:center;gap:.4em;display:flex}.stepper button{font-family:var(--display);border:.06em solid var(--border);background:var(--surface);width:1.7em;height:1.7em;font-size:1.1em}.stepper button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.stepper-value{letter-spacing:.1em;color:var(--muted);text-transform:uppercase;white-space:nowrap;font-size:.8em}.stepper-value strong{color:var(--text);text-align:center;min-width:2.6em;display:inline-block}footer{text-align:center;font-family:var(--display);letter-spacing:.3em;margin-top:.6em;font-size:.75em}footer a{color:var(--muted);text-decoration:none}footer a:hover{color:var(--accent)}@media (width<=40em){.page{padding:.6em .7em}.brand{height:1.5em}.title{font-size:.97em}.top .transport{margin-left:0}}.stack{flex-direction:column;flex:1;gap:.5em;width:100%;max-width:60em;min-height:0;margin:0 auto;padding:.2em;display:flex;overflow-y:auto}.empty{text-align:center;color:var(--muted);margin-top:2em}.row{background:var(--surface);border:.06em solid var(--border);flex:auto;grid-template-columns:6.6em minmax(0,1fr) auto auto auto;align-items:stretch;gap:.6em;min-height:3.6em;max-height:7em;padding:.5em .7em;transition:border-color .2s;display:grid}.row>.row-setup,.row>.small{align-self:center}.row.playing{border-color:var(--accent)}.row-setup{flex-direction:column;gap:.3em;display:flex}.sound{letter-spacing:.05em;text-transform:uppercase;text-align:center;background:var(--surface);color:var(--color);border:.06em solid var(--border);padding:.15em .2em;font-size:.72em}.sound option{background:var(--surface);color:var(--text)}.hits{min-height:2.2em;position:relative}.hit{border:.08em solid var(--color);background:0 0;border-radius:.25em;align-items:flex-end;height:100%;display:flex;position:absolute;top:0;overflow:hidden}.hit .fill{background:var(--color);width:100%;height:0;transition:height 80ms;display:block}.hit.level-1 .fill{opacity:.75;height:34%}.hit.level-2 .fill{opacity:.9;height:67%}.hit.level-3 .fill{height:100%}.hit:hover{box-shadow:0 0 0 .08em var(--text) inset}.hit.lit{filter:brightness(1.8);box-shadow:0 0 .6em var(--color)}.hit:focus-visible{outline-offset:.08em;z-index:1}.small{letter-spacing:.06em;text-transform:uppercase;border:.06em solid var(--border);color:var(--muted);background:0 0;padding:.3em .5em;font-size:.75em}.small:hover{border-color:var(--text);color:var(--text)}.mute[aria-pressed=true]{color:var(--danger);background:#2a0a0a;border-color:#c06060}.delete{color:var(--danger);border-color:#8a4040}.delete:hover{color:#f88;border-color:#f88}.add{text-align:center;margin-top:.3em}footer .hint{font-family:var(--mono);letter-spacing:.04em;text-transform:none;color:var(--muted);margin-bottom:.5em;font-size:.95em}@media (prefers-reduced-motion:reduce){.hit .fill,.row{transition:none}}@media (width<=40em){.row{flex:none;grid-template-columns:1fr auto auto auto;max-height:none}.hits{height:2.4em}.row-setup{flex-direction:row;grid-column:1/-1;align-items:center}.hits{grid-column:1/-1}.row .small:first-of-type{grid-column:2}}