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