/* =====================================================================
   Music and the Brain (page-music-and-the-brain.php).
   Loads after css/rethinking-endo.css, which supplies the page shell the
   article uses (16px root, paper texture, sticky breadcrumb bar, search).
   The interactive is wrapped in .bv-page, not .wrap, so rethinking-endo's
   plain-button rule for .wrap can't restyle its buttons.
   ===================================================================== */
body.page-template-page-music-and-the-brain .page-wrapper,
body.page-template-page-music-and-the-brain-php .page-wrapper{overflow-x:clip;overflow-y:visible}
.bv-page{max-width:920px;width:100%;min-width:0;margin:0 auto;padding:0 64px;position:relative}
@media (max-width:850px){.bv-page{padding:0 50px}}
@media (max-width:600px){.bv-page{padding:0 24px}}
.bv-main{display:block;padding:2.75rem 0 2.5rem}
@media (max-width:600px){.bv-main{padding:1.75rem 0 2rem}}

/* --- WordPress guards: style.css gives every element position:relative,
   zero margins, and its own sizes, bullets and quote marks for bare tags.
   Put back the browser defaults the prototype was built on; every rule
   below in the interactive's own block is more specific and still wins. */
.brain-viz :where(*){position:static}
.brain-viz :where(p, ul, ol, li, figure, figcaption, h1, h2, h3, h4){
  margin:revert;padding:revert;width:revert;
  font-size:revert;font-weight:revert;font-family:revert;line-height:revert;
  letter-spacing:revert;text-transform:revert;float:revert;
}
.brain-viz :where(ul, ol){list-style:revert}
.brain-viz :where(li)::before{content:none;background:none}
.brain-viz :where(a){color:revert;text-decoration:revert;transition:none}
.brain-viz :where(img){display:revert;width:revert;max-width:revert}
.brain-viz :where(span, a, strong, em, b, i, small){letter-spacing:revert;text-transform:revert}
.brain-viz :where(button){transition:revert}
/* style.css: *{text-rendering:geometricPrecision} changes text widths,
   which shifts the drawing's labels (rethinking-endo.css does the same
   for .wrap) */
.brain-viz, .brain-viz :where(*){text-rendering:auto}
.brain-viz{position:static}
/* style.css: li:last-of-type{margin-bottom:0 !important} */
.brain-viz .bv-regions > li:last-of-type{margin-bottom:0.32rem !important}
/* js/functions.js tags empty paragraphs and style.css zeroes their height;
   the screen-reader announcer starts empty */
.brain-viz p.bv-sr.empty-space-paragraph{height:1px !important}

/* =====================================================================
   How music travels through the brain — the interactive. Every selector
   is scoped under .brain-viz and every token is declared on it, so the
   block can move into a WordPress template partial without leaking onto
   the site or depending on the theme's :root (see bespoke-page-runbook).
   The live site has no dark mode, so this block is light only.
   ===================================================================== */
.brain-viz{
  --bv-font-display:"Averia Serif Libre",Georgia,serif;
  --bv-font-body:"Work Sans",system-ui,sans-serif;

  --bv-ink:#16283c;
  --bv-paper:#faf8f5;
  --bv-panel:#ffffff;
  --bv-rule:#ddd8d0;
  --bv-rule-soft:#e9e5de;
  --bv-muted:#5f6b7a;
  --bv-prose:#33414f;

  --bv-e1:#2e5c8a;
  --bv-e2:#1f7a6b;
  --bv-e3:#b5801f;
  --bv-e4:#a9436a;
  --bv-e5:#4a4a66;
  --bv-e3-ink:#8a6116;   /* e3 darkened for text: 5.2:1 on paper (e3 itself is 3.3:1) */
  --bv-focus:#2e5c8a;

  --bv-secondary:#2f6d84;
  --bv-secondary-hover:#255769;
  --bv-on-secondary:#ffffff;

  --bv-tip-bg:#16283c;
  --bv-tip-ink:#f4f1ea;
  --bv-tissue:#fffdf9;   /* brain and ear surfaces */
  --bv-skin:#fbf5ec;
  --bv-bone:#efe8dd;

  --bv-cur:var(--bv-e1);   /* current stage's accent and wash strength, set from the script */
  --bv-cur-alpha:0.36;

  /* neutralize the WordPress theme's section defaults */
  display:block;float:none;width:auto;max-width:none;
  margin:0;padding:0;border:0;background:none;
  color:var(--bv-ink);
  font-family:var(--bv-font-body);
}
.brain-viz [hidden]{display:none !important}
.brain-viz .bv-kicker{
  margin:0 0 0.5rem;
  font-family:var(--bv-font-body);
  font-size:0.78rem;
  font-weight:600;
  line-height:1.6;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--bv-muted);
}
.brain-viz .bv-headline{
  /* as on the Watercolor Painting Playground and the Healthy Minds Tree */
  margin:0 0 .6rem;
  font-family:var(--bv-font-display);
  font-size:clamp(1.6rem,4vw,2.15rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:normal;
  text-transform:none;
  color:var(--bv-ink);
  text-wrap:balance;
}
.brain-viz .bv-intro{
  /* the Watercolor Painting Playground's intro (css/watercolor-playground.css
     .bp-intro): Work Sans, regular, body size */
  margin:0 0 1.6rem;
  max-width:58ch;
  font-family:var(--bv-font-body);
  font-size:1rem;
  font-weight:400;
  line-height:1.68;
  letter-spacing:normal;
  text-transform:none;
  color:var(--bv-prose);
}
/* the intro folds up behind a caret at every width, as on the Watercolor
   Painting Playground (css/watercolor-playground.css .bp-howto), so the
   interactive sits higher on the screen; "How it works" opens it */
.brain-viz .bv-howto-toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0 0 1rem;padding:.2rem 0;
  border:0;background:none;
  font:600 .875rem/1.2 var(--bv-font-body);
  color:var(--bv-secondary);
  cursor:pointer;
}
.brain-viz .bv-howto-toggle:hover{color:var(--bv-secondary-hover)}
.brain-viz .bv-howto-toggle:focus-visible{outline:2px solid var(--bv-focus);outline-offset:3px;border-radius:2px}
.brain-viz .bv-caret{
  width:.5rem;height:.5rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .2s;
}
.brain-viz .bv-howto.is-open .bv-caret{transform:translateY(-2px) rotate(45deg)}
.brain-viz .bv-howto:not(.is-open) .bv-intro{display:none}
.brain-viz .bv-howto.is-open .bv-intro{margin-top:-.3rem}
@media (prefers-reduced-motion:reduce){.brain-viz .bv-caret{transition:none}}
.brain-viz .bv-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --- layout: reading on the left, the illustration on the right ------- */
.brain-viz .bv-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);
  gap:1rem 2.2rem;
  align-items:start;
}
.brain-viz .bv-reader{grid-column:1;grid-row:1;min-width:0}
.brain-viz .bv-figure{grid-column:2;grid-row:1;margin:0;min-width:0}
.brain-viz .bv-bar{display:flex;align-items:center;justify-content:flex-start;gap:0.75rem;margin:0 0 0.9rem}   /* Play and the circles at the left; the tools pushed right by their auto margin */

