*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#111827;overflow:hidden;font-family:Arial,sans-serif}main{width:100%;height:100%;display:grid;place-items:center}canvas{display:block;width:min(100vw,177.77777778vh);height:min(56.25vw,100vh);object-fit:contain}.controls{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:100px;background:#111827dd;color:#cbd5e1;opacity:0;pointer-events:none;transition:opacity .25s;font-size:12px;white-space:nowrap}body.controls-visible .controls,body.keyboard-controls .controls:focus-within{opacity:1;pointer-events:auto}body:not(.controls-visible):not(.keyboard-controls){cursor:none}.controls button{appearance:none;border:1px solid #ffffff40;border-radius:30px;padding:7px 13px;background:#ffffff14;color:white;font:inherit;cursor:pointer}.controls button:hover{background:#0284c7}body.export .controls{display:none!important}:fullscreen{background:#111827}