@import url("https://fonts.googleapis.com/css2?family=Rubik+Glitch+Pop&family=Silkscreen:wght@400;700&family=Ubuntu+Mono:wght@400;700&family=Tiny5&display=swap");@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=Stylish&display=swap");@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap");*{box-sizing:border-box}:root{--black: #3e3c41;--white: #fff;--gray: #575350;--slate: #f0f0f0;--light-slate: #f7f7f7;--mid-slate: #ccc;--dark-slate: #b9b8b8;--lime: #8dff65;--blue: #003aa5;--almond: blanchedalmond;--red: rgb(255, 71, 38);--border-width: 1.9px}.hidden{height:0;padding:0;margin:0 !important;opacity:0;border:none;pointer-events:none;transition:all 0.2s ease}html,body{overflow-x:hidden}html{overflow-y:scroll}body{margin:100px 0;font-family:"Ubuntu Mono", monospace;font-size:18px;line-height:24px;font-weight:400;color:var(--black);scroll-behavior:smooth}#flash{position:relative}section{padding:51px 0}.bg-gray{background-color:var(--slate)}.bg-black{background-color:var(--black);color:#615e66}.site-container{max-width:1400px;width:90%;margin:0 auto}.small-container{max-width:660px;margin-left:auto;margin-right:auto}.flexbox{display:flex;justify-content:center;gap:16px;text-align:left}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{border-radius:0px;background:var(--black);box-shadow:inset -1px -1px 2px #ffffff}::-webkit-scrollbar-thumb:hover{background:var(--slate)}@media (max-width: 768px){body{font-size:16px}}a{font-size:14px;font-weight:800;letter-spacing:1px;text-decoration:none;color:var(--blue)}.btn-container{display:flex;gap:16px;align-items:center}[disabled]{pointer-events:none}.btn{flex-shrink:0;display:inline-block;padding:8px 21px;border-radius:0;border:none;font-family:inherit;text-decoration:none;font-size:18px;font-weight:800;text-align:center;line-height:22px;color:inherit;background-color:var(--slate);white-space:nowrap;cursor:pointer;transition:transform 0.25s, background-color 0.25s}.btn:not(.link-btn):hover{background-color:var(--dark-slate)}.btn:active{transform:translateY(3px)}button,input[type=submit],textarea[type=submit]{padding:1px 6px;font:inherit;cursor:pointer;background-color:#f0f0f0;border:1px solid var(--black);border-radius:3px;background-image:none;color:inherit;transition:background-color 0.2s ease, transform 0.2s ease}button:hover,input[type=submit]:hover,textarea[type=submit]:hover{background-color:var(--dark-slate)}button:active,input[type=submit]:active,textarea[type=submit]:active{transform:translateY(3px)}.link-btn{background-color:transparent;border:none;padding:0;font:inherit;text-decoration:underline;cursor:pointer}.link-btn:hover{background-color:transparent}.button_to:has(.link-btn){display:inline}[class*=btn-]:not(.btn-container):before{content:"";mask-position:center;mask-repeat:no-repeat;background-color:var(--black)}.btn-trash:before{mask-image:url(/assets/trash-ac83e9ddadd728781b54c2485d117627db8bb58a37f469b484db406958ecaa81.svg)}.btn-edit:before{mask-image:url(/assets/pencil-cbd874d0828b5dc180bf177c81115608453dc721e80881a6854ca98ed4a79ae9.svg)}.btn-replace-image:before{mask-image:url(/assets/replace-image-e5e69c0d84354ec54a1752aeae8e066b03985b6964139360f9a6e88f33f4b592.svg)}.btn-add-user:before{mask-image:url(/assets/add-friend-bdc237ef74d1f78ca44f5fa4df42f6535401668b6a74d33bb10d587938577bb1.svg)}.btn-add-editor{margin-top:18px;background-color:transparent;border:none}.btn-add-editor:before{content:"+";margin-right:4px;background-color:transparent}.btn-add-editor:hover{background-color:transparent}.btn-play:before{mask-image:url(/assets/play-18b8e87d3d5f700f700bd02391950ceb0a4cc164c16476d8c136cd4394a5a137.svg)}.btn-load:before{mask-image:url(/assets/load-4b2aed4d86e683cd4c7b51ce33c7cbd225355c9e52d9f3b33461f0edf8002348.svg)}form.btn-trash:before{display:inline-block;width:21px;height:21px}.icon{display:inline-flex;padding:6px;border-radius:5px;border:none;background-color:var(--slate);transition:background-color 0.2s ease}.icon:before{mask-position:center;mask-repeat:no-repeat;background-color:var(--black);display:inline-block;height:21px;width:21px;flex:1 0 auto;text-align:center;transition:background-color 0.2s ease}.icon:hover{background-color:var(--dark-slate)}.icon:active{background-color:var(--gray)}.icon:active:before{background-color:#fff}.btn-trash{position:relative;display:flex;align-items:center}.btn-trash button[type=submit],.btn-trash input[type=submit],.btn-trash textarea[type=submit]{position:absolute;height:100%;width:100%;top:0;left:0;opacity:0;cursor:pointer}.add-track{display:inline-block}.add-track:before{content:"+";display:inline-block;margin-right:4px;transition:rotate 1s ease}.add-track:active:before{rotate:720deg}.card-container{margin:44px 0;display:grid;gap:16px;grid-template-columns:repeat(3, 1fr)}.horizontal{grid-template-columns:repeat(1, 1fr)}.horizontal .card{max-width:100%;flex-direction:row}.horizontal .card-image{height:unset;width:400px;max-width:25%}.horizontal .card .copy-area{height:auto;flex:1 0 0;padding:51px 44px;box-shadow:-10px 0 45px 5px var(--black)}.horizontal.overlap .card{margin-right:0;margin-bottom:-70px;box-shadow:0 -3rem 3rem -2rem var(--black);transition:margin-bottom 0.25s, rotate 0.25s, box-shadow 0.25s;will-change:margin-bottom, rotate, box-shadow}.horizontal.overlap .card:hover{margin-bottom:0;rotate:-1deg}.horizontal.overlap .card:hover+.card{box-shadow:0 -3rem 3.5rem -2.5rem var(--black)}.horizontal.overlap .card:last-of-type{margin-bottom:0}.emerge .card{width:90%;margin:auto;opacity:0;transition:all 0.25s ease}.emerge .card.visible{width:100%;opacity:1}.card{display:flex;flex-direction:column;min-width:280px;border-radius:24px;overflow:hidden;border:var(--border-width) solid var(--black);background-color:var(--white);color:var(--black);text-decoration:none}.card-image{width:100%;height:130px;object-fit:cover}.card .copy-area{height:100%;padding:21px 33px 33px;box-shadow:0 -10px 45px 5px var(--black)}.overlap .card{margin-right:-51px;box-shadow:-3rem 0 3rem -2rem var(--black);rotate:0deg;transition:margin-right 0.25s, box-shadow 0.25s, rotate 0.25s;will-change:margin-right, box-shadow, rotate}.overlap .card:first-of-type{box-shadow:none}.overlap .card:last-of-type{margin-right:0}.overlap .card:hover{margin-right:0;rotate:-4deg}.overlap .card:hover+.card{box-shadow:-3rem 0 4rem -3rem var(--black)}.pill{position:relative;display:inline-block;min-width:91px;padding:2px 12px;border:var(--border-width) solid var(--black);border-radius:20px;font-weight:600;color:var(--black);text-decoration:none;overflow:hidden}.pill:after{content:"";position:absolute;top:0;height:100%;width:100%;left:100%;background-color:var(--lime);transition:left 0.25s;z-index:-1}.pill:hover:after{left:0}.box{border:var(--border-width) solid var(--black);border-radius:13px;padding:33px}@media (max-width: 1050px){.card-container:not(.horizontal){grid-template-columns:repeat(2, 1fr)}}@media (max-width: 768px){.card-container:not(.horizontal){grid-template-columns:repeat(1, 1fr)}.card-container.horizontal .card .copy-area{padding:33px 28px}}@media (max-width: 480px){.card .copy-area{padding:18px 25px}.card-container.horizontal .card{flex-direction:column}.card-container.horizontal .card-image{max-width:100%;height:130px}.card-container.horizontal .card .copy-area{padding:25px;text-align:center}}.editor{display:flex;gap:4px;align-items:center}input:not([type=range]):not([type=file]):not([type=checkbox]),textarea:not([type=range]):not([type=file]):not([type=checkbox]){appearance:none;padding:12px;border-radius:0;border:1.2px solid var(--gray);font-size:16px;font-family:inherit;transition:background-color 0.2s ease}input:not([type=range]):not([type=file]):not([type=checkbox])::placeholder,textarea:not([type=range]):not([type=file]):not([type=checkbox])::placeholder{color:var(--gray)}input:not([type=range]):not([type=file]):not([type=checkbox]):focus,textarea:not([type=range]):not([type=file]):not([type=checkbox]):focus{outline:none}input:not([type=submit]):not([type=range]),textarea:not([type=submit]):not([type=range]){margin-bottom:16px}input:not([type=submit]):not([type=range]):not([type=checkbox]),textarea:not([type=submit]):not([type=range]):not([type=checkbox]){width:100%}input[type=submit],textarea[type=submit]{margin-top:21px;padding:1px 6px !important}input[type=file],textarea[type=file]{display:block}textarea{width:100%}.input-add-image{position:relative;height:200px;width:200px;margin-bottom:16px;border-radius:12px;border:2px dashed var(--black);background-image:url(/assets/image-2f3fe5520d4e9a85599d78919e2155c6f9750f59653580c347ed64a92201d86b.svg);background-size:51px;background-repeat:no-repeat;background-position:center;overflow:hidden}.input-add-image input[type=file],.input-add-image textarea[type=file]{opacity:0;position:absolute;height:100%;width:100%;top:0;left:0;cursor:pointer}.input-add-image .output{position:absolute;top:50%;left:50%;max-height:100%;max-width:100%;pointer-events:none;transform:translate(-50%, -50%)}.input-add-image .output:not([src=""]){background-color:#fff}form{position:relative;max-width:500px}form label{display:inline-block;margin-bottom:6px}form.button_to{max-width:max-content}form button.fill,form input.fill[type=submit],form textarea.fill[type=submit]{position:absolute;width:100%;height:100%;top:0;left:0;background-color:transparent;border:none}form .actions{margin-bottom:28px}form .honeypot{position:absolute;visibility:hidden;left:-5000px;top:-5000px}.searchbox{display:flex;flex-direction:row;gap:0}.searchbox input:not([type=submit]),.searchbox textarea:not([type=submit]){width:auto;margin-bottom:0;background-color:var(--light-slate);transition:background-color 0.2s ease}.searchbox input:not([type=submit]):focus,.searchbox textarea:not([type=submit]):focus{background-color:transparent}.searchbox input:not([type=submit])+input[type=submit],.searchbox textarea:not([type=submit])+input[type=submit],.searchbox input:not([type=submit])+textarea[type=submit],.searchbox textarea:not([type=submit])+textarea[type=submit]{border-left:none}.searchbox input[type=submit],.searchbox textarea[type=submit]{margin-top:0;border:var(--border-width) solid var(--black)}.searchbox input[type=submit]:active,.searchbox textarea[type=submit]:active{background-color:var(--mid-slate);transform:none}.form-togglable{margin-bottom:33px}#youtube-player{position:fixed;top:0;left:0;height:100%;width:100%;opacity:0;pointer-events:none}#mediaplayer{position:fixed;width:100%;bottom:0}#media-player{position:relative;padding-bottom:21px;background-color:var(--slate);z-index:2}#media-player marquee:has(#track-title:empty){visibility:hidden}#media-player button,#media-player input[type=submit],#media-player textarea[type=submit]{min-width:0;border:none;background-color:transparent;line-height:1}#media-player button svg path,#media-player input[type=submit] svg path,#media-player textarea[type=submit] svg path{transition:fill 0.2s ease}#media-player button:active svg path,#media-player input[type=submit]:active svg path,#media-player textarea[type=submit]:active svg path{fill:var(--lime)}#media-player .controls button.active svg path,#media-player .controls input.active[type=submit] svg path,#media-player .controls textarea.active[type=submit] svg path{fill:var(--blue)}#media-player .range-container{flex:1;align-items:center}#media-player .range-container #range{-webkit-appearance:none;appearance:none;flex:1;height:1px;background:var(--mid-slate);cursor:pointer}#media-player .range-container #range::-ms-thumb,#media-player .range-container #range::-webkit-slider-thumb,#media-player .range-container #range::-moz-range-thumb{display:none;-webkit-appearance:none;appearance:none;width:8px;height:8px;border-radius:50%;background:var(--black) !important;box-shadow:none}#media-player .range-container #range:hover::-webkit-slider-thumb,#media-player .range-container #range:hover::-moz-range-thumb{display:block}#media-player .range-container #range:focus{outline:none}#media-player .range-container .current-time-container{font-size:14px}.queue-container{position:absolute;bottom:100%;width:100%;transform:translateY(100%);transition:transform 0.2s ease}.queue-container:has(.queue:empty){display:none}.queue-container.active{transform:none}.queue-container.active .toggle:before{content:attr(data-expanded)}.queue-container .toggle{position:absolute;right:10%;bottom:100%;border-color:var(--slate);border-bottom:none;color:var(--gray);background-color:var(--light-slate)}.queue-container .toggle:before{content:attr(data-collapsed)}.queue-container .toggle:focus{outline:none}.queue-container .toggle:active{transform:none}.queue-container .queue{display:flex;flex-direction:column;background-color:var(--light-slate)}.queue-container .queue .play-tracks{flex:1 0 auto;padding:6px calc((100% - min(1440px, 90vw)) / 2);border-top:1px solid var(--slate);transition:background-color 0.2s ease}.queue-container .queue .play-tracks:hover{background-color:var(--slate) !important}.queue-container .queue .play-track-wrapper{display:flex;align-items:center}.queue-container .queue .play-track-wrapper.active{animation:glow 1.5s infinite alternate ease}.queue-container .queue .play-track-remove{appearance:none;position:absolute;right:6px;border:none;background-color:transparent}.queue-container .queue .play-track-remove:before{content:"+";display:inline-block;font-size:31px;rotate:45deg}@keyframes glow{from{background-color:rgba(255,255,255,0.54902)}to{background-color:rgba(255,255,255,0.87451)}}.site-nav{position:fixed;max-width:1300px;width:80%;top:16px;left:50%;padding:21px 0;background-color:rgba(255,255,255,0.811765);border-radius:16px;backdrop-filter:blur(40px);font-size:18px;font-weight:600;transform:translateX(-50%);z-index:999}.site-nav .hamburger{display:none;position:relative;width:28px;height:22px;appearance:none;background-color:transparent;border:none;overflow:hidden;cursor:pointer}.site-nav .hamburger .line{position:absolute;left:0;height:2px;width:100%;background-color:var(--black);transition:transform 0.2s ease}.site-nav .hamburger .line:nth-child(1){top:0}.site-nav .hamburger .line:nth-child(2){top:calc(50% - 1px)}.site-nav .hamburger .line:nth-child(3){bottom:0}.site-nav .hamburger:before{content:"+";display:block;font-size:30px;line-height:0;rotate:45deg;transform:translate(-22px, -22px);transition:transform 0.2s ease}.site-nav .hamburger.active .line{transform:translateY(22px)}.site-nav .hamburger.active:before{transform:none}.site-nav .site-container{display:flex;gap:24px;align-items:center}.site-nav .menu-item svg{transition:rotate 0.2s ease}.site-nav .menu-item .notification-count{transition:all 0.2s ease}.site-nav .menu-item.active{position:relative}.site-nav .menu-item.active svg{rotate:20deg}.site-nav .menu-item.active .notification-count{min-width:12px;height:12px;padding:0 2px;position:absolute;top:0px;right:-7px;display:flex;justify-content:center;align-items:center;border-radius:12px;background-color:var(--red);color:#fff;font-size:11px;z-index:1}.site-nav .menu-item:not(.btn):not(form){position:relative;color:inherit;text-decoration:none;border-bottom:0 solid var(--blue);transition:border-bottom-width 0.25s}.site-nav .menu-item:not(.btn):not(form):hover{border-bottom-width:2px}.site-nav .menu-item:not(.btn):not(form):not(:first-of-type):before{content:"//";position:absolute;top:50%;left:-18px;transform:translateY(-50%)}.site-nav .home{margin-right:auto}footer{padding:33px 0 38px}.pagination{position:fixed;width:90%;max-width:1440px;left:50%;bottom:102px;padding:12px;display:flex;justify-content:center;gap:12px;border-radius:16px;background-color:rgba(255,255,255,0.811765);backdrop-filter:blur(40px);transform:translateX(-50%)}.pagination>:is(.prev, .next, .first, .last){position:absolute}.pagination .first{left:6px}.pagination .prev{left:78px}.pagination .next{right:78px}.pagination .last{right:6px}.pagination .page.current{text-decoration:underline}.pagination .page a{font-size:inherit}@media (max-width: 768px){.site-nav{position:fixed;top:0;width:100%;border-bottom:var(--border-width) solid;border-radius:0}.site-nav .hamburger{display:block}.site-nav .site-nav-inner{position:absolute;top:65px;width:100%;height:100dvh;background-color:#fff;transform:translateX(-100%);transition:transform 0.2s ease}.site-nav .site-nav-inner .site-container{display:block;width:100%}.site-nav .site-nav-inner.active{transform:none}.site-nav .menu-item{display:block;width:100%;padding:12px 5%;font-weight:500;font-size:16px;border-top:1px solid var(--slate) !important;border-bottom:none !important;transition:background-color 0.2s ease}.site-nav .menu-item:before{content:none !important}.site-nav .menu-item:hover{background-color:var(--slate) !important}.site-nav .menu-item.active{display:flex;flex-direction:row-reverse;justify-content:flex-end}.site-nav .menu-item.active .notification-count{position:relative;right:unset}.site-nav .menu-item .btn,.site-nav .menu-item.btn{background-color:transparent;border:none;text-align:left}.site-nav .menu-item .btn:hover,.site-nav .menu-item.btn:hover{color:initial}.site-nav .menu-item .btn{padding:0;font:inherit}}.notification-container{display:flex;flex-direction:column}.notification{display:flex;align-items:center;padding:4px 0;border-top:1px solid var(--slate)}.notification .btn-read{flex-shrink:0;margin-right:6px}.notification .preview{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notification .btn-trash{margin-left:auto}.playlist.full .copy-area{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.playlist.full .playlist-actions{display:flex;gap:4px}.playlist.full .flexbox .pull-left{flex:1 0 360px;overflow:hidden}.playlist.full .flexbox .pull-left .playlist-title{overflow:hidden;text-overflow:ellipsis}.playlist.full .flexbox .pull-right{flex:0 0 calc(100% - 360px);width:calc(100% - 360px)}.playlist.full .flexbox .playlist-image{position:fixed;height:100%;width:100%;top:0;left:0;z-index:-1;opacity:0.1;object-fit:cover}.playlist.full .playlist-actions{display:flex;gap:6px}.playlist.full .play-tracks{margin-right:auto}.playlist-likes{display:inline-flex;gap:3px;font-family:monospace;font-size:12px}.playlist .heart{font-family:system-ui;font-size:25px;text-decoration:none}.playlist .heart:hover{background-color:transparent}.playlist .heart:active{transform:none}.playlist-likers{position:absolute}.playlist-track{margin:21px 0}@media (max-width: 768px){.playlist.full .flexbox{flex-direction:column;gap:44px}.playlist.full .flexbox .pull-left,.playlist.full .flexbox .pull-right{flex-basis:auto}.playlist.full .flexbox .pull-right{width:auto}}.slider-wrapper{flex-wrap:wrap;justify-content:flex-start;gap:51px}.slider-container{position:relative;display:flex;flex-direction:column;min-width:300px;margin:69px 0}.slider-container.box{padding:0}.slider-container.box .slider-container-headline{margin-bottom:12px;padding:33px 33px 0 33px}.slider-container.box .slider{padding:33px}.slider{display:flex;width:100%;flex-wrap:nowrap;padding:30px 0;justify-content:flex-start;overflow-y:hidden;overflow-x:scroll !important;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}.slider::-webkit-scrollbar{display:none}.slider .card{max-width:300px}.slider-nav{position:absolute;bottom:calc(100% + 33px);display:flex;gap:11px}.slider-nav .control{display:flex;justify-content:center;align-items:center;height:50px;width:50px;border:var(--border-width) solid var(--black);border-radius:50%;transition:border-color 0.25s}.slider-nav .control:before{content:"";border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid var(--black);transition:border-color 0.25s}.slider-nav .control.prev{rotate:180deg}.slider-nav .control:hover{border-color:var(--lime)}.slider-nav .control:hover:before{border-left-color:var(--lime)}@media (max-width: 480px){.slider-nav{bottom:calc(100% + 18px)}.slider-container-headline{margin-bottom:0}}.track{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--slate);font-size:14px;line-height:20px;color:var(--gray)}.track:first-of-type{border-top:1px solid var(--slate)}.track .play-tracks{position:relative;padding:12px 0;overflow:hidden}.track-title{margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.track-move{margin-left:auto;height:30px;width:30px}.track .btn-trash{margin-left:12px}.track .added-by{margin-left:12px}.track .search-related,.track .added-by{flex-shrink:0}#sortable-tracklist .track{cursor:pointer}#sortable-tracklist .track:before{content:url(/assets/grab-f6c203d032f56df88faefa632b7394e83bbc486143ad480ca367733fa6ad469a.svg);flex-shrink:0;padding-right:21px;height:14px;width:14px;pointer-events:none}.playlist-tags{display:flex;justify-content:flex-start;flex-wrap:wrap}.tag{display:flex;align-items:center}h1,h2,h3,h4,h5,h6{font-family:"Silkscreen", sans-serif;font-weight:100;margin:0 0 24px}.emphasis-text{font-family:"Rubik Glitch Pop", system-ui}.text-left{text-align:left}.notice,.alert{position:fixed;top:94px;width:100%;text-align:center;opacity:0}.notice:not(:empty),.alert:not(:empty){animation:alert ease 6s forwards}@keyframes alert{0%,100%{opacity:0}20%,50%{opacity:1}}.users{margin-top:38px}.users .user{display:flex;align-items:center;gap:18px;padding:6px 0;font-size:16px;border-bottom:1px solid var(--slate)}.users .user p{margin:0}.users .user .col{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.users .user-username{flex-shrink:0;width:300px}.users .user-popular-playlist{margin-left:auto !important}@media (max-width: 900px){.users .user{flex-direction:column;align-items:flex-start;gap:12px;padding:12px 0}.users .user-popular-playlist{margin-left:0 !important}}#intro{padding:102px 0;text-align:center}.tags{flex:0 0 250px}.slider-container{padding-right:0}.tags+.slider-container{flex:1 0 0}@media (max-width: 560px){#intro{padding:88px 0}}@media (max-width: 480px){#intro{text-align:left;padding:60px 0 38px}}#about{padding-bottom:91px}.user-profile-header{justify-content:space-between;align-items:center}.user-profile-header .pull-left{text-align:left}.user-profile-header .pull-right{text-align:right}.break{display:block}.break:after{content:" ";display:inline-block;width:1rem}.mt-33{margin-top:33px}@media screen and (max-width: 768px){.break{display:inline-block}.break:after{content:" ";display:inline-block;width:1rem}}