.asset-panel,
.volume-inverse-panel {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  background: rgba(18, 21, 25, 0.82);
  box-shadow: var(--shadow);
}

.asset-controls,
.volumeinv-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.asset-three-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.asset-two-control {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.asset-actions {
  display: grid;
  grid-template-columns: 1.3fr repeat(2, minmax(84px, 0.7fr));
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}

.asset-actions button {
  min-height: 100%;
}

.factor-operator-strip {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr) auto minmax(150px, 1fr) auto minmax(150px, 1fr);
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px;
  background: rgba(9, 11, 14, 0.55);
}

.factor-operator-strip article {
  min-width: 0;
  border-left: 2px solid var(--teal);
  padding: 7px 9px;
  background: rgba(31, 36, 43, 0.44);
}

.factor-operator-strip article:nth-of-type(2) {
  border-left-color: var(--blue);
}

.factor-operator-strip article:nth-of-type(3) {
  border-left-color: var(--amber);
}

.factor-operator-strip article:nth-of-type(4) {
  border-left-color: var(--rose);
}

.factor-operator-strip span,
.factor-operator-strip strong {
  display: block;
}

.factor-operator-strip span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.factor-operator-strip strong {
  overflow-wrap: anywhere;
  font-size: 0.76rem;
  line-height: 1.35;
}

.factor-operator-strip > i {
  align-self: center;
  color: var(--teal);
  font-style: normal;
}

.lab-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 5px;
  background: rgba(9, 11, 14, 0.58);
}

.lab-workspace-tabs button {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.lab-workspace-tabs button.active {
  border-color: rgba(73, 208, 189, 0.42);
  color: var(--ink);
  background: rgba(73, 208, 189, 0.12);
}

.lab-tab-panel {
  display: none;
}

.lab-tab-panel.active {
  display: block;
}

.asset-render-grid,
.volumeinv-render-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.asset-render-grid canvas,
.volumeinv-render-grid canvas {
  aspect-ratio: 3 / 2;
}

.asset-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.asset-metrics article,
.tracker-metrics article {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  padding: 10px;
  background: rgba(16, 17, 20, 0.42);
}

.asset-metrics article:nth-child(2),
.asset-metrics article:nth-child(5) {
  border-left-color: var(--blue);
}

.asset-metrics article:nth-child(3),
.asset-metrics article:nth-child(6) {
  border-left-color: var(--amber);
}

.asset-metrics article:nth-child(4) {
  border-left-color: var(--rose);
}

.asset-metrics span,
.asset-metrics strong,
.tracker-metrics span,
.tracker-metrics strong {
  display: block;
}

.asset-metrics span,
.tracker-metrics span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.asset-metrics strong,
.tracker-metrics strong {
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

.asset-solve-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: 12px;
}

.asset-solve-bottom canvas,
.factor-map-summary canvas,
.volumeinv-loss-panel canvas {
  aspect-ratio: auto;
  max-height: 230px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.asset-parameter-bars {
  display: grid;
  gap: 5px;
}

.asset-parameter-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.45fr) minmax(120px, 1fr) 38px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  font-size: 0.68rem;
}

.asset-parameter-row > span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-parameter-row > div {
  position: relative;
  height: 7px;
  overflow: visible;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
}

.asset-parameter-row i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.asset-parameter-row b {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 13px;
  background: var(--amber);
}

.asset-parameter-row strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.factor-map-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.factor-map-grid canvas {
  aspect-ratio: 5 / 3;
}

.factor-map-summary {
  margin-top: 12px;
}

.asset-audit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.asset-audit-grid canvas {
  aspect-ratio: 13 / 6;
}

.asset-research-note {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.asset-research-note > div {
  min-width: 0;
  border-left: 3px solid var(--teal);
  padding: 10px 12px;
  background: rgba(31, 36, 43, 0.46);
}

.asset-research-note > div:nth-child(2) {
  border-left-color: var(--amber);
}

.asset-research-note strong {
  display: block;
  margin-bottom: 7px;
}

.asset-research-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.volumeinv-loss-panel {
  margin-top: 12px;
}

.volumeinv-evidence-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(440px, 1.18fr);
  gap: 12px;
}

.volumeinv-evidence-grid canvas {
  aspect-ratio: 13 / 6;
}

.tracker-metrics {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.4fr;
  gap: 8px;
  margin-top: 12px;
}

.tracker-metrics article:nth-child(2) {
  border-left-color: var(--rose);
}

.tracker-metrics article:nth-child(3) {
  border-left-color: var(--amber);
}

.volumeinv-posterior-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
}

.volumeinv-posterior-grid canvas {
  aspect-ratio: 13 / 11;
}

.volumeinv-uncertainty {
  grid-column: 2 / 4;
}

.volumeinv-uncertainty canvas {
  aspect-ratio: 13 / 5.5;
}

@media (max-width: 1380px) {
  .mode-group-minor {
    grid-column: 1 / -1;
  }

  .asset-controls,
  .volumeinv-controls {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }

  .asset-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  .mode-group-minor {
    grid-column: auto;
  }

  .asset-render-grid,
  .volumeinv-render-grid,
  .asset-audit-grid,
  .factor-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .asset-solve-bottom,
  .volumeinv-evidence-grid {
    grid-template-columns: 1fr;
  }

  .factor-operator-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .factor-operator-strip > i {
    display: none;
  }

  .volumeinv-posterior-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .volumeinv-uncertainty {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .asset-panel,
  .volume-inverse-panel {
    overflow: hidden;
  }

  .mode-group-flagship .mode-switcher,
  .asset-controls,
  .volumeinv-controls,
  .asset-render-grid,
  .volumeinv-render-grid,
  .asset-audit-grid,
  .factor-map-grid,
  .asset-research-note,
  .tracker-metrics,
  .factor-operator-strip,
  .volumeinv-posterior-grid {
    grid-template-columns: 1fr;
  }

  .asset-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lab-workspace-tabs {
    grid-template-columns: 1fr;
  }

  .asset-actions {
    min-height: 42px;
  }

  .volumeinv-uncertainty {
    grid-column: auto;
  }
}

:root {
  color-scheme: dark;
  --bg: #101114;
  --panel: #171a1f;
  --panel-2: #1f242b;
  --ink: #f1f4f1;
  --muted: #aab3b0;
  --line: #323943;
  --teal: #49d0bd;
  --amber: #f0ba5d;
  --rose: #ed7c91;
  --blue: #7ba7ff;
  --green: #9ce27a;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(73, 208, 189, 0.09), transparent 360px),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
}

a {
  color: inherit;
}

/* Canvases keep the aspect ratio they drew into; see canvas-aspect.js, which sets it from each
   canvas's own backing store. A stretch alignment resizes only the block axis and would defeat
   that, so canvases opt out of it. This changes nothing for a canvas whose height CSS pins
   explicitly, because stretch never applied to those in the first place. */
canvas {
  align-self: start;
}

.app-shell {
  width: min(1560px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0 40px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

/* The mode browser's whole responsive definition, in one place.
   It used to be spread over ten declarations at seven breakpoints -- 520, 680, 1040, 1120,
   1121, 1180, 1380 -- of which only three ever won anything; the rest were shadowed by later
   rules and had no effect at any width. Three states is all there ever was. Anything added
   here must stay here, because a fourth site elsewhere in this file is how the last four
   rounds of layout work were lost. */
.mode-browser {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(210px, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 1040px) {
  .mode-browser {
    grid-template-columns: 1fr;
  }
}


.mode-group {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px;
  background: rgba(18, 21, 25, 0.64);
}

/* Two tiers. Four showpieces get the main area; everything else is a compact sidebar list,
   because most of it is operators and validations that are worth having and not worth
   opening first. */
.mode-group-flagship {
  border-color: rgba(73, 208, 189, 0.34);
  background: linear-gradient(180deg, rgba(73, 208, 189, 0.09), rgba(18, 21, 25, 0.64));
}

.mode-group-flagship .mode-switcher {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
}

.mode-group-flagship .mode-card {
  min-height: 104px;
  padding: 14px 16px;
  border-color: rgba(73, 208, 189, 0.3);
}

.mode-group-flagship .mode-card strong {
  font-size: 1.16rem;
}

.mode-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  padding: 0 2px 6px;
}

.mode-group-heading span {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.mode-group-heading small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A grid that wraps, not a flex row that squeezes.
   Eight cards in one flex row each took an eighth of the width, which is narrower than the
   words on them -- "Mesh Reconstruction" and "Gaussian Splatting" were clipped mid-word. Cards
   now hold a readable minimum and wrap onto another row instead. */
.mode-switcher {
  display: grid;
  gap: 10px;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.mode-card span,
.mode-card strong,
.mode-card small {
  overflow-wrap: break-word;
  min-width: 0;
}

.mode-card,
.scenario-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: rgba(23, 26, 31, 0.82);
  text-align: left;
  cursor: pointer;
}

.mode-card {
  display: grid;
  gap: 4px;
  min-height: 72px;
  flex: 1 1 0;
  min-width: 0;
}

.mode-card span,
.scenario-card span {
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.mode-card strong,
.scenario-card strong {
  font-size: 1rem;
}

.mode-card strong {
  min-width: 0;
}

.mode-card small {
  color: var(--muted);
  line-height: 1.35;
}

.mode-card.active,
.scenario-card.active {
  border-color: rgba(73, 208, 189, 0.66);
  background: rgba(73, 208, 189, 0.13);
  box-shadow: inset 0 0 0 1px rgba(73, 208, 189, 0.12);
}

.mode-panel {
  display: none !important;
}

.mode-panel.active {
  display: block !important;
}

.workspace.mode-panel.active {
  display: grid !important;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #161b20;
  box-shadow: inset 0 0 0 1px rgba(73, 208, 189, 0.12), var(--shadow);
}

.brand-mark span {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.brand-mark span:nth-child(1) {
  width: 26px;
  height: 34px;
  left: 8px;
  top: 9px;
  background: rgba(73, 208, 189, 0.76);
  transform: rotate(-18deg);
}

.brand-mark span:nth-child(2) {
  width: 26px;
  height: 26px;
  right: 8px;
  top: 11px;
  background: rgba(240, 186, 93, 0.82);
}

.brand-mark span:nth-child(3) {
  width: 18px;
  height: 24px;
  right: 13px;
  bottom: 8px;
  background: rgba(237, 124, 145, 0.78);
  transform: rotate(24deg);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 1.62rem;
  line-height: 1.1;
}

h2 {
  margin-bottom: 0;
  font-size: 0.98rem;
  line-height: 1.2;
}

h3 {
  margin-bottom: 8px;
  font-size: 0.96rem;
}

.system-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.status-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--muted);
  background: rgba(23, 26, 31, 0.76);
}

.status-pill.ready {
  color: #dffcf4;
  border-color: rgba(73, 208, 189, 0.42);
}

.status-pill.warn {
  color: #ffe4b8;
  border-color: rgba(240, 186, 93, 0.52);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 16px;
  align-items: start;
}

body .mode-panel:not(.active) {
  display: none !important;
}

.stage,
.control-panel,
.test3d-panel,
.nlos3d-panel,
.mesh-recon-panel,
.nlos-panel,
.volume-panel,
.research-band {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(18, 21, 25, 0.82);
  box-shadow: var(--shadow);
}

.stage {
  overflow: hidden;
}

.stage-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(31, 36, 43, 0.72);
}

.toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.primary-button,
.ghost-button,
.file-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 0 13px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.primary-button {
  background: #d7fff6;
  color: #08201d;
  font-weight: 800;
}

.ghost-button,
.file-button {
  border: 1px solid var(--line);
  background: #171b21;
}

.primary-button:hover,
.ghost-button:hover,
.file-button:hover {
  transform: translateY(-1px);
}

.ghost-button.active,
.method-tab.active {
  border-color: rgba(73, 208, 189, 0.62);
  color: #eafffb;
  background: rgba(73, 208, 189, 0.13);
}

.file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.canvas-grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.72fr) minmax(240px, 1.15fr) minmax(160px, 0.72fr);
  gap: 14px;
  padding: 14px;
  align-items: start;
}

.canvas-panel {
  margin: 0;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.canvas-panel canvas {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #090b0e;
}

.canvas-panel-large canvas {
  border-color: rgba(73, 208, 189, 0.22);
}

figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

figcaption strong {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: right;
}

.inspection-audit-readout {
  display: grid;
  gap: 2px;
  justify-items: end;
}

.inspection-audit-readout span {
  display: block;
}

.inspection-audit-readout span:first-child {
  color: var(--teal);
  font-size: 0.7rem;
  letter-spacing: 0;
}
.method-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.method-tab {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(23, 26, 31, 0.86);
  cursor: pointer;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 14px 14px;
}

.chart-panel,
.panel-block,
.paper-trail {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(31, 36, 43, 0.62);
}

.chart-panel {
  min-width: 0;
  padding: 12px;
}

.chart-panel canvas {
  width: 100%;
  height: auto;
  display: block;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-heading h2,
.panel-heading span {
  min-width: 0;
}

.panel-heading span {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.control-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  position: sticky;
  top: 12px;
}

.panel-block {
  padding: 13px;
}

.range-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.range-row + .range-row {
  margin-top: 14px;
}

.range-row output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.range-row input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--teal);
}

.score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.score-table th {
  color: var(--muted);
  font-weight: 600;
  text-align: left;
}

.score-table th,
.score-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0;
}

