.Splash{display:flex;flex-flow:column;align-items:center;justify-content:center;height:100vh}.Splash button{font-size:1.2em;margin:2em}.Welcome{flex-direction:column;justify-content:center;height:100vh}.Welcome,.Welcome h2{display:flex;align-items:center}.Welcome .join{text-align:center}.Welcome .authorize{margin:2em}.Welcome .authorize button{font-size:1.4em}.Visuals{display:grid;grid-template:1fr/1fr;grid-auto-columns:0}.Visuals canvas{display:block}.Visuals .Album,.Visuals .Backdrop,.Visuals .Noise{grid-row:1/2;grid-column:1/2}.Visuals .Noise{height:100%;opacity:.1;width:100%;z-index:300}.Visuals .Album{display:flex;justify-content:center;align-items:center;z-index:2}.Visuals .Album canvas,.Visuals .Backdrop canvas{height:100vh!important;width:100vw!important}.ViewContainer{margin:2em}.Image{height:10em;width:10em}.Image>img{animation:fade-in .5s;object-fit:contain;height:100%;width:100%}.ViewHeader{display:flex;line-height:1.2;margin-bottom:2em}.ViewHeader h2{position:relative}.ViewHeader .image{perspective:200px;perspective-origin:0 100%}.ViewHeader .Image{background:#000;box-shadow:0 1em 3em -.5em #000;height:15em;margin-right:2em;transform:rotateY(3deg);width:15em}.TrackList .Track{align-items:start;border-bottom:1px solid rgba(0,0,0,.2);display:grid;font-size:16px;grid:auto auto/48px 1fr 1fr auto;grid-gap:4px;line-height:1.4;padding:8px 16px;transition:background-color .3s ease}.TrackList .Track:nth-child(2n){background:rgba(0,0,0,.6)}.TrackList .Track:nth-child(odd){background:rgba(0,0,0,.65)}.TrackList .Track:hover{background:rgba(0,0,0,.7)}.TrackList .Track .name{grid-row:1/2}.TrackList .Track .playback{align-self:center;grid-column:1/1;grid-row:1/end;justify-self:start}.TrackList .Track .playback .PlayButton{background:none;border:2px solid #fff;border-radius:50%;display:block;font-size:0;opacity:.6;height:28px;width:28px}.TrackList .Track .playback .PlayButton .icon{height:12px;margin:auto auto auto 1px;width:12px}.TrackList .Track:hover .playback .PlayButton{opacity:1}.TrackList .Track .album{grid-column:2/2;grid-row:2/2}.TrackList .Track .artists{font-size:.9em}.PlayButton .icon{background-position:50%;background-repeat:no-repeat;background-size:contain;height:100%}.Artists{display:flex;flex-flow:row wrap}.Artists .artist:not(:last-child):after{content:",  ";white-space:pre-wrap}.AlbumView .TrackList .Track{grid-template-rows:1fr}.PlayableList a{color:#fff}.PlayableList .items{display:flex;flex-flow:wrap;justify-content:space-between;margin:-48px -16px}.PlayableList .item{height:16em;margin:48px 16px;perspective:200px;width:16em}.PlayableList .item>div{transform-origin:50px 50px;transition:all .2s ease;z-index:1}.PlayableList .image{background:rgba(0,0,0,.7);box-shadow:0 1em 2em -.5em #000}.PlayableList .item:hover>div{z-index:2}.PlayableList .playback{display:grid;opacity:0}.PlayableList .playback .PlayButton{background-color:rgba(0,0,0,.3);border:2px solid #fff;border-radius:50%;cursor:pointer;font-size:0;height:100px;margin:auto;opacity:.8;width:100px;z-index:2}.PlayableList .playback .PlayButton .icon{background-position:calc(50% + 4px) 50%;background-size:38%}.PlayableList .item>:hover .playback,.PlayableList .playback button:hover{opacity:1}.PlayableList .placeholder{border:1px solid rgba(0,0,0,.06666666666666667)}.AlbumList .Album{display:grid;grid:16em 3em/16em;grid-row-gap:.5em;height:16em;width:16em}.AlbumList .Album .name{align-self:start;grid-column:1/2;grid-row:2/3;text-shadow:0 .2em .4em #000}.AlbumList .Album .image,.AlbumList .Album .playback{grid-column:1/2;grid-row:1/2}.AlbumList .Album .Image{height:100%;width:100%}.QuickSearch{position:absolute;top:50%;left:50%;opacity:0;transition:all .3s ease;transform:translateX(-50%) translateY(-50%) rotateX(90deg);transform-origin:center;z-index:1}.QuickSearch.isVisible{opacity:1;transform:translateX(-50%) translateY(-50%) rotateX(0)}.SearchView .results,.SearchView header,.SearchView header input{transition:all .5s ease}.SearchView header{position:relative}.SearchView header input{margin-left:32px}.SearchView .results{pointer-events:none;opacity:0}.SearchView.hasResults .results{pointer-events:auto;opacity:1}.PlaylistList .item{font-size:16px;line-height:1.2}.PlaylistList .item .Playlist{transition:opacity 1s}.PlaylistList .item.pending .Playlist{opacity:0}.PlaylistList .Playlist{display:grid;grid-row-gap:12px}.PlaylistList .Playlist .image{height:16em;width:16em}.PlaylistList .Playlist .image,.PlaylistList .Playlist a{grid-column:1/2;grid-row:1/2}.PlaylistList .Playlist .Image{height:100%;width:100%}.PlaylistList .Playlist .playback{grid-column:1;grid-row:1}.PlaylistList .Playlist .name,.PlaylistList .Playlist .owner{transition:opacity .2s;text-align:left;text-shadow:0 .2em .4em #000}.PlaylistList .Playlist .owner{font-weight:400;margin-top:-4px}.PlaylistList .item:hover .Playlist .name,.PlaylistList .item:hover .Playlist .owner{opacity:1}.PlaylistList .item .placeholder{background:rgba(0,0,0,.13333333333333333);height:16em;width:16em}.Playlist .owner{font-size:.7em}.ProgressBar .progress{transition:background-color 10s}.TrackInfo .ProgressBar .progress{height:12px;transition:width 1s ease}.TrackInfo .danceability .progress{background:#f71dbf}.TrackInfo .energy .progress{background:#89ff89}.TrackInfo .instrumentalness .progress{background:#fb0080}.TrackInfo .speechiness .progress{background:#00ffcf}.TrackInfo .liveness .progress{background:#ff0}.TrackInfo .valence .progress{background:orange}.TrackInfo table th{text-align:left}.TrackInfo table{width:100%}.TrackInfo tr{display:flex}.TrackInfo table th{flex:0 1 20%}.TrackInfo table td{flex:1 1 auto}.Nav ul{list-style:none;padding:0}.Nav ul li{align-items:center;display:flex;font-size:14px}.Nav ul li svg{display:block;margin-right:8px}.Playback .Interface{display:grid;grid:1fr/repeat(5,1fr);align-items:center}.Playback .Interface button{background:none;cursor:pointer;display:flex;height:100%;margin:auto;opacity:.8}.Playback .Interface button:hover{opacity:1}.Playback .Interface button img{display:block;pointer-events:none;object-fit:contain;height:26px;width:26px}.Playback .Interface .toggle{display:grid;align-items:center;perspective:200px}.Playback .Interface .toggle>*{grid-column:1/2;grid-row:1/2;transition:opacity .2s,transform .2s}.Playback .Interface .toggle.paused .pause,.Playback .Interface .toggle.playing .play{pointer-events:none;opacity:0;transform:rotateY(90deg)}.Playback .Interface .pause img,.Playback .Interface .play img{height:22px;width:22px}.Playback .Interface .repeat{position:relative;top:-2px}.Playback .NowPlaying{display:grid;grid-template:auto/auto 1fr;grid-column-gap:16px}.Playback .NowPlaying .cover-art{height:80px;width:80px}.Playback .NowPlaying .Image{grid-row:1/4;grid-column:1/2;height:100%;width:100%}.Playback .NowPlaying .Artists{font-size:.8em;grid-row:1/2;grid-column:2/3;align-self:end}.Playback .NowPlaying .trackName{font-size:24px;grid-row:1/2;grid-column:2/3;line-height:1}.Playback .Scrubber{cursor:pointer}.Playback .Sections{display:flex;opacity:0;pointer-events:none;transition:opacity .2s}.Playback .Sections.ready{opacity:.2}.Playback:hover .Sections.ready{opacity:1}.Playback .Sections .section{border-left:1px solid #fff;height:4px}.Playback{background:rgba(0,0,0,.8);box-shadow:0 0 2em #000;display:grid;grid:1em auto/1fr 300px 1fr;padding:16px;transition:background-color 5s}.Playback .Scrubber{grid-column:1/end;grid-row:1/1}.Playback .vis{justify-self:end}.Playback .Time{font-size:24px;line-height:1}@keyframes fade-in-from-below{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:none}}@keyframes reveal{0%{opacity:0;transform:translateY(50px) scale(.8)}to{opacity:1;transform:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.Navigation .ViewContainer>*,.TrackList .Track{animation:fade-in-from-below .4s cubic-bezier(0,0,0,1) 1}.PlayerUI{display:grid;grid-template-rows:1fr auto;height:100%;overflow:hidden}.PlayerUI>.viewport{display:grid;grid-template-columns:-webkit-min-content 1fr;grid-template-columns:min-content 1fr}.PlayerUI>.viewport>main{overflow:hidden;position:relative}.PlayerUI>.viewport>main>.content{inset:0;overflow:auto;position:absolute}.PlayerUI>.viewport>main>.content::-webkit-scrollbar{width:8px}.PlayerUI>.viewport>main>.content::-webkit-scrollbar-track{background:transparent}.PlayerUI>.viewport>main>.content::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.25098039215686274)}.PlayerUI>.viewport>nav{background:rgba(4,4,4,.9333333333333333);padding:16px;width:160px}.PlayerUI>.viewport::-webkit-scrollbar{width:8px}.PlayerUI>.viewport::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.5)}.PlayerUI .compass{background:rgba(0,0,0,.3333333333333333);border-radius:0 0 16px 16px;display:grid;grid-auto-flow:column;grid-gap:32px;padding:8px 32px;left:50%;position:absolute;transform:translateX(-50%);z-index:2}.PlayerUI .compass a{color:#fff}.PlayerWindow{height:100%;position:relative}.PlayerWindow .PlayerUI{inset:0;position:absolute;z-index:2}.PlayerWindow .Visuals{inset:0;position:absolute;z-index:1}.PlayerWindow .PlayButton{transition:opacity .3s ease}.PlayerWindow.pending .PlayButton{pointer-events:none;opacity:0}.App{height:100%}.ProgressBar{background:rgba(0,0,0,.4)}.ProgressBar .progress{background:#eee;height:.3em}header h2{color:#eee;font-size:2em}#root,body,html{height:100%}body{background:#000;color:#ddd;margin:0;padding:0;font-size:16px}body,button,input{font-family:"Cairo",sans-serif;font-weight:700}h1,h2,h3,h4{font-weight:400;margin:0}a{color:#fff;transition:color 10s;text-decoration:none}a:hover{text-decoration:underline}button{border:none;background:#ddd;color:#000;cursor:pointer;font-weight:700;letter-spacing:.1em;outline:none;text-transform:uppercase}button:hover{background:#000;color:#ddd}input{background:rgba(0,0,0,.5);border:2px solid #ddd;color:#fff;outline:none;transition:border-color 10s}.QuickSearch input,.SearchView input{border-radius:2em;text-align:center;padding:.25em .5em;width:14em}
/*# sourceMappingURL=main.7c4baed3.chunk.css.map */