:root {
  --td-ink: #111827;
  --td-muted: #5f6b7a;
  --td-line: #dce5ef;
  --td-panel: #fff;
  --td-soft: #f4f8fc;
  --td-violet: #6d4aff;
  --td-cyan: #18a9c9;
  --td-focus: #4b2bbd;
  --td-success: #176b45;
  --td-success-soft: #e5f7ed;
  --td-warning: #744100;
  --td-warning-soft: #fff4dd;
  --td-danger: #a12626;
  --td-danger-soft: #fff0f0;
}

html[data-theme="dark"] {
  --td-ink: #edf4ff;
  --td-muted: #9eacbd;
  --td-line: #283548;
  --td-panel: #101a29;
  --td-soft: #0b1421;
  --td-focus: #c1b5ff;
  --td-success: #8ae2b1;
  --td-success-soft: #102d21;
  --td-warning: #ffd18a;
  --td-warning-soft: #34270f;
  --td-danger: #ffaaaa;
  --td-danger-soft: #3a171b;
}

body {
  margin: 0;
  background: var(--td-soft);
  color: var(--td-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#three-d-app { min-height: 0; }
#three-d-app .three-d-tool-shell [hidden] { display: none !important; }
.category-hero--three-d { --category-accent: 109, 74, 255; }
.tool-card--three-d { --tool-accent: 109, 74, 255; }
.tool-card--three-d .ba-preview.pixlane-card-v2-preview {
  /* Do not depend on the asynchronously mounted site chrome for this core
     card geometry: the shared `.ba-preview` default is 8:5. */
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(24, 169, 201, .2), transparent 36%),
    linear-gradient(135deg, rgba(109, 74, 255, .14), rgba(24, 169, 201, .08)),
    var(--td-soft);
}
.three-d-orbit-preview {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--td-line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 72% 24%, rgba(24, 169, 201, .2), transparent 36%),
    linear-gradient(135deg, rgba(109, 74, 255, .14), rgba(24, 169, 201, .08)),
    var(--td-soft);
}
.tool-card--three-d .three-d-orbit-preview.pixlane-card-v2-preview {
  max-width: none;
  height: auto;
  margin: 0;
  cursor: pointer;
}
.three-d-orbit-preview__poster,
.three-d-orbit-preview__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.three-d-orbit-preview__video { z-index: 1; }
.three-d-orbit-preview__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 10, 19, .55), transparent 42%, rgba(4, 10, 19, .72));
}
.three-d-orbit-preview__label,
.three-d-orbit-preview__format,
.three-d-orbit-preview__action {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: calc(100% - 20px);
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  background: rgba(5, 12, 23, .72);
  box-shadow: 0 8px 18px rgba(3, 8, 16, .28);
  color: #f5f8ff;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .08em;
  line-height: 1.15;
  text-transform: uppercase;
}
.three-d-orbit-preview__label { top: 10px; left: 10px; }
.three-d-orbit-preview__format { top: 10px; right: 10px; }
.three-d-orbit-preview__action {
  right: 10px;
  bottom: 10px;
  color: #e8f7ff;
  letter-spacing: .02em;
  text-transform: none;
}
.three-d-orbit-preview--example {
  width: 100%;
  max-width: 480px;
  max-height: 520px;
  margin-inline: auto;
  box-shadow: none;
}
.three-d-orbit-hint {
  color: var(--td-muted);
  font-size: 12px;
  line-height: 1.5;
}
.three-d-orbit-hint__mobile { display: none; }

.three-d-format-guide { margin-bottom: 24px; }
.three-d-format-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.three-d-format-guide__grid article {
  padding: 18px;
  border: 1px solid var(--td-line);
  border-radius: 14px;
  background: var(--td-soft);
}
.three-d-format-guide__grid strong { color: var(--td-ink); }
.three-d-format-guide__grid p {
  margin: 7px 0 0;
  color: var(--td-muted);
  font-size: 13px;
  line-height: 1.6;
}

