* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  color-scheme: dark light;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 32%),
    linear-gradient(180deg, var(--bg-deep), var(--bg));
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

button,
a,
select {
  color: inherit;
  font: inherit;
}

button:focus-visible,
a:focus-visible,
select:focus-visible {
  outline: var(--spinner-border) solid var(--focus);
  outline-offset: var(--gap-xs);
}

[hidden] {
  display: none !important;
}

.lab-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--topbar-min);
  padding: var(--gap) max(var(--shell-pad), calc((100vw - var(--shell-max)) / 2));
  border-bottom: var(--border-w) solid var(--line-soft);
  background: var(--surface-glass);
  backdrop-filter: blur(calc(var(--gap) * 2));
}

.lab-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: var(--logo-size);
  aspect-ratio: 1;
  place-items: center;
  border: var(--border-w) solid var(--line-bright);
  border-radius: var(--radius-sm);
  color: var(--ink-invert);
  background: var(--accent-gradient);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-title);
  box-shadow: var(--shadow);
}

.lab-brand > span:last-child {
  display: grid;
  gap: var(--gap-xs);
}

.lab-brand strong {
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-title);
}

.lab-brand small {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.project-picker {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  min-height: var(--control-h);
  padding-left: var(--gap);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
}

.project-picker > span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.project-picker select {
  align-self: stretch;
  max-width: 220px;
  padding: 0 calc(var(--gap-lg) + var(--gap-sm)) 0 var(--gap-sm);
  border: 0;
  border-left: var(--border-w) solid var(--line);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  color: var(--ink);
  background: var(--surface-control);
  cursor: pointer;
  font-size: var(--fs-mini);
  font-weight: var(--weight-title);
}

.project-picker option:disabled {
  color: var(--ink-faint);
}

.style-picker {
  transition: border-color var(--t), opacity var(--t), box-shadow var(--t);
}

.style-picker select {
  max-width: 160px;
}

.style-picker[data-state="ready"] {
  border-color: color-mix(in srgb, var(--accent-2) 58%, var(--line));
  box-shadow: 0 0 0 var(--border-w) color-mix(in srgb, var(--accent-2) 12%, transparent);
}

.style-picker[data-state="locked"] {
  opacity: var(--opacity-disabled);
}

.launch-button {
  min-height: var(--control-h);
  padding: 0 var(--gap);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-invert);
  background: var(--accent-gradient);
  cursor: pointer;
  font-size: var(--fs-mini);
  font-weight: var(--weight-title);
  transition: transform var(--t), opacity var(--t), box-shadow var(--t);
}

.launch-button:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-soft);
}

.launch-button:disabled {
  cursor: default;
  opacity: var(--opacity-disabled);
  transform: none;
  box-shadow: none;
}

.runtime-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  min-height: var(--control-h);
  padding: 0 var(--gap);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-dim);
  background: var(--surface-muted);
  font-family: var(--mono);
  font-size: var(--fs-mini);
}

.runtime-badge > span {
  width: var(--capsule-dot);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--ink-faint);
  box-shadow: var(--glow-faint);
}

.runtime-badge[data-level="busy"] > span {
  background: var(--warn);
  box-shadow: var(--glow-warn);
  animation: pulse var(--t-slow) infinite alternate;
}

.runtime-badge[data-level="running"] > span {
  background: var(--ok);
  box-shadow: var(--glow-ok);
}

.runtime-badge[data-level="error"] > span {
  background: var(--err);
  box-shadow: var(--glow-err);
}

.lab-shell {
  width: min(calc(100% - (var(--shell-pad) * 2)), var(--shell-max));
  margin: 0 auto;
}

.lab-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(calc(var(--workspace-side-min) / 2), .55fr);
  align-items: end;
  gap: calc(var(--gap-xl) * 2);
  min-height: min(74vh, 720px);
  padding: calc(var(--gap-xl) * 3) 0 calc(var(--gap-xl) * 2);
}

.eyebrow {
  margin: 0;
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: var(--weight-title);
  letter-spacing: calc(var(--tracking-label) * 2);
  text-transform: uppercase;
}

.intro-copy h1 {
  max-width: 10ch;
  margin: var(--gap-lg) 0 0;
  font-size: clamp(calc(var(--fs-display) * 2.6), 7.5vw, calc(var(--fs-display) * 4.5));
  font-weight: var(--weight-display);
  letter-spacing: calc(var(--tracking-title) * -5);
  line-height: .88;
}

.intro-copy h1 em {
  color: var(--hand-primary);
  font-style: normal;
}

.intro-text {
  max-width: 42rem;
  margin: var(--gap-xl) 0 0;
  color: var(--ink-dim);
  font-size: var(--fs-title);
  line-height: 1.75;
}

