@import"https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wdth,wght,GRAD@6..144,25..151,1..1000,0..100&display=swap";html{font-family:"Google Sans Flex",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%;height:100%;min-height:100vh;justify-content:center;padding-top:256px}main{border-radius:8px;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;width:1000px;display:grid;grid-template:"header" 32px "live" 272px "recents" auto "footer" 32px/auto;backdrop-filter:blur(10px);margin-bottom:2em}.song{display:grid;gap:1rem;grid-template:"art texts" 256px/256px auto;padding:8px}.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{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>img{width:256px;height:256px;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:#dcbfcb;position:absolute;z-index:1;display:block;content:"Loading..";text-align:center;padding-top:50%;top:0;left:0;width:100%;height:50%}.song>.texts>*{margin:0}.song>.texts h1{font-size:2.75em;line-height:1.1;font-weight:700;font-stretch:extra-condensed;text-wrap:pretty}.song>.texts h2{opacity:.8}.song>.texts h3{font-size:1.75em;overflow:clip;text-overflow:ellipsis;text-wrap:nowrap;line-height:1.1;font-weight:700}.song>.texts .artist{font-size:1.3em;font-weight:500}.song.little{padding:4px 8px 0;grid-template:"art texts" 128px/128px auto}.song.little>.img-wrapper>img{width:128px;height:128px}.header{display:flex;justify-content:space-between;align-content:center}.header p{margin:auto 0;line-height:1}.header{font-weight:bold;padding:0 8px;background:rgba(119,177,157,.9)}#live{background:rgba(190,221,211,.9);color:#000}#recents{margin:0;padding:4px 0 8px 0;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 */