.brain-viz .bv-canvas{position:relative}
.brain-viz .bv-svg{display:block;width:100%;height:auto;overflow:visible}

/* --- the drawing: static anatomy ------------------------------------ */
.brain-viz .bv-head-line{fill:none;stroke:var(--bv-ink);stroke-opacity:0.2;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.brain-viz .bv-brain-fill{fill:var(--bv-tissue)}
.brain-viz .bv-brain-line{fill:none;stroke:var(--bv-ink);stroke-opacity:0.5;stroke-width:1.4;stroke-linejoin:round}
.brain-viz .bv-sulcus{fill:none;stroke:var(--bv-ink);stroke-opacity:0.22;stroke-width:1.1;stroke-linecap:round}
.brain-viz .bv-sulcus.is-major{stroke-opacity:0.42;stroke-width:1.35}
.brain-viz .bv-folia{fill:none;stroke:var(--bv-ink);stroke-opacity:0.2;stroke-width:0.9;stroke-linecap:round}
.brain-viz .bv-hidden-line{fill:none;stroke:var(--bv-ink);stroke-opacity:0.2;stroke-width:1.1;stroke-dasharray:3 3}
.brain-viz .bv-cord{fill:none;stroke:url(#bv-cord-fade);stroke-width:1.3}
.brain-viz .bv-ear-fill{fill:var(--bv-skin)}
.brain-viz .bv-ear-line{fill:none;stroke:var(--bv-ink);stroke-opacity:0.48;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.brain-viz .bv-ear-soft{fill:none;stroke:var(--bv-ink);stroke-opacity:0.28;stroke-width:1;stroke-linecap:round}
.brain-viz .bv-hole{fill:var(--bv-ink);fill-opacity:0.5}
.brain-viz .bv-zoom{fill:none;stroke:var(--bv-ink);stroke-opacity:0.24;stroke-width:0.9}
.brain-viz .bv-callout-bg{fill:var(--bv-tissue)}
.brain-viz .bv-callout-ring{fill:none;stroke:var(--bv-ink);stroke-opacity:0.38;stroke-width:1.2}
.brain-viz .bv-bone{fill:var(--bv-bone)}
.brain-viz .bv-air{fill:var(--bv-tissue)}
.brain-viz .bv-skin{fill:var(--bv-skin)}
.brain-viz .bv-anat{fill:none;stroke:var(--bv-ink);stroke-opacity:0.5;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.brain-viz .bv-anat.is-soft{stroke-opacity:0.25}
.brain-viz .bv-ossicle{fill:none;stroke:var(--bv-ink);stroke-opacity:0.6;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.brain-viz .bv-ossicle-base{fill:#e4d9c6}
.brain-viz .bv-spiral{fill:none;stroke:var(--bv-ink);stroke-opacity:0.55;stroke-width:1.2;stroke-linecap:round}
.brain-viz .bv-dot{fill:var(--bv-ink);fill-opacity:0.35}
.brain-viz .bv-inset-fill{fill:var(--bv-tissue)}
.brain-viz .bv-inset-line{fill:none;stroke:var(--bv-ink);stroke-opacity:0.45;stroke-width:1.2;stroke-linejoin:round}
.brain-viz .bv-inset-gyrus{fill:none;stroke:var(--bv-ink);stroke-opacity:0.18;stroke-width:1;stroke-linecap:round}
.brain-viz .bv-svg-cap{
  font-family:var(--bv-font-display);
  font-style:italic;
  font-size:15px;
  fill:var(--bv-muted);
}
.brain-viz .bv-svg-letter{
  font-family:var(--bv-font-display);
  font-size:21px;
  fill:var(--bv-muted);
  transition:fill 0.5s ease;
}
/* on the gold wash, ink keeps the letters above 4.5:1 */
.brain-viz .bv-svg-letter.is-on{fill:var(--bv-ink)}
.brain-viz .bv-inset-notes{opacity:0;transition:opacity 0.5s ease}
.brain-viz .bv-inset-notes.is-on{opacity:1}
.brain-viz .bv-svg-head{
  font-family:var(--bv-font-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:0.08em;
  fill:var(--bv-e3-ink);
}
.brain-viz .bv-svg-word{
  font-family:var(--bv-font-body);
  font-size:15px;
  fill:var(--bv-prose);
}
.brain-viz .bv-svg-word.is-italic{font-family:var(--bv-font-display);font-style:italic;fill:var(--bv-muted)}

/* names of the parts in the magnified box (its own units: 8.2 is about 13 on the page) */
.brain-viz .bv-clabel{
  font-family:var(--bv-font-body);
  font-size:8.2px;
  font-weight:500;
  fill:var(--bv-muted);
  transition:fill 0.4s ease;
}
.brain-viz .bv-clabel.is-on{fill:var(--bv-ink);font-weight:600}
.brain-viz .bv-clead{fill:none;stroke:var(--bv-ink);stroke-opacity:0.3;stroke-width:0.6;transition:stroke 0.4s ease,stroke-opacity 0.4s ease}
.brain-viz .bv-clead.is-on{stroke:var(--bv-cur);stroke-opacity:0.85}

/* the current stage's tag: number, name, and a leader to the drawing */
.brain-viz .bv-tag{pointer-events:none}
.brain-viz .bv-tag-bg{fill:var(--bv-panel);stroke:var(--bv-tag-c,var(--bv-cur));stroke-width:1.4}
.brain-viz .bv-tag-dot{fill:var(--bv-tag-c,var(--bv-cur))}
.brain-viz .bv-tag-num{font-family:var(--bv-font-body);font-size:12px;font-weight:600;fill:#ffffff}
.brain-viz .bv-tag-text{font-family:var(--bv-font-body);font-size:13px;font-weight:600;fill:var(--bv-ink)}
.brain-viz .bv-tag-lead{fill:none;stroke:var(--bv-tag-c,var(--bv-cur));stroke-width:1.4;stroke-linecap:round}

/* sound waves arriving at the ear (stage 1) */
.brain-viz .bv-wave{
  fill:none;stroke:var(--bv-e1);stroke-width:1.7;stroke-linecap:round;
  opacity:0.2;
  transition:opacity 0.4s ease;
}
.brain-viz .bv-waves.is-on .bv-wave{opacity:0.65}
.brain-viz .bv-waves.is-waving .bv-wave{animation:bv-wave 1.4s ease-in-out 2}
@keyframes bv-wave{
  0%{opacity:0.65;transform:translateX(0)}
  48%{opacity:0;transform:translateX(16px)}
  52%{opacity:0;transform:translateX(-16px)}
  100%{opacity:0.65;transform:translateX(0)}
}

/* --- regions: faint until their stage, then a soft watercolor wash ---- */
.brain-viz .bv-rfill{
  fill:var(--bv-own);
  fill-opacity:0.045;
  transition:fill-opacity 0.6s ease,fill 0.6s ease;
}
.brain-viz .bv-rfill.is-hover{fill-opacity:0.2}
.brain-viz .bv-rfill.is-on{fill:var(--bv-cur);fill-opacity:var(--bv-cur-alpha)}
.brain-viz .bv-rfill.is-on.is-hover{fill-opacity:calc(var(--bv-cur-alpha) + 0.12)}
/* the magnified ear's shapes are small and close together: a lighter touch */
.brain-viz .bv-cfills .bv-rfill.is-on{fill-opacity:calc(var(--bv-cur-alpha) * 0.8)}
.brain-viz .bv-cfills .bv-rfill.is-on.is-hover{fill-opacity:calc(var(--bv-cur-alpha) * 0.8 + 0.12)}
.brain-viz .bv-clines .bv-rline{stroke-width:0.8}
.brain-viz .bv-clines .bv-rline.is-on{stroke-opacity:0.6}
.brain-viz .bv-croutes .bv-seg{stroke-width:1.5}
.brain-viz .bv-croutes .bv-seg.is-current{opacity:0.6}
.brain-viz .bv-rline{
  fill:none;
  stroke:var(--bv-own);
  stroke-opacity:0;
  stroke-width:1.25;
  stroke-linejoin:round;
  transition:stroke-opacity 0.6s ease,stroke 0.6s ease;
}
.brain-viz .bv-rline.is-deep{stroke:var(--bv-ink);stroke-opacity:0.14;stroke-dasharray:3 2.5}
.brain-viz .bv-rline.is-hover{stroke:var(--bv-own);stroke-opacity:0.75}
.brain-viz .bv-rline.is-on{stroke:var(--bv-cur);stroke-opacity:0.9}
.brain-viz .bv-hit{fill:transparent;stroke:transparent;stroke-width:6;pointer-events:all;cursor:pointer}

/* --- the signal ------------------------------------------------------ */
.brain-viz .bv-seg{
  fill:none;
  stroke:var(--bv-own);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transition:opacity 0.4s ease;
}
.brain-viz .bv-seg.is-past{opacity:0.28;stroke-width:1.5}
.brain-viz .bv-seg.is-current{opacity:0.72;stroke-width:1.7}
.brain-viz .bv-seg.is-current.is-settled{opacity:0.5}
.brain-viz .bv-pulse{transition:opacity 0.45s ease;pointer-events:none}
.brain-viz .bv-pulse.is-done{opacity:0}
.brain-viz .bv-pulse-halo{fill:var(--bv-cur);opacity:0.5}
.brain-viz .bv-pulse-core{fill:var(--bv-cur);stroke:#ffffff;stroke-width:1.3}

/* --- region hotspots: keyboard and screen-reader access to the drawing */
.brain-viz .bv-spots{position:absolute;inset:0;pointer-events:none}
.brain-viz .bv-spot{
  position:absolute;
  width:24px;height:24px;
  margin:-12px 0 0 -12px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  pointer-events:none;   /* the drawn shapes take the pointer; these take focus */
}
.brain-viz .bv-spot:focus{outline:none}
.brain-viz .bv-spot:focus-visible{box-shadow:0 0 0 2px #ffffff,0 0 0 4px var(--bv-ink)}

/* --- tooltip: the endometriosis timeline's tick tooltip -------------- */
.brain-viz .bv-tip{
  position:absolute;
  left:0;top:0;
  z-index:3;
  pointer-events:none;
  transform:translate(-50%,calc(-100% - 12px));
  background:var(--bv-tip-bg);
  color:var(--bv-tip-ink);
  font-family:var(--bv-font-body);
  font-size:0.8rem;
  line-height:1.4;
  padding:0.5rem 0.7rem;
  border-radius:3px;
  max-width:15rem;
  width:max-content;
  box-shadow:0 6px 18px rgba(0,0,0,0.22);
}
.brain-viz .bv-tip::after{
  content:"";
  position:absolute;
  left:var(--bv-tip-arrow,50%);
  top:100%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--bv-tip-bg);
}
.brain-viz .bv-tip.is-below{transform:translate(-50%,14px)}
.brain-viz .bv-tip.is-below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--bv-tip-bg)}
.brain-viz .bv-tip-name{display:block;font-weight:600}
.brain-viz .bv-tip-stage{display:block;opacity:0.72;font-size:0.74rem;margin-top:0.1rem}

/* --- phones: the inset's labels are too small to draw, so say them ---- */
.brain-viz .bv-inset-key{display:none}

/* --- the tools at the drawing's right edge, as on the Healthy Minds Tree
       (css/healthy-minds-tree.css .tv-tools): Play / Pause / Play again in
       a filled circle ringed by a timer, then Share, the sound switch and
       Full screen, each round and outlined, each named in a small tip ---- */
.brain-viz .bv-btn{
  display:inline-flex;align-items:center;gap:0.45rem;
  margin:0;
  padding:0.46rem 1.05rem;
  border:2px solid var(--bv-secondary);
  border-radius:100px;
  background:transparent;
  color:var(--bv-secondary);
  font-family:var(--bv-font-body);
  font-size:0.84rem;
  font-weight:600;
  line-height:1.1;
  white-space:nowrap;
  cursor:pointer;
}
.brain-viz .bv-tools{display:flex;align-items:center;gap:0.55rem;flex:0 0 auto}
.brain-viz .bv-tool{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;flex:0 0 auto;
  margin:0;padding:0;
  border:2px solid var(--bv-secondary);
  border-radius:50%;
  background:transparent;
  color:var(--bv-secondary);
  cursor:pointer;
  transition:background 0.2s ease,color 0.2s ease,transform 0.15s ease;
}
@media (min-width:381px){.brain-viz .bv-tool{width:2.375rem;height:2.375rem}}
.brain-viz .bv-tool .bv-ico{width:18px;height:18px}
.brain-viz .bv-tool .bv-ico-play{transform:translateX(1px)}
.brain-viz .bv-play{background:var(--bv-secondary);color:var(--bv-on-secondary)}
/* the timer ring: a thin track round Play, and an arc that fills clockwise
   from the top, in the current stage's color, until the next stage */
.brain-viz .bv-playwrap{position:relative;display:inline-flex;flex:0 0 auto;margin-right:0.3rem}
.brain-viz .bv-timer{
  position:absolute;left:-5px;top:-5px;
  width:calc(100% + 10px);height:calc(100% + 10px);
  transform:rotate(-90deg);
  pointer-events:none;
  opacity:0;transition:opacity 0.3s ease;
}
.brain-viz .bv-timer.is-on{opacity:1}
.brain-viz .bv-timer circle{fill:none;stroke-width:2.6}
.brain-viz .bv-timer-track{stroke:var(--bv-rule)}
.brain-viz .bv-timer-arc{stroke:var(--bv-timer-c,var(--bv-secondary));stroke-linecap:round}
@media (hover:hover){
  .brain-viz .bv-play:hover{background:var(--bv-secondary-hover);border-color:var(--bv-secondary-hover)}
  .brain-viz .bv-sound:hover,
  .brain-viz .bv-share:hover,
  .brain-viz .bv-full:hover{background:rgba(47,109,132,0.08)}
}
.brain-viz .bv-tool:active{transform:scale(0.95)}
.brain-viz .bv-tool:focus{outline:2px solid transparent;outline-offset:3px}
.brain-viz .bv-tool:focus-visible{box-shadow:0 0 0 2px var(--bv-paper),0 0 0 4px var(--bv-focus)}
@media (forced-colors:active){.brain-viz .bv-tool:focus-visible{outline:2px solid ButtonText}}
@media (max-width:380px){.brain-viz .bv-tools{gap:0.45rem}.brain-viz .bv-playwrap{margin-right:0.25rem}}
/* Play sits at the bar's left, before the circles (its timer ring reaches
   5px outside it; the margin keeps the ring clear of the first circle).
   Where the bar is too narrow for all of it on one row, the tools drop
   under the circles, at the right */
.brain-viz .bv-bar{flex-wrap:wrap;row-gap:0.5rem}
.brain-viz .bv-tools{margin-left:auto}
/* each tool's name, in a small dark tip under it, on hover (after a moment)
   or keyboard focus; the last tool's tip keeps to the drawing's right edge */
.brain-viz .bv-bar{position:relative;z-index:6}   /* the tips over the drawing */
.brain-viz .bv-tool[data-tip]::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 9px);left:50%;z-index:30;
  padding:0.38rem 0.7rem;
  border-radius:6px;
  background:var(--bv-tip-bg);color:var(--bv-tip-ink);
  font-family:var(--bv-font-body);font-size:0.78rem;font-weight:600;line-height:1.2;letter-spacing:0;
  white-space:nowrap;
  opacity:0;transform:translate(-50%,-4px);
  pointer-events:none;
  transition:opacity 0.15s ease,transform 0.15s ease;
}
.brain-viz .bv-tools > .bv-tool:last-child::after{left:auto;right:-2px;transform:translateY(-4px)}
@media (hover:hover){
  .brain-viz .bv-tool[data-tip]:hover::after{opacity:1;transform:translate(-50%,0);transition-delay:0.3s}
  .brain-viz .bv-tools > .bv-tool:last-child:hover::after{transform:none}
}
.brain-viz .bv-tool[data-tip]:focus-visible::after,
.brain-viz .bv-tool.is-done::after{opacity:1;transform:translate(-50%,0);transition-delay:0s}
.brain-viz .bv-tools > .bv-tool:last-child:focus-visible::after,
.brain-viz .bv-tools > .bv-tool.is-done:last-child::after{transform:none}
/* the pointer resting in full screen hides the tips with it */
.brain-viz.is-presenting.is-idle .bv-tool::after{opacity:0}
@media (prefers-reduced-motion:reduce){.brain-viz .bv-tool[data-tip]::after,.brain-viz .bv-timer{transition:none}}
@media (forced-colors:active){.brain-viz .bv-tool[data-tip]::after{border:1px solid CanvasText}}

/* --- the stage circles: a numbered dot per stage on a thin line. Hover or
       focus slides the title out of the dot as a pill. Only the dot takes
       the pointer (the pill lets it pass through), so gliding along the row
       opens each dot in turn. The last three open leftward to stay inside
       the column. --------------------------------------------------------- */
.brain-viz .bv-sdots{
  position:relative;
  display:flex;align-items:center;gap:0.62rem;
  width:max-content;          /* the line runs only between the first and last dot */
  height:2.75rem;
  justify-self:start;
  margin:0;
  padding:0;
}
.brain-viz .bv-sdots::before{
  content:"";
  position:absolute;left:0.9rem;right:0.9rem;top:50%;
  height:2px;margin-top:-1px;
  background:var(--bv-rule);
}
.brain-viz .bv-sdot-slot{
  position:relative;width:1.8rem;height:1.8rem;flex:0 0 auto;
  z-index:0;
  transition:z-index 0s linear 0.28s;   /* stay on top until the pill has closed */
}
/* a hovered pill outranks a focused dot (a clicked dot keeps focus) */
.brain-viz .bv-sdot-slot:focus-within{z-index:2;transition-delay:0s}
.brain-viz .bv-sdot-slot.is-open{z-index:3;transition-delay:0s}
.brain-viz .bv-sdot{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:1.8rem;height:1.8rem;
  margin:0;padding:0;
  border:0;border-radius:50%;
  background:var(--bv-dc);
  color:#ffffff;
  font-family:var(--bv-font-body);
  font-size:0.8rem;
  font-weight:600;
  line-height:1;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  box-shadow:0 0 0 2px var(--bv-paper);
  transition:box-shadow 0.2s ease;
}
/* the pill: drawn behind the number, from the dot's center outward */
.brain-viz .bv-sdot-label{
  position:absolute;top:0;left:0.9rem;z-index:-1;
  display:flex;align-items:center;
  height:1.8rem;
  padding:0 0.85rem 0 1.25rem;
  border-radius:0 100px 100px 0;
  background:var(--bv-dc);
  color:#ffffff;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:2px -5px 0 var(--bv-paper),2px 5px 0 var(--bv-paper),5px 0 0 var(--bv-paper);
  opacity:0;
  clip-path:inset(-5px 100% -5px 0);
  transition:clip-path 0.28s ease,opacity 0.18s ease;
}
.brain-viz .bv-sdot-slot.is-end .bv-sdot-label{
  left:auto;right:0.9rem;
  padding:0 1.25rem 0 0.85rem;
  border-radius:100px 0 0 100px;
  box-shadow:-2px -5px 0 var(--bv-paper),-2px 5px 0 var(--bv-paper),-5px 0 0 var(--bv-paper);
  clip-path:inset(-5px 0 -5px 100%);
}
.brain-viz .bv-sdot-slot.is-open .bv-sdot-label,
.brain-viz .bv-sdot:focus-visible .bv-sdot-label{opacity:1;clip-path:inset(-5px -5px -5px 0)}
.brain-viz .bv-sdot-slot.is-end.is-open .bv-sdot-label,
.brain-viz .bv-sdot-slot.is-end .bv-sdot:focus-visible .bv-sdot-label{clip-path:inset(-5px 0 -5px -5px)}
/* Escape closes an open pill without moving focus or the pointer */
.brain-viz .bv-sdot-slot.is-hushed .bv-sdot .bv-sdot-label{opacity:0;clip-path:inset(-5px 100% -5px 0)}
.brain-viz .bv-sdot-slot.is-end.is-hushed .bv-sdot .bv-sdot-label{clip-path:inset(-5px 0 -5px 100%)}
/* the current stage: a ring in its own color */
.brain-viz .bv-sdot[aria-current="step"]{box-shadow:0 0 0 2px var(--bv-paper),0 0 0 4px var(--bv-dc)}
.brain-viz .bv-sdot:focus{outline:2px solid transparent;outline-offset:2px}
.brain-viz .bv-sdot:focus-visible{box-shadow:0 0 0 2px var(--bv-paper),0 0 0 4px var(--bv-focus)}
/* --- a narrow bar (phones, and a narrow two-column window), too narrow
       for the numbered circles and the tools side by side: the stages
       become plain dots, spread over the room between Play and the tools,
       so everything stays on one line and Play is the main button. The
       current stage's dot is ringed in its color; each dot keeps a tap
       target the bar's full height; a title still opens on keyboard focus
       or mouse hover. Only if even the closest dots don't fit (a small
       window in full screen) do the tools drop to a second row. -------- */
.brain-viz .bv-bar{container:bv-bar / inline-size}
@container bv-bar (max-width:465px){
  /* the dots take 6px of the bar's gap on each side, so they get 24px-wide
     targets wherever the bar is 312px or wider (a 360px phone) */
  .brain-viz .bv-sdots{flex:1 1 0;min-width:calc(7 * 16px);width:auto;justify-content:space-between;gap:0;margin-inline:-6px}
  .brain-viz .bv-sdots::before{left:12px;right:12px}
  .brain-viz .bv-sdot-slot{flex:0 1 24px;min-width:16px;width:24px;height:2.75rem}
  .brain-viz .bv-sdot{width:100%;height:100%;border-radius:0;background:transparent;box-shadow:none;transition:none}   /* the dot (::before) carries the ring and its fade */
  .brain-viz .bv-sdot > span:not(.bv-sdot-label){display:none}
  .brain-viz .bv-sdot::before{
    content:"";
    width:12px;height:12px;flex:0 0 auto;
    border-radius:50%;
    background:var(--bv-dc);
    box-shadow:0 0 0 2px var(--bv-paper);
    transition:box-shadow 0.2s ease;
  }
  .brain-viz .bv-sdot[aria-current="step"],
  .brain-viz .bv-sdot:focus-visible{box-shadow:none}
  .brain-viz .bv-sdot[aria-current="step"]::before{box-shadow:0 0 0 2px var(--bv-paper),0 0 0 4px var(--bv-dc)}
  .brain-viz .bv-sdot:focus-visible::before{box-shadow:0 0 0 2px var(--bv-paper),0 0 0 4px var(--bv-focus)}
  /* the title pill, from the dot's center; closed, it's out of the layout
     altogether (a pill from a dot mid-row would widen the page) */
  .brain-viz .bv-sdot-label,
  .brain-viz .bv-sdot-slot.is-end .bv-sdot-label{
    display:none;
    top:calc(50% + 0.85rem);left:50%;right:auto;
    padding:0 0.8rem;
    border-radius:100px;
    transform:translateX(-50%);
    box-shadow:0 0 0 2px var(--bv-paper);
    clip-path:none;
  }
  .brain-viz .bv-sdot-slot.is-open .bv-sdot-label,
  .brain-viz .bv-sdot:focus-visible .bv-sdot-label{display:flex;clip-path:none}
}
/* a very narrow bar (a fold phone's cover screen, or a large display-size
   setting): the dots closer still, so the tools stay on the line */
@container bv-bar (max-width:262px){
  .brain-viz .bv-sdots{min-width:calc(7 * 12px)}
  .brain-viz .bv-sdot-slot{min-width:12px}
}
@media (forced-colors:active){
  .brain-viz .bv-sdot{border:1px solid ButtonText}
  .brain-viz .bv-sdot[aria-current="step"]{outline:2px solid Highlight;outline-offset:2px}
  .brain-viz .bv-sdot:focus-visible{outline:2px solid ButtonText;outline-offset:4px}
  /* the dots (a background on ::before) would vanish in high contrast */
  @container bv-bar (max-width:465px){
    .brain-viz .bv-sdot{border:0}
    .brain-viz .bv-sdot[aria-current="step"],
    .brain-viz .bv-sdot:focus-visible{outline:0}
    .brain-viz .bv-sdot::before{forced-color-adjust:none;background:ButtonText}
    .brain-viz .bv-sdot[aria-current="step"]::before{background:Highlight;outline:2px solid Highlight;outline-offset:2px}
    .brain-viz .bv-sdot:focus-visible::before{outline:2px solid ButtonText;outline-offset:3px}
  }
}

/* --- the stage header: arrows either side of "Stage 1 of 7" ----------- */
.brain-viz .bv-reader{
  border-left:3px solid var(--bv-cur);
  padding:0.1rem 0 0.2rem 1.1rem;
  transition:border-color 0.4s ease;
}
.brain-viz .bv-stepnav{display:flex;align-items:center;gap:0.7rem;margin:0 0 0.8rem}
.brain-viz .bv-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;flex:0 0 auto;
  margin:0;padding:0;
  border:2px solid var(--bv-secondary);
  border-radius:50%;
  background:transparent;
  color:var(--bv-secondary);
  cursor:pointer;
}
.brain-viz .bv-arrow:hover{background:rgba(47,109,132,0.08)}
.brain-viz .bv-arrow svg{width:17px;height:17px}
.brain-viz .bv-arrow[aria-disabled="true"]{opacity:0.35;cursor:default}
.brain-viz .bv-arrow[aria-disabled="true"]:hover{background:transparent}
.brain-viz .bv-arrow:focus-visible,
.brain-viz .bv-btn:focus-visible,
.brain-viz .bv-link:focus-visible{outline:2px solid var(--bv-focus);outline-offset:3px}

/* --- caption panel --------------------------------------------------- */
.brain-viz .bv-panel{padding:0}
.brain-viz .bv-panel.is-entering{animation:bv-fade 420ms ease-out}
@keyframes bv-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.brain-viz .bv-step,
.brain-viz .bv-where{
  margin:0;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--bv-muted);
  font-variant-numeric:tabular-nums;
}
.brain-viz .bv-title{
  margin:0 0 0.65rem;
  font-family:var(--bv-font-display);
  font-size:clamp(1.35rem,2.5vw,1.6rem);
  font-weight:400;
  line-height:1.18;
  color:var(--bv-ink);
  text-wrap:balance;
}
.brain-viz .bv-caption{
  margin:0 0 1.15rem;
  font-size:0.95rem;
  line-height:1.62;
  color:var(--bv-prose);
}
.brain-viz .bv-where{margin-bottom:0.5rem}
.brain-viz .bv-step{min-width:7.2em;text-align:center}
.brain-viz .bv-regions{list-style:none;margin:0;padding:0}
.brain-viz .bv-region-item{
  position:relative;
  margin:0 0 0.32rem;
  padding:0 0 0 1rem;
  font-size:0.84rem;
  line-height:1.45;
  color:var(--bv-prose);
}
.brain-viz .bv-region-item::before{
  content:"";
  position:absolute;left:0;top:0.47em;
  width:7px;height:7px;border-radius:50%;
  background:var(--bv-c);
}

/* --- note ------------------------------------------------------------ */
.brain-viz .bv-note{
  margin:2.4rem 0 0;
  padding:0.9rem 0 0;
  border-top:1px solid var(--bv-rule);
  max-width:72ch;
  font-size:0.78rem;
  line-height:1.55;
  color:var(--bv-muted);
}
.brain-viz .bv-note-text{margin:0 0 0.45rem}
.brain-viz .bv-note-label{font-weight:600;color:var(--bv-prose)}
.brain-viz .bv-sources{margin:0}
.brain-viz .bv-link{color:var(--bv-secondary);text-decoration:underline;text-decoration-color:rgba(47,109,132,0.4);text-underline-offset:2px}
.brain-viz .bv-link:hover{text-decoration-color:currentColor}

/* full screen is for presenting: not offered on phones, upright or
   sideways (never hidden while presenting) */
@media (max-width:600px),(max-height:500px){.brain-viz:not(.is-presenting) .bv-full{display:none}}

@media (max-width:860px){
  /* narrow: the circles and the drawing, then the text (the same order as
     the keyboard's) */
  .brain-viz .bv-grid{grid-template-columns:minmax(0,1fr);gap:1rem}
  .brain-viz .bv-figure{grid-column:1;grid-row:1}
  .brain-viz .bv-reader{grid-column:1;grid-row:2}
}
/* the smallest phones, as on the tree: the tools a touch smaller (the
   stages are dots there, spaced by the narrow-bar rules above) */
@media (max-width:380px){
  .brain-viz .bv-tool{width:2.25rem;height:2.25rem}
}
/* 5: a browser without container queries keeps the numbered circles: on
   the smallest phones they sit closer, so they share Play's line */
@supports not (container-type:inline-size){
  @media (max-width:380px){.brain-viz .bv-sdots{gap:0.42rem}}
}
@media (max-width:600px){
  .brain-viz .bv-canvas{margin:0 -12px}
}

@media (max-width:560px){
  .brain-viz .bv-fine{display:none}
  /* the magnified box shrinks with the drawing: larger names keep them legible */
  .brain-viz .bv-clabel{font-size:9.6px}
  .brain-viz .bv-svg-cap{font-size:20px}
  .brain-viz .bv-inset-key.is-on{
    display:block;
    margin:0.55rem 0 0;
    font-size:0.82rem;
    line-height:1.5;
    color:var(--bv-prose);
  }
}
/* --- full screen, for presenting ---------------------------------------
       The title, the stage text and the drawing fill the screen (the
       browser's full screen where it allows, otherwise the window), on the
       page's paper and watercolor washes. Type is larger, for a room
       (--bv-fit, set by the script from --bv-present-type), and steps down
       until the longest stage's text fits beside the drawing. On a tall
       screen the drawing sits above the text and the page scrolls. ------- */
html.bv-is-presenting,html.bv-is-presenting body{overflow:hidden}
.brain-viz.is-presenting{
  --bv-pad-y:clamp(1.25rem,4.5vh,3.5rem);
  --bv-pad-x:clamp(1.5rem,5vw,6rem);
  --bv-present-scale:0.85;   /* the drawing: this much of what the screen's height allows */
  --bv-present-type:0.85;    /* the type, before it steps down to fit */
  --bv-wash-size:220px;      /* as body::after in rethinking-endo.css; the images are only 253px wide */
  --bv-wash-opacity:0.3;
  --bv-col-gap:clamp(2rem,4vw,5rem);
  /* the drawing's width: the height left after the title and the bar over
     the drawing (about 7.5rem), over the drawing's shape
     (520/556), and never more than the width beside a 22rem text column */
  --bv-fig-w:calc(var(--bv-present-scale) * min(calc((100vh - 2 * var(--bv-pad-y) - 7.5rem) / 0.935), calc(100vw - 2 * var(--bv-pad-x) - 22rem - var(--bv-col-gap))));
  --bv-fig-w:calc(var(--bv-present-scale) * min(calc((100dvh - 2 * var(--bv-pad-y) - 7.5rem) / 0.935), calc(100vw - 2 * var(--bv-pad-x) - 22rem - var(--bv-col-gap))));
  position:fixed;inset:0;z-index:2147483000;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:100%;height:100%;max-width:none;
  margin:0;
  padding:var(--bv-pad-y) var(--bv-pad-x);
  box-sizing:border-box;
  overflow:hidden;
  /* the page's paper, as the page draws it: the theme's paper texture
     (style.css .page-content::before, 0.25) over rethinking-endo.css's
     finer one (body::before, 0.1). The finer one is folded into the
     background here (the paper color at 90% over it); the theme's is the
     ::before layer below */
  background:
    linear-gradient(rgba(250,248,245,0.9),rgba(250,248,245,0.9)),
    url("assets/paper-texture.png") repeat,
    var(--bv-paper);
}
.brain-viz.is-presenting:focus{outline:none}
/* the page's paper and washes (css/rethinking-endo.css body::before and
   ::after), which full screen would otherwise cover */
.brain-viz.is-presenting::before,
.brain-viz.is-presenting::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.brain-viz.is-presenting::before{background:url("../images/paper-texture.png") repeat;opacity:0.25}
.brain-viz.is-presenting::after{
  background:
    url("assets/watercolor-blue-left.webp") left top / var(--bv-wash-size) auto no-repeat,
    url("assets/watercolor-pink-right.webp") right bottom / var(--bv-wash-size) auto no-repeat;
  opacity:var(--bv-wash-opacity);
}
.brain-viz.is-presenting .bv-kicker,
.brain-viz.is-presenting .bv-howto,
.brain-viz.is-presenting .bv-note{display:none}
.brain-viz.is-presenting .bv-headline,
.brain-viz.is-presenting .bv-grid{width:calc(min(30rem, 100vw - 2 * var(--bv-pad-x) - var(--bv-fig-w) - var(--bv-col-gap)) + var(--bv-col-gap) + var(--bv-fig-w))}
.brain-viz.is-presenting .bv-headline{
  max-width:none;
  margin:0 0 clamp(1rem,3vh,2rem);
  font-size:calc(clamp(1.6rem,4.2vh,2.75rem) * var(--bv-fit,1));
}
/* the page's layout, whatever the width: the text on the left, the bar
   and the drawing on the right */
.brain-viz.is-presenting .bv-grid{
  grid-template-columns:minmax(0,1fr) var(--bv-fig-w);
  column-gap:var(--bv-col-gap);
  row-gap:clamp(1rem,2.4vh,1.6rem);
}
.brain-viz.is-presenting .bv-reader{grid-column:1;grid-row:1}
.brain-viz.is-presenting .bv-figure{grid-column:2;grid-row:1}
.brain-viz.is-presenting .bv-canvas{margin:0}
.brain-viz.is-presenting .bv-stepnav{margin-bottom:clamp(0.8rem,2.2vh,1.4rem)}
.brain-viz.is-presenting .bv-step,
.brain-viz.is-presenting .bv-where{font-size:calc(clamp(0.72rem,1.45vh,0.95rem) * var(--bv-fit,1))}
.brain-viz.is-presenting .bv-title{font-size:calc(clamp(1.5rem,3.7vh,2.6rem) * var(--bv-fit,1));margin-bottom:clamp(0.6rem,1.8vh,1.2rem)}
.brain-viz.is-presenting .bv-caption{font-size:calc(clamp(1rem,2.35vh,1.5rem) * var(--bv-fit,1));line-height:1.55}
.brain-viz.is-presenting .bv-region-item{font-size:calc(clamp(0.9rem,1.95vh,1.2rem) * var(--bv-fit,1))}
/* a tall screen: the circles, the drawing, then Play and the text, in one
   column that scrolls if it has to */
@media (max-aspect-ratio:1/1){
  .brain-viz.is-presenting{
    justify-content:flex-start;overflow-y:auto;
    --bv-fig-w:min(calc(100vw - 2 * var(--bv-pad-x)), calc(var(--bv-present-scale) * 52vh / 0.935));
    --bv-fig-w:min(calc(100vw - 2 * var(--bv-pad-x)), calc(var(--bv-present-scale) * 52dvh / 0.935));
  }
  .brain-viz.is-presenting .bv-headline,
  .brain-viz.is-presenting .bv-grid{width:100%}
  .brain-viz.is-presenting .bv-grid{grid-template-columns:minmax(0,1fr)}
  .brain-viz.is-presenting .bv-figure{grid-column:1;grid-row:1;justify-self:center;width:var(--bv-fig-w)}
  .brain-viz.is-presenting .bv-reader{grid-column:1;grid-row:2}
  .brain-viz.is-presenting .bv-title{font-size:calc(clamp(1.4rem,3.6vw,2.4rem) * var(--bv-fit,1))}
  .brain-viz.is-presenting .bv-caption{font-size:calc(clamp(1rem,2.3vw,1.4rem) * var(--bv-fit,1))}
  .brain-viz.is-presenting .bv-region-item{font-size:calc(clamp(0.9rem,1.9vw,1.15rem) * var(--bv-fit,1))}
}
/* if even the smallest type doesn't fit beside the drawing, the page scrolls */
.brain-viz.is-presenting.is-cramped{justify-content:flex-start;overflow-y:auto}
/* the pointer hides when it rests */
.brain-viz.is-presenting.is-idle,
.brain-viz.is-presenting.is-idle *{cursor:none}
/* the reminder of the keys, for a few seconds as full screen begins */
.brain-viz .bv-present-hint{display:none}
.brain-viz.is-presenting .bv-present-hint{
  display:block;
  position:fixed;right:var(--bv-pad-x);bottom:clamp(0.75rem,2.6vh,1.75rem);z-index:5;
  margin:0;padding:0.55rem 1rem;
  border-radius:100px;
  background:var(--bv-tip-bg);color:var(--bv-tip-ink);
  font-family:var(--bv-font-body);font-size:0.875rem;font-weight:600;line-height:1.3;
  white-space:nowrap;
  opacity:0;transform:translateY(8px);
  pointer-events:none;
  transition:opacity 0.35s ease,transform 0.35s ease;
}
.brain-viz.is-presenting .bv-present-hint.is-on{opacity:1;transform:none}
.brain-viz .bv-present-hint kbd{
  display:inline-block;min-width:1.7em;margin:0 0.1em;padding:0.05em 0.4em;
  border:1px solid rgba(244,241,234,0.55);border-radius:4px;
  font:inherit;text-align:center;
}
.brain-viz .bv-present-sep{margin:0 0.35em;opacity:0.6}

@media (prefers-reduced-motion:reduce){
  .brain-viz.is-presenting .bv-present-hint{transition:none}
  .brain-viz .bv-sdot-label,.brain-viz .bv-sdot,.brain-viz .bv-sdot-slot{transition:none}
  .brain-viz .bv-waves.is-waving .bv-wave{animation:none}
  .brain-viz .bv-panel.is-entering{animation:none}
  .brain-viz .bv-rfill,.brain-viz .bv-rline,.brain-viz .bv-seg,.brain-viz .bv-wave,
  .brain-viz .bv-inset-notes,.brain-viz .bv-svg-letter{transition:none}
}