body{background:#dfe7ef;font-family:Bitter,serif}*{box-sizing:border-box}.icon{stroke-width:0;stroke:currentColor;fill:currentColor;width:1em;height:1em;display:inline-block}.wrapper{background-size:cover;justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex}@media screen and (width<=700px),(height<=500px){.wrapper{flex-flow:column wrap}}.player{background:#eef3f7;border-radius:15px;width:410px;min-height:480px;padding:30px;box-shadow:0 15px 35px -5px #32588252}@media screen and (width<=576px),(height<=500px){.player{width:95%;min-height:initial;max-width:400px;margin-top:75px;padding:20px 20px 30px}}.player__top{z-index:4;align-items:flex-start;display:flex;position:relative}@media screen and (width<=576px),(height<=500px){.player__top{flex-wrap:wrap}}.player-cover{z-index:2;z-index:1;border-radius:15px;flex-shrink:0;width:300px;height:300px;margin-left:-70px;position:relative}@media screen and (width<=576px),(height<=500px){.player-cover{width:290px;height:230px;margin:-70px auto 25px}}.player-cover__item{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:15px;width:100%;height:100%;position:absolute;top:0;left:0}.player-cover__item:before{content:"";background:inherit;z-index:1;filter:blur(10px);opacity:.9;border-radius:15px;width:100%;height:100%;display:block;position:absolute;top:30px;transform:scale(.9);box-shadow:0 10px 40px #4c467c80}.player-cover__item:after{content:"";background:inherit;z-index:2;border-radius:15px;width:100%;height:100%;display:block;position:absolute;box-shadow:0 10px 40px #4c467c80}.player-cover__img{object-fit:cover;user-select:none;pointer-events:none;border-radius:15px;width:100%;height:100%;box-shadow:0 10px 40px #4c467c80}.player-controls{flex-direction:column;flex:1;align-items:center;padding-left:20px;display:flex}@media screen and (width<=576px),(height<=500px){.player-controls{flex-direction:row;flex:unset;width:100%;padding-left:0}}.player-controls__item{color:#acb8cc;cursor:pointer;justify-content:center;align-items:center;width:50px;height:50px;margin-bottom:10px;padding:5px;font-size:30px;transition:all .3s ease-in-out;display:inline-flex;position:relative}@media screen and (width<=576px),(height<=500px){.player-controls__item{color:#acb8cc;cursor:pointer;width:40px;height:40px;margin-bottom:0;margin-right:10px;padding:5px;font-size:26px}}.player-controls__item:before{content:"";opacity:0;background:#fff;border-radius:50%;width:100%;height:100%;transition:all .4s cubic-bezier(.35,.57,.13,.88);position:absolute;transform:scale(.5);box-shadow:0 5px 10px #4c467c33}@media screen and (width>=500px){.player-controls__item:hover{color:#532ab9}.player-controls__item:hover:before{opacity:1;transform:scale(1.3)}}@media screen and (width<=576px),(height<=500px){.player-controls__item:active{color:#532ab9}.player-controls__item:active:before{opacity:1;transform:scale(1.3)}}.player-controls__item .icon{z-index:2;position:relative}.player-controls__item.-xl{filter:drop-shadow(0 11px 6px #acb8cc73);color:#fff;width:auto;height:auto;margin-bottom:0;font-size:95px;display:inline-flex}@media screen and (width<=576px),(height<=500px){.player-controls__item.-xl{margin-left:auto;margin-right:0;font-size:75px}}.player-controls__item.-xl:before{display:none}.player-controls__item.-favorite.active{color:red}[v-cloak],[v-cloak]>*{display:none}.progress{user-select:none;width:100%;margin-top:-15px}.progress__top{justify-content:space-between;align-items:flex-end;display:flex}.progress__duration{color:#71829e;opacity:.5;font-size:20px;font-weight:700}.progress__time{color:#71829e;opacity:.7;margin-top:2px;font-size:16px;font-weight:700}.progress__bar{cursor:pointer;background-color:#d0d8e6;border-radius:10px;width:100%;height:6px;display:inline-block}.progress__current{height:inherit;background-color:#a3b3ce;border-radius:10px;width:0%}.album-info{color:#71829e;user-select:none;flex:1;padding-right:60px}@media screen and (width<=576px),(height<=500px){.album-info{padding-right:30px}}.album-info__name{margin-bottom:12px;font-size:20px;font-weight:700;line-height:1.3em}@media screen and (width<=576px),(height<=500px){.album-info__name{margin-bottom:9px;font-size:18px}}.album-info__track{opacity:.7;min-height:52px;font-size:20px;font-weight:400;line-height:1.3em}@media screen and (width<=576px),(height<=500px){.album-info__track{min-height:50px;font-size:18px}}.github-btn{color:#fff;letter-spacing:1px;background:#24292e;border-radius:4px;padding:15px 25px;font-size:16px;font-weight:700;text-decoration:none;transition:all .3s ease-in-out;position:absolute;bottom:50px;right:40px;box-shadow:0 4px 30px -6px #243446a6}@media screen and (width>=500px){.github-btn:hover{transform:scale(1.1);box-shadow:0 17px 20px -6px #2434465c}}@media screen and (width<=700px){.github-btn{margin-top:20px;position:relative;bottom:auto;right:auto}.github-btn:active{transform:scale(1.1);box-shadow:0 17px 20px -6px #2434465c}}.scale-out-enter-active,.scale-out-leave-active{transition:all .35s ease-in-out}.scale-out-enter{pointer-events:none;opacity:0;transform:scale(.55)}.scale-out-leave-to{pointer-events:none;opacity:0;transform:scale(1.2)}.scale-in-enter-active,.scale-in-leave-active{transition:all .35s ease-in-out}.scale-in-enter{pointer-events:none;opacity:0;transform:scale(1.2)}.scale-in-leave-to{pointer-events:none;opacity:0;transform:scale(.55)}