/* ═══════════════════════════════════════════════════════════════════════════
   IB SEHS · Focus lesson — a full-screen, sentence-at-a-time reader.

   This page deliberately loads none of the site chrome: no sidebar, no top bar,
   no FABs, no modals. It loads the theme stylesheet only for the colour
   variables and the light/dark pair, so the lesson matches the rest of the site
   without inheriting any of its layout.

   Layout: a fixed rail (progress + controls) on top, a two-column body on
   desktop (rail column + reading column), and a single reading column under
   900px where the left column becomes a slide-in drawer.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --rail-h: 58px;
  --rail-w: 296px;
  --lesson-w: 46rem;          /* comfortable measure for long-form reading */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
}

/* ── base ────────────────────────────────────────────────────────────────── */

/* The figures were drawn against --border / --accent, which the theme does not
   define under those names. */
:root { --border: var(--line); --accent: var(--gold); }

body.ib-lesson {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font, system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

/* Reading is the point, so no accidental sideways scroll on a phone. */
body.ib-lesson { overflow-x: hidden; }

/* Deliberately NOT `color: inherit` here: it is (0,1,2) and it beat the
   drill blank's `color: transparent`, so the hidden key terms stayed
   readable. The two buttons that used to lean on it declare their own. */
body.ib-lesson button { font: inherit; }

.ib-lesson-shell {
  /* The rail column only exists on desktop. On a phone the reading column is
     centred with no left offset, which is why this is a plain grid here. */
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  padding: 0 1.15rem 0;
}

@media (min-width: 1040px) {
  .ib-lesson-shell {
    grid-template-columns: var(--rail-w) minmax(0, var(--lesson-w));
    gap: 3rem;
    justify-content: stretch;
    padding: 0 2.5rem 0;
  }
  /* the rail column holds the drawer contents as a static column */
  .ib-rail {
    position: sticky;
    top: calc(var(--rail-h) + 1.6rem);
    align-self: start;
    max-height: calc(100vh - var(--rail-h) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ib-rail__scrim,
  .ib-rail__close { display: none; }
}

/* `[hidden]` is only `display:none` in the UA stylesheet, so ANY author rule
   that sets `display` silently defeats it. `.ib-foot{display:flex}` and
   `.ib-reader{display:grid}` therefore left the reader's Back/Next footer and
   a 147px slice of the reader rendering on the hub, even with the attribute
   correctly set to true. This is the canonical remedy and it fixes every
   `el.hidden = true` in the script at once. */
[hidden] { display: none !important; }

/* ── top rail: Exit, progress, toggles ───────────────────────────────────── */

/* The progress bar, its counter and the term-blanking drill describe a lesson
   IN PROGRESS, so they only mean anything inside the reader. On the hub they
   rendered as a wide empty bar, a bare em dash and a "Test me" button that
   had nothing to test. .ib-reading is added on open and removed on exit. */
body.ib-lesson:not(.ib-reading) #ibDrill,
body.ib-lesson:not(.ib-reading) .ib-top__bar,
body.ib-lesson:not(.ib-reading) .ib-top__count { display: none; }

/* Same reasoning for the moment before the first slide exists: the resume
   prompt is the only thing on screen, so the counter would be a bare em dash,
   the drill would have nothing to blank and the footer nothing to advance. */
body.ib-resuming #ibDrill,
body.ib-resuming .ib-top__bar,
body.ib-resuming .ib-top__count,
body.ib-resuming .ib-foot { display: none; }

.ib-top {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--rail-h);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 clamp(.9rem, 3vw, 1.6rem);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.ib-top__exit {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 40px;
  padding: 0 .7rem 0 .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--text2);
  cursor: pointer;
  flex: none;
}
.ib-top__exit:hover { color: var(--text); border-color: var(--text3); }
.ib-top__exit svg { width: 15px; height: 15px; display: block; }

/* Progress is a hairline that fills. Not a number: the eye reads position. */
.ib-top__bar {
  flex: 1 1 auto;
  height: 6px;
  min-width: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  overflow: hidden;
}
.ib-top__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f8ff0, #6d5cf0);
  transition: width .32s cubic-bezier(.4, 0, .2, 1);
}
.ib-top__count {
  flex: none;
  font-size: .76rem;
  font-weight: 800;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  min-width: 4.4em;
  text-align: right;
}

.ib-top__btn {
  flex: none;
  min-width: 40px;
  height: 40px;
  padding: 0 .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .78rem;
  font-weight: 800;
  color: var(--text2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ib-top__btn:hover { color: var(--text); }
.ib-top__btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  border-color: var(--blue2);
  color: var(--blue2);
}
/* the drawer trigger only exists where the rail is a drawer */
.ib-top__btn--rail { display: inline-flex; }
@media (min-width: 1040px) { .ib-top__btn--rail { display: none; } }

.ib-top__slot { display: none; }
@media (min-width: 1040px) { .ib-top__slot { display: block; flex: 1 1 0; } }

/* ── reading column ──────────────────────────────────────────────────────── */

.ib-read {
  min-width: 0;
  padding: clamp(1.6rem, 4vw, 3rem) 0 8rem;
  padding-left: 0;
}
@media (min-width: 1040px) { .ib-read { padding-top: 2.4rem; } }

/* Chapter cover */

.ib-cover__kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue2) 11%, var(--surface));
  color: var(--blue2);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ib-cover__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.9rem, 5.5vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: .9rem 0 .5rem;
}
.ib-cover__meta { color: var(--text2); font-size: .92rem; }

/* section opener */
.ib-sec {
  margin: 3.2rem 0 1.4rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--line);
  scroll-margin-top: calc(var(--rail-h) + 1rem);
}
.ib-sec:first-child { border-top: 0; margin-top: 1rem; }
.ib-sec__label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent, var(--gold));
}
.ib-sec__label svg { width: 17px; height: 17px; flex: none; }
.ib-sec__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.3rem, 3.6vw, 1.72rem);
  line-height: 1.22;
  margin: .5rem 0 0;
  letter-spacing: -.012em;
}
.ib-sec__code {
  display: inline-block;
  margin-left: .5rem;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .74em;
  color: var(--text3);
  font-weight: 700;
  vertical-align: .1em;
}

/* A revealed sentence. Fades and dims as later blocks land below it, so the
   newest line is always the brightest thing on screen. */
.ib-sum {
  font-size: clamp(1.02rem, 2.5vw, 1.16rem);
  line-height: 1.72;
  margin: 0 0 1.15rem;
}

.ib-sum b, .ib-card b, .ib-sec__title b { font-weight: 800; color: var(--text); }
.ib-card b, .ib-sum b { background: color-mix(in srgb, var(--gold) 15%, transparent); border-radius: 3px; padding: 0 .12em; }

/* ── cards ────────────────────────────────────────────────────────────────── */
/* Key Idea / Definition / Note / Example / Analogy all share one quadrilateral
   shell so they read as a family; only the tint and the label change. */

.ib-card {
  position: relative;
  margin: 1.35rem 0;
  padding: 1rem 1.15rem 1.05rem;
  border-radius: var(--r-md);
  border: 1px solid var(--ib-c-bd);
  border-left: 5px solid var(--ib-c-ac);
  background: var(--ib-c-bg);
  transition: opacity .3s ease;
  opacity: .62;
}


.ib-card__label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--ib-c-ac);
  margin-bottom: .4rem;
}
.ib-card__label svg { width: 16px; height: 16px; flex: none; }
.ib-card__title { font-weight: 800; font-size: 1.04rem; margin: 0 0 .3rem; }
.ib-card__body { font-size: .99rem; line-height: 1.66; margin: 0; }
.ib-card__body ul { margin: .5rem 0 0; padding-left: 1.15rem; }
.ib-card__body li { margin: .3rem 0; }
.ib-card__body li::marker { color: var(--ib-c-ac); font-weight: 800; }
.ib-card__note {
  margin: .55rem 0 0;
  font-size: .86rem;
  color: var(--text2);
  font-style: italic;
}

/* the five tints */
.ib-card--idea    { --ib-c-ac: #7c4dff; --ib-c-bg: color-mix(in srgb, #7c4dff 7%, var(--surface));  --ib-c-bd: color-mix(in srgb, #7c4dff 26%, transparent); }
.ib-card--def     { --ib-c-ac: #d63d84; --ib-c-bg: color-mix(in srgb, #d63d84 7%, var(--surface));  --ib-c-bd: color-mix(in srgb, #d63d84 26%, transparent); }
.ib-card--note    { --ib-c-ac: #17936b; --ib-c-bg: color-mix(in srgb, #17936b 8%, var(--surface));  --ib-c-bd: color-mix(in srgb, #17936b 26%, transparent); }
/* Analogy and Example are the two the brief calls out by name. */
.ib-card--analogy { --ib-c-ac: #d93b3b; --ib-c-bg: color-mix(in srgb, #d93b3b 8%, var(--surface));  --ib-c-bd: color-mix(in srgb, #d93b3b 30%, transparent); }
.ib-card--example { --ib-c-ac: #2b6fe0; --ib-c-bg: color-mix(in srgb, #2b6fe0 8%, var(--surface));  --ib-c-bd: color-mix(in srgb, #2b6fe0 30%, transparent); }

/* Definition card gets a term + its definition, which is what feeds both the
   glossary and the flashcard deck. */
.ib-def__term { font-weight: 800; font-size: 1.06rem; margin: 0 0 .25rem; }

/* ── figures and tables ─────────────────────────────────────────────────── */

.ib-fig { margin: 1.6rem 0; opacity: .62; transition: opacity .3s ease; }

.ib-fig__title {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 0 0 .5rem;
}
.ib-fig__frame {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: .85rem;
}
.ib-fig__frame svg { width: 100%; height: auto; display: block; }
.ib-fig__legend { margin: .7rem 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--text2); }
.ib-fig__legend li { position: relative; padding-left: 1rem; margin: .28rem 0; }
.ib-fig__legend li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue2);
}
.ib-fig__cap { margin: .6rem 0 0; font-size: .88rem; color: var(--text2); }

.ib-tbl { margin: 1.6rem 0; opacity: .62; transition: opacity .3s ease; }

.ib-tbl__wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ib-tbl table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 26rem; }
.ib-tbl th, .ib-tbl td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.ib-tbl th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); font-weight: 900; background: color-mix(in srgb, var(--text) 3%, transparent); }
.ib-tbl tr:last-child td { border-bottom: 0; }
.ib-tbl__title { font-size: .78rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--text3); margin: 0 0 .5rem; }
.ib-tbl__note { margin: .55rem 0 0; font-size: .87rem; color: var(--text2); }

/* ── flashcard slide ────────────────────────────────────────────────────── */

.ib-flash { margin: 1.6rem 0; text-align: center; opacity: .62; transition: opacity .3s ease; }

