:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; touch-action: none; }
#stage { width: 100%; height: 100%; display: grid; place-items: center; position: relative; background: #000; }
#viewport { position: relative; width: 640px; height: 400px; max-width: 100%; max-height: 100%; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#canvas { opacity: 0; outline: none; cursor: none; touch-action: none; }
#display { pointer-events: none; }
#loading { position: fixed; z-index: 2; left: 56px; right: 56px; bottom: 100px; height: 30px; overflow: visible; background: #7e7e7e; }
#loading-label { position: absolute; left: 0; right: 0; bottom: calc(100% + 36px); color: #bfbfbf; font-family: monospace; font-size: 16px; line-height: 18px; text-align: center; white-space: nowrap; }
#loading-credit { position: fixed; left: 0; right: 0; bottom: 24px; color: #7e7e7e; font-family: monospace; font-size: 12px; line-height: 15px; text-align: center; white-space: nowrap; }
#loading-credit a { color: inherit; text-decoration: underline; }
#loading-progress { width: 0; height: 100%; background: #bfbfbf; transition: width 120ms linear; }
#loading[hidden] { display: none; }
#download-indicator { position: fixed; z-index: 4; top: 8px; right: 8px; width: 40px; height: 24px; pointer-events: none; }