.score-table td:nth-child(2),
.score-table td:nth-child(3) {
  font-variant-numeric: tabular-nums;
}

.score-table tr:last-child td {
  border-bottom: 0;
}

.score-table .active-row td:first-child {
  color: var(--teal);
  font-weight: 800;
}

.tape {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tape-node {
  min-height: 74px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: rgba(16, 17, 20, 0.58);
}

.tape-node span,
.param-bar span {
  color: var(--muted);
  font-size: 0.78rem;
}

.tape-node strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.param-bars {
  display: grid;
  gap: 8px;
}

.param-bar {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 52px;
  gap: 9px;
  align-items: center;
}

.bar-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.bar-fill {
  height: 100%;
  width: 50%;
  background: var(--teal);
}

.param-bar-3d .bar-fill {
  background: var(--blue);
}

.param-bar-3d i {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 14px;
  display: block;
  border-radius: 2px;
  background: var(--amber);
}

.test3d-panel {
  margin-top: 16px;
  padding: 14px;
}

.test3d-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.test3d-header h2 {
  margin-bottom: 8px;
  font-size: 1.14rem;
}

.test3d-header p {
  max-width: 860px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

.test3d-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.workspace-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 14px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(10, 12, 15, 0.58);
}

.workspace-tabs button {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.workspace-tabs button.active {
  border-color: rgba(73, 208, 189, 0.42);
  color: var(--ink);
  background: rgba(73, 208, 189, 0.12);
}

.perf-readout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
}

.perf-readout span {
  color: var(--muted);
}

.perf-readout strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

[data-d3-workspace-group].workspace-hidden {
  display: none !important;
}

.scenario-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.scenario-card {
  display: grid;
  gap: 5px;
}

.test3d-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.test3d-controls .panel-heading {
  align-items: flex-start;
  flex-wrap: wrap;
}

.test3d-controls .panel-heading span {
  white-space: normal;
}

.compact-panel {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  background: rgba(31, 36, 43, 0.52);
}

.compact-panel .range-row {
  font-size: 0.82rem;
}

.control-label {
  display: block;
  margin: 8px 0 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.segmented-control button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #171b21;
  cursor: pointer;
}

.segmented-control button.active {
  border-color: rgba(73, 208, 189, 0.62);
  color: #eafffb;
  background: rgba(73, 208, 189, 0.13);
}

.optimizer-method-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.optimizer-method-control button {
  padding: 5px 7px;
  font-size: 0.76rem;
  line-height: 1.2;
}

.backend-control {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.representation-three-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.representation-control-panel .panel-copy {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
}

.representation-hidden {
  display: none !important;
}

.gpu-mode-strip {
  margin-bottom: 14px;
}

.gpu-mode-grid {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.gpu-mode-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.gpu-mode-grid > span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0 10px;
  color: #dffcf4;
  background: rgba(16, 17, 20, 0.42);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.capture-panel {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
}

.capture-panel .panel-copy {
  margin: 0;
  font-size: 0.84rem;
}

.capture-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.capture-row .scenario-card {
  min-height: 66px;
  padding: 10px;
}

.capture-row .scenario-card strong {
  font-size: 0.88rem;
}

.test3d-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(180px, 0.62fr);
  gap: 14px;
  align-items: start;
}

.test3d-grid canvas {
  cursor: grab;
  touch-action: none;
}

.test3d-grid canvas.dragging {
  cursor: grabbing;
}

.polygon-pipeline {
  margin-bottom: 14px;
}

.polygon-pipeline-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.polygon-pipeline-flow article {
  min-width: 0;
  padding: 4px 2px;
}

.polygon-pipeline-flow span,
.polygon-pipeline-flow strong {
  display: block;
}

.polygon-pipeline-flow span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.polygon-pipeline-flow strong {
  overflow-wrap: anywhere;
  font-size: 0.86rem;
}

.polygon-pipeline-flow > i {
  color: rgba(73, 208, 189, 0.7);
  font-style: normal;
}

.polygon-slice-panel canvas {
  image-rendering: auto;
}

.medium-pipeline {
  margin-bottom: 14px;
  border-color: rgba(123, 167, 255, 0.22);
}

.medium3d-grid {
  margin-bottom: 14px;
}

.medium3d-grid .canvas-panel-large canvas {
  background: #0a1018;
}

.procedural-scenario-card {
  border-top-color: rgba(240, 186, 93, 0.42);
}

.procedural-scenario-card span {
  color: var(--amber);
}

.procedural-scenario-card.active span {
  color: #f8d99a;
}

.procedural-diagnostics {
  margin: 14px 0;
}

.procedural-ablation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.procedural-ablation-row > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.procedural-ablation-row .segmented-control {
  width: min(280px, 62%);
}

.procedural-diagnostics-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) minmax(190px, 0.58fr);
  gap: 14px;
  align-items: start;
}

.procedural-canvas-block {
  min-width: 0;
}

.procedural-canvas-block canvas {
  aspect-ratio: 52 / 21;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: #0a0e14;
}

.procedural-canvas-block > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.76rem;
}

.procedural-canvas-block strong {
  color: var(--ink);
  text-align: right;
}

.procedural-metrics {
  display: grid;
  gap: 0;
  margin: 0;
}

.procedural-metrics > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.procedural-metrics > div:last-child {
  border-bottom: 0;
}

.procedural-metrics dt {
  color: var(--muted);
  font-size: 0.76rem;
}

.procedural-metrics dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mesh-hybrid-panel {
  margin-top: 14px;
}

.mesh-hybrid-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(180px, 0.7fr) minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}

.texture-panel canvas {
  aspect-ratio: 13 / 8;
}

.mesh-hybrid-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mesh-hybrid-notes article {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  background: rgba(16, 17, 20, 0.36);
}

.mesh-hybrid-notes strong {
  display: block;
  margin-bottom: 6px;
}

.mesh-hybrid-notes p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.48;
}

/* ---------------------------------------------------------------------------
   "What's new" layer.

   Each recent change batch owns a hue. Elements a batch touched carry
   data-new="<batch>" and a data-new-note describing what was there before, so a
   reviewer can find every change without diffing, and can tell which pass it came
   from. Highlights are off by default -- they are a review aid, not chrome.
   --------------------------------------------------------------------------- */
:root {
  --new-honesty: #f0ba5d;
  --new-tests: #7fd06a;
  --new-repro: #49d0bd;
  --new-nlos: #a78bfa;
  --new-edge: #ed7c91;
  --new-fur: #7bd4ff;
  --new-specular: #f5a76c;
  --new-aniso: #9fe08a;
  --new-lobes: #ffd166;
  --new-transient: #66d9e8;
  --new-layered: #c98bd8;
  --new-fisher: #8ad9b0;
  --new-aperture: #f28ec2;
  --new-gn: #b8d96a;
  --new-ensemble: #ffa8a8;
  --new-splat: #7ad6ff;
  --new-aperture2d: #ffcf6b;
  --new-optics: #b39ddb;
  --new-shapes: #ff9f6b;
}

.whats-new-toggle {
  padding: 4px 12px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.1);
  color: #cbb8ff;
  font-family: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.whats-new-toggle:hover {
  border-color: rgba(167, 139, 250, 0.8);
  color: #e6dcff;
}

.whats-new-toggle[aria-pressed="true"] {
  background: rgba(167, 139, 250, 0.28);
  color: #f2ecff;
}

.whats-new-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  width: min(560px, 94vw);
  height: 100vh;
  overflow-y: auto;
  padding: 20px 24px 40px;
  background: rgba(11, 13, 16, 0.97);
  border-left: 1px solid rgba(167, 139, 250, 0.3);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.55);
}

.whats-new-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.whats-new-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.whats-new-head button {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 4px 9px;
  cursor: pointer;
}

.whats-new-intro {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.whats-new-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 14px;
  margin: 0 0 20px;
  padding: 12px;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.whats-new-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--batch-color, var(--muted));
  font-size: 0.76rem;
}

