.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__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__resize.svelte-i919ap{cursor:ns-resize;touch-action:none;background:linear-gradient(#404040,#262626);flex:none;height:8px}.piano__resize.svelte-i919ap:after{content:"";background:#ffffff4d;border-radius:2px;width:36px;height:3px;margin:2px auto 0;display:block}.piano__scrollbar.svelte-i919ap{touch-action:pan-x;flex:none;height:12px;overflow:auto hidden}.piano__scrollbar-spacer.svelte-i919ap{height:1px}.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}