:root{font-family:system-ui,sans-serif;color:#f2f5f8;background:#1d242c}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}#stage{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}canvas{display:block;width:min(100vw,160vh);height:min(62.5vw,100vh);outline:none}header{position:fixed;z-index:5;top:16px;left:20px;right:20px;pointer-events:none}strong{font-size:14px;letter-spacing:.14em;text-shadow:0 1px 5px #000}strong span{display:block;font-size:10px;color:#bbdded;margin-top:4px}nav{display:flex;position:absolute;right:0;top:0;gap:6px;pointer-events:auto}button,select{font:12px system-ui;padding:8px 10px;background:#12212eea;color:#f5f8fa;border:1px solid #ffffff50;border-radius:5px;cursor:pointer}button:disabled,select:disabled{opacity:.5}#metrics{font:12px ui-monospace,monospace;text-shadow:0 1px 5px #000}aside{position:fixed;z-index:5;left:20px;bottom:70px;font-size:11px;line-height:1.6;text-shadow:0 1px 4px #000}#status{position:fixed;z-index:5;bottom:14px;left:20px;right:20px;max-width:1000px;margin:0;padding:10px 12px;background:#101c28df;border-radius:5px;font-size:12px}@media(max-width:1000px){nav{position:static;margin-top:10px;flex-wrap:wrap}button{font-size:10px;padding:6px}}