:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f6f6f8;--card:#fff;--text:#16181d;--muted:#5d6270;--border:#dfe1e6;--accent:#2f6fde;--accent-text:#fff;--roll-bg:#14161c;--roll-grid:#262a33;--note-white:#4f8cff;--note-black:#2d5fcf;--key-white:#f4f4f4;--key-black:#1b1d22;--key-edge:#b9bcc4}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#111318;--card:#1a1d24;--text:#e8e9ee;--muted:#9aa0ad;--border:#2b2f39;--accent:#4f8cff;--roll-bg:#0c0d11;--roll-grid:#1f222a}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:16px/1.5 system-ui,-apple-system,sans-serif}main{max-width:960px;padding:max(16px, env(safe-area-inset-top)) 16px 32px;margin:0 auto}h1{margin:8px 0 0;font-size:1.6rem}.tagline,.hint,.muted{color:var(--muted)}.hint{font-size:.9rem}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:16px;padding:16px}.actions,.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.row+.row,audio+.row{margin-top:12px}.button{border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit;cursor:pointer;border-radius:10px;padding:10px 16px;display:inline-block}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.button.recording{color:#fff;background:#d93a3a;border-color:#d93a3a}.button:disabled{opacity:.5;cursor:default}select{font:inherit;margin-left:4px;padding:4px}.status p{margin:12px 0 6px}progress{width:100%}canvas{border-radius:12px;width:100%;height:min(60vh,520px);margin-bottom:16px;display:block}audio{width:100%}