/* ==========================================================================
   Brain Lab — styles for /brain-lab only (loaded after styles.css).
   The site palette is strictly monochrome. The ONE exception is the Stroop game
   board (.st), whose inks are real colours; every ink also carries its own
   pattern and every answer button its colour name, for colour-blind players.
   ========================================================================== */

/* ---------- Hub (top of page) ---------- */
.lab-head h1 { max-width: none; }
.hub {
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.js .page-head .container > .hub { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .hub > li { animation: rise var(--dur-4) var(--ease-out) both; }
  .js .hub > li:nth-child(1) { animation-delay: 180ms; }
  .js .hub > li:nth-child(2) { animation-delay: 250ms; }
  .js .hub > li:nth-child(3) { animation-delay: 320ms; }
}
.hub-card {
  position: relative; isolation: isolate; height: 100%;
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 1.35rem 1.35rem 1.1rem; border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white); text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.hub-card::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 24px 40px -24px rgba(0, 0, 0, 0.8);
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.hub-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.hub-card__icon {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--white); color: var(--black); transition: transform var(--dur-3) var(--ease-out);
}
.hub-card__icon svg { width: 22px; height: 22px; }
.hub-card__num { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.hub-card__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.7rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.hub-card__desc { color: rgba(255, 255, 255, 0.78); font-size: 1rem; line-height: 1.45; }
.hub-card__foot {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-size: 0.92rem; font-weight: 600;
}
.hub-card__foot svg { width: 20px; height: 20px; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.hub-card__best { display: inline-block; color: rgba(255, 255, 255, 0.86); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .hub-card__best.is-new { animation: rise var(--dur-4) var(--ease-out); } }
[data-game]:focus { outline: none; }
@media (hover: hover) {
  .hub-card:hover { transform: translate3d(0, -4px, 0); }
  .hub-card:hover::before { opacity: 1; }
  .hub-card:hover .hub-card__icon { transform: rotate(-10deg) scale(1.06); }
  .hub-card:hover .hub-card__foot svg { transform: translate3d(4px, 0, 0); }
}
.hub-card:active { transform: scale(0.985); transition-duration: 90ms; }
.hub-card:focus-visible { outline-offset: 4px; }
.lab-note { position: relative; margin: 1.25rem 0 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.72); }

/* ---------- Experiment sections ---------- */
.lab-intro { max-width: 46rem; }
.lab-intro .lede { margin-bottom: 0; }

/* ---------- Board: the shared game "screen" ---------- */
.board {
  --b-bg: var(--black); --b-fg: var(--white); --b-soft: rgba(255, 255, 255, 0.72);
  --b-line: rgba(255, 255, 255, 0.14); --b-line-strong: rgba(255, 255, 255, 0.3); --b-chip: rgba(255, 255, 255, 0.06);
  --fg: var(--white); --fg-soft: rgba(255, 255, 255, 0.8); --focus: var(--white); --rule: rgba(255, 255, 255, 0.18);
  --accent-bg: var(--white); --accent-fg: var(--black); --accent-hover: #dedede;
  --ghost-line: rgba(255, 255, 255, 0.5); --ghost-hover: rgba(255, 255, 255, 0.1);
  position: relative; display: none;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  background: var(--b-bg); color: var(--b-fg);
  border: 1px solid var(--b-line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.7);
}
.js .board { display: block; }
.board--paper {
  --b-bg: var(--white); --b-fg: var(--ink); --b-soft: var(--ink-soft);
  --b-line: #e2e2e2; --b-line-strong: #c9c9c9; --b-chip: var(--paper);
  --fg: var(--ink); --fg-soft: var(--ink-soft); --focus: var(--ink); --rule: rgba(0, 0, 0, 0.14);
  --accent-bg: var(--black); --accent-fg: var(--white); --accent-hover: #2e2e2e;
  --ghost-line: rgba(0, 0, 0, 0.5); --ghost-hover: rgba(0, 0, 0, 0.06);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.35);
}
.board :focus-visible { outline-color: var(--focus); }

