@liveroom-tech/react-immersive 1.3.4 → 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.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');
+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
       );
@@ -5425,6 +5679,7 @@ import {
   Camera as CameraIcon,
   Download,
   Eraser,
+  FileImage,
   MapPin,
   RotateCcw,
   ChevronLeft,
@@ -5678,7 +5933,8 @@ function ModelViewer({
   usdzUrl,
   arScaleMode = "normalized",
   mobileHandoffUrl,
-  showAnnotationNavigation = true
+  showAnnotationNavigation = true,
+  showAnnotationOnHover = false
 }) {
   const { activeTab, activeSubTab } = useBindingBuilderContext();
   const license = useLicense(licenseKey);
@@ -5748,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);
@@ -6939,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();
@@ -7279,7 +7547,8 @@ function ModelViewer({
                               modelLoaded,
                               onAnnotationClick: handleAnnotationMarkerClick,
                               onCloseAnnotation: closeViewingAnnotation,
-                              hideCloseButton: isGuidedTourActive
+                              hideCloseButton: isGuidedTourActive,
+                              showAnnotationOnHover
                             }
                           ),
                           /* @__PURE__ */ jsx19(
@@ -7672,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: [
@@ -8164,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",
@@ -8249,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);
@@ -14266,7 +14560,7 @@ function CameraPositionPanel({
 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) {
@@ -14312,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),
@@ -14575,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) {
@@ -14651,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");