@import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;700&display=swap");*{margin:0;padding:0}::selection{background:rgba(222,60,75,.5)}body,html{position:fixed;overflow:hidden;overscroll-behavior:none;background-color:#0a0a0a;color:#9daabe;font-family:Hind,sans-serif;font-size:1vw}@media screen and (max-width:768px){body,html{font-size:2vw}}@media screen and (max-width:400px){body,html{font-size:3vw}}canvas{display:block}.init{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease-in;font-size:1vw}.init.show{opacity:1}.init h1{font-size:14em;font-weight:700;text-transform:uppercase}.init #login{cursor:pointer;color:#9daabe;font-family:Hind,sans-serif;font-weight:300;letter-spacing:1.5em;border:none;font-size:1em;background-color:initial;transition:color .4s ease-in-out;outline:none}.init #login:focus,.init #login:hover{color:#de3c4b}.sorry{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease-in;font-size:1vw}.sorry.show{opacity:1}.sorry h2{font-size:2em;letter-spacing:.2em;font-weight:300;text-transform:uppercase}.dashboard{position:fixed;pointer-events:none;top:0;left:0;width:100%;height:100%}.dashboard.show .name,.dashboard.show .user{transform:translateZ(0)}.dashboard .name{top:0;left:0;padding:1rem;transform:translate3d(0,-100%,0);transition:transform .8s ease-in-out}.dashboard .name h1{letter-spacing:.1rem;font-size:1rem;text-transform:uppercase;font-weight:700}.dashboard .name h1 span{font-weight:300}.dashboard .user{pointer-events:auto;position:absolute;top:0;right:0;display:flex;align-items:center;padding:1rem;transform:translate3d(0,-100%,0);transition:transform .8s ease-in-out}.dashboard .user:hover .user--name{opacity:1}.dashboard .user--thumbnail{display:block;width:2rem;height:2rem;border-radius:50%;padding-left:1rem;overflow:hidden}.dashboard .user--name{font-family:Hind,sans-serif;text-transform:uppercase;letter-spacing:.1rem;font-size:.8rem;opacity:0;transition:opacity .4s ease-in-out}.dashboard .controller{pointer-events:auto;position:absolute;bottom:0;right:0;left:0}.dashboard .controller.isPlaying .controller--container,.dashboard .controller.show.isPlaying .controller--container,.dashboard .controller.show:hover .controller--container{transform:translateZ(0)}.dashboard .controller.isPlaying .controller--playpause img:first-of-type{display:none}.dashboard .controller.isPlaying .controller--playpause img:nth-of-type(2){display:block}.dashboard .controller--container{position:relative;display:flex;align-items:center;justify-content:space-between;height:2rem;padding:.5rem 1rem;background-color:rgba(10,10,10,.6);transform:translate3d(0,100%,0);transition:transform .8s ease-in-out}.dashboard .controller--progress{position:absolute;bottom:0;left:0;width:100%;height:4%;background-color:#de3c4b;transform:translate3d(-100%,0,0)}.dashboard .controller--playpause{pointer-events:auto;cursor:pointer;position:relative;height:100%;width:2rem}.dashboard .controller--playpause img{position:absolute;left:0}.dashboard .controller--playpause img:first-of-type{display:block;top:0;height:100%}.dashboard .controller--playpause img:nth-of-type(2){display:none;top:10%;height:80%}.dashboard .controller--track{display:flex;align-items:center;justify-content:center;flex:1;max-width:calc(100% - 8rem);font-size:1rem;letter-spacing:.2rem}.dashboard .controller--artist{margin-right:.5rem;text-align:right}.dashboard .controller--artist,.dashboard .controller--song{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.dashboard .controller--song{font-weight:700;margin-left:.5rem}.dashboard .controller--time{width:3rem;text-align:right}.dashboard .controller--sec{font-weight:700}