.whats-new-legend li[data-batch="honesty"] { --batch-color: var(--new-honesty); }
.whats-new-legend li[data-batch="tests"] { --batch-color: var(--new-tests); }
.whats-new-legend li[data-batch="repro"] { --batch-color: var(--new-repro); }
.whats-new-legend li[data-batch="nlos"] { --batch-color: var(--new-nlos); }
.whats-new-legend li[data-batch="edge"] { --batch-color: var(--new-edge); }
.whats-new-legend li[data-batch="fur"] { --batch-color: var(--new-fur); }
.whats-new-legend li[data-batch="specular"] { --batch-color: var(--new-specular); }
.whats-new-legend li[data-batch="aniso"] { --batch-color: var(--new-aniso); }
.whats-new-legend li[data-batch="lobes"] { --batch-color: var(--new-lobes); }
.whats-new-legend li[data-batch="transient"] { --batch-color: var(--new-transient); }
.whats-new-legend li[data-batch="layered"] { --batch-color: var(--new-layered); }
.whats-new-legend li[data-batch="fisher"] { --batch-color: var(--new-fisher); }
.whats-new-legend li[data-batch="aperture"] { --batch-color: var(--new-aperture); }
.whats-new-legend li[data-batch="gn"] { --batch-color: var(--new-gn); }
.whats-new-legend li[data-batch="ensemble"] { --batch-color: var(--new-ensemble); }
.whats-new-legend li[data-batch="splat"] { --batch-color: var(--new-splat); }
.whats-new-legend li[data-batch="aperture2d"] { --batch-color: var(--new-aperture2d); }
.whats-new-legend li[data-batch="optics"] { --batch-color: var(--new-optics); }
.whats-new-legend li[data-batch="shapes"] { --batch-color: var(--new-shapes); }

.whats-new-legend em {
  margin-left: auto;
  color: var(--muted);
  font-style: normal;
  font-size: 0.72rem;
}

.whats-new-batch {
  margin-bottom: 22px;
  padding-left: 12px;
  border-left: 3px solid var(--batch-color, rgba(255, 255, 255, 0.2));
}

.whats-new-batch[data-batch="honesty"] { --batch-color: var(--new-honesty); }
.whats-new-batch[data-batch="tests"] { --batch-color: var(--new-tests); }
.whats-new-batch[data-batch="repro"] { --batch-color: var(--new-repro); }
.whats-new-batch[data-batch="nlos"] { --batch-color: var(--new-nlos); }
.whats-new-batch[data-batch="edge"] { --batch-color: var(--new-edge); }
.whats-new-batch[data-batch="fur"] { --batch-color: var(--new-fur); }
.whats-new-batch[data-batch="specular"] { --batch-color: var(--new-specular); }
.whats-new-batch[data-batch="aniso"] { --batch-color: var(--new-aniso); }
.whats-new-batch[data-batch="lobes"] { --batch-color: var(--new-lobes); }
.whats-new-batch[data-batch="transient"] { --batch-color: var(--new-transient); }
.whats-new-batch[data-batch="layered"] { --batch-color: var(--new-layered); }
.whats-new-batch[data-batch="fisher"] { --batch-color: var(--new-fisher); }
.whats-new-batch[data-batch="aperture"] { --batch-color: var(--new-aperture); }
.whats-new-batch[data-batch="gn"] { --batch-color: var(--new-gn); }
.whats-new-batch[data-batch="ensemble"] { --batch-color: var(--new-ensemble); }
.whats-new-batch[data-batch="splat"] { --batch-color: var(--new-splat); }
.whats-new-batch[data-batch="aperture2d"] { --batch-color: var(--new-aperture2d); }
.whats-new-batch[data-batch="optics"] { --batch-color: var(--new-optics); }
.whats-new-batch[data-batch="shapes"] { --batch-color: var(--new-shapes); }

.whats-new-batch h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.86rem;
  color: var(--batch-color);
}

.whats-new-batch h3 small {
  color: var(--muted);
  font-weight: 400;
}

.whats-new-chip {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--batch-color);
  flex: 0 0 auto;
}

.whats-new-batch ul {
  margin: 0;
  padding-left: 16px;
}

.whats-new-batch li {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.55;
}

.whats-new-batch li strong {
  color: var(--text, #e6ece9);
}

.whats-new-batch li em {
  color: var(--batch-color);
  font-style: normal;
}

.whats-new-batch code {
  font-size: 0.94em;
  color: var(--batch-color);
}

/* Highlights on the elements themselves. Only drawn while the toggle is on. */
[data-new] { position: relative; }

body.whats-new-on [data-new] {
  outline: 1px dashed var(--mark-color);
  outline-offset: 3px;
  border-radius: 4px;
}

body.whats-new-on [data-new]::after {
  content: attr(data-new-label);
  position: absolute;
  top: -9px;
  right: 6px;
  z-index: 5;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--mark-color);
  color: #0b0d10;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

[data-new="honesty"] { --mark-color: var(--new-honesty); }
[data-new="tests"] { --mark-color: var(--new-tests); }
[data-new="repro"] { --mark-color: var(--new-repro); }
[data-new="nlos"] { --mark-color: var(--new-nlos); }
[data-new="edge"] { --mark-color: var(--new-edge); }
[data-new="fur"] { --mark-color: var(--new-fur); }
[data-new="specular"] { --mark-color: var(--new-specular); }
[data-new="aniso"] { --mark-color: var(--new-aniso); }
[data-new="lobes"] { --mark-color: var(--new-lobes); }
[data-new="transient"] { --mark-color: var(--new-transient); }
[data-new="layered"] { --mark-color: var(--new-layered); }
[data-new="fisher"] { --mark-color: var(--new-fisher); }
[data-new="aperture"] { --mark-color: var(--new-aperture); }
[data-new="gn"] { --mark-color: var(--new-gn); }
[data-new="ensemble"] { --mark-color: var(--new-ensemble); }
[data-new="splat"] { --mark-color: var(--new-splat); }
[data-new="aperture2d"] { --mark-color: var(--new-aperture2d); }
[data-new="optics"] { --mark-color: var(--new-optics); }
[data-new="shapes"] { --mark-color: var(--new-shapes); }

/* The before/after note, revealed on hover so the markup stays readable. */
body.whats-new-on [data-new-note]:hover::before {
  content: attr(data-new-note);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  z-index: 40;
  width: max(260px, 100%);
  padding: 8px 10px;
  border: 1px solid var(--mark-color);
  border-radius: 6px;
  background: rgba(9, 11, 14, 0.98);
  color: var(--text, #e6ece9);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  pointer-events: none;
}

.seed-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.seed-row label {
  color: var(--muted);
  font-size: 0.78rem;
}

.seed-row input {
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(9, 11, 14, 0.72);
  color: var(--text, #e6ece9);
  font-family: inherit;
  font-size: 0.8rem;
}

.seed-row button,
.wide-button {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(24, 26, 30, 0.9);
  color: var(--text, #e6ece9);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.seed-row button:hover,
.wide-button:hover {
  border-color: rgba(73, 208, 189, 0.5);
}

.wide-button {
  width: 100%;
}

.seed-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

/* Scope note printed under a metric grid: states what the numbers above are and are not. */
.claim-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid rgba(240, 186, 93, 0.55);
  border-radius: 8px;
  background: rgba(16, 17, 20, 0.36);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.bsdf-learning-panel {
  margin-top: 14px;
}

.bsdf-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.bsdf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.bsdf-grid canvas {
  aspect-ratio: 15 / 11;
}

.pipeline-strip {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.78rem;
}

.pipeline-strip span {
  min-width: 0;
  text-align: center;
}

.pipeline-strip i {
  height: 1px;
  display: block;
  background: linear-gradient(90deg, rgba(73, 208, 189, 0.18), rgba(73, 208, 189, 0.82));
}

.capture-inspector {
  margin-top: 14px;
}

.capture-inspector-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.capture-inspector canvas {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #090b0e;
}

.capture-preview-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.capture-view-card {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 9px;
  background: rgba(16, 17, 20, 0.42);
}

.capture-view-card canvas {
  margin-bottom: 8px;
  aspect-ratio: 1 / 1;
}

.capture-view-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.82rem;
}

.capture-view-card span,
.capture-view-card code {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.38;
}

.capture-view-card code {
  color: #dffcf4;
  font-family: inherit;
}

.capture-view-card .bias-line {
  color: #ffe4b8;
}

.test3d-bottom {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
  gap: 14px;
  margin-top: 14px;
}
.objective-router {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0 14px;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}

.objective-router > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
}

.objective-router > div:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.objective-router span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.objective-router strong {
  color: var(--text);
  font-size: 0.88rem;
}

.objective-router small {
  color: var(--muted);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}


.optimizer-panel canvas {
  min-height: 180px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  background: #11151a;
}

.optimizer-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 10px 0 2px;
  color: var(--muted);
  font-size: 0.72rem;
}

.optimizer-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.optimizer-legend i {
  width: 18px;
  height: 2px;
  display: inline-block;
  background: var(--teal);
}

.optimizer-legend .appearance-line {
  background: #f0ba5d;
}

.optimizer-legend .update-line {
  background: #ed7c91;
}

.optimizer-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.optimizer-facts > div {
  min-width: 0;
  padding: 9px 10px 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.optimizer-facts > div:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.optimizer-facts > div:nth-child(even) {
  padding-left: 10px;
}

.optimizer-facts span,
.optimizer-facts strong {
  display: block;
}

.optimizer-facts span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.optimizer-facts strong {
  color: #eef5f2;
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.optimizer-schedule {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}
.pathspace-panel {
  min-height: 100%;
}

.pathspace-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pathspace-flow article {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  background: rgba(16, 17, 20, 0.38);
}

.pathspace-flow strong {
  display: block;
  margin-bottom: 6px;
}

.pathspace-flow span {
  display: block;
  margin-bottom: 8px;
  color: var(--teal);
  font-size: 0.86rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pathspace-flow p {
  margin: 0;
  color: var(--muted);
  line-height: 1.48;
}

.panel-copy {
  margin: -2px 0 12px;
  color: var(--muted);
  line-height: 1.5;
}

.nlos3d-panel,
.mesh-recon-panel {
  margin-top: 16px;
  padding: 14px;
}

.nlos3d-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(240px, 0.9fr) minmax(210px, 0.68fr) minmax(210px, 0.68fr) auto;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
}

.nlos3d-controls .segmented-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nlos3d-controls .nlos3d-target-control {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nlos3d-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: center;
  min-width: 220px;
}

.nlos3d-actions .primary-button {
  grid-column: 1 / -1;
}

.nlos3d-operator-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr) 18px) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding: 10px 2px;
}

.nlos3d-operator-strip article {
  min-width: 0;
  padding: 2px 9px;
}

.nlos3d-operator-strip span,
.nlos3d-operator-strip strong {
  display: block;
}

.nlos3d-operator-strip span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.nlos3d-operator-strip strong {
  overflow-wrap: anywhere;
  font-size: 0.8rem;
  line-height: 1.35;
}

.nlos3d-operator-strip > i {
  color: var(--teal);
  font-size: 1rem;
  font-style: normal;
  text-align: center;
}

.nlos3d-acquisition-strip {
  display: grid;
  grid-template-columns: minmax(250px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(9, 12, 15, 0.72);
}

.nlos3d-acquisition-copy span,
.nlos3d-acquisition-copy strong,
.nlos3d-acquisition-copy small {
  display: block;
}

.nlos3d-acquisition-copy span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.nlos3d-acquisition-copy strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.nlos3d-acquisition-copy small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.38;
}

.nlos3d-acquisition-strip canvas {
  width: 100%;
  height: 74px;
  display: block;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: #090b0e;
}

.nlos3d-viewport-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(380px, 0.82fr);
  gap: 12px;
}