.board__bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  padding: 0.7rem 0.75rem 0.7rem 1.25rem; border-bottom: 1px solid var(--b-line);
  font-size: 0.95rem; font-variant-numeric: tabular-nums lining-nums; min-height: 58px;
}
.board__stat b { font-weight: 800; }
.board__stat--soft { color: var(--b-soft); }
.board__stat--soft b { color: var(--b-fg); }
.board__restart {
  position: relative; isolation: isolate; margin-left: auto;
  min-height: 40px; padding: 0.4rem 1rem; border-radius: 999px;
  border: 1px solid var(--b-line-strong); background: transparent; color: var(--b-fg);
  font-weight: 700; font-size: 0.9rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-1) var(--ease-out);
}
.board__restart::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--ghost-hover); opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.board__restart:hover::before { opacity: 1; }
.board__restart:active { transform: scale(0.95); }

/* ---------- Shared results panel ---------- */
.results { padding: clamp(1.25rem, 0.9rem + 2vw, 2.5rem); }
.results[hidden] { display: none; }
.results__title { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); margin-bottom: 1.25rem; }
.results__title:focus { outline: none; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.65rem; margin: 0 0 1rem; }
.kpi { padding: 0.95rem 1.05rem; border-radius: 12px; background: var(--b-chip); border: 1px solid var(--b-line); }
.kpi dt { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--b-soft); }
.kpi dd {
  margin: 0.35rem 0 0; font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums;
}
.kpi small { font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; letter-spacing: 0; color: var(--b-soft); }
.results__pb { margin: 0 0 1rem; font-weight: 600; color: var(--b-soft); }
.results__pb:empty { display: none; }
.results__pb .tag {
  display: inline-block; margin-right: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  background: var(--b-fg); color: var(--b-bg); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
}
.results__verdict { font-size: 1.05rem; margin: 1rem 0 0; max-width: 46rem; }
.results__fine { font-size: 0.88rem; color: var(--b-soft); margin-top: 1rem; max-width: 46rem; }
.results .btn { margin-top: 1.5rem; }
@media (max-width: 560px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .results--side .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 0.75rem 0.8rem; }
  .kpi dt { font-size: 0.7rem; letter-spacing: 0.03em; min-height: 2.5em; }
  .results--side .kpi dt { min-height: 0; }
  .kpi dd { font-size: 1.7rem; }
  .kpi small { display: block; margin-top: 0.25rem; font-size: 0.78rem; }
}

/* "What your brain just did": an inverted panel so the lesson stands out */
.brain-did {
  --b-line: color-mix(in srgb, var(--b-bg) 18%, transparent);
  margin-top: 1.5rem; padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  border-radius: 14px; background: var(--b-fg); color: var(--b-bg); max-width: 52rem;
}
.brain-did__title {
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.6rem;
}
.brain-did__title::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.brain-did p { font-size: 1.06rem; line-height: 1.55; margin: 0; }

/* Results entrance (motion-safe only) */
@media (prefers-reduced-motion: no-preference) {
  .results:not([hidden]) > * { animation: rise var(--dur-4) var(--ease-out) both; }
  .results:not([hidden]) > :nth-child(2) { animation-delay: 60ms; }
  .results:not([hidden]) > :nth-child(3) { animation-delay: 120ms; }
  .results:not([hidden]) > :nth-child(4) { animation-delay: 180ms; }
  .results:not([hidden]) > :nth-child(5) { animation-delay: 240ms; }
  .results:not([hidden]) > :nth-child(n+6) { animation-delay: 300ms; }
}
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes shake {
  20% { transform: translate3d(-6px, 0, 0); } 40% { transform: translate3d(5px, 0, 0); }
  60% { transform: translate3d(-3px, 0, 0); } 80% { transform: translate3d(2px, 0, 0); }
}

/* ==========================================================================
   Experiment 1 — Reaction time
   ========================================================================== */
.rt-dots { list-style: none; display: flex; gap: 6px; }
.rt-dots li { position: relative; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
.rt-dots li::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--white);
  transform: scale(0); transition: transform var(--dur-3) var(--ease-out);
}
.rt-dots li.is-done::after { transform: scale(1); }
@media (max-width: 479px) { .rt-dots { display: none; } .board__bar { gap: 0.5rem 1rem; } }