.ib-flash__label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; font-weight: 900; letter-spacing: .04em; color: #7c4dff;
}
.ib-flash__label svg { width: 16px; height: 16px; }
.ib-flash__card {
  margin: .6rem auto 0;
  max-width: 30rem;
  min-height: 13rem;
  padding: 2.4rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(16, 33, 58, .05);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ib-flash__q { font-size: 1.12rem; font-weight: 800; }
.ib-flash__hint { margin: .8rem 0 0; font-size: .82rem; color: var(--text3); }
.ib-flash.is-flipped .ib-flash__q { color: var(--text2); font-weight: 700; }

/* ── MCQ slide ──────────────────────────────────────────────────────────── */

.ib-mcq { margin: 1.7rem 0; opacity: .62; transition: opacity .3s ease; }

.ib-mcq__label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .76rem; font-weight: 900; letter-spacing: .04em; color: #2b6fe0;
}
.ib-mcq__label svg { width: 16px; height: 16px; }
.ib-mcq__q { font-size: 1.06rem; font-weight: 800; margin: .7rem 0 1rem; }
.ib-mcq__opt {
  color: var(--text);
  display: flex; align-items: flex-start; gap: .7rem;
  width: 100%; text-align: left;
  padding: .78rem .95rem; margin: .5rem 0;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer;
  font-size: .97rem; line-height: 1.5;
}
.ib-mcq__opt:hover:not(:disabled) { border-color: var(--blue2); }
.ib-mcq__opt:disabled { cursor: default; }
.ib-mcq__key {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: .78rem; font-weight: 900; color: var(--text3);
}
.ib-mcq__opt.is-right { border-color: #17936b; background: color-mix(in srgb, #17936b 10%, var(--surface)); }
.ib-mcq__opt.is-right .ib-mcq__key { border-color: #17936b; color: #17936b; }
.ib-mcq__opt.is-wrong { border-color: #d93b3b; background: color-mix(in srgb, #d93b3b 9%, var(--surface)); }
.ib-mcq__opt.is-wrong .ib-mcq__key { border-color: #d93b3b; color: #d93b3b; }
.ib-mcq__why { margin: .8rem 0 0; font-size: .9rem; color: var(--text2); }
.ib-mcq__hintbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; min-height: 38px;
  border: 1px solid color-mix(in srgb, #7c4dff 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #7c4dff 12%, var(--surface));
  color: #7c4dff; font-size: .82rem; font-weight: 800; cursor: pointer;
}
.ib-mcq__hintbtn:hover { background: color-mix(in srgb, #7c4dff 20%, var(--surface)); }

/* ── term-blanking drill ────────────────────────────────────────────────── */
/* With the drill on, every bolded key term renders as a tap-to-reveal blank.
   That is the "learn it yourself" half: the page stops reading for you. */
.ib-blank {
  display: inline-block;
  min-width: 7.5em;
  margin: 0 .1em;
  padding: 0 .5em;
  border-bottom: 2px dashed var(--blue2);
  background: color-mix(in srgb, var(--blue2) 9%, transparent);
  border-radius: 5px 5px 0 0;
  color: transparent;
  text-shadow: none;
  cursor: pointer;
  vertical-align: baseline;
  transition: background .18s ease, color .18s ease;
}
.ib-blank::before {
  content: attr(data-hint);
  color: color-mix(in srgb, var(--text3) 70%, transparent);
  font-size: .88em;
  font-style: italic;
}
.ib-blank.is-open {
  color: var(--text);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border-bottom-color: transparent;
  border-bottom-style: solid;
}
.ib-blank.is-open::before { content: none; }
.ib-blank:focus-visible { outline: 2px solid var(--blue2); outline-offset: 2px; }

/* ── rail: chapter map + live glossary ──────────────────────────────────── */

.ib-rail__scrim {
  position: fixed; inset: 0; z-index: 48;
  background: rgba(8, 14, 24, .5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
/* NB: the scrim is the sibling BEFORE .ib-rail in the markup, so an adjacent
   sibling combinator could not reach it. It is toggled by class from JS. */
.ib-rail__scrim.is-open { opacity: 1; pointer-events: auto; }

.ib-rail {
  padding: 1.4rem 0 0;
}
@media (max-width: 1039px) {
  .ib-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 50;
    width: min(88vw, 22rem);
    padding: calc(var(--rail-h) + .8rem) 0 2rem;
    background: var(--bg);
    border-right: 1px solid var(--line);
    box-shadow: 0 0 40px rgba(8, 14, 24, .2);
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ib-rail.is-open { transform: none; }
  .ib-rail__close { display: inline-flex; }
}
.ib-rail__close {
  /* NB: hidden by default. This rule used to declare display:inline-flex
     unconditionally, and because it sits AFTER the desktop media query's
     .ib-rail__close{display:none} at equal specificity, source order let it
     win — so the drawer's close "x" floated over the desktop hub as a stray
     button next to "All topics". The drawer only exists below 1040px, so the
     button is enabled there and nowhere else. */
  display: none;
  align-items: center; justify-content: center;
  position: absolute; top: .55rem; right: .7rem;
  width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); font-size: 1.1rem; cursor: pointer;
}

.ib-rail__head {
  font-size: .72rem; font-weight: 900; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text3);
  margin: 0 0 .55rem;
}
.ib-map { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ib-map__topic {
  font-size: .74rem; font-weight: 900; color: var(--blue2);
  margin: .85rem 0 .3rem; letter-spacing: .04em;
}
.ib-map__sec {
  display: flex; align-items: flex-start; gap: .5rem;
  width: 100%; text-align: left;
  padding: .42rem .5rem; min-height: 38px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  font-size: .86rem; line-height: 1.4;
  color: var(--text2);
}
.ib-map__sec:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.ib-map__sec.is-now { background: color-mix(in srgb, var(--blue2) 12%, transparent); color: var(--blue2); font-weight: 800; }
.ib-map__tick {
  flex: none; width: 1.05rem; height: 1.05rem; margin-top: .18rem;
  border: 1.5px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  font-size: .6rem; color: transparent;
}
.ib-map__sec.is-done .ib-map__tick { background: #17936b; border-color: #17936b; color: #fff; }

.ib-gloss__search {
  width: 100%; padding: .5rem .65rem; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-size: .87rem;
  margin-bottom: .5rem;
}
.ib-gloss__list { list-style: none; margin: 0; padding: 0; }
.ib-gloss__list li { padding: .45rem 0; border-bottom: 1px dotted var(--line); font-size: .85rem; line-height: 1.45; }
.ib-gloss__list b { display: block; color: var(--blue2); font-size: .86em; }
.ib-gloss__empty { font-size: .84rem; color: var(--text3); padding: .5rem 0; }

/* ── footer controls ────────────────────────────────────────────────────── */

.ib-foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem;
  padding: .7rem clamp(.9rem, 3vw, 2.5rem) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
}
@media (min-width: 1040px) {
  /* keep the footer's right edge on the reading column, not the window */
  .ib-foot { padding-left: calc(var(--rail-w) + 2.5rem); }
}
.ib-foot__btn {
  color: var(--text);
  min-height: 46px;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .92rem; font-weight: 800;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
}
.ib-foot__btn:disabled { opacity: .4; cursor: default; }
.ib-foot__btn--next {
  background: linear-gradient(180deg, #4a90e8, #3d7fd6);
  border-color: #3d7fd6;
  color: #fff;
  box-shadow: 0 2px 8px rgba(61, 127, 214, .3);
}
.ib-foot__btn--next:hover:not(:disabled) { background: linear-gradient(180deg, #3f86dc, #3575c8); }
.ib-foot__btn--next svg { width: 15px; height: 15px; }
.ib-foot__spacer { flex: 1 1 auto; }

/* ── end card ───────────────────────────────────────────────────────────── */

.ib-done { text-align: center; padding: 2rem 0 1rem; }
.ib-done__big {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0 0 .5rem;
}
.ib-done__stats { color: var(--text2); font-size: .95rem; margin: 0 0 1.3rem; }
.ib-done__acts { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* ── dark ───────────────────────────────────────────────────────────────── */
/* The theme stylesheet owns the dark variable block; this only keeps our own
   tints legible against a dark surface. */
body.ib-lesson.dark .ib-top__fill { background: linear-gradient(90deg, #6ea8ff, #9b8bff); }
body.ib-lesson.dark .ib-mcq__hintbtn { color: #b79cff; }
body.ib-lesson.dark .ib-flash__label { color: #b79cff; }
body.ib-lesson.dark .ib-mcq__label { color: #7db0ff; }

/* ── motion / print ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ib-sum, .ib-card, .ib-fig, .ib-tbl, .ib-flash, .ib-mcq, .ib-cover { transition: none; }
  .ib-rail, .ib-rail__scrim, .ib-top__fill { transition: none; }
}

@media print {
  .ib-top, .ib-foot, .ib-rail, .ib-rail__scrim { display: none !important; }
  .ib-sum, .ib-card, .ib-fig, .ib-tbl, .ib-flash, .ib-mcq, .ib-cover { opacity: 1 !important; }
}

/* ── generated figures ──────────────────────────────────────────────────────
   IB_VISUALS draws with CSS classes, not presentation attributes: .plate is the
   background card, .ln/.th are strokes, .lbl* are the labels. Without these rules
   the <rect class="plate"> falls back to the SVG default fill of BLACK and the
   whole figure renders as a black box — which is exactly what happens if you
   forget them, so they are copied here verbatim rather than trusted. The
   min-width keeps a 560-unit canvas legible on a phone, which is what the course
   page does with its scroll wrapper; here the frame scrolls instead. */
.vis-svg-scroll{margin:0 auto;max-width:100%}
.vis-svg{width:100%;height:auto;display:block;overflow:visible}
.vis-svg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain}
.vis-svg{min-width:440px}
.vis-svg .ln{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vis-svg .th{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vis-svg .dash{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:4 4;opacity:.75}
.vis-svg .plate{fill:var(--surface2);opacity:.6}
.vis-svg .panel{fill:none;stroke:var(--border);stroke-width:1}
.vis-svg .panelHead{fill:color-mix(in srgb,var(--accent,#7c3aed) 9%,transparent)}
.vis-svg .rule{stroke:var(--border);stroke-width:1;fill:none}
.vis-svg .grid{stroke:var(--border);stroke-width:1;opacity:.5;fill:none}
.vis-svg .ax{stroke:currentColor;stroke-width:2;fill:none}
.vis-svg .lblL{fill:currentColor;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.vis-svg .solid{fill:currentColor;stroke:none}
.vis-svg .accFill{fill:var(--accent,#7c3aed);opacity:.18}
.vis-svg .warnFill{fill:#dc2626;opacity:.15}
.vis-svg .goodFill{fill:#059669;opacity:.15}
.vis-svg .fillA{fill:currentColor;opacity:.10}
.vis-svg .fillB{fill:currentColor;opacity:.20}
.vis-svg .fillC{fill:currentColor;opacity:.32}
.vis-svg .lbl{fill:currentColor;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.vis-svg .lblS{fill:currentColor;font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.8}
.vis-svg .lblXS{fill:currentColor;font:500 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.85}
.vis-svg .acc{fill:var(--accent,#7c3aed);stroke:none}
.vis-svg .warn{fill:#dc2626;stroke:none}
.vis-svg .good{fill:#059669;stroke:none}
.ib-fig__frame .vis-svg { min-width: 0; }

/* ── recede ────────────────────────────────────────────────────────────────
   Earlier this was a bare opacity of .62 on each block type. A sentence at .62
   reads as obviously lightened, but a CARD at .62 did not, because its pale
   tint background still looked bright — so analogy and example blocks appeared
   to stay at full strength while the text around them faded. Desaturating as
   well as fading means a tinted card recedes exactly as far as a sentence, and
   the newest block is unambiguously the only thing at full colour. */
.ib-read > .ib-block {
  transition: opacity .3s ease, filter .3s ease;
}
.ib-read > .ib-now { opacity: 1; filter: none; }
.ib-read > .ib-recede { opacity: .42; filter: saturate(.28); }
.ib-read > .ib-block[hidden] { display: none !important; }

/* sr-only: the model layer reads a section's <h3 data-en> for its title, and
   the reader has already shown that heading, so this one only has to exist. */
.ib-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── resume chooser ───────────────────────────────────────────────────── */
.ib-resume {
  margin: 3rem auto 1rem;
  max-width: 34rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue2);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
}
.ib-resume__title { font-family: var(--font-heading); font-size: 1.4rem; margin: 0 0 .35rem; }
.ib-resume__meta { color: var(--text2); font-size: .93rem; margin: 0 0 1.2rem; }
.ib-resume__row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* ── HUB ───────────────────────────────────────────────────────────────── */

.ib-hub {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.6rem) 7rem;
}

.ib-hero { margin-bottom: 1.5rem; }
.ib-hero__kicker {
  display: inline-flex; align-items: center;
  padding: .3rem .75rem; border-radius: 999px;
  background: color-mix(in srgb, var(--blue2) 11%, var(--surface));
  color: var(--blue2);
  font-size: .72rem; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
}
.ib-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
  line-height: 1.1; letter-spacing: -.02em;
  margin: .8rem 0 .4rem;
}
.ib-hero__sub { color: var(--text2); margin: 0; max-width: 46rem; }

/* the six-level legend */
.ib-legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  padding: .85rem 1rem; margin: 0 0 1.4rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  font-size: .8rem; color: var(--text2);
}
.ib-legend__item { display: inline-flex; align-items: center; gap: .4rem; }

/* status squares — the site's OWN palette, ordered so they read as a scale */
.ib-lev {
  flex: none; display: inline-block;
  width: 1.05rem; height: 1.05rem; border-radius: 5px;
  background: var(--line);
}
.ib-lev--mastered   { background: var(--blue); }
.ib-lev--proficient { background: var(--blue2); }
.ib-lev--familiar   { background: var(--green); }
.ib-lev--learning   { background: var(--gold); }
.ib-lev--unfamiliar { background: var(--red); }
.ib-lev--unseen     { background: transparent; border: 1.5px dashed var(--line); }

.ib-tabs {
  display: flex; gap: .4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.3rem;
}
.ib-tab {
  min-height: 42px; padding: .5rem .95rem;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; cursor: pointer;
  font-size: .92rem; font-weight: 800; color: var(--text3);
}
.ib-tab.is-on { color: var(--blue2); border-bottom-color: var(--blue2); }

.ib-grp__title {
  font-family: var(--font-heading);
  font-size: 1.05rem; margin: 1.6rem 0 .6rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
.ib-tlist, .ib-seclist { list-style: none; margin: 0; padding: 0; }
.ib-trow {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left;
  min-height: 46px; padding: .55rem .6rem;
  border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
}
.ib-trow:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.ib-trow__txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.ib-trow__txt strong { font-size: .96rem; font-weight: 700; }
.ib-trow__meta { font-size: .78rem; color: var(--text3); }
.ib-trow.is-on { background: color-mix(in srgb, var(--blue2) 10%, transparent); }

/* The row title opens the topic detail; this pill enters the lesson directly,
   so lesson mode is one click from the list instead of two. They are separate
   buttons on purpose — a button inside a button is invalid HTML. */
.ib-trowwrap { display: flex; align-items: center; gap: .5rem; }
.ib-trowwrap .ib-trow { flex: 1 1 auto; min-width: 0; }
.ib-trowgo {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .34rem;
  min-height: 40px; padding: .34rem .8rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, var(--surface)); color: var(--text2);
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
}
.ib-trowgo:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.ib-trowgo svg { width: 13px; height: 13px; }
.ib-trowgo--done { border-color: var(--green); color: var(--green); }
.ib-trowgo--done:hover { background: var(--green); color: #fff; }
.ib-trowwrap:hover .ib-trow { background: color-mix(in srgb, var(--text) 5%, transparent); }

/* the "where do I start" call to action at the top of the hub */
.ib-cta {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 1.1rem; padding: 1rem 1.15rem;
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--r-sm);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--blue) 7%, var(--surface)), var(--surface) 62%);
}
.ib-cta__txt { display: flex; flex-direction: column; gap: .16rem; min-width: 0; flex: 1 1 auto; }
.ib-cta__eyebrow {
  font-size: .68rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text3);
}
.ib-cta__title { font-size: 1.02rem; font-weight: 700; }
.ib-cta__sub { font-size: .8rem; color: var(--text2); }
.ib-cta__go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .5rem 1.05rem;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #3f86dc, #3575c8); color: #fff;
  font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ib-cta__go:hover { filter: brightness(1.07); }
.ib-cta__go svg { width: 14px; height: 14px; }

.ib-crumb { display: flex; gap: .45rem; font-size: .82rem; color: var(--text3); margin-bottom: .5rem; }
.ib-crumb__sep { opacity: .5; }
.ib-dt__title {
  font-family: var(--font-heading); font-size: clamp(1.4rem, 4vw, 1.9rem);
  margin: 0 0 1rem; letter-spacing: -.015em; text-align: center;
}
.ib-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  padding: .95rem 1.1rem; margin-bottom: 1.4rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.ib-strip__lev { display: flex; align-items: center; gap: .5rem; }
.ib-strip__lev strong { font-size: 1rem; }
.ib-strip__next { font-size: .8rem; color: var(--text3); }
.ib-strip__stats { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-left: auto; }
.ib-stat { display: flex; flex-direction: column; line-height: 1.2; }
.ib-stat b { font-size: 1.06rem; }
.ib-stat span { font-size: .72rem; color: var(--text3); }

.ib-dt__group { margin: 0 0 1.4rem; }
.ib-dt__grouphead {
  font-size: .74rem; font-weight: 900; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text3);
  margin: 1.8rem 0 .7rem;
}
.ib-tiles { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ib-tiles { grid-template-columns: 1fr 1fr; } }
.ib-tile {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .9rem 1rem; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
button.ib-tile { cursor: pointer; font: inherit; color: inherit; }
button.ib-tile:hover { border-color: var(--blue2); }
.ib-tile__ico {
  flex: none; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--blue2) 10%, var(--surface));
  color: var(--blue2);
}
.ib-tile__ico svg { width: 1.2rem; height: 1.2rem; }
.ib-tile__txt { display: flex; flex-direction: column; gap: .1rem; }
.ib-tile__txt strong { font-size: .98rem; }
.ib-tile__txt span { font-size: .84rem; color: var(--text2); }
.ib-tile__txt em { font-style: normal; font-size: .74rem; color: var(--text3); margin-top: .2rem; }

.ib-secrow {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left;
  min-height: 44px; padding: .5rem .6rem;
  border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  font-size: .93rem;
}
.ib-secrow:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }

.ib-rail__hub {
  display: inline-flex; align-items: center;
  width: 100%; min-height: 40px; margin-bottom: .8rem;
  padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
  font-size: .86rem; font-weight: 800; color: var(--blue2);
}
.ib-rail__hub:hover { border-color: var(--blue2); }

.ib-gloss__list b { display: block; color: var(--blue2); font-size: .86em; }
.ib-gloss__list span { display: block; color: var(--text2); }

/* ── the course page's per-topic content, on this page ──────────────────── */

.ib-dt__lede { color: var(--text2); margin: -.4rem 0 1rem; max-width: 44rem; }

.ib-bigq {
  margin: 1.3rem 0 1.4rem; padding: .95rem 1.1rem;
  border: 1px solid var(--line); border-left: 4px solid var(--blue2);
  border-radius: var(--r-md); background: color-mix(in srgb, var(--blue2) 5%, var(--surface));
}
.ib-bigq__tag {
  margin: 0 0 .3rem; font-size: .7rem; font-weight: 900;
  letter-spacing: .09em; text-transform: uppercase; color: var(--blue2);
}
.ib-bigq__text { margin: 0; font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.45; }

.ib-seclist > li { border-bottom: 1px solid var(--line); }
.ib-secrow__n {
  margin-left: auto; font-size: .72rem; font-weight: 800;
  color: var(--text3); font-variant-numeric: tabular-nums;
}
.ib-secinfo { padding: 1rem 0 1.1rem 1.75rem; }
.ib-secinfo__focus {
  margin: 0 0 .7rem; font-size: .92rem; color: var(--text2);
}
.ib-secinfo__head {
  margin: 1.1rem 0 .45rem; font-size: .7rem; font-weight: 900;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text3);
}
.ib-termlist { margin: 0; }
.ib-termlist dt { font-weight: 800; font-size: .95rem; margin-top: .75rem; }
.ib-termlist dt:first-child { margin-top: 0; }
.ib-termlist dd { margin: .3rem 0 0; font-size: .88rem; color: var(--text2); }

.ib-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ib-chip {
  display: inline-block; padding: .18rem .55rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface2);
  font-size: .78rem; color: var(--text2); white-space: nowrap;
}
.ib-quicklist { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--text2); }
.ib-quicklist li { margin: .22rem 0; }

/* definitions view */
.ib-defcard {
  margin: 0 0 .6rem; padding: .7rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.ib-defcard__t { font-weight: 800; font-size: .98rem; margin-bottom: .15rem; }
.ib-defcard__d { font-size: .89rem; color: var(--text2); }

/* ═══ collapsible section detail ═══
   The long tail of a section (In detail / numbers / mistakes / why) is
   collapsed by default. Nothing is deleted — the default read is shorter so a
   student is not confronted by a wall of prose, and the full detail is one
   click away. The label swaps between "Go deeper" and "Show less" through two
   spans, because a single data-en/data-zh pair cannot express both states and
   a language toggle would otherwise reset an open button to its closed label. */
.native-deep { margin: 1.1rem 0 .2rem; }
.native-deep__btn {
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .45rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
}
.native-deep__btn::before { content: '\25BE'; font-size: .8em; opacity: .8; }
.native-deep__btn:hover { color: var(--text); border-color: var(--accent); }
.native-deep__lbl-open { display: none; }
.native-deep.is-open .native-deep__lbl-open { display: inline; }
.native-deep.is-open .native-deep__lbl-closed { display: none; }
.native-deep.is-open .native-deep__btn::before { content: '\25B4'; }
.native-deep__body { display: none; }
.native-deep.is-open .native-deep__body { display: block; }
.native-deep.is-open .native-deep__btn { margin-bottom: .6rem; }
@media (max-width: 620px) {
  .native-deep__btn { width: 100%; justify-content: center; }
}

/* ═══ unknown topic code ═══
   An unrecognised code used to render the first topic's lesson as a two-block
   stub that looked like a broken reader. It now says what happened and keeps the
   full topic list underneath so the reader can carry on. */
.ib-missing {
  margin: 0 0 1.6rem;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--red, #d93b3b);
  border-radius: 14px;
  background: var(--surface);
}
.ib-missing__title {
  font-family: var(--font-heading);
  font-size: 1.32rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}
.ib-missing__code { font-size: .92rem; color: var(--text2); margin: 0 0 .4rem; }
.ib-missing__code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
  padding: .1em .42em;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.ib-missing__hint { font-size: .92rem; color: var(--text2); margin: 0 0 1rem; }
.ib-missing__row { display: flex; flex-wrap: wrap; gap: .55rem; }
.ib-missing__btn {
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  min-height: 40px;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
}
.ib-missing__btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.ib-missing__btn:hover { filter: brightness(1.08); }
body.ib-lesson button.ib-missing__btn { font: inherit; color: #fff; }
body.ib-lesson button.ib-missing__btn--ghost { color: var(--text); }
@media (max-width: 620px) {
  .ib-missing { padding: .9rem .95rem 1rem; }
  .ib-missing__row { flex-direction: column; align-items: stretch; }
  .ib-missing__btn { width: 100%; }
}
.ib-defgrp {
  font-family: var(--font-heading); font-size: 1.02rem;
  margin: 1.4rem 0 .5rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--line);
}
button.ib-tile--toggle {
  margin: 0 0 1.2rem; width: auto; padding: .45rem .9rem;
  min-height: 38px; font-size: .84rem; font-weight: 800; color: var(--blue2);
}

/* ═══ subject page, topic tree, topic page, lessons, study guide ═════════ */

/* overall progress next to the subject title */
.ib-hero__stat {
  display: inline-flex; align-items: baseline; gap: .45rem;
  margin-top: .7rem; padding: .3rem .7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
}
.ib-hero__stat b { font-size: 1.05rem; font-weight: 800; color: var(--blue); }
.ib-hero__stat span { font-size: .76rem; color: var(--text3); }

/* section headings inside the subject and topic pages */
.ib-rsec {
  margin: 1.7rem 0 .7rem;
  font-size: 1.24rem; font-weight: 700; letter-spacing: -.01em;
}
.ib-rgrid {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.ib-rtile {
  display: flex; align-items: flex-start; gap: .8rem;
  width: 100%; min-height: 72px; padding: .95rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: inherit; text-align: left;
  font: inherit; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.ib-rtile:hover {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
  transform: translateY(-1px);
}
.ib-rtile__ico { flex: 0 0 auto; color: var(--blue2); }
.ib-rtile__ico svg { width: 26px; height: 26px; display: block; }
.ib-rtile__txt { display: flex; flex-direction: column; gap: .16rem; min-width: 0; }
.ib-rtile__txt strong { font-size: .98rem; font-weight: 700; }
.ib-rtile__txt span { font-size: .83rem; color: var(--text2); }
.ib-rtile__txt em {
  font-size: .74rem; font-style: normal; font-weight: 700;
  color: var(--text3); letter-spacing: .02em; margin-top: .1rem;
}

/* the progress legend sits in its own card, as on the reference */
.ib-legendbox {
  padding: .9rem 1.05rem; margin-bottom: 1.2rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.ib-legendbox__t { font-size: .95rem; font-weight: 700; margin-bottom: .55rem; }

/* chapter heading, then each group as a collapsible */
.ib-chhead {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  margin: 1.6rem 0 .5rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.ib-chhead__n {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text3);
}
.ib-chhead__t { font-size: 1.16rem; font-weight: 700; }

.ib-ghead {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  min-height: 46px; padding: .55rem .3rem;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  background: transparent; color: inherit; text-align: left;
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.ib-ghead:hover { color: var(--blue); }
.ib-ghead__t { flex: 1 1 auto; min-width: 0; }
.ib-ghead__caret { color: var(--text3); transition: transform .18s ease; }
.ib-ghead__caret svg { width: 14px; height: 14px; display: block; }
.ib-ghead.is-open .ib-ghead__caret { transform: rotate(180deg); }
.ib-grouplist { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 .35rem; }
.ib-grouplist[hidden] { display: none; }

.ib-crumb__link {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--text3); font: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}
.ib-crumb__link:hover { color: var(--blue); }

/* section header that jumps to the study guide */
.ib-secgo {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  min-height: 46px; margin-top: .9rem; padding: .5rem .6rem;
  border: 0; border-top: 1px solid var(--line);
  background: transparent; color: inherit; text-align: left;
  font: inherit; font-weight: 700; cursor: pointer;
}
.ib-secgo:hover { color: var(--blue); }
.ib-secgo svg { width: 14px; height: 14px; color: var(--text3); margin-left: auto; }
.ib-secgo > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }

.ib-backpill {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; margin-bottom: .8rem; padding: .4rem .85rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text2);
  font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.ib-backpill:hover { border-color: var(--blue); color: var(--blue); }
.ib-backpill svg { width: 14px; height: 14px; }

/* the lesson list */
.ib-leshead {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 1.2rem 0 .7rem; padding: .7rem .95rem;
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  font-size: .88rem;
}
.ib-leshead span { color: var(--text3); }
.ib-lesslist { list-style: none; margin: 0; padding: 0; }
.ib-lessrow {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  min-height: 54px; padding: .7rem .8rem;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius: var(--r-sm);
  background: transparent; color: inherit; text-align: left;
  font: inherit; font-size: .95rem; cursor: pointer;
}
.ib-lessrow:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.ib-lessrow__circ {
  flex: 0 0 auto; width: 20px; height: 20px;
  border: 1.5px dashed var(--line); border-radius: 50%;
}
.ib-lessrow__t { min-width: 0; }
.ib-lesstart { margin-top: 1.2rem; }

/* the study guide reuses the course page's own content classes */
.ib-guide { margin-top: 1.2rem; }
.ib-empty {
  padding: 1.4rem; border: 1px dashed var(--line); border-radius: var(--r-md);
  color: var(--text3); font-size: .9rem;
}
.ib-defcard__g {
  margin: 1.4rem 0 .5rem; font-size: .8rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text3);
}

/* the whole content block reads a little narrower than the chrome above it */
.ib-guide .native-lesson { max-width: 74ch; }

/* ── study-guide vertical rhythm (#guide/<code> view) ──────────────────────
   The native renderer emits a mix of lead paragraphs, tables, term cards,
   formula rows, figure trays, "go deeper" accordions, quick-check trays and
   the workbook reference. Several of those blocks carried no top margin, so
   neighbours touched each other and the sections ran together. Everything
   below is scoped to .ib-guide so the course page keeps its own layout. */
.ib-guide .native-lead p { margin: .6rem 0 1rem; }
.ib-guide .deep-question { margin-top: 1rem; }
.ib-guide .deep-question p { margin: .3rem 0 0; }
.ib-guide .native-section > .native-table-wrap,
.ib-guide .native-section > .vis-figures { margin-top: 1.1rem; }
.ib-guide .native-lesson > .native-figures,
.ib-guide .native-lesson > .workbook-reference { margin-top: 1.4rem; }
.ib-guide .native-formula + .native-formula { margin-top: .5rem; }
.ib-guide .vis-figure + .vis-figure,
.ib-guide .native-figure + .native-figure { margin-top: 1.1rem; }
.ib-guide .native-terms h4, .ib-guide .native-formulas h4, .ib-guide .native-examples h4,
.ib-guide .native-focus h4, .ib-guide .native-quick-check h4, .ib-guide .native-boundary h4,
.ib-guide .native-links h4, .ib-guide .native-figures h4, .ib-guide .vis-figures h4,
.ib-guide .deep-walk h4 { margin: 0 0 .5rem; }

/* ── narrow-screen top bar ──────────────────────────────────────────────── */
/* At a 500px viewport the reader bar measured 655px wide and pushed the page
   155px sideways: Exit + rail + home + progress bar + counter + Test me + EN +
   dark simply do not fit. The counter already carries the progress, so the bar
   is the first thing to go, then the gaps and padding. Below 430px Exit
   collapses to a single ✕, which is also what the reference reader uses. */
@media (max-width: 620px) {
  .ib-top { gap: .3rem; padding: .4rem .55rem; }
  .ib-top__bar { display: none; }
  .ib-top__btn, .ib-top__exit { padding: .42rem .6rem; font-size: .8rem; min-height: 40px; }
  .ib-top__count { font-size: .78rem; }
}
@media (max-width: 430px) {
  body.ib-lesson .ib-top__exit { font-size: 0; padding: .5rem .62rem; }
  body.ib-lesson .ib-top__exit::before { content: '✕'; font-size: 1rem; line-height: 1; }
}
/* The rail and home buttons carry their label as text, and applyLanguage
   rewrites textContent from data-en/data-zh, so below 1040px — where the rail
   button is shown — it measured 162px ("Sections & terms") and pushed the bar
   past the viewport. They are icon-only below 1040px: font-size 0 hides the
   rewritten label and ::before supplies the glyph. aria-label is unaffected. */
/* NB: body.ib-lesson button{font:inherit} is (0,1,2) and beats a bare class
   selector, so these are qualified with the body class or they do nothing. */
@media (max-width: 1039px) {
  body.ib-lesson .ib-top__btn--rail, body.ib-lesson .ib-top__btn--home {
    font-size: 0; gap: 0;
  }
  body.ib-lesson .ib-top__btn--rail::before { content: '\2630'; font-size: 1.05rem; }
  body.ib-lesson .ib-top__btn--home::before  { content: '\25F1'; font-size: 1.05rem; }
}

/* the breadcrumb is navigation, so it needs a real tap target */
.ib-crumb__link {
  min-height: 40px; padding: .3rem .1rem;
  display: inline-flex; align-items: center;
}

/* ── tap targets inside the study guide ──────────────────────────────────── */
/* The guide reuses the course page's own content, including the shared
   knowledge.css kit (.kv-seg, .kv-tools) and the workbook-reference controls.
   Those were sized for a mouse: the model's Concise/Full segments measured
   35px, its tool buttons 38px, the reference link 20px and its preview 32px
   on a phone. Scoped to this page so knowledge.css and the textbook are
   untouched. */
@media (max-width: 620px) {
  .ib-guide .kv-seg button,
  .ib-guide .kv-tools button { min-height: 40px; padding-block: .4rem; }
  .ib-guide .workbook-reference a,
  .ib-guide .workbook-reference-preview {
    display: inline-flex; align-items: center; min-height: 40px;
  }
}

/* ═══ IB SEHS interactive models ═════════════════════════════════════
   Copied VERBATIM from ib-sehs-learn.html's inline <style>. Every rule
   styles a shape inside .ib-model (ns-* neuron and anatomy, an-*
   anatomy, the legend swatches and the animation keyframes). Without
   them the study guide renders every model as solid black blocks —
   an SVG with no fill rule falls back to fill:black. Same failure mode
   as the .plate rules that were once missing from these pages. */
/* ═══ palette the model drawings expect ═══════════════════════════════════
   The models paint with fill:var(--gold), var(--blue2) and font-family
   var(--serif). Those came from the hand-inlined palette this page used to
   carry; since it now loads the site's real theme they resolve to NOTHING,
   and a var() with no value falls back to the SVG initial value — which is
   black. That is why hormone circles and organ outlines rendered as solid
   black shapes here while the same model is correct on the course page.
   Values are copied verbatim from ib-sehs-learn.html so the models look
   identical in both places. */
:root {
  --gold: #d7a829;
  --blue2: #2563a8;
  --accent: var(--gold);
  --border: var(--line, #d5e0e9);
  --serif: var(--font, Georgia, "Songti SC", serif);
  --d: 0s;                       /* the flow animations stagger with this */
}
body.dark {
  --gold: #efd17c;
  --blue2: #8fb7e8;
}

/* ═══ IB SEHS interactive models (ib-sehs-models.js) ══════════════════ */
.ib-model{max-width:620px;margin:.15rem auto .35rem;padding-top:.1rem}
.ib-model .ib-head{display:flex;justify-content:flex-end;margin:-.1rem 0 .5rem}
.ib-model .kv-lab{display:block;margin-top:.55rem}
.ib-model .ibm-q{display:block;font-weight:700;color:var(--text)}
.ib-model .kv-lab b{color:var(--accent);font-weight:800;margin-left:.25rem;font-variant-numeric:tabular-nums}
.ib-model .kv-lab input[type=range]{display:block;width:100%}
.ib-model .kv-svg text{font-size:13px}
.ib-model .kv-svg text.small{font-size:11px}
.ib-model .kv-svg .axis{stroke:var(--border2,#C6D1DD);stroke-width:1}
.ib-model .kv-svg .gl{stroke:var(--text3);stroke-width:1;stroke-dasharray:4 4;opacity:.5}
.ib-model .kv-svg .window{fill:var(--c1);opacity:.15}
.ib-model .kv-svg .window.red{fill:var(--c0);opacity:.13}
.ib-model .kv-svg .bar{fill:var(--c2);opacity:.35}
.ib-model .kv-svg .bar.on{fill:var(--c2);opacity:.95}
.ib-model .kv-svg .chron{fill:none;stroke:var(--text3);stroke-width:2.5;stroke-dasharray:5 4}
.ib-model .kv-svg .curve{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.ib-model .kv-svg .curve.a{stroke:var(--c2)}
.ib-model .kv-svg .curve.b{stroke:var(--c0)}
.ib-model .kv-svg .curve.thin{stroke-width:2;opacity:.45}
.ib-model .kv-svg .traj{fill:none;stroke:var(--c2);stroke-width:3;stroke-linejoin:round}
.ib-model .kv-svg .apex{fill:var(--c2);stroke:var(--surface);stroke-width:2}
.ib-model .kv-svg .work{fill:var(--c1);opacity:.22}
.ib-model .kv-svg .vx{stroke:var(--c0);stroke-width:2;stroke-dasharray:5 4}
.ib-model .kv-svg .vy{stroke:var(--c1);stroke-width:2;stroke-dasharray:5 4}
.ib-model .kv-svg .plane{fill:color-mix(in srgb,var(--text) 5%,transparent);stroke:var(--border2,#C6D1DD);stroke-width:1;stroke-dasharray:5 4}
.ib-model .kv-svg .ax{stroke:var(--accent);stroke-width:2;stroke-dasharray:6 4}
.ib-model .kv-svg .sk{fill:color-mix(in srgb,var(--text) 20%,transparent);stroke:var(--text3);stroke-width:2}
.ib-model .kv-svg .body{stroke:var(--text3);stroke-width:3.5;stroke-linecap:round;fill:none}
.ib-model .kv-svg .body.on{stroke:var(--accent);stroke-width:5}
.ib-model .kv-svg .body.thin{stroke-width:2.5}
.ib-model .kv-svg .joint{fill:var(--surface2,#EEF2F7);stroke:var(--text3);stroke-width:1.5}
.ib-model .portrait{display:block;margin:0 auto;height:262px}
.ib-model .kv-gon{width:190px;max-width:100%}
.ib-model .kv-bar i.red{background:var(--red)}
.ib-model .kv-bar i.gold{background:var(--c1)}
.ib-model .kv-bar i.blue{background:var(--c2)}
.ib-model .kv-dot.red{background:var(--c0)}
.ib-model .kv-dot.gold{background:var(--c1)}
.ib-model .kv-dot.blue{background:var(--c2)}
.ibm-band{position:relative;height:16px;border-radius:99px;margin:.55rem 0 .25rem;background:color-mix(in srgb,var(--text) 10%,transparent)}
.ibm-band i{position:absolute;top:0;bottom:0;opacity:.3}
.ibm-band .z1{left:0;width:25%;background:var(--green)}
.ibm-band .z2{left:25%;width:37.5%;background:var(--amber)}
.ibm-band .z3{left:62.5%;width:37.5%;background:var(--red)}
.ibm-band u{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--text);text-decoration:none}
.ibm-scale{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text3)}
.ibm-key{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.82rem;color:var(--text2);margin-top:.4rem}
.ibm-key span{display:inline-flex;align-items:center;gap:.35rem}
.ibm-key i{width:10px;height:10px;border-radius:3px;display:inline-block}
@media (max-width:640px){.ib-model .kv-seg button{min-height:40px}.ib-model .kv-lab input[type=range]{height:40px}.ib-model .kv-tools button{min-height:40px}.ib-model .kv-path button{min-height:44px}}

.ib-model .kv-zone.on{outline:2px solid var(--accent);outline-offset:-2px}
.ib-model .kv-ends{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.4rem}
.ib-model .kv-ends p{margin:.25rem 0 0;color:var(--text2);font-size:.88rem}
.ib-model .kv-svg .q1{fill:color-mix(in srgb,var(--green) 11%,transparent)}
.ib-model .kv-svg .q2{fill:color-mix(in srgb,var(--c1) 12%,transparent)}
.ib-model .kv-svg .marker{fill:var(--c2);stroke:var(--surface);stroke-width:3;transition:cx .2s,cy .2s}
.ib-model .kv-svg .marker.ok{fill:var(--green)}
.ib-model .kv-svg .marker.risk{fill:var(--c0)}
.ib-model .kv-svg .perf{fill:none;stroke:var(--c0);stroke-width:2.5;stroke-dasharray:5 4}
.ib-model .kv-svg .cone{fill:var(--c2);opacity:.16;stroke:var(--c2);stroke-width:1.5;transition:opacity .25s}
.ib-model .kv-svg .cone.narrow{fill:var(--c1);stroke:var(--c1);opacity:.26}
.ib-model .kv-svg .wide{fill:var(--c2);opacity:.10;transition:opacity .25s}
.ib-model .kv-svg .goal{fill:none;stroke:var(--text3);stroke-width:2}
.ib-model .kv-svg .post{stroke:var(--text3);stroke-width:3;stroke-linecap:round}
.ib-model .kv-svg .spot{fill:var(--text3)}
.ib-model .kv-svg .joint{fill:var(--c0);transition:opacity .25s}
.ib-model .kv-svg .target{fill:none;stroke:var(--c0);stroke-width:2.5;transition:opacity .25s}
.ib-model .kv-svg .zone{fill:color-mix(in srgb,var(--text) 4%,transparent)}
.ib-model .kv-svg .target-zone{fill:var(--green);opacity:.15}
.ib-model .kv-svg .dot{fill:var(--text3);transition:fill .2s}
.ib-model .kv-svg .dot.on{fill:var(--c0)}
.ib-model .kv-svg .chosen{fill:none;stroke:var(--c0);stroke-width:2.5}
@media (max-width:640px){.ib-model .kv-ends{grid-template-columns:1fr}}

.ib-model .ib-practices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin-top:.4rem}
.ib-model .ib-practices button{font:inherit;font-size:.85rem;line-height:1.3;text-align:left;padding:.55rem .7rem;border-radius:11px;cursor:pointer;
  color:var(--text);background:var(--surface);border:1px solid var(--border2,#C6D1DD);transition:background .2s,border-color .2s}
.ib-model .ib-practices button:hover{border-color:var(--accent)}
.ib-model .ib-practices button.on{background:color-mix(in srgb,var(--accent) 13%,var(--surface));border-color:var(--accent);font-weight:700}
.ib-model .kv-climate{display:grid;gap:.4rem;margin:.6rem 0 .2rem}
.ib-model .kv-cl-row{display:grid;grid-template-columns:8.5rem 1fr 3.4rem;align-items:center;gap:.7rem;font-size:.88rem}
.ib-model .kv-cl-row b{font-variant-numeric:tabular-nums;text-align:right}
.ib-model .kv-svg .eu{fill:var(--green);opacity:.16}
.ib-model .kv-svg .di{fill:var(--c0);opacity:.14}
.ib-model .kv-chain{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.4rem}
.ib-model .kv-chain-i{font-size:.78rem;font-weight:700;padding:.3rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--text)}
.ib-model .kv-chain b{color:var(--text3)}
.ib-model .ib-target{display:grid;gap:.3rem;margin-top:.4rem}
.ib-model .ib-target-row{display:grid;grid-template-columns:1.4rem 9.5rem 1fr;align-items:center;gap:.6rem}
.ib-model .ib-target-l{font-weight:900;color:var(--accent);font-size:.9rem}
.ib-model .ib-target-b{display:flex;gap:.25rem}
.ib-model .ib-target-b button{font:inherit;font-size:.76rem;font-weight:700;padding:.32rem .6rem;border-radius:8px;cursor:pointer;
  color:var(--text2);background:var(--surface);border:1px solid var(--border2,#C6D1DD)}
.ib-model .ib-target-b button.on{background:var(--green);border-color:transparent;color:#fff}
.ib-model .ib-target-r{font-size:.78rem;color:var(--text3)}
.ib-model .ib-ch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin-top:.4rem}
.ib-model .ib-ch button{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;width:100%;text-align:left;
  font:inherit;padding:.55rem .7rem;border-radius:11px;cursor:pointer;color:var(--text);
  background:var(--surface);border:1px solid var(--border2,#C6D1DD);transition:background .2s,border-color .2s}
.ib-model .ib-ch button b{font-size:.86rem}
.ib-model .ib-ch button span{font-size:.78rem;color:var(--text3);line-height:1.35}
.ib-model .ib-ch button.on{background:color-mix(in srgb,var(--accent) 13%,var(--surface));border-color:var(--accent)}
.ib-model .ib-ch button.on span{color:var(--text2)}
.ib-model .ib-cats{display:grid;gap:.4rem;margin-top:.4rem}
.ib-model .ib-cats button{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;width:100%;text-align:left;
  font:inherit;padding:.6rem .75rem;border-radius:12px;cursor:pointer;color:var(--text);
  background:var(--surface);border:1px solid var(--border2,#C6D1DD)}
.ib-model .ib-cats button b{font-size:.88rem}
.ib-model .ib-cats button span{font-size:.8rem;color:var(--text3)}
.ib-model .ib-cats button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
@media (max-width:640px){.ib-model .ib-practices,.ib-model .ib-ch{grid-template-columns:1fr}
  .ib-model .ib-ch button{min-height:40px}
  .ib-model .ib-target-row{grid-template-columns:1.2rem 1fr}
  .ib-model .ib-target-r{display:none}
  .ib-model .kv-cl-row{grid-template-columns:6.5rem 1fr 3rem}
  .ib-model .ib-practices button,.ib-model .ib-cats button,.ib-model .ib-target-b button{min-height:40px}}
/* ══ A.1.1 model ══ */
/* ══ A.1.1 Communication systems — shape-based model ═══════════════════ */
.ib-model .a11-wrap{display:grid;gap:.9rem}
.ib-model .a11-panel{border:1px solid var(--border2,#C6D1DD);border-radius:14px;padding:.7rem .8rem .8rem;background:color-mix(in srgb,var(--text) 2.5%,var(--surface))}
.ib-model .a11-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-bottom:.45rem}
.ib-model .a11-hd b{font-size:.95rem;color:var(--accent)}
.ib-model .a11-hd span{font-size:.78rem;color:var(--text3)}
.ib-model .a11-leg{margin-top:.5rem;gap:.3rem .85rem;font-size:.8rem}
.ib-model .a11-leg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.3rem;vertical-align:-1px;border:1px solid rgba(0,0,0,.18)}
.ib-model .ns-l1{background:var(--c2)}.ib-model .ns-l2{background:var(--c1)}
.ib-model .ns-l3{background:var(--c0)}.ib-model .ns-l4{background:color-mix(in srgb,var(--c0) 34%,var(--surface))}
.ib-model .ns-l5{background:var(--green)}.ib-model .ns-l6{background:color-mix(in srgb,var(--red) 40%,var(--surface))}
.ib-model .ns-l7{background:color-mix(in srgb,var(--red) 78%,var(--surface))}.ib-model .ns-l8{background:var(--gold)}
.ib-model .ns-l9{background:var(--green)}
/* ── A · nerve ── */
.ib-model .ns-term{fill:var(--c2);stroke:var(--c2);stroke-width:2;opacity:.9}
.ib-model .ns-axon{fill:var(--c2);opacity:.75}
.ib-model .ns-ves{fill:color-mix(in srgb,var(--c1) 26%,var(--surface));stroke:var(--c1);stroke-width:1.6;
  transform-box:fill-box;transform-origin:50% 50%;
  animation:ns-pulse 2.6s var(--d,0s) infinite ease-in-out}
.ib-model .ns-vesdot{fill:var(--c1)}
.ib-model .ns-cleft{fill:color-mix(in srgb,var(--text) 5%,var(--surface));stroke:var(--border2,#C6D1DD);stroke-width:1;stroke-dasharray:4 3}
.ib-model .ns-nt{fill:var(--c1);stroke:var(--surface);stroke-width:1;
  transform-box:fill-box;transform-origin:50% 50%;animation:ns-fall 1.9s var(--d,0s) infinite linear}
.ib-model .ns-fibre{fill:color-mix(in srgb,var(--c0) 20%,var(--surface));stroke:var(--c0);stroke-width:2.4}
.ib-model .ns-stria{fill:color-mix(in srgb,var(--c0) 52%,var(--surface))}
.ib-model .ns-nuc{fill:var(--surface);stroke:var(--c0);stroke-width:1.8}
.ib-model .ns-brace{fill:none;stroke:var(--text3);stroke-width:1.4}
.ib-model .ns-sub{fill:var(--c0);opacity:.85;transition:transform .3s,opacity .3s}
.ib-model .ns-sub.open{transform:translateY(-3px);opacity:1}
.ib-model .ns-pore{fill:var(--surface);stroke:var(--c0);stroke-width:1.4}
.ib-model .ns-lead{stroke:var(--text3);stroke-width:1}
.ib-model .ns-spark{stroke:var(--c2);stroke-width:3;stroke-linecap:round}
/* ── B · hormone ── */
.ib-model .ns-lumen{fill:color-mix(in srgb,var(--green) 20%,var(--surface));stroke:var(--green);stroke-width:2}
.ib-model .ns-secrecyte{fill:color-mix(in srgb,var(--green) 34%,var(--surface));stroke:var(--green);stroke-width:1.5}
.ib-model .ns-adventitia{fill:color-mix(in srgb,var(--red) 20%,var(--surface));stroke:color-mix(in srgb,var(--red) 45%,var(--surface));stroke-width:1}
.ib-model .ns-media{fill:color-mix(in srgb,var(--red) 38%,var(--surface))}
.ib-model .ns-endothelium{fill:color-mix(in srgb,var(--red) 78%,var(--surface))}
.ib-model .ns-lumen2{fill:color-mix(in srgb,var(--red) 12%,var(--surface));stroke:var(--red);stroke-width:1.2}
.ib-model .ns-rbc{fill:var(--red);transform-box:fill-box;transform-origin:50% 50%;
  animation:ns-flow 4.4s var(--d,0s) infinite linear}
.ib-model .ns-rbc-in{fill:color-mix(in srgb,var(--surface) 62%,var(--red))}
.ib-model .ns-hor{fill:var(--gold);transform-box:fill-box;transform-origin:50% 50%;
  animation:ns-flow 4.4s var(--d,0s) infinite linear}
.ib-model .ns-hor.dock{animation:none;fill:var(--gold);stroke:var(--surface);stroke-width:1.4}
.ib-model .ns-hor.drift{animation:ns-wander 3.4s var(--d,0s) infinite ease-in-out}
.ib-model .ns-cleft{fill:color-mix(in srgb,var(--text) 8%,var(--surface))}
.ib-model .ns-rbc-in{fill:color-mix(in srgb,var(--surface) 78%,var(--red))}
.ib-model .ns-key{fill:color-mix(in srgb,var(--text) 26%,var(--surface));stroke:var(--text3);stroke-width:1.4}
.ib-model .ns-key.fit{fill:var(--gold);stroke:var(--gold)}
.ib-model .ns-cell{fill:color-mix(in srgb,var(--text) 5%,var(--surface));stroke:var(--text3);stroke-width:1.6}
.ib-model .ns-cell.hit{stroke:var(--green);stroke-width:2.4;fill:color-mix(in srgb,var(--green) 12%,var(--surface))}
.ib-model .ns-cnuc{fill:color-mix(in srgb,var(--text) 20%,var(--surface))}
.ib-model .ns-lock{fill:color-mix(in srgb,var(--text) 22%,var(--surface));stroke:var(--text3);stroke-width:1.2}
.ib-model .ns-lock.fit{fill:var(--gold);stroke:var(--gold)}
/* ── arrows: the clear one the old model lacked ── */
.ib-model .ns-arrow{stroke:var(--text);stroke-width:2.6;fill:none;stroke-linecap:round}
.ib-model .ns-head{fill:var(--text)}
/* ── C · clock ── */
.ib-model .ns-ncurve{fill:none;stroke:var(--c0);stroke-width:2.6;stroke-linecap:round}
.ib-model .ns-hcurve{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round}
.ib-model .ns-ndot{fill:var(--c0);stroke:var(--surface);stroke-width:2}
.ib-model .ns-hdot{fill:var(--gold);stroke:var(--surface);stroke-width:2}
.ib-model .kv-svg .nsn-h{fill:var(--c0);font-weight:800}
.ib-model .kv-svg .nsn-n{fill:var(--gold);font-weight:800}
.ib-model .ns-nl{background:var(--c0)}
.ib-model .ns-hl{background:var(--gold)}
.ib-model .a11-bar{margin-top:.6rem}
.ib-model .a11-n{background:var(--c0)}
.ib-model .a11-h{background:var(--gold)}
@keyframes ns-fall{0%{transform:translateY(-14px);opacity:0}22%{opacity:1}100%{transform:translateY(16px);opacity:0}}
@keyframes ns-flow{0%{transform:translateX(-26px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(26px);opacity:0}}
@keyframes ns-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes ns-wander{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(20px);opacity:1}}
@media (prefers-reduced-motion:reduce){.ib-model .ns-ves,.ib-model .ns-nt,.ib-model .ns-rbc,.ib-model .ns-hor{animation:none}}
@media (max-width:640px){.ib-model .a11-panel{padding:.55rem .5rem .65rem}.ib-model .a11-hd b{font-size:.9rem}}

/* ══ A.1.1 scannable prose + Learn it your way ══ */
/* ══ A.1.1 · scannable prose: bullets + highlighted key terms ══════════ */
.ib-model .deep-walk .deep-bullets,.native-section .deep-walk .deep-bullets{margin:.2rem 0;padding-left:1.15rem}
.native-section .deep-walk .deep-bullets li{margin:.34rem 0;line-height:1.62}
.native-section .deep-walk b.kt{color:var(--blue2);font-weight:800;background:color-mix(in srgb,var(--gold) 22%,transparent);
  padding:.05em .3em;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
body.dark .native-section .deep-walk b.kt{color:var(--gold)}
/* ══ A.1.1 · Learn it your way — the textbook panel, per section ═══════ */
.ib-learn{margin:.2rem 0 .5rem;padding:.85rem .9rem .95rem;border:1px solid var(--border2,#C6D1DD);border-radius:16px;
  background:color-mix(in srgb,var(--blue2) 5%,var(--surface))}
.ib-learn-hd{display:flex;align-items:flex-start;gap:.7rem;flex-wrap:wrap}
.ib-learn-hd h4{flex:1 1 12rem;min-width:0;margin:0;font-size:1.02rem;font-family:var(--serif)}
.ib-learn-hd p{flex:1 1 100%;margin:.15rem 0 0;font-size:.8rem;color:var(--text3);line-height:1.5}
.ib-learn-prog{display:flex;align-items:center;gap:.6rem;margin:.7rem 0 .6rem}
.ib-learn-bar{flex:1;height:7px;border-radius:99px;background:var(--surface2);overflow:hidden}
.ib-learn-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue2),var(--green));transition:width .3s}
.ib-learn-prog span{font-size:.76rem;color:var(--text3);white-space:nowrap}
.ib-learn-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;margin-bottom:.6rem}
.ib-learn-tabs button{font:inherit;font-size:.84rem;font-weight:700;padding:.5rem .4rem;border-radius:10px;cursor:pointer;
  color:var(--text2);background:var(--surface);border:1px solid var(--border2,#C6D1DD);transition:background .2s,border-color .2s}
.ib-learn-tabs button.on{background:color-mix(in srgb,var(--blue2) 12%,var(--surface));border-color:var(--blue2);color:var(--blue2)}
.ib-learn-pane[hidden]{display:none}
/* key-term chips */
.ib-kt{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .55rem}
.ib-kt button{font:inherit;font-size:.78rem;font-weight:700;padding:.34rem .6rem;border-radius:999px;cursor:pointer;
  color:var(--text);background:color-mix(in srgb,var(--gold) 20%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 42%,transparent)}
.ib-kt button:hover{border-color:var(--gold)}
.ib-kt button.on{background:var(--gold);color:#10213a}
/* the flip card, reusing the textbook's own .kn-fc / .kn-card */
.ib-learn .kn-fc{max-width:none}
.ib-learn .kn-card{min-height:170px}
.ib-learn .kn-face{padding:1rem}
.ib-learn .kn-fc-bar{gap:.35rem;flex-wrap:wrap;justify-content:center}
.ib-learn .kv-btn{min-height:38px}
.ib-learn .kn-fc-bar{margin-top:.5rem}
.ib-qc{counter-reset:q;display:grid;gap:.5rem;margin:.2rem 0}
.ib-qc-item{padding:.6rem .7rem;border:1px solid var(--border2,#C6D1DD);border-radius:11px;background:var(--surface);font-size:.87rem;line-height:1.55}
.ib-qc-item summary{cursor:pointer;font-weight:700;color:var(--text)}
.ib-qc-item summary::marker{color:var(--accent)}
.ib-qc-item p{margin:.25rem 0}
.ib-qc-item .ib-ans{margin-top:.4rem;padding-top:.4rem;border-top:1px dashed var(--border2,#C6D1DD);color:var(--green);font-weight:700}
.ib-map{display:flex;flex-wrap:wrap;gap:.35rem}
.ib-map button{font:inherit;font-size:.76rem;font-weight:700;padding:.34rem .55rem;border-radius:9px;cursor:pointer;
  color:var(--text2);background:var(--surface);border:1px solid var(--border2,#C6D1DD)}
.ib-map button.done{background:color-mix(in srgb,var(--green) 14%,var(--surface));border-color:var(--green);color:var(--green)}
.ib-map button.on{border-color:var(--blue2);color:var(--blue2)}
@media (max-width:640px){.ib-learn{padding:.7rem .65rem .8rem}.ib-learn-tabs button{min-height:40px;font-size:.8rem}
  .ib-kt button{min-height:34px}.native-section .deep-walk .deep-bullets li{margin:.4rem 0}}

/* ══ anatomy shapes ══ */
/* ══ anatomy shapes — one library, reused by every model ═══════════════ */
.ib-model .an-white{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--text3);stroke-width:1.5}
.ib-model .an-grey{fill:color-mix(in srgb,var(--c2) 40%,var(--surface));stroke:var(--c2);stroke-width:1.2}
.ib-model .an-canal{fill:var(--surface);stroke:var(--c2);stroke-width:1.2}
.ib-model .an-cordline{stroke:var(--text3);stroke-width:7;stroke-linecap:round}
.ib-model .an-brain{fill:color-mix(in srgb,var(--c2) 30%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-fold{fill:none;stroke:var(--c2);stroke-width:1.4;opacity:.7}
.ib-model .an-stem{fill:none;stroke:var(--c2);stroke-width:5;stroke-linecap:round}
.ib-model .an-muscle{fill:color-mix(in srgb,var(--c0) 24%,var(--surface));stroke:var(--c0);stroke-width:1.8}
.ib-model .an-muscle.hot{fill:color-mix(in srgb,var(--c0) 52%,var(--surface));stroke-width:2.6}
.ib-model .an-tendon{fill:color-mix(in srgb,var(--text) 22%,var(--surface))}
.ib-model .an-cap{fill:color-mix(in srgb,var(--gold) 26%,var(--surface));stroke:var(--gold);stroke-width:1.6}
.ib-model .an-intra{stroke:var(--c0);stroke-width:2;stroke-linecap:round}
.ib-model .an-ia{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round}
.ib-model .an-axon{stroke:var(--text3);stroke-width:2.4;stroke-linecap:round}
.ib-model .an-axon.on{stroke:var(--c0);stroke-width:3.4}
.ib-model .an-axon.dim{opacity:.35}
.ib-model .an-myelin{fill:color-mix(in srgb,var(--text) 26%,var(--surface));stroke:var(--text3);stroke-width:.8}
.ib-model .an-axon.on + .an-myelin,.ib-model .an-myelin{opacity:.9}
.ib-model .an-heart{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:1.8}
.ib-model .an-heart.hot{fill:color-mix(in srgb,var(--c0) 55%,var(--surface));stroke-width:2.6}
.ib-model .an-chamber{fill:color-mix(in srgb,var(--c0) 60%,var(--surface))}
.ib-model .an-chamber.r{fill:color-mix(in srgb,var(--c2) 60%,var(--surface))}
.ib-model .an-septum{stroke:var(--c0);stroke-width:2}
.ib-model .an-aorta{fill:none;stroke:var(--c0);stroke-width:4;stroke-linecap:round}
.ib-model .an-vena{fill:none;stroke:var(--c2);stroke-width:4;stroke-linecap:round}
.ib-model .an-kidney{fill:color-mix(in srgb,var(--gold) 30%,var(--surface));stroke:var(--gold);stroke-width:1.8}
.ib-model .an-kidney.hot{fill:color-mix(in srgb,var(--gold) 60%,var(--surface));stroke-width:2.6}
.ib-model .an-adrenal{fill:color-mix(in srgb,var(--green) 45%,var(--surface));stroke:var(--green);stroke-width:1.6}
.ib-model .an-adrenal.hot{fill:var(--green);stroke-width:2.6}
.ib-model .an-hilum,.ib-model .an-ureter,.ib-model .an-vessel{fill:none;stroke:var(--text3);stroke-width:3;stroke-linecap:round}
.ib-model .an-vessel.r{stroke:var(--c0)}.ib-model .an-vessel.b{stroke:var(--c2)}
.ib-model .an-ureter{stroke-width:2.6}
.ib-model .an-hypothal{fill:color-mix(in srgb,var(--c2) 34%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-stalk{stroke:var(--c2);stroke-width:3;stroke-linecap:round}
.ib-model .an-pituit{fill:color-mix(in srgb,var(--green) 46%,var(--surface));stroke:var(--green);stroke-width:1.6}
.ib-model .an-lungs,.ib-model .an-lung{fill:color-mix(in srgb,var(--c2) 26%,var(--surface));stroke:var(--c2);stroke-width:1.7}
.ib-model .an-trachea{fill:none;stroke:var(--c2);stroke-width:3.4;stroke-linecap:round}
.ib-model .an-liver{fill:color-mix(in srgb,var(--c0) 22%,var(--surface));stroke:var(--c0);stroke-width:1.8}
.ib-model .an-liver.hot{fill:color-mix(in srgb,var(--c0) 52%,var(--surface));stroke-width:2.6}
.ib-model .an-horm{fill:var(--gold);stroke:var(--surface);stroke-width:1.6}
.ib-model .an-epi{fill:color-mix(in srgb,var(--gold) 30%,var(--surface));stroke:var(--gold);stroke-width:1.2}
.ib-model .an-derm{fill:color-mix(in srgb,var(--c0) 12%,var(--surface));stroke:var(--c0);stroke-width:1.2}
.ib-model .an-duct{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round}
.ib-model .an-coil{fill:none;stroke:var(--gold);stroke-width:5}
.ib-model .an-lumen2{fill:var(--surface);stroke:var(--gold);stroke-width:1.2}
.ib-model .an-cuboid{fill:color-mix(in srgb,var(--gold) 55%,var(--surface));stroke:var(--gold);stroke-width:.8}
.ib-model .an-drop{fill:var(--c2);opacity:.85}
/* flow arrows and loops */
.ib-model .an-flow{fill:none;stroke:var(--text3);stroke-width:2.4;stroke-linecap:round}
.ib-model .an-flow.good{stroke:var(--green);stroke-width:3}
.ib-model .an-flow.bad{stroke:var(--c0);stroke-width:3}
.ib-model .an-flow.neg{stroke:var(--green);stroke-width:3}
.ib-model .an-flow.pos{stroke:var(--c0);stroke-width:3}
.ib-model .an-link{fill:none;stroke:var(--text3);stroke-width:2;opacity:.3}
.ib-model .an-link.on{stroke:var(--c0);stroke-width:3;opacity:1}
.ib-model .an-dim{stroke:var(--text3);stroke-width:2;fill:none}
.ib-model .an-head{fill:var(--text3)}
.ib-model .an-head,.ib-model .an-flow.bad + marker path{fill:var(--text3)}
.ib-model .an-var{fill:color-mix(in srgb,var(--blue2,#2563a8) 20%,var(--surface));stroke:var(--blue2,#2563a8);stroke-width:2}
.ib-model .an-box{fill:color-mix(in srgb,var(--c2) 18%,var(--surface));stroke:var(--c2);stroke-width:1.8;rx:10}
.ib-model .an-effector{fill:color-mix(in srgb,var(--green) 30%,var(--surface));stroke:var(--green);stroke-width:1.8}
.ib-model .an-glass{fill:color-mix(in srgb,var(--c2) 24%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-food{fill:color-mix(in srgb,var(--gold) 30%,var(--surface));stroke:var(--gold);stroke-width:1.6}
.ib-model .an-body{fill:color-mix(in srgb,var(--text) 12%,var(--surface));stroke:var(--text3);stroke-width:1.6}
.ib-model .an-timer{stroke:var(--c0);stroke-width:3;fill:none}
.ib-model .an-lab-neg{fill:var(--green);font-weight:800}
.ib-model .an-lab-pos{fill:var(--c0);font-weight:800}
/* legend swatches */
.ib-model .an-l-grey{background:var(--c2)}.ib-model .an-l-white{background:color-mix(in srgb,var(--text) 22%,var(--surface))}
.ib-model .an-l-muscle{background:var(--c0)}.ib-model .an-l-organ{background:var(--gold)}
.ib-model .an-l-on{background:var(--c0)}.ib-model .an-l-off{background:color-mix(in srgb,var(--text) 16%,var(--surface))}
.ib-model .an-l-ia{background:var(--gold)}.ib-model .an-l-neg{background:var(--green)}
.ib-model .an-l-pos{background:var(--c0)}.ib-model .an-l-hot{background:var(--green)}
.ib-model .an-l-good{background:var(--green)}.ib-model .an-l-bad{background:var(--c0)}
.ib-model .an-l-gland{background:var(--gold)}
.ib-model .an-b-neg{background:var(--green)}.ib-model .an-b-pos{background:var(--c0)}
.ib-model .an-b-in{background:var(--green)}.ib-model .an-b-out{background:var(--c0)}
.ib-model .an-b-vol{background:var(--c2)}.ib-model .an-b-sv{background:var(--green)}.ib-model .an-b-hr{background:var(--c0)}
.ib-model .kv-meters{display:grid;gap:.35rem;margin:.6rem 0 .2rem}
@media (prefers-reduced-motion:reduce){.ib-model .an-ia{animation:none}}

/* ══ anatomy shapes (D2) ══ */
/* ══ anatomy shapes — one library, reused by every model ═══════════════ */
.ib-model .an-white{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--text3);stroke-width:1.5}
.ib-model .an-grey{fill:color-mix(in srgb,var(--c2) 40%,var(--surface));stroke:var(--c2);stroke-width:1.2}
.ib-model .an-canal{fill:var(--surface);stroke:var(--c2);stroke-width:1.2}
.ib-model .an-cordline{stroke:var(--text3);stroke-width:7;stroke-linecap:round}
.ib-model .an-brain{fill:color-mix(in srgb,var(--c2) 30%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-fold{fill:none;stroke:var(--c2);stroke-width:1.4;opacity:.7}
.ib-model .an-stem{fill:none;stroke:var(--c2);stroke-width:5;stroke-linecap:round}
.ib-model .an-muscle{fill:color-mix(in srgb,var(--c0) 24%,var(--surface));stroke:var(--c0);stroke-width:1.8}
.ib-model .an-muscle.hot{fill:color-mix(in srgb,var(--c0) 52%,var(--surface));stroke-width:2.6}
.ib-model .an-tendon{fill:color-mix(in srgb,var(--text) 22%,var(--surface))}
.ib-model .an-cap{fill:color-mix(in srgb,var(--gold) 26%,var(--surface));stroke:var(--gold);stroke-width:1.6}
.ib-model .an-intra{stroke:var(--c0);stroke-width:2;stroke-linecap:round}
.ib-model .an-ia{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round}
.ib-model .an-axon{stroke:var(--text3);stroke-width:2.4;stroke-linecap:round}
.ib-model .an-axon.on{stroke:var(--c0);stroke-width:3.4}
.ib-model .an-axon.dim{opacity:.35}
.ib-model .an-myelin{fill:color-mix(in srgb,var(--text) 26%,var(--surface));stroke:var(--text3);stroke-width:.8}
.ib-model .an-axon.on + .an-myelin,.ib-model .an-myelin{opacity:.9}
.ib-model .an-heart{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:1.8}
.ib-model .an-heart.hot{fill:color-mix(in srgb,var(--c0) 55%,var(--surface));stroke-width:2.6}
.ib-model .an-chamber{fill:color-mix(in srgb,var(--c0) 60%,var(--surface))}
.ib-model .an-chamber.r{fill:color-mix(in srgb,var(--c2) 60%,var(--surface))}
.ib-model .an-septum{stroke:var(--c0);stroke-width:2}
.ib-model .an-aorta{fill:none;stroke:var(--c0);stroke-width:4;stroke-linecap:round}
.ib-model .an-vena{fill:none;stroke:var(--c2);stroke-width:4;stroke-linecap:round}
.ib-model .an-kidney{fill:color-mix(in srgb,var(--gold) 30%,var(--surface));stroke:var(--gold);stroke-width:1.8}
.ib-model .an-kidney.hot{fill:color-mix(in srgb,var(--gold) 60%,var(--surface));stroke-width:2.6}
.ib-model .an-adrenal{fill:color-mix(in srgb,var(--green) 45%,var(--surface));stroke:var(--green);stroke-width:1.6}
.ib-model .an-adrenal.hot{fill:var(--green);stroke-width:2.6}
.ib-model .an-hilum,.ib-model .an-ureter,.ib-model .an-vessel{fill:none;stroke:var(--text3);stroke-width:3;stroke-linecap:round}
.ib-model .an-vessel.r{stroke:var(--c0)}.ib-model .an-vessel.b{stroke:var(--c2)}
.ib-model .an-ureter{stroke-width:2.6}
.ib-model .an-hypothal{fill:color-mix(in srgb,var(--c2) 34%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-stalk{stroke:var(--c2);stroke-width:3;stroke-linecap:round}
.ib-model .an-pituit{fill:color-mix(in srgb,var(--green) 46%,var(--surface));stroke:var(--green);stroke-width:1.6}
.ib-model .an-lungs,.ib-model .an-lung{fill:color-mix(in srgb,var(--c2) 26%,var(--surface));stroke:var(--c2);stroke-width:1.7}
.ib-model .an-trachea{fill:none;stroke:var(--c2);stroke-width:3.4;stroke-linecap:round}
.ib-model .an-liver{fill:color-mix(in srgb,var(--c0) 22%,var(--surface));stroke:var(--c0);stroke-width:1.8}
.ib-model .an-liver.hot{fill:color-mix(in srgb,var(--c0) 52%,var(--surface));stroke-width:2.6}
.ib-model .an-horm{fill:var(--gold);stroke:var(--surface);stroke-width:1.6}
.ib-model .an-epi{fill:color-mix(in srgb,var(--gold) 30%,var(--surface));stroke:var(--gold);stroke-width:1.2}
.ib-model .an-derm{fill:color-mix(in srgb,var(--c0) 12%,var(--surface));stroke:var(--c0);stroke-width:1.2}
.ib-model .an-duct{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round}
.ib-model .an-coil{fill:none;stroke:var(--gold);stroke-width:5}
.ib-model .an-lumen2{fill:var(--surface);stroke:var(--gold);stroke-width:1.2}
.ib-model .an-cuboid{fill:color-mix(in srgb,var(--gold) 55%,var(--surface));stroke:var(--gold);stroke-width:.8}
.ib-model .an-drop{fill:var(--c2);opacity:.85}
/* flow arrows and loops */
.ib-model .an-flow{fill:none;stroke:var(--text3);stroke-width:2.4;stroke-linecap:round}
.ib-model .an-flow.good{stroke:var(--green);stroke-width:3}
.ib-model .an-flow.bad{stroke:var(--c0);stroke-width:3}
.ib-model .an-flow.neg{stroke:var(--green);stroke-width:3}
.ib-model .an-flow.pos{stroke:var(--c0);stroke-width:3}
.ib-model .an-link{fill:none;stroke:var(--text3);stroke-width:2;opacity:.3}
.ib-model .an-link.on{stroke:var(--c0);stroke-width:3;opacity:1}
.ib-model .an-dim{stroke:var(--text3);stroke-width:2;fill:none}
.ib-model .an-head{fill:var(--text3)}
.ib-model .an-head,.ib-model .an-flow.bad + marker path{fill:var(--text3)}
.ib-model .an-var{fill:color-mix(in srgb,var(--blue2,#2563a8) 20%,var(--surface));stroke:var(--blue2,#2563a8);stroke-width:2}
.ib-model .an-box{fill:color-mix(in srgb,var(--c2) 18%,var(--surface));stroke:var(--c2);stroke-width:1.8;rx:10}
.ib-model .an-effector{fill:color-mix(in srgb,var(--green) 30%,var(--surface));stroke:var(--green);stroke-width:1.8}
.ib-model .an-glass{fill:color-mix(in srgb,var(--c2) 24%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-food{fill:color-mix(in srgb,var(--gold) 30%,var(--surface));stroke:var(--gold);stroke-width:1.6}
.ib-model .an-body{fill:color-mix(in srgb,var(--text) 12%,var(--surface));stroke:var(--text3);stroke-width:1.6}
.ib-model .an-timer{stroke:var(--c0);stroke-width:3;fill:none}
.ib-model .an-lab-neg{fill:var(--green);font-weight:800}
.ib-model .an-lab-pos{fill:var(--c0);font-weight:800}
/* legend swatches */
.ib-model .an-l-grey{background:var(--c2)}.ib-model .an-l-white{background:color-mix(in srgb,var(--text) 22%,var(--surface))}
.ib-model .an-l-muscle{background:var(--c0)}.ib-model .an-l-organ{background:var(--gold)}
.ib-model .an-l-on{background:var(--c0)}.ib-model .an-l-off{background:color-mix(in srgb,var(--text) 16%,var(--surface))}
.ib-model .an-l-ia{background:var(--gold)}.ib-model .an-l-neg{background:var(--green)}
.ib-model .an-l-pos{background:var(--c0)}.ib-model .an-l-hot{background:var(--green)}
.ib-model .an-l-good{background:var(--green)}.ib-model .an-l-bad{background:var(--c0)}
.ib-model .an-l-gland{background:var(--gold)}
.ib-model .an-b-neg{background:var(--green)}.ib-model .an-b-pos{background:var(--c0)}
.ib-model .an-b-in{background:var(--green)}.ib-model .an-b-out{background:var(--c0)}
.ib-model .an-b-vol{background:var(--c2)}.ib-model .an-b-sv{background:var(--green)}.ib-model .an-b-hr{background:var(--c0)}
.ib-model .kv-meters{display:grid;gap:.35rem;margin:.6rem 0 .2rem}
@media (prefers-reduced-motion:reduce){.ib-model .an-ia{animation:none}}
/* ══ shapes added for batch D2 (nutrition, energy, population) ═════════ */
.ib-model .an-sugar{fill:color-mix(in srgb,var(--gold) 30%,var(--surface));stroke:var(--gold);stroke-width:2}
.ib-model .an-o{fill:var(--c2);stroke:none}
.ib-model .an-fat{fill:color-mix(in srgb,var(--c1) 45%,var(--surface));stroke:var(--c1);stroke-width:1.8}
.ib-model .an-chain{stroke:var(--c1);stroke-width:4;stroke-linecap:round}
.ib-model .an-p{fill:var(--c1)}
.ib-model .an-aa{fill:color-mix(in srgb,var(--c2) 34%,var(--surface));stroke:var(--c2);stroke-width:1.7}
.ib-model .an-bond{stroke:var(--c2);stroke-width:3;stroke-linecap:round}
.ib-model .an-gutwall{fill:none;stroke:var(--c0);stroke-width:7;stroke-linecap:round;opacity:.5}
.ib-model .an-bact{fill:var(--green)}
.ib-model .an-adenine,.ib-model .an-ribose{fill:color-mix(in srgb,var(--c2) 34%,var(--surface));stroke:var(--c2);stroke-width:1.7}
.ib-model .an-phos{fill:color-mix(in srgb,var(--c0) 32%,var(--surface));stroke:var(--c0);stroke-width:1.7}
.ib-model .an-phos.hot{fill:color-mix(in srgb,var(--c0) 62%,var(--surface));stroke-width:2.4}
.ib-model .an-plaque{fill:color-mix(in srgb,var(--c1) 70%,var(--surface));stroke:var(--c1);stroke-width:1.2}
.ib-model .an-dial{fill:color-mix(in srgb,var(--c2) 22%,var(--surface));stroke:var(--c2);stroke-width:1.8}
.ib-model .an-box2{fill:color-mix(in srgb,var(--text) 6%,var(--surface));stroke:var(--text3);stroke-width:1.6}
.ib-model .an-beam{stroke:var(--text3);stroke-width:5;stroke-linecap:round}
.ib-model .an-pan{fill:color-mix(in srgb,var(--c2) 24%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-fulcrum{fill:color-mix(in srgb,var(--text) 26%,var(--surface))}
.ib-model .an-day{fill:color-mix(in srgb,var(--text) 12%,var(--surface));stroke:var(--text3);stroke-width:1.4}
.ib-model .an-day.on{fill:color-mix(in srgb,var(--c0) 42%,var(--surface));stroke:var(--c0)}
.ib-model .an-prog{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round}
.ib-model .an-dot2{fill:var(--green);stroke:var(--surface);stroke-width:1.5}
.ib-model .an-bar{fill:color-mix(in srgb,var(--text) 8%,var(--surface));stroke:var(--text3);stroke-width:1.2}
.ib-model .an-b0{fill:var(--c0)}.ib-model .an-b1{fill:var(--c1)}.ib-model .an-b2{fill:var(--c2)}
.ib-model .an-cursor2{stroke:var(--text);stroke-width:2;stroke-dasharray:4 3}
.ib-model .an-gauge{fill:color-mix(in srgb,var(--text) 8%,var(--surface));stroke:var(--text3);stroke-width:1.2}
.ib-model .an-gauge-f{fill:var(--green)}
.ib-model .an-thresh{stroke:var(--c0);stroke-width:2.4;stroke-dasharray:4 3}
.ib-model .an-mn{fill:color-mix(in srgb,var(--text) 8%,var(--surface));stroke:var(--text3);stroke-width:1.6}
.ib-model .an-mn.on{fill:color-mix(in srgb,var(--gold) 40%,var(--surface));stroke:var(--gold);stroke-width:2.6}
.ib-model .an-mn-t{fill:var(--text);font-weight:800}
.ib-model .an-plate{fill:color-mix(in srgb,var(--text) 8%,var(--surface));stroke:var(--text3);stroke-width:1.4}
.ib-model .an-sl-car{fill:var(--c2)}.ib-model .an-sl-fat{fill:var(--c1)}
.ib-model .an-hyp{fill:none;stroke:var(--c2);stroke-width:2.4;stroke-linejoin:round}
.ib-model .an-timeline{stroke:var(--text3);stroke-width:2.4}
.ib-model .an-tick{fill:var(--c2)}
.ib-model .an-clock{fill:color-mix(in srgb,var(--text) 6%,var(--surface));stroke:var(--text3);stroke-width:2}
.ib-model .an-hand{stroke:var(--text);stroke-width:2.4;stroke-linecap:round;fill:none}
.ib-model .an-fibrebox{fill:color-mix(in srgb,var(--c0) 16%,var(--surface));stroke:var(--c0);stroke-width:1.6}
.ib-model .an-gly{fill:color-mix(in srgb,var(--text) 12%,var(--surface));stroke:var(--text3);stroke-width:1.2}
.ib-model .an-gly.on{fill:var(--c1);stroke:var(--c1)}
.ib-model .an-lead2{stroke:var(--text3);stroke-width:1}
.ib-model .an-rbc2{fill:var(--c0)}
/* legend + bar swatches for D2 */
.ib-model .an-l-car{background:var(--c2)}.ib-model .an-l-fat{background:var(--c1)}.ib-model .an-l-prot{background:var(--c0)}
.ib-model .an-l-on{background:var(--c0)}.ib-model .an-l-off{background:color-mix(in srgb,var(--text) 14%,var(--surface))}
.ib-model .an-l-bact{background:var(--green)}.ib-model .an-l-prog{background:var(--green)}
.ib-model .an-b-car{background:var(--c2)}.ib-model .an-b-fat{background:var(--c1)}.ib-model .an-b-prot{background:var(--c0)}
.ib-model .an-b-q{background:var(--c2)}.ib-model .an-b-fit{background:var(--green)}
.ib-model .an-b-bmr{background:var(--c2)}.ib-model .an-b-need{background:var(--c0)}
.ib-model .an-b-gly{background:var(--green)}.ib-model .an-b-hrv{background:var(--green)}.ib-model .an-b-perf{background:var(--c2)}
.ib-model .an-b-fe{background:var(--c0)}.ib-model .an-b-ca{background:var(--c2)}
.ib-model .an-b-na{background:var(--c1)}.ib-model .an-b-k{background:var(--green)}
.ib-model .an-mn-fe{fill:color-mix(in srgb,var(--c0) 40%,var(--surface));stroke:var(--c0)}
.ib-model .an-mn-ca{fill:color-mix(in srgb,var(--c2) 40%,var(--surface));stroke:var(--c2)}
.ib-model .an-mn-na{fill:color-mix(in srgb,var(--c1) 50%,var(--surface));stroke:var(--c1)}
.ib-model .an-mn-k{fill:color-mix(in srgb,var(--green) 40%,var(--surface));stroke:var(--green)}

/* ══ anatomy shapes (D3) ══ */
/* ══ anatomy shapes — one library, reused by every model ═══════════════ */
.ib-model .an-white{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--text3);stroke-width:1.5}
.ib-model .an-grey{fill:color-mix(in srgb,var(--c2) 40%,var(--surface));stroke:var(--c2);stroke-width:1.2}
.ib-model .an-canal{fill:var(--surface);stroke:var(--c2);stroke-width:1.2}
.ib-model .an-cordline{stroke:var(--text3);stroke-width:7;stroke-linecap:round}
.ib-model .an-brain{fill:color-mix(in srgb,var(--c2) 30%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-fold{fill:none;stroke:var(--c2);stroke-width:1.4;opacity:.7}
.ib-model .an-stem{fill:none;stroke:var(--c2);stroke-width:5;stroke-linecap:round}
.ib-model .an-muscle{fill:color-mix(in srgb,var(--c0) 24%,var(--surface));stroke:var(--c0);stroke-width:1.8}
.ib-model .an-muscle.hot{fill:color-mix(in srgb,var(--c0) 52%,var(--surface));stroke-width:2.6}
.ib-model .an-tendon{fill:color-mix(in srgb,var(--text) 22%,var(--surface))}
.ib-model .an-cap{fill:color-mix(in srgb,var(--gold) 26%,var(--surface));stroke:var(--gold);stroke-width:1.6}
.ib-model .an-intra{stroke:var(--c0);stroke-width:2;stroke-linecap:round}
.ib-model .an-ia{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round}
.ib-model .an-axon{stroke:var(--text3);stroke-width:2.4;stroke-linecap:round}
.ib-model .an-axon.on{stroke:var(--c0);stroke-width:3.4}
.ib-model .an-axon.dim{opacity:.35}
.ib-model .an-myelin{fill:color-mix(in srgb,var(--text) 26%,var(--surface));stroke:var(--text3);stroke-width:.8}
.ib-model .an-axon.on + .an-myelin,.ib-model .an-myelin{opacity:.9}
.ib-model .an-heart{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:1.8}
.ib-model .an-heart.hot{fill:color-mix(in srgb,var(--c0) 55%,var(--surface));stroke-width:2.6}
.ib-model .an-chamber{fill:color-mix(in srgb,var(--c0) 60%,var(--surface))}
.ib-model .an-chamber.r{fill:color-mix(in srgb,var(--c2) 60%,var(--surface))}
.ib-model .an-septum{stroke:var(--c0);stroke-width:2}
.ib-model .an-aorta{fill:none;stroke:var(--c0);stroke-width:4;stroke-linecap:round}
.ib-model .an-vena{fill:none;stroke:var(--c2);stroke-width:4;stroke-linecap:round}
.ib-model .an-kidney{fill:color-mix(in srgb,var(--gold) 30%,var(--surface));stroke:var(--gold);stroke-width:1.8}
.ib-model .an-kidney.hot{fill:color-mix(in srgb,var(--gold) 60%,var(--surface));stroke-width:2.6}
.ib-model .an-adrenal{fill:color-mix(in srgb,var(--green) 45%,var(--surface));stroke:var(--green);stroke-width:1.6}
.ib-model .an-adrenal.hot{fill:var(--green);stroke-width:2.6}
.ib-model .an-hilum,.ib-model .an-ureter,.ib-model .an-vessel{fill:none;stroke:var(--text3);stroke-width:3;stroke-linecap:round}
.ib-model .an-vessel.r{stroke:var(--c0)}.ib-model .an-vessel.b{stroke:var(--c2)}
.ib-model .an-ureter{stroke-width:2.6}
.ib-model .an-hypothal{fill:color-mix(in srgb,var(--c2) 34%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-stalk{stroke:var(--c2);stroke-width:3;stroke-linecap:round}
.ib-model .an-pituit{fill:color-mix(in srgb,var(--green) 46%,var(--surface));stroke:var(--green);stroke-width:1.6}
.ib-model .an-lungs,.ib-model .an-lung{fill:color-mix(in srgb,var(--c2) 26%,var(--surface));stroke:var(--c2);stroke-width:1.7}
.ib-model .an-trachea{fill:none;stroke:var(--c2);stroke-width:3.4;stroke-linecap:round}
.ib-model .an-liver{fill:color-mix(in srgb,var(--c0) 22%,var(--surface));stroke:var(--c0);stroke-width:1.8}
.ib-model .an-liver.hot{fill:color-mix(in srgb,var(--c0) 52%,var(--surface));stroke-width:2.6}
.ib-model .an-horm{fill:var(--gold);stroke:var(--surface);stroke-width:1.6}
.ib-model .an-epi{fill:color-mix(in srgb,var(--gold) 30%,var(--surface));stroke:var(--gold);stroke-width:1.2}
.ib-model .an-derm{fill:color-mix(in srgb,var(--c0) 12%,var(--surface));stroke:var(--c0);stroke-width:1.2}
.ib-model .an-duct{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round}
.ib-model .an-coil{fill:none;stroke:var(--gold);stroke-width:5}
.ib-model .an-lumen2{fill:var(--surface);stroke:var(--gold);stroke-width:1.2}
.ib-model .an-cuboid{fill:color-mix(in srgb,var(--gold) 55%,var(--surface));stroke:var(--gold);stroke-width:.8}
.ib-model .an-drop{fill:var(--c2);opacity:.85}
/* flow arrows and loops */
.ib-model .an-flow{fill:none;stroke:var(--text3);stroke-width:2.4;stroke-linecap:round}
.ib-model .an-flow.good{stroke:var(--green);stroke-width:3}
.ib-model .an-flow.bad{stroke:var(--c0);stroke-width:3}
.ib-model .an-flow.neg{stroke:var(--green);stroke-width:3}
.ib-model .an-flow.pos{stroke:var(--c0);stroke-width:3}
.ib-model .an-link{fill:none;stroke:var(--text3);stroke-width:2;opacity:.3}
.ib-model .an-link.on{stroke:var(--c0);stroke-width:3;opacity:1}
.ib-model .an-dim{stroke:var(--text3);stroke-width:2;fill:none}
.ib-model .an-head{fill:var(--text3)}
.ib-model .an-head,.ib-model .an-flow.bad + marker path{fill:var(--text3)}
.ib-model .an-var{fill:color-mix(in srgb,var(--blue2,#2563a8) 20%,var(--surface));stroke:var(--blue2,#2563a8);stroke-width:2}
.ib-model .an-box{fill:color-mix(in srgb,var(--c2) 18%,var(--surface));stroke:var(--c2);stroke-width:1.8;rx:10}
.ib-model .an-effector{fill:color-mix(in srgb,var(--green) 30%,var(--surface));stroke:var(--green);stroke-width:1.8}
.ib-model .an-glass{fill:color-mix(in srgb,var(--c2) 24%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-food{fill:color-mix(in srgb,var(--gold) 30%,var(--surface));stroke:var(--gold);stroke-width:1.6}
.ib-model .an-body{fill:color-mix(in srgb,var(--text) 12%,var(--surface));stroke:var(--text3);stroke-width:1.6}
.ib-model .an-timer{stroke:var(--c0);stroke-width:3;fill:none}
.ib-model .an-lab-neg{fill:var(--green);font-weight:800}
.ib-model .an-lab-pos{fill:var(--c0);font-weight:800}
/* legend swatches */
.ib-model .an-l-grey{background:var(--c2)}.ib-model .an-l-white{background:color-mix(in srgb,var(--text) 22%,var(--surface))}
.ib-model .an-l-muscle{background:var(--c0)}.ib-model .an-l-organ{background:var(--gold)}
.ib-model .an-l-on{background:var(--c0)}.ib-model .an-l-off{background:color-mix(in srgb,var(--text) 16%,var(--surface))}
.ib-model .an-l-ia{background:var(--gold)}.ib-model .an-l-neg{background:var(--green)}
.ib-model .an-l-pos{background:var(--c0)}.ib-model .an-l-hot{background:var(--green)}
.ib-model .an-l-good{background:var(--green)}.ib-model .an-l-bad{background:var(--c0)}
.ib-model .an-l-gland{background:var(--gold)}
.ib-model .an-b-neg{background:var(--green)}.ib-model .an-b-pos{background:var(--c0)}
.ib-model .an-b-in{background:var(--green)}.ib-model .an-b-out{background:var(--c0)}
.ib-model .an-b-vol{background:var(--c2)}.ib-model .an-b-sv{background:var(--green)}.ib-model .an-b-hr{background:var(--c0)}
.ib-model .kv-meters{display:grid;gap:.35rem;margin:.6rem 0 .2rem}
@media (prefers-reduced-motion:reduce){.ib-model .an-ia{animation:none}}
/* ══ shapes added for batch D2 (nutrition, energy, population) ═════════ */
.ib-model .an-sugar{fill:color-mix(in srgb,var(--gold) 30%,var(--surface));stroke:var(--gold);stroke-width:2}
.ib-model .an-o{fill:var(--c2);stroke:none}
.ib-model .an-fat{fill:color-mix(in srgb,var(--c1) 45%,var(--surface));stroke:var(--c1);stroke-width:1.8}
.ib-model .an-chain{stroke:var(--c1);stroke-width:4;stroke-linecap:round}
.ib-model .an-p{fill:var(--c1)}
.ib-model .an-aa{fill:color-mix(in srgb,var(--c2) 34%,var(--surface));stroke:var(--c2);stroke-width:1.7}
.ib-model .an-bond{stroke:var(--c2);stroke-width:3;stroke-linecap:round}
.ib-model .an-gutwall{fill:none;stroke:var(--c0);stroke-width:7;stroke-linecap:round;opacity:.5}
.ib-model .an-bact{fill:var(--green)}
.ib-model .an-adenine,.ib-model .an-ribose{fill:color-mix(in srgb,var(--c2) 34%,var(--surface));stroke:var(--c2);stroke-width:1.7}
.ib-model .an-phos{fill:color-mix(in srgb,var(--c0) 32%,var(--surface));stroke:var(--c0);stroke-width:1.7}
.ib-model .an-phos.hot{fill:color-mix(in srgb,var(--c0) 62%,var(--surface));stroke-width:2.4}
.ib-model .an-plaque{fill:color-mix(in srgb,var(--c1) 70%,var(--surface));stroke:var(--c1);stroke-width:1.2}
.ib-model .an-dial{fill:color-mix(in srgb,var(--c2) 22%,var(--surface));stroke:var(--c2);stroke-width:1.8}
.ib-model .an-box2{fill:color-mix(in srgb,var(--text) 6%,var(--surface));stroke:var(--text3);stroke-width:1.6}
.ib-model .an-beam{stroke:var(--text3);stroke-width:5;stroke-linecap:round}
.ib-model .an-pan{fill:color-mix(in srgb,var(--c2) 24%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-fulcrum{fill:color-mix(in srgb,var(--text) 26%,var(--surface))}
.ib-model .an-day{fill:color-mix(in srgb,var(--text) 12%,var(--surface));stroke:var(--text3);stroke-width:1.4}
.ib-model .an-day.on{fill:color-mix(in srgb,var(--c0) 42%,var(--surface));stroke:var(--c0)}
.ib-model .an-prog{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round}
.ib-model .an-dot2{fill:var(--green);stroke:var(--surface);stroke-width:1.5}
.ib-model .an-bar{fill:color-mix(in srgb,var(--text) 8%,var(--surface));stroke:var(--text3);stroke-width:1.2}
.ib-model .an-b0{fill:var(--c0)}.ib-model .an-b1{fill:var(--c1)}.ib-model .an-b2{fill:var(--c2)}
.ib-model .an-cursor2{stroke:var(--text);stroke-width:2;stroke-dasharray:4 3}
.ib-model .an-gauge{fill:color-mix(in srgb,var(--text) 8%,var(--surface));stroke:var(--text3);stroke-width:1.2}
.ib-model .an-gauge-f{fill:var(--green)}
.ib-model .an-thresh{stroke:var(--c0);stroke-width:2.4;stroke-dasharray:4 3}
.ib-model .an-mn{fill:color-mix(in srgb,var(--text) 8%,var(--surface));stroke:var(--text3);stroke-width:1.6}
.ib-model .an-mn.on{fill:color-mix(in srgb,var(--gold) 40%,var(--surface));stroke:var(--gold);stroke-width:2.6}
.ib-model .an-mn-t{fill:var(--text);font-weight:800}
.ib-model .an-plate{fill:color-mix(in srgb,var(--text) 8%,var(--surface));stroke:var(--text3);stroke-width:1.4}
.ib-model .an-sl-car{fill:var(--c2)}.ib-model .an-sl-fat{fill:var(--c1)}
.ib-model .an-hyp{fill:none;stroke:var(--c2);stroke-width:2.4;stroke-linejoin:round}
.ib-model .an-timeline{stroke:var(--text3);stroke-width:2.4}
.ib-model .an-tick{fill:var(--c2)}
.ib-model .an-clock{fill:color-mix(in srgb,var(--text) 6%,var(--surface));stroke:var(--text3);stroke-width:2}
.ib-model .an-hand{stroke:var(--text);stroke-width:2.4;stroke-linecap:round;fill:none}
.ib-model .an-fibrebox{fill:color-mix(in srgb,var(--c0) 16%,var(--surface));stroke:var(--c0);stroke-width:1.6}
.ib-model .an-gly{fill:color-mix(in srgb,var(--text) 12%,var(--surface));stroke:var(--text3);stroke-width:1.2}
.ib-model .an-gly.on{fill:var(--c1);stroke:var(--c1)}
.ib-model .an-lead2{stroke:var(--text3);stroke-width:1}
.ib-model .an-rbc2{fill:var(--c0)}
/* legend + bar swatches for D2 */
.ib-model .an-l-car{background:var(--c2)}.ib-model .an-l-fat{background:var(--c1)}.ib-model .an-l-prot{background:var(--c0)}
.ib-model .an-l-on{background:var(--c0)}.ib-model .an-l-off{background:color-mix(in srgb,var(--text) 14%,var(--surface))}
.ib-model .an-l-bact{background:var(--green)}.ib-model .an-l-prog{background:var(--green)}
.ib-model .an-b-car{background:var(--c2)}.ib-model .an-b-fat{background:var(--c1)}.ib-model .an-b-prot{background:var(--c0)}
.ib-model .an-b-q{background:var(--c2)}.ib-model .an-b-fit{background:var(--green)}
.ib-model .an-b-bmr{background:var(--c2)}.ib-model .an-b-need{background:var(--c0)}
.ib-model .an-b-gly{background:var(--green)}.ib-model .an-b-hrv{background:var(--green)}.ib-model .an-b-perf{background:var(--c2)}
.ib-model .an-b-fe{background:var(--c0)}.ib-model .an-b-ca{background:var(--c2)}
.ib-model .an-b-na{background:var(--c1)}.ib-model .an-b-k{background:var(--green)}
.ib-model .an-mn-fe{fill:color-mix(in srgb,var(--c0) 40%,var(--surface));stroke:var(--c0)}
.ib-model .an-mn-ca{fill:color-mix(in srgb,var(--c2) 40%,var(--surface));stroke:var(--c2)}
.ib-model .an-mn-na{fill:color-mix(in srgb,var(--c1) 50%,var(--surface));stroke:var(--c1)}
.ib-model .an-mn-k{fill:color-mix(in srgb,var(--green) 40%,var(--surface));stroke:var(--green)}
/* ══ shapes added for batch D3 (skeleton, joints, muscle, levers) ═════ */
.ib-model .an-bone{fill:color-mix(in srgb,var(--gold) 34%,var(--surface));stroke:var(--gold);stroke-width:1.6}
.ib-model .an-marrow{fill:color-mix(in srgb,var(--c0) 30%,var(--surface))}
.ib-model .an-capsule{fill:none;stroke:var(--c2);stroke-width:3;stroke-dasharray:6 4}
.ib-model .an-cart{fill:color-mix(in srgb,var(--c2) 46%,var(--surface));stroke:var(--c2);stroke-width:1.4}
.ib-model .an-cavity{fill:color-mix(in srgb,var(--green) 26%,var(--surface));stroke:var(--green);stroke-width:1.2}
.ib-model .an-lig{stroke:var(--c0);stroke-width:3.4;stroke-linecap:round}
.ib-model .an-bursa{fill:color-mix(in srgb,var(--green) 40%,var(--surface));stroke:var(--green);stroke-width:1.4}
.ib-model .an-jc{fill:color-mix(in srgb,var(--c2) 30%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-jcball{fill:color-mix(in srgb,var(--c2) 46%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-osteo{fill:color-mix(in srgb,var(--gold) 26%,var(--surface));stroke:var(--gold);stroke-width:2}
.ib-model .an-lam{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.75}
.ib-model .an-cartbox{fill:color-mix(in srgb,var(--c2) 20%,var(--surface));stroke:var(--c2);stroke-width:1.6}
.ib-model .an-chondro{fill:color-mix(in srgb,var(--c2) 50%,var(--surface));stroke:var(--c2);stroke-width:1.4}
.ib-model .an-tendbox{fill:color-mix(in srgb,var(--c0) 18%,var(--surface));stroke:var(--c0);stroke-width:1.6}
.ib-model .an-colla{stroke:var(--c0);stroke-width:3;stroke-linecap:round}
.ib-model .an-fib-i{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:1.7}
.ib-model .an-fib-ii{fill:color-mix(in srgb,var(--c1) 40%,var(--surface));stroke:var(--c1);stroke-width:1.7}
.ib-model .an-fib-ix{fill:color-mix(in srgb,var(--c2) 38%,var(--surface));stroke:var(--c2);stroke-width:1.7}
.ib-model .an-fib-off{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--text3);stroke-width:1.4;stroke-dasharray:4 3}
.ib-model .an-mito{fill:var(--green);opacity:.9}
.ib-model .an-mito.off{fill:color-mix(in srgb,var(--text) 22%,var(--surface));opacity:.6}
.ib-model .an-actin{stroke:var(--c2);stroke-width:2;stroke-linecap:round}
.ib-model .an-myosin{fill:color-mix(in srgb,var(--c0) 50%,var(--surface));stroke:var(--c0);stroke-width:1.4}
.ib-model .an-zline{stroke:var(--text);stroke-width:2.6;stroke-linecap:round}
.ib-model .an-arm{stroke:var(--text);stroke-width:5;stroke-linecap:round}
.ib-model .an-eff{stroke:var(--c2);stroke-width:3;stroke-linecap:round;fill:none}
.ib-model .an-load{fill:color-mix(in srgb,var(--c0) 40%,var(--surface));stroke:var(--c0);stroke-width:1.4}
.ib-model .an-effdot{fill:var(--c2)}
.ib-model .an-fulcrum2{fill:color-mix(in srgb,var(--text) 26%,var(--surface));stroke:var(--text3);stroke-width:1.2}
.ib-model .an-comdot{fill:var(--c0);stroke:var(--surface);stroke-width:2}
.ib-model .an-base{fill:color-mix(in srgb,var(--text) 24%,var(--surface))}
.ib-model .an-block{fill:color-mix(in srgb,var(--c2) 34%,var(--surface));stroke:var(--c2);stroke-width:1.8}
.ib-model .an-arrow2{stroke:var(--text);stroke-width:2.6;fill:none;stroke-linecap:round}
.ib-model .an-arc{fill:none;stroke:var(--text3);stroke-width:8;stroke-linecap:round;opacity:.45}
.ib-model .an-arcused{fill:none;stroke:var(--c0);stroke-width:8;stroke-linecap:round}
.ib-model .an-meas{stroke:var(--c2);stroke-width:1.8;stroke-dasharray:4 3}
.ib-model .an-meas2{stroke:var(--text3);stroke-width:1.4;fill:none}
.ib-model .an-bench{fill:color-mix(in srgb,var(--text) 22%,var(--surface));stroke:var(--text3);stroke-width:1.4}
.ib-model .an-l-off{background:color-mix(in srgb,var(--text) 14%,var(--surface))}
.ib-model .an-b-risk{background:var(--c0)}


/* ══ shapes added for batch D4: movement — every connection carries a signal ══ */
/* ══ movement: connectors carry a visible signal ═══════════════════════ */
.ib-model .an-conn{fill:none;stroke:var(--text3);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:7 6;animation:an-march 1.1s linear infinite}
.ib-model .an-conn.hot{stroke:var(--c0);stroke-width:3.2}
.ib-model .an-conn.off{stroke:var(--text3);opacity:.3}
.ib-model .an-sig{fill:var(--gold);stroke:var(--surface);stroke-width:1.4}
.ib-model .an-sig.hot{fill:var(--c0)}
.ib-model .an-sig.calm{fill:var(--green)}
@keyframes an-march{to{stroke-dashoffset:-26}}
/* a heart actually beats */
.ib-model .an-heart,.ib-model .an-chamber{transform-box:fill-box;transform-origin:50% 55%;
  animation:an-pulsebeat 1.05s ease-in-out infinite}
.ib-model .an-heart.hot{animation-duration:.62s}
@keyframes an-pulsebeat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}26%{transform:scale(1)}}
/* an organ that is working shows it */
.ib-model .an-liver.hot,.ib-model .an-kidney.hot{transform-box:fill-box;transform-origin:50% 50%;
  animation:an-work 2.2s ease-in-out infinite}
@keyframes an-work{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
/* a firing synapse */
.ib-model .an-ves{transform-box:fill-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){
  .ib-model .an-conn,.ib-model .an-heart,.ib-model .an-chamber,
  .ib-model .an-liver.hot,.ib-model .an-kidney.hot,.ib-model .an-sig{animation:none!important}
}
.ib-model .an-pulm{fill:none;stroke:var(--c2);stroke-width:4.4;stroke-linecap:round}
.ib-model .an-pulvein{fill:none;stroke:var(--c2);stroke-width:3.4;stroke-linecap:round;opacity:.7}
.ib-model .an-chamber.l{fill:color-mix(in srgb,var(--c0) 72%,var(--surface))}
.ib-model .an-septum{stroke:var(--surface);stroke-width:1.8;opacity:.8}
/* the one fixed point every connection leaves from */
.ib-model .an-hub{fill:var(--c0);stroke:var(--surface);stroke-width:2.2}

/* the arrowhead that ends the return leg, so its direction is unmistakable */
.ib-model .an-arrowhead{fill:var(--green);stroke:none}

/* ══ D4: the last eleven models, plus arrowheads and the circulation ══ */
.ib-model .an-arrowhead{fill:#2e9e5b;stroke:none}
.ib-model .an-circ{fill:color-mix(in srgb,var(--c2) 16%,var(--surface));stroke:var(--c2);stroke-width:1.8;stroke-dasharray:5 4}
.ib-model .an-conn.ret-neg{stroke:#2e9e5b;stroke-width:2.6}
.ib-model .an-head{fill:var(--c0);stroke:none}
.ib-model .an-head.up{fill:#2e9e5b}
.ib-model .an-head.down{fill:#c0392b}
.ib-model .an-head.hold{fill:var(--gold,#b8860b)}
.ib-model .an-head.off{fill:var(--text3);opacity:.5}
.ib-model .an-conn.up{stroke:#2e9e5b}
.ib-model .an-conn.down{stroke:#c0392b}
.ib-model .an-conn.hold{stroke:var(--gold,#b8860b)}
.ib-model .an-water{fill:color-mix(in srgb,var(--c2) 13%,var(--surface));stroke:none}
.ib-model .an-air{fill:color-mix(in srgb,var(--c1) 7%,var(--surface));stroke:none}
.ib-model .an-body{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:2.2}
.ib-model .an-ball{fill:color-mix(in srgb,var(--c0) 30%,var(--surface));stroke:var(--c0);stroke-width:2}
.ib-model .an-seam{stroke:var(--c0);stroke-width:2;stroke-dasharray:4 3;fill:none}
.ib-model .an-wedge{fill:color-mix(in srgb,var(--gold,#b8860b) 34%,transparent);stroke:var(--gold,#b8860b);stroke-width:1.4}
.ib-model .an-node{fill:var(--surface);stroke:var(--text3);stroke-width:2.2;transform-box:fill-box;transform-origin:50% 50%}
.ib-model .an-node.on{fill:var(--c0);stroke:var(--c0);animation:an-node-pulse 1.4s ease-in-out infinite}
@keyframes an-node-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ib-model .an-tier{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--surface);stroke-width:1.6}
.ib-model .an-tier.on{fill:var(--c0)}
.ib-model .an-l-up{background:#2e9e5b}
.ib-model .an-l-down{background:#c0392b}
.ib-model .an-l-hold{background:var(--gold,#b8860b)}
.ib-model .an-l-node{background:var(--surface);border:2px solid var(--text3)}
.ib-model .an-l-nodeon{background:var(--c0);border-color:var(--c0)}
.ib-model .an-l-tier{background:color-mix(in srgb,var(--text) 10%,var(--surface));border:1px solid var(--surface)}
.ib-model .an-l-tieron{background:var(--c0)}
.ib-model .an-l-ball{background:color-mix(in srgb,var(--c0) 30%,var(--surface))}
.ib-model .an-b-fb{background:#2e9e5b}
.ib-model .an-b-w{background:var(--c0)}
.ib-model .an-b-drag{background:var(--gold,#b8860b)}
.ib-model .an-b-str{background:var(--green)}
.ib-model .an-b-bias{background:var(--c0)}
@media (prefers-reduced-motion:reduce){.ib-model .an-node.on{animation:none}}

/* ══ D4 part B/C classes ══ */
/* ══ D4 part B/C classes ══════════════════════════════════════════════ */
.ib-model .an-rung{fill:color-mix(in srgb,var(--text) 8%,var(--surface));stroke:var(--text3);stroke-width:1.4}
.ib-model .an-rung.on{fill:color-mix(in srgb,var(--c0) 34%,var(--surface));stroke:var(--c0)}
.ib-model .an-l-rung{background:color-mix(in srgb,var(--text) 8%,var(--surface))}
.ib-model .an-l-rungon{background:var(--c0)}
.ib-model .an-barrier{fill:color-mix(in srgb,var(--c0) 12%,var(--surface));stroke:var(--c0);stroke-width:1.2;stroke-dasharray:4 3}
.ib-model .an-risk{opacity:.3}
.ib-model .an-risk.i{fill:var(--c2)}
.ib-model .an-risk.e{fill:var(--gold,#b8860b)}
.ib-model .an-overlap{fill:var(--c0);opacity:.62;transform-box:fill-box;transform-origin:50% 50%;
  animation:an-over 2.1s ease-in-out infinite}
@keyframes an-over{0%,100%{opacity:.5}50%{opacity:.78}}
.ib-model .an-l-ri{background:var(--c2)}
.ib-model .an-l-re{background:var(--gold,#b8860b)}
.ib-model .an-l-risky{background:var(--c0)}
.ib-model .an-b-risk{background:var(--c0)}
.ib-model .an-loadbar{fill:var(--c2)}
.ib-model .an-loadbar.over{fill:var(--c0)}
.ib-model .an-beat.over{fill:none;stroke:var(--c0);stroke-width:2;
  animation:an-ring 1.5s ease-out infinite}
@keyframes an-ring{0%{opacity:.9}100%{opacity:0}}
.ib-model .an-grid{stroke:var(--border);stroke-width:.8}
.ib-model .an-l-safe{background:var(--green)}
.ib-model .an-l-unsafe{background:var(--c0)}
.ib-model .an-b-over{background:var(--c0)}
.ib-model .an-tend{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:2}
.ib-model .an-lig{fill:color-mix(in srgb,var(--c2) 40%,var(--surface));stroke:var(--c2);stroke-width:2.2}
.ib-model .an-recbar{fill:color-mix(in srgb,var(--text) 12%,var(--surface))}
.ib-model .an-recbar.on{fill:var(--c0)}
.ib-model .an-b-tol{background:var(--c0)}
.ib-model .an-b-rec{background:var(--c2)}
.ib-model .an-layer{fill:color-mix(in srgb,var(--text) 9%,var(--surface));stroke:var(--text3);stroke-width:1.2}
.ib-model .an-layer.on{fill:var(--c0);stroke:var(--c0)}
.ib-model .an-riskbar{fill:var(--border)}
.ib-model .an-riskfill{fill:var(--c0);transition:y .3s ease,height .3s ease}
.ib-model .an-b-left{background:var(--c0)}
.ib-model .an-letter{fill:color-mix(in srgb,var(--text) 9%,var(--surface));stroke:var(--text3);stroke-width:1.4}
.ib-model .an-letter.on{fill:var(--c0);stroke:var(--c0)}
.ib-model .an-phase{opacity:.55}
.ib-model .an-curve{fill:none;stroke:var(--c2);stroke-width:2.6;stroke-linecap:round}
.ib-model .an-b-str{background:var(--c2)}
.ib-model .an-step{fill:color-mix(in srgb,var(--text) 8%,var(--surface));stroke:var(--text3);stroke-width:1.4}
.ib-model .an-step.on{fill:color-mix(in srgb,var(--c0) 34%,var(--surface));stroke:var(--c0)}
.ib-model .an-gate{stroke:var(--c0);stroke-width:3.4;stroke-linecap:round}
.ib-model .an-gate.open{stroke:var(--green)}
@media (prefers-reduced-motion:reduce){.ib-model .an-overlap,.ib-model .an-beat.over{animation:none}}

/* ══ D4: the last eleven models, plus arrowheads and the circulation ══ */
.ib-model .an-arrowhead{fill:#2e9e5b;stroke:none}
.ib-model .an-circ{fill:color-mix(in srgb,var(--c2) 16%,var(--surface));stroke:var(--c2);stroke-width:1.8;stroke-dasharray:5 4}
.ib-model .an-conn.ret-neg{stroke:#2e9e5b;stroke-width:2.6}
.ib-model .an-head{fill:var(--c0);stroke:none}
.ib-model .an-head.up{fill:#2e9e5b}
.ib-model .an-head.down{fill:#c0392b}
.ib-model .an-head.hold{fill:var(--gold,#b8860b)}
.ib-model .an-head.off{fill:var(--text3);opacity:.5}
.ib-model .an-conn.up{stroke:#2e9e5b}
.ib-model .an-conn.down{stroke:#c0392b}
.ib-model .an-conn.hold{stroke:var(--gold,#b8860b)}
.ib-model .an-water{fill:color-mix(in srgb,var(--c2) 13%,var(--surface));stroke:none}
.ib-model .an-air{fill:color-mix(in srgb,var(--c1) 7%,var(--surface));stroke:none}
.ib-model .an-body{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:2.2}
.ib-model .an-ball{fill:color-mix(in srgb,var(--c0) 30%,var(--surface));stroke:var(--c0);stroke-width:2}
.ib-model .an-seam{stroke:var(--c0);stroke-width:2;stroke-dasharray:4 3;fill:none}
.ib-model .an-wedge{fill:color-mix(in srgb,var(--gold,#b8860b) 34%,transparent);stroke:var(--gold,#b8860b);stroke-width:1.4}
.ib-model .an-node{fill:var(--surface);stroke:var(--text3);stroke-width:2.2;transform-box:fill-box;transform-origin:50% 50%}
.ib-model .an-node.on{fill:var(--c0);stroke:var(--c0);animation:an-node-pulse 1.4s ease-in-out infinite}
@keyframes an-node-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ib-model .an-tier{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--surface);stroke-width:1.6}
.ib-model .an-tier.on{fill:var(--c0)}
.ib-model .an-l-up{background:#2e9e5b}
.ib-model .an-l-down{background:#c0392b}
.ib-model .an-l-hold{background:var(--gold,#b8860b)}
.ib-model .an-l-node{background:var(--surface);border:2px solid var(--text3)}
.ib-model .an-l-nodeon{background:var(--c0);border-color:var(--c0)}
.ib-model .an-l-tier{background:color-mix(in srgb,var(--text) 10%,var(--surface));border:1px solid var(--surface)}
.ib-model .an-l-tieron{background:var(--c0)}
.ib-model .an-l-ball{background:color-mix(in srgb,var(--c0) 30%,var(--surface))}
.ib-model .an-b-fb{background:#2e9e5b}
.ib-model .an-b-w{background:var(--c0)}
.ib-model .an-b-drag{background:var(--gold,#b8860b)}
.ib-model .an-b-str{background:var(--green)}
.ib-model .an-b-bias{background:var(--c0)}
@media (prefers-reduced-motion:reduce){.ib-model .an-node.on{animation:none}}
/* every model label gets a surface-coloured halo, so even a tight label stays
   readable where it passes a shape edge instead of dissolving into it */
.ib-model svg text{ paint-order:stroke; stroke:var(--surface); stroke-width:2.6px; stroke-linejoin:round }

/* ══ D4: the last eleven models, plus arrowheads and the circulation ══ */
.ib-model .an-arrowhead{fill:#2e9e5b;stroke:none}
.ib-model .an-circ{fill:color-mix(in srgb,var(--c2) 16%,var(--surface));stroke:var(--c2);stroke-width:1.8;stroke-dasharray:5 4}
.ib-model .an-conn.ret-neg{stroke:#2e9e5b;stroke-width:2.6}
.ib-model .an-head{fill:var(--c0);stroke:none}
.ib-model .an-head.up{fill:#2e9e5b}
.ib-model .an-head.down{fill:#c0392b}
.ib-model .an-head.hold{fill:var(--gold,#b8860b)}
.ib-model .an-head.off{fill:var(--text3);opacity:.5}
.ib-model .an-conn.up{stroke:#2e9e5b}
.ib-model .an-conn.down{stroke:#c0392b}
.ib-model .an-conn.hold{stroke:var(--gold,#b8860b)}
.ib-model .an-water{fill:color-mix(in srgb,var(--c2) 13%,var(--surface));stroke:none}
.ib-model .an-air{fill:color-mix(in srgb,var(--c1) 7%,var(--surface));stroke:none}
.ib-model .an-body{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:2.2}
.ib-model .an-ball{fill:color-mix(in srgb,var(--c0) 30%,var(--surface));stroke:var(--c0);stroke-width:2}
.ib-model .an-seam{stroke:var(--c0);stroke-width:2;stroke-dasharray:4 3;fill:none}
.ib-model .an-wedge{fill:color-mix(in srgb,var(--gold,#b8860b) 34%,transparent);stroke:var(--gold,#b8860b);stroke-width:1.4}
.ib-model .an-node{fill:var(--surface);stroke:var(--text3);stroke-width:2.2;transform-box:fill-box;transform-origin:50% 50%}
.ib-model .an-node.on{fill:var(--c0);stroke:var(--c0);animation:an-node-pulse 1.4s ease-in-out infinite}
@keyframes an-node-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ib-model .an-tier{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--surface);stroke-width:1.6}
.ib-model .an-tier.on{fill:var(--c0)}
.ib-model .an-l-up{background:#2e9e5b}
.ib-model .an-l-down{background:#c0392b}
.ib-model .an-l-hold{background:var(--gold,#b8860b)}
.ib-model .an-l-node{background:var(--surface);border:2px solid var(--text3)}
.ib-model .an-l-nodeon{background:var(--c0);border-color:var(--c0)}
.ib-model .an-l-tier{background:color-mix(in srgb,var(--text) 10%,var(--surface));border:1px solid var(--surface)}
.ib-model .an-l-tieron{background:var(--c0)}
.ib-model .an-l-ball{background:color-mix(in srgb,var(--c0) 30%,var(--surface))}
.ib-model .an-b-fb{background:#2e9e5b}
.ib-model .an-b-w{background:var(--c0)}
.ib-model .an-b-drag{background:var(--gold,#b8860b)}
.ib-model .an-b-str{background:var(--green)}
.ib-model .an-b-bias{background:var(--c0)}
@media (prefers-reduced-motion:reduce){.ib-model .an-node.on{animation:none}}
/* every model label gets a surface-coloured halo, so even a tight label stays
   readable where it passes a shape edge instead of dissolving into it */
.ib-model svg text{ paint-order:stroke; stroke:var(--surface); stroke-width:2.6px; stroke-linejoin:round }
/* the generic sweep: every plain connector line marches so its direction reads */
.ib-model .an-walk{fill:none;stroke-dasharray:6 6;animation:an-march 1.25s linear infinite}
.ib-model .kv-cursor{animation:an-cursor-blink 1.8s ease-in-out infinite}
@keyframes an-cursor-blink{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.ib-model .an-walk,.ib-model .kv-cursor{animation:none}}

/* ══ D4: the last eleven models, plus arrowheads and the circulation ══ */
.ib-model .an-arrowhead{fill:#2e9e5b;stroke:none}
.ib-model .an-circ{fill:color-mix(in srgb,var(--c2) 16%,var(--surface));stroke:var(--c2);stroke-width:1.8;stroke-dasharray:5 4}
.ib-model .an-conn.ret-neg{stroke:#2e9e5b;stroke-width:2.6}
.ib-model .an-head{fill:var(--c0);stroke:none}
.ib-model .an-head.up{fill:#2e9e5b}
.ib-model .an-head.down{fill:#c0392b}
.ib-model .an-head.hold{fill:var(--gold,#b8860b)}
.ib-model .an-head.off{fill:var(--text3);opacity:.5}
.ib-model .an-conn.up{stroke:#2e9e5b}
.ib-model .an-conn.down{stroke:#c0392b}
.ib-model .an-conn.hold{stroke:var(--gold,#b8860b)}
.ib-model .an-water{fill:color-mix(in srgb,var(--c2) 13%,var(--surface));stroke:none}
.ib-model .an-air{fill:color-mix(in srgb,var(--c1) 7%,var(--surface));stroke:none}
.ib-model .an-body{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:2.2}
.ib-model .an-ball{fill:color-mix(in srgb,var(--c0) 30%,var(--surface));stroke:var(--c0);stroke-width:2}
.ib-model .an-seam{stroke:var(--c0);stroke-width:2;stroke-dasharray:4 3;fill:none}
.ib-model .an-wedge{fill:color-mix(in srgb,var(--gold,#b8860b) 34%,transparent);stroke:var(--gold,#b8860b);stroke-width:1.4}
.ib-model .an-node{fill:var(--surface);stroke:var(--text3);stroke-width:2.2;transform-box:fill-box;transform-origin:50% 50%}
.ib-model .an-node.on{fill:var(--c0);stroke:var(--c0);animation:an-node-pulse 1.4s ease-in-out infinite}
@keyframes an-node-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ib-model .an-tier{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--surface);stroke-width:1.6}
.ib-model .an-tier.on{fill:var(--c0)}
.ib-model .an-l-up{background:#2e9e5b}
.ib-model .an-l-down{background:#c0392b}
.ib-model .an-l-hold{background:var(--gold,#b8860b)}
.ib-model .an-l-node{background:var(--surface);border:2px solid var(--text3)}
.ib-model .an-l-nodeon{background:var(--c0);border-color:var(--c0)}
.ib-model .an-l-tier{background:color-mix(in srgb,var(--text) 10%,var(--surface));border:1px solid var(--surface)}
.ib-model .an-l-tieron{background:var(--c0)}
.ib-model .an-l-ball{background:color-mix(in srgb,var(--c0) 30%,var(--surface))}
.ib-model .an-b-fb{background:#2e9e5b}
.ib-model .an-b-w{background:var(--c0)}
.ib-model .an-b-drag{background:var(--gold,#b8860b)}
.ib-model .an-b-str{background:var(--green)}
.ib-model .an-b-bias{background:var(--c0)}
@media (prefers-reduced-motion:reduce){.ib-model .an-node.on{animation:none}}
/* every model label gets a surface-coloured halo, so even a tight label stays
   readable where it passes a shape edge instead of dissolving into it */
.ib-model svg text{ paint-order:stroke; stroke:var(--surface); stroke-width:2.6px; stroke-linejoin:round }
/* the generic sweep: every plain connector line marches so its direction reads */
.ib-model .an-walk{fill:none;stroke-dasharray:6 6;animation:an-march 1.25s linear infinite}
.ib-model .kv-cursor{animation:an-cursor-blink 1.8s ease-in-out infinite}
@keyframes an-cursor-blink{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.ib-model .an-walk,.ib-model .kv-cursor{animation:none}}
.ib-model .an-meas2.capline{stroke:var(--c0);stroke-width:2.2;stroke-dasharray:8 5}

/* ══ D4: the last eleven models, plus arrowheads and the circulation ══ */
.ib-model .an-arrowhead{fill:#2e9e5b;stroke:none}
.ib-model .an-circ{fill:color-mix(in srgb,var(--c2) 16%,var(--surface));stroke:var(--c2);stroke-width:1.8;stroke-dasharray:5 4}
.ib-model .an-conn.ret-neg{stroke:#2e9e5b;stroke-width:2.6}
.ib-model .an-head{fill:var(--c0);stroke:none}
.ib-model .an-head.up{fill:#2e9e5b}
.ib-model .an-head.down{fill:#c0392b}
.ib-model .an-head.hold{fill:var(--gold,#b8860b)}
.ib-model .an-head.off{fill:var(--text3);opacity:.5}
.ib-model .an-conn.up{stroke:#2e9e5b}
.ib-model .an-conn.down{stroke:#c0392b}
.ib-model .an-conn.hold{stroke:var(--gold,#b8860b)}
.ib-model .an-water{fill:color-mix(in srgb,var(--c2) 13%,var(--surface));stroke:none}
.ib-model .an-air{fill:color-mix(in srgb,var(--c1) 7%,var(--surface));stroke:none}
.ib-model .an-body{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:2.2}
.ib-model .an-ball{fill:color-mix(in srgb,var(--c0) 30%,var(--surface));stroke:var(--c0);stroke-width:2}
.ib-model .an-seam{stroke:var(--c0);stroke-width:2;stroke-dasharray:4 3;fill:none}
.ib-model .an-wedge{fill:color-mix(in srgb,var(--gold,#b8860b) 34%,transparent);stroke:var(--gold,#b8860b);stroke-width:1.4}
.ib-model .an-node{fill:var(--surface);stroke:var(--text3);stroke-width:2.2;transform-box:fill-box;transform-origin:50% 50%}
.ib-model .an-node.on{fill:var(--c0);stroke:var(--c0);animation:an-node-pulse 1.4s ease-in-out infinite}
@keyframes an-node-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ib-model .an-tier{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--surface);stroke-width:1.6}
.ib-model .an-tier.on{fill:var(--c0)}
.ib-model .an-l-up{background:#2e9e5b}
.ib-model .an-l-down{background:#c0392b}
.ib-model .an-l-hold{background:var(--gold,#b8860b)}
.ib-model .an-l-node{background:var(--surface);border:2px solid var(--text3)}
.ib-model .an-l-nodeon{background:var(--c0);border-color:var(--c0)}
.ib-model .an-l-tier{background:color-mix(in srgb,var(--text) 10%,var(--surface));border:1px solid var(--surface)}
.ib-model .an-l-tieron{background:var(--c0)}
.ib-model .an-l-ball{background:color-mix(in srgb,var(--c0) 30%,var(--surface))}
.ib-model .an-b-fb{background:#2e9e5b}
.ib-model .an-b-w{background:var(--c0)}
.ib-model .an-b-drag{background:var(--gold,#b8860b)}
.ib-model .an-b-str{background:var(--green)}
.ib-model .an-b-bias{background:var(--c0)}
@media (prefers-reduced-motion:reduce){.ib-model .an-node.on{animation:none}}
/* every model label gets a surface-coloured halo, so even a tight label stays
   readable where it passes a shape edge instead of dissolving into it */
.ib-model svg text{ paint-order:stroke; stroke:var(--surface); stroke-width:2.6px; stroke-linejoin:round }
/* the generic sweep: every plain connector line marches so its direction reads */
.ib-model .an-walk{fill:none;stroke-dasharray:6 6;animation:an-march 1.25s linear infinite}
.ib-model .kv-cursor{animation:an-cursor-blink 1.8s ease-in-out infinite}
@keyframes an-cursor-blink{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.ib-model .an-walk,.ib-model .kv-cursor{animation:none}}
.ib-model .an-meas2.capline{stroke:var(--c0);stroke-width:2.2;stroke-dasharray:8 5}
/* a short leader line, so a label standing off from its shape is not floating */
.ib-model .an-lead{fill:none;stroke:var(--text3);stroke-width:1.2;stroke-dasharray:2 2;opacity:.75}

/* ══ D4: the last eleven models, plus arrowheads and the circulation ══ */
.ib-model .an-arrowhead{fill:#2e9e5b;stroke:none}
.ib-model .an-circ{fill:color-mix(in srgb,var(--c2) 16%,var(--surface));stroke:var(--c2);stroke-width:1.8;stroke-dasharray:5 4}
.ib-model .an-conn.ret-neg{stroke:#2e9e5b;stroke-width:2.6}
.ib-model .an-head{fill:var(--c0);stroke:none}
.ib-model .an-head.up{fill:#2e9e5b}
.ib-model .an-head.down{fill:#c0392b}
.ib-model .an-head.hold{fill:var(--gold,#b8860b)}
.ib-model .an-head.off{fill:var(--text3);opacity:.5}
.ib-model .an-conn.up{stroke:#2e9e5b}
.ib-model .an-conn.down{stroke:#c0392b}
.ib-model .an-conn.hold{stroke:var(--gold,#b8860b)}
.ib-model .an-water{fill:color-mix(in srgb,var(--c2) 13%,var(--surface));stroke:none}
.ib-model .an-air{fill:color-mix(in srgb,var(--c1) 7%,var(--surface));stroke:none}
.ib-model .an-body{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:2.2}
.ib-model .an-ball{fill:color-mix(in srgb,var(--c0) 30%,var(--surface));stroke:var(--c0);stroke-width:2}
.ib-model .an-seam{stroke:var(--c0);stroke-width:2;stroke-dasharray:4 3;fill:none}
.ib-model .an-wedge{fill:color-mix(in srgb,var(--gold,#b8860b) 34%,transparent);stroke:var(--gold,#b8860b);stroke-width:1.4}
.ib-model .an-node{fill:var(--surface);stroke:var(--text3);stroke-width:2.2;transform-box:fill-box;transform-origin:50% 50%}
.ib-model .an-node.on{fill:var(--c0);stroke:var(--c0);animation:an-node-pulse 1.4s ease-in-out infinite}
@keyframes an-node-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ib-model .an-tier{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--surface);stroke-width:1.6}
.ib-model .an-tier.on{fill:var(--c0)}
.ib-model .an-l-up{background:#2e9e5b}
.ib-model .an-l-down{background:#c0392b}
.ib-model .an-l-hold{background:var(--gold,#b8860b)}
.ib-model .an-l-node{background:var(--surface);border:2px solid var(--text3)}
.ib-model .an-l-nodeon{background:var(--c0);border-color:var(--c0)}
.ib-model .an-l-tier{background:color-mix(in srgb,var(--text) 10%,var(--surface));border:1px solid var(--surface)}
.ib-model .an-l-tieron{background:var(--c0)}
.ib-model .an-l-ball{background:color-mix(in srgb,var(--c0) 30%,var(--surface))}
.ib-model .an-b-fb{background:#2e9e5b}
.ib-model .an-b-w{background:var(--c0)}
.ib-model .an-b-drag{background:var(--gold,#b8860b)}
.ib-model .an-b-str{background:var(--green)}
.ib-model .an-b-bias{background:var(--c0)}
@media (prefers-reduced-motion:reduce){.ib-model .an-node.on{animation:none}}
/* every model label gets a surface-coloured halo, so even a tight label stays
   readable where it passes a shape edge instead of dissolving into it */
.ib-model svg text{ paint-order:stroke; stroke:var(--surface); stroke-width:2.6px; stroke-linejoin:round }
/* the generic sweep: every plain connector line marches so its direction reads */
.ib-model .an-walk{fill:none;stroke-dasharray:6 6;animation:an-march 1.25s linear infinite}
.ib-model .kv-cursor{animation:an-cursor-blink 1.8s ease-in-out infinite}
@keyframes an-cursor-blink{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.ib-model .an-walk,.ib-model .kv-cursor{animation:none}}
.ib-model .an-meas2.capline{stroke:var(--c0);stroke-width:2.2;stroke-dasharray:8 5}
/* a short leader line, so a label standing off from its shape is not floating */
.ib-model .an-lead{fill:none;stroke:var(--text3);stroke-width:1.2;stroke-dasharray:2 2;opacity:.75}
.ib-model .an-l-gold{background:var(--gold,#b8860b)}
.ib-model .an-l-red{background:var(--c0)}

/* ══ D4: the last eleven models, plus arrowheads and the circulation ══ */
.ib-model .an-arrowhead{fill:#2e9e5b;stroke:none}
.ib-model .an-circ{fill:color-mix(in srgb,var(--c2) 16%,var(--surface));stroke:var(--c2);stroke-width:1.8;stroke-dasharray:5 4}
.ib-model .an-conn.ret-neg{stroke:#2e9e5b;stroke-width:2.6}
.ib-model .an-head{fill:var(--c0);stroke:none}
.ib-model .an-head.up{fill:#2e9e5b}
.ib-model .an-head.down{fill:#c0392b}
.ib-model .an-head.hold{fill:var(--gold,#b8860b)}
.ib-model .an-head.off{fill:var(--text3);opacity:.5}
.ib-model .an-conn.up{stroke:#2e9e5b}
.ib-model .an-conn.down{stroke:#c0392b}
.ib-model .an-conn.hold{stroke:var(--gold,#b8860b)}
.ib-model .an-water{fill:color-mix(in srgb,var(--c2) 13%,var(--surface));stroke:none}
.ib-model .an-air{fill:color-mix(in srgb,var(--c1) 7%,var(--surface));stroke:none}
.ib-model .an-body{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:2.2}
.ib-model .an-ball{fill:color-mix(in srgb,var(--c0) 30%,var(--surface));stroke:var(--c0);stroke-width:2}
.ib-model .an-seam{stroke:var(--c0);stroke-width:2;stroke-dasharray:4 3;fill:none}
.ib-model .an-wedge{fill:color-mix(in srgb,var(--gold,#b8860b) 34%,transparent);stroke:var(--gold,#b8860b);stroke-width:1.4}
.ib-model .an-node{fill:var(--surface);stroke:var(--text3);stroke-width:2.2;transform-box:fill-box;transform-origin:50% 50%}
.ib-model .an-node.on{fill:var(--c0);stroke:var(--c0);animation:an-node-pulse 1.4s ease-in-out infinite}
@keyframes an-node-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ib-model .an-tier{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--surface);stroke-width:1.6}
.ib-model .an-tier.on{fill:var(--c0)}
.ib-model .an-l-up{background:#2e9e5b}
.ib-model .an-l-down{background:#c0392b}
.ib-model .an-l-hold{background:var(--gold,#b8860b)}
.ib-model .an-l-node{background:var(--surface);border:2px solid var(--text3)}
.ib-model .an-l-nodeon{background:var(--c0);border-color:var(--c0)}
.ib-model .an-l-tier{background:color-mix(in srgb,var(--text) 10%,var(--surface));border:1px solid var(--surface)}
.ib-model .an-l-tieron{background:var(--c0)}
.ib-model .an-l-ball{background:color-mix(in srgb,var(--c0) 30%,var(--surface))}
.ib-model .an-b-fb{background:#2e9e5b}
.ib-model .an-b-w{background:var(--c0)}
.ib-model .an-b-drag{background:var(--gold,#b8860b)}
.ib-model .an-b-str{background:var(--green)}
.ib-model .an-b-bias{background:var(--c0)}
@media (prefers-reduced-motion:reduce){.ib-model .an-node.on{animation:none}}
/* every model label gets a surface-coloured halo, so even a tight label stays
   readable where it passes a shape edge instead of dissolving into it */
.ib-model svg text{ paint-order:stroke; stroke:var(--surface); stroke-width:2.6px; stroke-linejoin:round }
/* the generic sweep: every plain connector line marches so its direction reads */
.ib-model .an-walk{fill:none;stroke-dasharray:6 6;animation:an-march 1.25s linear infinite}
.ib-model .kv-cursor{animation:an-cursor-blink 1.8s ease-in-out infinite}
@keyframes an-cursor-blink{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.ib-model .an-walk,.ib-model .kv-cursor{animation:none}}
.ib-model .an-meas2.capline{stroke:var(--c0);stroke-width:2.2;stroke-dasharray:8 5}
/* a short leader line, so a label standing off from its shape is not floating */
.ib-model .an-lead{fill:none;stroke:var(--text3);stroke-width:1.2;stroke-dasharray:2 2;opacity:.75}
.ib-model .an-l-gold{background:var(--gold,#b8860b)}
.ib-model .an-l-red{background:var(--c0)}
/* the main shape in a drawing breathes, so a still figure still reads as alive */
.ib-model .an-livepulse{transform-box:fill-box;transform-origin:50% 50%;
  animation:an-breathe 3.4s ease-in-out infinite}
@keyframes an-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.ib-model .an-livepulse{animation:none}}

/* ══ D4: the last eleven models, plus arrowheads and the circulation ══ */
.ib-model .an-arrowhead{fill:#2e9e5b;stroke:none}
.ib-model .an-circ{fill:color-mix(in srgb,var(--c2) 16%,var(--surface));stroke:var(--c2);stroke-width:1.8;stroke-dasharray:5 4}
.ib-model .an-conn.ret-neg{stroke:#2e9e5b;stroke-width:2.6}
.ib-model .an-head{fill:var(--c0);stroke:none}
.ib-model .an-head.up{fill:#2e9e5b}
.ib-model .an-head.down{fill:#c0392b}
.ib-model .an-head.hold{fill:var(--gold,#b8860b)}
.ib-model .an-head.off{fill:var(--text3);opacity:.5}
.ib-model .an-conn.up{stroke:#2e9e5b}
.ib-model .an-conn.down{stroke:#c0392b}
.ib-model .an-conn.hold{stroke:var(--gold,#b8860b)}
.ib-model .an-water{fill:color-mix(in srgb,var(--c2) 13%,var(--surface));stroke:none}
.ib-model .an-air{fill:color-mix(in srgb,var(--c1) 7%,var(--surface));stroke:none}
.ib-model .an-body{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:2.2}
.ib-model .an-ball{fill:color-mix(in srgb,var(--c0) 30%,var(--surface));stroke:var(--c0);stroke-width:2}
.ib-model .an-seam{stroke:var(--c0);stroke-width:2;stroke-dasharray:4 3;fill:none}
.ib-model .an-wedge{fill:color-mix(in srgb,var(--gold,#b8860b) 34%,transparent);stroke:var(--gold,#b8860b);stroke-width:1.4}
.ib-model .an-node{fill:var(--surface);stroke:var(--text3);stroke-width:2.2;transform-box:fill-box;transform-origin:50% 50%}
.ib-model .an-node.on{fill:var(--c0);stroke:var(--c0);animation:an-node-pulse 1.4s ease-in-out infinite}
@keyframes an-node-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ib-model .an-tier{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--surface);stroke-width:1.6}
.ib-model .an-tier.on{fill:var(--c0)}
.ib-model .an-l-up{background:#2e9e5b}
.ib-model .an-l-down{background:#c0392b}
.ib-model .an-l-hold{background:var(--gold,#b8860b)}
.ib-model .an-l-node{background:var(--surface);border:2px solid var(--text3)}
.ib-model .an-l-nodeon{background:var(--c0);border-color:var(--c0)}
.ib-model .an-l-tier{background:color-mix(in srgb,var(--text) 10%,var(--surface));border:1px solid var(--surface)}
.ib-model .an-l-tieron{background:var(--c0)}
.ib-model .an-l-ball{background:color-mix(in srgb,var(--c0) 30%,var(--surface))}
.ib-model .an-b-fb{background:#2e9e5b}
.ib-model .an-b-w{background:var(--c0)}
.ib-model .an-b-drag{background:var(--gold,#b8860b)}
.ib-model .an-b-str{background:var(--green)}
.ib-model .an-b-bias{background:var(--c0)}
@media (prefers-reduced-motion:reduce){.ib-model .an-node.on{animation:none}}
/* every model label gets a surface-coloured halo, so even a tight label stays
   readable where it passes a shape edge instead of dissolving into it */
.ib-model svg text{ paint-order:stroke; stroke:var(--surface); stroke-width:2.6px; stroke-linejoin:round }
/* the generic sweep: every plain connector line marches so its direction reads */
.ib-model .an-walk{fill:none;stroke-dasharray:6 6;animation:an-march 1.25s linear infinite}
.ib-model .kv-cursor{animation:an-cursor-blink 1.8s ease-in-out infinite}
@keyframes an-cursor-blink{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.ib-model .an-walk,.ib-model .kv-cursor{animation:none}}
.ib-model .an-meas2.capline{stroke:var(--c0);stroke-width:2.2;stroke-dasharray:8 5}
/* a short leader line, so a label standing off from its shape is not floating */
.ib-model .an-lead{fill:none;stroke:var(--text3);stroke-width:1.2;stroke-dasharray:2 2;opacity:.75}
.ib-model .an-l-gold{background:var(--gold,#b8860b)}
.ib-model .an-l-red{background:var(--c0)}
/* the main shape in a drawing breathes, so a still figure still reads as alive */
.ib-model .an-livepulse{transform-box:fill-box;transform-origin:50% 50%;
  animation:an-breathe 3.4s ease-in-out infinite}
@keyframes an-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.ib-model .an-livepulse{animation:none}}
.ib-model .an-glass{fill:color-mix(in srgb,var(--c2) 30%,var(--surface));stroke:var(--c2);stroke-width:1.8}
.ib-model .an-foodbar{fill:#d7a829;stroke:#a97f14;stroke-width:1.4}
.ib-model .an-b-in{background:var(--green)}
.ib-model .an-b-out{background:var(--c0)}
.ib-model .an-horm.off{fill:var(--text3);opacity:.4}

/* ══ D4: the last eleven models, plus arrowheads and the circulation ══ */
.ib-model .an-arrowhead{fill:#2e9e5b;stroke:none}
.ib-model .an-circ{fill:color-mix(in srgb,var(--c2) 16%,var(--surface));stroke:var(--c2);stroke-width:1.8;stroke-dasharray:5 4}
.ib-model .an-conn.ret-neg{stroke:#2e9e5b;stroke-width:2.6}
.ib-model .an-head{fill:var(--c0);stroke:none}
.ib-model .an-head.up{fill:#2e9e5b}
.ib-model .an-head.down{fill:#c0392b}
.ib-model .an-head.hold{fill:var(--gold,#b8860b)}
.ib-model .an-head.off{fill:var(--text3);opacity:.5}
.ib-model .an-conn.up{stroke:#2e9e5b}
.ib-model .an-conn.down{stroke:#c0392b}
.ib-model .an-conn.hold{stroke:var(--gold,#b8860b)}
.ib-model .an-water{fill:color-mix(in srgb,var(--c2) 13%,var(--surface));stroke:none}
.ib-model .an-air{fill:color-mix(in srgb,var(--c1) 7%,var(--surface));stroke:none}
.ib-model .an-body{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:2.2}
.ib-model .an-ball{fill:color-mix(in srgb,var(--c0) 30%,var(--surface));stroke:var(--c0);stroke-width:2}
.ib-model .an-seam{stroke:var(--c0);stroke-width:2;stroke-dasharray:4 3;fill:none}
.ib-model .an-wedge{fill:color-mix(in srgb,var(--gold,#b8860b) 34%,transparent);stroke:var(--gold,#b8860b);stroke-width:1.4}
.ib-model .an-node{fill:var(--surface);stroke:var(--text3);stroke-width:2.2;transform-box:fill-box;transform-origin:50% 50%}
.ib-model .an-node.on{fill:var(--c0);stroke:var(--c0);animation:an-node-pulse 1.4s ease-in-out infinite}
@keyframes an-node-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ib-model .an-tier{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--surface);stroke-width:1.6}
.ib-model .an-tier.on{fill:var(--c0)}
.ib-model .an-l-up{background:#2e9e5b}
.ib-model .an-l-down{background:#c0392b}
.ib-model .an-l-hold{background:var(--gold,#b8860b)}
.ib-model .an-l-node{background:var(--surface);border:2px solid var(--text3)}
.ib-model .an-l-nodeon{background:var(--c0);border-color:var(--c0)}
.ib-model .an-l-tier{background:color-mix(in srgb,var(--text) 10%,var(--surface));border:1px solid var(--surface)}
.ib-model .an-l-tieron{background:var(--c0)}
.ib-model .an-l-ball{background:color-mix(in srgb,var(--c0) 30%,var(--surface))}
.ib-model .an-b-fb{background:#2e9e5b}
.ib-model .an-b-w{background:var(--c0)}
.ib-model .an-b-drag{background:var(--gold,#b8860b)}
.ib-model .an-b-str{background:var(--green)}
.ib-model .an-b-bias{background:var(--c0)}
@media (prefers-reduced-motion:reduce){.ib-model .an-node.on{animation:none}}
/* every model label gets a surface-coloured halo, so even a tight label stays
   readable where it passes a shape edge instead of dissolving into it */
.ib-model svg text{ paint-order:stroke; stroke:var(--surface); stroke-width:2.6px; stroke-linejoin:round }
/* the generic sweep: every plain connector line marches so its direction reads */
.ib-model .an-walk{fill:none;stroke-dasharray:6 6;animation:an-march 1.25s linear infinite}
.ib-model .kv-cursor{animation:an-cursor-blink 1.8s ease-in-out infinite}
@keyframes an-cursor-blink{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.ib-model .an-walk,.ib-model .kv-cursor{animation:none}}
.ib-model .an-meas2.capline{stroke:var(--c0);stroke-width:2.2;stroke-dasharray:8 5}
/* a short leader line, so a label standing off from its shape is not floating */
.ib-model .an-lead{fill:none;stroke:var(--text3);stroke-width:1.2;stroke-dasharray:2 2;opacity:.75}
.ib-model .an-l-gold{background:var(--gold,#b8860b)}
.ib-model .an-l-red{background:var(--c0)}
/* the main shape in a drawing breathes, so a still figure still reads as alive */
.ib-model .an-livepulse{transform-box:fill-box;transform-origin:50% 50%;
  animation:an-breathe 3.4s ease-in-out infinite}
@keyframes an-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.ib-model .an-livepulse{animation:none}}
.ib-model .an-glass{fill:color-mix(in srgb,var(--c2) 30%,var(--surface));stroke:var(--c2);stroke-width:1.8}
.ib-model .an-foodbar{fill:#d7a829;stroke:#a97f14;stroke-width:1.4}
.ib-model .an-b-in{background:var(--green)}
.ib-model .an-b-out{background:var(--c0)}
.ib-model .an-horm.off{fill:var(--text3);opacity:.4}
.ib-model .an-quad{stroke:none}
.ib-model .an-quad.good{fill:color-mix(in srgb,var(--green) 12%,transparent)}
.ib-model .an-quad.warn{fill:color-mix(in srgb,var(--gold,#b8860b) 10%,transparent)}
.ib-model .an-quad.bad{fill:color-mix(in srgb,var(--c0) 11%,transparent)}
.ib-model .an-lab-ok{fill:#2e9e5b}
.ib-model .an-lab-bad{fill:#c0392b}

/* ══ D4: the last eleven models, plus arrowheads and the circulation ══ */
.ib-model .an-arrowhead{fill:#2e9e5b;stroke:none}
.ib-model .an-circ{fill:color-mix(in srgb,var(--c2) 16%,var(--surface));stroke:var(--c2);stroke-width:1.8;stroke-dasharray:5 4}
.ib-model .an-conn.ret-neg{stroke:#2e9e5b;stroke-width:2.6}
.ib-model .an-head{fill:var(--c0);stroke:none}
.ib-model .an-head.up{fill:#2e9e5b}
.ib-model .an-head.down{fill:#c0392b}
.ib-model .an-head.hold{fill:var(--gold,#b8860b)}
.ib-model .an-head.off{fill:var(--text3);opacity:.5}
.ib-model .an-conn.up{stroke:#2e9e5b}
.ib-model .an-conn.down{stroke:#c0392b}
.ib-model .an-conn.hold{stroke:var(--gold,#b8860b)}
.ib-model .an-water{fill:color-mix(in srgb,var(--c2) 13%,var(--surface));stroke:none}
.ib-model .an-air{fill:color-mix(in srgb,var(--c1) 7%,var(--surface));stroke:none}
.ib-model .an-body{fill:color-mix(in srgb,var(--c0) 26%,var(--surface));stroke:var(--c0);stroke-width:2.2}
.ib-model .an-ball{fill:color-mix(in srgb,var(--c0) 30%,var(--surface));stroke:var(--c0);stroke-width:2}
.ib-model .an-seam{stroke:var(--c0);stroke-width:2;stroke-dasharray:4 3;fill:none}
.ib-model .an-wedge{fill:color-mix(in srgb,var(--gold,#b8860b) 34%,transparent);stroke:var(--gold,#b8860b);stroke-width:1.4}
.ib-model .an-node{fill:var(--surface);stroke:var(--text3);stroke-width:2.2;transform-box:fill-box;transform-origin:50% 50%}
.ib-model .an-node.on{fill:var(--c0);stroke:var(--c0);animation:an-node-pulse 1.4s ease-in-out infinite}
@keyframes an-node-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.ib-model .an-tier{fill:color-mix(in srgb,var(--text) 10%,var(--surface));stroke:var(--surface);stroke-width:1.6}
.ib-model .an-tier.on{fill:var(--c0)}
.ib-model .an-l-up{background:#2e9e5b}
.ib-model .an-l-down{background:#c0392b}
.ib-model .an-l-hold{background:var(--gold,#b8860b)}
.ib-model .an-l-node{background:var(--surface);border:2px solid var(--text3)}
.ib-model .an-l-nodeon{background:var(--c0);border-color:var(--c0)}
.ib-model .an-l-tier{background:color-mix(in srgb,var(--text) 10%,var(--surface));border:1px solid var(--surface)}
.ib-model .an-l-tieron{background:var(--c0)}
.ib-model .an-l-ball{background:color-mix(in srgb,var(--c0) 30%,var(--surface))}
.ib-model .an-b-fb{background:#2e9e5b}
.ib-model .an-b-w{background:var(--c0)}
.ib-model .an-b-drag{background:var(--gold,#b8860b)}
.ib-model .an-b-str{background:var(--green)}
.ib-model .an-b-bias{background:var(--c0)}
@media (prefers-reduced-motion:reduce){.ib-model .an-node.on{animation:none}}
/* every model label gets a surface-coloured halo, so even a tight label stays
   readable where it passes a shape edge instead of dissolving into it */
.ib-model svg text{ paint-order:stroke; stroke:var(--surface); stroke-width:2.6px; stroke-linejoin:round }
/* the generic sweep: every plain connector line marches so its direction reads */
.ib-model .an-walk{fill:none;stroke-dasharray:6 6;animation:an-march 1.25s linear infinite}
.ib-model .kv-cursor{animation:an-cursor-blink 1.8s ease-in-out infinite}
@keyframes an-cursor-blink{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.ib-model .an-walk,.ib-model .kv-cursor{animation:none}}
.ib-model .an-meas2.capline{stroke:var(--c0);stroke-width:2.2;stroke-dasharray:8 5}
/* a short leader line, so a label standing off from its shape is not floating */
.ib-model .an-lead{fill:none;stroke:var(--text3);stroke-width:1.2;stroke-dasharray:2 2;opacity:.75}
.ib-model .an-l-gold{background:var(--gold,#b8860b)}
.ib-model .an-l-red{background:var(--c0)}
/* the main shape in a drawing breathes, so a still figure still reads as alive */
.ib-model .an-livepulse{transform-box:fill-box;transform-origin:50% 50%;
  animation:an-breathe 3.4s ease-in-out infinite}
@keyframes an-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.ib-model .an-livepulse{animation:none}}
.ib-model .an-glass{fill:color-mix(in srgb,var(--c2) 30%,var(--surface));stroke:var(--c2);stroke-width:1.8}
.ib-model .an-foodbar{fill:#d7a829;stroke:#a97f14;stroke-width:1.4}
.ib-model .an-b-in{background:var(--green)}
.ib-model .an-b-out{background:var(--c0)}
.ib-model .an-horm.off{fill:var(--text3);opacity:.4}
.ib-model .an-quad{stroke:none}
.ib-model .an-quad.good{fill:color-mix(in srgb,var(--green) 12%,transparent)}
.ib-model .an-quad.warn{fill:color-mix(in srgb,var(--gold,#b8860b) 10%,transparent)}
.ib-model .an-quad.bad{fill:color-mix(in srgb,var(--c0) 11%,transparent)}
.ib-model .an-lab-ok{fill:#2e9e5b}
.ib-model .an-lab-bad{fill:#c0392b}
.ib-model .an-sl-prot{fill:var(--c0);stroke:var(--surface);stroke-width:1.4}
.ib-model .an-sl-car,.ib-model .an-sl-fat{stroke:var(--surface);stroke-width:1.4}


/* the pane keeps a stable height so switching between the topic tree and a
   topic page does not jump the scroll position */
.ib-pane-min-height { min-height: 46vh; }

/* ═══ reader as a focused player (compact ✕, one Next) ═══════════════════ */

/* The exit control is icon-only at every width: font-size 0 hides the label
   that applyLanguage rewrites from data-en/data-zh, and ::before supplies the
   glyph. Qualified with body.ib-lesson because body.ib-lesson button{font:inherit}
   is (0,1,2) and beats a bare class selector. */
body.ib-lesson .ib-top__exit--x {
  font-size: 0; width: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
body.ib-lesson .ib-top__exit--x::before {
  content: '✕'; font-size: 1.05rem; line-height: 1;
}

/* The progress bar is the spine of the bar now that there is no word beside it */
body.ib-lesson .ib-top .ib-top__bar { min-width: 60px; }

/* Back becomes a quiet arrow; Next carries the weight, as in the reference */
.ib-foot__btn--back {
  width: 44px; padding: 0; justify-content: center;
  font-size: 1.15rem; color: var(--text2);
  background: transparent;
}
.ib-foot__btn--back:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text);
}
.ib-foot__btn--back > span { pointer-events: none; }

.ib-foot__btn--next { gap: .45rem; padding-left: 1.15rem; padding-right: 1.05rem; }
.ib-foot__btn--next > span { pointer-events: none; }
.ib-foot__arrow { font-size: 1rem; line-height: 1; }
@media (hover: none) { .ib-foot__btn--next .ib-foot__arrow { font-size: 1.1rem; } }

/* ── Study-guide typography (redesign) ──────────────────────────────────────
   Section headings lead with a gold rule and a serif face; paragraphs breathe;
   bullets indent with coloured markers; key terms render as bordered term
   cards with the definition beside the term. Loaded after the page's inline
   styles so it wins by source order on both the course page and the lesson
   page. */
.native-section{margin-top:1.7rem;padding-top:1.2rem}
.native-section>h3{font-family:var(--serif,Georgia,serif);font-size:1.3rem;line-height:1.25;letter-spacing:-.01em;
  color:var(--blue2,#8fb7e8);margin:0 0 .65rem;padding:.1rem 0 .5rem;
  border-bottom:2px solid color-mix(in srgb,var(--blue2,#8fb7e8) 26%,transparent);
  display:flex;align-items:center;gap:.6rem}
.native-section>h3::before{content:'';width:5px;height:1.05em;border-radius:3px;background:var(--gold,#efd17c);flex:none}
.native-section p{line-height:1.78;margin:.6rem 0;max-width:70ch}
.native-lesson .native-lead p{font-size:1.05rem}
.native-bullets{margin:.65rem 0 .75rem;padding-left:1.4rem}
.native-bullets li{margin:.44rem 0;line-height:1.7;padding-left:.1rem}
.native-bullets li::marker{color:var(--blue2,#8fb7e8);font-weight:800}
.native-terms,.native-examples,.native-focus,.native-quick-check,.native-formulas,.native-links,.native-boundary{margin-top:1rem;padding:.85rem .95rem}
.native-term-list{display:grid;gap:.55rem}
.native-term{display:grid;grid-template-columns:minmax(128px,.38fr) 1fr;gap:.85rem;
  padding:.62rem .75rem;border:1px solid var(--line,#29435d);border-radius:10px;
  background:var(--surface,#11243a);align-items:baseline}
.native-term dt{font-weight:800;color:var(--blue2,#8fb7e8);line-height:1.4}
.native-term dd{margin:0;color:var(--text2,#c7cfda);line-height:1.62;font-size:.93rem}
.li-def{display:block;color:var(--text2,#c7cfda);font-size:.86rem;line-height:1.55;margin-top:.1rem}
.native-section .deep-walk b.kt,.native-section b.kt{color:var(--blue2,#8fb7e8);font-weight:800;
  background:color-mix(in srgb,var(--gold,#efd17c) 20%,transparent);padding:0 .18em;border-radius:4px}
@media (max-width: 640px){
  .native-term{grid-template-columns:1fr;gap:.3rem}
  .native-section>h3{font-size:1.16rem}
}