:root{--floor-bg: #07000f;--tile-bg: #180a2c;--flash: #ff2fb9}*{box-sizing:border-box}html,body{margin:0;padding:0;overflow:hidden;background:var(--floor-bg);color:#fff}body{width:100vw;height:100dvh}.honk-wonk{font-family:Honk,system-ui;font-optical-sizing:auto;font-weight:400}#play-button{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;border:0;cursor:pointer;font-family:Honk,system-ui;font-size:clamp(2rem,9vw,7rem);color:#fff;background:radial-gradient(circle at 50% 45%,#ff2fb9,#5c00a3 45%,#07000f);background-size:140% 140%;animation:driftBackground 8s ease-in-out infinite alternate}#play-button:disabled{cursor:progress}@keyframes driftBackground{0%{background-position:0% 0%}to{background-position:100% 100%}}.stage{position:relative;width:100%;height:100%}.discofloor{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(var(--cols, 6),1fr);grid-template-rows:repeat(var(--rows, 4),1fr);gap:3px;padding:3px;background:var(--floor-bg)}.tile{position:relative;overflow:hidden;background:var(--tile-bg);transition:background-color 90ms linear,box-shadow 90ms linear}.tile.lit{background-color:var(--flash);box-shadow:0 0 2.5rem color-mix(in srgb,var(--flash) 70%,transparent)}.tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--flash);mix-blend-mode:screen;opacity:0;transition:opacity 90ms linear;pointer-events:none}.tile.lit:after{opacity:.32}.tile-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;animation:dropIn .22s cubic-bezier(.2,1.6,.4,1)}.tile-image.leaving{animation:dropOut .32s ease-in forwards}.tile-image--cell{animation:cellIn .18s ease-out}.tile-image--gray{transition:opacity 90ms linear}.tile-image--gray:not(.leaving){animation:none}.tile.lit .tile-image--gray{opacity:0}@keyframes dropIn{0%{opacity:0;transform:scale(.3) rotate(-8deg)}to{opacity:1;transform:scale(1)}}@keyframes cellIn{0%{opacity:0;transform:scale(.85)}}@keyframes dropOut{to{opacity:0;transform:scale(1.4)}}.lyrics{position:absolute;inset:auto 0 0;z-index:1;margin:0;padding:1rem 2rem 2.5rem;font-size:clamp(1.75rem,5vw,4rem);line-height:1.1;text-align:center;text-shadow:0 0 1.5rem rgb(0 0 0 / .9);background:linear-gradient(to top,rgb(7 0 15 / .85),transparent);pointer-events:none}.highlighted{color:#ffe600}.credit{position:absolute;inset:1rem 1rem auto;z-index:1;margin:0;max-width:44ch;font:.95rem/1.35 system-ui,sans-serif;opacity:0;text-shadow:0 0 .75rem rgb(0 0 0 / .9);pointer-events:none}.credit-title{display:block;font-family:Honk,system-ui;font-size:1.6rem}.audio-player{position:fixed;inset:auto auto .5rem .5rem;z-index:1;width:min(20rem,50vw);opacity:.25;transition:opacity .2s}.audio-player:hover,.audio-player:focus-within{opacity:1}@media (prefers-reduced-motion: reduce){.tile,.tile-image,#play-button{animation:none;transition:none}}