.ai-page {
  --ai-data: #087f8c;
  --ai-fit: #6954da;
  --ai-error: #bf5739;
  --ai-optimum: #438456;
  max-width: 1440px;
  margin: auto;
}
[data-theme="dark"] .ai-page {
  --ai-data: #75cecb;
  --ai-fit: #b09aff;
  --ai-error: #efa17c;
  --ai-optimum: #98c18a;
}
.ai-page [hidden] {
  display: none !important;
}
.ai-page h1 {
  margin: 12px 0 18px;
}
.ai-page p {
  line-height: 1.7;
}
.ai-page h2,
.ai-page h3 {
  margin-bottom: 16px;
}
.ai-accent {
  color: var(--primary);
}
.ai-muted {
  color: var(--muted);
}
.ai-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  padding: 28px 0 40px;
  align-items: center;
}
.ai-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  letter-spacing: -0.06em;
}
.ai-hero p {
  max-width: 650px;
  font-size: 1.1rem;
  color: var(--muted);
}
.ai-hero-diagram {
  padding: 30px;
  display: grid;
  gap: 12px;
  background: var(--surface, white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 12px 32px #00000008;
}
.ai-hero-diagram > span {
  font: 0.85rem var(--mono);
  color: var(--muted);
}
.ai-hero-diagram b {
  font: 1.3rem var(--mono);
  color: var(--ai-fit);
}
.ai-hero-diagram small {
  margin-top: 8px;
  color: var(--muted);
}
.ai-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 18px 0 30px;
  color: var(--muted);
}
.ai-summary progress {
  width: 150px;
  accent-color: var(--primary);
}
.ai-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 44px;
}
.ai-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.ai-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  background: var(--surface, white);
  margin-bottom: 20px;
  min-width: 0;
}
.ai-categories h2 {
  font-size: 1.05rem;
  margin-top: 12px;
}
.ai-categories p {
  color: var(--muted);
  font-size: 0.95rem;
}
.ai-categories .ai-category-count {
  font-size: 0.82rem;
  margin: 0 0 12px;
}
.ai-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}
.ai-card h3 {
  font-size: 1.2rem;
  margin: 8px 0 0;
}
.ai-card p {
  margin: 0 0 8px;
}
.ai-card small {
  color: var(--muted);
  margin-top: auto;
}
.ai-card .btn {
  margin: 8px 0;
  align-self: flex-start;
}
.ai-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}
.ai-available {
  border-color: var(--ai-fit);
}
.ai-soon {
  color: var(--muted);
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
}
.ai-filters,
.ai-controls {
  display: grid;
  gap: 16px;
}
.ai-filters {
  grid-template-columns: 2fr 1fr 1fr;
  margin: 24px 0 12px;
}
.ai-page label {
  font-size: 0.9rem;
}
.ai-filters label,
.ai-controls label {
  display: grid;
  gap: 7px;
  color: var(--muted);
}
.ai-page input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
.ai-page select {
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 7px;
}
.ai-lesson-heading {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
}
.ai-lesson-heading p {
  max-width: 720px;
  color: var(--muted);
}
.ai-lesson-heading > .btn {
  flex-shrink: 0;
}
.ai-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
  overflow-x: auto;
}
.ai-tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 14px 20px;
  color: var(--muted);
}
.ai-tabs [aria-selected="true"] {
  border-bottom-color: var(--primary);
  color: var(--ink);
  font-weight: 700;
}
.ai-intro p {
  max-width: 900px;
}
.ai-equations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 24px 0;
}
.ai-equation {
  padding: 24px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface, white);
}
.ai-math {
  overflow-x: auto;
  padding: 24px 20px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ai-fit);
  scrollbar-width: thin;
}
.ai-math math {
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", serif;
  min-width: max-content;
  width: max-content;
  margin: auto;
}
.ai-math:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ai-math-hint { display: none; }
.ai-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 24px 0 12px;
}
.ai-control-actions {
  grid-column: 1/-1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ai-live {
  font-size: 0.8rem;
  color: var(--ai-data);
}
.ai-page .section-line {
  gap: 12px;
  flex-wrap: wrap;
}
.ai-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 18px 0;
}
.ai-toggle-row input,
.ai-question input {
  accent-color: var(--primary);
}
.ai-legend {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.8rem;
  color: var(--muted);
}
.ai-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ai-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.ai-data {
  background: var(--ai-data);
}
.ai-prediction {
  background: var(--ai-fit);
}
.ai-error {
  background: var(--ai-error);
}
.ai-optimum {
  background: var(--ai-optimum);
}
.ai-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.ai-chart-grid figure {
  margin: 0;
  min-width: 0;
}
.ai-chart-grid figcaption {
  font-weight: 650;
  margin: 6px 0 14px;
}
.ai-chart {
  display: block;
  width: 100%;
  background: var(--paper);
  border-radius: 10px;
}
.ai-chart text {
  font: 16px var(--mono);
  fill: var(--muted);
}
.ai-gridline {
  stroke: var(--line);
  stroke-width: 1;
  fill: none;
}
.ai-fit-line {
  stroke: var(--ai-fit);
  stroke-width: 2.5;
  fill: none;
}
.ai-ols-line {
  stroke: var(--ai-optimum);
  stroke-width: 2.5;
  stroke-dasharray: 2 5;
  fill: none;
}
.ai-residual {
  stroke: var(--ai-error);
  stroke-width: 1.3;
  stroke-dasharray: 4 3;
  fill: none;
}
.ai-point {
  fill: var(--ai-data);
  stroke: var(--surface, white);
  stroke-width: 1;
}
.ai-loss-point {
  fill: var(--ai-fit);
}
.ai-playback {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
  align-items: center;
  border-block: 1px solid var(--line);
}
.ai-playback label {
  display: flex;
  flex: 1 1 220px;
  gap: 12px;
  align-items: center;
  white-space: nowrap;
}
.ai-playback input {
  width: 100%;
  min-width: 60px;
  accent-color: var(--primary);
}
.ai-playback output {
  font: 0.8rem var(--mono);
}
.ai-state {
  margin-top: 24px;
}
.ai-state h3 {
  margin-top: 10px;
}
.ai-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.ai-metrics > div {
  padding: 14px;
  border-radius: 8px;
  background: var(--paper);
  min-width: 0;
}
.ai-metrics dt {
  color: var(--muted);
  font-size: 0.85rem;
}
.ai-metrics dd {
  margin: 6px 0 0;
  font: 600 1.1rem var(--mono);
  overflow-wrap: anywhere;
}
.ai-update {
  padding: 16px;
  border-left: 3px solid var(--ai-fit);
  background: var(--paper);
  font-size: 0.95rem;
}
.ai-update p:last-child {
  margin: 0;
}
.ai-table-scroll {
  overflow: auto;
}
.ai-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.9rem;
}
.ai-page caption {
  text-align: left;
  color: var(--muted);
  padding: 10px 0;
}
.ai-page th,
.ai-page td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 12px;
  min-width: 100px;
  vertical-align: top;
}
.ai-code {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  overflow-x: auto;
  font: 0.9rem/1.8 var(--mono);
  margin: 20px 0 30px;
}
.ai-page summary {
  cursor: pointer;
  font-weight: 650;
  padding: 8px 0;
}
.ai-question {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.ai-question fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}
.ai-question legend {
  font-weight: 650;
}
.ai-question label {
  display: block;
  margin: 14px 0;
}
.ai-feedback {
  margin-top: 16px;
  color: var(--ai-data);
}
#ai-error {
  color: var(--ai-error);
}
@media (max-width: 1100px) {
  .ai-chart-grid,
  .ai-equations {
    grid-template-columns: 1fr;
  }
  .ai-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ai-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ai-hero {
    gap: 20px;
  }
  .ai-hero-diagram {
    padding: 22px;
  }
}
@media (max-width: 800px) {
  .ai-hero,
  .ai-categories,
  .ai-chart-grid,
  .ai-equations {
    grid-template-columns: 1fr;
  }
  .ai-hero-diagram {
    display: none;
  }
  .ai-categories {
    gap: 0;
  }
  .ai-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ai-filters label:first-child {
    grid-column: 1 / -1;
  }
  .ai-lesson-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .ai-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 500px) {
  .ai-cards,
  .ai-filters {
    grid-template-columns: 1fr;
  }
  .ai-filters label:first-child {
    grid-column: auto;
  }
  .ai-panel,
  .ai-equation {
    padding: 16px;
  }
  .ai-controls {
    gap: 12px;
  }
  .ai-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ai-tabs button {
    padding: 12px;
  }
  .ai-page h1 {
    font-size: 2.1rem;
  }
  .ai-playback .btn {
    padding: 9px 12px;
  }
}

