/* ============================================================
   inheritance.css — what is this lab's own: the header in the Life on Earth shelf's green, the left column that each
   station fills with its own picture, the cards that open one at a time, and the drawings, animations and crosses of
   Topic 17. Every colour is a token, defined in the bright AND the dark version (memory bright-and-dark-versions). The
   frame's rules are the Immunity Lab's (4 Nov 2026), itself the Cells Lab's; this lab's own come after them.

   The two colours of a chromosome pair: one chromosome of each pair came from the mother, one from the father. They are
   drawn in two colours, --mum and --dad, and every drawing that uses them carries the key "from the mother / from the
   father". Neither is the green, orange or rose of the words, nor the blue and violet of the picture's parts.
   ============================================================ */
:root{
  --accent:#14572B; --accent-2:#1D7A3D; --accent-tint:#E3F1E7;
  /* the inks of the Learn tab (js/terms.js): the T17 summary's own colours */
  --k-struct:#1B7A43; --k-proc:#B5530F; --k-subst:#B4285F;
  --on-photo-veil:rgba(14,20,27,.40);
  /* the parts of a station (a block of What you need to know, and its button on the picture): blue and violet */
  --pt1-ink:#1E5BB8; --pt1-tint:#EAF1FC; --pt1-edge:#B9D0F2; --pt2-ink:#7438B0; --pt2-tint:#F4EDFB; --pt2-edge:#D8C4F0;
  --pt3-ink:#475569; --pt3-tint:#EEF2F6; --pt3-edge:#C8D2DD;
  /* the drawings: a chromosome from the mother and one from the father; the nucleus and the cell; a gene's band */
  --mum:#C2410C; --mum-2:#FDBA8C; --dad:#0E7490; --dad-2:#9EDBEA; --gene:#FACC15; --gene-ink:#3F2E00;
  --cell-fill:#F7F3EA; --cell-edge:#8A7F6A; --nuc-fill:#EFE7FA; --nuc-edge:#7C6A9E; --cyto:#F7F3EA;
  --dna-a:#2F6DB5; --dna-b:#C8322F; --rib:#6B4F2A; --mrna:#B4285F; --aa1:#1E5BB8; --aa2:#B5530F; --aa3:#15803D; --aa4:#7438B0;
  --shade:#3B4652; --g-ok:#13856C; --g-no:#B03A2E; --mito:#D9E7C3; --mito-edge:#5B7A2E;
  /* "From a cell to a gene": a new strand of DNA, the proteins DNA is wound round (histones) */
  --dna-new:#7C3AED; --histone:#E9A8C0; --histone-edge:#A64D72; --histone-2:#F6CFDC;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --accent:#7FD99A; --accent-2:#5CC47D; --accent-tint:#14301D;
  --k-struct:#6EDB9A; --k-proc:#F5A35C; --k-subst:#F48FB4;
  --pt1-ink:#8DB9FF; --pt1-tint:#14233A; --pt1-edge:#2C4C7A; --pt2-ink:#CFA9F7; --pt2-tint:#231A36; --pt2-edge:#4C3672;
  --pt3-ink:#B6C2D0; --pt3-tint:#1B232D; --pt3-edge:#3A4655;
  --mum:#FB923C; --mum-2:#7C2D12; --dad:#38BDF8; --dad-2:#0C4A6E; --gene:#FDE047; --gene-ink:#3F2E00;
  --cell-fill:#2A2620; --cell-edge:#A89C84; --nuc-fill:#2A2338; --nuc-edge:#A994CF; --cyto:#2A2620;
  --dna-a:#6FA8EC; --dna-b:#F06A5E; --rib:#D6B98A; --mrna:#F48FB4; --aa1:#8DB9FF; --aa2:#F5A35C; --aa3:#6EDB9A; --aa4:#CFA9F7;
  --shade:#C8D1DA; --g-ok:#5EE0B0; --g-no:#F28B7E; --mito:#33402A; --mito-edge:#A9C77A;
  --dna-new:#C4B5FD; --histone:#8E4A66; --histone-edge:#E7A3BE; --histone-2:#A85F7E;
}
}
:root[data-theme="dark"]{
  --accent:#7FD99A; --accent-2:#5CC47D; --accent-tint:#14301D;
  --k-struct:#6EDB9A; --k-proc:#F5A35C; --k-subst:#F48FB4;
  --pt1-ink:#8DB9FF; --pt1-tint:#14233A; --pt1-edge:#2C4C7A; --pt2-ink:#CFA9F7; --pt2-tint:#231A36; --pt2-edge:#4C3672;
  --pt3-ink:#B6C2D0; --pt3-tint:#1B232D; --pt3-edge:#3A4655;
  --mum:#FB923C; --mum-2:#7C2D12; --dad:#38BDF8; --dad-2:#0C4A6E; --gene:#FDE047; --gene-ink:#3F2E00;
  --cell-fill:#2A2620; --cell-edge:#A89C84; --nuc-fill:#2A2338; --nuc-edge:#A994CF; --cyto:#2A2620;
  --dna-a:#6FA8EC; --dna-b:#F06A5E; --rib:#D6B98A; --mrna:#F48FB4; --aa1:#8DB9FF; --aa2:#F5A35C; --aa3:#6EDB9A; --aa4:#CFA9F7;
  --shade:#C8D1DA; --g-ok:#5EE0B0; --g-no:#F28B7E; --mito:#33402A; --mito-edge:#A9C77A;
  --dna-new:#C4B5FD; --histone:#8E4A66; --histone-edge:#E7A3BE; --histone-2:#A85F7E;
}
/* ---------- the header: the shelf's own colours, never the other labs' green ---------- */
.hdr{background:var(--hdr-bg);color:var(--hdr-ink);border-bottom:1px solid var(--hdr-line);box-shadow:none}
.hdr__title{font-weight:700;letter-spacing:-.01em}
/* his name is never cut (memory header-footer-credit): the topic line gives way first */
.hdr__title,.hdr__by{flex:none}
.hdr__mark{flex:none}
@media (max-width:1500px){ .hdr__sub{display:none} }
@media (max-width:1300px) and (min-width:1001px){ .stat--stations{display:none} }
.hdr__sub{color:var(--hdr-soft);opacity:1;font-size:12.5px;min-width:0;flex:0 1 auto}
.hdr__by{color:var(--hdr-soft);opacity:1}
.hdr__by:hover,.hdr__by:focus-visible{color:var(--hdr-ink)}
.badge{background:var(--hdr-veil);border:1px solid var(--hdr-line);color:var(--hdr-ink);cursor:pointer}
.stat{background:var(--hdr-veil);border:1px solid var(--hdr-line);color:var(--hdr-ink)}
.stat--go:hover,.stat--go:focus-visible{background:var(--accent-tint)}
.ring .bg{stroke:var(--hdr-line)}
.ring .fg{stroke:var(--accent-2)}
.hbtn{background:var(--hdr-veil);border:1px solid var(--hdr-line);color:var(--hdr-ink);text-decoration:none}
.hbtn:hover{background:var(--accent-tint)}
.hbtn--save.is-ok{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-2)}
.hbtn--save.is-ok:hover{background:var(--accent-tint)}
.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:var(--bad-tint)}
.hbtn--save.is-off{background:transparent;color:var(--hdr-ink);border-style:dashed}
/* the way back (14 Oct 2026, Daniel: pupils missed it): a solid pill in the lab's green, first in the header; the header's own white (dark at night) as its words */
.hbtn--back{background:var(--accent);border-color:var(--accent);color:var(--hdr-bg);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.hbtn--back:hover,.hbtn--back:focus-visible{background:var(--accent-2);border-color:var(--accent-2);color:var(--hdr-bg)}
#btnTheme{white-space:nowrap}

/* the station's heading: a chromosome in the accent */
.st-head__ic{background:var(--accent-tint);border:1px solid var(--edge);color:var(--accent)}
.st-head__ic .ic-cell{stroke:var(--accent)}
.st-head__ic .ic-nuc{stroke:var(--k-subst)}
.st-title{color:var(--ink);font-weight:700;letter-spacing:-.015em}

/* ---------- the left column: each station's own picture ---------- */
.platecol{position:relative;min-height:0;overflow:hidden;display:flex;flex-direction:column;
  background:var(--col-bg);color:var(--col-ink);border-right:1px solid var(--col-line)}
.platecol__tools{position:relative;z-index:6;display:flex;align-items:center;gap:10px;padding:8px 12px;min-height:0}
.platecol__tools:empty{display:none}
.tool{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--col-ink);cursor:pointer;
  border:1px solid var(--col-line);border-radius:var(--r-pill);padding:6px 12px;background:var(--col-card)}
