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