:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#bfc7bc;background:#111513}*{box-sizing:border-box}body{margin:0}main{width:min(100% - 32px,960px);margin:24px auto}header{text-align:center;margin-bottom:18px}header span{font-size:12px;letter-spacing:9px;color:#86a4a0}h1{font-size:clamp(24px,5vw,42px);letter-spacing:4px;margin:4px 0;color:#d4d9c7}header p{font-size:12px;color:#8d9c92;margin:5px}#stage{position:relative;width:100%;aspect-ratio:4/3;background:#050806;box-shadow:0 0 0 1px #3a453c,0 18px 60px #0007;overflow:hidden}canvas,#menu img{width:100%;height:100%;image-rendering:pixelated;display:block}canvas:focus{outline:none}#menu,#overlay{position:absolute;inset:0}#menu[hidden],#overlay[hidden]{display:none}#menu-content{position:absolute;inset:27% 15% 8%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}button{font:600 12px system-ui;letter-spacing:1px;background:#202923;border:1px solid #6f7e6b;color:#e1e4cd;padding:11px 18px;cursor:pointer}button:hover{background:#354439}button:disabled{opacity:.5;cursor:wait}#menu-content button{min-width:220px;background:#111b17dd}#status{font:12px monospace;color:#d9ddc7;text-shadow:1px 1px #000}#overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#09110def;padding:12%;text-align:center}#overlay-text{white-space:pre-line;font:clamp(12px,2vw,18px)/1.4 monospace;max-width:38ch}#overlay h2{font:18px monospace;color:#d7dbae}.toolbar{display:flex;justify-content:center;gap:8px;margin-top:16px}.controls{text-align:center;font-size:12px;line-height:2;color:#93a393}kbd{font:11px monospace;color:#d3dcc9}footer{display:flex;justify-content:space-between;gap:14px;font-size:11px;margin-top:22px;flex-wrap:wrap;color:#778779}a{color:#a4b5a0}#touch{display:none;justify-content:space-between;align-items:center;gap:12px;touch-action:none}.dpad{display:grid;grid-template-columns:48px 48px 48px;grid-template-rows:48px 48px;gap:4px}.dpad button{padding:0;font-size:22px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}#touch button{user-select:none;touch-action:none}#error{border:1px solid #bf755e;padding:16px;color:#edb29a}@media(pointer:coarse){#touch{display:flex}.controls{font-size:11px}main{margin-top:12px}}@media(max-width:500px){main{width:calc(100% - 16px)}button{padding:10px}#menu-content button{min-width:160px;font-size:10px}#menu-content{gap:5px}#status{font-size:9px}footer{font-size:10px}}

#stage:fullscreen{display:grid;place-items:center;background:#000}#stage:fullscreen canvas{width:min(100vw,133.333vh);height:auto;aspect-ratio:4/3}