.tool:hover{border-color:var(--accent)}
.tool[hidden]{display:none}
.tool--sim{margin-right:auto}
.viewhost{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.viewhost[hidden]{display:none}
.view{flex:1;min-height:0;display:flex;flex-direction:column}
.view[hidden]{display:none}
.said{position:relative;z-index:4;margin:0;padding:8px 16px 12px;text-align:center;border-top:1px solid var(--col-line);background:var(--col-bg)}
.said:empty{display:none}
.said__name{display:block;font-size:14px;font-weight:600;color:var(--col-ink)}
.said__credit{display:block;font-size:11.5px;color:var(--col-soft);margin-top:2px}
/* a picture of several photographs: its credits folded under it (Daniel, 4 Nov 2026), open upwards into the picture's space */
.said__fold{margin-top:3px;font-size:12.5px;color:var(--col-soft)}
.said__fold summary{display:inline-flex;align-items:center;gap:5px;cursor:pointer;padding:2px 8px;border-radius:6px;list-style:none}
.said__fold summary::-webkit-details-marker{display:none}
.said__fold summary::before{content:'\25B8';font-size:11px}
.said__fold[open] summary::before{content:'\25BE'}
.said__fold summary:hover{color:var(--col-ink)}
.said__fold summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.said__list{margin:4px auto 0;padding:0;list-style:none;text-align:left;display:inline-block;max-width:100%;line-height:1.45}
.said__list b{color:var(--col-ink);font-weight:600}
.sim{flex:1;min-height:0;overflow:auto;padding:12px 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}
.platecol.is-sim .said{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(--accent)}
.stg__title[hidden]{display:none}

/* a button that belongs to a picture */
.vbtn{font:inherit;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1.5px solid var(--accent);border-radius:var(--r-pill);background:var(--col-card);color:var(--accent);padding:7px 16px}
.vbtn:hover{background:var(--accent-tint)}
.vbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* labels on a picture: the line ends ON the part, no dot (Daniel, 4 Oct 2026) */
.lb__dot{display:none}
/* label lines one steady width on screen, however far a picture is scaled to fit (8 Oct 2026) */
svg .lb__lead,svg .lb__halo{vector-effect:non-scaling-stroke}
/* the pale band under a label line stops where the line stops: with a round end it covered a ribosome or a
   mitochondrion the line touched (18 Oct 2026) */
.lb__halo{stroke:var(--col-bg);stroke-linecap:butt}
.lb__lead{stroke:var(--col-ink)}
.lb__txt{fill:var(--col-ink);stroke:var(--col-bg)}
/* a word whose key-word card is at the bottom of this station: the faint rule of a definition and a small arrow down,
   for "down to its card here" (25 Oct 2026) */
.t.is-kw,.tc.is-kw{cursor:pointer;border-bottom:1px dotted var(--c49);padding-bottom:1px}
.t.is-kw::after,.tc.is-kw::after{content:"↓";font-size:.72em;vertical-align:.2em;margin-left:1px;opacity:.75}
.t.is-kw:hover,.tc.is-kw:hover{background:var(--c41);border-radius:3px}
.t.is-kw:focus-visible,.tc.is-kw:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* a name that opens its card (views/figure.js gives it role="button"); any other name is only a name: no hand, no colour */
.lb[role="button"]{cursor:pointer}
.lb__lead,.lb__halo{pointer-events:none}
.lb:focus-visible{outline:none}
.lb[role="button"]:focus-visible .lb__txt,.lb[role="button"]:hover .lb__txt{fill:var(--accent)}
.lb.is-lit .lb__txt{fill:var(--accent);font-weight:700}
.lb.is-lit .lb__lead{stroke:var(--accent);stroke-width:2.6}
.lb.is-dim{opacity:.45}

/* a picture's own buttons, in a bar above it */
.vbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;padding:0 6px 6px}

/* ---------- a sentence as a card: the heading always shows, the words open one card at a time ---------- */
.exam-list > li.xcard{padding:0;margin:0 0 8px}
.exam-list > li.xcard::before{display:none}
.xcard__h{width:100%;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  font:inherit;font-size:15.5px;font-weight:600;color:var(--ink);background:var(--card-2);
  border:1px solid var(--edge);border-radius:var(--r);padding:10px 14px}
.xcard__h:hover{border-color:var(--accent)}
.xcard__h:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.xcard__t{flex:1;min-width:0}
.xcard__a{width:9px;height:9px;border-right:2px solid var(--grey);border-bottom:2px solid var(--grey);transform:rotate(45deg);transition:transform .2s;flex:none;margin-top:-4px}
.xcard.is-open .xcard__h{border-color:var(--accent);background:var(--accent-tint);border-bottom-left-radius:0;border-bottom-right-radius:0}
.xcard.is-open .xcard__a{transform:rotate(225deg);margin-top:4px}
.xcard__b{border:1px solid var(--accent);border-top:0;border-radius:0 0 var(--r) var(--r);padding:12px 14px;background:var(--card)}
.xcard__b[hidden]{display:none}
/* a film (a step animation) in a card of its own, drawn as a dark "screen", like a video player, so a pupil sees at once
   that it opens an animation (Daniel, 8 Nov 2026: "a different kind of tab that has a different background"; then: not
   purple, "because purple is the color that you use for IB extensions … not any other color used for color coding, but
   still easy to see"). --anim: ink in a bright page, near white in a dark one; it is also the player's Play button, step
   bar and current step, so nothing in an animation is purple. The widget's own title is the card's heading. */
:root{--anim:#1B2430;--anim-ink:#FFFFFF;--anim-soft:#C9D2DC}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--anim:#E6EBF1;--anim-ink:#121820;--anim-soft:#3B4756}}
:root[data-theme="dark"]{--anim:#E6EBF1;--anim-ink:#121820;--anim-soft:#3B4756}
.xcard--film .xcard__h{background:var(--anim);border-color:var(--anim);color:var(--anim-ink)}
.xcard--film .xcard__h:hover{filter:brightness(1.12)}
.xcard--film.is-open .xcard__h{background:var(--anim);color:var(--anim-ink)}
.xcard--film .xcard__h:focus-visible{outline-color:var(--anim)}
.xcard--film .xcard__a{border-color:var(--anim-ink)}
.xcard--film .xcard__b{border-color:var(--anim)}
.xcard__play{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--anim-ink);color:var(--anim);font-size:11px;padding-left:2px}
.xcard__kind{display:block;font-size:12.5px;font-weight:600;color:var(--anim-soft);margin-top:1px}
.xcard--film .xcard__b > .widget > .widget__h,.xcard--film .xcard__b > .widget > .widget__ask,
.xcard--film .lvw__bar + .widget > .widget__h,.xcard--film .lvw__bar + .widget > .widget__ask{display:none}
.exam-part[class*="exam-part--"] .xcard--film .xcard__h,.exam-part[class*="exam-part--"] .xcard--film .xcard__h:hover,.exam-part[class*="exam-part--"] .xcard--film.is-open .xcard__h{background:var(--anim);border-color:var(--anim);color:var(--anim-ink)}
.exam-part[class*="exam-part--"] .xcard--film .xcard__b{border-color:var(--anim)}
/* the player in the animation colour: Play, the step bar, the step on screen and its words' panel */
.sp__bar{--sp:var(--anim)}
.sp__play{color:var(--anim-ink)}
.sp__step.is-on .sp__stepb{border-color:var(--anim);background:color-mix(in srgb,var(--anim) 7%,var(--card))}
.sp__step.is-on .sp__num{background:var(--anim);color:var(--anim-ink)}
.sp__now.sp__now--panel{border-left-color:var(--anim)}
@keyframes sp-next{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--anim) 45%,transparent)}100%{box-shadow:0 0 0 11px transparent}}
/* a widget, photo or table inside a card sits inside it: the list's bullet margin (-26px in app.css) does not apply here */
.exam-list li.xcard .widget,.exam-list li.xcard .media,.exam-list li.xcard .photo,.exam-list li.xcard .ctable{margin-left:0;margin-right:0;max-width:100%}
/* a closed tooltip takes no room: laid out while hidden, it made the panel scroll sideways when its word sat near the
   right edge (8 Oct 2026); it shows on hover, on focus and when pressed, as before */
