/* ---------- The client learning modules: "How the hands-on works" (18 Oct 2026) ----------
   Lee: "i want clients to be able to access modules in the portal for education if i select it
   in their session builder - ie in the initial". public/learn.html, drawn by
   public/education/learn.js (education/src/*.tsx; rebuild with tools/build-education.js).

   The drawings follow the neura.mt explainers: a light stage beside a deep slate story panel,
   BioRender-light drawings (skin-toned bodies, pastel muscles, pink brains, yellow cords and
   nerves) and violet for "released". No green inside a figure (the Neura look); the page around
   it is the portal's. Colours sit in shared rules, never in a custom property set on an element:
   WebKit keeps memory for every element built with its own --x.

   The rules after the page section came from the Portal's Education tab (PlanTrack 1783c5d) and
   still use its token names; .edu maps them onto the studio's colours once, here. */

.edu {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --font-display: Inter, system-ui, -apple-system, BlinkMacSystemFont;
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont;
  --top-bar-height: var(--topbar-h, 56px);
  --paper: #f7f9fa;
  --surface: #ffffff;
  --surface-soft: #fafbfc;
  --surface-muted: #eef1f4;
  --surface-alt: #f5f7f9;
  --line: #e5e7eb;
  --line-soft: #eef0f3;
  --line-strong: #cfd4da;
  --line-heavy: #aab2bc;
  --ink-2: #262626;
  --text-2: #5a5a5a;
  --text-3: #6b6b6b;
  --muted: #6b6b6b;
  --info-text: #2563a8;
  --info-soft: #e8f1fb;
  --info-line: #c5dbf3;
  --sky-text: #2f6f9f;
  --red: #c2413a;
  --red-strong: #a3302a;
  --red-soft: #fbeceb;
  --red-tint: #fdf4f3;
  --red-line: #f0c9c5;
  --lilac: #efe7fb;
  --lilac-text: #6b3fb8;
  --apricot-soft: #fdf0e6;
  --amber-text: #8a5e12;
  --green-surface: #2f7a43;
  --shadow: 0 2px 10px rgba(20, 30, 25, 0.05);
  color: var(--ink);
  font-family: var(--font);
}

/* The page */
.edu-learn {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px var(--space-side) 72px;
}

.edu .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.edu-staff {
  margin: 0 0 22px;
  border: 1px solid #ecdcb5;
  border-radius: 12px;
  background: #fbf5e6;
  padding: 10px 14px;
  color: #6b4a10;
  font-size: 13.5px;
  font-weight: 600;
}

.edu-intro {
  max-width: 820px;
  margin: 0 0 18px;
}

.edu-intro__title {
  margin: 0 0 10px;
  font: 800 clamp(28px, 3.8vw, 40px)/1.1 var(--font);
  letter-spacing: -0.03em;
}

.edu-intro__lead {
  margin: 0;
  color: var(--text-muted);
  font-size: 16.5px;
  line-height: 1.6;
}

.edu-intro .edu-scope {
  margin: 12px 0 0;
}

.edu-empty {
  max-width: 640px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 22px 24px;
  color: var(--text-2);
  font-size: 15px;
}

.edu-empty p {
  margin: 0;
}

.edu-module {
  scroll-margin-top: calc(var(--top-bar-height) + 70px);
}

.edu-honest {
  max-width: 800px;
  margin: 30px 0 0;
  border-left: 3px solid #58bb72;
  border-radius: 0 12px 12px 0;
  background: #e8f5ed;
  padding: 13px 18px;
  color: #2b6e3d;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
}

.edu-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 34px 0 0;
}

.edu-pager__btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px 16px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.edu-pager__btn:hover {
  border-color: #58bb72;
  background: #f4faf6;
}

.edu-pager__btn--next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}

