.piano-key.svelte-4at6li{box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;justify-content:center;align-items:flex-end;transition:background-color 60ms ease-out,filter 60ms ease-out;display:flex;position:absolute;top:0}.piano-key--white.svelte-4at6li{z-index:1;color:#6b7280;background:#fafafa;border:1px solid #cbcbcb;border-radius:0 0 4px 4px;height:100%}.piano-key--black.svelte-4at6li{z-index:2;color:#d1d5db;background:linear-gradient(#2b2b2b,#111);border:1px solid #000;border-radius:0 0 3px 3px;height:62%;box-shadow:0 2px 3px #0006}.piano-key--white.is-active.svelte-4at6li{color:#fff;background:#9ca3af}.piano-key--black.is-active.svelte-4at6li{color:#1f2937;background:#9ca3af}.piano-key--white.is-guide.svelte-4at6li{color:#4c1d95;background:#c4b5fd;border-color:#7c3aed}.piano-key--black.is-guide.svelte-4at6li{color:#f5f3ff;background:#8b5cf6;border-color:#6d28d9}.piano-key__middle-c.svelte-4at6li{opacity:.55;background:currentColor;border-radius:50%;width:5px;height:5px}.piano-key__label.svelte-4at6li{pointer-events:none;flex-direction:column;align-items:center;gap:1px;padding-bottom:14px;font-size:10px;font-weight:600;line-height:1.1;display:flex}.piano-key--black.svelte-4at6li .piano-key__label:where(.svelte-4at6li){padding-bottom:6px;font-size:8px}.piano-key__octave.svelte-4at6li{opacity:.6;font-size:8px}.piano-key.fb-correct.svelte-4at6li{color:#fff;background:#16a34a;border-color:#15803d}.piano-key.fb-correct-descending.svelte-4at6li{color:#14532d;background:#86efac;border-color:#4ade80}.piano-key.fb-incorrect.svelte-4at6li{color:#fff;background:#dc2626;border-color:#b91c1c}.piano-key.fb-hint-up.svelte-4at6li,.piano-key.fb-hint-down.svelte-4at6li{color:#9d174d;background:#fbcfe8;border-color:#f9a8d4}.piano-key__hint.svelte-4at6li{pointer-events:none;width:14px;height:14px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.piano-key__hint--down.svelte-4at6li{transform:translate(-50%)scaleX(-1)}.piano.svelte-i919ap{z-index:30;touch-action:none;background:#262626;border-top:1px solid #0006;flex-direction:column;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 24px #00000040}.piano__bar.svelte-i919ap{color:#e5e5e5;touch-action:auto;background:#171717;border-bottom:1px solid #ffffff14;flex:none;align-items:center;gap:.75rem;min-height:2.5rem;padding:.35rem .75rem;display:flex}.piano__grabber.svelte-i919ap{z-index:41;cursor:ns-resize;touch-action:none;width:88px;height:40px;position:fixed;left:50%;transform:translate(-50%)}.piano__grabber.svelte-i919ap:before{content:"";background:#404040;border-radius:9999px;width:56px;height:14px;position:absolute;bottom:-3px;left:50%;transform:translate(-50%)}.piano__grabber.svelte-i919ap:after{content:"";background:#ffffff73;border-radius:2px;width:28px;height:4px;position:absolute;bottom:2px;left:50%;transform:translate(-50%)}.piano__grabber.svelte-i919ap:focus-visible{outline:none}.piano__grabber.svelte-i919ap:focus-visible:before{outline-offset:2px;outline:2px solid #fff9}.piano__resize.svelte-i919ap{cursor:ns-resize;touch-action:none;background:#404040;flex:none;height:8px}.piano__scrubber.svelte-i919ap{touch-action:none;cursor:pointer;background:#171717;border-bottom:1px solid #ffffff0f;flex:none;height:20px;position:relative}.piano__scrubber-thumb.svelte-i919ap{pointer-events:none;background:#ffffff47;border-radius:6px;position:absolute;top:4px;bottom:4px;left:0}.piano__scrubber.svelte-i919ap:hover .piano__scrubber-thumb:where(.svelte-i919ap),.piano__scrubber.svelte-i919ap:active .piano__scrubber-thumb:where(.svelte-i919ap){background:#ffffff6b}.piano__scrubber.svelte-i919ap:focus-visible{outline-offset:-2px;outline:2px solid #fff9}.piano__keys.svelte-i919ap{scrollbar-width:none;touch-action:none;flex:none;position:relative;overflow:auto hidden}.piano__keys.svelte-i919ap::-webkit-scrollbar{display:none}.piano__surface.svelte-i919ap{height:100%;margin-inline:auto;position:relative}