*{box-sizing:border-box}html{overflow:hidden;overscroll-behavior:none;touch-action:pinch-zoom;background:#090b0c;color:#f1efec}body{margin:0;font:12px/1.4 ui-monospace,monospace}.view{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}canvas,.crt{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#rain,.crt{pointer-events:none}.crt{background:radial-gradient(ellipse at center,transparent 44%,#000a 115%),repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#ff100004 0 1px,#00ffff03 1px 2px,transparent 2px 3px)}header,footer{position:absolute;inset-inline:clamp(18px,4vw,68px);display:flex;justify-content:space-between;align-items:end;text-shadow:0 2px 12px #000;pointer-events:none}header{top:max(25px,env(safe-area-inset-top));align-items:center}footer{bottom:max(32px,env(safe-area-inset-bottom))}.rogue-logo{display:block;width:clamp(86px,13vw,138px);height:auto;flex:none}#index{color:#ff5058}header span,footer span{font-size:10px;letter-spacing:.15em}h1{margin:3px 0 0;font:750 clamp(24px,4vw,52px)/1.05 system-ui,sans-serif;letter-spacing:-.06em}.track{position:absolute;bottom:0;width:100%;height:2px;background:#ffffff24}#progress{width:100%;height:100%;background:#e32937;transform:scaleX(0);transform-origin:left}#fallback{position:absolute;inset:45% 10% auto;text-align:center}@media(max-width:500px){header span,footer span{font-size:8px}}header{align-items:flex-start}.quality{pointer-events:auto;display:grid;gap:4px;text-align:right;justify-items:end}.quality label{font-size:9px;letter-spacing:.14em}.quality select{color:#f1efec;background:#171b1deb;border:1px solid #ffffff38;font:inherit;padding:4px 9px;border-radius:3px}.quality span{font-size:9px;letter-spacing:.015em;color:#d0d4d5}