.test-gate {
  max-width: 48rem;
  margin-top: var(--gap-xl);
  overflow: hidden;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-card);
  box-shadow: var(--shadow-soft);
}

.test-gate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--gap) var(--gap-lg);
  border-bottom: var(--border-w) solid var(--line);
}

.test-gate-head > div {
  display: grid;
  gap: var(--gap-xs);
}

.test-gate-head span,
.test-signal-list li > span,
.test-signal-list li > b {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
}

.test-gate-head strong {
  font-size: var(--fs-body);
}

.test-gate-head > b {
  color: var(--hand-primary);
  font-family: var(--mono);
  font-size: var(--fs-title);
}

.test-signal-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.test-signal-list li {
  display: grid;
  gap: var(--gap-xs);
  min-width: 0;
  padding: var(--gap);
  border-right: var(--border-w) solid var(--line);
}

.test-signal-list li:last-child {
  border-right: 0;
}

.test-signal-list li > strong {
  overflow: hidden;
  font-size: var(--fs-mini);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-signal-list li[data-complete="true"] {
  background: color-mix(in srgb, var(--ok) 9%, transparent);
}

.test-signal-list li[data-complete="true"] > span,
.test-signal-list li[data-complete="true"] > b {
  color: var(--ok);
}

.test-gate > p {
  margin: 0;
  padding: var(--gap-sm) var(--gap-lg);
  border-top: var(--border-w) solid var(--line);
  color: var(--ink-dim);
  background: var(--surface-muted);
  font-size: var(--fs-mini);
  line-height: var(--lh-body);
}

.test-gate[data-state="passed"] {
  border-color: var(--ok);
  box-shadow: var(--shadow-ok);
}

.test-gate[data-state="passed"] .test-gate-head > b {
  color: var(--ok);
}

.intro-actions {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-top: var(--gap-xl);
}

.primary-button,
.secondary-button {
  min-height: var(--control-h-lg);
  padding: 0 var(--gap-lg);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: var(--weight-title);
  transition: transform var(--t), border-color var(--t), background var(--t), opacity var(--t), box-shadow var(--t);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  min-width: calc(var(--control-h-lg) * 3.6);
  color: var(--ink-invert);
  background: var(--accent-gradient);
  box-shadow: var(--shadow-soft);
}

.secondary-button {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface-control);
}

.primary-button:hover,
.secondary-button:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-raised);
}

.primary-button:active,
.secondary-button:active {
  transform: translateY(var(--hover-press));
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: default;
  opacity: var(--opacity-disabled);
  transform: none;
  box-shadow: none;
}

.button-spinner {
  display: none;
  width: var(--spinner-size);
  aspect-ratio: 1;
  border: var(--spinner-border) solid color-mix(in srgb, var(--ink-invert) 35%, transparent);
  border-top-color: var(--ink-invert);
  border-radius: var(--radius-pill);
  animation: spin var(--t-slow) linear infinite;
}

.async-control[data-state="busy"] .button-spinner {
  display: inline-block;
}

.privacy-note {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin: var(--gap-lg) 0 0;
  color: var(--ink-faint);
  font-size: var(--fs-mini);
}

.privacy-note span {
  color: var(--ok);
}

.intro-index {
  justify-self: end;
  padding-bottom: var(--gap);
  text-align: right;
}

.intro-index > span {
  color: var(--hand-secondary);
  font-family: var(--mono);
  font-size: clamp(calc(var(--fs-display) * 3), 11vw, calc(var(--fs-display) * 6));
  font-weight: var(--weight-display);
  letter-spacing: calc(var(--tracking-title) * -4);
  line-height: .75;
}

.intro-index p {
  margin: var(--gap-lg) 0 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  line-height: 1.6;
  text-transform: uppercase;
}

.tracking-console {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(var(--workspace-side-min), .4fr);
  overflow: hidden;
  min-height: 680px;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-raised);
}

.vision-stage {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  border-right: var(--border-w) solid var(--line);
  background: var(--camera-surface);
  isolation: isolate;
}

.vision-stage video,
.vision-stage canvas,
.effect-host,
.stage-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.effect-host {
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.effect-host > canvas,
.effect-surface-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.vision-stage video {
  z-index: 1;
  object-fit: cover;
  opacity: 0;
  transform: scaleX(-1);
  transition: opacity var(--t-slow);
}

.vision-stage[data-state="running"] video {
  opacity: 1;
}

.vision-stage canvas {
  z-index: 4;
  pointer-events: none;
}

.stage-grid {
  z-index: 2;
  background-image:
    linear-gradient(var(--camera-grid) var(--border-w), transparent var(--border-w)),
    linear-gradient(90deg, var(--camera-grid) var(--border-w), transparent var(--border-w));
  background-size: calc(var(--gap-xl) * 2) calc(var(--gap-xl) * 2);
  mask-image: linear-gradient(to bottom, var(--ink), transparent 88%);
  pointer-events: none;
}

.stage-header,
.stage-status {
  position: absolute;
  z-index: 6;
  top: var(--gap-lg);
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  color: var(--camera-ink);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-label);
}