.nlos3d-viewport {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: #090b0e;
}

.nlos3d-viewport canvas {
  width: 100%;
  height: clamp(420px, 48vh, 620px);
  display: block;
  cursor: grab;
  touch-action: none;
}

.nlos3d-viewport canvas:active {
  cursor: grabbing;
}

.nlos3d-projection-inset {
  position: absolute;
  right: 10px;
  bottom: 54px;
  width: clamp(138px, 29%, 196px);
  overflow: hidden;
  border: 1px solid rgba(190, 247, 234, 0.34);
  border-radius: 6px;
  background: rgba(7, 10, 13, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.nlos3d-projection-inset > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.nlos3d-projection-inset strong {
  color: var(--teal-pale);
  font-variant-numeric: tabular-nums;
}

.nlos3d-viewport .nlos3d-projection-inset canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  cursor: default;
  image-rendering: pixelated;
  touch-action: auto;
}

.nlos3d-viewport .nlos3d-projection-inset canvas:active {
  cursor: default;
}

.nlos3d-viewport figcaption {
  min-height: 42px;
  padding: 9px 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #14181d;
}

.viewport-hud {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.viewport-hud span {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 6px 8px;
  overflow: hidden;
  color: #e9f4f1;
  background: rgba(9, 11, 14, 0.82);
  font-size: 0.72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transport-legend {
  position: absolute;
  bottom: 52px;
  left: 10px;
  display: flex;
  max-width: calc(100% - 20px);
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 6px 8px;
  color: rgba(239, 244, 242, 0.86);
  background: rgba(9, 11, 14, 0.84);
  font-size: 0.66rem;
  font-weight: 700;
  pointer-events: none;
}

.transport-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.transport-legend b {
  font: inherit;
}

.transport-legend i {
  width: 16px;
  height: 2px;
  display: inline-block;
  background: var(--teal);
}

.transport-legend .direct {
  background: var(--coral);
}

.transport-legend .indirect {
  background: var(--amber);
}

.nlos3d-progress {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) 52px;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.8rem;
}

.nlos3d-progress > div {
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: #272d34;
}

.nlos3d-progress i {
  width: 0;
  height: 100%;
  display: block;
  background: var(--teal);
  transition: width 90ms linear;
}

.nlos3d-progress strong {
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nlos3d-diagnostics,
.mesh-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.nlos3d-diagnostics article,
.mesh-metric-grid article {
  min-width: 0;
  border-left: 3px solid var(--teal);
  padding: 8px 11px;
  background: rgba(16, 17, 20, 0.34);
}

.nlos3d-diagnostics article:nth-child(2),
.mesh-metric-grid article:nth-child(2) {
  border-left-color: var(--blue);
}

.nlos3d-diagnostics article:nth-child(3),
.mesh-metric-grid article:nth-child(3) {
  border-left-color: var(--green);
}

.nlos3d-diagnostics article:nth-child(4),
.mesh-metric-grid article:nth-child(4) {
  border-left-color: var(--amber);
}

.nlos3d-diagnostics span,
.nlos3d-diagnostics strong,
.mesh-metric-grid span,
.mesh-metric-grid strong {
  display: block;
}

.nlos3d-diagnostics span,
.mesh-metric-grid span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.nlos3d-diagnostics strong,
.mesh-metric-grid strong {
  overflow-wrap: anywhere;
  font-size: 0.86rem;
}

.nlos3d-signal-panel {
  margin-top: 12px;
}

.nlos3d-signal-panel canvas {
  aspect-ratio: 60 / 11;
  width: auto;
  max-width: 100%;
  max-height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: #090b0e;
}

.nlos3d-truth-policy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 0.7fr);
  gap: 8px 12px;
  align-items: baseline;
  margin-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 9px;
  font-size: 0.72rem;
}

.nlos3d-truth-policy span {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
}

.nlos3d-truth-policy strong {
  overflow-wrap: anywhere;
}

.mesh-lab-controls {
  display: grid;
  grid-template-columns: minmax(320px, 1.25fr) minmax(230px, 0.72fr) minmax(230px, 0.72fr);
  gap: 10px;
  margin-bottom: 14px;
}

.mesh-lab-controls .segmented-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mesh-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mesh-evidence-grid canvas {
  aspect-ratio: 28 / 13;
}

.mesh-recon-panel .mesh-hybrid-panel {
  margin-top: 14px;
}

.mesh-metric-grid {
  margin-top: 12px;
}

.mesh-technique-panel {
  margin-top: 14px;
}

.mesh-technique-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mesh-technique-grid article {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 12px;
  background: rgba(16, 17, 20, 0.36);
}

.mesh-technique-grid strong,
.mesh-technique-grid span {
  display: block;
}

.mesh-technique-grid span {
  margin: 5px 0 8px;
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 800;
}

.mesh-technique-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.48;
}

.research-band {
  margin-top: 16px;
  padding: 18px;
}

.volume-panel {
  margin-top: 16px;
  padding: 14px;
}

.nlos-panel {
  margin-top: 16px;
  padding: 14px;
}

.nlos-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.nlos-mode-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nlos-target-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nlos-stage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.nlos-stage-grid canvas {
  aspect-ratio: 36 / 25;
}

.nlos-diagnostics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.nlos-diagnostics article {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  background: rgba(16, 17, 20, 0.38);
}

.nlos-diagnostics span,
.nlos-diagnostics strong {
  display: block;
}

.nlos-diagnostics span {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.nlos-diagnostics strong {
  overflow-wrap: anywhere;
  font-size: 0.86rem;
}

.nlos-comparison {
  margin-top: 14px;
}

.comparison-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.comparison-columns article {
  border-left: 3px solid var(--blue);
  padding-left: 12px;
}

.comparison-columns article:nth-child(2) {
  border-left-color: var(--teal);
}

.comparison-columns article:nth-child(3) {
  border-left-color: var(--amber);
}

.comparison-columns strong {
  display: block;
  margin-bottom: 6px;
}

.comparison-columns p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.volume-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
}

.volume-notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.volume-notes article {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  background: rgba(31, 36, 43, 0.48);
}

.volume-notes p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.research-copy {
  max-width: 860px;
  margin-bottom: 16px;
}

.research-copy h2 {
  margin-bottom: 8px;
  font-size: 1.18rem;
}

.research-copy p,
.research-grid p {
  color: var(--muted);
  line-height: 1.58;
}

.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.research-grid article {
  min-height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  background: rgba(31, 36, 43, 0.48);
}

.runtime-grid article:nth-child(1) {
  border-color: rgba(123, 167, 255, 0.26);
}

.runtime-grid article:nth-child(2) {
  border-color: rgba(156, 226, 122, 0.24);
}

.runtime-grid article:nth-child(3) {
  border-color: rgba(240, 186, 93, 0.24);
}

.frontier-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 14px;
  background: rgba(31, 36, 43, 0.48);
}

.capability-ladder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.capability-ladder article {
  border-left: 3px solid var(--teal);
  padding: 2px 12px 2px 13px;
}

.capability-ladder article:nth-child(2) {
  border-left-color: var(--blue);
}

.capability-ladder article:nth-child(3) {
  border-left-color: var(--amber);
}

.capability-ladder strong {
  display: block;
  margin-bottom: 6px;
}

.capability-ladder p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.52;
}

.technique-table-wrap {
  overflow-x: auto;
}

.technique-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.technique-table th,
.technique-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

.technique-table th {
  color: var(--muted);
  font-weight: 700;
}

.technique-table td {
  color: #dce6e2;
}

.technique-table td:first-child {
  color: var(--ink);
  font-weight: 800;
}

.technique-table tr:last-child td {
  border-bottom: 0;
}

.frontier-grid article:nth-child(1) {
  border-color: rgba(73, 208, 189, 0.24);
}

.frontier-grid article:nth-child(2) {
  border-color: rgba(240, 186, 93, 0.24);
}

.frontier-grid article:nth-child(3) {
  border-color: rgba(123, 167, 255, 0.24);
}

.frontier-grid article:nth-child(4) {
  border-color: rgba(237, 124, 145, 0.24);
}

.representation-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.representation-card {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: rgba(16, 17, 20, 0.42);
}

.representation-card canvas {
  width: 100%;
  aspect-ratio: 22 / 15;
  height: auto;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 10px;
  background: #0d1116;
}

.representation-card h3 {
  margin-bottom: 6px;
}

.representation-card p {
  margin-bottom: 10px;
  color: var(--muted);
  line-height: 1.48;
}

.representation-card dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.representation-card dt {
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.representation-card dd {
  margin: 0 0 5px;
  color: #dce6e2;
  line-height: 1.42;
}

.research-matrix td:first-child {
  color: var(--teal);
}

.protocol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.protocol-grid article {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  background: rgba(16, 17, 20, 0.36);
}

.protocol-grid strong {
  display: block;
  margin-bottom: 7px;
}

.protocol-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.52;
}

.paper-trail {
  padding: 14px;
}

.paper-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.paper-list a {
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  color: #e9f4f1;
  background: rgba(16, 17, 20, 0.38);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.paper-list a:hover {
  border-color: rgba(73, 208, 189, 0.46);
}

.transport-workbench {
  grid-column: 1 / -1;
  min-width: 0;
}

.transport-header {
  margin-bottom: 12px;
}

.transport-header > div {
  max-width: 780px;
}

.differential-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(250px, 0.9fr) minmax(220px, 0.72fr) auto;
  gap: 10px;
  align-items: stretch;
}

