/* "Inside a Nuclear Reaction": an explorable explanation.
   Layout: each chapter is a two-column scrollytelling block. The drawing (stage) is sticky and unboxed, on the same
   paper as the text, so text and picture read as one surface. Steps in the story drive the stage. */
:root {
  --paper: #f5f6f8; --card: #ffffff; --ink: #1a2233; --soft: #4a5468; --faint: #8b93a5; --line: #dfe3ea;
  --accent: #2f5bd3; --neutron: #4f6fd6; --proton: #df5a4e; --alpha: #8b5cf6; --photon: #e3a21a; --fission: #13a37f;
  --warm: #e8823a; --cool: #3a8fd6;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --display: "Newsreader", "Source Serif 4", Georgia, serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #11151d; --card: #181e29; --ink: #e8ecf3; --soft: #b3bccc; --faint: #7d879a; --line: #2a3242;
    --accent: #7c9cff; --neutron: #7f9bff; --proton: #ff7e72; --alpha: #b392ff; --photon: #f5c04d; --fission: #3fd3a8;
    --warm: #ff9b55; --cool: #5fb0ff; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #11151d; --card: #181e29; --ink: #e8ecf3; --soft: #b3bccc; --faint: #7d879a; --line: #2a3242;
  --accent: #7c9cff; --neutron: #7f9bff; --proton: #ff7e72; --alpha: #b392ff; --photon: #f5c04d; --fission: #3fd3a8;
  --warm: #ff9b55; --cool: #5fb0ff; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 19px; line-height: 1.62; }
a { color: var(--accent); }

/* ---------- top: hero (full screen, always dark: a live reaction drawn by js/ch/intro.js) ---------- */
.hero { position: relative; height: calc(100svh - var(--navh, 56px)); min-height: 560px; overflow: hidden; background: #020308; color: #eef2fa; isolation: isolate; }
.hero-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: pan-y; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 9vh; background: linear-gradient(to bottom, rgba(2,3,8,0), var(--paper)); pointer-events: none; }
.hero-copy { position: absolute; z-index: 1; left: max(20px, 5vw); bottom: max(96px, 16vh); max-width: min(40rem, 52vw); pointer-events: none; will-change: opacity, transform; }
.hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(46px, 7.2vw, 108px); line-height: 0.98; margin: 0 0 18px; letter-spacing: -0.015em; text-wrap: balance; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.hero .kicker { font-family: var(--sans); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(214,224,255,.7); margin-bottom: 16px; }
.hero .hero-tag { font-family: var(--serif); font-size: clamp(19px, 1.9vw, 25px); line-height: 1.4; color: rgba(236,240,250,.88); margin: 0 0 14px; }
.hero .hero-hint { font-family: var(--sans); font-size: 13px; color: rgba(214,224,255,.55); margin: 0; }
.scrollcue { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--sans); font-size: 14px; color: var(--soft); text-decoration: none; animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
.intro-text { max-width: 40rem; margin: 0 auto; padding: 8vh 20px 2vh; }
.intro-text p { margin: 0 0 16px; font-size: 21px; color: var(--soft); }
@media (max-width: 720px) { .hero-copy { max-width: none; right: 20px; bottom: 64px; } .hero .hero-hint span { display: none; } .intro-text p { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .scrollcue { animation: none; } }

/* ---------- table of contents ---------- */
.toc { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.toc ol { list-style: none; margin: 0 auto; padding-inline: max(16px, 4vw); padding-block: 8px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.toc a { display: block; font-family: var(--sans); font-size: 13px; color: var(--faint); text-decoration: none; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.toc a.here { color: var(--ink); background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.toc a span { font-family: var(--mono); font-size: 11px; margin-right: 6px; opacity: .7; }

/* ---------- chapters ---------- */
.chapter { position: relative; display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: 0 4vw; padding-inline: max(20px, 5vw); }
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter .stage { grid-column: 2; grid-row: 1; position: sticky; top: var(--navh, 56px); height: calc(100vh - var(--navh, 56px) - 8px); min-height: 420px; }
.chapter .stage canvas { display: block; }
.story { grid-column: 1; grid-row: 1; padding-block: 12vh 40vh; }
.story header { margin-bottom: 8vh; }
.story .num { font-family: var(--sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.story h2 { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; margin: 6px 0 14px; text-wrap: balance; }
.story .lead { color: var(--soft); font-size: 20px; margin: 0; }
.step { margin: 0 0 46vh; opacity: .38; transition: opacity .35s ease; }
.step.active { opacity: 1; }
.step p { margin: 0 0 14px; }
.step h3 { font-family: var(--sans); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; font-weight: 600; }
.step:last-child { margin-bottom: 0; }
em.n { font-style: normal; color: var(--neutron); font-weight: 600; }
em.p { font-style: normal; color: var(--proton); font-weight: 600; }
em.g { font-style: normal; color: var(--photon); font-weight: 600; }
em.a { font-style: normal; color: var(--alpha); font-weight: 600; }
em.f { font-style: normal; color: var(--fission); font-weight: 600; }
.formula { font-family: var(--mono); font-size: 15px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 10px 0 14px; overflow-x: auto; white-space: nowrap; }
.aside { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--faint); border-left: 2px solid var(--line); padding-left: 12px; margin: 12px 0; }
.aside code { font-family: var(--mono); font-size: 12.5px; color: var(--soft); }
@media (max-width: 860px) {
  .chapter { grid-template-columns: minmax(0, 1fr); }
  /* phones: the picture stays pinned under the nav bar, on top; the text scrolls up beneath it */
  .chapter .stage { grid-column: 1; height: 42vh; min-height: 260px; top: var(--navh, 56px); z-index: 4; background: var(--paper); }
  .chapter .stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: -26px; height: 26px; background: linear-gradient(var(--paper), color-mix(in srgb, var(--paper) 0%, transparent)); pointer-events: none; }
  .story { grid-row: 2; padding-block: 3vh 30vh; }
  .step { margin-bottom: 12vh; opacity: 1; }
}

/* course level tags (Intro / Intermediate / Advanced) and per-step deep links */
.lvl { display: inline-block; margin-left: 10px; padding: 2px 9px 3px; border-radius: 999px; font: 600 11px/1.3 var(--sans); letter-spacing: .08em; vertical-align: 1px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); white-space: nowrap; }
.lvl.l0 { --c: var(--fission); } .lvl.l1 { --c: var(--accent); } .lvl.l2 { --c: var(--proton); }
.intro-text p .lvl, .in-wrap .lvl { margin-left: 0; text-transform: uppercase; }
.intro-text p.audience { font: 400 16.5px/1.6 var(--sans); color: var(--soft); padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.intro-text p.audience a { color: var(--accent); }
.step { position: relative; scroll-margin-top: calc(var(--navh, 56px) + 12px); }
.step-link { position: absolute; left: -34px; top: -3px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--faint); opacity: 0; transition: opacity .2s ease, color .2s ease; text-decoration: none; }
.step:hover .step-link, .step-link:focus-visible, .step-link[data-done] { opacity: 1; }
.step-link:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.step-link[data-done]::after { content: attr(data-done); position: absolute; left: 32px; top: 4px; white-space: nowrap; font: 600 12px var(--sans); color: var(--card); background: var(--accent); padding: 3px 8px; border-radius: 6px; }
@media (max-width: 860px), (hover: none) {
  .step-link { left: auto; right: -6px; top: -36px; opacity: .6; }
  .step-link[data-done]::after { left: auto; right: 32px; }
}

/* ---------- inline controls ---------- */
.ctl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-family: var(--sans); font-size: 15px; margin: 12px 0 16px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.ctl label { color: var(--soft); white-space: nowrap; }
.ctl output { font-family: var(--mono); font-size: 14px; color: var(--ink); min-width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; accent-color: var(--accent); }
.btn { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--card); background: var(--accent); border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.btn.ghost { color: var(--accent); background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- end ---------- */
.coda { max-width: 46rem; margin: 0 auto; padding-inline: 20px; padding-block: 12vh 16vh; }
.coda h2 { font-family: var(--display); font-weight: 600; font-size: 40px; margin: 0 0 14px; }
.coda table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 15px; margin-top: 16px; }
.coda th, .coda td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.coda th { color: var(--faint); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.coda td code { font-family: var(--mono); font-size: 13px; color: var(--soft); }
.coda h3 { font-family: var(--display); font-weight: 600; font-size: 26px; margin: 48px 0 6px; }
.coda a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.coda a:hover { border-bottom-color: var(--accent); }
.coda .code-map td:first-child, .coda .code-map th:first-child { width: 3.2em; font-variant-numeric: tabular-nums; }
.coda .code-map td:first-child a { font-weight: 600; border-bottom: 0; }
.coda .code-map td:last-child { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .step { transition: none; } }

/* screenshot aid (?shot=chapter:step) */
body.shot .hero, body.shot .intro-text, body.shot .coda, body.shot .toc, body.shot [data-ch]:not(.shot-target) { display: none; }
body.shot-code .hero, body.shot-code .intro-text, body.shot-code main, body.shot-code .toc { display: none; } body.shot-code .coda { padding-block: 4vh; }
body.shot .story { padding-block: 6vh; } body.shot .story header { margin-bottom: 4vh; }
body.shot .step:not(.shot-step) { display: none; } body.shot .step.shot-step { opacity: 1; margin: 0; }
body.shot .chapter .stage { top: 0; }

/* ---------- glossary terms and their card ---------- */
.term {
  color: inherit;
  text-decoration: underline dotted color-mix(in srgb, var(--accent) 38%, transparent);
  text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; text-decoration-skip-ink: none;
  cursor: help; border-radius: 3px; -webkit-tap-highlight-color: transparent;
  transition: color .12s ease, background-color .12s ease, text-decoration-color .12s ease, box-shadow .12s ease;
}
.term:hover, .term:focus-visible, .term.on {
  color: var(--accent); text-decoration-color: var(--accent); text-decoration-style: solid;
  background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 9%, transparent);
}
.term:focus { outline: none; }
.term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.term em, .term b, .term i { color: inherit; }

.gl-card {
  --shadow: 0 1px 2px rgba(18, 28, 48, .06), 0 12px 32px -8px rgba(18, 28, 48, .24);
  position: fixed; left: 0; top: 0; z-index: 60; width: min(340px, calc(100vw - 24px)); box-sizing: border-box;
  padding: 14px 17px 15px; overflow: auto; overscroll-behavior: contain;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  font-family: var(--serif); text-align: left;
  visibility: hidden; opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s ease-out, transform .14s ease-out, visibility 0s linear .14s;
}
.gl-card.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .14s ease-out, transform .14s ease-out, visibility 0s; }
.gl-card.instant, .gl-card.swap { transition: none; }
.gl-card[data-side="above"], .gl-card[data-side="below"] { overflow: visible; }
.gl-card.tight[data-side] { overflow: auto; }
.gl-card.tight .gl-arrow { display: none; }
.gl-arrow {
  position: absolute; left: var(--ax, 50%); width: 11px; height: 11px; margin-left: -6px; background: var(--card);
  border: 1px solid var(--line); transform: rotate(45deg); pointer-events: none;
}
.gl-card[data-side="above"] .gl-arrow { bottom: -6.5px; border-top: 0; border-left: 0; }
.gl-card[data-side="below"] .gl-arrow { top: -6.5px; border-bottom: 0; border-right: 0; }
.gl-close { display: none; }
.gl-title { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.15; letter-spacing: -0.005em; margin: 0 0 6px; color: var(--ink); text-wrap: balance; }
.gl-short { margin: 0; font-size: 15.5px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.gl-more { margin: 7px 0 0; font-size: 15px; line-height: 1.52; color: var(--soft); }
.gl-formula {
  margin: 10px 0 0; padding: 6px 10px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin;
}
.gl-formula sup, .gl-formula sub { font-size: 0.78em; line-height: 0; }
.gl-link {
  display: block; margin: 11px 0 0; padding-top: 9px; border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none;
}
.gl-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.gl-card [hidden] { display: none !important; }
:root[data-theme="dark"] .gl-card { --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px -8px rgba(0, 0, 0, .65); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gl-card { --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px -8px rgba(0, 0, 0, .65); } }

/* phone: the card becomes a bottom sheet (the page keeps scrolling behind it) */
@media (max-width: 639.98px) {
  .gl-card, .gl-card[data-side] {
    left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: min(68vh, 520px); overflow: auto;
    border-radius: 16px 16px 0 0; border-width: 1px 0 0; padding: 26px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(14px); box-shadow: 0 -10px 34px -10px rgba(18, 28, 48, .28);
  }
  .gl-card.open, .gl-card.open[data-side] { transform: none; }
  .gl-card::before { content: ""; position: absolute; top: 9px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
  .gl-arrow { display: none; }
  .gl-close {
    display: grid; place-items: center; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 50%; background: var(--paper); color: var(--soft); font: 400 22px/1 var(--sans); cursor: pointer;
  }
  .gl-title { font-size: 23px; padding-right: 40px; }
  .gl-short { font-size: 16.5px; }
  .gl-more { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-card, .gl-card.open, .gl-card[data-side] { transform: none; transition: opacity .1s linear, visibility 0s; }
  .term { transition: none; }
}

/* language picker (js/i18n.js WT.langSwitch): a pill with the current flag and code that opens a card listing every
   language with its flag and its own name. Used in the contents bar (.toc) and the site header (.site). */
.toc { display: flex; align-items: center; }
.toc ol { flex: 1 1 auto; min-width: 0; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); padding-right: 32px; }
.lang { flex: none; position: relative; }
.toc .lang { margin-right: max(16px, 4vw); }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px var(--sans); letter-spacing: .04em; color: var(--ink); background: var(--card); border: 0; border-radius: 999px; padding: 6px 11px 6px 9px; box-shadow: 0 0 0 1px var(--line); cursor: pointer; white-space: nowrap; transition: box-shadow .15s, background .15s; }
.lang-btn:hover { box-shadow: 0 0 0 1px var(--faint); }
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang.open .lang-btn { box-shadow: 0 0 0 1.5px var(--accent); }
.lang-flag { flex: none; width: 20px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); }
.lang-chev { color: var(--faint); transition: transform .18s ease; }
.lang.open .lang-chev { transform: rotate(180deg); }
.lang-list { display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 13.5rem; max-height: min(70vh, 30rem); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .06); }
.lang.open .lang-list { display: block; animation: lang-in .14s ease-out; }
@keyframes lang-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .lang.open .lang-list { animation: none; } .lang-chev { transition: none; } }
.lang-list li { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; font: 500 15px var(--sans); color: var(--soft); cursor: pointer; outline: none; }
.lang-list li:hover, .lang-list li:focus { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--ink); }
.lang-list li:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.lang-list li[aria-selected="true"] { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--accent) 13%, transparent); }
.lang-list .lang-flag { width: 24px; height: 18px; }
.lang-list .lang-name { flex: 1; }
.lang-list .lang-iso { font: 600 11px var(--mono); letter-spacing: .05em; color: var(--faint); }
.lang-list li[aria-selected="true"] .lang-iso::before { content: "✓ "; color: var(--accent); }

