/* bio.days.by on top of design/days.css. Diagram colours are tokens in all three themes. */
:root, :root[data-theme="light"] {
  --art: #c0262d; --art-soft: #fbe2e3;        /* arterial blood */
  --ven: #3646b4; --ven-soft: #e4e7fa;        /* venous blood */
  --organ: #a84a1f; --organ-soft: #fbe8dc;    /* digestive canal */
  --gland: #3d6e1d; --gland-soft: #e5f1da;    /* glands */
  --valve: #4b5563;
  --bone: #f3ecdc; --bone-line: #8a7a55; --air: #f6d5d8; --air-line: #b24a57; --urine: #f2dfb4; --urine-line: #8a6a12;
  --nerve: #f5e08a; --nerve-line: #8a6c00; --skin: #f1ece6; --skin-line: #b9aea1;
  --sel: #d9480f;  /* the chosen organ or structure */
}
:root[data-theme="dark"] {
  --art: #ff7b7f; --art-soft: #3b1a1d; --ven: #9aa7ff; --ven-soft: #1d2246;
  --organ: #f2a27c; --organ-soft: #3a2417; --gland: #a5d47f; --gland-soft: #1e2d15; --valve: #c7ccd6; --bone: #3a3426; --bone-line: #d9c89a; --air: #3d1f24; --air-line: #f29aa5; --urine: #3b3016; --urine-line: #e8c76a; --nerve: #3d3510; --nerve-line: #f2d75c; --skin: #1f2228; --skin-line: #4a505c; --sel: #ff9f43;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --art: #ff7b7f; --art-soft: #3b1a1d; --ven: #9aa7ff; --ven-soft: #1d2246;
    --organ: #f2a27c; --organ-soft: #3a2417; --gland: #a5d47f; --gland-soft: #1e2d15; --valve: #c7ccd6; --bone: #3a3426; --bone-line: #d9c89a; --air: #3d1f24; --air-line: #f29aa5; --urine: #3b3016; --urine-line: #e8c76a; --nerve: #3d3510; --nerve-line: #f2d75c; --skin: #1f2228; --skin-line: #4a505c; --sel: #ff9f43;
  }
}
:root[data-theme="contrast"] {
  --art: #ff9a9d; --art-soft: #2a0e10; --ven: #b4bdff; --ven-soft: #10153a;
  --organ: #ffbb98; --organ-soft: #2a170c; --gland: #bfe79c; --gland-soft: #13200b; --valve: #ffffff;
  --bone: #2b2618; --bone-line: #f1e2b5; --air: #2c1418; --air-line: #ffb4bd; --urine: #2b2410; --urine-line: #ffdf80; --nerve: #2b2508; --nerve-line: #ffe470; --skin: #000000; --skin-line: #8b93a3; --sel: #ffb35c;
}

.plain { list-style: none; padding: 0; margin: 0; }
.measure { max-width: var(--container-narrow); }
.jump { gap: var(--space-2) var(--space-4); }
.jump a { display: inline-flex; min-height: var(--tap); align-items: center; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.label { font-weight: 600; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.facts li { line-height: var(--leading); }
.hero-grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.3fr 1fr; } }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent); font-weight: 800; border: var(--border-width) solid var(--accent); }

/* ---------- Hero: a pulse line draws itself ---------- */
.hero-pulse { width: 100%; max-width: 26rem; justify-self: center; }
.ecg { fill: none; stroke: var(--art); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1;
  animation: ecg 3.2s var(--ease) infinite; }
@keyframes ecg { 0% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }

