belowjs 1.5.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/README.md +45 -7
  3. package/dist/belowjs.css +1 -1
  4. package/dist/belowjs.js +7423 -2874
  5. package/package.json +3 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,42 @@ All notable changes to BelowJS will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [1.7.0] - 2026-02-15
9
+
10
+ ### Added
11
+ - BelowJS support for Cesium 3D Tiles loading via the NASA-AMMOS 3DTilesRendererJS library, including tiled models exported from Agisoft Metashape.
12
+ - `tileset` example configured with the Denton Holme and Macedon 2023 dataset.
13
+ - `examples/tileset/convert-3tz.sh` conversion script for Agisoft Metashape `.3tz` exports, producing a web-hostable tileset folder with root `tileset.json`.
14
+
15
+ ### Changed
16
+ - Examples docs describe six production-ready viewers.
17
+
18
+ ### Fixed
19
+ - Removed ARCore lint warnings from unused catch variables.
20
+
21
+ ---
22
+
23
+ ## [1.6.0] - 2026-02-15
24
+
25
+ ### Added
26
+ - Programmatic comfort-mode APIs (work in and out of active VR sessions):
27
+ - `ModelViewer`: `setComfortMode(enabled)`, `toggleComfortMode()`, `getComfortMode()`
28
+ - `BelowViewer`: `setVRComfortMode(enabled)`, `toggleVRComfortMode()`, `isVRComfortModeEnabled()`
29
+ - Per-model measurement availability via optional `models[modelKey].measurable` (defaults to `true` for backward compatibility)
30
+ - Non-measurable model UX for measurement panel: stays visible but disabled/unusable, blocks desktop/VR measurement input, and shows native tooltip text (`This model is marked as not measurable`)
31
+
32
+ ### Changed
33
+ - Comfort toggle styling tightened; active state keeps a clear green ring
34
+ - Comfort teleport visuals tuned: thinner arc, lower marker/floor intensity, and range adjusted to 1.5m-20m
35
+
36
+ ### Fixed
37
+ - Prevent unintended switches to dive mode during immersive AR sessions (keyboard/controller toggles are ignored in AR, and AR session start enforces survey mode)
38
+ - Graceful viewer recovery after tab focus/context interruptions: auto-retry model loading on refocus and recover from `webglcontextlost`/`webglcontextrestored` blank-screen states
39
+ - Programmatic comfort-mode changes now sync immediately to the comfort glyph during active VR sessions
40
+ - Double-click focus now behaves correctly with desktop measurement enabled: measurement mode owns double-click interaction and focus animation can be interrupted by user input
41
+
42
+ ---
43
+
8
44
  ## [1.5.0] - 2026-02-06
9
45
 
10
46
  ### Added
@@ -14,6 +50,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
14
50
  - `stereo()` console command for enabling/disabling stereo mode and adjusting eye separation
15
51
  - Z key to toggle between dive mode and studio mode
16
52
  - H key to take screenshot
53
+ - Experimental 3D Tiles streaming loader for massive datasets
54
+ - New `tileset` example (`npm run dev:tileset`) with a NASA-AMMOS sample dataset default and URL override support
17
55
 
18
56
  ### Changed
19
57
  - Material conversion upgraded from MeshLambertMaterial to MeshStandardMaterial with shipwreck-appropriate PBR defaults (roughness 0.8, metalness 0.3)
@@ -25,6 +63,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
25
63
  - VR button visibility management with fly mode controls
26
64
  - Support for deprecated KHR_materials_pbrSpecularGlossiness GLTF extension by converting to standard PBR materials
27
65
  - Support for logarithmicDepthBuffer renderer option (suppresses ConfigValidator warning)
66
+ - 3D Tiles auto-centering and auto-framing when streaming tiles are not fully available on first bounds pass
28
67
 
29
68
  ---
