@liveroom-tech/react-immersive 1.3.3 → 1.3.5

package/dist/index.mjs

@@ -200,7 +200,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/styles/ModelViewer.css
-styleInject('.ri-viewer--license-checking,\n.ri-viewer--license-invalid {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  background-color: #f9f9f9;\n}\n.ri-viewer {\n  --ri-font-family:\n    Inter,\n    "Segoe UI",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --ri-viewer-bg: #1c1c1d;\n  --ri-viewer-text: #111827;\n  --ri-panel-bg: #ffffff;\n  --ri-panel-border: #e5e7eb;\n  --ri-panel-title: #111827;\n  --ri-panel-muted-text: #4b5563;\n  --ri-panel-subtle-text: #9ca3af;\n  --ri-panel-surface: #f9fafb;\n  --ri-panel-surface-hover: #f3f4f6;\n  --ri-panel-surface-border: #e5e7eb;\n  --ri-panel-button-text: #1f2937;\n  --ri-panel-accent: #2563eb;\n  --ri-panel-accent-contrast: #ffffff;\n  --ri-license-overlay-bg: rgba(0, 0, 0, 0.04);\n  --ri-license-overlay-border: rgba(0, 0, 0, 0.08);\n  --ri-license-overlay-text: #888;\n  --ri-license-overlay-error-bg: rgba(192, 57, 43, 0.06);\n  --ri-license-overlay-error-border: rgba(192, 57, 43, 0.2);\n  --ri-license-overlay-error-text: #c0392b;\n  --ri-sidepanel-font-family:\n    Inter,\n    "Segoe UI",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --ri-sidepanel-bg: var(--ri-databinding-bg, #111318);\n  --ri-sidepanel-open-btn-bg: rgba(20, 20, 20, 0.82);\n  --ri-sidepanel-open-btn-bg-hover: #27282b7e;\n  --ri-sidepanel-border: rgba(255, 255, 255, 0.06);\n  --ri-sidepanel-divider: rgba(255, 255, 255, 0.04);\n  --ri-sidepanel-border-strong: rgba(255, 255, 255, 0.08);\n  --ri-sidepanel-border-active: rgba(255, 255, 255, 0.18);\n  --ri-sidepanel-shadow-left: 4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-sidepanel-shadow-right: -4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-sidepanel-text: var(--ri-databinding-text, #f1f5f9);\n  --ri-sidepanel-text-emphasis: var(--ri-databinding-text-hover, #cbd5e1);\n  --ri-sidepanel-text-muted: var(--ri-databinding-text-muted, #94a3b8);\n  --ri-sidepanel-text-subtle: var(--ri-databinding-text-subtle, #64748b);\n  --ri-sidepanel-placeholder: var(--ri-databinding-text-faint, #475569);\n  --ri-sidepanel-surface: rgba(255, 255, 255, 0.05);\n  --ri-sidepanel-surface-hover: rgba(255, 255, 255, 0.1);\n  --ri-sidepanel-accent: #3b82f6;\n  --ri-sidepanel-accent-soft: rgba(59, 130, 246, 0.12);\n  --ri-databinding-bg: #111318;\n  --ri-databinding-border: rgba(255, 255, 255, 0.06);\n  --ri-databinding-border-strong: rgba(255, 255, 255, 0.08);\n  --ri-databinding-border-hover: rgba(255, 255, 255, 0.15);\n  --ri-databinding-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-databinding-font-family:\n    "Inter",\n    "Segoe UI",\n    sans-serif;\n  --ri-databinding-mono-font-family:\n    "JetBrains Mono",\n    "Fira Code",\n    "Menlo",\n    monospace;\n  --ri-databinding-text: #f1f5f9;\n  --ri-databinding-text-muted: #94a3b8;\n  --ri-databinding-text-subtle: #64748b;\n  --ri-databinding-text-faint: #475569;\n  --ri-databinding-text-hover: #cbd5e1;\n  --ri-databinding-surface: rgba(255, 255, 255, 0.03);\n  --ri-databinding-surface-hover: rgba(255, 255, 255, 0.06);\n  --ri-databinding-accent: #93c5fd;\n  --ri-databinding-accent-glow: rgba(147, 197, 253, 0.8);\n  --ri-databinding-accent-border: rgba(96, 165, 250, 0.55);\n  --ri-databinding-accent-gradient:\n    linear-gradient(\n      \n      135deg,\n      #1e3a8a 0%,\n      #1d4ed8 60%,\n      #2563eb 100% );\n  --ri-databinding-accent-gradient-active:\n    linear-gradient(\n      \n      135deg,\n      #1e3a8a 0%,\n      #1e40af 100% );\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  background: var(--ri-viewer-bg);\n  position: relative;\n  color: var(--ri-viewer-text);\n  font-family: var(--ri-font-family);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-synthesis: none;\n}\n.ri-viewer * {\n  box-sizing: border-box;\n}\n.ri-viewerLeft {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  min-width: 0;\n  position: relative;\n}\n.ri-viewerRight {\n  display: flex;\n  flex-shrink: 0;\n  min-width: 0;\n}\n.ri-panel {\n  width: 280px;\n  min-height: 0;\n  background: var(--ri-panel-bg);\n  border-right: 1px solid var(--ri-panel-border);\n  display: flex;\n  flex-direction: column;\n  padding: 20px;\n  overflow-y: auto;\n  flex-shrink: 0;\n  transition: margin-left 0.3s ease, transform 0.3s ease;\n}\n.ri-panel--open {\n  transform: translateX(0);\n  margin-left: 0;\n}\n.ri-panel--closed {\n  transform: translateX(-100%);\n  margin-left: -280px;\n}\n.ri-panelHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 12px;\n}\n.ri-panelTitle {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--ri-panel-title);\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ri-closeButton {\n  border: 0;\n  background: transparent;\n  color: var(--ri-panel-subtle-text);\n  font-size: 22px;\n  line-height: 1;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: color 0.2s ease;\n}\n.ri-closeButton:hover {\n  color: var(--ri-panel-muted-text);\n}\n.ri-json {\n  margin: 0 0 16px;\n  padding: 12px;\n  background: var(--ri-panel-surface);\n  border: 1px solid var(--ri-panel-surface-border);\n  border-radius: 12px;\n  font-size: 12px;\n  line-height: 1.55;\n  color: var(--ri-panel-button-text);\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.ri-divider {\n  border-top: 1px solid var(--ri-panel-border);\n  margin-bottom: 12px;\n}\n.ri-sectionLabel {\n  margin-bottom: 8px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--ri-panel-subtle-text);\n  text-transform: uppercase;\n  letter-spacing: 0.16em;\n}\n.ri-actionList {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.ri-actionButton {\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid var(--ri-panel-surface-border);\n  background: var(--ri-panel-surface);\n  color: var(--ri-panel-button-text);\n  padding: 10px 12px;\n  text-align: left;\n  font-size: 14px;\n  line-height: 1.4;\n  cursor: pointer;\n  transition:\n    background-color 0.2s ease,\n    border-color 0.2s ease,\n    color 0.2s ease;\n}\n.ri-actionButton:hover {\n  background: var(--ri-panel-surface-hover);\n  border-color: var(--ri-panel-border);\n}\n.ri-actionButton--active {\n  background: var(--ri-panel-accent);\n  border-color: var(--ri-panel-accent);\n  color: var(--ri-panel-accent-contrast);\n}\n.ri-actionButton--active:hover {\n  background: var(--ri-panel-accent);\n  border-color: var(--ri-panel-accent);\n}\n.ri-canvasArea {\n  flex: 1 1 auto;\n  position: relative;\n  min-width: 0;\n}\n.ri-canvasArea--measuring {\n  cursor: crosshair;\n}\n.ri-canvasArea canvas {\n  opacity: 1;\n  transition: opacity 0.18s ease;\n}\n.ri-canvasArea--positioning canvas {\n  opacity: 0;\n  transition: none;\n}\n.ri-bindingsMismatchBanner {\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 12px 7px 10px;\n  border-radius: 8px;\n  background: rgba(30, 20, 0, 0.88);\n  border: 1px solid rgba(251, 191, 36, 0.35);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  color: rgb(251, 191, 36);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.4;\n  white-space: nowrap;\n  pointer-events: auto;\n  max-width: calc(100% - 32px);\n  white-space: normal;\n  text-align: center;\n}\n.ri-bindingsMismatchBanner__icon {\n  flex-shrink: 0;\n}\n.ri-bindingsMismatchBanner__dismiss {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 4px;\n  padding: 2px;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  color: rgba(251, 191, 36, 0.7);\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n.ri-bindingsMismatchBanner__dismiss:hover {\n  color: rgb(251, 191, 36);\n  background: rgba(251, 191, 36, 0.12);\n}\n.ri-measureTools {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-measureButton {\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  color: rgba(255, 255, 255, 0.75);\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition:\n    background 0.15s ease,\n    color 0.15s ease,\n    border-color 0.15s ease;\n}\n.ri-measureButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.25);\n}\n.ri-measureButton:active {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-measureButton--active {\n  background: #22d3ee;\n  border-color: #22d3ee;\n  color: #06343c;\n}\n.ri-measureButton--active:hover {\n  background: #38dbf0;\n  color: #06343c;\n}\n.ri-measureHint {\n  padding: 6px 10px;\n  border-radius: 8px;\n  font-size: 12px;\n  line-height: 1;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  white-space: nowrap;\n}\n.ri-explodeTools {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-explodeSlider {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 34px;\n  padding: 0 12px;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 8px;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n.ri-explodeSlider input[type=range] {\n  width: 120px;\n  accent-color: #22d3ee;\n  cursor: pointer;\n}\n.ri-cinematicTools {\n  position: absolute;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-measureDot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #22d3ee;\n  border: 2px solid #fff;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);\n  pointer-events: none;\n}\n.ri-measureLabel {\n  padding: 3px 7px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  color: #06343c;\n  background: #22d3ee;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n  pointer-events: none;\n  user-select: none;\n}\n.ri-xrTools {\n  position: absolute;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-xrButton {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 34px;\n  padding: 0 10px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.16);\n  border-radius: 8px;\n  cursor: pointer;\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n.ri-xrButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n.ri-mobileHandoffBackdrop {\n  position: absolute;\n  z-index: 30;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  padding: 20px;\n  background: rgba(2, 6, 23, 0.68);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n}\n.ri-mobileHandoffDialog {\n  position: relative;\n  display: flex;\n  width: min(100%, 300px);\n  flex-direction: column;\n  align-items: center;\n  padding: 16px;\n  text-align: center;\n  color: #e2e8f0;\n  background: #0f172a;\n  border: 1px solid rgba(148, 163, 184, 0.3);\n  border-radius: 16px;\n  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);\n}\n.ri-mobileHandoffDialog > svg {\n  color: #67e8f9;\n}\n.ri-mobileHandoffDialog h2 {\n  margin: 12px 0 0;\n  font-size: 18px;\n  line-height: 1.25;\n  color: #fff;\n}\n.ri-mobileHandoffDialog p {\n  margin: 8px 0 16px;\n  font-size: 13px;\n  line-height: 1.5;\n  color: #cbd5e1;\n}\n.ri-mobileHandoffQr {\n  display: grid;\n  place-items: center;\n  padding: 10px;\n  background: #fff;\n  border-radius: 10px;\n}\n.ri-mobileHandoffDialog a {\n  margin-top: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #a5f3fc;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n.ri-mobileHandoffClose {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  display: grid;\n  width: 30px;\n  height: 30px;\n  place-items: center;\n  padding: 0;\n  color: #cbd5e1;\n  background: transparent;\n  border: 0;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.ri-mobileHandoffClose:hover {\n  color: #fff;\n  background: rgba(255, 255, 255, 0.1);\n}\n.ri-arHintOverlay {\n  position: absolute;\n  top: 18px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  width: min(calc(100% - 32px), 360px);\n  pointer-events: none;\n}\n.ri-arHint {\n  margin: 0 auto;\n  width: fit-content;\n  max-width: 100%;\n  padding: 6px 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.2;\n  text-align: center;\n  color: rgba(255, 255, 255, 0.92);\n  background: rgba(20, 20, 20, 0.58);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 999px;\n  user-select: none;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n.ri-arOverlay {\n  position: absolute;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  width: min(calc(100% - 32px), 420px);\n  pointer-events: none;\n}\n.ri-arControls {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n}\n.ri-arStatus,\n.ri-arActionButton {\n  max-width: 100%;\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.3;\n  text-align: center;\n  white-space: nowrap;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.16);\n  border-radius: 19px;\n  user-select: none;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n.ri-arStatus {\n  pointer-events: none;\n}\n.ri-arActionButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  cursor: pointer;\n  pointer-events: auto;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background 0.15s ease,\n    border-color 0.15s ease,\n    color 0.15s ease,\n    transform 0.15s ease;\n}\n.ri-arActionButton svg {\n  flex-shrink: 0;\n}\n.ri-arActionButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n.ri-arActionButton:active {\n  transform: scale(0.98);\n}\n.ri-arActionButton--primary {\n  color: #06343c;\n  background: #22d3ee;\n  border-color: transparent;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.ri-arActionButton--primary:hover {\n  background: #67e8f9;\n  border-color: transparent;\n}\n.ri-arActionButton.ri-arActionButton--active,\n.ri-arActionButton[aria-pressed=true],\n.ri-arActionButton.ri-arActionButton--active:hover,\n.ri-arActionButton[aria-pressed=true]:hover,\n.ri-arActionButton.ri-arActionButton--active:active,\n.ri-arActionButton[aria-pressed=true]:active {\n  color: #06343c;\n  background: #22d3ee;\n  border-color: transparent;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.ri-hiddenInput {\n  display: none;\n}\n.ri-popover {\n  position: absolute;\n  z-index: 50;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 16px;\n  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);\n  color: #111827;\n}\n.ri-popover--inline {\n  position: static;\n  z-index: auto;\n  width: 100%;\n  border-radius: 10px;\n  box-shadow: none;\n}\n.ri-popover--inline .react-colorful {\n  width: 100%;\n}\n.ri-popover--inline {\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text, #f1f5f9);\n}\n.ri-popover--inline .ri-popoverHeader {\n  border-bottom-color: var( --ri-databinding-border-strong, rgba(255, 255, 255, 0.08) );\n}\n.ri-popover--inline .ri-popoverLabel {\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-colorCode {\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-secondaryButton {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text, #f1f5f9);\n}\n.ri-popover--inline .ri-secondaryButton:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n.ri-popover--inline .ri-previewFrame {\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n}\n.ri-popover--inline .ri-emptyState {\n  border-color: var(--ri-databinding-border-hover, rgba(255, 255, 255, 0.15));\n  color: var(--ri-databinding-text-subtle, #64748b);\n}\n.ri-popover--inline .ri-uploadButton {\n  background: var(--ri-databinding-accent-gradient, #2563eb);\n  color: #ffffff;\n}\n.ri-popover--inline .ri-uploadButton:hover {\n  background: var(--ri-databinding-accent-gradient-active, #1d4ed8);\n}\n.ri-popover--inline .ri-removeButton {\n  background: transparent;\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-removeButton:hover {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n}\n.ri-popover--inline .ri-formatHint {\n  color: var(--ri-databinding-text-subtle, #64748b);\n}\n.ri-popoverHeader {\n  padding: 12px 16px;\n}\n.ri-popoverLabel {\n  margin: 0 0 8px;\n  font-size: 11px;\n  font-weight: 700;\n  color: #6b7280;\n  text-transform: uppercase;\n  letter-spacing: 0.16em;\n}\n.ri-inlineRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin-top: 8px;\n}\n.ri-colorCode {\n  font-size: 12px;\n  color: #9ca3af;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  text-transform: uppercase;\n}\n.ri-secondaryButton {\n  border: 1px solid #e5e7eb;\n  background: #f3f4f6;\n  color: #374151;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-secondaryButton:hover {\n  background: #e5e7eb;\n}\n.ri-materialBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-bottom: 12px;\n}\n.ri-previewFrame {\n  position: relative;\n  height: 112px;\n  border-radius: 12px;\n  overflow: hidden;\n  border: 1px solid #e5e7eb;\n}\n.ri-previewImage {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.ri-previewCaption {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  padding: 4px 8px;\n  color: #ffffff;\n  font-size: 10px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ri-emptyState {\n  height: 112px;\n  border-radius: 12px;\n  border: 2px dashed #e5e7eb;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  color: #d1d5db;\n  text-align: center;\n}\n.ri-uploadButton {\n  width: 100%;\n  border: 0;\n  border-radius: 10px;\n  background: #111827;\n  color: #ffffff;\n  padding: 10px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-uploadButton:hover {\n  background: #374151;\n}\n.ri-removeButton {\n  width: 100%;\n  border-radius: 10px;\n  border: 1px solid #e5e7eb;\n  background: #ffffff;\n  color: #6b7280;\n  padding: 8px 12px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-removeButton:hover {\n  background: #f9fafb;\n}\n.ri-formatHint {\n  margin: 0;\n  text-align: center;\n  font-size: 10px;\n  color: #d1d5db;\n}\n.ri-buttonContainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  position: absolute;\n  bottom: 12px;\n  left: 12px;\n  right: 12px;\n  z-index: 10;\n}\n.ri-tourControls {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  flex-shrink: 0;\n}\n.ri-rightControls {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: auto;\n}\n.ri-rightControls:only-child {\n  margin-left: auto;\n}\n.ri-navButtonSingle,\n.ri-tourButton,\n.ri-resetButton,\n.ri-downloadButton {\n  height: 34px;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  color: rgba(255, 255, 255, 0.75);\n  border-radius: 8px;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  cursor: pointer;\n  transition:\n    background 0.15s ease,\n    color 0.15s ease,\n    border-color 0.15s ease,\n    transform 0.15s ease;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.ri-navButtonSingle:hover:not(:disabled),\n.ri-tourButton:hover:not(:disabled),\n.ri-resetButton:hover:not(:disabled) {\n  background: rgba(40, 40, 40, 0.92);\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.25);\n}\n.ri-navButtonSingle:active:not(:disabled),\n.ri-tourButton:active:not(:disabled),\n.ri-resetButton:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-navButtonSingle:disabled,\n.ri-tourButton:disabled,\n.ri-resetButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.ri-navButtonSingle {\n  padding: 0 16px;\n  font-size: 13px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n}\n.ri-tourButton {\n  padding: 0 12px;\n  font-size: 13px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n}\n.ri-tourButton svg {\n  width: 15px;\n  height: 15px;\n  flex-shrink: 0;\n}\n.ri-tourButton--stop {\n  border-color: rgba(255, 68, 68, 0.4);\n  color: #ff6b6b;\n}\n.ri-tourButton--stop:hover:not(:disabled) {\n  background: rgba(255, 68, 68, 0.15);\n  border-color: rgba(255, 68, 68, 0.6);\n  color: #ff6b6b;\n}\n.ri-tourButton--stop:active:not(:disabled) {\n  background: #ff4444;\n  color: #fff;\n  border-color: #ff4444;\n}\n.ri-tourButton--next {\n  border-color: rgba(56, 219, 240, 0.3);\n  color: #38dbf0;\n}\n.ri-tourButton--next:hover:not(:disabled) {\n  background: rgba(56, 219, 240, 0.12);\n  border-color: rgba(56, 219, 240, 0.5);\n  color: #38dbf0;\n}\n.ri-tourButton--next:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-resetButton {\n  width: 34px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ri-resetButton svg {\n  width: 15px;\n  height: 15px;\n  pointer-events: none;\n  flex-shrink: 0;\n}\n.ri-resetButton:focus-visible {\n  outline: 2px solid rgba(255, 255, 255, 0.5);\n  outline-offset: 2px;\n}\n.ri-downloadWrapper {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n.ri-downloadButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 0 16px;\n  font-size: 13px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n.ri-downloadButton:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.72);\n  border-color: rgba(255, 255, 255, 0.3);\n  color: #fff;\n}\n.ri-downloadButton:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-downloadButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.ri-downloadButton__spinner {\n  display: inline-block;\n  width: 13px;\n  height: 13px;\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-top-color: #fff;\n  border-radius: 50%;\n  animation: ri-spin 0.7s linear infinite;\n  flex-shrink: 0;\n}\n.ri-downloadMenu {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  right: 0;\n  min-width: 168px;\n  background: rgba(20, 20, 20, 0.92);\n  border: 1px solid rgba(255, 255, 255, 0.14);\n  border-radius: 10px;\n  overflow: hidden;\n  z-index: 100;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  animation: ri-menuReveal 0.12s ease;\n}\n@keyframes ri-menuReveal {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ri-downloadMenuItem {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  width: 100%;\n  padding: 10px 14px;\n  font-size: 13px;\n  font-weight: 400;\n  color: #fff;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.1s ease;\n}\n.ri-downloadMenuItem:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.1);\n}\n.ri-downloadMenuItem:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.ri-downloadMenuDivider {\n  height: 1px;\n  background: rgba(255, 255, 255, 0.1);\n  margin: 0 10px;\n}\n@keyframes ri-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ri-annotationMarker {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: rgba(20, 20, 20, 0.82);\n  border: 2px solid rgba(255, 255, 255, 0.9);\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 700;\n  cursor: pointer;\n  z-index: 20;\n  user-select: none;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);\n  pointer-events: auto;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.ri-annotationMarker:hover {\n  transform: scale(1.08);\n  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);\n  background: rgba(40, 40, 40, 0.92);\n}\n.ri-annotationPopup {\n  position: absolute;\n  width: min(270px, calc(100vw - 32px));\n  background: rgba(20, 20, 20, 0.85);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 16px;\n  padding: 16px;\n  z-index: 30;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}\n.ri-annotationInput,\n.ri-annotationTextarea {\n  width: 100%;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  background: rgba(255, 255, 255, 0.05);\n  color: #e5e7eb;\n  border-radius: 10px;\n  padding: 10px 12px;\n  outline: none;\n  font-family: inherit;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n.ri-annotationInput {\n  font-size: 14px;\n  font-weight: 500;\n}\n.ri-annotationTextarea {\n  font-size: 13px;\n  resize: vertical;\n  min-height: 110px;\n}\n.ri-annotationInput:focus,\n.ri-annotationTextarea:focus {\n  border-color: #38dbf0;\n  box-shadow: 0 0 0 3px rgba(56, 219, 240, 0.12);\n}\n.ri-annotationActions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.ri-annotationOkBtn {\n  border: 0;\n  border-radius: 8px;\n  background: rgba(56, 219, 240, 0.8);\n  color: #06343c;\n  padding: 8px 18px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.2s ease, opacity 0.2s ease;\n}\n.ri-annotationOkBtn:hover:not(:disabled) {\n  background: #38dbf0;\n}\n.ri-annotationOkBtn:disabled,\n.ri-annotationOkBtn.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ri-annotationCancelBtn {\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  background: transparent;\n  color: #9ca3af;\n  border-radius: 8px;\n  padding: 8px 12px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n}\n.ri-annotationCancelBtn:hover {\n  background: rgba(255, 255, 255, 0.05);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ri-annotationIcons {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: #9ca3af;\n}\n.ri-annotationIcons svg {\n  flex-shrink: 0;\n}\n.ri-viewAnnotationPopup {\n  position: relative;\n  background: rgba(20, 20, 20, 0.85);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 8px;\n  padding: 12px 16px;\n  min-width: 200px;\n  max-width: min(280px, calc(100vw - 48px));\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);\n  pointer-events: auto;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  animation: ri-viewAnnotationFadeIn 0.15s ease-out;\n  margin-left: 24px;\n  margin-top: -20px;\n  isolation: isolate;\n  z-index: 1000;\n}\n.ri-viewAnnotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n.ri-viewAnnotationTitle {\n  margin: 0;\n  color: #e2e8f0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.ri-viewAnnotationClose {\n  background: transparent;\n  border: none;\n  color: #b7bdc6;\n  cursor: pointer;\n  font-size: 18px;\n  padding: 0 4px;\n  transition: color 0.2s;\n  line-height: 1;\n}\n.ri-viewAnnotationClose:hover {\n  color: #e2e8f0;\n}\n.ri-viewAnnotationDescription {\n  margin: 0;\n  color: #cbd5e1;\n  font-size: 13px;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n@keyframes ri-viewAnnotationFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-6px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n.ri-annotationNavSingle {\n  position: absolute;\n  bottom: 120px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  pointer-events: none;\n}\n.ri-annotationNavSingle > * {\n  pointer-events: auto;\n}\n.ri-navBadge {\n  background: rgba(255, 255, 255, 0.1);\n  padding: 2px 10px;\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.7);\n}\n.ri-annotationTitleHint {\n  background: rgba(0, 0, 0, 0.7);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  color: white;\n  padding: 8px 20px;\n  border-radius: 8px;\n  font-size: 13px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  text-align: center;\n  max-width: 350px;\n  animation: slideUp 0.3s ease;\n}\n.ri-annotationHintTitle {\n  font-weight: 600;\n  color: #e5e7eb;\n}\n.ri-annotationHintDesc {\n  font-size: 12px;\n  opacity: 0.6;\n  margin-top: 2px;\n  color: #d1d5db;\n}\n@keyframes slideUp {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@media (max-width: 768px) {\n  .ri-xrTools {\n    gap: 6px;\n  }\n  .ri-xrButton {\n    height: 34px;\n    gap: 6px;\n    padding: 0 8px;\n    font-size: 11px;\n  }\n  .ri-xrButton svg {\n    width: 14px;\n    height: 14px;\n  }\n  .ri-xrButtonPrefix {\n    display: none;\n  }\n  .ri-annotationNavSingle {\n    bottom: 100px;\n  }\n  .ri-navButtonSingle {\n    padding: 8px 20px;\n    font-size: 13px;\n    min-width: 110px;\n  }\n  .ri-annotationTitleHint {\n    padding: 6px 14px;\n    font-size: 12px;\n    max-width: 250px;\n  }\n  .ri-viewAnnotationPopup {\n    min-width: 160px;\n    max-width: 220px;\n    padding: 10px 12px;\n  }\n  .ri-viewAnnotationTitle {\n    font-size: 13px;\n  }\n  .ri-viewAnnotationDescription {\n    font-size: 12px;\n  }\n  .ri-buttonContainer {\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n  .ri-tourControls {\n    flex-wrap: wrap;\n  }\n  .ri-rightControls {\n    flex-wrap: wrap;\n  }\n}\n@media (max-width: 480px) {\n  .ri-xrTools {\n    gap: 5px;\n  }\n  .ri-xrButton {\n    height: 34px;\n    gap: 5px;\n    font-size: 10px;\n  }\n  .ri-xrButton svg {\n    width: 13px;\n    height: 13px;\n  }\n  .ri-annotationNavSingle {\n    bottom: 80px;\n  }\n  .ri-navButtonSingle {\n    padding: 6px 16px;\n    font-size: 12px;\n    min-width: 90px;\n    gap: 6px;\n  }\n  .ri-annotationTitleHint {\n    padding: 4px 10px;\n    font-size: 11px;\n    max-width: 200px;\n  }\n  .ri-navBadge {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n  .ri-tourButton {\n    padding: 0 8px;\n    font-size: 12px;\n  }\n  .ri-tourButton span {\n    display: none;\n  }\n  .ri-downloadButton {\n    padding: 0 10px;\n    font-size: 12px;\n  }\n  .ri-downloadButton span {\n    display: none;\n  }\n}\n.ri-canvasArea .bb-loadingOverlay {\n  position: absolute;\n  inset: 0;\n  z-index: 12;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  padding: 24px;\n  text-align: center;\n  border-radius: 14px;\n  background: rgba(15, 23, 42, 0.46);\n  backdrop-filter: blur(1px);\n}\n.ri-canvasArea .bb-loadingSpinner {\n  width: 40px;\n  height: 40px;\n  border-radius: 999px;\n  border: 3px solid rgba(226, 232, 240, 0.24);\n  border-top-color: #93c5fd;\n  animation: bb-spin 0.8s linear infinite;\n}\n.ri-canvasArea .bb-loadingMessage {\n  max-width: 320px;\n  color: #f7f8f9;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.5;\n}\n@keyframes bb-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ri-largeModelBanner {\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 12px 7px 10px;\n  border-radius: 8px;\n  background: rgba(30, 20, 0, 0.88);\n  border: 1px solid rgba(251, 191, 36, 0.35);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  color: rgb(251, 191, 36);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.4;\n  pointer-events: auto;\n  max-width: calc(100% - 32px);\n  white-space: normal;\n  text-align: center;\n}\n.ri-largeModelBanner--offset {\n  top: 64px;\n}\n.ri-largeModelBanner__icon {\n  flex-shrink: 0;\n}\n.ri-largeModelBanner__dismiss {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 4px;\n  padding: 2px;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  color: rgba(251, 191, 36, 0.7);\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n.ri-largeModelBanner__dismiss:hover {\n  color: rgb(251, 191, 36);\n  background: rgba(251, 191, 36, 0.12);\n}\n');
+styleInject('.ri-viewer--license-checking,\n.ri-viewer--license-invalid {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  background-color: #f9f9f9;\n}\n.ri-viewer {\n  --ri-font-family:\n    Inter,\n    "Segoe UI",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --ri-viewer-bg: #1c1c1d;\n  --ri-viewer-text: #111827;\n  --ri-panel-bg: #ffffff;\n  --ri-panel-border: #e5e7eb;\n  --ri-panel-title: #111827;\n  --ri-panel-muted-text: #4b5563;\n  --ri-panel-subtle-text: #9ca3af;\n  --ri-panel-surface: #f9fafb;\n  --ri-panel-surface-hover: #f3f4f6;\n  --ri-panel-surface-border: #e5e7eb;\n  --ri-panel-button-text: #1f2937;\n  --ri-panel-accent: #2563eb;\n  --ri-panel-accent-contrast: #ffffff;\n  --ri-license-overlay-bg: rgba(0, 0, 0, 0.04);\n  --ri-license-overlay-border: rgba(0, 0, 0, 0.08);\n  --ri-license-overlay-text: #888;\n  --ri-license-overlay-error-bg: rgba(192, 57, 43, 0.06);\n  --ri-license-overlay-error-border: rgba(192, 57, 43, 0.2);\n  --ri-license-overlay-error-text: #c0392b;\n  --ri-sidepanel-font-family:\n    Inter,\n    "Segoe UI",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --ri-sidepanel-bg: var(--ri-databinding-bg, #111318);\n  --ri-sidepanel-open-btn-bg: rgba(20, 20, 20, 0.82);\n  --ri-sidepanel-open-btn-bg-hover: #27282b7e;\n  --ri-sidepanel-border: rgba(255, 255, 255, 0.06);\n  --ri-sidepanel-divider: rgba(255, 255, 255, 0.04);\n  --ri-sidepanel-border-strong: rgba(255, 255, 255, 0.08);\n  --ri-sidepanel-border-active: rgba(255, 255, 255, 0.18);\n  --ri-sidepanel-shadow-left: 4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-sidepanel-shadow-right: -4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-sidepanel-text: var(--ri-databinding-text, #f1f5f9);\n  --ri-sidepanel-text-emphasis: var(--ri-databinding-text-hover, #cbd5e1);\n  --ri-sidepanel-text-muted: var(--ri-databinding-text-muted, #94a3b8);\n  --ri-sidepanel-text-subtle: var(--ri-databinding-text-subtle, #64748b);\n  --ri-sidepanel-placeholder: var(--ri-databinding-text-faint, #475569);\n  --ri-sidepanel-surface: rgba(255, 255, 255, 0.05);\n  --ri-sidepanel-surface-hover: rgba(255, 255, 255, 0.1);\n  --ri-sidepanel-accent: #3b82f6;\n  --ri-sidepanel-accent-soft: rgba(59, 130, 246, 0.12);\n  --ri-databinding-bg: #111318;\n  --ri-databinding-border: rgba(255, 255, 255, 0.06);\n  --ri-databinding-border-strong: rgba(255, 255, 255, 0.08);\n  --ri-databinding-border-hover: rgba(255, 255, 255, 0.15);\n  --ri-databinding-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-databinding-font-family:\n    "Inter",\n    "Segoe UI",\n    sans-serif;\n  --ri-databinding-mono-font-family:\n    "JetBrains Mono",\n    "Fira Code",\n    "Menlo",\n    monospace;\n  --ri-databinding-text: #f1f5f9;\n  --ri-databinding-text-muted: #94a3b8;\n  --ri-databinding-text-subtle: #64748b;\n  --ri-databinding-text-faint: #475569;\n  --ri-databinding-text-hover: #cbd5e1;\n  --ri-databinding-surface: rgba(255, 255, 255, 0.03);\n  --ri-databinding-surface-hover: rgba(255, 255, 255, 0.06);\n  --ri-databinding-accent: #93c5fd;\n  --ri-databinding-accent-glow: rgba(147, 197, 253, 0.8);\n  --ri-databinding-accent-border: rgba(96, 165, 250, 0.55);\n  --ri-databinding-accent-gradient:\n    linear-gradient(\n      \n      135deg,\n      #1e3a8a 0%,\n      #1d4ed8 60%,\n      #2563eb 100% );\n  --ri-databinding-accent-gradient-active:\n    linear-gradient(\n      \n      135deg,\n      #1e3a8a 0%,\n      #1e40af 100% );\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  background: var(--ri-viewer-bg);\n  position: relative;\n  color: var(--ri-viewer-text);\n  font-family: var(--ri-font-family);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-synthesis: none;\n}\n.ri-viewer * {\n  box-sizing: border-box;\n}\n.ri-viewerLeft {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  min-width: 0;\n  position: relative;\n}\n.ri-viewerRight {\n  display: flex;\n  flex-shrink: 0;\n  min-width: 0;\n}\n.ri-panel {\n  width: 280px;\n  min-height: 0;\n  background: var(--ri-panel-bg);\n  border-right: 1px solid var(--ri-panel-border);\n  display: flex;\n  flex-direction: column;\n  padding: 20px;\n  overflow-y: auto;\n  flex-shrink: 0;\n  transition: margin-left 0.3s ease, transform 0.3s ease;\n}\n.ri-panel--open {\n  transform: translateX(0);\n  margin-left: 0;\n}\n.ri-panel--closed {\n  transform: translateX(-100%);\n  margin-left: -280px;\n}\n.ri-panelHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 12px;\n}\n.ri-panelTitle {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--ri-panel-title);\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ri-closeButton {\n  border: 0;\n  background: transparent;\n  color: var(--ri-panel-subtle-text);\n  font-size: 22px;\n  line-height: 1;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: color 0.2s ease;\n}\n.ri-closeButton:hover {\n  color: var(--ri-panel-muted-text);\n}\n.ri-json {\n  margin: 0 0 16px;\n  padding: 12px;\n  background: var(--ri-panel-surface);\n  border: 1px solid var(--ri-panel-surface-border);\n  border-radius: 12px;\n  font-size: 12px;\n  line-height: 1.55;\n  color: var(--ri-panel-button-text);\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.ri-divider {\n  border-top: 1px solid var(--ri-panel-border);\n  margin-bottom: 12px;\n}\n.ri-sectionLabel {\n  margin-bottom: 8px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--ri-panel-subtle-text);\n  text-transform: uppercase;\n  letter-spacing: 0.16em;\n}\n.ri-actionList {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.ri-actionButton {\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid var(--ri-panel-surface-border);\n  background: var(--ri-panel-surface);\n  color: var(--ri-panel-button-text);\n  padding: 10px 12px;\n  text-align: left;\n  font-size: 14px;\n  line-height: 1.4;\n  cursor: pointer;\n  transition:\n    background-color 0.2s ease,\n    border-color 0.2s ease,\n    color 0.2s ease;\n}\n.ri-actionButton:hover {\n  background: var(--ri-panel-surface-hover);\n  border-color: var(--ri-panel-border);\n}\n.ri-actionButton--active {\n  background: var(--ri-panel-accent);\n  border-color: var(--ri-panel-accent);\n  color: var(--ri-panel-accent-contrast);\n}\n.ri-actionButton--active:hover {\n  background: var(--ri-panel-accent);\n  border-color: var(--ri-panel-accent);\n}\n.ri-canvasArea {\n  flex: 1 1 auto;\n  position: relative;\n  min-width: 0;\n}\n.ri-canvasArea--measuring {\n  cursor: crosshair;\n}\n.ri-canvasArea canvas {\n  opacity: 1;\n  transition: opacity 0.18s ease;\n}\n.ri-canvasArea--positioning canvas {\n  opacity: 0;\n  transition: none;\n}\n.ri-bindingsMismatchBanner {\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 12px 7px 10px;\n  border-radius: 8px;\n  background: rgba(30, 20, 0, 0.88);\n  border: 1px solid rgba(251, 191, 36, 0.35);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  color: rgb(251, 191, 36);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.4;\n  white-space: nowrap;\n  pointer-events: auto;\n  max-width: calc(100% - 32px);\n  white-space: normal;\n  text-align: center;\n}\n.ri-bindingsMismatchBanner__icon {\n  flex-shrink: 0;\n}\n.ri-bindingsMismatchBanner__dismiss {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 4px;\n  padding: 2px;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  color: rgba(251, 191, 36, 0.7);\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n.ri-bindingsMismatchBanner__dismiss:hover {\n  color: rgb(251, 191, 36);\n  background: rgba(251, 191, 36, 0.12);\n}\n.ri-measureTools {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-measureButton {\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  color: rgba(255, 255, 255, 0.75);\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition:\n    background 0.15s ease,\n    color 0.15s ease,\n    border-color 0.15s ease;\n}\n.ri-measureButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.25);\n}\n.ri-measureButton:active {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-measureButton--active {\n  background: #22d3ee;\n  border-color: #22d3ee;\n  color: #06343c;\n}\n.ri-measureButton--active:hover {\n  background: #38dbf0;\n  color: #06343c;\n}\n.ri-measureHint {\n  padding: 6px 10px;\n  border-radius: 8px;\n  font-size: 12px;\n  line-height: 1;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  white-space: nowrap;\n}\n.ri-explodeTools {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-explodeSlider {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 34px;\n  padding: 0 12px;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 8px;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n.ri-explodeSlider input[type=range] {\n  width: 120px;\n  accent-color: #22d3ee;\n  cursor: pointer;\n}\n.ri-cinematicTools {\n  position: absolute;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-measureDot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #22d3ee;\n  border: 2px solid #fff;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);\n  pointer-events: none;\n}\n.ri-measureLabel {\n  padding: 3px 7px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  color: #06343c;\n  background: #22d3ee;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n  pointer-events: none;\n  user-select: none;\n}\n.ri-xrTools {\n  position: absolute;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-xrButton {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 34px;\n  padding: 0 10px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.16);\n  border-radius: 8px;\n  cursor: pointer;\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n.ri-xrButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n.ri-mobileHandoffBackdrop {\n  position: absolute;\n  z-index: 30;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  padding: 20px;\n  background: rgba(2, 6, 23, 0.68);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n}\n.ri-mobileHandoffDialog {\n  position: relative;\n  display: flex;\n  width: min(100%, 300px);\n  flex-direction: column;\n  align-items: center;\n  padding: 16px;\n  text-align: center;\n  color: #e2e8f0;\n  background: #0f172a;\n  border: 1px solid rgba(148, 163, 184, 0.3);\n  border-radius: 16px;\n  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);\n}\n.ri-mobileHandoffDialog > svg {\n  color: #67e8f9;\n}\n.ri-mobileHandoffDialog h2 {\n  margin: 12px 0 0;\n  font-size: 18px;\n  line-height: 1.25;\n  color: #fff;\n}\n.ri-mobileHandoffDialog p {\n  margin: 8px 0 16px;\n  font-size: 13px;\n  line-height: 1.5;\n  color: #cbd5e1;\n}\n.ri-mobileHandoffQr {\n  display: grid;\n  place-items: center;\n  padding: 10px;\n  background: #fff;\n  border-radius: 10px;\n}\n.ri-mobileHandoffDialog a {\n  margin-top: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #a5f3fc;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n.ri-mobileHandoffClose {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  display: grid;\n  width: 30px;\n  height: 30px;\n  place-items: center;\n  padding: 0;\n  color: #cbd5e1;\n  background: transparent;\n  border: 0;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.ri-mobileHandoffClose:hover {\n  color: #fff;\n  background: rgba(255, 255, 255, 0.1);\n}\n.ri-arHintOverlay {\n  position: absolute;\n  top: 18px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  width: min(calc(100% - 32px), 360px);\n  pointer-events: none;\n}\n.ri-arHint {\n  margin: 0 auto;\n  width: fit-content;\n  max-width: 100%;\n  padding: 6px 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.2;\n  text-align: center;\n  color: rgba(255, 255, 255, 0.92);\n  background: rgba(20, 20, 20, 0.58);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 999px;\n  user-select: none;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n.ri-arOverlay {\n  position: absolute;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  width: min(calc(100% - 32px), 420px);\n  pointer-events: none;\n}\n.ri-arControls {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n}\n.ri-arStatus,\n.ri-arActionButton {\n  max-width: 100%;\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.3;\n  text-align: center;\n  white-space: nowrap;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.16);\n  border-radius: 19px;\n  user-select: none;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n.ri-arStatus {\n  pointer-events: none;\n}\n.ri-arActionButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  cursor: pointer;\n  pointer-events: auto;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background 0.15s ease,\n    border-color 0.15s ease,\n    color 0.15s ease,\n    transform 0.15s ease;\n}\n.ri-arActionButton svg {\n  flex-shrink: 0;\n}\n.ri-arActionButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n.ri-arActionButton:active {\n  transform: scale(0.98);\n}\n.ri-arActionButton--primary {\n  color: #06343c;\n  background: #22d3ee;\n  border-color: transparent;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.ri-arActionButton--primary:hover {\n  background: #67e8f9;\n  border-color: transparent;\n}\n.ri-arActionButton.ri-arActionButton--active,\n.ri-arActionButton[aria-pressed=true],\n.ri-arActionButton.ri-arActionButton--active:hover,\n.ri-arActionButton[aria-pressed=true]:hover,\n.ri-arActionButton.ri-arActionButton--active:active,\n.ri-arActionButton[aria-pressed=true]:active {\n  color: #06343c;\n  background: #22d3ee;\n  border-color: transparent;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.ri-hiddenInput {\n  display: none;\n}\n.ri-popover {\n  position: absolute;\n  z-index: 50;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 16px;\n  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);\n  color: #111827;\n}\n.ri-popover--inline {\n  position: static;\n  z-index: auto;\n  width: 100%;\n  border-radius: 10px;\n  box-shadow: none;\n}\n.ri-popover--inline .react-colorful {\n  width: 100%;\n}\n.ri-popover--inline {\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text, #f1f5f9);\n}\n.ri-popover--inline .ri-popoverHeader {\n  border-bottom-color: var( --ri-databinding-border-strong, rgba(255, 255, 255, 0.08) );\n}\n.ri-popover--inline .ri-popoverLabel {\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-colorCode {\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-secondaryButton {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text, #f1f5f9);\n}\n.ri-popover--inline .ri-secondaryButton:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n.ri-popover--inline .ri-previewFrame {\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n}\n.ri-popover--inline .ri-emptyState {\n  border-color: var(--ri-databinding-border-hover, rgba(255, 255, 255, 0.15));\n  color: var(--ri-databinding-text-subtle, #64748b);\n}\n.ri-popover--inline .ri-uploadButton {\n  background: var(--ri-databinding-accent-gradient, #2563eb);\n  color: #ffffff;\n}\n.ri-popover--inline .ri-uploadButton:hover {\n  background: var(--ri-databinding-accent-gradient-active, #1d4ed8);\n}\n.ri-popover--inline .ri-removeButton {\n  background: transparent;\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-removeButton:hover {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n}\n.ri-popover--inline .ri-formatHint {\n  color: var(--ri-databinding-text-subtle, #64748b);\n}\n.ri-popoverHeader {\n  padding: 12px 16px;\n}\n.ri-popoverLabel {\n  margin: 0 0 8px;\n  font-size: 11px;\n  font-weight: 700;\n  color: #6b7280;\n  text-transform: uppercase;\n  letter-spacing: 0.16em;\n}\n.ri-inlineRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin-top: 8px;\n}\n.ri-colorCode {\n  font-size: 12px;\n  color: #9ca3af;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  text-transform: uppercase;\n}\n.ri-secondaryButton {\n  border: 1px solid #e5e7eb;\n  background: #f3f4f6;\n  color: #374151;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-secondaryButton:hover {\n  background: #e5e7eb;\n}\n.ri-materialBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-bottom: 12px;\n}\n.ri-previewFrame {\n  position: relative;\n  height: 112px;\n  border-radius: 12px;\n  overflow: hidden;\n  border: 1px solid #e5e7eb;\n}\n.ri-previewImage {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.ri-previewCaption {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  padding: 4px 8px;\n  color: #ffffff;\n  font-size: 10px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ri-emptyState {\n  height: 112px;\n  border-radius: 12px;\n  border: 2px dashed #e5e7eb;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  color: #d1d5db;\n  text-align: center;\n}\n.ri-uploadButton {\n  width: 100%;\n  border: 0;\n  border-radius: 10px;\n  background: #111827;\n  color: #ffffff;\n  padding: 10px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-uploadButton:hover {\n  background: #374151;\n}\n.ri-removeButton {\n  width: 100%;\n  border-radius: 10px;\n  border: 1px solid #e5e7eb;\n  background: #ffffff;\n  color: #6b7280;\n  padding: 8px 12px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-removeButton:hover {\n  background: #f9fafb;\n}\n.ri-formatHint {\n  margin: 0;\n  text-align: center;\n  font-size: 10px;\n  color: #d1d5db;\n}\n.ri-buttonContainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  position: absolute;\n  bottom: 12px;\n  left: 12px;\n  right: 12px;\n  z-index: 10;\n}\n.ri-tourControls {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  flex-shrink: 0;\n}\n.ri-rightControls {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: auto;\n}\n.ri-rightControls:only-child {\n  margin-left: auto;\n}\n.ri-navButtonSingle,\n.ri-tourButton,\n.ri-resetButton,\n.ri-downloadButton {\n  height: 34px;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  color: rgba(255, 255, 255, 0.75);\n  border-radius: 8px;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  cursor: pointer;\n  transition:\n    background 0.15s ease,\n    color 0.15s ease,\n    border-color 0.15s ease,\n    transform 0.15s ease;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.ri-navButtonSingle:hover:not(:disabled),\n.ri-tourButton:hover:not(:disabled),\n.ri-resetButton:hover:not(:disabled) {\n  background: rgba(40, 40, 40, 0.92);\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.25);\n}\n.ri-navButtonSingle:active:not(:disabled),\n.ri-tourButton:active:not(:disabled),\n.ri-resetButton:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-navButtonSingle:disabled,\n.ri-tourButton:disabled,\n.ri-resetButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.ri-navButtonSingle {\n  padding: 0 16px;\n  font-size: 13px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n}\n.ri-tourButton {\n  padding: 0 12px;\n  font-size: 13px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n}\n.ri-tourButton svg {\n  width: 15px;\n  height: 15px;\n  flex-shrink: 0;\n}\n.ri-tourButton--stop {\n  border-color: rgba(255, 68, 68, 0.4);\n  color: #ff6b6b;\n}\n.ri-tourButton--stop:hover:not(:disabled) {\n  background: rgba(255, 68, 68, 0.15);\n  border-color: rgba(255, 68, 68, 0.6);\n  color: #ff6b6b;\n}\n.ri-tourButton--stop:active:not(:disabled) {\n  background: #ff4444;\n  color: #fff;\n  border-color: #ff4444;\n}\n.ri-tourButton--next {\n  border-color: rgba(56, 219, 240, 0.3);\n  color: #38dbf0;\n}\n.ri-tourButton--next:hover:not(:disabled) {\n  background: rgba(56, 219, 240, 0.12);\n  border-color: rgba(56, 219, 240, 0.5);\n  color: #38dbf0;\n}\n.ri-tourButton--next:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-resetButton {\n  width: 34px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ri-resetButton svg {\n  width: 15px;\n  height: 15px;\n  pointer-events: none;\n  flex-shrink: 0;\n}\n.ri-resetButton:focus-visible {\n  outline: 2px solid rgba(255, 255, 255, 0.5);\n  outline-offset: 2px;\n}\n.ri-downloadWrapper {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n.ri-downloadButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 0 16px;\n  font-size: 13px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n.ri-downloadButton:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.72);\n  border-color: rgba(255, 255, 255, 0.3);\n  color: #fff;\n}\n.ri-downloadButton:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-downloadButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.ri-downloadButton__spinner {\n  display: inline-block;\n  width: 13px;\n  height: 13px;\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-top-color: #fff;\n  border-radius: 50%;\n  animation: ri-spin 0.7s linear infinite;\n  flex-shrink: 0;\n}\n.ri-downloadMenu {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  right: 0;\n  min-width: 168px;\n  background: rgba(20, 20, 20, 0.92);\n  border: 1px solid rgba(255, 255, 255, 0.14);\n  border-radius: 10px;\n  overflow: hidden;\n  z-index: 100;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  animation: ri-menuReveal 0.12s ease;\n}\n@keyframes ri-menuReveal {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ri-downloadMenuItem {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  width: 100%;\n  padding: 10px 14px;\n  font-size: 13px;\n  font-weight: 400;\n  color: #fff;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.1s ease;\n  text-wrap: nowrap;\n}\n.ri-downloadMenuItem:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.1);\n}\n.ri-downloadMenuItem:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.ri-downloadMenuDivider {\n  height: 1px;\n  background: rgba(255, 255, 255, 0.1);\n  margin: 0 10px;\n}\n.ri-downloadMenuNotice {\n  max-width: 220px;\n  padding: 8px 14px 11px;\n  color: #fca5a5;\n  font-size: 11px;\n  line-height: 1.4;\n}\n@keyframes ri-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ri-annotationMarker {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: rgba(20, 20, 20, 0.82);\n  border: 2px solid rgba(255, 255, 255, 0.9);\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 700;\n  cursor: pointer;\n  z-index: 20;\n  user-select: none;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);\n  pointer-events: auto;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.ri-annotationMarker:hover {\n  transform: scale(1.08);\n  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);\n  background: rgba(40, 40, 40, 0.92);\n}\n.ri-annotationPopup {\n  position: absolute;\n  width: min(270px, calc(100vw - 32px));\n  background: rgba(20, 20, 20, 0.85);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 16px;\n  padding: 16px;\n  z-index: 30;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}\n.ri-annotationInput,\n.ri-annotationTextarea {\n  width: 100%;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  background: rgba(255, 255, 255, 0.05);\n  color: #e5e7eb;\n  border-radius: 10px;\n  padding: 10px 12px;\n  outline: none;\n  font-family: inherit;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n.ri-annotationInput {\n  font-size: 14px;\n  font-weight: 500;\n}\n.ri-annotationTextarea {\n  font-size: 13px;\n  resize: vertical;\n  min-height: 110px;\n}\n.ri-annotationInput:focus,\n.ri-annotationTextarea:focus {\n  border-color: #38dbf0;\n  box-shadow: 0 0 0 3px rgba(56, 219, 240, 0.12);\n}\n.ri-annotationActions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.ri-annotationOkBtn {\n  border: 0;\n  border-radius: 8px;\n  background: rgba(56, 219, 240, 0.8);\n  color: #06343c;\n  padding: 8px 18px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.2s ease, opacity 0.2s ease;\n}\n.ri-annotationOkBtn:hover:not(:disabled) {\n  background: #38dbf0;\n}\n.ri-annotationOkBtn:disabled,\n.ri-annotationOkBtn.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ri-annotationCancelBtn {\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  background: transparent;\n  color: #9ca3af;\n  border-radius: 8px;\n  padding: 8px 12px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n}\n.ri-annotationCancelBtn:hover {\n  background: rgba(255, 255, 255, 0.05);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ri-annotationIcons {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: #9ca3af;\n}\n.ri-annotationIcons svg {\n  flex-shrink: 0;\n}\n.ri-viewAnnotationPopup {\n  position: relative;\n  background: rgba(20, 20, 20, 0.85);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 8px;\n  padding: 12px 16px;\n  min-width: 200px;\n  max-width: min(280px, calc(100vw - 48px));\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);\n  pointer-events: auto;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  animation: ri-viewAnnotationFadeIn 0.15s ease-out;\n  margin-left: 24px;\n  margin-top: -20px;\n  isolation: isolate;\n  z-index: 1000;\n}\n.ri-viewAnnotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n.ri-viewAnnotationTitle {\n  margin: 0;\n  color: #e2e8f0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.ri-viewAnnotationClose {\n  background: transparent;\n  border: none;\n  color: #b7bdc6;\n  cursor: pointer;\n  font-size: 18px;\n  padding: 0 4px;\n  transition: color 0.2s;\n  line-height: 1;\n}\n.ri-viewAnnotationClose:hover {\n  color: #e2e8f0;\n}\n.ri-viewAnnotationDescription {\n  margin: 0;\n  color: #cbd5e1;\n  font-size: 13px;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n@keyframes ri-viewAnnotationFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-6px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n.ri-annotationNavSingle {\n  position: absolute;\n  bottom: 120px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  pointer-events: none;\n}\n.ri-annotationNavSingle > * {\n  pointer-events: auto;\n}\n.ri-navBadge {\n  background: rgba(255, 255, 255, 0.1);\n  padding: 2px 10px;\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.7);\n}\n.ri-annotationTitleHint {\n  background: rgba(0, 0, 0, 0.7);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  color: white;\n  padding: 8px 20px;\n  border-radius: 8px;\n  font-size: 13px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  text-align: center;\n  max-width: 350px;\n  animation: slideUp 0.3s ease;\n}\n.ri-annotationHintTitle {\n  font-weight: 600;\n  color: #e5e7eb;\n}\n.ri-annotationHintDesc {\n  font-size: 12px;\n  opacity: 0.6;\n  margin-top: 2px;\n  color: #d1d5db;\n}\n@keyframes slideUp {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ri-canvasArea .bb-loadingOverlay {\n  position: absolute;\n  inset: 0;\n  z-index: 12;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  padding: 24px;\n  text-align: center;\n  border-radius: 14px;\n  background: rgba(15, 23, 42, 0.46);\n  backdrop-filter: blur(1px);\n}\n.ri-canvasArea .bb-loadingSpinner {\n  width: 40px;\n  height: 40px;\n  border-radius: 999px;\n  border: 3px solid rgba(226, 232, 240, 0.24);\n  border-top-color: #93c5fd;\n  animation: bb-spin 0.8s linear infinite;\n}\n.ri-canvasArea .bb-loadingMessage {\n  max-width: 320px;\n  color: #f7f8f9;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.5;\n}\n@keyframes bb-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ri-largeModelBanner {\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 12px 7px 10px;\n  border-radius: 8px;\n  background: rgba(30, 20, 0, 0.88);\n  border: 1px solid rgba(251, 191, 36, 0.35);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  color: rgb(251, 191, 36);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.4;\n  pointer-events: auto;\n  max-width: calc(100% - 32px);\n  white-space: normal;\n  text-align: center;\n}\n.ri-largeModelBanner--offset {\n  top: 64px;\n}\n.ri-largeModelBanner__icon {\n  flex-shrink: 0;\n}\n.ri-largeModelBanner__dismiss {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 4px;\n  padding: 2px;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  color: rgba(251, 191, 36, 0.7);\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n.ri-largeModelBanner__dismiss:hover {\n  color: rgb(251, 191, 36);\n  background: rgba(251, 191, 36, 0.12);\n}\n@media (max-width: 768px) {\n  .ri-xrTools {\n    gap: 6px;\n  }\n  .ri-xrButton {\n    height: 34px;\n    gap: 6px;\n    padding: 0 8px;\n    font-size: 11px;\n  }\n  .ri-xrButton svg {\n    width: 14px;\n    height: 14px;\n  }\n  .ri-xrButtonPrefix {\n    display: none;\n  }\n  .ri-annotationNavSingle {\n    bottom: 100px;\n  }\n  .ri-navButtonSingle {\n    padding: 8px 20px;\n    font-size: 13px;\n    min-width: 110px;\n  }\n  .ri-annotationTitleHint {\n    padding: 6px 14px;\n    font-size: 12px;\n    max-width: 250px;\n  }\n  .ri-viewAnnotationPopup {\n    min-width: 160px;\n    max-width: 220px;\n    padding: 10px 12px;\n  }\n  .ri-viewAnnotationTitle {\n    font-size: 13px;\n  }\n  .ri-viewAnnotationDescription {\n    font-size: 12px;\n  }\n  .ri-buttonContainer {\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n  .ri-tourControls {\n    flex-wrap: wrap;\n  }\n  .ri-rightControls {\n    flex-wrap: wrap;\n  }\n}\n@media (max-width: 480px) {\n  .ri-xrTools {\n    gap: 5px;\n  }\n  .ri-xrButton {\n    height: 34px;\n    gap: 5px;\n    font-size: 10px;\n  }\n  .ri-xrButton svg {\n    width: 13px;\n    height: 13px;\n  }\n  .ri-annotationNavSingle {\n    bottom: 80px;\n  }\n  .ri-navButtonSingle {\n    padding: 6px 16px;\n    font-size: 12px;\n    min-width: 90px;\n    gap: 6px;\n  }\n  .ri-annotationTitleHint {\n    padding: 4px 10px;\n    font-size: 11px;\n    max-width: 200px;\n  }\n  .ri-navBadge {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n  .ri-tourButton {\n    padding: 0 8px;\n    font-size: 12px;\n  }\n  .ri-tourButton span {\n    display: none;\n  }\n  .ri-downloadButton {\n    padding: 0 10px;\n    font-size: 12px;\n  }\n  .ri-downloadButton span {\n    display: none;\n  }\n}\n');
 
 // src/components/LicenseOverlay.tsx
 import { AlertTriangle } from "lucide-react";
