:root { color-scheme: dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #15191f; }
#viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none; background: #000; }
#screen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; touch-action: none; }
#screen canvas { margin: 0 !important; }
#status { position: fixed; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; background: #15191fe8; color: #f4f4f4; }
#status[hidden], [hidden] { display: none !important; }
#tools { position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); display: flex; gap: 6px; }
button { border: 1px solid #ffffff30; background: #252c37e8; color: #fff; border-radius: 12px; padding: 10px 14px; font: inherit; touch-action: manipulation; }
button[aria-pressed="true"] { background: #405878; }
#menu { position: fixed; right: 10px; bottom: 64px; display: flex; flex-wrap: wrap; gap: 6px; max-width: 260px; }
#input { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: .01; padding: 0; border: 0; font-size: 16px; }
