.page.svelte-1m9rlfq{max-width:1100px;margin:0 auto;padding:24px 16px 64px}.crumb.svelte-1m9rlfq{font-size:13px;margin-bottom:16px}.crumb.svelte-1m9rlfq a:where(.svelte-1m9rlfq){color:#6366f1;text-decoration:none}.head.svelte-1m9rlfq h1:where(.svelte-1m9rlfq){font-size:28px;margin:4px 0 6px;font-weight:800}.head.svelte-1m9rlfq p:where(.svelte-1m9rlfq){color:#6b7280;margin:0 0 24px;font-size:14px;line-height:1.6}.controls.svelte-1m9rlfq{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px;margin-bottom:20px}.ctl-group.svelte-1m9rlfq{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.label.svelte-1m9rlfq{font-size:13px;font-weight:700;color:#4b5563}.root-row.svelte-1m9rlfq{display:flex;gap:4px;flex-wrap:wrap}.root-btn.svelte-1m9rlfq{padding:6px 12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;min-width:36px}.root-btn.svelte-1m9rlfq:hover{background:#eef2ff}.root-btn.on.svelte-1m9rlfq{background:#6366f1;color:#fff;border-color:#6366f1}.family.svelte-1m9rlfq{margin-bottom:14px}.family.svelte-1m9rlfq h3:where(.svelte-1m9rlfq){font-size:12px;color:#6b7280;text-transform:uppercase;letter-spacing:1px;margin:0 0 6px}.chords-row.svelte-1m9rlfq{display:flex;gap:6px;flex-wrap:wrap}.chord-btn.svelte-1m9rlfq{padding:6px 12px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;font-size:13px;cursor:pointer;font-family:inherit;font-weight:700}.chord-btn.svelte-1m9rlfq:hover{border-color:#6366f1}.chord-btn.on.svelte-1m9rlfq{background:#6366f1;color:#fff;border-color:#6366f1}.chord-name-aux.svelte-1m9rlfq{font-weight:400;opacity:.7;margin-left:6px;font-size:11px}.display.svelte-1m9rlfq{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-top:16px}.display-head.svelte-1m9rlfq h2:where(.svelte-1m9rlfq){font-size:32px;margin:0 0 4px;font-weight:800;color:#4f46e5}.chord-desc.svelte-1m9rlfq{color:#6b7280;font-size:13px;margin:0 0 18px}.notes-row.svelte-1m9rlfq{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.note-cell.svelte-1m9rlfq{padding:14px 16px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;min-width:70px;text-align:center}.note-name.svelte-1m9rlfq{font-size:18px;font-weight:800}.note-degree.svelte-1m9rlfq{font-size:11px;color:#6366f1;font-weight:700;margin-top:2px}.note-semis.svelte-1m9rlfq{font-size:10px;color:#9ca3af;margin-top:2px}.actions.svelte-1m9rlfq{text-align:center;margin:16px 0;display:flex;gap:8px;justify-content:center}.primary.svelte-1m9rlfq{padding:12px 26px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}.secondary.svelte-1m9rlfq{padding:12px 22px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit}.keyboard.svelte-1m9rlfq{display:flex;gap:0;padding:8px;background:#1f2937;border-radius:8px;overflow-x:auto}.key.svelte-1m9rlfq{flex:0 0 auto;width:28px;height:80px;background:#fff;border:1px solid #e5e7eb;border-radius:0 0 4px 4px;padding:0}.key.black.svelte-1m9rlfq{background:#1f2937;height:50px;width:18px;margin:0 -9px;z-index:2;position:relative;border-color:#374151}.key.in-chord.svelte-1m9rlfq{background:#c7d2fe}.key.black.in-chord.svelte-1m9rlfq{background:#4f46e5}.key.root.svelte-1m9rlfq{background:#ec4899}.key.black.root.svelte-1m9rlfq{background:#be185d}.info.svelte-1m9rlfq{margin-top:24px;padding:18px;background:#f9fafb;border-radius:10px}.info.svelte-1m9rlfq h3:where(.svelte-1m9rlfq){font-size:15px;margin:12px 0 8px}.info.svelte-1m9rlfq h3:where(.svelte-1m9rlfq):first-child{margin-top:0}.info.svelte-1m9rlfq ul:where(.svelte-1m9rlfq){margin:0;padding-left:18px;color:#4b5563;line-height:1.8;font-size:13px}.info.svelte-1m9rlfq table:where(.svelte-1m9rlfq) td:where(.svelte-1m9rlfq){border-bottom:1px solid #e5e7eb}