.app-top{background:#000;color:#fff;display:flex;justify-content:center;align-items:center;justify-content:space-between;padding:1rem}.app-top .center{display:flex;justify-content:center;align-items:center;gap:.25rem}.app-top img{max-width:1.25rem;border-radius:100%}.app-top h1{font-weight:450;font-size:1rem;margin:-2px 0 0}.app-top a,.app-top .menu-trigger{color:#fff;border:none;padding:none;background:transparent}.app-top .menu{z-index:1;isolation:isolate}.app-top .menu.closed .menu-popup{opacity:0}.app-top .menu.closed .menu-popup,.app-top .menu.closed .menu-background{pointer-events:none}.app-top .menu .menu-trigger{z-index:-1;padding:0}.app-top .menu .menu-popup{position:absolute;top:2rem;right:1rem;display:flex;flex-direction:column;align-items:flex-end;border:1px solid rgba(0,0,0,.1);background:#fff;color:#000;border-radius:8px;transition:.1s ease}.app-top .menu .menu-popup button{margin:0;padding:.5rem 1rem;background:transparent;font:inherit;font-size:14px;border:none;width:100%;text-align:right;transition:.1s ease}.app-top .menu .menu-popup button:not(:last-of-type){border-bottom:1px solid #CBD5E1}.app-top .menu .menu-popup button:not(:disabled):active{background:#f8fafc}.app-top .menu .menu-background{position:absolute;top:0;right:0;bottom:0;left:0;border:none;background:transparent;z-index:-1}.app-main .popup{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;isolation:isolate;display:flex;justify-content:center;align-items:center}.app-main .popup.hidden{pointer-events:none}.app-main .popup.hidden .popup-background,.app-main .popup.hidden .popup-content{opacity:0}.app-main .popup .popup-background{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000001a;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:none;z-index:-1;transition:.2s ease}.app-main .popup .popup-content{transition:.2s ease;max-width:90vw;background:#fff;border-radius:8px;border:1px solid rgba(0,0,0,.1);overflow:hidden}.app-main .error-popup .popup-content{padding:2rem;background:#fecaca}.app-main .error-popup .popup-content h2{font-size:20px;margin:0}.app-main .search-popup .popup-content .search-top{padding:2rem 1.5rem}.app-main .search-popup .popup-content .search-top h2{font-size:1rem;font-weight:550;margin:0;width:fit-content}.app-main .search-popup .popup-content .search-top .search-title{display:flex;justify-content:space-between;align-items:center}.app-main .search-popup .popup-content .search-top .search-title button{padding:0;margin:0;background:transparent;border:none;display:block}.app-main .search-popup .popup-content .search-top .search-bar{display:flex;gap:.5rem;margin-top:1rem}.app-main .search-popup .popup-content .search-top .search-bar input{border:1px solid #E5E7EB;padding:.5rem 1rem;font:inherit;border-radius:4px;min-width:0;flex-shrink:1}.app-main .search-popup .popup-content .search-top .search-bar input:focus{outline:none;background:#f8fafc}.app-main .search-popup .popup-content .search-top .search-bar button{padding:0 1em;min-height:3em;display:flex;justify-content:center;align-items:center;gap:6px;border:none;font:inherit;text-decoration:none;color:inherit;font-size:14px;font-weight:450;border-radius:6px;background:#f1f5f9;transition:.2s ease-out;background:#000;color:#fff}.app-main .search-popup .popup-content .search-top .search-bar button:hover{opacity:.95;cursor:pointer}.app-main .search-popup .popup-content .search-top .search-bar button:active{opacity:.9}.app-main .search-popup .popup-content .search-top .search-bar button:disabled{opacity:.5}.app-main .search-popup .popup-content .search-results{background:#f1f5f9;display:flex;flex-direction:column;gap:.5rem;padding:1rem}.app-main .search-popup .popup-content .search-results .no-results{margin:0;opacity:.5}.app-main .search-popup .popup-content .search-results .result{background:#fff;border-radius:8px;padding:1rem;display:flex;justify-content:space-between;gap:.5rem}.app-main .search-popup .popup-content .search-results .result .track-info{display:flex;justify-content:center;align-items:center;gap:.5rem}.app-main .search-popup .popup-content .search-results .result .track-info img{max-width:3.5rem;border-radius:4px;outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}.app-main .search-popup .popup-content .search-results .result .track-info .track-details h3{margin:0;font-weight:500;font-size:1rem}.app-main .search-popup .popup-content .search-results .result .track-info .track-details p{margin:0;color:#64748b;font-size:14px}.app-main .search-popup .popup-content .search-results .result .add-track{padding:0 1em;min-height:3em;display:flex;justify-content:center;align-items:center;gap:6px;border:none;font:inherit;text-decoration:none;color:inherit;font-size:14px;font-weight:450;border-radius:6px;background:#f1f5f9;transition:.2s ease-out}.app-main .search-popup .popup-content .search-results .result .add-track:hover{opacity:.95;cursor:pointer}.app-main .search-popup .popup-content .search-results .result .add-track:active{opacity:.9}.app-main .search-popup .popup-content .search-results .result .add-track:disabled{opacity:.5}.app-main .now-playing{background:#f1f5f9;padding:3rem;display:flex;justify-content:center;align-items:center;justify-content:space-between;gap:1rem}.app-main .now-playing .playing-album{position:relative;isolation:isolate;margin-right:26px}.app-main .now-playing .playing-album .album-cover{max-width:7rem;border-radius:8px;outline:1px solid rgba(0,0,0,.1);outline-offset:-1px;display:block}.app-main .now-playing .playing-album:after{content:"";width:calc(100% - .5rem);height:calc(100% - .5rem);position:absolute;top:.25rem;right:-26px;background-image:url(../../../assets/record.png);background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:-1;animation-name:rotate;animation-duration:6s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:paused}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-main .now-playing .playing-album.playing:after{animation-play-state:running}.app-main .now-playing .playing-info{display:flex;justify-content:center;align-items:center;flex-direction:column;flex-grow:1}.app-main .now-playing .playing-info .audio-wave{display:flex;align-items:center;gap:1px}.app-main .now-playing .playing-info .audio-wave span{display:block;width:2px;height:10px;border-radius:2px;background:#808fa3;animation-name:shrink-y;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:linear}.app-main .now-playing .playing-info .audio-wave span:nth-of-type(1){animation-delay:-.2s}.app-main .now-playing .playing-info .audio-wave span:nth-of-type(2){animation-delay:-.5s}.app-main .now-playing .playing-info .audio-wave span:nth-of-type(3){animation-delay:-.7s}.app-main .now-playing .playing-info .audio-wave span:nth-of-type(4){animation-delay:-.3s}.app-main .now-playing .playing-info .audio-wave span:nth-of-type(5){animation-delay:-.8s}@keyframes shrink-y{0%{height:3px}50%{height:14px}to{height:3px}}.app-main .now-playing .playing-info .audio-wave.paused span{animation-play-state:paused}.app-main .now-playing .playing-info .info-small{display:flex;justify-content:center;align-items:center;gap:4px;width:fit-content;color:#64748b;font-size:14px}.app-main .now-playing .playing-info h2{font-size:20px;font-weight:550;margin:.25rem 0}.app-main .now-playing .playing-info .artists{margin:0}.app-main .queue{padding:2rem 3rem}.app-main .queue .queue-top{display:flex;justify-content:center;align-items:center;justify-content:space-between;padding-bottom:1.5rem}.app-main .queue .queue-top h2{margin:0;font-size:1rem;font-weight:550}.app-main .queue .queue-top button{padding:0;border:none;background:transparent;transition:.2s ease}.app-main .queue .queue-top button:hover{opacity:.9}.app-main .queue .queue-top button:active{opacity:.8}.app-main .queue .queue-items{display:flex;flex-direction:column;gap:.75rem}.app-main .queue .queue-items .queue-track{display:flex;justify-content:center;align-items:center;justify-content:space-between;position:relative}.app-main .queue .queue-items .queue-track .track-info{display:flex;justify-content:center;align-items:center;gap:8px}.app-main .queue .queue-items .queue-track .track-info img{max-width:3.5rem;border-radius:4px;outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}.app-main .queue .queue-items .queue-track .track-info .track-details{display:flex;flex-direction:column;gap:2px}.app-main .queue .queue-items .queue-track .track-info .track-details h3{margin:0;font-weight:450;font-size:1rem}.app-main .queue .queue-items .queue-track .track-info .track-details p{margin:0;color:#64748b}.app-main .queue .queue-items .queue-track .track-menu{padding:0;background:transparent;border:none;color:#64748b}.app-main .queue .queue-items .queue-track:not(:last-of-type):after{content:"";background:#0000001a;width:calc(100% - 4rem);height:1px;position:absolute;bottom:-6px;left:4rem}.app-main .explicit:after{content:"E";background:#e2e8f0;border-radius:2px;display:flex;justify-content:center;align-items:center;display:inline-flex;margin-left:.45em;width:1.5em;height:1.5em;font-size:.625em;font-weight:600;vertical-align:.15em}