*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);background:#f4f5f6;color:#232c32;font:14px/1.5 "Segoe UI","Microsoft YaHei",sans-serif}button{font:inherit;min-width:44px;min-height:44px;padding:9px 15px;border:1px solid #d9dfe2;border-radius:5px;background:#fff;color:#303b42;cursor:pointer;touch-action:manipulation;white-space:nowrap}button:hover{background:#eaf0f2;border-color:#a8b9c0}button:focus-visible{outline:2px solid #247183;outline-offset:2px}button[aria-pressed=true]{color:#15566a;border-color:#a8c7cf;background:#e4eff2}button:disabled{opacity:.45;cursor:wait}[hidden]{display:none!important}header{padding:16px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e4e7;background:#fafbfb}h1{font-size:19px;font-weight:600;letter-spacing:.02em;margin:0}header p{font-size:12px;color:#6b757c;margin:2px 0 0}#viewport{position:relative;min-height:0;min-width:0;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}#loading,#error{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:min(350px,85%);padding:25px;background:#fff;border:1px solid #d9dfe2;border-radius:6px;text-align:center}#loading p{margin:0 0 14px}progress{width:100%;height:5px;accent-color:#247183}small{display:block;color:#737e84;font-size:12px;margin-top:10px}#error-message{white-space:pre-line;margin-top:0}#display-notice{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:4;background:#fff;border:1px solid #d9dfe2;max-width:90%;padding:10px 15px;border-radius:5px;font-size:12px}footer{padding:12px 28px 14px;background:#fafbfb;border-top:1px solid #e0e4e7;display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}nav,.actions{display:flex;align-items:center;gap:6px}.divider{height:22px;width:1px;background:#d9dfe2;margin:0 3px}.caption{width:100%;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#6b757c}.touch-help{display:none}.immersive header{padding:4px 12px;justify-content:flex-end}.immersive header>div{display:none}.immersive footer{padding-top:7px;padding-bottom:7px}.immersive .caption{display:none}@media(pointer:coarse){.desktop-help{display:none}.touch-help{display:inline}}@media(max-width:900px){header{padding:12px 18px}footer{padding:10px 18px}button{padding:9px 12px}nav{flex:1}.actions{margin-left:auto}}@media(max-width:620px){header{padding:10px 14px}h1{font-size:17px}header p{font-size:12px}footer{padding:8px 10px max(8px,env(safe-area-inset-bottom));gap:7px}nav{display:grid;grid-template-columns:repeat(4,1fr);width:100%;flex-basis:100%;gap:5px}nav .divider{display:none}nav [data-view=optics],nav [data-view=connection]{grid-column:span 2}.actions{width:100%;gap:5px}.actions button{flex:1}button{padding:8px;font-size:13px}.caption{font-size:12px;justify-content:center}.caption #status{display:none}}@media(max-height:500px) and (min-width:621px){header{padding:5px 14px}header p,.caption{display:none}h1{font-size:16px}footer{padding:6px 10px;gap:5px}button{padding:7px 8px;font-size:12px}nav,.actions{gap:4px}.divider{margin:0}}