/* a grid question's row names wrap, so the table fits a narrow panel without scrolling inside the question */
.gridq tbody th{white-space:normal;min-width:6.5em}
/* a picture in a pop-up never takes more than a third of the screen's height, so its words stay beside the word pressed */
.peek img{max-height:34vh;object-fit:contain}
/* "Going further": a long reference wraps inside its card instead of running past it */
.later__ref{max-width:100%;white-space:normal}
/* the picture's fold button: the page's own sans and sentence case, a comfortable tap */
.fold{font-family:var(--font);font-size:12.5px;letter-spacing:0;text-transform:none;min-height:32px}
/* a question's picture: every ring has a larger invisible tap area, and on a drawing the ring does not hide its part */
.hs__pt::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.hs__stage--fig .hs__pt{background:transparent}
/* the keyword cards' prompt reads at full strength */
.kw__ask{color:var(--col-soft);font-style:normal}
/* the station row fades at its ends on a narrow screen, so a cut-off name reads as "more this way" */
@media (max-width:1000px){ .rail__track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)} }
/* a phone: the header is the name above ONE row of buttons (short labels), and the picture's own buttons are easy to tap */
@media (max-width:540px){
  .hdr__stats{flex-wrap:wrap;gap:5px}   /* one row as a rule; a long warning ("Sign in again" and Google's button) takes a second row rather than pushing buttons off the screen */
  .hdr__stats .hbtn{padding:5px 8px;font-size:12px;min-height:32px}
  .hdr__stats .hbtn__short{font-size:14px}
  #btnHelp{width:32px;height:32px}
  .stat{padding:3px 8px 3px 4px}
  .cellv__mode,.gal__mode,.dfv__tab,.twn__mode{min-height:34px}
  .vbar{gap:6px}
}
/* a question on a cell drawing: the drawing at a readable size, centred, its stage as wide as the drawing */
.hs__stage--fig{max-width:min(100%,400px);margin-left:auto;margin-right:auto;background:var(--col-card)}
.hs__stage--fig svg{background:transparent}
.tip::after,.tip::before{display:none}
.tip:hover::after,.tip:hover::before,.tip:focus-visible::after,.tip:focus-visible::before,.tip.is-open::after,.tip.is-open::before{display:block}
@media (prefers-reduced-motion: reduce){ .xcard__a{transition:none} }


/* the inks of this lab (js/terms.js) */
.t--struct{color:var(--k-struct)} .t--proc{color:var(--k-proc)} .t--subst{color:var(--k-subst)}
.chip--struct{background:var(--k-struct);color:var(--on-ink)} .chip--proc{background:var(--k-proc);color:var(--on-ink)}
.chip--subst{background:var(--k-subst);color:var(--on-ink)}

/* ---------- phone and upright tablet: the picture as a strip above the notes ---------- */
@media (max-width:1000px) and (min-height:561px){
  /* pinned above the notes (the Cells Lab's rule, 8 Oct 2026), so the picture stays beside the words about it */
  .platecol{position:sticky;top:0;z-index:4;height:min(42vh,380px);box-shadow:0 2px 10px var(--c176)}
  .platecol.is-folded{height:auto}
  .platecol.is-folded .viewhost,.platecol.is-folded .said{display:none}
  /* the town, the defences and the photographs are working pictures: they scroll with the page at full width */
  .platecol[data-kind="town"],.platecol[data-kind="defences"],.platecol[data-kind="gallery"]{position:relative;height:auto;box-shadow:none}
  .platecol[data-kind="gallery"] .gal{overflow:visible}
  .platecol[data-kind="town"] .twn__svg,.platecol[data-kind="defences"] .dfv__svg{height:auto}
  /* this lab's drawings are tall (a nucleus above a chromosome above its DNA; four gametes; a family tree): pinned as a
     strip they were drawn about 180 px high, their names too small. They scroll with the page instead, as the
     Immunity Lab's town does, at a height that gives each name its full size */
  .platecol[data-kind="figure"],.platecol[data-kind="pedigree"]{position:relative;height:auto;box-shadow:none}
  .platecol[data-kind="figure"] .cellv__stage{flex:none;height:min(118vw,520px)}
}

/* "Check yourself": a yellow highlighter under red-brown words, the same in both versions (a highlighter does not
   change in the dark); the box keeps the theme's own ground */
:root{ --gold-ink:#8A2A1E; --gold-mark:#FFE36B; }
.golden__h,.exam-alert__h{color:var(--gold-ink);background:linear-gradient(180deg,transparent 14%,var(--gold-mark) 14%,var(--gold-mark) 92%,transparent 92%)}
.golden p + p{margin-top:8px}

/* ---------- the shared look of a picture's own controls ---------- */
.cellv__mode{font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;
  border:1.5px solid var(--col-line);background:var(--col-card);color:var(--col-ink)}
.cellv__mode[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint);color:var(--accent)}
.cellv__mode:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vbtn[disabled]{opacity:.45;cursor:default}

/* ---------- stations 5–7: one cell, several ways of seeing it ---------- */
.cellv{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 8px 8px}
.cellv__stage{flex:1;min-height:0;display:flex}
.cellv__svg{flex:1;min-height:0;width:100%;height:100%;display:block}
.cellv__veil{fill:var(--on-photo-veil);opacity:0;transition:opacity .3s ease;pointer-events:none}
.cellv__veil.is-on{opacity:1}
.cellv__note{margin:6px 8px 0;font-size:13.5px;font-weight:600;color:var(--amber);text-align:center}
.cellv__note[hidden]{display:none}

/* "Put in order": the step numbers are neutral until the answer is checked (they were the red of a wrong answer) */
.oitem__n{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.order.is-ok .oitem__n{background:var(--accent-2);color:var(--c3);border-color:transparent}
.order.is-no .oitem__n{background:var(--red);color:var(--c3);border-color:transparent}
.oitem__grip{color:var(--grey)}
/* every instruction under a question in one style (the match-up's was an amber callout) */
.act p.hinttext{display:block;background:none;border:0;border-radius:0;padding:0;margin:2px 0 8px;font-size:12.5px;color:var(--grey)}
/* a gap inside a sentence is as tall as a line of text, so the sentence still reads as one */
.cloze{line-height:2.05}
.cloze .gap{line-height:1.3}
/* four groups to sort into: two by two, never three and one */
.bins:has(> .bin:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* one ring for every picture, photograph or drawing: white with a dark edge inside and out, so it reads on any ground */
.hs__pt:not([aria-pressed="true"]),.hs__stage svg ~ .hs__pt:not([aria-pressed="true"]){border:2px solid rgba(255,255,255,.95);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 1.5px rgba(10,20,28,.78),inset 0 0 0 1px rgba(10,20,28,.5)}
.hs__pt:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.35)}
/* no word left alone on the last line of a paragraph */
p,li,dd,figcaption{text-wrap:pretty}
/* a cell picture's numbered pins and their key (when words in the margins would squeeze the picture) */
.lb__pin{fill:var(--col-card);stroke:var(--col-ink);stroke-width:1.3px;vector-effect:non-scaling-stroke}
.lb__pinn{fill:var(--col-ink);font-family:var(--font);font-weight:700}
.lb.is-lit .lb__pin{fill:var(--accent);stroke:var(--accent)}
.lb.is-lit .lb__pinn{fill:var(--on-ink)}
.lb:hover .lb__pin,.lb:focus-visible .lb__pin{stroke:var(--accent)}
.lb--key .lb__txt{stroke:none}

/* a link out of the lab reads as a button, not as one more badge beside it */
.later__out{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.later__out:hover{background:var(--accent-tint);filter:none}
/* a tall photograph in a question is capped in height, so the question, the picture and "Check answer" fit on one
   screen; the stage shrinks to the picture, so every ring stays on its part */
.hs__stage:has(> img){width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.hs__stage > img{width:auto;max-width:100%;max-height:min(520px,62vh)}
/* a heading over a picture (two photographs side by side) */
.cellv__head{fill:var(--col-ink);font-family:var(--font);font-weight:700;paint-order:stroke;stroke:var(--col-bg);stroke-width:3px;stroke-linejoin:round}


/* ---------- this lab's pictures ---------- */
.vbar{align-items:center}
.gal__mode,.dfv__tab,.twn__mode{font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;
  border:1.5px solid var(--col-line);background:var(--col-card);color:var(--col-ink)}
.gal__mode[aria-pressed="true"],.dfv__tab[aria-pressed="true"],.twn__mode[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint);color:var(--accent)}
.gal__mode:focus-visible,.dfv__tab:focus-visible,.twn__mode:focus-visible,.gal__tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* a station's parts: each block of What you need to know and its button on the picture share one colour, a swatch before
   both names (Daniel, 4 Nov 2026: "easy to link it … different in color"); the photographs of that part light in it too */
.cellv__mode--1,.gal__mode--1,.gal__tile--1,.exam-part--1{--pt-ink:var(--pt1-ink);--pt-tint:var(--pt1-tint);--pt-edge:var(--pt1-edge)}
.cellv__mode--2,.gal__mode--2,.gal__tile--2,.exam-part--2{--pt-ink:var(--pt2-ink);--pt-tint:var(--pt2-tint);--pt-edge:var(--pt2-edge)}
.cellv__mode--3,.gal__mode--3,.gal__tile--3,.exam-part--3{--pt-ink:var(--pt3-ink);--pt-tint:var(--pt3-tint);--pt-edge:var(--pt3-edge)}
.gal__mode[class*="gal__mode--"],.cellv__mode[class*="cellv__mode--"]{display:inline-flex;align-items:center;gap:7px}
.gal__mode[class*="gal__mode--"]::before,.cellv__mode[class*="cellv__mode--"]::before,.exam-part[class*="exam-part--"] .exam-part__h::before{content:'';flex:none;width:11px;height:11px;border-radius:3px;background:var(--pt-ink)}
.gal__mode[class*="gal__mode--"][aria-pressed="true"],.cellv__mode[class*="cellv__mode--"][aria-pressed="true"]{border-color:var(--pt-ink);background:var(--pt-tint);color:var(--pt-ink)}
.gal__mode[class*="gal__mode--"]:focus-visible{outline-color:var(--pt-ink)}
.gal__tile[class*="gal__tile--"]:hover,.gal__tile[class*="gal__tile--"].is-lit{border-color:var(--pt-ink)}
.gal__tile[class*="gal__tile--"].is-lit{box-shadow:0 0 0 3px var(--pt-edge)}
.exam-part[class*="exam-part--"]{background:var(--pt-tint);border-top:1px solid var(--pt-edge);border-bottom:1px solid var(--pt-edge);box-shadow:inset 5px 0 0 var(--pt-ink)}
.exam-part[class*="exam-part--"] .exam-part__h{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--pt-ink);margin-bottom:10px}
.exam-part[class*="exam-part--"] .xcard__h:hover,.exam-part[class*="exam-part--"] .xcard.is-open .xcard__h{border-color:var(--pt-ink)}
.exam-part[class*="exam-part--"] .xcard.is-open .xcard__h{background:var(--pt-tint);color:var(--pt-ink)}
.exam-part[class*="exam-part--"] .xcard__b{border-color:var(--pt-ink)}
.exam-part[class*="exam-part--"] .xcard__h:focus-visible{outline-color:var(--pt-ink)}

