@import"https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100..900&display=swap";html{font-family:"M PLUS 2",system-ui,sans-serif}:root{--color-0: colours.$primary-100;--color-1: colours.$primary-200;--color-2: colours.$primary-300;--color-3: colours.$primary-400}*{box-sizing:border-box}body{background:#fff;background-size:100vw;color:#000;margin:0}#colors{position:fixed;z-index:-1;width:100%;height:100%;top:0;left:0;margin:0;overflow:clip;display:flex;flex-wrap:wrap}#colors::after{position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;backdrop-filter:blur(90px);background:rgba(0,0,0,.2);content:""}#colors>.cell{width:128px;flex-grow:1;transition:background-color 5s ease-in-out}#colors>.cell.color-0{background-color:#30483b}#colors>.cell.color-1{background-color:#30483b}#colors>.cell.color-2{background-color:#30483b}#colors>.cell.color-3{background-color:#30483b}#colors>.cell.color-4{background-color:#30483b}#wrapper{display:flex;width:100%;justify-content:left}main{border-radius:0 0 8px 0;background:hsla(0,0%,100%,.2);color:#000;box-shadow-color:#000;box-shadow-spread:25px;box-shadow-blur:5px;box-shadow-offset:0 0;overflow:clip;max-width:1000px;width:100%;display:grid;grid-template:"header" 150px "live" auto "recents" auto "footer" 32px/auto;backdrop-filter:blur(10px);margin-bottom:2em}main>*{padding-left:16px}.song{display:grid;gap:1rem;grid-template:"art texts" 200px/200px auto}.song .img-wrapper::after{content:"*";font-family:"Maple Mono",monospace;font-size:8pt;font-weight:bold;padding:1pt 2pt;border-radius:.25rem;background-color:#ffdf0e;color:#000;position:absolute;top:4px;right:4px;z-index:10000;opacity:0;transform:translateY(-50%);transition:all .25s ease-out}.song.new-item .img-wrapper::after{opacity:1;transform:translateY(0)}.song .img-wrapper{--background-image: unset;position:relative;transition:scale .25s ease-in-out}@supports(selector(:has(.loaded))){.song .img-wrapper{scale:.9}}.song .img-wrapper:has(.loaded){scale:1}.song .img-wrapper:has(.loaded):before{filter:saturate(1) brightness(0.4)}.song .img-wrapper>img{width:200px;height:200px;object-fit:contain;z-index:2;position:absolute;top:0;left:0;opacity:0;transition:opacity .25s ease-in-out}.song .img-wrapper>img.loaded{opacity:1}.song .img-wrapper:before{background-color:#000;background-image:var(--background-image);background-position:center;background-size:cover;filter:saturate(0) brightness(1);color:#fff;position:absolute;z-index:1;display:block;content:"";text-align:center;top:0;left:0;width:100%;height:100%;transition:filter 1s ease-in-out}.song>.texts>*{margin:0}.song>.texts h1{font-size:2.75em;font-weight:700;text-wrap:pretty}.song>.texts h2{opacity:.8}.song>.texts h3{font-size:1.75em;overflow:clip;text-overflow:ellipsis;text-wrap:nowrap;font-weight:700;max-width:100%}.song>.texts .artist{font-size:1.3em;font-weight:500}.song.little{padding-bottom:8px;grid-template:"art texts" 128px/128px auto}.song.little>.img-wrapper>img{width:128px;height:128px}.header{background:rgba(48,72,59,.8);color:#fff;display:grid;grid-template:"logo logo" auto "return connected" 32px/auto 375px;padding:8px 8px 8px 16px;align-items:center}#return{grid-area:return}#return a{color:inherit}@property --connecting-gradient-a{syntax:"<color>";initial-value:rgba(72,116,96,0);inherits:false}@property --connecting-gradient-b{syntax:"<color>";initial-value:#487460;inherits:false}#connected-wrapper{grid-area:connected;text-align:right;background:linear-gradient(to right, var(--connecting-gradient-a) 50px, var(--connecting-gradient-b));margin:-8px 8px -16px;border-radius:8px 8px 0 0;transition:--connecting-gradient-a 2.5s ease-in,--connecting-gradient-b 2.5s ease-in}#connected-wrapper.reconnecting{--connecting-gradient-a: #ff690000;--connecting-gradient-b: #ff6900FF}#connected-wrapper.disconnected{--connecting-gradient-a: #ff000000;--connecting-gradient-b: #ff0000}#connected{margin:8px 16px 16px}#live{background:rgba(190,221,211,.9);color:#000;padding:8px 16px}#recents{margin:0;padding:8px 16px;list-style:none;background:rgba(228,241,237,.9);color:#000;counter-reset:listItem}#recents li::before{counter-increment:listItem}#recents li:nth-child(1){animation-delay:75ms}#recents li:nth-child(1) .img-wrapper::after{transition-delay:25ms}#recents li:nth-child(2){animation-delay:150ms}#recents li:nth-child(2) .img-wrapper::after{transition-delay:50ms}#recents li:nth-child(3){animation-delay:225ms}#recents li:nth-child(3) .img-wrapper::after{transition-delay:75ms}#recents li:nth-child(4){animation-delay:300ms}#recents li:nth-child(4) .img-wrapper::after{transition-delay:100ms}#recents li:nth-child(5){animation-delay:375ms}#recents li:nth-child(5) .img-wrapper::after{transition-delay:125ms}#recents li:nth-child(6){animation-delay:450ms}#recents li:nth-child(6) .img-wrapper::after{transition-delay:150ms}#recents li:nth-child(7){animation-delay:525ms}#recents li:nth-child(7) .img-wrapper::after{transition-delay:175ms}#recents li:nth-child(8){animation-delay:600ms}#recents li:nth-child(8) .img-wrapper::after{transition-delay:200ms}#recents li:nth-child(9){animation-delay:675ms}#recents li:nth-child(9) .img-wrapper::after{transition-delay:225ms}#recents li:nth-child(10){animation-delay:750ms}#recents li:nth-child(10) .img-wrapper::after{transition-delay:250ms}#recents li:nth-child(11){animation-delay:825ms}#recents li:nth-child(11) .img-wrapper::after{transition-delay:275ms}#recents li:nth-child(12){animation-delay:900ms}#recents li:nth-child(12) .img-wrapper::after{transition-delay:300ms}#recents li:nth-child(13){animation-delay:975ms}#recents li:nth-child(13) .img-wrapper::after{transition-delay:325ms}#recents li:nth-child(14){animation-delay:1050ms}#recents li:nth-child(14) .img-wrapper::after{transition-delay:350ms}#recents li:nth-child(15){animation-delay:1125ms}#recents li:nth-child(15) .img-wrapper::after{transition-delay:375ms}#recents li:nth-child(16){animation-delay:1200ms}#recents li:nth-child(16) .img-wrapper::after{transition-delay:400ms}#recents li:nth-child(17){animation-delay:1275ms}#recents li:nth-child(17) .img-wrapper::after{transition-delay:425ms}#recents li:nth-child(18){animation-delay:1350ms}#recents li:nth-child(18) .img-wrapper::after{transition-delay:450ms}#recents li:nth-child(19){animation-delay:1425ms}#recents li:nth-child(19) .img-wrapper::after{transition-delay:475ms}#recents li:nth-child(20){animation-delay:1500ms}#recents li:nth-child(20) .img-wrapper::after{transition-delay:500ms}#recents li:nth-child(21){animation-delay:1575ms}#recents li:nth-child(21) .img-wrapper::after{transition-delay:525ms}#recents li:nth-child(22){animation-delay:1650ms}#recents li:nth-child(22) .img-wrapper::after{transition-delay:550ms}#recents li:nth-child(23){animation-delay:1725ms}#recents li:nth-child(23) .img-wrapper::after{transition-delay:575ms}#recents li:nth-child(24){animation-delay:1800ms}#recents li:nth-child(24) .img-wrapper::after{transition-delay:600ms}#recents li:nth-child(25){animation-delay:1875ms}#recents li:nth-child(25) .img-wrapper::after{transition-delay:625ms}#recents li:nth-child(26){animation-delay:1950ms}#recents li:nth-child(26) .img-wrapper::after{transition-delay:650ms}#recents li:nth-child(27){animation-delay:2025ms}#recents li:nth-child(27) .img-wrapper::after{transition-delay:675ms}#recents li:nth-child(28){animation-delay:2100ms}#recents li:nth-child(28) .img-wrapper::after{transition-delay:700ms}#recents li:nth-child(29){animation-delay:2175ms}#recents li:nth-child(29) .img-wrapper::after{transition-delay:725ms}#recents li:nth-child(30){animation-delay:2250ms}#recents li:nth-child(30) .img-wrapper::after{transition-delay:750ms}#recents li:nth-child(31){animation-delay:2325ms}#recents li:nth-child(31) .img-wrapper::after{transition-delay:775ms}#recents li:nth-child(32){animation-delay:2400ms}#recents li:nth-child(32) .img-wrapper::after{transition-delay:800ms}#recents li:nth-child(33){animation-delay:2475ms}#recents li:nth-child(33) .img-wrapper::after{transition-delay:825ms}#recents li:nth-child(34){animation-delay:2550ms}#recents li:nth-child(34) .img-wrapper::after{transition-delay:850ms}#recents li:nth-child(35){animation-delay:2625ms}#recents li:nth-child(35) .img-wrapper::after{transition-delay:875ms}#recents li:nth-child(36){animation-delay:2700ms}#recents li:nth-child(36) .img-wrapper::after{transition-delay:900ms}#recents li:nth-child(37){animation-delay:2775ms}#recents li:nth-child(37) .img-wrapper::after{transition-delay:925ms}#recents li:nth-child(38){animation-delay:2850ms}#recents li:nth-child(38) .img-wrapper::after{transition-delay:950ms}#recents li:nth-child(39){animation-delay:2925ms}#recents li:nth-child(39) .img-wrapper::after{transition-delay:975ms}#recents li:nth-child(40){animation-delay:3000ms}#recents li:nth-child(40) .img-wrapper::after{transition-delay:1000ms}#recents li:nth-child(41){animation-delay:3075ms}#recents li:nth-child(41) .img-wrapper::after{transition-delay:1025ms}#recents li:nth-child(42){animation-delay:3150ms}#recents li:nth-child(42) .img-wrapper::after{transition-delay:1050ms}#recents li:nth-child(43){animation-delay:3225ms}#recents li:nth-child(43) .img-wrapper::after{transition-delay:1075ms}#recents li:nth-child(44){animation-delay:3300ms}#recents li:nth-child(44) .img-wrapper::after{transition-delay:1100ms}#recents li:nth-child(45){animation-delay:3375ms}#recents li:nth-child(45) .img-wrapper::after{transition-delay:1125ms}#recents li:nth-child(46){animation-delay:3450ms}#recents li:nth-child(46) .img-wrapper::after{transition-delay:1150ms}#recents li:nth-child(47){animation-delay:3525ms}#recents li:nth-child(47) .img-wrapper::after{transition-delay:1175ms}#recents li:nth-child(48){animation-delay:3600ms}#recents li:nth-child(48) .img-wrapper::after{transition-delay:1200ms}#recents li:nth-child(49){animation-delay:3675ms}#recents li:nth-child(49) .img-wrapper::after{transition-delay:1225ms}#recents li:nth-child(50){animation-delay:3750ms}#recents li:nth-child(50) .img-wrapper::after{transition-delay:1250ms}#recents li.new-item{opacity:0;animation:new-item-animation 300ms ease-in-out forwards}@keyframes new-item-animation{from{opacity:0;transform:translateY(-25px)}to{opacity:1;transform:translateY(0)}}.debug{display:none}.font-small{font-size:.9em}.footer{background-color:#a26477;color:#fff;height:32px;line-height:32px;padding:0 8px;margin:0}/*# sourceMappingURL=app.css.map */