/* ---------- Diagrams ---------- */
.diagram { display: block; width: 100%; height: auto; }
.diagram .part { cursor: pointer; outline: none; }
.diagram .part > * { stroke-width: 2; transition: fill var(--duration) var(--ease), stroke-width var(--duration) var(--ease); }
.diagram .ven > * { fill: var(--ven-soft); stroke: var(--ven); }
.diagram .ven.vessel > * { fill: var(--ven); }
.diagram .art > * { fill: var(--art-soft); stroke: var(--art); }
.diagram .art.vessel > * { fill: var(--art); }
.diagram .thick > * { stroke-width: 6; }
.diagram .wall > * { fill: var(--surface-2); stroke: var(--border-strong); }
.diagram .valve .leaf { stroke: var(--valve); stroke-width: 5; stroke-linecap: round; fill: none; transition: transform 240ms var(--ease); transform-box: fill-box; }
.diagram .valve .hit { fill: transparent; stroke: none; }
.diagram .organ > * { fill: var(--organ-soft); stroke: var(--organ); }
.diagram .gland > * { fill: var(--gland-soft); stroke: var(--gland); }
.diagram .outline { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 6 6; }
.diagram .region > * { stroke-width: 2; }
.diagram .r1 > * { fill: color-mix(in srgb, var(--chart-1) 22%, transparent); stroke: var(--chart-1); }
.diagram .r2 > * { fill: color-mix(in srgb, var(--chart-2) 22%, transparent); stroke: var(--chart-2); }
.diagram .r3 > * { fill: color-mix(in srgb, var(--chart-3) 22%, transparent); stroke: var(--chart-3); }
.diagram .r4 > * { fill: color-mix(in srgb, var(--chart-4) 22%, transparent); stroke: var(--chart-4); }
.diagram .r5 > * { fill: color-mix(in srgb, var(--chart-5, var(--chart-1)) 22%, transparent); stroke: var(--chart-5, var(--chart-1)); }
.diagram .r6 > * { fill: color-mix(in srgb, var(--chart-6, var(--chart-2)) 22%, transparent); stroke: var(--chart-6, var(--chart-2)); }
.diagram .r7 > * { fill: color-mix(in srgb, var(--chart-7, var(--chart-3)) 22%, transparent); stroke: var(--chart-7, var(--chart-3)); }
.diagram .folia { fill: none !important; }
.diagram .lbl { fill: var(--text); font-size: 13px; font-family: var(--font-sans); pointer-events: none; }
.diagram .lead { stroke: var(--muted); stroke-width: 1.2; fill: none; }
.diagram .lbl.small { font-size: 12px; fill: var(--muted); }
.no-labels .lbls { display: none; }
/* Hover, keyboard focus, chosen part */
@media (hover: hover) { .diagram .part:hover > * { stroke-width: 4; } }
.diagram .part:focus-visible > *, .diagram .part.is-active > * { stroke: var(--focus); stroke-width: 4; }
.diagram .part.is-right > * { stroke: var(--success); stroke-width: 5; }
.diagram .part.is-wrong > * { stroke: var(--danger); stroke-width: 5; }

/* ---------- Explorer ---------- */
.explorer { display: flex; flex-direction: column; gap: var(--space-3); }
.explorer-bar { justify-content: space-between; }
.explorer-body { display: grid; gap: var(--space-4); align-items: start; }
.explorer-figure { max-width: 34rem; width: 100%; justify-self: center; }
@media (min-width: 900px) {
  .explorer-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .explorer-panel { position: sticky; top: var(--space-5); }
}

