.app{position:relative;width:100%;padding-bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.app .playlist-container-0 .playlist-container__header{padding-top:0vh}.playlist-container{position:relative;width:100%;max-width:100vw;min-height:50vh;height:auto;z-index:2;background-color:#f7f2f2;display:flex;flex-direction:column;align-items:center;justify-content:center}.playlist-container__header{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-x:hidden;padding-top:15vh;margin-bottom:-150px}.playlist-container__header__icon{width:400px;max-width:100%;aspect-ratio:1/1;height:auto;overflow:hidden;object-fit:contain}.playlist-container__header__inner{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:20px;gap:20px}.playlist-container__header p{color:#4682e3;font-family:Doto,sans-serif;font-weight:600;margin:0;white-space:nowrap}.playlist-container__header .separator{position:relative;width:5px;height:5px;background-color:#4682e3}.playlist-container__items{position:relative;width:100%;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:1000px;perspective-origin:top center}.playlist-container__items-virtual{-webkit-overflow-scrolling:touch;height:100vh;overflow-y:scroll}@media (max-width: 768px){.playlist-container{width:100%;padding-bottom:0}.playlist-container__header{padding-top:0vh;margin-bottom:0}.track-image{width:100%}.track-image img{width:50%}}.playlist-item{position:absolute;display:flex;flex-direction:column;align-items:flex-start;border-radius:8px;padding:20px;transition:transform .15s ease-in-out;transform-origin:top center;gap:20px}.playlist-item__wrapper{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.playlist-item.playing{position:absolute!important;z-index:100;transform:scale(1.02);transform:translateY(-350px)!important}.playlist-item.playing .playlist-item__details{opacity:1}.playlist-item.playing .playlist-item__info .demo-oscillator{width:14px;height:20px}.playlist-item.playing .playlist-item__info .playlist-item__info__title{gap:10px}.playlist-item.selected{transform:translateY(-350px) scale(1)}.playlist-item.selected .playlist-item__details{opacity:1}.playlist-item.selected .playlist-item__image img{filter:saturate(1)}.playlist-item.selected .playlist-item__details .playlist-item__info,.playlist-item.selected .playlist-item__details .playlist-item__controls,.playlist-item.playing .playlist-item__details .playlist-item__info,.playlist-item.playing .playlist-item__details .playlist-item__controls{opacity:1;transform:translateY(0)}.playlist-item.selected .playlist-item__image img,.playlist-item.playing .playlist-item__image img{filter:saturate(1)}.playlist-item__details{width:105%;display:flex;flex-direction:column;align-items:flex-start;gap:20px;z-index:3;background:linear-gradient(75deg,#e6e6e6 7%,#f7f2f2);border-radius:6px;box-shadow:0 0 1px #03071200,0 1px 2px #03071203,0 3px 6px #03071203,0 5px 10px #03071203,0 8px 16px #03071203,0 11px 22px #03071205,0 15px 30px #03071205,0 20px 40px #03071205,0 25px 50px #03071208,0 31px 62px #03071208;border:1px solid rgba(255,255,255,.262745098);padding:15px;overflow:hidden;opacity:0}.playlist-item__info{border-radius:6px;flex:1;width:100%;opacity:0;transform:translateY(10px);transition:opacity .3s ease-in-out,transform .3s ease-in-out;display:flex;flex-direction:column;gap:10px;overflow-x:hidden}.playlist-item__info .demo-oscillator{width:0;height:0;flex-shrink:0;transition:width .4s ease-in-out,height .4s ease-in-out}.playlist-item__info__title{font-size:16px;font-family:SF Pro Text,sans-serif;color:#242424;font-weight:300;max-width:100%;white-space:nowrap;mix-blend-mode:difference;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:0;transition:gap .4s ease-in-out}.playlist-item__info__title p{margin:0}.playlist-item__info__artists{max-width:40ch;font-family:Doto,sans-serif;font-size:15px;color:#4682e3;margin:0;font-weight:600}.playlist-item__controls{width:100%;flex:1;flex-grow:1;flex-shrink:0;position:relative;z-index:100;opacity:0;transform:translateY(10px);transition:opacity .3s ease-in-out,transform .3s ease-in-out;transition-delay:.1s}.playlist-item__controls .active-player{width:100%;border-radius:600px;overflow:hidden;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:1rem}.playlist-item__controls .active-player .play-button{background:#f7f2f2;border:none;outline:none;cursor:pointer;margin:0;height:37.5px;width:37.5px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px #0000001a;border-radius:50%;aspect-ratio:1/1;position:relative;isolation:isolate;height:100%;padding:7.5px}.playlist-item__controls .active-player .play-button svg{width:100%;height:100%;color:#f7f2f2}.playlist-item__controls .active-player .play-icon-path{fill:#000}.playlist-item__controls .active-player .pause-button{background:#f7f2f2;border:none;outline:none;cursor:pointer;margin:0;height:37.5px;width:37.5px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px #0000001a;border-radius:50%;aspect-ratio:1/1;height:100%;padding:7.5px}.playlist-item__controls .active-player .pause-button svg{width:100%;height:100%;color:#000}.playlist-item__controls .active-player{width:100%;flex:1;flex-grow:1;flex-shrink:0;display:flex;flex-direction:row;gap:10px}.playlist-item__controls .active-player span{font-size:15px;font-family:Doto,sans-serif;color:#242424;margin:0;font-weight:300;white-space:nowrap}.playlist-item__controls .active-player input{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1rem}.playlist-item__controls .active-player input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;position:relative;transform:translateY(-4px);margin-top:auto;margin-bottom:auto;top:0;bottom:0;border-radius:50%;height:10px;width:10px;background:#4682e3}.playlist-item__controls .active-player input::-moz-range-thumb{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;position:relative;transform:translateY(-4px);margin-top:auto;margin-bottom:auto;top:0;bottom:0;border-radius:50%;height:10px;width:10px;background:#4682e3}.playlist-item__controls .active-player input::-ms-thumb{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;position:relative;transform:translateY(-4px);margin-top:auto;margin-bottom:auto;top:0;bottom:0;border-radius:50%;height:10px;width:10px;background:#4682e3}.playlist-item__controls .active-player input::-webkit-slider-runnable-track{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;height:1.5px;width:100%;background:#4682e3}.playlist-item__controls .active-player input::-moz-range-track{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;height:1.5px;width:100%;background:#4682e3}.playlist-item__controls .active-player input::-ms-track{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;height:1.5px;width:100%;background:#4682e3}.playlist-item__controls .seeker-bar{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;gap:1rem;position:relative;isolation:isolate;padding:10px;border-radius:600px}.playlist-item__image{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1019607843);border-radius:4px;padding:.5rem;width:500px}.playlist-item__image img{width:100%;height:auto;object-fit:cover;flex-shrink:0;border-radius:4px;filter:saturate(1)}@media (max-width: 768px){.playlist-item{transform:translateY(-150px)}.playlist-item__wrapper{flex-direction:column;gap:.5rem}.playlist-item__image,.playlist-item__image img{width:100%}.playlist-item.selected:hover{transform:scale(1);transform:translateY(-350px)!important;opacity:1}.playlist-item__details{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.5rem}}@media (max-width: 768px){.playlist-item,.playlist-item__image{width:100%}.playlist-item__image img{filter:saturate(1)}}.oscilloscope{width:0;opacity:0;height:100%;display:flex;align-items:center;justify-content:space-between;gap:2px;overflow:hidden}.oscilloscope__bar{width:3px;height:100%;background-color:#4682e3;transform-origin:center;transform:scaleY(.5)}.footer{position:absolute;width:100%;height:50vh;inset:82.5% 0 0;z-index:9999}@media (max-width: 768px){.footer{position:absolute;width:100%;height:30vh;bottom:0;left:0;right:0;z-index:9999}}.header{position:fixed;top:10px;left:10px;right:10px;width:calc(100vw - 20px);max-width:calc(100vw - 20px);height:50px;z-index:3;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;padding:15px;background-color:#bfbfbf1f;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.262745098);border-radius:500px;overflow:hidden}.header.native-app{margin-top:calc(5px + env(safe-area-inset-top))}.header__button{height:30px;padding:5px;background-color:transparent;border:none;cursor:pointer;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:50%}.header__button svg{width:100%;height:auto}.header__button.menu{opacity:0;display:none}.header__login-info{font-family:SF Pro Text,sans-serif;font-size:13px}.header__title{padding:110px 20px 20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px;position:relative;height:100%;width:100%}.header__title #playlist-select{width:calc(100% - 2px);padding:10px}.header p{margin:0}.header__title__title{font-size:29.85984px}.header__title__subtitle{color:#4682e3;font-family:Doto,sans-serif;font-size:17.28px}.hero-section{position:relative;width:100%;height:100%;min-height:40vh;padding:90px 20px 20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px}.hero-section.native-app{padding-top:calc(90px + env(safe-area-inset-top))}.hero-section p{margin:0}.hero-section__title{font-family:SF Pro Text,sans-serif;font-size:35.831808px;font-weight:300}.hero-section__subtitle{color:#4682e3;font-weight:600;font-family:Doto,sans-serif;font-size:20.736px}.global-player{position:fixed;bottom:10px;left:10px;right:10px;width:calc(100% - 20px);height:auto;opacity:1;pointer-events:none;z-index:1000;overflow:visible;display:flex;align-items:flex-end;justify-content:flex-start}.global-player.visible{opacity:1;pointer-events:auto}.global-player__container{width:45px;height:45px;margin-left:0;margin-right:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:10px;background:linear-gradient(75deg,#e6e6e6 7%,#f7f2f2);box-shadow:0 0 1px #03071200,0 1px 2px #03071203,0 3px 6px #03071203,0 5px 10px #03071203,0 8px 16px #03071203,0 11px 22px #03071205,0 15px 30px #03071205,0 20px 40px #03071205,0 25px 50px #03071208,0 31px 62px #03071208;border:1px solid rgba(255,255,255,.262745098);padding:10px;border-radius:500px;overflow:hidden;max-width:100%}.global-player__track,.global-player .player-controls{opacity:0;transition:all .3s ease;scale:0;overflow:hidden}.global-player.playing .global-player__track,.global-player.playing .player-controls{opacity:1;height:auto;width:100%;scale:1;max-height:100px}.global-player__track{position:relative;width:100%;display:flex;align-items:center}.global-player__track-info{width:100%;display:flex;flex-direction:column;gap:10px;border-radius:6px;flex:1 1 auto;min-width:0}.global-player__track-info__title{display:flex;align-items:center;gap:10px}.global-player__track-info .demo-oscillator{width:14px;height:20px;flex-shrink:0}.global-player__track-info p{margin:0}.global-player__track-name{width:100%;font-size:16px;font-family:SF Pro Text,sans-serif;color:#242424;font-weight:300;white-space:normal;overflow-wrap:anywhere}.global-player__track-artists{font-family:Doto,sans-serif;font-size:15px;color:#4682e3;margin:0;font-weight:600;white-space:normal;overflow-wrap:anywhere}.global-player .player-controls{position:relative;width:100%;height:35px;border-radius:600px}.global-player .player-controls .play-button,.global-player .player-controls .pause-button{background:#f7f2f2;border:none;outline:none;cursor:pointer;margin:0;height:37.5px;width:37.5px;display:flex;align-items:center;justify-content:center;padding:8px;box-shadow:0 0 10px #0000001a;border-radius:50%;aspect-ratio:1/1;height:35px}.global-player .player-controls{width:100%;flex:1;flex-grow:1;flex-shrink:0;display:flex;flex-direction:row;gap:10px}.global-player .player-controls span{font-size:15px;font-family:Doto,sans-serif;color:#242424;margin:0;font-weight:300;white-space:nowrap}.global-player .player-controls input{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1rem}.global-player .player-controls input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;position:relative;transform:translateY(-4px);margin-top:auto;margin-bottom:auto;top:0;bottom:0;border-radius:50%;height:10px;width:10px;background:#4682e3}.global-player .player-controls input::-moz-range-thumb{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;position:relative;transform:translateY(-4px);margin-top:auto;margin-bottom:auto;top:0;bottom:0;border-radius:50%;height:10px;width:10px;background:#4682e3}.global-player .player-controls input::-ms-thumb{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;position:relative;transform:translateY(-4px);margin-top:auto;margin-bottom:auto;top:0;bottom:0;border-radius:50%;height:10px;width:10px;background:#4682e3}.global-player .player-controls input::-webkit-slider-runnable-track{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;height:1.5px;width:100%;background:#4682e3}.global-player .player-controls input::-moz-range-track{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;height:1.5px;width:100%;background:#4682e3}.global-player .player-controls input::-ms-track{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;cursor:pointer;height:1.5px;width:100%;background:#4682e3}.global-player__icon{opacity:1!important;position:absolute;bottom:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:500px}.player-controls{display:flex;align-items:center;gap:1rem}.player-controls .seeker-bar{display:flex;align-items:center;gap:.5rem;width:100%}.player-controls .seeker-bar input[type=range]{width:100%}.loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .3s ease-in-out}.loader__content{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.loader__spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.1);border-top-color:#fffc;border-radius:50%;animation:spin 1s linear infinite}.loader__text{color:#fffc;font-family:SF Pro Text,sans-serif;font-size:1.2rem;font-weight:400;letter-spacing:.05em}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@font-face{font-family:Spline Sans;src:url(../assets/fonts/SplineSans_Complete/WEB/fonts/SplineSans-Regular.woff2) format("woff2"),url(../assets/fonts/SplineSans_Complete/WEB/fonts/SplineSans-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Spline Sans;src:url(../assets/fonts/SplineSans_Complete/WEB/fonts/SplineSans-Medium.woff2) format("woff2"),url(../assets/fonts/SplineSans_Complete/WEB/fonts/SplineSans-Medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Spline Sans;src:url(../assets/fonts/SplineSans_Complete/WEB/fonts/SplineSans-SemiBold.woff2) format("woff2"),url(../assets/fonts/SplineSans_Complete/WEB/fonts/SplineSans-SemiBold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Spline Sans;src:url(../assets/fonts/SplineSans_Complete/WEB/fonts/SplineSans-Bold.woff2) format("woff2"),url(../assets/fonts/SplineSans_Complete/WEB/fonts/SplineSans-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Spline Sans;src:url(../assets/fonts/SplineSans_Complete/WEB/fonts/SplineSans-Light.woff2) format("woff2"),url(../assets/fonts/SplineSans_Complete/WEB/fonts/SplineSans-Light.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Doto;src:url(/assets/Doto-VariableFont_ROND_wght-uOPVUPBa.ttf) format("truetype-variations");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:DotGothic16;src:url(/assets/DotGothic16-Regular-DNCu-K7w.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}#root{width:100%;height:100%;background-color:#f7f2f2}body{margin:0;padding:0}html{overflow-x:hidden;margin:0;padding:0;background-color:#f7f2f2}*{box-sizing:border-box}