:root {color-scheme:light dark;font:13px system-ui,sans-serif}
* {box-sizing:border-box}
body {margin:0;background:Canvas;color:CanvasText}
main {height:100vh;display:flex;flex-direction:column;padding:12px;gap:10px}
#viewport {flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:color-mix(in srgb,CanvasText 5%,Canvas);border-radius:8px}
canvas {max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated}
nav {display:flex;gap:6px;flex-wrap:wrap}
button {font:inherit;padding:7px 12px;border:1px solid GrayText;border-radius:6px;background:ButtonFace;color:ButtonText;cursor:pointer}
button:disabled {opacity:.45;cursor:default}
#status {margin:0;min-height:18px;overflow-wrap:anywhere}
@media(max-width:300px) {main {padding:6px;gap:6px}button {padding:4px 7px}}