.piano-keyboard[data-v-8bc43c90]{display:flex;height:200px;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.octave[data-v-8bc43c90]{display:flex;position:relative}.piano-key[data-v-8bc43c90]{border:1px solid #000;cursor:pointer;position:relative;transition:all .1s ease}.piano-key.white[data-v-8bc43c90]{background:linear-gradient(180deg,#fff 0,#f5f5f5);height:200px;width:40px;z-index:1}.piano-key.black[data-v-8bc43c90]{background:linear-gradient(180deg,#000 0,#333);height:120px;margin-left:-14px;position:absolute;width:28px;z-index:2}.piano-key.white[data-v-8bc43c90]:nth-child(2){left:26px}.piano-key.white[data-v-8bc43c90]:nth-child(4){left:66px}.piano-key.white[data-v-8bc43c90]:nth-child(7){left:106px}.piano-key.white[data-v-8bc43c90]:nth-child(9){left:146px}.piano-key.white[data-v-8bc43c90]:nth-child(11){left:186px}.piano-key[data-v-8bc43c90]:hover{filter:brightness(.9)}.piano-key.active[data-v-8bc43c90]{filter:brightness(.8);transform:translateY(2px) scale(.98)}.piano-key.white.active[data-v-8bc43c90]{background:linear-gradient(180deg,#e3f2fd 0,#bbdefb)}.piano-key.black.active[data-v-8bc43c90]{background:linear-gradient(180deg,#1976d2 0,#1565c0)}.note-label[data-v-8bc43c90]{color:#666;font-size:10px}.note-label[data-v-8bc43c90],.note-label-black[data-v-8bc43c90]{bottom:10px;font-family:JetBrains Mono,monospace;left:50%;position:absolute;transform:translate(-50%)}.note-label-black[data-v-8bc43c90]{color:#fff;font-size:9px}.ripple-effect[data-v-8bc43c90]{animation:ripple-8bc43c90 .6s ease-out;background:radial-gradient(circle,rgba(25,118,210,.6) 0,transparent 70%);border-radius:50%;height:20px;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:20px}@keyframes ripple-8bc43c90{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(3)}}.piano-keyboard-wrapper[data-v-8bc43c90]{background:linear-gradient(180deg,#f5f5f5 0,#e0e0e0);border:2px solid #333;border-radius:8px;padding:20px}@media(max-width:768px){.piano-key.white[data-v-8bc43c90]{height:160px;width:35px}.piano-key.black[data-v-8bc43c90]{height:100px;margin-left:-13px;width:26px}.piano-keyboard[data-v-8bc43c90]{height:160px}.piano-keyboard-wrapper[data-v-8bc43c90]{position:relative}.piano-keyboard-wrapper[data-v-8bc43c90]:after{bottom:8px;color:#666;content:"← Scroll →";font-size:11px;left:50%;opacity:.7;pointer-events:none;position:absolute;transform:translate(-50%)}.controls-section button[data-v-8bc43c90],.controls-section select[data-v-8bc43c90]{min-height:44px;padding:8px 16px!important}}.beat-indicator[data-v-8bc43c90]{background:#ccc;border-radius:50%;height:12px;transition:all .1s ease;width:12px}.beat-indicator.beat-downbeat[data-v-8bc43c90]{border:2px solid #1976d2}.beat-indicator.beat-active[data-v-8bc43c90]{background:#1976d2;box-shadow:0 0 8px #1976d299;transform:scale(1.3)}