30
69
 
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  📖 **[Full Documentation & Examples](https://patrick-morrison.github.io/belowjs/)**
8
8
 
9
- > **Current Version:** `1.5.0` - Fly mode controls, experimental stereoscopic viewing, and improved material rendering.
9
+ > **Current Version:** `1.7.0` - Tiled-model workflow documentation and tileset example refinements.
10
10
 
11
11
  **Dive Shipwrecks in Virtual Reality**
12
12
 
@@ -39,7 +39,8 @@ import 'belowjs/dist/belowjs.css';
39
39
  const config = {
40
40
  models: {
41
41
  'kxi': {
42
- url: 'shipwreck.glb'
42
+ url: 'shipwreck.glb',
43
+ measurable: true // optional, defaults to true
43
44
  }
44
45
  }
45
46
  };
@@ -59,11 +60,11 @@ This gives you a complete VR-ready 3D viewer with dive lighting, measurement too
59
60
  {
60
61
  "imports": {
61
62
  "three": "https://cdn.jsdelivr.net/npm/three@0.179.1/+esm",
62
- "belowjs": "https://cdn.jsdelivr.net/npm/belowjs@1.5.0/dist/belowjs.js"
63
+ "belowjs": "https://cdn.jsdelivr.net/npm/belowjs@1.7.0/dist/belowjs.js"
63
64
  }
64
65
  }
65
66
  </script>
66
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/belowjs@1.5.0/dist/belowjs.css">
67
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/belowjs@1.7.0/dist/belowjs.css">
67
68
  <style>
68
69
  body, html { margin: 0; padding: 0; overflow: hidden; }
69
70
  </style>
@@ -75,7 +76,8 @@ This gives you a complete VR-ready 3D viewer with dive lighting, measurement too
75
76
  const config = {
76
77
  models: {
77
78
  'kxi': {
78
- url: 'shipwreck.glb'
79
+ url: 'shipwreck.glb',
80
+ measurable: true // optional, defaults to true
79
81
  }
80
82
  }
81
83
  };
@@ -97,7 +99,7 @@ This gives you a complete VR-ready 3D viewer with dive lighting, measurement too
97
99
 
98
100
  ## Examples
99
101
 
100
- Three different examples are included:
102
+ Examples are included:
101
103
 
102
104
  ```bash
103
105
  git clone https://github.com/patrick-morrison/belowjs
@@ -108,12 +110,14 @@ npm install && npm run build
108
110
  - `npm run dev` — Full-featured viewer with model selection and all systems enabled
109
111
  - `npm run dev:dragdrop` — File loader with drag-and-drop GLB support and custom UI elements
110
112
  - `npm run dev:embed` — Lightweight viewer designed for iframe embedding
113
+ - `npm run dev:tileset` — 3D Tiles streaming example for large datasets
111
114
 
112
115
  ### Live Examples
113
116
 
114
117
  - [Basic Viewer](https://patrick-morrison.github.io/belowjs/examples/basic/) — Full-featured multi-model viewer
115
118
  - [Drag & Drop](https://patrick-morrison.github.io/belowjs/examples/dragdrop/) — File loader with custom UI; recommended path for Meta Quest Link desktop streaming
116
119
  - [Embed Viewer](https://patrick-morrison.github.io/belowjs/examples/embed/) — Lightweight iframe-ready viewer
120
+ - [Tileset Viewer](https://patrick-morrison.github.io/belowjs/examples/tileset/) — 3D Tiles streaming example
117
121
 
118
122
  ## Installation
119
123
 
@@ -160,7 +164,22 @@ import { ModelViewer } from 'belowjs';
160
164
  import 'belowjs/dist/belowjs.css';
161
165
 
162
166
  new ModelViewer('#container', {
163
- models: { 'ship': { url: 'model.glb', name: 'Historic Ship' } }
167
+ models: {
168
+ 'ship': { url: 'model.glb', name: 'Historic Ship', measurable: true }
169
+ }
170
+ });
171
+ ```
172
+
173
+ ### Per-Model Measurement Availability
174
+ ```javascript
175
+ new ModelViewer('#container', {
176
+ models: {
177
+ 'draftSite': {
178
+ url: 'draft-site.glb',
179
+ name: 'Draft Site',
180
+ measurable: false // disable measurements for uncertain scale
181
+ }
182
+ }
164
183
  });
165
184
  ```
166
185
 
@@ -192,6 +211,25 @@ new ModelViewer(document.body, {
192
211
 
193
212
  Enable `enableScreenshot` to add a button that captures the scene without UI overlays.
194
213
 
214
+ ### 3D Tiles (Experimental)
215
+ BelowJS can stream 3D Tiles datasets for large environments. Tilesets still require a `tileset.json` root plus streamed tile content hosted alongside it. Point a model at the `tileset.json` and set `type: 'tileset'`:
216
+
217
+ ```javascript
218
+ new ModelViewer('#container', {
219
+ models: {
220
+ 'site': {
221
+ url: 'https://example.com/tiles/site/tileset.json',
222
+ type: 'tileset',
223
+ name: 'Survey Site',
224
+ autoCenter: true,
225
+ maxTriangles: 1000000, // adaptive LOD target for VR
226
+ errorTarget: 16,
227
+ optimizedLoadStrategy: true
228
+ }
229
+ }
230
+ });
231
+ ```
232
+
195
233
  ### URL Parameter Integration
196
234
  The embed example supports URL parameters for dynamic configuration:
197
235
 
package/dist/belowjs.css CHANGED
@@ -1 +1 @@
1
- :root{--below-bg-color: #0a0a0a;--below-text-color: #e8e8e8;--below-accent-color: #64B5F6;--below-panel-bg: rgba(255, 255, 255, .08);--below-panel-border: rgba(255, 255, 255, .12);--below-panel-backdrop: blur(20px);--below-panel-shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2);--below-font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--below-bg-color);color:var(--below-text-color);font-family:var(--below-font-family)}.below-viewer-container{width:100%;height:100%;position:relative}.below-ui-root{position:absolute;inset:0;pointer-events:none}.below-ui-root>*{pointer-events:auto}.below-ui-root--stereo-left{right:50%}.below-ui-root--stereo-right{left:50%;pointer-events:none}.below-viewer-container canvas{display:block;width:100%;height:100%}.below-panel{background:var(--below-panel-bg);-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);border:1px solid var(--below-panel-border);border-radius:16px;box-shadow:var(--below-panel-shadow)}.model-selector{position:absolute;top:20px;right:20px;z-index:50;background:var(--below-panel-bg);-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);border:1px solid var(--below-panel-border);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:20px;min-width:220px;box-shadow:var(--below-panel-shadow);transition:all .3s ease}.model-selector:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0006,0 4px 12px #0000004d}.model-selector__dropdown{background:linear-gradient(145deg,#ffffff14,#ffffff0a);color:var(--below-text-color);border:1px solid rgba(255,255,255,.1);padding:16px 20px;font-size:23px;font-weight:500;font-family:inherit;cursor:pointer;outline:none;transition:all .3s ease;min-width:100%;border-radius:12px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 1px 3px #0000001a}.model-selector__dropdown:focus{border-color:var(--below-accent-color);box-shadow:0 0 0 2px #64b5f633,inset 0 1px 3px #0000001a}.model-selector__dropdown:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.model-selector__dropdown:disabled{cursor:not-allowed;opacity:.5}.model-selector__dropdown option{background:#1a1a1a;color:var(--below-text-color);padding:12px;font-size:14px}.loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;display:none;flex-direction:column;align-items:center;gap:20px;text-align:center}.loading-spinner{position:relative;display:flex;align-items:center;justify-content:center}.spinner-circle{position:relative;width:64px;height:64px}.spinner-path{position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid rgba(255,255,255,.15);border-top:3px solid #ffffff;border-radius:50%;animation:spinner-rotate 1.5s ease-in-out infinite}.spinner-percentage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);letter-spacing:-.5px}.loading-content{display:flex;flex-direction:column;gap:8px;align-items:center}.loading-model-name{font-size:18px;font-weight:500;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);letter-spacing:.3px}.loading-status{font-size:14px;font-weight:400;color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.6)}@keyframes spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator.light-theme .loading-model-name{color:#1a1a1a!important;text-shadow:0 1px 2px rgba(255,255,255,.8)!important}.loading-indicator.light-theme .loading-status{color:#1a1a1acc!important;text-shadow:0 1px 2px rgba(255,255,255,.6)!important}.loading-indicator.light-theme .spinner-percentage{color:#1a1a1a!important;text-shadow:0 1px 2px rgba(255,255,255,.8)!important}.loading-indicator.light-theme .spinner-path{border-color:#1a1a1a26!important;border-top-color:#1a1a1a!important}.status{position:absolute;bottom:20px;right:20px;background:#000000b3;padding:10px 15px;border-radius:8px;font-size:12px;z-index:10}@media (max-width: 768px){.model-selector{min-width:150px;padding:14px;gap:14px;border-radius:16px}.model-selector__dropdown{padding:10px 14px;font-size:15px;border-radius:10px}.model-selector__dropdown option{font-size:13px;padding:10px}}.screenshot-button{position:absolute;bottom:140px;right:20px;width:36px;height:36px;border-radius:50%;background:var(--below-panel-bg);border:1px solid var(--below-panel-border);color:var(--below-text-color);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:120;-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);box-shadow:0 4px 16px #0003;-webkit-user-select:none;user-select:none;transition:transform .3s ease,box-shadow .3s ease}.screenshot-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.screenshot-button svg{width:16px;height:16px;stroke-width:2.2}.screenshot-button.light-theme{background:#000c!important;border:1px solid rgba(0,0,0,.2)!important;color:#fffffff2!important;box-shadow:0 2px 12px #00000040!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;top:76px!important;bottom:auto!important;right:20px!important}.screenshot-button.light-theme:hover{background:#000000e6!important;border-color:#0000004d!important;color:#fff!important;transform:translateY(-2px) scale(1.02)!important;box-shadow:0 4px 20px #00000059!important}.screenshot-button.light-theme svg{stroke-width:2.2}.screenshot-button.no-measurement{bottom:70px!important}.fullscreen-button{position:absolute;bottom:90px;right:20px;width:36px;height:36px;border-radius:50%;background:var(--below-panel-bg);border:1px solid var(--below-panel-border);color:var(--below-text-color);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:120;-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);box-shadow:0 4px 16px #0003;-webkit-user-select:none;user-select:none;transition:transform .3s ease,box-shadow .3s ease}.fullscreen-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.fullscreen-button.light-theme{background:#000c!important;border:1px solid rgba(0,0,0,.2)!important;color:#fffffff2!important;box-shadow:0 2px 12px #00000040!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;top:20px!important;bottom:auto!important;right:20px!important}.fullscreen-button.light-theme:hover{background:#000000e6!important;border-color:#0000004d!important;color:#fff!important;transform:translateY(-2px) scale(1.02)!important;box-shadow:0 4px 20px #00000059!important}.fullscreen-button.no-measurement{bottom:20px!important}.fly-mode-indicator{position:absolute;inset:0;z-index:1002;display:none;pointer-events:none}.fly-mode-indicator.visible{display:block}.fly-mode-indicator .crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border:2px solid rgba(255,255,255,.6);border-radius:50%}.fly-mode-indicator .crosshair:before,.fly-mode-indicator .crosshair:after{content:"";position:absolute;background:#fff9}.fly-mode-indicator .crosshair:before{width:8px;height:2px;top:50%;left:50%;transform:translate(-50%,-50%)}.fly-mode-indicator .crosshair:after{width:2px;height:8px;top:50%;left:50%;transform:translate(-50%,-50%)}.fly-mode-indicator .hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:#000000d9;color:#e2e8f0;padding:10px 16px;border-radius:8px;font-size:12px;text-align:center;line-height:1.4;box-shadow:0 6px 20px #00000059}.fly-mode-indicator .fly-exit{display:inline-block;margin-top:4px;font-size:11px;opacity:.85}.fly-mode-indicator kbd{background:#334155;padding:2px 6px;border-radius:4px;font-family:monospace;margin:0 2px}@media (max-width: 768px){.fly-mode-indicator .hint{bottom:12px;font-size:11px;padding:8px 12px}.fly-mode-indicator .fly-exit{font-size:10px}}.info-panel{position:absolute;top:20px;left:20px;z-index:10;padding:20px 24px;max-width:340px;-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);background:var(--below-panel-bg);border:1px solid var(--below-panel-border);border-radius:16px;box-shadow:var(--below-panel-shadow);transition:all .3s ease}.info-panel:hover{transform:translateY(-1px);box-shadow:0 12px 40px #0006,0 4px 12px #0000004d}.info-panel__title{color:#fff;font-size:22px;font-weight:800;margin-bottom:12px;text-transform:uppercase;letter-spacing:1.2px;background:linear-gradient(135deg,#fff,#f5f5f5);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}.info-panel__controls{margin-top:8px;font-size:13px;line-height:1.5;color:#b0b0b0}.info-panel__controls strong{color:var(--below-text-color);font-weight:600}@media (max-width: 768px){.info-panel{top:10px;left:10px;padding:16px;max-width:280px}}.vr-button--glass,.vr-button-glass,[style*="position: absolute"][style*=bottom]{position:fixed!important;bottom:80px!important;left:50%!important;transform:translate(-50%)!important;z-index:100!important;padding:16px 32px!important;min-width:160px!important;height:56px!important;background:#ffffff1a!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important;backdrop-filter:blur(20px) saturate(140%)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:16px!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif!important;font-size:14px!important;font-weight:300!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:.1em!important;white-space:nowrap!important;text-align:center!important;line-height:1.2!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;box-shadow:0 8px 32px #0000004d,0 2px 8px #4ec3ff0d,inset 0 1px #ffffff0d!important;cursor:pointer!important;transition:all .4s cubic-bezier(.4,0,.2,1)!important;outline:none!important;text-decoration:none!important;position:relative!important;overflow:hidden!important}.vr-button--glass:before,.vr-button-glass:before,.vr-button-available:before,[style*="position: absolute"][style*=bottom]:before{content:""!important;position:absolute!important;top:0!important;left:-100%!important;width:100%!important;height:100%!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),rgba(255,255,255,.3),rgba(255,255,255,.15),transparent)!important;animation:vrShimmerInviting 4s ease-in-out infinite!important;border-radius:16px!important;pointer-events:none!important}@keyframes vrShimmerInviting{0%,80%{left:-100%!important;opacity:0!important}85%{left:-50%!important;opacity:.5!important}90%{left:0!important;opacity:1!important}95%{left:50%!important;opacity:.5!important}to{left:100%!important;opacity:0!important}}.vr-button--glass:hover,.vr-button-glass:hover,.vr-button-available:hover{background:#ffffff26!important;border-color:#ffffff4d!important;transform:translate(-50%) translateY(-2px)!important;box-shadow:0 12px 40px #0006,0 4px 12px #4ec3ff1a,inset 0 1px #ffffff14!important}.vr-button--glass:hover:before,.vr-button-glass:hover:before,.vr-button-available:hover:before,[style*="position: absolute"][style*=bottom]:hover:before{animation:vrShimmer 1.5s ease-in-out infinite!important}.vr-button--glass:active,.vr-button-glass:active,.vr-button-available:active{transform:translate(-50%) translateY(-1px)!important;background:#fff3!important;box-shadow:0 6px 20px #0006,0 2px 6px #4ec3ff1a,inset 0 1px #ffffff1a!important;transition:all .1s ease!important}.vr-button-disabled,button.vr-button-disabled{background:#9ca3af1a!important;border:1px solid rgba(156,163,175,.3)!important;color:#9ca3af!important;cursor:not-allowed!important;opacity:.6!important;box-shadow:0 4px 16px #0003!important;pointer-events:none!important}.vr-button-disabled:before,button.vr-button-disabled:before{display:none!important}@keyframes vrShimmer{0%{left:-100%!important;opacity:0!important}50%{left:0!important;opacity:1!important}to{left:100%!important;opacity:0!important}}@media (max-width: 768px){.vr-button--glass,.vr-button-glass,[style*="position: absolute"][style*=bottom]{bottom:60px!important;padding:12px 24px!important;min-width:140px!important;height:48px!important;font-size:12px!important}.vr-icon{font-size:14px!important}.info-panel{display:none}}.vr-mode .info-panel{display:none!important}.vr-mode .model-selector{pointer-events:none;opacity:.5}.vr-controller{pointer-events:none}.vr-loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;color:#fff;padding:20px;border-radius:10px;font-size:18px;z-index:1000}.vr-measurement-panel{position:fixed;top:20px;right:20px;background:#000c;color:#fff;padding:15px;border-radius:10px;border:2px solid #87cefa;z-index:100;font-family:monospace}.vr-reticle{position:fixed;top:50%;left:50%;width:4px;height:4px;background:#fffc;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:999}.vr-teleport-indicator{position:absolute;width:2px;height:2px;background:#0f0;border-radius:50%;pointer-events:none;opacity:.8}.vr-hand-model{pointer-events:none}.vr-spotlight-indicator{position:fixed;bottom:80px;left:50%;transform:translate(-50%);color:#fffc;font-size:14px;text-align:center;pointer-events:none;z-index:90}@supports (-webkit-appearance: none){.vr-button--glass,.vr-button-glass,[style*="position: absolute"][style*=bottom]{backdrop-filter:blur(20px) saturate(140%)!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important}}.ar-button--glass,.ar-button-glass{position:fixed!important;bottom:140px!important;left:50%!important;transform:translate(-50%)!important;z-index:100!important;padding:16px 32px!important;min-width:160px!important;height:56px!important;background:#64c8ff1f!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important;backdrop-filter:blur(20px) saturate(140%)!important;border:1px solid rgba(100,200,255,.3)!important;border-radius:16px!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif!important;font-size:14px!important;font-weight:300!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:.1em!important;white-space:nowrap!important;text-align:center!important;line-height:1.2!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;box-shadow:0 8px 32px #0000004d,0 2px 8px #64c8ff26,inset 0 1px #ffffff0d!important;cursor:pointer!important;transition:all .4s cubic-bezier(.4,0,.2,1)!important;outline:none!important;text-decoration:none!important;position:relative!important;overflow:hidden!important}.ar-button--glass:before,.ar-button-glass:before,.ar-button-available:before{content:""!important;position:absolute!important;top:0!important;left:-100%!important;width:100%!important;height:100%!important;background:linear-gradient(90deg,transparent,rgba(100,200,255,.2),rgba(100,200,255,.4),rgba(100,200,255,.2),transparent)!important;animation:arShimmerInviting 4s ease-in-out infinite!important;border-radius:16px!important;pointer-events:none!important}@keyframes arShimmerInviting{0%,80%{left:-100%!important;opacity:0!important}85%{left:-50%!important;opacity:.5!important}90%{left:0!important;opacity:1!important}95%{left:50%!important;opacity:.5!important}to{left:100%!important;opacity:0!important}}.ar-button--glass:hover,.ar-button-glass:hover,.ar-button-available:hover{background:#64c8ff2e!important;border-color:#64c8ff66!important;transform:translate(-50%) translateY(-2px)!important;box-shadow:0 12px 40px #0006,0 4px 12px #64c8ff40,inset 0 1px #ffffff14!important}.ar-button--glass:hover:before,.ar-button-glass:hover:before,.ar-button-available:hover:before{animation:arShimmer 1.5s ease-in-out infinite!important}.ar-button--glass:active,.ar-button-glass:active,.ar-button-available:active{transform:translate(-50%) translateY(-1px)!important;background:#64c8ff40!important;box-shadow:0 6px 20px #0006,0 2px 6px #64c8ff33,inset 0 1px #ffffff1a!important;transition:all .1s ease!important}.ar-button-disabled,button.ar-button-disabled{background:#9ca3af1a!important;border:1px solid rgba(156,163,175,.3)!important;color:#9ca3af!important;cursor:not-allowed!important;opacity:.6!important;box-shadow:0 4px 16px #0003!important;pointer-events:none!important}.ar-button-disabled:before,button.ar-button-disabled:before{display:none!important}@keyframes arShimmer{0%{left:-100%!important;opacity:0!important}50%{left:0!important;opacity:1!important}to{left:100%!important;opacity:0!important}}@media (max-width: 768px){.ar-button--glass,.ar-button-glass{bottom:120px!important;padding:12px 24px!important;min-width:140px!important;height:48px!important;font-size:12px!important}.ar-icon{font-size:14px!important}}.ar-mode .info-panel{display:none!important}.ar-mode .model-selector{pointer-events:none;opacity:.5}.ar-mode-active{--ar-css-loaded: true;opacity:.998}@supports (-webkit-appearance: none){.ar-button--glass,.ar-button-glass{backdrop-filter:blur(20px) saturate(140%)!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important}}.mode-toggle-container{display:flex;flex-direction:column;gap:20px}.semantic-toggle{position:relative;width:180px;height:60px;margin:0 auto;background:#ffffff0f;border-radius:30px;border:1px solid rgba(255,255,255,.1);overflow:hidden}.semantic-toggle input{position:absolute;opacity:0;width:0;height:0}.toggle-option{position:absolute;top:0;width:90px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.toggle-option.left{left:0}.toggle-option.right{right:0}.toggle-icon{font-size:20px;margin-bottom:4px;transition:all .3s ease}.toggle-text{color:#888;transition:all .3s ease;font-size:12px}.toggle-slider-bg{position:absolute;top:4px;left:4px;width:82px;height:52px;background:linear-gradient(135deg,#4caf50,#388e3c);border-radius:26px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #4caf5066,0 2px 8px #0003}.semantic-toggle input:checked+.toggle-slider-bg{transform:translate(90px);background:linear-gradient(135deg,#64b5f6,#42a5f5);box-shadow:0 4px 16px #64b5f666,0 2px 8px #0003}.semantic-toggle input:not(:checked)~.toggle-option.left .toggle-icon{color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}.semantic-toggle input:not(:checked)~.toggle-option.left .toggle-text{color:#fff;font-weight:700}.semantic-toggle input:checked~.toggle-option.right .toggle-icon{color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}.semantic-toggle input:checked~.toggle-option.right .toggle-text{color:#fff;font-weight:700}.semantic-toggle:hover .toggle-slider-bg{box-shadow:0 6px 20px #4caf5080,0 2px 12px #0000004d}.semantic-toggle input:checked:hover+.toggle-slider-bg{box-shadow:0 6px 20px #64b5f680,0 2px 12px #0000004d}.dive-mode-indicator{position:absolute;top:20px;right:20px;z-index:15;background:#64b5f61a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(100,181,246,.3);border-radius:12px;padding:8px 16px;font-size:12px;font-weight:600;color:#64b5f6;text-transform:uppercase;letter-spacing:.5px;opacity:0;transform:translateY(-10px);transition:all .3s ease}.dive-mode-indicator.active{opacity:1;transform:translateY(0)}.survey-mode-indicator{position:absolute;top:20px;right:20px;z-index:15;background:#4caf501a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(76,175,80,.3);border-radius:12px;padding:8px 16px;font-size:12px;font-weight:600;color:#4caf50;text-transform:uppercase;letter-spacing:.5px;opacity:0;transform:translateY(-10px);transition:all .3s ease}.survey-mode-indicator.active{opacity:1;transform:translateY(0)}.dive-control-panel{position:absolute;top:20px;right:20px;z-index:10;background:#ffffff14;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:20px;min-width:220px;box-shadow:0 8px 32px #0000004d}.dive-control-title{color:#64b5f6;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-align:center;margin-bottom:8px}@media (max-width: 768px){.semantic-toggle{width:150px;height:50px;border-radius:25px}.toggle-option{width:75px;height:50px;font-size:9px}.toggle-icon{font-size:17px;margin-bottom:3px}.toggle-text{font-size:10px}.toggle-slider-bg{top:3px;left:3px;width:69px;height:44px;border-radius:22px}.semantic-toggle input:checked+.toggle-slider-bg{transform:translate(75px)}}@keyframes diveTransition{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes surveyTransition{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.dive-mode-active .dive-control-panel{animation:diveTransition .3s ease-out}.survey-mode-active .dive-control-panel{animation:surveyTransition .3s ease-out}.measurement-panel{position:absolute;bottom:20px;right:20px;background:#ffffff0f;color:#ffffffe6;padding:12px 16px;border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;font-weight:500;z-index:100;cursor:pointer;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .4s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;min-width:100px;text-align:center;box-shadow:0 2px 8px #00000026}.measurement-panel:hover{background:#ffffff1a;border-color:#fff3;color:#fff;transform:scale(1.02);box-shadow:0 4px 16px #0003}.measurement-panel .disabled{color:#fff6;border-color:#ffffff0d;background:#ffffff05}.measurement-panel .active{color:#4ade80;border-color:#4ade804d;background:#4ade801a;box-shadow:0 0 20px #4ade801a}.measurement-panel .measured{color:#60a5fa;border-color:#60a5fa4d;background:#60a5fa1a;box-shadow:0 0 20px #60a5fa1a}.measurement-panel.light-theme{background:#000c;color:#fffffff2;border:1px solid rgba(0,0,0,.2);box-shadow:0 2px 12px #00000040}.measurement-panel.light-theme:hover{background:#000000e6;border-color:#0000004d;color:#fff;transform:scale(1.02);box-shadow:0 4px 20px #00000059}.measurement-panel.light-theme.disabled{color:#ffffff80;border-color:#0000001a;background:#0009}.measurement-panel.light-theme.active{color:#10b981;border-color:#10b98166;background:#000000d9;box-shadow:0 0 24px #10b98133}.measurement-panel.light-theme.measured{color:#3b82f6;border-color:#3b82f666;background:#000000d9;box-shadow:0 0 24px #3b82f633}.vr-comfort-glyph{position:absolute;width:40px;height:40px;border-radius:50%;background:#0009;border:2px solid #666;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-size:20px;z-index:10000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.vr-comfort-glyph:hover{transform:scale(1.1);background:#000c}.vr-comfort-glyph:focus{outline:3px solid #4ade80;outline-offset:2px}.vr-comfort-glyph.comfort-off{color:#666;border-color:#666;background:#0009;box-shadow:none}.vr-comfort-glyph.comfort-on{color:#4ade80;border-color:#4ade80;background:#4ade801a;box-shadow:0 0 20px #4ade804d}.vr-comfort-glyph.position-bottom-right{bottom:var(--vr-comfort-offset-y, 70px);right:var(--vr-comfort-offset-x, 20px)}.vr-comfort-glyph.position-bottom-left{bottom:var(--vr-comfort-offset-y, 70px);left:var(--vr-comfort-offset-x, 20px)}.vr-comfort-glyph.position-top-right{top:var(--vr-comfort-offset-y, 20px);right:var(--vr-comfort-offset-x, 260px)}.vr-comfort-glyph.position-top-left{top:var(--vr-comfort-offset-y, 20px);left:var(--vr-comfort-offset-x, 20px)}.vr-mode *{box-sizing:border-box!important}.vr-mode body{background:#000!important;color:#fff!important;margin:0!important;padding:0!important}.vr-mode,.vr-mode *{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;line-height:1.5!important}.vr-mode input,.vr-mode select,.vr-mode button,.vr-mode textarea{font-size:18px!important;padding:12px 16px!important;border-radius:6px!important;border:2px solid #4a9eff!important;background:#101828f2!important;color:#fff!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;transition:all .2s ease!important}.vr-mode input:focus,.vr-mode select:focus,.vr-mode button:focus,.vr-mode textarea:focus{outline:none!important;border-color:#60a5fa!important;box-shadow:0 0 0 3px #60a5fa4d!important;background:#101828!important}.vr-mode button:hover{background:#4a9eff33!important;border-color:#60a5fa!important}.vr-mode .vr-comfort-glyph{background:#000000e6!important;border-width:3px!important;-webkit-backdrop-filter:blur(15px)!important;backdrop-filter:blur(15px)!important;font-size:22px!important;width:44px!important;height:44px!important}.vr-mode .vr-comfort-glyph:hover{transform:scale(1.15)!important;background:#000000f2!important}.vr-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;padding:12px 20px;font-size:16px;font-weight:700;font-family:system-ui,-apple-system,sans-serif;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;-webkit-user-select:none;user-select:none;touch-action:manipulation}.vr-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.vr-button:focus{outline:3px solid #4ade80;outline-offset:2px}.vr-button:active{transform:translateY(0)}.vr-mode .vr-button{font-size:18px!important;padding:14px 24px!important;border-radius:10px!important}.vr-status{position:fixed;bottom:20px;right:20px;background:#000c;color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;font-family:system-ui,-apple-system,sans-serif;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;transition:all .3s ease}.vr-status.vr-active{background:#4ade8033;border:2px solid #4ade80;color:#4ade80}.vr-mode .vr-status{font-size:16px!important;padding:10px 16px!important;border-radius:8px!important}.vr-panel{background:#101828f2;border:2px solid #374151;border-radius:12px;padding:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 8px 32px #0006}.vr-mode .vr-panel{border-width:3px!important;padding:24px!important;border-radius:16px!important}.vr-panel h1,.vr-panel h2,.vr-panel h3{margin-top:0;color:#f9fafb}.vr-panel p{color:#d1d5db;line-height:1.6}@media (max-width: 768px){.vr-comfort-glyph{width:48px!important;height:48px!important;font-size:24px!important}.vr-comfort-glyph.position-bottom-right{bottom:var(--vr-comfort-offset-y-mobile, 80px);right:var(--vr-comfort-offset-x-mobile, 15px)}.vr-comfort-glyph.position-bottom-left{bottom:var(--vr-comfort-offset-y-mobile, 80px);left:var(--vr-comfort-offset-x-mobile, 15px)}.vr-button{font-size:18px!important;padding:14px 24px!important}.vr-status{font-size:16px!important;padding:10px 16px!important}.vr-panel{padding:16px!important;margin:10px!important}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.vr-comfort-glyph{border-width:2.5px}.vr-mode .vr-comfort-glyph{border-width:3.5px!important}.vr-button{box-shadow:0 6px 20px #00000040}}.vr-mode-active{--vr-css-loaded: true;opacity:.999}.vr-hidden{display:none!important}.vr-visible{display:block!important}.vr-flex{display:flex!important}.vr-center{align-items:center!important;justify-content:center!important}.vr-text-center{text-align:center!important}.vr-text-white{color:#fff!important}.vr-bg-dark{background:#000c!important}.vr-rounded{border-radius:8px!important}.vr-shadow{box-shadow:0 4px 15px #0003!important}
1
+ :root{--below-bg-color: #0a0a0a;--below-text-color: #e8e8e8;--below-accent-color: #64B5F6;--below-panel-bg: rgba(255, 255, 255, .08);--below-panel-border: rgba(255, 255, 255, .12);--below-panel-backdrop: blur(20px);--below-panel-shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2);--below-font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--below-bg-color);color:var(--below-text-color);font-family:var(--below-font-family)}.below-viewer-container{width:100%;height:100%;position:relative}.below-ui-root{position:absolute;inset:0;pointer-events:none}.below-ui-root>*{pointer-events:auto}.below-ui-root--stereo-left{right:50%}.below-ui-root--stereo-right{left:50%;pointer-events:none}.below-viewer-container canvas{display:block;width:100%;height:100%}.below-panel{background:var(--below-panel-bg);-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);border:1px solid var(--below-panel-border);border-radius:16px;box-shadow:var(--below-panel-shadow)}.model-selector{position:absolute;top:20px;right:20px;z-index:50;background:var(--below-panel-bg);-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);border:1px solid var(--below-panel-border);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:20px;min-width:220px;box-shadow:var(--below-panel-shadow);transition:all .3s ease}.model-selector:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0006,0 4px 12px #0000004d}.model-selector__dropdown{background:linear-gradient(145deg,#ffffff14,#ffffff0a);color:var(--below-text-color);border:1px solid rgba(255,255,255,.1);padding:16px 20px;font-size:23px;font-weight:500;font-family:inherit;cursor:pointer;outline:none;transition:all .3s ease;min-width:100%;border-radius:12px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 1px 3px #0000001a}.model-selector__dropdown:focus{border-color:var(--below-accent-color);box-shadow:0 0 0 2px #64b5f633,inset 0 1px 3px #0000001a}.model-selector__dropdown:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.model-selector__dropdown:disabled{cursor:not-allowed;opacity:.5}.model-selector__dropdown option{background:#1a1a1a;color:var(--below-text-color);padding:12px;font-size:14px}.loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;display:none;flex-direction:column;align-items:center;gap:20px;text-align:center}.loading-spinner{position:relative;display:flex;align-items:center;justify-content:center}.spinner-circle{position:relative;width:64px;height:64px}.spinner-path{position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid rgba(255,255,255,.15);border-top:3px solid #ffffff;border-radius:50%;animation:spinner-rotate 1.5s ease-in-out infinite}.spinner-percentage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);letter-spacing:-.5px}.loading-content{display:flex;flex-direction:column;gap:8px;align-items:center}.loading-model-name{font-size:18px;font-weight:500;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);letter-spacing:.3px}.loading-status{font-size:14px;font-weight:400;color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.6)}@keyframes spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator.light-theme .loading-model-name{color:#1a1a1a!important;text-shadow:0 1px 2px rgba(255,255,255,.8)!important}.loading-indicator.light-theme .loading-status{color:#1a1a1acc!important;text-shadow:0 1px 2px rgba(255,255,255,.6)!important}.loading-indicator.light-theme .spinner-percentage{color:#1a1a1a!important;text-shadow:0 1px 2px rgba(255,255,255,.8)!important}.loading-indicator.light-theme .spinner-path{border-color:#1a1a1a26!important;border-top-color:#1a1a1a!important}.status{position:absolute;bottom:20px;right:20px;background:#000000b3;padding:10px 15px;border-radius:8px;font-size:12px;z-index:10}@media (max-width: 768px){.model-selector{min-width:150px;padding:14px;gap:14px;border-radius:16px}.model-selector__dropdown{padding:10px 14px;font-size:15px;border-radius:10px}.model-selector__dropdown option{font-size:13px;padding:10px}}.screenshot-button{position:absolute;bottom:140px;right:20px;width:36px;height:36px;border-radius:50%;background:var(--below-panel-bg);border:1px solid var(--below-panel-border);color:var(--below-text-color);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:120;-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);box-shadow:0 4px 16px #0003;-webkit-user-select:none;user-select:none;transition:transform .3s ease,box-shadow .3s ease}.screenshot-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.screenshot-button svg{width:16px;height:16px;stroke-width:2.2}.screenshot-button.light-theme{background:#000c!important;border:1px solid rgba(0,0,0,.2)!important;color:#fffffff2!important;box-shadow:0 2px 12px #00000040!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;top:76px!important;bottom:auto!important;right:20px!important}.screenshot-button.light-theme:hover{background:#000000e6!important;border-color:#0000004d!important;color:#fff!important;transform:translateY(-2px) scale(1.02)!important;box-shadow:0 4px 20px #00000059!important}.screenshot-button.light-theme svg{stroke-width:2.2}.screenshot-button.no-measurement{bottom:70px!important}.fullscreen-button{position:absolute;bottom:90px;right:20px;width:36px;height:36px;border-radius:50%;background:var(--below-panel-bg);border:1px solid var(--below-panel-border);color:var(--below-text-color);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:120;-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);box-shadow:0 4px 16px #0003;-webkit-user-select:none;user-select:none;transition:transform .3s ease,box-shadow .3s ease}.fullscreen-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.fullscreen-button.light-theme{background:#000c!important;border:1px solid rgba(0,0,0,.2)!important;color:#fffffff2!important;box-shadow:0 2px 12px #00000040!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;top:20px!important;bottom:auto!important;right:20px!important}.fullscreen-button.light-theme:hover{background:#000000e6!important;border-color:#0000004d!important;color:#fff!important;transform:translateY(-2px) scale(1.02)!important;box-shadow:0 4px 20px #00000059!important}.fullscreen-button.no-measurement{bottom:20px!important}.fly-mode-indicator{position:absolute;inset:0;z-index:1002;display:none;pointer-events:none}.fly-mode-indicator.visible{display:block}.fly-mode-indicator .crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border:2px solid rgba(255,255,255,.6);border-radius:50%}.fly-mode-indicator .crosshair:before,.fly-mode-indicator .crosshair:after{content:"";position:absolute;background:#fff9}.fly-mode-indicator .crosshair:before{width:8px;height:2px;top:50%;left:50%;transform:translate(-50%,-50%)}.fly-mode-indicator .crosshair:after{width:2px;height:8px;top:50%;left:50%;transform:translate(-50%,-50%)}.fly-mode-indicator .hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:#000000d9;color:#e2e8f0;padding:10px 16px;border-radius:8px;font-size:12px;text-align:center;line-height:1.4;box-shadow:0 6px 20px #00000059}.fly-mode-indicator .fly-exit{display:inline-block;margin-top:4px;font-size:11px;opacity:.85}.fly-mode-indicator kbd{background:#334155;padding:2px 6px;border-radius:4px;font-family:monospace;margin:0 2px}@media (max-width: 768px){.fly-mode-indicator .hint{bottom:12px;font-size:11px;padding:8px 12px}.fly-mode-indicator .fly-exit{font-size:10px}}.info-panel{position:absolute;top:20px;left:20px;z-index:10;padding:20px 24px;max-width:340px;-webkit-backdrop-filter:var(--below-panel-backdrop);backdrop-filter:var(--below-panel-backdrop);background:var(--below-panel-bg);border:1px solid var(--below-panel-border);border-radius:16px;box-shadow:var(--below-panel-shadow);transition:all .3s ease}.info-panel:hover{transform:translateY(-1px);box-shadow:0 12px 40px #0006,0 4px 12px #0000004d}.info-panel__title{color:#fff;font-size:22px;font-weight:800;margin-bottom:12px;text-transform:uppercase;letter-spacing:1.2px;background:linear-gradient(135deg,#fff,#f5f5f5);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}.info-panel__controls{margin-top:8px;font-size:13px;line-height:1.5;color:#b0b0b0}.info-panel__controls strong{color:var(--below-text-color);font-weight:600}@media (max-width: 768px){.info-panel{top:10px;left:10px;padding:16px;max-width:280px}}.vr-button--glass,.vr-button-glass,[style*="position: absolute"][style*=bottom]{position:fixed!important;bottom:80px!important;left:50%!important;transform:translate(-50%)!important;z-index:100!important;padding:16px 32px!important;min-width:160px!important;height:56px!important;background:#ffffff1a!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important;backdrop-filter:blur(20px) saturate(140%)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:16px!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif!important;font-size:14px!important;font-weight:300!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:.1em!important;white-space:nowrap!important;text-align:center!important;line-height:1.2!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;box-shadow:0 8px 32px #0000004d,0 2px 8px #4ec3ff0d,inset 0 1px #ffffff0d!important;cursor:pointer!important;transition:all .4s cubic-bezier(.4,0,.2,1)!important;outline:none!important;text-decoration:none!important;position:relative!important;overflow:hidden!important}.vr-button--glass:before,.vr-button-glass:before,.vr-button-available:before,[style*="position: absolute"][style*=bottom]:before{content:""!important;position:absolute!important;top:0!important;left:-100%!important;width:100%!important;height:100%!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),rgba(255,255,255,.3),rgba(255,255,255,.15),transparent)!important;animation:vrShimmerInviting 4s ease-in-out infinite!important;border-radius:16px!important;pointer-events:none!important}@keyframes vrShimmerInviting{0%,80%{left:-100%!important;opacity:0!important}85%{left:-50%!important;opacity:.5!important}90%{left:0!important;opacity:1!important}95%{left:50%!important;opacity:.5!important}to{left:100%!important;opacity:0!important}}.vr-button--glass:hover,.vr-button-glass:hover,.vr-button-available:hover{background:#ffffff26!important;border-color:#ffffff4d!important;transform:translate(-50%) translateY(-2px)!important;box-shadow:0 12px 40px #0006,0 4px 12px #4ec3ff1a,inset 0 1px #ffffff14!important}.vr-button--glass:hover:before,.vr-button-glass:hover:before,.vr-button-available:hover:before,[style*="position: absolute"][style*=bottom]:hover:before{animation:vrShimmer 1.5s ease-in-out infinite!important}.vr-button--glass:active,.vr-button-glass:active,.vr-button-available:active{transform:translate(-50%) translateY(-1px)!important;background:#fff3!important;box-shadow:0 6px 20px #0006,0 2px 6px #4ec3ff1a,inset 0 1px #ffffff1a!important;transition:all .1s ease!important}.vr-button-disabled,button.vr-button-disabled{background:#9ca3af1a!important;border:1px solid rgba(156,163,175,.3)!important;color:#9ca3af!important;cursor:not-allowed!important;opacity:.6!important;box-shadow:0 4px 16px #0003!important;pointer-events:none!important}.vr-button-disabled:before,button.vr-button-disabled:before{display:none!important}@keyframes vrShimmer{0%{left:-100%!important;opacity:0!important}50%{left:0!important;opacity:1!important}to{left:100%!important;opacity:0!important}}@media (max-width: 768px){.vr-button--glass,.vr-button-glass,[style*="position: absolute"][style*=bottom]{bottom:60px!important;padding:12px 24px!important;min-width:140px!important;height:48px!important;font-size:12px!important}.vr-icon{font-size:14px!important}.info-panel{display:none}}.vr-mode .info-panel{display:none!important}.vr-mode .model-selector{pointer-events:none;opacity:.5}.vr-controller{pointer-events:none}.vr-loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;color:#fff;padding:20px;border-radius:10px;font-size:18px;z-index:1000}.vr-measurement-panel{position:fixed;top:20px;right:20px;background:#000c;color:#fff;padding:15px;border-radius:10px;border:2px solid #87cefa;z-index:100;font-family:monospace}.vr-reticle{position:fixed;top:50%;left:50%;width:4px;height:4px;background:#fffc;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:999}.vr-teleport-indicator{position:absolute;width:2px;height:2px;background:#0f0;border-radius:50%;pointer-events:none;opacity:.8}.vr-hand-model{pointer-events:none}.vr-spotlight-indicator{position:fixed;bottom:80px;left:50%;transform:translate(-50%);color:#fffc;font-size:14px;text-align:center;pointer-events:none;z-index:90}@supports (-webkit-appearance: none){.vr-button--glass,.vr-button-glass,[style*="position: absolute"][style*=bottom]{backdrop-filter:blur(20px) saturate(140%)!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important}}.ar-button--glass,.ar-button-glass{position:fixed!important;bottom:140px!important;left:50%!important;transform:translate(-50%)!important;z-index:100!important;padding:16px 32px!important;min-width:160px!important;height:56px!important;background:#64c8ff1f!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important;backdrop-filter:blur(20px) saturate(140%)!important;border:1px solid rgba(100,200,255,.3)!important;border-radius:16px!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif!important;font-size:14px!important;font-weight:300!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:.1em!important;white-space:nowrap!important;text-align:center!important;line-height:1.2!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;box-shadow:0 8px 32px #0000004d,0 2px 8px #64c8ff26,inset 0 1px #ffffff0d!important;cursor:pointer!important;transition:all .4s cubic-bezier(.4,0,.2,1)!important;outline:none!important;text-decoration:none!important;position:relative!important;overflow:hidden!important}.ar-button--glass:before,.ar-button-glass:before,.ar-button-available:before{content:""!important;position:absolute!important;top:0!important;left:-100%!important;width:100%!important;height:100%!important;background:linear-gradient(90deg,transparent,rgba(100,200,255,.2),rgba(100,200,255,.4),rgba(100,200,255,.2),transparent)!important;animation:arShimmerInviting 4s ease-in-out infinite!important;border-radius:16px!important;pointer-events:none!important}@keyframes arShimmerInviting{0%,80%{left:-100%!important;opacity:0!important}85%{left:-50%!important;opacity:.5!important}90%{left:0!important;opacity:1!important}95%{left:50%!important;opacity:.5!important}to{left:100%!important;opacity:0!important}}.ar-button--glass:hover,.ar-button-glass:hover,.ar-button-available:hover{background:#64c8ff2e!important;border-color:#64c8ff66!important;transform:translate(-50%) translateY(-2px)!important;box-shadow:0 12px 40px #0006,0 4px 12px #64c8ff40,inset 0 1px #ffffff14!important}.ar-button--glass:hover:before,.ar-button-glass:hover:before,.ar-button-available:hover:before{animation:arShimmer 1.5s ease-in-out infinite!important}.ar-button--glass:active,.ar-button-glass:active,.ar-button-available:active{transform:translate(-50%) translateY(-1px)!important;background:#64c8ff40!important;box-shadow:0 6px 20px #0006,0 2px 6px #64c8ff33,inset 0 1px #ffffff1a!important;transition:all .1s ease!important}.ar-button-disabled,button.ar-button-disabled{background:#9ca3af1a!important;border:1px solid rgba(156,163,175,.3)!important;color:#9ca3af!important;cursor:not-allowed!important;opacity:.6!important;box-shadow:0 4px 16px #0003!important;pointer-events:none!important}.ar-button-disabled:before,button.ar-button-disabled:before{display:none!important}@keyframes arShimmer{0%{left:-100%!important;opacity:0!important}50%{left:0!important;opacity:1!important}to{left:100%!important;opacity:0!important}}@media (max-width: 768px){.ar-button--glass,.ar-button-glass{bottom:120px!important;padding:12px 24px!important;min-width:140px!important;height:48px!important;font-size:12px!important}.ar-icon{font-size:14px!important}}.ar-mode .info-panel{display:none!important}.ar-mode .model-selector{pointer-events:none;opacity:.5}.ar-mode-active{--ar-css-loaded: true;opacity:.998}@supports (-webkit-appearance: none){.ar-button--glass,.ar-button-glass{backdrop-filter:blur(20px) saturate(140%)!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important}}.mode-toggle-container{display:flex;flex-direction:column;gap:20px}.semantic-toggle{position:relative;width:180px;height:60px;margin:0 auto;background:#ffffff0f;border-radius:30px;border:1px solid rgba(255,255,255,.1);overflow:hidden}.semantic-toggle input{position:absolute;opacity:0;width:0;height:0}.toggle-option{position:absolute;top:0;width:90px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.toggle-option.left{left:0}.toggle-option.right{right:0}.toggle-icon{font-size:20px;margin-bottom:4px;transition:all .3s ease}.toggle-text{color:#888;transition:all .3s ease;font-size:12px}.toggle-slider-bg{position:absolute;top:4px;left:4px;width:82px;height:52px;background:linear-gradient(135deg,#4caf50,#388e3c);border-radius:26px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #4caf5066,0 2px 8px #0003}.semantic-toggle input:checked+.toggle-slider-bg{transform:translate(90px);background:linear-gradient(135deg,#64b5f6,#42a5f5);box-shadow:0 4px 16px #64b5f666,0 2px 8px #0003}.semantic-toggle input:not(:checked)~.toggle-option.left .toggle-icon{color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}.semantic-toggle input:not(:checked)~.toggle-option.left .toggle-text{color:#fff;font-weight:700}.semantic-toggle input:checked~.toggle-option.right .toggle-icon{color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}.semantic-toggle input:checked~.toggle-option.right .toggle-text{color:#fff;font-weight:700}.semantic-toggle:hover .toggle-slider-bg{box-shadow:0 6px 20px #4caf5080,0 2px 12px #0000004d}.semantic-toggle input:checked:hover+.toggle-slider-bg{box-shadow:0 6px 20px #64b5f680,0 2px 12px #0000004d}.dive-mode-indicator{position:absolute;top:20px;right:20px;z-index:15;background:#64b5f61a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(100,181,246,.3);border-radius:12px;padding:8px 16px;font-size:12px;font-weight:600;color:#64b5f6;text-transform:uppercase;letter-spacing:.5px;opacity:0;transform:translateY(-10px);transition:all .3s ease}.dive-mode-indicator.active{opacity:1;transform:translateY(0)}.survey-mode-indicator{position:absolute;top:20px;right:20px;z-index:15;background:#4caf501a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(76,175,80,.3);border-radius:12px;padding:8px 16px;font-size:12px;font-weight:600;color:#4caf50;text-transform:uppercase;letter-spacing:.5px;opacity:0;transform:translateY(-10px);transition:all .3s ease}.survey-mode-indicator.active{opacity:1;transform:translateY(0)}.dive-control-panel{position:absolute;top:20px;right:20px;z-index:10;background:#ffffff14;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:20px;min-width:220px;box-shadow:0 8px 32px #0000004d}.dive-control-title{color:#64b5f6;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-align:center;margin-bottom:8px}@media (max-width: 768px){.semantic-toggle{width:150px;height:50px;border-radius:25px}.toggle-option{width:75px;height:50px;font-size:9px}.toggle-icon{font-size:17px;margin-bottom:3px}.toggle-text{font-size:10px}.toggle-slider-bg{top:3px;left:3px;width:69px;height:44px;border-radius:22px}.semantic-toggle input:checked+.toggle-slider-bg{transform:translate(75px)}}@keyframes diveTransition{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes surveyTransition{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.dive-mode-active .dive-control-panel{animation:diveTransition .3s ease-out}.survey-mode-active .dive-control-panel{animation:surveyTransition .3s ease-out}.measurement-panel{position:absolute;bottom:20px;right:20px;background:#ffffff0f;color:#ffffffe6;padding:12px 16px;border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;font-weight:500;z-index:100;cursor:pointer;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .4s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;min-width:100px;text-align:center;box-shadow:0 2px 8px #00000026}.measurement-panel:hover{background:#ffffff1a;border-color:#fff3;color:#fff;transform:scale(1.02);box-shadow:0 4px 16px #0003}.measurement-panel .disabled{color:#fff6;border-color:#ffffff0d;background:#ffffff05}.measurement-panel .active{color:#4ade80;border-color:#4ade804d;background:#4ade801a;box-shadow:0 0 20px #4ade801a}.measurement-panel .measured{color:#60a5fa;border-color:#60a5fa4d;background:#60a5fa1a;box-shadow:0 0 20px #60a5fa1a}.measurement-panel.light-theme{background:#000c;color:#fffffff2;border:1px solid rgba(0,0,0,.2);box-shadow:0 2px 12px #00000040}.measurement-panel.light-theme:hover{background:#000000e6;border-color:#0000004d;color:#fff;transform:scale(1.02);box-shadow:0 4px 20px #00000059}.measurement-panel.light-theme.disabled{color:#ffffff80;border-color:#0000001a;background:#0009}.measurement-panel.light-theme.active{color:#10b981;border-color:#10b98166;background:#000000d9;box-shadow:0 0 24px #10b98133}.measurement-panel.light-theme.measured{color:#3b82f6;border-color:#3b82f666;background:#000000d9;box-shadow:0 0 24px #3b82f633}.measurement-panel.unavailable,.measurement-panel.unavailable:hover{transform:none;background:#ffffff08;border-color:#ffffff14;color:#ffffff8c;box-shadow:none;cursor:not-allowed}.measurement-panel.light-theme.unavailable,.measurement-panel.light-theme.unavailable:hover{transform:none;background:#00000073;border-color:#0000001f;color:#ffffff8c;box-shadow:none;cursor:not-allowed}.vr-comfort-glyph{position:absolute;width:40px;height:40px;border-radius:50%;background:#0009;border:2px solid #666;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-size:20px;z-index:10000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.vr-comfort-glyph:hover{transform:scale(1.1);background:#000c}.vr-comfort-glyph:focus{outline:3px solid #4ade80;outline-offset:2px}.vr-comfort-glyph.comfort-off{color:#666;border-color:#666;background:#0009;box-shadow:none}.vr-comfort-glyph.comfort-on{color:#4ade80;border-color:#4ade80;background:#4ade801a;box-shadow:0 0 20px #4ade804d}.vr-comfort-glyph.position-bottom-right{bottom:var(--vr-comfort-offset-y, 70px);right:var(--vr-comfort-offset-x, 20px)}.vr-comfort-glyph.position-bottom-left{bottom:var(--vr-comfort-offset-y, 70px);left:var(--vr-comfort-offset-x, 20px)}.vr-comfort-glyph.position-top-right{top:var(--vr-comfort-offset-y, 20px);right:var(--vr-comfort-offset-x, 260px)}.vr-comfort-glyph.position-top-left{top:var(--vr-comfort-offset-y, 20px);left:var(--vr-comfort-offset-x, 20px)}.vr-mode *{box-sizing:border-box!important}.vr-mode body{background:#000!important;color:#fff!important;margin:0!important;padding:0!important}.vr-mode,.vr-mode *{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;line-height:1.5!important}.vr-mode input,.vr-mode select,.vr-mode button,.vr-mode textarea{font-size:18px!important;padding:12px 16px!important;border-radius:6px!important;border:2px solid #4a9eff!important;background:#101828f2!important;color:#fff!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;transition:all .2s ease!important}.vr-mode input:focus,.vr-mode select:focus,.vr-mode button:focus,.vr-mode textarea:focus{outline:none!important;border-color:#60a5fa!important;box-shadow:0 0 0 3px #60a5fa4d!important;background:#101828!important}.vr-mode button:hover{background:#4a9eff33!important;border-color:#60a5fa!important}.vr-mode .vr-comfort-glyph{background:#000000e6!important;border-width:3px!important;-webkit-backdrop-filter:blur(15px)!important;backdrop-filter:blur(15px)!important;font-size:22px!important;width:44px!important;height:44px!important}.vr-mode .vr-comfort-glyph:hover{transform:scale(1.15)!important;background:#000000f2!important}.vr-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;padding:12px 20px;font-size:16px;font-weight:700;font-family:system-ui,-apple-system,sans-serif;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;-webkit-user-select:none;user-select:none;touch-action:manipulation}.vr-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.vr-button:focus{outline:3px solid #4ade80;outline-offset:2px}.vr-button:active{transform:translateY(0)}.vr-mode .vr-button{font-size:18px!important;padding:14px 24px!important;border-radius:10px!important}.vr-status{position:fixed;bottom:20px;right:20px;background:#000c;color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;font-family:system-ui,-apple-system,sans-serif;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;transition:all .3s ease}.vr-status.vr-active{background:#4ade8033;border:2px solid #4ade80;color:#4ade80}.vr-mode .vr-status{font-size:16px!important;padding:10px 16px!important;border-radius:8px!important}.vr-panel{background:#101828f2;border:2px solid #374151;border-radius:12px;padding:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 8px 32px #0006}.vr-mode .vr-panel{border-width:3px!important;padding:24px!important;border-radius:16px!important}.vr-panel h1,.vr-panel h2,.vr-panel h3{margin-top:0;color:#f9fafb}.vr-panel p{color:#d1d5db;line-height:1.6}@media (max-width: 768px){.vr-comfort-glyph{width:48px!important;height:48px!important;font-size:24px!important}.vr-comfort-glyph.position-bottom-right{bottom:var(--vr-comfort-offset-y-mobile, 80px);right:var(--vr-comfort-offset-x-mobile, 15px)}.vr-comfort-glyph.position-bottom-left{bottom:var(--vr-comfort-offset-y-mobile, 80px);left:var(--vr-comfort-offset-x-mobile, 15px)}.vr-button{font-size:18px!important;padding:14px 24px!important}.vr-status{font-size:16px!important;padding:10px 16px!important}.vr-panel{padding:16px!important;margin:10px!important}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.vr-comfort-glyph{border-width:2.5px}.vr-mode .vr-comfort-glyph{border-width:3.5px!important}.vr-button{box-shadow:0 6px 20px #00000040}}.vr-mode-active{--vr-css-loaded: true;opacity:.999}.vr-hidden{display:none!important}.vr-visible{display:block!important}.vr-flex{display:flex!important}.vr-center{align-items:center!important;justify-content:center!important}.vr-text-center{text-align:center!important}.vr-text-white{color:#fff!important}.vr-bg-dark{background:#000c!important}.vr-rounded{border-radius:8px!important}.vr-shadow{box-shadow:0 4px 15px #0003!important}