*,*::after,*::before{margin:0;padding:0;box-sizing:border-box;font:inherit}a{font:inherit;color:inherit;text-decoration:none}button{background-color:unset;border:unset}a,button{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;outline:none;-webkit-touch-callout:none}a:focus-visible,button:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}body{font-family:inter,sans-serif;background-color:#0d0f12;color:#fff;min-height:100vh}.hide-scroll::-webkit-scrollbar{display:none}.hide-scroll{-ms-overflow-style:none;scrollbar-width:none}.hide{display:none}.header{height:3rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #16191d;padding-inline:1rem;position:sticky;top:0;left:0;right:0;background-color:#0d0f12;z-index:100}.header__btn{background-color:#f1f3f5;padding:.3rem .5rem;border-radius:.3rem;font-size:.7rem}.last-release{margin-inline:1rem;margin-top:1rem;position:relative;height:14rem;border-radius:.5rem}.last-release__cover{position:absolute;inset:0;z-index:0}.last-release__cover>img{object-fit:cover;width:100%;height:100%;border-radius:.5rem}.last-release__cover::before{position:absolute;inset:0;content:"";background:linear-gradient(to bottom,transparent,#0d0f12);border-radius:.5rem}.last-release__content{position:relative;height:100%;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between}.last-release__content__label{font-size:.5rem;text-transform:uppercase}.last-release__content__meta{display:flex;flex-direction:column}.last-release__content__meta__title{font-weight:600;font-size:1.1rem;letter-spacing:-.03em}.last-release__content__meta__artist{color:rgba(255,255,255,.6);font-size:.8rem}.last-release__content__meta__link{font-size:.7rem;text-decoration:underline;text-underline-offset:5px;margin-top:.8rem}.playlists{margin-block:1.5rem}.playlists__list{list-style:none;display:flex;align-items:center;gap:.5rem;overflow-x:scroll;padding-inline:1rem}.playlists__link{font-size:.7rem;padding:.5rem .8rem;display:block;min-width:max-content;background-color:#16191d;border-radius:.3rem;color:#ced4da}.playlists__link.active{background-color:#f1f3f5;color:#0d0f12}#tracks{margin-inline:1rem;list-style:none}.track:not(:last-child){border-bottom:1px solid #16191d}.track__link{display:flex;justify-content:space-between;padding-block:1rem;align-items:center}.track__meta{display:flex;align-items:center;gap:1rem}.track__cover{border-radius:.3rem}.track__title{font-size:.9rem;font-weight:500;margin-bottom:.2rem}.track__artist{font-size:.7rem;color:#adb5bd}.track__duration{font-size:.7rem;color:#adb5bd}.tracks__count{font-size:.7rem;padding-top:3rem;padding-bottom:7rem;color:#adb5bd;text-align:center}.bottom-bar{position:fixed;background-color:#212529;bottom:0;left:0;right:0}.bottom-bar__progress{height:2px;width:100%;background-color:#343a40}.bottom-bar__progress__inside{height:100%;width:0%;background-color:#fff}.bottom-bar__content{padding-block:.8rem;display:flex;justify-content:space-between;padding-inline:1rem}.bottom-bar__img-container{position:relative}.bottom-bar__meta{display:flex;gap:1rem;align-items:center;flex:1}.bottom-bar__meta__cover{border-radius:.3rem}.bottom-bar__meta__title{font-size:.9rem;font-size:500}.bottom-bar__meta__artist{font-size:.8rem;color:#adb5bd}.bottom-bar__play>svg{fill:#fff}.player{height:calc(100vh - 3rem);max-height:calc(100vh - 3rem);padding-top:1rem;display:flex;flex-direction:column;justify-content:space-between}.player__scren{flex:1}.player__cover{padding-inline:1rem;position:relative}.player__cover>img{width:100%;object-fit:cover;border-radius:.5rem}.player__meta{margin-inline:1rem;display:flex;flex-direction:column;align-items:center;margin-block:1.5rem}.player__meta__title{font-size:1.2rem;font-weight:600;letter-spacing:-.03em;margin-bottom:.5rem}.player__meta__artist{font-size:.9rem;color:#adb5bd}.player__progress{margin-inline:1rem}.player__progress__bar{background-color:#16191d;border-radius:9999px;height:4px;width:100%}.player__progress__bar__inside{height:100%;width:0%;background-color:#fff;border-radius:9999px}.player__timer{margin-top:.5rem;font-size:.7rem;display:flex;justify-content:space-between;align-items:center;color:#868e96}.player__controls{display:flex;justify-content:space-between;margin-inline:3.5rem;margin-top:1.5rem}.player__controls__play{background-color:#fff;padding:1rem;display:flex;justify-content:center;align-items:center;border-radius:9999px}.player__controls__play>svg{fill:#0d0f12}.player__controls__icons{color:#fff}.player__footer{border-top:1px solid #16191d;width:100%;text-align:center;color:#868e96;font-size:.6rem;padding-block:.8rem}.lyrics{position:fixed;background-color:#0d0f12;top:0;bottom:0;left:0;z-index:150;width:85%;transition:all .3s ease;transform:translateX(-100%);border-right:1px solid #16191d;overflow-y:scroll;font-size:.9rem}.lyrics__header{height:3rem;display:flex;justify-content:space-between;align-items:center;color:#fff;margin-bottom:2rem;border-bottom:1px solid #16191d;padding-inline:1rem;position:sticky;top:0;left:0;right:0;background-color:#0d0f12}.lyrics__header>h2{font-weight:500}.lyrics__close{color:#fff;border:1px solid #212529;background-color:#16191d;display:flex;align-items:center;justify-content:center;padding:.3rem;border-radius:.3rem}.lyrics__content{padding-left:1rem;padding-right:2rem;font-size:.85rem;padding-bottom:2rem}.lyrics.open{transform:translateX(0)}.backdrop{position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:100;backdrop-filter:blur(3px);transition:all .3s ease}.backdrop.show{opacity:1;visibility:visible}.markup>p{line-height:1.4;font-size:.87rem}.markup>p:not(:last-child){margin-bottom:2rem}.markup h2{font-weight:500;display:block;margin-bottom:.7rem;font-size:.5rem;color:#868e96;text-transform:uppercase}.markup em{font-style:italic}.listen-animation{position:absolute;inset:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;gap:5%}.listen-animation div{background-color:rgba(255,255,255,.6);height:10%;width:10%;border-radius:9999px;animation:playing 2s infinite ease}.listen-animation.paused div{animation-play-state:paused}@keyframes playing{25%{height:80%;background-color:rgba(255,255,255,.1)}}.animation-container{position:relative}.paused{animation-play-state:paused}.listen-animation :nth-child(2){animation-delay:.2s}.listen-animation :nth-child(3){animation-delay:.4s}.listen-animation :nth-child(4){animation-delay:.6s}.listen-animation :nth-child(5){animation-delay:.8s}