.hero-animated-piano[data-v-6c3a5fe4]{display:flex;justify-content:center;overflow-x:auto;padding:2rem 0}.piano-keys-container[data-v-6c3a5fe4]{align-items:flex-start;display:flex;gap:2px;padding:0 20px}.piano-key[data-v-6c3a5fe4]{border-radius:0 0 8px 8px;cursor:pointer;flex-shrink:0;position:relative;transition:all .2s ease}.piano-key.white[data-v-6c3a5fe4]{background:linear-gradient(180deg,#fff 0,#f5f5f5);border:2px solid #ddd;box-shadow:0 2px 4px #0000001a}.piano-key.black[data-v-6c3a5fe4]{background:linear-gradient(180deg,#2d2d2d 0,#1a1a1a);border:2px solid #000;box-shadow:0 2px 6px #0000004d}.piano-key.white.active[data-v-6c3a5fe4]{background:linear-gradient(180deg,#9333ea 0,#7e22ce);box-shadow:0 1px 2px #0003,0 0 20px #9333ea80;transform:translateY(2px)}.piano-key.black.active[data-v-6c3a5fe4]{background:linear-gradient(180deg,#7e22ce 0,#6b21a8);box-shadow:0 1px 2px #0000004d,0 0 20px #9333ea80;transform:translateY(2px)}.ripple-effect[data-v-6c3a5fe4]{animation:ripple-6c3a5fe4 .8s ease-out;background:#9333ea4d;border-radius:50%;height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:0}@keyframes ripple-6c3a5fe4{0%{height:0;opacity:1;width:0}to{height:120px;opacity:0;width:120px}}@media(max-width:640px){.piano-key.white[data-v-6c3a5fe4]{height:90px!important;width:35px!important}.piano-key.black[data-v-6c3a5fe4]{height:60px!important;margin-left:-11px!important;margin-right:-11px!important;width:22px!important}}