.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}.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)}.keyboard-toggle.svelte-1jffmd{visibility:visible;background:var(--color-ink);color:#fff;cursor:pointer;white-space:nowrap;border:1px solid #3d4452;border-bottom:none;border-radius:8px 8px 0 0;align-items:center;gap:6px;padding:6px 14px;font-size:13px;display:flex;position:absolute;top:-28px;left:50%;transform:translate(-50%)}.keyboard-toggle.svelte-1jffmd:hover{color:#fff;background:#303541}.toggle-label.svelte-1jffmd{font-size:12px}.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}.controls-spacer.svelte-1jffmd{min-width:0}.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{justify-content:flex-end;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}