* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: #101e25; overflow: hidden; overscroll-behavior: none; }
main { --zoom: 1; position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
main:fullscreen { width: 100%; height: 100%; background: #101e25; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; outline: none; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
canvas:focus-visible { outline: 1px solid #cbb486; outline-offset: -1px; }
#debug { position: absolute; bottom: calc(var(--view-bottom, 0px) + 14px * var(--zoom)); left: calc(var(--view-left, 0px) + 14px * var(--zoom)); min-height: 24px; height: calc(22px * var(--zoom)); padding: 0 calc(8px * var(--zoom)); border: 1px solid #36535a; box-shadow: 2px 2px 0 #0a1820; color: #a0b9b7; background: #172d36; font: max(10px, calc(10px * var(--zoom))) monospace; cursor: pointer; touch-action: manipulation; }
#debug:hover, #debug:focus-visible { border-color: #e0b66d; color: #ffdfa0; outline: none; }
#debug[aria-pressed="true"] { background: #e0b66d; color: #0a1820; }