/* the photographs (stations 1 and 3): each one names itself; their credits are folded under the picture (.said__fold) */
.gal{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 10px 8px;overflow:auto}
.gal__grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:10px;align-content:start}
.gal__grid[hidden]{display:none}
/* on a phone, two photographs a row: at three, a tile's name and its line ran out of the top of the tile (4 Nov 2026) */
@media (max-width:440px){ .gal__grid{grid-template-columns:repeat(min(var(--cols,2),2),minmax(0,1fr))} }
.gal__band{grid-column:1/-1;margin:4px 2px -2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--col-soft)}
.gal__tile{position:relative;display:block;padding:0;margin:0;border:2px solid var(--col-line);border-radius:12px;overflow:hidden;cursor:pointer;
  background:var(--col-card);aspect-ratio:4/3;text-align:left;transition:opacity .2s,border-color .2s}
.gal__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal__name{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 7px;color:#fff;font-size:14px;line-height:1.25;
  background:linear-gradient(180deg,rgba(8,14,20,0),rgba(8,14,20,.78) 45%)}
.gal__name b{display:block;font-size:15px}
.gal__name span{display:block;font-size:12.5px;opacity:.92}
.gal__sup{position:absolute;right:8px;bottom:8px;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:var(--accent);border-radius:5px;padding:1px 6px}
.gal__tile:hover{border-color:var(--accent)}
.gal__tile.is-lit{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.gal__tile.is-dim{opacity:.55}


/* a phone: the numbered names of an animation, under the drawing */
.pinkey{list-style:none;margin:6px 4px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 12px;font-size:13.5px}
.pinkey[hidden]{display:none}
.pinkey b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink);font-size:11.5px;margin-right:4px}

/* ============================================================ this lab's drawings ============================================================ */
/* chromosomes: the colour of the parent each came from (keyed under every drawing that uses them), a gene's band */
.ch--mum{fill:var(--mum)} .ch--dad{fill:var(--dad)}
.ch{stroke:rgba(0,0,0,.28);stroke-width:.8}
.ch__band{fill:var(--gene);stroke:var(--gene-ink);stroke-width:.6}
.ch__cen{stroke:rgba(0,0,0,.28);stroke-width:.8}
.chr--other .ch,.chr--other .ch__cen{fill:var(--shade);opacity:.75}
.thr{fill:none;stroke-linecap:round}
.thr--mum{stroke:var(--mum)} .thr--dad{stroke:var(--dad)}
.cellb{fill:var(--cell-fill);stroke:var(--cell-edge);stroke-width:2}
.cellb--stem{fill:var(--cell-fill)} .cellb--spec{fill:var(--accent-tint);stroke:var(--accent)}
.cellb--zyg{fill:var(--cell-fill)} .cellb--other{fill:none;stroke:var(--shade);stroke-dasharray:5 4}
.nucb{fill:var(--nuc-fill);stroke:var(--nuc-edge);stroke-width:1.8}
.pore{fill:var(--cell-fill);stroke:none}
.zm__bg{fill:var(--col-card)}
.zm__box{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:4 3}
.zm__line{fill:none;stroke:var(--grey);stroke-width:1.2;stroke-dasharray:3 4}
.zm__pane{fill:var(--card-2);stroke:var(--edge);stroke-width:1.2}
/* "From a cell to a gene" (js/w-zoom.js, 4 Nov 2026): the nucleus's inner membrane, ribosomes, a mitochondrion's folds;
   the copies coiling into a cross; the new strands of DNA, the enzymes that copy it, the proteins it is wound round.
   Fades use the opacity attribute, so these rules dim with stroke- and fill-opacity only */
.zm__env{fill:none;stroke:var(--nuc-edge);stroke-width:1;stroke-opacity:.6}
.zm__rib{fill:var(--rib)}
.zm__cr{fill:none;stroke:var(--mito-edge);stroke-width:1;stroke-linecap:round}
.zm__arm{fill:none;stroke-linecap:round}
.zm__arm--mum{stroke:var(--mum)} .zm__arm--dad{stroke:var(--dad)} .zm__arm--faint{stroke:var(--shade);stroke-opacity:.22}
.ch__cen.zm__cen--faint{fill:var(--shade);fill-opacity:.3;stroke:none}
.dna__b.zm__b{stroke-width:3.4} .dna__b.zm__b7{stroke-width:5.6}
.dna__s.zm__old{stroke-width:5} .dna__s.zm__new{stroke:var(--dna-new);stroke-width:5}
.dna__s.zm__s7{stroke-width:9} .dna__s.zm__back{stroke-opacity:.5}
.zm__enz{fill:var(--accent-tint);fill-opacity:.9;stroke:var(--accent);stroke-width:1.4}
.zm__loop{fill:var(--mum-2);fill-opacity:.35;stroke:var(--mum);stroke-width:2.2;stroke-linejoin:round}
.zm__loop--b{fill:none;stroke:var(--mum-2);stroke-width:2}
.zm__axis{stroke:var(--mum);stroke-width:7;stroke-linecap:round;stroke-opacity:.5}
.zm__dna{fill:none;stroke:var(--shade);stroke-linecap:round}
.zm__dna--back{stroke-opacity:.55}
.zm__tick{stroke:var(--card-2);stroke-width:1.6;stroke-linecap:round}
.zm__hist{fill:var(--histone);stroke:var(--histone-edge);stroke-width:1.2}
.zm__histl{fill:var(--histone-2);fill-opacity:.85}
.zm__bead{fill:var(--histone);stroke:var(--histone-edge);stroke-width:.6}
.zm__far{fill:var(--card-2)} .zm__cyto{fill:var(--cell-fill)} .zm__nucl{fill:var(--nuc-fill)}
/* an allele printed on a gene's band: all of it on the yellow, the raised letter lifted less than a superscript, a thin
   yellow edge so it reads where the band is small (Daniel, 6 Nov 2026: "make sure that these letters are nicely visible") */
