/* =========================================================
   The Interactive Heart — stylesheet

   THESIS: The heart is a specimen held under a school laboratory instrument,
     not a picture inside an app. Refuses the dark glassmorphic edtech
     dashboard — blurred bars, gradient buttons, pill tabs, emoji, an
     uppercase eyebrow over every block — and its cream-and-serif opposite.
   OWN-WORLD: Painted instrument grey (#c8c6bb) panel, screened condensed caps
     legends in near-black, controls that latch physically proud, 10px
     indicator lamps that snap, red and blue 4mm terminal posts, dark screen
     fields only where something is read, 3px radii, depth exactly one
     highlight over one shadow line. Three type registers: condensed caps for
     legends, tabular mono for measurements, a text serif for prose on a
     printed card.
   STORY: A student recognises the object before reading a word of it, sets the
     instrument up, then operates on the specimen and watches the lamps answer.
   FIRST VIEWPORT: Top rail — spec plate with pulse lamp left, six numbered
     function switches centre, utility switches right. Below: a deep bezel
     around the dark reading window holding the heart, terminal-post key
     screened beneath it; the working column of milled wells to its right.
   FORM: School laboratory instrument, candidate 6 of my grounded list,
     staged as a drawn-registration console. Seed key a1d337ba.

   Colours: red = oxygenated, blue = deoxygenated. Nothing else is ever
   red or blue. Amber holds and points; a green lamp confirms.
   ========================================================= */

:root{
  /* THE CASE. Petrol enamel, the colour test and lab gear was actually painted
     — Tektronix, Marconi, Avo. The first build used grey for the whole object,
     which is the softest possible reading of this world and looked like admin
     chrome. The case is now a committed field that owns most of the surface,
     and the working panels are cream inserts bolted into it. */
  --fascia:#1b2c48;
  --fascia-hi:#2b4066;
  --fascia-lo:#121f34;
  --fascia-ink:#f2efe6;
  --fascia-ink-2:#a9b8cf;

  /* the cream panel inserts, where every control and all reading lives */
  --panel:#d5d2c4;
  --panel-hi:#e6e3d5;
  /* the milled recess: a clear step darker than the panel, still light enough
     that secondary ink clears 4.5:1 on it */
  --panel-lo:#c6c3b4;
  --panel-edge:#f2efe2;
  --card:#efeade;
  --chassis:#131f33;
  --chassis-dk:#0c1524;

  /* the only two text values on the panel. Both clear 4.5:1 on all three
     painted surfaces — panel, milled recess, and printed card. */
  --ink:#1e201c;
  --ink-2:#46483f;
  --rule:#a9a79c;
  --rule-dk:#8e8c82;

  /* reading windows. Kept in the navy family so the cross-section and the
     3D model sit in them exactly as built. */
  --screen:#0d1420;
  --screen-2:#151f31;
  --screen-ink:#dfe6f0;
  --screen-ink-2:#9fb0c6;
  --graticule:rgba(255,183,51,.13);
  --graticule-mj:rgba(255,183,51,.26);

  /* signal colours — each has exactly one job */
  --oxy:#cf3038;
  --oxy-lit:#ff5f66;
  --deoxy:#2b6ed0;
  --deoxy-lit:#5c9dfb;
  --amber:#6f4708;
  --amber-lit:#e8a63a;
  --lamp-lit:#ffb733;
  --lamp-off:#7e8079;
  --trace:#ffb733;

  /* Eleven type steps, no more. Three legend sizes for screened panel text,
     three body sizes for prose on a card, two title sizes, three data sizes
     for measurements. Sized a touch large because one of the three rooms this
     runs in is a projector at the front of a classroom. */

  /* H&E STAIN — the violet-magenta a biology section actually comes out of a
     microscope stained with haematoxylin and eosin. It is the register the
     instrument uses to POINT: a held stage, a marked answer, a focus ring, a
     callout. It replaces the old amber attention colour, which is now the
     lamp, and it is the subject's own material rather than an accent. */
  --stain:#7b2d6b;
  --stain-lit:#e46bc4;
  --stain-deep:#4a1440;

  /* one display step, so the first thing on screen has some scale to it */
  --fs-display:clamp(1.5rem, 2.6vw, 2.15rem);

  --fs-legend-sm:.64rem;
  --fs-legend:.72rem;
  --fs-legend-lg:.80rem;
  --fs-body-sm:.82rem;
  --fs-body:.90rem;
  --fs-body-lg:.98rem;
  --fs-title:1.08rem;
  --fs-title-lg:1.24rem;
  --fs-data:1rem;
  --fs-data-lg:1.85rem;
  --fs-data-xl:3rem;

  --r:3px;
  --r-well:4px;
  --r-screen:2px;
  --r-travel:1px;

  /* Pressed steel. Every edge in the system is one of these four: the light
     catching a raised face, the dark under it, the shadow inside a milled
     recess, or the deep shadow inside a bezel. Nothing else casts. */
  --edge-hi:rgba(255,255,255,.38);
  --edge-lo:rgba(0,0,0,.18);
  --recess:rgba(0,0,0,.30);
  --recess-deep:rgba(0,0,0,.55);
  --lamp-seat:rgba(0,0,0,.48);

  --proud:inset 0 1px 0 var(--panel-edge), 0 1px 0 rgba(0,0,0,.30);
  --pressed:inset 0 1px 2px rgba(0,0,0,.34);
  --well:inset 0 1px 2px rgba(0,0,0,.28), inset 0 -1px 0 var(--panel-edge);
  --bezel:inset 0 2px 5px var(--recess-deep);
  --flush:inset 0 1px 0 var(--edge-hi);
  --raised:inset 0 1px 0 var(--edge-hi), 0 1px 0 var(--edge-lo);
  --seated:inset 0 1px 2px var(--lamp-seat);

  --font-legend:"Arial Narrow","Roboto Condensed","Liberation Sans Narrow","Nimbus Sans Narrow",Arial,system-ui,sans-serif;
  --font-data:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --font-read:"Iowan Old Style",Charter,"Bitstream Charter",Georgia,"Times New Roman",serif;

  --focus:#1e201c;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100%;
  font-family:var(--font-read);
  font-size:16px;
  color:var(--fascia-ink);
  background:var(--fascia);
  -webkit-font-smoothing:antialiased;
}

/* a legend is screen-printed onto the panel: condensed, caps, tracked */
.legend,
.stat-label,.quick-title,.next-title,.block-title,.stage-kicker,.step-count,
.q-kicker,.info-eyebrow,.ecg-key,.key-item,.slider-label,.vpill,.fill,
.tab,.chip,.vbtn,.btn,.opt,.phase-valves i,.quiz-score,.round-num,.ord,
.c3d-hint,.c3d-readout{
  font-family:var(--font-legend);
}

