:root{--bg:#f4f1ea;--ink:#23211d;--muted:#8a857a;--line:#d8d2c4;color:var(--ink);background:var(--bg);font-family:ui-sans-serif,system-ui,sans-serif}body{margin:0;padding:24px 32px}header{flex-wrap:wrap;align-items:baseline;gap:20px;margin-bottom:24px;display:flex}h1{letter-spacing:.3em;text-transform:uppercase;margin:0;font-size:22px;font-weight:300}h2{text-transform:uppercase;letter-spacing:.1em;margin:0 0 8px;font-size:13px;font-weight:600}#status{color:var(--muted);font-variant-numeric:tabular-nums}button{font:inherit;border:1px solid var(--ink);cursor:pointer;background:0 0;padding:6px 18px}button:hover{background:var(--ink);color:var(--bg)}button:disabled{opacity:.35;cursor:default}button:disabled:hover{color:var(--ink);background:0 0}.volume{color:var(--muted);align-items:center;gap:6px;font-size:12px;display:inline-flex}main{grid-template-columns:1fr 320px;gap:40px;display:grid}@media (width<=900px){main{grid-template-columns:1fr}}.now{margin:0 0 10px;font-size:15px}.score{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0}.score canvas{display:block}.muted{color:var(--muted);font-size:12px}#controls label{grid-template-columns:100px 1fr 64px;align-items:center;gap:8px;margin:10px 0;font-size:13px;display:grid}#controls select{font:inherit;grid-column:span 2}#controls output{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;font-size:12px}#controls .keep{color:var(--muted);gap:6px;font-size:12px;display:flex}#controls .buttons button{padding:4px 10px;font-size:12px}