.staff-container.svelte-hq983d{display:flex;justify-content:center}.staff-container.svelte-hq983d svg{overflow:visible}.fretboard-container.svelte-a13b5y{display:flex;justify-content:center}.fretboard-container.svelte-a13b5y svg{width:200px;height:auto}.piano-wrapper.svelte-1o8plgz{overflow-x:auto;max-width:100%;padding-bottom:.25rem}.piano-svg.svelte-1o8plgz{display:block;cursor:pointer}.natural-key.svelte-1o8plgz{fill:#fff;stroke:#d1d5db;stroke-width:1;transition:fill .15s}.natural-key.svelte-1o8plgz:hover{fill:#f3f4f6}.sharp-key.svelte-1o8plgz{fill:#1a1a1a;stroke:#111;stroke-width:1;transition:fill .15s}.sharp-key.svelte-1o8plgz:hover{fill:#374151}.key-label.svelte-1o8plgz{font-size:9px;font-family:system-ui,sans-serif;fill:#9ca3af;pointer-events:none;-webkit-user-select:none;user-select:none}body{margin:0;font-family:system-ui,sans-serif;background:#fafafa;color:#1a1a1a}main.svelte-1n46o8q{max-width:480px;margin:0 auto;padding:2rem 1rem 4rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem}h1.svelte-1n46o8q{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;margin:0}.staff-section.svelte-1n46o8q{width:100%;display:flex;flex-direction:column;align-items:center;gap:.25rem}.reveal-row.svelte-1n46o8q{display:flex;align-items:center;gap:.75rem;min-height:2rem}.note-label.svelte-1n46o8q{font-size:1.25rem;font-weight:500;margin:0;color:#555}.btn-reveal.svelte-1n46o8q{font-size:.8rem;font-weight:500;color:#6b7280;background:none;border:1.5px solid #e5e7eb;border-radius:999px;padding:.2rem .75rem;cursor:pointer;transition:border-color .15s,color .15s}.btn-reveal.svelte-1n46o8q:hover{border-color:#9ca3af;color:#374151}.fretboard-section.svelte-1n46o8q{width:100%;display:flex;justify-content:center}.fretboard-section.hidden.svelte-1n46o8q{display:none}.piano-section.svelte-1n46o8q{width:100%;display:flex;justify-content:center}.controls.svelte-1n46o8q{display:flex;flex-direction:column;align-items:center;gap:.75rem}.mode-toggle.svelte-1n46o8q{display:flex;border:1.5px solid #d1d5db;border-radius:8px;overflow:hidden}.btn-mode.svelte-1n46o8q{padding:.4rem 1rem;border:none;background:#fff;font-size:.875rem;font-weight:500;cursor:pointer;color:#6b7280;transition:background .15s,color .15s}.btn-mode.svelte-1n46o8q+.btn-mode:where(.svelte-1n46o8q){border-left:1.5px solid #d1d5db}.btn-mode.active.svelte-1n46o8q{background:#1a1a1a;color:#fff}.btn.svelte-1n46o8q{padding:.6rem 1.4rem;border-radius:8px;border:1.5px solid #d1d5db;background:#fff;font-size:.95rem;cursor:pointer;font-weight:500;transition:background .15s,border-color .15s}.btn.svelte-1n46o8q:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.btn.svelte-1n46o8q:disabled{opacity:.5;cursor:not-allowed}.btn.primary.svelte-1n46o8q{background:#1a1a1a;color:#fff;border-color:#1a1a1a}.btn.primary.svelte-1n46o8q:hover:not(:disabled){background:#333;border-color:#333}.btn.secondary.svelte-1n46o8q{border-color:#9ca3af}.status-bar.svelte-1n46o8q{font-size:.9rem;font-weight:500;color:#6b7280;padding:.4rem 1rem;border-radius:6px;background:#f3f4f6;min-width:120px;text-align:center;transition:background .2s,color .2s}.status-bar.correct.svelte-1n46o8q{background:#dcfce7;color:#15803d}.status-bar.close.svelte-1n46o8q{background:#fef9c3;color:#854d0e}.toast.svelte-1n46o8q{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background:#1a1a1a;color:#fff;padding:.6rem 1.2rem;border-radius:8px;font-size:.875rem;font-weight:500;box-shadow:0 4px 12px #00000026;white-space:nowrap}.detected-pill.svelte-1n46o8q{font-size:.8rem;font-weight:500;color:#6b7280;background:#f3f4f6;border:1.5px solid #e5e7eb;border-radius:999px;padding:.2rem .75rem}.error.svelte-1n46o8q{color:#dc2626;font-size:.875rem;margin:0}