.stage-header {
  right: var(--gap-lg);
  left: var(--gap-lg);
  justify-content: space-between;
}

.stage-status {
  right: var(--gap-lg);
  top: auto;
  bottom: var(--gap-lg);
  padding: var(--gap-sm) var(--gap);
  border: var(--border-w) solid var(--camera-line);
  border-radius: var(--radius-pill);
  background: var(--camera-overlay);
  backdrop-filter: blur(var(--gap));
}

.live-dot {
  width: var(--capsule-dot);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--ok);
  box-shadow: var(--glow-ok);
}

.stage-idle {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: var(--gap-xl);
  text-align: center;
  transition: opacity var(--t), transform var(--t);
}

.vision-stage[data-state="running"] .stage-idle {
  opacity: 0;
  pointer-events: none;
  transform: scale(.96);
}

.hand-glyph {
  display: grid;
  width: calc(var(--control-h-lg) * 2.2);
  aspect-ratio: 1;
  place-items: center;
  border: var(--border-w) solid var(--camera-line);
  border-radius: 50%;
  color: var(--hand-primary);
  background: var(--camera-overlay);
  font-size: calc(var(--fs-display) * 2.2);
  box-shadow: var(--shadow-overlay);
}

.stage-idle strong {
  margin-top: var(--gap-lg);
  color: var(--camera-ink);
  font-size: var(--fs-title);
}

.stage-idle p {
  margin: var(--gap-sm) 0 0;
  color: var(--camera-ink-dim);
  font-size: var(--fs-body);
}

.telemetry {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap-lg);
  background: var(--surface-card);
}

.telemetry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--control-h);
  padding-bottom: var(--gap);
  border-bottom: var(--border-w) solid var(--line);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-label);
}

.telemetry-head p {
  margin: 0;
}

.telemetry-head span {
  color: var(--accent-2);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.metric-card,
.pinch-panel,
.event-counter {
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-tile);
}

.metric-card {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--control-h-lg) * 2.2);
  padding: var(--gap);
}

.metric-card > span,
.pinch-panel span,
.event-counter span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
}

.metric-card > strong {
  margin-top: auto;
  color: var(--hand-primary);
  font-family: var(--mono);
  font-size: calc(var(--fs-display) * 2);
  line-height: 1;
}

.metric-card > strong i {
  margin-left: var(--gap-xs);
  color: var(--ink-faint);
  font-size: var(--fs-label);
  font-style: normal;
}

.metric-card > small {
  margin-top: var(--gap-sm);
  color: var(--ink-dim);
  font-size: var(--fs-mini);
}

.metric-wide {
  grid-column: 1 / -1;
  min-height: calc(var(--control-h-lg) * 1.8);
}

.metric-wide > strong {
  font-family: var(--font);
  font-size: var(--fs-display);
}

.pinch-panel {
  padding: var(--gap);
}

.pinch-panel > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pinch-panel strong {
  color: var(--hand-secondary);
  font-family: var(--mono);
  font-size: var(--fs-title);
}

.pinch-panel progress {
  width: 100%;
  height: var(--gap-sm);
  margin-top: var(--gap);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  appearance: none;
}

.pinch-panel progress::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.pinch-panel progress::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--hand-primary), var(--hand-secondary));
  transition: width var(--t);
}

.pinch-panel progress::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--hand-primary), var(--hand-secondary));
}

.pinch-panel p {
  margin: var(--gap) 0 0;
  color: var(--ink-dim);
  font-size: var(--fs-mini);
  line-height: var(--lh-body);
}

.event-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap) var(--gap-lg);
}

.event-counter strong {
  color: var(--hand-secondary);
  font-family: var(--mono);
  font-size: calc(var(--fs-display) * 1.5);
}

.runtime-message {
  margin: auto 0 0;
  padding: var(--gap);
  border-left: var(--spinner-border) solid var(--accent);
  color: var(--ink-dim);
  background: var(--surface-muted);
  font-size: var(--fs-mini);
  line-height: var(--lh-body);
}

.project-inspector {
  display: grid;
  gap: var(--gap);
  padding: var(--gap);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-tile);
}

.project-inspector-head,
.project-facts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}

.project-inspector-head > span,
.project-inspector-head > b,
.project-facts {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
}

.project-inspector-head > b {
  color: var(--accent-2);
  text-align: right;
}

.project-inspector > strong {
  font-size: var(--fs-title);
}