.al.al--band{fill:var(--gene-ink);font-size:14px;paint-order:stroke;stroke:var(--gene);stroke-width:3px;stroke-linejoin:round}
.al.al--band .al__up{baseline-shift:42%;font-size:66%}
.dna__b.zm__tk{stroke-width:2.2;stroke-linecap:butt}
.zm__gene10{fill:none;stroke:var(--gene);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
/* step 12: the groups of three under the bases (red where Iᵒ is read differently), the gap of the missing base; step 13's
   two lines in the picture: genotype and phenotype */
.zm__cod{fill:none;stroke:var(--grey);stroke-width:1.8;stroke-linejoin:round} .zm__cod.zm__cod--x{stroke:var(--g-no);stroke-width:2.4}
.zm__gap{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:2.5 2}
.zm__row{opacity:.45}
.zm__cap{fill:var(--card);stroke:var(--edge);stroke-width:1}
.zm__captxt{font-family:var(--font);font-size:15px;fill:var(--ink);text-anchor:middle;dominant-baseline:central} .zm__capb{font-weight:700}
.dna__s{fill:none;stroke:var(--shade);stroke-width:3;stroke-linecap:round}
.dna__b{stroke-width:3.2;stroke-linecap:round}
.dna__b--A,.dna__fill--A{stroke:var(--dna-a);fill:var(--dna-a)} .dna__b--T,.dna__fill--T{stroke:var(--dna-b);fill:var(--dna-b)}
.dna__b--G,.dna__fill--G{stroke:var(--aa3);fill:var(--aa3)} .dna__b--C,.dna__fill--C{stroke:var(--gene);fill:var(--gene)}
.dna__gene{fill:var(--gene);opacity:.32}
.gn__br{fill:none;stroke:var(--ink);stroke-width:1.6}
.mrna{fill:none;stroke:var(--mrna);stroke-width:4;stroke-linecap:round}
.mr__b{stroke:rgba(0,0,0,.25);stroke-width:.5}
.rib ellipse{fill:var(--rib);opacity:.85;stroke:rgba(0,0,0,.3);stroke-width:1}
.aa{stroke:rgba(0,0,0,.3);stroke-width:1}
.aa.aa1{fill:var(--aa1)} .aa.aa2{fill:var(--aa2)} .aa.aa3{fill:var(--aa3)} .aa.aa4{fill:var(--aa4)}
/* an amino acid's roundness (w-protein.js): a light spot, and a shade on the far side of the folded protein */
.aa__hi{fill:#fff;opacity:.5;pointer-events:none} .aa__dk{fill:#000;pointer-events:none}
.pchain{fill:none;stroke:var(--grey);stroke-width:2}
.exg__dna{fill:var(--card-2);stroke:var(--shade);stroke-width:1.5}
.exg__gene{fill:var(--card);stroke:var(--shade);stroke-width:1.5}
.exg__gene.is-on{fill:var(--gene);stroke:var(--gene-ink)}
.exg__out{stroke:var(--ink);stroke-width:2} .exg__prot{fill:var(--aa2);stroke:rgba(0,0,0,.3)}
.arr{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round} .arrh{fill:var(--ink)}
.use__dot{fill:var(--accent-tint);stroke:var(--accent);stroke-width:2}
.al{fill:var(--ink);font-family:var(--font);font-weight:700;font-size:16px}
.al--on{fill:var(--gene-ink);font-size:15px} .al--tag{font-size:14px}
.gd__w{fill:var(--ink);font-family:var(--font);font-size:15px} .gd__w--s{font-size:13.5px}
.gd__x{fill:var(--grey);font-family:var(--font);font-size:18px}
.gd__al{font-size:17px}
.gd__gam{fill:var(--card);stroke:var(--ink);stroke-width:1.4}
.gd__fert{fill:none;stroke:var(--grey);stroke-width:1.2}
.pd__p{fill:var(--card);stroke:var(--ink);stroke-width:2}
.pd__p.is-has{fill:var(--shade)}
.pd__l{fill:none;stroke:var(--ink);stroke-width:2}
.pd__n{fill:var(--ink);font-family:var(--font);font-weight:600}
.pd__lit{fill:var(--accent-tint);stroke:var(--accent);stroke-width:2.5}
.pd__hit{fill:transparent;cursor:pointer}
.pd__hit:focus-visible{outline:none;stroke:var(--accent);stroke-width:3}
.wr__col{fill:var(--card-2);stroke:var(--edge);stroke-width:1.2}
.pdv{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px}
.pdv__stage{width:100%}
.pdv__svg{display:block;margin:0 auto}
/* a drawing's key, in HTML under it */
.figkey{list-style:none;margin:6px 10px 2px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13.5px;color:var(--col-ink)}
.figkey[hidden]{display:none}
.figkey li{display:inline-flex;align-items:center;gap:7px}
.figkey__sw{flex:none;width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.25)}
.sw--mum{background:var(--mum)} .sw--dad{background:var(--dad)} .sw--gene{background:var(--gene)}
/* an animation's key, drawn (WKit note { key }): a sample of each part in its picture's own classes, beside its name */
.anikey{margin:8px 4px 0;font-size:13px;gap:6px 18px;align-content:flex-start}
.anikey li{gap:6px} .anikey li[hidden]{display:none}
.anikey__sw{flex:none;width:28px;height:14px;overflow:visible}
.ak__rod{fill:none;stroke-width:6;stroke-linecap:round} .ak__rod.ak__butt{stroke-linecap:butt} .ak__rod.ak__thin{stroke-width:3.4}
.ak--mum{stroke:var(--mum)} .ak--dad{stroke:var(--dad)} .ak--other{stroke:var(--other)} .ak--new{stroke:var(--dna-new)} .ak--mrna{stroke:var(--mrna)}
.ak__band{fill:none;stroke:var(--gene);stroke-width:6.6} .ak__band.ak__glow{stroke-width:9;stroke-opacity:.6}
.ak__line{fill:none;stroke-width:3;stroke-linecap:round}
.ak__dna{fill:none;stroke:var(--shade);stroke-width:1.8;stroke-linecap:round}
.ak__fib{fill:none;stroke:var(--grey);stroke-width:1.1;opacity:.75}
.ak__bases{display:inline-flex;gap:2px}
.ak__b{display:inline-block;min-width:15px;height:16px;border-radius:3px;font-style:normal;font-size:11px;font-weight:700;line-height:16px;text-align:center;color:var(--pt-lt-light)}
.ak__b--A{background:var(--dna-a)} .ak__b--T{background:var(--dna-b)} .ak__b--G{background:var(--aa3)}
.ak__b--C{background:var(--gene);color:var(--pt-lt-dark)} .ak__b--U{background:var(--pt-u);color:var(--pt-lt-dark)}
/* the colours of a fluorescence photograph (the mitosis station's real cell): the photograph's own, in both themes */
.sw--flb{background:#7DA3F2} .sw--flg{background:#46C866} .sw--flr{background:#D8342A}
.sw--bases{background:linear-gradient(90deg,var(--dna-a) 25%,var(--dna-b) 25% 50%,var(--aa3) 50% 75%,var(--gene) 75%)}
.sw--mrna{background:var(--mrna)} .sw--aa{background:linear-gradient(90deg,var(--aa1) 25%,var(--aa2) 25% 50%,var(--aa3) 50% 75%,var(--aa4) 75%);border-radius:50%}
.sw--geneoff{background:var(--card)} .sw--geneon{background:var(--gene)} .sw--prot{background:var(--aa2);border-radius:50%}
.sw--gam{background:var(--card);border:1.5px solid var(--ink);border-radius:50%}
.sw--spec{background:var(--accent-tint);border-color:var(--accent)}
.pd--m{background:var(--card);border:2px solid var(--ink);border-radius:2px}
.pd--f{background:var(--card);border:2px solid var(--ink);border-radius:50%}
.pd--has{background:var(--shade);border:2px solid var(--ink);border-radius:2px}

/* ============================================================ writing alleles (js/genes.js) ============================================================ */
/* a box of alleles: an inline block, never a flex box, which would undo the raise of a superscript */
.gt{display:inline-block;text-align:center;min-width:64px;min-height:36px;padding:3px 10px;margin:2px 3px;border:2px solid var(--edge);
  border-radius:8px;background:var(--card);font-size:20px;font-weight:700;color:var(--ink);vertical-align:middle;cursor:text;line-height:1.5;white-space:nowrap}
.gt sup{font-size:66%;font-weight:700;margin-left:1px;vertical-align:super;line-height:0;position:relative;top:-.1em}
.gt.is-active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.gt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gt.ok{border-color:var(--ok);background:var(--ok-tint)} .gt.no{border-color:var(--bad);background:var(--bad-tint)}
.gt.is-fixed{cursor:default}
.gt--given{border-color:transparent;background:transparent;min-width:0;cursor:default}
.gt__ph{font-size:13px;font-weight:500;color:var(--grey)}
.gt__caret{display:inline-block;width:2px;height:22px;background:var(--accent);margin-left:2px;vertical-align:middle;animation:gtblink 1s steps(2) infinite}
.gt__caret--up{height:13px;vertical-align:super}
@keyframes gtblink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.gt__caret{animation:none}}
.cloze--gt{line-height:2.6}
.gtwrap{overflow-x:auto;margin:6px 0}
.gtgrid{border-collapse:separate;border-spacing:6px;margin:0 auto}
.gtgrid th{font-size:14px;font-weight:600;color:var(--grey);text-align:right;padding:0 6px}
.gtgrid--punnett th{text-align:center}
.gtgrid--punnett td{background:var(--card-2);border:1.5px solid var(--edge);border-radius:8px;padding:4px;text-align:center}
.gtgrid th .gt--given{font-size:19px;color:var(--ink)}
.gtpad{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.gtpad[hidden]{display:none}
.gtpad__k{font:inherit;font-size:19px;font-weight:700;min-width:46px;min-height:44px;padding:4px 10px;border-radius:9px;border:1.5px solid var(--edge);
  background:var(--card);color:var(--ink);cursor:pointer}
.gtpad__k:hover{border-color:var(--accent)}
.gtpad__k:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gtpad__k--up,.gtpad__k--del{font-size:14px;font-weight:600}
.gtpad__k--up sup{font-size:70%}
.gtpad__k--up[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-ink)}
.gtpad.is-up .gtpad__k:not(.gtpad__k--up):not(.gtpad__k--del){font-size:14px;padding-bottom:16px}
.gtadvice{margin:10px 0 0;padding:10px 12px;border-left:4px solid var(--amber);background:var(--amber-tint);border-radius:0 8px 8px 0;color:var(--ink)}
.gtadvice p{margin:4px 0;font-size:14.5px;line-height:1.5}
.gtadvice__h{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--amber)}