.three-d-shell {
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
  padding: 30px 0 80px;
}
.three-d-breadcrumb {
  display: flex;
  gap: 10px;
  margin: 8px 0 28px;
  color: var(--td-muted);
  font-size: 13px;
}
.three-d-breadcrumb a {
  color: var(--td-violet);
  text-decoration: none;
}
.three-d-kicker {
  display: inline-flex;
  align-items: center;
  color: var(--td-violet);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.three-d-tool-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 50px;
  align-items: center;
  margin-bottom: 24px;
  padding: 42px;
  border: 1px solid var(--td-line);
  border-radius: 24px;
  background: var(--td-panel);
}
.three-d-tool-hero h1 {
  max-width: 880px;
  margin: 12px 0 18px;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1;
  letter-spacing: -.05em;
}
.three-d-tool-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--td-muted);
  font-size: 17px;
  line-height: 1.65;
}
.three-d-tool-preview { min-width: 0; }
.three-d-tool-preview > .ba-preview,
.three-d-tool-preview > [data-comparison] {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(109, 74, 255, .28);
  border-radius: 16px;
  box-shadow: 0 18px 38px rgba(23, 13, 66, .2);
}
.three-d-tool-preview > p {
  margin: 12px 2px 0;
  color: var(--td-muted);
  font-size: 12px;
  line-height: 1.55;
}

.three-d-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
}
.three-d-workbench form,
.three-d-workbench aside,
.three-d-result,
.three-d-faq,
.three-d-error {
  padding: 28px;
  border: 1px solid var(--td-line);
  border-radius: 22px;
  background: var(--td-panel);
}
.three-d-drop {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 28px;
  border: 1.5px dashed #93a2ba;
  border-radius: 18px;
  background: var(--td-soft);
  text-align: center;
  transition: border-color .2s, background .2s, transform .2s;
}
.three-d-drop.is-over {
  border-color: var(--td-violet);
  background: rgba(109, 74, 255, .07);
  transform: scale(.995);
}
.three-d-drop svg { width: 54px; color: var(--td-violet); }
.three-d-drop h2 { margin: 15px 0 4px; }
.three-d-drop p { margin: 0 0 18px; color: var(--td-muted); }
.three-d-drop button,
.three-d-download {
  padding: 11px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--td-violet);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.three-d-drop .three-d-sample-button {
  margin-top: 9px;
  background: transparent;
  color: var(--td-violet);
  box-shadow: inset 0 0 0 1px var(--td-violet);
}
.three-d-file-status {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 2px;
  color: var(--td-muted);
  font-size: 13px;
}
.three-d-file-status strong { color: var(--td-ink); }

/* Shared local-first intake, processing, and handoff components. */
.three-d-intake-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.three-d-intake-actions > :is(button, a, label) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.three-d-folder-input:not([hidden]) {
  width: min(100%, 34rem);
  min-height: 44px;
  padding: 7px;
  border: 1px solid var(--td-line);
  border-radius: 11px;
  background: var(--td-panel);
  color: var(--td-ink);
}
.three-d-folder-input:not([hidden])::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  padding: 0 10px;
  border: 1px solid var(--td-violet);
  border-radius: 7px;
  background: transparent;
  color: var(--td-violet);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.three-d-bundle-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 10px 16px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--td-line);
  border-radius: 12px;
  background: var(--td-soft);
  color: var(--td-muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.three-d-bundle-summary :is(strong, b) {
  color: var(--td-ink);
  font-weight: 800;
}

.three-d-operation-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px 10px;
  padding: 11px 12px;
  border: 1px solid rgba(109, 74, 255, .28);
  border-radius: 11px;
  background: rgba(109, 74, 255, .07);
  color: var(--td-violet);
}
.three-d-operation-status__indicator {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: three-d-status-spin .8s linear infinite;
}
.three-d-operation-status__copy { display: grid; min-width: 0; gap: 1px; }
.three-d-operation-status__copy strong,
.three-d-operation-status__copy small { overflow-wrap: anywhere; }
.three-d-operation-status__copy strong { font-size: 12px; line-height: 1.35; }
.three-d-operation-status__copy small { color: var(--td-muted); font-size: 10px; line-height: 1.35; }
.three-d-operation-status progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  accent-color: currentColor;
}
.three-d-operation-status[data-state="completed"] {
  border-color: rgba(23, 107, 69, .42);
  background: var(--td-success-soft);
  color: var(--td-success);
}
.three-d-operation-status[data-state="cancelled"] {
  border-color: rgba(116, 65, 0, .42);
  background: var(--td-warning-soft);
  color: var(--td-warning);
}
.three-d-operation-status[data-state="failed"] {
  border-color: rgba(161, 38, 38, .48);
  background: var(--td-danger-soft);
  color: var(--td-danger);
}
.three-d-operation-status[data-state="completed"] .three-d-operation-status__indicator,
.three-d-operation-status[data-state="cancelled"] .three-d-operation-status__indicator,
.three-d-operation-status[data-state="failed"] .three-d-operation-status__indicator {
  border: 0;
  animation: none;
}
.three-d-operation-status[data-state="completed"] .three-d-operation-status__indicator::before { content: "✓"; }
.three-d-operation-status[data-state="cancelled"] .three-d-operation-status__indicator::before { content: "■"; }
.three-d-operation-status[data-state="failed"] .three-d-operation-status__indicator::before { content: "!"; font-weight: 900; }
@keyframes three-d-status-spin { to { transform: rotate(1turn); } }