.project-interaction-hint {
  margin: 0;
  color: var(--ink-dim);
  font-size: var(--fs-mini);
  line-height: 1.55;
}

.visual-style-monitor {
  position: relative;
  display: grid;
  gap: var(--gap-sm);
  overflow: hidden;
  padding: var(--gap);
  border: var(--border-w) solid color-mix(in srgb, var(--accent-2) 48%, var(--line));
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      color-mix(in srgb, var(--accent-2) 5%, transparent) 3px,
      color-mix(in srgb, var(--accent-2) 5%, transparent) 4px
    ),
    var(--surface-muted);
}

.visual-style-monitor > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}

.visual-style-monitor span,
.visual-style-monitor b {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
}

.visual-style-monitor span {
  color: var(--ink-faint);
}

.visual-style-monitor b {
  color: var(--accent-2);
  text-align: right;
}

.visual-style-monitor p {
  margin: 0;
  color: var(--ink-dim);
  font-size: var(--fs-mini);
  line-height: var(--lh-body);
}

.project-inspector > a {
  color: var(--hand-primary);
  font-size: var(--fs-mini);
  font-weight: var(--weight-title);
  text-decoration: none;
}

.resource-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.resource-chips > span {
  padding: var(--gap-xs) var(--gap-sm);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-dim);
  background: var(--surface-muted);
  font-family: var(--mono);
  font-size: var(--fs-label);
}

.switch-dialog {
  width: min(calc(100% - (var(--shell-pad) * 2)), 680px);
  padding: 0;
  overflow: hidden;
  border: var(--border-w) solid var(--line-bright);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
}

.switch-dialog::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(var(--gap-sm));
}

.switch-dialog-shell {
  padding: var(--gap-xl);
}

.switch-dialog h2 {
  margin: var(--gap) 0 0;
  font-size: calc(var(--fs-display) * 1.8);
  letter-spacing: calc(var(--tracking-title) * -2);
}

.switch-dialog-shell > p:not(.eyebrow) {
  margin: var(--gap) 0 0;
  color: var(--ink-dim);
  line-height: var(--lh-body);
}

.switch-dialog-shell > p strong {
  color: var(--ink);
}

.switch-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--gap-xl);
}

.switch-resource-grid section {
  min-height: calc(var(--control-h-lg) * 2.4);
  padding: var(--gap);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-tile);
}

.switch-resource-grid section > span {
  display: block;
  margin-bottom: var(--gap);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
}

.switch-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap);
  margin-top: var(--gap-xl);
}

.async-control[data-state="error"] + .privacy-note,
.runtime-message[data-level="error"] {
  color: var(--err);
  border-color: var(--err);
}

.gesture-guide {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
  gap: calc(var(--gap-xl) * 2);
  padding: calc(var(--gap-xl) * 3) 0;
}

.guide-title h2 {
  max-width: 8ch;
  margin: var(--gap-lg) 0 0;
  font-size: calc(var(--fs-display) * 2.2);
  letter-spacing: calc(var(--tracking-title) * -3);
  line-height: var(--lh-tight);
}

.gesture-guide ol {
  margin: 0;
  padding: 0;
  border-top: var(--border-w) solid var(--line);
  list-style: none;
}

.gesture-guide li {
  display: grid;
  grid-template-columns: calc(var(--control-h-lg) * 1.1) 1fr;
  gap: var(--gap-lg);
  padding: var(--gap-xl) 0;
  border-bottom: var(--border-w) solid var(--line);
}

.gesture-guide li > span {
  color: var(--hand-primary);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: var(--weight-title);
}

.gesture-guide strong {
  font-size: var(--fs-title);
}

.gesture-guide li p {
  margin: var(--gap-sm) 0 0;
  color: var(--ink-dim);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.lab-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  width: min(calc(100% - (var(--shell-pad) * 2)), var(--shell-max));
  min-height: calc(var(--topbar-min) * 1.5);
  margin: 0 auto;
  border-top: var(--border-w) solid var(--line);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-label);
}

.lab-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
}

.lab-footer a {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color var(--t);
}

.lab-footer a:hover {
  color: var(--hand-primary);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  to { opacity: var(--opacity-busy); }
}

