.music-readout{font-size:clamp(3rem,12vw,6rem);font-weight:800;text-align:center}.piano-keys{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px;margin:1rem 0}.piano-key{min-width:0;min-height:150px;background:white;color:#20232b;border:2px solid #667080;border-radius:0 0 7px 7px;white-space:pre-line;font-weight:600;padding:5px 1px;font-size:13px;touch-action:none}.piano-key.is-black{background:#222;color:white;min-height:105px;align-self:start}.piano-key.is-on{outline:3px solid var(--accent,#485cf0);outline-offset:-4px;background:#aac8f3;color:#14233b}.drum-grid{display:grid;grid-template-columns:90px repeat(16,36px);gap:4px;align-items:center;padding:5px;min-width:740px}.drum-step{width:36px;height:42px;border:1px solid #697586;border-radius:5px;background:var(--surface);color:var(--text);font-size:12px}.drum-step[aria-pressed=true]{background:var(--accent,#485cf0);color:white;font-weight:bold}.drum-step[aria-pressed=true]::after{content:' ✓';display:block}.drum-step.is-step{outline:3px solid var(--text,#20232b);outline-offset:0}@media(max-width:600px){.piano-keys{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.piano-key{min-height:110px}.piano-key.is-black{min-height:85px}}