/* The flip itself is instant on purpose: any fade would add to the measured time. */
.rt-stage {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; min-height: clamp(300px, 22rem + 4vw, 420px); padding: 2.5rem 1.25rem;
  text-align: center; background: var(--black); color: var(--white);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rt-stage[hidden] { display: none; }
.rt-stage:focus-visible { outline: 3px solid var(--white); outline-offset: -10px; border-radius: 16px; }
.rt-stage.is-pointer:focus-visible { outline: none; }
.rt-stage[data-state="go"] { background: var(--white); color: var(--black); }
.rt-stage[data-state="go"]:focus-visible { outline-color: var(--black); }
.rt-stage__big {
  font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em;
  font-size: clamp(2.3rem, 1.6rem + 3vw, 3.9rem); font-variant-numeric: tabular-nums lining-nums;
}
.rt-stage__small { max-width: 31rem; color: rgba(255, 255, 255, 0.74); font-size: 1.02rem; line-height: 1.5; }
.rt-stage[data-state="go"] .rt-stage__small { color: var(--ink-soft); }
.rt-stage[data-state="go"] .rt-stage__big { font-size: clamp(3rem, 2rem + 5vw, 5.5rem); }
.rt-stage[data-state="false"]::after {
  content: ""; position: absolute; inset: 14px; border: 2px dashed rgba(255, 255, 255, 0.32); border-radius: 12px; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .rt-stage[data-state="between"] .rt-stage__big,
  .rt-stage[data-state="false"] .rt-stage__big { animation: pop var(--dur-3) var(--ease-out) both; }
  .rt-stage[data-state="false"] .rt-stage__big { animation-name: shake; }
}
.rt-wait { display: none; gap: 8px; margin-top: 0.5rem; }
.rt-stage[data-state="wait"] .rt-wait { display: flex; }
.rt-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--white); opacity: 0.25; animation: breathe 600ms var(--ease) infinite alternate; }
.rt-wait i:nth-child(2) { animation-delay: 200ms; }
.rt-wait i:nth-child(3) { animation-delay: 400ms; }
@keyframes breathe { to { opacity: 0.9; transform: scale(1.25); } }

.rt-chart { margin: 1.4rem 0 0; container-type: inline-size; }
@container (max-width: 520px) { .rt-axis .is-mid { display: none; } }
.rt-rows { display: grid; gap: 0.5rem; }
.rt-row {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 4.6rem; align-items: center; gap: 0.75rem;
  font-size: 0.92rem; font-variant-numeric: tabular-nums lining-nums;
}
.rt-row__label { color: var(--b-soft); font-weight: 600; }
.rt-row__track { position: relative; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.rt-row__bar {
  position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 999px; background: var(--white);
  transform-origin: 0 50%; animation: grow-x var(--dur-4) var(--ease-out) both;
}
/* The typical-range band sits on top and inverts whatever is under it. */
.rt-row__band {
  position: absolute; top: 0; bottom: 0; z-index: 1; mix-blend-mode: difference;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0 2px, transparent 2px 6px);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.7), inset -1px 0 0 rgba(255, 255, 255, 0.7);
}
.rt-row__value { text-align: right; font-weight: 600; }
.rt-row.is-best .rt-row__value, .rt-row.is-best .rt-row__label { color: var(--b-fg); font-weight: 800; }
.rt-axis { position: relative; height: 1.4rem; font-size: 0.78rem; color: var(--b-soft); }
.rt-axis span { position: absolute; top: 0.2rem; transform: translateX(-50%); white-space: nowrap; }
.rt-axis span:first-child { transform: none; }
.rt-axis span:last-child { transform: translateX(-100%); }
.rt-legend { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; font-size: 0.9rem; color: var(--b-soft); }
.rt-legend__band {
  width: 30px; height: 14px; flex: none; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.6);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0 2px, transparent 2px 6px);
}