/* ============================================================ crosses (js/w-cross.js) ============================================================ */
.wx__d{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--col-card);border:1px solid var(--edge);border-radius:14px}
.wx__row{display:grid;grid-template-columns:minmax(92px,30%) 1fr;align-items:center;gap:10px}
.wx__lab{font-size:13px;color:var(--grey);text-align:right;line-height:1.25}
.wx__cells{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;gap:6px;font-size:16px}
.wx__c{text-align:center} .wx__g{font-size:20px;font-weight:700}
.wx__g sup,.wx__gam sup,.wx__bg sup{font-size:68%;line-height:0}
.wx__x{color:var(--grey);font-size:20px}
.wx__gam{display:inline-grid;place-items:center;min-width:42px;height:42px;margin:0 4px;border:1.8px solid var(--ink);border-radius:50%;font-style:normal;font-weight:700;font-size:18px;background:var(--card)}
.wx__ps{display:flex;justify-content:center}
.wx__sq{border-collapse:separate;border-spacing:6px}
.wx__sq th{padding:0}
.wx__sq td{width:112px;height:72px;background:var(--card-2);border:1.5px solid var(--edge);border-radius:10px;text-align:center;vertical-align:middle}
.wx__bg{display:block;font-weight:700;font-size:20px}
.wx__bp{display:block;font-size:13px;color:var(--grey);line-height:1.2;margin-top:2px}
.wx__end{margin:0;font-size:15px;text-align:center}
/* each box's chance, and the chances of each phenotype added (w-cross.js SUM) */
.wx__pc{display:block;font-size:13px;font-weight:700;margin-top:2px}
.wx__sums{display:flex;flex-direction:column;align-items:center;gap:2px}
.wx__sum{margin:0;font-size:15px;text-align:center}
.wx [data-s]{transition:opacity .25s}
/* a line and its name lit together (w-cross.js MARK): a light behind each, its strength --wxb (0–1) from the clock */
.wx__lt{display:inline-block}
.wx__mk{position:relative;isolation:isolate}
.wx__mk::before{content:'';position:absolute;inset:-4px -8px;border-radius:9px;background:var(--accent-tint);box-shadow:0 0 0 2px var(--accent);opacity:var(--wxb,0);z-index:-1;pointer-events:none}
.wx__sq td .wx__mk::before{inset:-2px 7px}
.wx__from{padding:0 0 2px}
.wx__ft{display:inline-block;font-size:13px;font-weight:400;color:var(--grey);line-height:1.2}
.wx__from--side{max-width:76px;vertical-align:bottom;text-align:center}
/* a gamete is lit while its step lasts; the boxes never are (Daniel, 7 Nov 2026: from the offspring's genotypes on, no highlight) */
.wx .is-now.wx__gam{color:var(--accent)}
.wx__fig{margin:0}
.wx__read{display:none}
.tr__tally{font-size:13.5px;color:var(--grey);margin:2px 0 8px}
.tr__stem{font-size:15.5px;line-height:1.55;margin:0 0 10px}
.tr__stem sup{font-size:70%}
.tr__line{margin:10px 0;padding:10px 12px;border:1px solid var(--edge);border-radius:12px;background:var(--card-2)}
.tr__h{margin:0 0 6px;font-weight:700;font-size:14.5px}
.tr__t1 td,.tr__t1 th{vertical-align:middle}
.tr__gams{white-space:nowrap}
.tr__gl{font-size:12.5px;color:var(--grey);margin:0 4px 0 10px}
.tr__choices{display:flex;flex-wrap:wrap;gap:6px}
.tr__ch{font:inherit;font-size:14.5px;padding:8px 12px;border-radius:9px;border:1.5px solid var(--edge);background:var(--card);color:var(--ink);cursor:pointer;text-align:left}
.tr__ch[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint)}
.tr__ch.ok{border-color:var(--ok);background:var(--ok-tint)} .tr__ch.no{border-color:var(--bad);background:var(--bad-tint)}
.tr__fb{margin:8px 0}
.tr__ok{color:var(--ok);font-weight:600;margin:4px 0} .tr__no{color:var(--bad);font-weight:600;margin:4px 0}
.tr__new{margin-top:6px}
.widget__note--ext{border-left:3px solid var(--purple);padding-left:8px;color:var(--purple)}
@media (max-width:520px){
  .wx__row{grid-template-columns:1fr;gap:2px}
  .wx__lab{text-align:left}
  .wx__sq td{width:auto;min-width:96px;height:64px}
  .gt{min-width:54px;font-size:19px}
  .tr__gl{display:block;margin:4px 0 0}
  .tr__gams{white-space:normal}
}