/* a measurement holds its column */
.stat-val,.big,.big-total,.pips,.phase-no,.ord,.quiz-score,.tab-no,
.step-num,.data,.c3d-readout,#pump-laps,.round-num{
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* one focus ring, keyboard only, high contrast on painted grey */
:where(button,[href],input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
.part:focus-visible{outline:3px solid var(--stain-lit); outline-offset:3px}
.part:focus-visible path,.part:focus-visible ellipse,.part:focus-visible circle{
  filter:brightness(1.3) drop-shadow(0 0 6px var(--stain-lit));
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--panel); padding:10px 16px;
  font-family:var(--font-legend); font-weight:700; text-transform:uppercase;
  letter-spacing:.07em;
}
.skip-link:focus{left:0}
.noscript-note{
  margin:0; padding:14px 20px; text-align:center;
  background:var(--amber-lit); color:var(--ink);
  font-family:var(--font-legend); font-weight:700; letter-spacing:.04em;
}

/* =========================================================
   THE TOP RAIL
   ========================================================= */
/* the rail is the same casting as the panel, so it stops where the panel stops */
.topbar{
  display:flex; align-items:stretch; gap:18px; flex-wrap:wrap;
  max-width:1760px; margin:0 auto;
  padding:12px 20px;
  background:var(--fascia);
  border-bottom:1px solid var(--chassis-dk);
  box-shadow:inset 0 1px 0 var(--fascia-hi), 0 1px 0 rgba(0,0,0,.30);
  position:sticky; top:0; z-index:40;
}


/* SUBJECT MARKS — a stained cell for biology, a ring for chemistry, drawn in
   the same monoline grammar as everything else in a reading window. They are
   wayfinding, not decoration: they name which subject a region or a plate
   belongs to, so a teacher scanning the board sorts it without reading. */
.mark{flex:0 0 auto; width:19px; height:19px; display:block}
.mark circle,.mark path{fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.mark .fill{fill:currentColor; stroke:none}
.brand .mark{color:var(--stain)}

/* ---- the specification plate ---- */
.brand{
  display:flex; align-items:center; gap:9px; min-width:0;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--rule-dk);
  border-radius:var(--r);
  box-shadow:var(--well);
  padding:7px 13px 7px 11px;
}
/* the identity element is a lamp that does a real job: it flashes with the
   beat, so it reports that the instrument is running and how fast */
.brand-mark{
  position:relative; flex:0 0 auto;
  width:16px; height:16px; border-radius:50%;
  background:var(--lamp-off);
  box-shadow:var(--seated);
  border:1px solid var(--chassis-dk);
}
.brand-mark.lit{
  background:var(--lamp-lit);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 0 4px var(--lamp-lit);
}
.brand-text{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brand-text strong{
  font-family:var(--font-legend); font-size:var(--fs-body-lg); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ink);
}
.brand-text small{
  font-family:var(--font-legend); font-size:var(--fs-legend-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.10em; color:var(--ink-2);
}
.brand-text small i{
  font-family:var(--font-read); font-style:italic; text-transform:none;
  letter-spacing:.01em; font-weight:400; font-size:1.12em; color:var(--stain);
}

/* ---- the six function switches ---- */
.tabs{display:flex; gap:5px; flex:1; flex-wrap:wrap; justify-content:center; align-items:center}
.tab{
  appearance:none; cursor:pointer; position:relative;
  display:flex; align-items:center; gap:8px;
  min-height:42px; padding:9px 13px 9px 10px;
  background:var(--panel);
  color:var(--ink-2);
  border:1px solid var(--rule-dk);
  border-radius:var(--r);
  font-size:var(--fs-legend-lg); font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  box-shadow:var(--flush);
  transition:background .12s, color .12s, box-shadow .12s;
}
/* the numbered position: a real function selector, and it happens to name
   the order the six activities are meant to be worked through */
.tab-no{
  flex:0 0 auto; width:17px; height:17px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--chassis-dk); color:var(--panel-edge);
  border:1px solid #2b2a26;
  box-shadow:var(--seated);
  font-size:var(--fs-legend-sm); font-weight:700; line-height:1;
}
.tab:hover{background:var(--panel-hi); color:var(--ink)}
.tab:active{box-shadow:var(--pressed)}
/* drawn: the switch stands proud of the panel and its lamp is lit */
.tab.is-active{
  background:var(--panel-hi);
  color:var(--ink);
  border-color:var(--chassis);
  box-shadow:var(--proud);
}
.tab.is-active .tab-no{
  background:var(--lamp-lit); color:#2e1c02;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 0 4px var(--lamp-lit);
}

/* ---- utility switches ---- */
.topbar-tools{display:flex; gap:5px; align-items:center}
.chip{
  appearance:none; cursor:pointer;
  min-height:36px; padding:8px 13px;
  font-size:var(--fs-legend); font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-2); background:var(--panel);
  border:1px solid var(--rule-dk); border-radius:var(--r);
  box-shadow:var(--flush);
  transition:background .12s, color .12s, box-shadow .12s;
}
.chip:hover{background:var(--panel-hi); color:var(--ink)}
.chip:active{box-shadow:var(--pressed)}
.chip[aria-pressed="true"]{
  background:var(--panel-hi); color:var(--ink);
  border-color:var(--chassis); box-shadow:var(--proud);
}
/* the lamp on a latched utility switch */
.chip[aria-pressed]::before{
  content:""; display:inline-block; vertical-align:1px;
  width:7px; height:7px; margin-right:7px; border-radius:50%;
  background:var(--lamp-off); border:1px solid var(--chassis-dk);
}
.chip[aria-pressed="true"]::before{
  background:var(--lamp-lit); border-color:#8a5f14;
  box-shadow:0 0 4px var(--lamp-lit);
}

/* =========================================================
   PANEL LAYOUT
   ========================================================= */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:14px;
  padding:20px;
  align-items:start;
  max-width:1720px; margin:0 auto;
}

/* =========================================================
   THE READING WINDOW
   ========================================================= */
.stage{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--chassis-dk);
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--panel-edge), 0 1px 0 var(--fascia-hi);
  padding:14px;
  min-width:0;
  scroll-margin-top:84px;
}
.stage-head{
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  justify-content:space-between; padding:0 2px 12px;
}
.stage-head-text{min-width:0}
/* the first thing on screen, at a size a teenager would call confident */
.stage-head h1{
  margin:0; font-family:var(--font-legend);
  font-size:var(--fs-display); font-weight:700; line-height:1.05;
  text-transform:uppercase; letter-spacing:.02em; color:var(--ink);
}
.stage-head p{
  margin:4px 0 0; font-family:var(--font-read);
  color:var(--ink-2); font-size:var(--fs-body); line-height:1.5; max-width:62ch;
}

/* the view selector: two more latching switches */
.viewswitch{display:flex; gap:5px}
.vbtn{
  appearance:none; cursor:pointer;
  min-height:38px; padding:8px 15px;
  font-size:var(--fs-legend); font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-2); background:var(--panel);
  border:1px solid var(--rule-dk); border-radius:var(--r);
  box-shadow:var(--flush);
  transition:background .12s, color .12s, box-shadow .12s;
}
.vbtn:hover{background:var(--panel-hi); color:var(--ink)}
.vbtn:active{box-shadow:var(--pressed)}
.vbtn.is-active{
  background:var(--panel-hi); color:var(--ink);
  border-color:var(--chassis); box-shadow:var(--proud);
}

