:root{font-family:Fredoka,system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{padding:0;margin:0;box-sizing:border-box}:root{--dark: #000;--grey-100: #b7b7b7;--grey-500: #999999;--grey-700: #3d3d3d;--grey-900: #131313;--light: #ffffff}*{-webkit-tap-highlight-color:transparent}.app{width:100%;height:100dvh;position:relative;background-color:var(--grey-900)}.app__layout{width:100%;height:100%;display:flex;flex-direction:column}.app__group{width:100%;min-height:0;display:flex;flex-direction:column}@media (min-width: 1024px){.app__group{flex-direction:row}}.app__header{padding-left:1rem;min-height:4rem;background-color:var(--grey-900);display:flex;align-items:center}.brand__logo{width:34px;height:34px;background-size:34px;margin-right:1rem;background-image:url(./music.png)}.gradient__text{background:linear-gradient(to right,#1da1f2,#7b2ff7,#f500f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand__name{font-size:28px;font-weight:500;font-family:Fredoka,sans-sarif}.player__wrapper{width:100%;padding:1.25rem .5rem;bottom:0;position:absolute;display:flex;align-items:center;justify-content:center}.player__wrapper:after{bottom:0;left:0;right:0;height:200px;background:linear-gradient(to top,black,transparent);content:"";position:absolute;pointer-events:none}.player{width:100%;border-radius:5px;padding:1rem;gap:1rem;height:fit-content;display:flex;flex-direction:column;align-items:center;z-index:1000}.player__control__group{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}.blur__background{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#72727266;border-radius:12px}.player__seek__group{width:100%;display:flex;align-items:center;justify-content:space-between;color:var(--grey-500);font-size:12px}.player__seek__group>span{width:65px}.player__seek__group>span:last-child{text-align:end}.player__seekbar{flex-grow:1}.player__text__group{overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;gap:4px}.player__text__primary{color:var(--light);font-weight:500;font-size:18px}.player__text__secondary{color:var(--grey-500);font-size:12px}.player__btn__group{min-width:120px;height:100%;display:flex;align-items:center;justify-content:space-between}.player__cover,.prev__btn,.toggle__btn,.next__btn{background:none;border:none;background-repeat:no-repeat;background-position:center}.prev__btn,.next__btn{height:24px;width:24px;background-size:18px}.toggle__btn{height:34px;width:34px;background-size:34px}.prev__btn{background-image:url(previous.png)}.next__btn{background-image:url(next.png)}.song__playing{background-image:url(pause.png)}.song__paused{background-image:url(play.png)}.player__cover{min-width:34px;height:34px;border-radius:2px;background-size:34px}.loader__wrapper{height:100%;z-index:100;display:flex;align-items:center;justify-content:center;transition:all .2s ease-in-out}.player__loader{top:0;left:0;width:24px;height:24px;border:3px solid transparent;border-top-color:#727272;border-radius:50%;animation:spin 1s linear infinite;box-sizing:border-box;display:none}.bg__loading{background-color:#dcdcdcb9}.spin__visible{display:block}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width: 1024px){.player__text__group{min-width:400px}}.player__seekbar::-webkit-slider-runnable-track{height:2px}.player__seekbar::-webkit-slider-thumb{max-height:0px;max-width:0px;margin-top:-4px}.playlist__wrapper{flex-grow:1;min-height:0;position:relative}.playlist{height:100%;background-color:var(--grey-900);overflow-y:auto}.playlist:first-child{padding-top:.25rem}.item{text-wrap:nowrap;width:100%;height:60px;padding:0 1rem;box-sizing:border-box;display:flex;align-items:center;cursor:pointer;transition:all .3s ease}.item__removed{opacity:0;pointer-events:none;overflow:hidden;height:0px}.cover__img{min-width:34px;min-height:34px;margin-right:1rem;border-radius:2px;background-size:34px}.text__primary{color:var(--light);font-size:18px;text-wrap:ellipse}.text__secondary{color:var(--grey-100);font-size:12px;text-wrap:ellipse}.remove__img{width:24px;height:24px;background-image:url(remove.png);background-size:18px;background-repeat:no-repeat;background-position:center;margin-left:auto}.end__spacer{height:120px}@media (min-width: 1024px){.item:hover .remove__img{display:block}.item:hover{background-color:var(--grey-700)}.remove__img{display:none}.remove__img:hover{background-image:url(remove_danger.png)}.item__removed{margin:0;padding:0;width:0;height:60px}.playlist{display:grid;padding:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.playlist::-webkit-scrollbar{width:5px;background:transparent}.playlist::-webkit-scrollbar-thumb{background-color:var(--grey-700)}.end__spacer{height:200px}}