.pathway { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 2.1rem; margin-top: 1.1rem; }
.pathway li {
  position: relative; display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.95rem 0.5rem 0.6rem; border-radius: 999px; border: 1px solid var(--b-line);
  font-weight: 700; font-size: 0.92rem; line-height: 1.2;
}
.pathway li + li::before { /* connector arrow */
  content: ""; position: absolute; left: -1.7rem; top: 50%; width: 1.2rem; height: 2px; margin-top: -1px;
  background: currentColor; opacity: 0.55;
}
.pathway li + li::after {
  content: ""; position: absolute; left: -0.75rem; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: 0.55;
}
.pathway svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 560px) { /* stack top to bottom with downward arrows */
  .pathway { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .pathway li + li::before { left: calc(1px + 0.6rem + 10px); top: -1.45rem; width: 2px; height: 1.2rem; margin-top: 0; }
  .pathway li + li::after { left: calc(1px + 0.6rem + 7.5px); top: -0.6rem; margin-top: 0; transform: rotate(135deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .results:not([hidden]) .pathway li { animation: signal var(--dur-4) var(--ease-out) both; }
  .results:not([hidden]) .pathway li:nth-child(1) { animation-delay: 380ms; }
  .results:not([hidden]) .pathway li:nth-child(2) { animation-delay: 560ms; }
  .results:not([hidden]) .pathway li:nth-child(3) { animation-delay: 740ms; }
}
@keyframes signal { from { opacity: 0.15; transform: scale(0.94); } }

/* ==========================================================================
   Experiment 2 — Stroop. The only real colours on the site live here.
   Each ink = a colour + its own pattern (stripes, dots, lines, checks).
   ========================================================================== */
.st {
  --red: #ff5a4e;    --red-2: #b02c24;
  --blue: #4a9dff;   --blue-2: #1a56a8;
  --green: #2bc48a;  --green-2: #0f6b4a;
  --yellow: #ffd53d; --yellow-2: #9c7a0c;
}
.ink-red    { background: repeating-linear-gradient(135deg, var(--red) 0 5px, var(--red-2) 5px 8px); }
.ink-blue   { background: radial-gradient(circle, var(--blue-2) 1.8px, transparent 2.4px) 0 0 / 8px 8px, var(--blue); }
.ink-green  { background: repeating-linear-gradient(0deg, var(--green) 0 5px, var(--green-2) 5px 8px); }
.ink-yellow { background: repeating-conic-gradient(var(--yellow) 0 25%, var(--yellow-2) 0 50%) 0 0 / 10px 10px; }

.st-timer { height: 4px; background: rgba(255, 255, 255, 0.08); }
.st-timer span { display: block; height: 100%; background: rgba(255, 255, 255, 0.88); transform-origin: 0 50%; }

.st-play[hidden] { display: none; }
.st-stage {
  position: relative; display: grid; place-items: center; text-align: center;
  min-height: clamp(270px, 16rem + 6vw, 340px); padding: 1.75rem 1.25rem 1.25rem;
}
.st-intro { display: grid; justify-items: center; gap: 0.9rem; max-width: 34rem; }
.st-intro__text { color: rgba(255, 255, 255, 0.8); margin: 0; }
.st-intro__text b { color: var(--white); }
.st-intro[hidden], .st-count[hidden], .st-word[hidden] { display: none; }
.st-word {
  margin: 0; font-family: var(--font-body); font-weight: 800; line-height: 1;
  font-size: clamp(3.4rem, 1.6rem + 8vw, 6.75rem); letter-spacing: 0.01em;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding: 0.05em 0.04em;
}
.st-word--example { font-size: clamp(2.6rem, 1.8rem + 3.5vw, 3.75rem); }
.st-word.is-new { animation: word-in 200ms var(--ease-out); }
@keyframes word-in { from { transform: scale(0.94); } }
.st-count {
  margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(4.5rem, 3rem + 6vw, 7.5rem); font-variant-numeric: tabular-nums lining-nums;
}
.st-count.is-tick { animation: count-tick 500ms var(--ease-out) both; }
@keyframes count-tick { from { opacity: 0; transform: scale(1.35); } }
.st-flash {
  position: absolute; left: 0; right: 0; bottom: 0.9rem; margin: 0; font-weight: 700; font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.85); opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.st-flash.is-on { opacity: 1; transition-duration: 80ms; }

.st-answers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; padding: 0 1.25rem 1rem; }
.st-answer {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 0.7rem;
  min-height: 60px; padding: 0.6rem 0.8rem; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04); color: var(--white);
  font-weight: 700; font-size: 1.02rem; text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease);
}
.st-answer::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, 0.09); opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.st-answer::after {
  content: ""; position: absolute; inset: -3px; border-radius: 14px; border: 2px solid var(--white);
  opacity: 0; pointer-events: none;
}
.st-answer:hover:not(:disabled)::before { opacity: 1; }
.st-answer:active:not(:disabled) { transform: scale(0.96); }
.st-answer:disabled { opacity: 0.45; cursor: default; }
.st-answer.is-right::after { animation: ring 380ms var(--ease-out); }
.st-answer.is-wrong { animation: shake 380ms var(--ease-out); }
@keyframes ring { from { opacity: 1; transform: scale(0.97); } to { opacity: 0; transform: scale(1.06); } }
.st-answer .swatch { width: 30px; height: 30px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.st-answer kbd, .st-keys kbd {
  font: 700 0.76rem/1 var(--font-body); padding: 0.25rem 0.42rem; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.75);
}
.st-answer kbd { margin-left: auto; }
.st-keys { margin: 0; padding: 0 1.25rem 1.1rem; font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); }
.st-keys kbd { margin: 0 0.1rem; }
@media (hover: none), (pointer: coarse), (max-width: 640px) { .st-answer kbd, .st-keys { display: none; } .st-answers { padding-bottom: 1.25rem; } }
@media (max-width: 640px) { .st-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cmp { margin: 1.4rem 0 0; max-width: 46rem; }
.cmp__title { font-weight: 700; font-size: 0.95rem; color: var(--b-soft); margin-bottom: 0.75rem; }
.cmp__row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 4.8rem; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 0.7rem; }
.cmp__label { font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.cmp__label small { display: block; font-weight: 500; font-size: 0.82rem; color: var(--b-soft); }
.cmp__track { position: relative; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.cmp__bar {
  position: absolute; left: 0; top: 3px; bottom: 3px; width: 0; border-radius: 999px; background: var(--white);
  transform-origin: 0 50%; animation: grow-x var(--dur-4) var(--ease-out) 200ms both;
}
.cmp__bar--hatch { background: repeating-linear-gradient(135deg, var(--white) 0 4px, rgba(255, 255, 255, 0.45) 4px 7px); animation-delay: 320ms; }
.cmp__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 560px) {
  .cmp__row { grid-template-columns: minmax(0, 1fr) 4.6rem; }
  .cmp__label { grid-column: 1 / -1; }
}

/* ==========================================================================
   Experiment 3 — Brain map (black line drawing on a paper board)
   ========================================================================== */
.bm-layout {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start;
  gap: clamp(1rem, 0.5rem + 2vw, 2.25rem); padding: clamp(1rem, 0.6rem + 1.6vw, 2rem);
}
@media (max-width: 880px) { .bm-layout { grid-template-columns: minmax(0, 1fr); } }
.bm-map { position: relative; }
.bm-svg { display: block; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.bm-region { fill: var(--white); cursor: pointer; outline: none; }
.bm.is-picking .bm-region:not(.is-done) { fill: #f6f6f6; }
.bm .bm-region:not(.is-done):hover, .bm .bm-region.is-over { fill: #e6e6e6; }
.bm .bm-region:focus-visible { stroke: var(--black); stroke-width: 7; }
.bm .bm-region:not(.is-done):focus-visible { fill: #e2e2e2; }
.bm .bm-region.is-wrong { fill: #d2d2d2; }
.bm-region.is-done { cursor: default; }
.bm-region.is-done[data-region="frontal"] { fill: url(#bm-pat-frontal); }
.bm-region.is-done[data-region="parietal"] { fill: url(#bm-pat-parietal); }
.bm-region.is-done[data-region="temporal"] { fill: url(#bm-pat-temporal); }
.bm-region.is-done[data-region="occipital"] { fill: url(#bm-pat-occipital); }
.bm-region.is-done[data-region="cerebellum"] { fill: url(#bm-pat-cerebellum); }
.bm-region.is-done[data-region="stem"] { fill: url(#bm-pat-stem); }
.bm-gyri path { fill: none; stroke: var(--black); stroke-width: 1.3; stroke-linecap: round; opacity: 0.26; pointer-events: none; }
.bm-gyri--strong path { opacity: 0.4; }
.bm-divide path { fill: none; stroke: var(--black); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }
.bm-line { fill: none; stroke: var(--black); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.bm-label { cursor: pointer; }
.bm-label text {
  font-family: var(--font-body); font-size: 21px; font-weight: 700; text-anchor: middle;
  fill: var(--black); paint-order: stroke; stroke: var(--white); stroke-width: 5px; stroke-linejoin: round;
}
.bm-label--out text { text-anchor: end; }
.bm-lead { stroke: var(--black); stroke-width: 1.5; }
.bm-pill { fill: var(--black); opacity: 0; }
.bm-label.is-done { cursor: default; }
.bm-label.is-done .bm-pill { opacity: 1; transition: opacity var(--dur-3) var(--ease); } /* fade in only; reset is instant */
.bm-label.is-done text { fill: var(--white); stroke: none; }
.bm-label.is-done .bm-pill, .bm-label.is-done text { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .bm-label.is-done .bm-pill, .bm-label.is-done text { animation: pop var(--dur-3) var(--ease-out); }
}

.bm-msg {
  min-height: 3.6em; margin: 0 0 0.9rem; padding: 0.8rem 1rem; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--b-line); font-weight: 600; font-size: 0.98rem; line-height: 1.45;
}
.bm-msg.is-good { background: var(--black); color: var(--white); border-color: var(--black); }
.bm-msg.is-bad { border: 1.5px dashed var(--black); }
@media (prefers-reduced-motion: no-preference) {
  .bm-msg.is-fresh { animation: msg-in var(--dur-2) var(--ease-out); }
}
@keyframes msg-in { from { opacity: 0.4; transform: translate3d(0, 4px, 0); } }
.bm-cards { list-style: none; display: grid; gap: 0.5rem; }
.bm-cards[hidden] { display: none; }
@media (min-width: 520px) and (max-width: 880px) { .bm-cards { grid-template-columns: 1fr 1fr; } }
.bm-card {
  position: relative; isolation: isolate; width: 100%; height: 100%;
  display: flex; align-items: center; gap: 0.75rem; min-height: 58px; padding: 0.7rem 0.9rem;
  border-radius: 12px; border: 1.5px solid #cfcfcf; background: var(--white); color: var(--black);
  font-weight: 650; font-size: 1rem; line-height: 1.3; text-align: left;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease);
}
.bm-card::before {
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit;
  background: #f1f1f1; opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.bm-card svg { width: 22px; height: 22px; flex: none; }
.bm-card__text { display: block; }
.bm-card__where { display: block; margin-top: 0.15rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.bm-card__where:empty { display: none; }
@media (hover: hover) {
  .bm-card:not(:disabled):not([aria-pressed="true"]):hover { transform: translate3d(0, -2px, 0); }
  .bm-card:not(:disabled):not([aria-pressed="true"]):hover::before { opacity: 1; }
}
.bm-card:not(:disabled):active { transform: scale(0.98); cursor: grabbing; }
.bm-card[aria-pressed="true"] { background: var(--black); color: var(--white); border-color: var(--black); }
.bm-card[aria-pressed="true"]:focus-visible { outline-color: var(--black); }
.bm-card.is-dragging { opacity: 0.35; }
.bm-card.is-wrong { animation: shake 380ms var(--ease-out); }
.bm-card:disabled { cursor: default; border-style: dashed; border-color: #bdbdbd; background: var(--paper); color: var(--ink-soft); }
.bm-card:disabled .bm-card__where { color: var(--black); }
.bm-ghost {
  position: fixed; left: 0; top: 0; z-index: 200; margin: 0; pointer-events: none;
  box-shadow: 0 22px 40px -14px rgba(0, 0, 0, 0.45); border-color: var(--black);
  transition: none; will-change: transform;
}
.results--side { padding: 0; }
.bm-ghost { height: auto; }
.results--side .kpis { grid-template-columns: 1fr 1fr; }