.diagram.svelte-1xxvfjl{border:1px solid var(--line,#263640);background:var(--surface,#111c24);border-radius:18px;min-width:0;padding:16px 18px}.diagram-heading.svelte-1xxvfjl{justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px;display:flex}.eyebrow.svelte-1xxvfjl{color:var(--accent,#78ddc4);letter-spacing:.14em;margin:0 0 4px;font:700 9px/1.2 ui-sans-serif,system-ui}h2.svelte-1xxvfjl{color:var(--text,#f2f5f4);margin:0;font:600 17px/1.2 ui-sans-serif,system-ui}.note-list.svelte-1xxvfjl{color:var(--muted,#95a6ad);text-align:right;margin:0;font:600 11px/1.4 ui-sans-serif,system-ui}.unsupported.svelte-1xxvfjl{max-width:125px}.keyboard.svelte-1xxvfjl{width:100%;max-width:280px;height:auto;margin:0 auto;display:block;overflow:visible}.white-key.svelte-1xxvfjl{fill:#f5f2e9;stroke:#b8b9b2;stroke-width:1.4px}.black-key.svelte-1xxvfjl{fill:#17232b;stroke:#37464c;stroke-width:1.2px}.white-key.lit.svelte-1xxvfjl{fill:#8cddc9}.black-key.lit.svelte-1xxvfjl{fill:#4cae9b}.white-key.bass.svelte-1xxvfjl,.black-key.bass.svelte-1xxvfjl{stroke:#f3ac62;stroke-width:3px}text.svelte-1xxvfjl{fill:#687478;font:600 9px ui-sans-serif,system-ui}@media (width<=580px){.diagram.svelte-1xxvfjl{padding:13px}.diagram-heading.svelte-1xxvfjl{align-items:start}}