/* ---------- accessibility and phone polish ---------- */
/* light-mode muted text meets 4.5:1 on the paper colour (was about 3:1) */
:root { --faint: #687185; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --faint: #8e98ab; } }
:root[data-theme="dark"] { --faint: #8e98ab; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
.btn { min-height: 44px; padding: 10px 16px; }
.toc a:focus-visible { outline-offset: -2px; }
.toc .board-link { flex: none; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; padding: 5px 12px; margin-right: 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); white-space: nowrap; }
.toc .board-link:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
input[type=range] { min-height: 32px; }
/* touch screens: tap targets of at least 44 px */
@media (pointer: coarse) {
  .toc a, .toc .board-link { padding-block: 13px; }
  .toc ol { padding-block: 0; }
  .lang-btn { min-height: 40px; padding-inline: 12px; }
  .lang-list li { min-height: 44px; }
  .gl-close { width: 44px !important; height: 44px !important; top: 8px !important; right: 8px !important; }
  input[type=range] { min-height: 44px; }
}
/* phones: inline controls stack their label above the slider instead of pushing the page sideways */
@media (max-width: 560px) {
  body { font-size: 18px; }
  .hero, .chapter { padding-inline: 16px; }
  .coda { padding-inline: 16px; }
  .ctl { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 12px; }
  .ctl label { grid-column: 1 / -1; white-space: normal; }
  .ctl output { min-width: 4.5em; }
  .toc ol { padding-inline: 12px; }
  .toc .lang { margin-right: 12px; }
  .toc .board-link { margin-right: 6px; padding-inline: 10px; }
  .coda table { font-size: 14px; }
  .coda th, .coda td { padding: 8px 6px; }
  .coda td code { word-break: break-all; }
  .coda .code-map td:last-child { white-space: normal; }
  .story h2 { font-size: clamp(30px, 8.4vw, 40px); }
}

/* ---------- the layered model (chapter "layers") ---------- */
.layer-chip { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin: 0 0 8px; }
.layer-chip.on { color: var(--fission); box-shadow: inset 0 0 0 1.5px var(--fission); }
.layer-chip.null { color: var(--soft); box-shadow: inset 0 0 0 1.5px var(--faint); }
.layer-chip.cand { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.layer-chip.wip { color: var(--warm); box-shadow: inset 0 0 0 1.5px var(--warm); }
.btns .btn[aria-pressed="true"] { color: var(--card); background: var(--accent); box-shadow: none; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; font-family: var(--sans); }
.figs div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: center; }
.figs b { display: block; font-family: var(--display); font-size: 28px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.figs span { font-size: 12px; color: var(--soft); letter-spacing: .04em; text-transform: uppercase; }
.figs .w b { color: var(--fission); } .figs .l b { color: var(--proton); }
.asof { font-family: var(--sans); font-size: 13px; color: var(--faint); }

/* ---------- scoreboard page ---------- */
.sitenav { gap: 4px; }
.sitenav a.here { color: var(--ink); background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.sb { max-width: 54rem; margin: 0 auto; padding: 48px 20px 96px; }
.sb-head h1 { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 7vw, 64px); line-height: 1.04; margin: 6px 0 8px; }
.sb-head .kicker { font-family: var(--sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.sb-asof { font-family: var(--sans); font-size: 15px; color: var(--soft); margin: 0 0 12px; }
.sb-head p { max-width: 40rem; }
.sb-sec { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.sb-sec h2 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 4vw, 36px); line-height: 1.12; margin: 0 0 12px; text-wrap: balance; }
.sb-sec h3 { font-family: var(--sans); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 32px 0 8px; font-weight: 600; }
.sb-sec code { font-family: var(--mono); font-size: .82em; }
.sb-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0 10px; font-family: var(--sans); }
.sb-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.sb-n { font-family: var(--display); font-size: clamp(30px, 6vw, 44px); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-l { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); margin-top: 6px; }
.sb-loss .sb-n { color: var(--proton); } .sb-win .sb-n { color: var(--fission); } .sb-tie .sb-n { color: var(--soft); }
.sb-strip { display: flex; gap: 2px; height: 12px; margin: 6px 0 10px; }
.sb-seg { display: block; min-width: 6px; border-radius: 4px; }
.sb-seg.sb-win { background: var(--fission); } .sb-seg.sb-tie { background: var(--faint); opacity: .55; } .sb-seg.sb-loss { background: var(--proton); }
.sb-note, .sb-src { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--soft); }
.sb-caveat { font-size: 17px; color: var(--soft); border-left: 2px solid var(--warm); padding-left: 12px; }
.sb-next { font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.sb-scroll { overflow-x: auto; margin: 8px 0 12px; border-radius: 8px; }
.sb-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sb-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14px; }
.sb-table caption { caption-side: top; text-align: left; font-size: 13px; color: var(--faint); padding: 0 0 8px; }
.sb-table th, .sb-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sb-table thead th { color: var(--faint); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sb-table tfoot th, .sb-table tfoot td { font-weight: 600; border-bottom: 0; }
.sb-table .r { text-align: right; }
.sb-table .num, .sb-changes .num { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-table .neg { color: var(--proton); font-weight: 600; }
.sb-gl { font-size: 12.5px; color: var(--soft); margin-top: 2px; }
.sb-car { font-size: 13px; color: var(--soft); min-width: 9em; }
.sb-cls { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.sb-rn, .sb-cls { white-space: nowrap; }   /* rival names and tie kinds stay on one line; phones may wrap */
#sb-open thead th { white-space: normal; }   /* two-word headers wrap so the verdict column fits */
#sb-open th, #sb-open td { padding-inline: 7px; }
#sb-open td:first-child { min-width: 8.5em; }
@media (max-width: 599px) { .sb-rn, .sb-cls { white-space: normal; } }
.vd { display: inline-block; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.vd-win { color: var(--fission); box-shadow: inset 0 0 0 1.5px var(--fission); }
.vd-tie { color: var(--soft); box-shadow: inset 0 0 0 1.5px var(--faint); }
.vd-loss { color: var(--proton); box-shadow: inset 0 0 0 1.5px var(--proton); }
.sb-changes { font-family: var(--sans); font-size: 15px; padding-left: 20px; }
.sb-changes li { margin: 6px 0; }
.sb-legend dl { margin: 0; }
.sb-legend dt { font-family: var(--sans); font-weight: 600; font-size: 15px; margin-top: 16px; }
.sb-legend dd { margin: 4px 0 0; color: var(--soft); }
.sb-head p.sb-sum { font-size: 19px; line-height: 1.5; max-width: 44rem; margin: 8px 0 0; }.sb-guide h2 { font-size: clamp(20px, 3vw, 26px); margin-top: 20px; }
.sb-guide h2:first-child { margin-top: 0; }
.sb-list { margin: 0 0 8px; padding-inline-start: 22px; }
.sb-list li { margin: 6px 0; }
.sb-more { margin: 24px 0 0; border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; font-family: var(--sans); font-size: 15px; }
.sb-more summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--ink); }
.sb-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sb-more[open] { padding-bottom: 14px; }
.sb-more dl { margin: 0; }
.sb-more dt { font-weight: 600; margin-top: 12px; }
.sb-more dd { margin: 4px 0 0; color: var(--soft); line-height: 1.55; }
.sb-more p { color: var(--soft); line-height: 1.55; }
.sb-more p.sb-data a { color: var(--accent); font-weight: 600; }
.sb-head p.sb-scope { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--soft); max-width: 44rem; margin: 0 0 4px; }
.sb-more ul.sb-gloss { margin: 4px 0 0; padding-inline-start: 18px; }
.sb-more ul.sb-gloss li { margin: 3px 0; }
.sb-list li a { color: var(--accent); }
.sb-sec .sb-changes { padding-left: 0; padding-inline-start: 20px; }
@media (max-width: 560px) {
  .sb { padding-inline: 16px; }
  .sb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-table { font-size: 13px; }
  .sb-table th, .sb-table td { padding: 8px 6px; }
}

/* text-strength verdict colours (the drawing colours are too light for small text on paper) */
:root { --win-ink: #0a7558; --loss-ink: #b8382d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --win-ink: #3fd3a8; --loss-ink: #ff8b80; } }
:root[data-theme="dark"] { --win-ink: #3fd3a8; --loss-ink: #ff8b80; }
.vd-win, .sb-win .sb-n, .figs .w b, .layer-chip.on { color: var(--win-ink); }
.vd-win, .layer-chip.on { box-shadow: inset 0 0 0 1.5px var(--win-ink); }
.vd-loss, .sb-loss .sb-n, .figs .l b, .sb-table .neg { color: var(--loss-ink); }
.vd-loss { box-shadow: inset 0 0 0 1.5px var(--loss-ink); }


/* dev aid: ?og=1 renders the hero alone for the share image (og.png) */
body.og .toc, body.og .hero-hint, body.og .scrollcue, body.og .hero::after, body.og .intro-text, body.og main, body.og .coda { display: none; }
body.og .hero { height: 100vh; min-height: 0; }
body.og .hero-copy { bottom: 64px; }
.hero .fire-btn { pointer-events: auto; font-family: var(--sans); font-size: 13px; font-weight: 600; color: #fff; background: rgba(111,140,255,.18); border: 1px solid rgba(160,180,255,.45); border-radius: 999px; padding: 7px 14px; margin-right: 8px; cursor: pointer; }
.hero .fire-btn:hover { background: rgba(111,140,255,.32); }
.hero .fire-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- data explorer (data.html, js/data.js) ---------- */
.dx {
  --dx-surface: var(--card); --dx-ink: var(--ink); --dx-soft: var(--soft); --dx-faint: var(--faint); --dx-line: var(--line); --dx-grid: #e6e9ef;
  --dx-curve: #2a78d6; --dx-meas: #eb6834; --dx-alt: #1baf7a; --dx-none: #e2e5ea; --dx-sel: #eb6834;
  --dx-l1: #7d5bbf; --dx-l2: #b0507e; --dx-l3: #8c7a2e; /* evaluated-library overlay (comparators): muted, dashed */
  --dx-t0: #104281; --dx-t1: #256abf; --dx-t2: #5598e7; --dx-t3: #86b6ef;
  --dx-r1: #cde2fb; --dx-r2: #9ec5f4; --dx-r3: #6da7ec; --dx-r4: #3987e5; --dx-r5: #256abf; --dx-r6: #184f95; --dx-r7: #0d366b;
  max-width: 72rem; margin: 0 auto; padding: 40px 20px 96px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dx {
  --dx-grid: #262d3a; --dx-curve: #3987e5; --dx-meas: #d95926; --dx-alt: #199e70; --dx-none: #262d3a; --dx-sel: #f0f3f8;
  --dx-l1: #a68be0; --dx-l2: #d784ab; --dx-l3: #c7b065;
  --dx-t0: #9ec5f4; --dx-t1: #5598e7; --dx-t2: #2a78d6; --dx-t3: #184f95;
  --dx-r1: #0d366b; --dx-r2: #184f95; --dx-r3: #256abf; --dx-r4: #3987e5; --dx-r5: #6da7ec; --dx-r6: #9ec5f4; --dx-r7: #cde2fb; } }
:root[data-theme="dark"] .dx {
  --dx-grid: #262d3a; --dx-curve: #3987e5; --dx-meas: #d95926; --dx-alt: #199e70; --dx-none: #262d3a; --dx-sel: #f0f3f8;
  --dx-l1: #a68be0; --dx-l2: #d784ab; --dx-l3: #c7b065;
  --dx-t0: #9ec5f4; --dx-t1: #5598e7; --dx-t2: #2a78d6; --dx-t3: #184f95;
  --dx-r1: #0d366b; --dx-r2: #184f95; --dx-r3: #256abf; --dx-r4: #3987e5; --dx-r5: #6da7ec; --dx-r6: #9ec5f4; --dx-r7: #cde2fb; }
.dx .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dx-head h1 { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 7vw, 64px); line-height: 1.04; margin: 6px 0 10px; }
.dx-head .kicker { font-family: var(--sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.dx-head p { max-width: 42rem; color: var(--soft); margin: 0 0 22px; }
.dx-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px; font-family: var(--sans); }
.dx-search input { font: 500 15px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; width: min(19rem, 80vw); }
.dx-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dx-search input.bad { border-color: var(--proton); }
.dx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line); flex-wrap: wrap; }
.dx-seg button { font: 600 13px var(--sans); color: var(--soft); background: none; border: 0; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.dx-seg button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.dx-chartwrap, .dx-plotwrap { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: var(--card); }
.dx-chartwrap canvas { display: block; touch-action: none; cursor: crosshair; }
.dx-plotwrap canvas { display: block; }
.dx-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.dx-zoom button { width: 34px; height: 34px; font: 600 17px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.dx-tip { position: absolute; z-index: 3; pointer-events: none; max-width: 300px; font: 500 13px/1.45 var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.dx-tip .dx-exhint { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--accent); text-decoration: none; }
.dx-tip a.dx-exhint { text-decoration: underline; text-underline-offset: 2px; padding: 4px 0; }
.dx-faint { color: var(--faint); }
.dx-legend, .dx-plegend { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 13px var(--sans); color: var(--soft); margin: 10px 2px 4px; align-items: center; }
.dx-key { display: inline-flex; align-items: center; gap: 6px; }
.dx-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.dx-key i.ln { height: 3px; width: 18px; border-radius: 2px; }
.dx-key i.dot { width: 9px; height: 9px; border-radius: 50%; }
.dx-ramp { display: inline-flex; align-items: center; gap: 6px; }
.dx-ramp i { width: 140px; height: 10px; border-radius: 3px; display: inline-block; }
.dx-hint { font: 500 13px var(--sans); color: var(--faint); margin: 2px 2px 0; }
.dx-nuc { margin-top: 44px; scroll-margin-top: 60px; }
.dx-nuc-head h2 { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 5vw, 48px); margin: 0 0 8px; }
.dx-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 14px var(--sans); color: var(--soft); margin-bottom: 16px; align-items: center; }
.dx-chip { font-weight: 600; padding: 3px 10px; border-radius: 999px; color: #fff; }
.dx-chip.t0 { background: var(--dx-t0, #104281); } .dx-chip.t1 { background: #256abf; } .dx-chip.t2 { background: #5598e7; } .dx-chip.t3 { background: #6b7385; }
.dx-warn { color: var(--warm); }
.dx-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.dx-tabs button { font: 600 14px var(--sans); color: var(--soft); background: none; border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.dx-tabs button[aria-selected="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.dx-plotbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; align-items: center; font: 500 13px var(--sans); color: var(--soft); }
.dx-check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.dx-key i.dash { height: 0; width: 18px; border-radius: 0; background: none !important; border-top: 2px dashed; }
.dx-libbar { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font: 500 13px var(--sans); color: var(--soft); }
.dx-libbar .dx-check { align-items: flex-start; } .dx-libbar .dx-check input { margin-top: 2px; flex: none; }
.dx-libnote { margin: 8px 0 0; font-size: 12.5px; color: var(--faint); line-height: 1.5; overflow-wrap: anywhere; }
.dx-libnote p { margin: 0 0 6px; } .dx-libnote ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.dx-libnote li { display: flex; gap: 8px; align-items: baseline; } .dx-libnote li i { flex: none; width: 16px; border-top: 2px dashed; transform: translateY(-3px); }
.dx-libnote b { color: var(--soft); font-weight: 600; }
.dx-link { font: 600 13px var(--sans); color: var(--accent); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dx-table { max-height: 420px; overflow: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; }
.dx-table table { width: 100%; border-collapse: collapse; font: 500 13px var(--sans); }
.dx-table th, .dx-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dx-table th { position: sticky; top: 0; background: var(--card); color: var(--faint); font-weight: 600; }
.dx-ds h3, .dx-run h3 { font: 600 14px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 26px 0 8px; }
.dx-ds ul { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; border-top: 1px solid var(--line); }
.dx-ds li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); font: 500 13px var(--sans); align-items: center; }
.dx-ds li:hover, .dx-ds li:focus-within { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.dx-ds a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.dx-run pre, .dx-repo pre { margin: 0; overflow-x: auto; font: 13px/1.6 var(--mono); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.dx-repo { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
.dx-repo h2 { font-family: var(--display); font-weight: 600; font-size: 32px; margin: 0 0 10px; }
.dx-repo p { max-width: 44rem; color: var(--soft); }
.dx-gh { font: 600 15px var(--sans); color: var(--accent); }
.dx-src { font-size: 15px; }
@media (max-width: 640px) { .dx { padding-top: 24px; } .dx-ds li { grid-template-columns: minmax(0, 1fr) auto; } .dx-ds li > :nth-child(2), .dx-ds li > :nth-child(3) { display: none; } }

/* ---------- site header (every page): brand, The physics ▾ (chapters), Every nuclide, Scoreboard, GitHub, EN | ES ---------- */
.toc.site { display: flex; align-items: center; gap: 6px; padding: 8px max(16px, 3vw); min-height: 56px; box-sizing: border-box; }
.site .brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; padding: 0; font: 600 17px/1.1 var(--display); color: var(--ink); text-decoration: none; white-space: nowrap; border-radius: 8px; }
.site .brand img { display: block; border-radius: 7px; }
.site .site-links { display: flex; align-items: center; gap: 4px; }
.site .site-links a, .site .toc-menu { display: inline-flex; align-items: center; gap: 7px; font: 600 15px var(--sans); color: var(--soft); text-decoration: none; background: none; border: 0; padding: 9px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.site .site-links a:hover, .site .toc-menu:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.site .site-links a.here, .site .toc-menu.here { color: var(--ink); background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.site .site-links a.gh { color: var(--paper); background: var(--ink); margin-left: 6px; }
.site .site-links a.gh:hover { color: var(--paper); background: color-mix(in srgb, var(--ink) 85%, var(--accent)); }
.site .gh-ico { flex: none; }
.site .lang { margin: 0 0 0 10px; }
.site .chap { position: relative; }
.site .chap ol { display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: min(22rem, 92vw); max-height: 72vh; overflow-y: auto; flex-direction: column; gap: 2px; margin: 0; padding: 8px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.16); -webkit-mask-image: none; mask-image: none; }
.site .chap.open ol { display: flex; }
.site .chap ol a { display: block; padding: 9px 12px; border-radius: 9px; font: 500 15px var(--sans); color: var(--soft); text-decoration: none; white-space: normal; }
.site .chap ol a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); }
.site .chap ol a.here { color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: none; }
.site .chap ol a span { display: inline-block; width: 1.8em; font: 500 12px var(--mono); color: var(--faint); }
.site .site-burger { display: none; width: 44px; height: 44px; font-size: 20px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.site :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 860px) {
  .toc.site { gap: 8px; }
  .site .brand span { display: none; }
  .site .site-burger { display: inline-flex; align-items: center; justify-content: center; }
  .site .site-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 14px 16px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(0,0,0,.14); }
  .site.menu-open .site-links { display: flex; }
  .site .site-links a { padding: 14px 16px; font-size: 17px; border-radius: 12px; }
  .site .site-links a.gh { margin: 6px 0 0; justify-content: center; }
  .site .lang { margin: 8px 0 0; align-self: center; }
  .site .lang-list { position: static; margin-top: 8px; max-height: none; box-shadow: none; }
  .site .chap { margin-left: auto; }
  .site .chap ol { position: fixed; top: calc(var(--navh, 56px) + 6px); left: 12px; right: 12px; width: auto; }
}

/* ---------- more ways in (cards after the intro) ---------- */
.ways { max-width: 64rem; margin: 0 auto; padding: 2vh 20px 10vh; }
.ways h2 { font: 600 14px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
.ways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.way { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.way:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 14px 30px -12px rgba(0,0,0,.2); }
.way:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.way-k { font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.way b { font: 600 26px/1.15 var(--display); }
.way-p { font: 400 16px/1.5 var(--serif); color: var(--soft); flex: 1; }
.way-go { font: 600 14px var(--sans); color: var(--accent); }
.ways-more { font: 500 14px var(--sans); color: var(--faint); margin: 18px 0 0; text-align: center; }
@media (max-width: 760px) { .ways-grid { grid-template-columns: minmax(0, 1fr); } .way b { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) { .way { transition: none; } .way:hover { transform: none; } }
.dx-controls { position: relative; }
.dx-sugg { position: absolute; z-index: 6; top: calc(100% + 4px); left: 0; width: min(24rem, 92vw); margin: 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.16); max-height: 60vh; overflow-y: auto; }
.dx-sugg li { padding: 8px 10px; border-radius: 8px; font: 500 14px var(--sans); cursor: pointer; }
.dx-sugg li:hover, .dx-sugg li.on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
body.shot .ways, body.shot-code .ways { display: none; }
.site .brand span, .site a.gh span { font: inherit; margin: 0; opacity: 1; color: inherit; }

/* ---------- data page: dark, lit like the hero ---------- */
body.dx-page { background: radial-gradient(1400px 700px at 70% -10%, #16295a 0%, #0a1124 45%, #05070e 100%) fixed; }
:root[data-theme="dark"] .dx { --dx-surface: rgba(8,13,28,.55); --dx-grid: rgba(150,170,220,.12); --dx-none: rgba(120,135,170,.16); }
.dx-hero .dx-head h1 { font-size: clamp(48px, 9vw, 104px); letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 40px rgba(80,120,255,.35); }
.dx-hero .dx-head p { font-size: 20px; color: rgba(225,232,250,.82); }
.dx-chartwrap, .dx-plotwrap { background: rgba(8,13,28,.55); box-shadow: 0 0 0 1px rgba(150,170,230,.16), 0 30px 80px -30px rgba(40,90,255,.35); backdrop-filter: blur(2px); }
.dx-nuc { position: relative; }
.dx-nuc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 32px; align-items: center; margin-bottom: 18px; }
.dx-atomwrap { width: 240px; height: 240px; }
.dx-atomwrap canvas { display: block; width: 240px; height: 240px; }
.dx-tile { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; font: 600 28px var(--display); color: #fff; background: linear-gradient(145deg, #2a78d6, #13305f); box-shadow: 0 10px 30px -8px rgba(42,120,214,.6); margin-bottom: 10px; }
.dx-nuc-head h2 { font-size: clamp(44px, 7vw, 76px) !important; line-height: 1; color: #fff; margin: 0 0 12px !important; }
.dx-stats { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 14px; }
.dx-stat b { display: block; font: 600 34px/1.05 var(--sans); color: #fff; letter-spacing: -0.01em; }
.dx-stat span { font: 500 13px var(--sans); color: rgba(210,220,245,.7); }
@media (max-width: 720px) { .dx-nuc-head { grid-template-columns: minmax(0, 1fr); justify-items: start; } .dx-atomwrap, .dx-atomwrap canvas { width: 180px; height: 180px; } .dx-stat b { font-size: 26px; } }
.dx-page .dx-chip.t0 { color: #08122a; }

/* ---------- scoreboard: dark and lit, like the hero ---------- */
body.sb-lit { background: radial-gradient(1400px 700px at 30% -10%, #12305a 0%, #0a1124 45%, #05070e 100%) fixed; }
.sb-lit .sb-head h1 { font-size: clamp(52px, 9vw, 108px); letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 40px rgba(63,211,168,.25); }
.sb-lit .sb-head p { color: rgba(225,232,250,.82); }
.sb-hero { margin: 26px 0 30px; padding: 18px 20px 10px; border-radius: 18px; background: rgba(8,13,28,.55); box-shadow: 0 0 0 1px rgba(150,170,230,.16), 0 30px 80px -30px rgba(63,211,168,.25); }
.sb-hero canvas { display: block; }
.sb-lit .sb-tile { background: rgba(10,16,34,.6); border-color: rgba(150,170,230,.18); box-shadow: 0 18px 40px -24px rgba(0,0,0,.8); }
.sb-lit .sb-sec { position: relative; }
.sb-lit .sb-sec h2 { color: #fff; }
.sb-lit .sb-table { background: rgba(10,16,34,.5); }
.dx { padding-top: 14px; }
.dx-hero .dx-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; }
.dx-hero .dx-top h1 { font-size: clamp(26px, 3.4vw, 36px); margin: 0; text-shadow: 0 2px 24px rgba(80,120,255,.35); }
.dx-hero .dx-controls { margin-bottom: 10px; }
.dx-lede { max-width: 44rem; margin: 14px 2px 0; font-size: 18px; color: rgba(225,232,250,.8); }
@media (max-width: 640px) { .dx-seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; } .dx-seg button { padding: 7px 10px; font-size: 12.5px; white-space: nowrap; } }
/* TALYS credit: a quiet line under the hero (index) and near the top of the other pages */
.hero .hero-credit { font-family: var(--sans); font-size: 12px; line-height: 1.5; color: rgba(214,224,255,.55); margin: 14px 0 0; max-width: 34rem; pointer-events: auto; }
.hero .hero-credit a, .dx-hero .dx-head p.site-credit a { color: rgba(214,224,255,.82); text-underline-offset: 2px; }
body.og .hero-credit { display: none; }
.site-credit, .sb-head p.site-credit { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--faint); max-width: 44rem; margin: 0 0 14px; }
.site-credit a { color: var(--soft); text-underline-offset: 2px; }
.dx-hero .dx-head p.site-credit { flex-basis: 100%; font-size: 12.5px; color: rgba(214,224,255,.6); margin: 2px 0 4px; }

/* ---------- instructors page ---------- */
.in-wrap .sb-sec p a, .in-wrap .sb-head p a { color: var(--accent); }
.in-wrap code { font-family: var(--mono); font-size: .85em; overflow-wrap: anywhere; }
.in-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.in-level { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.in-level p { margin: 10px 0 0; font: 400 15px/1.5 var(--sans); color: var(--soft); }
.in-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 12px; }
.in-faint { font: 500 13px var(--sans); color: var(--faint); }
.in-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.in-ch[hidden] { display: none; }
.in-ch-a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.in-ch-a:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }
.in-n { font: 600 22px/1.1 var(--display); color: var(--faint); font-variant-numeric: tabular-nums; }
.in-body { display: grid; gap: 6px; min-width: 0; }
.in-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.in-top b { font: 600 20px/1.2 var(--display); }
.in-topic { font: 500 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.in-what { font: 400 15px/1.5 var(--sans); color: var(--soft); }
.in-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 500 13px var(--sans); color: var(--faint); }
.in-meta code { font-size: 12px; color: var(--faint); }
.in-course { display: grid; gap: 22px; margin: 10px 0 8px; }
.in-lec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; font-family: var(--sans); }
.in-lec-h b { font: 600 19px/1.25 var(--display); }
.in-lec-k { font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.in-bar { display: flex; gap: 3px; height: 34px; max-width: 100%; }
.in-seg { --c: var(--accent); display: flex; align-items: center; justify-content: center; min-width: 0; border-radius: 8px; color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); font: 600 14px var(--mono); text-decoration: none; transition: background .2s ease; }
.in-seg:hover { background: color-mix(in srgb, var(--c) 34%, transparent); }
.in-seg.l0 { --c: var(--fission); } .in-seg.l2 { --c: var(--proton); }
.in-lec-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font: 400 15px/1.45 var(--sans); }
.in-lec-list a { color: var(--ink); text-decoration: none; }
.in-lec-list a:hover { color: var(--accent); }
.in-lec-list .in-n { display: inline-block; width: 1.8em; font: 500 13px var(--mono); }
.in-builder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; font-family: var(--sans); }
.in-builder label { display: grid; gap: 4px; font: 500 13px var(--sans); color: var(--faint); min-width: 0; }
.in-builder select { font: 500 15px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; width: 100%; }
.in-url { grid-column: 1 / -1; display: block; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font: 14px/1.5 var(--mono) !important; color: var(--ink); overflow-wrap: anywhere; }
.in-b-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.in-b-btns .btn { text-decoration: none; }
@media (max-width: 640px) {
  .in-levels, .in-builder { grid-template-columns: minmax(0, 1fr); }
  .in-ch-a { grid-template-columns: 1.7em minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
}

/* ---------- data page: downloads ---------- */
.dx-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 22px 0 6px; font: 500 14px var(--sans); color: var(--soft); }
.dx-dl .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 7px 14px; }
.dx-dl-note { flex-basis: 100%; font-size: 13px; color: var(--faint); margin: 0; }
/* a nuclide's file is fetched when it is opened: dim the old one meanwhile (after a beat, so fast loads don't flicker); first open shows just the head */
.dx-status { font: 500 15px var(--sans); color: var(--soft); margin: 0 0 16px; }
.dx-nuc > :not(.dx-nuc-head):not(.dx-status) { transition: opacity .15s; }
.dx-nuc.dx-loading > :not(.dx-nuc-head):not(.dx-status) { opacity: .35; pointer-events: none; transition-delay: .15s; }
.dx-nuc.dx-empty > :not(.dx-nuc-head):not(.dx-status) { display: none; }
@media (min-width: 861px) and (max-width: 1140px) { .site .brand span { display: none; } .site .site-links a, .site .toc-menu { padding-inline: 11px; } }

/* right-to-left languages (Arabic): the page mirrors, the drawings do not (canvas text and axes keep their left-to-right layout) */
canvas { direction: ltr; }
[dir="rtl"] .toc ol { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); padding-right: 0; padding-left: 32px; }
[dir="rtl"] .toc .lang { margin-right: 0; margin-left: max(16px, 4vw); }
[dir="rtl"] .site .brand { margin-right: 0; margin-left: auto; }
[dir="rtl"] .site .site-links a.gh { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .site .lang { margin: 0 10px 0 0; }
[dir="rtl"] .aside, [dir="rtl"] .sb-caveat { border-left: 0; padding-left: 0; border-right: 2px solid var(--line); padding-right: 12px; }
[dir="rtl"] .sb-caveat { border-right-color: var(--warm); }
[dir="rtl"] .lvl { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .intro-text p .lvl, [dir="rtl"] .in-wrap .lvl { margin-right: 0; }
[dir="rtl"] .step-link { left: auto; right: -34px; }
[dir="rtl"] .coda th, [dir="rtl"] .coda td, [dir="rtl"] .sb-table th, [dir="rtl"] .sb-table td, [dir="rtl"] .dx-table th, [dir="rtl"] .dx-table td, [dir="rtl"] .gl-card { text-align: right; }
[dir="rtl"] .hero-copy { left: auto; right: max(20px, 5vw); }
[dir="rtl"] .dx-sugg { left: auto; right: 0; }
/* formulas and number ranges inside right-to-left prose keep their left-to-right order */
[dir="rtl"] .formula, [dir="rtl"] code, [dir="rtl"] sub, [dir="rtl"] sup { unicode-bidi: isolate; direction: ltr; }
@media (max-width: 860px) { [dir="rtl"] .step-link { right: auto; left: -6px; } }