.key.svelte-4at6li{--release: .15s cubic-bezier(.22, .75, .35, 1);--travel: 1.5px;--kc-sat: var(--kc);position:absolute;top:0;left:var(--key-left, 0);width:var(--key-width, 100%);height:100%;cursor:pointer;outline:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.key.black.svelte-4at6li{height:62%}@supports (color: oklch(from red l c h)){.key.svelte-4at6li{--kc-sat: oklch(from var(--kc) min(l, .8) calc(c*1.6) h)}}.cap.svelte-4at6li{position:absolute;inset:0;z-index:1;contain:layout style}.black.svelte-4at6li .cap:where(.svelte-4at6li){z-index:3}.surface.svelte-4at6li{position:absolute;inset:0;overflow:hidden;transition:transform var(--release)}.down.svelte-4at6li .surface:where(.svelte-4at6li){transform:translate3d(0,var(--travel),0);transition:none}.shade.svelte-4at6li,.light.svelte-4at6li,.press-fill.svelte-4at6li,.bar.svelte-4at6li,.ghost-glow.svelte-4at6li,.lip-shade.svelte-4at6li,.front-shade.svelte-4at6li,.slit.svelte-4at6li{position:absolute;pointer-events:none;opacity:0;transition:opacity var(--release)}.down.svelte-4at6li :is(.shade:where(.svelte-4at6li),.light:where(.svelte-4at6li),.press-fill:where(.svelte-4at6li),.bar:where(.svelte-4at6li),.lip-shade:where(.svelte-4at6li),.front-shade:where(.svelte-4at6li)),.down.svelte-4at6li>.slit:where(.svelte-4at6li){transition:none}.white.svelte-4at6li{--lip: 6px}.white.svelte-4at6li .surface:where(.svelte-4at6li){bottom:var(--lip);background:linear-gradient(90deg,#ffffffb3 0,#fff0 1.5px calc(100% - 2.5px),#5c482c42),linear-gradient(180deg,#c9c1b1,#e6dfd2 4%,#f5f1e8 18%,#f8f5ee 46%,#f1ece2 82%,#e8e1d4)}.lip.svelte-4at6li{position:absolute;left:0;right:0;bottom:0;height:calc(var(--lip) + 2px);border-radius:0 0 3px 3px;overflow:hidden;background:linear-gradient(180deg,#fffdf7 0 2px,#e2dbcd 3px,#cfc7b7 55%,#aaa191)}.lip-shade.svelte-4at6li{inset:0;background:#18120a42}.down.svelte-4at6li .lip-shade:where(.svelte-4at6li){opacity:1}.white.svelte-4at6li .shade:where(.svelte-4at6li){inset:0;background:linear-gradient(180deg,#281e106b,#281e1024 22%,#281e1000 55%)}.down.svelte-4at6li .shade:where(.svelte-4at6li){opacity:1}.white.svelte-4at6li .light:where(.svelte-4at6li){inset:0;background:linear-gradient(180deg,color-mix(in oklab,var(--kc) 35%,white) 0%,color-mix(in oklab,var(--kc) 35%,transparent) 9%,transparent 16%),radial-gradient(70% 75% at 50% 0%,color-mix(in oklab,var(--kc-sat) 70%,transparent) 0%,color-mix(in oklab,var(--kc-sat) 22%,transparent) 70%,transparent 100%),linear-gradient(180deg,color-mix(in oklab,var(--kc-sat) 80%,transparent),color-mix(in oklab,var(--kc-sat) 42%,transparent) 42%,color-mix(in oklab,var(--kc-sat) 14%,transparent));box-shadow:inset 1.5px 0 color-mix(in oklab,var(--kc-sat) 55%,transparent),inset -1.5px 0 color-mix(in oklab,var(--kc-sat) 55%,transparent)}.down.svelte-4at6li .light:where(.svelte-4at6li){opacity:var(--lvl, .7)}.black.svelte-4at6li{--front: 11%}.body.svelte-4at6li{position:absolute;inset:0;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#020203,#1c1c20 7%,#0b0b0d 16% 84%,#17171a 93%,#020203);box-shadow:0 2px 2px #0000008c,3px 6px 9px -3px #1c12068c,-3px 6px 9px -3px #1c120666,0 10px 14px -8px #1c120673}.front.svelte-4at6li{position:absolute;left:5%;right:5%;bottom:0;height:calc(var(--front) + 3px);border-radius:0 0 2.5px 2.5px;overflow:hidden;background:linear-gradient(180deg,#ffffff80 0 1px,#46464d 1.5px,#26262b 35%,#0c0c0e)}.front-shade.svelte-4at6li{inset:0;background:#00000080}.down.svelte-4at6li .front-shade:where(.svelte-4at6li){opacity:1}.black.svelte-4at6li .surface:where(.svelte-4at6li){left:10%;right:10%;bottom:var(--front);border-radius:0 0 2px 2px;background:linear-gradient(90deg,#fff0 0,#ffffff14 20%,#ffffff05 45%,#fff0),linear-gradient(180deg,#fff0 55%,#ffffff0d 85%,#ffffff1a),linear-gradient(180deg,#34343a,#1b1b1f 10%,#111114,#0d0d10 80%,#1a1a1e)}.black.svelte-4at6li .surface:where(.svelte-4at6li):before{content:"";position:absolute;left:14%;width:1px;top:12%;bottom:8%;background:linear-gradient(180deg,#fff0,#ffffff47 30%,#ffffff1f 75%,#fff0)}.black.svelte-4at6li .shade:where(.svelte-4at6li){inset:0;background:linear-gradient(180deg,#0009,#0000 45%)}.black.svelte-4at6li .light:where(.svelte-4at6li){inset:0;background:linear-gradient(180deg,color-mix(in oklab,var(--kc) 40%,white) 0%,color-mix(in oklab,var(--kc) 30%,transparent) 10%,transparent 18%),radial-gradient(120% 70% at 50% 0%,color-mix(in oklab,var(--kc-sat) 85%,transparent) 0%,color-mix(in oklab,var(--kc-sat) 30%,transparent) 65%,transparent 100%),linear-gradient(180deg,color-mix(in oklab,var(--kc-sat) 70%,transparent),color-mix(in oklab,var(--kc-sat) 30%,transparent) 55%,color-mix(in oklab,var(--kc-sat) 12%,transparent));box-shadow:inset 1px 0 color-mix(in oklab,var(--kc) 60%,transparent),inset -1px 0 color-mix(in oklab,var(--kc) 40%,transparent)}.slit.svelte-4at6li{z-index:6;top:0;left:8%;right:8%;height:calc(var(--felt, 7px) + 3px);border-radius:0 0 2px 2px;background:linear-gradient(180deg,color-mix(in oklab,var(--kc) 55%,white) 0%,var(--kc-sat) 60%,color-mix(in oklab,var(--kc-sat) 50%,transparent) 100%)}.slit.svelte-4at6li:before{content:"";position:absolute;inset:0 -90% -22px;background:radial-gradient(50% 100% at 50% 0%,color-mix(in oklab,var(--kc-sat) 42%,transparent) 0%,color-mix(in oklab,var(--kc-sat) 12%,transparent) 55%,transparent 100%)}.black.svelte-4at6li .slit:where(.svelte-4at6li){left:14%;right:14%}.down.svelte-4at6li>.slit:where(.svelte-4at6li){opacity:var(--lvl, .7)}.press-fill.svelte-4at6li{inset:0;background:linear-gradient(180deg,#ffffff59,#fff0 30%),linear-gradient(180deg,color-mix(in srgb,var(--kc) 85%,white) 0%,var(--kc) 45%,color-mix(in srgb,var(--kc) 78%,black) 100%)}.down.svelte-4at6li .press-fill:where(.svelte-4at6li){opacity:.88}.bar.svelte-4at6li{left:14%;right:14%;bottom:6px;height:5px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--kc) 55%,white),var(--kc));box-shadow:0 0 6px color-mix(in srgb,var(--kc) 80%,transparent),0 0 14px color-mix(in srgb,var(--kc) 45%,transparent)}.black.svelte-4at6li .bar:where(.svelte-4at6li){left:18%;right:18%;bottom:5px;height:4px}.down.svelte-4at6li .bar:where(.svelte-4at6li){opacity:1}.ghost-glow.svelte-4at6li{left:0;right:0;bottom:0;height:55%;opacity:var(--glvl, .7);background:radial-gradient(90% 100% at 50% 100%,color-mix(in srgb,var(--gc) 55%,transparent) 0%,color-mix(in srgb,var(--gc) 18%,transparent) 55%,transparent 100%);animation:svelte-4at6li-ghost-in .2s ease-out}.ghost-glow.svelte-4at6li:after{content:"";position:absolute;left:18%;right:18%;bottom:3px;height:2px;border-radius:999px;background:var(--gc);box-shadow:0 0 6px var(--gc);animation:svelte-4at6li-ghost-breathe 1.6s ease-in-out infinite alternate}@keyframes svelte-4at6li-ghost-in{0%{opacity:0}}@keyframes svelte-4at6li-ghost-breathe{0%{opacity:.55}to{opacity:1}}.labels.svelte-4at6li{position:absolute;left:0;right:0;bottom:7px;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;font-family:Sora,DM Sans,sans-serif;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;z-index:2}.black.svelte-4at6li .labels:where(.svelte-4at6li){bottom:6px}.button.svelte-4at6li .labels:where(.svelte-4at6li){bottom:15px}.button.black.svelte-4at6li .labels:where(.svelte-4at6li){bottom:12px}.name.svelte-4at6li,.octave.svelte-4at6li{font-size:9.5px;font-weight:600;letter-spacing:.02em;color:#52422c9e}.octave.svelte-4at6li{font-size:8.5px;font-weight:500;color:#52422c75}.octave.strong.svelte-4at6li{font-size:9.5px;font-weight:600;color:#52422ca8}.black.svelte-4at6li :is(.name:where(.svelte-4at6li),.octave:where(.svelte-4at6li)){font-size:8px;color:#ece8e09e}.kbd.svelte-4at6li{display:grid;place-items:center;min-width:15px;height:15px;padding:0 3px;border-radius:4px;font-size:9px;font-weight:600;letter-spacing:.02em;color:#3a2e1ec7;background:#ffffff80;border:1px solid rgba(82,66,44,.22);box-shadow:0 1px #52422c29}.black.svelte-4at6li .kbd:where(.svelte-4at6li){min-width:13px;height:13px;font-size:8px;border-radius:3px;padding:0 2px;color:#f5f2ece6;background:#ffffff12;border-color:#ffffff29;box-shadow:0 1px #0009}@media(pointer:coarse){.white.svelte-4at6li{--lip: 7px}.name.svelte-4at6li{font-size:11px}.octave.svelte-4at6li,.octave.strong.svelte-4at6li{font-size:10px}.black.svelte-4at6li :is(.name:where(.svelte-4at6li),.octave:where(.svelte-4at6li)){font-size:9px}.labels.svelte-4at6li{bottom:9px}}@media(prefers-reduced-motion:reduce){.ghost-glow.svelte-4at6li:after{animation:none}}.piano-keyboard.svelte-1xckpe{--felt: 7px;position:relative;width:100%;height:100%;min-height:120px;background:linear-gradient(180deg,#030303,#0c0a08 70%,#050404);isolation:isolate;contain:layout paint style;touch-action:none;user-select:none;-webkit-user-select:none}.fallboard.svelte-1xckpe{position:absolute;top:0;left:0;right:0;height:var(--felt);z-index:5;pointer-events:none;background:linear-gradient(180deg,#34343a 0 1px,#1c1c20 1px,#0d0d0f 55%,#050506)}.fallboard.svelte-1xckpe:before{content:"";position:absolute;left:0;right:0;top:100%;height:2px;background:linear-gradient(180deg,#5c1822,#340c13)}.fallboard.svelte-1xckpe:after{content:"";position:absolute;left:0;right:0;top:calc(100% + 2px);height:14px;background:linear-gradient(180deg,#00000080,#0000002e 45%,#0000)}