@@ -325,6 +325,208 @@ function exportSceneMesh({
   });
 }
 
+// src/components/ModelViewer/internal/exportUvLayout.ts
+import { strToU8, zipSync } from "fflate";
+var SVG_SIZE = 2048;
+var MESH_COLORS = [
+  "#00e5ff",
+  "#ff4fd8",
+  "#ffe45e",
+  "#7cff6b",
+  "#ff784f",
+  "#a78bfa",
+  "#38bdf8",
+  "#fb7185"
+];
+function escapeXml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&apos;");
+}
+function slugify(value, fallback) {
+  const slug = value.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return slug || fallback;
+}
+function safeFilenameStem(value) {
+  return slugify(value, "model");
+}
+function getVertexIndex(geometry, elementIndex) {
+  return geometry.index ? Math.round(geometry.index.getX(elementIndex)) : elementIndex;
+}
+function readTriangle(geometry, uv, elementIndex) {
+  const a = getVertexIndex(geometry, elementIndex);
+  const b = getVertexIndex(geometry, elementIndex + 1);
+  const c = getVertexIndex(geometry, elementIndex + 2);
+  if (a >= uv.count || b >= uv.count || c >= uv.count) return null;
+  const values = [
+    { index: a, u: uv.getX(a), v: uv.getY(a) },
+    { index: b, u: uv.getX(b), v: uv.getY(b) },
+    { index: c, u: uv.getX(c), v: uv.getY(c) }
+  ];
+  return values.every(
+    (vertex) => Number.isFinite(vertex.u) && Number.isFinite(vertex.v)
+  ) ? values : null;
+}
+function uvPointKey(vertex) {
+  return `${vertex.u.toFixed(6)},${vertex.v.toFixed(6)}`;
+}
+function addEdge(edges, start, end, indexed) {
+  let startKey;
+  let endKey;
+  if (indexed) {
+    startKey = start.index;
+    endKey = end.index;
+  } else {
+    startKey = uvPointKey(start);
+    endKey = uvPointKey(end);
+  }
+  const key = startKey < endKey ? `${startKey}|${endKey}` : `${endKey}|${startKey}`;
+  const existing = edges.get(key);
+  if (existing) {
+    existing.count += 1;
+  } else {
+    edges.set(key, { count: 1, start, end });
+  }
+}
+function addTriangleEdges(edges, triangle, indexed) {
+  addEdge(edges, triangle[0], triangle[1], indexed);
+  addEdge(edges, triangle[1], triangle[2], indexed);
+  addEdge(edges, triangle[2], triangle[0], indexed);
+}
+function materialForIndex(material, materialIndex) {
+  if (!Array.isArray(material)) return material;
+  return material[materialIndex] ?? null;
+}
+function collectUvLayouts(scene) {
+  const layouts = /* @__PURE__ */ new Map();
+  let unnamedMeshIndex = 0;
+  let unnamedMaterialIndex = 0;
+  let meshColorIndex = 0;
+  scene.traverse((node) => {
+    const mesh = node;
+    if (!mesh.isMesh || !mesh.geometry || !mesh.material) return;
+    const geometry = mesh.geometry;
+    const uv = geometry.getAttribute("uv");
+    if (!uv || uv.itemSize < 2 || uv.count < 3) return;
+    unnamedMeshIndex += 1;
+    const meshName = mesh.name || `Mesh ${unnamedMeshIndex}`;
+    const elementCount = geometry.index?.count ?? uv.count;
+    const groups = geometry.groups.length > 0 ? geometry.groups : [{ start: 0, count: elementCount, materialIndex: 0 }];
+    for (const group of groups) {
+      const materialIndex = group.materialIndex ?? 0;
+      const material = materialForIndex(mesh.material, materialIndex);
+      if (!material) continue;
+      let layout = layouts.get(material.uuid);
+      if (!layout) {
+        unnamedMaterialIndex += 1;
+        layout = {
+          name: material.name || `Material ${unnamedMaterialIndex}`,
+          layers: /* @__PURE__ */ new Map()
+        };
+        layouts.set(material.uuid, layout);
+      }
+      let layer = layout.layers.get(mesh.uuid);
+      if (!layer) {
+        layer = {
+          name: meshName,
+          color: MESH_COLORS[meshColorIndex % MESH_COLORS.length],
+          edges: /* @__PURE__ */ new Map()
+        };
+        meshColorIndex += 1;
+        layout.layers.set(mesh.uuid, layer);
+      }
+      const start = Math.max(0, group.start);
+      const end = Math.min(elementCount, start + group.count);
+      for (let elementIndex = start; elementIndex + 2 < end; elementIndex += 3) {
+        const triangle = readTriangle(geometry, uv, elementIndex);
+        if (triangle) {
+          addTriangleEdges(layer.edges, triangle, Boolean(geometry.index));
+        }
+      }
+    }
+  });
+  return [...layouts.values()].filter(
+    (layout) => [...layout.layers.values()].some((layer) => layer.edges.size > 0)
+  );
+}
+function coordinate(value) {
+  return (value * SVG_SIZE).toFixed(2);
+}
+function edgePath(edge) {
+  return `M${coordinate(edge.start.u)} ${coordinate(1 - edge.start.v)}L${coordinate(edge.end.u)} ${coordinate(1 - edge.end.v)}`;
+}
+function renderSvg(layout) {
+  const materialName = escapeXml(layout.name);
+  const layers = [...layout.layers.values()].filter((layer) => layer.edges.size > 0).map((layer, index) => {
+    const name = escapeXml(layer.name);
+    const id = `${slugify(layer.name, "mesh")}-${index + 1}`;
+    const allEdges = [...layer.edges.values()];
+    const boundaryEdges = allEdges.filter((edge) => edge.count === 1);
+    const visibleEdges = boundaryEdges.length > 0 ? boundaryEdges : allEdges;
+    const paths = visibleEdges.map(edgePath).join("");
+    return [
+      `  <g id="${id}" data-mesh="${name}" fill="none" stroke="${layer.color}"`,
+      '     stroke-width="1" stroke-linejoin="round" vector-effect="non-scaling-stroke">',
+      `    <title>${name}</title>`,
+      `    <path d="${paths}"/>`,
+      "  </g>"
+    ].join("\n");
+  }).join("\n");
+  return [
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${SVG_SIZE}" height="${SVG_SIZE}" viewBox="0 0 ${SVG_SIZE} ${SVG_SIZE}">`,
+    `  <title>${materialName} UV layout</title>`,
+    "  <desc>UV0 island-outline template exported by React Immersive. The SVG canvas maps to the complete 0\u20131 texture area.</desc>",
+    '  <rect width="2048" height="2048" fill="none" stroke="#94a3b8" stroke-width="2"/>',
+    layers,
+    "</svg>"
+  ].join("\n");
+}
+function buildUvLayoutFiles(scene, downloadFilename = "model") {
+  const layouts = collectUvLayouts(scene);
+  const stem = safeFilenameStem(downloadFilename);
+  return layouts.map((layout, index) => {
+    const materialSlug = slugify(layout.name, `material-${index + 1}`);
+    const filename = layouts.length === 1 ? `${stem}-uv-layout.svg` : `${stem}-uv-${materialSlug}-${index + 1}.svg`;
+    return {
+      filename,
+      materialName: layout.name,
+      meshCount: [...layout.layers.values()].filter(
+        (layer) => layer.edges.size > 0
+      ).length,
+      svg: renderSvg(layout)
+    };
+  });
+}
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+  URL.revokeObjectURL(url);
+}
+function downloadUvLayouts(scene, downloadFilename = "model") {
+  const files = buildUvLayoutFiles(scene, downloadFilename);
+  if (files.length === 0) return files;
+  if (files.length === 1) {
+    downloadBlob(
+      new Blob([files[0].svg], { type: "image/svg+xml;charset=utf-8" }),
+      files[0].filename
+    );
+    return files;
+  }
+  const archive = Object.fromEntries(
+    files.map((file) => [file.filename, strToU8(file.svg)])
+  );
+  const zipped = zipSync(archive, { level: 6 });
+  downloadBlob(
+    new Blob([zipped], { type: "application/zip" }),
+    `${safeFilenameStem(downloadFilename)}-uv-layouts.zip`
+  );
+  return files;
+}
+
 // src/components/ModelViewer/internal/captureImage.ts
 import { PerspectiveCamera, Vector2 } from "three";
 function captureImage(capture, options = {}) {
@@ -3465,19 +3667,31 @@ function useCameraBiasedAnchor(annotation, worldPositionsRef) {
   });
   return anchorRef;
 }
