.platter{width:100%;border-radius:50%;background:var(--background3);position:relative;cursor:pointer}.platter:before{content:"";width:4rem;height:4rem;border-radius:50%;background:var(--background2);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}.platter._playing .platter-image{animation-name:spin;animation-duration:4s;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.platter-image{border-radius:var(--radius);position:absolute;width:100%;height:100%;top:0;left:0;border-radius:50%;transition:rotate .4s}.platter-image:before{content:"";position:absolute;width:4px;height:calc(50% - 2rem);left:50%;top:0;background:var(--grey);z-index:1}@keyframes move{0%{background-position:0 0}to{background-position:50px 50px}}.progress-circle{height:1rem;width:1rem;position:relative}.progress-circle:before{content:"";position:absolute;border-radius:50%;top:0;right:0;bottom:0;left:0;background:conic-gradient(var(--text) calc(var(--p) * 1%),#0000 0);-webkit-mask-image:radial-gradient(farthest-side,#0000 calc(99% - 4px),#000 calc(100% - 4px));mask-image:radial-gradient(farthest-side,#0000 calc(99% - 4px),#000 calc(100% - 4px))}.turntable{cursor:pointer;flex-grow:0;width:24em;max-width:100%}.turntable._selected,.turntable:hover{outline:4px solid var(--accent)}.turntable-number{background:var(--opaqueHover);border-radius:50%;line-height:1.2rem;width:1.2rem;font-size:.8rem;text-align:center}.turntable .turntable-number{position:absolute;right:2rem}.track-dj.active{outline:3px solid var(--accent)}.track-dj.mute{opacity:.5}.turntable-buttons{min-height:48px}.playback{vertical-align:middle}.playback-button._normal{padding:.75rem;background:var(--accent);border-radius:1.25rem}.playback-button:not(._small):not(:disabled):hover{background:var(--accent2)}.dj.flex{align-items:stretch;justify-content:center;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.dj-play{border-radius:1.5rem;padding:1rem}.dj-play._waiting{outline:4px solid var(--text)}.dj-mixer>.vertical-flex{align-items:stretch;justify-content:center;height:100%;border-radius:var(--radius);justify-content:space-between}.dj-mixer-metadata .select-button{width:100%}.dj-mixer-strips{justify-content:space-around}.dj-mixer-volume.vertical-flex{align-items:center}.dj-track-info{min-height:51.5px}.stem-slider-container{flex-grow:1;padding-right:.5rem}._hover>.stem-slider-wrapper{visibility:visible}.stem-slider-container .icon{height:1.2rem;width:1.2rem}.stem-slider-value{width:1.2rem;flex-shrink:0;line-height:1.2rem;font-weight:700;display:flex;justify-content:center;cursor:pointer}.stem-slider-value:hover{color:var(--accent)}.offset,.tempo.flex{touch-action:none;font-size:.8rem;line-height:1rem;gap:.2rem}.offset-icon{height:.6rem;width:.6rem;background:var(--text);-webkit-mask-image:url(/assets/icons/arrow.png);mask-image:url(/assets/icons/arrow.png);-webkit-mask-size:cover;mask-size:cover}.offset-icon._left{transform:rotate(180deg)}.offset-icon:hover{background:var(--accent)}.offset-icon2{height:.6rem;width:.8rem;background:var(--text);-webkit-mask-image:url(/assets/icons/doublearrow.png);mask-image:url(/assets/icons/doublearrow.png);-webkit-mask-size:cover;mask-size:cover}.offset-icon2._left{transform:rotate(180deg)}.offset-icon2:hover{background:var(--accent)}.dj-slider{height:10rem}.crossfade,.dj-slider{width:10rem}.flex.key-row{gap:2px;margin-bottom:2px}button.key{flex-shrink:0;--key-width:4rem;width:var(--key-width);height:6rem;border-radius:3px;font-size:.6rem;text-align:center;border:4px solid #0000;color:var(--background)}.key._black{background:var(--grey)}.key._white{background:var(--text2)}.key._active{border-color:var(--text)}.key:hover{opacity:.5}button.key._left{margin-left:calc(1px + (var(--key-width) / 2))}button.key._right{margin-right:calc(1px + (var(--key-width) / 2))}@media (max-width:800px){.select{flex-grow:1}}.select{min-width:-moz-fit-content;min-width:fit-content}.select.small .select-button{font-size:.8rem}.select-button{padding:1rem;background:var(--background2);border-radius:var(--radius-small)}.select-button:hover{background:var(--grey)}.select-button.tempo{width:6rem}.key-select .select-button{min-width:8.2rem}.block:not(.song) .select-button:not(:hover){background:var(--background3)}.select-value{flex-grow:1;white-space:nowrap;line-height:1rem}.select-value._ph{--text:var(--text2);color:var(--text)}.select .context-menu{min-width:100%}.select-option{cursor:pointer;padding:.8rem 1.2rem;transition:color .2s;color:var(--text2);display:block;width:100%}.select-option.active{color:var(--text)}.select-option:hover{background:var(--grey)}.voice-select-options{background:var(--background);padding:.4rem;overflow-y:auto;max-height:10rem}.voice-select-option{display:inline-block;background:var(--background2);padding:.4rem;margin:.4rem}.voice-select-option._active,.voice-select-option:hover{background:var(--accent)}.multi-key-select{min-width:10rem}.key-select{min-width:7rem}.snap-select{width:-moz-fit-content;width:fit-content}.slider._vertical{height:10rem}.slider._horizontal{width:10rem}.song-preview-description{font-size:.8rem;min-height:39px}.song-preview-author *{font-size:.8rem;gap:.2rem;display:inline}.song-preview-image{position:absolute;height:100%;width:100%;top:0;left:0;object-fit:cover;z-index:-1;border-radius:var(--radius)}.pack-preview-title h4,.pack-preview-title h6{display:inline}.remix-preview-remove{cursor:pointer;transform:rotate(45deg)}.remix-preview-info{flex-wrap:wrap}.remix-preview-track{background:var(--background2);padding:.8rem;border-radius:var(--radius-small);box-shadow:var(--box-shadow);font-size:.8rem}.vertical-flex.status-container{align-items:center}.status{text-align:center;width:max-content}.status:after{animation:loading 1s linear infinite alternate;width:1rem;text-align:left;float:right;content:"."}.error{color:var(--accent);text-align:center}.progress-bar{width:var(--button-width);max-width:80%;border-radius:1rem;background:var(--disabled);overflow:hidden;height:1rem}.progress-bar div{border-radius:1rem;background:var(--accent);transition:width .5s;position:relative;height:100%}.progress-bar div:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background-image:linear-gradient(-45deg,#fff3 25%,#0000 0,#0000 50%,#fff3 0,#fff3 75%,#0000 0,#0000);background-size:50px 50px;animation:move 2s linear infinite;border-radius:1rem;overflow:hidden}.stem-preview-stem.flex{background:var(--background2);padding:.8rem;border-radius:var(--radius-small);box-shadow:var(--box-shadow);width:max-content}.stem-preview-stem:active,.stem-preview-stem:hover{background-color:var(--grey)}.sub-stem-button{text-transform:capitalize}form.vertical-flex{gap:2rem}.input{position:relative;cursor:text;flex-grow:1;transition:background-color .2s}.input._disabled{opacity:.5;cursor:not-allowed}.input._alt{background-color:var(--background2);border-radius:var(--radius-small);padding:.9rem 1rem}.block:not(.song) .input._alt:not(:hover){background:var(--background3)}.input._alt:not(._disabled):hover{background-color:var(--grey)}.input :focus{outline:unset}.input._alt .input-field{border:unset;font-size:.8rem}.input._alt .input-name{display:none}.input-name{position:absolute;cursor:inherit;transition:all .3s;top:.18rem;-webkit-user-select:none;user-select:none;color:var(--text2)}.input-name.focus{top:-.8rem;font-size:.6rem}.input-field{font-size:1rem;border:0;color:unset;-webkit-border-radius:0;background:none;width:100%;display:block;transition:border-color .3s}.input:not(._alt) .input-field{border-bottom:2px solid var(--text);line-height:calc(2rem - 2px)}.input._alt .input-field{line-height:1.2rem}.input:hover .input-field{border-color:var(--accent)}.textarea-field{resize:none;overflow-y:hidden}.library-filters.flex{margin-bottom:2rem;flex-wrap:wrap}.flex.library-bpm{font-size:.8rem;color:var(--text2);-webkit-user-select:none;user-select:none;flex-grow:1;min-width:12rem}.library-bpm-range{margin:0 .5rem}.range-mark{margin-top:.4rem;font-size:.8rem}.library-list-header{padding:1rem 1rem 1rem 0;display:grid;grid-template-columns:subgrid;grid-column:2/-1}.display-type{height:1.2rem;width:1.2rem;background:var(--text);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;cursor:pointer}.display-type:hover{background:var(--accent)}.display-type.grid{-webkit-mask-image:url(/assets/icons/grid.png);mask-image:url(/assets/icons/grid.png)}.display-type.list{-webkit-mask-image:url(/assets/icons/list.png);mask-image:url(/assets/icons/list.png)}