:root{--bg: #0e1116;--fg: #e6ebf5;--dim: #7d879b;--line: #3b4457;--ok: #34d17a;--ko: #ff5f6d;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:560px;margin:0 auto;padding:24px 16px 40px;display:flex;flex-direction:column;gap:16px}header{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:var(--dim);font-size:14px}.staff{width:100%;height:auto;background:#131822;border-radius:12px;padding:8px}.staff line{stroke:var(--line);stroke-width:1.4}.staff .note ellipse,.staff .note line{fill:var(--fg);stroke:var(--fg);stroke-width:2}.staff .note.ko ellipse,.staff .note.ko line{fill:var(--ko);stroke:var(--ko)}.reveal{margin:0;height:24px;text-align:center;font-size:18px;font-weight:600;color:var(--dim)}.keys{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}button{font:inherit;font-weight:600;color:var(--fg);background:#1b2130;border:1px solid #2c3448;border-radius:10px;cursor:pointer}.keys button{padding:18px 0;font-size:17px}button:hover:not(:disabled){border-color:var(--dim)}button:disabled{cursor:default}.keys .ok{background:var(--ok);border-color:var(--ok);color:#08130c}.keys .ko{background:var(--ko);border-color:var(--ko);color:#1a0507}.keys .fade{opacity:.4}.modes,.mic{display:flex;gap:8px;flex-wrap:wrap}.modes button{padding:8px 12px;font-size:13px;font-weight:500;color:var(--dim)}.modes button.on,.mic button.on{color:var(--fg);border-color:var(--fg)}.mic{flex-direction:column;gap:6px}.mic button{padding:12px}.mic small{color:var(--dim);min-height:18px;text-align:center}@media(max-width:430px){.keys{grid-template-columns:repeat(4,1fr)}}