/* the step animations' read-outs and drawings (the Immunity Lab's) */
.zm__read,.pt__read,.dv__read{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.zm__pill,.pt__pill,.dv__pill{font-size:12.5px;border-radius:var(--r-pill);padding:3px 10px;border:1px solid var(--edge);background:var(--card-2)}
.zm__pill.is-ok,.pt__pill.is-ok,.dv__pill.is-ok{border-color:var(--ok);color:var(--ok)}
.zm__fig,.pt__fig,.dv__fig{margin:0}
.zm__svg,.pt__svg,.dv__svg{display:block;width:100%;height:auto}
.thr--faint{stroke:var(--shade);opacity:.35}
.dv__ext{font:inherit;font-size:12.5px;font-weight:600;border-radius:var(--r-pill);padding:3px 10px;border:1.5px solid var(--purple);background:var(--card);color:var(--purple);cursor:pointer}
.dv__ext[aria-pressed="true"]{background:var(--purple);color:var(--on-ink)}
.dv__ext[aria-pressed="true"] .sup--ext{color:var(--on-ink)}
.sw--faint{background:var(--shade);opacity:.45}
.sw--x{background:linear-gradient(60deg,transparent 42%,var(--mum) 42% 58%,transparent 58%),linear-gradient(-60deg,transparent 42%,var(--mum) 42% 58%,transparent 58%);border:none}
/* the IGCSE · IB switch of the divisions */
.lvw__bar{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.lvw__b{font:inherit;font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);border:1.5px solid var(--edge);background:var(--card);color:var(--ink);cursor:pointer}
.lvw__b[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint);color:var(--accent)}
.lvw__b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* IB in the IB blue of the practicals (Daniel, 4 Nov 2026: "Yes, IB blue"): the tag on the switch, and the IB level's notes */
.lvw__b .sup--ext{background:var(--c103);color:var(--c104);border-color:var(--c105)}
.widget__note--ib{border-left:3px solid var(--c104);padding-left:8px;color:var(--c104)}
/* the cell's own structures, IB level */
.cent{fill:var(--ink);opacity:.8} .cent__pcm{fill:var(--accent-tint);stroke:var(--accent);stroke-width:1}
.mt path{fill:none;stroke:var(--grey);stroke-width:1.1;opacity:.75}
.nucleolus{fill:var(--nuc-edge);opacity:.7}
.nucb--break{stroke-dasharray:6 5}
.cring circle{fill:var(--bad);stroke:#fff;stroke-width:1}
.chiasma{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:3 2}
.mito{fill:var(--mito);stroke:var(--mito-edge);stroke-width:1}
.nucghost{fill:var(--nuc-fill);stroke:none}
.vesicle{fill:var(--nuc-edge);opacity:.8}
.eqline{fill:none;stroke:var(--grey);stroke-width:1.2;stroke-dasharray:5 4}
.hist{fill:var(--aa4);opacity:.9} .histdna{fill:none;stroke:var(--dna-a);stroke-width:1.8}
.inset{fill:var(--card);stroke:var(--edge);stroke-width:1.2}

/* ============================================================ the divisions (side session "divisions", 5 Nov 2026) ============================================================
   js/w-divide.js, js/w-divide-ib.js, js/inh-uses.js and the films of the station pictures. A chromosome is drawn by
   InhDraw.coiled everywhere (the zoom's own look); these add its gene (a yellow length of the thread, a yellow band across
   the cross) and the envelope breaking into pieces. Fades use the opacity attribute: stroke- and fill-opacity only here */
.thr--gene{stroke:var(--gene)}
.zm__arm--gene{stroke:var(--gene);stroke-linecap:butt}
/* a copy bent sharply (a V, pulled by its joining point) keeps a round bend, never a spike */
.zm__arm{stroke-linejoin:round}
.nucpc{fill:none;stroke:var(--nuc-edge);stroke-width:1.8;stroke-linecap:round}
.nucpc--in{stroke-width:1;stroke-opacity:.6}
/* "What mitosis is for" (js/inh-uses.js): an embryo's clear coat, an old cell, a stem cell, red and white blood cells, a plant.
   Every colour keyed under the picture (station `uses`), in the bright and the dark version */
:root{ --stem-fill:#FCEFC7; --stem-edge:#A16207; --rbc:#D64545; --rbc-edge:#9B2C2C; --rbc-2:#F2A5A0; --wbc:#EEF2F7; --wbc-edge:#64748B;
  --old-fill:#D9D4CB; --old-edge:#8A8578; --leaf:#4C9A45; --leaf-edge:#2E6B2A; --root:#8A6A3D; --coat:#8FA3B8 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --stem-fill:#3A3020; --stem-edge:#E0B45A; --rbc:#E2635E; --rbc-edge:#F3A19C; --rbc-2:#8E3532;
  --wbc:#2B3440; --wbc-edge:#A9B6C6; --old-fill:#3A3732; --old-edge:#8E877A; --leaf:#5FB357; --leaf-edge:#A3D99B; --root:#C9A574; --coat:#7F93A8 } }
:root[data-theme="dark"]{ --stem-fill:#3A3020; --stem-edge:#E0B45A; --rbc:#E2635E; --rbc-edge:#F3A19C; --rbc-2:#8E3532;
  --wbc:#2B3440; --wbc-edge:#A9B6C6; --old-fill:#3A3732; --old-edge:#8E877A; --leaf:#5FB357; --leaf-edge:#A3D99B; --root:#C9A574; --coat:#7F93A8 }
.coat{fill:none;stroke:var(--coat);stroke-width:5;stroke-opacity:.55}
.cellb.cellb--stem{fill:var(--stem-fill);stroke:var(--stem-edge)}
.cellb.cellb--old{fill:var(--old-fill);stroke:var(--old-edge)}
.cellb.cellb--rbc{fill:var(--rbc);stroke:var(--rbc-edge)} .rbc__in{fill:var(--rbc-2)}
.cellb.cellb--wbc{fill:var(--wbc);stroke:var(--wbc-edge)}
.leafs{fill:var(--leaf);stroke:var(--leaf-edge);stroke-width:1}
.stalk,.runner{fill:none;stroke:var(--leaf-edge);stroke-width:2;stroke-linecap:round}
.root{fill:none;stroke:var(--root);stroke-width:1.6;stroke-linecap:round}
.soil{fill:none;stroke:var(--root);stroke-width:2.4;stroke-linecap:round}
.tissue{fill:none;stroke:var(--grey);stroke-width:2;stroke-linecap:round}
.sw--coat{background:var(--coat)} .sw--stem{background:var(--stem-fill);border:1.5px solid var(--stem-edge)} .sw--old{background:var(--old-fill);border:1.5px solid var(--old-edge)}
.sw--rbc{background:var(--rbc)} .sw--wbc{background:var(--wbc);border:1.5px solid var(--wbc-edge)} .sw--leaf{background:var(--leaf)} .sw--cell{background:var(--cell-fill);border:1.5px solid var(--cell-edge)}
/* another person's chromosomes (the egg cell's, at fertilisation): solid grey, never the faint grey of "other chromosomes of
   this cell"; a sperm cell's tail; the spindle's swatch */
:root{ --other:#6B7280 } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --other:#AEB6C2 } } :root[data-theme="dark"]{ --other:#AEB6C2 }
.thr--other{stroke:var(--other)} .zm__arm--other{stroke:var(--other)} .ch--other{fill:var(--other)}
.tail{fill:none;stroke:var(--cell-edge);stroke-width:2;stroke-linecap:round}
.sw--other{background:var(--other)} .sw--fibre{background:linear-gradient(transparent 44%,var(--grey) 44% 56%,transparent 56%);border:none}
/* "What mitosis is for" (js/inh-uses.js): its cells are a few pixels across, so their outlines and membranes are drawn
   thinner than in the large animations, in proportion (the audit, 5 Nov 2026) */
[data-film="uses"] .cellb{stroke-width:1.2}
[data-film="uses"] .nucb{stroke-width:.8}
[data-film="uses"] .zm__env{stroke-width:.5}
[data-film="uses"] .nucpc{stroke-width:.8}
[data-film="uses"] .nucpc--in{stroke-width:.5}
/* ---------- end of the divisions' block ---------- */
/* ---------- "How a protein is made" (js/w-protein.js): its own colours and drawings ----------
   U, the base only RNA has; tRNA; the ribosome's two parts (their RNA darker, their proteins lighter); the nuclear pore's
   proteins; the two membranes round the nucleus and the space between them; the letters on the bases. The cell, nucleus,
   chromosomes, DNA and enzymes keep w-zoom's colours (one drawing for one thing in every animation). Parts fade by their
   opacity attribute, so nothing here sets a CSS opacity. */
:root{
  --pt-u:#E07B00; --pt-trna:#6D28D9; --pt-trna-tint:#EDE4FB; --pt-npc:#4B6584; --pt-lum:#E4DAF2;
  --pt-rib:#D9C2A0; --pt-rib-rna:#6B4F2A; --pt-rib-hi:#E9DCC6; --pt-rprot:#A9BCCB; --pt-tun:#F3E9DA; --pt-cod-0:#FFF1B8; --pt-cod-1:#DCEBFF;
  --pt-lt-light:#FFFFFF; --pt-lt-dark:#1A1A1A; --pt-bond:#C2410C;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --pt-u:#FDBA74; --pt-trna:#C4B5FD; --pt-trna-tint:#2C2142; --pt-npc:#9FB3CC; --pt-lum:#2F2740;
  --pt-rib:#5A4630; --pt-rib-rna:#E6CFA6; --pt-rib-hi:#6E5A42; --pt-rprot:#55697C; --pt-tun:#3F3224; --pt-cod-0:#3A3418; --pt-cod-1:#1C2A3D;
  --pt-lt-light:#0A141C; --pt-lt-dark:#0A141C; --pt-bond:#FB923C;
}
}
:root[data-theme="dark"]{
  --pt-u:#FDBA74; --pt-trna:#C4B5FD; --pt-trna-tint:#2C2142; --pt-npc:#9FB3CC; --pt-lum:#2F2740;
  --pt-rib:#5A4630; --pt-rib-rna:#E6CFA6; --pt-rib-hi:#6E5A42; --pt-rprot:#55697C; --pt-tun:#3F3224; --pt-cod-0:#3A3418; --pt-cod-1:#1C2A3D;
  --pt-lt-light:#0A141C; --pt-lt-dark:#0A141C; --pt-bond:#FB923C;
}
.dna__b--U,.dna__fill--U{stroke:var(--pt-u);fill:var(--pt-u)}
.pt__lt{font-family:var(--font);font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.pt__lt--A,.pt__lt--T,.pt__lt--G{fill:var(--pt-lt-light)} .pt__lt--C,.pt__lt--U{fill:var(--pt-lt-dark)}
.pt__gband{fill:none;stroke:var(--gene);stroke-linecap:round}
.pt__gene{fill:none;stroke:var(--gene);stroke-width:7;stroke-opacity:.6;stroke-linecap:round;stroke-linejoin:round}
.dna__s.pt__cdna{stroke-width:1.1}
.dna__s.pt__mr{stroke:var(--mrna);stroke-width:2.2;stroke-linejoin:round}
.dna__s.pt__mrv{vector-effect:non-scaling-stroke}
.dna__s.pt__mrE{stroke-width:3.2}
.dna__s.zm__s7.pt__rna{stroke:var(--mrna)}
.pt__mrF{fill:none;stroke:var(--mrna);stroke-width:4.5;stroke-linecap:round}
.pt__tick{fill:none;stroke:var(--mrna);stroke-width:1.2;stroke-opacity:.8}
.pt__nt{fill:var(--mrna)}
.pt__pol{fill:var(--accent-tint);fill-opacity:.62;stroke:var(--accent);stroke-width:3}
/* the enzyme in the gene picture: its outline stays thin on the screen, so in the zoom to and from the close-up it is the
   close-up's enzyme, never a thick dark ring (6 Nov 2026) */
.pt__pol.pt__polC{stroke-width:1.2;vector-effect:non-scaling-stroke}
.pt__gzone{fill:var(--gene);fill-opacity:.3}
.pt__start{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:7 6}
.pt__lum{fill:var(--pt-lum)}
.pt__mem{fill:none;stroke:var(--nuc-edge);stroke-width:8.5}
.pt__mem2{fill:none;stroke:var(--pt-lum);stroke-width:2.4}
.pt__npc{fill:var(--pt-npc);fill-opacity:.9}
.pt__npcf{fill:none;stroke:var(--pt-npc);stroke-width:3;stroke-linecap:round}
.pt__ss,.pt__ls{fill:var(--pt-rib);stroke:var(--pt-rib-rna);stroke-width:1.6}
.pt__sheen{fill:var(--pt-rib-hi);opacity:.7;stroke:none}
/* the ribosome seen through (the step "Inside a ribosome"): its RNA in folded layers, its proteins on the surface */
.pt__rrna2{fill:none;stroke:var(--pt-rib-rna);stroke-width:2.6;stroke-linejoin:round}
.pt__rprot{fill:var(--pt-rprot);stroke:var(--pt-rib-rna);stroke-width:1}
.pt__tun{fill:none;stroke:var(--pt-tun);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}
.pt__trna{fill:var(--pt-trna-tint);stroke:var(--pt-trna);stroke-width:1.8;stroke-linejoin:round}
.pt__nb{stroke:none}
.pt__cod--0{fill:var(--pt-cod-0)} .pt__cod--1{fill:var(--pt-cod-1)}
.pt__pep{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-opacity:.7}
.pt__bond{fill:none;stroke:var(--pt-bond);stroke-width:3}
.pt__prot{fill:none;stroke:var(--grey);stroke-width:1.4;stroke-dasharray:4 3}
.pt__box{fill:none;stroke:var(--ink);stroke-width:1.8}
.pt__cellB{fill:var(--cell-fill);stroke:var(--cell-edge);stroke-width:5}
.zm__pane.pt__edge{fill:none;stroke:var(--edge);stroke-width:1.2}
.pt__start.pt__startC{stroke-width:1.3;stroke-dasharray:3 3}
/* ---------- end of the protein animation's block ---------- */

/* ---------- the names on every picture (5 Nov 2026, the "labels" side session) ---------- */
@media (max-width:1000px) and (min-height:561px){
  /* a drawing that scrolls with the page: its view as tall as its picture, key and notes together, so the caption never
     covers the key's last line (on a phone the gene-expression and pairs pictures lost "a gene expressed", "the ABO gene") */
  .platecol[data-kind="figure"] .viewhost,.platecol[data-kind="figure"] .cellv{flex:none}
}
/* the final audit's pictures: a bracket over a pair (its name ends on it), the ratio line, and gene expression's cell */
.brk{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.gd__ratio{font-weight:700}
.mrna.exg__mrna{stroke-width:3}
.exg__ves{fill:var(--card);stroke:var(--shade);stroke-width:1.2}
.exg__memp{fill:var(--aa2);stroke:rgba(0,0,0,.35);stroke-width:1}
.exg__chan{stroke:var(--card);stroke-width:2.4;stroke-linecap:round}
.exg__rec{fill:none;stroke:var(--aa2);stroke-width:4.5;stroke-linecap:round}
.exg__cris{fill:none;stroke:var(--mito-edge);stroke-width:1.2}
/* ---------- end of the labels block ---------- */
/* how to say a hard word: its look is in labs-shared/say/say.js (js/say.js) since 8 Nov 2026 */

/* a step's words in parts, each marked with its level (Daniel, 8 Nov 2026: "exactly what is IGCSE and what is IB and what
   is beyond … It needs to be very, very clear"): IGCSE in the lab's green, IB in the IB blue, beyond both in grey italics,
   each a filled tint (memory level-colours-never-blank); the key to them, once, above the steps */
.sp__lv{display:block;margin-top:5px;padding:4px 9px 5px;border-radius:7px;border-left:3px solid var(--accent);background:var(--accent-tint)}
.sp__lv:first-child{margin-top:0}
.sp__lvt{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:var(--r-pill);margin-right:3px;vertical-align:1px;background:var(--accent);color:var(--card)}
.sp__lv--ib,.sp__lv--ibhl{background:var(--c103);border-left-color:var(--c104)}
.sp__lv--ib .sp__lvt,.sp__lv--ibhl .sp__lvt{background:var(--c104);color:var(--c103)}
.sp__lv--bey{background:var(--c106);border-left-color:var(--c107)}
.sp__lv--bey .sp__lvt{background:var(--c24);color:var(--card);font-style:italic}
.sp__legend{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;font-size:12.5px;line-height:1.35}
.sp__legend .sp__lv{display:inline-block;margin:0;padding:3px 8px}

/* a Punnett square's boxes (inh-scenes.js punnett) */
.gd__box{fill:var(--card);stroke:var(--ink);stroke-width:1.4}

/* How to write the alleles (w-cross.js writing): four rules, each the wrong way struck out, then the right way; they come
   in turn as the card opens (3 s apart), then all stay */
.aw{margin:12px 0 4px}
.aw__rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.aw__rule{background:var(--card-2);border:1px solid var(--edge);border-radius:var(--r);padding:10px 12px 12px}
.aw__h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:700;font-size:15px}
.aw__n{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--card);font-size:12.5px}
.aw__ask{margin:0 0 6px;font-size:14px;color:var(--grey)}
.aw__eg{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.aw__pair{display:flex;align-items:center;gap:8px;width:100%}
.aw__feat{display:inline-flex;flex-direction:column;font-size:14px;min-width:100px}
.aw__feat i{font-size:12px;color:var(--grey)}
.aw__to{color:var(--grey)}
.aw__al{font-size:30px;line-height:1;font-family:var(--font);min-width:26px;text-align:center}
.aw__note{flex:1 1 90px;font-size:13px;color:var(--grey)}
.aw__bad,.aw__good{display:inline-flex;align-items:center;gap:6px;font-size:21px;font-weight:700;padding:4px 12px;border-radius:var(--r-pill)}
.aw__bad{background:var(--bad-tint);color:var(--bad);position:relative}
.aw__x{position:relative}
.aw__x::after{content:"";position:absolute;left:-3px;right:-3px;top:52%;height:2.5px;background:var(--bad);border-radius:2px}
.aw__good{background:var(--ok-tint);color:var(--ok)}
.aw__mk{font-size:15px}
.aw__fine{margin:8px 0 0;font-size:13px;color:var(--grey)}
.aw__sum{margin:10px 0 6px;font-size:15px}
.aw__again{font:inherit;font-size:13.5px;font-weight:600;padding:5px 12px;border-radius:var(--r-pill);border:1.5px solid var(--edge);background:var(--card);color:var(--ink);cursor:pointer}
.aw__again:hover,.aw__again:focus-visible{border-color:var(--accent)}
.aw.is-run .aw__rule{animation:aw-in .6s ease-out both;animation-delay:calc(var(--i) * 3s)}
.aw.is-run .aw__al--a{animation:aw-in .5s ease-out both;animation-delay:.6s}
.aw.is-run .aw__al--b{animation:aw-in .5s ease-out both;animation-delay:1.6s}
.aw.is-run .aw__al--b + .aw__note{animation:aw-in .5s ease-out both;animation-delay:1.9s}
.aw.is-run .aw__x::after{animation:aw-strike .5s ease-in both;animation-delay:calc(var(--i) * 3s + .9s);transform-origin:left center}
.aw.is-run .aw__good{animation:aw-in .5s ease-out both;animation-delay:calc(var(--i) * 3s + 1.6s)}
.aw.is-run .aw__sum{animation:aw-in .6s ease-out both;animation-delay:12s}
@keyframes aw-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes aw-strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.aw.is-run *{animation:none!important}}
.aw .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* a step with no IGCSE line: its level on its button (w-common.js onlyLv) */
.sp__only{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:0 6px;border-radius:var(--r-pill);vertical-align:1px;border:0;margin-left:2px}
.sp__only.sp__lv--ib,.sp__only.sp__lv--ibhl{background:var(--c104);color:var(--c103)}
.sp__only.sp__lv--bey{background:var(--c24);color:var(--card);font-style:italic}
.sp__step--ib .sp__stepb,.sp__step--ibhl .sp__stepb{background:var(--c103)}
.sp__step--bey .sp__stepb{background:var(--c106)}

/* how a diagram draws a chromosome, under the "A line or a cross?" film: two drawings side by side, each with its words
   (figure.js `diagram`, inh-scenes.js asDrawn) */
.figdiag{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:10px 4px 2px}
.figdiag[hidden]{display:none}
.figdiag__h{grid-column:1/-1;margin:0;font-size:13px;font-weight:700;color:var(--ink)}
.figdiag figure{margin:0;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:8px 10px}
.figdiag svg{flex:none;width:44px;height:auto;overflow:visible}
.figdiag figcaption{font-size:13px;line-height:1.35;color:var(--ink)}

/* fertilisation, in the zygote: each parent's two chromosomes in one dashed outline, in that parent's colour (w-divide.js fert) */
.dv__grp{fill:none;stroke-width:1.6;stroke-dasharray:5 3}
.dv__grp--dad{stroke:var(--dad)} .dv__grp--mum{stroke:var(--mum)}