/* ============================================================
   Circulation Lab — IGCSE 0610 Topic 9, Transport in animals
   The frame, header, panel, activities and rail are the other labs', so a student
   moving between labs finds the same chrome. What is this lab's own is at the end: the
   body and its circulation on dark ink in the left column, the colour language of Topic 9,
   and the Learn-tab widgets.
   ============================================================ */
:root{
  /* House palette (from 6.1 Photosynthesis slide 14) */
  --green:#14572B; --green-2:#1E7A3E; --green-tint:#E8F1EA;
  --amber:#A16207; --amber-tint:#FBF3E3;
  --teal:#0F6E8C;  --teal-tint:#E5F0F4;
  --purple:#6B3FA0;--purple-tint:#F1EBF8;
  --red:#B03A2E;   --red-tint:#FAECE9;
  --ink:#1A1A1A;   --grey:#6B6B6B; --line:#C4C4C4;

  /* Surfaces — warm paper, never grey */
  --paper:#FBF8F2; --card:#FFFFFF; --card-2:#FDFBF6;
  --edge:#E7DFD1; --edge-2:#EFE8DC;
  --shadow:0 1px 2px rgba(60,45,25,.06), 0 6px 18px rgba(60,45,25,.07);
  --shadow-lg:0 2px 6px rgba(60,45,25,.08), 0 18px 42px rgba(60,45,25,.12);


  --ok:#1E7A3E; --ok-tint:#E8F5EC; --bad:#B03A2E; --bad-tint:#FBEDEA;

  --r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px;
  --font:Calibri,Carlito,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --rail-h:64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--paper);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.25}

/* ---------- App frame ---------- */
.app{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}

/* ---------- Header ---------- */
/* one look for every topic lab (14 Oct 2026, Daniel): a white bar, as the Cells Lab's, and this lab's own colour — the human body hub's Circulation red,
   the colour of its card in the hub — on the way back, the progress rings and a pressed button. Saved stays green: it is a status. */