/* the bezel: the deepest recess on the panel. It wraps only what is read —
   never a control, or the control would be dark-on-dark. */
.svg-wrap,.c3d-screen{
  position:relative; width:100%;
  background:var(--screen);
  border:8px solid var(--chassis-dk);
  border-radius:var(--r-screen);
  box-shadow:var(--bezel), 0 1px 0 var(--panel-edge);
}
.svg-wrap::after,.c3d-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(223,230,240,.10);
}
.svg-wrap.hidden,.c3d-wrap.hidden{display:none}
.c3d-wrap{position:relative; width:100%}

/* the plate number screened onto the bezel, as any figure on a plate carries */
.window-plate{
  position:absolute; z-index:2; left:0; right:0; bottom:-7px; margin:0;
  display:flex; gap:14px; justify-content:space-between; align-items:baseline;
  padding:0 4px; pointer-events:none;
  font-family:var(--font-legend); font-size:var(--fs-legend-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.11em; color:var(--fascia-ink-2);
}
.window-plate span:first-child{font-family:var(--font-data); color:var(--fascia-ink)}

#heart{width:100%; height:auto; display:block; max-height:74vh; touch-action:manipulation}

/* beneath the window: the terminal-post key and the orientation legend */
.stage-foot{
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  flex-wrap:wrap; margin-top:12px; padding-top:11px;
  border-top:1px solid var(--rule);
}
.key{display:flex; gap:24px; flex-wrap:wrap}
.key-item{
  display:flex; align-items:flex-start; gap:9px;
  font-size:var(--fs-legend); font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink); line-height:1.35;
}
.key-item em{
  display:block; margin-top:3px;
  font-family:var(--font-read); font-style:normal; text-transform:none;
  letter-spacing:0; font-weight:400; font-size:var(--fs-legend-lg); color:var(--ink-2);
}
/* a 4mm terminal post, which is what this legend is in life */
.dot{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  display:inline-block; margin-top:-1px;
  border:1px solid var(--chassis-dk);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.35);
  position:relative;
}
.dot::after{
  content:""; position:absolute; left:50%; top:50%;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:rgba(0,0,0,.55);
}
.dot-red{background:var(--oxy)}
.dot-blue{background:var(--deoxy)}

.orient-note{
  margin:0; font-family:var(--font-read); font-size:var(--fs-legend-lg); line-height:1.55;
  color:var(--ink-2); max-width:46ch; text-align:right;
}
.orient-note strong{color:var(--ink); font-weight:700}

/* =========================================================
   THE SPECIMEN — unchanged inside its window
   ========================================================= */
#heart text{font-family:var(--font-legend); pointer-events:none; user-select:none}

