/* The Inner Science Lab (/science, v1.0.5): a dark particle-sandbox laboratory, whatever the site theme.
   Scoped to .lab; the header and footer keep following the site theme. Behaviour: assets/js/science-lab.js. */

.lab {
  --lab-bg: #0D0B09;
  --lab-bg-2: #110E0B;
  --lab-surface: #171411;
  --lab-surface-2: #1D1813;
  --lab-line: rgba(242, 181, 76, 0.16);
  --lab-line-strong: rgba(242, 181, 76, 0.38);
  --lab-ink: #FCFBF7;
  --lab-muted: #BBA996;
  --lab-gold: #F2B54C;
  --lab-amber: #D97706;
  --lab-cyan: #06B6D4;
  --lab-cyan-text: #67E8F9;
  --lab-vermilion: #881337;
  --lab-rose: #FB7185;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --stick: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--djjs-global-h, 0px));
  /* site tokens re-pointed so shared components (.faq__item, links, focus rings) read on the dark lab */
  --ink: var(--lab-ink); --muted: var(--lab-muted); --accent: var(--lab-gold); --gold-text: var(--lab-gold); --focus: #FCD34D;
  --champagne: rgba(245, 158, 11, 0.2); --champagne-strong: rgba(245, 158, 11, 0.42); --surface: var(--lab-surface);
  position: relative;
  display: block;
  background: var(--lab-bg);
  color: var(--lab-ink);
  color-scheme: dark;
  isolation: isolate;
}
.lab ::selection { background: rgba(6, 182, 212, 0.35); color: #fff; }
.lab a:not(.lab-btn):not(.lab-tab) { color: var(--lab-gold); }
.lab var { font-family: var(--serif); font-style: italic; font-weight: 600; }
.lab sub, .lab sup { font-size: 0.68em; line-height: 0; }
.lab :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- Hero ---------- */
.lab-hero { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 132px) 0 clamp(44px, 6vw, 88px); min-height: min(86vh, 820px); display: flex; align-items: center; }
.lab-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lab-hero__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 72% 40%, rgba(217, 119, 6, 0.22), transparent 70%),
              radial-gradient(45% 50% at 18% 78%, rgba(6, 182, 212, 0.14), transparent 70%),
              radial-gradient(40% 40% at 90% 95%, rgba(136, 19, 55, 0.28), transparent 70%),
              linear-gradient(180deg, transparent 70%, var(--lab-bg)); }