/* Forest diagrams reuse AI Lab tokens and remain separate from DSA trees. */
.rf-page {
  --rf-zero: #25979b;
  --rf-one: #d76539;
}
[data-theme="dark"] .rf-page {
  --rf-zero: #75cecb;
  --rf-one: #efa17c;
}
.rf-zero {
  background: var(--rf-zero);
  border-radius: 50% !important;
}
.rf-one {
  background: var(--rf-one);
}
.dt-query {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 18px 0;
}
.dt-query label {
  display: grid;
  gap: 6px;
  min-width: 130px;
}
.pca-axis {
  stroke-width: 2.5;
  fill: none;
}
.pca-axis-1 { stroke: var(--ai-fit); }
.pca-axis-2 { stroke: var(--ai-optimum); }
.pca-connector {
  stroke: var(--ai-error);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  fill: none;
}
.pca-point {
  fill: var(--ai-data);
  stroke: var(--surface);
  stroke-width: 1.5;
}
.pca-projected, .pca-score { fill: var(--ai-fit); }
.pca-mean {
  stroke: var(--ai-error);
  stroke-width: 2.5;
}
.pca-active {
  stroke: var(--ink);
  stroke-width: 2.5;
}
.pca-placeholder {
  display: grid;
  min-height: 280px;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: var(--paper);
  color: var(--muted);
  border-radius: 10px;
}
#dt-error, #dt-query-error, #pca-error { color: var(--ai-error); }

