:root {
  --halo-dark-ink: #f4f1ea;
  --halo-dark-muted: rgba(244,241,234,.58);
  --halo-accent: #f13aad;
  --halo-capture-success: #75e0af;
  --halo-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --radius-sm: 3px; --radius-pill: 999px;
  --motion-micro: 180ms; --motion-ease: cubic-bezier(.2,.8,.2,1); --motion-ease-emphasized: cubic-bezier(.2,.9,.2,1);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body { margin: 0; overflow: hidden; background: #08090b; color: var(--halo-dark-ink); }
.demoShell { width: 100%; min-height: 100vh; height: 100vh; padding: clamp(12px,2vw,24px); background: radial-gradient(circle at 64% 48%, #151b25 0,#0b0d11 58%,#07080a 100%); grid-template-rows: auto minmax(0,1fr); }
.vsiTechnologyDemo { min-height: 0; height: 100%; grid-template-columns: minmax(150px,.23fr) minmax(0,1fr); }
.stage { --vsi-stage-max-height: min(calc(100vh - 88px),68vw,720px); }
.geometry svg { display: block; width: 100%; height: 100%; overflow: visible; }
.geometry #halo-vsi-production-master { opacity: .96; }
.geometry #lines, .geometry #skeleton-lines, .geometry #landmarks, .geometry #capture-sections { transform-box: fill-box; transform-origin: center; }
.targetGeometry > svg, .targetGeometry > div { display: block; width: 100%; height: 100%; }
.geometry.is-empty, .targetGeometry.is-empty { opacity: 0; }
#register-scan[hidden], #verify-sweep[hidden], #verified[hidden], #live-field[hidden], #panel-detail[hidden] { display: none !important; }

@media (max-width: 760px) {
  body { overflow: auto; }
  .demoShell { height: auto; min-height: 100vh; }
  .controller { grid-template-columns: 1fr; }
  .stageRail { justify-content: flex-start; }
  .vsiTechnologyDemo { grid-template-columns: 1fr; align-content: start; }
  .panel { order: 2; max-width: none; grid-template-columns: minmax(100px,.5fr) 1fr; }
  .panel .sequence { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
  .stage { --vsi-stage-max-height: min(55vh,72vw,520px); order: 1; }
}
@media (max-width: 470px) {
  .stageRail { display: grid; grid-template-columns: repeat(3,1fr); width: 100%; }
  .stageRail li::after { display: none; }
  .panel p, .panel .sequence { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}