*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#080a0d;color:#eee;font:15px system-ui}body{overflow:hidden}#stage{position:fixed;inset:0;display:grid;place-items:center}canvas{position:absolute;width:100%;height:100%}#portrait{width:min(100vw,66.6667dvh);height:min(100dvh,150vw)}[hidden]{display:none!important}#controls{position:fixed;z-index:2;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-height:75dvh;overflow:auto;padding:18px;background:#0b0d12f5;border:1px solid #61503b;border-radius:14px;max-width:420px;margin:auto}h1{font-size:16px;letter-spacing:4px;margin:0 0 12px}label{display:block;font-size:12px;margin-bottom:6px}select,button{min-height:44px;font:inherit;color:#eee;background:#282328;border:1px solid #6b5555;border-radius:7px;padding:10px;width:100%;margin:4px 0}button[aria-pressed=true]{background:#68232f}#status,details{font-size:12px;line-height:1.6;color:#d4c4b0}meter{width:100%;height:10px}#show{position:fixed;right:12px;top:max(12px,env(safe-area-inset-top));width:44px;z-index:3;opacity:.45}button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #e9bd80;outline-offset:3px}