:root{font-family:Segoe UI,Microsoft YaHei,sans-serif;color:#f0f2f2;background:#181a1c;color-scheme:dark;letter-spacing:0}*{box-sizing:border-box}body{margin:0}#viewer{position:relative;width:100%;height:100dvh;min-height:320px;overflow:hidden}canvas{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}header,footer{position:absolute;z-index:2;left:0;right:0;display:flex;align-items:center;gap:16px;background:#181a1cf0}header{top:0;min-height:70px;padding:max(12px,env(safe-area-inset-top)) 24px 12px;border-bottom:1px solid #343739}h1{margin:0;font-size:20px;font-weight:600;white-space:nowrap}h1 span{color:#6bd5b4}select{min-width:0;width:180px;height:42px;margin-left:12px;padding:0 10px;border:1px solid #484c50;border-radius:4px;background:#24272a;color:inherit;font:inherit;font-size:14px}button{height:44px;border:1px solid #484c50;border-radius:4px;background:#292c30;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;font:inherit;font-size:14px}button:hover:not(:disabled){background:#383c40}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #f0bc67;outline-offset:3px}button:disabled{opacity:.45;cursor:default}button svg{width:20px;height:20px}.primary{margin-left:auto;padding:0 16px;background:#247b60;border-color:#5bc99e;min-width:124px}.primary:hover:not(:disabled){background:#2c9372}.icon{width:44px}footer{bottom:0;padding:12px 24px max(12px,env(safe-area-inset-bottom));min-height:70px;border-top:1px solid #343739}output{font-variant-numeric:tabular-nums;font-size:13px;color:#c4c9cc;min-width:36px}#seek{flex:1;min-width:20px;height:28px;margin:0;accent-color:#6bd5b4;cursor:pointer}#fps{min-width:62px;text-align:right}#status{position:absolute;z-index:2;top:88px;left:24px;font-size:13px;color:#c4c9cc;pointer-events:none}#mr-status{position:absolute;z-index:2;top:88px;right:24px;font-size:13px;color:#f0bc67;pointer-events:none}#error{position:absolute;z-index:3;top:88px;right:24px;max-width:min(420px,calc(100% - 48px));padding:12px 16px;background:#3c2527;border-left:3px solid #e99983;font-size:14px;line-height:1.6;overflow-wrap:anywhere}[hidden]{display:none!important}.xr-active header select,.xr-active #reset{display:none}.xr-active #status,.xr-active #mr-status{display:none}.xr-active footer{right:auto;width:min(600px,100%)}@media(max-width:600px){header{gap:10px;padding-left:12px;padding-right:12px}h1{font-size:17px}select{width:120px;margin-left:0;font-size:12px}.primary{min-width:100px;padding:0 10px;font-size:13px}footer{padding-left:12px;padding-right:12px;gap:8px}#status{left:12px}#mr-status{top:110px;left:12px;right:12px}#fps{display:none}#error{left:12px;right:12px;max-width:none;top:114px}}