.shared-pk-container{gap:0;display:flex;overflow-x:auto}.shared-pk-octave{flex-shrink:0;display:flex;position:relative}.shared-pk-white{cursor:pointer;z-index:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#fff;border:1px solid #d1d5db;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;width:36px;height:120px;padding-bottom:8px;transition:background 80ms;display:flex;position:relative}.shared-pk-white:hover{background:#f3f4f6}.shared-pk-white.active{background:#7c3aed}.shared-pk-bass-range{border-bottom:2px solid #94a3b8}.shared-pk-white-label{color:#64748b;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:.6rem}.shared-pk-black{cursor:pointer;z-index:2;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#1e293b;border:1px solid #0f172a;border-radius:0 0 3px 3px;justify-content:center;align-items:flex-end;width:24px;height:76px;padding:0;transition:background 80ms;display:flex;position:absolute;top:0;transform:translate(-50%)}.shared-pk-black:hover{background:#334155}.shared-pk-black.active{background:#7c3aed}.shared-pk-black-label{color:#ffffffb3;-webkit-user-select:none;user-select:none;pointer-events:none;white-space:nowrap;font-size:.5rem;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}