*{box-sizing:border-box}body{margin:0;background:#0c1420;color:#e8eff7;font:16px system-ui}main{max-width:1100px;margin:auto;padding:24px}header span{color:#6de5c0;font-size:12px;letter-spacing:2px}h1{font-size:36px;margin:12px 0}p{color:#adbdce;line-height:1.5}section{margin:20px 0}#setup,#simcontrols{display:flex;gap:16px;flex-wrap:wrap}label{display:flex;flex-direction:column;gap:8px;flex:1;min-width:190px}input,select,button{padding:12px;border:1px solid #34475e;border-radius:8px;background:#172438;color:inherit}button{cursor:pointer;background:#126754}button:disabled{opacity:.4;cursor:default}#viewport{position:relative;aspect-ratio:16/9;background:#02060c;overflow:hidden;border:1px solid #34475e;border-radius:12px}canvas{position:absolute;width:100%;height:100%;left:0;top:0}#badge{position:absolute;top:12px;left:12px;background:#081222dc;padding:8px;border-radius:6px;font-size:12px}.panel{padding:18px;background:#142033;border-radius:12px}.panel button{margin:4px}body.live #viewport{height:65vh;aspect-ratio:auto}body.live #simcontrols{display:none}@media(max-width:600px){main{padding:14px}h1{font-size:28px}}

#preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#preview[hidden]{display:none}#status{white-space:pre-wrap}body.live #viewport{height:min(65vh,680px)}
#setup #status{flex-basis:100%;margin:0;padding:12px;border-radius:8px;background:#263448;color:#fff}#start[disabled]::after{content:' · esperando…'}

#setup .actions{display:flex;gap:10px;flex-basis:100%}#setup .actions button{flex:1}#setup #requirements{flex-basis:100%;margin:0}#setup #start,#setup #stop{min-height:48px}

#diagnostics{flex-basis:100%;color:#b4cad8}

/* XR8/Three.js writes inline pixel sizes; keep display size within the viewport. */
#camera{width:100%!important;height:100%!important}