@media (max-width: 940px) {
  .lab-topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .topbar-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  .lab-intro {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: calc(var(--gap-xl) * 3);
  }

  .intro-index {
    display: none;
  }

  .tracking-console {
    grid-template-columns: 1fr;
  }

  .vision-stage {
    min-height: 58vw;
    border-right: 0;
    border-bottom: var(--border-w) solid var(--line);
  }

  .gesture-guide {
    grid-template-columns: 1fr;
  }

  .guide-title h2 {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .lab-topbar {
    padding-inline: var(--shell-pad);
  }

  .lab-brand small {
    display: none;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .launch-button {
    grid-column: 1 / -1;
  }

  .project-picker {
    min-width: 0;
  }

  .project-picker > span,
  .runtime-badge {
    display: none;
  }

  .project-picker select {
    width: 100%;
    max-width: none;
    border-left: 0;
    border-radius: var(--radius-pill);
  }

  .runtime-badge {
    padding-inline: var(--gap-sm);
  }

  .lab-intro {
    gap: var(--gap-xl);
    padding-block: calc(var(--gap-xl) * 2);
  }

  .intro-copy h1 {
    font-size: clamp(calc(var(--fs-display) * 2.3), 16vw, calc(var(--fs-display) * 3.5));
  }

  .intro-text {
    font-size: var(--fs-body);
  }

  .intro-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .test-signal-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .test-signal-list li:nth-child(2) {
    border-right: 0;
  }

  .test-signal-list li:nth-child(-n + 2) {
    border-bottom: var(--border-w) solid var(--line);
  }

  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .privacy-note {
    align-items: flex-start;
  }

  .tracking-console,
  .vision-stage {
    min-height: 74vh;
  }

  .tracking-console {
    min-height: 0;
  }

  .vision-stage {
    max-height: 680px;
  }

  .stage-header span:last-child {
    display: none;
  }

  .telemetry {
    padding: var(--gap);
  }

  .gesture-guide {
    gap: var(--gap-xl);
    padding-block: calc(var(--gap-xl) * 2);
  }

  .lab-footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--gap-lg);
  }

  .lab-footer nav {
    gap: var(--gap);
  }

  .switch-resource-grid {
    grid-template-columns: 1fr;
  }

  .switch-dialog-shell {
    padding: var(--gap-lg);
  }

  .switch-dialog-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* NEURAL FIELD / OBSIDIAN INSTRUMENT THEME */
:root {
  color-scheme: dark;
  --bg: rgb(2 4 6);
  --bg-deep: rgb(0 1 2);
  --surface: rgb(7 10 14);
  --surface-2: rgb(10 15 20);
  --surface-3: rgb(17 24 32);
  --surface-raised: rgb(5 8 12);
  --surface-glass: rgba(2, 5, 8, .91);
  --surface-muted: rgba(8, 13, 18, .8);
  --surface-card: linear-gradient(145deg, rgba(13, 20, 27, .92), rgba(3, 6, 9, .98));
  --surface-control: linear-gradient(180deg, rgba(18, 26, 34, .96), rgba(5, 9, 13, .98));
  --surface-tile: linear-gradient(145deg, rgba(14, 21, 28, .82), rgba(4, 8, 11, .98));
  --overlay: rgba(0, 2, 4, .86);
  --ink: rgb(244 248 251);
  --ink-dim: rgb(139 153 166);
  --ink-faint: rgb(82 96 107);
  --ink-invert: rgb(2 5 8);
  --line: rgba(157, 183, 203, .17);
  --line-soft: rgba(157, 183, 203, .09);
  --line-strong: rgb(114 183 255);
  --line-bright: rgba(194, 220, 238, .46);
  --accent: rgb(57 156 255);
  --accent-2: rgb(139 212 255);
  --accent-hi: rgb(213 242 255);
  --accent-lo: rgb(29 105 255);
  --accent-gradient: linear-gradient(110deg, rgb(228 247 255) 0%, rgb(112 197 255) 48%, rgb(43 131 255) 100%);
  --ok: rgb(158 255 0);
  --warn: rgb(244 255 82);
  --err: rgb(255 71 111);
  --focus: rgb(184 230 255);
  --hand-primary: rgb(155 221 255);
  --hand-secondary: rgb(77 140 255);
  --hand-active: rgb(242 255 84);
  --camera-surface: rgb(0 2 4);
  --camera-grid: rgba(120, 192, 255, .075);
  --camera-overlay: rgba(0, 4, 8, .76);
  --camera-line: rgba(172, 216, 244, .27);
  --camera-ink: rgb(236 248 255);
  --camera-ink-dim: rgba(218, 238, 250, .56);
  --camera-halo: rgba(60, 160, 255, .84);
  --font: "Avenir Next", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --mono: "SF Mono", "IBM Plex Mono", Menlo, monospace;
  --radius: 3px;
  --radius-sm: 2px;
  --radius-pill: 2px;
  --tracking-label: .13em;
}

html,
body {
  background: rgb(1 2 3);
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, transparent 0 49.96%, rgba(144, 203, 241, .035) 50%, transparent 50.04%),
    radial-gradient(circle at 72% 18%, rgba(38, 125, 217, .12), transparent 30%),
    rgb(1 2 3);
}

