*{margin:0;padding:0;list-style:none}:root{font-family:Inter,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-primary: #007bff;--color-secondary: #6c757d;--color-success: #28a745;--color-danger: #dc3545;--spacing-small: .5em;--spacing-medium: 1em;--spacing-large: 1.5em;--ff: "Inter", sans-serif;--font-h1: bold 1.125rem/1.4em var(--ff);--font-h2: bold 1rem/1.4em var(--ff);--font-p: 1rem/1.4em var(--ff);--font-p2: .875rem/1.4em var(--ff);--font-gray100: hsl(0, 0%, 100%);--font-gray70: hsl(0, 0%, 70%);--font-gray0: hsl(0, 0%, 0%);--border-radius: .25em;--border-width: .0625em}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;font-size:1em;font-weight:500;font-family:inherit;background-color:#000;cursor:pointer;transition:border-color .25s}.disabled{cursor:not-allowed;pointer-events:none}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{position:relative;text-align:center;width:100vw;height:100vh}.logo{height:6em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}#login-header{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;font-family:Avenir}#login-wrapper{padding-top:20vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5vh;position:relative}#apollo-logo{border-radius:35px;width:30vh}div.title-div{position:relative}div.title-div>span{position:absolute;top:80%;left:40%;text-wrap:nowrap}#auth-options-wrapper{display:flex;flex-direction:column;width:320px;gap:10px;position:relative}#auth-options-wrapper button{font-family:Avenir;display:flex;justify-content:center;align-items:center;border-style:solid;border-color:#fff;padding:20px;width:100%;gap:5px;font-size:larger}.button-tooltip{-webkit-user-select:none;-ms-user-select:none;user-select:none;position:absolute;background:#fff;font-family:Avenir;font-size:.75rem;text-wrap:nowrap;padding:.25rem .5rem;color:#000;z-index:10;left:80%;top:-10%}#googleLogin{opacity:.5;cursor:default}#guestLogin:hover{background:#fff3}.auth-footer-container{position:absolute;top:95vh;display:flex;justify-content:center;gap:1rem}span.changelog-roadmap-button{cursor:pointer}.auth-modal-block{font-family:Avenir;position:absolute;z-index:10;width:100%;height:100%;display:flex;justify-content:center;overflow:hidden}.auth-modal-container{box-sizing:border-box;position:absolute;top:50vh;height:50vh;width:380px;padding:.5rem 1rem;border-radius:5px;background:linear-gradient(to bottom,#343434,#000)}.auth-tabs-container{padding-top:1rem;font-size:1.5rem;position:relative;display:flex;justify-content:center}.auth-tabs-container>button{flex:1;background:transparent}span.auth-tab{-webkit-user-select:none;-ms-user-select:none;user-select:none;flex:5;width:calc(380px - 2rem);font-weight:700;color:#fff;pointer-events:auto}.auth-body-container>ul{padding-top:2rem;display:flex;flex-direction:column;gap:1rem}li.auth-modal-item{font-family:Inter;display:flex;flex-direction:column}span.modal-item-title{color:#ffe30d;font-weight:700}#homepage-container{display:flex;flex-direction:column;min-height:100vh;max-height:100vh}#homepage-header{font-family:Avenir;display:flex;flex:calc(100vh * 78 / 812);justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px}#search-bar-wrapper{display:flex;flex:calc(100vh * 52 / 812);justify-content:center;align-items:center}#song-list-wrapper{display:flex;flex:calc(100vh * 569 / 812);overflow-y:auto}#song-list{width:100vw;display:flex;flex-direction:column;gap:10px}#song-details-wrapper{display:flex;flex-direction:column;align-items:flex-start;text-align:start;width:100%}.song-card{display:flex;align-items:center;gap:10px;padding:5px;border:1px solid transparent}.song-card img{display:flex;border-radius:5px;height:126px;width:126px}.song-card:hover{background:#fff3;cursor:pointer}#save-icon-wrapper img{height:fit-content;width:30px;margin:5px}.save-icon:hover{content:url("data:image/svg+xml,%3csvg%20width='30'%20height='30'%20viewBox='0%200%2030%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M21.25%203.75H8.75C7.375%203.75%206.25%204.875%206.25%206.25V26.25L15%2022.5L23.75%2026.25V6.25C23.75%204.875%2022.625%203.75%2021.25%203.75Z'%20fill='%23FFE30E'/%3e%3c/svg%3e")}.save-icon-active:hover{content:url("data:image/svg+xml,%3csvg%20width='30'%20height='30'%20viewBox='0%200%2030%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M20%2013.75V22.4625L13.75%2019.7875L7.5%2022.4625V6.25H15V3.75H7.5C6.125%203.75%205%204.875%205%206.25V26.25L13.75%2022.5L22.5%2026.25V13.75H20ZM25%208.75H17.5V6.25H25V8.75Z'%20fill='%23E63D43'/%3e%3c/svg%3e")}.save-button{background:transparent;display:flex}#header-items{display:flex;justify-content:space-between}#search-bar-wrapper{display:flex;flex:calc(100vh * 52 / 812);justify-content:center;align-items:center;position:relative;padding:10px;border-bottom-width:1px;border-bottom-color:#343434;border-bottom-style:solid}#search-bar-wrapper input{border:none;-webkit-appearance:none;-ms-appearance:none;-moz-appearance:none;appearance:none;width:100%;background:#9f9d9d;border-radius:30px;padding:10px 20px 12px 40px;font-size:large;font-weight:700;color:#000;outline:none;border:1px solid transparent;background-image:url("data:image/svg+xml,%3csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M11.0001%2019.4999C15.4184%2019.4999%2019.0001%2015.9182%2019.0001%2011.4999C19.0001%207.08165%2015.4184%203.49993%2011.0001%203.49993C6.58184%203.49993%203.00012%207.08165%203.00012%2011.4999C3.00012%2015.9182%206.58184%2019.4999%2011.0001%2019.4999Z'%20stroke='black'%20stroke-width='1.99832'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M21%2021.4998L16.65%2017.1498'%20stroke='black'%20stroke-width='1.99832'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e");background-position:10px;background-repeat:no-repeat}#clear-button{position:absolute;top:50%;height:fit-content;right:20px;transform:translateY(-50%);background-color:transparent}#search-bar-wrapper input:focus{border-style:solid;border-color:#ffe30d;border-width:1px;transition:border-color .1s ease}#footer-wrapper{display:flex;flex:calc(100vh * 113 / 812);justify-content:center;align-items:center;gap:30%;border-top-width:1px;border-top-color:#343434;border-top-style:solid}#footer-wrapper button{background-color:transparent}#alert-message{display:flex;flex:calc(100vh * 569 / 812);overflow-y:auto;align-items:center;justify-content:center}p.track-title{font:var(--font-h1)}p.track-artist{font:var(--font-p)}div.blanked{color:#000}div.queue-modal{-webkit-user-select:none;-ms-user-select:none;user-select:none;background-color:#000000e6;position:absolute;z-index:20;top:0;height:100%;width:100vw;display:flex;flex-direction:column}div.queue-modal div.queue-header{flex:1;display:flex}div.queue-modal div.queue-header div.queue-header-left-padding{flex:2}div.queue-modal div.queue-header div.queue-header-title{flex:5;font-size:3rem;font-family:Avenir;color:#fff;display:flex;justify-content:center;align-items:center}div.queue-modal div.queue-header div.queue-header-exit-container{flex:2;display:flex;justify-content:center;align-items:center;font-size:1.5rem}div.queue-modal div.queue-header div.queue-header-exit-container button#queue-exit:hover{transform:scale(1.125)}div.queue-modal div.queue-body{flex:9;display:flex;flex-direction:column;overflow:hidden}div.queue-modal div.queue-body h2.queue-label{text-align:left;color:#ffe30d}div.queue-modal div.queue-body h2.queue-label:not(:first-child){padding-top:1rem}div.queue-modal div.queue-body ul.queue-list{flex:1;display:flex;flex-direction:column;padding:0 1rem;gap:.25rem;overflow:scroll}div.queue-modal div.queue-body ul.queue-list li.queue-list-item:nth-child(n+3):hover{background:#fff3}div.queue-modal div.queue-body ul.queue-list li.queue-list-item:nth-child(n+3){cursor:pointer}div.queue-modal div.queue-body ul.queue-list li.queue-list-item:nth-child(n+3) div.queue-item-hover-container:hover{opacity:1}div.queue-modal div.queue-body ul.queue-list li.queue-list-item{padding:1rem;border-radius:5px;min-height:7vh;max-height:7vh;display:flex;gap:1rem;position:relative}div.queue-modal div.queue-body ul.queue-list li.queue-list-item div.queue-item-cover{height:7vh;width:7vh;display:flex}div.queue-modal div.queue-body ul.queue-list li.queue-list-item div.queue-item-cover img{border-radius:5px;object-fit:contain}div.queue-modal div.queue-body ul.queue-list li.queue-list-item div.queue-item-hover-container{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;padding:1rem;display:flex}div.queue-modal div.queue-body ul.queue-list li.queue-list-item div.queue-item-hover-container img{height:7vh;width:7vh;border-radius:5px;object-fit:contain}div.queue-modal div.queue-body ul.queue-list li.queue-list-item div.queue-item-details{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}div.queue-modal div.queue-body ul.queue-list li.queue-list-item div.queue-item-details div.queue-item-title{font:var(--font-h1)}div.queue-modal div.queue-body ul.queue-list li.queue-list-item div.queue-item-details div.queue-item-artist{font:var(--font-p2)}div.player-container{display:flex;height:100vh;flex-direction:column}div.player-container div.secondary-nav{width:100%;flex:calc(100% * 73 / 812);display:flex;justify-content:space-between}div.player-container div.secondary-nav button#back-button{flex:1}div.player-container div.secondary-nav div.secondary-nav-padding{flex:2.5}div.player-container div.secondary-nav button#popout-button,div.player-container div.secondary-nav button#queue-button{flex:1}div.player-container div.player-details{flex:calc(100% * 84 / 812)}div.player-container div.player-cover{flex:calc(100% * 316 / 812);max-height:calc(100% * 316/812);display:flex;align-items:center;justify-content:center}div.player-container img#player-cover{height:calc(100% * 300 / 316);width:80%;object-fit:contain}div.player-container div.player-timeline{position:relative;flex:calc(100% * 67 / 812)}div.player-container div.player-media-controls{flex:calc(100% * 74 / 812);display:flex;align-items:center;justify-content:space-evenly;gap:.5rem}div.player-container div.player-media-controls>button{height:calc(100% * 72 / 74);width:calc(100% * 72 / 378);display:flex;align-items:center;justify-content:center}div.player-container div.player-media-controls>button :hover{transform:scale(1.125)}div.player-container div.player-edit{flex:calc(100% * 198 / 812);display:flex;align-items:center;justify-content:center}div.player-container div.player-edit button:hover{transform:scale(1.125)}p#edit-text{color:#fff}div.mixer-help-block{position:absolute;padding:1rem;height:calc(100% - 2rem);width:calc(100% - 2rem);display:flex;flex-direction:column;align-items:center;z-index:30;background:#000}div.mixer-help-block video{width:70%;height:auto;align-self:center;margin-bottom:2rem}div.mixer-help-block p{margin-bottom:1rem}div.mixer-help-block h2{color:#ffe30d;align-self:flex-start;margin-bottom:1rem}div.help-body{width:380px}div.help-header{width:100%;display:flex}div.help-header .help-header-left-padding{flex:1}div.help-header .help-header-title{flex:8}div.help-header .help-header-exit-container{flex:1}div.help-header .help-header-exit-container button#help-exit:hover{transform:scale(1.125)}div.timeline-controls-container,div.rate-controls-container{display:flex;flex-direction:column}div.mixer-container{height:100%;display:flex;flex-direction:column}div.mixer-container div.secondary-nav{width:100%;flex:calc(100% * 73 / 812);display:flex;justify-content:space-between}div.mixer-container div.secondary-nav button#back-button{flex:1}div.mixer-container div.secondary-nav div.secondary-nav-padding{flex:2.5}div.mixer-container div.secondary-nav button#popout-button,div.mixer-container div.secondary-nav button#help-button{flex:1}div.mixer-container div.player-details{flex:calc(100% * 94 / 812);display:flex;flex-direction:column;justify-content:center}div.mixer-container div.mixer-timeline-container{flex:calc(100% * 226 / 812);display:flex;align-items:center}div.mixer-container div.mixer-timeline-container div.wave-container{flex:1;height:80%;display:flex;align-items:center}div.mixer-container div.mixer-timeline-container div.wave-container div{flex:1}div.mixer-container div.duration-container{flex:calc(100% * 48 / 812)}div.mixer-container div.mixer-controls-container{flex:calc(100% * 79 / 812);display:flex;justify-content:space-evenly;align-items:center}div.mixer-container div.mixer-controls-container span{flex:1;font:var(--font-p);font-size:1.4rem}div.mixer-container div.mixer-controls-container button{flex:1}div.mixer-container div.control-knobs-container{-webkit-user-select:none;-ms-user-select:none;user-select:none;flex:calc(100% * 174 / 812);display:flex;position:relative;flex-direction:column;justify-content:center}div.mixer-container div.control-knobs-container div.rate-picker-title{flex:1;display:flex;flex-direction:column;margin-bottom:1rem;z-index:20}div.mixer-container div.control-knobs-container div.rate-picker-title p{font:var(--font-h1);margin-top:auto}div.mixer-container div.control-knobs-container div.rate-picker-container{box-sizing:border-box;flex:1;overflow:hidden;position:relative}div.mixer-container div.control-knobs-container div.rate-picker-container ul.rate-picker{display:flex;list-style-type:none;padding:0 50% 50px;gap:1rem;overflow:scroll;height:100%;cursor:grab}div.mixer-container div.control-knobs-container div.rate-picker-container ul.rate-picker li.rate-value{min-width:3rem;max-width:3rem;color:white 100%;background-color:#000;scroll-snap-align:center}div.mixer-container div.control-knobs-container div.rate-picker-container ul.rate-picker li.current{color:#ffe30e}div.mixer-container div.control-knobs-container div.rate-picker-container input.floating-input{position:absolute;z-index:10;outline:none;background-color:#000;color:#fff;border:1px solid #FFE30E;padding:2px;text-align:center}div.mixer-container div.control-knobs-container div.rate-picker-container div.error-message{position:absolute;z-index:20;color:tomato;font:var(--font-p);height:20%;width:50%;transform:translate(-50%,-50%);top:70%;left:50%}div.mixer-container div.control-knobs-container div.left-gradient{height:100%;width:42%;position:absolute;z-index:10;pointer-events:none;background:linear-gradient(to right,black 40%,transparent 100%)}div.mixer-container div.control-knobs-container div.right-gradient{height:100%;width:42%;position:absolute;z-index:10;pointer-events:none;background:linear-gradient(to left,black 40%,transparent 100%);right:0}div.mixer-container div.control-knobs-container div.rate-picker-hint{border-top:1px solid;border-image:linear-gradient(to right,transparent 30%,white 50%,transparent 70%);border-image-slice:1;flex:1;display:flex;justify-content:center;position:relative}div.mixer-container div.control-knobs-container div.error-message{position:absolute;padding-top:1rem;color:tomato;z-index:20}div.mixer-container div.save-container-mixer{flex:calc(100% * 118 / 812)}div.loading-container{height:100%;width:100%;display:flex;justify-content:center;align-items:center}div.player-timeline{display:flex;align-items:center;justify-content:center}.progress-bar{width:80%;max-width:80%;transform:scaleY(1.5);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;padding:0;margin:0;box-sizing:border-box;position:absolute}div.progress-thumb-container{z-index:10;height:20px;width:80%;position:absolute;pointer-events:none}div.progress-thumb{margin-left:calc(var(--progress-percent) - 10px);width:20px;height:20px;background-color:#fff;border-radius:50%;pointer-events:none}.progress-bar::-webkit-slider-runnable-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#343434;background:linear-gradient(to right,#FFE30E var(--progress-percent, 0%),#343434 var(--progress-percent, 0%));height:5px;border-radius:3px}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:15px;width:15px}.progress-bar::-moz-range-track{background:#343434;background:linear-gradient(to right,#FFE30E var(--progress-percent, 0%),#343434 var(--progress-percent, 0%));height:5px;border-radius:3px}.progress-bar::-moz-range-thumb{opacity:0;height:15px;width:15px}@keyframes spin{0%{transform:rotate(var(--start-degree, 0deg))}to{transform:rotate(calc(var(--start-degree, 0deg) + 360deg))}}@keyframes slideUpEase{80%{padding-top:35vh}95%{padding-top:21vh}to{padding-top:20vh}}@keyframes expand{0%{transform:scaleX(1);opacity:1}to{transform:scale(1.1);opacity:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlideFromLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeSlideFromRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes pullUp{0%{transform:translateY(50vh)}to{transform:translateY(0)}}@keyframes pullDown{0%{transform:translateY(0)}to{transform:translateY(50vh)}}.secondary-nav button:hover{transform:scale(1.25)}