.three-d-cancel,
.three-d-retry {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.three-d-cancel { color: var(--td-danger); }
.three-d-retry { color: var(--td-violet); }
.three-d-cancel:hover:not(:disabled) { background: var(--td-danger-soft); }
.three-d-retry:hover:not(:disabled) { background: rgba(109, 74, 255, .10); }
.three-d-cancel:hover:not(:disabled),
.three-d-retry:hover:not(:disabled) { transform: translateY(-1px); }
.three-d-cancel:disabled,
.three-d-retry:disabled { cursor: not-allowed; opacity: .58; }

.three-d-viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid var(--td-line);
  border-radius: 12px;
  background: var(--td-soft);
}
.three-d-viewer-toolbar :is(button, a, select, input) {
  min-height: 40px;
  max-width: 100%;
  border-radius: 9px;
  font: inherit;
}
.three-d-viewer-toolbar :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--td-line);
  background: var(--td-panel);
  color: var(--td-ink);
  font-weight: 750;
  text-decoration: none;
}
.three-d-viewer-toolbar :is(button, a):hover:not(:disabled) {
  border-color: var(--td-violet);
  color: var(--td-violet);
}
.three-d-viewer-toolbar select,
.three-d-viewer-toolbar input:not([type="range"]) {
  min-width: min(100%, 9rem);
  padding: 0 10px;
  border: 1px solid var(--td-line);
  background: var(--td-panel);
  color: var(--td-ink);
}
.three-d-viewer-animation-field {
  display: grid;
  flex: 1 1 12rem;
  gap: 3px;
  min-width: min(100%, 12rem);
  color: var(--td-muted);
  font-size: 12px;
  font-weight: 720;
}
.three-d-viewer-animation-field input[type="range"] {
  width: 100%;
  min-height: 28px;
  accent-color: var(--td-violet);
}
.three-d-viewer-canvas {
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  min-height: clamp(260px, 47vw, 560px);
  overflow: hidden;
  border: 1px solid rgba(147, 162, 186, .48);
  border-radius: 14px;
  background: #07101d;
  color: #eaf3ff;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.three-d-gaussian-canvas {
  /* The vendor sizes its renderer from the root element. A percentage height
     inside the auto-sized result grid creates a resize feedback loop where
     each canvas update makes the result panel taller again. Give that root a
     bounded responsive block size so renderer and document geometry converge. */
  --three-d-gaussian-height: clamp(320px, 47vw, 560px);
  min-height: 0;
}
.three-d-viewer-canvas > :is(canvas, svg, img, video) {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}
.three-d-viewer-canvas > canvas {
  cursor: grab;
  outline: none;
}
.three-d-viewer-canvas > canvas:active { cursor: grabbing; }
.three-d-viewer-canvas > :is(p, [data-three-d-viewer-message]) {
  align-self: center;
  justify-self: center;
  max-width: 48ch;
  margin: 20px;
  color: #d5e2f3;
  text-align: center;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.three-d-handoff {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(109, 74, 255, .34);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(109, 74, 255, .10), rgba(24, 169, 201, .07));
}
.three-d-handoff > :is(h2, h3, p) { margin: 0; }
.three-d-handoff > :is(h2, h3) { color: var(--td-ink); font-size: 15px; }
.three-d-handoff > p { color: var(--td-muted); font-size: 13px; line-height: 1.5; }
.three-d-handoff-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.three-d-handoff-list :is(a, button) {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--td-violet);
  border-radius: 10px;
  background: var(--td-panel);
  color: var(--td-violet);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.three-d-handoff-list :is(a, button):hover:not(:disabled) {
  background: var(--td-violet);
  color: #fff;
}
.three-d-handoff-list :is(a, button):disabled { cursor: not-allowed; opacity: .58; }