:root{--hdr-bg:#FFFFFF;--hdr-ink:#1A1A1A;--hdr-veil:rgba(60,45,25,.045);--hdr-line:#E7DFD1;--lab:#B0332D;--lab-2:#8F2823;--lab-tint:#F9E7E5}
.hdr{
  display:flex;align-items:center;gap:14px;padding:9px 16px;min-width:0;
  background:var(--hdr-bg);
  color:var(--hdr-ink);box-shadow:0 1px 0 var(--hdr-line)
}
.hdr__mark{display:flex;align-items:baseline;gap:9px;min-width:0;overflow:hidden}
.hdr__title{font-size:19px;letter-spacing:.2px;white-space:nowrap;flex:none}
.hdr__sub{font-size:12.5px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* who made it: small, quiet, but always on screen — not buried in a help panel */
.hdr__by{font-size:11.5px;opacity:.62;white-space:nowrap;color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.hdr__by:hover,.hdr__by:focus-visible{opacity:.95}
.badge{
  font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:var(--r-pill);
  background:var(--hdr-veil);border:1px solid var(--hdr-line);white-space:nowrap
}
.hdr__spacer{flex:1}
.hdr__stats{display:flex;align-items:center;gap:10px;flex:none}
.stat{
  display:flex;align-items:center;gap:7px;background:var(--hdr-veil);
  border:1px solid var(--hdr-line);border-radius:var(--r-pill);padding:4px 12px 4px 6px;font-size:12.5px
}
.stat b{font-size:14px;font-variant-numeric:tabular-nums}
.stat--go{cursor:pointer;transition:background .15s}
.stat--go:hover,.stat--go:focus-visible{background:var(--lab-tint)}
.ring{width:26px;height:26px;flex:none}
.ring circle{fill:none;stroke-width:4}
.ring .bg{stroke:var(--hdr-line)}
.ring .fg{stroke:var(--lab);stroke-linecap:round;transition:stroke-dasharray .5s ease}
.hbtn{
  background:var(--hdr-veil);border:1px solid var(--hdr-line);color:var(--hdr-ink);
  border-radius:var(--r-pill);padding:6px 13px;font-size:13px;cursor:pointer;white-space:nowrap;
  transition:background .15s
}
.hbtn:hover{background:var(--lab-tint)}
/* the way back (14 Oct 2026, Daniel: pupils missed it): a solid pill, first in the header */
.hbtn--back{background:var(--lab);color:#fff;border-color:var(--lab);font-weight:650;text-decoration:none;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.hbtn--back:hover,.hbtn--back:focus-visible{background:var(--lab-2);border-color:var(--lab-2);color:#fff}

/* ---------- header buttons, the saving chip, dialogs ---------- */
/* the saving chip: what the records know, at a glance */
.hbtn--save{font-weight:600}
.hbtn--save.is-ok{background:var(--ok-tint);color:var(--ok);border-color:var(--ok)}
.hbtn--save.is-ok:hover{background:#DCEFE2}
.hbtn--save.is-busy{background:var(--hdr-veil);color:var(--hdr-ink);border-style:dashed}
.hbtn--save.is-no{background:var(--bad-tint);color:var(--bad);border-color:var(--bad)}
.hbtn--save.is-no:hover{background:#F8DCD7}
.hbtn--save.is-off{background:transparent;color:var(--hdr-ink);border-style:dashed}
.modal__box--sm{max-width:460px}
.dlgrow{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
.submsg{font-size:14px;line-height:1.5;margin-top:8px}
.submsg.no{color:var(--red)} .submsg.ok{color:var(--green-2)}
.submsg .code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;font-weight:700;letter-spacing:.08em;
  color:var(--green);background:var(--green-tint);border:1.5px dashed var(--green);border-radius:var(--r);
  padding:12px;text-align:center;margin:12px 0;user-select:all
}
.fineprint{font-size:12.5px;color:var(--grey);margin-top:14px;line-height:1.5}

/* ---------- Stage ---------- */
.stage{display:grid;grid-template-columns:minmax(360px,42%) minmax(0,1fr);min-height:0}

/* ---------- Panel column ---------- */
.panel{min-height:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;background:var(--paper)}
.panel__inner{max-width:820px;margin:0 auto;padding:20px 26px 40px;position:relative}

.st-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.st-head__ic{
  width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--green-tint);border:1px solid #CBE0D2
}
.st-head__ic svg{width:28px;height:28px}
.st-title{font-size:26px;color:var(--green);letter-spacing:-.2px}
.st-sub{color:var(--grey);font-size:14.5px;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.chip{
  font-size:11.5px;font-weight:700;letter-spacing:.03em;color:#fff;padding:4px 11px;border-radius:var(--r-pill);
  background:var(--grey);white-space:nowrap
}
.chip__n{display:inline-block;min-width:1.1em;height:1.1em;line-height:1.1em;text-align:center;
  border-radius:50%;background:rgba(255,255,255,.28);margin-right:6px;font-size:.85em}
.chip--beyond{background:#fff;color:#5A5A5A;border:1.5px dashed #9A9A9A;font-style:italic}

/* tabs */
/* The tab bar stays put while a long station scrolls. It is fully opaque so
   content passes cleanly behind it and is never half-readable through it. */
.tabs{display:flex;gap:4px;margin:16px 0 0;border-bottom:2px solid var(--edge);position:sticky;top:0;
      background:var(--paper);z-index:5;padding-top:8px;
      box-shadow:0 6px 10px -8px rgba(60,45,25,.28)}
.tab{
  background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;
  padding:9px 15px;font-size:14.5px;font-weight:600;color:var(--grey);cursor:pointer;display:flex;align-items:center;gap:7px
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--green);border-bottom-color:var(--green)}
.tab__n{font-size:11px;background:var(--edge-2);color:var(--grey);border-radius:var(--r-pill);padding:1px 7px;font-weight:700}
.tab[aria-selected="true"] .tab__n{background:var(--green);color:#fff}
.tabpane{padding-top:18px}
.tabpane[hidden]{display:none}

/* cards */
.card{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-lg);padding:18px 20px;
      box-shadow:var(--shadow);margin-bottom:16px}
.card__h{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.exam-list{margin:0;padding-left:0;list-style:none}
.exam-list > li{position:relative;padding:0 0 0 26px;margin-bottom:11px;font-size:16.5px;line-height:1.52}
.exam-list > li:last-child{margin-bottom:0}
.exam-part{margin:14px -20px 12px;padding:14px 20px 12px;background:var(--green-tint);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.exam-part__h{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.exam-part .exam-list > li:last-child{margin-bottom:0}
@media (max-width:820px){ .exam-part{margin:12px -15px 10px;padding:12px 15px 10px} }
.exam-list > li::before{
  content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--green-2);box-shadow:0 0 0 3px var(--green-tint)
}

/* the mistake students make: a faint red ground so it reads as the important one, the heading on a yellow marker */
.golden{
  background:#FFF3F0;border:2.4px solid #C94A3D;border-radius:var(--r-lg);padding:14px 18px;
  margin-bottom:16px;box-shadow:var(--shadow)
}
.golden__h{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#A83A2E;
  background:linear-gradient(180deg,transparent 18%,#FFE98A 18%,#FFE98A 90%,transparent 90%);display:inline-block;padding:0 6px 0 4px;margin-left:-4px;
           margin-bottom:6px;display:flex;align-items:center;gap:7px}
.golden p{margin:0;font-size:16px;font-weight:600}
/* one sentence that must not be missed: the golden box's red and yellow, in its place in the text */
.exam-list li.exam-alert{list-style:none;margin:10px 0 12px -22px;padding:12px 16px;background:#FFF3F0;border:2.4px solid #C94A3D;border-radius:var(--r-lg);
  font-weight:600;color:#5A1A12;box-shadow:var(--shadow)}
.exam-list li.exam-alert::marker{content:''}
.exam-list li.exam-alert::before{display:none}
.exam-alert__h{display:table;margin:0 0 6px -4px;padding:0 6px 0 4px;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#A83A2E;
  background:linear-gradient(180deg,transparent 14%,#FFE36B 14%,#FFE36B 92%,transparent 92%)}

.kw dt .t,.kw dt .tc{font-weight:700}
.exam-list > li{line-height:1.62}

.legendbox{
  border:1px solid var(--edge);background:var(--card-2);border-radius:var(--r);
  padding:0 14px;margin-bottom:16px;font-size:13.5px
}
.legendbox summary{padding:11px 0;cursor:pointer;color:var(--grey);font-weight:600;list-style:none}
.legendbox summary::-webkit-details-marker{display:none}
.legendbox summary::before{content:"▸ ";color:var(--green)}
.legendbox[open] summary::before{content:"▾ "}
.legend__intro{font-size:13px;color:#4A4A4A;margin:0 0 10px;line-height:1.5}
.legend{display:flex;flex-wrap:wrap;gap:9px 12px;padding:0 0 14px}
.legend__i{font-size:13.5px}

/* the colour key, always on screen above the Learn text */
.keybar{
  background:var(--card-2);border:1px solid var(--edge);border-left:4px solid var(--green);
  border-radius:var(--r);padding:11px 15px 8px;margin-bottom:16px
}
.keybar .legend__intro{margin:0 0 9px;font-size:12.5px;color:#4A4A4A}
.keybar .legend{gap:7px 10px;padding:0}
.keybar .legend__i{font-size:13px}

/* where the topic comes back later in the course */
.later{border-left:4px solid var(--c-ass)}
.later__list{margin:0;padding:0;list-style:none}
.later__out{display:inline-block;margin-left:6px;font-size:12.5px;font-weight:600;color:#fff;
            background:var(--teal);border-radius:var(--r-pill);padding:2px 10px;text-decoration:none}
.later__out:hover{filter:brightness(1.08)}
.later__list li{font-size:15px;line-height:1.55;margin-bottom:11px;padding-left:2px}
.later__list li:last-child{margin-bottom:0}
.later__ref{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  color:#fff;background:var(--c-ass);border-radius:var(--r-pill);
  padding:2px 9px;margin-right:8px;white-space:nowrap;vertical-align:1px
}

/* videos sit in the same frame as the photographs */
.photo--video{width:100%;display:block;background:#111;cursor:default}
.photo--video:hover{filter:none}

/* keywords */
.kw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px}
.kw{background:var(--card-2);border:1px solid var(--edge);border-radius:var(--r);padding:10px 13px}
/* a key word is asked before it is answered: the definition is there but not shown until
   the reader has had a go at it, and stays shown once turned */
.kw-hint{margin:0 0 9px;font-size:13px;color:#6B6B6B}
.kw--flip{cursor:pointer;transition:border-color .15s ease,background .15s ease}
.kw--flip:hover,.kw--flip:focus-visible{border-color:#B9AE9B;background:#FFFDF9}
.kw--flip:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.kw__ask{margin:4px 0 0;font-size:12.5px;color:#8A8A8A;font-style:italic}
.kw__ask::before{content:'\21BB  ';font-style:normal}
.kw--flip dd{display:none}
.kw--flip.is-open dd{display:block;animation:kwIn .16s ease-out}
.kw--flip.is-open .kw__ask{display:none}
@keyframes kwIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kw--flip.is-open dd{animation:none}}
.kw dt{font-weight:700;color:var(--green);font-size:14.5px;margin-bottom:2px}
.kw dd{margin:0;font-size:13.5px;color:#3C3C3C;line-height:1.45}

/* where a link lands: flash the exact place, then get out of the way */
.flash{position:relative;border-radius:var(--r);animation:flashRing 2.8s ease-out 1}
@keyframes flashRing{
  0%   {box-shadow:0 0 0 3px rgba(20,87,43,.85), 0 0 0 9px rgba(20,87,43,.18); background:rgba(20,87,43,.10)}
  18%  {box-shadow:0 0 0 3px rgba(20,87,43,.25), 0 0 0 9px rgba(20,87,43,.04); background:rgba(20,87,43,.03)}
  36%  {box-shadow:0 0 0 3px rgba(20,87,43,.85), 0 0 0 9px rgba(20,87,43,.18); background:rgba(20,87,43,.10)}
  54%  {box-shadow:0 0 0 3px rgba(20,87,43,.25), 0 0 0 9px rgba(20,87,43,.04); background:rgba(20,87,43,.03)}
  72%  {box-shadow:0 0 0 3px rgba(20,87,43,.7),  0 0 0 9px rgba(20,87,43,.14); background:rgba(20,87,43,.08)}
  100% {box-shadow:0 0 0 3px rgba(20,87,43,0),   0 0 0 9px rgba(20,87,43,0);   background:transparent}
}
.exam-list > li.flash{padding-left:26px;margin-left:-4px}

.backchip{
  position:sticky;bottom:14px;left:0;margin:0 0 0 4px;z-index:30;
  border:1.5px solid var(--green);background:var(--card);color:var(--green);
  border-radius:var(--r-pill);padding:8px 16px;font-size:13.5px;font-weight:600;cursor:pointer;
  box-shadow:var(--shadow-lg);transition:opacity .9s ease
}
.backchip:hover{background:var(--green-tint)}
.backchip.is-fading{opacity:0}

/* a highlighted word you can act on */
.t.is-peek,.tc.is-peek,.t.is-jump,.tc.is-jump{cursor:pointer}
/* Vertical padding on an inline element grows the hit area without pushing the
   lines apart, so a word is easier to tap without changing the layout. */
.t.is-peek,.tc.is-peek,.t.is-jump,.tc.is-jump{padding-top:4px;padding-bottom:4px}
.t.is-peek,.tc.is-peek{border-bottom:2px dotted currentColor}
/* the quietest of the three marks: a definition is available, nothing more. No icon —
   this is the commonest case and a marker on every one of them would be a field of them. */
/* a word the reader may not know is not a stage: no colour, no weight, only the mark */
.t--plain{color:inherit;font-weight:inherit}
.t.is-gloss,.tc.is-gloss{cursor:pointer;border-bottom:1px dotted rgba(0,0,0,.28);padding-bottom:1px}
.t.is-gloss:hover,.tc.is-gloss:hover,.t.is-gloss:focus-visible,.tc.is-gloss:focus-visible{
  border-bottom-color:currentColor;border-bottom-style:solid}
.t.is-jump,.tc.is-jump{border-bottom:1.5px solid currentColor}
.t.is-jump::after,.tc.is-jump::after{content:"\2197";font-size:.72em;vertical-align:.35em;margin-left:1px;opacity:.75}
.t.is-peek::after,.tc.is-peek::after{content:"\1F50D";font-size:.62em;vertical-align:.2em;margin-left:3px;opacity:.65}
.t.is-peek:hover,.tc.is-peek:hover,.t.is-jump:hover,.tc.is-jump:hover{background:rgba(20,87,43,.10);border-radius:3px}
.t.is-peek:focus-visible,.tc.is-peek:focus-visible,
.t.is-jump:focus-visible,.tc.is-jump:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:3px}

/* the small picture that opens where you clicked */
.peek{
  position:absolute;z-index:120;width:min(320px,86vw);background:var(--card);
  border:1px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  overflow:hidden;animation:peekIn .14s ease-out
}
.peek.peek--fig{width:min(420px,92vw)}
@keyframes peekIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.peek img{width:100%;height:auto;max-width:100%;display:block;background:#fff}
/* Two views of one thing, side by side — a real tooth beside the drawing of
   it, or the two radiographs together. They stack on a narrow screen, where
   side-by-side would make each half too small to read. */
/* centred, because one half is often much taller than the other and a
   short photograph stranded at the top of a tall diagram reads as a mistake */
/* A figure that will not fit its column scrolls inside its own box rather
   than shrinking its labels away. min-width:0 is the part that matters: without
   it a flex or grid ancestor happily grows to fit the wide child, and the page
   goes wider than the phone instead of the figure scrolling. */
.figscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.figscroll::-webkit-scrollbar{height:7px}
.figscroll::-webkit-scrollbar-thumb{background:#CFC7B6;border-radius:4px}
.media--fig,.pair__half{min-width:0;max-width:100%}
.pair{display:flex;gap:14px;align-items:center}
.pair__half{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
.pair__half img{width:100%;height:auto;display:block;border-radius:var(--r-sm)}
.pair__half svg{width:100%;height:auto;display:block}
.pair__half .annot{width:100%}
.pair__lab{margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--grey);text-align:center}
@media (max-width:620px){.pair{flex-direction:column;gap:16px}}
.peek__fig{background:#fff;padding:6px 4px 2px}
.peek__fig svg{width:100%;height:auto;display:block}
/* A figure carries its own labels, so it needs more width than a photograph:
   at 320px the labels come out around 8px, which is not readable. The wider
   card and the larger type below bring them back to roughly footnote size. */
.peek.has-fig{width:min(430px,92vw)}
.peek__fig .fl{font-size:14px}
.peek__fig .fs{font-size:12.2px}
.peek__fig .fb{font-size:15px}
.peek__note{padding:10px 13px;font-size:13.5px;line-height:1.5;color:#3C3C3C}
.peek__credit{display:block;margin-top:6px;font-size:11px;color:var(--grey)}
.peek__x{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  border:none;background:rgba(255,255,255,.9);color:#4A4A4A;font-size:16px;line-height:1;
  cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2)
}
.peek__x:hover{background:#fff;color:var(--red)}

/* "trace it on the diagram" — points at the plate instead of repeating it */
.traceBtn{
  display:flex;align-items:center;gap:9px;width:100%;margin-top:14px;
  border:1.5px solid var(--green);background:var(--green-tint);color:var(--green);
  border-radius:var(--r);padding:11px 14px;font-size:14.5px;font-weight:600;cursor:pointer;
  transition:background .15s
}
.traceBtn:hover{background:#DDEBE1}
.traceBtn__dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:none}

/* labels drawn on top of a photograph */
.annot{position:relative;display:block;line-height:0}
.annot .media__el--img,.annot img{display:block;width:100%}
.annot__svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.annot__svg line{stroke:#fff;stroke-width:2.4;opacity:.95}
.annot__svg circle{fill:#fff;stroke:#1A1A1A;stroke-width:1.2}
.annot__lab{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;
  font:700 12.5px/1 var(--font);color:#fff;background:rgba(20,25,20,.82);
  padding:4px 9px;border-radius:var(--r-pill);letter-spacing:.01em;
  box-shadow:0 1px 4px rgba(0,0,0,.35)
}
.annot__lab--big{font-size:14px;background:var(--green);padding:5px 11px}
.lb__stage{position:relative;display:block;line-height:0;max-width:100%}
.lb__stage img{max-width:100%;max-height:78vh;object-fit:contain;background:#fff;
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-lg);display:block;margin:auto}
@media (max-width:620px){ .annot__lab{font-size:10.5px;padding:3px 7px} }

/* ---------- media, sitting inside the text ----------
   An image belongs under the sentence it illustrates, not in a separate tab
   the reader has to cross-reference. */
.media{
  margin:12px 0 16px;background:var(--card-2);border:1px solid var(--edge);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)
}
.media__el{width:100%;display:block;background:#FFFDF8}
.media__el--img{margin:0 auto}
.annot{display:flex;justify-content:center}
.media__el--img{cursor:zoom-in;background:#F2EADB;transition:filter .18s}
.media__el--img:hover{filter:brightness(1.03) saturate(1.04)}
.media--video .media__el{background:#111}
.media__cap{
  padding:10px 14px;border-top:1px solid var(--edge-2);font-size:13.5px;line-height:1.5;
  color:#4A4A4A;background:var(--card)
}
.media__cap b{color:var(--green)}
.exam-list li .media{margin-left:-26px;margin-right:0}

.kindtag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--c-abs);border-radius:var(--r-pill);padding:2px 8px;margin-right:7px;
  vertical-align:1px;white-space:nowrap
}
.kindtag--fig{background:var(--grey)}

.moremedia{
  border:1px solid var(--edge);background:var(--card-2);border-radius:var(--r);
  padding:0 14px;margin-bottom:16px
}
.moremedia summary{padding:12px 0;cursor:pointer;color:var(--green);font-weight:600;
  font-size:14px;list-style:none}
.moremedia summary::-webkit-details-marker{display:none}
.moremedia summary::before{content:"▸ ";}
.moremedia[open] summary::before{content:"▾ ";}
.moremedia__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding-bottom:14px}
.moremedia__grid .media{margin:0}

.photo-missing{padding:26px 18px;text-align:center;color:var(--grey);font-size:13.5px;background:var(--card-2)}

/* ---------- Activities ---------- */
.act{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-lg);padding:17px 20px 15px;
     box-shadow:var(--shadow);margin-bottom:16px;position:relative}
.act.is-right{border-color:#A9D6BA;background:linear-gradient(180deg,#F4FBF6,#fff 60px)}
.act.is-wrong{border-color:#E3B4AC}
.act__top{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.act__kind{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;
           background:var(--grey);border-radius:var(--r-pill);padding:3px 9px}
.act__kind[data-k="blank"]{background:var(--amber)} .act__kind[data-k="drag"]{background:var(--teal)}
.act__kind[data-k="mcq"]{background:var(--purple)}  .act__kind[data-k="order"]{background:var(--red)}
.act__kind[data-k="match"]{background:#2F6F5E}      .act__kind[data-k="sort"]{background:#8A5A2B}
.act__kind[data-k="ph"]{background:var(--green)}
.act__n{font-size:12px;color:var(--grey);font-weight:600}
.act__prompt{font-size:16px;font-weight:600;margin-bottom:13px;line-height:1.45}

.cloze{font-size:16.5px;line-height:2.35}
.gap{
  display:inline-block;min-width:118px;border:none;border-bottom:2.2px solid var(--amber);background:var(--amber-tint);
  border-radius:5px 5px 0 0;padding:3px 9px;font:inherit;font-size:15.5px;color:var(--ink);text-align:center;
  outline-offset:2px
}
.gap:focus{outline:2px solid var(--green);background:#fff}
.gap.ok{border-bottom-color:var(--green-2);background:var(--green-tint);color:#14572B;font-weight:600}
.gap.no{border-bottom-color:var(--red);background:var(--bad-tint)}
.gap[disabled]{opacity:1}
.hintbtn{
  border:1px solid var(--edge);background:var(--card-2);border-radius:var(--r-pill);width:22px;height:22px;
  font-size:12px;font-weight:700;color:var(--amber);cursor:pointer;padding:0;vertical-align:2px;margin-left:3px;line-height:1
}
.hintbtn:hover{background:var(--amber-tint);border-color:var(--amber)}
.hinttext{display:block;font-size:13px;color:var(--amber);background:var(--amber-tint);border-radius:var(--r-sm);
          padding:6px 11px;margin-top:9px;border-left:3px solid var(--amber)}

/* drag & drop */
.tokens{display:flex;flex-wrap:wrap;gap:8px;padding:11px;background:var(--card-2);border:1px dashed var(--edge);
        border-radius:var(--r);margin-bottom:13px;min-height:50px;align-content:flex-start}
.tok{
  background:#fff;border:1.5px solid var(--teal);color:var(--teal);border-radius:var(--r-pill);
  padding:6px 14px;font-size:14.5px;font-weight:600;cursor:grab;user-select:none;touch-action:none;
  box-shadow:0 1px 3px rgba(0,0,0,.07);transition:transform .12s,box-shadow .12s
}
.tok:active{cursor:grabbing}
.tok.is-drag{opacity:.45}
.tok:focus-visible,.oitem:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.act__hint{font-size:12.5px;color:var(--grey);margin:2px 0 8px}

.tok.is-ghost{position:fixed;z-index:999;pointer-events:none;transform:translate(-50%,-50%) scale(1.06);
              box-shadow:var(--shadow-lg);opacity:.96}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
/* label above, drop-well below: long labels then have the full width and can
   never squeeze the well into a one-word-per-line column */
.slot{border:1px solid var(--edge);border-radius:var(--r);padding:11px 13px;background:var(--card-2);
      display:flex;flex-direction:column;gap:9px;min-height:56px}
.slot__lab{font-size:14px;font-weight:600;color:#3C3C3C;line-height:1.4}
.slot__well{
  width:100%;min-height:38px;border:1.8px dashed var(--line);border-radius:var(--r-pill);
  display:grid;place-items:center;font-size:13.5px;color:var(--grey);padding:3px 8px;transition:.15s
}
.slot__well .tok{max-width:100%;text-align:center}
.slot__well.over{border-color:var(--teal);background:var(--teal-tint)}
.slot__well .tok{cursor:grab;box-shadow:none}
.slot.ok{border-color:#A9D6BA;background:var(--green-tint)}
.slot.no{border-color:#E3B4AC;background:var(--bad-tint)}

/* mcq */
.opts{display:flex;flex-direction:column;gap:8px}
.opt{
  display:flex;align-items:flex-start;gap:11px;border:1.5px solid var(--edge);background:var(--card-2);
  border-radius:var(--r);padding:11px 14px;cursor:pointer;text-align:left;font-size:15.5px;transition:.14s;width:100%
}
.opt:hover{border-color:var(--purple);background:var(--purple-tint)}
.opt__k{
  width:24px;height:24px;flex:none;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:var(--grey);background:#fff
}
.opt[aria-pressed="true"]{border-color:var(--purple);background:var(--purple-tint)}
.opt[aria-pressed="true"] .opt__k{background:var(--purple);border-color:var(--purple);color:#fff}
.opt.ok{border-color:var(--green-2);background:var(--green-tint)}
.opt.ok .opt__k{background:var(--green-2);border-color:var(--green-2);color:#fff}
.opt.no{border-color:var(--red);background:var(--bad-tint)}
.opt.no .opt__k{background:var(--red);border-color:var(--red);color:#fff}
.opt__why{display:block;font-size:13px;color:#4A4A4A;margin-top:5px;line-height:1.45}

/* order */
.order{display:flex;flex-direction:column;gap:7px}
.oitem{
  display:flex;align-items:center;gap:11px;border:1.5px solid var(--edge);background:var(--card-2);
  border-radius:var(--r);padding:10px 13px;font-size:15px;cursor:grab;user-select:none;touch-action:none
}
.oitem.is-drag{opacity:.4}
.oitem__grip{color:var(--line);font-size:15px;letter-spacing:-2px;flex:none}
.oitem__n{width:23px;height:23px;flex:none;border-radius:50%;background:var(--red);color:#fff;display:grid;
          place-items:center;font-size:12.5px;font-weight:700}
.oitem.ok{border-color:#A9D6BA;background:var(--green-tint)} .oitem.ok .oitem__n{background:var(--green-2)}
.oitem.no{border-color:#E3B4AC;background:var(--bad-tint)} .oitem.no .oitem__n{background:var(--red)}

/* match */
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;align-items:start}
.mcol{display:flex;flex-direction:column;gap:7px}
.mcol__h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:2px}
.mitem{border:1.5px solid var(--edge);background:var(--card-2);border-radius:var(--r);padding:10px 12px;
       font-size:14.5px;cursor:pointer;text-align:left;width:100%;display:flex;gap:8px;align-items:center;transition:.14s}
.mitem:hover{border-color:#2F6F5E}
.mitem[aria-pressed="true"]{border-color:#2F6F5E;background:#E9F3EF}
.mitem__b{width:19px;height:19px;flex:none;border-radius:5px;background:var(--edge-2);display:grid;place-items:center;
          font-size:11px;font-weight:700;color:var(--grey)}
.mitem.paired{border-style:solid}
.mitem.ok{border-color:#A9D6BA;background:var(--green-tint)} .mitem.no{border-color:#E3B4AC;background:var(--bad-tint)}

/* diet-matching: people on the left, pie charts on the right */
.mitem--person{align-items:flex-start}
.mitem__who{display:block;color:var(--green);font-size:14.5px;margin-bottom:2px}
.mitem__note{display:block;font-size:13px;color:#4A4A4A;line-height:1.45;font-weight:400}
.mitem--chart{flex-direction:column;align-items:stretch;gap:6px;padding:12px}
.mitem--chart .mitem__b{align-self:flex-start}
.mitem__chart{display:flex;gap:12px;align-items:center}
.pie{width:104px;height:104px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12))}
.piekey{list-style:none;margin:0;padding:0;font-size:12px;line-height:1.55}
.piekey li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.piekey i{width:10px;height:10px;border-radius:3px;flex:none}
.piekey b{font-variant-numeric:tabular-nums}

/* sort */
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px;margin-top:12px}
.bin{border:1.8px dashed var(--line);border-radius:var(--r);padding:10px;min-height:96px;background:var(--card-2);
     display:flex;flex-direction:column;gap:6px;transition:.15s}
.bin.over{border-color:#8A5A2B;background:#F8F1E7}
.bin__h{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8A5A2B;text-align:center;
        padding-bottom:6px;border-bottom:1px solid var(--edge-2)}
.bin .tok{border-color:#8A5A2B;color:#8A5A2B;width:100%;text-align:center;font-size:13.5px;padding:6px 10px}
.bin .tok.ok{border-color:var(--green-2);color:var(--green-2);background:var(--green-tint)}
.bin .tok.no{border-color:var(--red);color:var(--red);background:var(--bad-tint)}

/* ph slider */
.ph{margin-top:6px}
.ph__scale{position:relative;height:26px;border-radius:var(--r-pill);margin:8px 0 2px;
  background:linear-gradient(90deg,#C0392B 0%,#E67E22 22%,#F1C40F 36%,#7DBE45 50%,#2E9E6B 64%,#1F7FA8 82%,#5B3FA0 100%)}
.ph__marks{display:flex;justify-content:space-between;font-size:11px;color:var(--grey);font-variant-numeric:tabular-nums}
.ph input[type=range]{width:100%;margin:10px 0 4px;accent-color:var(--green)}
.ph__read{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.ph__val{font-size:26px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;min-width:56px}
.ph__state{font-size:14px;font-weight:600;padding:5px 13px;border-radius:var(--r-pill);border:1.5px solid}
.ph__state.on{color:var(--green-2);border-color:#A9D6BA;background:var(--green-tint)}
.ph__state.off{color:var(--red);border-color:#E3B4AC;background:var(--bad-tint)}
.ph__enz{width:100%;height:88px;margin-top:6px}

/* activity footer */
.act__foot{display:flex;align-items:center;gap:9px;margin-top:14px;flex-wrap:wrap}
.btn{
  border:1.5px solid var(--green);background:var(--green);color:#fff;border-radius:var(--r-pill);
  padding:8px 18px;font-size:14.5px;font-weight:600;cursor:pointer;transition:.15s
}
.btn:hover{background:var(--green-2);border-color:var(--green-2)}
.btn--ghost{background:#fff;color:var(--green)}
.btn--ghost:hover{background:var(--green-tint)}
.btn--quiet{background:#fff;color:var(--grey);border-color:var(--edge)}
.btn--quiet:hover{background:var(--card-2);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.verdict{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.verdict.ok{color:var(--green-2)} .verdict.no{color:var(--red)}
.feedback{
  margin-top:12px;padding:12px 15px;border-radius:var(--r);font-size:14.5px;line-height:1.5;border-left:3px solid
}
.feedback.ok{background:var(--green-tint);border-color:var(--green-2);color:#14572B}
.feedback.no{background:var(--bad-tint);border-color:var(--red);color:#7A2A20}

/* ---------- Journey rail ---------- */
.rail{
  display:flex;align-items:center;gap:8px;padding:0 12px;height:var(--rail-h);background:var(--card);
  border-top:1px solid var(--edge);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin
}
.rail__track{display:flex;align-items:center;gap:6px;margin:0 auto}
.rstep{
  display:flex;align-items:center;gap:8px;border:1.5px solid var(--edge);background:var(--card-2);
  border-radius:var(--r-pill);padding:6px 13px 6px 7px;font-size:13px;cursor:pointer;white-space:nowrap;
  color:#3C3C3C;transition:.15s;font-weight:600
}
.rstep:hover{border-color:var(--green-2)}
.rstep[aria-current="true"]{background:var(--green);border-color:var(--green);color:#fff}
.rstep__n{
  width:22px;height:22px;flex:none;border-radius:50%;background:var(--edge-2);color:var(--grey);
  display:grid;place-items:center;font-size:11.5px;font-weight:700
}
.rstep[aria-current="true"] .rstep__n{background:rgba(255,255,255,.24);color:#fff}
.rstep.done .rstep__n{background:var(--green-2);color:#fff}
.rstep__bar{width:26px;height:3px;border-radius:2px;background:var(--edge-2);flex:none}
.rstep__bar i{display:block;height:100%;border-radius:2px;background:var(--green-2);transition:width .4s}

/* ---------- Modal ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
       background:rgba(38,30,18,.5);backdrop-filter:blur(3px)}
.modal__box{background:var(--card);border-radius:var(--r-lg);max-width:680px;width:100%;max-height:84vh;
            overflow:auto;box-shadow:var(--shadow-lg);padding:26px 30px}
.modal__box h2{color:var(--green);font-size:22px;margin-bottom:4px}
.modal__box h3{color:var(--green);font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin:20px 0 8px}
.modal__box p,.modal__box li{font-size:15px;line-height:1.55}
.modal__box ul{padding-left:20px;margin:0}
.modal__box li{margin-bottom:6px}
.modal__close{float:right;border:1px solid var(--edge);background:var(--card-2);border-radius:var(--r-pill);
              width:32px;height:32px;font-size:17px;cursor:pointer;color:var(--grey);line-height:1}
.modal__close:hover{background:var(--red-tint);color:var(--red);border-color:var(--red)}

/* which tier a word belongs to, said plainly rather than left to be guessed */
.tier{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);
      font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tier--ext{background:#F1EDE3;color:#7A6B52;border:1px dashed #C3B69C}
.tier--sup{background:#EAF1F6;color:#3E6FA8;border:1px solid #C4D8E8}

/* ---------- Key words, gathered ---------- */
.gloss__find{width:100%;margin:14px 0 6px;padding:10px 13px;font-size:15px;font-family:inherit;
             border:1px solid var(--edge);border-radius:var(--r);background:var(--card-2);color:inherit}
.gloss__find:focus{outline:2px solid var(--green);outline-offset:1px;background:var(--card)}
.gloss__count{margin:0 0 4px;font-size:13px;color:#6B6B6B}
.gloss__grp{margin-top:18px}
.gloss__h{color:var(--green);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
          margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid var(--edge)}
.gloss__dl{margin:0}
.gloss__row{padding:8px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.gloss__row:last-child{border-bottom:none}
.gloss__row dt{font-weight:700;color:var(--green);font-size:14.5px}
.gloss__row dd{margin:2px 0 0;font-size:14px;line-height:1.5;color:#3C3C3C}
.gloss__row[hidden],.gloss__grp[hidden]{display:none}
.gloss__also{margin:6px 0 0;font-size:12.5px;color:#6B6B6B}
.gloss__got{display:inline-block;margin:8px 0 0;font:inherit;font-size:12.5px;cursor:pointer;
            color:var(--grey);background:none;border:1px dashed var(--edge);border-radius:var(--r-pill);padding:2px 10px}
.gloss__got:hover,.gloss__got:focus-visible{color:var(--green);border-color:var(--green);border-style:solid}
.gloss__got.is-known{color:var(--green);border-style:solid;border-color:#C4D8B8;background:#F3F7EF}
.gloss__known{margin:0 0 6px;font-size:12.5px;color:#6B6B6B}
.gloss__known button{font:inherit;font-size:12.5px;color:var(--green);background:none;border:none;
                     text-decoration:underline;cursor:pointer;padding:0}
.gloss__see{font:inherit;font-size:12.5px;color:var(--green);background:var(--card-2);
            border:1px solid var(--edge);border-radius:var(--r-pill);padding:1px 9px;margin:0 2px 2px 0;cursor:pointer}
.gloss__see:hover,.gloss__see:focus-visible{background:#FFFDF9;border-color:#B9AE9B}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--rail-h) + 14px);transform:translateX(-50%) translateY(14px);
  background:var(--green);color:#fff;border-radius:var(--r-pill);padding:10px 20px;font-size:14.5px;font-weight:600;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.28s;z-index:60;max-width:88vw;text-align:center
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#updBar{bottom:calc(var(--rail-h, 64px) + 66px)}  /* clear of a station-complete toast */
.bootnote{margin:40px 0;color:var(--grey);font-size:15px}
/* <picture> is display:inline by default. .finder__stage is position:relative and every pin
   is placed from stage.getBoundingClientRect() as a percentage, so an inline wrapper's
   baseline gap would drift every pin off the feature it names. */
picture{display:block;line-height:0}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track has a min of auto, so it grows to
     fit its widest child. One wide diagram would then stretch the whole column
     past the phone screen and the station heading would need scrolling to read. */
  .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);overflow-y:auto}
  .platecol{border-right:none;border-bottom:1px solid var(--edge);height:min(64vh,560px)}
  .panel{overflow:visible}
  .panel__inner{padding:16px 16px 32px}
  .hdr__sub{display:none}
  .hdr__by{font-size:10.5px;opacity:.7}
  .badge{padding:1px 7px;font-size:10px;letter-spacing:.06em} .stat__lbl{display:none} .stat{padding:4px 10px 4px 5px} .stat--stations{display:none}
  .hbtn{padding:6px 11px}
  #btnHelp{width:32px;padding:0;display:grid;place-items:center;height:30px}
}
.hbtn__short{display:none}
@media (max-width:820px){
  .hdr{gap:8px;padding:8px 11px} .hdr__title{font-size:16px} .badge{padding:1px 7px;font-size:10px;letter-spacing:.06em}
  .stat__lbl{display:none} .stat{padding:4px 10px 4px 5px}
  .stat--stations{display:none}
  .hbtn{padding:6px 11px}
  .hbtn__long{display:none} .hbtn__short{display:inline;font-size:15px;font-weight:700}
  #btnHelp{width:32px;padding:0;display:grid;place-items:center;height:30px}
  .st-title{font-size:21px}
  .match{grid-template-columns:1fr}
  .panel__inner{padding:14px 13px 30px}
  .card,.act,.golden{padding:14px 15px}
  :root{--rail-h:58px}
}
/* a narrow phone: the header wraps onto two rows rather than running off the screen */
@media (max-width:540px){
  .hdr{flex-wrap:wrap;row-gap:6px;padding:8px 10px}
  .hdr__mark{flex:1 1 100%;overflow:visible}
  .hdr__spacer{display:none}
  .hdr__stats{flex:1 1 100%;flex-wrap:wrap;gap:6px}
  .hbtn{padding:5px 9px;font-size:12.5px}
  .stat{padding:3px 9px 3px 4px}
  #btnReset .hbtn__long{display:none} #btnReset .hbtn__short{display:inline;font-size:13px;font-weight:600}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- round 13: Supplement / extension badges, question tables, figure hints, peek sheet ---- */
.sup{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--grey);border:1px solid var(--line);border-radius:4px;padding:0 5px;margin-right:7px;vertical-align:2px;line-height:1.55;cursor:help;background:var(--card-2)}
.sup--ext{text-transform:uppercase;font-size:9.5px;letter-spacing:.08em}
/* in an older 0610 syllabus but not in 2026–28: the badge names the syllabus (labs-shared/syllabus-past.json) */
.sup--old{text-transform:uppercase;font-size:9.5px;letter-spacing:.08em;color:#7A4B12;background:#FBF1E2;border-color:#DDBB85}
.tier--old{background:#FBF1E2;color:#7A4B12;border:1px solid #DDBB85;cursor:help}
.later__ref.later__ref--old{background:#FBF1E2;color:#7A4B12;border:1px solid #DDBB85;cursor:help}
.act__old{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#7A4B12;background:#FBF1E2;border:1px solid #DDBB85;border-radius:4px;padding:1px 6px;cursor:help}
/* ---- Not in the syllabus for 2026–2029: the card right below What you need to know ---- */
.offsyl{background:var(--card-2,#FAF8F3);border:1px dashed #CFC6B2}
.offsyl .card__h{color:#6B5B45}
.card__h .card__hsub{font-weight:600;letter-spacing:.06em;color:var(--grey,#6B6B6B)}
.offsyl__h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7A6B52;margin:14px 0 8px}
.offsyl__h:first-of-type{margin-top:4px}
.offsyl__lead{margin:6px 0 2px;font-size:15.5px;line-height:1.5;color:#5E503C}
.exam-inote{display:block;margin:3px 0 2px;font-size:14px;line-height:1.5;color:#5A5A5A}
.qtable{overflow-x:auto;margin:-4px 0 14px}
.qtable table{border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums;min-width:280px}
.qtable th,.qtable td{border:1px solid var(--edge);padding:5px 11px;text-align:left;vertical-align:top}
.qtable thead th{background:var(--card-2);font-weight:600}
.qtable tbody th{font-weight:500;background:#fff}
.pair--stack{flex-direction:column;gap:16px;align-items:stretch}
.pair--stack .pair__half{flex:none;width:100%}
.media{position:relative}
.fighint{position:absolute;top:8px;right:8px;z-index:3;font-size:11.5px;font-weight:600;color:#fff;background:rgba(20,87,43,.86);border-radius:var(--r-pill);padding:4px 10px;pointer-events:none;transition:opacity .3s}
.fighint.is-gone{opacity:0}
.peek--sheet{position:fixed;left:0!important;right:0;top:auto!important;bottom:0;width:auto;max-width:none;max-height:62vh;overflow:auto;border-radius:14px 14px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.28);animation:none}
.peek--sheet img{max-height:34vh;width:auto;max-width:100%;margin:0 auto}
.peek--sheet .peek__x{position:sticky;top:6px;float:right}
.figlegend{list-style:none;margin:0;padding:8px 14px 10px;font-size:13px;line-height:1.5;color:#3C3C3C;border-top:1px dashed var(--edge);background:var(--card-2)}
.figlegend li{margin:0 0 3px}
.figlegend__h{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.figlegend b{color:var(--green)}
.pair__half{position:relative}
.exam-list .figlegend li{padding:0;margin:0 0 3px;font-size:13px;line-height:1.45}
.exam-list .figlegend li::before{content:none}
.exam-list .figlegend .figlegend__h{font-size:10.5px}

/* ---- in the exam: what to write here ---- */
.examfocus{background:#FFF8E6;border:1.5px solid #E2B95F;border-radius:var(--r);padding:12px 15px;margin-top:14px}
.examfocus__h{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8A5A0E;margin-bottom:7px}
.examfocus ul{margin:0;padding-left:19px}
.examfocus li{font-size:14.5px;color:#3A2E14;margin-bottom:7px;line-height:1.5}
.examfocus li:last-child{margin-bottom:0}
.examfocus__tag{color:#8A5A0E}
/* going further: one list, three kinds of tag */
.later__ref--ib{background:#EFE9F8;color:#4C2E85;border-color:#C9B8E6}
.later__ref--beyond{background:#F1F1EE;color:#5A5A5A;border-color:#C9C9C4;font-style:italic}

/* ---- instant tooltips on the badges (hover, keyboard focus, or a tap) ---- */
.tip{position:relative;cursor:help}
.tip::after{
  content:attr(data-tip);position:absolute;left:0;top:calc(100% + 7px);z-index:40;
  width:max-content;max-width:min(300px,72vw);white-space:normal;text-align:left;
  background:#1F2A1F;color:#fff;font-size:12.5px;font-weight:500;line-height:1.38;letter-spacing:0;text-transform:none;font-style:normal;
  padding:7px 11px;border-radius:7px;box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity .1s,transform .1s
}
/* near the right edge of the header the tooltip would run off the page */
.tip--right::after{left:auto;right:0}
.tip--right::before{left:auto;right:14px}
.tip::before{
  content:"";position:absolute;left:9px;top:calc(100% + 1px);border:6px solid transparent;border-top-width:0;border-bottom-color:#1F2A1F;
  opacity:0;pointer-events:none;transition:opacity .1s
}
.tip:hover::after,.tip:hover::before,.tip:focus-visible::after,.tip:focus-visible::before,.tip.is-open::after,.tip.is-open::before{opacity:1;transform:none}
.tip:focus{outline:none}
.tip:focus-visible{box-shadow:0 0 0 2px var(--green)}

/* ============================================================
   From here down: what is this lab's own, and the Learn widgets it shares with the Plants Lab.
   ============================================================ */
:root{
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* ---------- the Learn tab's widgets ---------- */
.widget{margin:14px 0 6px;border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--card-2);padding:14px 16px 14px;box-shadow:var(--shadow)}
.widget__h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.widget__h .widget__try{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:#fff;background:var(--green);border-radius:var(--r-pill);padding:2px 9px}
.widget__ask{font-size:14.5px;color:#3C3C3C;margin:0 0 12px;line-height:1.45}
.widget__note{font-size:13px;color:var(--grey);margin:10px 0 0;line-height:1.45}
.widget__done{margin:10px 0 0;font-size:13.5px;font-weight:600;color:var(--green-2)}
.exam-list li .widget,.exam-list li .media,.exam-list li .photo,.exam-list li .ctable{margin-left:-26px}
/* On a phone a picture that opens its point (a small or tall one, put first so it can float on a wide screen)
   sits in the text column, not out in the bullet's gutter: there the bullet was painted on its corner. */
@media (max-width:779px){ .exam-list > li > .photo--small:first-child,.exam-list > li > .photo--portrait:first-child{margin-left:0} }

/* A tall, narrow diagram — a xylem vessel, a sieve tube, a root tip — set under its sentence
   left a column of empty paper 490px wide beside it. app.js puts a portrait figure first in its
   sentence and this stands it in the margin, so the sentence closes round it. Marked by
   widgets.js from the size the build recorded, so nothing jumps when the file arrives.
   Below 780px there is no room for two columns and it goes back to sitting on its own. */
@media (min-width:780px){
  .exam-list li .photo--portrait{
    float:left;width:clamp(170px,26%,228px);max-width:none;
    margin:4px 20px 8px -26px;shape-margin:14px
  }
  /* The labels on these two drawings run down opposite sides — the xylem's on its left, the
     phloem's on its right — so standing them on opposite sides of the page turns them to face
     each other, and stops two pictures in a row leaving their white space in the same place. */
  .exam-list li .photo--portrait.photo--right{float:right;margin:4px 0 8px 22px}
  .exam-list li .photo--portrait img{width:100%;height:auto}
  .exam-list li .photo--portrait figcaption{font-size:10.5px;line-height:1.38}
  /* the sentence must be at least as tall as its picture, and nothing structural may ride up
     beside it: a widget, an activity or the next block starts below */
  .exam-list li:has(> .photo--portrait){min-height:1px}
  .exam-list li:has(> .photo--portrait)::after{content:"";display:block;clear:both}
  .exam-list li .widget,.exam-part,.golden,.examfocus,.card__h{clear:both}
  /* a small picture (a diagram drawn at its own size) stands on the right of its sentence, and the next
     points run on beside it; a widget or a new block still starts below it (Daniel, 25 Sep: "it's better
     to have the text surrounding the image") */
  .exam-list li .photo--small:not(.photo--portrait){float:right;width:clamp(200px,34%,260px);max-width:none;margin:2px 0 10px 22px}
  .exam-list li .photo--small:not(.photo--portrait) img{width:100%;height:auto}
  .exam-list li .photo--small:not(.photo--portrait) figcaption{font-size:11.5px;line-height:1.42}
  .exam-list li .media,.exam-list li .ctable,.exam-list li .photo:not(.photo--small):not(.photo--portrait){clear:both}
  /* A small picture that is also tall, like the coronary cast, stands on the right like the other small ones.
     The row it sits in, and the rows after it, are plain blocks here, not flow-root boxes: the picture hangs
     below its own sentence and the next points run round it (Daniel, 27 Sep, of the cast: "the text could go
     around ... a very big blank space that should not be there"). A widget still clears it, at full width.
     flow-root is only there to hold a minifig, and this lab has none. */
  .exam-list li .photo--small.photo--portrait{float:right;width:clamp(170px,26%,228px);margin:4px 0 8px 22px}
  .exam-list li .photo--small.photo--portrait figcaption{font-size:11.5px;line-height:1.42}
  .exam-list li:has(> .photo--small.photo--portrait)::after{content:none}
  .exam-list > li:has(> .photo--small),.exam-list > li:has(> .photo--small) ~ li{display:block}
}
.wbtn{font:inherit;font-size:13px;font-weight:600;color:var(--green);background:#fff;border:1.5px solid var(--green);border-radius:var(--r-pill);padding:5px 12px;cursor:pointer;transition:.14s}
.wbtn:hover{background:var(--green-tint)}
.wbtn[aria-pressed="true"],.wbtn.is-on{background:var(--green);color:#fff}
.wbtn--quiet{color:var(--grey);border-color:var(--edge)}
.wbtn--quiet:hover{color:var(--ink);background:var(--card-2)}

/* a lesson video, in the same frame as the photographs */
.media{margin:12px 0 16px;background:var(--card-2);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.media__el{width:100%;height:auto;display:block;background:#111}
.media--video .media__el{max-height:420px;object-fit:contain}
.media__cap{padding:10px 14px;border-top:1px solid var(--edge-2);font-size:13.5px;line-height:1.5;color:#4A4A4A;background:var(--card)}
.media__credit{display:block;margin-top:4px;font-size:11.5px;color:var(--grey)}
.kindtag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--k-blood);border-radius:var(--r-pill);padding:2px 8px;margin-right:7px;vertical-align:1px;white-space:nowrap}

/* the feature finder and the pinned pictures: the shared widgets' classes */
.finder{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:30px;align-items:start}
.finder__stage{position:relative;line-height:0;border-radius:var(--r);overflow:visible;background:#1B2226}
.finder__stage img{width:100%;height:auto;display:block;border-radius:var(--r)}
.finder__credit{font-size:11px;color:var(--grey);margin:6px 0 0;line-height:1.4}
.finder__credit a{color:inherit}
.finder__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
@media (max-width:620px){ .finder{grid-template-columns:1fr} }
.finder.finder--narrow{grid-template-columns:1fr}
.finder__tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.finder__tools .finder__credit{margin:0}
.pins{position:relative}
.pins__lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:3}
.pins__halo{stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.9}
.pins__line{stroke:#14572B;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.pin{position:absolute;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid #fff;z-index:4;
  background:rgba(20,87,43,.62);color:#fff;font:700 11px/1 var(--font);display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
.pin:hover{background:rgba(20,87,43,.9)}
.pin.is-found{animation:none;background:#fff;color:var(--green);border-color:var(--green)}
.pin--extra{background:rgba(90,90,90,.62)} .pin--extra:hover{background:rgba(90,90,90,.9)}
.pin--extra.is-found{background:#fff;color:#5A5A5A;border-color:#8A8A8A}
.pins__item--extra.is-found{border-color:#C9C9C4;background:#F4F4F1}
.pins__item--extra.is-found .n{background:#8A8A8A}
.pins__item--extra b{color:#5A5A5A}
.pins__tag{display:inline-block;vertical-align:.06em;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.03em;color:#7A6B52;background:#F4F0E6;border:1px solid #DCD2BC;border-radius:var(--r-pill);padding:0 6px;line-height:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finder__list.is-column{position:relative}
.finder__list.is-column .pins__item{left:0;right:0}
.pins__item{display:flex;gap:8px;align-items:center;font-size:13px;line-height:1.3;padding:4px 8px 4px 8px;border:1px solid var(--edge);border-radius:var(--r);background:#fff;transition:border-color .15s,background .15s;cursor:pointer;min-height:38px}
.pins__item.is-found{min-height:74px}
.pins__item b{color:var(--green)}
.pins__item small{display:block;color:var(--grey);font-size:12px}
.pins__item .n{flex:none;width:20px;height:20px;border-radius:50%;background:var(--edge-2);color:var(--grey);font-size:11px;font-weight:700;display:grid;place-items:center}
.pins__txt{flex:1;min-width:0;overflow-wrap:anywhere}
.pins__zoom{display:none;flex:none;width:64px;height:64px;border-radius:8px;border:1px solid var(--edge);background-color:#1B2226;background-repeat:no-repeat;position:relative;overflow:hidden}
.pins__mark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pins__markl{stroke:rgba(255,255,255,.9);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 4;filter:drop-shadow(0 0 1.6px rgba(0,0,0,.9))}
.pins__item.is-found{border-color:#A9D6BA;background:var(--green-tint)}
.pins__item.is-found .n{background:var(--green-2);color:#fff}
.pins__item.is-found .pins__zoom{display:block}
@media (max-width:620px){ .finder .pins__lines{display:none} }

/* a comparison table and a photograph inside Learn */
.ctable{overflow-x:auto;margin:12px 0 4px}
.ctable table{border-collapse:collapse;font-size:14px;min-width:420px;width:100%}
.ctable th,.ctable td{border:1px solid var(--edge);padding:6px 10px;text-align:left;vertical-align:top;line-height:1.4}
.ctable thead th{background:var(--card-2);font-weight:700;color:var(--green)}
.ctable tbody th{font-weight:600;background:#fff;white-space:nowrap}
.ctable caption{caption-side:bottom;text-align:left;font-size:12.5px;color:var(--grey);padding:6px 2px 0}
.photo{margin:12px 0 4px}
.photo.photo--small{max-width:236px;margin-left:auto;margin-right:auto}
.photo.photo--small img{width:100%;height:auto}
.photo img{width:100%;height:auto;display:block;border-radius:var(--r);cursor:zoom-in;background:#1B2226}
.photo figcaption{font-size:12.5px;color:var(--grey);margin-top:6px;line-height:1.45}
.photo--pair .photo__row{display:flex;gap:14px;align-items:flex-start}
.photo--pair .photo__cell{min-width:0}
.photo--pair .photo__sub{font-size:12px;color:var(--grey);margin-top:5px;line-height:1.4}
@media (max-width:620px){ .photo--pair .photo__row{display:block} .photo--pair .photo__cell + .photo__cell{margin-top:12px} }
.photo figcaption a{color:inherit}

.gridq{overflow-x:auto;margin-bottom:4px}
.gridq table{border-collapse:collapse;font-size:14px;width:100%}
.gridq th,.gridq td{border:1px solid var(--edge);padding:5px 6px;text-align:center;vertical-align:middle}
.gridq thead th{background:var(--card-2);font-weight:700;color:var(--k-health);font-size:13px}
.gridq thead th small{display:block;font-weight:500;font-size:10.5px;color:var(--grey);letter-spacing:0}
.gridq tbody th{text-align:left;font-weight:600;white-space:nowrap;background:#fff}
.gridq tbody th small{display:block;font-weight:400;font-size:12px;color:var(--grey);white-space:normal}
.gridq input{width:20px;height:20px;accent-color:var(--k-health);cursor:pointer;margin:0}
.gridq tr.ok th,.gridq tr.ok td{background:var(--green-tint)} .gridq tr.no th,.gridq tr.no td{background:var(--bad-tint)}
.gridq tr.no th::after{content:" ✗";color:var(--red)} .gridq tr.ok th::after{content:" ✓";color:var(--green-2)}
.hs__stage{position:relative;line-height:0;border-radius:var(--r);overflow:hidden;background:#1B2226;margin-bottom:8px}
.hs__stage img,.hs__stage svg{width:100%;height:auto;display:block}
.hs__stage svg{background:#fff}
.hs__pt{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1/1;height:auto;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:rgba(255,255,255,.18);cursor:pointer;padding:0;transition:.14s;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.hs__stage svg ~ .hs__pt{border-color:rgba(20,87,43,.7);background:rgba(20,87,43,.12)}
.hs__pt:hover{background:rgba(255,255,255,.45)}
.hs__pt[aria-pressed="true"]{background:var(--green);border-color:#fff;box-shadow:0 0 0 3px rgba(20,87,43,.45)}
.hs__pt[aria-pressed="true"]::after{content:"✓";color:#fff;font:700 13px/1 var(--font);position:absolute;inset:0;display:grid;place-items:center}
.hs__count{font-size:13px;color:var(--grey);margin:0 0 6px}
.hs__count b{color:var(--green)}
.act.is-wrong .hs__pt[aria-pressed="true"]{background:var(--red);box-shadow:0 0 0 3px rgba(176,58,46,.4)}
.act.is-right .hs__pt[aria-pressed="true"]{background:var(--green-2)}
.act__credit{font-size:11px;color:var(--grey);margin:-2px 0 10px}
.qshow{margin:0 0 14px}
.svgbox{border:1px solid var(--edge);border-radius:var(--r);background:#fff;padding:8px;max-width:520px}
.svgbox svg{width:100%;height:auto;display:block}
.qimg{margin:2px 0 14px;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:8px 10px 6px;max-width:560px}
.qimg img{display:block;width:100%;max-width:100%;height:auto}
.qimg figcaption{font-size:12.5px;color:var(--grey);margin-top:6px}

[hidden]{display:none!important}
/* ---------- watch: an embedded film, loaded only when pressed ---------- */
.ytv{margin:12px 0 4px}
.ytv__frame{position:relative;width:100%;aspect-ratio:16/9;background:#0E1512;border-radius:var(--r);overflow:hidden}
.ytv__ifr,.ytv__poster{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytv__poster{padding:0;cursor:pointer;background:#0E1512;display:block}
.ytv__still{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;transition:opacity .18s ease}
.ytv__poster:hover .ytv__still{opacity:1}
.ytv__poster.is-bare .ytv__still{display:none}
.ytv__btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;
          background:rgba(200,32,32,.94);color:#fff;font-size:22px;display:grid;place-items:center;
          box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .16s ease,background .16s ease;padding-left:4px}
.ytv__poster:hover .ytv__btn{transform:translate(-50%,-50%) scale(1.07);background:#D01F1F}
.ytv__poster:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.ytv__over{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;color:#fff;font-size:13.5px;
           font-weight:600;text-align:left;line-height:1.35;
           background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72))}

/* ----- curio: a strange true thing, fenced off from the exam ----- */
.curio{margin:26px 0;border:1px solid #E3D6BF;border-left:4px solid #B08A4A;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#FCF7EC,#FBF3E4);padding:14px 16px 16px;overflow:hidden}
.curio__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:10px}
.curio__pill{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#6B4E16;
  background:#F0E0BC;border:1px solid #D7BE8C;border-radius:var(--r-pill);padding:2px 9px}
.curio__fence{font-size:11.5px;color:var(--muted)}
.curio__body{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.curio--tall .curio__body{grid-template-columns:210px 1fr}
.curio--text .curio__body{grid-template-columns:1fr}
.curio__fig{margin:0}
.curio__fig picture{display:block}
.curio__fig img{width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid #E0D3BB;background:#EFE7D8}
.curio__credit{margin-top:5px;font-size:10.5px;line-height:1.35;color:var(--muted)}
.curio__title{margin:0 0 6px;font-size:16.5px;line-height:1.3;color:var(--ink)}
.curio__p{margin:0 0 8px;font-size:14.5px;line-height:1.55}
.curio__src{margin:2px 0 0;font-size:11.5px;color:var(--muted)}
/* pictures under the words, side by side, each as tall as the others */
.curio__pics{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px;margin-top:12px}
.curio__pic{margin:0;flex:0 1 auto;max-width:100%;display:flex;flex-direction:column;align-items:center}
.curio__pic picture{display:block}
.curio__pic img{display:block;height:clamp(230px,30vw,340px);width:auto;max-width:100%;object-fit:contain;border-radius:var(--r-md);border:1px solid #E0D3BB;background:#EFE7D8}
.curio__pcap{margin-top:6px;max-width:300px;font-size:12px;line-height:1.4;color:#4A4A4A;text-align:center}
.curio__pcap .curio__credit{display:block;margin-top:2px}
/* one picture under the words: the card's full width, its caption as wide (a family tree or a labelled
   drawing is read, not glanced at) */
.curio__pics .curio__pic:only-child{flex:1 1 100%;align-items:stretch}
.curio__pics .curio__pic:only-child picture{width:100%}
.curio__pics .curio__pic:only-child img{width:100%;height:auto}
.curio__pics .curio__pic:only-child .curio__pcap{max-width:none;text-align:left}
/* a picture on the right, the words round it (side: 'right') */
.curio__fig--right{float:right;width:min(44%,330px);margin:2px 0 10px 18px}
.curio__fig--right.curio__fig--upright{width:min(34%,250px)}
.curio__fig--right .curio__pcap{max-width:none;text-align:left}
.curio--text .curio__text::after{content:'';display:table;clear:both}
.curio__below{clear:both;margin:10px 0 0;padding-top:8px;border-top:1px solid #E3D6BF}
.curio__below .curio__pcap{margin:0;max-width:none;text-align:left}
@media (max-width:620px){
  .curio__body,.curio--tall .curio__body{grid-template-columns:1fr}
  .curio__fig--right,.curio__fig--right.curio__fig--upright{float:none;width:auto;max-width:360px;margin:0 auto 12px}
  .curio__fig img{max-height:300px;object-fit:cover}
  .curio--tall .curio__fig img{max-height:360px;object-fit:contain;background:#FBF6EC}
  .curio__fig--upright img{max-height:380px;object-fit:contain;background:#FBF6EC}
}
.ad__slot:empty{display:none}
.ad__slot{margin-top:10px;padding-top:10px;border-top:1px solid var(--edge)}
.ad--split .ad__slot{display:none}
.adv{width:100%}
.sim > .adv{margin-top:auto;margin-bottom:auto}
.sim > .adv__stage{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;margin:0}
.adv__head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin:0 0 10px}
.adv__tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:2px 9px}
.adv__tag--xerophyte{background:#FBF1DC;color:#7A5410;border:1px solid #E2B95F}
.adv__tag--hydrophyte{background:#E6F2FA;color:#1F5E86;border:1px solid #7FB8DC}
.adv__tag--ext{background:var(--red-tint);color:var(--red);border:1px solid #E7B7AE}
.adv__title{font-size:16.5px;font-weight:700;color:var(--ink)}
.adv__fig{position:relative;width:100%}
.adv__frame{position:absolute;top:0;border-radius:8px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(40,30,15,.1),0 6px 18px rgba(40,30,15,.1);
  opacity:0;transform:scale(1.03);transition:opacity .35s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.adv__fig.is-in .adv__frame{opacity:1;transform:none}
.adv__frame picture,.adv__frame img{display:block;width:100%;height:100%}
.adv__frame img{object-fit:cover}
.adv__svg{display:block;width:100%;height:100%}
.adv__over{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.adv__labs{position:absolute;inset:0;pointer-events:none}
.adv__lab{position:absolute;font-size:13px;line-height:1.25;font-weight:600;color:#1F2A20;
  opacity:0;transform:translateY(3px);transition:opacity .35s ease,transform .35s ease}
.adv__lab--l{text-align:right}
.adv__lab.is-on{opacity:1;transform:none}
.adv__pin{opacity:0;transition:opacity .35s ease}
.adv__pin.is-on{opacity:1}
.adv__lead{fill:none;stroke:#1F2A20;stroke-width:1.2;stroke-linejoin:round}
.adv__leadhalo{fill:none;stroke:#fff;stroke-width:3.6;stroke-linejoin:round;opacity:.9}
.adv__dot{fill:#1F2A20;stroke:#fff;stroke-width:1.2}
.adv__ringg{opacity:0;transition:opacity .5s ease .25s}
.adv__ringg.is-on{opacity:1}
.adv__ring{fill:none;stroke:#FFE27A;stroke-width:2.2;stroke-dasharray:7 4}
.adv__ringhalo{fill:none;stroke:rgba(20,20,20,.38);stroke-width:4.2}
.adv__numhalo{fill:#fff;opacity:.92}
.adv__num{fill:#1F2A20}
.adv__numtxt{font-size:11px;font-weight:700;fill:#fff;font-family:var(--font)}
.adv__key{margin:8px 0 0;padding-left:22px;font-size:13px;line-height:1.45;color:#2C2C2C}
.adv__key:empty{display:none}
.adv__keyi{opacity:.35;transition:opacity .3s}
.adv__keyi.is-on{opacity:1}
.adv__cap{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#3C3C3C}
.adv__credit{display:block;margin-top:4px;font-size:11.5px;color:#77776F}
.adv__replay{position:absolute;z-index:2;font:inherit;font-size:12px;font-weight:600;padding:4px 10px;cursor:pointer;
  border:1px solid var(--edge);border-radius:var(--r-pill);background:rgba(255,255,255,.94);color:#3C3C3C}
.adv__replay:hover{border-color:var(--green);color:var(--green)}
/* labels drawn inside a diagram, so the picture can have the whole width */
.adv__ilab{font-family:var(--font);font-weight:700;fill:#2A1E12;paint-order:stroke;stroke:#FCF7EB;stroke-linejoin:round;stroke-linecap:round}
.adv__ilab--light{fill:#FFFFFF;stroke:#17405E}
.adv__ilead{stroke:#3B2A1A;fill:none;opacity:.8}
.adv__idot{fill:#3B2A1A}
.adv__ruler{font-family:var(--font);font-weight:600;fill:#3B2A1A}
.adv__replay[hidden]{display:none}
.adv__intro{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.adv__tile{font:inherit;display:block;text-align:left;padding:0;overflow:hidden;cursor:pointer;
  border:1.5px solid var(--edge);border-radius:var(--r);background:#fff;transition:border-color .15s}
.adv__tile--xerophyte:hover{border-color:#E2B95F} .adv__tile--hydrophyte:hover{border-color:#7FB8DC}
.adv__tile img{display:block;width:100%;height:150px;object-fit:cover}
.adv__tilecap{display:block;padding:7px 10px;font-size:13px;font-weight:700;color:var(--ink)}
/* the drawings and the particles */
.adv__svgtxt{font-size:13px;font-weight:600;fill:#3B2A1A;font-family:var(--font)}
.adv__camhead{font-size:13px;font-weight:800;letter-spacing:.14em;font-family:var(--font)}
.adv__camtxt{font-size:17px;font-weight:600;font-family:var(--font)}
.adv__camtag{font-size:15px;font-weight:800;fill:#4A4A4A;font-family:var(--font);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.adv__root{fill:#F4E7CC;stroke:#6F5332;stroke-width:1}
.adv__flow{fill:none;stroke:#2F7FCB;stroke-width:2.2;stroke-dasharray:5 11;stroke-linecap:round}
.adv__lroot{fill:#DCCBA8;stroke:#8E7A5A;stroke-width:.5}
.adv__stalk{fill:none;stroke:#6E4630;stroke-width:3.6;stroke-linecap:round}
.adv__stalkhi{fill:none;stroke:#B07B55;stroke-width:1.1;stroke-linecap:round;opacity:.6}
.adv__mol{fill:#2F7FCB;stroke:#fff;stroke-width:1}
.adv__mol--co2{fill:#5E5E5E}
.adv__haze{fill:#7CC0F0;opacity:.3}
.adv__gastag{font-size:12px;font-weight:700;font-family:var(--font);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.adv__gastag--co2{fill:#4A4A4A}
.adv__gastag--o2{fill:#1F6FB8}
@media (prefers-reduced-motion:reduce){ .adv__frame,.adv__lab,.adv__pin,.adv__ringg,.adv__keyi{transition:none} }

/* the Supplement badge and the body on a phone */
@media (max-width:1000px){
  .platecol{height:min(60vh,520px)}
  .platewrap svg#body{height:100%}
}
/* the other number of a term, printed small beside it in the glossary and on the key-word cards */
.num{display:inline-block;margin-left:7px;font-size:11.5px;font-weight:500;color:var(--grey);vertical-align:1px;white-space:nowrap}
/* the potometer's statistics in the Learn text: bold, and a click shows the working in place */
.t.is-stat{font-weight:700;cursor:pointer;border-bottom:1px dotted rgba(0,0,0,.35);padding-bottom:1px}
.t.is-stat:hover,.t.is-stat:focus-visible{background:rgba(0,0,0,.05);outline:none}
.po__pop--inline{margin:8px 0 12px}

/* ---------- phone and upright tablet: the plate pinned above the notes ----------
   On a laptop the plate stays put while the notes scroll; on a phone it scrolled away with them and
   the animations went out of sight. Now it is pinned at the top of the scrolling stage, at a height
   that leaves the notes room, with a button that folds it to a strip for a reader who wants the notes
   alone. A screen too short for both (a phone held sideways) keeps the old behaviour: it scrolls away. */
.fold{display:none;margin-left:auto;white-space:nowrap}
@media (max-width:1000px) and (min-height:561px){
  .platecol{position:sticky;top:0;z-index:4;height:min(42vh,380px);box-shadow:0 2px 10px rgba(20,60,35,.14)}
  .tabs{position:static}
  .fold{display:inline-flex}
  .platecol.is-folded{height:auto;min-height:0}
  .platecol.is-folded .platewrap{position:absolute;left:0;right:0;top:46px;height:320px;visibility:hidden}   /* kept at a real size: the drawing's geometry must stay sane while it is out of sight */
  .platecol.is-folded .said,.platecol.is-folded .platecol__hint,.platecol.is-folded .plate-key{display:none}
}
@media (max-width:1000px) and (max-height:560px){ .platecol{position:static} }

/* the plate's tool row on a phone: one line each, the hint clamped to two lines */
@media (max-width:1000px){
  .tool{white-space:nowrap}
  .platecol__hint{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
}

/* a phone with a station zoomed in: the whole-plate button and the fold are enough; the hint would only crowd them */
@media (max-width:540px){ .tool--whole:not([hidden]) ~ .platecol__hint{display:none} }
/* the short button labels up to 1000px — placed after the base rule that hides them, which would otherwise win */
@media (max-width:1000px){ .hbtn__long{display:none} .hbtn__short{display:inline;font-size:15px;font-weight:700} }

/* up to 820px the header takes two rows — the name and byline above, the counts and buttons below — so the name is never cut short on an upright tablet */
@media (max-width:820px){ .hdr{flex-wrap:wrap;row-gap:6px} .hdr__mark{flex:1 1 100%;overflow:visible} .hdr__spacer{display:none} .hdr__stats{flex:1 1 100%} }
/* the way back shares the first row with the name (the name and byline stack beside it if they must), so the header is no taller than before it moved (14 Oct 2026) */
@media (max-width:820px){ .hbtn--back + .hdr__mark{flex:1 1 0;min-width:0;flex-wrap:wrap;row-gap:2px} }
/* a laptop: the way back says it short (← The body); the lab's name never shrinks to "D…" and the byline is never cut: the subtitle,
   which only ever showed as "Top…" here, goes, and the byline steps under the name when the row is full, as it does on a tablet (14 Oct 2026) */
@media (max-width:1440px){ .hbtn--back .hbtn__long{display:none} .hbtn--back .hbtn__short{display:inline} .hdr__sub{display:none} .hdr__mark{flex-wrap:wrap;row-gap:0} .hdr__title{line-height:1.1} .hdr__by{line-height:1.15} }
@media (min-width:821px){ .hdr__title{flex-shrink:0} }
/* the way back's short words are the pill's own size, not the 15 px of the icon-like short labels (A–Z, ?); on a phone a long name
   (Classification Lab) goes onto two lines rather than being cut (14 Oct 2026) */
.hbtn--back .hbtn__short{font-size:inherit;font-weight:inherit}
@media (max-width:820px){ .hbtn--back + .hdr__mark .hdr__title{white-space:normal;flex:0 1 auto;min-width:0} }
/* a small phone (370 px or less: 360 and 320): the way back and the name have the first row to themselves, so the name and the byline are
   never cut; the IGCSE 0610 badge wraps to start the second row, beside the counts (14 Oct 2026) */
@media (max-width:370px){ .hbtn--back + .hdr__mark{flex:1 1 calc(100% - 140px)} .hdr__stats{flex:1 1 0;min-width:0} .hbtn--back ~ .badge{align-self:flex-start;margin-top:8px} }

/* a tablet held flat (1024px) and every narrower screen: no subtitle, and a smaller name up to 1000px, so the name is never cut short */
@media (max-width:1100px){ .hdr__sub{display:none} }
@media (max-width:1000px){ .hdr__title{font-size:16px} }

/* the compact header up to 1100px — a tablet held flat included — with the byline allowed onto a second line, so the name is never cut short.
   Last in the file on purpose: the base rule that hides the short labels would otherwise win. */
@media (max-width:1100px){
  .badge{padding:1px 7px;font-size:10px;letter-spacing:.06em} .stat__lbl{display:none} .stat{padding:4px 10px 4px 5px} .stat--stations{display:none}
  .hbtn{padding:6px 11px} #btnHelp{width:32px;padding:0;display:grid;place-items:center;height:30px}
  .hbtn__long{display:none} .hbtn__short{display:inline;font-size:15px;font-weight:700}
  .hdr__title{font-size:16px} .hdr__mark{flex-wrap:wrap;row-gap:0}
}

/* folded: the column clips, so nothing of the drawing — not even a part that sets its own visibility — shows below the strip or catches a tap */
@media (max-width:1000px) and (min-height:561px){ .platecol.is-folded{overflow:hidden} .platecol.is-folded .platewrap{pointer-events:none} .platecol.is-folded .platewrap *{visibility:hidden} }

/* the pinned plate paints above everything in the notes — the numbered pins, tags and tab bar carry their own z-index — and below tooltips, toasts, sheets and modals */
@media (max-width:1000px) and (min-height:561px){ .platecol{z-index:35} }
/* the potometer's reset: at the end of the button row, in its own colour so it is found at once */
.po__resetall{margin-left:auto;color:#9A4A22;border-color:#C9793F;background:#FFF6EE}
.po__resetall:hover{background:#F7DCC6}
/* the statistics pop-up: the formula set out, a key to its letters, the working as steps and a table */
.po__pop__h > span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.po__pop__ib{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5A3D8A;background:#EFE8F8;border:1px solid #CDB9E8;border-radius:var(--r-pill);padding:1px 8px}
.po__pop__fm{font-family:"Times New Roman",Times,Georgia,serif;font-size:19px;line-height:1.3;text-align:center;padding:10px 8px;margin:8px 0 6px;background:#fff;border:1px dashed var(--edge);border-radius:var(--r);color:#1F2A1F}
.po__pop__fm i{font-style:italic}
.fm__frac{display:inline-block;vertical-align:middle;text-align:center;margin:0 3px}
.fm__num{display:block;border-bottom:1.3px solid currentColor;padding:0 6px 1px}
.fm__den{display:block;padding:1px 6px 0}
.fm__sqrt{display:inline-block;vertical-align:middle;font-size:26px;line-height:1;margin-right:1px}
.fm__rad{display:inline-block;vertical-align:middle;border-top:1.3px solid currentColor;padding:3px 6px 0}
.po__pop__key{font-family:var(--mono);font-size:11.5px;color:var(--grey);text-align:center;margin:0 0 10px}
.po__pop__key i{font-family:"Times New Roman",Times,Georgia,serif;font-size:14px;color:#1F2A1F}
.po__pop__how p{margin:0 0 6px}
.po__pop__steps{margin:6px 0 0;padding-left:22px}
.po__pop__steps li{margin:0 0 4px;line-height:1.45}
.po__pop__steps i,.po__pop__tbl i{font-family:"Times New Roman",Times,Georgia,serif;font-size:14.5px}
.po__pop__tbl{border-collapse:collapse;margin:6px 0 8px;font-variant-numeric:tabular-nums;font-size:12.5px;background:#fff}
.po__pop__tbl th,.po__pop__tbl td{border:1px solid var(--edge);padding:4px 10px;text-align:center}
.po__pop__tbl th{font-weight:600;color:var(--green);background:var(--card-2);line-height:1.25}
/* the shoot in the auxin widget: a stack of cells; the shaded half tints as the auxin arrives and its cells grow longer */
.ax__shade{fill:#F6D98A;opacity:0;transition:opacity .3s}
.ax__cells{fill:none;stroke:#2F7D46;stroke-width:.9;opacity:.6}
/* the lines of the potometer's graph: tabs above the table (one a line), the line's name, a legend that hides and shows */
.po__linetabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.po__linetab{font:inherit;font-size:13px;font-weight:700;border:1.5px solid var(--edge);border-radius:var(--r-pill);background:#fff;padding:4px 12px 4px 8px;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.po__linetab small{font-weight:500;color:var(--grey);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.po__linetab[aria-pressed="true"]{border-color:var(--lc);box-shadow:inset 0 0 0 1.5px var(--lc)}
.po__swatch{width:12px;height:12px;border-radius:50%;background:var(--lc);flex:none;display:inline-block}
.po__linehead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 6px}
.po__linename{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);border:0;border-bottom:1px dashed var(--edge);background:transparent;padding:2px 4px;min-width:min(280px,100%)}
.po__linename:focus{outline:none;border-bottom-color:var(--green)}
.po__linehead small{color:var(--grey);font-size:12px}
.po__delline{margin-left:auto;font-size:12px;padding:3px 9px}
.po__legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:6px 0 2px}
.po__legend__b{font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--edge);border-radius:var(--r-pill);background:#fff;padding:2px 10px 2px 6px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.po__legend__b[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.po__legend small{color:var(--grey);font-size:12px}
.po__band{opacity:.16}
/* what each bench button is for, at once on hover or keyboard focus */
.wbtn[data-tip]{position:relative}
.wbtn[data-tip]::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 7px);z-index:40;width:max-content;max-width:min(300px,72vw);white-space:normal;text-align:left;background:#1F2A1F;color:#fff;font-size:12.5px;font-weight:500;line-height:1.38;letter-spacing:0;text-transform:none;padding:7px 11px;border-radius:7px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity .1s,transform .1s}
.wbtn[data-tip]::before{content:"";position:absolute;left:12px;top:calc(100% + 1px);border:6px solid transparent;border-top-width:0;border-bottom-color:#1F2A1F;opacity:0;pointer-events:none;transition:opacity .1s}
.wbtn[data-tip]:hover::after,.wbtn[data-tip]:hover::before,.wbtn[data-tip]:focus-visible::after,.wbtn[data-tip]:focus-visible::before{opacity:1;transform:none}
.po__resetall[data-tip]::after{left:auto;right:0}
.po__resetall[data-tip]::before{left:auto;right:14px}
.po__btns,.po__right,.po{overflow:visible}
/* a hovered button's tooltip sits above its neighbours in the row */
.wbtn[data-tip]:hover,.wbtn[data-tip]:focus-visible{z-index:41}
.po__resetall:disabled{background:#F5F7F4}
/* the trials toggle sits with the statistic toggle; a struck-through pill means the trials are hidden */
.po__dots[aria-pressed="false"]{text-decoration:line-through;opacity:.7}
/* a button asking to be pressed again before it loses work */
.po .wbtn.is-armed,.po__data .wbtn.is-armed{background:#B4532A!important;border-color:#B4532A!important;color:#fff!important}
.po__errbar__l2{margin-left:10px}
/* a phone: each row a two-column grid, the record and the resets full width, so every button is a clear target */
@media (max-width:540px){
  .po__brow{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .po__brow .wbtn{width:100%;margin:0;text-align:center;padding:8px 8px}
  .po__brow .po__rec,.po__brow .po__resetset,.po__brow .po__resetall,.po__brow .po__newshoot,.po__brow .po__newline{grid-column:1 / -1}   /* only Start and the tap share a line; every button one line tall */
  .po__resetall[data-tip]::after{left:0;right:auto}.po__resetall[data-tip]::before{left:12px;right:auto}
}
/* the small reset in a widget's header */
.widget__h .widget__reset{margin-left:auto;font:inherit;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--grey);background:#fff;border:1px solid var(--edge);border-radius:var(--r-pill);padding:2px 9px;cursor:pointer}
.widget__h .widget__try ~ .widget__reset{margin-left:0}
.widget__h .widget__reset:hover{color:var(--ink);border-color:var(--green)}
@media (max-width:540px){ .widget__h{row-gap:3px} .widget__h .widget__try,.widget__h .widget__reset{padding:1px 8px} }

/* ---------- minifig: a postage-stamp diagram beside a sentence ---------- */
.minifig{float:right;width:152px;margin:1px 0 6px 14px;padding:0;
  background:#FBFAF6;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.minifig__svg{display:block;width:100%;height:auto}
/* The row has to grow to contain its own floated figure. overflow:hidden does that, but it also
   CLIPS list markers, which are painted outside the principal box — so the numbers in front of
   the four auxin facts silently disappeared. flow-root contains the float and clips nothing. It
   is also scoped to the top-level bullet, not to every li inside it. */
.exam-list > li{display:flow-root}
/* A numbered run of facts under a sentence that has a figure was wrapping round the float for
   its first three lines and then springing out to full width, which reads as a staircase with a
   bite out of it. The picture belongs beside the sentence it illustrates; the list starts under
   it, at one width. */
.minifig ~ .exam-steps{clear:right}
@media (max-width:560px){
  /* on a phone a 122 px float leaves a 3-word column beside it, which is worse than no
     picture at all: it goes full width and the text runs under it instead of round it */
  .minifig{float:none;width:186px;margin:4px auto 8px}
}
.figref{display:inline-flex;align-items:center;justify-content:center;width:1.3em;height:1.3em;
  margin:0 .1em 0 .16em;border:1.4px solid #3C3C3C;border-radius:50%;font-size:.76em;font-weight:700;
  line-height:1;vertical-align:.06em;color:#3C3C3C;flex:0 0 auto}
.minifig__ph{position:relative;display:block;line-height:0}
.minifig__img{display:block;width:100%;height:auto}
.minifig__pin{position:absolute;transform:translate(-50%,-50%);width:19px;height:19px;border-radius:50%;
  background:#fff;border:1.5px solid #3C3C3C;color:#3C3C3C;font:700 11px/16px var(--font);
  text-align:center;font-style:normal;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.xp__cite{margin:14px 0 0;padding-top:10px;border-top:1px dashed var(--edge);
  font-size:12.5px;line-height:1.5;color:#6A6A6A}
.xp__cite a{color:var(--k-blood)}
.xp__warn{margin:0 0 14px;padding:9px 12px;border-radius:var(--r);
  background:#FDECEC;border:1.5px solid #E4B4B4;border-left:4px solid #C0392B;
  color:#9B2F22;font-size:13px;font-weight:700;line-height:1.45}

/* ----- labelphoto: a photograph labelled the way a drawing is ----- */
.lp{margin:14px 0;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:8px 6px 6px}
.lp__svg{display:block;width:100%;height:auto;font-family:var(--font)}
.lp__ringhalo{fill:none;stroke:rgba(0,0,0,.45);stroke-width:4.2}
.lp__ring{fill:none;stroke:#FFF1A8;stroke-width:2;stroke-dasharray:6 3.5}
.lp__leadhalo{stroke:#fff;stroke-width:3.4;opacity:.9}
.lp__lead{stroke:#14572B;stroke-width:1.3}
.lp__dot{fill:#14572B;stroke:#fff;stroke-width:1.6}
.lp__lab{font-size:13px;fill:#14572B;font-weight:700}
.lp__brace{fill:none;stroke:#3C3C3C;stroke-width:1.5}
.lp__group{font-size:13px;fill:#3C3C3C;font-weight:700;font-style:italic}
.lp figcaption{font-size:12.5px;line-height:1.5;color:var(--grey);margin:6px 6px 0}

/* the maker's name, wherever it appears: a quiet link out to who made this. Same dotted
   underline the header credit already uses, so it reads as a link without shouting. */
.by-me{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.by-me:hover,.by-me:focus-visible{border-bottom-style:solid}


/* ============================================================
   The body, on dark ink
   The left column is a specimen on an ink slab, like the Human Body Hub it sits behind: the
   CC0 body outline, and inside it the heart, the organs and every vessel, lit by the blood
   flowing in them. Red is oxygenated blood and blue is deoxygenated blood — on the plate
   only; the text never uses those two colours for anything else.
   ============================================================ */
.platecol{
  position:relative;min-height:0;overflow:hidden;display:flex;flex-direction:column;color:#DCE7ED;
  background:#060D12;background-image:radial-gradient(90% 70% at 50% 42%,#10222C 0%,#0A161D 62%,#060D12 100%)
}
.platecol__tools{position:relative;z-index:6;display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:46px}
.platecol__hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8EA8B5}
.tool{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#DCE7ED;cursor:pointer;
  border:1px solid rgba(220,231,237,.28);border-radius:999px;padding:6px 12px;background:rgba(12,24,31,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .15s,color .15s
}
.tool:hover{border-color:rgba(220,231,237,.62)}
.tool[hidden]{display:none}
.platewrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0}
.platewrap svg#body{width:100%;height:100%;display:block;overflow:hidden}
/* the name of what is lit, and a line on what it does: for a part beyond the syllabus that line is all
   the lab says about it, so it is a sentence to read, wrapped, never cut off (26 Sep) */
.said{position:relative;z-index:4;text-align:center;padding:0 16px 12px;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,13,18,0),rgba(6,13,18,.86))}
.said__name{display:block;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--c,#FFE7E2)}
.said__note{display:block;font-family:var(--sans);font-size:13px;line-height:1.4;color:#B4C8D2;margin-top:2px}
/* the colour key under the body (Daniel, 25 Sep: "if you're going to color code veins and arteries, you
   should add a legend"): the colours are the blood's, so the pulmonary artery is blue and the pulmonary
   veins red; the hepatic portal system is outlined in turquoise */
.plate-key{position:relative;z-index:4;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0 12px 10px;
  font-family:var(--sans);font-size:11.5px;color:#C9D8E0;background:rgba(6,13,18,.86)}
.plate-key__i{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.plate-key i{display:inline-block;width:18px;height:6px;border-radius:3px}
.plate-key__o{background:#C4302B;box-shadow:0 0 0 1.5px #FFBF00 inset}
.plate-key__d{background:#0060B6;box-shadow:0 0 0 1.5px #00A0C6 inset}
.plate-key__p{background:#0E8F88;box-shadow:0 0 0 1.5px #9AF5EA inset}
.platecol.is-sim .plate-key,.platecol.is-bench .plate-key{display:none}
/* a station that stands something else on the bench takes the whole column */
.platecol.is-bench,.platecol.is-sim{background:#F3EFE4;background-image:none;color:var(--ink)}
.platecol.is-bench .platewrap,.platecol.is-bench .platecol__tools,.platecol.is-bench .said{display:none}
.platecol.is-sim .platewrap,.platecol.is-sim .said{display:none}
.platecol.is-sim .tool--whole,.platecol.is-sim .platecol__hint{display:none}
.platecol.is-sim .tool{color:var(--ink);background:rgba(255,255,255,.8);border-color:rgba(27,42,34,.28)}
.sim{flex:1;min-height:0;overflow:auto;padding:0 14px 16px;display:flex;flex-direction:column}
.sim[hidden]{display:none}
.sim .widget{margin-top:0;border:none;box-shadow:none;background:transparent;padding:0}
/* a Learn-tab widget standing in the column (CircLearn.stage): the plate's own tools have nothing to do */
.platecol.is-sim .tool-zoom,.platecol.is-sim .tool--t{display:none}
.stg__park{display:none}
.stg__title{margin:2px 0 0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--k-heart)}
.stg__title[hidden]{display:none}
/* a wide figure: a picture with small labels, set across the column instead of in the margin */
.photo.photo--wide{max-width:680px;margin:14px auto 8px}
.exam-list li .photo.photo--wide{margin-left:auto}
.photo.photo--wide figcaption{font-size:13px}
.tool--sim{margin-right:auto}
.bench{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:18px 18px 20px}
.bench[hidden]{display:none}
@media (max-width:1000px){ .platecol.is-bench{display:none} }
.tag{position:absolute;z-index:5;pointer-events:none;opacity:0;transform:translate(-50%,-100%) scale(.96);transition:opacity .22s,transform .22s;white-space:nowrap}
.tag.on{opacity:1;transform:translate(-50%,-100%) scale(1)}
.platewrap.is-flying .tag{opacity:0}
.tag__pill{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#14191C;background:var(--c,#FFB3A8);padding:5px 11px;border-radius:2px;box-shadow:0 0 22px color-mix(in srgb,var(--c,#FFB3A8) 55%,transparent)}
/* lit and dimmed: a station's parts glow, the rest step back */

/* ---------- the colour language of the Learn tab ----------
   Four inks, one per part of the story, each dark enough to read on paper (all clear WCAG AA
   on the paper and the card). Not red and not blue: those belong to the blood on the plate. */
:root{ --k-heart:#A3213A; --k-vessel:#8A5A0E; --k-blood:#5B3FA0; --k-health:#0B6A5A; }
.t{font-weight:700}
.t--heart{color:var(--k-heart)} .t--vessel{color:var(--k-vessel)} .t--blood{color:var(--k-blood)} .t--health{color:var(--k-health)}
.kw dt .t{font-weight:700}
.exam-list > li{line-height:1.62}
.legend__intro{font-size:13px;color:#4A4A4A;margin:0 0 10px;line-height:1.5}
.legend{display:flex;flex-wrap:wrap;gap:9px 12px}
.legend__i{font-size:13.5px}
.keybar{background:var(--card-2);border:1px solid var(--edge);border-left:4px solid var(--green);border-radius:var(--r);padding:11px 15px 8px;margin-bottom:16px}
.keybar .legend__intro{margin:0 0 9px;font-size:12.5px;color:#4A4A4A}
.keybar .legend{gap:7px 10px;padding:0}
.keybar .legend__i{font-size:13px}
.later{border-left:4px solid var(--k-blood)}
.later__list{margin:0;padding:0;list-style:none}
.later__list li{font-size:15px;line-height:1.55;margin-bottom:11px;padding-left:2px}
.later__list li:last-child{margin-bottom:0}
.later__ref{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--k-blood);
  border-radius:var(--r-pill);padding:2px 9px;margin-right:8px;white-space:nowrap;vertical-align:1px}
.chip--k{background:var(--k-heart)}
.chip--heart{background:var(--k-heart)} .chip--vessel{background:var(--k-vessel)} .chip--blood{background:var(--k-blood)} .chip--health{background:var(--k-health)}
.chip--skill{background:#3C3C3C}

/* ============================================================
   The step player (js/w-common.js): every animation that runs in steps
   ============================================================ */
.sp__bar{display:flex;align-items:center;gap:12px;margin:10px 0 12px;flex-wrap:wrap;--sp:var(--k-heart)}
.sp__play{font:inherit;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:122px;padding:7px 16px 7px 13px;cursor:pointer;
  border:1.5px solid var(--sp);border-radius:var(--r-pill);background:var(--sp);color:#fff}
.sp__play:hover{filter:brightness(1.08)}
.sp__play.is-playing{background:#fff;color:var(--sp)}
/* a step has finished and is waiting: the button says so, twice, then stays still */
.sp__play.is-next{animation:sp-next 1.5s ease-out 2}
@keyframes sp-next{0%{box-shadow:0 0 0 0 rgba(163,33,58,.5)}100%{box-shadow:0 0 0 11px rgba(163,33,58,0)}}
@media (prefers-reduced-motion:reduce){.sp__play.is-next{animation:none}}
.sp__all{font:inherit;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;
  border:1.5px solid var(--edge);border-radius:var(--r-pill);background:#fff;color:#5A5A5A}
.sp__all:hover{border-color:var(--sp);color:var(--sp)}
.sp__all .sp__ico{font-size:9px;letter-spacing:-1px}
.sp__ico{font-size:11px;line-height:1}
.sp__prog{flex:1 1 160px;min-width:120px;display:flex;gap:3px;height:9px;cursor:pointer}
.sp__seg{position:relative;flex:1 1 0;background:var(--edge-2);border-radius:var(--r-pill);overflow:hidden}
.sp__seg i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sp,var(--k-heart));border-radius:inherit}
.sp__count{font-size:12.5px;font-weight:600;color:var(--grey);min-width:80px;text-align:right;font-variant-numeric:tabular-nums}
.sp__now{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.sp__steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.sp__stepb{font:inherit;display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;padding:7px 11px;
  border:1.5px solid var(--edge);border-radius:var(--r);background:#fff;color:#4A4A4A;transition:border-color .2s,background-color .2s}
.sp__stepb:hover{border-color:#D8A3AE}
.sp__num{flex:none;width:21px;height:21px;border-radius:50%;background:var(--edge-2);color:var(--grey);font-size:11.5px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.sp__txt{display:block;font-size:13.5px;line-height:1.42;padding-top:1px}
.sp__txt b{color:var(--ink);font-weight:700}
.sp__tag{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);background:var(--edge-2);border-radius:var(--r-pill);padding:1px 7px;vertical-align:1px;white-space:nowrap}
.sp__p{display:none}
.sp__kw{font-weight:700;color:var(--ink)}
.sp__step.is-on .sp__p{display:block;margin-top:3px}
.sp__step.is-on .sp__stepb{border-color:var(--k-heart);background:#FBECEF;color:var(--ink)}
.sp__step.is-on .sp__num{background:var(--k-heart);color:#fff}
.sp__step.is-done .sp__stepb{border-color:#A9D6BA;background:var(--green-tint)}
.sp__step.is-done .sp__num{background:var(--green-2);color:#fff}
/* a widget whose drawing stands in the plate's column (stepper.compact): the steps are small chips, several
   to a row, still pressed to play a step, and the step's words stand in a panel right under them, so the
   reader never scrolls between the steps and the words (Daniel, 26 Sep, on "Follow one red blood cell") */
.sp__steps.sp__steps--chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px}
.sp__steps--chips .sp__stepb{height:100%;align-items:center;gap:7px;padding:6px 9px}
.sp__steps--chips .sp__num{width:19px;height:19px;font-size:10.5px;margin-top:0}
.sp__steps--chips .sp__txt{font-size:12.5px;line-height:1.3;padding-top:0}
.sp__steps--chips .sp__p,.sp__steps--chips .sp__tag,.sp__steps--chips .bf__beyond{display:none!important}
.sp__now.sp__now--panel{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin:10px 0 0;padding:11px 14px 12px;
  background:#fff;border:1px solid var(--edge);border-left:4px solid var(--k-heart);border-radius:10px;font-size:15px;line-height:1.55;color:#2A2A2A}
.sp__now--panel .sp__nowh{margin-bottom:4px}
.sp__nowtag{margin-right:6px}

/* labels ruled level, on a dark drawing (js/w-common.js labels) */
.lb__halo{fill:none;stroke:#0E1920;stroke-opacity:.8;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.lb__lead{fill:none;stroke:#E9EEF1;stroke-width:1.3;stroke-linejoin:round}
.lb__dot{fill:#FFFFFF;stroke:#0E1920;stroke-width:1}
.lb__txt{fill:#F2F5F7;font-family:var(--sans,Inter,system-ui,sans-serif);font-weight:500;paint-order:stroke;stroke:#0E1920;stroke-width:3px;stroke-linejoin:round}
.lb.is-valve .lb__txt{fill:#F4E6D0}
.lb.is-valve.is-open .lb__txt{fill:#9BE3A8}
.lb.is-valve.is-shut .lb__txt{fill:#F4E6D0}

/* ---------- cycle: one heartbeat ---------- */
.cy__wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(210px,1fr);gap:16px;align-items:start}
.cy__wrap.cy--stack{grid-template-columns:minmax(0,1fr)}
.cy__left{min-width:0}
.cy__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cy__read{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.cy__pill{font-size:12.5px;border-radius:var(--r-pill);padding:3px 10px;border:1.5px solid var(--edge);background:#fff;color:#3C3C3C;transition:background .25s,border-color .25s}
.cy__pill i{font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:11.5px;margin-left:3px}
.cy__pill.is-open{border-color:#7CC08E;background:#EAF6ED}
.cy__pill.is-open i{color:#1E7A3E}
.cy__pill.is-shut{border-color:#E2B9A9;background:#FBEFEA}
.cy__pill.is-shut i{color:#A3213A}
.cy__snd{margin-left:auto}
.cy__fig{margin:0;position:relative}
.cy__svg{width:100%;height:auto;display:block}
.cy__bg{fill:#0D1A22}
.cy__cell--deo{fill:#8FB2FF;stroke:#1B3570;stroke-width:1}
.cy__cell--oxy{fill:#FF8A7E;stroke:#7A1E21;stroke-width:1}
.cy__snd-mark circle{fill:rgba(255,236,150,.16);stroke:#FFE58A;stroke-width:2.2}
.cy__snd-mark text{fill:#FFE58A;font:700 22px var(--sans,Inter,sans-serif)}
.cy__state{fill:#FFE58A;font-weight:700;font-family:var(--sans,Inter,sans-serif);letter-spacing:.02em}
.snd__el{width:100%;max-width:420px;display:block;margin:6px 0 2px}
.hd{width:100%;height:auto;display:block;border-radius:var(--r)}

/* ---------- the gym investigation: the task, and where to learn how (js/w-task.js) ---------- */
.tl__list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.tl__item{position:relative}
.tl__box{position:absolute;left:12px;top:12px;width:20px;height:20px;margin:0;opacity:0}
.tl__lab{display:flex;gap:11px;align-items:flex-start;padding:9px 12px;border:1.5px solid var(--edge);border-radius:10px;background:#fff;cursor:pointer;font-size:14px;line-height:1.45;min-height:42px;transition:border-color .15s,background .15s}
.tl__lab:hover{border-color:var(--green)}
.tl__box:focus-visible + .tl__lab{outline:2px solid var(--green);outline-offset:2px}
.tl__num{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--edge-2);color:var(--grey);font-size:12px;font-weight:700;display:grid;place-items:center}
.tl__item.is-done .tl__lab{background:var(--green-tint);border-color:#9CCBA9}
.tl__item.is-done .tl__num{background:var(--green);border-color:var(--green);color:transparent;position:relative}
.tl__item.is-done .tl__num::after{content:"✓";color:#fff;font-size:13px;position:absolute;inset:0;display:grid;place-items:center}
.tl__count{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--green-2)}
.rm{--rq:#1F5FAD;--rq-t:#E4EDF9;--bk:#2E7D32;--bk-t:#E6F2E7;--mc:#B45309;--mc-t:#FCEFDF;--dm:#6A3FA0;--dm-t:#EFE8F7}
.rm__wrap{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:12px;margin-top:6px;align-items:start}
.rm__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rm__btn{display:flex;gap:9px;align-items:center;width:100%;text-align:left;padding:8px 10px;border:1.5px solid var(--edge);border-left-width:6px;border-radius:9px;background:#fff;cursor:pointer;font:inherit;font-size:14px;line-height:1.35;color:inherit}
.rm__btn.rm--rq{border-left-color:var(--rq)}.rm__btn.rm--bk{border-left-color:var(--bk)}.rm__btn.rm--mc{border-left-color:var(--mc)}.rm__btn.rm--dm{border-left-color:var(--dm)}
.rm__btn:hover{background:#FAFAF7}
.rm__btn.is-on{font-weight:700}.rm__btn.is-on.rm--rq{background:var(--rq-t)}.rm__btn.is-on.rm--bk{background:var(--bk-t)}.rm__btn.is-on.rm--mc{background:var(--mc-t)}.rm__btn.is-on.rm--dm{background:var(--dm-t)}
.rm__btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.rm__num{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--edge-2);display:grid;place-items:center;font-size:12px;font-weight:700}
.rm__panel{border:1.5px solid var(--edge);border-top-width:6px;border-radius:10px;padding:12px 14px;background:#fff;font-size:14px;line-height:1.5}
.rm__panel.rm--rq{border-top-color:var(--rq)}.rm__panel.rm--bk{border-top-color:var(--bk)}.rm__panel.rm--mc{border-top-color:var(--mc)}.rm__panel.rm--dm{border-top-color:var(--dm)}
.rm__crit{margin:0 0 4px;font-size:13px}
.rm__chip{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;font-weight:700;font-size:12px;margin-right:4px}
.rm--rq .rm__chip{background:var(--rq)}.rm--bk .rm__chip{background:var(--bk)}.rm--mc .rm__chip{background:var(--mc)}.rm--dm .rm__chip{background:var(--dm)}
.rm__name{margin:2px 0 8px;font-size:16px}
.rm__h{margin:10px 0 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--grey)}
.rm__asks{margin:0;padding-left:1.2em}.rm__asks li{margin:0 0 4px}
.rm__links{margin:0;display:flex;flex-wrap:wrap;gap:6px 14px}
@media (max-width:700px){.rm__wrap{grid-template-columns:minmax(0,1fr)}}
.rm{container-type:inline-size}   /* stacks by its own width too: the station column is narrow on a 1024 px screen (audit, 9 Oct 2026) */
@container (max-width:540px){.rm__wrap{grid-template-columns:minmax(0,1fr)}}
/* the four steps (taskmap, 10 Oct 2026): the parts panel's layout, in the lab's green */
.tm .rm__btn{border-left-color:var(--green-2)}.tm .rm__btn.is-on{background:var(--green-tint)}
.tm__panel{border-top-color:var(--green-2)}.tm .rm__chip{background:var(--green-2)}
.tm__row{margin:0 0 4px;font-size:14px}
.tm__k{display:inline-block;min-width:3.4em;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--grey,#6B6B6B)}

/* rules to follow, set apart from the green of what to know (10 Oct 2026: the perfect results table and graph):
   a cream sheet with a brown edge, each rule beside an empty box, and where to practise them */
.exam-part--rules{background:#FFFDF6;border-top:1px solid #E5DCC6;border-bottom:1px solid #E5DCC6;box-shadow:inset 6px 0 0 #8A6A2F}
.exam-part--rules .exam-part__h{color:#7A5A1F}
.exam-part--rules .exam-list > li::before{background:#8A6A2F;box-shadow:0 0 0 3px #F3EAD6}
.exam-part--rules .exam-steps{list-style:none;padding-left:0;margin:8px 0 0}
.exam-part--rules .exam-steps > li{position:relative;padding-left:28px;margin:0 0 7px}
.exam-part--rules .exam-steps > li::before{content:"";position:absolute;left:1px;top:.28em;width:13px;height:13px;border:2px solid #8A6A2F;border-radius:3px;background:#fff}
.exam-links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.exam-link{font-size:13.5px;font-weight:600;color:#6B4E17;border:1.5px solid #8A6A2F;border-radius:var(--r-pill);padding:5px 13px;text-decoration:none;background:#fff;min-height:36px;display:inline-flex;align-items:center;gap:5px}
.exam-link:hover{background:#F3EAD6}
.exam-link:focus-visible{outline:2px solid #8A6A2F;outline-offset:2px}
.rl__list{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--edge)}
.rl__item{display:flex;gap:12px;padding:11px 2px;border-bottom:1px solid var(--edge)}
.rl__num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--k-health);color:#fff;font-weight:700;font-size:12.5px;display:grid;place-items:center;margin-top:1px}
.rl__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.rl__name{font-size:14.5px}
.rl__say{font-size:13.5px;color:#3C3C3C;line-height:1.45}
.rl__links{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.rl__a{font-size:13px;font-weight:600;color:var(--green);border:1.5px solid var(--green);border-radius:var(--r-pill);padding:4px 12px;text-decoration:none;background:#fff;min-height:34px;display:inline-flex;align-items:center;gap:5px}
.rl__a:hover{background:var(--green-tint)}
.rl__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rl__check{margin:12px 0 0}
.rl__a--big{font-size:13.5px;background:var(--green);color:#fff}
.rl__a--big:hover{background:var(--green);filter:brightness(1.1)}

/* ---------- trace the route (js/w-route.js): the body again, kept still, and the puzzle beside it ---------- */
.rt__wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(230px,1fr);gap:16px;align-items:start}
@media (max-width:760px){ .rt__wrap{grid-template-columns:minmax(0,1fr)} }
.rt__map{position:relative;height:min(74vh,620px);min-height:380px;background:#060D12;border-radius:14px;overflow:hidden}
.rt__svg{width:100%;height:100%;display:block}
.rt__loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#8FA7B4;font-size:13px}
.rt__side{display:flex;flex-direction:column;gap:10px;min-width:0}
/* standing in the plate's column (CircLearn.stage): the body fills it; the puzzle takes the text's width */
.rt.is-staged .rt__wrap{grid-template-columns:minmax(0,1fr)}
.rt.is-staged .rt__maphome{display:none}
.sim > .rt__pack{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.sim > .rt__pack .rt__map{flex:1;min-height:0;height:auto}
.rt__pick{display:flex;flex-wrap:wrap;gap:5px}
.rt__pb{font:inherit;font-size:13px;font-weight:700;min-width:38px;height:36px;padding:0 10px;border-radius:9px;border:1.5px solid var(--edge);background:#fff;color:var(--ink);cursor:pointer}
.rt__pb small{font-size:10px;font-weight:700;color:var(--k-vessel);margin-left:2px}
.rt__pb:hover{border-color:var(--k-vessel)}
.rt__pb.is-on{border-color:var(--k-vessel);background:#FBF3E4}
.rt__pb.is-solved{background:var(--green);border-color:var(--green);color:#fff}
.rt__pb.is-solved small{color:#E7F3EA}
.rt__task{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid var(--edge)}
.rt__n{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--k-vessel)}
.rt__title{font-size:15.5px;line-height:1.35}
.rt__how{font-size:13.5px;color:#3C3C3C}
.rt__how i{font-style:normal;font-weight:700}
.rt__trail{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.rt__t{font-size:13px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:#FBF3E4;border:1px solid #E6CFA4;color:#5B3C08}
.rt__arr{color:var(--grey);font-size:13px;padding:0 1px}
.rt__t--start{background:#EFE7D6}
.rt__t--next{background:#fff;border-style:dashed;color:var(--grey)}
.rt__say{margin:0;font-size:14px;line-height:1.45;min-height:1.45em}
.rt__say.is-right{color:var(--green-2)}
.rt__say.is-wrong{color:#A3213A}
.rt__say.is-hint{color:#5B3C08}
.rt__say.is-done{color:var(--green-2);background:var(--green-tint);border-radius:10px;padding:8px 11px}
.rt__tools{display:flex;flex-wrap:wrap;gap:6px}
.rt__tools .wbtn{min-height:36px}
.rt__list summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--grey)}
.rt__listbox{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.rt__lb{font:inherit;font-size:13px;padding:5px 10px;min-height:34px;border-radius:var(--r-pill);border:1px solid var(--edge);background:#fff;cursor:pointer}
.rt__lb:hover{border-color:var(--k-vessel)}

/* ---------- why your heart rate rises (js/w-exercise.js) ---------- */
.mx__wrap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(210px,1fr);gap:16px;align-items:start}
.mx__wrap.mx--stack{grid-template-columns:minmax(0,1fr)}
.mx__fig{margin:0;position:relative}
.mx__svg{width:100%;height:auto;display:block}
.mx__bg{fill:#0D1A22}
.mx__hudk{fill:#9FB3C0;font:600 17px var(--sans,Inter,sans-serif);letter-spacing:.08em;text-transform:uppercase}
.mx__hudv{fill:#FFE58A;font:800 30px var(--sans,Inter,sans-serif);font-variant-numeric:tabular-nums}
.mx__hudu{fill:#FFE58A;font-weight:600;font-size:18px}
.mx__keyt{fill:#DCE6EC;font-family:var(--sans,Inter,sans-serif);font-weight:500}

/* labels on a phone: numbered pins on ruled leaders, the words in a band (CircLearn.pinLabels) */
.lb__pin{fill:#FFFFFF;stroke:#3C3C3C;stroke-width:1.6}
.lb__pinn{fill:#1F1F1F;font-weight:800;font-family:var(--sans,Inter,sans-serif)}
.lb__band{fill:#E6EEF2;font-family:var(--sans,Inter,sans-serif);font-weight:500}
.lb__bandn{font-weight:800;fill:#FFE58A}
.lb__band.is-valve{fill:#F4E6D0}
.lb__band.is-valve.is-open{fill:#9BE3A8}

/* a stacked step player: the drawing full width, the step's words right under it, the list below */
.cy--stack .sp__now,.mx--stack .sp__now{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin:10px 0 0;padding:10px 13px;
  background:#fff;border:1px solid var(--edge);border-left:4px solid var(--k-heart);border-radius:10px;font-size:14.5px;line-height:1.5;color:#2A2A2A}
.sp__nowh{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--k-heart);margin-bottom:2px}
.cy--stack .sp__p,.mx--stack .sp__p{display:none!important}
.cy--stack .sp__steps,.mx--stack .sp__steps{flex-direction:row;flex-wrap:wrap;gap:5px}
.cy--stack .sp__step,.mx--stack .sp__step{flex:1 1 180px}

/* the line under the body wraps on a phone rather than being cut off */


/* every step player's buttons reach the 36 px a finger needs */
.sp__play,.sp__all{min-height:36px}

/* ---------- the plate on the real drawing (js/circ-draw.js) ---------- */
.cp__veil{opacity:0;transition:opacity .45s ease;pointer-events:none}
.cp.is-lighting .cp__veil{opacity:1}
.cp__tubes{pointer-events:none;opacity:0;transition:opacity .45s ease}
.cp.is-lighting .cp__tubes{opacity:1}
.cp__lito{pointer-events:none}
.cp__flow{pointer-events:none}
.cp__f{transition:opacity .45s ease}
.cp__f.is-dim{opacity:.1}
.cp__art,.cp__halo,.cp__bg{pointer-events:none}
.cp__hits .cp__hit{pointer-events:stroke}
.cp__hits .cp__hit--o{pointer-events:fill}
.cp__lens{transition:opacity .45s ease}
.cp__lens [data-part]{transition:opacity .35s ease}
.cp__lens [data-part].is-dim{opacity:.26}
.cp__lens .ha__sec [data-part]{cursor:pointer}
.cp__lenscap{fill:#DCE7EC;font:600 5.2px var(--sans,Inter,sans-serif);letter-spacing:.06em;text-transform:uppercase}
.cp__lensline{pointer-events:none}
#body{cursor:grab;touch-action:none}
#body.is-dragging{cursor:grabbing}
.cp-labels{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible}
.cp-lab__lead{fill:none;stroke:#E8EEF1;stroke-width:1;stroke-linejoin:round}
.cp-lab__halo{fill:none;stroke:#0B161D;stroke-opacity:.55;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.cp-lab__dot{fill:#fff;stroke:#0B161D;stroke-width:1}
.cp-lab__pill{fill:#0D1A22;fill-opacity:.9;stroke:#E8EEF1;stroke-opacity:.35;stroke-width:1}
.cp-lab__txt{fill:#F1F5F7;font-family:var(--sans,Inter,sans-serif);font-weight:500;letter-spacing:.01em}
.cp-lab.is-beyond .cp-lab__txt{fill:#C9D6DE;font-style:italic}
.cp-lab.is-beyond .cp-lab__pill{stroke-dasharray:3 2}
/* the names can be pressed: each flies to its own part */
.cp-lab__pill,.cp-lab__txt{pointer-events:auto;cursor:pointer}
.cp-lab:hover .cp-lab__pill{fill:#1C3A48;stroke-opacity:.85}
.cp-lab:hover .cp-lab__lead{stroke:#FFFFFF}
/* a name outside the station's light stays, quieter, while there is room for it */
.cp-lab.is-dim{opacity:.5}

/* the plate's tools: whole body, zoom, the names */
.tool-zoom{display:inline-flex;gap:0}
.tool--z{min-width:34px;justify-content:center;font-size:16px;line-height:1;padding-left:0;padding-right:0}
.tool-zoom .tool--z:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.tool-zoom .tool--z:last-child{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}
.tool--t[aria-pressed="true"]{background:rgba(232,238,241,.16);border-color:rgba(232,238,241,.7);color:#fff}
.tool--t:disabled{opacity:.45;cursor:default}
.platecol__tools{flex-wrap:wrap;row-gap:6px}
@media (max-width:1000px){ .platecol__hint{display:none} .tool--t{font-size:11px} }
@media (prefers-reduced-motion:reduce){ .cp__veil,.cp__tubes,.cp__f,.cp__lens,.cp__lens [data-part]{transition:none} }

/* standing in the plate's column (CircLearn.stage; Daniel, 26 Sep: "any animations move them to the left and
   then the text and the buttons on the right"): the drawing fills the column, as tall as it can be without
   losing its shape, and the words of each step stay in the list on the right */
.sim > .cy__pack,.sim > .mx__pack{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.sim > .cy__pack .cy__fig,.sim > .mx__pack .mx__fig{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;margin:0}
.sim > .cy__pack .cy__svg,.sim > .mx__pack .mx__svg{flex:0 1 auto;min-height:0;width:100%;height:auto;max-height:100%}
.sim > .cy__pack .sp__now,.sim > .mx__pack .sp__now{display:none!important}
.cy.cy--staged .cy__wrap,.mx.mx--staged .mx__wrap{grid-template-columns:minmax(0,1fr)}

/* A station's Practise tab, on its second go or once something is answered: which go it is, how
   the first go went, and Practise again (js/app.js paintGoLine). */
.goline{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--card-2);border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:9px 14px;margin:0 0 12px;font-size:14.5px;color:var(--ink)}
.goline span:empty{display:none}
.goline .btn{margin-left:auto}
.goline--bare{background:none;border:0;padding:0}