body::before {
  position: fixed;
  z-index: 200;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  content: "";
  opacity: .025;
  pointer-events: none;
}

.lab-topbar {
  min-height: 58px;
  padding-block: 8px;
  border-color: rgba(160, 202, 230, .14);
  background: rgba(1, 3, 5, .92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .38);
}

.brand-mark {
  width: 34px;
  border-color: rgba(210, 239, 255, .5);
  border-radius: 50%;
  color: rgb(0 16 27);
  background: rgb(201 239 255);
  box-shadow: 0 0 28px rgba(76, 174, 255, .28);
  font-family: var(--mono);
  font-size: 10px;
}

.lab-brand strong {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.lab-brand small {
  font-size: 8px;
  letter-spacing: .22em;
}

.project-picker {
  min-height: 34px;
  padding-left: 10px;
  border-color: rgba(158, 194, 219, .18);
  background: rgba(5, 9, 13, .85);
}

.project-picker > span {
  font-size: 8px;
}

.project-picker select {
  max-width: 204px;
  padding-inline: 10px 28px;
  color: rgb(220 236 245);
  background: rgba(10, 16, 21, .9);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .02em;
}

.launch-button,
.operator-toggle,
.runtime-badge {
  min-height: 34px;
}

.launch-button {
  padding-inline: 16px;
  border-color: rgba(207, 238, 255, .44);
  color: rgb(0 16 29);
  background: rgb(189 234 255);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 26px rgba(72, 174, 255, .12);
}

.preview-v2-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding-inline: 13px;
  border: 1px solid rgba(255, 83, 77, .46);
  border-radius: 2px;
  color: rgb(255 124 116);
  background: rgba(48, 10, 9, .52);
  box-shadow: inset 2px 0 rgb(255 75 71 / .8);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.preview-v2-link:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 113, 105, .82);
  color: rgb(255 226 223);
  background: rgba(74, 14, 12, .7);
}

.preview-v2-compact {
  display: none;
}

.operator-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(158, 194, 219, .22);
  border-radius: 2px;
  color: rgb(158 175 187);
  background: rgba(7, 11, 15, .9);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.operator-toggle:hover,
.operator-toggle[aria-expanded="true"] {
  border-color: rgba(139, 212, 255, .58);
  color: rgb(223 245 255);
}

.operator-toggle-glyph {
  display: flex;
  align-items: end;
  gap: 2px;
  width: 14px;
  height: 12px;
}

.operator-toggle-glyph i {
  width: 2px;
  height: 35%;
  background: currentColor;
}

.operator-toggle-glyph i:nth-child(2) { height: 100%; }
.operator-toggle-glyph i:nth-child(3) { height: 65%; }

.runtime-badge {
  padding-inline: 11px;
  border-color: rgba(158, 194, 219, .16);
  color: rgb(113 128 138);
  background: rgba(4, 8, 11, .88);
  font-size: 9px;
  letter-spacing: .08em;
}

.runtime-badge > span { width: 6px; }

.lab-intro {
  min-height: min(72vh, 700px);
}

.intro-copy h1 {
  max-width: 12ch;
  font-family: "Avenir Next Condensed", "DIN Condensed", sans-serif;
  font-weight: 500;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.intro-copy h1 em {
  color: rgb(141 207 255);
  text-shadow: 0 0 40px rgba(48, 145, 255, .25);
}

.eyebrow,
.test-gate-head span,
.test-signal-list li > span,
.test-signal-list li > b {
  font-family: var(--mono);
}

.test-gate {
  border-color: rgba(159, 195, 220, .18);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(93, 175, 230, .045) 1px, transparent 1px),
    linear-gradient(rgba(93, 175, 230, .045) 1px, transparent 1px),
    rgb(5 9 12);
  background-size: 24px 24px;
}

.tracking-console {
  position: relative;
  border-color: rgba(154, 196, 224, .2);
  border-radius: 2px;
  background: rgb(1 3 5);
  box-shadow: 0 32px 100px rgba(0, 0, 0, .65);
}

.vision-stage {
  background:
    radial-gradient(circle at 50% 50%, rgba(30, 95, 143, .12), transparent 52%),
    rgb(0 2 4);
}

.stage-optics {
  position: absolute;
  z-index: 5;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .78), transparent 18%, transparent 72%, rgba(0, 0, 0, .72)),
    linear-gradient(180deg, rgba(0, 0, 0, .38), transparent 22%, transparent 72%, rgba(0, 0, 0, .7)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(160, 210, 240, .014) 3px 4px);
  pointer-events: none;
}