.three-d-verification {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(23, 107, 69, .48);
  border-radius: 12px;
  background: var(--td-success-soft);
  color: var(--td-success);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.three-d-verification :is(strong, b) { color: var(--td-ink); }
.three-d-verification.is-pending,
.three-d-verification[data-state="pending"],
.three-d-verification[data-state="verifying"] {
  border-color: rgba(109, 74, 255, .45);
  background: rgba(109, 74, 255, .10);
  color: var(--td-violet);
}
.three-d-verification.is-cancelled,
.three-d-verification[data-state="cancelled"] {
  border-color: rgba(116, 65, 0, .48);
  background: var(--td-warning-soft);
  color: var(--td-warning);
}
.three-d-verification.is-failed,
.three-d-verification.is-error,
.three-d-verification[data-state="failed"],
.three-d-verification[data-state="error"] {
  border-color: rgba(161, 38, 38, .56);
  background: var(--td-danger-soft);
  color: var(--td-danger);
}
.three-d-warning-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--td-warning);
  font-size: 13px;
  line-height: 1.5;
}
.three-d-warning-list > li {
  padding: 10px 12px 10px 15px;
  border: 1px solid rgba(116, 65, 0, .38);
  border-left: 4px solid currentColor;
  border-radius: 10px;
  background: var(--td-warning-soft);
  overflow-wrap: anywhere;
}
.three-d-warning-list > li[data-severity="error"],
.three-d-warning-list > li.is-error {
  border-color: rgba(161, 38, 38, .56);
  color: var(--td-danger);
  background: var(--td-danger-soft);
}
.three-d-warning-list a {
  color: inherit;
  font-weight: 800;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.three-d-intake-actions :is(button, a, label),
.three-d-folder-input:not([hidden]),
.three-d-cancel,
.three-d-retry,
.three-d-viewer-toolbar :is(button, a, select, input),
.three-d-viewer-canvas > canvas,
.three-d-handoff-list :is(a, button) {
  -webkit-tap-highlight-color: transparent;
}
.three-d-intake-actions :is(button, a, label):focus-visible,
.three-d-folder-input:not([hidden]):focus-visible,
.three-d-cancel:focus-visible,
.three-d-retry:focus-visible,
.three-d-viewer-toolbar :is(button, a, select, input):focus-visible,
.three-d-viewer-canvas > canvas:focus-visible,
.three-d-handoff-list :is(a, button):focus-visible,
.three-d-warning-list a:focus-visible {
  outline: 3px solid var(--td-focus);
  outline-offset: 3px;
}
.three-d-settings { margin-top: 18px; }
.three-d-settings > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.three-d-field { display: grid; gap: 7px; }
.three-d-setting-label {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.three-d-setting-label > span { min-width: 0; overflow-wrap: anywhere; }
.three-d-setting-label output {
  flex: 0 0 auto;
  min-width: 3.4ch;
  color: var(--td-violet);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  text-align: end;
}
.three-d-range-bounds {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--td-muted) !important;
  font-size: 10px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 650 !important;
}
.three-d-field span,
.three-d-toggle span { font-size: 12px; font-weight: 750; }
.three-d-field input,
.three-d-field select {
  min-height: 42px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--td-line);
  border-radius: 10px;
  background: var(--td-soft);
  color: var(--td-ink);
}
.three-d-field input[type="range"] { padding: 0; }
.three-d-field input[type="color"] { width: 100%; padding: 4px; }
.three-d-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--td-line);
  border-radius: 10px;
}
.three-d-process {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--td-violet), var(--td-cyan));
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
}
.three-d-process:disabled { cursor: not-allowed; filter: grayscale(.55); opacity: .58; }
.three-d-controls-panel {
  height: auto;
  max-height: none;
  overflow: visible;
}
.three-d-action-only-panel { padding: 18px; }
.three-d-settings-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--td-line);
}
.three-d-action-only-panel .three-d-settings-actions {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.three-d-settings-actions :is(.three-d-process, .three-d-cancel, .three-d-retry, .three-d-download) {
  width: 100%;
  min-height: 44px;
  margin-top: 0;
}
.three-d-settings-actions [data-three-d-action-status][data-state="error"] { color: var(--td-danger); }
.three-d-settings-actions [data-three-d-action-status][data-state="cancelled"] { color: var(--td-warning); }
.three-d-settings-actions [data-three-d-action-status][data-state="success"] { color: var(--td-success); }
#three-d-app .three-d-process.three-d-process--secondary {
  border: 1px solid var(--td-violet);
  background: transparent;
  color: var(--td-violet);
}
.three-d-settings-actions :is(button, input, select):focus-visible {
  outline: 3px solid var(--td-focus);
  outline-offset: 3px;
}
.three-d-process-note {
  margin: 10px 0 0;
  color: var(--td-muted);
  font-size: 12px;
  line-height: 1.55;
}
.three-d-workbench aside h2 { margin-top: 0; }
.three-d-workbench dl > div { padding: 15px 0; border-bottom: 1px solid var(--td-line); }
.three-d-workbench dt {
  color: var(--td-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.three-d-workbench dd { margin: 5px 0 0; line-height: 1.5; }

.three-d-research-warning {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid #df9f32;
  border-radius: 16px;
  background: #fff6df;
  color: #51380e;
}
.three-d-research-warning strong { flex: 0 0 auto; }
.three-d-research-warning p { margin: 0; line-height: 1.6; }
html[data-theme="dark"] .three-d-research-warning { background: #30230e; color: #ffe7ba; }

.three-d-result {
  margin-top: 22px;
  scroll-margin-top: 120px;
}
.three-d-result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.three-d-result-head h2 { margin: 4px 0 0; }
.three-d-result-view {
  display: grid;
  min-height: 360px;
  place-items: center;
  overflow: hidden;
  margin-top: 20px;
  border-radius: 16px;
  background: #07101d;
}
.three-d-summary {
  overflow: auto;
  padding: 16px;
  border-radius: 12px;
  background: var(--td-soft);
  color: var(--td-muted);
  line-height: 1.55;
  white-space: pre-wrap;
}
.three-d-scene-metadata {
  width: 100%;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid var(--td-line);
  border-radius: 14px;
  background: var(--td-panel);
  color: var(--td-ink);
  text-align: start;
}
.three-d-scene-metadata > h3 { margin: 0; font-size: 1rem; }
.three-d-scene-metadata > p { margin: 8px 0 14px; color: var(--td-muted); }
.three-d-scene-metadata details { border-top: 1px solid var(--td-line); }
.three-d-scene-metadata details:last-child { border-bottom: 1px solid var(--td-line); }
.three-d-scene-metadata summary {
  padding: 12px 0;
  font-weight: 760;
  cursor: pointer;
}
.three-d-scene-metadata :is(ul, ol) { margin: 0 0 12px; padding-inline-start: 22px; }
.three-d-scene-metadata li { overflow-wrap: anywhere; line-height: 1.5; }
.three-d-scene-metadata li + li { margin-top: 5px; }
.three-d-scene-metadata strong { font-weight: 740; }
.three-d-faq { margin-top: 22px; }
.three-d-faq details { padding: 16px 0; border-bottom: 1px solid var(--td-line); }
.three-d-faq summary { font-weight: 800; cursor: pointer; }
.three-d-faq details p { color: var(--td-muted); line-height: 1.65; }
.three-d-error { margin-top: 24px; }
.three-d-error p { color: var(--td-muted); line-height: 1.6; }
.three-d-error a { color: var(--td-violet); font-weight: 750; }

#three-d-app .three-d-tool-shell .specialized-workbench .tool-workbench__main {
  display: grid;
  min-width: 0;
  gap: 24px;
  align-content: start;
}
#three-d-app .three-d-tool-shell .specialized-workbench .tool-workbench__side {
  display: grid !important;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  max-height: none !important;
  position: static !important;
  inset: auto !important;
  grid-template-rows: none !important;
  gap: 24px;
  align-content: start !important;
  overflow: visible !important;
}
#three-d-app .three-d-tool-shell .specialized-workbench .three-d-controls-panel,
#three-d-app .three-d-tool-shell .specialized-workbench .specialized-settings-panel {
  min-height: initial !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  scrollbar-width: auto !important;
}
#three-d-app .three-d-tool-shell .three-d-result-region { min-width: 0; margin-top: 0; }
#three-d-app .three-d-tool-shell .three-d-support-region { min-width: 0; margin: 0; }