/* ---------- Simulations ---------- */
.sim { padding-top: var(--space-2); }
.sim + .sim { border-top: var(--border-width) solid var(--border); padding-top: var(--space-6); }
.sim-body { display: grid; gap: var(--space-4); align-items: start; }
.sim-figure, .sim-body > .diagram { max-width: 32rem; width: 100%; justify-self: center; }
@media (min-width: 900px) { .sim-body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.phase-text { min-height: 6rem; }
.phases { display: flex; gap: 4px; }
.phases li { flex: var(--w) 1 0; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border-radius: var(--radius-1);
  background: var(--surface-2); font-size: var(--step--1); min-width: 0; }
.phases li b { overflow-wrap: anywhere; font-weight: 600; }
.phases li span { color: var(--muted); }
.phases li.is-now { background: var(--accent); color: var(--accent-text); }
.phases li.is-now span { color: inherit; }
/* Heart cycle: which chambers contract, which valves are open, where blood flows */
.sim-heart .chamber > * { transform-box: fill-box; transform-origin: center; transition: transform 300ms var(--ease); }
.sim-heart.p-atria .atrium > *, .sim-heart.p-ventricles .ventricle > * { transform: scale(0.9); }
.sim-heart .flow { fill: none; stroke: var(--text); stroke-width: 4; stroke-dasharray: 8 10; stroke-linecap: round; opacity: 0; marker-end: none; }
.sim-heart .ven-flow { stroke: var(--ven); } .sim-heart .art-flow { stroke: var(--art); }
.sim-heart.p-atria .f-atria, .sim-heart.p-ventricles .f-ventricles, .sim-heart.p-diastole .f-diastole { opacity: 1; animation: flow 0.9s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.sim-heart .semilunar .leaf { stroke: var(--valve); stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transition: transform 240ms var(--ease); }
/* Valves: closed — the leaves meet; open — they turn aside. Atrioventricular valves are open except during ventricular
   systole; semilunar valves open only then. */
.sim-heart .valve .leaf.l { transform-origin: left top; }
.sim-heart .valve .leaf.r { transform-origin: right top; }
.sim-heart:not(.p-ventricles) .valve .leaf.l { transform: rotate(50deg); }
.sim-heart:not(.p-ventricles) .valve .leaf.r { transform: rotate(-50deg); }
.sim-heart .semilunar .leaf.l { transform-origin: left bottom; }
.sim-heart .semilunar .leaf.r { transform-origin: right bottom; }
.sim-heart.p-ventricles .semilunar .leaf.l { transform: rotate(-45deg); }
.sim-heart.p-ventricles .semilunar .leaf.r { transform: rotate(45deg); }
/* Circles of circulation */
.circles .organ-box { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 2; }
.circles .ven-box { fill: var(--ven-soft); stroke: var(--ven); stroke-width: 2; }
.circles .art-box { fill: var(--art-soft); stroke: var(--art); stroke-width: 2; }
.circles .route { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.circles .ven-line { stroke: var(--ven); } .circles .art-line { stroke: var(--art); } .circles .hidden-route { stroke: none; }
.circles .route.is-now { stroke-width: 8; }
.circles .blood-dot { fill: var(--ven); stroke: var(--bg); stroke-width: 2; }
.circles .blood-dot.art { fill: var(--art); }
.circles .lbl { font-size: 14px; }
/* Path of food */
.sim-digest .food { fill: var(--accent); stroke: var(--bg); stroke-width: 3; transition: cx 700ms var(--ease), cy 700ms var(--ease); }
.stations { display: flex; flex-direction: column; gap: var(--space-2); }
.stations li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-1); border: var(--border-width) solid var(--border); color: var(--muted); }
.stations li b { color: var(--text); }
.stations li.is-now { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.stations li.is-done { color: var(--text); }
/* Reflex arc */
.reflex .skin { fill: none; stroke: var(--organ); stroke-width: 4; }
.reflex .receptor { fill: var(--organ); }
.reflex .muscle { fill: var(--art-soft); stroke: var(--art); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform 200ms var(--ease); }
.reflex .muscle.is-on { transform: scaleX(0.82) scaleY(1.25); }
.reflex .white-matter { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 2; }
.reflex .gray-matter { fill: color-mix(in srgb, var(--muted) 35%, transparent); stroke: var(--muted); }
.reflex .ganglion { fill: var(--gland-soft); stroke: var(--gland); stroke-width: 2; }
.reflex .neuron { fill: none; stroke-width: 4; stroke-linecap: round; }
.reflex .sensory { stroke: var(--chart-1); } .reflex .inter { stroke: var(--chart-3); } .reflex .motor { stroke: var(--chart-2); }
.reflex .brain-path { stroke: var(--muted); stroke-dasharray: 6 6; }
.reflex .soma { fill: var(--text); }
.reflex .cut path { stroke: var(--danger); stroke-width: 5; stroke-linecap: round; }
.reflex .impulse { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.outcome { display: grid; gap: var(--space-2); margin: 0; }
.outcome div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-1); background: var(--surface-2); }
.outcome dd { margin: 0; font-weight: 700; }

/* ---------- Trainer ---------- */
.questions { counter-reset: none; }
.question legend { font-weight: 600; font-size: var(--step-0); padding: 0; }
.q-num { color: var(--muted); }
.option { align-items: flex-start; }
.order-list { list-style: none; padding: 0; margin: 0; }
.order-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-1); background: var(--bg); }
.order-text { overflow-wrap: anywhere; }
.order-btns { display: flex; flex: none; }
.match-row { display: grid; gap: var(--space-1) var(--space-3); align-items: center; }
@media (min-width: 640px) { .match-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.spot { max-width: 24rem; }
.question.is-right { border-color: var(--success); }
.question.is-wrong { border-color: var(--danger); }
.q-verdict { font-weight: 700; margin: 0; }
.is-right .q-verdict { color: var(--success); }
.is-wrong .q-verdict { color: var(--danger); }
.question .is-correct { color: var(--success); font-weight: 600; }
.question .is-mistake { color: var(--danger); text-decoration: line-through; }
.order-item.is-correct { border-color: var(--success); }
.order-item.is-mistake { border-color: var(--danger); text-decoration: none; }
.trainer-progress { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: var(--space-2) 0; margin: 0; }
.section-alt .trainer-progress { background: var(--surface); }

/* ---------- Anatomy section ---------- */
.system-pic { display: block; max-width: 14rem; margin-inline: auto; }
.system-pic .diagram .part { cursor: inherit; }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ---------- Human atlas ---------- */
.atlas { display: flex; flex-direction: column; gap: var(--space-3); }
.atlas-systems { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sys-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-3); border-radius: var(--radius-full);
  border: var(--border-width) solid var(--border-strong); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.sys-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg); outline: 1px solid var(--border-strong); flex: none; }