.ml-page {
  --ml-zero: #168c93;
  --ml-one: #d16943;
  --ml-c1: #26a1a3;
  --ml-c2: #de804b;
  --ml-c3: #987be8;
  --ml-c4: #87a944;
}
[data-theme="dark"] .ml-page {
  --ml-zero: #79d2d1;
  --ml-one: #f0a27c;
  --ml-c1: #79d2d1;
  --ml-c2: #f0a27c;
  --ml-c3: #ba9eff;
  --ml-c4: #b3d680;
}
.ml-chart, .ml-neuron-chart { overflow: hidden; }
.ml-point circle, .ml-point rect {
  stroke: var(--surface);
  stroke-width: 1.4;
}
.ml-class-0 { fill: var(--ml-zero); }
.ml-class-1 { fill: var(--ml-one); }
.ml-point.ml-active circle, .ml-point.ml-active rect,
.ml-point.ml-focus circle, .ml-point.ml-focus rect {
  stroke: var(--ai-fit);
  stroke-width: 3;
}
.ml-boundary { stroke: var(--ai-fit); stroke-width: 2.8; fill: none; }
.ml-margin { stroke: var(--ai-fit); stroke-width: 1.7; stroke-dasharray: 7 5; fill: none; }
.ml-distance { stroke: var(--line); stroke-width: 1; fill: none; }
.ml-neighbor-line { stroke: var(--ai-fit); stroke-width: 2; }
.ml-query { stroke: var(--ai-fit); stroke-width: 3; fill: none; }
.ml-center { stroke-width: 4; fill: none; }
.ml-chart text { paint-order: stroke; stroke: var(--paper); stroke-width: 2px; }
.ml-legend-zero { background: var(--ml-zero); border-radius: 50% !important; }
.ml-legend-one { background: var(--ml-one); }
.ml-cluster-one { background: var(--ml-c1); }
.ml-flow { stroke: var(--ai-fit); stroke-width: 3; fill: none; }
.ml-box { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
#ml-error { color: var(--ai-error); }

/* Boosting lessons keep the calculations readable on small and large screens. */
.boost-equations .ai-equation { min-width: 0; }
.boost-equations .ai-math { margin-top: 12px; }
@media (max-width: 500px) {
  .ai-math { padding: 20px 16px; }
  .ai-math math { font-size: 1.25rem; margin-left: 0; }
  .ai-math-hint { display: block; margin: -4px 0 14px; color: var(--muted); font-size: 0.78rem; }
}
.boost-visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.boost-visual-grid figure { margin: 0; min-width: 0; }
.boost-visual-grid figcaption { font-weight: 650; margin: 0 0 10px; }
.boost-chart { display: block; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.boost-axis-line { stroke: var(--line); stroke-width: 2; }
.boost-axis, .boost-legend { fill: var(--muted); font: 12px var(--mono); }
.boost-fit-line { fill: none; stroke: var(--ai-fit); stroke-width: 3; stroke-linejoin: round; }
.boost-target { fill: var(--ai-data); stroke: var(--surface); stroke-width: 2; }
.boost-split { stroke: var(--ai-error); stroke-width: 2; stroke-dasharray: 6 5; }
.boost-bar { fill: var(--ai-fit); }
.boost-bar.boost-high { fill: var(--ai-fit); }
.boost-bar.boost-low { fill: var(--ai-data); }
.boost-bar.boost-omitted { opacity: 0.22; }
.boost-query { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.boost-query label { display: grid; gap: 7px; min-width: 140px; }
.boost-query-result, #boost-query-result { flex: 1 1 100%; min-width: 0; }
#boost-error { color: var(--ai-error); }
@media (max-width: 850px) { .boost-visual-grid { grid-template-columns: 1fr; } }
.ml-single-neuron .ai-chart-grid { grid-template-columns: 1fr; }
.ml-single-neuron #ml-chart { max-width: 720px; }
@media (max-width: 700px) {
  .ml-single-neuron #ml-chart { overflow-x: auto; }
  .ml-neuron-chart { min-width: 640px; }
}

/* The network lab keeps its parameter editor separate from the replay canvas. */
.nn-controls { display: grid; gap: 18px; margin: 24px 0 14px; }
.nn-primary-controls, .nn-parameter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nn-controls label { display: grid; gap: 7px; min-width: 0; font-weight: 600; }
.nn-controls input, .nn-controls select { width: 100%; min-width: 0; }
.nn-parameter-details, .nn-layer-editor { border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.nn-parameter-details > summary { cursor: pointer; font-weight: 700; }
.nn-parameter-details[open] > summary { margin-bottom: 14px; }
.nn-layer-editor { margin: 16px 0 0; }
.nn-layer-editor legend { padding: 0 8px; font-weight: 700; }
.nn-neuron-editor { padding: 12px; background: var(--paper); border-radius: 8px; min-width: 0; }
.nn-neuron-editor h4 { margin: 0 0 12px; }
.nn-neuron-editor .nn-parameter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nn-neuron-editor label { font-size: 0.85rem; }
.nn-visual-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.nn-visual-grid figure { min-width: 0; margin: 0; }
.nn-visual-grid figcaption { font-weight: 700; margin: 0 0 10px; }
.nn-diagram-scroll { overflow-x: auto; border-radius: 12px; scrollbar-width: thin; }
.nn-diagram-scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.nn-diagram { display: block; width: min(100%, 840px); min-width: 690px; height: auto; margin: auto; }
.nn-diagram-bg { fill: var(--paper); stroke: var(--line); }
.nn-edge { stroke: var(--line); stroke-width: 2; }
.nn-edge-forward { stroke: var(--ai-fit); stroke-width: 4; }
.nn-edge-backward { stroke: var(--ai-error); stroke-width: 4; }
.nn-node circle { fill: var(--surface); stroke: var(--ai-data); stroke-width: 2; }
.nn-node-forward circle { stroke: var(--ai-fit); stroke-width: 5; }
.nn-node-backward circle { stroke: var(--ai-error); stroke-width: 5; }
.nn-node-name { fill: var(--ink); font: 700 17px var(--sans, system-ui); }
.nn-node-value { fill: var(--muted); font: 13px var(--mono); }
.nn-node-delta { fill: var(--ai-error); font: 12px var(--mono); }
.nn-layer-title { fill: var(--muted); font: 700 15px var(--sans, system-ui); letter-spacing: 0.08em; }
.nn-diagram-caption { font-size: 0.86rem; }
#nn-error { color: var(--ai-error); }
@media (max-width: 740px) {
  .nn-primary-controls, .nn-parameter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nn-diagram { width: 690px; }
}
@media (max-width: 500px) {
  .nn-primary-controls, .nn-parameter-grid, .nn-neuron-editor .nn-parameter-grid { grid-template-columns: 1fr; }
  .nn-neuron-editor { padding: 10px; }
}
.rf-region {
  opacity: 0.2;
}
.rf-class-0 {
  fill: var(--rf-zero);
  stroke: var(--surface, white);
  stroke-width: 1.2;
}
.rf-class-1 {
  fill: var(--rf-one);
  stroke: var(--surface, white);
  stroke-width: 1.2;
}
.rf-class-0.rf-oob-point {
  fill: var(--surface, white);
  stroke: var(--rf-zero);
  stroke-width: 1.8;
}
.rf-class-1.rf-oob-point {
  fill: var(--surface, white);
  stroke: var(--rf-one);
  stroke-width: 1.8;
}
.rf-query {
  fill: none;
  stroke: var(--ai-fit);
  stroke-width: 3;
}
.rf-split {
  fill: none;
  stroke: var(--ai-fit);
  stroke-width: 2;
  stroke-dasharray: 5 3;
}
.rf-map svg {
  cursor: crosshair;
}
.rf-query-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
  align-items: end;
}
.rf-query-controls label {
  display: grid;
  gap: 8px;
}
.rf-query-controls label:last-child {
  display: flex;
  align-items: center;
}
.rf-inspection {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}
.rf-inspection > section {
  min-width: 0;
}
.rf-tree,
.rf-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rf-tree ul {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.rf-node {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  overflow-wrap: anywhere;
}
.rf-node strong,
.rf-node span {
  display: block;
}
.rf-node strong {
  font: 600 0.85rem/1.6 var(--mono);
}
.rf-node span {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 5px;
}
.rf-node.rf-path {
  border-left: 4px solid var(--rf-zero);
}
.rf-node.rf-active {
  outline: 2px solid var(--ai-fit);
  outline-offset: 1px;
}
.rf-branch-label {
  font-size: 0.8rem;
  color: var(--muted);
}
.rf-sample-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.rf-sample-chips span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font: 0.8rem var(--mono);
}
.rf-sample-chips .rf-omitted {
  color: var(--muted);
  border-style: dashed;
}
.rf-wrap {
  overflow-wrap: anywhere;
}
.rf-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.rf-comparison-grid article {
  min-width: 0;
}
.rf-comparison-grid p {
  font-size: 0.9rem;
  margin-top: 12px;
}
#rf-error,
#rf-query-error {
  color: var(--ai-error);
}
@media (max-width: 1100px) {
  .rf-inspection,
  .rf-comparison-grid {
    grid-template-columns: 1fr;
  }
  .rf-query-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 500px) {
  .rf-tree ul {
    margin-left: 5px;
    padding-left: 6px;
  }
  .rf-node {
    padding: 8px;
  }
  .rf-query-controls {
    gap: 10px;
  }
  .rf-page .ai-playback {
    position: static;
  }
}
.rf-tree-scroll { max-width:100%; overflow:auto; padding:12px 0; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.rf-tree-scroll svg { display:block; margin:auto; max-width:none; }
.rf-tree-scroll text { fill:var(--ink); font:14px var(--mono); }
.rf-tree-scroll .rf-tree-count { fill:var(--muted); font-size:12px; }
.rf-tree-edge { fill:none; stroke:var(--muted); stroke-width:2; }
.rf-tree-edge.query-path { stroke:var(--mint); stroke-width:3; stroke-dasharray:7 4; animation:signal-flow 1s linear infinite; }
.rf-tree-node rect { fill:var(--soft); stroke:var(--line); stroke-width:2; }
.rf-tree-node.query-path rect { stroke:var(--mint); }
.rf-tree-node.training rect { fill:color-mix(in srgb,var(--ai-fit) 16%,var(--surface)); stroke:var(--ai-fit); stroke-width:3; }
@media(prefers-reduced-motion:reduce) { .rf-tree-edge.query-path { animation:none; stroke-dasharray:none; } }
.nn-edge-forward, .ml-flow { stroke-dasharray:10 5; animation:signal-flow .9s linear infinite; }
.nn-edge-backward { stroke-dasharray:10 5; animation:signal-flow .9s linear infinite reverse; }
@media(prefers-reduced-motion:reduce) { .nn-edge-forward,.nn-edge-backward,.ml-flow { animation:none; stroke-dasharray:none; } }