.metronome.svelte-xas8fm{display:flex;flex-direction:column;align-items:center;gap:.5rem}.controls-row.svelte-xas8fm{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;width:100%}.btn.svelte-xas8fm{border-radius:.5rem;background:#3b82f6;color:#fff;padding:.5rem .9rem;border:none;cursor:pointer;font-weight:600}.ctrl.svelte-xas8fm{display:flex;align-items:center;gap:.4rem}.lbl.svelte-xas8fm{font-size:.9rem;color:#374151}.num.svelte-xas8fm{width:4.5rem;padding:.3rem .4rem;border:1px solid #d1d5db;border-radius:.375rem}.select.svelte-xas8fm{padding:.35rem .5rem;border:1px solid #d1d5db;border-radius:.375rem}.status.svelte-xas8fm{font-size:.85rem;opacity:.7;text-align:center}@media (max-width: 420px){.btn.svelte-xas8fm{width:100%}.controls-row.svelte-xas8fm{align-items:stretch}}.piano-keyboard.svelte-11uol3h{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);z-index:1000;background:#000000e6;border-radius:1rem;padding:1.5rem;box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.piano-container.svelte-11uol3h{position:relative;width:400px;height:120px}.white-keys.svelte-11uol3h{position:relative;width:100%;height:100%}.piano-key.svelte-11uol3h{position:absolute;border:none;cursor:pointer;transition:all .1s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem;font-weight:600;font-size:.9rem;color:#333;outline:none}.piano-key.svelte-11uol3h:not(.black-key){width:14.28%;height:100%;background:linear-gradient(180deg,#fff,#f0f0f0);border:1px solid #ccc;border-radius:0 0 .5rem .5rem;box-shadow:0 2px 4px #0000001a}.piano-key.svelte-11uol3h:not(.black-key):hover{background:linear-gradient(180deg,#f8f8f8,#e8e8e8);transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.piano-key.svelte-11uol3h:not(.black-key):active,.piano-key:not(.black-key).pressed.svelte-11uol3h{background:linear-gradient(180deg,#e0e0e0,#d0d0d0);transform:translateY(0);box-shadow:inset 0 2px 4px #0000001a}.black-key.svelte-11uol3h{width:8%;height:60%;background:linear-gradient(180deg,#333,#000);border:1px solid #222;border-radius:0 0 .25rem .25rem;box-shadow:0 2px 4px #0000004d;color:#fff;z-index:2;top:0}.black-key.svelte-11uol3h:hover{background:linear-gradient(180deg,#444,#111);transform:translateY(-1px);box-shadow:0 3px 6px #0006}.black-key.svelte-11uol3h:active,.black-key.pressed.svelte-11uol3h{background:linear-gradient(180deg,#222,#000);transform:translateY(0);box-shadow:inset 0 1px 3px #0000004d}.key-label.svelte-11uol3h{pointer-events:none;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.piano-keyboard.svelte-11uol3h{bottom:1rem;left:1rem;right:1rem;transform:none}.piano-container.svelte-11uol3h{width:100%;height:100px}.piano-key.svelte-11uol3h:not(.black-key){font-size:.8rem}.black-key.svelte-11uol3h{font-size:.7rem}}@media (max-width: 480px){.piano-keyboard.svelte-11uol3h{padding:1rem}.piano-container.svelte-11uol3h{height:80px}.piano-key.svelte-11uol3h:not(.black-key){font-size:.7rem}.black-key.svelte-11uol3h{font-size:.6rem}}.main-container.svelte-1l6tmjq{max-width:1400px;margin:0 auto;padding:0 2rem}.app-header.svelte-1l6tmjq{text-align:center;margin-bottom:1.5rem;padding:1rem 0 .5rem}.app-title.svelte-1l6tmjq{font-size:2rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.mode-selection.svelte-1l6tmjq{background:#fff;border-radius:1rem;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e5e7eb}.mode-buttons.svelte-1l6tmjq{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.mode-dropdown.svelte-1l6tmjq{position:relative;min-width:250px}.mode-button.svelte-1l6tmjq{width:100%;padding:1rem 1.5rem;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border:2px solid #cbd5e1;border-radius:.75rem;font-size:1.1rem;font-weight:600;color:#1e293b;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:space-between;gap:.5rem}.mode-button.svelte-1l6tmjq:hover{background:linear-gradient(135deg,#f1f5f9,#d6e2ea);border-color:#94a3b8}.mode-button.active.svelte-1l6tmjq{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 4px 12px #667eea4d}.mode-icon.svelte-1l6tmjq{font-size:1.2rem}.dropdown-arrow.svelte-1l6tmjq{font-size:.8rem;transition:transform .2s ease}.mode-dropdown.active.svelte-1l6tmjq .dropdown-arrow:where(.svelte-1l6tmjq){transform:rotate(180deg)}.dropdown-content.svelte-1l6tmjq{position:absolute;top:100%;left:0;right:0;background:#fff;border:2px solid #e5e7eb;border-radius:.75rem;padding:1.5rem;margin-top:.5rem;box-shadow:0 8px 25px #0000001a;z-index:10;display:flex;flex-direction:column;gap:1rem}.dropdown-control.svelte-1l6tmjq{display:flex;flex-direction:column;gap:.5rem;font-weight:600;color:#374151}.dropdown-select.svelte-1l6tmjq{padding:.75rem;border:2px solid #e5e7eb;border-radius:.5rem;font-size:1rem;background:#fff;transition:border-color .2s ease;width:100%}.dropdown-select.svelte-1l6tmjq:focus{outline:none;border-color:#667eea}.dropdown-toggle.svelte-1l6tmjq{display:flex;align-items:center;justify-content:space-between;font-weight:600;color:#374151;cursor:pointer;padding:.5rem 0}.toggle-group.svelte-1l6tmjq{display:flex;flex-direction:column;gap:.5rem}.accidental-toggles.svelte-1l6tmjq{display:flex;gap:1.5rem;justify-content:space-around;margin-top:.5rem;padding-top:.75rem;border-top:1px solid #e5e7eb}.accidental-toggle-item.svelte-1l6tmjq{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:1}.accidental-label.svelte-1l6tmjq{font-weight:600;color:#374151;font-size:.9rem;text-align:center}.toggle-switch.svelte-1l6tmjq{position:relative;width:3rem;height:1.5rem;background:#d1d5db;border:none;border-radius:1rem;cursor:pointer;transition:background-color .2s ease}.toggle-switch.small.svelte-1l6tmjq{width:2.5rem;height:1.25rem}.toggle-switch.active.svelte-1l6tmjq{background:#10b981}.toggle-slider.svelte-1l6tmjq{position:absolute;top:2px;left:2px;width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);background:#fff;border-radius:50%;transition:transform .2s ease}.toggle-switch.small.svelte-1l6tmjq .toggle-slider:where(.svelte-1l6tmjq){width:calc(1.25rem - 4px);height:calc(1.25rem - 4px)}.toggle-switch.active.svelte-1l6tmjq .toggle-slider:where(.svelte-1l6tmjq){transform:translate(1.5rem)}.toggle-switch.small.active.svelte-1l6tmjq .toggle-slider:where(.svelte-1l6tmjq){transform:translate(1.25rem)}.staff-section.svelte-1l6tmjq{background:#fff;border-radius:1rem;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e5e7eb;overflow-x:auto}.song-info.svelte-1l6tmjq{text-align:center;margin-bottom:1.5rem;padding:1rem;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-radius:.75rem;border:1px solid #cbd5e1}.song-title.svelte-1l6tmjq{font-size:1.5rem;font-weight:700;color:#1e293b;margin:0 0 .25rem}.song-composer.svelte-1l6tmjq{font-size:1rem;font-weight:500;color:#64748b;margin:0;font-style:italic}.song-key.svelte-1l6tmjq{font-size:.875rem;font-weight:600;color:#059669;margin:.25rem 0 0;background:#0596691a;padding:.25rem .5rem;border-radius:.375rem;display:inline-block}.staff-container.svelte-1l6tmjq{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.staff-display.svelte-1l6tmjq{min-height:200px;display:flex;align-items:center;justify-content:center;background:#f9fafb;border-radius:.5rem;padding:1rem;border:2px dashed #d1d5db;width:100%;overflow:hidden}.staff-buttons.svelte-1l6tmjq{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.staff-button.svelte-1l6tmjq{display:flex;align-items:center;gap:.5rem;padding:1rem 2rem;border:none;border-radius:.75rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.staff-button.primary.svelte-1l6tmjq{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.staff-button.primary.svelte-1l6tmjq:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.staff-button.secondary.svelte-1l6tmjq{background:linear-gradient(135deg,#64748b,#475569);color:#fff}.staff-button.secondary.svelte-1l6tmjq:hover{transform:translateY(-2px);box-shadow:0 8px 25px #64748b4d}.button-icon.svelte-1l6tmjq{font-size:1.2rem}.transpose-controls.svelte-1l6tmjq{display:flex;flex-direction:column;align-items:center;gap:.25rem;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border:2px solid #d1d5db;border-radius:.75rem;padding:.75rem;min-width:120px}.transpose-button.svelte-1l6tmjq{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:linear-gradient(135deg,#fff,#f8fafc);border:2px solid #cbd5e1;border-radius:.5rem;cursor:pointer;transition:all .2s ease;padding:0;font-size:1.2rem;font-weight:700}.transpose-button.svelte-1l6tmjq:hover{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-color:#94a3b8;transform:translateY(-1px)}.transpose-button.svelte-1l6tmjq:active{transform:translateY(0)}.transpose-button.up.svelte-1l6tmjq{color:#059669;margin-bottom:.125rem}.transpose-button.down.svelte-1l6tmjq{color:#dc2626;margin-top:.125rem}.transpose-icon.svelte-1l6tmjq{font-size:1rem;line-height:1}.transpose-indicator.svelte-1l6tmjq{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:.25rem}.transpose-label.svelte-1l6tmjq{font-size:.75rem;font-weight:600;color:#374151;text-align:center;background:#fffc;padding:.25rem .5rem;border-radius:.375rem;border:1px solid rgba(0,0,0,.1)}.loading-indicator.svelte-1l6tmjq{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;text-align:center}.spinner.svelte-1l6tmjq{width:3rem;height:3rem;border:4px solid #e5e7eb;border-top:4px solid #667eea;border-radius:50%;animation:svelte-1l6tmjq-spin 1s linear infinite}@keyframes svelte-1l6tmjq-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text.svelte-1l6tmjq{font-size:1.1rem;font-weight:600;color:#667eea;margin:0}.pitch-display.svelte-1l6tmjq{background:#fff;border-radius:1rem;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e5e7eb}.mic-permission.svelte-1l6tmjq{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:1rem}.mic-button.svelte-1l6tmjq{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:.75rem;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.mic-button.svelte-1l6tmjq:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.mic-error.svelte-1l6tmjq{color:#b91c1c;font-size:.9rem}.pitch-controls.svelte-1l6tmjq{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}.piano-toggle.svelte-1l6tmjq{display:flex;align-items:center}.piano-toggle-button.svelte-1l6tmjq{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease}.piano-toggle-button.svelte-1l6tmjq:hover{transform:translateY(-2px);box-shadow:0 4px 12px #10b9814d}.piano-toggle-button.active.svelte-1l6tmjq{background:linear-gradient(135deg,#ef4444,#dc2626)}.piano-toggle-button.active.svelte-1l6tmjq:hover{box-shadow:0 4px 12px #ef44444d}.piano-icon.svelte-1l6tmjq{font-size:1.2rem}.pitch-info.svelte-1l6tmjq{text-align:center;margin-bottom:2rem}.frequency-display.svelte-1l6tmjq{margin-bottom:1rem}.frequency-value.svelte-1l6tmjq{font-size:4rem;font-weight:700;font-family:Courier New,monospace;color:#667eea}.frequency-unit.svelte-1l6tmjq{font-size:1.5rem;color:#6b7280;margin-left:.5rem}.note-display.svelte-1l6tmjq{font-size:3rem;font-weight:700;color:#374151;margin-bottom:1rem}.octave-assumption.svelte-1l6tmjq{font-size:.875rem;font-weight:500;color:#dc2626;text-align:center;margin-top:.5rem;padding:.25rem .75rem;background:#dc26261a;border-radius:.375rem;border:1px solid rgba(220,38,38,.2);max-width:300px;margin-left:auto;margin-right:auto}.audio-controls.svelte-1l6tmjq{display:flex;flex-direction:column;align-items:center;gap:1rem}.volume-control.svelte-1l6tmjq{display:flex;flex-direction:column;align-items:center;gap:.5rem}.control-text.svelte-1l6tmjq{font-size:.9rem;color:#6b7280;font-weight:500}.volume-slider.svelte-1l6tmjq{width:min(100%,300px);height:6px;background:#e5e7eb;border-radius:3px;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.volume-slider.svelte-1l6tmjq::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#667eea;border-radius:50%;cursor:pointer}.loudness-display.svelte-1l6tmjq{font-size:.9rem;color:#6b7280;background:#f3f4f6;padding:.5rem 1rem;border-radius:.5rem}.metronome-section.svelte-1l6tmjq{background:#fff;border-radius:1rem;padding:2rem;margin-bottom:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e5e7eb}@media (max-width: 1024px){.mode-buttons.svelte-1l6tmjq{flex-direction:column;align-items:center}.mode-dropdown.svelte-1l6tmjq{width:100%;max-width:400px}}@media (max-width: 768px){.main-container.svelte-1l6tmjq{padding:0 1rem}.app-title.svelte-1l6tmjq{font-size:1.75rem}.mode-selection.svelte-1l6tmjq,.staff-section.svelte-1l6tmjq,.pitch-display.svelte-1l6tmjq,.metronome-section.svelte-1l6tmjq{padding:1.5rem}.accidental-toggles.svelte-1l6tmjq{gap:1rem}.accidental-toggle-item.svelte-1l6tmjq{gap:.25rem}.frequency-value.svelte-1l6tmjq{font-size:3rem}.note-display.svelte-1l6tmjq{font-size:2.5rem}.volume-slider.svelte-1l6tmjq{width:250px}.pitch-controls.svelte-1l6tmjq{flex-direction:column;align-items:stretch;gap:1rem}.piano-toggle.svelte-1l6tmjq{justify-content:center}}@media (max-width: 420px){.main-container.svelte-1l6tmjq{padding:0 .5rem}.app-title.svelte-1l6tmjq{font-size:clamp(1.4rem,8vw,1.8rem)}.mode-selection.svelte-1l6tmjq,.staff-section.svelte-1l6tmjq,.pitch-display.svelte-1l6tmjq,.metronome-section.svelte-1l6tmjq{padding:1rem}.toggle-group.svelte-1l6tmjq{gap:.75rem}.volume-slider.svelte-1l6tmjq{width:100%}}@media (max-width: 340px){.app-title.svelte-1l6tmjq{font-size:clamp(1.2rem,9vw,1.6rem)}}