:root{color:#f8f8fb;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:#000;min-width:320px;min-height:100svh;margin:0;overflow:hidden}button{font:inherit}#root{min-height:100svh}.stage{background:#000;place-items:end center;min-height:100svh;padding:clamp(24px,8vh,80px) clamp(14px,4vw,48px);display:grid}.piano-shell{width:min(72vw,620px);margin-bottom:clamp(52px,14vh,130px);position:relative}.waveform-panel{--wave-color:#f8f8fb;z-index:0;pointer-events:none;text-align:center;width:min(76vw,760px);height:clamp(126px,21vh,190px);position:fixed;top:41svh;left:50%;transform:translate(-50%,-50%)}.sine-visualizer{width:100%;height:100%;display:block;overflow:visible}.sine-guide{fill:none;stroke:#ffffff29;stroke-linecap:round;stroke-width:5px}.sine-wave{fill:none;filter:drop-shadow(0 0 12px var(--wave-color));stroke-linecap:round;stroke-linejoin:round;stroke-width:7px;transition:stroke .18s,filter .18s}.waveform-caption{color:#f8f8fbb8;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 14px #000000d9;margin:-8px 0 0;font-size:clamp(.76rem,1.6vw,.95rem)}.piano-body{z-index:1;background:linear-gradient(#f0eef7 0%,#d7d4df 84%,#c5c1cd 100%);border:1px solid #eeeef7;border-radius:9px 9px 7px 7px;padding:clamp(14px,2vw,20px) clamp(16px,2.5vw,24px) 12px;position:relative;box-shadow:0 16px 28px #0009,inset 0 1px #ffffffd9,inset 0 -5px #b2aebbb3}.piano-body:before{content:"";background:#ffffff6b;border-radius:999px;height:7px;position:absolute;top:10px;left:clamp(14px,2vw,22px);right:clamp(14px,2vw,22px)}.piano-keys{touch-action:none;background:#fcfcff;border:2px solid #9d9ca5;height:clamp(74px,12vw,104px);margin-top:11px;position:relative;box-shadow:inset 0 0 0 1px #e8e8ed}.white-keys{grid-template-columns:repeat(var(--white-key-count), minmax(0, 1fr));height:100%;display:grid}.black-keys{pointer-events:none;position:absolute;inset:0}.piano-key{appearance:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;outline:none;min-width:0;margin:0;display:block}.piano-key--white{background:linear-gradient(90deg,#0000000d,#0000 13% 87%,#0000000d),linear-gradient(#fff 0%,#f8f8fb 72%,#ededf3 100%);border-right:1px solid #a9a8af;border-radius:0 0 4px 4px;height:100%;transition:transform 90ms,background 90ms,box-shadow 90ms;position:relative;box-shadow:inset 0 -5px #d2d2da9e}.piano-key--white:first-child{border-left:1px solid #c8c7ce}.piano-key--white[data-pressed=true]{background:linear-gradient(90deg,#00000017,#0000 16% 84%,#00000014),linear-gradient(#e7e7ee 0%,#f7f7fb 70%,#fafaff 100%);transform:translateY(5px);box-shadow:inset 0 3px 6px #00000024}.piano-key--black{top:-1px;left:var(--black-key-left);z-index:2;width:calc(100% / var(--white-key-count) * .58);pointer-events:auto;background:linear-gradient(90deg,#2e2d35 0%,#111016 24%,#030306 54%,#26252b 100%);border:1px solid #111016;border-radius:0 0 4px 4px;height:61%;transition:transform 90ms,box-shadow 90ms;position:absolute;transform:translate(-50%);box-shadow:0 4px 5px #0006,inset 0 -5px #00000073,inset 2px 0 #ffffff1f}.piano-key--black[data-pressed=true]{transform:translate(-50%)translateY(5px);box-shadow:0 1px 2px #0009,inset 0 3px 6px #000000a3}.piano-key:focus-visible{outline-offset:-3px;outline:3px solid #8fd8ff}@media (width<=620px){.stage{padding-inline:12px}.piano-shell{width:min(94vw,520px);margin-bottom:clamp(74px,18vh,126px)}.waveform-panel{width:min(92vw,560px);height:clamp(112px,19vh,160px);top:38svh}.piano-body{padding-inline:11px}}@media (prefers-reduced-motion:reduce){.piano-key,.sine-wave{transition:none}}