@font-face{font-family:Pixel;src:url('/assets/PressStart2P-Regular.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;background:#26092e;color:#fff2c6;font-family:Pixel,monospace}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%}body{overflow-x:hidden}.scene{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;background:#26092e}
/* All artwork is the supplied poster, displayed through crop windows, never redrawn. */
.texture{position:absolute;inset:0;z-index:-1;background-image:url('/assets/indie-road-poster.png');background-size:auto 400%;background-position:center top;clip-path:inset(0)}

.brand{position:absolute;width:min(100vw,1100px);aspect-ratio:941/520;left:50%;top:46.9%;transform:translate(-50%,-50%);overflow:hidden;animation:float 4s steps(4,end) infinite}
.brand img{display:block;width:100%;height:auto;transform:translateY(-32%);user-select:none;pointer-events:none}
.continuation{position:absolute;width:min(100vw,650px);aspect-ratio:941/120;right:2.4vw;bottom:7.3svh;overflow:hidden;animation:continue 2.8s steps(2,end) infinite}
.continuation img{display:block;width:100%;height:auto;transform:translateY(-87.2%);user-select:none;pointer-events:none}
.controls{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));display:flex;gap:10px;flex-wrap:wrap}
button{min-height:44px;padding:12px 9px;background:transparent;color:#c7a9c5;border:1px solid transparent;font:8px/1.6 Pixel,monospace;letter-spacing:.03em;cursor:pointer;touch-action:manipulation}button:hover{color:#fff2c6}button:focus-visible{outline:2px solid #fc5b88;outline-offset:3px}button[aria-pressed=true]{color:#ff6b96}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 5px))}}
@keyframes continue{0%,80%,100%{transform:translateX(0)}90%{transform:translateX(4px)}}
.scene.motion-off *{animation:none!important}
@media(max-width:600px){.brand{width:100vw;top:47.6%}.continuation{width:100vw;right:0;bottom:5.5svh}.controls{left:14px;bottom:max(14px,env(safe-area-inset-bottom));gap:4px}button{font-size:7px;padding:10px 8px}}
@media(max-height:500px) and (min-width:601px){.brand{width:min(68vw,720px);top:43%}.continuation{width:460px;bottom:7svh}}
@media(prefers-reduced-motion:reduce){.scene *{animation:none!important}}