.stage-optics::before,
.stage-optics::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.stage-optics::before {
  inset: 18px;
  border: 1px solid rgba(164, 210, 237, .08);
  clip-path: polygon(0 0, 13% 0, 13% 1px, 87% 1px, 87% 0, 100% 0, 100% 16%, calc(100% - 1px) 16%, calc(100% - 1px) 84%, 100% 84%, 100% 100%, 87% 100%, 87% calc(100% - 1px), 13% calc(100% - 1px), 13% 100%, 0 100%, 0 84%, 1px 84%, 1px 16%, 0 16%);
}

.stage-optics::after {
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(198, 230, 248, .22);
  border-left: 1px solid rgba(198, 230, 248, .22);
  transform: translate(-50%, -50%) rotate(45deg);
}

.stage-header {
  z-index: 8;
  top: 18px;
  right: 22px;
  left: 22px;
  color: rgba(200, 230, 248, .55);
  font-size: 8px;
  letter-spacing: .18em;
}

.stage-status {
  z-index: 9;
  right: 22px;
  bottom: 20px;
  border-radius: 2px;
  font-size: 8px;
  letter-spacing: .14em;
}

.neural-hud {
  position: absolute;
  z-index: 8;
  inset: 0;
  color: rgba(222, 241, 252, .72);
  font-family: var(--mono);
  pointer-events: none;
}

.neural-hud-identity {
  position: absolute;
  top: 54px;
  left: 22px;
  display: grid;
  gap: 4px;
}

.neural-hud-identity span,
.neural-hud-identity small,
.neural-phase span,
.neural-readout dt,
.neural-event span {
  color: rgba(160, 197, 220, .45);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .17em;
}

.neural-hud-identity strong {
  margin-top: 4px;
  color: rgba(225, 244, 255, .82);
  font-family: "Avenir Next Condensed", "DIN Condensed", sans-serif;
  font-size: clamp(25px, 3vw, 48px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .78;
}

.neural-hud-identity small {
  margin-top: 7px;
  color: rgba(123, 183, 222, .5);
}

.neural-phase {
  position: absolute;
  top: 50%;
  left: 22px;
  display: grid;
  gap: 7px;
  width: 174px;
  transform: translateY(-50%);
}

.neural-phase strong {
  color: rgb(231 246 255);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .14em;
  text-shadow: 0 0 18px rgba(84, 179, 255, .4);
}

.neural-phase > i {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(135, 186, 220, .16);
}

.neural-phase > i b {
  display: block;
  width: 0;
  height: 100%;
  background: rgb(185 232 255);
  box-shadow: 0 0 12px rgba(83, 180, 255, .8);
  transition: width 80ms linear;
}

.neural-readout {
  position: absolute;
  bottom: 24px;
  display: flex;
  gap: 1px;
  margin: 0;
}

.neural-readout-left { left: 22px; }
.neural-readout-right { right: 96px; }

.neural-readout > div {
  min-width: 96px;
  padding: 8px 10px 7px;
  border-top: 1px solid rgba(142, 199, 235, .26);
  background: linear-gradient(180deg, rgba(7, 19, 28, .35), transparent);
}

.neural-readout dt,
.neural-readout dd { margin: 0; }

.neural-readout dd {
  margin-top: 5px;
  color: rgba(226, 244, 255, .88);
  font-size: 14px;
  letter-spacing: .04em;
}

.neural-readout dd small {
  color: rgba(160, 197, 220, .42);
  font-size: 7px;
  letter-spacing: .12em;
}

.neural-event {
  position: absolute;
  right: 22px;
  bottom: 82px;
  display: grid;
  justify-items: end;
  gap: 4px;
  padding-right: 9px;
  border-right: 2px solid rgb(142 211 255);
}

.neural-event b {
  color: rgba(222, 242, 253, .72);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .09em;
}

body[data-phase="charging"] .neural-phase strong {
  color: rgb(242 255 88);
  text-shadow: 0 0 22px rgba(229, 255, 58, .5);
}

body[data-phase="triggered"] .neural-hud {
  animation: neural-impact 160ms steps(2, end);
}

.telemetry {
  border-left: 1px solid rgba(148, 196, 226, .16);
  background:
    linear-gradient(90deg, rgba(109, 193, 245, .025) 1px, transparent 1px),
    linear-gradient(rgba(109, 193, 245, .025) 1px, transparent 1px),
    rgba(3, 7, 10, .96);
  background-size: 18px 18px;
}

.telemetry-head {
  font-size: 8px;
  letter-spacing: .16em;
}

.telemetry-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.telemetry-head button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(150, 194, 221, .2);
  color: rgba(201, 229, 246, .64);
  background: rgb(7 12 16);
  cursor: pointer;
  font-family: var(--mono);
}

.metric-card,
.pinch-panel,
.event-counter,
.project-inspector {
  border-color: rgba(154, 198, 226, .15);
  border-radius: 2px;
  background: rgba(7, 12, 16, .8);
}

