belowjs 1.2.0 → 1.4.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 +29 -0
  2. package/README.md +4 -4
  3. package/dist/belowjs.css +1 -1
  4. package/dist/belowjs.js +1286 -637
  5. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,35 @@ 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.4.0] - 2025-12-24
9
+
10
+ ### Added
11
+
12
+ #### Animation Example
13
+ New [animation example](https://patrick-morrison.github.io/belowjs/examples/animation/) for producing shipwreck visualisations in seconds. Designed to mirror our Blender workflow, this demonstrates advanced features built on top of the core viewer:
14
+ - Timeline-based keyframe animation with easing
15
+ - Orbit mode for quick feature visualisations
16
+ - Flight mode navigation, as well as orbit
17
+ - Controls on the custom dive lighting system
18
+ - Local save and load of keyframes and settings
19
+ - Video export as MP4s
20
+
21
+ #### AR Support (Experimental)
22
+ Implements passthrough for AR viewing of 3D models with sensible defaults, natural-feeling hand tracking control and the same studio lighting system used in desktop mode:
23
+ - **Hand tracking gestures**: Single-hand movement, two-hand rotate and scale with logarithmic scaling and inertia
24
+ - **Quest 2/3 optimisation**: Automatic device detection and far-plane adjustments
25
+ - **Designed with shared spaces in mind**: `setInteractionEnabled()` method to lock/unlock hand interactions for remote collaboration scenarios
26
+
27
+ > **Note**: AR support is experimental and may change in future releases, it is being co-developed with a networked viewer.
28
+
29
+ ### Fixed
30
+ - VR audio assets now copied losslessly in docs examples
31
+
32
+ ---
33
+
34
+ ## [1.3.0] - 2025-11-09
35
+ - Desktop Quest Link streaming support, best tried with the drag-and-drop viewer (<https://patrick-morrison.github.io/belowjs/examples/dragdrop/>).
36
+
8
37
  ## [1.2.0] - 2025-09-10
9
38
 
10
39
  ### Changed
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.2.0` - Memory-hardened release with Safari/iOS loading fixes.
9
+ > **Current Version:** `1.3.0` - Quest Link stability patch for WebXR optional features.
10
10
 
11
11
  **Dive Shipwrecks in Virtual Reality**
12
12
 
@@ -59,11 +59,11 @@ This gives you a complete VR-ready 3D viewer with dive lighting, measurement too
59
59
  {
60
60
  "imports": {
61
61
  "three": "https://cdn.jsdelivr.net/npm/three@0.179.1/+esm",
62
- "belowjs": "https://cdn.jsdelivr.net/npm/belowjs@1.2.0/dist/belowjs.js"
62
+ "belowjs": "https://cdn.jsdelivr.net/npm/belowjs@1.3.0/dist/belowjs.js"
63
63
  }
64
64
  }
65
65
  </script>
66
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/belowjs@1.2.0/dist/belowjs.css">
66
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/belowjs@1.3.0/dist/belowjs.css">
67
67
  <style>
68
68
  body, html { margin: 0; padding: 0; overflow: hidden; }
69
69
  </style>
@@ -112,7 +112,7 @@ npm install && npm run build
112
112
  ### Live Examples
113
113
 
114
114
  - [Basic Viewer](https://patrick-morrison.github.io/belowjs/examples/basic/) — Full-featured multi-model viewer
115
- - [Drag & Drop](https://patrick-morrison.github.io/belowjs/examples/dragdrop/) — File loader with custom UI
115
+ - [Drag & Drop](https://patrick-morrison.github.io/belowjs/examples/dragdrop/) — File loader with custom UI; recommended path for Meta Quest Link desktop streaming
116
116
  - [Embed Viewer](https://patrick-morrison.github.io/belowjs/examples/embed/) — Lightweight iframe-ready viewer
117
117
 
118
118
  ## Installation
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-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}.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}.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}}.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}@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-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}.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}.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}@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}