*{box-sizing:border-box}html,body{color:#e8f4ff;background:#02101f;height:100%;margin:0;font-family:Trebuchet MS,system-ui,sans-serif}.wrap{flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:100%;padding:12px;display:flex}.hud{background:#0a2a47;border:2px solid #1d5a87;border-radius:8px;justify-content:space-between;gap:12px;width:min(960px,100%);padding:8px 16px;font-size:18px;display:flex}.hud b{color:#ffd6f0}.stage{aspect-ratio:16/9;width:min(960px,100%);position:relative}canvas{width:100%;height:100%;image-rendering:pixelated;border:2px solid #1d5a87;border-radius:8px;display:block}.overlay{text-align:center;text-shadow:0 2px #000;flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.overlay[hidden]{display:none}.overlay h1{color:#d6a4ff;margin:0 0 8px;font-size:48px}.overlay h2{color:#ffd6f0;margin:0 0 8px;font-size:40px}.overlay p{margin:6px 0;font-size:20px}.controls{text-align:left;background:#051932bf;border-radius:8px;margin:10px 0;padding:12px 20px;font-size:17px;line-height:1.8;list-style:none}kbd{text-align:center;background:#12345a;border:1px solid #9ec9ff;border-bottom-width:3px;border-radius:4px;min-width:24px;margin:0 2px;padding:0 6px;font-family:inherit;font-size:15px;display:inline-block}.record{color:#ffe27a}.blink{animation:1.2s steps(2,start) infinite blink}@keyframes blink{to{visibility:hidden}}