.lab-hero__inner { position: relative; z-index: 1; }
.lab-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lab-gold); }
.lab-eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lab-cyan); box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.16), 0 0 18px rgba(6, 182, 212, 0.9); }
.lab-hero__title { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem, 1.6rem + 6.4vw, 7.25rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 0.28em; max-width: 12ch;
  background: linear-gradient(100deg, #FFF3D6 0%, #F2B54C 38%, #D97706 62%, #FDE8B8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgba(217, 119, 6, 0.28)); }
.lab-hero__lead { font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem); line-height: 1.45; color: #EDE3D3; max-width: 40rem; margin: 0 0 30px; }
.lab-hero__lead em { color: var(--lab-gold); }
.lab-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.lab-hero__stats { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 0 0 30px; padding: 0; color: var(--lab-muted); font-size: 0.9rem; }
.lab-hero__stats strong { font-family: var(--mono); font-size: 1.25rem; color: var(--lab-cyan-text); margin-right: 6px; font-weight: 600; }
.lab-note { display: flex; gap: 14px; align-items: flex-start; max-width: 44rem; padding: 16px 18px; border: 1px solid var(--lab-line); border-radius: 16px;
  background: linear-gradient(135deg, rgba(23, 20, 17, 0.86), rgba(13, 11, 9, 0.72)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lab-note p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: #D9CCBA; }
.lab-note strong { color: var(--lab-gold); }
.lab-note__icon { flex: none; width: 26px; height: 26px; color: var(--lab-cyan-text); margin-top: 2px; }
.lab-noscript { color: var(--lab-muted); padding: 16px 0; }

/* ---------- Buttons ---------- */
.lab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0.55em 1.4em; border-radius: 999px; border: 1px solid transparent;
  font: 600 0.95rem/1.2 var(--sans); letter-spacing: 0.01em; text-decoration: none; text-align: center; cursor: pointer; color: var(--lab-ink); background: none;
  transition: transform 160ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease), opacity 200ms; touch-action: manipulation; }
.lab-btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.lab-btn:disabled { opacity: 0.42; cursor: not-allowed; }
.lab-btn--lg { min-height: 56px; padding-inline: 1.8em; font-size: 1rem; }
.lab-btn--sm { min-height: 44px; padding-inline: 1.1em; font-size: 0.875rem; }
.lab-btn--gold { color: #1F0A06; background: linear-gradient(135deg, #FDE7AE 0%, #F2B54C 45%, #D97706 100%); box-shadow: 0 0 0 1px rgba(242, 181, 76, 0.5), 0 10px 30px -10px rgba(217, 119, 6, 0.75); }
.lab-btn--ghost { border-color: var(--lab-line-strong); color: var(--lab-gold); background: rgba(13, 11, 9, 0.4); }
.lab-btn--ink { border-color: rgba(251, 113, 133, 0.45); color: #FECDD3; background: linear-gradient(135deg, rgba(136, 19, 55, 0.55), rgba(40, 10, 20, 0.7)); }
.lab-btn--icon { width: 48px; min-width: 48px; padding: 0; font-size: 1.4rem; border-color: var(--lab-line-strong); color: var(--lab-gold); background: rgba(13, 11, 9, 0.5); }
@media (hover: hover) and (pointer: fine) {
  .lab-btn--gold:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(242, 181, 76, 0.8), 0 14px 40px -10px rgba(217, 119, 6, 0.95); color: #1F0A06; }
  .lab-btn--ghost:hover:not(:disabled), .lab-btn--icon:hover:not(:disabled) { border-color: var(--lab-gold); background: rgba(242, 181, 76, 0.08); color: var(--lab-gold); }
  .lab-btn--ink:hover:not(:disabled) { border-color: #FB7185; color: #FFE4E6; }
}

/* ---------- Sticky module index ---------- */
.lab-tabs { position: sticky; top: var(--stick); z-index: 30; background: rgba(13, 11, 9, 0.9); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-block: 1px solid var(--lab-line); }
.lab-tabs__inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-block: 8px; overscroll-behavior-x: contain; }
.lab-tabs__inner::-webkit-scrollbar { display: none; }
.lab-tab { flex: 1 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 8px; border-radius: 14px; text-decoration: none;
  color: var(--lab-muted); border: 1px solid transparent; transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); }
.lab-tab__k { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font: 600 0.85rem/1 var(--mono); color: var(--lab-gold); border: 1px solid var(--lab-line-strong); background: rgba(242, 181, 76, 0.06); }
.lab-tab__t { display: flex; flex-direction: column; font-weight: 600; font-size: 0.92rem; line-height: 1.15; color: var(--lab-ink); }
.lab-tab__s { font-weight: 500; font-size: 0.74rem; color: var(--lab-muted); }
.lab-tab[aria-current="true"] { background: linear-gradient(135deg, rgba(242, 181, 76, 0.14), rgba(6, 182, 212, 0.08)); border-color: var(--lab-line-strong); }
.lab-tab[aria-current="true"] .lab-tab__k { background: var(--lab-gold); color: #1F0A06; box-shadow: 0 0 16px rgba(242, 181, 76, 0.6); }
@media (hover: hover) and (pointer: fine) { .lab-tab:hover { background: rgba(242, 181, 76, 0.07); } }
@media (max-width: 767.98px) {
  .lab-tab { flex: 0 0 auto; padding-right: 12px; gap: 8px; }
  .lab-tab__s { display: none; }
  .lab-tab__k { width: 26px; height: 26px; }
}

/* ---------- Module scaffolding ---------- */
.mod { position: relative; padding-block: clamp(56px, 7vw, 104px); scroll-margin-top: 64px; border-top: 1px solid rgba(242, 181, 76, 0.08); }
.mod::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mod--physics::before { background: radial-gradient(50% 40% at 85% 10%, rgba(6, 182, 212, 0.08), transparent 70%); }
.mod--chemistry::before { background: radial-gradient(50% 40% at 10% 20%, rgba(217, 119, 6, 0.1), transparent 70%); }
.mod--quantum::before { background: radial-gradient(60% 40% at 80% 15%, rgba(6, 182, 212, 0.11), transparent 70%); }
.mod--neuro::before { background: radial-gradient(50% 40% at 15% 15%, rgba(136, 19, 55, 0.16), transparent 70%); }
.mod--math::before { background: radial-gradient(50% 40% at 85% 20%, rgba(242, 181, 76, 0.09), transparent 70%); }
.mod__head { margin-bottom: clamp(24px, 3vw, 40px); }
.mod__kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lab-cyan-text); }
.mod__badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font: 600 1rem/1 var(--mono); letter-spacing: 0; color: #1F0A06;
  background: linear-gradient(135deg, #FDE7AE, #F2B54C 50%, #D97706); box-shadow: 0 0 22px rgba(242, 181, 76, 0.45); }
.mod__title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.9rem); line-height: 1.02; margin: 0 0 22px; color: var(--lab-ink); max-width: 22ch; }
.mod__cols { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .mod__cols { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; } }
.mod__intro { font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem); line-height: 1.75; color: #DCCFBD; margin: 0; max-width: 44rem; }
.mod__intro em { color: var(--lab-gold); }
.mod__intro--wide { max-width: 52rem; }
.mod__science { margin: 22px 0 0; padding: 14px 18px; border-left: 2px solid var(--lab-cyan); background: linear-gradient(90deg, rgba(6, 182, 212, 0.07), transparent 70%);
  border-radius: 0 12px 12px 0; font-size: 0.92rem; line-height: 1.65; color: #CFC2B0; max-width: 62rem; }
.mod__science strong { color: var(--lab-cyan-text); }
.exp__title { display: flex; align-items: center; gap: 12px; margin: clamp(36px, 4vw, 56px) 0 18px; font-family: var(--serif); font-weight: 600; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); color: var(--lab-ink); line-height: 1.15; }
.mod__head + .exp__title { margin-top: 0; }
.exp__n { flex: none; font: 600 0.78rem/1 var(--mono); letter-spacing: 0.06em; color: var(--lab-gold); border: 1px solid var(--lab-line-strong); border-radius: 8px; padding: 6px 8px; }

/* ---------- Typeset formulas ---------- */
.eq-card { padding: clamp(18px, 2.4vw, 26px); border-radius: 20px; border: 1px solid var(--lab-line); background: radial-gradient(120% 120% at 0% 0%, rgba(242, 181, 76, 0.08), transparent 60%), var(--lab-surface); }
.eq-card--wide { margin-bottom: 20px; }
.eq-card__note { margin: 12px 0 0; font-size: 0.88rem; color: var(--lab-muted); line-height: 1.6; }
.eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3em 0.45em; font-family: var(--serif); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); color: #FFF3D6; line-height: 1.2;
  text-shadow: 0 0 22px rgba(242, 181, 76, 0.35); }
