.piano-wrapper[data-v-f383ef8e]{overflow-x:auto}.piano[data-v-f383ef8e]{width:100%;min-width:420px;height:160px;display:flex;position:relative}.piano-key[data-v-f383ef8e]{cursor:pointer;border:1px solid #94a3b8;padding:0}.piano-key-white[data-v-f383ef8e]{z-index:1;background:#fff;border-radius:0 0 6px 6px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:8px;display:flex;position:relative}.piano-key-white.active[data-v-f383ef8e]{background:#bfdbfe}.piano-key-label[data-v-f383ef8e]{color:#475569;font-size:.8rem}.piano-key-black[data-v-f383ef8e]{z-index:2;background:#1e293b;border-radius:0 0 4px 4px;width:8%;height:60%;position:absolute;top:0;transform:translate(-50%)}.piano-key-black.active[data-v-f383ef8e]{background:#2563eb}