@media (min-width: 1101px) {
  #three-d-app .three-d-tool-shell .specialized-workbench {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 27vw, 430px) !important;
    gap: 24px !important;
    align-items: start;
  }
  #three-d-app .three-d-tool-shell .specialized-workbench[data-three-d-has-settings="false"] {
    grid-template-columns: minmax(0, 1fr) clamp(280px, 23vw, 340px) !important;
  }
}

@media (max-width: 1100px) {
  #three-d-app .three-d-tool-shell .specialized-workbench {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  #three-d-app .three-d-tool-shell .specialized-workbench .tool-workbench__side,
  #three-d-app .three-d-tool-shell .specialized-workbench > :is(.specialized-upload-panel, .three-d-controls-panel, .three-d-result-region, .three-d-support-region) {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 1050px) {
  .three-d-tool-hero,
  .three-d-workbench { grid-template-columns: 1fr; }
  .three-d-tool-preview { max-width: 620px; }
}

@media (max-width: 760px) {
  .three-d-format-guide__grid { grid-template-columns: 1fr; }
  .three-d-viewer-toolbar { align-items: stretch; }
  .three-d-viewer-toolbar :is(button, a, select, input) { flex: 1 1 10rem; }
}

@media (max-width: 680px) {
  .three-d-shell { width: min(100% - 24px, 1480px); padding-top: 16px; }
  .three-d-tool-hero { padding: 27px; }
  .three-d-settings > div { grid-template-columns: 1fr; }
  .three-d-workbench form,
  .three-d-workbench aside,
  .three-d-result,
  .three-d-faq,
  .three-d-error { padding: 20px; }
  .three-d-file-status,
  .three-d-result-head,
  .three-d-research-warning { display: block; }
  .three-d-research-warning strong { display: block; margin-bottom: 7px; }
  .three-d-intake-actions { display: grid; grid-template-columns: 1fr; }
  .three-d-intake-actions > :is(button, a, label),
  .three-d-handoff-list :is(a, button) { width: 100%; }
  .three-d-bundle-summary,
  .three-d-bundle-summary { grid-template-columns: 1fr; }
  .three-d-viewer-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .three-d-viewer-toolbar > :is(label, [data-three-d-viewer-label]) { grid-column: 1 / -1; }
  .three-d-viewer-toolbar :is(button, a, select, input) { width: 100%; min-width: 0; }
  .three-d-viewer-canvas { min-height: 270px; border-radius: 12px; }
  .three-d-gaussian-canvas { --three-d-gaussian-height: clamp(270px, 72vw, 420px); }
  .three-d-scene-metadata { padding: 15px; }
  .three-d-handoff { padding: 14px; }
  .three-d-handoff-list { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .three-d-orbit-hint__desktop { display: none; }
  .three-d-orbit-hint__mobile { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .three-d-drop,
  .three-d-cancel,
  .three-d-retry { transition: none; }
  .three-d-operation-status__indicator { animation: none; }
  .three-d-viewer-canvas { scroll-behavior: auto; }
  .three-d-cancel:hover:not(:disabled),
  .three-d-retry:hover:not(:disabled) { transform: none; }
  .three-d-orbit-preview__video { display: none; }
}

@media (forced-colors: active) {
  .three-d-operation-status,
  .three-d-bundle-summary,
  .three-d-viewer-toolbar,
  .three-d-handoff,
  .three-d-verification,
  .three-d-warning-list > li {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .three-d-cancel,
  .three-d-retry,
  .three-d-handoff-list :is(a, button),
  .three-d-viewer-toolbar :is(button, a) {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}