@liveroom-tech/react-immersive 1.3.4 → 1.4.0

package/dist/index.js

@@ -242,7 +242,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.ri-uvCheckerTools {\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.ri-uvCheckerBanner {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  max-width: min(360px, calc(100% - 24px));\n  padding: 7px 11px;\n  border: 1px solid rgba(244, 114, 182, 0.4);\n  border-radius: 8px;\n  background: rgba(40, 10, 35, 0.9);\n  color: rgb(249, 168, 212);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.4;\n  text-align: left;\n  pointer-events: none;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n.ri-uvCheckerBanner__icon {\n  flex-shrink: 0;\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
 var import_lucide_react = require("lucide-react");
@@ -367,6 +367,208 @@ function exportSceneMesh({
   });
 }
 
+// src/components/ModelViewer/internal/exportUvLayout.ts
+var import_fflate = require("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, (0, import_fflate.strToU8)(file.svg)])
+  );
+  const zipped = (0, import_fflate.zipSync)(archive, { level: 6 });
+  downloadBlob(
+    new Blob([zipped], { type: "application/zip" }),
+    `${safeFilenameStem(downloadFilename)}-uv-layouts.zip`
+  );
+  return files;
+}
+
 // src/components/ModelViewer/internal/captureImage.ts
 var import_three2 = require("three");
 function captureImage(capture, options = {}) {
@@ -442,6 +644,11 @@ var LIGHT_TYPES = [
   "point",
   "hemisphere"
 ];
+var SCENE_MODEL_RENDERERS = [
+  "pbr",
+  "matcap",
+  "uv-checker"
+];
 var ENVIRONMENT_PRESETS = [
   "apartment",
   "city",
@@ -999,6 +1206,73 @@ function getMatcapTexture() {
   sharedMatcapTexture = texture;
   return texture;
 }
+var sharedUvCheckerTexture = null;
+function getUvCheckerTexture() {
+  if (sharedUvCheckerTexture) return sharedUvCheckerTexture;
+  const size = 1024;
+  const cells = 8;
+  const cellSize = size / cells;
+  const colors = ["#ef4444", "#f59e0b", "#22c55e", "#6366f1"];
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  for (let row = 0; row < cells; row += 1) {
+    for (let column = 0; column < cells; column += 1) {
+      const x = column * cellSize;
+      const y = row * cellSize;
+      const colorIndex = (Math.floor(column / 2) + Math.floor(row / 2)) % 4;
+      ctx.fillStyle = colors[colorIndex];
+      ctx.fillRect(x, y, cellSize, cellSize);
+      ctx.strokeStyle = "rgba(0, 0, 0, 0.28)";
+      ctx.lineWidth = 2;
+      for (let subdivision = 1; subdivision < 4; subdivision += 1) {
+        const offset = subdivision * cellSize / 4;
+        ctx.beginPath();
+        ctx.moveTo(x + offset, y);
+        ctx.lineTo(x + offset, y + cellSize);
+        ctx.moveTo(x, y + offset);
+        ctx.lineTo(x + cellSize, y + offset);
+        ctx.stroke();
+      }
+      ctx.strokeStyle = "#09090b";
+      ctx.lineWidth = 7;
+      ctx.strokeRect(x, y, cellSize, cellSize);
+      const startX = x + cellSize * 0.23;
+      const startY = y + cellSize * 0.72;
+      const endX = x + cellSize * 0.72;
+      const endY = y + cellSize * 0.23;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.beginPath();
+      ctx.moveTo(startX, startY);
+      ctx.lineTo(endX, endY);
+      ctx.lineTo(endX - cellSize * 0.2, endY);
+      ctx.moveTo(endX, endY);
+      ctx.lineTo(endX, endY + cellSize * 0.2);
+      ctx.stroke();
+      const tileNumber = row * cells + column + 1;
+      ctx.font = `700 ${Math.round(cellSize * 0.2)}px ui-monospace, SFMono-Regular, Menlo, monospace`;
+      ctx.fillStyle = "#ffffff";
+      ctx.strokeStyle = "rgba(0, 0, 0, 0.85)";
+      ctx.lineWidth = 6;
+      const label = String(tileNumber).padStart(2, "0");
+      ctx.strokeText(label, x + cellSize / 2, y + cellSize * 0.82);
+      ctx.fillText(label, x + cellSize / 2, y + cellSize * 0.82);
+    }
+  }
+  const texture = new import_three4.CanvasTexture(canvas);
+  texture.colorSpace = import_three4.SRGBColorSpace;
+  texture.wrapS = import_three4.RepeatWrapping;
+  texture.wrapT = import_three4.RepeatWrapping;
+  texture.flipY = false;
+  texture.anisotropy = 8;
+  texture.needsUpdate = true;
+  sharedUvCheckerTexture = texture;
+  return texture;
+}
 
 // src/components/viewer/Exposure.tsx
 var import_react3 = require("react");
@@ -2895,9 +3169,11 @@ function Model({
       node.visible = binding.visible !== false;
       const material = perNodeMaterials[nodeName];
       if (!material) continue;
-      const activeMaterial = materialForNode(nodeName);
-      if (activeMaterial) {
-        node.material = activeMaterial;
+      if (rendererMode !== "uv-checker") {
+        const activeMaterial = materialForNode(nodeName);
+        if (activeMaterial) {
+          node.material = activeMaterial;
+        }
       }
       if (binding.visible === false) continue;
       const basicMaterial = perNodeBasicMaterials[nodeName];
@@ -2992,6 +3268,39 @@ function Model({
     rendererMode,
     invalidate
   ]);
+  (0, import_react11.useEffect)(() => {
+    if (rendererMode !== "uv-checker") return;
+    const checkerTexture = getUvCheckerTexture();
+    const swaps = [];
+    scene.traverse((object) => {
+      if (!isMeshNode(object)) return;
+      const original = object.material;
+      const sourceMaterials = Array.isArray(original) ? original : [original];
+      const hasUv0 = Boolean(object.geometry.getAttribute("uv"));
+      const diagnosticMaterials = sourceMaterials.map((source, index) => {
+        const material = new import_three14.MeshBasicMaterial({
+          color: hasUv0 ? "#ffffff" : "#ff00ff",
+          map: hasUv0 ? checkerTexture : null,
+          side: source.side
+        });
+        material.name = `${object.name || "mesh"}-uv-checker-${index}`;
+        material.toneMapped = false;
+        return material;
+      });
+      const diagnostic = Array.isArray(original) ? diagnosticMaterials : diagnosticMaterials[0];
+      object.material = diagnostic;
+      swaps.push({ node: object, original, diagnostic });
+    });
+    invalidate();
+    return () => {
+      for (const { node, original, diagnostic } of swaps) {
+        node.material = original;
+        const materials = Array.isArray(diagnostic) ? diagnostic : [diagnostic];
+        for (const material of materials) material.dispose();
+      }
+      invalidate();
+    };
+  }, [scene, rendererMode, invalidate]);
   (0, import_react11.useEffect)(() => {
     if (!wireframeEnabled) return;
     const added = [];
@@ -3438,19 +3747,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] = (0, import_react12.useState)(false);
   const anchorRef = useCameraBiasedAnchor(annotation, worldPositionsRef);
   const [isHovered, setIsHovered] = (0, import_react12.useState)(false);
   const [zIndex, setZIndex] = (0, import_react12.useState)(1);
   const clickTimeoutRef = (0, import_react12.useRef)(null);
   const markerRef = (0, import_react12.useRef)(null);
+  const hoverTimeoutRef = (0, import_react12.useRef)(null);
   (0, import_react12.useEffect)(() => {
     return () => {
       if (clickTimeoutRef.current) {
         clearTimeout(clickTimeoutRef.current);
         clickTimeoutRef.current = null;
       }
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
     };
   }, []);
   const handleClick = (event) => {
@@ -3469,13 +3790,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();
@@ -3600,7 +3937,8 @@ function AnnotationsLayer({
   onAnnotationClick,
   onAnnotationHover,
   onCloseAnnotation,
-  hideCloseButton = false
+  hideCloseButton = false,
+  showAnnotationOnHover = false
 }) {
   const invalidate = (0, import_fiber8.useThree)((state) => state.invalidate);
   const scene = (0, import_fiber8.useThree)((state) => state.scene);
@@ -3608,6 +3946,7 @@ function AnnotationsLayer({
   const [isLocked, setIsLocked] = (0, import_react12.useState)(false);
   const groupRef = (0, import_react12.useRef)(null);
   const invalidateFrameRef = (0, import_react12.useRef)(null);
+  const hoverCloseTimeoutRef = (0, import_react12.useRef)(null);
   const occluders = (0, import_react12.useMemo)(() => {
     const list = [];
     scene.traverse((object) => {
@@ -3638,6 +3977,9 @@ function AnnotationsLayer({
       if (invalidateFrameRef.current !== null) {
         window.cancelAnimationFrame(invalidateFrameRef.current);
       }
+      if (hoverCloseTimeoutRef.current) {
+        clearTimeout(hoverCloseTimeoutRef.current);
+      }
     };
   }, []);
   const activeAnnotationToShow = isLocked ? localActiveAnnotation : activeAnnotation || localActiveAnnotation;
@@ -3649,53 +3991,71 @@ function AnnotationsLayer({
       (annotation) => annotation.id === activeAnnotationToShow.id
     ) ?? activeAnnotationToShow;
   }, [activeAnnotationToShow, annotations]);
-  const handleAnnotationClick = (0, import_react12.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 = (0, import_react12.useCallback)((annotation) => {
-    if (!isLocked) {
+  const handleAnnotationClick = (0, import_react12.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 = (0, import_react12.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 = (0, import_react12.useCallback)(() => {
     setIsLocked(false);
     setLocalActiveAnnotation(null);
     onCloseAnnotation?.();
   }, [onCloseAnnotation]);
-  const handleCanvasClick = (0, import_react12.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 = (0, import_react12.useCallback)((event) => {
-    if (event.key === "Escape" && isLocked) {
-      setIsLocked(false);
-      setLocalActiveAnnotation(null);
-      onCloseAnnotation?.();
-    }
-  }, [isLocked, onCloseAnnotation]);
+  const handleCanvasClick = (0, import_react12.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 = (0, import_react12.useCallback)(
+    (event) => {
+      if (event.key === "Escape" && isLocked) {
+        setIsLocked(false);
+        setLocalActiveAnnotation(null);
+        onCloseAnnotation?.();
+      }
+    },
+    [isLocked, onCloseAnnotation]
+  );
   (0, import_react12.useEffect)(() => {
     const canvas = canvasRootRef.current;
     if (canvas) {
@@ -3745,7 +4105,8 @@ function AnnotationsLayer({
           occluders,
           worldPositionsRef,
           onClick: handleAnnotationClick,
-          onHover: handleAnnotationHover
+          onHover: handleAnnotationHover,
+          showAnnotationOnHover
         },
         stableKey
       );
@@ -5533,6 +5894,16 @@ function computeMeasureBox(scene) {
     size: [size.x, size.y, size.z]
   };
 }
+function computeUvMeshStats(scene) {
+  const stats = { total: 0, missing: 0 };
+  scene.traverse((node) => {
+    const mesh = node;
+    if (!mesh.isMesh || !mesh.geometry) return;
+    stats.total += 1;
+    if (!mesh.geometry.getAttribute("uv")) stats.missing += 1;
+  });
+  return stats;
+}
 function computeModelBounds(scene) {
   const box = new import_three19.Box3().setFromObject(scene);
   if (box.isEmpty()) return null;
@@ -5611,6 +5982,7 @@ function ModelViewer({
   ktx2TranscoderPath,
   meshopt = true,
   showMeasureTools = false,
+  showUvCheckerButton = false,
   showExplodeControls = false,
   cinematic,
   measurementUnit = "m",
@@ -5618,7 +5990,8 @@ function ModelViewer({
   usdzUrl,
   arScaleMode = "normalized",
   mobileHandoffUrl,
-  showAnnotationNavigation = true
+  showAnnotationNavigation = true,
+  showAnnotationOnHover = false
 }) {
   const { activeTab, activeSubTab } = useBindingBuilderContext();
   const license = useLicense(licenseKey);
@@ -5626,6 +5999,24 @@ function ModelViewer({
     () => sceneConfig ?? DEFAULT_SCENE_CONFIG,
     [sceneConfig]
   );
+  const [uvCheckerOverride, setUvCheckerOverride] = (0, import_react22.useState)(
+    null
+  );
+  const configuredUvChecker = resolvedSceneConfig.model.renderer === "uv-checker";
+  const uvCheckerActive = showUvCheckerButton ? uvCheckerOverride ?? configuredUvChecker : configuredUvChecker;
+  const renderedSceneConfig = (0, import_react22.useMemo)(() => {
+    const renderer = uvCheckerActive ? "uv-checker" : configuredUvChecker ? "pbr" : resolvedSceneConfig.model.renderer;
+    if (renderer === resolvedSceneConfig.model.renderer) {
+      return resolvedSceneConfig;
+    }
+    return {
+      ...resolvedSceneConfig,
+      model: { ...resolvedSceneConfig.model, renderer }
+    };
+  }, [configuredUvChecker, resolvedSceneConfig, uvCheckerActive]);
+  (0, import_react22.useEffect)(() => {
+    setUvCheckerOverride(null);
+  }, [modelUrl, resolvedSceneConfig.model.renderer, showUvCheckerButton]);
   const viewerBackdropColor = (0, import_react22.useMemo)(() => {
     if (backgroundColor) return backgroundColor;
     const bg = resolvedSceneConfig.background;
@@ -5688,6 +6079,7 @@ function ModelViewer({
     !modelUrl || Boolean(onAutoFit) || Boolean(camera)
   );
   const [downloadMenuOpen, setDownloadMenuOpen] = (0, import_react22.useState)(false);
+  const [uvExportError, setUvExportError] = (0, import_react22.useState)(null);
   const [modelLoaded, setModelLoaded] = (0, import_react22.useState)(false);
   const [modelLoadFailed, setModelLoadFailed] = (0, import_react22.useState)(false);
   const [bindingsMismatch, setBindingsMismatch] = (0, import_react22.useState)(false);
@@ -5696,6 +6088,10 @@ function ModelViewer({
     null
   );
   const [largeModelNoticeDismissed, setLargeModelNoticeDismissed] = (0, import_react22.useState)(false);
+  const [uvMeshStats, setUvMeshStats] = (0, import_react22.useState)({
+    total: 0,
+    missing: 0
+  });
   const [loaderMessage, setLoaderMessage] = (0, import_react22.useState)("Loading model...");
   const currentObjectBindingsRef = (0, import_react22.useRef)({});
   const captureInitialCameraState = (0, import_react22.useCallback)(() => {
@@ -6576,6 +6972,7 @@ function ModelViewer({
     setModelLoaded(false);
     setModelLoadFailed(false);
     setBindingsMismatch(false);
+    setUvMeshStats({ total: 0, missing: 0 });
     setLoaderMessage("Loading model...");
     if (!modelUrl) {
       setIsAutoFraming(false);
@@ -6765,6 +7162,7 @@ function ModelViewer({
       sceneRef.current = scene;
       setMeasureBox(computeMeasureBox(scene));
       setModelBounds(computeModelBounds(scene));
+      setUvMeshStats(computeUvMeshStats(scene));
       const triangles = countSceneTriangles(scene);
       setLargeModelTriangles(triangles > MAX_BVH_TRIANGLES ? triangles : null);
       setLargeModelNoticeDismissed(false);
@@ -6879,6 +7277,17 @@ function ModelViewer({
       console.error("Screenshot failed:", err);
     });
   }, [downloadFilename]);
+  const handleDownloadUvLayout = (0, import_react22.useCallback)(() => {
+    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 = (0, import_react22.useCallback)(async () => {
     if (onAutoFit) {
       await onAutoFit();
@@ -7136,6 +7545,20 @@ function ModelViewer({
                 ]
               }
             ),
+            renderedSceneConfig.model.renderer === "uv-checker" && uvMeshStats.missing > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ri-uvCheckerBanner", role: "status", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                import_lucide_react3.AlertTriangle,
+                {
+                  size: 14,
+                  className: "ri-uvCheckerBanner__icon"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
+                uvMeshStats.missing === uvMeshStats.total ? "UV Checker: this model has no UV0 coordinates." : `UV Checker: ${uvMeshStats.missing} of ${uvMeshStats.total} meshes have no UV0 coordinates.`,
+                " ",
+                "Missing UVs are shown in magenta."
+              ] })
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "input",
               {
@@ -7152,7 +7575,7 @@ function ModelViewer({
                 camera,
                 backgroundColor,
                 shadows: shadows && resolvedSceneConfig.shadows.enabled,
-                sceneConfig: resolvedSceneConfig,
+                sceneConfig: renderedSceneConfig,
                 selectedObjectRef: currentSelectedObjectRef,
                 hoveredObjectRef: currentHoveredObjectRef,
                 highlightOnHover,
@@ -7200,7 +7623,7 @@ function ModelViewer({
                               nodeRefsOut: nodeRefsMap,
                               materialRefsOut,
                               panelHoveredItem: panelHoveredObject ?? panelHoveredItem,
-                              sceneConfig: resolvedSceneConfig,
+                              sceneConfig: renderedSceneConfig,
                               zoomOnSelected,
                               highlightOnHover,
                               decoderConfig,
@@ -7219,7 +7642,8 @@ function ModelViewer({
                               modelLoaded,
                               onAnnotationClick: handleAnnotationMarkerClick,
                               onCloseAnnotation: closeViewingAnnotation,
-                              hideCloseButton: isGuidedTourActive
+                              hideCloseButton: isGuidedTourActive,
+                              showAnnotationOnHover
                             }
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -7391,11 +7815,34 @@ function ModelViewer({
                 )
               }
             ),
+            showUvCheckerButton && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "div",
+              {
+                className: "ri-uvCheckerTools",
+                style: { top: `${topLeftRow(xrToolsVisible ? 1 : 0)}px` },
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: `ri-measureButton ${uvCheckerActive ? "ri-measureButton--active" : ""}`,
+                    onClick: () => setUvCheckerOverride(
+                      (previous) => !(previous ?? configuredUvChecker)
+                    ),
+                    title: uvCheckerActive ? "Disable UV checker" : "Enable UV checker",
+                    "aria-label": uvCheckerActive ? "Disable UV checker" : "Enable UV checker",
+                    "aria-pressed": uvCheckerActive,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react3.Grid3X3, { size: 16 })
+                  }
+                )
+              }
+            ),
             showMeasureTools && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "div",
               {
                 className: "ri-measureTools",
-                style: { top: `${topLeftRow(xrToolsVisible ? 1 : 0)}px` },
+                style: {
+                  top: `${topLeftRow((xrToolsVisible ? 1 : 0) + (showUvCheckerButton ? 1 : 0))}px`
+                },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "button",
@@ -7438,7 +7885,7 @@ function ModelViewer({
               {
                 className: "ri-explodeTools",
                 style: {
-                  top: `${topLeftRow((xrToolsVisible ? 1 : 0) + (showMeasureTools ? 1 : 0))}px`
+                  top: `${topLeftRow((xrToolsVisible ? 1 : 0) + (showUvCheckerButton ? 1 : 0) + (showMeasureTools ? 1 : 0))}px`
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -7478,7 +7925,7 @@ function ModelViewer({
               {
                 className: "ri-cinematicTools",
                 style: {
-                  top: `${topLeftRow((xrToolsVisible ? 1 : 0) + (showMeasureTools ? 1 : 0) + (showExplodeControls ? 1 : 0))}px`
+                  top: `${topLeftRow((xrToolsVisible ? 1 : 0) + (showUvCheckerButton ? 1 : 0) + (showMeasureTools ? 1 : 0) + (showExplodeControls ? 1 : 0))}px`
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -7612,13 +8059,38 @@ function ModelViewer({
                               "Download PNG"
                             ]
                           }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ri-downloadMenuDivider" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                          "button",
+                          {
+                            className: "ri-downloadMenuItem",
+                            onClick: handleDownloadUvLayout,
+                            disabled: !sceneRef.current,
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react3.FileImage, { size: 14 }),
+                              "Download UV Layout"
+                            ]
+                          }
+                        ),
+                        uvExportError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                          "div",
+                          {
+                            className: "ri-downloadMenuNotice",
+                            role: "status",
+                            "aria-live": "polite",
+                            children: uvExportError
+                          }
                         )
                       ] }),
                       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         "button",
                         {
                           className: "ri-downloadButton",
-                          onClick: () => setDownloadMenuOpen((v) => !v),
+                          onClick: () => {
+                            setUvExportError(null);
+                            setDownloadMenuOpen((v) => !v);
+                          },
                           disabled: isDownloading || !sceneRef.current,
                           title: "Download options",
                           children: isDownloading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
@@ -8097,7 +8569,7 @@ function useViewerAnimations() {
 }
 
 // src/utils/modelFileResolver.ts
-var import_fflate = require("fflate");
+var import_fflate2 = require("fflate");
 var SUPPORTED_MODEL_EXTENSIONS = [".glb", ".gltf", ".zip"];
 var SUPPORTED_MODEL_MIME_TYPES = [
   "model/gltf-binary",
@@ -8155,7 +8627,7 @@ async function resolveStandaloneGltfFile(file) {
   };
 }
 async function resolveZippedGltfFile(file) {
-  const zip = (0, import_fflate.unzipSync)(new Uint8Array(await file.arrayBuffer()));
+  const zip = (0, import_fflate2.unzipSync)(new Uint8Array(await file.arrayBuffer()));
   const entries = /* @__PURE__ */ new Map();
   for (const [rawPath, bytes] of Object.entries(zip)) {
     const path = normalizeZipPath(rawPath);
@@ -8176,13 +8648,13 @@ async function resolveZippedGltfFile(file) {
   if (!gltfBytes) {
     throw new Error("Invalid GLTF zip: no .gltf found.");
   }
-  const gltf = parseGltfJson((0, import_fflate.strFromU8)(gltfBytes), gltfPath);
+  const gltf = parseGltfJson((0, import_fflate2.strFromU8)(gltfBytes), gltfPath);
   const rootDir = getDirname(gltfPath);
   const urlsToRevoke = [];
   try {
     rewriteZipUris(gltf.buffers, rootDir, entries, urlsToRevoke);
     rewriteZipUris(gltf.images, rootDir, entries, urlsToRevoke);
-    const gltfBlob = new Blob([(0, import_fflate.strToU8)(JSON.stringify(gltf))], {
+    const gltfBlob = new Blob([(0, import_fflate2.strToU8)(JSON.stringify(gltf))], {
       type: "model/gltf+json"
     });
     const gltfUrl = URL.createObjectURL(gltfBlob);
@@ -8796,13 +9268,13 @@ function GeneralSceneSettings({ config, onChange }) {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "se-field", children: [
             /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "se-fieldLabel", children: "Renderer" }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "se-segmentedControl", children: ["pbr", "matcap"].map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "se-segmentedControl se-segmentedControl--renderer", children: SCENE_MODEL_RENDERERS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "button",
               {
                 type: "button",
                 className: `se-segmentedOption ${model.renderer === option ? "se-segmentedOption--active" : ""}`,
                 onClick: () => setModel({ ...model, renderer: option }),
-                children: option.toUpperCase()
+                children: option === "uv-checker" ? "UV CHECKER" : option.toUpperCase()
               },
               option
             )) })
@@ -12203,7 +12675,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 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');
+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-segmentedControl--renderer {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.se-segmentedControl--renderer .se-segmentedOption {\n  padding-inline: 6px;\n  font-size: 12px;\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
 var import_lucide_react11 = require("lucide-react");
@@ -14187,7 +14659,7 @@ function CameraPositionPanel({
 var import_react37 = require("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) {
@@ -14233,7 +14705,7 @@ function buildDefaultActions(type) {
 function createDefaultBinding(nodeName) {
   const type = inferType(nodeName);
   return {
-    id: slugify(nodeName),
+    id: slugify2(nodeName),
     modelObjectId: nodeName,
     type,
     label: humanizeNodeName(nodeName),
@@ -14496,7 +14968,7 @@ function useUndoableState(initial, coalesceWindowMs = 600) {
 }
 
 // src/components/BindingBuilder/utils/exportAssets.ts
-var import_fflate2 = require("fflate");
+var import_fflate3 = require("fflate");
 
 // src/components/BindingBuilder/utils/serialization.ts
 function toBindingsJson(bindings) {
@@ -14572,11 +15044,11 @@ async function downloadExport(filename, content, mimeType, zipFilename, assets)
     downloadTextFile(filename, content, mimeType);
     return;
   }
-  const files = { [filename]: (0, import_fflate2.strToU8)(content) };
+  const files = { [filename]: (0, import_fflate3.strToU8)(content) };
   for (const asset of assets) {
     files[asset.path] = new Uint8Array(await asset.blob.arrayBuffer());
   }
-  const zipped = (0, import_fflate2.zipSync)(files, { level: 6 });
+  const zipped = (0, import_fflate3.zipSync)(files, { level: 6 });
   const blob = new Blob([zipped], { type: "application/zip" });
   const url = URL.createObjectURL(blob);
   const link = document.createElement("a");