*{margin:0;padding:0;box-sizing:border-box}#loggedin,#login{display:none}.text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:500px}body{background:#000;font:16px/1.5 'Titillium Web','Avenir Next',sans-serif;-webkit-font-smoothing:antiAliased;overflow:hidden}body,html{height:100%}p{margin-bottom:2em}img{width:100%;height:auto}input[type=range]{-webkit-appearance:none;width:100%;height:2em;background:0 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}input[type=range]:focus{outline:0}input[type=range]::-ms-track{width:100%;cursor:pointer;background:0 0;border-color:transparent;color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #ddd;height:1.5em;width:1.5em;border-radius:50%;background:#fff;cursor:pointer;position:relative;top:-1px;margin-top:-.5em;box-shadow:1px 1px 3px #000}input[type=range]::-moz-range-thumb{height:1.5em;width:1.5em;border-radius:50%;background:#fff;cursor:pointer}input[type=range]::-ms-thumb{height:1.5em;width:1.5em;border-radius:50%;background:#fff;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{width:100%;height:.5em;cursor:pointer;background:#ddd}input[type=range]::-moz-range-track{width:100%;height:.5em;cursor:pointer;background:#ddd}input[type=range]::-ms-track{width:100%;height:.5em;cursor:pointer;background:0 0;border-color:transparent;border-width:16px 0;color:transparent}#now-playing{transition:all .5s}.media{background-position:center;position:fixed;top:0;right:0;bottom:0;left:0;height:100%;overflow:hidden}.media-body{text-align:center;color:#fff;position:relative;z-index:10;margin:auto;display:flex;flex-direction:column}@keyframes beat{0%{transform:scale(1);background-position:center top}12.5%{background-position:center}25%{background-position:right bottom;transform:scale(1.05)}37.5%{background-position:center bottom}50%{background-position:left top}75%{transform:scale(1.05)}100%{transform:scale(1);background-position:center}}.media-bg,.media-canvas{display:block;position:fixed;left:0;top:0;bottom:0;right:0;width:100%;height:100%}#media-bg-image{opacity:.5;background-repeat:no-repeat;background-size:cover;background-position:center;backface-visibility:hidden;-webkit-filter:grayscale(50%) brightness(.5);-webkit-background-blend-mode:overlay;transition-property:transform;transition-delay:0s;transition-duration:5s;transform:scale(1);z-index:2}#media-canvas{transform:scale(1);transition-property:transform;transition-delay:0s;transition-duration:5s;z-index:2}#media-bg-image.active{transform:scale(1.05)}.bouncy{transition:transform .25s}.bouncy:hover{transform:scale(1.05)}.bouncy:active{transform:scale(.95)}.control{background:url(../img/light/refresh.svg) no-repeat center;background-size:96px;transition:opacity .25s;width:96px;height:96px;transition:all .25s;display:block;margin:.5em;cursor:pointer;background-size:100%;border-radius:50%}.control:hover{transform:scale(1.025);background-color:rgba(0,0,0,.75);box-shadow:#fff 0 0 30px}.control:active{transform:scale(.975)}.control--previous{background-image:url(../img/light/previous.svg);width:72px;height:72px}.control--next{background-image:url(../img/light/next.svg);width:72px;height:72px}.control--hue{background-image:url(../img/light/lights.svg);width:72px;height:72px;position:fixed;bottom:1em;right:1em}.media-body{text-align:center;overflow:visible;-webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.media-body a{text-decoration:none;color:#fff;transition:.25s all;display:inline-block}.media-body a:hover{text-shadow:0 0 16px rgba(255,255,255,.5)}.track-title{font-size:2em}.track-artists{font-weight:500;color:rgba(255,255,255,.6);list-style:none}.track-artists li{display:inline-block}.track-artists li+li:before{content:', '}.track-artwork-container{position:relative;margin:1em auto;max-width:66.666vh;text-align:center;flex:1;overflow:hidden;box-shadow:0 10px 60px -20px rgba(0,0,0,.5)}.track-artwork-container:hover{box-shadow:0 10px 60px -20px rgba(255,255,255,1)}.track-artwork-container:active{transform:scale(1.05)}.track-artwork{display:block;width:100%;z-index:1}.track-artwork-container:hover .track-artwork-controls{opacity:1}.track-artists,.track-title{text-shadow:rgba(0,0,0,.5) 0 1px 2px}.track-artwork-controls{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;opacity:0;transition:opacity .25s;z-index:2;display:flex;align-items:center;justify-content:center}.track-meta{flex:1}#lights{position:fixed;bottom:6em;right:.5em;padding:1em;max-height:calc(100% - 8em);overflow:auto;opacity:0;height:0;width:14em;margin-top:10px}#lights>ul{border-radius:6px;box-shadow:0 2px 6px -2px rgba(0,0,0,.5);overflow:hidden;position:relative;top:10px;transition:all .25s}#lights>ul+ul{margin-top:.5em}#lights.active{opacity:1;height:auto;margin-top:0}#lights.active>ul{top:0}.lights-list{list-style:none;margin:0}.lights-list li{padding:.75em 1em .75em .5em;display:flex;align-items:center;line-height:1.25;cursor:pointer;background:#f6f6f6;color:#999;transition:all .25s;-webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lights-list li:hover{color:#000;background:#f9f9f9}.lights-list li:active{background:#f6f6f6}.lights-list li.active{background:#fff;color:#333;font-weight:500}.lights-list li+li{border-top:1px solid #f2f2f2}.color-picker{display:inline-block;width:1.5em;min-width:1.5em;height:1.5em;border:2px solid #fff;border-radius:6px;background:#ccc;margin-right:.5em;cursor:pointer;opacity:.25;transition:all 125ms;text-align:center;color:#fff;font-weight:700}.color-picker:hover{opacity:1;transform:scale(1.05)}.color-picker:active{transform:scale(.975)}.color-id{opacity:0;transition:all .25s}.color-picker:hover .color-id{opacity:1}.lights-list li.active .color-picker{opacity:1}.settings-list li{padding:.75em 1em .75em .75em;line-height:1.25;cursor:pointer;background:linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.9));color:#999;transition:all .25s;background:#f6f6f6;-webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;position:relative}.settings-list li:hover{color:#000;background:#f9f9f9}.settings-list li:active{background:#f6f6f6}.settings-list li.active{background:#e6ffec;color:#031;font-weight:500}.settings-list .label{margin:0 1em 0 2em;border-bottom:1px solid transparent;text-transform:uppercase;font-size:.825em;letter-spacing:1px;display:block}.settings-list .description{display:block;font-size:.75em;font-style:italic;padding-right:2rem}.settings-list li.toggleable .label:after{display:block;position:absolute;top:1.125em;left:1.125em;background:linear-gradient(#ddd,#ccc);width:.75em;height:.75em;border-radius:50%;box-shadow:0 0 0 2px #f8f8f8;content:"";transition:.25s all}.settings-list li.toggleable.active .label:after{background:linear-gradient(#33cc68,#10ad47);box-shadow:0 0 2px 0 #faeaf1}.setting .setting--settings{height:0;overflow:hidden}.brightness-control{display:flex}.icon{min-width:1em;height:1em;margin-right:.75em;background-image:url(../img/dark.svg);background-size:cover}.icon--light{margin:0 0 0 .75em;background-image:url(../img/light.svg)}.brightness-control--input{width:100%}#connections{position:fixed;top:0;left:0;z-index:100;list-style:none;opacity:0;transition:all .5s}#connections:hover{opacity:1}#connections li{display:inline-block;padding:1em;font-weight:700;background-color:red;color:#fff}#connections li.connected{background-color:#0f0}.setup{color:#fff;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;width:100%;opacity:0;transition:all 1s;z-index:1;height:100%;display:grid;background:#353744;background-image:radial-gradient(#484c65,#353744)}.setup.active{opacity:1}.setup-hue{z-index:2}.setup-hue+.setup-spotify{opacity:0}.setup-error{cursor:pointer}.setup-container{margin:auto;padding:1em;max-width:480px}.setup-content{position:relative;z-index:10}.btn{display:inline-block;background:#fff2;color:#fff;padding:1em 2em;font-weight:700;text-decoration:none;border-radius:2em;cursor:pointer;transition-property:transform;transition-duration:.25s}.btn:hover{background-color:rgba(0,0,0,.75);transform:scale(1.025)}.btn:active{transform:scale(.975)}.btn-spotify{background:#1db954;color:#fff}.btn-spotify:hover{background:#1db954}#hue-control{position:relative;opacity:0;z-index:10;transition:all .5s}#hue-control.active{opacity:1}.big{font-size:1.25em;text-shadow:0 1px 1px rgba(0,0,0,.5)}.searching{background:#fff;border-radius:6px;box-shadow:0 2px 6px -2px rgba(0,0,0,.5);padding:1em;text-align:center;background:#f6f6f6;color:#999;margin-bottom:.5em;transition:all .25s;line-height:1.25}@keyframes flash{from{opacity:.5}to{opacity:1}}.searching img{width:60px;opacity:1;animation:infinite 1s flash alternate}.searching p{margin:0}.preview{width:240px;height:240px;position:relative;margin:0 auto 4em}@keyframes previewFade{0%{transform:scale(.5);opacity:0}80%{transform:scale(1.05);opacity:1}100%{transform:scale(1);opacity:1}}.preview__artwork,.preview__picker,.preview__shadow{opacity:0;transform:scale(.5);transition:all .25s;position:absolute;top:0;left:0;width:100%;height:100%;animation:previewFade .4s;animation-fill-mode:forwards;background-size:cover}.preview__picker{z-index:3;width:40px;height:48px;filter:drop-shadow(rgba(0,0,0,.5) 0 5px 5px);transform-origin:center bottom}.preview__picker-1{animation-delay:1.45s;top:35px;left:165px}.preview__picker-1 path{fill:#3f1331}.preview__picker-2{animation-delay:1.5s;top:20px;left:45px}.preview__picker-2 path{fill:#fae438}.preview__picker-3{animation-delay:1.55s;top:100px;left:33px}.preview__picker-3 path{fill:#fb4e8b}.preview__picker-4{animation-delay:1.6s;top:159px;left:149px}.preview__picker-4 path{fill:#fb1365}.preview__artwork{z-index:2;animation-delay:1.4s;background-image:url(../img/preview.jpg)}.preview__shadow{z-index:1;animation-delay:1.45s;background-image:url(../img/preview-shadow.png);width:709px;height:709px;top:-229px;left:-229px}.setup-spotify .big{opacity:0;animation:previewFade .4s;animation-fill-mode:forwards;animation-delay:1.5s}.setup-spotify .cta{opacity:0;animation:previewFade .4s;animation-fill-mode:forwards;animation-delay:1.6s}@media only screen and (min-width:768px){.track-artwork-container{margin:2em auto;max-width:66.666vh}.media{display:grid}}#debug{position:fixed;font-size:12px;color:#fff;background:rgba(0,0,0,.5);padding:5px;font-family:monospace;opacity:0;transition:all .5s}#debug.active{width:auto;height:auto;opacity:1}.list-debug-item{display:flex}.list-debug-item__color{display:inline-block;margin-right:10px;width:20px;height:20px}.party-emoji{position:absolute;display:inline-block;z-index:10;opacity:0;user-select:none}.party-emoji.active{animation:1.5s party-emoji;animation-timing-function:linear}@keyframes party-emoji{0%{opacity:0;transform:translate(0,0)}10%{transform:translate(-2.5px,-5px);opacity:1}20%{transform:translate(-5px,-10px)}40%{transform:translate(-2.5px,-15px)}50%{transform:translate(0,-20px)}60%{transform:translate(2.5px,-25px)}70%{transform:translate(5px,-30px)}80%{transform:translate(2.5px,-35px)}90%{transform:translate(0,-40px);opacity:1}100%{transform:translate(-2.5px,-45px);opacity:0}}.media .media-webgl{position:fixed;top:0;bottom:0;left:0;right:0}.waves-container{position:relative}.waves-container canvas{position:absolute;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.2)}