:root{color-scheme:dark;font:16px system-ui;background:#080e12;color:#eae9db}*{box-sizing:border-box}body{margin:0}main{max-width:1000px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;gap:20px}h1{font-size:22px;letter-spacing:.04em}#status{color:#a7c1ba;font-size:14px}#display{background:#000;border:1px solid #2a4a46;border-radius:8px;overflow:hidden;margin:16px auto;max-width:960px}canvas{display:block;width:100%;aspect-ratio:4/3;image-rendering:pixelated;outline:none}canvas:focus-visible{outline:2px solid #f4c246;outline-offset:-2px}nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}button,nav a{font:inherit;color:inherit;background:#15302f;border:1px solid #34544e;border-radius:5px;padding:10px 16px;text-decoration:none;cursor:pointer}button:hover,nav a:hover{background:#254740}button:disabled{opacity:.5}.help{text-align:center;font-size:14px;line-height:1.8;color:#9cb0ab}.touch{display:flex;justify-content:space-around;gap:8px;flex-wrap:wrap}.touch button{touch-action:none;user-select:none;margin:3px;min-width:44px}#display:fullscreen{display:flex;align-items:center;justify-content:center;border:0;border-radius:0;max-width:none}#display:fullscreen canvas{width:min(100vw,133.333vh);height:min(100vh,75vw)}@media(pointer:fine){.touch{display:none}}@media(max-width:600px){main{padding:12px}header{align-items:start;flex-direction:column;gap:0}nav{gap:5px}nav button,nav a{padding:8px 10px}}