/* Biology Studio is deliberately theme-neutral: it inherits Chalk Inverse's
   paper, ink, accent, focus, and status tokens without touching world artwork. */
.biology-studio-overlay,
.biology-reference,
.biology-render {
  --biology-paper: var(--panel, #fff);
  --biology-paper-raised: var(--panel-2, #f5f7f7);
  --biology-ink: var(--ink, #19323d);
  --biology-muted: var(--muted, #5f7076);
  --biology-line: var(--line, #cad4d3);
  --biology-accent: var(--accent, #315f64);
  --biology-accent-deep: var(--accent-dark, #23474b);
  --biology-ok: var(--flag-ok, #12854f);
  --biology-warn: var(--flag-warn-deep, #8a5f12);
  --biology-bad: var(--flag-bad, #c0392b);
  color: var(--biology-ink);
  font-family: var(--note-face, "Segoe UI", system-ui, sans-serif);
}

.board-object[data-kind="biology"] { min-width: 240px; min-height: 180px; }
.board-object[data-kind="biology"] > .object-body {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  line-height: normal;
  border-radius: 12px;
  background: var(--panel, #fff);
}
.board-object[data-kind="biology"] > .object-body.biology-render { min-height: 100%; }
.board-object[data-kind="biology"] > .object-body.biology-render:has(> .biology-diagram) {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.board-object[data-kind="biology"] > .object-body.biology-render:has(> .biology-diagram) > .biology-diagram {
  flex: 1 1 0;
  width: 100%;
  height: 0;
  min-height: 0;
  max-height: none;
}

.biology-studio-overlay {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 42px);
  background: color-mix(in oklab, var(--depth, #102a34) 45%, transparent);
  backdrop-filter: blur(7px);
}

.biology-studio {
  width: min(1180px, 100%);
  max-height: min(900px, calc(100dvh - 48px));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--biology-paper);
  border: 1px solid var(--biology-line);
  border-radius: 22px;
  box-shadow: var(--shadow-lift, 0 18px 55px rgb(0 0 0 / .22));
}

.biology-studio-header,
.biology-studio-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-color: var(--biology-line);
  background: color-mix(in oklab, var(--biology-paper) 94%, var(--biology-accent) 6%);
}

.biology-studio-header { border-bottom: 1px solid var(--biology-line); }
.biology-studio-footer { justify-content: flex-end; border-top: 1px solid var(--biology-line); }
.biology-studio h1,
.biology-studio h2,
.biology-studio h3,
.biology-reference h2,
.biology-reference h3,
.biology-render h3 { margin: 0; color: var(--biology-ink); }
.biology-studio h1 { font-size: clamp(1.22rem, 2vw, 1.65rem); line-height: 1.15; }
.biology-studio h2 { font-size: 1.08rem; }
.biology-studio h3 { font-size: .93rem; }
.biology-eyebrow {
  margin: 0 0 3px;
  color: var(--biology-accent-deep);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.biology-close-button,
.biology-primary-button,
.biology-secondary-button,
.biology-text-button,
.biology-mode-tab,
.biology-reference-tab {
  min-height: 44px;
  padding: 9px 13px;
  color: var(--biology-ink);
  font: inherit;
  font-weight: 700;
  border: 1px solid var(--biology-line);
  border-radius: 10px;
  background: var(--biology-paper);
  cursor: pointer;
}

.biology-primary-button {
  color: var(--on-pen, #fff);
  border-color: var(--biology-accent-deep);
  background: var(--biology-accent-deep);
}
.biology-secondary-button { background: color-mix(in oklab, var(--biology-paper) 90%, var(--biology-accent) 10%); }
.biology-text-button { border-color: transparent; background: transparent; color: var(--biology-accent-deep); }
.biology-close-button { min-width: 66px; }
.biology-primary-button:disabled,
.biology-secondary-button:disabled { opacity: .48; cursor: not-allowed; }
.biology-studio button:hover:not(:disabled),
.biology-reference button:hover:not(:disabled) { filter: brightness(.97); border-color: var(--biology-accent); }
.biology-studio :is(button, input, select, textarea, [tabindex]):focus-visible,
.biology-reference :is(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--focus, #2a6fd2) 70%, transparent);
  outline-offset: 2px;
}

.biology-studio-workbench {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}
.biology-studio-editor,
.biology-preview-shell { min-width: 0; min-height: 0; overflow: auto; }
.biology-studio-editor { border-right: 1px solid var(--biology-line); background: var(--biology-paper); }
.biology-preview-shell {
  padding: 18px;
  background:
    linear-gradient(color-mix(in oklab, var(--biology-line) 25%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--biology-line) 25%, transparent) 1px, transparent 1px),
    var(--biology-paper-raised);
  background-size: 22px 22px;
}
.biology-mode-tabs {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--biology-line);
  background: var(--biology-paper);
}
.biology-mode-tab[aria-selected="true"],
.biology-reference-tab[aria-selected="true"] {
  color: var(--on-pen, #fff);
  border-color: var(--biology-accent-deep);
  background: var(--biology-accent-deep);
}
.biology-build-panel,
.biology-help-panel,
.biology-analysis-panel { padding: 18px; }
.biology-editor-heading { display: grid; gap: 5px; margin-bottom: 18px; }
.biology-editor-heading > p:last-child { margin: 0; color: var(--biology-muted); line-height: 1.5; }
.biology-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.biology-field {
  display: grid;
  gap: 6px;
  margin-bottom: 13px;
  color: var(--biology-ink);
  font-size: .85rem;
  font-weight: 700;
}
.biology-field-label { line-height: 1.25; }
.biology-field-hint { color: var(--biology-muted); font-weight: 500; line-height: 1.35; }
.biology-field :is(input, select, textarea),
.biology-reference-search {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 9px 11px;
  color: var(--biology-ink);
  font: inherit;
  border: 1px solid var(--biology-line);
  border-radius: 9px;
  background: var(--biology-paper);
}
.biology-field textarea { min-height: 108px; resize: vertical; font-family: ui-monospace, "Cascadia Code", monospace; line-height: 1.55; }
.biology-check-field { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: .88rem; font-weight: 700; }
.biology-check-field input { width: 20px; height: 20px; accent-color: var(--biology-accent); }
.biology-record-stack { display: grid; gap: 12px; margin-block: 14px; }
.biology-parent-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.biology-record-card,
.biology-observed-grid {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--biology-line);
  border-radius: 14px;
  background: color-mix(in oklab, var(--biology-paper) 96%, var(--biology-accent) 4%);
}
.biology-record-card legend,
.biology-observed-grid legend { padding-inline: 6px; color: var(--biology-accent-deep); font-size: var(--t-control); font-weight: 800; }
.biology-locus-card {
  min-width: 0;
  margin: 12px 0;
  padding: 12px;
  border: 1px dashed color-mix(in oklab, var(--biology-accent) 55%, var(--biology-line));
  border-radius: 10px;
}
.biology-locus-card legend { padding-inline: 5px; color: var(--biology-muted); font-size: var(--t-control); font-weight: 800; }
.biology-crossovers,
.biology-mutation-builder { margin-top: 18px; }
.biology-crossover-list,
.biology-derived-trait-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.biology-crossover-item,
.biology-derived-trait-list li { padding: 10px; border: 1px solid var(--biology-line); border-radius: 10px; background: var(--biology-paper-raised); }
.biology-crossover-item > p { margin: 0 0 8px; font-family: ui-monospace, monospace; font-size: var(--t-control); }
.biology-advanced-panel { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--biology-line); border-radius: 12px; }
.biology-advanced-panel summary { min-height: 32px; color: var(--biology-accent-deep); font-weight: 800; cursor: pointer; }
.biology-inline-status { color: var(--biology-muted); font-size: var(--t-control); }
.biology-inline-status[data-state="error"] { color: var(--biology-bad); }
.biology-inline-status[data-state="ok"] { color: var(--biology-ok); }
.biology-inline-status[data-state="warning"] { color: var(--biology-warn); }

.biology-studio-preview {
  min-height: 360px;
  margin-top: 8px;
  display: grid;
  align-content: start;
  overflow: auto;
  border: 1px solid var(--biology-line);
  border-radius: 16px;
  background: var(--biology-paper);
  box-shadow: var(--shadow-soft, 0 2px 10px rgb(0 0 0 / .08));
}
.biology-render { box-sizing: border-box; padding: 18px; }
.biology-render-title { font-size: 1.05rem; }
.biology-analysis-summary { margin: 5px 0 16px; color: var(--biology-muted); font-size: var(--t-control); line-height: 1.4; }
.biology-punnett-table { width: 100%; border-collapse: separate; border-spacing: 3px; text-align: center; }
.biology-punnett-table th,
.biology-punnett-table td { min-width: 42px; padding: 9px; border: 1px solid var(--biology-line); border-radius: 6px; }
.biology-punnett-table th,
.biology-punnett-gamete { color: var(--biology-accent-deep); background: var(--biology-paper-raised); font-weight: 800; }
.biology-punnett-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.biology-punnett-results table { width: 100%; border-collapse: collapse; font-size: var(--t-control); }
.biology-punnett-results caption { padding: 5px; color: var(--biology-accent-deep); font-weight: 800; text-align: left; }
.biology-punnett-results :is(th, td) { padding: 6px; border-bottom: 1px solid var(--biology-line); text-align: left; }
.biology-sequence-tracks { display: grid; gap: 7px; }
.biology-sequence-track { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 9px; margin: 0; }
.biology-sequence-track strong { color: var(--biology-accent-deep); font-size: var(--t-control); }
.biology-sequence-track span { overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: var(--t-control); }
.biology-sequence-composition { margin: 10px 0; color: var(--biology-muted); font-size: var(--t-control); font-weight: 700; }
.biology-sequence-codons { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; list-style: none; }
.biology-codon { padding: 7px 9px; border: 1px solid var(--biology-line); border-radius: 8px; font-family: ui-monospace, monospace; font-size: var(--t-control); }
.biology-codon[data-start="true"] { border-color: var(--biology-ok); }
.biology-codon[data-stop="true"] { border-color: var(--biology-bad); }
.biology-mutation-results,
.biology-pedigree-inference,
.biology-phylogeny-evidence { margin-top: 14px; padding: 11px 12px; border: 1px solid var(--biology-line); border-radius: 10px; background: var(--biology-paper-raised); }
.biology-mutation-results h4,
.biology-pedigree-inference h4,
.biology-phylogeny-evidence h4 { margin: 0 0 6px; color: var(--biology-accent-deep); font-size: var(--t-control); }
.biology-mutation-results ol,
.biology-pedigree-inference ul { margin: 0; padding-left: 18px; font-size: var(--t-control); line-height: 1.45; }
.biology-phylogeny-evidence p { margin: 4px 0; font-size: var(--t-control); }
.biology-diagram { width: 100%; height: auto; max-height: 520px; overflow: visible; }
.biology-chromatid,
.biology-pedigree-edge,
.biology-partnership-edge,
.biology-tree-branch { stroke: var(--biology-ink); stroke-width: 3; fill: none; }
.biology-partnership-edge { stroke-width: 2; }
.biology-locus-mark { stroke: var(--biology-accent); stroke-width: 2; }
.biology-crossover-mark,
.biology-derived-trait-point { stroke: var(--biology-paper); stroke-width: 2; fill: var(--biology-warn); }
.biology-carrier-mark { stroke: none; fill: var(--biology-ink); }
.biology-deceased-mark,
.biology-proband-mark { stroke: var(--biology-bad); stroke-width: 2; }
.biology-person,
.biology-tree-node { stroke: var(--biology-ink); stroke-width: 2; fill: var(--biology-paper); }
.biology-person.affected { fill: var(--biology-ink); }
.biology-node-label,
.biology-micro-label,
.biology-empty-label { fill: var(--biology-ink); font-family: var(--note-face, sans-serif); font-size: 14px; }
.biology-micro-label { font-size: var(--t-control); }
.biology-empty-label { fill: var(--biology-muted); }
.biology-stage-label,
.biology-time-scale { margin: 0 0 9px; color: var(--biology-accent-deep); font-size: var(--t-control); font-weight: 800; }
.biology-gamete-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.biology-gamete-chip { padding: 6px 9px; border: 1px solid var(--biology-line); border-radius: 999px; background: var(--biology-paper-raised); font-family: ui-monospace, monospace; font-size: var(--t-control); }

/* Stage 2 scientific surfaces share one restrained diagram grammar. These
   colors are semantic accents, not additions to any Eight Worlds artwork. */
.biology-cell-wall { fill: color-mix(in oklab, var(--biology-accent) 7%, transparent); stroke: var(--biology-accent-deep); stroke-width: 8; }
.biology-cell-membrane { fill: color-mix(in oklab, var(--biology-accent) 6%, var(--biology-paper)); stroke: var(--biology-accent); stroke-width: 4; }
.biology-cell-structure :is(circle, ellipse) { fill: var(--biology-paper-raised); stroke: var(--biology-accent-deep); stroke-width: 2.5; }
.biology-cell-mitochondrion ellipse { fill: color-mix(in oklab, #dc8f67 24%, var(--biology-paper)); }
.biology-cell-chloroplast ellipse { fill: color-mix(in oklab, #76a86e 28%, var(--biology-paper)); }
.biology-cell-nucleus circle { fill: color-mix(in oklab, #8e79bb 22%, var(--biology-paper)); }
.biology-membrane-inset line { stroke: var(--biology-accent-deep); stroke-width: 5; stroke-dasharray: 3 7; }
.biology-transporter { fill: var(--biology-paper); stroke: var(--biology-accent); stroke-width: 2; }

.biology-gel-field { fill: color-mix(in oklab, #44679a 20%, var(--biology-paper)); stroke: var(--biology-line); stroke-width: 2; }
.biology-gel-well { fill: color-mix(in oklab, var(--biology-ink) 72%, transparent); }
.biology-gel-band { stroke: color-mix(in oklab, var(--biology-ink) 88%, #5d78cf); stroke-linecap: round; }
.biology-molecule-line { fill: none; stroke: var(--biology-ink); stroke-width: 5; stroke-linecap: round; }
.biology-cut-site { fill: var(--biology-warn); stroke: var(--biology-warn); stroke-width: 3; }
.biology-primer { stroke: var(--biology-accent); stroke-width: 7; stroke-linecap: round; }
.biology-reverse-primer { stroke: color-mix(in oklab, var(--biology-accent) 55%, #a95775); }
.biology-primer-arrow { fill: none; stroke: currentColor; stroke-width: 3; }
.biology-product-label { fill: var(--biology-accent-deep); font-family: var(--note-face, sans-serif); font-size: 15px; font-weight: 800; }

.biology-chart-axis { stroke: var(--biology-ink); stroke-width: 2; }
.biology-fit-line { stroke: var(--biology-accent-deep); stroke-width: 3; }
.biology-observed-point { fill: var(--biology-paper); stroke: var(--biology-accent-deep); stroke-width: 2.5; }
.biology-series-1 { stroke: #a05e69; }
.biology-series-2 { stroke: #8066a8; }
.biology-series-3 { stroke: #b17e3d; }
.biology-protein-backbone { stroke: var(--biology-ink); stroke-width: 6; stroke-linecap: round; }
.biology-protein-region { fill: color-mix(in oklab, var(--biology-accent) 30%, var(--biology-paper)); stroke: var(--biology-accent-deep); stroke-width: 2; }
.biology-region-signal-peptide { fill: color-mix(in oklab, #d98d93 30%, var(--biology-paper)); }
.biology-region-transmembrane { fill: color-mix(in oklab, #d3a94b 30%, var(--biology-paper)); }
.biology-region-active-site { fill: color-mix(in oklab, #7cae77 30%, var(--biology-paper)); }
.biology-mutation-marker { fill: none; stroke: var(--biology-bad); stroke-width: 3; stroke-dasharray: 4 3; }
.biology-cycle-edge { stroke: color-mix(in oklab, var(--biology-accent-deep) 75%, var(--biology-line)); stroke-width: 2.5; fill: none; }
.biology-cycle-arrowhead { fill: var(--biology-accent-deep); stroke: none; }
.biology-cycle-node circle { fill: var(--biology-paper); stroke: var(--biology-accent-deep); stroke-width: 2.5; }
.biology-cycle-node text { font-size: var(--t-control); font-weight: 750; pointer-events: none; }
.biology-cycle-compartment { margin: 8px 0 0; color: var(--biology-muted); font-size: var(--t-control); font-weight: 750; text-align: center; }

/* Stage 3 ecology and population surfaces use the same quiet scientific
   grammar as the earlier tools: ink, paper, one semantic accent, and data
   tables that remain readable when diagrams are printed or resized. */
.biology-series-line { stroke: var(--biology-accent-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.biology-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 10px; padding: 0; list-style: none; color: var(--biology-muted); font-size: var(--t-control); font-weight: 750; }
.biology-chart-legend li::before { display: inline-block; width: 18px; height: 3px; margin: 0 7px 3px 0; border-radius: 3px; background: var(--biology-accent-deep); content: ""; }
.biology-chart-legend .biology-series-1::before { background: #a05e69; }
.biology-population-table,
.biology-predator-prey-table,
.biology-survivorship-table,
.biology-hardy-table,
.biology-pyramid-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: var(--t-control);
}
.biology-population-table caption,
.biology-predator-prey-table caption,
.biology-survivorship-table caption,
.biology-hardy-table caption,
.biology-pyramid-table caption { padding: 6px 0; color: var(--biology-accent-deep); font-weight: 800; text-align: left; }
.biology-population-table :is(th, td),
.biology-predator-prey-table :is(th, td),
.biology-survivorship-table :is(th, td),
.biology-hardy-table :is(th, td),
.biology-pyramid-table :is(th, td) { padding: 6px 8px; border-bottom: 1px solid var(--biology-line); text-align: right; font-variant-numeric: tabular-nums; }
.biology-population-table :is(th, td):first-child,
.biology-predator-prey-table :is(th, td):first-child,
.biology-survivorship-table :is(th, td):first-child,
.biology-hardy-table :is(th, td):first-child,
.biology-pyramid-table :is(th, td):first-child { text-align: left; }
.biology-population-table tbody,
.biology-predator-prey-table tbody,
.biology-survivorship-table tbody { content-visibility: auto; contain-intrinsic-size: 0 320px; }
.biology-classification-note,
.biology-uncertainty-note,
.biology-network-summary { margin: 10px 0 0; color: var(--biology-muted); font-size: var(--t-control); line-height: 1.45; }
.biology-mark-recapture-result { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--biology-line); border-radius: 14px; background: var(--biology-paper-raised); }
.biology-mark-recapture-result h4,
.biology-mark-recapture-result p { margin: 0; }
.biology-result-value { color: var(--biology-accent-deep); font-size: clamp(1.7rem, 5vw, 3.2rem); font-weight: 850; font-variant-numeric: tabular-nums; }
.biology-equation,
.biology-substitution { font-family: ui-monospace, "Cascadia Code", monospace; font-size: var(--t-control); overflow-wrap: anywhere; }
.biology-trophic-pyramid { display: grid; gap: 12px; }
.biology-pyramid-levels { display: grid; justify-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.biology-pyramid-levels li { width: min(92%, calc(44% + var(--pyramid-index, 0) * 10%)); box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--biology-accent-deep); border-radius: 9px; background: color-mix(in oklab, var(--biology-accent) 12%, var(--biology-paper)); text-align: center; font-size: var(--t-control); font-weight: 750; }
.biology-food-edge,
.biology-ecology-flux { fill: none; stroke: color-mix(in oklab, var(--biology-accent-deep) 76%, var(--biology-line)); stroke-width: 2.5; }
.biology-network-arrowhead { fill: var(--biology-accent-deep); stroke: none; }
.biology-food-node circle { fill: var(--biology-paper); stroke: var(--biology-accent-deep); stroke-width: 2.5; }
.biology-food-node.biology-role-producer circle { fill: color-mix(in oklab, #6e9b66 18%, var(--biology-paper)); }
.biology-food-node.biology-role-herbivore circle { fill: color-mix(in oklab, #c1a555 18%, var(--biology-paper)); }
.biology-food-node.biology-role-carnivore circle { fill: color-mix(in oklab, #a05e69 18%, var(--biology-paper)); }
.biology-food-node text { font-size: var(--t-control); font-weight: 750; pointer-events: none; }
.biology-ecology-reservoir rect { fill: var(--biology-paper); stroke: var(--biology-accent-deep); stroke-width: 2.5; }
.biology-ecology-reservoir text { font-size: var(--t-control); font-weight: 750; pointer-events: none; }
.biology-errors,
.biology-warnings,
.biology-assumptions { margin-top: 12px; padding: 11px 13px; border: 1px solid var(--biology-line); border-radius: 10px; background: var(--biology-paper-raised); }
.biology-errors h4,
.biology-warnings h4,
.biology-assumptions h4 { margin: 0 0 6px; color: var(--biology-accent-deep); font-size: var(--t-control); }
.biology-errors ul,
.biology-warnings ul,
.biology-assumptions ul { margin: 0; padding-left: 18px; font-size: var(--t-control); line-height: 1.45; }
.biology-errors { border-color: color-mix(in oklab, var(--biology-bad) 42%, var(--biology-line)); }
.biology-warnings { border-color: color-mix(in oklab, var(--biology-warn) 42%, var(--biology-line)); }

/* Stage 4 physiology, microscopy, methods, and shared scientific labels. */
.biology-neuron-dendrite,
.biology-neuron-axon,
.biology-neuron-terminal { fill: none; stroke: var(--biology-accent-deep); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.biology-neuron-terminal { stroke-width: 3.5; }
.biology-neuron-soma { fill: color-mix(in oklab, var(--biology-accent) 22%, var(--biology-paper)); stroke: var(--biology-accent-deep); stroke-width: 3; }
.biology-neuron-nucleus { fill: color-mix(in oklab, #8e79bb 28%, var(--biology-paper)); stroke: var(--biology-accent-deep); stroke-width: 2; }
.biology-neuron-myelin { fill: color-mix(in oklab, #d3a94b 26%, var(--biology-paper)); stroke: var(--biology-accent-deep); stroke-width: 1.5; }
.biology-action-potential-trace { fill: none; stroke: var(--biology-accent-deep); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.biology-action-potential-threshold { stroke: var(--biology-warn); stroke-width: 2; stroke-dasharray: 7 5; }
.biology-antibody-heavy,
.biology-antibody-light { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.biology-antibody-heavy { stroke: var(--biology-accent-deep); stroke-width: 15; }
.biology-antibody-light { stroke: color-mix(in oklab, var(--biology-accent) 70%, var(--biology-accent-deep)); stroke-width: 9; }
.biology-antibody-binding-site { fill: var(--biology-paper-raised); stroke: var(--biology-warn); stroke-width: 3; }
.biology-antigen-shape { fill: color-mix(in oklab, #7cae77 24%, var(--biology-paper)); stroke: var(--biology-accent-deep); stroke-width: 2.5; }
.biology-epitope-shape { fill: color-mix(in oklab, #d98d93 28%, var(--biology-paper)); stroke: var(--biology-accent-deep); stroke-width: 2; }
.biology-antibody-binding-link { stroke: var(--biology-warn); stroke-width: 2.5; stroke-dasharray: 5 4; }
.biology-microscopy-field { fill: color-mix(in oklab, var(--biology-accent) 8%, var(--biology-paper-raised)); stroke: var(--biology-line); stroke-width: 2; }
.biology-scale-bar-line { stroke: var(--biology-ink); stroke-width: 8; }
.biology-scale-bar-label { fill: var(--biology-ink); font-family: var(--note-face, sans-serif); font-size: 15px; font-weight: 800; }
.biology-neuron-phase-table,
.biology-scale-bar-table,
.biology-experiment-variable-table,
.biology-experiment-group-table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--t-control); }
.biology-neuron-phase-table caption,
.biology-scale-bar-table caption,
.biology-experiment-variable-table caption,
.biology-experiment-group-table caption { padding: 7px 0; color: var(--biology-accent-deep); font-weight: 800; text-align: left; }
.biology-neuron-phase-table :is(th, td),
.biology-scale-bar-table :is(th, td),
.biology-experiment-variable-table :is(th, td),
.biology-experiment-group-table :is(th, td) { min-width: 90px; padding: 7px 9px; border-bottom: 1px solid var(--biology-line); text-align: left; }
.biology-experiment-plan { display: grid; gap: 12px; }
.biology-experiment-plan h4 { margin: 0; color: var(--biology-accent-deep); font-size: 1.02rem; }
.biology-experiment-hypothesis,
.biology-experiment-measurement { margin: 0; padding: 11px 13px; border: 1px solid var(--biology-line); border-radius: 10px; background: var(--biology-paper-raised); color: var(--biology-muted); font-size: var(--t-control); line-height: 1.5; }
.biology-label-leader { fill: none; stroke: var(--biology-accent-deep); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.biology-scientific-label rect { fill: var(--biology-paper); stroke: var(--biology-accent-deep); stroke-width: 1.5; }
.biology-label-anchor { fill: var(--biology-warn); stroke: var(--biology-paper); stroke-width: 2; }
.biology-linked-image-warning { margin: 10px 0 0; padding: 10px 12px; border: 1px solid color-mix(in oklab, var(--biology-warn) 46%, var(--biology-line)); border-radius: 9px; background: var(--biology-paper-raised); color: var(--biology-muted); font-size: var(--t-control); line-height: 1.45; }

.biology-gel-table,
.biology-fragment-table,
.biology-enzyme-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: var(--t-control); }
.biology-gel-table caption,
.biology-fragment-table caption,
.biology-enzyme-table caption { padding: 5px 0; color: var(--biology-accent-deep); font-weight: 800; text-align: left; }
.biology-gel-table :is(th, td),
.biology-fragment-table :is(th, td),
.biology-enzyme-table :is(th, td) { padding: 7px; border-bottom: 1px solid var(--biology-line); text-align: left; }
.biology-gel-table th,
.biology-fragment-table th,
.biology-enzyme-table th { width: 28%; color: var(--biology-accent-deep); }
.biology-reference-provenance { margin-top: 9px; color: var(--biology-muted); font-size: var(--t-control); }
.biology-reference-provenance summary { min-height: 30px; color: var(--biology-accent-deep); font-weight: 800; cursor: pointer; }
.biology-reference-provenance ul { margin: 5px 0 0; padding-left: 18px; line-height: 1.4; }

.biology-analysis-panel { display: grid; gap: 12px; }
.biology-analysis-heading { display: grid; gap: 4px; margin-bottom: 2px; }

.biology-handoff-confirm {
  position: absolute;
  z-index: 4;
  inset: 74px 18px 76px auto;
  width: min(440px, calc(100% - 36px));
  overflow: auto;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--biology-line);
  border-radius: 16px;
  background: var(--biology-paper);
  box-shadow: var(--shadow-lift, 0 18px 55px rgb(0 0 0 / .22));
}
.biology-observed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 14px; }
.biology-observed-grid .biology-field { margin: 0; }
.biology-handoff-preview { min-height: 62px; padding: 12px; border-radius: 10px; background: var(--biology-paper-raised); color: var(--biology-muted); font-size: var(--t-control); line-height: 1.45; }
.biology-handoff-preview[data-state="ok"] { color: var(--biology-ok); }
.biology-handoff-preview[data-state="error"] { color: var(--biology-bad); }
.biology-handoff-actions,
.biology-reference-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.biology-reference { min-height: 100%; background: var(--biology-paper); }
.biology-reference-heading { padding: 16px 16px 8px; }
.biology-reference-search { width: calc(100% - 32px); margin: 8px 16px 12px; }
.biology-reference-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 5px; padding: 0 16px 12px; border-bottom: 1px solid var(--biology-line); }
.biology-reference-tab { min-width: 0; padding-inline: 7px; font-size: var(--t-control); }
.biology-reference-results { display: grid; gap: 10px; padding: 14px 16px 24px; }
.biology-reference-count { margin: 0; color: var(--biology-muted); font-size: var(--t-control); font-weight: 700; }
.biology-reference-card { padding: 13px; border: 1px solid var(--biology-line); border-radius: 12px; background: var(--biology-paper-raised); }
.biology-reference-card h3 { font-size: .98rem; }
.biology-reference-subtitle { margin: 3px 0 9px; color: var(--biology-accent-deep); font-size: var(--t-control); font-weight: 800; }
.biology-reference-card ul { margin: 0; padding-left: 17px; color: var(--biology-muted); font-size: var(--t-control); line-height: 1.45; }
.biology-reference-empty { color: var(--biology-muted); }

@media (max-width: 760px) {
  .biology-studio-overlay { padding: 0; place-items: stretch; backdrop-filter: none; }
  .biology-studio {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .biology-studio-workbench { display: block; overflow: auto; }
  .biology-studio-editor { overflow: visible; border-right: 0; border-bottom: 1px solid var(--biology-line); }
  .biology-preview-shell { overflow: visible; }
  .biology-parent-stack,
  .biology-field-grid,
  .biology-punnett-results { grid-template-columns: 1fr; }
  .biology-studio-footer { overflow-x: auto; justify-content: stretch; }
  .biology-studio-footer button { flex: 1 0 auto; }
  .biology-handoff-confirm { position: fixed; inset: 68px 10px 72px; width: auto; }
}

@media (max-width: 420px) {
  .biology-studio-header,
  .biology-studio-footer { padding: 10px 12px; }
  .biology-build-panel,
  .biology-help-panel,
  .biology-analysis-panel,
  .biology-preview-shell { padding: 14px; }
  .biology-observed-grid { grid-template-columns: 1fr; }
  .biology-reference-tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .biology-reference-tab { flex: 0 0 auto; min-width: 108px; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .biology-studio *, .biology-reference * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  .biology-studio-overlay,
  .biology-reference-actions,
  .biology-mode-tabs,
  .biology-studio-footer,
  .biology-close-button,
  .biology-handoff-confirm { display: none !important; }
  .biology-render { break-inside: avoid; color: #111; background: #fff; }
  .biology-render :is(text, .biology-node-label, .biology-micro-label) { fill: #111; }
  .biology-render :is(line, circle, rect, path) { stroke: #111; }
}

/* Concept navigation and direct model controls share the Biology shell. */
.biology-concept-navigation { display:flex; flex-wrap:wrap; gap:8px; padding:10px 18px; border-bottom:1px solid var(--n84); }
.biology-concept-navigation select { flex:1 1 180px; min-width:0; min-height:42px; color:var(--ink); background:var(--paper); font:inherit; border:1px solid var(--n84); border-radius:var(--r-soft); }
.biology-concept-controls { display:grid; gap:8px; padding:12px; margin:0 0 14px; border:1px solid var(--accent-ui); border-radius:var(--r-soft); }
.biology-concept-controls input[type=range] { width:100%; accent-color:var(--accent-ui); min-height:32px; }
.biology-concept-controls output { color:var(--ink); font-variant-numeric:tabular-nums; }
.biology-transport-particle, .biology-explore-point { fill:var(--accent-ui); stroke:var(--ink); }
.biology-transport-arrow { fill:var(--ink); font-size:48px; }
.biology-explore-curve { stroke:var(--accent-ui); stroke-width:3px; }

.biology-crossover-mark { touch-action:none; cursor:ns-resize; }
