* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: white; color: #1f4e79; font-family: sans-serif; }
body { display: grid; place-items: center; min-height: 100dvh; }
main { width: min(100vw, calc(100dvh * 16 / 9)); }
canvas:focus-visible { outline: 2px solid #1f4e79; outline-offset: -2px; }
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#fps { position: absolute; inset-inline-end: 8px; inset-block-start: 8px; padding: 3px 6px; border-radius: 3px; background: #102b43e6; color: white; font: 12px/1.4 monospace; font-variant-numeric: tabular-nums; pointer-events: none; }
#status, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }