/* Brain viewer: Brain Recovery Centers. One stylesheet for every mode.
   Source: brain_hero/brain.css (copied to assets/brain/ by build.mjs).

   The stage is a dark spruce field with nothing boxed behind the brain: the canvas is
   transparent and the poster is a transparent WebP, so both sit straight on the gradient.
   Poster and canvas share one box and one "contain" framing, which is why the swap from
   still to live has no jump.

   The background is optional. A page whose own section already carries the gradient sets
   --brain-stage-bg: none (on the stage or on any ancestor; it is never declared here, so there
   is nothing to out-specify) and the hero stage and the tour band paint nothing of their own.
   Nothing else marks the stage as a box: the small-print floor has soft edges on every side, and
   the hero's canvas and poster thin out before the bottom of their frame, so the soft shadow is
   never cut by it. */

.brain-stage {
  --brain-ink: #F3F6F1;
  --brain-soft: #C9D4CC;
  --brain-line: rgba(233, 240, 234, .34);
  --brain-floor: 6%;                 /* room kept under the brain for the note and credit */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template: "hint explore" auto "void void" 1fr "note pause" auto "credit pause" auto / minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: end;
  height: 420px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--brain-stage-bg, radial-gradient(120% 90% at 30% 20%, #2C5847, #1A3A2F));
  color: var(--brain-soft);
  font: 400 12.5px/1.45 "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.brain-stage > * { position: relative; z-index: 2; margin: 0; }

/* a soft floor so the small print stays readable whatever the brain is doing above it. It thins
   out toward the sides and along the very bottom too, so on a stage with no background of its
   own it is a shade under the text, never a band with an edge */
.brain-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(to top, rgba(20, 46, 37, .78), rgba(20, 46, 37, 0));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to top, transparent, #000 14px);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to top, transparent, #000 14px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}

.brain-stage > .brain-poster,
.brain-stage > .brain-canvas {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--brain-floor));
  display: block;
}
.brain-poster { object-fit: contain; opacity: 1; transition: opacity .3s ease; }
/* the hero's soft shadow reaches the bottom of its frame and grows as the camera pushes in: both
   layers thin out over the last 12 percent, identically, so they still register, and no edge is
   left in the shadow when the stage has no background of its own */
.brain-stage[data-brain="hero"] > .brain-poster,
.brain-stage[data-brain="hero"] > .brain-canvas {
  -webkit-mask-image: linear-gradient(to top, transparent, #000 12%);
  mask-image: linear-gradient(to top, transparent, #000 12%);
}
.brain-canvas { opacity: 0; touch-action: pan-y; }

/* live: the canvas is already showing the poster's own pose underneath, so only the poster fades.
   The poster stays in the page at opacity 0: its alt text is the canvas's text alternative. */
.brain-stage.is-live .brain-canvas { opacity: 1; }
.brain-stage.is-live .brain-poster { opacity: 0; }
.brain-stage.is-frozen .brain-poster,
.brain-stage.is-frozen .brain-hint { transition: none !important; }

.brain-note, .brain-credit { max-width: 46ch; color: var(--brain-soft); }
.brain-note { grid-area: note; color: var(--brain-ink); font-weight: 600; letter-spacing: .01em; text-wrap: balance; }
.brain-credit { grid-area: credit; font-size: 12px; }
.brain-credit a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.brain-credit a:hover { color: var(--brain-ink); }

.brain-hint {
  grid-area: hint;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brain-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.brain-hint::before {                 /* a 1.5px line glyph: a short stem with a chevron */
  content: "";
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.brain-stage.is-live .brain-hint { opacity: 1; visibility: visible; transition: opacity .6s ease .5s; }
.brain-stage.is-live.has-scrolled .brain-hint,
.brain-stage.is-live.is-paused .brain-hint { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }

.brain-explore,
.brain-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--brain-line);
  border-radius: 999px;
  background: rgba(16, 38, 31, .42);
  color: var(--brain-ink);
  font: 600 13px/1 "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.brain-explore { grid-area: explore; align-self: start; justify-self: end; }
.brain-explore::after {               /* arrow, 1.5px line */
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.brain-pause { grid-area: pause; justify-self: end; align-self: end; }
.brain-pause::before {                /* two bars; a triangle once paused */
  content: "";
  width: 3px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  box-sizing: content-box;
}
.brain-stage.is-paused .brain-pause::before {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left: 8px solid currentColor;
  border-right: 0;
}
.brain-explore:hover,
.brain-pause:hover { border-color: rgba(243, 246, 241, .7); box-shadow: 0 0 0 1px rgba(243, 246, 241, .12), 0 -2px 18px 2px rgba(143, 168, 152, .34); }
.brain-explore:focus-visible,
.brain-pause:focus-visible,
.brain-credit a:focus-visible { outline: 2px solid #FCFBF7; outline-offset: 3px; }
.brain-pause[hidden],
.brain-stage:not(.is-live) .brain-pause { display: none; }

@media (max-width: 899px) {
  .brain-stage { height: 300px; --brain-floor: 9%; }
}
@media (max-width: 560px), (pointer: coarse) {
  .brain-explore, .brain-pause { min-height: 44px; padding: 0 16px; }
}
@media (max-width: 560px) {
  .brain-stage { grid-template: "hint explore" auto "void void" 1fr "note pause" auto "credit credit" auto / minmax(0, 1fr) auto; padding: 12px 14px 12px; }
  .brain-credit { max-width: none; }
  .brain-hint { align-self: center; font-size: 11px; letter-spacing: .09em; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .brain-poster, .brain-hint, .brain-explore, .brain-pause { transition: none !important; }
}
@media print {
  .brain-stage { background: none; color: #1E2B25; }
  .brain-stage::after, .brain-canvas, .brain-pause, .brain-hint, .brain-explore { display: none !important; }
  .brain-stage .brain-poster { opacity: 1 !important; visibility: visible !important; }
  .brain-note, .brain-credit { color: #1E2B25; }
}

/* ==========================================================================================
   THE TOUR   section.brain-tour[data-brain="tour"]   (markup: tour-section.html)

   Two layouts from one piece of markup.
   - As written (no script, print, or a window too tall or too short to pin a stage in): a
     plain illustrated list. Every stop shows its own still beside its name and its sentences.
   - .is-touring (set by brain.js before anything is fetched): a full-bleed band. The stage pins
     to the window with position: sticky, each stop's text pins beside it in turn, also with
     position: sticky, and the page scrolls natively underneath. Nothing is hijacked.
   The band's gradient is one layer pinned for the whole section, and the stage itself is
   transparent, so there is no box around the brain at any moment of the scroll.
   ========================================================================================== */
.brain-tour {
  --brain-ink: #F3F6F1;
  --brain-soft: #C9D4CC;
  --brain-sage: #8FA898;
  --brain-line: rgba(233, 240, 234, .34);
  --brain-gutter: 24px;
  --brain-edge: max(var(--brain-gutter), calc((100% - 1280px) / 2));
  --brain-tour-top: 0px;             /* set this to the height of a header that stays pinned over the tour */
  --brain-vh: 100vh;
  position: relative;
  background: var(--brain-stage-bg, #1A3A2F radial-gradient(120% 90% at 30% 20%, #2C5847, #1A3A2F));   /* none: the page's own band shows through */
  color: var(--brain-soft);
  font: 400 17px/1.6 "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
@supports (height: 100svh) { .brain-tour { --brain-vh: 100svh; } }
.brain-tour :is(.brain-stage, .brain-tour-head, .brain-tour-foot, .brain-stops, .brain-stops > li, .brain-stop, .brain-rail, .brain-rail button) { box-sizing: border-box; }

.brain-tour-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 32px;
  padding: 88px var(--brain-edge) 36px;
}
.brain-tour-eyebrow { flex: 0 0 100%; margin: 0; color: var(--brain-sage); font: 700 12px/1.4 "Source Sans 3", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.brain-tour-title { margin: 0; color: #FCFBF7; font: 400 clamp(34px, 3.6vw, 48px)/1.1 "Source Serif 4", Georgia, serif; letter-spacing: -.01em; }
.brain-tour-skip { display: inline-flex; align-items: center; min-height: 44px; color: var(--brain-soft); font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.brain-tour-skip:hover { color: var(--brain-ink); }
.brain-tour :is(.brain-tour-skip, .brain-source a):focus-visible { outline: 2px solid #FCFBF7; outline-offset: 3px; border-radius: 2px; }
.brain-tour:not(.is-touring) .brain-tour-skip { display: none; }      /* nothing to skip in a list */

/* the list, as written */
.brain-stops {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  margin: 0;
  padding: 8px var(--brain-edge) 0;
  list-style: none;
  counter-reset: brain-stop;
}
.brain-stops > li {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 0 24px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid rgba(233, 240, 234, .16);
  counter-increment: brain-stop;
}
.brain-stop-poster { display: block; width: 148px; height: 148px; object-fit: contain; }
.brain-stop h3 { margin: 0 0 8px; color: #FCFBF7; font: 400 26px/1.15 "Source Serif 4", Georgia, serif; letter-spacing: -.005em; }
.brain-stop h3::before {              /* the stop's number: generated, so the article holds a name and its sentences and nothing else */
  content: counter(brain-stop, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  color: var(--brain-sage);
  font: 700 12px/1 "Source Sans 3", system-ui, sans-serif;
  letter-spacing: .14em;
}
.brain-stop p { margin: 0; max-width: 46ch; color: rgba(238, 242, 235, .86); font-size: 16px; line-height: 1.55; }

/* the stage, as written: only its small print shows (the stills are in the list) */
.brain-tour .brain-stage {
  display: block;
  height: auto;
  padding: 0 var(--brain-edge) 12px;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.brain-tour .brain-stage::after,
.brain-tour .brain-stage > .brain-poster,
.brain-tour .brain-stage > .brain-canvas,
.brain-tour .brain-stage > .brain-hint,
.brain-tour .brain-stage > .brain-pause,
.brain-tour .brain-rail,
.brain-tour .brain-tour-stills,
.brain-tour .brain-leader { display: none; }
.brain-tour .brain-note, .brain-tour .brain-credit { max-width: 72ch; }
.brain-tour .brain-note { font-size: 13px; }

.brain-tour-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 28px var(--brain-edge) 72px;
}
.brain-source { margin: 0; color: var(--brain-soft); font-size: 14px; line-height: 1.5; }
.brain-source a { color: var(--brain-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.brain-tour-foot .brain-explore { min-height: 44px; padding: 0 20px; font-size: 15px; }
.brain-tour.is-touring .brain-tour-foot { background: rgba(22, 50, 40, .9); }     /* carries on from the foot of the stage, so the stage leaves without a seam */

/* ---- touring ----
   Round 2 (one clock): the stage and the caption layer are both pinned for the whole tour; the
   captions sit in one place and tour.js crossfades them from the same eased scroll value that
   drives the camera and the rail. The scroll length is the body's spacer (::after), sized by
   tour.js from the stops' lengths (--brain-run). */
.brain-tour.is-touring { background: var(--brain-stage-bg, #1A3A2F); }
.brain-tour.is-touring::before {       /* the band's gradient, pinned to the window for the whole section */
  content: "";
  position: sticky;
  z-index: 0;
  top: 0;
  display: block;
  height: var(--brain-vh);
  margin-bottom: calc(var(--brain-vh) * -1);
  background: var(--brain-stage-bg, radial-gradient(120% 90% at 30% 20%, #2C5847, #1A3A2F));
  pointer-events: none;
}
.brain-tour.is-touring .brain-tour-head { padding-bottom: 4px; }
.brain-tour.is-touring .brain-tour-body {
  --brain-tour-h: calc(var(--brain-vh) - var(--brain-tour-top));
  --brain-pin: calc(var(--brain-tour-h) * .3);      /* where the texts sit, from the top of the stage */
  --brain-col: 64%;                                 /* where the text column starts */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.brain-tour.is-touring .brain-tour-body > * { grid-area: 1 / 1; min-width: 0; }
.brain-tour.is-touring .brain-tour-body::after { content: ""; grid-area: 1 / 1; display: block; height: calc(var(--brain-tour-h) + var(--brain-run, 500vh)); pointer-events: none; }

.brain-tour.is-touring .brain-stage {
  --brain-frame: min(calc(var(--brain-tour-h) * .84), 50vw);   /* the square the brain is framed in */
  --brain-cx: 35%;
  --brain-cy: 46%;
  position: sticky;
  top: var(--brain-tour-top);
  z-index: 2;
  align-self: start;
  display: grid;
  grid-template: "void void" 1fr "rail rail" auto "note pause" auto "credit pause" auto / minmax(0, 1fr) auto;
  gap: 2px 24px;
  align-items: end;
  height: var(--brain-tour-h);
  padding: 0 var(--brain-edge) 20px;
  overflow: hidden;
  pointer-events: none;                /* the caption layer lies over the stage: let its text be read and selected */
}
.brain-tour.is-touring .brain-stage :is(a, button) { pointer-events: auto; }
.brain-tour.is-touring .brain-stage::after {
  display: block;
  height: 30%;
  background: linear-gradient(to top, rgba(22, 50, 40, .9), rgba(22, 50, 40, .55) 40%, rgba(22, 50, 40, 0));
}
/* the text column's own shade, from the right edge: whatever the brain does, the words sit on a quiet field */
.brain-tour.is-touring .brain-stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 0 auto;
  width: calc(100% - var(--brain-col, 64%) + 220px);
  background: linear-gradient(to left, rgba(20, 44, 36, .62), rgba(20, 44, 36, .5) calc(100% - 220px), rgba(20, 44, 36, 0));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
  mask-image: linear-gradient(to bottom, transparent, #000 22%);      /* no edge where the stage begins, before it pins */
  pointer-events: none;
}
/* the canvas spans the whole band (pilot note 18): the brain is framed clear of the text, so there is no edge to hide */
.brain-tour.is-touring .brain-stage > .brain-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: calc(1 - var(--brain-rise, 0) * .16);   /* round 4 (note 53c): the held brain dims one step under the rising sheet */
  transition: opacity .4s ease;
}
.brain-tour.is-touring .brain-tour-stills { display: block; position: absolute; z-index: 0; inset: 0; }
/* Round 3 (pilot note 29): at the dive stops (the thalamus, the hippocampus) the camera is close and the glass outline
   runs past the stage's edges. The canvas feathers toward the stage edges and fades out before the caption column, by
   --brain-dive (written by tour.js: 0 at every other stop, so the mask is then fully opaque and changes nothing). */
.brain-tour.is-touring .brain-stage > .brain-canvas {
  --brain-d: var(--brain-dive, 0);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 max(48px, calc(var(--brain-d) * 9%)), #000 calc(var(--brain-col, 64%) - 24px - var(--brain-d) * 220px), rgb(0 0 0 / calc(1 - var(--brain-d))) calc(var(--brain-col, 64%) - var(--brain-d) * 24px), rgb(0 0 0 / calc(1 - var(--brain-d))) calc(100% - 48px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 max(32px, calc(var(--brain-d) * 15%)), #000 calc(100% - var(--brain-d) * 24%), rgb(0 0 0 / calc(1 - var(--brain-d))) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 max(48px, calc(var(--brain-d) * 9%)), #000 calc(var(--brain-col, 64%) - 24px - var(--brain-d) * 220px), rgb(0 0 0 / calc(1 - var(--brain-d))) calc(var(--brain-col, 64%) - var(--brain-d) * 24px), rgb(0 0 0 / calc(1 - var(--brain-d))) calc(100% - 48px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 max(32px, calc(var(--brain-d) * 15%)), #000 calc(100% - var(--brain-d) * 24%), rgb(0 0 0 / calc(1 - var(--brain-d))) 100%);
  mask-composite: intersect;
}
/* the dive stops' stills are framed as close as the live poses: a soft round feather instead of the square's edge */
.brain-tour.is-touring .brain-tour-stills > img:is([data-stop="thalamus"], [data-stop="hippocampus"]) {
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}
.brain-tour.is-touring .brain-stage > .brain-poster,
.brain-tour.is-touring .brain-tour-stills > img {
  display: block;
  position: absolute;
  z-index: 0;
  left: calc(var(--brain-cx) - var(--brain-frame) / 2);
  top: calc(var(--brain-cy) - var(--brain-frame) / 2);
  width: var(--brain-frame);
  height: var(--brain-frame);
  object-fit: contain;
  opacity: 0;
  transition: opacity .5s ease;
}
/* the stills show until the model is live, and again whenever motion is paused */
.brain-tour.is-touring .brain-stage:not(.is-live) img.is-shown,
.brain-tour.is-touring .brain-stage.is-paused img.is-shown { opacity: 1; }
.brain-tour.is-touring .brain-stage.is-paused > .brain-canvas { opacity: 0; }
.brain-tour.is-touring .brain-stage.is-frozen img,
.brain-tour.is-touring .brain-stage.is-frozen > .brain-canvas { transition: none; }

.brain-tour.is-touring .brain-stage > .brain-hint {
  display: inline-flex;
  position: absolute;
  left: var(--brain-cx);
  bottom: 21%;
  grid-area: auto;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}
.brain-tour.is-touring .brain-stage.shows-hint > .brain-hint { opacity: 1; visibility: visible; transition: opacity .6s ease .3s; }
.brain-tour.is-touring .brain-stage.has-scrolled > .brain-hint,
.brain-tour.is-touring .brain-stage.is-paused > .brain-hint { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.brain-tour.is-touring .brain-stage > .brain-pause { display: inline-flex; }
.brain-tour.is-touring .brain-stage > .brain-pause[hidden],
.brain-tour.is-touring .brain-stage:not(.is-live) > .brain-pause { display: none; }
.brain-tour.is-touring .brain-note { font-size: 12.5px; }
.brain-tour.is-touring .brain-note, .brain-tour.is-touring .brain-credit { max-width: none; }

/* the rail: a quiet line of names that is also a row of buttons */
.brain-tour.is-touring .brain-rail { display: block; grid-area: rail; margin-bottom: 12px; }
.brain-rail ol { position: relative; display: flex; margin: 0; padding: 0; list-style: none; }
.brain-rail ol::before,
.brain-rail ol::after { content: ""; position: absolute; left: 0; top: 6px; width: 100%; height: 1px; background: rgba(233, 240, 234, .24); pointer-events: none; }
.brain-rail ol::after {                 /* how far along: written by tour.js from the same clock as the camera */
  top: 5px;
  height: 2px;
  border-radius: 999px;
  background: var(--brain-ink);
  transform: scaleX(var(--brain-progress, 0));
  transform-origin: 0 50%;
}
.brain-rail li { flex: 1 1 0; min-width: 0; }
.brain-rail button {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 21px 10px 4px 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(201, 212, 204, .7);
  font: 600 12.5px/1.25 "Source Sans 3", system-ui, sans-serif;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
}
.brain-rail button::before {            /* the stop's tick */
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 2px;
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  border: 1.5px solid rgba(233, 240, 234, .6);
  border-radius: 50%;
  background: #214838;
}
/* round 4 (pilot note 53b): the current stop's dot and name swap with no transition, so two dots are never lit at once */
.brain-rail button span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain-rail button:hover,
.brain-rail button[aria-current] { color: var(--brain-ink); }
.brain-rail button[aria-current]::before { border-color: var(--brain-ink); background: var(--brain-ink); box-shadow: 0 0 0 4px rgba(243, 246, 241, .16); }
.brain-rail button:focus-visible { outline: 2px solid #FCFBF7; outline-offset: 2px; }

/* the texts: one pinned layer over the stage, every stop's text in the same place, one readable at a time */
.brain-tour.is-touring .brain-stops {
  position: sticky;
  top: var(--brain-tour-top);
  z-index: 3;
  align-self: start;
  display: block;
  height: var(--brain-tour-h);
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.brain-tour.is-touring .brain-stops > li { position: absolute; top: var(--brain-pin); left: var(--brain-col); right: var(--brain-edge); display: block; padding: 0; border: 0; }
.brain-tour.is-touring .brain-stops > li::after { content: none; }
.brain-tour.is-touring .brain-stop-poster { display: none; }
.brain-tour.is-touring .brain-stop { position: relative; max-width: 420px; margin: 0; pointer-events: auto; opacity: 0; visibility: hidden; }
.brain-tour.is-touring .brain-stop h3 { margin: 0 0 14px; font-size: clamp(32px, 3.3vw, 50px); line-height: 1.06; letter-spacing: -.012em; }
.brain-tour.is-touring .brain-stop h3::before { margin-bottom: 16px; font-size: 12.5px; }
.brain-tour.is-touring .brain-stop p { max-width: 34ch; color: rgba(238, 242, 235, .92); font-size: 18px; line-height: 1.55; }

/* data-hold on the section: after the close the stage stays pinned for one more screen
   (--brain-exit) while the tour's foot and whatever follows the section rise over it as a curtain.
   The foot is pulled up by the same amount, so the page is no taller than without the hold. The
   body is clipped along the foot's top edge, the curtain's own leading edge, so the brain is never
   painted below it: the next section needs no z-index and no particular background. tour.js fades
   the brain and its small print out over the first third of the rise, so the sheet rises over an
   empty field. */
.brain-tour[data-hold].is-touring { --brain-exit: calc(var(--brain-vh) - var(--brain-tour-top)); }
.brain-tour[data-hold].is-touring .brain-tour-body { clip-path: inset(0 0 calc(var(--brain-exit) - var(--brain-lift, 0px)) 0); }   /* round 4: the sheet is drawn --brain-lift lower than its place (tour.js) */
.brain-tour[data-hold].is-touring .brain-tour-foot { margin-top: calc(var(--brain-exit) * -1); background: #16322A; }

/* round 4 (keyboard reach): the head fades by opacity only; once it has gone its links take no pointer, and a link
   that takes focus brings it back (tour.js scrolls to the first stop) */
.brain-tour.is-touring .brain-tour-head.is-gone > * { pointer-events: none; }
.brain-tour.is-touring .brain-tour-head:focus-within { opacity: 1 !important; }

/* round 4: the section rising over the held brain keeps its own brain stage (the explorer's) hidden until the sheet is up */
.is-rising .brain-stage > :is(.brain-canvas, .brain-poster, .brain-still) { opacity: 0 !important; }
.brain-lab .brain-stage > .brain-canvas { transition: opacity .45s ease; }

/* the leader line from a name to its part */
.brain-tour.is-touring .brain-leader { display: block; position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; }
.brain-leader-line { fill: none; stroke: rgba(243, 246, 241, .82); stroke-width: 1; }
.brain-leader-ring { fill: rgba(26, 58, 47, .3); stroke: #F3F6F1; stroke-width: 1.25; }
.brain-leader-dot { fill: #F3F6F1; }
.brain-tour.is-touring .brain-stage:not(.is-live) .brain-leader,
.brain-tour.is-touring .brain-stage.is-paused .brain-leader { display: none; }

@media (max-width: 1099px) {
  .brain-rail button { font-size: 11.5px; padding-right: 6px; }
}
@media (max-width: 899px) {
  .brain-tour { --brain-gutter: 16px; }
  .brain-tour-head { padding: 56px var(--brain-edge) 24px; }
  .brain-stops { grid-template-columns: minmax(0, 1fr); }
  .brain-stops > li { grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .brain-stop-poster { width: 96px; height: 96px; }
  .brain-stop h3 { font-size: 24px; }
  .brain-tour-foot { padding: 24px var(--brain-edge) 56px; }

  /* Phones (pilot note 21): top to bottom, the brain (half the pinned screen), one small-print block under it with the
     pause control in the brain's corner, then the part's name with its place in the tour ("4 of 7") and its
     sentences. No rail: the count beside the name says where you are, and it never rewinds. */
  .brain-tour.is-touring .brain-tour-body {
    --brain-stage-h: calc(var(--brain-tour-h) * .5);
    --brain-pin: 10px;
    --brain-col: var(--brain-edge);
  }
  .brain-tour.is-touring .brain-stage {
    --brain-frame: min(94vw, calc(var(--brain-stage-h) - 46px));
    --brain-cx: 50%;
    --brain-cy: calc((var(--brain-stage-h) - 46px) / 2 + 2px);
    grid-template: "hint pause" auto "void void" 1fr "note note" auto "credit credit" auto / minmax(0, 1fr) auto;
    gap: 0 12px;
    height: var(--brain-stage-h);
    padding: 4px 0 4px;
  }
  .brain-tour.is-touring .brain-stage::before { display: none; }
  .brain-tour.is-touring .brain-stage::after { height: 30%; background: linear-gradient(to top, rgba(31, 66, 54, .62) 0, rgba(31, 66, 54, .34) 45%, rgba(31, 66, 54, 0) 100%); }   /* round 4 (note 60): the field's own tone, no band */
  .brain-tour.is-touring .brain-note { padding: 0 var(--brain-gutter); font-size: 11px; line-height: 1.35; }
  .brain-tour.is-touring .brain-credit { padding: 0 var(--brain-gutter); font-size: 11px; line-height: 1.35; }
  /* the pause control: a round button in the brain's corner, its words kept for screen readers */
  .brain-tour.is-touring .brain-stage > .brain-pause { grid-area: pause; align-self: start; width: 44px; min-height: 44px; margin-right: 10px; padding: 0; gap: 0; font-size: 0; }
  .brain-tour.is-touring .brain-stage > .brain-hint { position: relative; left: auto; top: auto; bottom: auto; grid-area: hint; align-self: center; margin-left: var(--brain-gutter); transform: none; }
  .brain-tour.is-touring .brain-rail { display: none; }
  .brain-tour.is-touring .brain-stops { top: calc(var(--brain-tour-top) + var(--brain-stage-h)); height: calc(var(--brain-tour-h) - var(--brain-stage-h)); margin-top: var(--brain-stage-h); }   /* under the stage before it pins, too */
  .brain-tour.is-touring .brain-stops > li { left: var(--brain-edge); right: var(--brain-edge); }
  .brain-tour.is-touring .brain-stop { max-width: none; }
  .brain-tour.is-touring .brain-stop h3 { margin-bottom: 10px; font-size: 30px; }
  .brain-tour.is-touring .brain-stop h3::before { content: counter(brain-stop) " of " attr(data-of); margin-bottom: 8px; }
  .brain-tour.is-touring .brain-stop p { max-width: 40ch; font-size: 17px; }
  .brain-tour.is-touring .brain-leader { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brain-tour.is-touring .brain-tour-stills > img, .brain-tour.is-touring .brain-stage > .brain-poster { transition-duration: .2s; }
  .brain-rail button, .brain-rail button::before { transition: none; }
}
@media print {
  .brain-tour, .brain-tour.is-touring { background: none; color: #1E2B25; }
  .brain-tour.is-touring::before, .brain-tour-skip, .brain-tour .brain-rail, .brain-tour .brain-leader, .brain-tour .brain-tour-stills { display: none !important; }
  .brain-tour.is-touring .brain-tour-body { display: block; }
  .brain-tour.is-touring .brain-stage { position: static; display: block; height: auto; }
  .brain-tour.is-touring .brain-stage > * { display: none !important; }
  .brain-tour.is-touring .brain-stage > .brain-note, .brain-tour.is-touring .brain-stage > .brain-credit { display: block !important; }
  .brain-tour.is-touring .brain-stops { display: grid; padding: 8px var(--brain-edge) 0; }
  .brain-tour.is-touring .brain-stops > li { display: grid; padding: 18px 0 !important; border-top: 1px solid #C9D4CC; break-inside: avoid; }
  .brain-tour.is-touring .brain-stop-poster { display: block; }
  .brain-tour.is-touring .brain-stop { position: static; margin: 0; opacity: 1 !important; visibility: visible !important; }
  .brain-tour .brain-stop h3, .brain-tour-title { color: #1E2B25; }
  .brain-tour .brain-stop p, .brain-source, .brain-source a { color: #1E2B25; }
}

/* ==========================================================================================
   EXPLORE   main[data-brain="explore"] > section.brain-lab   (markup: brain.html)

   One dark spruce band, the height of the window on a wide screen: the parts down the left,
   the brain in the middle with its controls under it, the chosen part's name and sentences on
   the right. The stage itself is transparent, so nothing is boxed behind the brain.
   - As written (no script): the stage shows the poster, and every part's entry is listed with
     its still, so the page reads as an illustrated list.
   - .is-exploring (set by brain.js): one entry at a time, the one for the focused part.
   Phones: one column; the list of buttons gives way to a select.
   ========================================================================================== */
.brain-lab {
  --brain-ink: #F3F6F1;
  --brain-soft: #C9D4CC;
  --brain-sage: #8FA898;
  --brain-line: rgba(233, 240, 234, .34);
  --brain-edge: max(24px, calc((100% - 1360px) / 2));
  --brain-lab-h: clamp(520px, calc(100vh - 72px), 980px);
  position: relative;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr) minmax(280px, 360px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "side head info" "side stage info" "side controls info";
  gap: 0 40px;
  box-sizing: border-box;
  min-height: var(--brain-lab-h);
  padding: 28px var(--brain-edge) 28px;
  background: var(--brain-stage-bg, #1A3A2F radial-gradient(120% 90% at 30% 20%, #2C5847, #1A3A2F));
  color: var(--brain-soft);
  font: 400 16px/1.55 "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
@supports (height: 100svh) { .brain-lab { --brain-lab-h: clamp(520px, calc(100svh - 72px), 980px); } }
.brain-lab :is(button, select) { font-family: inherit; }
.brain-lab :focus-visible { outline: 2px solid #FCFBF7; outline-offset: 2px; }

.brain-head { grid-area: head; display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; padding-top: 4px; }
.brain-head h1 { margin: 0; color: #FCFBF7; font: 400 clamp(30px, 2.8vw, 42px)/1.1 "Source Serif 4", Georgia, serif; letter-spacing: -.01em; }

/* the parts, as a list of real buttons */
.brain-side { grid-area: side; align-self: start; padding-top: 8px; }
.brain-parts h2 { margin: 20px 0 6px; color: var(--brain-sage); font: 700 11.5px/1.4 "Source Sans 3", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.brain-parts h2:first-child { margin-top: 0; }
.brain-parts ul { margin: 0; padding: 0; list-style: none; }
.brain-parts button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--brain-soft);
  font: 600 15px/1.2 "Source Sans 3", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.brain-parts button::before {          /* the part's own colour in the model */
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brain-chip, #CFC6B4);
  box-shadow: 0 0 0 1.5px rgba(16, 38, 31, .6);
  opacity: .75;
  transition: opacity .2s ease, box-shadow .2s ease;
}
.brain-parts button:hover { background: rgba(243, 246, 241, .07); color: var(--brain-ink); }
.brain-parts button:hover::before { opacity: 1; }
.brain-parts button[aria-pressed="true"] { background: rgba(243, 246, 241, .13); color: #FCFBF7; }
.brain-parts button[aria-pressed="true"]::before { opacity: 1; box-shadow: 0 0 0 1.5px rgba(16, 38, 31, .6), 0 0 0 4px rgba(243, 246, 241, .22); }
.brain-pick { display: none; }

/* the stage: no box, the band is the background */
.brain-lab .brain-stage {
  grid-area: stage;
  min-height: 0;
  height: auto;
  padding: 0 0 6px;
  border-radius: 14px;
  background: none;
  grid-template: "void" 1fr "note" auto "credit" auto / minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.brain-lab .brain-stage::after { display: none; }
.brain-lab .brain-stage > .brain-poster,
.brain-lab .brain-stage > .brain-still,
.brain-lab .brain-stage > .brain-canvas { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: calc(100% - 56px); display: block; }
.brain-lab .brain-stage > .brain-still { object-fit: contain; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
/* Close in on a deep part and the opened cortex fills the stage: it thins out to nothing before
   any edge, so the stage never shows as a box. */
.brain-lab .brain-stage > .brain-canvas {
  --brain-edge-x: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .55) 4%, #000 11%, #000 89%, rgba(0, 0, 0, .55) 96%, transparent 100%);
  --brain-edge-y: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) 4%, #000 11%, #000 86%, rgba(0, 0, 0, .55) 95%, transparent 100%);
  -webkit-mask-image: var(--brain-edge-x), var(--brain-edge-y);
  mask-image: var(--brain-edge-x), var(--brain-edge-y);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.brain-lab .brain-stage.has-still > .brain-still { opacity: 1; }
.brain-lab .brain-stage.has-still > .brain-poster { opacity: 0; }
.brain-lab .brain-stage.is-live > .brain-still { opacity: 0; }
.brain-lab .brain-stage.is-turning { cursor: grabbing; }
.brain-lab .brain-stage.is-pointing { cursor: pointer; }
.brain-lab .brain-stage:not(.is-live) { cursor: default; }
.brain-lab .brain-stage:focus-visible { outline: 2px solid #FCFBF7; outline-offset: -2px; }
.brain-lab .brain-note { grid-area: note; max-width: none; font-size: 12.5px; }
.brain-lab .brain-credit { grid-area: credit; max-width: none; }

/* Round 2 (pilot note 18): on a wide screen the canvas spans the whole band, behind the parts list and the text, so a
   brain the visitor turns or opens never stops at the edge of a box. The poster box is still the frame (fitFrame), so
   the brain stays centred in the middle column; the side columns sit above the canvas on a soft shade of their own. */
@media (min-width: 900px) {
  .brain-lab { --lab-side: 216px; --lab-gap: 40px; }
  .brain-lab .brain-stage { z-index: 1; overflow: visible; }
  .brain-lab .brain-stage > .brain-canvas {
    left: calc(-1 * (var(--brain-edge) + var(--lab-side) + var(--lab-gap)));
    width: calc(100% + var(--brain-edge) * 2 + var(--lab-side) + var(--lab-gap) * 2 + var(--lab-info));
    max-width: none;                     /* a page rule may cap canvases at their container's width */
    --brain-edge-x: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    /* round 4 (pilot note 61): diving, the outline also thins out under the title, so the glass never crowds it */
    --brain-edge-y: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) calc(4% + var(--brain-d) * 8%), #000 calc(11% + var(--brain-d) * 14%), #000 86%, rgba(0, 0, 0, .55) 95%, transparent 100%);
    /* round 3 (pilot note 29): diving into a deep part, the glass outline may leave the middle column but fades out
       before the parts list and the text (--brain-dive from explore.js; 0 elsewhere, and then this layer is opaque) */
    --brain-d: var(--brain-dive, 0);
    --brain-dive-x: linear-gradient(to right,
      rgb(0 0 0 / calc(1 - var(--brain-d))) calc(var(--brain-edge) + var(--lab-side)),
      #000 calc(var(--brain-edge) + var(--lab-side) + var(--lab-gap) + var(--brain-d) * 80px),
      #000 calc(100% - var(--brain-edge) - var(--lab-info) - var(--lab-gap) - var(--brain-d) * 160px),
      rgb(0 0 0 / calc(1 - var(--brain-d))) calc(100% - var(--brain-edge) - var(--lab-info) - var(--lab-gap) / 2));
    -webkit-mask-image: var(--brain-edge-x), var(--brain-edge-y), var(--brain-dive-x);
    mask-image: var(--brain-edge-x), var(--brain-edge-y), var(--brain-dive-x);
    -webkit-mask-composite: source-in, source-in;
    mask-composite: intersect, intersect;
  }
  .brain-lab :is(.brain-head, .brain-side, .brain-info, .brain-controls) { position: relative; z-index: 3; }
  .brain-lab::before, .brain-lab::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; pointer-events: none; }
  .brain-lab::before { left: 0; width: calc(var(--brain-edge) + var(--lab-side) + 24px); background: linear-gradient(to right, rgba(20, 44, 36, .6), rgba(20, 44, 36, 0)); }
  .brain-lab::after { right: 0; width: calc(var(--brain-edge) + var(--lab-info) + 96px); background: linear-gradient(to left, rgba(20, 44, 36, .74), rgba(20, 44, 36, .62) 55%, rgba(20, 44, 36, 0)); }
}
@media (min-width: 1200px) { .brain-lab { --lab-info: 360px; } }
@media (min-width: 900px) and (max-width: 1199px) { .brain-lab { --lab-side: 190px; --lab-gap: 28px; --lab-info: 300px; } }

/* first-run hint: under the brain, gone after the first touch of anything */
.brain-lab .brain-stage > .brain-hint {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(16, 38, 31, .5);
  color: var(--brain-ink);
  letter-spacing: .1em;
}
.brain-lab .brain-stage > .brain-hint::before { display: none; }
.brain-lab .brain-stage.is-live.is-used > .brain-hint,
.brain-lab .brain-stage.has-part > .brain-hint { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }   /* round 4 (note 61): gone once a part is chosen */

/* the name under a fine pointer */
.brain-tip {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(12, 30, 24, .82);
  color: #FCFBF7;
  font: 600 13px/1.2 "Source Sans 3", system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.brain-stage.is-pointing:not(.is-turning) > .brain-tip:not(:empty) { opacity: 1; }

/* controls: Surface / Look inside, zoom, reset */
.brain-controls { grid-area: controls; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding-top: 10px; }
.brain-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--brain-line); border-radius: 999px; background: rgba(16, 38, 31, .42); }
.brain-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;                    /* round 3 (owner-r2): the site's 44px pill */
  padding: 0 16px;
  border: 1px solid var(--brain-line);
  border-radius: 999px;
  background: rgba(16, 38, 31, .42);
  color: var(--brain-ink);
  font: 600 14px/1 "Source Sans 3", system-ui, sans-serif;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.brain-controls button:hover { border-color: rgba(243, 246, 241, .7); }
.brain-toggle button { min-height: 38px; border-color: transparent; background: none; color: var(--brain-soft); }
.brain-toggle button[aria-pressed="true"] { background: #F3F6F1; color: #17352B; }
.brain-zoom { position: relative; width: 44px; padding: 0 !important; }
.brain-zoom::before, .brain-zoom.is-in::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.brain-zoom.is-in::after { transform: translate(-50%, -50%) rotate(90deg); }
/* zoom works on the live model only: without it the buttons keep their place but are not offered */
.brain-lab .brain-stage:not(.is-live) ~ .brain-controls .brain-zoom { visibility: hidden; }

/* the focused part's name and sentences */
.brain-info { grid-area: info; align-self: center; padding: 24px 0; }
.brain-entry { margin: 0 0 28px; }
.brain-entry-poster { display: block; width: 120px; height: 120px; margin: 0 0 10px -10px; object-fit: contain; }
.brain-entry h2 { margin: 0 0 12px; color: #FCFBF7; font: 400 clamp(30px, 2.9vw, 44px)/1.08 "Source Serif 4", Georgia, serif; letter-spacing: -.012em; }
.brain-entry p { margin: 0; max-width: 36ch; color: rgba(238, 242, 235, .92); font-size: 17px; line-height: 1.55; }
.brain-entry .brain-entry-none { color: var(--brain-soft); font-size: 15px; font-style: italic; }
.brain-lab .brain-source { margin-top: 8px; font-size: 13.5px; }
.brain-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* html.js is set by one line in the page's head, before anything is drawn, so the layout never
   jumps when brain.js arrives. Without any script there is nothing to drive: the controls go and
   the entries are a list, each with its still. */
.js [data-brain="explore"] .brain-entry:not(.is-shown) { display: none; }
.js [data-brain="explore"] .brain-entry-poster { display: none; }
[data-brain="explore"].is-exploring .brain-entry.is-shown { animation: brain-entry-in .45s ease both; }
@keyframes brain-entry-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html:not(.js) [data-brain="explore"] :is(.brain-controls, .brain-side, .brain-hint) { display: none; }
html:not(.js) [data-brain="explore"] .brain-lab { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "head" "stage" "info"; min-height: 0; }
html:not(.js) [data-brain="explore"] .brain-lab .brain-stage { height: min(68vh, 620px); }
html:not(.js) [data-brain="explore"] .brain-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 40px; align-self: start; padding-top: 32px; }
html:not(.js) [data-brain="explore"] .brain-info > .brain-source { grid-column: 1 / -1; }
html:not(.js) [data-brain="explore"] .brain-entry { margin: 0; padding: 16px 0; border-top: 1px solid rgba(233, 240, 234, .16); }
html:not(.js) [data-brain="explore"] .brain-entry h2 { font-size: 26px; }
html:not(.js) [data-brain="explore"] .brain-entry p { font-size: 15px; }

@media (max-width: 1199px) {
  .brain-lab { grid-template-columns: 190px minmax(0, 1fr) minmax(250px, 300px); gap: 0 28px; }
  .brain-entry p { font-size: 16px; }
}
@media (max-width: 899px) {
  .brain-lab {
    --brain-edge: 16px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "head" "stage" "side" "controls" "info";   /* round 4 (mux3): the picker and the view controls right under the brain, so the brain, the chosen part's name (in the picker) and the controls share one screen; the sentences follow */
    min-height: 0;
    padding: 20px var(--brain-edge) 32px;
  }
  .brain-head :is(h1, h2) { font-size: 30px; }
  .brain-lab .brain-stage { height: min(50svh, 112vw, 460px); min-height: 280px; margin: 8px calc(var(--brain-edge) * -1) 0; padding: 0 var(--brain-edge) 4px; border-radius: 0; }
  .brain-lab .brain-stage > .brain-poster,
  .brain-lab .brain-stage > .brain-still,
  .brain-lab .brain-stage > .brain-canvas { height: calc(100% - 52px); }
  .brain-lab .brain-stage > .brain-hint { top: 8px; bottom: auto; font-size: 14px; }   /* round 1: above the brain, clear of the note */
  .brain-lab .brain-note { font-size: 14px; line-height: 1.35; }                        /* round 1: the homepage's 14 and 12px floor */
  .brain-lab .brain-credit { font-size: 12px; line-height: 1.4; }
  .brain-lab .brain-stage > .brain-poster,
  .brain-lab .brain-stage > .brain-still,
  .brain-lab .brain-stage > .brain-canvas { height: calc(100% - 64px); }
  /* two rows: the view toggle across the width, then Start over and the zoom pair */
  .brain-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px 44px; grid-template-areas: "toggle toggle toggle toggle" "reset . out in"; gap: 10px 8px; padding-top: 12px; }
  .brain-toggle { grid-area: toggle; display: grid; grid-template-columns: 1fr 1fr; }
  .brain-controls button { min-height: 44px; padding: 0 16px; }
  .brain-toggle button { min-height: 44px; padding: 0 12px; }
  .brain-controls [data-action="reset"] { grid-area: reset; }
  .brain-controls [data-action="zoom-out"] { grid-area: out; }
  .brain-controls [data-action="zoom-in"] { grid-area: in; }
  .brain-zoom { width: 44px; }
  .brain-side { padding-top: 12px; }
  .brain-parts { display: none; }
  .brain-pick { display: grid; gap: 6px; }
  .brain-pick span { color: rgba(238, 242, 235, .78); font: 600 14px/1.4 "Source Sans 3", system-ui, sans-serif; }
  .brain-pick select {
    min-height: 48px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--brain-line);
    border-radius: 10px;
    background: rgba(16, 38, 31, .55) no-repeat right 16px center / 9px 9px;
    background-image: linear-gradient(45deg, transparent 50%, #F3F6F1 50%, #F3F6F1 calc(50% + 1.5px), transparent calc(50% + 1.5px)), linear-gradient(-45deg, transparent 50%, #F3F6F1 50%, #F3F6F1 calc(50% + 1.5px), transparent calc(50% + 1.5px));
    background-size: 6px 6px, 6px 6px;
    background-position: right 21px center, right 15px center;
    color: #FCFBF7;
    font: 600 16px/1.2 "Source Sans 3", system-ui, sans-serif;
    -webkit-appearance: none;
    appearance: none;
  }
  .brain-pick select option, .brain-pick select optgroup { color: #1E2B25; background: #FCFBF7; }
  .brain-info { align-self: start; padding: 16px 0 4px; }
  .brain-info .brain-entry { margin-bottom: 8px; }
  .brain-entry h2 { font-size: 32px; }
  /* diving on a phone: the outline may leave the stage at the sides, it fades out well before the hint and the title */
  .brain-lab .brain-stage > .brain-canvas {
    --brain-d: var(--brain-dive, 0);
    --brain-edge-y: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) calc(4% + var(--brain-d) * 6%), #000 calc(11% + var(--brain-d) * 12%), #000 86%, rgba(0, 0, 0, .55) 95%, transparent 100%);
  }
  html:not(.js) [data-brain="explore"] .brain-lab { grid-template-areas: "head" "stage" "info"; }
  html:not(.js) [data-brain="explore"] .brain-lab .brain-stage { height: min(100vw, 420px); }
  html:not(.js) [data-brain="explore"] .brain-info { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  .brain-entry-poster { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .brain-lab *, .brain-lab *::before { transition: none !important; animation: none !important; }
}
@media print {
  .brain-lab { display: block; background: none; color: #1E2B25; padding: 0; min-height: 0; }
  .brain-lab :is(.brain-controls, .brain-side, .brain-hint, .brain-tip, .brain-canvas) { display: none !important; }
  .brain-lab .brain-stage { height: 360px; }
  .brain-entry { display: block !important; break-inside: avoid; }
  .brain-entry-poster { display: block !important; }
  .brain-entry h2, .brain-entry p, .brain-head h1 { color: #1E2B25; }
}