.page.svelte-1p4fplc{padding:2rem;max-width:1100px;margin:0 auto}.layout.svelte-1p4fplc{display:grid;grid-template-columns:400px 1fr;gap:3rem;align-items:start}.circle-col.svelte-1p4fplc{position:sticky;top:100px;display:flex;flex-direction:column;gap:1.5rem}.circle-col.svelte-1p4fplc .circle-svg{max-width:100%}.circle-col.svelte-1p4fplc .legend{display:none}.keyboard-wrap.svelte-1p4fplc{background:#0a0a0a;border:1px solid #1a1a1a;padding:.75rem}.controls-col.svelte-1p4fplc{display:flex;flex-direction:column;gap:1.5rem}.current.svelte-1p4fplc{display:flex;align-items:baseline;gap:.75rem}.current-key.svelte-1p4fplc{font-size:48px;font-weight:700;color:#fff;line-height:1}.current-scale.svelte-1p4fplc{font-size:18px;color:#555}.section.svelte-1p4fplc{background:#0a0a0a;border:1px solid #1a1a1a;padding:1rem}.keys.svelte-1p4fplc{display:flex;flex-wrap:wrap;gap:6px}.key-btn.svelte-1p4fplc{padding:.6rem .8rem;background:#111;border:1px solid #222;color:#666;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}.key-btn.svelte-1p4fplc:hover{color:#fff;border-color:#444}.key-btn.active.svelte-1p4fplc{background:#fff;color:#000;border-color:#fff}.tabs.svelte-1p4fplc{display:flex;gap:4px;margin-bottom:.75rem;flex-wrap:wrap}.tab.svelte-1p4fplc{padding:.4rem .6rem;background:transparent;border:1px solid #222;color:#555;font-family:inherit;font-size:9px;letter-spacing:.5px;text-transform:uppercase;cursor:pointer}.tab.svelte-1p4fplc:hover{color:#888}.tab.active.svelte-1p4fplc{background:#222;color:#fff;border-color:#333}.scales.svelte-1p4fplc{display:flex;flex-wrap:wrap;gap:6px;max-height:160px;overflow-y:auto}.scale-btn.svelte-1p4fplc{padding:.5rem .65rem;background:#111;border:1px solid #1a1a1a;color:#555;font-family:inherit;font-size:11px;cursor:pointer}.scale-btn.svelte-1p4fplc:hover{color:#888;border-color:#333}.scale-btn.active.svelte-1p4fplc{background:#fff;color:#000;border-color:#fff}.notes.svelte-1p4fplc{display:flex;gap:6px;flex-wrap:wrap}.note.svelte-1p4fplc{padding:.5rem .7rem;background:#111;border:1px solid #222;font-size:13px;color:#666}.note.root.svelte-1p4fplc{background:#fff;color:#000;border-color:#fff}.chords.svelte-1p4fplc{display:flex;gap:6px;flex-wrap:wrap}.chord.svelte-1p4fplc{display:flex;flex-direction:column;align-items:center;padding:.5rem .75rem;background:#0a0a0a;border:1px solid #1a1a1a;min-width:50px}.chord.tonic.svelte-1p4fplc{border-color:#333}.numeral.svelte-1p4fplc{font-size:12px;font-weight:600;color:#888}.name.svelte-1p4fplc{font-size:10px;color:#444}.chord.tonic.svelte-1p4fplc .numeral:where(.svelte-1p4fplc){color:#fff}.browse.svelte-1p4fplc{margin-top:3rem;padding-top:2rem;border-top:1px solid #1a1a1a}.browse-label.svelte-1p4fplc{font-size:10px;color:#444;letter-spacing:2px;margin-bottom:1rem}.browse-grid.svelte-1p4fplc{display:flex;gap:.5rem;flex-wrap:wrap}.browse-link.svelte-1p4fplc{padding:.75rem 1.25rem;background:#0a0a0a;border:1px solid #1a1a1a;color:#555;text-decoration:none;font-size:13px;font-weight:600}.browse-link.svelte-1p4fplc:hover{background:#111;border-color:#333;color:#fff}@media(max-width:900px){.layout.svelte-1p4fplc{grid-template-columns:1fr;gap:2rem}.circle-col.svelte-1p4fplc{position:static;align-items:center}.circle-col.svelte-1p4fplc .circle-svg{max-width:320px}.keyboard-wrap.svelte-1p4fplc{max-width:400px;width:100%}.current-key.svelte-1p4fplc{font-size:36px}.current-scale.svelte-1p4fplc{font-size:15px}}@media(max-width:480px){.page.svelte-1p4fplc{padding:1rem}.circle-col.svelte-1p4fplc .circle-svg{max-width:280px}.current-key.svelte-1p4fplc{font-size:32px}.keys.svelte-1p4fplc{gap:4px}.key-btn.svelte-1p4fplc{padding:.5rem .6rem;font-size:11px}.tabs.svelte-1p4fplc{gap:3px}.tab.svelte-1p4fplc{padding:.35rem .5rem;font-size:8px}.scales.svelte-1p4fplc{gap:4px;max-height:140px}.scale-btn.svelte-1p4fplc{padding:.4rem .5rem;font-size:10px}.notes.svelte-1p4fplc{gap:4px}.note.svelte-1p4fplc{padding:.4rem .5rem;font-size:11px}.chords.svelte-1p4fplc{gap:4px}.chord.svelte-1p4fplc{padding:.4rem .5rem;min-width:42px}.browse.svelte-1p4fplc{margin-top:2rem;padding-top:1.5rem}.browse-grid.svelte-1p4fplc{gap:.4rem}.browse-link.svelte-1p4fplc{padding:.6rem .9rem;font-size:11px}}