.muted.svelte-2s7fbg{color:var(--color-bad,#b91c1c)}.piano-keyboard.svelte-16prh1e{--white-key-width:2.4rem;--black-key-width:1.5rem;--white-key-height:10rem;--black-key-height:6.5rem;width:calc(52 * var(--white-key-width));height:var(--white-key-height);touch-action:none;-webkit-user-select:none;user-select:none;display:flex;position:relative}.piano-key.svelte-16prh1e{cursor:pointer;border:none;flex-direction:column;flex-shrink:0;justify-content:flex-end;align-items:center;padding:0;transition:background 60ms,box-shadow 60ms;display:flex}.white-key.svelte-16prh1e{width:var(--white-key-width);height:var(--white-key-height);z-index:1;background:#fff;border:1px solid #dbdbdb;border-radius:0 0 4px 4px;padding-bottom:.4rem}.white-key.svelte-16prh1e+.white-key:where(.svelte-16prh1e){border-left:none}.white-key.key-pressed.svelte-16prh1e,.white-key.state-active.svelte-16prh1e{background:#dcebf9}.white-key.state-correct.svelte-16prh1e{background:#d7f4e3}.white-key.state-wrong.svelte-16prh1e{background:#f8dddd}.white-key.state-inactive.svelte-16prh1e{opacity:.5}.white-key.active-zone.svelte-16prh1e{border-bottom:2px solid #3380cc}.black-key.svelte-16prh1e{width:var(--black-key-width);height:var(--black-key-height);z-index:2;background:#242424;border:1px solid #141414;border-radius:0 0 3px 3px;padding-bottom:.35rem;position:absolute;top:0}.black-key.key-pressed.svelte-16prh1e,.black-key.state-active.svelte-16prh1e{background:#1d4772}.black-key.state-correct.svelte-16prh1e{background:#1c5f38}.black-key.state-wrong.svelte-16prh1e{background:#721d1d}.black-key.state-inactive.svelte-16prh1e{opacity:.5}.key-label.svelte-16prh1e{pointer-events:none;flex-direction:column;align-items:center;gap:1px;display:flex}.white-key.svelte-16prh1e .label-row:where(.svelte-16prh1e){color:#2e73b8;font-family:monospace;font-size:.6rem;font-weight:600;line-height:1.3}.black-key.svelte-16prh1e .label-row:where(.svelte-16prh1e){color:#70a6db;font-family:monospace;font-size:.55rem;font-weight:600;line-height:1.3}@media (pointer:coarse){.piano-keyboard.svelte-16prh1e{--white-key-width:1.8rem;--black-key-width:1.15rem;--white-key-height:7rem;--black-key-height:4.5rem}}@media (width<=63.999rem),(pointer:coarse){.label-row.svelte-16prh1e{display:none}}.keyboard-panel.svelte-1jffmd{z-index:40;visibility:hidden;transition:transform .2s ease-out,visibility 0s .2s;position:fixed;left:0;right:0;transform:translateY(100%)}.keyboard-panel-open.svelte-1jffmd{visibility:visible;transition:transform .2s ease-out,visibility;transform:translateY(0)}@media (width>=64rem) and (pointer:fine){.virtual-piano-fab-wrapper.svelte-1jffmd,.keyboard-panel.svelte-1jffmd{--sr-bottom-nav-h:0px}}.virtual-piano-fab-wrapper.svelte-1jffmd{right:1.5rem;bottom:calc(var(--sr-bottom-nav-h,0px) + env(safe-area-inset-bottom) + 1.75rem);z-index:45;width:3.25rem;height:3.25rem;position:fixed}.virtual-piano-fab.svelte-1jffmd{color:#fff;cursor:pointer;background:#5b21b6;border:none;border-radius:9999px;justify-content:center;align-items:center;width:100%;height:100%;transition:background .15s,transform .15s,box-shadow .15s;display:flex;box-shadow:0 8px 20px -6px #4c1d9599}.virtual-piano-fab-wrapper.svelte-1jffmd:hover .virtual-piano-fab:where(.svelte-1jffmd){background:#4c1d95;transform:translateY(-3px)scale(1.08);box-shadow:0 14px 26px -8px #4c1d95b3}.virtual-piano-fab.svelte-1jffmd:active{background:#4c1d95;transform:translateY(-1px)scale(.96)}.close-btn.svelte-1jffmd{color:#8a94a8;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:inline-flex}.close-btn.svelte-1jffmd:hover{color:#fff;background:#303541}.controls-left.svelte-1jffmd{min-width:0}.controls-right.svelte-1jffmd{justify-content:flex-end;align-items:center;gap:10px;min-width:0;display:flex}.keyboard-panel-content.svelte-1jffmd{background:#1a1d23;border-top:1px solid #363d49;padding:8px 0 12px;box-shadow:0 -2px 12px #0000002e}.keyboard-controls.svelte-1jffmd{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:0 16px 8px;display:grid}.octave-controls.svelte-1jffmd{justify-content:center;align-items:center;gap:16px;display:flex}.octave-btn.svelte-1jffmd{color:#b6bcc9;cursor:pointer;background:#303541;border:1px solid #4c5567;border-radius:6px;align-items:center;gap:6px;padding:4px 12px;font-size:12px;display:flex}.octave-btn.svelte-1jffmd:hover:not(:disabled){color:#fff;background:#3d4452}.octave-btn.svelte-1jffmd:disabled{opacity:.35;cursor:default}.octave-arrow.svelte-1jffmd{font-size:14px}kbd.svelte-1jffmd{background:#414958;border-radius:3px;padding:1px 5px;font-family:monospace;font-size:10px}.volume-control.svelte-1jffmd{align-items:center;gap:6px;display:none}@media (width>=640px){.volume-control.svelte-1jffmd{display:flex}}.volume-icon.svelte-1jffmd{color:#8a94a8;flex-shrink:0}.volume-slider.svelte-1jffmd{accent-color:#7b879d;cursor:pointer;width:80px;height:4px}.range-label.svelte-1jffmd{color:#8a94a8;text-align:center;min-width:100px;font-size:13px}.keyboard-scroll.svelte-1jffmd{-webkit-overflow-scrolling:touch;padding:0 12px;overflow:auto hidden}.keyboard-scroll.svelte-1jffmd::-webkit-scrollbar{height:6px}.keyboard-scroll.svelte-1jffmd::-webkit-scrollbar-track{background:#21242c}.keyboard-scroll.svelte-1jffmd::-webkit-scrollbar-thumb{background:#414958;border-radius:3px}@media (pointer:coarse){.octave-btn.svelte-1jffmd kbd:where(.svelte-1jffmd){display:none}}