.piano-key.svelte-4at6li{position:relative;cursor:pointer;border:none;outline:none;touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden;transition:transform .04s ease}.reflection.svelte-4at6li{position:absolute;inset:0;pointer-events:none;border-radius:inherit}.piano-key.white.svelte-4at6li{background:linear-gradient(180deg,#f4f4f5,#e4e4e7 40%,#d4d4d8 75%,#b8b8be);border-radius:0 0 5px 5px;border:1px solid #52525b;border-top:none;width:100%;height:100%;z-index:1;box-shadow:inset 0 -3px 6px #00000026,inset 0 1px #ffffffb3,0 2px 4px #0000004d}.piano-key.white.svelte-4at6li .reflection:where(.svelte-4at6li){background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.1) 35%,transparent 50%)}.piano-key.white.pressed.svelte-4at6li,.piano-key.white.active.svelte-4at6li{background:linear-gradient(180deg,#e0e0e4,#d0d0d6 40%,#c4c4cc 75%,#acacb8);transform:perspective(400px) rotateX(.8deg) translateY(1px);box-shadow:inset 0 2px 5px #0003,inset 0 -1px 2px #ffffff4d,0 1px 2px #0003}.piano-key.black.svelte-4at6li{background:linear-gradient(180deg,#2a2a2e,#1a1a1e,#111114 60%,#0a0a0c);border-radius:0 0 4px 4px;border:1px solid #333338;border-top:none;width:100%;height:100%;z-index:2;box-shadow:inset 0 -2px 4px #00000080,inset 0 1px 1px #ffffff14,0 3px 6px #00000080,0 1px 2px #0006}.piano-key.black.svelte-4at6li .reflection:where(.svelte-4at6li){background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 30%,transparent 45%)}.piano-key.black.pressed.svelte-4at6li,.piano-key.black.active.svelte-4at6li{background:linear-gradient(180deg,#252528,#1c1c20,#141416 60%,#0e0e10);transform:perspective(400px) rotateX(.5deg) translateY(1px);box-shadow:inset 0 1px 4px #0009,inset 0 -1px 1px #ffffff0a,0 1px 3px #0006}.key-name.svelte-4at6li{position:absolute;bottom:5px;left:50%;transform:translate(-50%);font-size:10px;font-weight:600;color:#00000073;text-shadow:0 0 3px rgba(255,255,255,.8);pointer-events:none;-webkit-user-select:none;user-select:none;font-family:var(--font-mono, monospace);z-index:3;white-space:nowrap}.black-key-name.svelte-4at6li{font-size:8px;font-weight:600;color:#ffffffbf;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.7);bottom:4px}.keyboard-label.svelte-4at6li{color:#0009;font-size:10px;font-weight:700;letter-spacing:.03em;text-shadow:0 1px 0 rgba(255,255,255,.6)}.black-key-name.keyboard-label.svelte-4at6li{color:#ffffffe6;text-shadow:0 1px 3px rgba(0,0,0,.9)}.press-fill-overlay.svelte-4at6li{position:absolute;inset:0;border-radius:inherit;opacity:.75;pointer-events:none;z-index:2}.press-button-bar.svelte-4at6li{position:absolute;bottom:0;left:0;right:0;height:7px;border-radius:0 0 4px 4px;pointer-events:none;z-index:3}@media(pointer:coarse){.piano-key.svelte-4at6li{transition:transform .04s ease}}.piano-keyboard.svelte-1xckpe{position:relative;width:100%;height:100%;min-height:120px;border-radius:0 0 6px 6px;box-shadow:0 6px 20px #00000080,0 2px 8px #0000004d,inset 0 1px #ffffff0d;background:#18181b;padding:0 1px 2px;touch-action:none}.white-keys.svelte-1xckpe{display:flex;height:100%;gap:1.5px}.white-key-wrapper.svelte-1xckpe{flex:1;height:100%;position:relative}.octave-marker.svelte-1xckpe{position:absolute;bottom:4px;left:50%;transform:translate(-50%);font-size:9px;color:#a1a1aa;opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:var(--font-mono, monospace);z-index:3}.black-keys.svelte-1xckpe{position:absolute;top:0;left:0;right:0;height:62%;pointer-events:none}.piano-keyboard.svelte-1xckpe:after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:8px;background:linear-gradient(to bottom,rgba(0,0,0,.3),transparent);pointer-events:none}.black-key-wrapper.svelte-1xckpe{position:absolute;height:100%;pointer-events:auto}div.svelte-clyidt{position:relative;width:100%;height:100%}canvas.svelte-clyidt{display:block;position:relative;width:100%;height:100%}