@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:wght@300;400;500;700;800&display=swap";:root{--bg-color: rgb(34 15 46);--body-bg-color: rgb(15, 15, 15);--text-color: rgb(218, 218, 218);--accent-color-lighter: rgb(158, 114, 195);--accent-color-light: rgb(146, 77, 191);--accent-color: rgb(115, 56, 160);--accent-color-dark: rgb(66 29 89);--accent-color-darker: rgb(15, 5, 41);font-family:Plus Jakarta Sans,system-ui,sans-serif;background-color:var(--bg-color);color:var(--text-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0)}:link{color:var(--text-color)}*{margin:0;padding:0;box-sizing:border-box;outline:none;list-style:none}body{background:radial-gradient(50% 50% at 50% 105%,var(--accent-color-darker) 0%,var(--bg-color) 80% 100%)}html,body,#root{height:100%}a{text-decoration:none}a:visited,a:active{color:var(--text-color)}button{border:none}input{border:none;outline:none;background:none;color:var(--body-bg-color);padding-block:0;padding-inline:0}#app{display:flex;flex-direction:column;height:100%}#app .container{margin:0 auto;flex-grow:1;overflow:scroll;scrollbar-width:none;gap:20px;padding:10px 0;height:1px;width:100%;max-width:992px}@media screen and (max-width: 992px){#app .container{max-width:768px}}@media screen and (max-width: 768px){#app .container{max-width:576px}}@media screen and (max-width: 576px){#app .container{max-width:100vw;padding:10px}}.TrackCard{--image-size: 70px;--button-size: 40px;display:flex;align-items:center;gap:.5rem;padding:.5rem;margin-bottom:.25rem;border-radius:.75rem;transition:all .1s ease-in-out;border:3px solid var(--accent-color-dark)}.TrackCard:hover{background:var(--accent-color-dark)}.TrackCard img{width:var(--image-size);height:var(--image-size);border-radius:.5rem;box-shadow:-3px 0 10px #000}.TrackCard .info{width:1px;flex-grow:1;display:flex;flex-wrap:wrap;font-weight:600}.TrackCard .info h3{width:100%;text-align:left;text-overflow:ellipsis;overflow:hidden;font-size:1rem;margin-bottom:.25rem}.TrackCard .info span{margin-right:.5rem;display:flex;align-items:center}.TrackCard .info span.platform svg{width:.8rem;height:.8rem}.TrackCard .info span.user{font-size:.8rem;color:var(--accent-color-lighter)}.TrackCard .info span.playback-count{font-size:.6rem;max-width:fit-content;font-weight:700}.TrackCard .info span.playback-count svg{width:.6rem;height:.6rem}.TrackCard .info span.duration{font-size:.6rem}.TrackCard button{cursor:pointer;min-width:var(--button-size);min-height:var(--button-size);display:grid;place-items:center;border-radius:50%;background-color:var(--accent-color);color:var(--text-color);box-shadow:0 0 10px #0003;transition:all .1s ease-in-out}.TrackCard button svg{width:1rem;height:1rem}.TrackCard button:hover,.TrackCard button:active{background-color:var(--accent-color-light);color:var(--accent-color-dark);transform:translate(-3px) translateY(-2px);box-shadow:3px 2px 1px 1px #000}@media (pointer: coarse){.TrackCard button:hover:not(:active){background-color:var(--accent-color);color:var(--text-color);transform:none;box-shadow:none}}.TrackCard.square{flex-direction:column;align-items:flex-start;--image-size: 140px}.TrackCard.square img{object-fit:cover}.TrackCard.square .info{flex-direction:column;width:100%}.TrackCard.square .info h3{text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:150px}.TrackCard.square .info span{display:none}.TrackCard.square .info span.username{display:flex}.TrackCard.square button{display:none}.TrackCard.playing{background:radial-gradient(circle at 50% 50%,var(--accent-color) 0%,var(--accent-color-dark) 100%)}@media screen and (max-width: 600px){.TrackCard{--image-size: 50px;--button-size: 30px}.TrackCard .info h3{text-wrap:nowrap;font-size:.8rem;max-width:100%}.TrackCard .info span.platform svg{width:.8rem;height:.8rem}.TrackCard .info span.user{font-size:.7rem}.TrackCard .info span.playback_count,.TrackCard .info span.duration{font-size:.6rem}.TrackCard .info span.playback_count svg,.TrackCard .info span.duration svg{width:.6rem;height:.6rem}}.SearchBar{flex-grow:1;display:flex;justify-content:center;align-items:center;border-radius:.75rem;background-color:var(--accent-color-dark);border:2px solid var(--accent-color-dark);box-shadow:0 0 15px #000000b3}@media screen and (max-width: 768px){.SearchBar{width:100%;margin-bottom:1rem}}.SearchBar svg{color:var(--accent-color-light);margin-left:1rem}@media screen and (max-width: 768px){.SearchBar svg{margin-left:.5rem;width:1rem;height:1rem}}.SearchBar_input{cursor:default;display:block;padding:0;border:none;font-size:1rem;font-weight:600;background-color:transparent;transition:all .4s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--accent-color-light);margin:.5rem .5rem .5rem 1rem}@media screen and (max-width: 768px){.SearchBar_input{margin:.5rem;font-size:.875rem;flex-grow:1}}.SearchBar_input::placeholder{font-size:1rem;font-family:inherit;font-weight:inherit;color:inherit}.SearchBar_input:focus,.SearchBar_input:active{color:var(--accent-color-lighter)}.SearchBar_platform{position:relative;display:flex;align-items:center;gap:.25rem;padding:0 .5rem}.SearchBar_platform svg{color:var(--accent-color-lighter)}.SearchBar_platform svg.drop{transition:transform .4s cubic-bezier(.175,.885,.32,1.275);transform:rotate(0)}.SearchBar_platform svg.drop.active{transform:rotate(180deg)}.SearchBar_platform_list{position:absolute;top:100%;right:0;padding:5px 5px 0;margin-top:1rem;background-color:#00000080;border-radius:.75rem;border:2px solid var(--accent-color-dark);box-shadow:0 0 15px #000000b3}.SearchBar_platform_list li{margin-bottom:5px}.SearchBar_platform_list li button{width:100%;display:flex;align-items:center;gap:.5rem;font-family:inherit;font-weight:600;padding:.25rem .75rem;color:var(--text-color);background-color:#00000080;border-radius:.25rem;border:2px solid var(--accent-color-dark)}.SearchBar_platform_list li button svg{color:var(--accent-color-lighter);margin:0;width:1.5rem;height:1.5rem}#library #playlists{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}#library #playlists h2{width:100%}.PlaylistCard{--thumbnail-size: 80px;cursor:pointer;position:relative;display:inline-flex;flex-direction:column;align-items:center;border-radius:.75rem;border:2px solid var(--accent-color-dark);box-shadow:0 0 10px #0000004d;overflow:hidden;width:100px}.PlaylistCard_thumbnail{width:var(--thumbnail-size);height:var(--thumbnail-size);margin:7px 0;box-shadow:0 0 10px #0003;display:flex;flex-wrap:wrap;overflow:hidden;background-color:#00000080;transition:all .2s ease-in-out;filter:brightness(1)}.PlaylistCard_thumbnail img{width:50%;height:50%;object-fit:cover}.PlaylistCard_thumbnail svg{color:var(--accent-color-dark)}.PlaylistCard_info{width:100%;padding:0 7px 7px}.PlaylistCard_info h3{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.PlaylistCard_info p{font-size:.7rem;color:var(--accent-color-lighter)}.PlaylistCard button{cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background-color:var(--accent-color);color:var(--text-color);box-shadow:0 0 10px #0003;transition:all .1s ease-in-out}.PlaylistCard button:hover{background-color:var(--accent-color-light);color:var(--accent-color-dark);transform:translate(-3px) translateY(-2px);box-shadow:3px 2px 1px 1px #000}#playlist #header{position:relative;display:flex;justify-content:space-between;align-items:center;padding:1rem;margin-bottom:1rem;border-radius:.75rem;border:2px solid var(--accent-color-dark);background:linear-gradient(90deg,var(--accent-color-dark) 0%,var(--bg-color) 100%)}@media screen and (max-width: 768px){#playlist #header{flex-wrap:wrap;gap:1rem}}#playlist #header h1{width:100%;font-size:1.5rem;font-weight:700;line-height:1.25rem;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width: 768px){#playlist #header h1{font-size:1.25rem;line-height:1.25rem}}#playlist #header button{cursor:pointer;display:flex;align-items:center;color:var(--text-color);background:transparent;transition:all .1s ease-in-out}#playlist #header button.play{border-radius:.75rem;padding:.25rem .5rem;box-shadow:0 0 10px #0003;border:2px solid var(--accent-color-dark)}#playlist #header button.play:hover,#playlist #header button.play:active{background-color:var(--accent-color-light);transform:translate(-3px) translateY(-2px);box-shadow:3px 2px 1px 1px #000}@media (pointer: coarse){#playlist #header button.play:hover:not(:active){background:transparent;transform:none;box-shadow:none}}#playlist #header button.play svg{width:.8rem;height:.8rem}#playlist #header button.more{border-radius:50%;position:absolute;top:1rem;right:1rem;padding:.25rem}#playlist #header button.more:active{background-color:var(--accent-color-light);color:var(--accent-color-dark);transform:scale(1.1);box-shadow:3px 2px 1px 1px #000}#playlist #header button.more svg{width:1rem;height:1rem}.Header{position:relative;z-index:10}.Header header{display:flex;align-items:center;padding:1.5rem 2rem;background-color:var(--bg-color);border-bottom:1px solid var(--accent-color-dark)}@media screen and (max-width: 768px){.Header header{padding:.75rem;flex-wrap:wrap;justify-content:space-between}}.Header header .logo{display:flex;align-items:center;font-size:1.25rem;font-weight:700;line-height:1.25rem}.Header header .logo img{width:1.25rem;height:1.25rem;margin-right:.5rem}@media screen and (max-width: 768px){.Header header nav{position:fixed;bottom:0;right:0;width:100%;background-color:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-top:1px solid var(--accent-color-dark);text-shadow:0 0 15px var(--accent-color-light)}}.Header header nav ul{display:flex;align-items:center;gap:2rem;font-weight:500}@media screen and (max-width: 768px){.Header header nav ul{justify-content:space-evenly;margin:1rem 0 .5rem}}.Header header nav ul li{position:relative}@media screen and (max-width: 768px){.Header header nav ul li{display:flex;flex-direction:column;align-items:center}}.Header header nav ul li svg{display:none;transition:all .1s ease-in-out}@media screen and (max-width: 768px){.Header header nav ul li svg{display:block}}@media screen and (max-width: 768px){.Header header nav ul a.active{text-shadow:0 0 10px #fff}}@media screen and (max-width: 768px){.Header header nav ul a.active svg{transform:translateY(-10%) scale(1.2);filter:drop-shadow(0 0 3px var(--accent-color-light))}}.Header header .avatar{--avatar-size: 2.5rem;width:var(--avatar-size);height:var(--avatar-size);min-width:var(--avatar-size);min-height:var(--avatar-size);border-radius:50%;background-color:var(--accent-color);overflow:hidden}@media screen and (max-width: 768px){.Header header .avatar{--avatar-size: 2rem}}.Header header .avatar:hover{cursor:pointer}.Header header .avatar:hover img{transform:scale(.9)}.Header header .avatar img,.Header header .avatar svg{width:100%;height:100%;border-radius:50%;color:var(--accent-color-lighter)}.Player{border-radius:.75rem;overflow:hidden;margin-bottom:70px}.Player_controls{display:flex}.Player_controls svg{color:var(--accent-color-lighter);display:grid;place-items:center}.Player_controls_additional{flex:1 1 0px;display:flex;align-items:center;justify-content:center}.Player_controls_main{flex:2 1 0px;display:flex;align-items:center;justify-content:center}.Player_controls_volume{flex:1 1 0px;display:flex;align-items:center;justify-content:center}.Player_content{--image-size: 60px;display:flex;width:100%;padding:.5rem .5rem 0;background-color:transparent;border-top:2px solid var(--accent-color-dark);border-radius:.75rem;overflow:hidden;transition:all .5s ease-in-out}.Player_content img{width:var(--image-size);height:var(--image-size);border-radius:.75rem;transform:translate(0);opacity:1;transition:all .25s cubic-bezier(.175,.885,.32,1.275)}.Player_content_info{width:1px;flex-grow:1;padding:.5rem;background-color:transparent;font-weight:600;opacity:1;transition:all .5s cubic-bezier(.175,.885,.32,1.275)}.Player_content_info h3{width:100%;font-size:1rem;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}.Player_content_info span{font-size:.8rem;line-height:1rem}.Player_content_info span.artist{color:var(--accent-color-lighter)}.Player_content_info span.playlist{display:inline-flex;align-items:center;margin-left:.25rem;gap:.25rem}.Player_content_info span.playlist svg{width:.8rem;height:.8rem}@keyframes playerContentAnimation{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.rhap_container{box-sizing:border-box;display:flex;flex-direction:column;line-height:1;font-family:inherit;width:100%;padding:10px 15px;background-color:transparent}.rhap_container:focus:not(:focus-visible){outline:0}.rhap_container svg{vertical-align:initial}.rhap_header{margin-bottom:10px}.rhap_footer{margin-top:5px}.rhap_main{display:flex;flex-direction:column;flex:1 1 auto}.rhap_stacked .rhap_controls-section{margin-top:20px}@media screen and (max-width: 576px){.rhap_stacked .rhap_controls-section{margin-top:10px}}.rhap_horizontal{flex-direction:row}.rhap_horizontal .rhap_controls-section{margin-left:8px}.rhap_horizontal-reverse{flex-direction:row-reverse}.rhap_horizontal-reverse .rhap_controls-section{margin-right:8px}.rhap_stacked-reverse{flex-direction:column-reverse}.rhap_stacked-reverse .rhap_controls-section{margin-bottom:20px}.rhap_progress-section{display:flex;flex:3 1 auto;align-items:center;position:relative}.rhap_progress-container{display:flex;align-items:center;height:20px;flex:1 0 auto;align-self:center;margin:0;cursor:pointer;user-select:none;-webkit-user-select:none}.rhap_progress-container:focus:not(:focus-visible){outline:0}.rhap_time{color:var(--text-color);font-size:12px;user-select:none;-webkit-user-select:none;position:absolute;top:calc(100% + 4px)}.rhap_time:nth-child(1){left:0}.rhap_time:nth-child(3){right:0}.rhap_progress-bar{box-sizing:border-box;position:relative;z-index:0;width:100%;height:3px;background-color:"none";border-radius:2px;transition:all .1s ease-out}.rhap_progress-bar:hover{height:5px}.rhap_progress-bar:hover .rhap_progress-indicator{transition:all .1s ease-out;width:20px;height:20px;margin-left:-10px;top:-8px}.rhap_progress-filled{height:100%;position:absolute;z-index:2;background-color:var(--accent-color-light);border-radius:2px}.rhap_progress-bar-show-download{background-color:var(--accent-color-dark)}.rhap_download-progress{height:100%;position:absolute;z-index:1;-webkit-backdrop-filter:var(--accent-color);backdrop-filter:var(--accent-color);border-radius:2px}.rhap_progress-indicator{box-sizing:border-box;position:absolute;z-index:3;width:15px;height:15px;margin-left:-7.5px;top:-6px;background:var(--accent-color-light);border-radius:50px}.rhap_controls-section{display:flex;flex:1 1 auto;justify-content:space-between;align-items:center}.rhap_button-clear{background-color:transparent;border:none;padding:0;overflow:hidden;cursor:pointer}.rhap_button-clear:hover{opacity:.9;transition-duration:.2s}.rhap_button-clear:active{opacity:.95}.rhap_button-clear:focus:not(:focus-visible){outline:0}.rhap_additional-controls{display:flex;flex:1 1 0px;align-items:center}.rhap_repeat-button,.rhap_shuffle-button{font-size:26px;width:30px;height:30px;color:var(--accent-color-lighter);margin-right:6px;border-radius:50%}.rhap_repeat-button.active,.rhap_shuffle-button.active{display:grid;place-items:center;background-color:var(--accent-color);border:2px solid var(--accent-color-light);color:var(--text-color)}.rhap_main-controls{flex:2 1 0px;display:flex;justify-content:center;align-items:center}.rhap_main-controls-button{margin:0 6px;color:var(--accent-color-lighter);width:30px;height:30px;transition:all .1s ease-in-out}.rhap_main-controls-button:hover{transform:scale(1.1)}.rhap_play-pause-button{display:grid;place-items:center;width:35px;height:35px;background-color:var(--accent-color);color:var(--text-color);border-radius:50%}.rhap_volume-controls{display:flex;flex:1 0 0px;justify-content:flex-end;align-items:center}.rhap_volume-button{flex:0 0 26px;font-size:26px;width:26px;height:26px;color:var(--accent-color-lighter);margin-right:10px}.rhap_volume-container{display:flex;align-items:center;flex:0 1 100px;user-select:none;-webkit-user-select:none}.rhap_volume-bar-area{display:flex;align-items:center;width:calc(100% - 12px);height:14px;margin:0 6px;cursor:pointer}.rhap_volume-bar-area:focus:not(:focus-visible){outline:0}.rhap_volume-bar{box-sizing:border-box;position:relative;width:100%;height:4px}.rhap_volume-bar:before{content:"";width:calc(100% + 12px);height:4px;background:var(--accent-color-light);border-radius:2px;position:absolute;left:-6px;top:0}.rhap_volume-indicator{box-sizing:border-box;position:absolute;width:12px;height:12px;margin-left:-6px;left:0;top:-4px;background:var(--accent-color);opacity:.9;border-radius:50px;border:1px solid var(--accent-color-lighter);box-shadow:rgba(var(--accent-color-lighter),.5) 0 0 3px;cursor:pointer}.rhap_volume-indicator:hover{opacity:1}.rhap_volume-filled{height:100%;position:absolute;z-index:2;background-color:var(--accent-color-lighter);border-radius:2px}.Modal{position:absolute;display:grid;place-items:center;z-index:100;left:0;top:0;width:100%;height:100%;padding:2rem;background-color:#0003;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.Modal div:first-child{width:100%;border:2px solid var(--accent-color-dark);border-radius:.75rem;background-color:#00000080}.Modal_login{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem}.Modal_login span{display:flex;align-items:center;gap:.5rem;padding:.5rem;font-size:.9rem;font-weight:500;border:1px solid var(--accent-color-dark);border-radius:.75rem}.Modal_login span svg{width:1rem;height:1rem}.ContextMenu{position:absolute;z-index:100;display:flex;flex-direction:column;gap:5px;padding:5px;background-color:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:2px solid var(--accent-color-dark);border-radius:.75rem;font-size:.8rem;font-weight:600}.ContextMenu_item{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;gap:5px;padding:5px;color:var(--text-color);border:2px solid var(--accent-color-dark);background-color:#00000080;border-radius:.25rem}.ContextMenu_item svg{color:var(--accent-color-lighter);width:1rem;height:1rem}.ContextMenu_item:hover .ContextMenu_child{display:flex}.ContextMenu_child{display:none;position:absolute;margin:0 5px;flex-direction:column;gap:5px;padding:5px;background-color:#00000080;border:2px solid var(--accent-color-dark);border-radius:.75rem}