-function AnnotationMarker3D({ annotation, occluders, worldPositionsRef, onClick, onHover }) {
+function AnnotationMarker3D({
+  annotation,
+  occluders,
+  worldPositionsRef,
+  onClick,
+  onHover,
+  showAnnotationOnHover
+}) {
   const [occluded, setOccluded] = useState4(false);
   const anchorRef = useCameraBiasedAnchor(annotation, worldPositionsRef);
   const [isHovered, setIsHovered] = useState4(false);
   const [zIndex, setZIndex] = useState4(1);
   const clickTimeoutRef = useRef6(null);
   const markerRef = useRef6(null);
+  const hoverTimeoutRef = useRef6(null);
   useEffect8(() => {
     return () => {
       if (clickTimeoutRef.current) {
         clearTimeout(clickTimeoutRef.current);
         clickTimeoutRef.current = null;
       }
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
     };
   }, []);
   const handleClick = (event) => {
@@ -3496,13 +3710,29 @@ function AnnotationMarker3D({ annotation, occluders, worldPositionsRef, onClick,
     event.stopPropagation();
     setIsHovered(true);
     setZIndex(100);
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
     onHover?.(annotation);
+    if (showAnnotationOnHover) {
+      onClick?.(annotation);
+    }
   };
   const handlePointerLeave = (event) => {
     event.stopPropagation();
     setIsHovered(false);
     setZIndex(1);
-    onHover?.(null);
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+    hoverTimeoutRef.current = window.setTimeout(() => {
+      onHover?.(null);
+      if (showAnnotationOnHover) {
+        onHover?.(null);
+      }
+      hoverTimeoutRef.current = null;
+    }, 50);
   };
   const handlePointerDown = (event) => {
     event.stopPropagation();
@@ -3627,7 +3857,8 @@ function AnnotationsLayer({
   onAnnotationClick,
   onAnnotationHover,
   onCloseAnnotation,
-  hideCloseButton = false
+  hideCloseButton = false,
+  showAnnotationOnHover = false
 }) {
   const invalidate = useThree8((state) => state.invalidate);
   const scene = useThree8((state) => state.scene);
@@ -3635,6 +3866,7 @@ function AnnotationsLayer({
   const [isLocked, setIsLocked] = useState4(false);
   const groupRef = useRef6(null);
   const invalidateFrameRef = useRef6(null);
+  const hoverCloseTimeoutRef = useRef6(null);
   const occluders = useMemo8(() => {
     const list = [];
     scene.traverse((object) => {
@@ -3665,6 +3897,9 @@ function AnnotationsLayer({
       if (invalidateFrameRef.current !== null) {
         window.cancelAnimationFrame(invalidateFrameRef.current);
       }
+      if (hoverCloseTimeoutRef.current) {
+        clearTimeout(hoverCloseTimeoutRef.current);
+      }
     };
   }, []);
   const activeAnnotationToShow = isLocked ? localActiveAnnotation : activeAnnotation || localActiveAnnotation;
@@ -3676,53 +3911,71 @@ function AnnotationsLayer({
       (annotation) => annotation.id === activeAnnotationToShow.id
     ) ?? activeAnnotationToShow;
   }, [activeAnnotationToShow, annotations]);
-  const handleAnnotationClick = useCallback((annotation) => {
-    if (isLocked && localActiveAnnotation?.id === annotation.id) {
-      setIsLocked(false);
-      setLocalActiveAnnotation(null);
-      onCloseAnnotation?.();
-      return;
-    }
-    setIsLocked(true);
-    setLocalActiveAnnotation(annotation);
-    onAnnotationClick?.(annotation);
-  }, [isLocked, localActiveAnnotation, onAnnotationClick, onCloseAnnotation]);
-  const handleAnnotationHover = useCallback((annotation) => {
-    if (!isLocked) {
+  const handleAnnotationClick = useCallback(
+    (annotation) => {
+      if (isLocked && localActiveAnnotation?.id === annotation.id) {
+        setIsLocked(false);
+        setLocalActiveAnnotation(null);
+        onCloseAnnotation?.();
+        return;
+      }
+      setIsLocked(true);
+      setLocalActiveAnnotation(annotation);
+      onAnnotationClick?.(annotation);
+    },
+    [isLocked, localActiveAnnotation, onAnnotationClick, onCloseAnnotation]
+  );
+  const handleAnnotationHover = useCallback(
+    (annotation) => {
       onAnnotationHover?.(annotation);
-      if (annotation) {
-        setLocalActiveAnnotation(annotation);
-      } else {
-        if (!isLocked) {
-          setLocalActiveAnnotation(null);
+      if (showAnnotationOnHover && !isLocked) {
+        if (hoverCloseTimeoutRef.current) {
+          clearTimeout(hoverCloseTimeoutRef.current);
+          hoverCloseTimeoutRef.current = null;
+        }
+        if (annotation) {
+          setLocalActiveAnnotation(annotation);
+        } else {
+          hoverCloseTimeoutRef.current = window.setTimeout(() => {
+            setLocalActiveAnnotation(null);
+            onCloseAnnotation?.();
+            hoverCloseTimeoutRef.current = null;
+          }, 100);
         }
       }
-    }
-  }, [isLocked, onAnnotationHover]);
+    },
+    [isLocked, onAnnotationHover, showAnnotationOnHover, onCloseAnnotation]
+  );
   const handleClose = useCallback(() => {
     setIsLocked(false);
     setLocalActiveAnnotation(null);
     onCloseAnnotation?.();
   }, [onCloseAnnotation]);
-  const handleCanvasClick = useCallback((event) => {
-    const target = event.target;
-    if (target.closest?.(".ri-annotationMarker") || target.closest?.(".ri-viewAnnotationPopup") || target.closest?.(".annotation-html-wrapper")) {
-      return;
-    }
-    const canvas = canvasRootRef.current;
-    if (canvas && canvas.contains(target)) {
-      setIsLocked(false);
-      setLocalActiveAnnotation(null);
-      onCloseAnnotation?.();
-    }
-  }, [canvasRootRef, onCloseAnnotation]);
-  const handleEscapeKey = useCallback((event) => {
-    if (event.key === "Escape" && isLocked) {
-      setIsLocked(false);
-      setLocalActiveAnnotation(null);
-      onCloseAnnotation?.();
-    }
-  }, [isLocked, onCloseAnnotation]);
+  const handleCanvasClick = useCallback(
+    (event) => {
+      const target = event.target;
+      if (target.closest?.(".ri-annotationMarker") || target.closest?.(".ri-viewAnnotationPopup") || target.closest?.(".annotation-html-wrapper")) {
+        return;
+      }
+      const canvas = canvasRootRef.current;
+      if (canvas && canvas.contains(target)) {
+        setIsLocked(false);
+        setLocalActiveAnnotation(null);
+        onCloseAnnotation?.();
+      }
+    },
+    [canvasRootRef, onCloseAnnotation]
+  );
+  const handleEscapeKey = useCallback(
+    (event) => {
+      if (event.key === "Escape" && isLocked) {
+        setIsLocked(false);
+        setLocalActiveAnnotation(null);
+        onCloseAnnotation?.();
+      }
+    },
+    [isLocked, onCloseAnnotation]
+  );
   useEffect8(() => {
     const canvas = canvasRootRef.current;
     if (canvas) {
@@ -3772,7 +4025,8 @@ function AnnotationsLayer({
           occluders,
           worldPositionsRef,
           onClick: handleAnnotationClick,
-          onHover: handleAnnotationHover
+          onHover: handleAnnotationHover,
+          showAnnotationOnHover
         },
         stableKey
       );
@@ -4130,6 +4384,7 @@ import {
   Box3 as Box33,
   CatmullRomCurve3,
   Sphere,
+  Spherical,
   Vector3 as Vector36
 } from "three";
 var ENTER_BLEND_SECONDS = 1.2;
@@ -4138,18 +4393,75 @@ function CinematicCamera({
   sceneRef,
   config,
   playing,
+  resetOnPlay = false,
   onFinished,
-  onUserInteract
+  onUserInteract,
+  onStop
 }) {
   const invalidate = useThree9((state) => state.invalidate);
   const waypoints = useMemo11(() => config.waypoints ?? [], [config.waypoints]);
   const hasPath = waypoints.length >= 2;
   const loop = config.loop ?? true;
-  const duration = config.duration ?? (hasPath ? Math.max(waypoints.length * 3.5, 8) : 24);
+  const calculatedDuration = useMemo11(() => {
+    if (waypoints.length < 2) return 24;
+    let total = 0;
+    for (let i = 0; i < waypoints.length - 1; i++) {
+      total += waypoints[i].segmentDuration ?? 3.5;
+    }
+    if (loop && waypoints.length > 1) {
+      total += waypoints[waypoints.length - 1].segmentDuration ?? 3.5;
+    }
+    return Math.max(total, 4);
+  }, [waypoints, loop]);
+  const duration = config.duration ?? calculatedDuration;
   const signature = useMemo11(
-    () => waypoints.map((w) => [...w.position, ...w.target].join(",")).join(";"),
+    () => waypoints.map(
+      (waypoint) => [
+        ...waypoint.position,
+        ...waypoint.target,
+        waypoint.azimuthAngle ?? "",
+        waypoint.polarAngle ?? "",
+        waypoint.segmentDuration ?? ""
+      ].join(",")
+    ).join(";"),
     [waypoints]
   );
+  const segmentTimes = useMemo11(() => {
+    const times = [];
+    if (waypoints.length < 2) return times;
+    let accumulated = 0;
+    for (let i = 0; i < waypoints.length - 1; i++) {
+      accumulated += waypoints[i].segmentDuration ?? 3.5;
+      times.push(accumulated);
+    }
+    if (loop && waypoints.length > 1) {
+      accumulated += waypoints[waypoints.length - 1].segmentDuration ?? 3.5;
+      times.push(accumulated);
+    }
+    return times;
+  }, [waypoints, loop]);
+  const getCurveParameter = useMemo11(() => {
+    return (elapsed) => {
+      if (waypoints.length < 2 || segmentTimes.length === 0) {
+        return elapsed / duration;
+      }
+      const segmentTotal = segmentTimes[segmentTimes.length - 1];
+      const playbackElapsed = loop ? elapsed % duration : Math.min(elapsed, duration);
+      const normalizedElapsed = duration > 0 ? playbackElapsed / duration * segmentTotal : 0;
+      for (let i = 0; i < segmentTimes.length; i++) {
+        if (normalizedElapsed <= segmentTimes[i]) {
+          const prevTime = i === 0 ? 0 : segmentTimes[i - 1];
+          const segmentDuration = segmentTimes[i] - prevTime;
+          const progress = segmentDuration > 0 ? (normalizedElapsed - prevTime) / segmentDuration : 0;
+          const totalSegments = loop ? waypoints.length : waypoints.length - 1;
+          const baseU = i / totalSegments;
+          const segmentU = 1 / totalSegments;
+          return baseU + progress * segmentU;
+        }
+      }
+      return 1;
+    };
+  }, [waypoints.length, segmentTimes, duration, loop]);
   const curves = useMemo11(() => {
     if (!hasPath) return null;
     return {
@@ -4167,29 +4479,83 @@ function CinematicCamera({
       )
     };
   }, [signature, hasPath, loop]);
+  const orbitPath = useMemo11(() => {
+    if (!hasPath || !waypoints.every(
+      (waypoint) => Number.isFinite(waypoint.azimuthAngle) && Number.isFinite(waypoint.polarAngle)
+    )) {
+      return null;
+    }
+    const points = waypoints.map((waypoint) => ({
+      azimuth: waypoint.azimuthAngle,
+      polar: waypoint.polarAngle,
+      distance: new Vector36(...waypoint.position).distanceTo(
+        new Vector36(...waypoint.target)
+      )
+    }));
+    for (let index = 1; index < points.length; index += 1) {
+      const previous = points[index - 1].azimuth;
+      const current = points[index].azimuth;
+      points[index].azimuth = current + Math.round((previous - current) / (Math.PI * 2)) * Math.PI * 2;
+    }
+    return points;
+  }, [signature, hasPath]);
   const elapsedRef = useRef8(0);
   const enterElapsedRef = useRef8(0);
   const enterPos = useRef8(new Vector36());
   const enterTarget = useRef8(new Vector36());
   const startedRef = useRef8(false);
   const pausedElapsedRef = useRef8(0);
+  const hasFinishedRef = useRef8(false);
   const orbitRef = useRef8(null);
   const tmpPos = useMemo11(() => new Vector36(), []);
   const tmpTarget = useMemo11(() => new Vector36(), []);
+  const tmpSpherical = useMemo11(() => new Spherical(), []);
+  useEffect11(() => {
+    elapsedRef.current = 0;
+    pausedElapsedRef.current = 0;
+    enterElapsedRef.current = 0;
+    hasFinishedRef.current = false;
+  }, [signature, loop, duration]);
+  useEffect11(() => {
+    if (resetOnPlay) {
+      pausedElapsedRef.current = 0;
+      elapsedRef.current = 0;
+      hasFinishedRef.current = false;
+    }
+  }, [resetOnPlay]);
   useEffect11(() => {
     if (!playing) {
       startedRef.current = false;
-      if (elapsedRef.current > 0) {
+      if (elapsedRef.current > 0 && !resetOnPlay) {
         pausedElapsedRef.current = elapsedRef.current;
+      } else if (resetOnPlay) {
+        pausedElapsedRef.current = 0;
+      }
+      if (elapsedRef.current > 0 || hasFinishedRef.current) {
+        onStop?.();
       }
       return;
     }
+    if (elapsedRef.current >= duration && !loop) {
+      elapsedRef.current = 0;
+      pausedElapsedRef.current = 0;
+      hasFinishedRef.current = false;
+    }
     const controls = controlsRef.current;
     if (controls) {
       controls.getPosition(enterPos.current);
       controls.getTarget(enterTarget.current);
     }
-    elapsedRef.current = pausedElapsedRef.current || 0;
+    if (resetOnPlay || hasFinishedRef.current || pausedElapsedRef.current === 0) {
+      elapsedRef.current = 0;
+      pausedElapsedRef.current = 0;
+      hasFinishedRef.current = false;
+    } else if (pausedElapsedRef.current > 0 && pausedElapsedRef.current < duration) {
+      elapsedRef.current = pausedElapsedRef.current;
+    } else {
+      elapsedRef.current = 0;
+      pausedElapsedRef.current = 0;
+    }
     enterElapsedRef.current = 0;
     if (!hasPath) {
       const scene = sceneRef.current;
@@ -4203,12 +4569,26 @@ function CinematicCamera({
     }
     startedRef.current = true;
     invalidate();
-  }, [playing, hasPath, controlsRef, sceneRef, invalidate]);
+  }, [
+    playing,
+    hasPath,
+    controlsRef,
+    sceneRef,
+    invalidate,
+    duration,
+    loop,
+    signature,
+    resetOnPlay,
+    onStop
+  ]);
   useEffect11(() => {
     if (!playing || !onUserInteract) return;
     const controls = controlsRef.current;
     if (!controls) return;
-    const handle = () => onUserInteract();
+    const handle = () => {
+      if (hasFinishedRef.current) return;
+      onUserInteract();
+    };
     controls.addEventListener("controlstart", handle);
     return () => controls.removeEventListener("controlstart", handle);
   }, [playing, controlsRef, onUserInteract]);
@@ -4218,12 +4598,33 @@ function CinematicCamera({
     if (!controls) return;
     elapsedRef.current += delta;
     enterElapsedRef.current += delta;
-    let u = elapsedRef.current / duration;
-    const finished = !loop && u >= 1;
+    let u = getCurveParameter(elapsedRef.current);
+    const finished = !loop && elapsedRef.current >= duration;
     u = loop ? u % 1 : Math.min(u, 1);
     if (curves) {
-      curves.position.getPointAt(u, tmpPos);
-      curves.target.getPointAt(u, tmpTarget);
+      curves.target.getPoint(u, tmpTarget);
+      if (orbitPath) {
+        const segmentCount = loop ? orbitPath.length : orbitPath.length - 1;
+        const scaled = Math.min(u, 1) * segmentCount;
+        const segment = Math.min(Math.floor(scaled), segmentCount - 1);
+        const next = (segment + 1) % orbitPath.length;
+        const localT = u >= 1 ? 1 : scaled - segment;
+        const eased = localT * localT * (3 - 2 * localT);
+        const start = orbitPath[segment];
+        const end = orbitPath[next];
+        const endAzimuth = end.azimuth + Math.round((start.azimuth - end.azimuth) / (Math.PI * 2)) * Math.PI * 2;
+        const azimuth = start.azimuth + (endAzimuth - start.azimuth) * eased;
+        const polar = start.polar + (end.polar - start.polar) * eased;
+        const distance = start.distance + (end.distance - start.distance) * eased;
+        tmpSpherical.set(
+          Math.max(distance, 1e-6),
+          Math.min(Math.max(polar, 1e-6), Math.PI - 1e-6),
+          azimuth
+        );
+        tmpPos.setFromSpherical(tmpSpherical).add(tmpTarget);
+      } else {
+        curves.position.getPoint(u, tmpPos);
+      }
     } else {
       const orbit = orbitRef.current;
       if (!orbit) return;
@@ -4253,6 +4654,8 @@ function CinematicCamera({
     );
     if (finished) {
       startedRef.current = false;
+      hasFinishedRef.current = true;
+      elapsedRef.current = 0;
       pausedElapsedRef.current = 0;
       onFinished?.();
       return;
@@ -5276,6 +5679,7 @@ import {
   Camera as CameraIcon,
   Download,
   Eraser,
+  FileImage,
   MapPin,
   RotateCcw,
   ChevronLeft,
@@ -5529,7 +5933,8 @@ function ModelViewer({
   usdzUrl,
   arScaleMode = "normalized",
   mobileHandoffUrl,
-  showAnnotationNavigation = true
+  showAnnotationNavigation = true,
+  showAnnotationOnHover = false
 }) {
   const { activeTab, activeSubTab } = useBindingBuilderContext();
   const license = useLicense(licenseKey);
@@ -5599,6 +6004,7 @@ function ModelViewer({
     !modelUrl || Boolean(onAutoFit) || Boolean(camera)
   );
   const [downloadMenuOpen, setDownloadMenuOpen] = useState10(false);
+  const [uvExportError, setUvExportError] = useState10(null);
   const [modelLoaded, setModelLoaded] = useState10(false);
   const [modelLoadFailed, setModelLoadFailed] = useState10(false);
   const [bindingsMismatch, setBindingsMismatch] = useState10(false);
@@ -5653,9 +6059,11 @@ function ModelViewer({
     return { ...base ?? {}, ...cinematic };
   }, [cinematic, resolvedSceneConfig]);
   const [cinematicPlaying, setCinematicPlaying] = useState10(false);
+  const [cinematicReset, setCinematicReset] = useState10(false);
   const cinematicAutoStartedRef = useRef11(false);
   useEffect15(() => {
     setCinematicPlaying(false);
+    setCinematicReset(false);
     cinematicAutoStartedRef.current = false;
   }, [modelUrl]);
   useEffect15(() => {
@@ -5663,6 +6071,7 @@ function ModelViewer({
     if (modelLoaded && cameraPositioned && !isAutoFraming) {
       cinematicAutoStartedRef.current = true;
       setCinematicPlaying(true);
+      setCinematicReset(false);
     }
   }, [cinematicConfig, modelLoaded, cameraPositioned, isAutoFraming]);
   const xrStore = useMemo13(() => {
@@ -6787,6 +7196,17 @@ function ModelViewer({
       console.error("Screenshot failed:", err);
     });
   }, [downloadFilename]);
+  const handleDownloadUvLayout = useCallback4(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const files = downloadUvLayouts(scene, downloadFilename);
+    if (files.length === 0) {
+      setUvExportError("This model does not contain UV coordinates.");
+      return;
+    }
+    setUvExportError(null);
+    setDownloadMenuOpen(false);
+  }, [downloadFilename]);
   const handleReset = useCallback4(async () => {
     if (onAutoFit) {
       await onAutoFit();
@@ -6816,6 +7236,20 @@ function ModelViewer({
       console.error("Reset camera error:", error);
     }
   }, [onAutoFit, fitScene]);
+  const handleCinematicPlay = useCallback4(() => {
+    setCinematicReset(false);
+    setCinematicPlaying(true);
+  }, []);
+  const handleCinematicPause = useCallback4(() => {
+    setCinematicPlaying(false);
+  }, []);
+  const handleCinematicStop = useCallback4(() => {
+    setCinematicPlaying(false);
+    setCinematicReset(true);
+    setTimeout(() => {
+      handleReset();
+    }, 100);
+  }, [handleReset]);
   const handleCameraChangeWithAnnotations = useCallback4(
     (cameraValue, controls) => {
       handleCameraChangeInternal(cameraValue, controls);
@@ -7113,7 +7547,8 @@ function ModelViewer({
                               modelLoaded,
                               onAnnotationClick: handleAnnotationMarkerClick,
                               onCloseAnnotation: closeViewingAnnotation,
-                              hideCloseButton: isGuidedTourActive
+                              hideCloseButton: isGuidedTourActive,
+                              showAnnotationOnHover
                             }
                           ),
                           /* @__PURE__ */ jsx19(
@@ -7132,8 +7567,14 @@ function ModelViewer({
                               sceneRef,
                               config: cinematicConfig,
                               playing: cinematicPlaying,
-                              onFinished: () => setCinematicPlaying(false),
-                              onUserInteract: () => setCinematicPlaying(false)
+                              resetOnPlay: cinematicReset,
+                              onFinished: () => {
+                                setCinematicPlaying(false);
+                                setCinematicReset(false);
+                              },
+                              onUserInteract: () => {
+                                setCinematicPlaying(false);
+                              }
                             }
                           ),
                           showMeasureTools && /* @__PURE__ */ jsx19(
@@ -7361,24 +7802,43 @@ function ModelViewer({
                 ]
               }
             ),
-            cinematicConfig && /* @__PURE__ */ jsx19(
+            cinematicConfig && /* @__PURE__ */ jsxs15(
               "div",
               {
                 className: "ri-cinematicTools",
                 style: {
                   top: `${topLeftRow((xrToolsVisible ? 1 : 0) + (showMeasureTools ? 1 : 0) + (showExplodeControls ? 1 : 0))}px`
                 },
-                children: /* @__PURE__ */ jsx19(
-                  "button",
-                  {
-                    type: "button",
-                    className: `ri-measureButton ${cinematicPlaying ? "ri-measureButton--active" : ""}`,
-                    onClick: () => setCinematicPlaying((prev) => !prev),
-                    title: cinematicPlaying ? "Pause cinematic" : "Play cinematic",
-                    "aria-pressed": cinematicPlaying,
-                    children: cinematicPlaying ? /* @__PURE__ */ jsx19(Pause, { size: 16 }) : /* @__PURE__ */ jsx19(Play, { size: 16 })
-                  }
-                )
+                children: [
+                  /* @__PURE__ */ jsx19(
+                    "button",
+                    {
+                      type: "button",
+                      className: `ri-measureButton ${cinematicPlaying ? "ri-measureButton--active" : ""}`,
+                      onClick: () => {
+                        if (cinematicPlaying) {
+                          setCinematicPlaying(false);
+                        } else {
+                          setCinematicReset(false);
+                          setCinematicPlaying(true);
+                        }
+                      },
+                      title: cinematicPlaying ? "Pause cinematic" : "Play cinematic",
+                      "aria-pressed": cinematicPlaying,
+                      children: cinematicPlaying ? /* @__PURE__ */ jsx19(Pause, { size: 16 }) : /* @__PURE__ */ jsx19(Play, { size: 16 })
+                    }
+                  ),
+                  cinematicPlaying && /* @__PURE__ */ jsx19(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ri-measureButton ri-measureButton--stop",
+                      onClick: handleCinematicStop,
+                      title: "Stop cinematic and reset camera",
+                      children: /* @__PURE__ */ jsx19(Square, { size: 16 })
+                    }
+                  )
+                ]
               }
             ),
             (showResetButton || showDownloadButton || showAnnotationNavigation && sortedAnnotations.length > 0) && /* @__PURE__ */ jsxs15("div", { className: "ri-buttonContainer", children: [
@@ -7481,13 +7941,38 @@ function ModelViewer({
                               "Download PNG"
                             ]
                           }
+                        ),
+                        /* @__PURE__ */ jsx19("div", { className: "ri-downloadMenuDivider" }),
+                        /* @__PURE__ */ jsxs15(
+                          "button",
+                          {
+                            className: "ri-downloadMenuItem",
+                            onClick: handleDownloadUvLayout,
+                            disabled: !sceneRef.current,
+                            children: [
+                              /* @__PURE__ */ jsx19(FileImage, { size: 14 }),
+                              "Download UV Layout"
+                            ]
+                          }
+                        ),
+                        uvExportError && /* @__PURE__ */ jsx19(
+                          "div",
+                          {
+                            className: "ri-downloadMenuNotice",
+                            role: "status",
+                            "aria-live": "polite",
+                            children: uvExportError
+                          }
                         )
                       ] }),
                       /* @__PURE__ */ jsx19(
                         "button",
                         {
                           className: "ri-downloadButton",
-                          onClick: () => setDownloadMenuOpen((v) => !v),
+                          onClick: () => {
+                            setUvExportError(null);
+                            setDownloadMenuOpen((v) => !v);
+                          },
                           disabled: isDownloading || !sceneRef.current,
                           title: "Download options",
                           children: isDownloading ? /* @__PURE__ */ jsxs15(Fragment7, { children: [
@@ -7618,7 +8103,7 @@ function ModelViewer({
 }
 
 // src/components/BindingBuilder/BindingBuilder.tsx
-import { useCallback as useCallback8, useEffect as useEffect20, useMemo as useMemo16, useRef as useRef18, useState as useState24 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect20, useMemo as useMemo16, useRef as useRef18, useState as useState25 } from "react";
 import {
   Redo2,
   Undo2,
@@ -7665,14 +8150,16 @@ function buildCameraState(camera, controls) {
     position: toTuple(position),
     target: toTuple(target),
     fov: "fov" in camera && typeof camera.fov === "number" ? camera.fov : null,
-    zoom: "zoom" in camera && typeof camera.zoom === "number" ? camera.zoom : 1
+    zoom: "zoom" in camera && typeof camera.zoom === "number" ? camera.zoom : 1,
+    azimuthAngle: controls.azimuthAngle,
+    polarAngle: controls.polarAngle
   };
 }
 function isSameCameraState(left, right) {
   if (!left) {
     return false;
   }
-  return left.position[0] === right.position[0] && left.position[1] === right.position[1] && left.position[2] === right.position[2] && left.target[0] === right.target[0] && left.target[1] === right.target[1] && left.target[2] === right.target[2] && left.fov === right.fov && left.zoom === right.zoom;
+  return left.position[0] === right.position[0] && left.position[1] === right.position[1] && left.position[2] === right.position[2] && left.target[0] === right.target[0] && left.target[1] === right.target[1] && left.target[2] === right.target[2] && left.fov === right.fov && left.zoom === right.zoom && left.azimuthAngle === right.azimuthAngle && left.polarAngle === right.polarAngle;
 }
 async function runSmoothCameraTransition2(controls, action, smoothTime = 0.6) {
   const originalSmoothTime = controls.smoothTime;
@@ -7827,15 +8314,27 @@ function useViewerCamera() {
       }
       try {
         markInitialAutoFitOverride(controls);
-        await controls.setLookAt(
-          state.position[0],
-          state.position[1],
-          state.position[2],
-          state.target[0],
-          state.target[1],
-          state.target[2],
-          enableTransition
-        );
+        const transitions = [
+          controls.setLookAt(
+            state.position[0],
+            state.position[1],
+            state.position[2],
+            state.target[0],
+            state.target[1],
+            state.target[2],
+            enableTransition
+          )
+        ];
+        if (state.azimuthAngle != null && state.polarAngle != null) {
+          transitions.push(
+            controls.rotateTo(
+              state.azimuthAngle,
+              state.polarAngle,
+              enableTransition
+            )
+          );
+        }
+        await Promise.all(transitions);
         const camera = controls.camera;
         let projectionChanged = false;
         if (state.fov !== null && "fov" in camera && typeof camera.fov === "number") {
@@ -7959,7 +8458,7 @@ function useViewerAnimations() {
 }
 
 // src/utils/modelFileResolver.ts
-import { strFromU8, strToU8, unzipSync } from "fflate";
+import { strFromU8, strToU8 as strToU82, unzipSync } from "fflate";
 var SUPPORTED_MODEL_EXTENSIONS = [".glb", ".gltf", ".zip"];
 var SUPPORTED_MODEL_MIME_TYPES = [
   "model/gltf-binary",
@@ -8044,7 +8543,7 @@ async function resolveZippedGltfFile(file) {
   try {
     rewriteZipUris(gltf.buffers, rootDir, entries, urlsToRevoke);
     rewriteZipUris(gltf.images, rootDir, entries, urlsToRevoke);
-    const gltfBlob = new Blob([strToU8(JSON.stringify(gltf))], {
+    const gltfBlob = new Blob([strToU82(JSON.stringify(gltf))], {
       type: "model/gltf+json"
     });
     const gltfUrl = URL.createObjectURL(gltfBlob);
@@ -8143,7 +8642,7 @@ function inferMimeType(path) {
 }
 
 // src/components/BindingBuilder/SceneSettings/SceneSettingsTab.tsx
-import { useState as useState19, useEffect as useEffect18 } from "react";
+import { useState as useState20, useEffect as useEffect18 } from "react";
 
 // src/components/BindingBuilder/SceneSettings/GeneralSceneSettings.tsx
 import { useState as useState14 } from "react";
@@ -8329,9 +8828,10 @@ function SliderRow({
   max,
   step,
   formatValue,
-  onChange
+  onChange,
+  disabled = false
 }) {
-  return /* @__PURE__ */ jsxs16("label", { className: "se-field", children: [
+  return /* @__PURE__ */ jsxs16("label", { className: `se-field ${disabled ? "se-field--disabled" : ""}`, children: [
     /* @__PURE__ */ jsxs16("span", { className: "se-fieldLabel", children: [
       label,
       /* @__PURE__ */ jsx20("span", { className: "se-fieldValue", children: formatValue ? formatValue(value) : value })
@@ -8345,7 +8845,8 @@ function SliderRow({
         max,
         step,
         value,
-        onChange: (e) => onChange(Number(e.target.value))
+        onChange: (e) => onChange(Number(e.target.value)),
+        disabled
       }
     )
   ] });
@@ -11761,14 +12262,16 @@ function AnnotationsTab({ config, onChange }) {
 }
 
 // src/components/BindingBuilder/SceneSettings/CinematicTab.tsx
-import { ArrowDown, ArrowUp, MapPin as MapPin2, Plus as Plus2, Trash2 as Trash24 } from "lucide-react";
-import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useState as useState19, useCallback as useCallback7 } from "react";
+import { ArrowDown, ArrowUp, MapPin as MapPin2, Plus as Plus2, Trash2 as Trash24, Settings } from "lucide-react";
+import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 var DEFAULT_CINEMATIC = {
   enabled: false,
   waypoints: [],
   loop: true,
   autoPlay: false
 };
+var DEFAULT_SEGMENT_DURATION = 3.5;
 function CinematicTab({
   config,
   onChange,
@@ -11777,31 +12280,76 @@ function CinematicTab({
 }) {
   const cinematic = config.cinematic ?? DEFAULT_CINEMATIC;
   const { waypoints } = cinematic;
-  const update = (patch) => {
+  const calculateTotalDuration = useCallback7((wps, loop) => {
+    if (wps.length < 2) return 0;
+    let total = 0;
+    for (let i = 0; i < wps.length - 1; i++) {
+      const segDur = wps[i].segmentDuration ?? DEFAULT_SEGMENT_DURATION;
+      total += segDur;
+    }
+    if (loop && wps.length > 1) {
+      total += wps[wps.length - 1].segmentDuration ?? DEFAULT_SEGMENT_DURATION;
+    }
+    return Math.max(total, 0);
+  }, []);
+  const update = useCallback7((patch) => {
     onChange({ ...config, cinematic: { ...cinematic, ...patch } });
-  };
-  const addWaypoint = () => {
+  }, [config, cinematic, onChange]);
+  const addWaypoint = useCallback7(() => {
     if (!cameraState) return;
+    const newWaypoint = {
+      position: [...cameraState.position],
+      target: [...cameraState.target],
+      ...cameraState.azimuthAngle != null ? { azimuthAngle: cameraState.azimuthAngle } : {},
+      ...cameraState.polarAngle != null ? { polarAngle: cameraState.polarAngle } : {},
+      segmentDuration: DEFAULT_SEGMENT_DURATION
+    };
+    const newWaypoints = [...waypoints, newWaypoint];
+    const newDuration = calculateTotalDuration(newWaypoints, cinematic.loop);
     update({
-      waypoints: [
-        ...waypoints,
-        {
-          position: [...cameraState.position],
-          target: [...cameraState.target]
-        }
-      ]
+      waypoints: newWaypoints,
+      duration: newDuration
     });
-  };
-  const deleteWaypoint = (index) => {
-    update({ waypoints: waypoints.filter((_, i) => i !== index) });
-  };
-  const moveWaypoint = (index, delta) => {
+  }, [cameraState, waypoints, cinematic.loop, calculateTotalDuration, update]);
+  const deleteWaypoint = useCallback7((index) => {
+    const newWaypoints = waypoints.filter((_, i) => i !== index);
+    const newDuration = calculateTotalDuration(newWaypoints, cinematic.loop);
+    update({
+      waypoints: newWaypoints,
+      duration: newDuration
+    });
+  }, [waypoints, cinematic.loop, calculateTotalDuration, update]);
+  const moveWaypoint = useCallback7((index, delta) => {
     const next = index + delta;
     if (next < 0 || next >= waypoints.length) return;
     const reordered = [...waypoints];
     [reordered[index], reordered[next]] = [reordered[next], reordered[index]];
-    update({ waypoints: reordered });
-  };
+    const newDuration = calculateTotalDuration(reordered, cinematic.loop);
+    update({
+      waypoints: reordered,
+      duration: newDuration
+    });
+  }, [waypoints, cinematic.loop, calculateTotalDuration, update]);
+  const updateWaypoint = useCallback7((index, updates) => {
+    const newWaypoints = waypoints.map((wp, i) => {
+      if (i === index) {
+        return { ...wp, ...updates };
+      }
+      return wp;
+    });
+    const newDuration = calculateTotalDuration(newWaypoints, cinematic.loop);
+    update({
+      waypoints: newWaypoints,
+      duration: newDuration
+    });
+  }, [waypoints, cinematic.loop, calculateTotalDuration, update]);
+  const [customizeDurations, setCustomizeDurations] = useState19(false);
+  const hasSegmentDurations = waypoints.some((w) => w.segmentDuration !== void 0);
+  const getDuration = useCallback7((index) => {
+    if (index >= waypoints.length - 1) return DEFAULT_SEGMENT_DURATION;
+    return waypoints[index]?.segmentDuration ?? DEFAULT_SEGMENT_DURATION;
+  }, [waypoints]);
+  const hasEnoughWaypoints = waypoints.length >= 2;
   return /* @__PURE__ */ jsxs27(Section, { title: "Cinematic Camera", children: [
     /* @__PURE__ */ jsx31("p", { className: "se-cinematicHint", children: "Frame the model in the viewer, then capture it as a waypoint. The camera glides through the waypoints in order \u2014 enable and press play in the viewer to preview." }),
     /* @__PURE__ */ jsxs27(
@@ -11818,62 +12366,165 @@ function CinematicTab({
         ]
       }
     ),
-    waypoints.length === 0 ? /* @__PURE__ */ jsx31("div", { className: "bb-emptyAnnotations", children: "No waypoints yet. Position the camera and add your first one." }) : /* @__PURE__ */ jsx31("div", { className: "se-waypointList", children: waypoints.map((waypoint, index) => /* @__PURE__ */ jsxs27("div", { className: "se-waypointCard", children: [
-      /* @__PURE__ */ jsx31("div", { className: "se-waypointBadge", children: index + 1 }),
-      /* @__PURE__ */ jsxs27("div", { className: "se-waypointBody", children: [
-        /* @__PURE__ */ jsxs27("div", { className: "se-waypointCoords", children: [
-          "pos [",
-          waypoint.position.map((n) => n.toFixed(1)).join(", "),
-          "]"
-        ] }),
-        /* @__PURE__ */ jsxs27("div", { className: "se-waypointCoords", children: [
-          "look [",
-          waypoint.target.map((n) => n.toFixed(1)).join(", "),
-          "]"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs27("div", { className: "se-waypointActions", children: [
-        /* @__PURE__ */ jsx31(
-          "button",
-          {
-            className: "se-waypointAction",
-            onClick: () => onPreviewWaypoint?.(waypoint),
-            title: "Fly camera to this waypoint",
-            disabled: !onPreviewWaypoint,
-            children: /* @__PURE__ */ jsx31(MapPin2, { size: 15 })
-          }
-        ),
+    /* @__PURE__ */ jsxs27("div", { className: "se-customizeToggle", children: [
+      /* @__PURE__ */ jsxs27("label", { className: "se-toggleLabel", children: [
         /* @__PURE__ */ jsx31(
-          "button",
-          {
-            className: "se-waypointAction",
-            onClick: () => moveWaypoint(index, -1),
-            title: "Move up",
-            disabled: index === 0,
-            children: /* @__PURE__ */ jsx31(ArrowUp, { size: 15 })
-          }
-        ),
-        /* @__PURE__ */ jsx31(
-          "button",
+          "input",
           {
-            className: "se-waypointAction",
-            onClick: () => moveWaypoint(index, 1),
-            title: "Move down",
-            disabled: index === waypoints.length - 1,
-            children: /* @__PURE__ */ jsx31(ArrowDown, { size: 15 })
+            type: "checkbox",
+            checked: customizeDurations,
+            onChange: (e) => setCustomizeDurations(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx31(
-          "button",
-          {
-            className: "se-waypointAction se-waypointAction--delete",
-            onClick: () => deleteWaypoint(index),
-            title: "Delete waypoint",
-            children: /* @__PURE__ */ jsx31(Trash24, { size: 15 })
-          }
-        )
+        /* @__PURE__ */ jsx31(Settings, { size: 14 }),
+        /* @__PURE__ */ jsx31("span", { children: "Customize durations between waypoints" })
+      ] }),
+      customizeDurations && /* @__PURE__ */ jsxs27("span", { className: "se-toggleHint", children: [
+        "Set duration for each segment between waypoints: 1\u21922, 2\u21923, etc. Default: ",
+        DEFAULT_SEGMENT_DURATION,
+        "s"
+      ] })
+    ] }),
+    waypoints.length === 0 ? /* @__PURE__ */ jsx31("div", { className: "bb-emptyAnnotations", children: "No waypoints yet. Position the camera and add your first one." }) : /* @__PURE__ */ jsxs27(Fragment10, { children: [
+      /* @__PURE__ */ jsx31("div", { className: "se-waypointList", children: waypoints.map((waypoint, index) => {
+        const dur = getDuration(index);
+        const isLast = index === waypoints.length - 1;
+        const isCustom = waypoint.segmentDuration !== void 0 && waypoint.segmentDuration !== DEFAULT_SEGMENT_DURATION;
+        return /* @__PURE__ */ jsxs27("div", { children: [
+          /* @__PURE__ */ jsxs27("div", { className: "se-waypointCard", children: [
+            /* @__PURE__ */ jsx31("div", { className: "se-waypointBadge", children: index + 1 }),
+            /* @__PURE__ */ jsxs27("div", { className: "se-waypointBody", children: [
+              /* @__PURE__ */ jsxs27("div", { className: "se-waypointCoords", children: [
+                "pos [",
+                waypoint.position.map((n) => n.toFixed(1)).join(", "),
+                "]"
+              ] }),
+              /* @__PURE__ */ jsxs27("div", { className: "se-waypointCoords", children: [
+                "look [",
+                waypoint.target.map((n) => n.toFixed(1)).join(", "),
+                "]"
+              ] }),
+              customizeDurations && !isLast && /* @__PURE__ */ jsxs27("div", { className: `se-customBadge ${isCustom ? "se-customBadge--custom" : "se-customBadge--default"}`, children: [
+                dur.toFixed(1),
+                "s",
+                !isCustom && " (default)"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs27("div", { className: "se-waypointActions", children: [
+              /* @__PURE__ */ jsx31(
+                "button",
+                {
+                  className: "se-waypointAction",
+                  onClick: () => onPreviewWaypoint?.(waypoint),
+                  title: "Fly camera to this waypoint",
+                  disabled: !onPreviewWaypoint,
+                  children: /* @__PURE__ */ jsx31(MapPin2, { size: 15 })
+                }
+              ),
+              /* @__PURE__ */ jsx31(
+                "button",
+                {
+                  className: "se-waypointAction",
+                  onClick: () => moveWaypoint(index, -1),
+                  title: "Move up",
+                  disabled: index === 0,
+                  children: /* @__PURE__ */ jsx31(ArrowUp, { size: 15 })
+                }
+              ),
+              /* @__PURE__ */ jsx31(
+                "button",
+                {
+                  className: "se-waypointAction",
+                  onClick: () => moveWaypoint(index, 1),
+                  title: "Move down",
+                  disabled: isLast,
+                  children: /* @__PURE__ */ jsx31(ArrowDown, { size: 15 })
+                }
+              ),
+              /* @__PURE__ */ jsx31(
+                "button",
+                {
+                  className: "se-waypointAction se-waypointAction--delete",
+                  onClick: () => deleteWaypoint(index),
+                  title: "Delete waypoint",
+                  children: /* @__PURE__ */ jsx31(Trash24, { size: 15 })
+                }
+              )
+            ] })
+          ] }),
+          customizeDurations && !isLast && /* @__PURE__ */ jsxs27("div", { className: "se-segmentBetween", children: [
+            /* @__PURE__ */ jsxs27("div", { className: "se-segmentLabel", children: [
+              index + 1,
+              " \u2192 ",
+              index + 2,
+              !waypoint.segmentDuration && " (default)"
+            ] }),
+            /* @__PURE__ */ jsxs27("div", { className: "se-segmentControls", children: [
+              /* @__PURE__ */ jsx31("span", { className: "se-durationLabel", children: "Duration:" }),
+              /* @__PURE__ */ jsx31(
+                "input",
+                {
+                  type: "range",
+                  className: "se-segmentSlider",
+                  min: 1,
+                  max: 20,
+                  step: 0.5,
+                  value: dur,
+                  onChange: (e) => {
+                    const val = parseFloat(e.target.value);
+                    updateWaypoint(index, { segmentDuration: val });
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs27("span", { className: "se-segmentValue", children: [
+                dur.toFixed(1),
+                "s"
+              ] }),
+              /* @__PURE__ */ jsxs27("div", { className: "se-presetButtons", children: [
+                [2, 4, 6, 8].map((preset) => /* @__PURE__ */ jsxs27(
+                  "button",
+                  {
+                    className: "se-presetButton",
+                    onClick: () => updateWaypoint(index, { segmentDuration: preset }),
+                    children: [
+                      preset,
+                      "s"
+                    ]
+                  },
+                  `preset-${index}-${preset}`
+                )),
+                /* @__PURE__ */ jsx31(
+                  "button",
+                  {
+                    className: "se-presetButton se-presetButton--default",
+                    onClick: () => {
+                      const newWaypoints = waypoints.map((wp, i) => {
+                        if (i === index) {
+                          const { segmentDuration, ...rest } = wp;
+                          return rest;
+                        }
+                        return wp;
+                      });
+                      const newDuration = calculateTotalDuration(newWaypoints, cinematic.loop);
+                      update({
+                        waypoints: newWaypoints,
+                        duration: newDuration
+                      });
+                    },
+                    children: "Reset"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }, `waypoint-wrapper-${index}`);
+      }) }),
+      /* @__PURE__ */ jsxs27("div", { className: "se-totalDuration", children: [
+        /* @__PURE__ */ jsx31("span", { className: "se-totalLabel", children: "Total duration:" }),
+        /* @__PURE__ */ jsx31("span", { className: "se-totalValue", children: hasEnoughWaypoints ? (cinematic.duration ?? calculateTotalDuration(waypoints, cinematic.loop)).toFixed(1) + "s" : "-" }),
+        !hasEnoughWaypoints && /* @__PURE__ */ jsx31("span", { className: "se-totalHint", children: "(need at least 2 waypoints)" })
       ] })
-    ] }, index)) }),
+    ] }),
     /* @__PURE__ */ jsx31(
       ToggleRow,
       {
@@ -11887,7 +12538,11 @@ function CinematicTab({
       {
         label: "Loop",
         checked: cinematic.loop,
-        onChange: (loop) => update({ loop })
+        onChange: (loop) => {
+          const newLoop = loop;
+          const newDuration = calculateTotalDuration(waypoints, newLoop);
+          update({ loop: newLoop, duration: newDuration });
+        }
       }
     ),
     /* @__PURE__ */ jsx31(
@@ -11898,11 +12553,11 @@ function CinematicTab({
         onChange: (autoPlay) => update({ autoPlay })
       }
     ),
-    /* @__PURE__ */ jsx31(
+    !customizeDurations && hasEnoughWaypoints && /* @__PURE__ */ jsx31(
       SliderRow,
       {
         label: "Duration",
-        value: cinematic.duration ?? Math.max(waypoints.length * 3.5, 8),
+        value: cinematic.duration ?? calculateTotalDuration(waypoints, cinematic.loop),
         min: 4,
         max: 120,
         step: 1,
@@ -11914,7 +12569,7 @@ function CinematicTab({
 }
 
 // src/styles/SceneSettingsTab.css
-styleInject('.se-tabContent {\n  display: flex;\n  flex-direction: column;\n}\n.se-tabContent * {\n  box-sizing: border-box;\n}\n.se-subTabRow {\n  display: flex;\n  justify-content: space-between;\n  gap: 6px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n  margin-bottom: 4px;\n}\n.se-subTab {\n  padding: 8px 12px;\n  display: flex;\n  justify-items: center;\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  background: rgba(255, 255, 255, 0.04);\n  color: #b3bfd2;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition:\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    color 0.18s ease;\n}\n.se-subTab:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.32);\n}\n.se-subTab--active {\n  background: rgba(99, 102, 241, 0.18);\n  border-color: rgba(99, 102, 241, 0.4);\n  color: #f8fafc;\n}\n.se-generalContent {\n  display: flex;\n  flex-direction: column;\n  padding-top: 0;\n}\n.se-placeholder {\n  font-size: 13px;\n  color: #93a4c0;\n}\n.se-section {\n  margin-bottom: 10px;\n  border-radius: 7px;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  overflow: hidden;\n  padding: 0;\n}\n.se-section:last-child {\n  margin-bottom: 0;\n}\n.se-sectionTitle {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #c3cbdb;\n  padding: 11px 14px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n}\n.se-sectionBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 14px;\n}\n.se-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n.se-fieldInline {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n.se-fieldLabel {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: 700;\n  color: #d7dee9;\n}\n.se-fieldValue {\n  font-variant-numeric: tabular-nums;\n  font-size: 12px;\n  color: #93a4c0;\n}\n.se-slider {\n  width: 100%;\n  accent-color: #2aa8d8;\n  cursor: pointer;\n}\n.se-checkbox {\n  width: 18px;\n  height: 18px;\n  accent-color: #2aa8d8;\n  cursor: pointer;\n}\n.se-select,\n.se-textInput,\n.se-numberInput {\n  background: rgba(15, 23, 42, 0.28);\n  border: 1px solid rgba(148, 163, 184, 0.2);\n  border-radius: 7px;\n  color: #f8fafc;\n  font-size: 13px;\n  padding: 11px 13px;\n  outline: none;\n}\n.se-select:focus,\n.se-textInput:focus,\n.se-numberInput:focus {\n  outline: none;\n  border-color: rgba(42, 168, 216, 0.65);\n  box-shadow: 0 0 0 4px rgba(42, 168, 216, 0.12);\n}\n.se-select {\n  min-width: 130px;\n  text-transform: capitalize;\n}\n.se-textInput {\n  width: 100%;\n}\n.se-numberInput {\n  width: 100%;\n}\n.se-swatch {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-width: 96px;\n  height: 30px;\n  padding: 0 8px;\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.35);\n  cursor: pointer;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);\n}\n.se-swatchCode {\n  font-size: 11px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: #fff;\n  mix-blend-mode: difference;\n}\n.se-colorPicker {\n  margin-top: 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  width: fit-content;\n}\n.se-colorPicker .react-colorful {\n  width: 100%;\n  height: 140px;\n}\n.se-inlineColorPicker .react-colorful {\n  width: 100%;\n  height: 240px;\n}\n.se-colorPickerPopover {\n  z-index: 1000;\n  padding: 10px;\n  border-radius: 8px;\n  background: #1b2333;\n  border: 1px solid rgba(148, 163, 184, 0.25);\n  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);\n}\n.se-colorPickerPopover .react-colorful {\n  width: 200px;\n  height: 160px;\n}\n.se-vectorRow {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 8px;\n}\n.se-vectorAxis {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 11px;\n  color: #93a4c0;\n}\n.se-panel {\n  margin-bottom: 10px;\n  overflow: hidden;\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  border-radius: 7px;\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-panel:last-child {\n  margin-bottom: 0;\n}\n.se-panelHeader {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border: none;\n  background: rgba(255, 255, 255, 0.03);\n  padding: 11px 14px;\n  color: #e5e7eb;\n  cursor: pointer;\n  text-align: left;\n}\n.se-panelHeader:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.se-panelHeaderMain {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 8px;\n}\n.se-panelChevron {\n  flex-shrink: 0;\n  color: #8b97ab;\n  transform: rotate(-90deg);\n  transition: transform 0.18s ease;\n}\n.se-panelChevron--open {\n  transform: rotate(0deg);\n}\n.se-panelTitle {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #c3cbdb;\n}\n.se-panelHelp {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-left: 2px;\n  border-radius: 999px;\n  color: #b9c0ca;\n  cursor: help;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease,\n    transform 0.18s ease;\n}\n.se-panelHelp:hover {\n  background: rgba(255, 255, 255, 0.08);\n  color: #eef2ff;\n  transform: translateY(-0.5px);\n}\n.se-panelTrailing {\n  display: flex;\n  align-items: center;\n}\n.se-panelBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 14px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n  background: transparent;\n}\n.se-iconButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border: none;\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.08);\n  color: #d7dde8;\n  cursor: pointer;\n}\n.se-iconButton:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n.se-axisStepperGrid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 12px;\n}\n.se-axisStepper {\n  display: grid;\n  grid-template-columns: 40px 1fr 40px;\n  align-items: center;\n  min-height: 30px;\n  border-radius: 10px;\n  background: rgba(17, 24, 39, 0.62);\n  border: 1px solid rgba(255, 255, 255, 0.05);\n}\n.se-axisStepperButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  border: none;\n  background: transparent;\n  color: #f3f4f6;\n  cursor: pointer;\n}\n.se-axisStepperButton:hover {\n  background: rgba(255, 255, 255, 0.04);\n}\n.se-axisStepperLabel {\n  text-align: center;\n  font-size: 15px;\n  color: #f3f4f6;\n}\n.se-segmentedControl {\n  display: grid;\n  grid-auto-flow: column;\n  overflow: hidden;\n  border-radius: 10px;\n  background: rgba(17, 24, 39, 0.62);\n}\n.se-segmentedOption {\n  min-height: 35px;\n  border: none;\n  background: transparent;\n  color: #d1d5db;\n  font-size: 14px;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n.se-segmentedOption--active {\n  background: #2aa8d8;\n  color: #fff;\n}\n.se-helperCard {\n  padding: 32px;\n  text-align: center;\n  background: rgba(15, 23, 42, 0.44);\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  color: #94a3b8;\n  font-size: 14px;\n}\n.se-helperCard strong {\n  font-size: 14px;\n}\n.se-helperCard span {\n  font-size: 13px;\n  line-height: 1.4;\n  color: #c7d0df;\n}\n.se-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n.se-switch input[type=checkbox] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  opacity: 0;\n}\n.se-switchTrack {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.se-switchTrack::before {\n  content: "";\n  width: 36px;\n  height: 20px;\n  background: #4b5563;\n  display: inline-block;\n  border-radius: 20px;\n  transition: background-color 0.2s ease-in;\n}\n.se-switchThumb {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  left: 2px;\n  top: 2px;\n  z-index: 2;\n  background: #fff;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  transition: 0.2s ease-in;\n}\n.se-switch input[type=checkbox]:hover + .se-switchTrack .se-switchThumb {\n  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.1);\n}\n.se-switch input[type=checkbox]:checked + .se-switchTrack::before {\n  background: #376fcb;\n}\n.se-switch input[type=checkbox]:checked + .se-switchTrack .se-switchThumb {\n  background: #4285f4;\n  left: 18px;\n}\n.se-switchLabel {\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  color: #e5e7eb;\n}\n.se-switch input[type=checkbox]:checked ~ .se-switchTrack .se-switchLabel {\n  color: #2aa8d8;\n}\n.se-lightList {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.se-lightRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 10px;\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.1);\n  background: rgba(255, 255, 255, 0.03);\n  cursor: pointer;\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n}\n.se-lightRow:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.se-lightRow--active {\n  background: rgba(42, 168, 216, 0.12);\n  border-color: rgba(42, 168, 216, 0.35);\n}\n.se-lightRowLabel {\n  font-size: 13px;\n  color: #d8e0ee;\n}\n.se-lightActions {\n  display: flex;\n  gap: 8px;\n}\n.se-lightProps {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding-top: 4px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n}\n.se-animationList {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.se-animationCard {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding: 16px;\n  border-radius: 14px;\n  border: 1px solid rgba(148, 163, 184, 0.16);\n  background: rgba(15, 23, 42, 0.48);\n}\n.se-animationCard--active {\n  border-color: rgba(42, 168, 216, 0.45);\n  box-shadow: inset 0 0 0 1px rgba(42, 168, 216, 0.16);\n}\n.se-animationHeader {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n.se-animationHeading {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 6px;\n}\n.se-animationTitleRow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n.se-animationStatus,\n.se-animationBadge {\n  display: inline-flex;\n  align-items: center;\n  min-height: 22px;\n  padding: 0 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.se-animationStatus {\n  background: rgba(42, 168, 216, 0.16);\n  color: #9fe8ff;\n}\n.se-animationBadge {\n  background: rgba(99, 102, 241, 0.18);\n  color: #d9ddff;\n}\n.se-animationSource {\n  font-size: 12px;\n  color: #93a4c0;\n  word-break: break-word;\n}\n.se-animationMeta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.se-animationMeta span {\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.06);\n  padding: 4px 9px;\n  font-size: 12px;\n  color: #c6d0e2;\n}\n.se-animationDangerButton,\n.se-animationButton,\n.se-animationAutoplayButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.2);\n  border-radius: 10px;\n  background: rgba(255, 255, 255, 0.04);\n  color: #e2e8f0;\n  cursor: pointer;\n  transition:\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    color 0.18s ease;\n}\n.se-animationButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.se-animationDangerButton {\n  width: 36px;\n  height: 36px;\n  color: #fca5a5;\n}\n.se-animationDangerButton:hover,\n.se-animationButton:hover,\n.se-animationAutoplayButton:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.34);\n}\n.se-animationButtonRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.se-animationButton {\n  min-height: 36px;\n  padding: 0 14px;\n  font-size: 13px;\n  font-weight: 600;\n}\n.se-animationButton--icon {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\n  height: 38px;\n}\n.se-animationSeekRow {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.se-animationSeek {\n  flex: 1;\n  min-width: 0;\n}\n.se-animationSeekTime {\n  flex-shrink: 0;\n  min-width: 86px;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n  font-size: 12px;\n  color: #97a3b6;\n}\n.se-animationGrid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n.se-animationSpeedRow {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 88px;\n  gap: 10px;\n  align-items: center;\n}\n.se-animationSpeedInput {\n  text-align: right;\n}\n.se-animationAutoplayButton {\n  align-self: flex-start;\n  min-height: 36px;\n  padding: 0 14px;\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.se-animationAutoplayButton--active {\n  background: rgba(42, 168, 216, 0.18);\n  border-color: rgba(42, 168, 216, 0.42);\n  color: #dff8ff;\n}\n.se-removedAnimations {\n  overflow: hidden;\n  border-radius: 12px;\n  border: 1px solid rgba(148, 163, 184, 0.14);\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-removedAnimationList {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px;\n}\n.se-removedAnimationRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border-radius: 10px;\n  background: rgba(15, 23, 42, 0.42);\n  padding: 12px;\n}\n.se-removedAnimationName {\n  font-size: 13px;\n  font-weight: 600;\n  color: #e2e8f0;\n}\n@media (max-width: 900px) {\n  .se-animationGrid {\n    grid-template-columns: 1fr;\n  }\n  .se-animationSpeedRow {\n    grid-template-columns: 1fr;\n  }\n}\n.bb-viewSpotOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  backdrop-filter: blur(4px);\n  animation: bb-fadeIn 0.2s ease;\n}\n.bb-viewSpotPopup {\n  background: #1e1e20;\n  border-radius: 12px;\n  max-width: 480px;\n  width: 90%;\n  max-height: 80vh;\n  overflow-y: auto;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n  border: 1px solid #333335;\n  animation: bb-slideUp 0.25s ease;\n}\n.bb-viewSpotHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  border-bottom: 1px solid #2a2a2c;\n}\n.bb-viewSpotTitle {\n  font-size: 18px;\n  font-weight: 600;\n  color: #e8e8ea;\n  margin: 0;\n}\n.bb-viewSpotClose {\n  background: none;\n  border: none;\n  color: #888;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0 4px;\n  line-height: 1;\n  transition: color 0.2s;\n}\n.bb-viewSpotClose:hover {\n  color: #e8e8ea;\n}\n.bb-viewSpotBody {\n  padding: 24px;\n}\n.bb-viewSpotDescription {\n  color: #c8c8ca;\n  font-size: 14px;\n  line-height: 1.6;\n  margin-bottom: 20px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.bb-viewSpotPosition {\n  background: #141416;\n  border-radius: 8px;\n  padding: 12px 16px;\n  margin-bottom: 24px;\n  font-size: 13px;\n  color: #a0a0a2;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.bb-viewSpotLabel {\n  font-weight: 500;\n  color: #888;\n}\n.bb-viewSpotCode {\n  background: #0a0a0c;\n  padding: 4px 10px;\n  border-radius: 4px;\n  font-family:\n    "Monaco",\n    "Menlo",\n    monospace;\n  font-size: 12px;\n  color: #8be9fd;\n}\n.bb-viewSpotActions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  padding-top: 4px;\n}\n.bb-editAnnotationOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.bb-editAnnotationPopup {\n  background: #0f141e;\n  border-radius: 16px;\n  padding: 24px;\n  min-width: 200px;\n  max-width: 400px;\n  width: 90%;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n}\n.bb-editAnnotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding-bottom: 12px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.12);\n}\n.bb-editAnnotationTitle {\n  color: #f8fafc;\n  font-size: 18px;\n  font-weight: 600;\n  margin: 0;\n}\n.bb-editAnnotationClose {\n  background: none;\n  border: none;\n  color: #94a3b8;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0 4px;\n}\n.bb-editAnnotationClose:hover {\n  color: #f8fafc;\n}\n.bb-editAnnotationBody {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.bb-editAnnotationActions {\n  display: flex;\n  gap: 8px;\n  margin-top: 8px;\n}\n.se-cinematicHint {\n  margin: 0 0 10px;\n  font-size: 12px;\n  line-height: 1.5;\n  color: rgba(255, 255, 255, 0.55);\n}\n.bb-button.se-cinematicAdd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 100%;\n  margin-bottom: 12px;\n  background: #135bc0;\n  color: white;\n}\n.bb-button.se-cinematicAdd:hover:not(:disabled) {\n  background: #1a68d6;\n}\n.se-waypointList {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 14px;\n}\n.se-waypointCard {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-waypointBadge {\n  flex: none;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: 600;\n  color: #06343c;\n  background: #22d3ee;\n}\n.se-waypointBody {\n  flex: 1;\n  min-width: 0;\n}\n.se-waypointCoords {\n  font-size: 11px;\n  line-height: 1.4;\n  color: rgba(255, 255, 255, 0.6);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.se-waypointActions {\n  flex: none;\n  display: flex;\n  gap: 2px;\n}\n.se-waypointAction {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  transition: background 0.15s ease, color 0.15s ease;\n}\n.se-waypointAction:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n.se-waypointAction:disabled {\n  opacity: 0.35;\n  cursor: default;\n}\n.se-waypointAction--delete:hover:not(:disabled) {\n  background: rgba(248, 113, 113, 0.16);\n  color: #f87171;\n}\n.bb-cameraWaypoint {\n  align-items: flex-start;\n  margin-bottom: 8px;\n}\n.bb-cameraWaypoint .bb-cameraLiveBadge,\n.bb-cameraWaypoint .bb-cameraSavedBadge {\n  flex: none;\n}\n.bb-cameraWaypointLabel {\n  font-size: 11px;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.8);\n  margin-bottom: 2px;\n}\n.bb-cameraControls--centered {\n  justify-content: center;\n  margin: 12px 0;\n}\n');
+styleInject('.se-tabContent {\n  display: flex;\n  flex-direction: column;\n}\n.se-tabContent * {\n  box-sizing: border-box;\n}\n.se-subTabRow {\n  display: flex;\n  justify-content: space-between;\n  gap: 6px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n  margin-bottom: 4px;\n}\n.se-subTab {\n  padding: 8px 12px;\n  display: flex;\n  justify-items: center;\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  background: rgba(255, 255, 255, 0.04);\n  color: #b3bfd2;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition:\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    color 0.18s ease;\n}\n.se-subTab:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.32);\n}\n.se-subTab--active {\n  background: rgba(99, 102, 241, 0.18);\n  border-color: rgba(99, 102, 241, 0.4);\n  color: #f8fafc;\n}\n.se-generalContent {\n  display: flex;\n  flex-direction: column;\n  padding-top: 0;\n}\n.se-placeholder {\n  font-size: 13px;\n  color: #93a4c0;\n}\n.se-section {\n  margin-bottom: 10px;\n  border-radius: 7px;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  overflow: hidden;\n  padding: 0;\n}\n.se-section:last-child {\n  margin-bottom: 0;\n}\n.se-sectionTitle {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #c3cbdb;\n  padding: 11px 14px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n}\n.se-sectionBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 14px;\n}\n.se-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n.se-fieldInline {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n.se-fieldLabel {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: 700;\n  color: #d7dee9;\n}\n.se-fieldValue {\n  font-variant-numeric: tabular-nums;\n  font-size: 12px;\n  color: #93a4c0;\n}\n.se-slider {\n  width: 100%;\n  accent-color: #2aa8d8;\n  cursor: pointer;\n}\n.se-checkbox {\n  width: 18px;\n  height: 18px;\n  accent-color: #2aa8d8;\n  cursor: pointer;\n}\n.se-select,\n.se-textInput,\n.se-numberInput {\n  background: rgba(15, 23, 42, 0.28);\n  border: 1px solid rgba(148, 163, 184, 0.2);\n  border-radius: 7px;\n  color: #f8fafc;\n  font-size: 13px;\n  padding: 11px 13px;\n  outline: none;\n}\n.se-select:focus,\n.se-textInput:focus,\n.se-numberInput:focus {\n  outline: none;\n  border-color: rgba(42, 168, 216, 0.65);\n  box-shadow: 0 0 0 4px rgba(42, 168, 216, 0.12);\n}\n.se-select {\n  min-width: 130px;\n  text-transform: capitalize;\n}\n.se-textInput {\n  width: 100%;\n}\n.se-numberInput {\n  width: 100%;\n}\n.se-swatch {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-width: 96px;\n  height: 30px;\n  padding: 0 8px;\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.35);\n  cursor: pointer;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);\n}\n.se-swatchCode {\n  font-size: 11px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: #fff;\n  mix-blend-mode: difference;\n}\n.se-colorPicker {\n  margin-top: 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  width: fit-content;\n}\n.se-colorPicker .react-colorful {\n  width: 100%;\n  height: 140px;\n}\n.se-inlineColorPicker .react-colorful {\n  width: 100%;\n  height: 240px;\n}\n.se-colorPickerPopover {\n  z-index: 1000;\n  padding: 10px;\n  border-radius: 8px;\n  background: #1b2333;\n  border: 1px solid rgba(148, 163, 184, 0.25);\n  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);\n}\n.se-colorPickerPopover .react-colorful {\n  width: 200px;\n  height: 160px;\n}\n.se-vectorRow {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 8px;\n}\n.se-vectorAxis {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 11px;\n  color: #93a4c0;\n}\n.se-panel {\n  margin-bottom: 10px;\n  overflow: hidden;\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  border-radius: 7px;\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-panel:last-child {\n  margin-bottom: 0;\n}\n.se-panelHeader {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border: none;\n  background: rgba(255, 255, 255, 0.03);\n  padding: 11px 14px;\n  color: #e5e7eb;\n  cursor: pointer;\n  text-align: left;\n}\n.se-panelHeader:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.se-panelHeaderMain {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 8px;\n}\n.se-panelChevron {\n  flex-shrink: 0;\n  color: #8b97ab;\n  transform: rotate(-90deg);\n  transition: transform 0.18s ease;\n}\n.se-panelChevron--open {\n  transform: rotate(0deg);\n}\n.se-panelTitle {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #c3cbdb;\n}\n.se-panelHelp {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-left: 2px;\n  border-radius: 999px;\n  color: #b9c0ca;\n  cursor: help;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease,\n    transform 0.18s ease;\n}\n.se-panelHelp:hover {\n  background: rgba(255, 255, 255, 0.08);\n  color: #eef2ff;\n  transform: translateY(-0.5px);\n}\n.se-panelTrailing {\n  display: flex;\n  align-items: center;\n}\n.se-panelBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 14px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n  background: transparent;\n}\n.se-iconButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border: none;\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.08);\n  color: #d7dde8;\n  cursor: pointer;\n}\n.se-iconButton:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n.se-axisStepperGrid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 12px;\n}\n.se-axisStepper {\n  display: grid;\n  grid-template-columns: 40px 1fr 40px;\n  align-items: center;\n  min-height: 30px;\n  border-radius: 10px;\n  background: rgba(17, 24, 39, 0.62);\n  border: 1px solid rgba(255, 255, 255, 0.05);\n}\n.se-axisStepperButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  border: none;\n  background: transparent;\n  color: #f3f4f6;\n  cursor: pointer;\n}\n.se-axisStepperButton:hover {\n  background: rgba(255, 255, 255, 0.04);\n}\n.se-axisStepperLabel {\n  text-align: center;\n  font-size: 15px;\n  color: #f3f4f6;\n}\n.se-segmentedControl {\n  display: grid;\n  grid-auto-flow: column;\n  overflow: hidden;\n  border-radius: 10px;\n  background: rgba(17, 24, 39, 0.62);\n}\n.se-segmentedOption {\n  min-height: 35px;\n  border: none;\n  background: transparent;\n  color: #d1d5db;\n  font-size: 14px;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n.se-segmentedOption--active {\n  background: #2aa8d8;\n  color: #fff;\n}\n.se-helperCard {\n  padding: 32px;\n  text-align: center;\n  background: rgba(15, 23, 42, 0.44);\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  color: #94a3b8;\n  font-size: 14px;\n}\n.se-helperCard strong {\n  font-size: 14px;\n}\n.se-helperCard span {\n  font-size: 13px;\n  line-height: 1.4;\n  color: #c7d0df;\n}\n.se-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n.se-switch input[type=checkbox] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  opacity: 0;\n}\n.se-switchTrack {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.se-switchTrack::before {\n  content: "";\n  width: 36px;\n  height: 20px;\n  background: #4b5563;\n  display: inline-block;\n  border-radius: 20px;\n  transition: background-color 0.2s ease-in;\n}\n.se-switchThumb {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  left: 2px;\n  top: 2px;\n  z-index: 2;\n  background: #fff;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  transition: 0.2s ease-in;\n}\n.se-switch input[type=checkbox]:hover + .se-switchTrack .se-switchThumb {\n  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.1);\n}\n.se-switch input[type=checkbox]:checked + .se-switchTrack::before {\n  background: #376fcb;\n}\n.se-switch input[type=checkbox]:checked + .se-switchTrack .se-switchThumb {\n  background: #4285f4;\n  left: 18px;\n}\n.se-switchLabel {\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  color: #e5e7eb;\n}\n.se-switch input[type=checkbox]:checked ~ .se-switchTrack .se-switchLabel {\n  color: #2aa8d8;\n}\n.se-lightList {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.se-lightRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 10px;\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.1);\n  background: rgba(255, 255, 255, 0.03);\n  cursor: pointer;\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n}\n.se-lightRow:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.se-lightRow--active {\n  background: rgba(42, 168, 216, 0.12);\n  border-color: rgba(42, 168, 216, 0.35);\n}\n.se-lightRowLabel {\n  font-size: 13px;\n  color: #d8e0ee;\n}\n.se-lightActions {\n  display: flex;\n  gap: 8px;\n}\n.se-lightProps {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding-top: 4px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n}\n.se-animationList {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.se-animationCard {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding: 16px;\n  border-radius: 14px;\n  border: 1px solid rgba(148, 163, 184, 0.16);\n  background: rgba(15, 23, 42, 0.48);\n}\n.se-animationCard--active {\n  border-color: rgba(42, 168, 216, 0.45);\n  box-shadow: inset 0 0 0 1px rgba(42, 168, 216, 0.16);\n}\n.se-animationHeader {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n.se-animationHeading {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 6px;\n}\n.se-animationTitleRow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n.se-animationStatus,\n.se-animationBadge {\n  display: inline-flex;\n  align-items: center;\n  min-height: 22px;\n  padding: 0 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.se-animationStatus {\n  background: rgba(42, 168, 216, 0.16);\n  color: #9fe8ff;\n}\n.se-animationBadge {\n  background: rgba(99, 102, 241, 0.18);\n  color: #d9ddff;\n}\n.se-animationSource {\n  font-size: 12px;\n  color: #93a4c0;\n  word-break: break-word;\n}\n.se-animationMeta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.se-animationMeta span {\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.06);\n  padding: 4px 9px;\n  font-size: 12px;\n  color: #c6d0e2;\n}\n.se-animationDangerButton,\n.se-animationButton,\n.se-animationAutoplayButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.2);\n  border-radius: 10px;\n  background: rgba(255, 255, 255, 0.04);\n  color: #e2e8f0;\n  cursor: pointer;\n  transition:\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    color 0.18s ease;\n}\n.se-animationButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.se-animationDangerButton {\n  width: 36px;\n  height: 36px;\n  color: #fca5a5;\n}\n.se-animationDangerButton:hover,\n.se-animationButton:hover,\n.se-animationAutoplayButton:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.34);\n}\n.se-animationButtonRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.se-animationButton {\n  min-height: 36px;\n  padding: 0 14px;\n  font-size: 13px;\n  font-weight: 600;\n}\n.se-animationButton--icon {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\n  height: 38px;\n}\n.se-animationSeekRow {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.se-animationSeek {\n  flex: 1;\n  min-width: 0;\n}\n.se-animationSeekTime {\n  flex-shrink: 0;\n  min-width: 86px;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n  font-size: 12px;\n  color: #97a3b6;\n}\n.se-animationGrid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n.se-animationSpeedRow {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 88px;\n  gap: 10px;\n  align-items: center;\n}\n.se-animationSpeedInput {\n  text-align: right;\n}\n.se-animationAutoplayButton {\n  align-self: flex-start;\n  min-height: 36px;\n  padding: 0 14px;\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.se-animationAutoplayButton--active {\n  background: rgba(42, 168, 216, 0.18);\n  border-color: rgba(42, 168, 216, 0.42);\n  color: #dff8ff;\n}\n.se-removedAnimations {\n  overflow: hidden;\n  border-radius: 12px;\n  border: 1px solid rgba(148, 163, 184, 0.14);\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-removedAnimationList {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px;\n}\n.se-removedAnimationRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border-radius: 10px;\n  background: rgba(15, 23, 42, 0.42);\n  padding: 12px;\n}\n.se-removedAnimationName {\n  font-size: 13px;\n  font-weight: 600;\n  color: #e2e8f0;\n}\n@media (max-width: 900px) {\n  .se-animationGrid {\n    grid-template-columns: 1fr;\n  }\n  .se-animationSpeedRow {\n    grid-template-columns: 1fr;\n  }\n}\n.bb-viewSpotOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  backdrop-filter: blur(4px);\n  animation: bb-fadeIn 0.2s ease;\n}\n.bb-viewSpotPopup {\n  background: #1e1e20;\n  border-radius: 12px;\n  max-width: 480px;\n  width: 90%;\n  max-height: 80vh;\n  overflow-y: auto;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n  border: 1px solid #333335;\n  animation: bb-slideUp 0.25s ease;\n}\n.bb-viewSpotHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  border-bottom: 1px solid #2a2a2c;\n}\n.bb-viewSpotTitle {\n  font-size: 18px;\n  font-weight: 600;\n  color: #e8e8ea;\n  margin: 0;\n}\n.bb-viewSpotClose {\n  background: none;\n  border: none;\n  color: #888;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0 4px;\n  line-height: 1;\n  transition: color 0.2s;\n}\n.bb-viewSpotClose:hover {\n  color: #e8e8ea;\n}\n.bb-viewSpotBody {\n  padding: 24px;\n}\n.bb-viewSpotDescription {\n  color: #c8c8ca;\n  font-size: 14px;\n  line-height: 1.6;\n  margin-bottom: 20px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.bb-viewSpotPosition {\n  background: #141416;\n  border-radius: 8px;\n  padding: 12px 16px;\n  margin-bottom: 24px;\n  font-size: 13px;\n  color: #a0a0a2;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.bb-viewSpotLabel {\n  font-weight: 500;\n  color: #888;\n}\n.bb-viewSpotCode {\n  background: #0a0a0c;\n  padding: 4px 10px;\n  border-radius: 4px;\n  font-family:\n    "Monaco",\n    "Menlo",\n    monospace;\n  font-size: 12px;\n  color: #8be9fd;\n}\n.bb-viewSpotActions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  padding-top: 4px;\n}\n.bb-editAnnotationOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.bb-editAnnotationPopup {\n  background: #0f141e;\n  border-radius: 16px;\n  padding: 24px;\n  min-width: 200px;\n  max-width: 400px;\n  width: 90%;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n}\n.bb-editAnnotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding-bottom: 12px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.12);\n}\n.bb-editAnnotationTitle {\n  color: #f8fafc;\n  font-size: 18px;\n  font-weight: 600;\n  margin: 0;\n}\n.bb-editAnnotationClose {\n  background: none;\n  border: none;\n  color: #94a3b8;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0 4px;\n}\n.bb-editAnnotationClose:hover {\n  color: #f8fafc;\n}\n.bb-editAnnotationBody {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.bb-editAnnotationActions {\n  display: flex;\n  gap: 8px;\n  margin-top: 8px;\n}\n.se-cinematicHint {\n  margin: 0 0 10px;\n  font-size: 12px;\n  line-height: 1.5;\n  color: rgba(255, 255, 255, 0.55);\n}\n.bb-button.se-cinematicAdd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 100%;\n  margin-bottom: 12px;\n  background: #135bc0;\n  color: white;\n}\n.bb-button.se-cinematicAdd:hover:not(:disabled) {\n  background: #1a68d6;\n}\n.se-waypointList {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 14px;\n}\n.se-waypointCard {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 12px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-waypointBadge {\n  flex: none;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: 600;\n  color: #06343c;\n  background: #22d3ee;\n}\n.se-waypointBody {\n  flex: 1;\n  min-width: 0;\n}\n.se-waypointCoords {\n  font-size: 11px;\n  line-height: 1.4;\n  color: rgba(255, 255, 255, 0.5);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.se-waypointActions {\n  flex: none;\n  display: flex;\n  gap: 2px;\n}\n.se-waypointAction {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.5);\n  cursor: pointer;\n  transition: background 0.15s ease, color 0.15s ease;\n}\n.se-waypointAction:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.08);\n  color: #fff;\n}\n.se-waypointAction:disabled {\n  opacity: 0.35;\n  cursor: default;\n}\n.se-waypointAction--delete:hover:not(:disabled) {\n  background: rgba(248, 113, 113, 0.16);\n  color: #f87171;\n}\n.se-customBadge {\n  display: inline-block;\n  padding: 1px 8px;\n  border-radius: 3px;\n  background: rgba(34, 211, 238, 0.15);\n  color: #22d3ee;\n  font-size: 10px;\n  font-weight: 600;\n  margin-top: 4px;\n}\n.se-customizeToggle {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 8px 12px;\n  background: rgba(255, 255, 255, 0.03);\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.08);\n  margin: 8px 0 12px;\n}\n.se-toggleLabel {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #f8fafc;\n  cursor: pointer;\n  user-select: none;\n}\n.se-toggleLabel input[type=checkbox] {\n  width: 16px;\n  height: 16px;\n  accent-color: #22d3ee;\n  cursor: pointer;\n}\n.se-toggleLabel svg {\n  color: #22d3ee;\n  width: 14px;\n  height: 14px;\n}\n.se-toggleHint {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  padding-left: 28px;\n}\n.se-segmentBetween {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 14px;\n  margin: 6px 0 6px 32px;\n  background: rgba(255, 255, 255, 0.03);\n  border-radius: 6px;\n  border-left: 3px solid rgba(34, 211, 238, 0.25);\n}\n.se-segmentLabel {\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.45);\n}\n.se-segmentControls {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.se-durationLabel {\n  font-size: 10px;\n  color: rgba(255, 255, 255, 0.35);\n  font-weight: 500;\n  white-space: nowrap;\n}\n.se-segmentSlider {\n  flex: 1;\n  min-width: 80px;\n  max-width: 150px;\n  height: 4px;\n  -webkit-appearance: none;\n  appearance: none;\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 2px;\n  outline: none;\n}\n.se-segmentSlider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: #22d3ee;\n  cursor: pointer;\n  border: 2px solid rgba(255, 255, 255, 0.2);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n.se-segmentSlider::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: #22d3ee;\n  cursor: pointer;\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n.se-segmentValue {\n  font-size: 12px;\n  font-weight: 600;\n  color: #22d3ee;\n  min-width: 36px;\n  text-align: center;\n}\n.se-presetButtons {\n  display: flex;\n  gap: 4px;\n}\n.se-presetButton {\n  padding: 2px 8px;\n  background: rgba(255, 255, 255, 0.06);\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  border-radius: 4px;\n  font-size: 10px;\n  color: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-weight: 500;\n}\n.se-presetButton:hover {\n  background: #22d3ee;\n  color: #06343c;\n  border-color: #22d3ee;\n}\n.se-totalDuration {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 4px;\n  margin: 8px 0 12px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n  padding-top: 12px;\n}\n.se-totalLabel {\n  font-size: 12px;\n  color: rgba(255, 255, 255, 0.5);\n  font-weight: 500;\n}\n.se-totalValue {\n  font-size: 14px;\n  font-weight: 600;\n  color: #22d3ee;\n}\n.se-totalHint {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.35);\n  font-weight: 400;\n  margin-left: 8px;\n}\n');
 
 // src/components/BindingBuilder/SceneSettings/SceneSettingsTab.tsx
 import {
@@ -11960,7 +12615,7 @@ function SceneSettingsTab({
   animationClipDetails = [],
   animationPlayback = FALLBACK_ANIMATION_PLAYBACK
 }) {
-  const [internalActiveSubTab, setInternalActiveSubTab] = useState19("General");
+  const [internalActiveSubTab, setInternalActiveSubTab] = useState20("General");
   const activeSubTab = controlledActiveSubTab ?? internalActiveSubTab;
   const resolvedAnimationPlayback = animationPlayback ?? FALLBACK_ANIMATION_PLAYBACK;
   const { tier } = useBindingBuilderContext();
@@ -12146,7 +12801,7 @@ function EnableToggle2({
 }
 
 // src/components/BindingBuilder/components/MaterialSection.tsx
-import { useState as useState21 } from "react";
+import { useState as useState22 } from "react";
 
 // src/components/ModelViewer/types/objectBinding.ts
 var MATERIAL_SIDES = ["front", "back", "double"];
@@ -12193,7 +12848,7 @@ function MaterialPanelGroup({
 }
 
 // src/components/BindingBuilder/components/MaterialFields.tsx
-import { useRef as useRef15, useState as useState20 } from "react";
+import { useRef as useRef15, useState as useState21 } from "react";
 import { HexColorInput as HexColorInput3, HexColorPicker as HexColorPicker4 } from "react-colorful";
 import { FileUp } from "lucide-react";
 import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -12260,7 +12915,7 @@ function MaterialColorField({
   fallback = "#ffffff",
   onChange
 }) {
-  const [open, setOpen] = useState20(false);
+  const [open, setOpen] = useState21(false);
   const color = value || fallback;
   const anchorRef = useRef15(null);
   return /* @__PURE__ */ jsxs30("div", { className: "bb-field", children: [
@@ -12389,7 +13044,7 @@ function MaterialSliderField({
 }
 
 // src/components/BindingBuilder/components/MaterialSection.tsx
-import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 function MaterialSection({
   selectedItem,
   selectedMaterial,
@@ -12414,11 +13069,11 @@ function MaterialSection({
     tier: "starter",
     locked: !canUseStarterFeatures
   };
-  const [roughnessMode, setRoughnessMode] = useState21("roughness");
-  const [anisotropyMode, setAnisotropyMode] = useState21(
+  const [roughnessMode, setRoughnessMode] = useState22("roughness");
+  const [anisotropyMode, setAnisotropyMode] = useState22(
     "factor"
   );
-  return /* @__PURE__ */ jsxs31(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs31(Fragment11, { children: [
     /* @__PURE__ */ jsx36(
       MaterialPanelGroup,
       {
@@ -12457,7 +13112,7 @@ function MaterialSection({
               }))
             }
           ),
-          pbrWorkflow === "metalness" ? /* @__PURE__ */ jsxs31(Fragment10, { children: [
+          pbrWorkflow === "metalness" ? /* @__PURE__ */ jsxs31(Fragment11, { children: [
             /* @__PURE__ */ jsx36(
               MaterialSliderField,
               {
@@ -12481,7 +13136,7 @@ function MaterialSection({
                 onChange: (value) => setSelectedTexturePath(selectedItem, "metalnessMap", value)
               }
             )
-          ] }) : /* @__PURE__ */ jsxs31(Fragment10, { children: [
+          ] }) : /* @__PURE__ */ jsxs31(Fragment11, { children: [
             /* @__PURE__ */ jsx36(
               MaterialSliderField,
               {
@@ -13454,7 +14109,7 @@ function MaterialPresetGallery({
 }
 
 // src/components/BindingBuilder/components/ToolbarExportMenu.tsx
-import { useEffect as useEffect19, useRef as useRef16, useState as useState22 } from "react";
+import { useEffect as useEffect19, useRef as useRef16, useState as useState23 } from "react";
 import { ChevronDown as ChevronDown5, Download as Download2, FileCode2, FileJson } from "lucide-react";
 import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 function ToolbarExportMenu({
@@ -13463,7 +14118,7 @@ function ToolbarExportMenu({
   onExportJson,
   onExportTs
 }) {
-  const [open, setOpen] = useState22(false);
+  const [open, setOpen] = useState23(false);
   const wrapperRef = useRef16(null);
   useEffect19(() => {
     if (!open) return;
@@ -13797,7 +14452,7 @@ function ActionsPanel({
 
 // src/components/BindingBuilder/components/CameraPositionPanel.tsx
 import { MapPin as MapPin3, Trash2 as Trash25 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
 function CameraPositionPanel({
   selectedBinding,
   open,
@@ -13816,7 +14471,7 @@ function CameraPositionPanel({
       /* @__PURE__ */ jsx42("span", { className: "bb-cameraLiveBadge", children: "LIVE" }),
       /* @__PURE__ */ jsxs37("div", { className: "se-waypointBody", children: [
         /* @__PURE__ */ jsx42("div", { className: "bb-cameraWaypointLabel", children: "Current view" }),
-        cameraState ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
+        cameraState ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
           /* @__PURE__ */ jsxs37("div", { className: "se-waypointCoords", children: [
             "pos ",
             formattedCameraState?.position
@@ -13902,10 +14557,10 @@ function CameraPositionPanel({
 }
 
 // src/components/BindingBuilder/components/SceneNodesPanel.tsx
-import { useMemo as useMemo15, useState as useState23 } from "react";
+import { useMemo as useMemo15, useState as useState24 } from "react";
 
 // src/components/BindingBuilder/utils/bindingFactory.ts
-function slugify(value) {
+function slugify2(value) {
   return value.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[_\s]+/g, "-").replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase();
 }
 function humanizeNodeName(value) {
@@ -13951,7 +14606,7 @@ function buildDefaultActions(type) {
 function createDefaultBinding(nodeName) {
   const type = inferType(nodeName);
   return {
-    id: slugify(nodeName),
+    id: slugify2(nodeName),
     modelObjectId: nodeName,
     type,
     label: humanizeNodeName(nodeName),
@@ -13982,7 +14637,7 @@ function collectNodeNames(scene) {
 }
 
 // src/components/BindingBuilder/components/SceneNodesPanel.tsx
-import { Fragment as Fragment12, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 function SceneNodesPanel({
   bindings,
   selectedItem,
@@ -13991,7 +14646,7 @@ function SceneNodesPanel({
   isOpen = true,
   onToggle
 }) {
-  const [search, setSearch] = useState23("");
+  const [search, setSearch] = useState24("");
   const nodeKeys = useMemo15(() => Object.keys(bindings), [bindings]);
   const filteredNodeKeys = useMemo15(() => {
     const query = search.trim().toLowerCase();
@@ -14018,7 +14673,7 @@ function SceneNodesPanel({
               children: "\u2190"
             }
           ),
-          isOpen && /* @__PURE__ */ jsxs38(Fragment12, { children: [
+          isOpen && /* @__PURE__ */ jsxs38(Fragment13, { children: [
             /* @__PURE__ */ jsxs38("div", { children: [
               /* @__PURE__ */ jsx43("div", { className: "bb-sectionKicker", children: "Scene Nodes" }),
               /* @__PURE__ */ jsxs38("div", { className: "bb-sectionHeading", children: [
@@ -14136,7 +14791,7 @@ function mergeAnimationConfig(sceneConfig, animationDetails) {
 }
 
 // src/components/BindingBuilder/hooks/useUndoableState.ts
-import { useCallback as useCallback7, useReducer, useRef as useRef17 } from "react";
+import { useCallback as useCallback8, useReducer, useRef as useRef17 } from "react";
 var MAX_HISTORY = 100;
 function historyReducer(state, action) {
   switch (action.type) {
@@ -14181,7 +14836,7 @@ function useUndoableState(initial, coalesceWindowMs = 600) {
     future: []
   });
   const lastSetAt = useRef17(0);
-  const setValue = useCallback7(
+  const setValue = useCallback8(
     (updater) => {
       const now = Date.now();
       const coalesce = now - lastSetAt.current < coalesceWindowMs;
@@ -14190,15 +14845,15 @@ function useUndoableState(initial, coalesceWindowMs = 600) {
     },
     [coalesceWindowMs]
   );
-  const undo = useCallback7(() => {
+  const undo = useCallback8(() => {
     lastSetAt.current = 0;
     dispatch({ type: "undo" });
   }, []);
-  const redo = useCallback7(() => {
+  const redo = useCallback8(() => {
     lastSetAt.current = 0;
     dispatch({ type: "redo" });
   }, []);
-  const reset = useCallback7((value) => {
+  const reset = useCallback8((value) => {
     lastSetAt.current = 0;
     dispatch({ type: "reset", value });
   }, []);
@@ -14214,7 +14869,7 @@ function useUndoableState(initial, coalesceWindowMs = 600) {
 }
 
 // src/components/BindingBuilder/utils/exportAssets.ts
-import { strToU8 as strToU82, zipSync } from "fflate";
+import { strToU8 as strToU83, zipSync as zipSync2 } from "fflate";
 
 // src/components/BindingBuilder/utils/serialization.ts
 function toBindingsJson(bindings) {
@@ -14290,11 +14945,11 @@ async function downloadExport(filename, content, mimeType, zipFilename, assets)
     downloadTextFile(filename, content, mimeType);
     return;
   }
-  const files = { [filename]: strToU82(content) };
+  const files = { [filename]: strToU83(content) };
   for (const asset of assets) {
     files[asset.path] = new Uint8Array(await asset.blob.arrayBuffer());
   }
-  const zipped = zipSync(files, { level: 6 });
+  const zipped = zipSync2(files, { level: 6 });
   const blob = new Blob([zipped], { type: "application/zip" });
   const url = URL.createObjectURL(blob);
   const link = document.createElement("a");
@@ -14427,7 +15082,7 @@ function removeMaterialPanelFields(material, panel) {
 }
 
 // src/components/BindingBuilder/BindingBuilder.tsx
-import { Fragment as Fragment13, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 var DEMO_MODEL_URL = "/room.glb";
 function isPlainObject(value) {
   return value !== null && typeof value === "object" && !Array.isArray(value);
@@ -14447,27 +15102,27 @@ function BindingBuilder({ licenseKey }) {
   const modelInputRef = useRef18(null);
   const bindingsInputRef = useRef18(null);
   const sceneConfigInputRef = useRef18(null);
-  const [modelUrl, setModelUrl] = useState24(null);
-  const [modelName, setModelName] = useState24("");
-  const [selectedItem, setSelectedItem] = useState24(null);
+  const [modelUrl, setModelUrl] = useState25(null);
+  const [modelName, setModelName] = useState25("");
+  const [selectedItem, setSelectedItem] = useState25(null);
   const bindingsHistory = useUndoableState({});
   const bindings = bindingsHistory.value;
   const setBindings = bindingsHistory.setValue;
-  const [loading, setLoading] = useState24(false);
-  const [isExporting, setIsExporting] = useState24(false);
-  const [statusMessage, setStatusMessage] = useState24(
+  const [loading, setLoading] = useState25(false);
+  const [isExporting, setIsExporting] = useState25(false);
+  const [statusMessage, setStatusMessage] = useState25(
     "Load the demo model or upload a GLB/GLTF model to generate bindings."
   );
-  const [statusTone, setStatusTone] = useState24("default");
-  const [statusBannerVisible, setStatusBannerVisible] = useState24(false);
-  const [metricsDraft, setMetricsDraft] = useState24("{}");
-  const [metadataDraft, setMetadataDraft] = useState24("{}");
-  const [metricsError, setMetricsError] = useState24(null);
-  const [metadataError, setMetadataError] = useState24(null);
-  const [isPreviewDragActive, setIsPreviewDragActive] = useState24(false);
-  const [isEditorCollapsed, setIsEditorCollapsed] = useState24(false);
-  const [isNodesCollapsed, setIsNodesCollapsed] = useState24(false);
-  const [openObjectSections, setOpenObjectSections] = useState24({
+  const [statusTone, setStatusTone] = useState25("default");
+  const [statusBannerVisible, setStatusBannerVisible] = useState25(false);
+  const [metricsDraft, setMetricsDraft] = useState25("{}");
+  const [metadataDraft, setMetadataDraft] = useState25("{}");
+  const [metricsError, setMetricsError] = useState25(null);
+  const [metadataError, setMetadataError] = useState25(null);
+  const [isPreviewDragActive, setIsPreviewDragActive] = useState25(false);
+  const [isEditorCollapsed, setIsEditorCollapsed] = useState25(false);
+  const [isNodesCollapsed, setIsNodesCollapsed] = useState25(false);
+  const [openObjectSections, setOpenObjectSections] = useState25({
     identity: true,
     basics: true,
     material: true,
@@ -14476,7 +15131,7 @@ function BindingBuilder({ licenseKey }) {
     metrics: false,
     metadata: false
   });
-  const [openMaterialPanels, setOpenMaterialPanels] = useState24({
+  const [openMaterialPanels, setOpenMaterialPanels] = useState25({
     pbr: true,
     roughness: false,
     emission: false,
@@ -14492,24 +15147,24 @@ function BindingBuilder({ licenseKey }) {
   });
   const toggleObjectSection = (key) => setOpenObjectSections((prev) => ({ ...prev, [key]: !prev[key] }));
   const toggleMaterialPanel = (key) => setOpenMaterialPanels((prev) => ({ ...prev, [key]: !prev[key] }));
-  const [activeEditorTab, setActiveEditorTab] = useState24(
+  const [activeEditorTab, setActiveEditorTab] = useState25(
     "object"
   );
-  const [activeSubTab, setActiveSubTab] = useState24("General");
-  const [pbrWorkflow, setPbrWorkflow] = useState24("metalness");
-  const [materialPanelEnabled, setMaterialPanelEnabled] = useState24(createMaterialPanelEnabledState());
+  const [activeSubTab, setActiveSubTab] = useState25("General");
+  const [pbrWorkflow, setPbrWorkflow] = useState25("metalness");
+  const [materialPanelEnabled, setMaterialPanelEnabled] = useState25(createMaterialPanelEnabledState());
   const materialPanelItemRef = useRef18(null);
-  const [zoomOnSelected, setZoomOnSelected] = useState24(false);
-  const [highlightOnHover, setHighlightOnHover] = useState24(true);
-  const [resetDialogOpen, setResetDialogOpen] = useState24(false);
-  const [resetTarget, setResetTarget] = useState24(
+  const [zoomOnSelected, setZoomOnSelected] = useState25(false);
+  const [highlightOnHover, setHighlightOnHover] = useState25(true);
+  const [resetDialogOpen, setResetDialogOpen] = useState25(false);
+  const [resetTarget, setResetTarget] = useState25(
     null
   );
   const sceneConfigHistory = useUndoableState(DEFAULT_SCENE_CONFIG);
   const sceneConfig = sceneConfigHistory.value;
   const setSceneConfig = sceneConfigHistory.setValue;
-  const [activeAnnotation, setActiveAnnotation] = useState24(null);
-  const [panelHoveredBinding, setPanelHoveredBinding] = useState24(null);
+  const [activeAnnotation, setActiveAnnotation] = useState25(null);
+  const [panelHoveredBinding, setPanelHoveredBinding] = useState25(null);
   const license = useLicense(licenseKey);
   const tier = normalizeTier(license.tier);
   const bindingBuilderContextValue = useMemo16(
@@ -14535,14 +15190,16 @@ function BindingBuilder({ licenseKey }) {
     handleCameraChange,
     handleViewerReady
   } = useViewerCamera();
-  const handlePreviewWaypoint = useCallback8(
+  const handlePreviewWaypoint = useCallback9(
     (waypoint) => {
       setCameraState(
         {
           position: waypoint.position,
           target: waypoint.target,
           fov: cameraState?.fov ?? null,
-          zoom: cameraState?.zoom ?? 1
+          zoom: cameraState?.zoom ?? 1,
+          azimuthAngle: waypoint.azimuthAngle,
+          polarAngle: waypoint.polarAngle
         },
         true
       );
@@ -14557,7 +15214,7 @@ function BindingBuilder({ licenseKey }) {
     position: formatVector3(cameraState.position),
     target: formatVector3(cameraState.target)
   } : null;
-  const handleAnnotationsChange = useCallback8(
+  const handleAnnotationsChange = useCallback9(
     (newAnnotations) => {
       setSceneConfig((prev) => {
         const currentIds = prev.annotations.map((a) => a.id).join(",");
@@ -14573,7 +15230,7 @@ function BindingBuilder({ licenseKey }) {
     },
     []
   );
-  const handleActiveAnnotationChange = useCallback8(
+  const handleActiveAnnotationChange = useCallback9(
     (annotation) => {
       setActiveAnnotation(
         annotation ? {
@@ -14694,7 +15351,7 @@ function BindingBuilder({ licenseKey }) {
       });
     }
   };
-  const applyBindingsFromScene = useCallback8(
+  const applyBindingsFromScene = useCallback9(
     (scene, nextModelName) => {
       const nodeNames = collectNodeNames(scene);
       bindingsHistory.reset(buildBindingsFromNodes(nodeNames));
@@ -14733,7 +15390,7 @@ function BindingBuilder({ licenseKey }) {
     bindingsHistory.reset({});
     setSelectedItem(null);
   };
-  const handleViewerModelLoaded = useCallback8(
+  const handleViewerModelLoaded = useCallback9(
     (scene) => {
       const pending = pendingLoadRef.current;
       if (!pending || pending.requestId !== loadRequestRef.current) return;
@@ -14743,7 +15400,7 @@ function BindingBuilder({ licenseKey }) {
     },
     [applyBindingsFromScene]
   );
-  const handleViewerLoadError = useCallback8((error) => {
+  const handleViewerLoadError = useCallback9((error) => {
     const pending = pendingLoadRef.current;
     if (!pending || pending.requestId !== loadRequestRef.current) return;
     pendingLoadRef.current = null;
@@ -14754,7 +15411,7 @@ function BindingBuilder({ licenseKey }) {
     setStatusTone("error");
     setLoading(false);
   }, []);
-  const handleAnimationsReady = useCallback8(
+  const handleAnimationsReady = useCallback9(
     (controls) => {
       viewerAnimations.handleAnimationsReady(controls);
       const details = controls.clipDetails ?? controls.clips.map((sourceName) => ({ sourceName, duration: 0 }));
@@ -15055,7 +15712,7 @@ function BindingBuilder({ licenseKey }) {
     }));
     setError(null);
   };
-  const handleViewerSelect = useCallback8(
+  const handleViewerSelect = useCallback9(
     (binding) => {
       if (!binding) {
         setSelectedItem(null);
@@ -15068,7 +15725,7 @@ function BindingBuilder({ licenseKey }) {
     },
     [bindings]
   );
-  const handleSceneNodeSelect = useCallback8(
+  const handleSceneNodeSelect = useCallback9(
     async (nodeKey) => {
       setSelectedItem(nodeKey);
       setPanelHoveredBinding(null);
@@ -15076,7 +15733,7 @@ function BindingBuilder({ licenseKey }) {
     },
     [focusObject]
   );
-  const saveCameraPositionForSelectedObject = useCallback8(() => {
+  const saveCameraPositionForSelectedObject = useCallback9(() => {
     if (!selectedItem || !cameraState) {
       return;
     }
@@ -15091,7 +15748,7 @@ function BindingBuilder({ licenseKey }) {
       cameraState: currentCameraState
     }));
   }, [selectedItem, cameraState]);
-  const goToSavedCameraPosition = useCallback8(() => {
+  const goToSavedCameraPosition = useCallback9(() => {
     if (!savedCameraPosition?.position || !savedCameraPosition?.target) return;
     setCameraState(
       {
@@ -15103,28 +15760,28 @@ function BindingBuilder({ licenseKey }) {
       true
     );
   }, [savedCameraPosition, setCameraState, cameraState]);
-  const clearSavedCameraPosition = useCallback8(() => {
+  const clearSavedCameraPosition = useCallback9(() => {
     if (!selectedItem) return;
     updateBinding(selectedItem, (binding) => ({
       ...binding,
       cameraState: void 0
     }));
   }, [selectedItem]);
-  const handleResetView = useCallback8(async () => {
+  const handleResetView = useCallback9(async () => {
     await resetView();
   }, [resetView]);
-  const handleFitScene = useCallback8(async () => {
+  const handleFitScene = useCallback9(async () => {
     await fitScene();
   }, [fitScene]);
-  const openResetDialog = useCallback8((target) => {
+  const openResetDialog = useCallback9((target) => {
     setResetTarget(target);
     setResetDialogOpen(true);
   }, []);
-  const closeResetDialog = useCallback8(() => {
+  const closeResetDialog = useCallback9(() => {
     setResetDialogOpen(false);
     setResetTarget(null);
   }, []);
-  const executeReset = useCallback8(() => {
+  const executeReset = useCallback9(() => {
     if (resetTarget === "bindings") {
       if (!nodeKeys.length) {
         closeResetDialog();
@@ -15221,7 +15878,7 @@ function BindingBuilder({ licenseKey }) {
                 }
               )
             ] }),
-            !isEditorCollapsed && /* @__PURE__ */ jsxs40(Fragment13, { children: [
+            !isEditorCollapsed && /* @__PURE__ */ jsxs40(Fragment14, { children: [
               /* @__PURE__ */ jsxs40("div", { className: "bb-tabRow", children: [
                 /* @__PURE__ */ jsx45(
                   "button",
@@ -15242,7 +15899,7 @@ function BindingBuilder({ licenseKey }) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx45("section", { className: "bb-editor", children: activeEditorTab === "scene" ? /* @__PURE__ */ jsx45(Fragment13, { children: modelUrl ? /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx45("section", { className: "bb-editor", children: activeEditorTab === "scene" ? /* @__PURE__ */ jsx45(Fragment14, { children: modelUrl ? /* @__PURE__ */ jsx45(
                 SceneSettingsTab,
                 {
                   config: sceneConfig,
@@ -15255,14 +15912,16 @@ function BindingBuilder({ licenseKey }) {
                     // the whole settings panel for no reason.
                     activeSubTab === "Cinematic" && cameraState ? {
                       position: cameraState.position,
-                      target: cameraState.target
+                      target: cameraState.target,
+                      azimuthAngle: cameraState.azimuthAngle,
+                      polarAngle: cameraState.polarAngle
                     } : null
                   ),
                   onPreviewWaypoint: handlePreviewWaypoint,
                   animationClipDetails: viewerAnimations.clipDetails,
                   animationPlayback: viewerAnimations
                 }
-              ) : /* @__PURE__ */ jsx45("div", { className: "bb-emptyEditor", children: "Upload a model to edit its scene settings." }) }) : !selectedBinding || !selectedItem ? /* @__PURE__ */ jsx45("div", { className: "bb-emptyEditor", children: "Select a generated node binding to edit its values." }) : /* @__PURE__ */ jsxs40(Fragment13, { children: [
+              ) : /* @__PURE__ */ jsx45("div", { className: "bb-emptyEditor", children: "Upload a model to edit its scene settings." }) }) : !selectedBinding || !selectedItem ? /* @__PURE__ */ jsx45("div", { className: "bb-emptyEditor", children: "Select a generated node binding to edit its values." }) : /* @__PURE__ */ jsxs40(Fragment14, { children: [
                 /* @__PURE__ */ jsx45("div", { className: "bb-editorHeader", children: /* @__PURE__ */ jsxs40("div", { children: [
                   /* @__PURE__ */ jsx45("div", { className: "bb-sectionKicker", children: "Editing Binding" }),
                   /* @__PURE__ */ jsx45("h2", { className: "bb-editorTitle", children: selectedBinding.label || selectedItem }),
@@ -15682,8 +16341,8 @@ function BindingBuilder({ licenseKey }) {
 // src/components/SimpleModelViewer/SimpleModelViewer.tsx
 import {
   useRef as useRef19,
-  useState as useState25,
-  useCallback as useCallback9,
+  useState as useState26,
+  useCallback as useCallback10,
   useEffect as useEffect21,
   useMemo as useMemo17,
   Component as Component3,
@@ -15706,14 +16365,14 @@ styleInject('.smv-root {\n  --smv-panel-font-family:\n    Inter,\n    "Segoe UI"
 import {
   X as X3,
   Check,
-  Settings,
+  Settings as Settings2,
   ChevronDown as ChevronDown6,
   Boxes as Boxes2,
   Trash2 as Trash26,
   Upload as Upload2,
   AlertTriangle as AlertTriangle4
 } from "lucide-react";
-import { Fragment as Fragment14, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
 var HIGHLIGHT2 = { color: "#93c5fd", intensity: 0.05 };
 var ENV_PRESETS = [
   "apartment",
@@ -15773,7 +16432,7 @@ function InnerModel({
     meshopt: true
   });
   const invalidate = useThree11((state) => state.invalidate);
-  const [hoveredKey, setHoveredKey] = useState25(null);
+  const [hoveredKey, setHoveredKey] = useState26(null);
   const scene = useMemo17(
     () => SkeletonUtils2.clone(rawScene),
     [rawScene]
@@ -16075,7 +16734,7 @@ function EnvironmentSection({
   title,
   children
 }) {
-  const [collapsed, setCollapsed] = useState25(false);
+  const [collapsed, setCollapsed] = useState26(false);
   return /* @__PURE__ */ jsxs41("div", { className: "env-section", children: [
     /* @__PURE__ */ jsxs41(
       "button",
@@ -16114,7 +16773,7 @@ function EnvironmentPanel({
           {
             className: "side-panel__open-btn side-panel__open-btn--left",
             onClick: () => onToggle(true),
-            children: /* @__PURE__ */ jsx46(Settings, { size: 20, strokeWidth: 1.8 })
+            children: /* @__PURE__ */ jsx46(Settings2, { size: 20, strokeWidth: 1.8 })
           }
         ),
         /* @__PURE__ */ jsxs41(
@@ -16240,8 +16899,8 @@ function SceneObjectsPanel2({
   onHover,
   onToggleVisibility
 }) {
-  const [search, setSearch] = useState25("");
-  const [rowHovered, setRowHovered] = useState25(null);
+  const [search, setSearch] = useState26("");
+  const [rowHovered, setRowHovered] = useState26(null);
   const entries = Object.values(meshKeys).filter(
     (m) => m.label.toLowerCase().includes(search.toLowerCase())
   );
@@ -16370,30 +17029,30 @@ function SimpleModelViewer({
   const fileInputRef = useRef19(null);
   const uploadedModelRef = useRef19(null);
   const dragDepthRef = useRef19(0);
-  const [loadedScene, setLoadedScene] = useState25(null);
-  const [largeModelTriangles, setLargeModelTriangles] = useState25(
+  const [loadedScene, setLoadedScene] = useState26(null);
+  const [largeModelTriangles, setLargeModelTriangles] = useState26(
     null
   );
-  const [largeModelNoticeDismissed, setLargeModelNoticeDismissed] = useState25(false);
-  const [meshKeys, setMeshKeys] = useState25({});
-  const [hiddenKeys, setHiddenKeys] = useState25(/* @__PURE__ */ new Set());
-  const [selectedKey, setSelectedKey] = useState25(null);
-  const [panelHoveredKey, setPanelHoveredKey] = useState25(null);
-  const [uploadedModelUrl, setUploadedModelUrl] = useState25(null);
-  const [uploadedModelName, setUploadedModelName] = useState25(
+  const [largeModelNoticeDismissed, setLargeModelNoticeDismissed] = useState26(false);
+  const [meshKeys, setMeshKeys] = useState26({});
+  const [hiddenKeys, setHiddenKeys] = useState26(/* @__PURE__ */ new Set());
+  const [selectedKey, setSelectedKey] = useState26(null);
+  const [panelHoveredKey, setPanelHoveredKey] = useState26(null);
+  const [uploadedModelUrl, setUploadedModelUrl] = useState26(null);
+  const [uploadedModelName, setUploadedModelName] = useState26(
     null
   );
-  const [modelLoadFailed, setModelLoadFailed] = useState25(false);
-  const [isResolvingUpload, setIsResolvingUpload] = useState25(false);
-  const [initialFitComplete, setInitialFitComplete] = useState25(false);
-  const [isDragActive, setIsDragActive] = useState25(false);
-  const [isPanelOpen, setIsPanelOpen] = useState25(
+  const [modelLoadFailed, setModelLoadFailed] = useState26(false);
+  const [isResolvingUpload, setIsResolvingUpload] = useState26(false);
+  const [initialFitComplete, setInitialFitComplete] = useState26(false);
+  const [isDragActive, setIsDragActive] = useState26(false);
+  const [isPanelOpen, setIsPanelOpen] = useState26(
     () => typeof window === "undefined" ? true : window.innerWidth > 900
   );
-  const [isEnvPanelOpen, setIsEnvPanelOpen] = useState25(
+  const [isEnvPanelOpen, setIsEnvPanelOpen] = useState26(
     () => typeof window === "undefined" ? true : window.innerWidth > 900
   );
-  const [envSettings, setEnvSettings] = useState25({
+  const [envSettings, setEnvSettings] = useState26({
     backgroundEnabled,
     backgroundColor,
     autoRotate,
@@ -16405,7 +17064,7 @@ function SimpleModelViewer({
     directionalColor
   });
   const activeModelUrl = enableModelUpload ? uploadedModelUrl : modelUrl;
-  const resetModelState = useCallback9(() => {
+  const resetModelState = useCallback10(() => {
     setLoadedScene(null);
     setLargeModelTriangles(null);
     setLargeModelNoticeDismissed(false);
@@ -16416,11 +17075,11 @@ function SimpleModelViewer({
     setModelLoadFailed(false);
     setInitialFitComplete(false);
   }, []);
-  const revokeUploadedModelUrl = useCallback9(() => {
+  const revokeUploadedModelUrl = useCallback10(() => {
     uploadedModelRef.current?.cleanup();
     uploadedModelRef.current = null;
   }, []);
-  const clearUploadedModel = useCallback9(() => {
+  const clearUploadedModel = useCallback10(() => {
     revokeUploadedModelUrl();
     setUploadedModelUrl(null);
     setUploadedModelName(null);
@@ -16449,7 +17108,7 @@ function SimpleModelViewer({
     resetModelState,
     revokeUploadedModelUrl
   ]);
-  const handleUploadedModel = useCallback9(
+  const handleUploadedModel = useCallback10(
     async (file) => {
       setIsResolvingUpload(true);
       try {
@@ -16468,7 +17127,7 @@ function SimpleModelViewer({
     },
     [onLoadError, resetModelState, revokeUploadedModelUrl]
   );
-  const handleFileSelection = useCallback9(
+  const handleFileSelection = useCallback10(
     (files) => {
       const file = files?.[0];
       if (!file) return;
@@ -16481,7 +17140,7 @@ function SimpleModelViewer({
       revokeUploadedModelUrl();
     };
   }, [revokeUploadedModelUrl]);
-  const handleEnvSettingChange = useCallback9(
+  const handleEnvSettingChange = useCallback10(
     (key, value) => {
       setEnvSettings((prev) => ({ ...prev, [key]: value }));
     },
@@ -16493,12 +17152,12 @@ function SimpleModelViewer({
   useEffect21(() => {
     resetModelState();
   }, [activeModelUrl, resetModelState]);
-  const handleMeshesReady = useCallback9((meshes) => {
+  const handleMeshesReady = useCallback10((meshes) => {
     setMeshKeys(meshes);
     setHiddenKeys(/* @__PURE__ */ new Set());
     setSelectedKey(null);
   }, []);
-  const handleModelLoaded = useCallback9(
+  const handleModelLoaded = useCallback10(
     (scene) => {
       setLoadedScene(scene);
       setModelLoadFailed(false);
@@ -16509,14 +17168,14 @@ function SimpleModelViewer({
     },
     [onModelLoaded]
   );
-  const handleLoadError = useCallback9(
+  const handleLoadError = useCallback10(
     (error) => {
       setModelLoadFailed(true);
       onLoadError?.(error);
     },
     [onLoadError]
   );
-  const focusMesh = useCallback9(
+  const focusMesh = useCallback10(
     (key) => {
       setSelectedKey(key);
       if (!zoomOnSelected) return;
@@ -16532,14 +17191,14 @@ function SimpleModelViewer({
     },
     [zoomOnSelected]
   );
-  const handleToggleVisibility = useCallback9((key) => {
+  const handleToggleVisibility = useCallback10((key) => {
     setHiddenKeys((prev) => {
       const next = new Set(prev);
       next.has(key) ? next.delete(key) : next.add(key);
       return next;
     });
   }, []);
-  const handleDragEnter = useCallback9(
+  const handleDragEnter = useCallback10(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -16551,7 +17210,7 @@ function SimpleModelViewer({
     },
     [enableModelUpload]
   );
-  const handleDragOver = useCallback9(
+  const handleDragOver = useCallback10(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -16563,7 +17222,7 @@ function SimpleModelViewer({
     },
     [enableModelUpload]
   );
-  const handleDragLeave = useCallback9(
+  const handleDragLeave = useCallback10(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -16577,7 +17236,7 @@ function SimpleModelViewer({
     },
     [enableModelUpload]
   );
-  const handleDrop = useCallback9(
+  const handleDrop = useCallback10(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -16631,7 +17290,7 @@ function SimpleModelViewer({
               }
             )
           ] }),
-          enableModelUpload ? /* @__PURE__ */ jsxs41(Fragment14, { children: [
+          enableModelUpload ? /* @__PURE__ */ jsxs41(Fragment15, { children: [
             /* @__PURE__ */ jsx46(
               "input",
               {
@@ -16645,7 +17304,7 @@ function SimpleModelViewer({
                 }
               }
             ),
-            activeModelUrl ? /* @__PURE__ */ jsx46("div", { className: "smv-upload-toolbar", children: /* @__PURE__ */ jsxs41(Fragment14, { children: [
+            activeModelUrl ? /* @__PURE__ */ jsx46("div", { className: "smv-upload-toolbar", children: /* @__PURE__ */ jsxs41(Fragment15, { children: [
               /* @__PURE__ */ jsx46("span", { className: "smv-upload-toolbar__name", children: uploadedModelName ?? "Uploaded model" }),
               /* @__PURE__ */ jsxs41(
                 "button",
@@ -16806,18 +17465,18 @@ function SimpleModelViewer({
 }
 
 // src/hooks/useViewerSelection.ts
-import { useCallback as useCallback10, useState as useState26 } from "react";
+import { useCallback as useCallback11, useState as useState27 } from "react";
 function useViewerSelection(initialSelectedObjectBinding = null) {
-  const [selectedObjectBinding, setSelectedObjectBinding] = useState26(
+  const [selectedObjectBinding, setSelectedObjectBinding] = useState27(
     initialSelectedObjectBinding
   );
-  const handleObjectSelect = useCallback10(
+  const handleObjectSelect = useCallback11(
     (binding) => {
       setSelectedObjectBinding(binding);
     },
     [setSelectedObjectBinding]
   );
-  const clearSelection = useCallback10(() => {
+  const clearSelection = useCallback11(() => {
     setSelectedObjectBinding(null);
   }, []);
   return {
@@ -16855,14 +17514,14 @@ function useObjectBindingIds(objectBindings) {
 }
 
 // src/hooks/useObjectVisibility.ts
-import { useCallback as useCallback11, useMemo as useMemo20 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo20 } from "react";
 function getHiddenObjects(objectBindings) {
   return Object.fromEntries(
     Object.entries(objectBindings).filter(([, binding]) => binding.visible === false).map(([bindingKey]) => [bindingKey, true])
   );
 }
 function useObjectVisibility(objectBindings, onObjectBindingsChange) {
-  const updateVisibility = useCallback11(
+  const updateVisibility = useCallback12(
     (objectId, visible) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) return;
@@ -16878,15 +17537,15 @@ function useObjectVisibility(objectBindings, onObjectBindingsChange) {
     },
     [objectBindings, onObjectBindingsChange]
   );
-  const hideObject = useCallback11(
+  const hideObject = useCallback12(
     (objectId) => updateVisibility(objectId, false),
     [updateVisibility]
   );
-  const showObject = useCallback11(
+  const showObject = useCallback12(
     (objectId) => updateVisibility(objectId, true),
     [updateVisibility]
   );
-  const toggleObjectVisibility = useCallback11(
+  const toggleObjectVisibility = useCallback12(
     (objectId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) return;
@@ -16902,7 +17561,7 @@ function useObjectVisibility(objectBindings, onObjectBindingsChange) {
     },
     [objectBindings, onObjectBindingsChange]
   );
-  const clearHiddenObjects = useCallback11(() => {
+  const clearHiddenObjects = useCallback12(() => {
     onObjectBindingsChange(
       Object.fromEntries(
         Object.entries(objectBindings).map(([bindingKey, binding]) => [
@@ -16922,7 +17581,7 @@ function useObjectVisibility(objectBindings, onObjectBindingsChange) {
     ),
     [hiddenObjects, objectBindings]
   );
-  const isObjectHidden = useCallback11(
+  const isObjectHidden = useCallback12(
     (objectId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       return bindingKey ? objectBindings[bindingKey]?.visible === false : false;
@@ -16941,10 +17600,10 @@ function useObjectVisibility(objectBindings, onObjectBindingsChange) {
 }
 
 // src/hooks/useViewerHover.ts
-import { useCallback as useCallback12, useState as useState27 } from "react";
+import { useCallback as useCallback13, useState as useState28 } from "react";
 function useViewerHover() {
-  const [hoveredObjectBinding, setHoveredObjectBinding] = useState27(null);
-  const handleHoveredObject = useCallback12(
+  const [hoveredObjectBinding, setHoveredObjectBinding] = useState28(null);
+  const handleHoveredObject = useCallback13(
     (binding) => {
       setHoveredObjectBinding(binding);
     },
@@ -16957,18 +17616,18 @@ function useViewerHover() {
 }
 
 // src/hooks/useViewerModel.ts
-import { useCallback as useCallback13, useState as useState28 } from "react";
+import { useCallback as useCallback14, useState as useState29 } from "react";
 import { Box3 as Box36, Vector3 as Vector310 } from "three";
 function toTuple2(vector) {
   return [vector.x, vector.y, vector.z];
 }
 function useViewerModel() {
-  const [isLoading, setIsLoading] = useState28(true);
-  const [isReady, setIsReady] = useState28(false);
-  const [error, setError] = useState28(null);
-  const [bounds, setBounds] = useState28(null);
-  const [objectCount, setObjectCount] = useState28(0);
-  const handleModelLoaded = useCallback13((scene) => {
+  const [isLoading, setIsLoading] = useState29(true);
+  const [isReady, setIsReady] = useState29(false);
+  const [error, setError] = useState29(null);
+  const [bounds, setBounds] = useState29(null);
+  const [objectCount, setObjectCount] = useState29(0);
+  const handleModelLoaded = useCallback14((scene) => {
     const box = new Box36().setFromObject(scene);
     const min = box.min.clone();
     const max = box.max.clone();
@@ -16993,14 +17652,14 @@ function useViewerModel() {
     setIsLoading(false);
     setIsReady(true);
   }, []);
-  const handleLoadError = useCallback13((nextError) => {
+  const handleLoadError = useCallback14((nextError) => {
     setError(nextError);
     setBounds(null);
     setObjectCount(0);
     setIsLoading(false);
     setIsReady(false);
   }, []);
-  const resetModelState = useCallback13(() => {
+  const resetModelState = useCallback14(() => {
     setIsLoading(true);
     setIsReady(false);
     setError(null);
@@ -17020,10 +17679,10 @@ function useViewerModel() {
 }
 
 // src/hooks/useViewerActions.ts
-import { useCallback as useCallback14 } from "react";
+import { useCallback as useCallback15 } from "react";
 function useViewerActions(objectBindings, options = {}) {
   const { onAction, onObjectBindingsChange } = options;
-  const getActionsForObject = useCallback14(
+  const getActionsForObject = useCallback15(
     (objectId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) {
@@ -17033,7 +17692,7 @@ function useViewerActions(objectBindings, options = {}) {
     },
     [objectBindings]
   );
-  const runAction = useCallback14(
+  const runAction = useCallback15(
     (objectId, actionId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) {
@@ -17075,7 +17734,7 @@ function useViewerActions(objectBindings, options = {}) {
 }
 
 // src/hooks/useShareableViewerState.ts
-import { useCallback as useCallback15, useEffect as useEffect22, useRef as useRef20, useState as useState29 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect22, useRef as useRef20, useState as useState30 } from "react";
 function serializeState(cameraState, objectBindings, selectedObjectBinding) {
   const hidden = Object.values(objectBindings).filter((binding) => binding.visible === false).map((binding) => binding.id);
   return {
@@ -17096,7 +17755,7 @@ function useShareableViewerState({
   autoSync = true
 }) {
   const lastWrittenRawRef = useRef20(null);
-  const buildHash = useCallback15(() => {
+  const buildHash = useCallback16(() => {
     const state = serializeState(
       cameraState,
       objectBindings,
@@ -17104,12 +17763,12 @@ function useShareableViewerState({
     );
     return `${paramKey}=${encodeURIComponent(JSON.stringify(state))}`;
   }, [cameraState, objectBindings, selectedObjectBinding, paramKey]);
-  const getShareUrl = useCallback15(() => {
+  const getShareUrl = useCallback16(() => {
     const url = new URL(window.location.href);
     url.hash = buildHash();
     return url.toString();
   }, [buildHash]);
-  const syncUrl = useCallback15(() => {
+  const syncUrl = useCallback16(() => {
     const url = new URL(window.location.href);
     url.hash = buildHash();
     window.history.replaceState(null, "", url.toString());
@@ -17127,7 +17786,7 @@ function useShareableViewerState({
     objectBindings,
     selectedObjectBinding
   };
-  const [restoreAttempted, setRestoreAttempted] = useState29(false);
+  const [restoreAttempted, setRestoreAttempted] = useState30(false);
   const lastSyncedHashRef = useRef20(null);
   useEffect22(() => {
     if (!autoSync || !restoreAttempted) return;
@@ -17153,7 +17812,7 @@ function useShareableViewerState({
   }, [autoSync, restoreAttempted, debounceMs, paramKey]);
   const lastRestoredRawRef = useRef20(null);
   const restoringRawRef = useRef20(null);
-  const restoreFromUrl = useCallback15(async () => {
+  const restoreFromUrl = useCallback16(async () => {
     setRestoreAttempted(true);
     const rawHash = window.location.hash.startsWith("#") ? window.location.hash.slice(1) : window.location.hash;
     const raw = new URLSearchParams(rawHash).get(paramKey);