._piano_1lk27_1{user-select:none;touch-action:pan-x;scrollbar-width:none;width:100%;height:240px;position:relative;overflow:auto hidden}._piano_1lk27_1::-webkit-scrollbar{display:none}._keysContainer_1lk27_16{min-width:max-content;height:100%;display:flex;position:relative}._key_1lk27_16{cursor:default;transform-origin:top;touch-action:none;justify-content:center;align-items:flex-end;transition:background-color 50ms,box-shadow 80ms,transform 80ms cubic-bezier(.32,.72,0,1);display:flex;position:relative}._whiteKey_1lk27_37{background:linear-gradient(#fff 0%,#f0f0f3 60%,#e2e2e8 100%);border-bottom:1px solid #a0a0aa;border-left:1px solid #c8c8d0;border-right:1px solid #b8b8c0;border-radius:0 0 6px 6px;flex:1;min-width:40px;padding-bottom:14px;box-shadow:inset 0 1px #ffffffe6,inset 0 -4px 8px #00000012,0 3px 6px #0000001f}._blackKey_1lk27_54{z-index:2;background:linear-gradient(#3a3a40 0%,#2a2a30 15%,#141418 70%,#0a0a0e 100%);border:1px solid #ffffff14;border-bottom-color:#ffffff24;border-radius:0 0 6px 6px;min-width:24px;max-width:32px;height:62%;padding-bottom:8px;position:absolute;box-shadow:0 6px 14px #000000a6,inset 0 1px #ffffff1f,inset 0 -4px 6px #00000080}._interactive_1lk27_73{cursor:pointer}._interactive_1lk27_73._whiteKey_1lk27_37:hover{background:linear-gradient(#fff 0%,#ebebf0 60%,#d8d8e0 100%)}._interactive_1lk27_73._blackKey_1lk27_54:hover{filter:brightness(1.15);background:linear-gradient(#4a4a50 0%,#3a3a40 15%,#1c1c22 70%,#111118 100%)}._interactive_1lk27_73._whiteKey_1lk27_37:active{background:linear-gradient(#dcdce2 0%,#c8c8d0 100%);transition:transform 40ms;transform:scaleY(.985);box-shadow:inset 0 2px 6px #00000026,0 1px 2px #00000014}._interactive_1lk27_73._blackKey_1lk27_54:active{filter:brightness(.85);transition:filter 40ms}._highlighted_1lk27_105._whiteKey_1lk27_37{box-shadow:0 0 22px var(--chord-glow,#a855f780), inset 0 -8px 14px var(--chord-glow,#a855f740), inset 0 1px 0 #fffc}._highlighted_1lk27_105._blackKey_1lk27_54{box-shadow:0 0 18px var(--chord-glow,#a855f799), inset 0 -4px 8px var(--chord-glow,#a855f759), inset 0 1px 0 #ffffff26, 0 5px 10px #0000008c}._active_1lk27_122._whiteKey_1lk27_37{background:linear-gradient(#d1fae5 0%,#10b981 100%);animation:.4s ease-in-out infinite _pulse_1lk27_1;box-shadow:0 0 18px #10b981b3,inset 0 -6px 12px #10b98166,inset 0 1px #ffffffb3}._active_1lk27_122._blackKey_1lk27_54{background:linear-gradient(#10b981 0%,#065c3e 70%,#043220 100%);animation:.4s ease-in-out infinite _pulse_1lk27_1;box-shadow:0 0 18px #10b981cc,inset 0 1px #fff3,0 5px 10px #00000080}._midiActive_1lk27_140._whiteKey_1lk27_37{background:linear-gradient(#fef3c7 0%,#f59e0b 100%);box-shadow:0 0 18px #f59e0bb3,inset 0 -6px 12px #f59e0b66,inset 0 1px #ffffffb3}._midiActive_1lk27_140._blackKey_1lk27_54{background:linear-gradient(#f59e0b 0%,#8b5a0a 70%,#4a3000 100%);box-shadow:0 0 18px #f59e0bcc,inset 0 1px #fff3,0 5px 10px #00000080}._root_1lk27_158._whiteKey_1lk27_37{background:linear-gradient(#dbeafe 0%,#3b82f6 100%);box-shadow:0 0 22px #3b82f6bf,inset 0 -6px 14px #3b82f680,inset 0 1px #fffc}._root_1lk27_158._blackKey_1lk27_54{background:linear-gradient(#3b82f6 0%,#1e3a8a 100%);box-shadow:0 0 20px #3b82f6d9,inset 0 1px #fff3,0 4px 8px #00000080}._label_1lk27_176{pointer-events:none;letter-spacing:.02em;z-index:10;text-align:center;white-space:nowrap;font-size:13px;font-weight:700;line-height:1;position:relative}._whiteKey_1lk27_37 ._label_1lk27_176{color:#111318;text-shadow:0 1px 1px #fffc;margin-bottom:12px}._blackKey_1lk27_54 ._label_1lk27_176{color:#ffffffeb;text-shadow:0 1px 3px #000000b3;margin-bottom:8px;font-size:11px}@keyframes _pulse_1lk27_1{0%,to{opacity:1}50%{opacity:.75}}@media (width<=768px){._piano_1lk27_1{height:130px}._whiteKey_1lk27_37{min-width:25px;padding-bottom:6px;box-shadow:inset 0 1px #ffffffe6,inset 0 -2px 4px #0000000d,0 2px 5px #00000026}._blackKey_1lk27_54{min-width:16px;max-width:16px;padding-bottom:4px;box-shadow:0 6px 12px #000000a6,inset 0 1px #ffffff26,inset 0 -2px 4px #0009}._whiteKey_1lk27_37 ._label_1lk27_176{margin-bottom:5px;font-size:9px}._blackKey_1lk27_54 ._label_1lk27_176{margin-bottom:3px;font-size:7px;transform:scale(.9)}}