@import"https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap";@import"https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&family=Great+Vibes&family=Kaushan+Script&family=Alex+Brush&display=swap";:root{--bottom-nav-bg-hover: #dfdfdf3b;--bottom-nav-color: #ffffff;--bottom-nav-animation: .5s;--modal-animation: .15s;--bottom-nav-z: 20;--modal-overlay-z: 15;--modal-bg-sm: #0e2136c6;--button-radius: .2rem;--button-padding: .2rem 0;--svg-animation-duration: 5s}.bottom-nav{position:fixed;bottom:0;left:0;width:100%;display:flex;align-items:center;z-index:var(--bottom-nav-z);animation:slideUpCurtain var(--bottom-nav-animation) ease-out forwards}.bottom-nav button{text-decoration:none;color:var(--bottom-nav-color);transition:background-color .3s ease-in,border-color .3s ease;background:transparent;display:flex;flex:1;padding:var(--button-padding);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--button-radius);border-top-right-radius:var(--button-radius);flex-direction:column;outline:none;cursor:pointer}.bottom-nav button:hover{background-color:var(--bottom-nav-bg-hover);color:var(--bottom-nav-color)}.bottom-nav svg{animation:colorShiftNav var(--svg-animation-duration) linear infinite}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation:slideUpCurtain var(--modal-animation) ease-out forwards}.modal-content{width:100%;border-radius:10px;overflow:hidden}@media screen and (max-width: 1000px){.modal-overlay{background-color:var(--modal-bg-sm);z-index:var(--modal-overlay-z)}}@keyframes slideUpCurtain{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes colorShiftNav{0%{color:#ff007f}10%{color:#f90}20%{color:#cf0}30%{color:#0f0}40%{color:#0ff}50%{color:#09f}60%{color:#60f}70%{color:#c0f}80%{color:#f0c}90%{color:#f03}to{color:#ff007f}}:root{--song-bg: #184475;--song-bg-active: linear-gradient(90deg, rgba(255, 0, 255, .8), rgba(0, 255, 255, .8));--song-border: rgba(170, 170, 170, .736);--song-border-active: #ffffff;--song-radius: 5px;--song-padding: 1.05rem;--song-margin: 5px 0;--song-shadow: 0 2px 4px rgba(0, 0, 0, .1);--song-transition: .3s ease-in-out;--song-title-font: .8rem;--song-title-margin: 0 2rem 0 3rem;--song-title-color-active: #ffffff;--drag-handle-width: 2.5rem;--drag-handle-height: 1.7rem;--drag-icon-size: 1rem;--context-bg: #232b3b;--context-color: #fff;--context-border-radius: 8px;--context-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .25);--context-padding: .3rem 0;--context-border: 1px solid #0eb085;--context-hover-bg: #0eb085;--context-font-size: 1rem;--context-animation-duration: .15s;--playlist-section-padding: 1rem;--playlist-section-border: 1px solid #ccc;--playlist-section-radius: 5px;--playlist-section-bg-desktop: #1734556f;--playlist-header-padding: 1rem 0;--playlist-header-gap: .4rem;--no-songs-font: 1.2rem;--no-songs-color: #fff;--song-gradient-animation-duration: 3s;--scrollbar-thumb-color: #07017d;--scrollbar-track-color: #fffdf3;--scrollbar-thumb-radius: 1rem;--scrollbar-thumb-hover-color: #a82626}.song-item{position:relative;padding:var(--song-padding);margin:var(--song-margin);background-color:var(--song-bg);border-radius:var(--song-radius);cursor:pointer;display:flex;align-items:center;justify-content:flex-start;box-shadow:var(--song-shadow);transition:background var(--song-transition);-webkit-user-select:none;user-select:none;border:var(--song-border) solid 1px}.song-item .song-title{margin:var(--song-title-margin);font-size:var(--song-title-font);flex-grow:1;text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.song-item.active{background:var(--song-bg-active);animation:gradientAnimationSong var(--song-gradient-animation-duration) infinite ease-in-out;color:var(--song-title-color-active);border:var(--song-border-active) solid 1px}.no-songs-message{font-size:var(--no-songs-font);color:var(--no-songs-color);text-align:center;margin-top:1rem}.trash-icon,.drag-handle{position:absolute;width:var(--drag-icon-size);height:var(--drag-icon-size)}.trash-icon{right:1rem}.drag-handle{left:.5rem;width:var(--drag-handle-width);height:var(--drag-handle-height);cursor:grab}.song-item.dragging{box-shadow:0 0 10px 5px #0ffc;z-index:2}.drag-handle:active{cursor:grabbing}.song-context-menu{position:relative;z-index:20;background:var(--context-bg);color:var(--context-color);border-radius:var(--context-border-radius);box-shadow:var(--context-box-shadow);padding:var(--context-padding);display:flex;flex-direction:column;animation:fadeInMenu var(--context-animation-duration);border:var(--context-border)}.song-context-menu button{background:none;border:none;color:inherit;text-align:left;padding:.7rem 1.2rem;font-size:var(--context-font-size);cursor:pointer;width:100%;transition:background .15s}.song-context-menu button:hover:not(:disabled),.song-context-menu button:focus:not(:disabled){background:var(--context-hover-bg);color:#fff}.song-context-menu button:disabled{opacity:.5;cursor:not-allowed}@keyframes fadeInMenu{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes gradientAnimationSong{0%,75%{background:linear-gradient(90deg,#ff6384b3,#36a2ebb3)}25%{background:linear-gradient(90deg,#ff9f40b3,#4bc0c0b3)}50%{background:linear-gradient(90deg,#4bc0c0b3,#9966ffb3)}}.playlist-section{padding:var(--playlist-section-padding);border:var(--playlist-section-border);border-radius:var(--playlist-section-radius);text-align:center}.playlist-header{display:flex;align-items:center;justify-content:center;padding:var(--playlist-header-padding);margin:.2rem 0;cursor:pointer;border:var(--playlist-section-border);gap:var(--playlist-header-gap)}.playlists-container{display:flex;justify-content:space-between;margin-top:25px}.playlist-section h3{font-size:1rem;padding:1rem;font-weight:700;border:1px dashed whitesmoke;margin-bottom:10px;color:#fff}ul{list-style-type:none;padding:0}h2{font-size:1.5rem;padding:.2rem;text-align:center;vertical-align:middle}@media (max-width: 1000px){.playlists-wrapper{position:relative;width:100%;height:50vh;overflow:hidden}.scroll-hint{position:absolute;top:1rem;left:1rem;background:#fffdf3;color:#07017d;padding:.3rem .6rem;font-size:.8rem;border-radius:.5rem;z-index:10;pointer-events:none;opacity:.8}.playlists-container{flex-direction:row;overflow-x:scroll;scroll-snap-type:x mandatory;width:100%;height:calc(100vh - 8rem);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;position:relative;scrollbar-width:2rem;scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color)}.playlists-container::-webkit-scrollbar{height:.4rem}.playlists-container::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.playlists-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-thumb-radius)}.playlist-section{scroll-snap-align:start;min-width:100%;height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color)}.playlist-section::-webkit-scrollbar{width:.3rem}.playlist-section::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.playlist-section::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-thumb-radius)}.song-item .song-title{margin:0 1rem 0 2rem;font-size:.7rem}.drag-handle,.trash-icon{width:1rem;height:1rem}.drag-handle{width:2rem;height:1.5rem}.trash-icon:active,.drag-handle:active{color:#e20087;transform:scale(1.3)}}@media (min-width: 1001px){.playlist-section{position:relative;height:100vh;width:30%;overflow-y:auto;scrollbar-width:wide;scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);background-color:var(--playlist-section-bg-desktop)}.no-songs-message-mobile{display:none}.drag-handle:hover,.trash-icon:hover{color:#e20087;transform:scale(1.3)}.playlist-section::-webkit-scrollbar{width:8px;height:8px}.playlist-section::-webkit-scrollbar-thumb{background-color:#888;border-radius:40px;border:2px solid #fff}.playlist-section::-webkit-scrollbar-track{background-color:#f1f1f1;border-radius:4px}.playlist-section::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color)}.song-item:hover{background-color:#0eb085}}:root{--add-song-max-width: 600px;--input-padding: 10px;--input-border-radius: 5px;--input-font-size: 16px;--input-border-color: #ccc;--input-focus-border: #337ab7;--search-results-bg: #8e9fbf3d;--search-results-padding: 10px;--search-results-border-radius: 10px;--search-results-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);--search-results-z: 10;--search-results-height: 40rem;--search-header-bg: #3379b7;--search-header-padding: 15px;--close-icon-color: #ff00ae;--close-icon-size: 2rem;--close-icon-hover-scale: 1.2;--close-icon-hover-transition: .3s;--search-item-padding: 10px;--search-item-border: 1px solid #ccc;--search-item-hover-bg: #f0f0f059;--search-item-button-bg: #007bff;--search-item-button-hover-bg: #000cb3;--search-item-button-active-bg: bisque;--search-item-button-active-color: #000cb3;--search-item-button-font: 12px;--search-item-button-height: 40px;--search-item-button-width: 80px;--search-item-button-transition: .3s;--thumbnail-width: 100px;--thumbnail-radius: 5px;--thumbnail-margin-right: 20px;--search-container-box-shadow: 0 4px 8px rgba(0, 0, 0, .035);--search-container-radius: 10px;--search-container-z: 10;--search-container-input-height: 40px;--search-container-input-padding: 15px;--search-container-input-font: 16px;--search-container-button-height: 40px;--search-container-button-padding: 2px 1.5rem;--search-container-button-font: 2rem;--search-container-button-bg: #007bff;--search-container-button-hover-bg: #000cb3;--empty-search-color: #337ab7;--search-title-font-size: 14px;--search-title-margin: 10px;--search-title-max-width: 60%;--search-title-overflow: hidden}.add-song{display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--add-song-max-width);margin:0 auto}.add-song input{width:100%;padding:var(--input-padding);border-radius:var(--input-border-radius);font-size:var(--input-font-size);border:1px solid var(--input-border-color);transition:border-color .3s ease}.add-song input:focus{border-color:var(--input-focus-border);outline:none}.search-results{position:relative;margin:20px auto;width:100%;height:var(--search-results-height);padding:var(--search-results-padding);border-radius:var(--search-results-border-radius);box-shadow:var(--search-results-box-shadow);background-color:var(--search-results-bg);overflow-x:hidden;overflow-y:visible;z-index:var(--search-results-z)}.search-results-header{display:flex;background:var(--search-header-bg);padding:var(--search-header-padding);border-radius:var(--search-results-border-radius);justify-content:space-between;align-items:center;margin-bottom:20px;position:sticky;top:0}.close-icon{cursor:pointer;color:var(--close-icon-color);font-size:var(--close-icon-size)}.close-icon:hover{color:var(--close-icon-color);transform:scale(var(--close-icon-hover-scale));transition:transform var(--close-icon-hover-transition) ease}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:var(--search-item-padding);border-bottom:var(--search-item-border);cursor:pointer;transition:background-color .3s ease}.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background-color:var(--search-item-hover-bg)}.search-result-item button{display:block;flex:0 0 auto;width:var(--search-item-button-width);min-width:var(--search-item-button-width);max-width:var(--search-item-button-width);height:var(--search-item-button-height);border:none;border-radius:var(--input-border-radius);font-size:var(--search-item-button-font);color:#fff;background:var(--search-item-button-bg);transition:transform var(--search-item-button-transition) ease,background-color var(--search-item-button-transition) ease}.search-result-item button:hover{background:var(--search-item-button-hover-bg);transform:translateY(-3px);cursor:pointer}.search-result-item button:active{background-color:var(--search-item-button-active-bg);color:var(--search-item-button-active-color)}.thumbnail{width:var(--thumbnail-width);height:auto;margin-right:var(--thumbnail-margin-right);border-radius:var(--thumbnail-radius)}.search-container{display:flex;flex-direction:row;align-items:center;width:100%;margin:0 auto;border-radius:var(--search-container-radius);box-shadow:var(--search-container-box-shadow);z-index:var(--search-container-z)}.search-container input{width:100%;height:var(--search-container-input-height);padding:var(--search-container-input-padding);font-size:var(--search-container-input-font)}.search-container input:focus{border-color:var(--input-focus-border);outline:none}.search-container button{height:var(--search-container-button-height);padding:var(--search-container-button-padding);font-size:var(--search-container-button-font);border:none;border-radius:var(--input-border-radius);color:#fff;background-color:var(--search-container-button-bg);cursor:pointer;transition:background-color .3s ease}.search-container button:hover{background-color:var(--search-container-button-hover-bg)}.empty-search{color:var(--empty-search-color);text-align:center}.search-result-title{display:block;margin:var(--search-title-margin);font-size:var(--search-title-font-size);max-width:var(--search-title-max-width);white-space:nowrap;overflow:var(--search-title-overflow);text-overflow:ellipsis}@media (max-width: 600px){.thumbnail{width:70px;height:auto;margin-right:5px}.search-results{width:100%;box-shadow:var(--search-results-box-shadow);background-color:var(--search-results-bg);overflow-x:hidden;overflow-y:visible}.search-result-item{font-size:10px}.search-result-item button{min-width:70px;max-width:70px;height:30px;font-size:8px}.search-result-title{max-width:40%;font-size:10px}}:root{--logo-font: "Kaushan Script", cursive, sans-serif;--logo-font-size: 1.4rem;--logo-font-weight: 700;--logo-gradient: linear-gradient(90deg, #ff0000, #ff9900, #33cc33, #3399ff, #cc33ff);--logo-bg-size: 500% 500%;--logo-animation-duration: 40s}.header-logo{position:absolute;text-align:center;cursor:pointer}.logo-text{font-family:var(--logo-font);font-size:var(--logo-font-size);font-weight:var(--logo-font-weight);background:var(--logo-gradient);background-size:var(--logo-bg-size);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:equalizerEffect var(--logo-animation-duration) linear infinite;display:flex;align-items:center;justify-content:center;flex-direction:row;text-align:center;vertical-align:middle;cursor:pointer;z-index:10}@keyframes equalizerEffect{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@media (max-width: 600px){.header-logo{position:relative;margin-bottom:1rem;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer}}:root{--color-text: #c3c3c3;--color-white: #fff;--color-active-fav: #ff028d;--color-active-state: #02ffb3;--color-shift-1: #ff90c0;--color-shift-2: #00eeff;--color-shift-3: #85baff;--color-shift-4: #d773ff;--color-shift-5: #00ffcc;--gap-controls: 1.2rem;--margin-controls: 3rem 0;--font-size-controls: 2.5rem;--font-size-icons: 1.5rem;--transition-fast: .3s;--transition-scale: .05s ease-in}.controls-container{display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.controls{display:flex;align-items:center;justify-content:center;gap:var(--gap-controls);color:var(--color-white);margin:var(--margin-controls)}.controls button{background:none;border:none;cursor:pointer;color:var(--color-text);transition:color var(--transition-fast),transform var(--transition-scale);font-size:var(--font-size-controls)}.controls button:active{transform:scale(.85)}.favorite-button.active{color:var(--color-active-fav)}.pause-icon.playing,.play-icon.playing{animation:colorShiftPause 5s linear infinite}.shuffle-button,.repeat-button,.fullscreen-button,.favorite-button{color:var(--color-text);transition:color var(--transition-fast);font-size:var(--font-size-icons)}.shuffle-button.active,.repeat-button.active{color:var(--color-active-state)}#shuffle,#repeat,#favorite,#fullscreen{font-size:var(--font-size-icons)}@keyframes colorShiftPause{0%{color:var(--color-shift-1)}25%{color:var(--color-shift-2)}50%{color:var(--color-shift-3)}75%{color:var(--color-shift-4)}to{color:var(--color-shift-5)}}@media (min-width: 601px){.controls{z-index:10}}:root{--title-container-gap: 1rem;--title-container-width-desktop: 35rem;--title-container-width-mobile: 100%;--title-shadow: 0 4px 8px rgba(0, 0, 0, .035);--title-name-color: #ffffff;--title-name-font-size-desktop: 1.5rem;--title-name-font-size-mobile: 1rem;--title-name-gap: 10px;--title-name-animation-duration-desktop: 5s;--title-name-animation-duration-mobile: 10s;--title-artist-color: #ffffff;--title-artist-font-size: 1rem;--title-artist-gap: 10px;--title-svg-size-desktop: 1.2em;--title-svg-size-mobile: 1em}.title-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:var(--title-container-width-desktop);gap:var(--title-container-gap);box-shadow:var(--title-shadow);overflow:hidden}.title-name{display:inline-flex;align-items:center;justify-content:center;gap:var(--title-name-gap);color:var(--title-name-color);text-align:center;white-space:nowrap;font-size:var(--title-name-font-size-desktop);animation:marquee var(--title-name-animation-duration-desktop) linear infinite}.title-artist{display:flex;align-items:center;justify-content:center;gap:var(--title-artist-gap);color:var(--title-artist-color);text-align:center;font-size:var(--title-artist-font-size)}.title-name svg,.title-artist svg{font-size:var(--title-svg-size-desktop);color:var(--title-name-color)}@keyframes marquee{0%{transform:translate(100%)}25%{transform:translate(50%)}50%{transform:translate(0)}75%{transform:translate(-50%)}to{transform:translate(-150%)}}@media (max-width: 600px){.title-container{width:var(--title-container-width-mobile)}.title-name{margin-top:1rem;font-size:var(--title-name-font-size-mobile);animation:marquee var(--title-name-animation-duration-mobile) linear infinite}.title-artist{font-size:var(--title-artist-font-size)}.title-name svg,.title-artist svg{font-size:var(--title-svg-size-mobile)}}@media (min-width: 601px){.title-container{width:var(--title-container-width-desktop)}}:root{--timing-bar-gap: 8px;--timing-bar-width-desktop: 35rem;--timing-bar-width-mobile: 100%;--progress-bar-height: 8px;--progress-bar-radius: 5px;--progress-bar-bg: #ddd;--progress-color: #2f4e9c;--progress-transition: width .2s ease-in-out;--seek-cursor-width: 10px;--seek-cursor-height: 10px;--seek-cursor-radius: 30%;--seek-cursor-animation-duration: 25s;--timing-info-font-size: 14px;--timing-info-color: #ddd}.timing-bar{display:flex;flex-direction:column;gap:var(--timing-bar-gap);width:30%;font-family:sans-serif;cursor:pointer}.progress-bar{position:relative;height:var(--progress-bar-height);border-radius:var(--progress-bar-radius);background-color:var(--progress-bar-bg);overflow:hidden;z-index:10;cursor:pointer}.progress{height:100%;background-color:var(--progress-color);transition:var(--progress-transition)}@keyframes cursorDance{0%{background-color:#ff90c0}25%{background-color:#0ef}50%{background-color:#4f9eff}75%{background-color:#d773ff}to{background-color:#0fc}}.seek-cursor{position:absolute;top:50%;left:0;width:var(--seek-cursor-width);height:var(--seek-cursor-height);transform:translate(-50%,-50%);border-radius:var(--seek-cursor-radius);pointer-events:none;animation:cursorDance var(--seek-cursor-animation-duration) infinite linear}.timing-info{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;font-size:var(--timing-info-font-size);color:var(--timing-info-color);white-space:nowrap;width:100%}@media (max-width: 600px){.time-bar-container,.timing-bar{width:var(--timing-bar-width-mobile)}}@media (min-width: 601px){.timing-bar,.timing-info{width:var(--timing-bar-width-desktop)}}:root{--body-bg: #282c34;--body-color: #333;--font-family: "Trebuchet MS", Arial, sans-serif;--youtube-border: rgba(255, 255, 255, .515);--youtube-radius: 15px;--youtube-radius-sm: 10px;--youtube-bg: #000000b5;--youtube-bg-size: 20px 20px;--music-player-color: #ffffff;--music-player-radius: 15px;--music-player-radius-sm: 10px;--music-player-padding: 15px;--music-player-padding-sm: 10px;--music-player-h2-font: 1.5rem;--music-player-h2-font-sm: 1.2rem;--youtube-max-width: 35rem}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}body{background-color:var(--body-bg);color:var(--body-color)}@keyframes gradientAnimation{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.youtube-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:100%;margin:1.5rem auto;border:1px solid var(--youtube-border);border-radius:var(--youtube-radius);overflow:hidden;background-color:var(--youtube-bg);background-size:var(--youtube-bg-size);background-repeat:no-repeat;background-position:bottom right;-webkit-user-select:none;user-select:none;z-index:5}.youtube-container .video-wrapper{width:100%;padding-top:56.25%;position:relative}.youtube-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:var(--youtube-radius)}.music-player{width:100%;color:var(--music-player-color);border-radius:var(--music-player-radius);transition:background .3s,color .3s}.music-player h2{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (min-width: 601px){.youtube-container{max-width:var(--youtube-max-width)}.music-player{padding:var(--music-player-padding);border-radius:var(--music-player-radius)}.music-player h2{font-size:var(--music-player-h2-font);padding:10px}}@media (max-width: 600px){.youtube-container{border-radius:var(--youtube-radius-sm)}.music-player{padding:var(--music-player-padding-sm) 0;border-radius:var(--music-player-radius-sm)}.music-player h2{font-size:var(--music-player-h2-font-sm)}}:root{--online-users-color: aliceblue;--online-users-font: 10px;--online-users-font-sm: 8px;--online-users-gap: 2px;--online-users-padding: 5px;--spinner-duration: 1s}.container-online-users{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;bottom:0;right:0;gap:var(--online-users-gap);padding:var(--online-users-padding);color:var(--online-users-color)}.loading-icon{animation:spinner-online var(--spinner-duration) linear infinite}.container-online-users h1,.loading-icon{font-size:var(--online-users-font);color:#fffffffa}@keyframes spinner-online{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 600px){.loading-icon,.container-online-users h1{font-size:var(--online-users-font-sm)}}html,body{margin:0;padding:0;box-sizing:border-box;overflow:hidden}