:root{--accent:#b06bff;--accent-2:#6f8bff;--accent-soft:#b06bff29;--accent-line:#b06bff8c;--text:#b8b2c8;--text-dim:#7d7790;--text-strong:#f3eefb;--panel:#ffffff0d;--panel-border:#ffffff1a;--sans:"Inter", system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;font:16px/1.5 var(--sans);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{background-color:#0000;background-image:radial-gradient(1100px 620px at 50% -8%,#b06bff38,#0000 62%),radial-gradient(900px 600px at 88% 8%,#6f8bff1f,#0000 60%),linear-gradient(#16131f 0%,#0c0a12 100%);background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-height:100svh;margin:0}#root{text-align:center;flex-direction:column;width:100%;min-height:100svh;display:flex}p{margin:0}.piano{box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;background:linear-gradient(#2b2838 0%,#1b1825 60%,#131019 100%);border:1px solid #ffffff14;border-radius:20px;width:100%;max-width:1400px;height:320px;margin-inline:auto;padding:24px 20px 18px;display:flex;position:relative;overflow:hidden;box-shadow:0 50px 90px -40px #000000d9,0 12px 30px -12px #0009,inset 0 1px #ffffff14}.piano:before{content:"";background:linear-gradient(90deg, var(--accent), var(--accent-2));height:5px;box-shadow:0 0 16px -2px var(--accent-line);opacity:.85;border-radius:3px;position:absolute;top:13px;left:18px;right:18px}.octave{flex-shrink:1;flex-basis:0;min-width:0;display:flex;position:relative}.key-slot{flex:1 1 0;min-width:0;position:relative}.key{font-family:var(--sans);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;border:none;justify-content:center;align-items:flex-end;padding:0;transition:transform 40ms,box-shadow .12s,filter .12s,background .12s;display:flex}.key-white{color:#564f66;background:linear-gradient(#fcfcff 0%,#efedf4 72%,#e0dde8 100%);border:1px solid #c0bcca;border-top:none;border-radius:0 0 7px 7px;width:100%;height:100%;box-shadow:inset 0 -7px 9px -5px #281e3c40,inset -1px 0 #0000000d}.key-white:hover{background:linear-gradient(#fff 0%,#f3f1f8 72%,#e6e3ee 100%)}.key-white.is-active{border-color:var(--accent);box-shadow:inset 0 -5px 10px -4px var(--accent-line), 0 0 18px -2px var(--accent-line);background:linear-gradient(#f3e6ff 0%,#e3c8ff 100%);transform:translateY(2px)}.key-black{--tx:50%;transform:translateX(var(--tx));z-index:2;color:#d8d2e0;background:linear-gradient(#4c4956 0%,#232029 52%,#0c0b11 100%);border-radius:0 0 6px 6px;width:60%;height:63%;position:absolute;top:0;right:0;box-shadow:inset 0 1px #ffffff38,inset 0 -10px 12px -8px #000c,0 6px 9px -2px #000000a6}.key-black--left{--tx:-50%;left:0;right:auto}.key-black:hover{filter:brightness(1.25)}.key-black.is-active{background:linear-gradient(180deg, #c39bff 0%, var(--accent) 60%, #7d3ce0 100%);transform:translateX(var(--tx)) translateY(2px);box-shadow:inset 0 1px 0 #fff6, 0 0 18px -1px var(--accent-line);color:#fff}.key-labels{pointer-events:none;flex-direction:column;align-items:center;gap:3px;padding-bottom:12px;display:flex}.key-black .key-labels{padding-bottom:9px}.key-trigger{letter-spacing:.3px;color:#5a5270;background:#3c285a14;border-radius:6px;padding:3px 6px;font-size:12px;font-weight:600;line-height:1}.key-black .key-trigger{color:#f1ecf9;background:#ffffff24}.key-note{letter-spacing:.3px;opacity:.55;font-size:10px;font-weight:500}.is-active .key-trigger{color:#fff;background:#ffffff47}.is-active .key-note{opacity:.85;color:#fff}@media (width<=720px){.piano{flex-direction:column;gap:14px;height:auto;padding:22px 12px 14px}.octave{flex-basis:auto;width:100%;height:148px}.key-trigger{padding:2px 5px;font-size:11px}.key-note{font-size:9px}}.app{box-sizing:border-box;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:clamp(20px,4vh,40px);width:100%;padding:clamp(20px,5vh,56px) 16px 48px;display:flex}.controls{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;padding:8px 8px 8px 18px;display:inline-flex;box-shadow:0 10px 30px -12px #0009,inset 0 1px #ffffff0f}.control-group{align-items:center;gap:10px;display:inline-flex}.controls label{letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);font-size:11px;font-weight:600}.select-wrap{position:relative}.select-wrap:after{content:"";border-right:2px solid var(--text);border-bottom:2px solid var(--text);pointer-events:none;width:8px;height:8px;position:absolute;top:50%;right:12px;transform:translateY(-65%)rotate(45deg)}.controls select{appearance:none;font:inherit;color:var(--text-strong);border:1px solid var(--panel-border);cursor:pointer;background:#ffffff0a;border-radius:999px;padding:9px 34px 9px 14px;font-weight:500;transition:border-color .15s,background .15s}.controls select:hover{border-color:var(--accent-line);background:#ffffff12}.controls select option{color:#111}.divider{background:var(--panel-border);align-self:stretch;width:1px;margin:4px 0}.shifter{border:1px solid var(--panel-border);background:#ffffff0a;border-radius:999px;align-items:center;gap:4px;padding:3px;display:inline-flex}.shift-btn{width:28px;height:28px;color:var(--text-strong);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:20px;line-height:1;transition:background .15s,color .15s;display:inline-flex}.shift-btn:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}.shift-btn:disabled{color:var(--text-dim);opacity:.4;cursor:default}.range{min-width:84px;font-family:var(--mono);color:var(--text-strong);letter-spacing:.02em;font-size:13px;font-weight:500}.sustain-toggle{font:inherit;color:var(--text);border:1px solid var(--panel-border);cursor:pointer;background:#ffffff0a;border-radius:999px;align-items:center;gap:8px;padding:9px 16px;font-size:14px;font-weight:600;transition:all .18s;display:inline-flex}.sustain-toggle:hover:not(:disabled){color:var(--text-strong);border-color:var(--accent-line)}.sustain-toggle:disabled{opacity:.4;cursor:default}.sustain-toggle .dot{background:var(--text-dim);border-radius:50%;width:8px;height:8px;transition:all .18s}.sustain-toggle.is-on{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));box-shadow:0 0 18px -2px var(--accent-line);border-color:#0000}.sustain-toggle.is-on .dot{background:#fff;box-shadow:0 0 8px #ffffffe6}.volume-group{gap:8px}.vol-icon{color:var(--text-dim);flex:none}.volume-slider{appearance:none;cursor:pointer;background:#ffffff1f;border-radius:999px;width:96px;height:5px}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);width:14px;height:14px;box-shadow:0 0 8px -1px var(--accent-line);border:none;border-radius:50%}.volume-slider::-moz-range-thumb{background:var(--accent);width:14px;height:14px;box-shadow:0 0 8px -1px var(--accent-line);border:none;border-radius:50%}.status{color:var(--text-dim);align-items:center;gap:7px;padding-right:8px;font-size:13px;font-weight:500;display:inline-flex}.status:before{content:"";background:var(--text-dim);border-radius:50%;width:7px;height:7px;animation:1.4s ease-in-out infinite pulse}.status.is-ready{color:#5fd0a8}.status.is-ready:before{background:#5fd0a8;animation:none;box-shadow:0 0 8px #5fd0a8cc}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}