.dot-all { background: conic-gradient(var(--art) 0 25%, var(--bone-line) 0 50%, var(--organ) 0 75%, var(--nerve-line) 0); }
.dot-circ { background: var(--art); } .dot-skel { background: var(--bone-line); } .dot-resp { background: var(--air-line); }
.dot-dig { background: var(--organ); } .dot-excr { background: var(--urine-line); } .dot-nerv { background: var(--nerve-line); } .dot-endo { background: var(--gland); }
.atlas-main { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) { .atlas-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .atlas-panel { position: sticky; top: var(--space-5); } }
.atlas-stage { position: relative; height: min(78vh, 760px); min-height: 420px; border: var(--border-width) solid var(--border); border-radius: var(--radius-3);
  background: var(--surface); overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.atlas-stage:active { cursor: grabbing; }
.atlas-stage:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
.atlas-svg { width: 100%; height: 100%; display: block; }
.atlas-zoom { position: absolute; right: var(--space-3); top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.atlas-zoom .btn { font-size: var(--step-1); line-height: 1; }
.atlas-scale { position: absolute; left: var(--space-3); top: var(--space-3); margin: 0; padding: 2px var(--space-2); border-radius: var(--radius-1);
  background: var(--bg); border: var(--border-width) solid var(--border); font-variant-numeric: tabular-nums; }
.atlas-tip { margin: 0; }
@media (min-width: 900px) { .atlas-tip { grid-column: 1; grid-row: 2; } .atlas-panel { grid-row: 1 / span 2; grid-column: 2; } }
.organ-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.crumbs { margin: 0; }

/* Figure and organs: each system in its colours; strokes keep their width on zoom except vessels and nerves */
.atlas-svg .body path { fill: var(--skin); stroke: var(--skin-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.atlas-svg .organ { cursor: pointer; transition: opacity 250ms var(--ease); }
.atlas-svg .organ > *, .atlas-svg .organ g > * { vector-effect: non-scaling-stroke; }
.atlas-svg .skel path, .atlas-svg .skel rect, .atlas-svg .skel ellipse, .atlas-svg .skel circle { fill: var(--bone); stroke: var(--bone-line); stroke-width: 1.2; }
.atlas-svg .skel .rib, .atlas-svg .skel .finger { fill: none; stroke: var(--bone-line); stroke-width: 3; vector-effect: none; stroke-linecap: round; }
.atlas-svg .skel .hole { fill: var(--skin); }
.atlas-svg .resp > * > *, .atlas-svg .resp path, .atlas-svg .resp rect { fill: var(--air); stroke: var(--air-line); stroke-width: 1.2; }
.atlas-svg [data-organ="bronchi"] path, .atlas-svg [data-organ="diaphragm"] path { fill: none; stroke-width: 3; vector-effect: none; stroke-linecap: round; }
.atlas-svg .dig path, .atlas-svg .dig rect, .atlas-svg .dig ellipse { fill: var(--organ-soft); stroke: var(--organ); stroke-width: 1.2; }
.atlas-svg [data-organ="pancreas"] path { fill: var(--gland-soft); stroke: var(--gland); }
.atlas-svg [data-organ="liver"] path, .atlas-svg [data-organ="gallbladder"] ellipse { fill: var(--gland-soft); stroke: var(--gland); }
.atlas-svg .excr path { fill: var(--urine); stroke: var(--urine-line); stroke-width: 1.2; }
.atlas-svg [data-organ="ureters"] path { fill: none; stroke-width: 2.5; vector-effect: none; }
.atlas-svg .endo path, .atlas-svg .endo circle { fill: var(--gland-soft); stroke: var(--gland); stroke-width: 1.2; }
.atlas-svg .circ .art, .atlas-svg .circ .art path { fill: none; stroke: var(--art); stroke-width: 3; vector-effect: none; stroke-linecap: round; stroke-linejoin: round; }
.atlas-svg .circ .ven, .atlas-svg .circ .ven path { fill: none; stroke: var(--ven); stroke-width: 3; vector-effect: none; stroke-linecap: round; stroke-linejoin: round; }
.atlas-svg [data-organ="aorta"] path { stroke-width: 6; }
.atlas-svg [data-organ="vena_cava"] path { stroke-width: 5; }
.atlas-svg .heart-shape { fill: var(--art-soft); stroke: var(--art); stroke-width: 1.5; }
.atlas-svg .nerv path, .atlas-svg .nerv rect { fill: var(--nerve); stroke: var(--nerve-line); stroke-width: 1.2; }
.atlas-svg [data-organ="nerves"] path { fill: none; stroke: var(--nerve-line); stroke-width: 1.6; vector-effect: none; stroke-linecap: round; }
.atlas-svg [data-organ="brain"] .fissure { fill: none; }
/* One system chosen: the others fade and do not take clicks */
.atlas:not([data-sys="all"]) .organ { opacity: 0.1; pointer-events: none; }
.atlas[data-sys="circ"] .organ.circ, .atlas[data-sys="skel"] .organ.skel, .atlas[data-sys="resp"] .organ.resp, .atlas[data-sys="dig"] .organ.dig,
.atlas[data-sys="excr"] .organ.excr, .atlas[data-sys="nerv"] .organ.nerv, .atlas[data-sys="endo"] .organ.endo { opacity: 1; pointer-events: auto; }
.atlas.zoomed[data-sys="circ"] .organ.circ:not(.is-picked), .atlas.zoomed[data-sys="skel"] .organ.skel:not(.is-picked),
.atlas.zoomed[data-sys="resp"] .organ.resp:not(.is-picked), .atlas.zoomed[data-sys="dig"] .organ.dig:not(.is-picked),
.atlas.zoomed[data-sys="excr"] .organ.excr:not(.is-picked), .atlas.zoomed[data-sys="nerv"] .organ.nerv:not(.is-picked),
.atlas.zoomed[data-sys="endo"] .organ.endo:not(.is-picked) { opacity: 0.45; }
@media (hover: hover) { .atlas-svg .organ:hover :is(path, rect, circle, ellipse) { stroke: var(--sel); } }
/* The chosen organ: its outline in the selection colour, the same width at any zoom; the rest of the body steps back */
.atlas-svg .organ.is-picked :is(path, rect, circle, ellipse) { stroke: var(--sel) !important; }
.atlas-svg .organ.is-picked :is(path, rect, circle, ellipse):not([class]) { stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.atlas-svg .organ.is-picked .art, .atlas-svg .organ.is-picked .ven, .atlas-svg .organ.is-picked .rib { stroke: var(--sel) !important; }
.atlas.zoomed .atlas-svg .organ { opacity: 0.55; }
.atlas.zoomed:not([data-sys="all"]) .atlas-svg .organ:not(.is-picked) { opacity: 0.08; }
.atlas-svg .dpart.is-picked :is(path, rect, circle, ellipse) { stroke: var(--sel) !important; stroke-width: 3px !important; vector-effect: non-scaling-stroke !important; }
/* Zoom layers */
.atlas-svg .lod { opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease), visibility 0s 300ms; pointer-events: none; }
.atlas-svg .lod.on { opacity: 1; visibility: visible; transition: opacity 300ms var(--ease); pointer-events: auto; }
.atlas-svg .marker { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: zoom-in; animation: beacon 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes beacon { 50% { transform: scale(1.5); opacity: 0.7; } }
.atlas-svg .dpart { cursor: pointer; }
.atlas-svg .dlbl { fill: var(--text); font-family: var(--font-sans); pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 0.6; }
.atlas-svg .detail path, .atlas-svg .detail rect, .atlas-svg .detail circle, .atlas-svg .detail ellipse { vector-effect: none; }
.atlas-svg .hit { fill: transparent; stroke: none; }
/* Bone section */
.atlas-svg .periost { fill: var(--bone-line); stroke: none; }
.atlas-svg .compact { fill: var(--bone); stroke: var(--bone-line); stroke-width: 1; }
.atlas-svg .cavity { fill: var(--urine); stroke: var(--urine-line); stroke-width: 1; }
.atlas-svg .spongy { fill: color-mix(in srgb, var(--art) 30%, var(--bone)); stroke: none; }
.atlas-svg .trabecula { fill: none; stroke: var(--bone-line); stroke-width: 1.5; }
.atlas-svg .cartilage { fill: var(--ven-soft); stroke: var(--ven); stroke-width: 0.8; }
.atlas-svg .apoph { fill: var(--bone); stroke: var(--bone-line); stroke-width: 1.5; }
.atlas-svg .growth { stroke: var(--ven); stroke-width: 3; stroke-dasharray: 4 3; }
/* Heart section */
.atlas-svg .ven-fill { fill: var(--ven-soft); stroke: var(--ven); stroke-width: 1.5; }
.atlas-svg .art-fill { fill: var(--art-soft); stroke: var(--art); stroke-width: 1.5; }
.atlas-svg .art-fill.thick { stroke-width: 4; }
.atlas-svg .valve-line { stroke: var(--valve); stroke-width: 2.5; stroke-linecap: round; }
/* Blood */
.atlas-svg .drop { fill: var(--bg); stroke: var(--art); stroke-width: 2; }
.atlas-svg .plasma { fill: color-mix(in srgb, var(--urine) 70%, var(--bg)); }
.atlas-svg .ery { fill: var(--art); } .atlas-svg .ery-c { fill: color-mix(in srgb, var(--art) 55%, var(--bg)); }
.atlas-svg .leuko { fill: color-mix(in srgb, var(--ven) 25%, var(--bg)); stroke: var(--ven); stroke-width: 1; }
.atlas-svg .leuko-n { fill: var(--ven); }
.atlas-svg .plt { fill: var(--valve); }
/* Kidney, nephron */
.atlas-svg .cortex { fill: var(--urine); stroke: var(--urine-line); stroke-width: 1.5; }
.atlas-svg .pyr { fill: color-mix(in srgb, var(--art) 35%, var(--urine)); stroke: var(--urine-line); stroke-width: 0.8; }
.atlas-svg .pelvis { fill: var(--bg); stroke: var(--urine-line); stroke-width: 1.2; }
.atlas-svg .ureter { fill: none; stroke: var(--urine-line); stroke-width: 4; }
.atlas-svg .art-l { stroke: var(--art); stroke-width: 4; } .atlas-svg .ven-l { stroke: var(--ven); stroke-width: 4; }
.atlas-svg .glom { fill: var(--art-soft); stroke: var(--art); stroke-width: 2; }
.atlas-svg .caps { fill: none; stroke: var(--urine-line); stroke-width: 3; }
.atlas-svg .tub { fill: none; stroke: var(--urine-line); stroke-width: 4; stroke-linecap: round; }
.atlas-svg .duct { fill: none; stroke: var(--gland); stroke-width: 5; }
/* Brain section */
.atlas-svg .detail .r1 { fill: color-mix(in srgb, var(--chart-1) 25%, var(--bg)); stroke: var(--chart-1); stroke-width: 0.8; }
.atlas-svg .detail .r2 { fill: color-mix(in srgb, var(--chart-2) 25%, var(--bg)); stroke: var(--chart-2); stroke-width: 0.8; }
.atlas-svg .detail .r3 { fill: color-mix(in srgb, var(--chart-3) 25%, var(--bg)); stroke: var(--chart-3); stroke-width: 0.8; }
.atlas-svg .detail .r4 { fill: color-mix(in srgb, var(--chart-4) 25%, var(--bg)); stroke: var(--chart-4); stroke-width: 0.8; }
.atlas-svg .detail .r5 { fill: color-mix(in srgb, var(--art) 25%, var(--bg)); stroke: var(--art); stroke-width: 0.8; }
.atlas-svg .detail .r6 { fill: color-mix(in srgb, var(--gland) 25%, var(--bg)); stroke: var(--gland); stroke-width: 0.8; }
/* Neuron */
.atlas-svg .dend, .atlas-svg .term { fill: none; stroke: var(--nerve-line); stroke-width: 2.5; stroke-linecap: round; }
.atlas-svg .soma { fill: var(--nerve); stroke: var(--nerve-line); stroke-width: 2; }
.atlas-svg .nuc { fill: var(--nerve-line); }
.atlas-svg .axon { stroke: var(--nerve-line); stroke-width: 2.5; }
.atlas-svg .myelin rect { fill: var(--bone); stroke: var(--bone-line); stroke-width: 1; }
.atlas-svg .ranv circle { fill: var(--accent); }
.atlas-svg .syn { fill: var(--accent); }
/* Alveoli, villus */
.atlas-svg .bronch { fill: none; stroke: var(--air-line); stroke-width: 6; stroke-linecap: round; }
.atlas-svg .alv circle { fill: var(--air); stroke: var(--air-line); stroke-width: 1.5; }
.atlas-svg .cap-ven { fill: none; stroke: var(--ven); stroke-width: 2.5; }
.atlas-svg .cap-art { fill: none; stroke: var(--art); stroke-width: 2.5; }
.atlas-svg .epi { fill: var(--organ-soft); stroke: var(--organ); stroke-width: 3; }
.atlas-svg .micro { stroke: var(--organ); stroke-width: 1.5; }
.atlas-svg .lacteal { stroke: var(--gland); stroke-width: 3; stroke-dasharray: 5 3; }

/* Name of the chosen element on the picture; «Пояснения» off hides it and the labels of details */
.atlas-tag { position: absolute; left: 0; top: 0; z-index: 2; padding: 4px 10px; border-radius: var(--radius-1); max-width: 70%;
  background: var(--text); color: var(--bg); font-size: var(--step--1); font-weight: 600; line-height: 1.3; pointer-events: none;
  box-shadow: var(--shadow); transition: transform 120ms linear; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atlas-notes { position: absolute; left: var(--space-3); bottom: var(--space-3); margin: 0; padding: 2px var(--space-2); border-radius: var(--radius-1);
  background: var(--bg); border: var(--border-width) solid var(--border); }
.no-notes .atlas-svg .dlbl { display: none; }
/* Type of the element */
.chip { align-self: flex-start; display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--step--1); font-weight: 600;
  background: var(--surface-2); color: var(--text); border: var(--border-width) solid var(--border-strong); }
.chip-circ { background: var(--art-soft); border-color: var(--art); } .chip-skel { background: var(--bone); border-color: var(--bone-line); }
.chip-resp { background: var(--air); border-color: var(--air-line); } .chip-dig { background: var(--organ-soft); border-color: var(--organ); }
.chip-excr { background: var(--urine); border-color: var(--urine-line); } .chip-nerv { background: var(--nerve); border-color: var(--nerve-line); }
.chip-endo { background: var(--gland-soft); border-color: var(--gland); }
.organs-wrap summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }
.organs-wrap .organ-list { margin-top: var(--space-2); }

/* Phones: systems in one scrolling row; picture and card share the screen (bio.js scrolls the atlas up on a pick) */
@media (max-width: 899px) {
  .atlas-systems { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: thin; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
  .sys-btn { flex: none; }
  .atlas-main { gap: var(--space-2); }
  .atlas-stage { height: 52svh; min-height: 300px; scroll-margin-top: 76px; }  /* below the sticky site header */
  .atlas-panel { position: sticky; bottom: 0; z-index: 3; max-height: 38svh; overflow-y: auto; box-shadow: var(--shadow); background: var(--bg);
    padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .atlas-panel .crumbs { display: none; }
  .atlas-panel .card-title { font-size: var(--step-1); }
  .atlas-tip { display: none; }
}

/* ---------- 3D atlas ---------- */
.stage3d { cursor: grab; background: radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--surface) 70%, var(--bg)), var(--bg)); }
.atlas-canvas, .micro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.atlas-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--muted); z-index: 1; pointer-events: none; }
.atlas-loader[hidden] { display: none; }
.micro3d { position: absolute; inset: 0; z-index: 4; background: #2a0508; }  /* the scene sets its own colours */
.micro-bar { position: absolute; left: var(--space-3); right: var(--space-3); top: var(--space-3); z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.micro-title { color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); flex: 1 1 auto; }
.micro-speed { display: inline-flex; gap: var(--space-1); }
.in-micro .atlas-zoom, .in-micro .atlas-notes, .in-micro .atlas-tag { display: none; }
.micro-slider { display: inline-flex; align-items: center; gap: var(--space-2); color: #fff; font-size: var(--step--1); text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); }
.micro-slider input { width: 9rem; accent-color: var(--accent); }