.differential-controls .segmented-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.differential-contract {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.differential-contract strong,
.differential-contract small {
  display: block;
}

.differential-contract strong {
  color: var(--text);
  font-size: 0.9rem;
}

.differential-contract small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.35;
}

.differential-actions {
  display: grid;
  grid-template-columns: minmax(150px, 1fr);
  gap: 8px;
  min-width: 170px;
}

.transport-scene-copy {
  margin: 10px 0 12px;
}

.diff-backend-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.diff-backend-card {
  position: relative;
  min-width: 0;
  min-height: 104px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 11px 12px;
  overflow: hidden;
  background: rgba(20, 23, 28, 0.72);
  color: var(--text);
  text-align: left;
}

.diff-backend-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--backend-color);
  content: "";
  opacity: 0.58;
}

.diff-backend-card:hover,
.diff-backend-card.active {
  border-color: color-mix(in srgb, var(--backend-color) 58%, transparent);
  background: color-mix(in srgb, var(--backend-color) 9%, rgba(20, 23, 28, 0.92));
}

.diff-backend-card span,
.diff-backend-card strong,
.diff-backend-card small,
.diff-backend-card i {
  display: block;
  overflow-wrap: anywhere;
}

.diff-backend-card span {
  color: var(--backend-color);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.diff-backend-card strong {
  margin-top: 7px;
  color: #f1f6f4;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.diff-backend-card small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.diff-backend-card i {
  margin-top: 5px;
  color: #bac4c1;
  font-size: 0.69rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.differential-primary-grid,
.differential-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.differential-primary-grid canvas,
.differential-analysis-grid canvas,
.differential-race-panel canvas {
  display: block;
  width: 100%;
  height: auto;
}

.differential-primary-grid .canvas-panel,
.differential-analysis-grid .canvas-panel {
  min-width: 0;
}

.differential-method-panel,
.differential-race-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px;
  background: rgba(20, 23, 28, 0.62);
}

.differential-facts {
  margin-top: 2px;
}

.diff-audit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.diff-audit-grid article {
  min-width: 0;
  padding: 10px 8px 2px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.diff-audit-grid article:last-child {
  border-right: 0;
}

.diff-audit-grid span,
.diff-audit-grid strong {
  display: block;
}

.diff-audit-grid span {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.diff-audit-grid strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.differential-race-panel {
  margin-bottom: 10px;
}

.differential-building-blocks {
  margin-bottom: 10px;
}

.transport-paper-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.transport-paper-links a {
  display: flex;
  min-height: 48px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 9px 10px;
  background: rgba(12, 15, 18, 0.46);
  color: #a8dcd3;
  font-size: 0.74rem;
  line-height: 1.35;
  text-decoration: none;
}

.transport-paper-links a:hover {
  border-color: rgba(73, 208, 189, 0.46);
  color: #dff8f2;
}
.orbit-audit-panel {
  margin-top: 10px;
}

.orbit-audit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 12px;
  align-items: stretch;
}

.orbit-audit-grid canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: #11151a;
}

.orbit-audit-summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.orbit-audit-summary .panel-copy {
  margin: 0 0 10px;
}

.orbit-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.orbit-metric-grid article {
  min-width: 0;
  padding: 10px 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.orbit-metric-grid article:last-child {
  border-right: 0;
}

.orbit-metric-grid span,
.orbit-metric-grid strong {
  display: block;
}

.orbit-metric-grid span {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.orbit-metric-grid strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.orbit-audit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.orbit-policy {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.42;
}
@media (max-width: 1180px) {
  .mode-group-minor {
    grid-column: 1 / -1;
  }

  .mode-group-minor .mode-card {
    min-height: 58px;
  }
}

@media (max-width: 1120px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .control-panel {
    position: static;
  }

  .test3d-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mode-group-minor {
    grid-column: auto;
  }

  .nlos3d-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .nlos3d-actions .primary-button {
    grid-column: auto;
  }

  .nlos3d-operator-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
  }

  .nlos3d-operator-strip article {
    border-left: 2px solid rgba(73, 208, 189, 0.45);
    padding: 7px 10px;
  }

  .nlos3d-operator-strip > i {
    display: none;
  }

  .nlos3d-truth-policy {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .polygon-pipeline-flow {
    grid-template-columns: 1fr;
  }

  .polygon-pipeline-flow > i {
    display: none;
  }

  .procedural-diagnostics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .differential-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .differential-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .diff-backend-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .transport-paper-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .differential-primary-grid,
  .differential-analysis-grid {
    grid-template-columns: 1fr;
  }


}

@media (max-width: 820px) {
  .orbit-audit-grid {
    grid-template-columns: 1fr;
  }

  .app-shell {
    width: min(100% - 20px, 1560px);
    padding-top: 12px;
  }

  .topbar,
  .stage-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .scenario-row {
    grid-template-columns: 1fr;
  }

  .system-status,
  .toolbar-group {
    justify-content: flex-start;
  }

  .mode-card {
    min-height: 68px;
    padding: 10px;
  }

  .mode-card strong {
    font-size: 0.88rem;
  }

  .mode-card small {
    display: none;
  }

  .canvas-grid,
  .test3d-grid,
  .procedural-diagnostics-grid,
  .test3d-controls,
  .test3d-bottom,
  .objective-router,
  .optimizer-facts,
  .gpu-mode-grid,
  .nlos3d-controls,
  .nlos3d-viewport-grid,
  .nlos3d-diagnostics,
  .mesh-lab-controls,
  .mesh-evidence-grid,
  .mesh-metric-grid,
  .mesh-technique-grid,
  .mesh-hybrid-grid,
  .mesh-hybrid-notes,
  .bsdf-toolbar,
  .bsdf-grid,
  .nlos-controls,
  .nlos-stage-grid,
  .nlos-diagnostics,
  .comparison-columns,
  .capture-inspector-grid,
  .pathspace-flow,
  .capture-row,
  .capture-preview-strip,
  .chart-grid,
  .research-grid,
  .representation-grid,
  .protocol-grid,
  .capability-ladder,
  .paper-list,
  .volume-grid,
  .volume-notes {
    grid-template-columns: 1fr;
  }
  .objective-router > div:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .optimizer-facts > div:nth-child(odd) {
    border-right: 0;
  }

  .optimizer-facts > div:nth-child(even) {
    padding-left: 0;
  }

  .method-tabs {
    grid-template-columns: 1fr;
  }

  .panel-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .panel-heading span {
    white-space: normal;
  }

  .frontier-panel,
  .research-band,
  .test3d-panel,
  .nlos3d-panel,
  .mesh-recon-panel,
  .nlos-panel,
  .volume-panel,
  .stage,
  .control-panel {
    overflow: hidden;
  }

  .mode-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mode-group-minor .mode-switcher {
    grid-template-columns: 1fr;
  }

  .nlos3d-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }

  .nlos3d-actions .primary-button {
    grid-column: auto;
  }

  .nlos3d-operator-strip {
    grid-template-columns: 1fr;
  }

  .nlos3d-viewport canvas {
    height: 330px;
  }

  .nlos3d-progress {
    grid-template-columns: 90px minmax(0, 1fr) 44px;
  }

  .technique-table {
    min-width: 0;
  }

  .technique-table thead {
    display: none;
  }

  .technique-table,
  .technique-table tbody,
  .technique-table tr,
  .technique-table td {
    display: block;
    width: 100%;
  }

  .technique-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 0;
  }

  .technique-table tr:last-child {
    border-bottom: 0;
  }

  .technique-table td {
    border-bottom: 0;
    padding: 7px 0;
  }

  .technique-table td::before {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .technique-table td:nth-child(1)::before {
    content: "Family";
  }

  .technique-table td:nth-child(2)::before {
    content: "Recovers";
  }

  .technique-table td:nth-child(3)::before {
    content: "Why it matters";
  }

  .technique-table td:nth-child(4)::before {
    content: "Browser path";
  }
  .diff-backend-cards,
  .diff-audit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diff-audit-grid article:nth-child(2) {
    border-right: 0;
  }

  .differential-controls,
  .transport-paper-links {
    grid-template-columns: 1fr;
  }

  .differential-actions {
    grid-column: auto;
  }


}

@media (max-width: 520px) {
  .orbit-metric-grid,
  .orbit-audit-actions {
    grid-template-columns: 1fr;
  }


  .brand {
    align-items: flex-start;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
  }

  h1 {
    font-size: 1.34rem;
  }

  .primary-button,
  .ghost-button,
  .file-button {
    flex: 1 1 140px;
  }

  .tape {
    grid-template-columns: 1fr;
  }

  .mode-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mode-card {
    min-height: 58px;
    padding: 8px;
    width: 100%;
  }

  .mode-card span {
    font-size: 0.66rem;
  }

  .mode-card strong {
    font-size: 0.78rem;
  }

  .mode-card small {
    display: none;
  }

  .test3d-header {
    flex-direction: column;
  }

  .workspace-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pipeline-strip {
    grid-template-columns: 1fr;
  }

  .pipeline-strip i {
    width: 1px;
    height: 12px;
    justify-self: center;
  }

  .test3d-actions {
    width: 100%;
    justify-content: stretch;
  }

  .nlos3d-actions {
    grid-template-columns: 1fr;
  }

  .nlos3d-acquisition-strip {
    grid-template-columns: 1fr;
  }

  .nlos3d-acquisition-strip canvas {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 0;
  }

  .nlos3d-viewport canvas {
    height: 280px;
  }

  .nlos3d-viewport figcaption {
    display: grid;
    justify-content: stretch;
    gap: 3px;
  }

  .nlos3d-viewport figcaption strong {
    text-align: left;
  }

  .transport-legend {
    right: 8px;
    bottom: 82px;
    left: 8px;
    gap: 5px 9px;
  }

  .nlos3d-projection-inset {
    bottom: 82px;
  }

  .nlos3d-truth-policy {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .diff-backend-cards,
  .diff-audit-grid,
  .differential-actions {
    grid-template-columns: 1fr;
  }

  .diff-audit-grid article {
    border-right: 0;
  }


}

.bsdf-material-control {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bsdf-model-note {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  gap: 12px;
  margin-bottom: 12px;
  border-left: 3px solid var(--amber);
  padding: 10px 12px;
  background: rgba(16, 17, 20, 0.42);
}

.bsdf-model-note strong {
  display: block;
  margin-bottom: 5px;
}

.bsdf-model-note p,
.bsdf-model-note span {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .bsdf-model-note {
    grid-template-columns: 1fr;
  }

  .bsdf-material-control {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (min-width: 1121px) {
  .mode-group-minor {
    grid-column: auto;
  }
}

@media (min-width: 1121px) and (max-width: 1380px) {
  .mode-card {
    min-height: 66px;
    padding: 9px;
  }

  .mode-card small {
    display: none;
  }

  .mode-group-flagship .mode-switcher {
    gap: 7px;
  }
}


@media (max-width: 680px) {
  .mode-browser {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .mode-browser::-webkit-scrollbar {
    display: none;
  }

  .mode-group,
  .mode-group-minor {
    min-width: calc(100vw - 58px);
    flex: 0 0 calc(100vw - 58px);
    scroll-snap-align: start;
    padding: 6px;
  }

  .mode-group-heading small {
    display: none;
  }

  .mode-group-flagship .mode-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mode-card:not(.mode-card-minor) {
    min-height: 56px;
    padding: 7px;
  }

  .mode-card span {
    font-size: 0.61rem;
  }

  .mode-card:not(.mode-card-minor) strong {
    font-size: 0.75rem;
  }

  .system-status {
    flex-wrap: nowrap;
  }

  .status-pill {
    padding: 0 9px;
    font-size: 0.78rem;
  }
}

/* Capture physics and identifiability workbench */
.capture-physics-panel {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  background: rgba(18, 21, 25, 0.82);
  box-shadow: var(--shadow);
}

.capture-physics-header {
  gap: 24px;
  margin-bottom: 12px;
}

.capture-physics-header > div:first-child {
  max-width: 860px;
}

.capture-physics-actions {
  display: grid;
  grid-template-columns: minmax(146px, 1.4fr) repeat(2, minmax(86px, 0.7fr)) auto;
  gap: 8px;
  align-items: stretch;
  min-width: min(100%, 490px);
}

.capture-physics-actions button,
.capture-physics-actions .status-pill {
  min-height: 42px;
}

.capture-physics-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.capture-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.capture-mode-grid button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  color: var(--muted);
  background: #171b21;
  cursor: pointer;
  font-size: 0.76rem;
}

.capture-mode-grid button:hover,
.capture-mode-grid button.active {
  border-color: rgba(73, 208, 189, 0.62);
  color: #eafffb;
  background: rgba(73, 208, 189, 0.13);
}

.capture-preset-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capture-budget-control {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capture-noise-control {
  display: grid;
  align-content: center;
}

.capture-noise-control .range-row strong {
  color: var(--ink);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.capture-shot-band {
  display: grid;
  grid-template-columns: minmax(165px, 0.22fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 9px 2px;
}

.capture-shot-band .control-label {
  margin: 0 0 3px;
}

.capture-shot-band strong {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.capture-shot-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(48px, 1fr);
  gap: 4px;
  min-width: 0;
}

.capture-shot {
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 4px;
  padding: 7px 4px;
  color: #75817f;
  background: #11161b;
  font-size: 0.67rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-shot.acquired {
  border-color: rgba(73, 208, 189, 0.42);
  color: #dff9f3;
  background: rgba(73, 208, 189, 0.11);
}

.capture-shot.current {
  outline: 1px solid var(--amber);
  outline-offset: 1px;
  color: #ffe6b4;
}

.capture-physics-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.capture-physics-stage .canvas-panel {
  gap: 7px;
}

.capture-physics-stage .canvas-panel canvas {
  aspect-ratio: 13 / 8;
  min-height: 0;
}

.capture-observability-band {
  margin: 0 -14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 13px 14px 14px;
  background: rgba(8, 11, 14, 0.42);
}

.capture-observability-grid {
  display: grid;
  grid-template-columns: minmax(440px, 1.25fr) minmax(220px, 0.55fr) minmax(340px, 0.9fr);
  gap: 14px;
  align-items: stretch;
}

.capture-observability-grid canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 230px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  background: #0c1115;
}

.capture-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  margin: 0;
}

.capture-metrics div {
  min-width: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 9px 8px;
}

.capture-metrics dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.capture-metrics dd {
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.capture-aux-table-wrap {
  min-width: 0;
  overflow-x: auto;
}

.capture-aux-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
}

.capture-aux-table th,
.capture-aux-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 9px 8px;
  text-align: left;
  vertical-align: top;
}

.capture-aux-table th {
  color: var(--muted);
  font-size: 0.65rem;
  text-transform: uppercase;
}

.capture-aux-table td:nth-child(2) {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.capture-claim-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 12px;
  border-left: 3px solid var(--teal);
  padding: 9px 12px;
  background: rgba(20, 26, 30, 0.58);
}

.capture-claim-band > div:last-child {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  padding-left: 16px;
}

.capture-claim-band .control-label {
  margin: 0 0 4px;
}

.capture-claim-band strong {
  display: block;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.4;
}

.capture-modality-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.capture-modality-grid article {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px;
  background: rgba(28, 33, 39, 0.48);
}

.capture-modality-grid article:nth-child(1) {
  border-top: 2px solid var(--teal);
}

.capture-modality-grid article:nth-child(2) {
  border-top: 2px solid #b697ee;
}

.capture-modality-grid article:nth-child(3) {
  border-top: 2px solid var(--amber);
}

.capture-modality-grid article:nth-child(4) {
  border-top: 2px solid var(--blue);
}

.capture-modality-grid span,
.capture-modality-grid strong {
  display: block;
}

.capture-modality-grid span {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.capture-modality-grid strong {
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 0.85rem;
}

.capture-modality-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.42;
}

.capture-paper-links {
  margin-top: 0;
}

@media (max-width: 1320px) {
  .capture-physics-controls {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .capture-observability-grid {
    grid-template-columns: minmax(420px, 1.25fr) minmax(250px, 0.75fr);
  }

  .capture-aux-table-wrap {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .capture-physics-header {
    display: grid;
  }

  .capture-physics-actions {
    width: 100%;
  }

  .capture-physics-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capture-physics-stage .canvas-panel:last-child {
    grid-column: 1 / -1;
  }

  .capture-physics-stage .canvas-panel:last-child canvas {
    max-height: 430px;
  }

  .capture-modality-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .capture-physics-panel {
    padding: 10px;
  }

  .capture-physics-controls,
  .capture-physics-stage,
  .capture-observability-grid,
  .capture-claim-band {
    grid-template-columns: 1fr;
  }

  .capture-physics-stage .canvas-panel:last-child,
  .capture-aux-table-wrap {
    grid-column: auto;
  }

  .capture-shot-band {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .capture-shot-strip {
    grid-auto-columns: 62px;
    overflow-x: auto;
    padding: 2px;
  }

  .capture-observability-band {
    margin-right: -10px;
    margin-left: -10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .capture-observability-grid canvas {
    height: auto;
    min-height: 0;
    aspect-ratio: 62 / 27;
  }

  .capture-claim-band > div:last-child {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-left: 0;
    padding-top: 9px;
    padding-left: 0;
  }
}

@media (max-width: 520px) {
  .capture-physics-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .capture-physics-actions .status-pill {
    justify-content: center;
  }

  .capture-modality-grid {
    grid-template-columns: 1fr;
  }

  .capture-physics-stage .canvas-panel canvas {
    aspect-ratio: 13 / 9;
  }

  .capture-metrics {
    grid-template-columns: 1fr;
  }
}

/* Lobe-count model selection: residual, held-out error, information criteria and the Gram
   condition number side by side, so "more lobes fit better" can be seen losing to "only two
   are supported by the evidence". */
.bsdf-selection {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.bsdf-selection-heads {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.bsdf-selection-heads strong { font-size: 0.82rem; }
.bsdf-selection-heads span { color: var(--muted); font-size: 0.76rem; }

.bsdf-selection-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.bsdf-selection-table th {
  color: var(--muted);
  font-weight: 500;
  text-align: right;
  padding: 2px 6px;
}

.bsdf-selection-table th:first-child,
.bsdf-selection-table td:first-child { text-align: left; }

.bsdf-selection-table td {
  text-align: right;
  padding: 2px 6px;
  color: var(--muted);
}

.bsdf-selection-table tr.active td {
  color: var(--text, #e6ece9);
  background: rgba(73, 208, 189, 0.1);
}

.bsdf-selection-table tr.truth-row td {
  color: #7ba7ff;
}

/* ---------------------------------------------------------------------------------------
   Mode browser tiers. The browser's own grid now lives with the .mode-browser rule further up
   this file; what follows is only the tier styling.
   --------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------
   Panel chrome: the "?" explainer and the sticky control dock. See panel-ui.js.
   --------------------------------------------------------------------------------------- */
.panel-help-toggle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(73, 208, 189, 0.42);
  border-radius: 999px;
  color: var(--teal);
  background: rgba(73, 208, 189, 0.08);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.panel-help-toggle:hover,
.panel-help-toggle.active {
  color: #06231f;
  background: var(--teal);
}

.panel-help {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(73, 208, 189, 0.26);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: rgba(73, 208, 189, 0.06);
}

.panel-help h3 {
  margin: 0 0 6px;
  color: var(--teal);
  font-size: 0.94rem;
}

.panel-help p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.panel-help p strong {
  color: var(--ink);
}

.panel-help .panel-help-limit {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

/* Sits directly above the visuals and stays there. Collapsible, so an unwanted control block
   costs one bar of height rather than a screenful. */
.control-dock {
  margin: 12px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(18, 21, 25, 0.7);
}

.control-dock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.control-dock-label {
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.control-dock-hint {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 0.76rem;
}

.control-dock-chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.control-dock[data-open="true"] .control-dock-chevron {
  transform: rotate(-135deg);
}

.control-dock-body {
  max-height: min(58vh, 760px);
  overflow: auto;
  padding: 0 12px 12px;
}

.control-dock[data-open="false"] .control-dock-body {
  display: none;
}

.control-dock[data-open="false"] .control-dock-bar {
  border-bottom: 0;
}

/* Nothing to dock when every block inside is hidden by a workspace switch. */
.control-dock[data-empty="true"] {
  display: none;
}

/* Height-capped plot canvases keep their ratio.
   A max-height with width:100% clamps only the height, so the drawing is stretched sideways to
   whatever the column happens to be. Letting the width go auto with both maxima present means
   whichever limit binds first scales the other. Declared here at the end because
   `.chart-panel canvas { width: 100% }` sits later in this file at equal specificity and would
   otherwise win. */
.asset-solve-bottom canvas,
.factor-map-summary canvas,
.volumeinv-loss-panel canvas {
  width: auto;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   Mode card tiers. Declared last: the base .mode-card rule sets min-height 72px further up
   this file at equal specificity, so a sidebar entry written earlier stayed 72px tall.
   --------------------------------------------------------------------------------------- */
/* One column, one line each. */
.mode-group-minor .mode-switcher {
  grid-template-columns: 1fr;
  gap: 4px;
}

.mode-card-minor {
  min-height: 0;
  padding: 6px 10px;
  gap: 1px;
}

.mode-card-minor span {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}

/* Name only. Each panel's own "?" is what the tagline was for, and ten of them here cost more
   height above the first panel than they are worth. */
.mode-card-minor strong {
  display: none;
}

.mode-card-minor small {
  display: none;
}

.mode-card-minor.active span {
  color: var(--teal);
}

/* Surface extraction is a showpiece by intent and unfinished in fact. */
.mode-card-progress {
  border-color: rgba(240, 186, 93, 0.34);
}

.mode-card-progress::after {
  content: "in progress";
  align-self: start;
  padding: 1px 7px;
  border: 1px solid rgba(240, 186, 93, 0.4);
  border-radius: 999px;
  color: var(--amber);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------------------
   Fitting the controls and the first viewport on one screen.

   Measured before this block, at 1697x1000: the mode browser took 375px, the header and its
   intro another 260, and the control dock 415, which put the first viewport grid at y=1251 --
   a full screen below the fold. The four showpieces also wrapped 3 + 1, leaving a large empty
   area beside the single card on the second row.
   --------------------------------------------------------------------------------------- */

/* Four across, always. auto-fit dropped to three when the minimum did not divide the row. */
.mode-group-flagship .mode-switcher {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
}

.mode-group-flagship .mode-card {
  min-height: 92px;
  padding: 12px 13px;
}

.mode-group-flagship .mode-card strong {
  font-size: 1.04rem;
}

/* Two columns of names rather than ten stacked rows, which is what was setting the browser's
   height once the showpieces stopped needing two rows of their own. */
.mode-group-minor .mode-switcher {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

/* Panels size to their own content instead of all stretching to the tallest. */
.nlos3d-controls,
.asset-controls,
.volumeinv-controls,
.capture-physics-controls,
.mesh-lab-controls,
.nlos-controls {
  align-items: start;
}

/* One line per button. Two-line labels like "Edge camera" and "Truth overlay" were setting
   the height of every control group they sat in. */
.segmented-control button,
.seed-row button,
.wide-button {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-panel {
  padding: 9px 10px;
}

/* Lifted out of the control dock by panel-ui.js; see liftLongNotes. */
.control-notes {
  margin-top: 12px;
}

/* Editorial navigation: one question per main investigation, with supporting work on demand.
   Keep its responsive rules together; the older .mode-* rules belong to the retired browser. */
.lab-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 18px 38px;
  padding: 17px 2px 20px;
}
.lab-intro h2 { margin: 5px 0; font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: -.035em; }
.lab-intro > p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; max-width: 70ch; }
.lab-browser { margin-bottom: 18px; }
.lab-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lab-card {
  --chapter: #72d4c2;
  display: grid;
  grid-template-rows: auto 68px auto auto 1fr;
  gap: 5px;
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid color-mix(in srgb, var(--chapter) 28%, transparent);
  border-radius: 14px;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(145deg, color-mix(in srgb, var(--chapter) 7%, #11151a), #101316);
  transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
}
.lab-card:nth-child(2) { --chapter: #e6bb7b; }
.lab-card:nth-child(3) { --chapter: #96b2ff; }
.lab-card svg { width: 100%; height: 68px; color: var(--chapter); opacity: .85; }
.lab-card-kicker { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chapter); }
.lab-card-name { font-size: .72rem; color: var(--muted); }
.lab-card > strong { font-size: clamp(.98rem, 1.5vw, 1.22rem); font-weight: 700; line-height: 1.25; }
.lab-card > small { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.lab-card.active { border-color: var(--chapter); box-shadow: inset 0 1px 0 #ffffff20, 0 0 25px color-mix(in srgb, var(--chapter) 9%, transparent); }
.lab-card:hover { border-color: var(--chapter); transform: translateY(-2px); }
.lab-card:focus-visible, .lab-study:focus-visible, .lab-context-links button:focus-visible,
.lab-library > summary:focus-visible, .lab-model-note > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.lab-library { margin-top: 12px; border: 1px solid #ffffff16; border-radius: 12px; background: #111519a8; }
.lab-library > summary { cursor: pointer; padding: 12px 16px; color: var(--muted); font-size: .79rem; }
.lab-library > summary strong { color: var(--ink); font-weight: 600; margin-right: 16px; }
.lab-library > summary::marker { color: var(--teal); }
.lab-library-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; padding: 4px 16px 16px; }
.lab-library-grid h3 { font-size: .85rem; margin: 9px 0 5px; }
.lab-library-grid p { font-size: .76rem; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.lab-studies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.lab-guides { grid-template-columns: 1fr; }
.lab-study { display: grid; gap: 4px; padding: 10px 12px; text-align: left; border: 1px solid #ffffff18; border-radius: 9px; background: #ffffff03; min-width: 0; transition: border-color .2s, background .2s; }
.lab-study strong { color: var(--ink); font-size: .79rem; font-weight: 600; }
.lab-study small { color: var(--muted); font-size: .69rem; line-height: 1.4; }
.lab-study:hover, .lab-study.active { border-color: #72d4c275; background: #72d4c20b; }
.lab-guides .lab-study.active { border-color: #e6bb7b90; }
.lab-scope { color: var(--muted); font-size: .69rem; line-height: 1.5; margin: 10px 2px 0; }
.lab-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; margin: 0 0 14px; padding: 10px 13px; border-left: 2px solid #72d4c280; border-radius: 0 8px 8px 0; background: #72d4c205; }
.lab-context-kind { grid-column: 1; color: var(--teal); font-size: .66rem; font-weight: 600; letter-spacing: .025em; }
.workspace > .panel-help-anchor, .workspace > .panel-help, .workspace > .lab-context { grid-column: 1 / -1; min-width: 0; }
.lab-context-probe { grid-column: 1; color: var(--muted); margin: 0; font-size: .78rem; line-height: 1.5; max-width: 85ch; }
.lab-context-probe strong { color: var(--ink); }
.lab-context-links { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; }
.lab-context-links button { color: var(--teal); background: transparent; padding: 3px 0; border: 0; font-size: .72rem; text-align: left; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #72d4c240; }
.lab-context-links button::after { content: ' ↗'; }
.lab-context-links button:hover { color: var(--ink); text-decoration-color: currentColor; }
.lab-model-note { margin: 12px 0; padding: 11px 14px; border: 1px solid #e6bb7b35; border-radius: 10px; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.lab-model-note summary { color: var(--amber); cursor: pointer; }
.lab-model-note p { max-width: 110ch; }
@media (max-width: 900px) {
  .lab-intro { grid-template-columns: 1fr; gap: 4px; }
  .lab-library-grid { grid-template-columns: 1fr; gap: 10px; }
  .lab-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lab-context { grid-template-columns: 1fr; }
  .lab-context-links { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
}
@media (max-width: 600px) {
  .lab-main { grid-template-columns: 1fr; gap: 8px; }
  .lab-card { grid-template-columns: 82px minmax(0, 1fr); grid-template-rows: auto auto auto auto; gap: 3px 10px; padding: 12px; }
  .lab-card svg { grid-column: 1; grid-row: 1 / 5; width: 82px; height: 65px; align-self: center; }
  .lab-card > span, .lab-card > strong, .lab-card > small { grid-column: 2; }
  .lab-card > strong { font-size: .98rem; }
  .lab-card > small { font-size: .71rem; }
  .lab-card-kicker { font-size: .58rem; }
  .lab-library > summary span { display: block; margin: 5px 0 0 16px; }
  .lab-studies, .lab-guides { grid-template-columns: 1fr; }
  .lab-intro { padding-top: 6px; }
  .system-status { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-card, .lab-study { transition: none; }
  .lab-card:hover { transform: none; }
}

/* Scene choices remain visible while numerical controls stay folded. */
.scene-deck { grid-column: 1 / -1; min-width: 0; margin: 12px 0 18px; padding: 12px 14px; border: 1px solid #72d4c269; border-radius: 13px; background: linear-gradient(115deg, #72d4c20d, #e6bb7b04); box-shadow: inset 0 1px 0 #b6ffe621, 0 0 22px #72d4c20b; }
.scene-deck-label { margin: 0 0 9px; color: var(--teal); font-size: .71rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; text-shadow: 0 0 15px #72d4c24d; }
.scene-deck-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.scene-deck-choices > .compact-panel { flex: 1 1 330px; min-width: 0; background: #10151880; }
.scene-deck .scenario-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); width: 100%; margin: 0; gap: 7px; }
.scene-deck .scenario-row button { min-width: 0; }
.scene-deck .segmented-control { display: flex; flex-wrap: wrap; }
.scene-deck .segmented-control button { flex: 1 1 auto; white-space: normal; }
.scene-deck button.active { border-color: #b9ffe4a1; box-shadow: inset 0 1px 0 #d1ffef30, 0 0 14px #72d4c227; color: #dafff1; }
.scene-deck button:focus-visible, .lab-return:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.lab-return { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 6px; padding: 7px 11px; border: 1px solid #e6bb7b70; border-radius: 7px; color: #ffe0ae; background: #e6bb7b0b; box-shadow: inset 0 1px 0 #ffedbf20, 0 0 14px #e6bb7b0d; font-size: .76rem; transition: background .2s, box-shadow .2s; }
.lab-return:hover { background: #e6bb7b17; box-shadow: 0 0 18px #e6bb7b20; }
.lab-return[hidden], [data-mesh-section][hidden], [data-optics-section][hidden] { display: none !important; }
.support-output { width: 100%; min-width: 0; margin: 16px 0; }
.support-output canvas { display: block; width: 100%; height: auto; image-rendering: auto; }
.support-output figcaption { gap: 12px; }
.support-output .seed-note { padding: 0 12px 10px; margin: 0; }
.specimen-note, .mesh-reading-guide { max-width: 110ch; color: var(--muted); font-size: .82rem; line-height: 1.6; margin: 10px 0 16px; }
.mesh-reading-guide strong { color: var(--ink); }
.mesh-actual-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mesh-actual-grid canvas { width: 100%; height: auto; }
.mesh-view-tabs { margin: 12px 0; }
.focus-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.focus-controls label { display: grid; align-content: start; gap: 7px; min-width: 0; color: var(--muted); font-size: .76rem; }
.focus-controls select, .focus-controls input { width: 100%; min-width: 0; }
.focus-controls select { padding: 8px; border: 1px solid #72d4c245; border-radius: 7px; background: #151c20; color: var(--ink); }
.focus-controls output { color: var(--teal); }
.focus-images { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.focus-images canvas { width: 100%; height: auto; }
.focus-images figcaption { display: grid; gap: 5px; }
.focus-result { padding: 12px 14px; border-left: 2px solid var(--teal); background: #72d4c207; color: var(--ink); font-size: .85rem; line-height: 1.6; }
@media (max-width: 900px) {
  .focus-images, .focus-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-return { grid-row: auto; }
}
@media (max-width: 600px) {
  .scene-deck { padding: 10px; }
  .scene-deck .scenario-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mesh-actual-grid, .focus-controls { grid-template-columns: 1fr; }
  .focus-images { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .focus-images figcaption { font-size: .68rem; }
  .focus-images figcaption strong { text-align: left; }
  .support-output figcaption { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .lab-return { transition: none; } }

/* Executable actions have one consistent, visible emphasis. */
.lab-run-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 12px 0 16px; padding: 12px 14px; border: 1px solid #e6bb7b4a; border-radius: 12px; background: linear-gradient(110deg, #e6bb7b0d, #72d4c204); }
.lab-run-hint { color: var(--muted); font-size: .77rem; margin-left: 9px; }
.run-action.primary-button { position: relative; min-height: 43px; padding: 9px 20px; border: 1px solid #fff3c4; border-radius: 10px; background: linear-gradient(135deg, #fff2b5, #f0c778); color: #241c09; font-size: .86rem; font-weight: 800; box-shadow: inset 0 1px 0 #fffef0, 0 0 15px #ffd77855, 0 5px 13px #0005; text-shadow: 0 1px 0 #ffffff55; }
.run-action.primary-button:hover:not(:disabled) { background: linear-gradient(135deg, #fffbdc, #ffde96); box-shadow: inset 0 1px 0 white, 0 0 25px #ffd77875, 0 6px 17px #0006; transform: translateY(-2px); }
.run-action.primary-button:focus-visible { outline: 2px solid #fff3bd; outline-offset: 4px; }
.run-action:disabled { opacity: .58; box-shadow: none; cursor: wait; }
.lab-run-bar > button:not(.run-action) { min-height: 35px; padding: 6px 13px; }
.mesh-guide-controls { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; margin: 14px 0; }
.mesh-guide-controls .segmented-control { display: flex; flex-wrap: wrap; }
.mesh-guide-controls button { white-space: normal; }
@media (max-width: 600px) { .lab-run-hint { flex-basis: 100%; margin: 3px 0 0; } .mesh-guide-controls { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .run-action { transition: none; } .run-action.primary-button:hover:not(:disabled) { transform: none; } }

/* Editorial navigation: visible actions, camera workspaces and compact optical studies. */
[data-aperture2d-section][hidden] { display: none !important; }
.workspace-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.workspace-tabs button { min-height:44px; padding:10px 18px; border-radius:12px; }
.coded-image-experiment > .lab-run-bar { margin:14px 0; }
.coded-image-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.coded-image-grid canvas, .camera-diagnostics canvas, .aperture-photo-layout canvas { display:block; width:100%; height:auto; aspect-ratio:1; }
.camera-diagnostics { display:grid; grid-template-columns:minmax(120px,180px) minmax(120px,180px) minmax(220px,1fr); gap:18px; align-items:start; margin:24px 0; }
.camera-reading { padding:8px 18px; border-left:1px solid rgba(118,217,204,.3); }
.camera-reading h3, .study-intro h3 { margin:0 0 10px; }
.camera-reading p, .study-intro p { color:var(--muted); line-height:1.65; }
.study-intro { margin:24px 0 16px; max-width:900px; }
.aperture-example-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.aperture-example-grid canvas { aspect-ratio:1; width:100%; height:auto; }
.aperture-example-grid figcaption, .optical-intuition-grid figcaption { flex-direction:column; align-items:flex-start; gap:3px; font-size:.8rem; }
.aperture-photo-controls { max-width:760px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.aperture-photo-layout { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,2fr); gap:20px; align-items:start; }
.aperture-photo-reference { position:sticky; top:20px; }
.aperture-photo-comparison { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.aperture-photo-lane .panel-heading { display:block; min-height:80px; }
.aperture-photo-lane h3 { margin:0 0 6px; font-size:1rem; }
.aperture-photo-lane .panel-heading strong { color:var(--teal); font-size:.77rem; line-height:1.5; }
.aperture-photo-pair { display:grid; gap:18px; }
.aperture-photo-pair figcaption { font-size:.77rem; line-height:1.45; }
.optical-intuition-grid { max-width:750px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:18px; }
.optical-intuition-grid canvas { width:100%; height:auto; aspect-ratio:1; }
.mesh-lab-controls { grid-template-columns:1fr; }
@media(max-width:1100px) {
 .coded-image-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .aperture-example-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .aperture-photo-layout { grid-template-columns:1fr; }
 .aperture-photo-reference { position:static; max-width:300px; }
}
@media(max-width:680px) {
 .camera-diagnostics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .camera-reading { grid-column:1/-1; }
 .aperture-photo-comparison { grid-template-columns:1fr; }
 .aperture-photo-pair { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .aperture-photo-lane .panel-heading { min-height:0; margin-top:8px; }
 .aperture-example-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .coded-image-grid figcaption { flex-direction:column; align-items:flex-start; font-size:.8rem; }
}

.lab-run-bar > button:not(.primary-button) {
  min-height:40px; padding:9px 16px; border:1px solid rgba(177,188,203,.24);
  border-radius:10px; background:linear-gradient(160deg,#252931,#171a20);
  color:var(--muted); font:inherit; cursor:pointer;
}
.lab-run-bar > button.wide-button { width:auto; min-width:180px; }
.lab-run-bar > button:not(.primary-button):hover { border-color:rgba(255,220,147,.6); color:var(--ink); }

.transport-display-note { grid-column:1/-1; margin:0; color:var(--muted); font-size:.8rem; }

/* Editorial navigation: aperture mechanism and spatial depth experiments. */
.aperture-explainer { display:grid; grid-template-columns:minmax(180px,260px) minmax(0,1fr); gap:24px; margin:20px 0; padding:20px; border:1px solid rgba(84,201,183,.3); border-radius:16px; background:linear-gradient(135deg,rgba(58,119,108,.1),rgba(16,20,26,.8)); }
.aperture-explainer > figure { align-self:start; }
.aperture-explainer-copy h3 { margin:5px 0 10px; }
.aperture-explainer-copy p { max-width:860px; color:var(--muted); line-height:1.65; }
.aperture-explainer canvas { width:100%; height:auto; }
#apertureMechanismCanvas { display:block; border:1px solid rgba(133,170,170,.2); border-radius:10px; }
.aperture-shift-control { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:.82rem; color:var(--muted); }
.aperture-shift-control input { flex:1; min-width:140px; accent-color:var(--teal); }
.aperture-shift-control output { color:#e8cd87; min-width:110px; }
.angular-diagnostics { grid-template-columns:minmax(120px,180px) minmax(220px,1fr); }
@media(max-width:700px) {
 .aperture-explainer { grid-template-columns:1fr; padding:14px; gap:14px; }
 .aperture-explainer > figure { max-width:230px; }
 .angular-diagnostics { grid-template-columns:1fr; }
 .angular-diagnostics > figure { max-width:210px; }
 .angular-diagnostics .camera-reading { grid-column:auto; }
}

.depth-intro { max-width:950px; margin:20px 0; }
.depth-intro h3 { margin:0 0 10px; font-size:1.4rem; }
.depth-intro p, .depth-map-heading p, .depth-optics-copy p, .depth-explanation-steps p { color:var(--muted); line-height:1.7; }
.depth-optics-explainer { display:grid; grid-template-columns:minmax(150px,230px) minmax(0,1fr); align-items:start; gap:26px; border:1px solid rgba(211,175,96,.28); border-radius:16px; padding:20px; margin:20px 0; background:linear-gradient(130deg,rgba(176,124,47,.09),rgba(12,17,24,.6)); }
.depth-optics-explainer canvas { display:block; width:100%; aspect-ratio:1; height:auto; }
.depth-optics-copy h3 { margin:0 0 10px; }
.depth-lens-diagram { display:block; max-width:700px; width:100%; }
.depth-lens-diagram text { fill:#adbfba; font:14px system-ui; }
.depth-measurement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
.depth-measurement-grid:has([data-coded-depth-pair]:not([hidden])) { grid-template-columns:repeat(4,minmax(0,1fr)); }
[data-coded-depth-pair][hidden] { display:none !important; }
.depth-map-heading { margin-top:30px; }
.depth-map-heading h3 { margin:0 0 6px; }
.depth-map-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.depth-map-grid canvas, .depth-measurement-grid canvas { display:block; width:100%; height:auto; aspect-ratio:1; }
#codedDepthEstimateCanvas { cursor:crosshair; }
#codedDepthEstimateCanvas:focus-visible { outline:2px solid #edcf8a; outline-offset:4px; }
.depth-colour-key { display:flex; gap:12px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:.83rem; margin:14px 0 22px; }
.depth-colour-key i { flex:1; max-width:330px; min-width:100px; height:9px; border-radius:5px; background:linear-gradient(90deg,#efbb75,#78d7bd,#698ae4); }
.depth-unknown-key { padding-left:12px; border-left:12px solid #555f6a; margin-left:auto; }
.depth-evidence-panel { border:1px solid rgba(103,177,166,.27); border-radius:15px; padding:16px; background:rgba(9,14,20,.6); }
.depth-evidence-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:18px; align-items:start; }
.depth-evidence-grid canvas { display:block; width:100%; height:auto; }
.depth-explanation-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:26px 0; }
.depth-explanation-steps article { padding-left:16px; border-left:2px solid #629f91; }
.depth-explanation-steps article > span { color:#dabd7f; font-size:.8rem; letter-spacing:.07em; }
.depth-explanation-steps h3 { margin:10px 0; font-size:1rem; }
.depth-explanation-steps p { margin:0; }
.depth-reference { color:var(--muted); font-size:.85rem; line-height:1.6; }
.depth-reference a { color:var(--teal); }
@media(max-width:1000px) {
 .depth-measurement-grid, .depth-measurement-grid:has([data-coded-depth-pair]:not([hidden])) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .depth-evidence-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) {
 .depth-optics-explainer { grid-template-columns:1fr; padding:14px; }
 .depth-optics-explainer > figure { max-width:190px; }
 .depth-map-grid { grid-template-columns:1fr; }
 .depth-explanation-steps { grid-template-columns:1fr; }
 .depth-measurement-grid figcaption { flex-direction:column; align-items:start; }
 .depth-unknown-key { margin-left:0; }
}