.metric-card > span,
.pinch-panel span,
.event-counter span,
.project-inspector-head > span,
.project-inspector-head > b,
.project-facts {
  font-size: 8px;
}

.metric-card > strong,
.event-counter strong {
  color: rgb(184 230 255);
  font-weight: 400;
}

.runtime-message {
  border-left-width: 1px;
  border-color: rgb(139 212 255);
  background: rgba(7, 13, 18, .78);
}

.visual-style-monitor {
  border-radius: 1px;
  background: rgba(2, 8, 12, .9);
}

body[data-project]:not([data-project="baseline"]) .lab-shell {
  width: 100%;
  max-width: none;
}

body[data-project]:not([data-project="baseline"]) .lab-intro,
body[data-project]:not([data-project="baseline"]) .gesture-guide,
body[data-project]:not([data-project="baseline"]) .lab-footer {
  display: none;
}

body[data-project]:not([data-project="baseline"]) .tracking-console {
  display: block;
  width: 100%;
  height: calc(100dvh - 58px);
  min-height: 560px;
  border: 0;
  border-radius: 0;
}

body[data-project]:not([data-project="baseline"]) .vision-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}

body[data-project]:not([data-project="baseline"]) .vision-stage video {
  opacity: 0;
  filter: brightness(.28) contrast(1.25) saturate(.55) hue-rotate(8deg);
}

body[data-project]:not([data-project="baseline"]) .vision-stage[data-state="running"] video {
  opacity: .48;
}

body[data-project]:not([data-project="baseline"]) #landmarkCanvas {
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(.7) brightness(1.25);
}

body[data-project]:not([data-project="baseline"]) .stage-grid {
  opacity: .42;
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, black 0 25%, transparent 82%);
}

body[data-project]:not([data-project="baseline"]) .effect-host {
  z-index: 4;
  filter: saturate(1.2) contrast(1.06);
}

body[data-project="hologram"] .vision-stage[data-state="running"] video {
  opacity: .2;
  filter: brightness(.2) contrast(1.48) saturate(.22) hue-rotate(155deg);
}

body[data-project="hologram"] .stage-grid {
  opacity: .18;
  background-size: 72px 72px;
}

body[data-project="hologram"] .effect-host {
  filter: saturate(1.38) contrast(1.12);
}

body[data-project]:not([data-project="baseline"]) .telemetry {
  position: absolute;
  z-index: 14;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  border: 1px solid rgba(163, 208, 237, .24);
  box-shadow: -20px 0 70px rgba(0, 0, 0, .5);
  transition: opacity 220ms ease, transform 340ms cubic-bezier(.16, 1, .3, 1), visibility 220ms;
}

body[data-project]:not([data-project="baseline"])[data-operator="closed"] .telemetry {
  visibility: hidden;
  opacity: 0;
  transform: translateX(calc(100% + 34px));
}

body[data-project="baseline"][data-operator="closed"] .tracking-console {
  grid-template-columns: 1fr;
}

body[data-project="baseline"][data-operator="closed"] .telemetry {
  display: none;
}

@keyframes neural-impact {
  0% { opacity: 1; transform: translate(0); }
  35% { opacity: .55; transform: translate(3px, -1px); }
  70% { opacity: .8; transform: translate(-2px, 1px); }
  100% { opacity: 1; transform: translate(0); }
}

@media (max-width: 1040px) {
  .lab-topbar { align-items: center; flex-wrap: nowrap; }
  .topbar-actions { gap: 6px; }
  .project-picker > span { display: none; }
  .project-picker { padding-left: 0; }
  .project-picker select { border-left: 0; }
  .runtime-badge { display: none; }
  .neural-readout > div { min-width: 82px; }
}

@media (max-width: 720px) {
  .lab-topbar {
    position: relative;
    flex-wrap: wrap;
    min-height: 108px;
  }

  .topbar-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .project-picker { grid-column: span 2; }
  .launch-button,
  .preview-v2-link,
  .operator-toggle { grid-column: span 2; }

  .preview-v2-link {
    min-height: 44px;
  }

  .preview-v2-full {
    display: none;
  }

  .preview-v2-compact {
    display: inline;
  }

  body[data-project]:not([data-project="baseline"]) .tracking-console {
    height: calc(100dvh - 108px);
  }

  .neural-hud-identity { top: 48px; }
  .neural-hud-identity strong { font-size: 26px; }
  .neural-phase { top: 42%; width: 138px; }
  .neural-readout { flex-direction: column; bottom: 18px; }
  .neural-readout > div { min-width: 116px; padding-block: 5px; }
  .neural-readout > div:nth-child(n + 3) { display: none; }
  .neural-readout-right { right: 70px; }
  .neural-event { right: 18px; bottom: 136px; }
}