*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:#f5f7fa;color:#17212b;font:16px system-ui,sans-serif}main{height:100svh;min-height:100vh;padding:clamp(8px,2vw,20px);display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr);gap:clamp(6px,1.2vw,12px);overflow:hidden}h1{margin:0;font-size:1.5rem}p{margin:.3rem 0}.controls,.camera-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.camera-controls{background:#edf2f6;padding:9px;border-radius:6px}.camera-controls strong{margin-right:4px}button{border:1px solid #8192a3;border-radius:6px;background:#fff;padding:9px 12px;font:inherit;cursor:pointer}.hud{background:#e4ebf1;padding:9px;border-radius:6px}.canvas{min-height:0;border:1px solid #b8c5d0;border-radius:8px;overflow:hidden}.canvas>div{height:100%}canvas{touch-action:none}