.eq var { color: var(--lab-gold); font-weight: 600; }
.eq sub, .eq sup { font-family: var(--serif); font-style: normal; color: #EBD8B8; }
.eq__op { color: var(--lab-cyan-text); font-style: normal; font-family: var(--sans); font-weight: 400; font-size: 0.82em; padding-inline: 0.1em; }
.eq__dot { color: #CDB89A; padding-inline: 0.08em; }
.eq__sym { white-space: nowrap; }
.eq--words { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); font-weight: 600; font-style: italic; }
.eq--words span:not(.eq__op) { color: var(--lab-gold); }
.eq--sm { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); justify-content: flex-start; }
.frac { display: inline-grid; grid-template-rows: auto auto; text-align: center; vertical-align: middle; }
.frac__num { padding: 0 0.3em 0.12em; border-bottom: 1.5px solid currentColor; }
.frac__den { padding: 0.12em 0.3em 0; }
.frac__num:not(:has(var)), .frac__den:not(:has(var)) { font-family: var(--sans); font-size: 0.42em; letter-spacing: 0.02em; color: #EBD8B8; font-style: normal; text-shadow: none; }
.eq-legend { display: grid; gap: 6px 18px; margin: 18px 0 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.eq-legend div { display: flex; gap: 10px; align-items: baseline; }
.eq-legend dt { flex: none; min-width: 2.2em; font-size: 1.15rem; color: var(--lab-gold); }
.eq-legend dd { margin: 0; font-size: 0.88rem; color: var(--lab-muted); line-height: 1.45; }

/* ---------- Bench: stage + control panel ---------- */
.bench { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1024px) {
  .bench { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 24px; }
  .bench--flip { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.55fr); }
  .bench--flip > .stage { order: 2; }
}
.stage { position: relative; margin: 0; overflow: hidden; border-radius: 22px; border: 1px solid var(--lab-line); background: #07060A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 30px 80px -40px rgba(217, 119, 6, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.4); }
.stage canvas { display: block; width: 100%; aspect-ratio: var(--ar, 16 / 10); touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.stage canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 22px; }
.stage--physics { --ar: 16 / 10; }
.stage--chroma { --ar: 5 / 4; }
.stage--chroma canvas { cursor: crosshair; }
.stage--crystal { --ar: 5 / 4; }
.stage--zoom { --ar: 16 / 11; }
.stage--observer { --ar: 1 / 1; }
.stage--observer canvas { cursor: grab; }
.stage--observer .hud { top: auto; bottom: 12px; }
.stage--observer canvas:active { cursor: grabbing; }
.stage--eeg { --ar: 21 / 8; }
.stage--joy { --ar: 16 / 10; }
.stage--success { --ar: 1 / 1; }
@media (max-width: 767.98px) {
  .stage--physics { --ar: 4 / 3.4; }
  .stage--chroma { --ar: 1 / 1.08; }
  .stage--crystal { --ar: 1 / 1; }
  .stage--zoom { --ar: 1 / 1; }
  .stage--eeg { --ar: 4 / 2.6; }
  .stage--joy { --ar: 1 / 0.9; }
}
@media (min-width: 1024px) {
  .stage--observer, .stage--success { max-width: 640px; width: 100%; justify-self: center; }
}
.hud { position: absolute; left: 14px; top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 12px; border-radius: 12px; pointer-events: none;
  background: rgba(7, 6, 10, 0.62); border: 1px solid rgba(242, 181, 76, 0.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); max-width: calc(100% - 28px); }
.hud--right { left: auto; right: 14px; }
.hud__k { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.3rem; color: var(--lab-gold); }
.hud__v { font: 600 clamp(1.15rem, 1rem + 0.8vw, 1.6rem)/1 var(--mono); color: #FFF3D6; font-variant-numeric: tabular-nums; }
.hud__v--sm { font-size: 1rem; color: var(--lab-cyan-text); }
.hud__u { font-size: 0.75rem; color: var(--lab-muted); }
.hud__tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lab-gold); }
.hud__tag--cyan { color: var(--lab-cyan-text); }
.stage__tags { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 8px; pointer-events: none; }
.tag { font-size: 0.72rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(7, 6, 10, 0.6); border: 1px solid; }
.tag--cyan { color: var(--lab-cyan-text); border-color: rgba(6, 182, 212, 0.45); }
.tag--rose { color: #FDA4AF; border-color: rgba(251, 113, 133, 0.45); }
.stage__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: #1F0A06;
  background: var(--lab-gold); box-shadow: 0 0 22px rgba(242, 181, 76, 0.55); pointer-events: none; white-space: nowrap; transition: opacity 300ms; }
.stage__hint.is-gone { opacity: 0; }

.panel { display: flex; flex-direction: column; gap: 16px; padding: clamp(16px, 2vw, 22px); border-radius: 22px; border: 1px solid var(--lab-line);
  background: linear-gradient(180deg, rgba(29, 24, 19, 0.92), rgba(17, 14, 11, 0.92)); min-width: 0; }
.panel__lede { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #D9CCBA; }
.panel__lede strong { color: var(--lab-gold); }
.panel__note { margin: 0; font-size: 0.8rem; color: var(--lab-muted); line-height: 1.5; }

/* ---------- Range controls ---------- */
.ctl { display: flex; flex-direction: column; gap: 2px; }
.ctl__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ctl__label { font-weight: 600; font-size: 0.95rem; color: var(--lab-ink); }
.ctl__sym { margin-left: 4px; color: var(--lab-gold); font-size: 1.05em; }
.ctl__val { font: 600 1rem/1 var(--mono); color: var(--lab-cyan-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctl__hint { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--lab-muted); }
.ctl input[type="range"] { --p: 50%; --z0: 0%; --z1: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.ctl input[type="range"]:focus { outline: none; }
.ctl input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #06B6D4, #F2B54C) 0 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, 0.1); }
.ctl input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.ctl input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #06B6D4, #F2B54C); }
.ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; border: 2px solid #0D0B09;
  background: radial-gradient(circle at 35% 30%, #FFF6DC, #F2B54C 48%, #D97706); box-shadow: 0 0 0 1px rgba(242, 181, 76, 0.7), 0 0 18px rgba(242, 181, 76, 0.55); transition: transform 160ms var(--ease); }
.ctl input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #0D0B09;
  background: radial-gradient(circle at 35% 30%, #FFF6DC, #F2B54C 48%, #D97706); box-shadow: 0 0 0 1px rgba(242, 181, 76, 0.7), 0 0 18px rgba(242, 181, 76, 0.55); }
.ctl input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.ctl input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #0D0B09, 0 0 0 5px var(--focus), 0 0 18px rgba(242, 181, 76, 0.55); }
.ctl input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #0D0B09, 0 0 0 5px var(--focus); }
/* target zone (crystallization): a cyan band on the track, plus the visible "Target zone a–b" tag */
.ctl--zone input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #06B6D4, #F2B54C) 0 0 / var(--p) 100% no-repeat,
    linear-gradient(90deg, transparent var(--z0), rgba(6, 182, 212, 0.38) var(--z0), rgba(6, 182, 212, 0.38) var(--z1), transparent var(--z1)),
    rgba(255, 255, 255, 0.1); }
.ctl--zone input[type="range"]::-moz-range-track {
  background: linear-gradient(90deg, transparent var(--z0), rgba(6, 182, 212, 0.38) var(--z0), rgba(6, 182, 212, 0.38) var(--z1), transparent var(--z1)), rgba(255, 255, 255, 0.1); }
.zone-tag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  color: var(--lab-muted); border: 1px solid rgba(255, 255, 255, 0.14); }
.zone-tag.is-in { color: #A5F3FC; border-color: rgba(6, 182, 212, 0.6); background: rgba(6, 182, 212, 0.12); }
.zone-tag.is-out { color: #FECACA; border-color: rgba(251, 113, 133, 0.45); }

/* ---------- Readouts ---------- */
.readout { margin: 0; padding: 14px 16px; border-radius: 16px; background: rgba(7, 6, 10, 0.55); border: 1px solid rgba(6, 182, 212, 0.22); }
.readout p { margin: 0; }
.readout__big { font: 600 clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem)/1.2 var(--mono); color: #FFF3D6; font-variant-numeric: tabular-nums; }
.readout__big var { font-size: 1.15em; color: var(--lab-gold); }
.readout__big--sm { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); font-family: var(--sans); }
.readout__big--sm span[data-out] { font-family: var(--mono); color: var(--lab-cyan-text); }
.readout__unit { font-family: var(--sans); font-size: 0.62em; font-weight: 500; color: var(--lab-muted); }
.readout__calc { margin-top: 6px !important; font-size: 0.9rem; line-height: 1.55; color: #D9CCBA; font-variant-numeric: tabular-nums; }
.readout--small { font-size: 0.88rem; line-height: 1.55; color: #D9CCBA; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 0; }
.stats div { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--lab-line); background: rgba(13, 11, 9, 0.5); }
.stats dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lab-muted); }
.stats dd { margin: 2px 0 0; font: 600 1.05rem/1.25 var(--mono); color: var(--lab-cyan-text); font-variant-numeric: tabular-nums; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Module A: cases ---------- */
.cases { margin-top: 26px; }
.cases__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin: 0 0 14px; color: var(--lab-ink); }
.cases__grid { display: grid; gap: 12px; }
@media (min-width: 768px) { .cases__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 18px; border-radius: 18px; text-align: left; cursor: pointer;
  border: 1px solid var(--lab-line); background: linear-gradient(160deg, rgba(29, 24, 19, 0.95), rgba(13, 11, 9, 0.95)); color: var(--lab-ink); min-height: 44px;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.case__n { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lab-muted); }
.case__f { font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; color: var(--lab-gold); }
.case__t { font-size: 0.92rem; color: #D9CCBA; }
.case__badge { margin-top: 4px; font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(251, 113, 133, 0.45); color: #FECDD3; }
.case--key .case__badge { border-color: rgba(6, 182, 212, 0.55); color: #A5F3FC; }
.case.is-active { border-color: var(--lab-gold); box-shadow: 0 0 0 1px rgba(242, 181, 76, 0.5), 0 18px 40px -20px rgba(217, 119, 6, 0.7); }
.case--key.is-active { border-color: var(--lab-cyan); box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.55), 0 18px 50px -18px rgba(6, 182, 212, 0.7); }
@media (hover: hover) and (pointer: fine) { .case:hover { border-color: var(--lab-line-strong); transform: translateY(-2px); } }
.case-explain { margin-top: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--lab-line); background: rgba(13, 11, 9, 0.6); }
.case-explain p { margin: 0 0 0.5em; color: #DCCFBD; line-height: 1.65; }
.case-explain p:last-child { margin-bottom: 0; }
.case-explain strong { color: var(--lab-gold); }
.case-explain .calc { font-family: var(--mono); font-size: 0.92rem; color: var(--lab-cyan-text); }
.cases__foot { margin-top: 12px; }
.ctl.is-bump input[type="range"] { animation: lab-bump 520ms var(--ease); }
@keyframes lab-bump { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(6px); } 55% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ---------- Module B ---------- */
.steps { margin: 0; padding-left: 1.3em; font-size: 0.92rem; line-height: 1.55; color: #D9CCBA; display: grid; gap: 4px; }
.steps strong { color: var(--lab-gold); }
.steps li::marker { color: var(--lab-gold); font-family: var(--mono); font-weight: 600; }
.rf-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.rf-table caption { text-align: left; font-size: 0.78rem; color: var(--lab-muted); padding-bottom: 6px; }
.rf-table th, .rf-table td { padding: 8px 6px; border-bottom: 1px solid var(--lab-line); text-align: right; }
.rf-table thead abbr { text-transform: none; text-decoration: none; }
.rf-table thead th { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lab-muted); }
.rf-table th[scope="row"], .rf-table thead th:first-child { text-align: left; font-weight: 600; color: var(--lab-ink); }
.rf-table td { font-family: var(--mono); color: var(--lab-cyan-text); }
.rf-table tr.is-glow th { color: var(--lab-gold); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.swatch--ego { background: #9F1239; }
.swatch--anxiety { background: #EA580C; }
.swatch--worldly { background: #6366F1; }
.swatch--divinity { background: #F2B54C; box-shadow: 0 0 10px #F2B54C; }
.meter-wrap { display: flex; flex-direction: column; gap: 8px; }
.meter__top { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.95rem; }
.meter__val { font-family: var(--mono); color: var(--lab-cyan-text); }
.meter { position: relative; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.meter__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #881337, #D97706 60%, #F2B54C); transition: width 300ms var(--ease); }
.meter.is-balanced .meter__fill { background: linear-gradient(90deg, #06B6D4, #F2B54C); box-shadow: 0 0 16px rgba(6, 182, 212, 0.7); }
.meter__target { position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: #A5F3FC; }

/* ---------- Module C ---------- */
.voices { display: grid; gap: 12px; margin-top: 22px; }
@media (min-width: 768px) { .voices { grid-template-columns: 1fr 1fr; } }
.voice { margin: 0; padding: 16px 18px 16px 20px; border-radius: 16px; border: 1px solid var(--lab-line); border-left: 3px solid var(--lab-gold); background: rgba(23, 20, 17, 0.7); }
.voice p { margin: 0 0 8px; font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; color: #EDE3D3; }
.voice figcaption { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lab-muted); }
.scalebar { position: absolute; right: 14px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; font: 600 0.75rem/1 var(--mono); color: #CFFAFE; }
.scalebar__bar { width: 72px; height: 6px; border: 1.5px solid #A5F3FC; border-top: 0; }
.zoom-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zoom-btns__lbl { font-size: 0.8rem; color: var(--lab-muted); }
.levels { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.level { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px 4px 6px; border-radius: 12px; cursor: pointer; font: 600 0.8rem/1.2 var(--sans);
  color: var(--lab-muted); border: 1px solid var(--lab-line); background: rgba(13, 11, 9, 0.55); text-align: left; }
.level__i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-family: var(--mono); color: var(--lab-cyan-text); border: 1px solid rgba(6, 182, 212, 0.4); }
.level[aria-pressed="true"] { color: var(--lab-ink); border-color: rgba(6, 182, 212, 0.65); background: rgba(6, 182, 212, 0.12); }
.level[aria-pressed="true"] .level__i { background: var(--lab-cyan); color: #04131A; }

/* ---------- Module D ---------- */
.bands { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; align-content: start; }
.bands__b { padding: 10px 14px; border-radius: 14px; font-size: 0.9rem; color: var(--lab-muted); border: 1px solid; background: rgba(13, 11, 9, 0.5); }
.bands__b strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.bands__b--beta { border-color: rgba(249, 115, 22, 0.4); } .bands__b--beta strong { color: #FDBA74; }
.bands__b--alpha { border-color: rgba(242, 181, 76, 0.45); } .bands__b--alpha strong { color: var(--lab-gold); }
.bands__b--theta { border-color: rgba(6, 182, 212, 0.45); } .bands__b--theta strong { color: var(--lab-cyan-text); }
.eeg-controls { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 1024px) { .eeg-controls { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); } .eeg-controls .readout { grid-column: 1 / -1; } }
.seg { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg__b { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 14px; border-radius: 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--lab-line); background: rgba(13, 11, 9, 0.6); color: var(--lab-muted); font-size: 0.78rem; line-height: 1.35; transition: border-color 200ms, background-color 200ms, box-shadow 200ms; }
.seg__b strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--lab-ink); }
.seg__b[aria-pressed="true"]::after { content: "● live"; font: 600 0.68rem/1 var(--mono); letter-spacing: 0.06em; margin-top: 4px; }
.seg__b--beta[aria-pressed="true"] { border-color: #F97316; background: rgba(249, 115, 22, 0.1); box-shadow: 0 0 24px -6px rgba(249, 115, 22, 0.6); color: #FED7AA; }
.seg__b--alpha[aria-pressed="true"] { border-color: var(--lab-gold); background: rgba(242, 181, 76, 0.1); box-shadow: 0 0 24px -6px rgba(242, 181, 76, 0.6); color: #FDE68A; }
.seg__b--theta[aria-pressed="true"] { border-color: var(--lab-cyan); background: rgba(6, 182, 212, 0.1); box-shadow: 0 0 24px -6px rgba(6, 182, 212, 0.6); color: #A5F3FC; }
@media (max-width: 559.98px) { .seg { grid-template-columns: 1fr; } .seg__b { min-height: 52px; } }
.powers { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--lab-line); background: rgba(13, 11, 9, 0.5); }
.power { display: grid; grid-template-columns: 54px 1fr 44px; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--lab-muted); }
.power__track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.power__fill { display: block; height: 100%; width: 0; border-radius: inherit; }
.power__fill--delta { background: #0E7490; } .power__fill--theta { background: #06B6D4; } .power__fill--alpha { background: #F2B54C; } .power__fill--beta { background: #F97316; }
.power__v { font-family: var(--mono); text-align: right; color: var(--lab-ink); font-variant-numeric: tabular-nums; }
.stage--hippo { padding: clamp(10px, 2vw, 22px); background: radial-gradient(80% 80% at 50% 45%, rgba(242, 181, 76, 0.06), transparent 70%), #07060A; }
.hippo { width: 100%; height: auto; overflow: visible; }
.hippo__aura { opacity: var(--glow, 0.1); transition: opacity 500ms var(--ease); }
.hippo__edge { stroke: rgba(242, 181, 76, 0.16); stroke-width: 47; fill: none; opacity: 0.6; mask: none; }
.hippo__body { opacity: 0.95; }
.hippo__name { fill: #F2B54C; font: 600 15px var(--serif); letter-spacing: 0.02em; }
.hippo__sub { fill: #BBA996; font: 500 9.5px var(--sans); letter-spacing: 0.04em; }
.hp-link { fill: none; stroke: rgba(187, 169, 150, 0.32); stroke-width: 1.4; stroke-dasharray: 2.5 3.5; stroke-linecap: round; transition: stroke 450ms var(--ease), stroke-width 450ms var(--ease); }
.hp-link.is-lit { stroke: #F2B54C; stroke-width: 2.1; stroke-dasharray: none; filter: drop-shadow(0 0 3px rgba(242, 181, 76, 0.9)); }
.hp-link.is-lit:nth-child(3n) { stroke: #67E8F9; filter: drop-shadow(0 0 3px rgba(6, 182, 212, 0.9)); }
.hp-node { fill: #3A2E24; stroke: rgba(187, 169, 150, 0.45); stroke-width: 1; transition: fill 450ms var(--ease); }
.hp-node.is-lit { fill: #FFF3D6; stroke: #F2B54C; filter: drop-shadow(0 0 4px rgba(242, 181, 76, 0.95)); }
.legend-inline { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-top: 8px; font-size: 0.76rem; color: var(--lab-muted); }
.li::before { content: ""; display: inline-block; width: 22px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid; }
.li--lit::before { border-color: #F2B54C; box-shadow: 0 0 6px #F2B54C; }
.li--dim::before { border-top-style: dashed; border-color: rgba(187, 169, 150, 0.6); }
.gauge-wrap { display: flex; align-items: center; gap: 14px; }
.gauge { width: min(220px, 58%); flex: none; height: auto; overflow: visible; }
.gauge__track, .gauge__val { fill: none; stroke-width: 14; stroke-linecap: round; }
.gauge__track { stroke: rgba(255, 255, 255, 0.08); }
.gauge__val { stroke: url(#g-cort); stroke-dasharray: 50 100; transition: stroke-dasharray 400ms var(--ease); }
.gauge__needle { stroke: #FFF3D6; stroke-width: 3; stroke-linecap: round; }
[data-gauge-needle] { transform-origin: 110px 115px; transition: transform 400ms var(--ease); }
.gauge__hub { fill: #F2B54C; }
.gauge__lbl { fill: var(--lab-muted); font: 600 10px var(--sans); }
.gauge__num { display: flex; flex-direction: column; font: 600 2.4rem/1 var(--mono); color: #FFF3D6; }
.gauge__num small { font: 500 0.72rem/1.35 var(--sans); color: var(--lab-muted); margin-top: 6px; }

/* ---------- Module E ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare__c { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px; border-radius: 16px; border: 1px solid var(--lab-line); background: rgba(13, 11, 9, 0.55); }
.compare__c--gold { border-color: rgba(242, 181, 76, 0.45); background: radial-gradient(90% 80% at 50% 30%, rgba(242, 181, 76, 0.14), rgba(13, 11, 9, 0.55)); }
.compare__h { margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lab-muted); }
.compare__m { margin: 0; font-size: 0.86rem; line-height: 1.45; color: #DCCFBD; }
.compare__m strong { color: var(--lab-gold); font-family: var(--mono); }
.compare__s { margin: 0; font-size: 0.76rem; color: var(--lab-muted); }
.compare__big { margin: 0; font: 600 3rem/1 var(--mono); color: var(--lab-gold); text-shadow: 0 0 24px rgba(242, 181, 76, 0.55); font-variant-numeric: tabular-nums; }
.compare__big::before { content: "×"; font-size: 0.5em; margin-right: 2px; color: var(--lab-cyan-text); vertical-align: 0.4em; }
.pie { width: 72px; height: 72px; margin: 4px 0; overflow: visible; }
.fan { margin: 0; }
.fan svg { width: 100%; height: auto; display: block; overflow: visible; }
.fan figcaption { margin-top: 6px; font-size: 0.78rem; line-height: 1.5; color: var(--lab-muted); }

/* ---------- FAQ + CTA ---------- */
.mod--faq .faq__item summary { color: var(--lab-ink); }
.mod--faq .faq__item p { color: #D3C6B4; }
.mod--faq .mod__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); }
@media (max-width: 899.98px) { .mod--faq .faq__grid { grid-template-columns: 1fr; } }
.lab-cta { position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 140px); text-align: center; border-top: 1px solid rgba(242, 181, 76, 0.12); }
.lab-cta__glow { position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(40% 60% at 50% 100%, rgba(242, 181, 76, 0.28), transparent 70%), radial-gradient(30% 40% at 50% 100%, rgba(255, 243, 214, 0.25), transparent 70%); }
.lab-cta__inner { display: flex; flex-direction: column; align-items: center; }
.lab-cta__title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem); line-height: 1; margin: 0 0 18px; color: #FFF3D6; text-shadow: 0 0 40px rgba(242, 181, 76, 0.45); }
.lab-cta__lead { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; color: #E5D9C6; max-width: 38rem; margin: 0 0 28px; }
.lab-cta__actions { justify-content: center; }
.lab-cta__fine { margin: 0; font-size: 0.9rem; color: var(--lab-muted); }

/* ---------- Small screens ---------- */
@media (max-width: 479.98px) {
  .lab-btn--lg { width: 100%; }
  .hud { left: 10px; top: 10px; padding: 6px 10px; }
  .hud--right { left: auto; right: 10px; }
  .compare__big { font-size: 2.4rem; }
  .gauge-wrap { gap: 10px; }
  .gauge__num { font-size: 2rem; }
}

/* ---------- Reduced motion: still frames, no transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  .lab *, .lab *::before, .lab *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Print: the explanations, without the canvases ---------- */
@media print {
  .lab { background: #fff; color: #000; }
  .lab-hero__canvas, .lab-tabs, .stage canvas, .hud { display: none !important; }
}