.ctx rect{fill:rgba(38,55,84,.34); stroke:#33486e; stroke-width:1.5; stroke-dasharray:7 6}
.ctx-part path{fill:url(#gLung); stroke:#4a6c88; stroke-width:2.5; opacity:.85; transition:opacity .18s}
.ctx-part:hover path{opacity:1}
.ctx-label{fill:#b9cbe4; font-size:22px; font-weight:700; text-anchor:middle; letter-spacing:.4px}
#ctx-body .ctx-label,#ctx-head .ctx-label{fill:#93a9c8; font-size:21px}

#myo{fill:url(#gMuscle); stroke:#5e2429; stroke-width:3}
[data-part="septum"] path{fill:url(#gSeptum); stroke:#5a2026; stroke-width:3.5}
.chamber path{stroke-width:2.5}
[data-part="right-atrium"] path,[data-part="right-ventricle"] path{fill:url(#gDeoxy); stroke:#1e3f78}
[data-part="left-atrium"] path,[data-part="left-ventricle"] path{fill:url(#gOxy); stroke:#7d161d}

.coronary{fill:none; stroke:#ff8f4a; stroke-width:6; stroke-linecap:round; opacity:.95}
.coronary-thin{stroke-width:4}

.vessel path{fill:none; stroke-width:38; stroke-linecap:round; stroke-linejoin:round}
.vessel .vessel-thin{stroke-width:17}
.v-deoxy{stroke:#3f76cf}
.v-oxy{stroke:#cc3a42}

/* no CSS transition on the leaflets: their angle is eased in JavaScript and
   rewritten every frame, and a transition chasing a moving target stutters */
.valve .leaflet{fill:#f3e2e4; stroke:#8b5f63; stroke-width:1.6}
.valve .annulus{stroke:#8b5f63; stroke-width:3; stroke-linecap:round; opacity:.55}
.hit{fill:transparent; stroke:none}

#layer-conduction .fibre{fill:none; stroke:var(--stain-lit); stroke-width:4; stroke-linecap:round; opacity:.55; stroke-dasharray:5 7}
#layer-conduction .node{fill:var(--stain-lit); stroke:#5c4212; stroke-width:2}
#layer-conduction .cond-label{fill:var(--stain-lit); font-size:19px; font-weight:700; text-anchor:middle}
#layer-conduction.hidden{display:none}
.cond-pulse{fill:#fff7dd; opacity:.95}

.part{cursor:pointer}
.part path,.part ellipse,.part circle,.part line{transition:filter .16s, opacity .16s}
.part:hover path,.part:hover ellipse:not(.hit){filter:brightness(1.28) saturate(1.1)}
.part.is-selected path,.part.is-selected ellipse:not(.hit){
  filter:brightness(1.3) drop-shadow(0 0 10px var(--stain-lit));
}
.part.is-selected .coronary{stroke:#ffd777}
.part.is-hovered path,.part.is-hovered ellipse:not(.hit){filter:brightness(1.28) saturate(1.1)}
.part.is-hovered .coronary{stroke:#ffc98a}
.dimmed{opacity:.26; transition:opacity .2s}

#layer-labels.hidden{display:none}
.lbl-line{stroke:#7f95b6; stroke-width:2; fill:none; stroke-dasharray:4 4}
.lbl-dot{fill:var(--stain-lit)}
.lbl-bg{fill:rgba(9,15,26,.92); stroke:#3a507a; stroke-width:1.4}
.lbl-text{fill:#dce7f6; font-size:21px; font-weight:700}

.focus-ring{fill:none; stroke:var(--stain-lit); stroke-width:5; stroke-dasharray:12 9; opacity:.95}
.focus-ring.correct{stroke:var(--lamp-lit)}
.focus-ring.wrong{stroke:var(--stain-lit)}

/* chambers scale about their own centre; no transition, the scale is
   recomputed every frame from the cardiac cycle */
.chamber{transform-box:fill-box; transform-origin:center}
.chamber.is-squeezing path{filter:brightness(1.35) saturate(1.15)}

/* the halo is baked into a gradient: forty moving elements each carrying an
   SVG filter will not hold 60fps */
.blood{stroke:none}
.blood-oxy{fill:url(#gBloodOxy)}
.blood-deoxy{fill:url(#gBloodDeoxy)}

#layer-pump{pointer-events:none}
.drop{stroke-width:2; transition:opacity .3s}
.drop-oxy{fill:#ff4d55; stroke:#ffb3b7}
.drop-deoxy{fill:#3d8bf5; stroke:#a9cdff}

#layer-arrows{pointer-events:none}
.flow-arrow{
  fill:none; stroke-width:9; stroke-linecap:round;
  stroke-dasharray:1 30; opacity:.65;
  animation:dashrun 1.1s linear infinite;
}
.arrow-oxy{stroke:#ffd0d2}
.arrow-deoxy{stroke:#cfe2ff}
@keyframes dashrun{to{stroke-dashoffset:-31}}

/* =========================================================
   3D READING WINDOW
   ========================================================= */
#heart3d{
  display:block; width:100%; height:min(64vh,600px);
  cursor:grab; touch-action:none;
  /* the model's own field, unchanged */
  background:radial-gradient(70% 70% at 50% 30%, #16233d 0%, #0a1122 75%);
}
#heart3d.grabbing{cursor:grabbing}
.c3d-hint{
  position:absolute; top:10px; left:12px; margin:0; z-index:2;
  font-size:var(--fs-legend); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--screen-ink-2); background:rgba(8,13,24,.8);
  padding:5px 9px; border:1px solid #2b3d5e; pointer-events:none;
}
.c3d-readout{
  position:absolute; top:10px; right:12px; z-index:2;
  font-size:var(--fs-legend-lg); font-weight:700; letter-spacing:.03em;
  color:var(--trace); background:rgba(8,13,24,.85);
  padding:5px 10px; border:1px solid #2b5f48;
  pointer-events:none; opacity:0; transition:opacity .12s;
}
.c3d-readout.show{opacity:1}

/* the teaching overlay: leader lines onto the cut face, like a plate */
.c3d-labels{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}
.c3dlbl-line{fill:none; stroke:var(--screen-ink-2); stroke-width:1; opacity:.75}
.c3dlbl-dot{fill:var(--screen-ink)}
.c3dlbl-text{
  fill:var(--screen-ink); font-family:var(--font-legend);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  paint-order:stroke; stroke:rgba(8,13,24,.85); stroke-width:3px;
}
.c3dlbl-note{
  fill:var(--stain-lit); font-family:var(--font-legend);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  paint-order:stroke; stroke:rgba(8,13,24,.9); stroke-width:3.5px;
}
/* the measurement brackets across each ventricle wall */
.c3dwall-bar{stroke:var(--stain-lit); stroke-width:2}
.c3dwall-tick{stroke:var(--stain-lit); stroke-width:2}
.c3dwall-text{
  fill:var(--stain-lit); font-family:var(--font-legend);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  paint-order:stroke; stroke:rgba(8,13,24,.9); stroke-width:3.5px;
}
.c3d-tools{
  display:grid; grid-template-columns:auto minmax(240px,1fr); gap:14px 22px;
  align-items:start; padding:12px 2px 0; margin-top:12px;
  border-top:1px solid var(--rule);
}
.c3d-views{display:flex; gap:5px; flex-wrap:wrap; align-content:start}
.c3d-checks{display:flex; gap:16px; flex-wrap:wrap; margin-top:8px}
.c3d-checks .switch{margin:0}

/* =========================================================
   THE WORKING COLUMN
   ========================================================= */
.panel{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--chassis-dk);
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--panel-edge), 0 1px 0 var(--fascia-hi);
  padding:14px;
  min-height:520px;
  position:sticky; top:82px;
  max-height:calc(100vh - 96px);
  overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--chassis) var(--panel-lo);
}
.panel::-webkit-scrollbar{width:11px}
.panel::-webkit-scrollbar-track{background:var(--panel-lo)}
.panel::-webkit-scrollbar-thumb{background:var(--chassis); border:2px solid var(--panel-lo)}

.pane{display:none}
.pane.is-active{display:block}

.pane-title{
  margin:0 0 3px; font-family:var(--font-legend);
  font-size:var(--fs-title); font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink);
}
.pane-lead{
  margin:0 0 16px; font-family:var(--font-read);
  color:var(--ink-2); font-size:var(--fs-body); line-height:1.6; max-width:64ch;
}
.pane-lead strong,.pane-lead b{color:var(--ink)}
.pane-note{font-family:var(--font-read); color:var(--ink-2); font-size:var(--fs-body-sm); line-height:1.6}

/* a plain group on the panel: no recess, because a recess is for controls and
   a bezel must never sit inside one */
.block{margin-bottom:12px}

/* ---- a milled well holding a group of controls ---- */
.control-block{
  background:var(--panel-lo);
  border-radius:var(--r-well);
  box-shadow:var(--well);
  padding:13px 13px 14px;
  margin-bottom:12px;
}
.block-title{
  margin:0 0 3px; font-size:var(--fs-legend); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ink);
}
.block-note{
  margin:0 0 11px; font-family:var(--font-read);
  font-size:var(--fs-body-sm); color:var(--ink-2); line-height:1.55;
}
.block-note b{color:var(--ink)}

/* ---- the printed instruction card: the only home for prose ---- */
.info-card{
  background:var(--card);
  border:1px solid var(--rule-dk);
  border-radius:var(--r);
  box-shadow:0 1px 0 var(--panel-edge);
  padding:15px 16px 16px;
}
.info-eyebrow{
  margin:0 0 8px; padding-bottom:7px;
  border-bottom:1px solid var(--rule);
  font-size:var(--fs-legend); font-weight:700;
  text-transform:uppercase; letter-spacing:.11em; color:var(--ink-2);
}
.info-title{
  margin:0 0 3px; font-family:var(--font-legend);
  font-size:var(--fs-title-lg); font-weight:700; line-height:1.15;
  text-transform:uppercase; letter-spacing:.045em; color:var(--ink);
}
.info-tagline{
  margin:0 0 13px; font-family:var(--font-read); font-style:italic;
  color:var(--ink-2); font-size:var(--fs-body); line-height:1.4;
}
.info-lead{margin:0 0 12px; font-size:var(--fs-body-lg); line-height:1.62; color:var(--ink)}
.info-body{margin:0 0 14px; font-size:var(--fs-body); line-height:1.68; color:var(--ink-2)}
.info-lead b,.info-body b{color:var(--ink); font-weight:700}
.info-lead i,.info-body i{font-style:italic}

/* specimen classification, stamped rather than tinted */
.badge-row{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 13px}
.badge{
  font-family:var(--font-legend); font-size:var(--fs-legend-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  padding:4px 9px; border:1px solid var(--rule-dk); border-radius:var(--r);
  color:var(--ink); background:transparent;
  display:inline-flex; align-items:center; gap:6px;
}
.badge-oxy::before,.badge-deoxy::before{
  content:""; width:8px; height:8px; border-radius:50%;
  border:1px solid var(--chassis-dk);
}
.badge-oxy::before{background:var(--oxy)}
.badge-deoxy::before{background:var(--deoxy)}
.badge-group{background:var(--panel-lo)}

/* worth knowing: a hairline rule and an amber marker, never a colour bar */
.fact-box{
  margin:0 0 14px; padding:11px 0 0;
  border-top:1px solid var(--rule);
}
.fact-box h4{
  margin:0 0 7px; font-family:var(--font-legend);
  font-size:var(--fs-legend-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.11em; color:var(--stain);
}
.fact-box ul{margin:0; padding:0; list-style:none}
.fact-box li{
  position:relative; padding-left:15px; margin-bottom:6px;
  font-size:var(--fs-body-sm); line-height:1.6; color:var(--ink-2);
}
.fact-box li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--stain);
}
.fact-box li:last-child{margin-bottom:0}

.hint-list{margin:0 0 16px; padding-left:18px}
.hint-list li{font-size:var(--fs-body); line-height:1.62; color:var(--ink-2); margin-bottom:6px}
.hint-list strong{color:var(--ink)}

.quick-title,.next-title{
  margin:0 0 8px; font-size:var(--fs-legend-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.11em; color:var(--ink-2);
}
.next-title{margin-top:15px; padding-top:11px; border-top:1px solid var(--rule)}
.quick-row,.linked{display:flex; flex-wrap:wrap; gap:5px}
.quick{
  appearance:none; cursor:pointer;
  font-family:var(--font-legend); font-size:var(--fs-legend); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  background:var(--panel); border:1px solid var(--rule-dk); color:var(--ink);
  border-radius:var(--r); padding:7px 10px; min-height:30px;
  box-shadow:var(--flush);
  transition:background .12s, box-shadow .12s;
}
.quick:hover{background:var(--panel-hi)}
.quick:active{box-shadow:var(--pressed)}

/* the opening route: where a student should start */
.route{
  margin:14px 0 0; padding:11px 0 0;
  border-top:1px solid var(--rule);
  font-family:var(--font-read); font-size:var(--fs-body-sm); line-height:1.6; color:var(--ink-2);
}
.route b{color:var(--ink)}
.route-steps{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px}

/* =========================================================
   CONTROLS
   ========================================================= */
.btn-row{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.btn{
  appearance:none; cursor:pointer;
  font-size:var(--fs-legend); font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--rule-dk); border-radius:var(--r);
  padding:10px 14px; min-height:38px; flex:0 0 auto;
  box-shadow:var(--raised);
  transition:background .12s, box-shadow .12s;
}
.btn:hover{background:var(--panel-hi)}
.btn:active{box-shadow:var(--pressed)}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:var(--pressed)}
/* the primary action is the panel's big latching button */
.btn-primary{
  background:var(--panel-hi); border-color:var(--chassis);
  box-shadow:var(--proud);
}
.btn-primary:hover{background:var(--panel-edge)}
.btn-primary:active{box-shadow:var(--pressed)}
.btn-small{padding:8px 11px; min-height:32px; font-size:var(--fs-legend)}
.btn-ghost{background:transparent; box-shadow:none; border-color:var(--rule)}
.btn-ghost:hover{background:var(--panel)}
.btn-wide{width:100%; justify-content:center; text-align:center}
.btn-big{
  padding:16px 20px; font-size:var(--fs-body-lg); letter-spacing:.09em;
  margin-bottom:11px; min-height:56px;
}

.slider-label{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:var(--fs-legend); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink); margin-bottom:8px;
}
.slider-label output{
  font-family:var(--font-data); font-size:var(--fs-legend-lg); font-weight:700;
  text-transform:none; letter-spacing:0; color:var(--ink);
  background:var(--card); border:1px solid var(--rule-dk);
  padding:2px 7px; border-radius:2px;
}
/* a slide potentiometer milled into the panel */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:20px;
  background:transparent; outline:none; margin:0 0 2px;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:2px;
  background:var(--chassis-dk);
  box-shadow:var(--seated), 0 1px 0 var(--panel-edge);
}
input[type=range]::-moz-range-track{
  height:6px; border-radius:2px;
  background:var(--chassis-dk);
  box-shadow:var(--seated), 0 1px 0 var(--panel-edge);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:22px; margin-top:-8px;
  border-radius:2px; cursor:pointer;
  background:linear-gradient(var(--panel-edge) 0 45%, var(--panel-lo) 55% 100%);
  border:1px solid var(--chassis-dk);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
input[type=range]::-moz-range-thumb{
  width:14px; height:22px; border-radius:2px; cursor:pointer;
  background:linear-gradient(var(--panel-edge) 0 45%, var(--panel-lo) 55% 100%);
  border:1px solid var(--chassis-dk);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
/* the printed scale beside a detented control */
.scale{
  display:flex; justify-content:space-between; margin:1px 0 0; padding:0 1px;
  font-family:var(--font-legend); font-size:var(--fs-legend-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2);
}
.scale span{position:relative; padding-top:5px}
.scale span::before{
  content:""; position:absolute; top:0; left:50%; width:1px; height:3px;
  background:var(--rule-dk);
}
.scale span:first-child::before{left:2px}
.scale span:last-child::before{left:auto; right:2px}

/* a toggle switch with its legend to the right */
.switch{
  display:flex; align-items:flex-start; gap:9px; margin-top:10px; cursor:pointer;
  font-family:var(--font-read); font-size:var(--fs-body-sm); color:var(--ink-2); line-height:1.5;
}
.switch input{
  appearance:none; -webkit-appearance:none;
  width:30px; height:16px; flex:0 0 30px; margin:2px 0 0;
  border:1px solid var(--chassis-dk); border-radius:2px;
  background:var(--chassis); cursor:pointer; position:relative;
  box-shadow:var(--seated);
}
.switch input::after{
  content:""; position:absolute; top:1px; left:1px;
  width:12px; height:12px; border-radius:1px;
  background:linear-gradient(var(--panel-edge), var(--panel-lo));
  border:1px solid var(--chassis-dk);
  transition:transform .1s steps(2);
}
.switch input:checked{background:#8a5f14}
.switch input:checked::after{transform:translateX(14px)}
.switch input:checked ~ span{color:var(--ink)}

.inline-field{display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.inline-field label{
  font-family:var(--font-legend); font-size:var(--fs-legend); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink); flex:1 1 100%;
}
.inline-field input[type=number]{
  width:96px; padding:9px 10px; min-height:38px;
  font-family:var(--font-data); font-size:var(--fs-body-lg); font-weight:600;
  background:var(--card); border:1px solid var(--chassis);
  border-radius:2px; color:var(--ink);
  box-shadow:var(--pressed);
}
.result-line{
  margin:10px 0 0; font-family:var(--font-read);
  font-size:var(--fs-body-sm); line-height:1.6; color:var(--ink); min-height:1.2em;
}
.result-line b{font-weight:700}
.result-line.is-hint{color:var(--stain)}

/* =========================================================
   BLOOD FLOW — the step card
   ========================================================= */
.step-card{
  background:var(--card); border:1px solid var(--rule-dk); border-radius:var(--r);
  padding:12px 13px; margin-top:4px;
}
.step-card.is-empty{opacity:.6}
.step-count{
  margin:0 0 5px; font-size:var(--fs-legend-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.11em; color:var(--ink-2);
}
.step-count span{font-family:var(--font-data); color:var(--ink)}
.step-card h4{
  margin:0 0 5px; font-family:var(--font-legend); font-size:var(--fs-body-lg); font-weight:700;
  text-transform:uppercase; letter-spacing:.045em; color:var(--ink);
}
.step-card p:last-child{margin:0; font-size:var(--fs-body-sm); line-height:1.62; color:var(--ink-2)}

/* =========================================================
   MANUAL PUMP — lamps and counters
   ========================================================= */
.pump-cue{
  margin:0 0 13px; padding:10px 12px;
  font-family:var(--font-read); font-size:var(--fs-body-sm); line-height:1.55;
  color:var(--ink); background:var(--card);
  border:1px solid var(--rule-dk); border-left:1px solid var(--rule-dk);
  border-radius:var(--r);
}
.pump-cue b{font-weight:700}
.stage-panel{
  background:var(--card); border:1px solid var(--rule-dk); border-radius:var(--r);
  padding:13px; margin-bottom:12px;
}
.stage-kicker{
  margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid var(--rule);
  font-size:var(--fs-legend-sm); font-weight:700; text-transform:uppercase; letter-spacing:.11em;
  color:var(--ink-2);
}
.stage-kicker span{font-family:var(--font-data); color:var(--ink)}
.stage-panel h3{
  margin:0 0 7px; font-family:var(--font-legend); font-size:var(--fs-body-lg); font-weight:700;
  line-height:1.3; text-transform:uppercase; letter-spacing:.04em; color:var(--ink);
}
.stage-panel p:last-child{margin:0; font-size:var(--fs-body-sm); line-height:1.65; color:var(--ink-2)}

/* a bank of indicator lamps: lit or dark, never in between */
.valve-grid{display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:8px}
.vpill{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-legend-sm); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:8px 9px; border-radius:2px;
  background:var(--chassis-dk); color:var(--screen-ink-2);
  border:1px solid #2b2a26;
}
.vpill::before{
  content:""; flex:0 0 auto; width:10px; height:10px; border-radius:50%;
  background:var(--lamp-off); border:1px solid #21201c;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.6);
}
/* the dark-state legend still has to be readable against the lamp bank */
.vpill b{margin-left:auto; font-size:var(--fs-legend-sm); letter-spacing:.08em; color:#c0beb2}
.vpill.open{color:var(--screen-ink)}
.vpill.open::before{
  background:var(--lamp-lit); border-color:#8a5f14;
  box-shadow:0 0 4px var(--lamp-lit);
}
.vpill.open b{color:var(--lamp-lit)}

/* chamber contents, as a filled-segment readout */
.fill-grid{display:grid; grid-template-columns:1fr 1fr; gap:5px}
.fill{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-legend-sm); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:8px 9px; border-radius:2px;
  background:var(--chassis-dk); color:var(--screen-ink-2);
  border:1px solid #2b2a26;
}
.fill .pips{margin-left:auto; letter-spacing:1px; font-size:var(--fs-body-sm); line-height:1}
.fill.oxy .pips{color:var(--oxy-lit)}
.fill.deoxy .pips{color:var(--deoxy-lit)}
.fill.empty .pips{color:#c0beb2}

/* the running order: a screened sequence legend with a lit position */
.pump-list{margin:0; padding-left:0; list-style:none; counter-reset:seq}
.pump-list li{
  counter-increment:seq; position:relative; padding-left:24px;
  font-family:var(--font-read); font-size:var(--fs-body-sm); line-height:1.5;
  color:var(--ink-2); margin-bottom:5px;
}
.pump-list li::before{
  content:counter(seq); position:absolute; left:0; top:1px;
  width:16px; height:16px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-data); font-size:var(--fs-legend-sm); font-weight:700;
  background:var(--panel); color:var(--ink-2);
  border:1px solid var(--rule-dk);
}
.pump-list li.is-done{color:var(--ink-2)}
.pump-list li.is-done::before{background:var(--chassis); color:var(--panel); border-color:var(--chassis-dk)}
.pump-list li.is-now{color:var(--ink); font-weight:700}
.pump-list li.is-now::before{
  background:var(--stain-lit); color:var(--stain-deep); border-color:var(--stain);
  box-shadow:0 0 4px var(--stain-lit);
}

/* =========================================================
   HEARTBEAT — the five stages and the oscilloscope
   ========================================================= */
.phase-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.phase-item{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  background:var(--panel); border:1px solid var(--rule-dk); border-radius:var(--r);
  padding:10px 11px;
  box-shadow:var(--flush);
  /* no colour transition: stages can change faster than one would finish, so
     the "you are here" marker must switch instantly */
  transition:background .12s;
}
.phase-item:hover{background:var(--panel-hi)}
.phase-no{
  flex:0 0 20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--chassis-dk); color:var(--panel-edge);
  border:1px solid #2b2a26;
  box-shadow:var(--seated);
  font-size:var(--fs-legend-sm); font-weight:700; line-height:1;
}
.phase-body{display:flex; flex-direction:column; gap:4px; min-width:0}
.phase-body > b{
  font-family:var(--font-legend); font-size:var(--fs-body-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; line-height:1.25; color:var(--ink);
}
.phase-desc{font-family:var(--font-read); font-size:var(--fs-body-sm); line-height:1.55; color:var(--ink-2)}
.phase-valves{display:flex; gap:5px; flex-wrap:wrap; margin-top:2px}
.phase-valves i{
  font-style:normal; font-size:var(--fs-legend-sm); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 7px; border-radius:2px;
  display:inline-flex; align-items:center; gap:5px;
}
.phase-valves i::before{
  content:""; width:7px; height:7px; border-radius:50%;
  border:1px solid var(--chassis-dk);
}
.v-open{background:var(--panel-lo); color:var(--ink); box-shadow:var(--flush)}
.v-open::before{background:var(--lamp-lit); box-shadow:0 0 3px var(--lamp-lit)}
.v-shut{background:transparent; color:var(--ink-2); border:1px solid var(--rule)}
.v-shut::before{background:var(--lamp-off)}

/* the stage running right now: its lamp is lit and the row stands proud */
.phase-item.is-now{
  background:var(--panel-hi); border-color:var(--chassis); box-shadow:var(--proud);
}
.phase-item.is-now .phase-no{
  background:var(--lamp-lit); color:#2e1c02; border-color:#8a5f14;
  box-shadow:0 0 4px var(--lamp-lit);
}
/* the stage the student has frozen the heart on */
.phase-item.is-held{border-color:var(--stain); border-style:dashed}
.phase-item.is-held .phase-no{
  background:var(--stain-lit); color:var(--stain-deep); border-color:var(--stain);
  box-shadow:0 0 4px var(--stain-lit);
}

.phase-held{
  margin:11px 0 0; padding:9px 11px;
  font-family:var(--font-read); font-size:var(--fs-body-sm); line-height:1.55; color:var(--ink);
  background:var(--card); border:1px dashed var(--stain); border-radius:var(--r);
}
.phase-held b{font-weight:700}
.phase-held.hidden{display:none}

/* the oscilloscope: a screen in a bezel */
.scope{
  background:var(--screen); border:6px solid var(--chassis-dk);
  border-radius:var(--r-screen); box-shadow:var(--bezel);
}
#ecg{width:100%; display:block; background:transparent}
.ecg-key{
  display:flex; flex-wrap:wrap; gap:14px;
  margin:9px 0 0; font-size:var(--fs-legend-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2); line-height:1.4;
}
.ecg-key b{
  font-family:var(--font-data); color:var(--ink);
  background:var(--panel); border:1px solid var(--rule-dk);
  padding:1px 5px; border-radius:2px; margin-right:4px;
}

/* =========================================================
   FITNESS LAB — the meter bank
   ========================================================= */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:11px}
.stat{
  background:var(--screen); border:1px solid var(--chassis-dk);
  border-radius:var(--r-screen); box-shadow:var(--bezel);
  padding:11px 12px; display:flex; flex-direction:column; gap:3px;
}
.stat-wide{grid-column:1 / -1}
.stat-label{
  font-size:var(--fs-legend-sm); text-transform:uppercase; letter-spacing:.1em;
  color:var(--screen-ink-2); font-weight:700;
}
.stat-val{
  font-size:var(--fs-data-lg); font-weight:600; line-height:1.05;
  color:var(--trace); text-shadow:0 0 6px rgba(255,183,51,.35);
}
.stat-unit{font-family:var(--font-legend); font-size:var(--fs-legend-sm); text-transform:uppercase; letter-spacing:.08em; color:var(--screen-ink-2)}
.stat-wide .stat-val{color:var(--amber-lit); text-shadow:0 0 6px rgba(228,107,196,.35)}

.formula{
  margin:0 0 11px; padding:9px 11px; text-align:center;
  font-family:var(--font-data); font-size:var(--fs-body-sm); color:var(--ink);
  background:var(--card); border:1px solid var(--rule-dk); border-radius:var(--r);
}
.fact-line{margin:0; font-family:var(--font-read); font-size:var(--fs-body-sm); line-height:1.62; color:var(--ink-2)}

/* =========================================================
   QUIZ — the instrument's self-test
   ========================================================= */
.quiz-intro h2{
  margin:0 0 4px; font-family:var(--font-legend); font-size:var(--fs-title); font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink);
}
.round-card{
  display:flex; gap:11px; align-items:flex-start; text-align:left; width:100%;
  background:var(--panel); border:1px solid var(--rule-dk); border-radius:var(--r);
  padding:12px; margin-bottom:7px; cursor:pointer; color:inherit;
  box-shadow:var(--raised);
  transition:background .12s, box-shadow .12s;
}
.round-card:hover{background:var(--panel-hi)}
.round-card:active{box-shadow:var(--pressed)}
.round-num{
  flex:0 0 28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:var(--chassis-dk); color:var(--panel-edge);
  border:1px solid #2b2a26;
  box-shadow:var(--seated);
  font-size:var(--fs-legend-lg); font-weight:700;
}
.round-card h3{
  margin:0 0 3px; font-family:var(--font-legend); font-size:var(--fs-body); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink);
}
.round-card p{margin:0; font-family:var(--font-read); font-size:var(--fs-body-sm); color:var(--ink-2); line-height:1.5}

.quiz-bar{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px}
.quiz-progress{
  flex:1; height:8px; border-radius:2px;
  background:var(--chassis-dk); overflow:hidden;
  box-shadow:var(--seated), 0 1px 0 var(--panel-edge);
}
/* scaled rather than resized: animating width relayouts the bar every frame */
.quiz-progress span{
  display:block; height:100%; width:100%;
  background:var(--lamp-lit);
  transform-origin:left center; transform:scaleX(0);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.quiz-score{
  font-size:var(--fs-legend-lg); font-weight:700; color:var(--ink); white-space:nowrap;
  background:var(--card); border:1px solid var(--rule-dk);
  padding:3px 8px; border-radius:2px;
}

.q-prompt{
  background:var(--card); border:1px solid var(--rule-dk); border-radius:var(--r);
  padding:13px; margin-bottom:10px;
}
.q-prompt .q-kicker{
  margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid var(--rule);
  font-size:var(--fs-legend-sm); text-transform:uppercase; letter-spacing:.11em;
  color:var(--ink-2); font-weight:700;
}
.q-prompt h3{
  margin:0; font-family:var(--font-read); font-size:var(--fs-title); line-height:1.5;
  font-weight:700; color:var(--ink);
}

.options{display:flex; flex-direction:column; gap:6px}
.opt{
  appearance:none; cursor:pointer; text-align:left;
  font-family:var(--font-read); font-size:var(--fs-body); line-height:1.5;
  background:var(--panel); border:1px solid var(--rule-dk); color:var(--ink);
  border-radius:var(--r); padding:11px 13px; min-height:40px;
  box-shadow:var(--raised);
  transition:background .12s, box-shadow .12s;
}
.opt:hover:not(:disabled){background:var(--panel-hi)}
.opt:active:not(:disabled){box-shadow:var(--pressed)}
.opt:disabled{cursor:default}
/* a marked answer lights its lamp */
.opt.correct,.opt.wrong{
  display:flex; align-items:flex-start; gap:9px;
  box-shadow:var(--pressed);
}
.opt.correct::before,.opt.wrong::before{
  content:""; flex:0 0 auto; width:10px; height:10px; margin-top:.35em;
  border-radius:50%; border:1px solid var(--chassis-dk);
}
/* colour is never the only carrier: every marked option also gets a glyph */
.opt-mark{
  margin-left:auto; padding-left:10px; flex:0 0 auto;
  font-family:var(--font-legend); font-weight:700;
}
.opt.correct .opt-mark{color:#6a4a0e}
.opt.wrong .opt-mark{color:var(--stain)}
.opt.correct{background:var(--panel-hi); border-color:#8a5f14}
.opt.correct::before{background:var(--lamp-lit); box-shadow:0 0 4px var(--lamp-lit)}
.opt.wrong{background:var(--panel-lo); border-color:var(--stain)}
.opt.wrong::before{background:var(--stain-lit); box-shadow:0 0 4px var(--stain-lit)}

.feedback{
  margin-top:11px; padding:11px 13px; border-radius:var(--r);
  font-family:var(--font-read); font-size:var(--fs-body-sm); line-height:1.6;
  background:var(--card); border:1px solid var(--rule-dk); color:var(--ink-2);
  display:none;
}
.feedback.show{display:block}
.feedback b{color:var(--ink); font-weight:700}
.feedback.good{border-left:1px solid #8a5f14; border-color:#8a5f14}
.feedback.bad{border-color:var(--stain)}
.fb-actions{margin-top:10px}

.order-list{list-style:none; margin:0 0 11px; padding:0; display:flex; flex-direction:column; gap:4px}
.order-list li{
  background:var(--panel); border:1px solid var(--rule-dk); border-radius:var(--r);
  padding:8px 11px; font-family:var(--font-read); font-size:var(--fs-body-sm);
  display:flex; gap:9px; align-items:center;
  box-shadow:var(--flush);
}
.order-list li .ord{
  flex:0 0 20px; height:20px; border-radius:50%;
  background:var(--panel-lo); border:1px solid var(--rule-dk);
  display:grid; place-items:center; font-size:var(--fs-legend-sm); font-weight:700; color:var(--ink);
}
.order-list li.is-right{border-color:#8a5f14}
.order-list li.is-wrong{border-color:var(--stain)}
.ord-mark{margin-left:auto; font-weight:700; font-family:var(--font-legend)}
.order-list li.is-right .ord-mark{color:#7a5210}
.order-list li.is-wrong .ord-mark{color:var(--stain)}

.result-card{
  text-align:center; padding:20px 14px;
  background:var(--card); border:1px solid var(--rule-dk); border-radius:var(--r);
}
.result-card .big{font-size:var(--fs-data-xl); font-weight:600; line-height:1; margin:0 0 6px; color:var(--ink)}
.result-card .big-total{font-size:var(--fs-title-lg); color:var(--ink-2)}
.result-card .grade{
  margin:0 0 9px; font-family:var(--font-legend); font-size:var(--fs-body-lg); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ink);
}
.result-card p{font-family:var(--font-read); color:var(--ink-2); font-size:var(--fs-body); line-height:1.62}
.result-actions{margin-top:16px; justify-content:center}
.review-list{text-align:left; margin:14px 0 0; padding:0; list-style:none}
.review-list li{
  font-family:var(--font-read); font-size:var(--fs-body-sm); color:var(--ink-2);
  padding:7px 0; border-top:1px solid var(--rule); line-height:1.5;
}
.review-list .review-head{
  border-top:0; font-family:var(--font-legend); color:var(--ink-2); font-weight:700;
  font-size:var(--fs-legend-sm); text-transform:uppercase; letter-spacing:.11em;
}

/* =========================================================
   MODAL + TOAST
   ========================================================= */
.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(6,14,26,.74); padding:20px}
.modal.hidden{display:none}
.modal-card{
  color:var(--ink);
  position:relative; max-width:580px; width:100%; max-height:86vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--chassis);
  border-radius:var(--r); padding:24px;
  box-shadow:0 10px 34px rgba(0,0,0,.4);
}
.modal-card h2{
  margin:0 0 14px; font-family:var(--font-legend); font-size:var(--fs-title); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink);
}
.modal-close{
  position:absolute; top:10px; right:12px; appearance:none; cursor:pointer;
  width:32px; height:32px; display:grid; place-items:center;
  background:var(--panel); border:1px solid var(--rule-dk); border-radius:var(--r);
  color:var(--ink); font-size:var(--fs-title-lg); line-height:1;
}
.modal-close:hover{background:var(--panel-hi)}
.help-list{margin:0 0 14px; padding-left:18px}
.help-list li{font-family:var(--font-read); font-size:var(--fs-body); line-height:1.65; color:var(--ink-2); margin-bottom:8px}
.help-list b{color:var(--ink); font-weight:700}
kbd{
  background:var(--panel); border:1px solid var(--rule-dk); border-bottom-width:2px;
  border-radius:2px; padding:1px 5px; font-family:var(--font-data); font-size:.78em; color:var(--ink);
}
.help-route{
  margin:0 0 14px; padding:11px 0 0; border-top:1px solid var(--rule);
  font-family:var(--font-read); font-size:var(--fs-body-sm); line-height:1.65; color:var(--ink-2);
}
.help-route b{color:var(--ink); font-weight:700}
.help-foot{margin:0; font-family:var(--font-read); font-size:var(--fs-body-sm); color:var(--ink-2); line-height:1.6}

.toast{
  position:fixed; bottom:24px; left:50%;
  background:var(--chassis-dk); border:1px solid #060d18; color:var(--fascia-ink);
  padding:11px 17px; border-radius:var(--r);
  font-family:var(--font-legend); font-size:var(--fs-legend-lg); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  box-shadow:0 6px 20px rgba(0,0,0,.42); z-index:70;
  transform:translate(-50%,0); opacity:1;
  transition:opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.toast.leaving{opacity:0; transform:translate(-50%,8px)}
.toast.hidden{display:none}
.toast.good{border-color:#8a5f14; color:var(--lamp-lit)}
.toast.bad{border-color:var(--stain); color:var(--stain-lit)}

.hidden{display:none}

/* =========================================================
   THE ONE AUTHORED MOMENT — the instrument powers up
   ========================================================= */
@keyframes lampcheck{
  0%,100%{background:var(--lamp-off); box-shadow:var(--seated)}
  40%,60%{background:var(--lamp-lit); box-shadow:0 0 5px var(--lamp-lit)}
}
@keyframes screencome{
  from{opacity:0}
  to{opacity:1}
}
body.powerup .tab-no{animation:lampcheck .5s ease-in-out 1}
body.powerup .tab:nth-child(1) .tab-no{animation-delay:0s}
body.powerup .tab:nth-child(2) .tab-no{animation-delay:.06s}
body.powerup .tab:nth-child(3) .tab-no{animation-delay:.12s}
body.powerup .tab:nth-child(4) .tab-no{animation-delay:.18s}
body.powerup .tab:nth-child(5) .tab-no{animation-delay:.24s}
body.powerup .tab:nth-child(6) .tab-no{animation-delay:.30s}
body.powerup .svg-wrap > svg,body.powerup #heart3d{animation:screencome .45s ease-out .18s both}

/* =========================================================
   RESPONSIVE — a panel stays a panel; groups stack
   ========================================================= */
@media (max-width:1180px){
  .layout{grid-template-columns:minmax(0,1fr) 340px}
}
@media (max-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr); padding:14px}
  .panel{position:static; max-height:none; top:auto; min-height:0}
  /* flex:1 sets flex-basis:0, which beats `width` — the basis itself has to
     be 100% for the switch row to wrap onto its own line */
  .tabs{
    order:3; flex:1 0 100%; justify-content:flex-start; gap:4px;
    overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; scrollbar-width:thin;
  }
  .tabs .tab{flex:0 0 auto; padding:9px 11px 9px 9px}
  .orient-note{text-align:left; max-width:none}
  #heart{max-height:none}
  .c3d-tools{grid-template-columns:1fr}
  .stage{scroll-margin-top:12px}
}
@media (max-width:560px){
  .topbar{padding:10px 12px; gap:9px}
  .brand-text small{display:none}
  .stat-grid{grid-template-columns:1fr}
  .stage{padding:11px 10px}
  .valve-grid,.fill-grid{grid-template-columns:1fr}
  .viewswitch{width:100%}
  .vbtn{flex:1}
  .svg-wrap,.c3d-wrap{border-width:6px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
}