.edu-pager__dir {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.edu-pager__btn--prev .edu-pager__dir::before {
  content: "← ";
}

.edu-pager__btn--next .edu-pager__dir::after {
  content: " →";
}

.edu-pager__name {
  font-size: 15px;
  font-weight: 700;
}

.edu-words {
  margin: 40px 0 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 18px;
}

.edu-words summary {
  color: var(--text-2);
  cursor: pointer;
  font-weight: 700;
}

.edu-words + .edu-sources {
  margin-top: 12px;
}

@media (max-width: 560px) {
  .edu-learn {
    padding-top: 20px;
  }

  /* one row of top bar on a phone: the logo and the way back */
  .edu-page .ni-logo-sep,
  .edu-page .ni-logo-app {
    display: none;
  }

  .edu-page .ni-topbar-inner {
    flex-wrap: nowrap;
  }

  .edu-pager {
    grid-template-columns: 1fr;
  }

  .edu-pager__btn--next {
    grid-column: 1;
  }
}

/* The page */
.edu-scope {
  max-width: 760px;
  margin: -14px 0 18px;
  color: var(--muted);
  font-size: 13.5px;
}

.edu-toc {
  position: sticky;
  top: calc(var(--top-bar-height, 72px) + 8px);
  z-index: 6;
  display: flex;
  gap: 6px;
  margin: 0 -6px 6px;
  padding: 8px 6px;
  overflow-x: auto;
  border-radius: 14px;
  background: rgba(247, 249, 250, 0.94);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}

.edu-toc::-webkit-scrollbar {
  display: none;
}

/* Seven modules and the Simple/Advanced switch don't fit one row on a desktop: there the bar wraps
   (its height is the same in every module, so nothing below it moves); a phone scrolls it sideways. */
@media (min-width: 900px) {
  .edu-toc {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.edu-toc__chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 7px 13px;
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.edu-toc__chip:hover {
  border-color: var(--line-heavy);
  color: var(--ink);
}

.edu-toc__chip.is-active {
  border-color: var(--green-surface);
  background: var(--green-surface);
  color: #fff;
}

.edu-toc__n {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
}

.edu-toc__chip.is-active .edu-toc__n {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.edu-chapter {
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding: 44px 0 8px;
}

.edu-chapter__head {
  max-width: 800px;
}

/* A title or section heading takes focus when the reader is moved to it (a module chosen, "On this
   page"): it isn't a control, so no ring. */
.edu-chapter__head h2:focus,
.edu-gsec__h:focus {
  outline: none;
}

.edu-chapter__head h2 {
  margin: 0 0 12px;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(23px, 2.4vw, 31px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.edu-chapter__head p:not(.eyebrow) {
  margin: 0 0 10px;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
}

.edu-subhead {
  margin: 36px 0 4px;
  font-family: var(--font-display), sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.edu-quote {
  margin: 18px 0 6px;
  border-left: 3px solid #8a4fe0;
  border-radius: 0 14px 14px 0;
  background: var(--surface);
  padding: 18px 22px;
}

.edu-quote p {
  margin: 0;
  font-family: var(--font-display), sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

.edu-quote footer {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

.edu-quote--plain p {
  font-family: var(--font-body), sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.55;
}

.edu-cards,
.edu-claims,
.edu-cannot {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.edu-cards {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.edu-claims {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.edu-cannot {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.edu-card,
.edu-claim {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 18px 20px;
}

.edu-card h3,
.edu-claim h3 {
  margin: 4px 0 6px;
  font-family: var(--font-display), sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
}

.edu-card p,
.edu-claim p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.edu-claim {
  border-top: 3px solid var(--info-text);
}

.edu-claim--limits {
  border-top-color: var(--sky-text);
}

.edu-claim--framework {
  border-top-color: var(--amber);
}

.edu-claim--own {
  border-top-color: #8a4fe0;
}

.edu-claim .edu-claim__strength {
  margin-top: 10px;
  border-top: 1px dashed var(--line-strong);
  padding-top: 10px;
  font-size: 13.5px;
}

.edu-claim .edu-claim__sources {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
}

.edu-cannot article {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 14px 16px;
}

.edu-cannot h4 {
  margin: 0 0 4px;
  font-family: var(--font-display), sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.edu-cannot p {
  margin: 0;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Evidence tags on light cards: the theme's own tokens. */
.edu-tier.ed-tier {
  margin: 0 0 4px;
}

.edu-tier.ed-tier--established {
  background: var(--info-soft);
  color: var(--info-text);
}

.edu-tier.ed-tier--limits {
  background: var(--info-soft);
  box-shadow: inset 0 0 0 1px var(--info-line);
  color: var(--info-text);
}

.edu-tier.ed-tier--framework {
  background: var(--apricot-soft);
  color: var(--amber-text);
}

.edu-tier.ed-tier--own {
  background: var(--lilac);
  color: var(--lilac-text);
}

.edu-tier.ed-tier--observation {
  background: var(--surface-muted);
  color: var(--text-3);
}

.edu-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.edu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.edu-table th,
.edu-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}

.edu-table tbody tr:last-child th,
.edu-table tbody tr:last-child td {
  border-bottom: 0;
}

.edu-table thead th {
  background: var(--surface-alt);
  color: var(--muted);
  font-family: var(--font-display), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.edu-table tbody th {
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

.edu-layer-n {
  display: inline-grid;
  width: 20px;
  height: 20px;
  margin-right: 9px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
}

.edu-layer-n--1 { background: #e5484d; }
.edu-layer-n--2 { background: #f07a2a; }
.edu-layer-n--3 { background: #c2418f; }
.edu-layer-n--4 { background: #18a7c9; }
.edu-layer-n--5 { background: #4b5fd6; }

.edu-figure {
  container-type: inline-size;
  margin: 22px 0 4px;
}

.edu-figure__note {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: 12.5px;
}

.edu-feel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
}

.edu-feel h3 {
  margin: 0 0 8px;
  font-family: var(--font-display), sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.edu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.edu-chips li {
  border-radius: 999px;
  background: var(--lilac);
  padding: 5px 11px;
  color: var(--lilac-text);
  font-size: 13px;
  font-weight: 600;
}

.edu-chips--warm li {
  background: var(--apricot-soft);
  color: var(--amber-text);
}

.edu-muted {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.edu-ticks {
  display: grid;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.edu-ticks li {
  position: relative;
  padding-left: 24px;
  color: var(--text-2);
  font-size: 14.5px;
}

.edu-ticks li::before {
  position: absolute;
  top: 6px;
  left: 4px;
  width: 10px;
  height: 6px;
  border-bottom: 2px solid #8a4fe0;
  border-left: 2px solid #8a4fe0;
  content: "";
  transform: rotate(-45deg);
}

.edu-glossary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 28px;
  margin: 16px 0 0;
}

.edu-glossary div {
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 0;
}

.edu-glossary dt {
  font-family: var(--font-display), sans-serif;
  font-size: 14.5px;
  font-weight: 700;
}

.edu-glossary dd {
  margin: 3px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}

.edu-sources {
  margin: 40px 0 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 18px;
}

.edu-sources summary {
  color: var(--text-2);
  cursor: pointer;
  font-weight: 700;
}

.edu-sources ol {
  margin: 12px 0 0;
  padding-left: 22px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}

.edu-sources li {
  margin: 5px 0;
}

@media (max-width: 720px) {
  .edu-feel {
    grid-template-columns: 1fr;
  }

  .edu-chapter {
    margin-top: 18px;
    padding-top: 30px;
  }

  .edu-toc {
    top: calc(var(--top-bar-height, 60px) + 4px);
  }

  .edu-table tbody th {
    white-space: normal;
  }
}

/* The explainer: a light stage beside a deep slate story panel */
.ed-bx {
  margin: 0;
}

.ed-bx__body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #1d232b;
  box-shadow: var(--shadow);
}

.ed-bx__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 38% 28%, #ffffff 0%, #f6f7f9 60%, #eef0f3 100%);
  padding: 14px;
}

.ed-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.ed-bx__story {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: #1d232b;
  padding: 22px 22px 18px;
  color: rgba(255, 255, 255, 0.92);
}

.ed-bx__label {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ed-bx__steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
}

.ed-bx__step {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 40px;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  padding: 8px 2px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  transition: color var(--dur-fast) var(--ease-out);
}

.ed-bx__step:hover,
.ed-bx__step[aria-pressed="true"] {
  color: #fff;
}

.ed-bx__step:focus-visible,
.ed-bx__nav:focus-visible,
.ed-bx__pause:focus-visible {
  outline: 3px solid rgba(180, 139, 242, 0.6);
  outline-offset: 2px;
}

.ed-bx__n {
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-display), sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ed-bx__step[aria-pressed="true"] .ed-bx__n {
  color: #b48bf2;
}

.ed-bx__panels {
  display: grid;
  min-width: 0;
  margin-top: 16px;
}

.ed-bx__panel {
  min-width: 0;
  grid-area: 1 / 1;
  overflow-wrap: break-word;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}

.ed-bx__panel.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease-out), visibility 0s;
}

.ed-bx__title {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--font-display), sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ed-bx__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14.5px;
  line-height: 1.55;
}

.ed-tier {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 12px 0 0;
  border-radius: 999px;
  padding: 3px 9px;
  font-family: var(--font-display), sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ed-tier span {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.ed-tier--established { background: rgba(126, 170, 255, 0.16); color: #bcd0ff; }
.ed-tier--limits { background: rgba(126, 170, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(126, 170, 255, 0.35); color: #bcd0ff; }
.ed-tier--framework { background: rgba(240, 180, 80, 0.16); color: #f3cf8e; }
.ed-tier--own { background: rgba(170, 140, 255, 0.18); color: #d6c6ff; }
.ed-tier--observation { background: rgba(255, 255, 255, 0.1); color: #d6d9de; }

.ed-bx__chips-h {
  margin: 14px 0 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ed-bx__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed-bx__chips li {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12.5px;
}

.ed-bx__key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  list-style: none;
}

.ed-bx__key li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ed-sw { display: inline-block; flex: none; }
.ed-sw--line { width: 18px; height: 3px; border-radius: 2px; background: currentColor; }
.ed-sw--dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ed-sw--ring { width: 11px; height: 11px; border: 2px dashed currentColor; border-radius: 50%; }
.ed-sw--fill { width: 12px; height: 12px; border-radius: 3px; background: currentColor; }
.ed-tone--red { color: #f0686c; }
.ed-tone--orange { color: #f59a5a; }
.ed-tone--blue { color: #6d93f4; }
.ed-tone--indigo { color: #8c99ee; }
.ed-tone--violet { color: #b48bf2; }
.ed-tone--yellow { color: #f4d669; }
.ed-tone--pink { color: #e277b4; }
.ed-tone--slate { color: #6fc3d8; }
.ed-tone--cyan { color: #4fcbe3; }

.ed-bx__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}

.ed-bx__nav,
.ed-bx__pause {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: none;
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.ed-bx__nav {
  display: inline-flex;
  flex: none;
  min-height: 40px;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 8px 15px;
  font-family: var(--font-display), sans-serif;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.ed-bx__nav--next {
  border-color: #b48bf2;
  background: #8a4fe0;
}

.ed-bx__nav--next:hover {
  background: #7a41d4;
}

.ed-bx__nav:disabled {
  cursor: default;
  opacity: 0.35;
}

.ed-bx__count {
  /* "Start again" never wraps (a two-line button grew the panel on the last step at 390 px):
     the counter gives up its width first */
  flex: 0 1 52px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.ed-bx__pause {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  margin-left: auto;
  border-radius: 50%;
}

.ed-bx__nav--back:hover:not(:disabled),
.ed-bx__pause:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ed-bx__refs {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  line-height: 1.55;
}

.ed-bx__refs > span:first-child {
  margin-right: 4px;
}

.ed-bx__refs .edu-ref {
  color: #cdb7f7;
}

.ed-bx__read {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 13.5px;
}

.ed-bx__read summary {
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
}

.ed-bx__read ol {
  margin: 10px 0 0;
  padding-left: 20px;
}

.ed-bx__read li {
  margin: 6px 0;
}

.ed-bx__read em {
  color: var(--muted);
  font-style: normal;
}

/* Motion stops while paused, off screen or hidden. */
.ed-bx.is-still .ed-svg * {
  animation-play-state: paused !important;
}

@container (max-width: 820px) {
  .ed-bx__body {
    grid-template-columns: 1fr;
  }

  .ed-bx__stage {
    padding: 10px 8px;
  }

  .ed-bx__story {
    padding: 14px 16px 16px;
  }

  /* On a narrow stage the controls sit right under the drawing, and the
     steps become numbered chips, so Next is always next to what it moves. */
  .ed-bx__label { order: -2; margin-bottom: 10px; }
  .ed-bx__controls { order: -1; margin: 0 0 12px; padding-top: 0; }
  .ed-bx__nav { padding: 8px 12px; }
  .ed-bx__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 0;
  }

  .ed-bx__step {
    display: inline-grid;
    width: auto;
    min-width: 38px;
    min-height: 34px;
    grid-template-columns: auto;
    justify-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 6px 10px;
  }

  .ed-bx__step[aria-pressed="true"] {
    border-color: #b48bf2;
    background: rgba(138, 79, 224, 0.28);
  }

  .ed-bx__name { display: none; }
  .ed-bx__n { color: inherit; font-size: 12px; }
  .ed-bx__panels { margin-top: 12px; }
}

.ed-lab__title--short {
  display: none;
}

@container (max-width: 560px) {
  .ed-svg .ed-lab__title { font-size: 18px; }
  .ed-svg .ed-lab__title--long { display: none; }
  .ed-svg .ed-lab__title--short { display: inline; }
  .ed-svg .ed-lab__sub,
  .ed-svg .ed-lab--minor,
  .ed-svg .ed-f4__note,
  .ed-svg .ed-f11__note,
  .ed-svg .ed-f4__scale,
  .ed-svg .ed-f2__row-zone,
  .ed-svg .ed-f2__foot--sub { display: none; }
  .ed-svg .ed-f2__row-name { font-size: 17px; }
  .ed-svg .ed-f2__foot { font-size: 15px; }
  .ed-svg .ed-f4__depth text,
  .ed-svg .ed-f4__monitor-sub,
  .ed-svg .ed-f5__small,
  .ed-svg .ed-f7__sub,
  .ed-svg .ed-f7__card-t { font-size: 15px; }
  .ed-svg .ed-f5__ch-label,
  .ed-svg .ed-f7__name,
  .ed-svg .ed-f4__monitor-h,
  .ed-svg .ed-f4__checks-h,
  .ed-svg .ed-f4__check text { font-size: 17px; }
}

/* Shared drawing */
.ed-svg text {
  font-family: var(--font-body), sans-serif;
}

.ed-lab__title {
  fill: #1e2530;
  font-family: var(--font-display), sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.ed-lab__sub {
  fill: #6b7380;
  font-size: 12px;
}

.ed-lab__leader {
  fill: none;
  stroke: #9aa1ab;
  stroke-width: 1;
}

.ed-lab__dot {
  fill: #1e2530;
}

.ed-leaders path,
path.ed-leaders {
  fill: none;
  stroke: #b8bec7;
  stroke-dasharray: 3 4;
  stroke-width: 1;
}

.ed-body {
  stroke: #e0b39a;
  stroke-width: 1.2;
}

.ed-body__edge {
  fill: none;
  stroke: #d9aa8f;
  stroke-width: 1.3;
}

.ed-body__contour {
  fill: none;
  opacity: 0.35;
  stroke: #e7b99f;
  stroke-width: 10;
}

.ed-spine {
  fill: #efe4d2;
  opacity: 0.6;
}

.ed-spine-line {
  fill: none;
  stroke: #e9c75a;
  stroke-linecap: round;
  stroke-width: 2.5;
}

.ed-joint {
  fill: #fbe9df;
  stroke: #d6a88e;
  stroke-width: 1.2;
}

.ed-tb path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ed-tb--nerve .ed-tb__rim { stroke: #cfa23c; }
.ed-tb--nerve .ed-tb__body { stroke: #f4d669; }
.ed-tb--nerve .ed-tb__hl { opacity: 0.9; stroke: #fff6cf; }
.ed-tb--vessel .ed-tb__rim { stroke: #c9575c; }
.ed-tb--vessel .ed-tb__body { stroke: #f09094; }
.ed-tb--vessel .ed-tb__hl { opacity: 0.9; stroke: #fde3e4; }

.ed-root {
  fill: none;
  stroke: #e9c75a;
  stroke-linecap: round;
  stroke-width: 5;
}

.ed-drg {
  fill: #f6dc84;
  stroke: #cfa23c;
  stroke-width: 1.2;
}

.ed-chain path {
  fill: none;
  stroke: #9fc9d6;
  stroke-width: 2;
}

.ed-chain ellipse {
  fill: #cbe8f0;
  stroke: #6fb3c6;
  stroke-width: 1.1;
}

.ed-musc > g,
.ed-musc--lens {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.7s var(--ease-out);
}

.ed-musc__body {
  stroke: none;
}

.ed-musc__str {
  fill: none;
  opacity: 0.55;
  stroke: #df838e;
  stroke-width: 0.8;
}

.ed-musc__edge {
  fill: none;
  stroke: #d9838d;
  stroke-width: 1.1;
  transition: stroke 0.6s var(--ease-out), stroke-width 0.6s var(--ease-out);
}

.ed-musc.is-tight > g,
.ed-musc--lens.is-tight {
  transform: scaleX(0.88);
}

.ed-musc.is-tight .ed-musc__edge {
  stroke: #f07a2a;
  stroke-width: 1.8;
}

.ed-tendon {
  fill: none;
  stroke: #efe3d3;
  stroke-linecap: round;
  stroke-width: 6;
}

.ed-brain__body {
  stroke: #d98ea3;
  stroke-width: 1.2;
}

.ed-brain__gyri {
  fill: none;
  opacity: 0.8;
  stroke: #d98aa1;
  stroke-linecap: round;
  stroke-width: 1;
}

.ed-brain__stem {
  fill: none;
  stroke: #e9b7a6;
  stroke-linecap: round;
  stroke-width: 4;
}

.ed-cordx__white {
  stroke: #d8bd6f;
  stroke-width: 1.3;
}

.ed-cordx__grey {
  stroke: #d99aa9;
  stroke-width: 1.1;
}

.ed-cordx__canal {
  fill: #fff;
  stroke: #c9a2ab;
  stroke-width: 0.8;
}

.ed-cordx__descend {
  opacity: 0.75;
  stroke: #4b5fd6;
  stroke-dasharray: 3 6;
  stroke-width: 3;
  animation: edDash 1.4s linear infinite;
}

@keyframes edDash {
  to { stroke-dashoffset: -18; }
}

.ed-ln__shadow {
  fill: #1e232b;
  opacity: 0.07;
}

.ed-ln__disc {
  fill: #fdfdfe;
}

.ed-ln__tissue { fill: #fbf6f2; }
.ed-ln__tissue--muscle { fill: #fdf1f0; }
.ed-ln__tissue--cord { fill: #fcfaf4; }
.ed-ln__tissue--organ { fill: #fdf4ec; }

.ed-ln__ring {
  fill: none;
  stroke: rgba(30, 35, 43, 0.13);
  stroke-width: 1;
  transition: stroke 0.6s var(--ease-out), stroke-width 0.6s var(--ease-out);
}

.ed-ln.is-alert-blue .ed-ln__ring {
  stroke: rgba(63, 111, 230, 0.6);
  stroke-width: 1.6;
}

.ed-ln.is-alert-orange .ed-ln__ring {
  stroke: rgba(239, 138, 43, 0.75);
  stroke-width: 1.6;
}

.ed-floor {
  opacity: 1;
}

.ed-ok__ring {
  fill: none;
  stroke: #8a4fe0;
  stroke-dasharray: 4 4;
  stroke-width: 2;
}

.ed-ok__halo {
  fill: none;
  opacity: 0.12;
  stroke: #8a4fe0;
  stroke-width: 6;
}

.ed-route {
  fill: none;
  opacity: 0.5;
  stroke-linecap: round;
  stroke-width: 1.4;
}

.ed-route--red { stroke: #e5484d; }
.ed-route--orange { stroke: #f07a2a; }
.ed-route--brain { stroke: #4b5fd6; }
.ed-route--thin { stroke-dasharray: 3 4; stroke-width: 1; }

.ed-route--felt {
  opacity: 0.85;
  stroke: #4b5fd6;
  stroke-dasharray: 5 5;
  stroke-width: 1.6;
}

.ed-node {
  stroke: #fff;
  stroke-width: 2;
}

.ed-node--red { fill: #e5484d; }
.ed-node--orange { fill: #f07a2a; }
.ed-node--magenta { fill: #c2418f; }

.ed-arrow--brain,
.ed-arrow--span { fill: #4b5fd6; }
.ed-arrow--nerve { fill: #cfa23c; }
.ed-arrow--lymph { fill: #6fb3c6; }
.ed-arrow--ease { fill: #8a4fe0; }

.ed-chip {
  fill: #eef0fb;
  stroke: #c9cff3;
}

.ed-chip__text {
  fill: #3f4fb8;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}

/* Signals: a soft tail and a bright head, every path normalised to 100. */
.ed-sk path {
  fill: none;
  stroke-linecap: round;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.ed-sk__t {
  stroke-dasharray: 18 100;
  stroke-width: 3.2;
  animation-name: edSkTail;
}

.ed-sk__halo {
  opacity: 0.85;
  stroke: #fff;
  stroke-dasharray: 4 114;
  stroke-width: 7;
  animation-name: edSkHead;
}

.ed-sk__h {
  stroke-dasharray: 4 114;
  stroke-width: 4.2;
  animation-name: edSkHead;
}

@keyframes edSkTail {
  from { stroke-dashoffset: 18; }
  to { stroke-dashoffset: -100; }
}

@keyframes edSkHead {
  from { stroke-dashoffset: 4; }
  to { stroke-dashoffset: -114; }
}

.ed-sk--in .ed-sk__t { stroke: #b4c8f8; }
.ed-sk--in .ed-sk__h { stroke: #2d61e6; }
.ed-sk--out .ed-sk__t { stroke: #f8cc98; }
.ed-sk--out .ed-sk__h { stroke: #e9761a; }
.ed-sk--red .ed-sk__t { stroke: #f2a3a5; }
.ed-sk--red .ed-sk__h { stroke: #e5484d; }
.ed-sk--brain .ed-sk__t { stroke: #b4c3f4; }
.ed-sk--brain .ed-sk__h { stroke: #4b5fd6; }
.ed-sk--ok .ed-sk__t { stroke: #d5c4f5; }
.ed-sk--ok .ed-sk__h { stroke: #8a4fe0; }
.ed-sk--cyan .ed-sk__t { stroke: #9fdcea; }
.ed-sk--cyan .ed-sk__h { stroke: #18a7c9; }
.ed-sk--thin .ed-sk__t { stroke-width: 2.2; }
.ed-sk--thin .ed-sk__h { stroke-width: 3; }
.ed-sk--thin .ed-sk__halo { stroke-width: 5; }
.ed-sk--big .ed-sk__t { stroke-width: 6; }
.ed-sk--big .ed-sk__h { stroke-width: 7.5; }
.ed-sk--big .ed-sk__halo { stroke-width: 11; }
.ed-sk--strong .ed-sk__h { stroke-width: 5.6; }

/* Parts that come and go with the steps, and the release sequence. */
.ed-part {
  transition: opacity 0.55s var(--ease-out);
}

.ed-part.is-off {
  opacity: 0;
}

.ed-part.is-off .ed-sk path {
  animation-name: none;
}

.ed-rel-out {
  animation: edRelOut 0.9s var(--ease-out) both;
}

.ed-rel-in {
  transform-box: fill-box;
  transform-origin: center;
  animation: edRelIn 0.8s var(--ease-spring) both;
}

.ed-rel-fade {
  animation: edRowFade 0.9s var(--ease-out) both;
}

.ed-rank-1 { animation-delay: 0.6s; }
.ed-rank-2 { animation-delay: 1.9s; }
.ed-rank-3 { animation-delay: 3.2s; }
.ed-rank-4 { animation-delay: 4.5s; }
.ed-rank-5 { animation-delay: 5.8s; }

@keyframes edRelOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes edRelIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes edRowFade {
  to { fill: #f6f1fe; stroke: #d9c8f7; }
}

.ed-throb {
  transform-box: fill-box;
  transform-origin: center;
  animation: edThrob 2.4s ease-in-out infinite;
}

@keyframes edThrob {
  0%, 100% { opacity: 0.65; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* 2 · the layers */
.ed-f2__halo {
  fill: none;
  opacity: 0.12;
  stroke: #4b5fd6;
  stroke-width: 16;
}

.ed-f2__chain-line {
  stroke: #9fc9d6;
  stroke-width: 1.6;
}

.ed-f2__ganglion {
  fill: #d7eef4;
  stroke: #6fb3c6;
  stroke-width: 1;
  transition: fill 0.6s var(--ease-out), stroke 0.6s var(--ease-out);
}

.ed-f2__chain.is-up .ed-f2__ganglion {
  fill: #18a7c9;
  stroke: #0f7e99;
}

.ed-f2__vessel .ed-tb path {
  transition: stroke-width 0.8s var(--ease-out);
}

.ed-f2__vessel.is-narrow .ed-tb__rim { stroke-width: 3.6px; }
.ed-f2__vessel.is-narrow .ed-tb__body { stroke-width: 2px; }
.ed-f2__vessel.is-narrow .ed-tb__hl { stroke-width: 0.7px; }

.ed-f2__gain {
  fill: #2d61e6;
  font-family: var(--font-display), sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.ed-f2__gain--big {
  font-size: 13px;
}

.ed-f2__volume rect {
  fill: #4b5fd6;
  transform-box: fill-box;
  transform-origin: bottom;
  animation: edVolume 1.4s ease-in-out infinite alternate;
}

.ed-f2__volume rect:nth-child(2) { animation-delay: -0.3s; }
.ed-f2__volume rect:nth-child(3) { animation-delay: -0.6s; }
.ed-f2__volume rect:nth-child(4) { animation-delay: -0.9s; }
.ed-f2__volume rect:nth-child(5) { animation-delay: -1.2s; }

@keyframes edVolume {
  from { transform: scaleY(0.45); }
  to { transform: scaleY(1); }
}

.ed-f2__badge circle {
  stroke: #fff;
  stroke-width: 1.5;
}

.ed-f2__badge text {
  fill: #fff;
  font-family: var(--font-display), sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-anchor: middle;
}

.ed-f2__badge--l1 circle { fill: #e5484d; }
.ed-f2__badge--l2 circle { fill: #f07a2a; }
.ed-f2__badge--l3 circle { fill: #c2418f; }
.ed-f2__badge--l4 circle { fill: #18a7c9; }
.ed-f2__badge--l5 circle { fill: #4b5fd6; }
.ed-f2__badge--ok circle { fill: #8a4fe0; }

.ed-f2__badge--ok path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ed-f2__stack-h {
  fill: #7a828d;
  font-family: var(--font-display), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ed-f2__row-box {
  fill: #fff;
  stroke: #e3e6ea;
  transition: fill 0.5s var(--ease-out), stroke 0.5s var(--ease-out);
}

.ed-f2__row-n {
  fill: #eef0f2;
  transition: fill 0.5s var(--ease-out);
}

.ed-f2__row-num {
  fill: #6b7380;
  font-family: var(--font-display), sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-anchor: middle;
}

.ed-f2__row-name {
  fill: #1e2530;
  font-family: var(--font-display), sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.ed-f2__row-zone {
  fill: #6b7380;
  font-size: 11.5px;
}

.ed-f2__row.is-waiting .ed-f2__row-name,
.ed-f2__row.is-waiting .ed-f2__row-zone {
  fill: #a3a9b2;
}

.ed-f2__row.is-current .ed-f2__row-box {
  stroke-width: 2;
}

.ed-f2__row:not(.is-waiting) .ed-f2__row-num {
  fill: #fff;
}

.ed-f2__row--l1:not(.is-waiting) .ed-f2__row-box { fill: #fdeeee; stroke: #f3b9bb; }
.ed-f2__row--l1:not(.is-waiting) .ed-f2__row-n { fill: #e5484d; }
.ed-f2__row--l2:not(.is-waiting) .ed-f2__row-box { fill: #fef1e7; stroke: #f8c79f; }
.ed-f2__row--l2:not(.is-waiting) .ed-f2__row-n { fill: #f07a2a; }
.ed-f2__row--l3:not(.is-waiting) .ed-f2__row-box { fill: #fbedf5; stroke: #ebb3d3; }
.ed-f2__row--l3:not(.is-waiting) .ed-f2__row-n { fill: #c2418f; }
.ed-f2__row--l4:not(.is-waiting) .ed-f2__row-box { fill: #e8f6fa; stroke: #a9dbe8; }
.ed-f2__row--l4:not(.is-waiting) .ed-f2__row-n { fill: #18a7c9; }
.ed-f2__row--l5:not(.is-waiting) .ed-f2__row-box { fill: #eef0fc; stroke: #bcc4f1; }
.ed-f2__row--l5:not(.is-waiting) .ed-f2__row-n { fill: #4b5fd6; }

.ed-f2__pill {
  fill: #8a4fe0;
}

.ed-f2__pill-text {
  fill: #fff;
  font-family: var(--font-display), sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-anchor: middle;
}

.ed-f2__foot {
  fill: #4b535c;
  font-size: 12px;
  font-weight: 600;
}

.ed-f2__foot--sub {
  fill: #8a929c;
  font-weight: 400;
}

/* 3 · one segment */
.ed-f3__neuron-glow {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.ed-f3__neuron-glow circle {
  fill: #2d61e6;
  fill-opacity: 0.22;
}

.ed-f3__neuron.is-lit .ed-f3__neuron-glow {
  opacity: 1;
}

.ed-f3__neuron-body {
  fill: none;
  stroke: #3d5fcf;
  stroke-linecap: round;
  stroke-width: 1.6;
}

.ed-f3__neuron-core {
  fill: #6e8cf0;
  stroke: #fff;
  stroke-width: 1.4;
}

.ed-f3__felt {
  fill: #4b5fd6;
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
}

.ed-f3__brain-label {
  fill: #4b5fd6;
  font-family: var(--font-display), sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.ed-f3__skin { fill: #f2c9b4; }

.ed-f3__ending {
  fill: none;
  stroke: #e2b84c;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.ed-f3__gut {
  stroke: #e9a989;
  stroke-linecap: round;
  stroke-width: 22;
}

.ed-f3__gut-line {
  fill: none;
  stroke: #cf8a6b;
  stroke-linecap: round;
  stroke-width: 1.4;
}

.ed-f3__vessel-wall { fill: #f6b9bb; stroke: #d5787d; stroke-width: 1.2; }
.ed-f3__vessel-muscle { fill: #f1a2a6; }

.ed-f3__vessel-lumen {
  fill: #b8343b;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.8s var(--ease-out);
}

.ed-f3__vessel.is-narrow .ed-f3__vessel-lumen {
  transform: scale(0.52);
}

/* 4 · the release */
.ed-f4__skin { fill: #f2c7b1; }

.ed-f4__fatcells ellipse {
  fill: #fff6d6;
  stroke: #efd99a;
  stroke-width: 0.8;
}

.ed-f4__fascia {
  fill: #f1ecf8;
  stroke: #d6cdea;
  stroke-width: 0.8;
}

.ed-f4__stipple circle {
  fill: #e0838e;
  opacity: 0.35;
}

.ed-f4__bone path {
  stroke: #cdb68d;
  stroke-width: 1.1;
}

.ed-f4__canal {
  fill: #fbf1d4;
  stroke: #d9c68e;
  stroke-width: 1;
}

.ed-f4__dura {
  fill: #dfe7f0;
  stroke: #9fb3c8;
  stroke-width: 1.6;
}

.ed-f4__csf {
  fill: #e9f4fb;
}

.ed-f4__denticulate {
  fill: #f6fbff;
  stroke: #9ccfe0;
  stroke-width: 0.8;
}

.ed-f4__cordset {
  transition: transform 0.9s var(--ease-out);
}

.ed-f4__cordset.is-eased {
  transform: translateX(6px);
}

.ed-f4__found {
  fill: none;
  opacity: 0;
  stroke: #8a4fe0;
  stroke-dasharray: 4 4;
  stroke-width: 1.6;
  transition: opacity 0.5s var(--ease-out);
}

.ed-f4__found.is-on {
  opacity: 0.9;
}

.ed-f4__guard {
  fill: #f07a2a;
  opacity: 0.11;
  transition: opacity 0.9s var(--ease-out);
}

.ed-f4__guard.is-calm {
  opacity: 0;
}

.ed-f4__block-edge {
  fill: none;
  stroke: #d8cfc8;
  stroke-width: 1.2;
}

.ed-f4__ripple {
  fill: none;
  opacity: 0;
  stroke: #8a4fe0;
  stroke-width: 1.4;
  animation: edRipple 4.6s var(--ease-out) both;
}

.ed-f4__ripple--1 { animation-delay: 0.2s; }
.ed-f4__ripple--2 { animation-delay: 0.8s; }
.ed-f4__ripple--3 { animation-delay: 1.4s; }
.ed-f4__ripple--4 { animation-delay: 2.1s; }
.ed-f4__ripple--5 { animation-delay: 2.8s; }
.ed-f4__ripple--6 { animation-delay: 3.5s; }

@keyframes edRipple {
  0% { opacity: 0; }
  25% { opacity: 0.75; }
  100% { opacity: 0.2; }
}

.ed-f4__probe {
  fill: #8a4fe0;
  stroke: #fff;
  stroke-width: 2;
  animation: edProbe 4.4s var(--ease-out) both;
}

.ed-f4__probe.is-deep {
  animation: none;
}

@keyframes edProbe {
  0% { transform: translateY(0); }
  15% { transform: translateY(8px); }
  30% { transform: translateY(34px); }
  45% { transform: translateY(56px); }
  62% { transform: translateY(100px); }
  78% { transform: translateY(140px); }
  92%, 100% { transform: translateY(172px); }
}

.ed-f4__hatch-bg { fill: #f1f2f4; }

.ed-f4__hatch {
  stroke: #a9afb8;
  stroke-width: 2;
}

.ed-f4__barrier {
  stroke: #9aa1ab;
  stroke-width: 1;
}

.ed-f4__tag {
  fill: #4b535c;
  font-family: var(--font-display), sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.ed-f4__tag--ease { fill: #8a4fe0; }

.ed-f4__ease {
  fill: none;
  stroke: #8a4fe0;
  stroke-linecap: round;
  stroke-width: 3;
}

.ed-f4__ease-head { fill: #8a4fe0; }

.ed-f4__letgo {
  fill: none;
  stroke: #8a4fe0;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: edLetGo 1.8s var(--ease-out) both;
}

.ed-f4__letgo--late {
  animation-delay: 0.55s;
}

@keyframes edLetGo {
  from { opacity: 0.9; transform: scale(0.6); }
  to { opacity: 0; transform: scale(3.2); }
}

/* The schematic hand (draw.tsx Hand): one silhouette, a sleeve cuff, soft shading. */
.ed-hand__sleeve {
  fill: #cfd9e8;
  stroke: #a6b6cc;
  stroke-width: 1.2;
}

.ed-hand__cuff {
  fill: #b9c7da;
}

.ed-hand__skin,
.ed-hand__thumb {
  fill: #f6d3bf;
  stroke: #d9a68b;
  stroke-linejoin: round;
  stroke-width: 1.3;
}

.ed-hand__thumb {
  fill: #f3cbb4;
}

.ed-hand__shade {
  fill: none;
  opacity: 0.55;
  stroke: #e6b79c;
  stroke-linecap: round;
  stroke-width: 5;
}

.ed-hand__light {
  fill: none;
  opacity: 0.7;
  stroke: #fdeee4;
  stroke-linecap: round;
  stroke-width: 4;
}

.ed-hand__line,
.ed-hand__crease {
  fill: none;
  opacity: 0.55;
  stroke: #d39f83;
  stroke-linecap: round;
  stroke-width: 1.1;
}

.ed-hand__nail {
  fill: #fdf1ea;
  stroke: #e4bca6;
  stroke-width: 0.8;
}

/* The hand in the release: its place follows the step, and it moves there smoothly. */
.ed-f4__hand {
  transition: transform 0.9s var(--ease-out);
}

.ed-f4__hand.is-s2 { transform: translateY(3px); }
.ed-f4__hand.is-s3 { transform: translate(9px, 3px); }
.ed-f4__hand.is-s4 { transform: translate(9px, 0); }

.ed-f4__hand-in {
  animation: edHandIn 1s var(--ease-out) both;
}

.ed-f4__hand-press {
  animation: edHandPress 1.5s ease-in-out 0.4s 2 both;
}

@keyframes edHandIn {
  from { opacity: 0; transform: translateY(-36px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes edHandPress {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(3px); }
  60% { transform: translateY(0); }
}

.ed-f4__pressure {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.ed-f4__pressure.is-on {
  opacity: 1;
}

.ed-f4__contact {
  fill: #1e232b;
  opacity: 0.1;
}

.ed-f4__depth path {
  fill: none;
  stroke: #c3c8cf;
  stroke-width: 1;
}

.ed-f4__depth circle {
  fill: #9aa1ab;
}

.ed-f4__depth.is-here path {
  stroke: #b48bf2;
}

.ed-f4__depth.is-here circle {
  fill: #8a4fe0;
}

.ed-f4__depth text {
  fill: #8a929c;
  font-size: 12px;
  font-weight: 500;
  transition: fill 0.3s var(--ease-out);
}

.ed-f4__depth.is-here text {
  fill: #8a4fe0;
  font-weight: 800;
}

.ed-f4__depth.is-sweep text {
  animation: edSweep 4.4s linear both;
}

.ed-f4__depth--1.is-sweep text { animation-delay: 0s; }
.ed-f4__depth--2.is-sweep text { animation-delay: 0.6s; }
.ed-f4__depth--3.is-sweep text { animation-delay: 1.2s; }
.ed-f4__depth--4.is-sweep text { animation-delay: 2s; }
.ed-f4__depth--5.is-sweep text { animation-delay: 2.8s; }
.ed-f4__depth--6.is-sweep text { animation-name: edSweepStay; animation-delay: 3.6s; }

@keyframes edSweep {
  0% { fill: #8a929c; }
  6%, 18% { fill: #8a4fe0; }
  30%, 100% { fill: #8a929c; }
}

@keyframes edSweepStay {
  0% { fill: #8a929c; }
  10%, 100% { fill: #8a4fe0; }
}

.ed-f4__monitor rect {
  fill: #fff;
  stroke: #e3e6ea;
}

.ed-f4__monitor-h {
  fill: #1e2530;
  font-family: var(--font-display), sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.ed-f4__monitor-sub {
  fill: #8a929c;
  font-size: 11.5px;
}

.ed-f4__trace {
  fill: none;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: opacity 0.8s var(--ease-out);
}

.ed-f4__trace--busy { stroke: #f07a2a; }
.ed-f4__trace--calm { opacity: 0; stroke: #8a4fe0; }
.ed-f4__trace.is-gone { opacity: 0; }
.ed-f4__trace.is-here { opacity: 1; }

.ed-f4__scroll > path {
  animation: edTrace 2.6s linear infinite;
}

@keyframes edTrace {
  from { transform: translateX(0); }
  to { transform: translateX(-132px); }
}

.ed-f4__state {
  fill: #e9761a;
  font-family: var(--font-display), sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.ed-f4__state.is-calm {
  fill: #8a4fe0;
}

.ed-f4__checks {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.ed-f4__checks.is-on {
  opacity: 1;
}

.ed-f4__checks-h {
  fill: #1e2530;
  font-family: var(--font-display), sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.ed-f4__check {
  opacity: 0;
}

.ed-f4__checks.is-on .ed-f4__check {
  transform-box: fill-box;
  transform-origin: center;
  animation: edRelIn 0.6s var(--ease-spring) both;
}

.ed-f4__check--1 { animation-delay: 0.3s !important; }
.ed-f4__check--2 { animation-delay: 0.9s !important; }
.ed-f4__check--3 { animation-delay: 1.5s !important; }

.ed-f4__check circle { fill: #8a4fe0; }

.ed-f4__check path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ed-f4__check text {
  fill: #2c333c;
  font-size: 12.5px;
  font-weight: 500;
}

.ed-f4__note,
.ed-f4__scale {
  fill: #9aa1ab;
  font-size: 11px;
}

/* 5 · a nerve ending */
.ed-f5__zone {
  fill: #9aa1ab;
  font-family: var(--font-display), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ed-f5__membrane { fill: #fbe3cf; }

.ed-f5__heads circle {
  fill: #f3c7a7;
  stroke: #e2ac87;
  stroke-width: 0.7;
}

.ed-f5__receptor path {
  fill: none;
  stroke: #8f7bd0;
  stroke-linecap: round;
  stroke-width: 3;
}

.ed-f5__immune-body {
  stroke: #a99ad6;
  stroke-width: 1.2;
}

.ed-f5__immune-glow {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.ed-f5__immune-glow circle {
  fill: #c2418f;
  fill-opacity: 0.18;
}

.ed-f5__immune.is-active .ed-f5__immune-glow {
  opacity: 1;
}

.ed-f5__granule { fill: #b5a6e2; }
.ed-f5__piezo1 { fill: #7d6bc6; }

.ed-f5__small {
  fill: #6b7380;
  font-size: 11.5px;
  font-weight: 500;
}

.ed-f5__small--strong {
  fill: #3c434d;
  font-weight: 700;
}

.ed-f5__med--bk circle { fill: #e5484d; opacity: 0.9; }

.ed-f5__med--pg path {
  fill: none;
  stroke: #f07a2a;
  stroke-linecap: round;
  stroke-width: 3;
}

.ed-f5__med--ck circle { fill: #c2418f; opacity: 0.85; }

.ed-f5__meds {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}

.ed-f5__meds.is-in {
  opacity: 1;
}

.ed-f5__meds.is-clearing {
  animation: edClear 2.4s var(--ease-out) 0.4s both;
}

@keyframes edClear {
  from { opacity: 1; transform: translate(0, 0); }
  to { opacity: 0; transform: translate(40px, -60px); }
}

.ed-f5__drift {
  animation: edDrift 3.4s ease-in-out infinite alternate;
}

.ed-f5__drift--2 { animation-delay: -0.9s; animation-duration: 3.9s; }
.ed-f5__drift--3 { animation-delay: -1.7s; animation-duration: 3.1s; }
.ed-f5__drift--4 { animation-delay: -2.4s; animation-duration: 4.2s; }

@keyframes edDrift {
  from { transform: translate(-3px, -8px); }
  to { transform: translate(3px, 12px); }
}

.ed-f5__ch-half {
  fill: #f6dc84;
  stroke: #cfa23c;
  stroke-width: 1.2;
  transition: fill 0.5s var(--ease-out), stroke 0.5s var(--ease-out);
}

.ed-f5__ch.is-up .ed-f5__ch-half {
  fill: #f8b77a;
  stroke: #e0782b;
}

.ed-f5__pore { fill: #fff6dd; }

.ed-f5__ch-label {
  fill: #3c434d;
  font-family: var(--font-display), sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.ed-f5__plus { fill: #f07a2a; }

.ed-f5__plus-mark {
  stroke: #fff;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.ed-f5__ion {
  fill: #2d61e6;
  opacity: 0;
  animation: edIon 2.8s linear infinite;
}

.ed-f5__ion--2 { animation-delay: -0.93s; }
.ed-f5__ion--3 { animation-delay: -1.86s; }

.ed-f5__ions.is-fast .ed-f5__ion {
  animation-duration: 1.1s;
}

.ed-f5__ions.is-fast .ed-f5__ion--2 { animation-delay: -0.37s; }
.ed-f5__ions.is-fast .ed-f5__ion--3 { animation-delay: -0.73s; }

@keyframes edIon {
  0% { opacity: 0; transform: translateY(0); }
  15%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(52px); }
}

.ed-f5__switch {
  fill: #fff;
  stroke: #d6dae0;
  transition: fill 0.5s var(--ease-out), stroke 0.5s var(--ease-out);
}

.ed-f5__switch-t {
  fill: #8a929c;
  font-family: var(--font-display), sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.ed-f5__switches.is-on .ed-f5__switch {
  fill: #fff1e6;
  stroke: #f0a065;
}

.ed-f5__switches.is-on .ed-f5__switch-t {
  fill: #c4610f;
}

.ed-f5__switch-arrow {
  fill: none;
  opacity: 0;
  stroke: #f0a065;
  stroke-dasharray: 3 4;
  stroke-width: 1.4;
  transition: opacity 0.5s var(--ease-out);
}

.ed-f5__switches.is-on .ed-f5__switch-arrow {
  opacity: 0.9;
}

.ed-f5__clear {
  fill: none;
  stroke: #6fb3c6;
  stroke-dasharray: 6 6;
  stroke-width: 2.4;
}

/* 6 · the cord in its dural tube */
.ed-f6__skull {
  stroke: #cdb68d;
  stroke-width: 1.1;
}

.ed-f6__muscle {
  fill: #f2b3b9;
  stroke: #d9838d;
  stroke-width: 1;
}

.ed-f6__bridge,
.ed-f6__filum {
  fill: none;
  stroke: #9aa9b9;
  stroke-linecap: round;
  stroke-width: 1.6;
  transition: stroke 0.5s var(--ease-out), stroke-width 0.5s var(--ease-out);
}

.ed-f6__coccyx ellipse {
  stroke: #cdb68d;
  stroke-width: 1;
}

.ed-f6__ends.is-lit .ed-f6__bridge,
.ed-f6__ends.is-lit .ed-f6__filum {
  stroke: #18a7c9;
  stroke-width: 2.4;
}

.ed-f6__tube {
  fill: #dfe7f0;
  fill-opacity: 0.82;
  stroke: #9fb3c8;
  stroke-width: 1.6;
}

.ed-f6__cord {
  stroke: #cfa23c;
  stroke-width: 1.2;
}

.ed-f6__cauda {
  fill: none;
  stroke: #e2bd55;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.ed-f6__sulcus {
  opacity: 0.5;
  stroke: #cfa23c;
  stroke-width: 1;
}

.ed-f6__cordlight {
  opacity: 0.75;
  stroke: #fff6cf;
  stroke-linecap: round;
  stroke-width: 3;
}

.ed-f6__core {
  transition: transform 0.9s var(--ease-out);
}

.ed-f6__core.is-gliding {
  animation: edCordGlide 3.2s ease-in-out infinite;
}

.ed-f6__core.is-nudged {
  transform: translateX(-4px);
}

.ed-f6__core.is-beating {
  animation: edCordBeat 1.1s ease-in-out infinite;
}

@keyframes edCordGlide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}

@keyframes edCordBeat {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-1.4px); }
}

.ed-f6__lig {
  fill: #f6fbff;
  stroke: #a7d3e2;
  stroke-linejoin: round;
  stroke-width: 1.1;
  transition: fill 0.5s var(--ease-out), stroke 0.5s var(--ease-out);
}

.ed-f6__tip {
  fill: #a7d3e2;
  transition: fill 0.5s var(--ease-out);
}

.ed-f6__ligs.is-lit .ed-f6__lig {
  fill: #c9eef7;
  stroke: #18a7c9;
  stroke-width: 1.5;
}

.ed-f6__ligs.is-lit .ed-f6__tip {
  fill: #18a7c9;
}

.ed-f6__bundle {
  fill: none;
  opacity: 0.6;
  stroke: #e0b14a;
  stroke-linecap: round;
  stroke-width: 1.4;
  transition: opacity 0.5s var(--ease-out), stroke-width 0.5s var(--ease-out);
}

.ed-f6__branch {
  fill: none;
  opacity: 0.55;
  stroke: #e0b14a;
  stroke-linecap: round;
  stroke-width: 1;
}

.ed-f6__ending {
  fill: #e9a23b;
  transform-box: fill-box;
  transform-origin: center;
}

.ed-f6__plexus.is-lit .ed-f6__bundle {
  opacity: 1;
  stroke: #f0a63a;
  stroke-width: 1.9;
}

.ed-f6__plexus.is-lit .ed-f6__branch {
  opacity: 0.95;
}

.ed-f6__plexus.is-lit .ed-f6__ending,
.ed-f6__plexus.is-local .ed-f6__ending.is-near {
  fill: #f07a2a;
  animation: edThrob 1.4s ease-in-out infinite;
}

.ed-f6__cut {
  fill: none;
  stroke: #8ea6bf;
  stroke-dasharray: 5 4;
  stroke-width: 1.4;
}

.ed-f6__waves path {
  fill: none;
  stroke: #8a4fe0;
  stroke-linecap: round;
  stroke-width: 1.6;
  animation: edWave 1.8s ease-out infinite;
}

.ed-f6__waves path:nth-child(2) { animation-delay: 0.3s; }
.ed-f6__waves path:nth-child(3) { animation-delay: 0.6s; }

@keyframes edWave {
  0% { opacity: 0; }
  30% { opacity: 0.85; }
  100% { opacity: 0; }
}

.ed-f6__hand.is-working {
  animation: edHandPress 2.4s ease-in-out infinite;
}

.ed-f6__q {
  fill: #fff;
  stroke: #4b535c;
  stroke-width: 1.4;
}

.ed-f6__q-mark {
  fill: #4b535c;
  font-family: var(--font-display), sans-serif;
  font-size: 17px;
  font-weight: 800;
}

.ed-f6__q-label {
  fill: #1e2530;
  font-family: var(--font-display), sans-serif;
  font-size: 13px;
  font-weight: 700;
}

/* 7 · a session */
.ed-f7__arc > path:first-child {
  fill: none;
  stroke: #d3d8de;
  stroke-width: 2.4;
  transition: stroke 0.4s var(--ease-out);
}

.ed-f7__head {
  fill: #d3d8de;
  transition: fill 0.4s var(--ease-out);
}

.ed-f7__arc.is-active > path:first-child { stroke: #18a7c9; }
.ed-f7__arc.is-active .ed-f7__head { fill: #18a7c9; }
.ed-f7__arc--again > path:first-child { stroke-dasharray: 5 5; }
.ed-f7__arc--again.is-active > path:first-child { stroke: #8a4fe0; }
.ed-f7__arc--again.is-active .ed-f7__head { fill: #8a4fe0; }

.ed-f7__again {
  fill: #6b7380;
  font-family: var(--font-display), sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.ed-f7__again--sub {
  font-family: var(--font-body), sans-serif;
  font-weight: 400;
}

.ed-f7__arc--again.is-active .ed-f7__again {
  fill: #8a4fe0;
}

.ed-f7__node circle {
  fill: #fff;
  stroke: #d6dae0;
  stroke-width: 2;
  transition: fill 0.4s var(--ease-out), stroke 0.4s var(--ease-out);
}

.ed-f7__node.is-active circle {
  fill: #1d232b;
  stroke: #1d232b;
}

.ed-f7__node.is-done circle {
  stroke: #b48bf2;
}

.ed-f7__n {
  fill: #4b535c;
  font-family: var(--font-display), sans-serif;
  font-size: 16px;
  font-weight: 800;
}

.ed-f7__node.is-active .ed-f7__n {
  fill: #fff;
}

.ed-f7__name {
  fill: #1e2530;
  font-family: var(--font-display), sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.ed-f7__sub {
  fill: #8a929c;
  font-size: 12px;
}

.ed-body--small {
  stroke-width: 1;
}

.ed-f7__find {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.ed-f7__find.is-found {
  opacity: 1;
}

.ed-f7__find-dot {
  fill: #f07a2a;
  stroke: #fff;
  stroke-width: 1.4;
  transition: fill 0.5s var(--ease-out);
}

.ed-f7__find-halo {
  fill: #f07a2a;
  opacity: 0.18;
  transition: fill 0.5s var(--ease-out);
}

.ed-f7__find.is-released .ed-f7__find-dot,
.ed-f7__find.is-released .ed-f7__find-halo {
  fill: #8a4fe0;
}

.ed-f7__find.is-working .ed-f7__find-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: edThrob 1.4s ease-in-out infinite;
}

.ed-f7__levels {
  fill: #8a929c;
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.ed-f7__levels.is-on {
  opacity: 1;
}

.ed-f7__card {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.ed-f7__card.is-on {
  opacity: 1;
}

.ed-f7__card rect {
  fill: #fff;
  stroke: #e3e6ea;
}

.ed-f7__card-h {
  fill: #8a4fe0;
  font-family: var(--font-display), sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ed-f7__card-t {
  fill: #3c434d;
  font-size: 12px;
  font-weight: 500;
}

/* Parts of a drawing that open their step (draw.tsx hot / Label go). */
.ed-svg .is-hot {
  cursor: pointer;
  outline: none;
}

.ed-lab__hit {
  fill: transparent;
  stroke: none;
  transition: fill var(--dur-fast) var(--ease-out);
}

.ed-svg .is-hot:hover .ed-lab__hit {
  fill: rgba(138, 79, 224, 0.08);
}

.ed-svg .is-hot:hover .ed-lab__title,
.ed-svg .is-hot:hover .ed-f3__brain-label,
.ed-svg .is-hot:hover .ed-f5__ch-label,
.ed-svg .is-hot:hover .ed-f5__small,
.ed-svg .is-hot:hover .ed-f4__depth text,
.ed-svg .is-hot:hover .ed-f2__row-name,
.ed-svg .is-hot:hover .ed-f7__name {
  fill: #6d3bc4;
}

.ed-svg .is-hot:focus-visible .ed-lab__hit {
  fill: rgba(138, 79, 224, 0.1);
  stroke: #8a4fe0;
  stroke-width: 2;
}

.ed-svg .ed-f2__row.is-hot:focus-visible .ed-f2__row-box,
.ed-svg .ed-f4__monitor.is-hot:focus-visible rect {
  stroke: #8a4fe0;
  stroke-width: 2.5;
}

.ed-svg .ed-f7__node.is-hot:focus-visible circle {
  stroke: #8a4fe0;
  stroke-width: 3;
}

.ed-f5__switch-icon {
  fill: none;
  stroke: #a8afb8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: stroke 0.5s var(--ease-out);
}

.ed-f5__switches.is-on .ed-f5__switch-icon {
  stroke: #c4610f;
}

/* Simple or Advanced, at the start of the chapter bar. */
.edu-mode {
  display: inline-flex;
  flex: none;
  margin-right: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  padding: 3px;
}

.edu-mode__opt {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: none;
  padding: 4px 12px;
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.edu-mode__opt[aria-pressed="true"] {
  background: #1d232b;
  color: #fff;
}

.edu-ref {
  color: var(--info-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 2px;
}

.edu-ref:hover {
  text-decoration-color: currentColor;
}

.edu-card__refs {
  margin-top: 10px !important;
  font-size: 12px !important;
}

/* 8 · felt behind the knee (ChainFigure) */
.ed-f8__dura {
  stroke: #9fb3c8;
  stroke-width: 1;
  opacity: 0.85;
}

.ed-f8__root {
  stroke-width: 2.4;
}

.ed-f8__glow {
  fill: none;
  opacity: 0;
  stroke: #f2c84b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 14;
  transition: opacity 0.6s var(--ease-out);
}

.ed-f8__line.is-lit .ed-f8__glow {
  opacity: 0.38;
}

.ed-f8__tendon {
  stroke-width: 4;
}

.ed-f8__tense {
  fill: none;
  stroke: #e9761a;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.ed-f8__node {
  fill: #fff;
  stroke: #8a929c;
  stroke-width: 1.4;
  transition: fill 0.5s var(--ease-out), stroke 0.5s var(--ease-out);
}

.ed-f8__node.is-lit {
  fill: #6e8cf0;
  stroke: #2d61e6;
}

.ed-f8__hand {
  transform-box: fill-box;
  transform-origin: center;
}

.ed-f8__hand.is-working {
  animation: edHandIn 0.9s var(--ease-out) both, edHandPress 2.4s ease-in-out 1s infinite;
}

.ed-f8__skin {
  fill: #f6dccb;
}

.ed-f8__lmus {
  stroke: #d9838d;
  stroke-width: 1;
  transition: stroke 0.6s var(--ease-out);
}

.ed-f8__lmus.is-tight {
  stroke: #f07a2a;
  stroke-width: 1.6;
}

.ed-f8__rib {
  fill: none;
  stroke: #d8c6a2;
  stroke-linecap: round;
  stroke-width: 6;
}

.ed-f8__organ {
  stroke: #dba189;
  stroke-width: 1;
}

.ed-f8__cell-glow {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.ed-f8__cell.is-lit .ed-f8__cell-glow {
  opacity: 1;
}

.ed-f8__cell-soma {
  fill: #6e8cf0;
  stroke: #fff;
  stroke-width: 1;
}

.ed-f8__crease {
  fill: none;
  opacity: 0.6;
  stroke: #d9b48c;
  stroke-dasharray: 4 4;
  stroke-width: 1.2;
}

/* 8 · the chain reshaped (18 Oct 2026): the facet joint, guarding spreading along the cord, the other side in pink, the arm */
.ed-f8__facet ellipse { fill: #fbe9df; stroke: #c2413a; stroke-width: 1.4; }
.ed-f8__spread { fill: #f07a2a; opacity: 0.16; }
.ed-f8__left.is-tight .ed-musc__edge { stroke: #e86aa0; stroke-width: 1.8; }
.ed-f8__cross { fill: none; stroke: #e86aa0; stroke-linecap: round; stroke-width: 2.4; }
.ed-f8__cross-head { fill: #e86aa0; }
.ed-f8__arm .ed-f8__glow { stroke-width: 10; }

/* 9 · your gut, like a garden (GardenFigure): teal leaves and pastel flowers, no green */
.ed-f9__ground { fill: #f1e7da; }
.ed-f9__beam { opacity: 0; transition: opacity 0.7s var(--ease-out); }
.ed-f9__beam.is-on { opacity: 1; }
.ed-f9__sun { opacity: 0.55; transition: opacity 0.6s var(--ease-out); }
.ed-f9__sun.is-on { opacity: 1; }
.ed-f9__disc { stroke: #e3a92b; stroke-width: 1.2; }
.ed-f9__ray { stroke: #f2b93b; stroke-linecap: round; stroke-width: 3; }
.ed-f9__grit circle { fill: #8f6442; opacity: 0.45; }
.ed-f9__moist { fill: #4a6f8f; opacity: 0; transition: opacity 0.8s var(--ease-out); }
.ed-f9__moist.is-on { opacity: 0.34; }
.ed-f9__path { fill: none; stroke: #ecd9c2; stroke-linecap: round; stroke-width: 11; }
.ed-f9__path-line { fill: none; opacity: 0.7; stroke: #c9a882; stroke-dasharray: 2 6; stroke-linecap: round; stroke-width: 2; }
.ed-f9__bed-edge { fill: none; stroke: #8f6442; stroke-width: 1.4; }
.ed-f9__plank { stroke: #c9a27a; stroke-width: 1.1; }
.ed-f9__microbe { opacity: 0; transition: opacity 0.6s var(--ease-out); }
.ed-f9__microbes.is-on .ed-f9__microbe { opacity: 0.95; }
.ed-f9__microbe--1 { fill: #f5b4c6; }
.ed-f9__microbe--2 { fill: #c9b6f2; }
.ed-f9__microbe--3 { fill: #f8d77c; }
.ed-f9__microbe--4 { fill: #9fd6e6; }
.ed-f9__microbe--5 { fill: #f7c09b; }
.ed-f9__root { fill: none; opacity: 0.55; stroke: #7c5537; stroke-linecap: round; stroke-width: 1.2; }
.ed-f9__stem { fill: none; stroke: #4f9c95; stroke-linecap: round; stroke-width: 2; }
.ed-f9__leaf { fill: #8fd0c7; stroke: #4f9c95; stroke-width: 1; }
.ed-f9__bush { fill: #9ad3cb; stroke: #4f9c95; stroke-width: 1; }
.ed-f9__grass { fill: none; stroke: #5aa8a0; stroke-linecap: round; stroke-width: 2.2; }
.ed-f9__petal { stroke-width: 0.8; }
.ed-f9__heart { fill: #f6c445; stroke: #d89b22; stroke-width: 0.8; }
.ed-f9__plant--1 .ed-f9__petal { fill: #f5b4c6; stroke: #d97d97; }
.ed-f9__plant--2 .ed-f9__petal { fill: #cdb9f3; stroke: #9a7fd6; }
.ed-f9__plant--3 .ed-f9__petal { fill: #f8d77c; stroke: #d6ad3f; }
.ed-f9__plant--4 .ed-f9__petal { fill: #a9dcea; stroke: #6fb1c6; }
.ed-f9__plant--5 .ed-f9__petal { fill: #f7c09b; stroke: #d98c5f; }
.ed-f9__plants > g { transform-box: fill-box; transform-origin: center bottom; transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out); }
.ed-f9__plants.is-on > g { filter: saturate(1.25) brightness(1.03); }
.ed-f9__plants.is-fed > g { transform: scale(1.06); }
.ed-f9__sprout { fill: #8fd0c7; stroke: #4f9c95; stroke-linecap: round; stroke-width: 1.6; }
.ed-f9__watch { fill: none; stroke: #8a4fe0; stroke-dasharray: 3 3; stroke-width: 1.5; }
.ed-f9__day { fill: #5b6470; font-size: 10.5px; font-weight: 600; }
.ed-f9__can-body, .ed-f9__can-spout { fill: #b9c6d6; stroke: #7d8fa6; stroke-width: 1.2; }
.ed-f9__can-handle { fill: none; stroke: #7d8fa6; stroke-linecap: round; stroke-width: 4; }
.ed-f9__can-rose { fill: #a3b3c6; stroke: #7d8fa6; stroke-width: 1; }
.ed-f9__drop { fill: #5cc3dc; animation: edDrop 1.1s ease-in infinite; }
.ed-f9__drop--1 { animation-delay: 0.22s; }
.ed-f9__drop--2 { animation-delay: 0.44s; }
.ed-f9__drop--3 { animation-delay: 0.66s; }
.ed-f9__drop--4 { animation-delay: 0.88s; }
@keyframes edDrop {
  from { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  to { opacity: 0; transform: translateY(128px); }
}
.ed-f9__person { fill: #f3cdb7; stroke: #d9aa8f; stroke-width: 1.2; }
.ed-f9__arm { fill: none; stroke: #e0b39a; stroke-linecap: round; stroke-width: 6; }
.ed-f9__calm { opacity: 0; transition: opacity 0.8s var(--ease-out) 1.2s; }
.ed-f9__calm.is-on { opacity: 1; }
.ed-f9__rushed { fill: none; stroke: #e9761a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.ed-f9__ring { fill: none; stroke: #8a4fe0; stroke-dasharray: 4 3; stroke-width: 2; }
.ed-f9__link { fill: none; stroke: #8a4fe0; stroke-dasharray: 3 5; stroke-linecap: round; stroke-width: 2; }
.ed-f9__stone { fill: #e4dbcf; stroke: #c8bba9; stroke-width: 1; }
.ed-f9__foot ellipse { fill: #8a7a68; }
.ed-f9__foot { animation: edRelIn 0.5s var(--ease-out) both; transform-box: fill-box; transform-origin: center; }
.ed-f9__foot--1 { animation-delay: 0.2s; }
.ed-f9__foot--2 { animation-delay: 0.7s; }
.ed-f9__foot--3 { animation-delay: 1.2s; }
.ed-f9__foot--4 { animation-delay: 1.7s; }
.ed-f9__foot--5 { animation-delay: 2.2s; }
.ed-f9__foot--6 { animation-delay: 2.7s; }

/* 3 · the segment's new connections (18 Oct 2026): the vagus lit in its step, immune cells in the inflamed bowel, the chain lit */
.ed-f3__vagus { opacity: 0.55; transition: opacity 0.5s var(--ease-out); }
.ed-f3__vagus.is-on { opacity: 1; }
.ed-f3__immune { fill: #fbe3d7; stroke: #e5484d; stroke-width: 1.2; }
.ed-f3__chain--on ellipse { fill: #f9d7b7; stroke: #f07a2a; }

/* 10 · why a brief glide can calm it (GlideFigure) */
.ed-f10__skin { fill: #f6dccb; }
.ed-f10__tissue-edge { fill: none; stroke: #e0b39a; stroke-width: 1.2; }
.ed-f10__muscle { transition: opacity 0.8s var(--ease-out); }
.ed-f10__muscle.is-soft { opacity: 0.62; }
.ed-f10__spindle path:first-child { fill: #fbe9df; stroke: #d97d97; stroke-width: 1.2; }
.ed-f10__spindle-coil { fill: none; stroke: #c9a23a; stroke-width: 1.2; }
.ed-f10__ending path { fill: none; stroke: #cfa23c; stroke-linecap: round; stroke-width: 2; }
.ed-f10__channel { fill: #fff6cf; stroke: #cfa23c; stroke-width: 1.2; transition: fill 0.4s var(--ease-out); }
.ed-f10__channel.is-open { fill: #5aa8e6; stroke: #2d61e6; }
.ed-f10__hand { transform-box: fill-box; transform-origin: center; }
.ed-f10__hand.is-gliding { animation: edGlide 2.6s ease-in-out infinite; }
@keyframes edGlide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(14px); }
}
.ed-f10__ease { fill: none; stroke: #8a4fe0; stroke-linecap: round; stroke-width: 3; }
.ed-f10__ease-head { fill: #8a4fe0; }
.ed-f10__ease-text { fill: #6b3fb8; font-size: 11px; font-weight: 700; text-anchor: middle; }
.ed-f10__gate-glow { opacity: 0; transition: opacity 0.5s var(--ease-out); }
.ed-f10__gate.is-on .ed-f10__gate-glow { opacity: 1; }
.ed-f10__gate-cell { fill: #cdb9f3; stroke: #8a4fe0; stroke-width: 1.4; }
.ed-f10__gate-minus { stroke: #4b2a8f; stroke-linecap: round; stroke-width: 1.6; }
.ed-f10__lymph { fill: none; opacity: 0.8; stroke: #a9d5ee; stroke-linecap: round; stroke-width: 9; }
.ed-f10__immune circle:first-child { fill: #fbe3d7; stroke: #e5484d; stroke-width: 1.2; transition: stroke 0.8s var(--ease-out), fill 0.8s var(--ease-out); }
.ed-f10__nucleus { fill: #e7a3a6; }
.ed-f10__immune.is-calm circle:first-child { fill: #f3effb; stroke: #a98fca; }
.ed-f10__chem { fill: #e5484d; }
.ed-f10__chems.is-draining .ed-f10__chem { animation: edDrain 2.4s ease-in 0.8s both; }
.ed-f10__chem--1 { animation-delay: 1s; }
.ed-f10__chem--2 { animation-delay: 1.2s; }
.ed-f10__chem--3 { animation-delay: 1.4s; }
.ed-f10__chem--4 { animation-delay: 1.6s; }
.ed-f10__chem--5 { animation-delay: 1.8s; }
@keyframes edDrain {
  to { opacity: 0; transform: translate(60px, 30px); }
}
.ed-f10__resolvin { fill: #8a4fe0; }

/* Reduced motion: no tour, no running signals; a release shows its end state. */
@media (prefers-reduced-motion: reduce) {
  .ed-sk {
    display: none;
  }

  .ed-throb,
  .ed-f2__volume rect,
  .ed-f4__scroll > path,
  .ed-f5__drift,
  .ed-f5__ion,
  .ed-f6__core.is-gliding,
  .ed-f6__core.is-beating,
  .ed-f6__waves path,
  .ed-f6__hand.is-working,
  .ed-f8__hand.is-working,
  .ed-f9__drop,
  .ed-f10__hand.is-gliding,
  .ed-f6__plexus .ed-f6__ending,
  .ed-cordx__descend,
  .ed-f7__find.is-working .ed-f7__find-halo {
    animation: none !important;
  }

  .ed-rel-out,
  .ed-rel-in,
  .ed-rel-fade,
  .ed-f4__ripple,
  .ed-f4__probe,
  .ed-f4__letgo,
  .ed-f4__depth.is-sweep text,
  .ed-f4__checks.is-on .ed-f4__check,
  .ed-f4__hand-in,
  .ed-f4__hand-press,
  .ed-f5__meds.is-clearing,
  .ed-f9__foot,
  .ed-f10__chems.is-draining .ed-f10__chem {
    animation-delay: 0s !important;
    animation-duration: 0.01s !important;
  }
}

/* The gut garden (Lee, 18 Oct 2026: "signficiantly improve the layout also - confusing to follow through here"):
   a source line, a guide to five numbered sections, the plan as three phases shown one at a time, plain checklists. */
.edu-garden {
  margin-top: 6px;
}

.edu-source {
  display: inline-block;
  margin: 0 0 4px;
  border-left: 3px solid #8fd0c7;
  padding: 2px 10px;
  color: var(--text-2);
  font-size: 13.5px;
  font-style: italic;
}

.edu-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 14px 0 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 10px 12px;
}

.edu-jump__h {
  margin-right: 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.edu-jump__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 5px 11px 5px 6px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.edu-jump__btn:hover {
  border-color: #58bb72;
}

.edu-jump__n,
.edu-gsec__n {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #2f7a43;
  color: #fff;
  font-weight: 800;
}

.edu-jump__n {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.edu-gsec {
  margin-top: 34px;
  scroll-margin-top: calc(var(--top-bar-height) + 80px);
}

.edu-gsec__h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.edu-gsec__n {
  flex: none;
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.edu-gsec__sub {
  margin: 24px 0 10px;
  font-size: 15.5px;
  font-weight: 800;
}

.edu-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.edu-tiles--four {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.edu-tile {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 16px;
}

.edu-tile--soft {
  background: #f6fbfa;
}

/* the gut garden's seafood card under the needs (Lee, 19 Oct 2026: "highlight importance of seafood") */
.edu-tile--standout {
  margin-top: 12px;
  border-color: #d9cff5;
  border-left: 4px solid #6e4fcc;
  background: #f8f6fe;
}

.edu-tile--standout h5 {
  color: #4b3596;
}

.edu-tile h5 {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 800;
}

.edu-tile p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.edu-before,
.edu-gp {
  max-width: 860px;
  border-radius: 14px;
  padding: 16px 20px;
}

.edu-before {
  border: 1px solid #ecdcb5;
  background: #fbf5e6;
  color: #5c4310;
}

.edu-gp {
  border: 1px solid #f0c9c5;
  background: #fdf4f3;
  color: #6b2620;
}

.edu-before p,
.edu-gp p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
}

.edu-before ul,
.edu-gp ul {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.6;
}

.edu-gp__after {
  margin-top: 10px !important;
  font-weight: 600;
}

.edu-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.edu-phases__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px 14px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.edu-phases__tab:hover {
  border-color: #8fd3a4;
}

.edu-phases__tab.is-on {
  border-color: #2f7a43;
  background: #e8f5ed;
}

.edu-phases__n {
  color: #2b6e3d;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.edu-phases__name {
  font-size: 15.5px;
  font-weight: 800;
}

.edu-phases__when {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.edu-phase-panel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 18px 20px;
}

.edu-phase-panel__goal {
  margin: 0;
  border-left: 3px solid #58bb72;
  padding-left: 12px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.55;
}

.edu-phase-panel__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

/* four groups: two balanced columns read top to bottom (a grid row stretched the short group to the long
   one's height), one column on a narrow screen */
.edu-phase-panel__groups--pairs {
  display: block;
  columns: 280px 2;
  column-gap: 14px;
}

.edu-phase-panel__groups--pairs > .edu-checks {
  margin-bottom: 14px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.edu-phase-panel__groups--pairs > .edu-checks:last-child {
  margin-bottom: 0;
}

.edu-checks {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 12px 14px;
}

.edu-checks h5 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.edu-checks ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.edu-checks li {
  position: relative;
  padding: 6px 0 6px 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  line-height: 1.5;
}

.edu-checks li:first-child {
  border-top: 0;
}

.edu-checks li::before {
  position: absolute;
  top: 8px;
  left: 2px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: #e8f5ed;
  color: #2f7a43;
  content: "✓";
  font-size: 10.5px;
  font-weight: 800;
}

.edu-phase-panel__nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.edu-phase-panel__btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 8px 16px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.edu-phase-panel__btn--next {
  border-color: #2f7a43;
  background: #2f7a43;
  color: #fff;
}

.edu-table--score th[scope="row"] {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .edu-phases {
    grid-template-columns: 1fr;
  }

  .edu-phase-panel {
    padding: 16px 14px;
  }
}

/* On a phone the checklist reads as one block per row: the area, what to do, how to check */
@media (max-width: 560px) {
  .edu-table--score thead {
    display: none;
  }

  .edu-table--score tr {
    display: block;
    border-bottom: 1px solid var(--line-soft);
    padding: 10px 0;
  }

  .edu-table--score tbody tr:last-child {
    border-bottom: 0;
  }

  .edu-table--score th[scope="row"],
  .edu-table--score td {
    display: block;
    border: 0;
    padding: 2px 14px;
    white-space: normal;
  }

  .edu-table--score td:last-child {
    color: var(--muted);
    font-size: 12.5px;
  }

  .edu-table--score td:last-child::before {
    content: "Check: ";
    font-weight: 700;
  }
}

/* SAFARI 15 HAS NO CONTAINER QUERIES (iOS 15 is the last update for the iPhone 6s, 7 and the first SE):
   without this the explainer never stacks, and on a phone its drawing shrinks to a few pixels across.
   There the window's width stands in for the drawing's own. These two blocks are copies of the
   @container blocks above (test/education.test.cjs checks they stay the same). */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .ed-bx__body {
      grid-template-columns: 1fr;
    }

    .ed-bx__stage {
      padding: 10px 8px;
    }

    .ed-bx__story {
      padding: 14px 16px 16px;
    }

    /* On a narrow stage the controls sit right under the drawing, and the
       steps become numbered chips, so Next is always next to what it moves. */
    .ed-bx__label { order: -2; margin-bottom: 10px; }
    .ed-bx__controls { order: -1; margin: 0 0 12px; padding-top: 0; }
    .ed-bx__nav { padding: 8px 12px; }
    .ed-bx__steps {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      border-top: 0;
    }

    .ed-bx__step {
      display: inline-grid;
      width: auto;
      min-width: 38px;
      min-height: 34px;
      grid-template-columns: auto;
      justify-items: center;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      padding: 6px 10px;
    }

    .ed-bx__step[aria-pressed="true"] {
      border-color: #b48bf2;
      background: rgba(138, 79, 224, 0.28);
    }

    .ed-bx__name { display: none; }
    .ed-bx__n { color: inherit; font-size: 12px; }
    .ed-bx__panels { margin-top: 12px; }
  }

  @media (max-width: 620px) {
    .ed-svg .ed-lab__title { font-size: 18px; }
    .ed-svg .ed-lab__title--long { display: none; }
    .ed-svg .ed-lab__title--short { display: inline; }
    .ed-svg .ed-lab__sub,
    .ed-svg .ed-lab--minor,
    .ed-svg .ed-f4__note,
    .ed-svg .ed-f11__note,
    .ed-svg .ed-f4__scale,
    .ed-svg .ed-f2__row-zone,
    .ed-svg .ed-f2__foot--sub { display: none; }
    .ed-svg .ed-f2__row-name { font-size: 17px; }
    .ed-svg .ed-f2__foot { font-size: 15px; }
    .ed-svg .ed-f4__depth text,
    .ed-svg .ed-f4__monitor-sub,
    .ed-svg .ed-f5__small,
    .ed-svg .ed-f7__sub,
    .ed-svg .ed-f7__card-t { font-size: 15px; }
    .ed-svg .ed-f5__ch-label,
    .ed-svg .ed-f7__name,
    .ed-svg .ed-f4__monitor-h,
    .ed-svg .ed-f4__checks-h,
    .ed-svg .ed-f4__check text { font-size: 17px; }
  }
}

/* 11 · Super Gut yoghurt (YoghurtFigure, Lee, 19 Oct 2026): a jar in a sous vide's water bath, a clock, a fridge */
.ed-f11__bench { fill: #f1e7da; }
.ed-f11__face { fill: #ffffff; stroke: #a9b4c0; stroke-width: 2; }
.ed-f11__tick { stroke: #a9b4c0; stroke-linecap: round; stroke-width: 1.6; }
.ed-f11__hand { fill: none; stroke: #3a424d; stroke-linecap: round; }
.ed-f11__hand--min.is-on { transform-box: fill-box; transform-origin: 50% 100%; animation: edSpin 1.8s linear infinite; }
@keyframes edSpin {
  to { transform: rotate(360deg); }
}
.ed-f11__pin { fill: #3a424d; }
.ed-f11__dial { fill: none; opacity: 0; stroke: #f59a5a; stroke-dasharray: 3 4; stroke-width: 3; transition: opacity 0.5s var(--ease-out); }
.ed-f11__dial.is-on { opacity: 1; }
.ed-f11__tub-fill { fill: #f5fafd; }
.ed-f11__tub { fill: none; stroke: #9fb4c6; stroke-width: 1.8; }
.ed-f11__rim { fill: none; stroke: #9fb4c6; stroke-linecap: round; stroke-width: 3; }
.ed-f11__water { fill: #d5ebf7; }
.ed-f11__warm { fill: #fcdcc0; opacity: 0; transition: opacity 0.8s var(--ease-out); }
.ed-f11__warm.is-on { opacity: 0.8; }
.ed-f11__surface { fill: none; stroke: #8fc3df; stroke-width: 1.4; }
.ed-f11__jar { transition: opacity 0.6s var(--ease-out); }
.ed-f11__jar.is-gone { opacity: 0.25; }
.ed-f11__glass { fill: #ffffff; fill-opacity: 0.55; stroke: #a7b4c1; stroke-width: 1.4; }
.ed-f11__shine { fill: none; stroke: #ffffff; stroke-linecap: round; stroke-opacity: 0.95; stroke-width: 3; }
.ed-f11__milk { fill: #fbf2e1; }
.ed-f11__milk.is-filling { transform-box: fill-box; transform-origin: center bottom; animation: edFill 1.4s var(--ease-out) both; }
@keyframes edFill {
  from { transform: scaleY(0.04); }
  to { transform: scaleY(1); }
}
.ed-f11__lid rect,
.ed-f11__lid-small { fill: #d9cdf5; stroke: #9a7fd6; stroke-width: 1.2; }
.ed-f11__lid.is-dropping { animation: edLidOn 0.6s var(--ease-out) 0.2s both; }
@keyframes edLidOn {
  from { opacity: 0; transform: translateY(-26px); }
  to { opacity: 1; transform: translateY(0); }
}
.ed-f11__bug { fill: #cdb9f3; stroke: #8a4fe0; stroke-width: 0.9; }
.ed-f11__fibre { fill: #f4d669; stroke: #d6ad3f; stroke-width: 0.8; }
.ed-f11__sv-clamp { fill: #2f3640; }
.ed-f11__sv-stem { fill: #4a535f; stroke: #2f3640; stroke-width: 1; }
.ed-f11__sv-vent { stroke: #8a95a3; stroke-linecap: round; stroke-width: 1.6; }
.ed-f11__sv-head { fill: #3a424d; stroke: #262c34; stroke-width: 1.2; }
.ed-f11__sv-screen { fill: #141a21; }
.ed-f11__sv-temp { fill: #7c8794; font-size: 11px; font-weight: 700; text-anchor: middle; transition: fill 0.4s var(--ease-out); }
.ed-f11__sv-temp.is-on { fill: #ffb347; }
.ed-f11__sv-knob { fill: #5b6470; stroke: #262c34; stroke-width: 1; }
.ed-f11__jug { fill: #eef2f6; stroke: #94a3b4; stroke-width: 1.4; }
.ed-f11__jug-milk { fill: #fbf2e1; }
.ed-f11__jug-handle { fill: none; stroke: #94a3b4; stroke-linecap: round; stroke-width: 4; }
.ed-f11__stream { fill: none; stroke: #f5e9d2; stroke-linecap: round; stroke-width: 6; }
.ed-f11__spoon { fill: #e3e8ee; stroke: #94a3b4; stroke-width: 1.2; }
.ed-f11__spoon-handle { fill: none; stroke: #94a3b4; stroke-linecap: round; stroke-width: 4; }
.ed-f11__powder { animation: edPowder 1.3s ease-in infinite; }
.ed-f11__powder--1 { animation-delay: 0.32s; }
.ed-f11__powder--2 { animation-delay: 0.65s; }
.ed-f11__powder--3 { animation-delay: 0.97s; }
.ed-f11__powder--starter { fill: #b48bf2; }
.ed-f11__powder--fibre { fill: #e8c24a; }
@keyframes edPowder {
  from { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  to { opacity: 0; transform: translateY(40px); }
}
.ed-f11__fridge { fill: #f4f7fa; stroke: #a9bccb; stroke-width: 1.6; }
.ed-f11__fridge-line { stroke: #a9bccb; stroke-width: 1.4; }
.ed-f11__handle { fill: #c3cfda; }
.ed-f11__frost { fill: none; opacity: 0.4; stroke: #18a7c9; stroke-linecap: round; stroke-width: 2; transition: opacity 0.5s var(--ease-out); }
.ed-f11__frost.is-on { opacity: 1; }
.ed-f11__window { fill: #edf6fb; stroke: #b8ccd9; stroke-width: 1.2; transition: fill 0.6s var(--ease-out); }
.ed-f11__window.is-cold { fill: #d9effa; }
.ed-f11__shelf { fill: none; stroke: #b8ccd9; stroke-width: 1.4; }
.ed-f11__set { fill: #f7eedc; }
.ed-f11__whey { fill: #efe6bd; }
.ed-f11__bowl { fill: #ffffff; stroke: #a7b4c1; stroke-width: 1.4; }
.ed-f11__berry { fill: #6d6fd8; stroke: #4b4fb8; stroke-width: 0.8; }
.ed-f11__note { fill: #5b6470; font-size: 11px; font-weight: 600; text-anchor: middle; }

@media (prefers-reduced-motion: reduce) {
  .ed-f11__powder,
  .ed-f11__hand--min.is-on {
    animation: none !important;
  }

  .ed-f11__milk.is-filling,
  .ed-f11__lid.is-dropping {
    animation-delay: 0s !important;
    animation-duration: 0.01s !important;
  }
}

/* Super Gut yoghurt's page (Lee, 19 Oct 2026), on the garden's pieces: the physio's own note under the source
   line, the two milks as two tabs, a recipe's list and its numbered method side by side, and its tip. */
.edu-yoghurt {
  margin-top: 6px;
}

.edu-physio {
  max-width: 860px;
  margin: 12px 0 0;
  border: 1px solid #e3d8f8;
  border-left: 4px solid #8a4fe0;
  border-radius: 14px;
  background: #faf7ff;
  padding: 14px 18px;
}

.edu-physio__h {
  margin: 0 0 4px;
  color: #6b3fb8;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.edu-physio__text {
  margin: 0;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.6;
}

.edu-phases--two {
  grid-template-columns: repeat(2, 1fr);
}

.edu-recipe {
  margin-top: 0;
}

.edu-checks ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: edu-step;
}

.edu-checks--steps li {
  counter-increment: edu-step;
}

.edu-checks--steps li::before {
  background: #efe8fc;
  color: #6b3fb8;
  content: counter(edu-step);
}

.edu-recipe__tip {
  margin: 14px 0 0;
  border-left: 3px solid #f4d669;
  padding-left: 12px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.edu-checks--wide {
  max-width: 860px;
}