@import url('/assets/fonts/fonts.css');

/* Palette matches simulations/atomic_models and simulations/nuclear_decay. */
:root {
  color-scheme: light;
  --font-body: 'Figtree', 'Manrope', system-ui, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --bg-color: #F8F6F1;
  --bg-pattern: #EDE9E0;
  --text-main: #1B1B1B;
  --text-secondary: #5F5954;
  --brand-primary: #C2410C;
  --brand-accent: #0D9488;
  --brand-accent-strong: #0F766E;
  --card-bg: #ffffff;
  --card-border: #E8E4DD;
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  --soft-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  --muted-bg: #F3F0EA;
  --input-border: #D8D3CB;
  --nav-bg: rgba(248, 246, 241, 0.92);
  --nav-border: #E8E4DD;
  --viewer-bg: #F1EEE7;
  --focus: #0F766E;
  --electron: #1675BB;
  --positive: #B7791F;
  --proton: #D45132;
  --neutron: #657481;
  --alpha: #B5179E;
  --photon: #7C3AED;
  --undecayed: #D45132;
  --decayed: #9DB4B0;
  --paper: #EFE6CF;
  --aluminium: #AEB9C4;
  --lead: #4A5360;
  --gold: #C9A227;
  --solid: #9A948C;
  --object: #6E9F45;
  --thumb-w: 184px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: #111110;
  --bg-pattern: #1A1A18;
  --text-main: #EDEBE8;
  --text-secondary: #A8A49C;
  --brand-primary: #FB923C;
  --brand-accent: #5EEAD4;
  --brand-accent-strong: #2DD4BF;
  --card-bg: #1A1A19;
  --card-border: #2A2A28;
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  --soft-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  --muted-bg: #222220;
  --input-border: #3A3A36;
  --nav-bg: rgba(17, 17, 16, 0.9);
  --nav-border: rgba(255, 255, 255, 0.06);
  --viewer-bg: #141413;
  --focus: #5EEAD4;
  --electron: #4BA3E3;
  --positive: #E0A445;
  --proton: #EF6A48;
  --neutron: #8C9AA6;
  --alpha: #E879F9;
  --photon: #A78BFA;
  --undecayed: #EF6A48;
  --decayed: #3F5A57;
  --paper: #D9CFB4;
  --aluminium: #8E9AA6;
  --lead: #5B6573;
  --gold: #E0B84A;
  --solid: #8A857D;
  --object: #7DB356;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background-color: var(--bg-color);
  background-image: radial-gradient(var(--bg-pattern) 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--text-main);
  font: 16px/1.5 var(--font-body);
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; }
a { color: inherit; text-underline-offset: 4px; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Floating banner and controls */
.banner {
  position: fixed;
  top: var(--standalone-top);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 60px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.banner-logo { justify-self: start; display: flex; align-items: center; min-height: 48px; line-height: 0; }
.banner-logo img { display: block; width: 38px; height: 38px; object-fit: contain; }
.banner-title {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -0.5px;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.banner-actions { justify-self: end; display: flex; gap: 6px; align-items: center; }
#theme-button { --panphy-theme-button-size: 44px; }
#fullscreen { --panphy-fs-size: 44px; }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--brand-primary); transition: background-color .18s ease; }
[data-theme="dark"] .icon-button { color: var(--brand-accent); }
.icon-button:hover { background: color-mix(in srgb, var(--brand-primary), transparent 92%); }
.icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.icon-button .pane { fill: currentColor; stroke: none; opacity: 0; transition: opacity .18s ease; }
.icon-button[aria-pressed="true"] .pane { opacity: .3; }

/* Slide thumbnails: shown beside the stage unless presenting fullscreen. */
.thumbs {
  position: fixed;
  top: calc(60px + var(--standalone-top));
  left: 0;
  bottom: var(--vv-bottom, 0px);
  z-index: 15;
  width: calc(var(--thumb-w) + 68px);
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px 24px max(12px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--nav-border);
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  scrollbar-width: thin;
}
body.show-thumbs .thumbs { display: flex; }
body.show-thumbs .stage { left: calc(var(--thumb-w) + 68px); }
body.show-thumbs .controls { left: calc(50% + (var(--thumb-w) + 68px) / 2); }
.thumb { display: flex; gap: 8px; align-items: flex-start; padding: 0; border: 0; background: none; text-align: left; }
.thumb-num { width: 20px; flex: none; padding-top: 2px; font: 600 12px var(--font-mono); color: var(--text-secondary); text-align: right; }
.thumb-frame { position: relative; width: var(--thumb-w); height: calc(var(--thumb-w) * 9 / 16); flex: none; overflow: hidden; border: 2px solid var(--card-border); border-radius: 10px; background: var(--bg-color); transition: border-color .15s; }
.thumb:hover .thumb-frame { border-color: var(--brand-accent); }
.thumb[aria-current="true"] .thumb-frame { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary), transparent 75%); }
.thumb[aria-current="true"] .thumb-num { color: var(--brand-primary); }
.thumb-slide { position: absolute; top: 0; left: 0; width: 1600px; height: 900px; transform-origin: 0 0; pointer-events: none; background-image: radial-gradient(var(--bg-pattern) 1.5px, transparent 1.5px); background-size: 36px 36px; }
.thumb-slide .slide { visibility: visible; opacity: 1; transition: none; }
.thumb-slide .step { opacity: 1; transform: none; transition: none; }
body.is-fullscreen .thumbs { display: none; }
body.is-fullscreen .stage { left: 0; }
@media (max-width: 900px) {
  .thumbs, #thumbs-toggle { display: none !important; }
  body.show-thumbs .stage { left: 0; }
  body.show-thumbs .controls { left: 50%; }
}

.controls {
  position: fixed;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--vv-bottom, 0px));
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--nav-border);
  border-radius: 999px;
  background: var(--nav-bg);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.controls button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--input-border);
  border-radius: 50%;
  background: var(--card-bg);
}
.controls button:hover { border-color: var(--brand-accent); }
.controls button:disabled { opacity: .4; cursor: default; }
.controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.counter { min-width: 92px; text-align: center; font: 600 .9rem var(--font-mono); letter-spacing: .06em; color: var(--text-secondary); }
.counter b { color: var(--text-main); }
.progress { position: fixed; left: 0; right: 0; bottom: var(--vv-bottom, 0px); z-index: 21; height: 4px; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); transition: width .3s ease; }

/* Revision-note pane colours (layout in ../assets/deck-notes.css). */
.notes {
  --rn-ink: var(--text-main);
  --rn-muted: var(--text-secondary);
  --rn-bar: var(--card-bg);
  --rn-bg: var(--card-bg);
  --rn-border: 1px solid var(--input-border);
  --rn-radius: 14px;
  --rn-accent: var(--brand-accent);
  --rn-callout: var(--muted-bg);
  --rn-trap: var(--brand-primary);
  --rn-tip: var(--brand-accent-strong);
  --rn-more: var(--photon);
  --rn-font: 16px/1.45 var(--font-body);
  --rn-label-font: 700 15px var(--font-body);
  --rn-tag-font: 600 12px var(--font-mono);
}

/* Stage: slides are authored at 1600 × 900 and scaled to fit. */
.stage { position: fixed; top: calc(60px + var(--standalone-top)); left: 0; right: 0; bottom: calc(74px + var(--vv-bottom, 0px)); }
.deck {
  position: absolute;
  top: 0;
  left: 0;
  width: 1600px;
  height: 900px;
  transform-origin: 0 0;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background-color: var(--bg-color);
  background-image: radial-gradient(var(--bg-pattern) 1.5px, transparent 1.5px);
  background-size: 36px 36px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
  overflow: hidden;
}
body.is-fullscreen .banner, body.is-fullscreen .controls { display: none; }
body.is-fullscreen .stage { top: 0; bottom: var(--vv-bottom, 0px); }
body.is-fullscreen .deck { border: 0; border-radius: 0; box-shadow: none; }

/* Leaves the in-window presenting mode used where there is no Fullscreen API (iPhone). */
.exit-present {
  position: fixed;
  top: calc(max(8px, env(safe-area-inset-top)) + var(--standalone-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 30;
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  color: #fff;
}
.exit-present svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
body.is-window-fullscreen .exit-present { display: grid; }
body.is-window-fullscreen .stage { top: var(--standalone-top); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--vv-bottom, 0px)); }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 64px 88px 72px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.slide.active { visibility: visible; opacity: 1; transition: opacity .35s ease; }
.slide-foot {
  position: absolute;
  left: 88px;
  right: 88px;
  bottom: 28px;
  display: flex;
  justify-content: space-between;
  font: 600 15px var(--font-mono);
  letter-spacing: .1em;
  color: var(--text-secondary);
  opacity: .8;
}

/* Typography */
.eyebrow { margin: 0; font: 600 24px var(--font-mono); letter-spacing: .14em; color: var(--brand-primary); text-transform: uppercase; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }
h1 { font-size: 118px; line-height: 1; letter-spacing: -.02em; margin-top: 18px; }
h1 span, h2 span { color: var(--brand-primary); }
h2 { font-size: 64px; line-height: 1.05; letter-spacing: -.015em; margin: 10px 0 34px; }
h3 { font-size: 34px; line-height: 1.15; }
.mono { font-family: var(--font-mono); }
.nocase { text-transform: none; }
.lead { font-size: 30px; color: var(--text-secondary); margin: 0; }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; align-content: start; }
.points li { position: relative; padding-left: 42px; font-size: 35px; line-height: 1.3; }
.points li::before { content: ""; position: absolute; left: 4px; top: .42em; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-accent), transparent 80%); }
.points.small li { font-size: 31px; }
.points.tight { gap: 16px; }
.points b { color: var(--brand-primary); font-weight: 800; }
.points .sub { display: block; font-size: .8em; color: var(--text-secondary); }
.t-proton { color: var(--proton); fill: var(--proton); font-weight: 800; }
.t-neutron { color: var(--neutron); fill: var(--neutron); font-weight: 800; }
.t-electron { color: var(--electron); font-weight: 800; }
.t-alpha { color: var(--alpha); font-weight: 800; }
.t-photon { color: var(--photon); font-weight: 800; }
.t-accent { color: var(--brand-accent-strong); font-weight: 800; }


/* Layouts */
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.12fr; gap: 56px; align-items: center; }
.split.wide-fig { grid-template-columns: .82fr 1.3fr; }
.split.even { grid-template-columns: 1fr 1fr; }
/* An .idea that sums up the figure comes after the panel in the page, so it is revealed
   after the figure's steps, but still sits under the points on the left. */
.split.idea-last { grid-template-rows: 1fr auto auto 1fr; row-gap: 26px; }
.split.idea-last > .stack { grid-area: 2 / 1; }
.split.idea-last > .idea { grid-area: 3 / 1; }
.split.idea-last > .panel { grid-area: 1 / 2 / -1 / 3; }
.stack { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 26px; }
.stack.centre { justify-content: center; gap: 44px; }
.fill { flex: 1; min-height: 0; }

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 18px 22px 20px;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background: var(--viewer-bg);
  box-shadow: var(--card-shadow);
}
.panel-head { display: flex; align-items: center; gap: 12px; font: 600 24px var(--font-mono); letter-spacing: .1em; }
.panel-head span:first-child { margin-right: auto; }
.pill { color: var(--text-secondary); font-size: 20px; border: 1px solid var(--input-border); border-radius: 999px; padding: 4px 12px; }
.medical-illustration, .source-illustration { display: block; width: 100%; height: 330px; flex: none; object-fit: contain; background: #fff; border-radius: 12px; }
.source-illustration { height: 250px; margin-bottom: 14px; }
.exposure-panel { padding-bottom: 32px; }
.exposure-headings, .exposure-captions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; text-align: center; flex-shrink: 0; }
.exposure-headings h3 { margin: 0; }
.exposure-illustration { display: block; width: 100%; height: 0; min-height: 0; flex: 1; object-fit: cover; padding: 0 80px; background: #fff; border-radius: 16px; margin: 18px 0; }
.exposure-captions p { margin: 4px 0; font-size: 24px; line-height: 1.3; }
.fig { position: relative; flex: 1; min-height: 0; }
.fig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.panel .fig { margin: 8px 0; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.legend > span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 5px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--card-border); font-size: 24px; }
.legend i { font-style: normal; display: inline-grid; place-items: center; border-radius: 50%; width: 30px; height: 30px; font-size: 18px; font-weight: 800; color: #fff; }
.legend .proton { background: var(--proton); }
.legend .neutron { background: var(--neutron); }
.legend .electron { background: var(--electron); }
.legend .positive { background: var(--positive); }
.legend .alpha { background: var(--alpha); }
.legend .photon { background: var(--photon); }
.legend .undecayed { background: var(--undecayed); }
.legend .decayed { background: var(--decayed); }

.idea { border-left: 4px solid var(--brand-accent); border-radius: 0 16px 16px 0; padding: 16px 22px; background: var(--muted-bg); font-size: 29px; }
.idea b { color: var(--brand-accent-strong); }
.idea a { font-weight: 700; color: var(--brand-accent-strong); }
.try { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font: 700 25px var(--font-body); color: var(--brand-primary); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--brand-primary), transparent 60%); padding-bottom: 2px; }
.try:hover { border-bottom-color: var(--brand-primary); }

/* History slides are background stories, not exam content: a warm tint of the deck's
   orange sets them apart, and a small label says so. */
.slide.history { background-color: color-mix(in srgb, var(--brand-primary) 9%, var(--bg-color)); background-image: radial-gradient(color-mix(in srgb, var(--brand-primary) 16%, var(--bg-pattern)) 1.5px, transparent 1.5px); background-size: 36px 36px; }
/* Presenting fullscreen, the page around the slide takes the same tint, so the colour
   reaches the screen edges when the screen is not 16:9. */
body.is-fullscreen { transition: background-color .35s ease; }
body.is-fullscreen:has(#deck .slide.history.active) { background-color: color-mix(in srgb, var(--brand-primary) 9%, var(--bg-color)); background-image: radial-gradient(color-mix(in srgb, var(--brand-primary) 16%, var(--bg-pattern)) 1px, transparent 1px); }
.not-examined { position: absolute; top: 62px; right: 88px; margin: 0; padding: 5px 14px; border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, transparent); border-radius: 999px; font: 600 18px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }

/* Story slides: photographs of the scientists and their apparatus (images/) beside a short
   account. Photos sit to the left of the text, or in a row above it with .band. The
   credits line under the story links each photo to its source. */
.story { flex: 1; min-height: 0; display: grid; grid-template-columns: auto 1fr; gap: 50px; align-items: center; }
.story.band { grid-template-columns: 1fr; gap: 30px; align-content: center; }
.story-photos { display: flex; align-items: flex-start; gap: 20px; }
.story.band .story-photos { justify-content: center; gap: 30px; }
.story-photos figure { margin: 0; }
.story-photos img { display: block; width: auto; height: var(--photo-h, 360px); border-radius: 16px; border: 1px solid var(--card-border); box-shadow: var(--card-shadow); background: #fff; }
/* A caption wraps to its photo's width. */
/* --caption-min lets a caption under a narrow photo run wider than it. */
.story-photos figcaption { width: 0; min-width: max(100%, var(--caption-min, 0px)); margin-top: 12px; font-size: 24px; line-height: 1.3; color: var(--text-secondary); }
.story-photos figcaption b { color: var(--text-main); }
.story .points { gap: 18px; }
.story .points li { font-size: 30px; }
.story.band .points { grid-template-columns: repeat(3, 1fr); gap: 16px 36px; }
.story.band .points li { font-size: 28px; }
.story .stack { flex: none; }
.credits { margin: 12px 0 0; font-size: 16px; color: var(--text-secondary); }
.credits a { color: inherit; }

/* Cards and tables */
.cards { display: grid; gap: 22px; }
.cards.calc { align-content: center; align-items: stretch; } /* not the baseline of .calc below */
.cards.calc .card { min-height: 440px; }
.cards.calc h3 { font-size: 38px; }
.card { padding: 26px 28px; border: 1px solid var(--card-border); border-radius: 22px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.card .eyebrow { font-size: 22px; }
.card h3 { margin: 8px 0 10px; }
.card p { margin: 0; font-size: 28px; color: var(--text-secondary); line-height: 1.35; }

table.facts { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 28px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; overflow: hidden; box-shadow: var(--card-shadow); }
.facts th, .facts td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--card-border); vertical-align: middle; }
.facts tr:last-child td { border-bottom: 0; }
.facts thead th { background: var(--muted-bg); font: 600 22px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.facts td:first-child { font-weight: 800; }
.facts .icon-cell { display: flex; align-items: center; gap: 16px; }
.facts .icon-cell .fig { flex: none; width: 52px; height: 52px; }
.facts .num { font-family: var(--font-mono); font-weight: 600; }
table.facts.big { font-size: 34px; }
.facts.big td { padding: 26px 26px; }
table.facts.compare { table-layout: fixed; font-size: 30px; }
.facts.compare td { padding: 18px 24px; }
.facts.compare th:first-child { width: 22%; }
.facts.compare th:nth-child(2) { width: 22%; }
.facts.compare th:nth-child(3) { width: 25%; }
.facts.big thead th { font-size: 24px; padding: 20px 26px; }
.facts.big .icon-cell .fig { width: 68px; height: 68px; }

/* Nuclide notation, as in the nuclear decay sim */
.nuc { display: inline-flex; align-items: center; vertical-align: middle; font-weight: 700; font-family: var(--font-mono); }
/* Keeps a nuclide and its trailing punctuation together. */
.glue { display: inline-flex; align-items: center; }
/* Rows holding nuclides: centre text, arrows and symbols on one line. */
.eqrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .35em; }
.nuc .nums { display: inline-flex; flex-direction: column; align-items: flex-end; margin-right: 3px; font-size: .6em; line-height: 1.05; }
.nuc.alpha { color: var(--alpha); }
.nuc.electron { color: var(--electron); }
.nuc.gamma { color: var(--photon); }
.equation { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px 24px; border: 1px solid var(--card-border); border-radius: 20px; background: var(--card-bg); box-shadow: var(--card-shadow); font: 600 44px var(--font-mono); }
.equation .op { color: var(--text-secondary); font-weight: 400; }
.eq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.eq-row .idea { display: flex; align-items: center; gap: 12px; }
.calc { display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 2px; align-items: baseline; }
.calc > span:nth-child(even) { text-align: right; }
.calc-label { font: 600 .75em var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.idea .nuc { font-size: 1.25em; }
.facts .nuc { font-size: 1.3em; }
.eq-check { margin: 10px 0 0; text-align: center; font: 600 24px var(--font-mono); color: var(--text-secondary); }
.eq-check b { color: var(--brand-accent-strong); }

/* Title and section slides */
.slide.title { justify-content: center; }
.title-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; height: 100%; }
.title-grid .lead { margin-top: 30px; border-left: 4px solid var(--card-border); padding-left: 26px; }
.title-grid .fig { height: 700px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.chip { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card-bg); font: 600 24px var(--font-mono); letter-spacing: .06em; }
.chip.on { background: var(--brand-accent-strong); border-color: var(--brand-accent-strong); color: #fff; }
[data-theme="dark"] .chip.on { background: var(--brand-accent); border-color: var(--brand-accent); color: #0B1F1D; }
.slide.section { justify-content: center; }
.section h1 { font-size: 104px; }
.section .title-grid .fig { height: 620px; }
.section .lead { margin-top: 26px; max-width: 900px; }

/* Timeline */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 12%; right: 12%; top: 120px; height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); opacity: .5; }
.tl { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tl .fig { width: 240px; height: 240px; flex: none; padding: 14px; border-radius: 50%; background: var(--viewer-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.tl .year { margin-top: 20px; font: 600 24px var(--font-mono); color: var(--brand-primary); }
.tl h3 { font-size: 32px; margin: 6px 0 8px; }
.tl p { margin: 0; font-size: 26px; color: var(--text-secondary); line-height: 1.3; }

/* Observation → conclusion rows */
.obs { display: grid; gap: 16px; }
.obs-row { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 12px; }
.obs-row > div { padding: 16px 20px; border-radius: 16px; border: 1px solid var(--card-border); background: var(--card-bg); font-size: 28px; line-height: 1.25; }
.obs-row > div:first-child { border-left: 4px solid var(--alpha); }
.obs-row > div:last-child { border-left: 4px solid var(--brand-accent); }
.obs-row .to { font-size: 30px; color: var(--text-secondary); text-align: center; }
.obs-head { display: grid; grid-template-columns: 1fr 36px 1fr; gap: 12px; font: 600 22px var(--font-mono); letter-spacing: .12em; color: var(--text-secondary); }
.obs-head span:last-child { grid-column: 3; }

/* Quiz */
.quiz { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; align-content: start; }
.q { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px; border: 1px solid var(--card-border); border-radius: 20px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.q p { margin: 0; font-size: 29px; font-weight: 700; line-height: 1.3; }
.eqline { display: inline-flex; align-items: center; gap: 10px; }
.q .nuc { font-size: 1.1em; }
/* Nuclides inside running text: the symbol sits on the text baseline and the
   stacked numbers hang beside it without making the line taller. */
.nuc.in-text { display: inline; vertical-align: baseline; font-size: 1em; font-family: inherit; font-weight: 800; }
.nuc.in-text .nums { display: inline-block; vertical-align: -.24em; margin: -.2em 2px -.2em 0; text-align: right; font-family: var(--font-mono); font-size: .52em; line-height: .95; }
.nuc.in-text .nums > span { display: block; }
.q .n { display: inline-block; margin-right: 10px; font: 600 24px var(--font-mono); color: var(--brand-primary); }
.q .ans { margin-top: auto; padding: 10px 16px; border-radius: 12px; background: #E5F2EA; color: #2B5A3A; border: 1px solid #3F7A55; font-size: 27px; font-weight: 700; }
[data-theme="dark"] .q .ans { background: #183324; color: #BBF7D0; border-color: #4ADE80; }
.step { transition: opacity .3s ease, transform .3s ease; }
.step:not(.shown) { opacity: 0; transform: translateY(8px); }
.reveal-hint { font: 600 20px var(--font-mono); letter-spacing: .08em; color: var(--text-secondary); }

/* Summary */
/* Bottom margin keeps the last row of cards clear of the slide footer. */
.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
h2:has(+ .terms) { margin-bottom: 24px; }
.term { padding: 16px 20px; border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.term b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 32px; color: var(--brand-primary); }
.term span { display: block; font-size: 26px; color: var(--text-secondary); line-height: 1.3; position: relative; padding-left: 24px; }
.term span + span { margin-top: 4px; }
.term b + span { margin-top: 6px; }
/* Same dot as .points bullets, scaled to the card text. */
.term span::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent), transparent 80%); }

/* SVG styling */
.sym { fill: #fff; text-anchor: middle; dominant-baseline: central; font-family: var(--font-body); font-weight: 800; }
.lbl { font-family: var(--font-body); font-size: 25px; fill: var(--text-secondary); }
.lbl.mono { font-family: var(--font-mono); font-size: 22px; }
.lbl.small { font-size: 20px; }
.lbl.strong { font-weight: 700; fill: var(--text-main); }
.lbl.display { font-family: var(--font-display); font-size: 32px; fill: var(--text-main); }
.lbl.italic { font-style: italic; }
.halo { paint-order: stroke; stroke: var(--viewer-bg); stroke-width: 6px; stroke-linejoin: round; }
.lbl.greek { font-family: var(--font-display); font-size: 38px; }
.lbl.readout { font-family: var(--font-mono); font-size: 40px; font-weight: 600; fill: var(--text-main); }
.lbl.a, .big-num.a { fill: var(--brand-primary); }
.lbl.z, .big-num.z { fill: var(--brand-accent-strong); }
.big-symbol { font-family: var(--font-display); font-size: 230px; fill: var(--text-main); }
.big-num { font-family: var(--font-mono); font-size: 84px; font-weight: 600; }
.plus { fill: var(--positive); font-family: var(--font-body); font-weight: 800; dominant-baseline: central; opacity: .85; }
.orbit { fill: none; stroke: var(--text-secondary); stroke-opacity: .35; stroke-width: 1.8; }
.guide { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .7; }
.guide.accent { stroke: var(--brand-accent); stroke-width: 2.2; opacity: 1; }
.tick { stroke: var(--text-secondary); stroke-width: 2.5; }
.inset { fill: var(--card-bg); stroke: var(--card-border); stroke-width: 2; }
.depth { fill: #000; pointer-events: none; }
.changed { fill: none; stroke: var(--brand-accent); stroke-width: 3; }
.ghost { fill: none; stroke: var(--electron); stroke-width: 2; stroke-dasharray: 4 4; opacity: .7; }
.wave { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trail { stroke-width: 3; stroke-dasharray: 3 9; stroke-linecap: round; opacity: .7; }
.lane { stroke-width: 3; opacity: .35; }
.alpha-path { fill: none; stroke: var(--alpha); stroke-width: 2.5; opacity: .5; }
.alpha-path.deflect, .alpha-path.bounce { opacity: .95; }
.scatter-playing .scatter-static { display: none; }
.scatter-label { fill: var(--alpha); }
.detector { fill: none; stroke: var(--brand-accent); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; opacity: .8; }
.flow { fill: none; stroke: var(--brand-accent); stroke-width: 3; }
.node { fill: var(--card-bg); stroke: var(--card-border); stroke-width: 2; }
.node.hot { stroke: var(--brand-primary); stroke-width: 3; }
.cable { fill: none; stroke: var(--text-secondary); stroke-width: 3; }
.axis { stroke: var(--text-main); stroke-width: 2.5; }
.curve { fill: none; stroke: var(--undecayed); stroke-width: 5; stroke-linecap: round; }
.roller { fill: var(--muted-bg); stroke: var(--input-border); stroke-width: 2; }
.body { fill: var(--muted-bg); stroke: var(--input-border); stroke-width: 2; }
.body.edge { stroke: var(--text-secondary); stroke-width: 3; }
.stem { fill: none; stroke: #6B4F2A; stroke-width: 5; stroke-linecap: round; }
.divider { stroke: var(--card-border); stroke-width: 2; }
.slide.active .draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.4s ease forwards .3s; }
.slide.active .pulse { animation: pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wave-run { to { transform: translateX(var(--shift)); } }
@keyframes stream { 0% { transform: translateX(0); opacity: 1; } 95% { opacity: 1; } 100% { transform: translateX(var(--travel)); opacity: 0; } }
/* Where the moving streams play, the particles and waves drawn in place step aside. */
@media screen and (prefers-reduced-motion: no-preference) { #deck .still { display: none; } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .75; } }

/* Click-through figure builds (data-animate): each press of → shows the next stage of the
   process. Scoped to the live deck on screen, so thumbnails and print keep the finished diagram. */
@media screen {
  #deck svg .step { transition: opacity .4s ease; }
  #deck svg .step:not(.shown) { transform: none; }
  /* A particle travels from its source to where it is drawn. */
  #deck .fly { transition: transform 1.1s cubic-bezier(.2, .7, .3, 1) .25s; }
  #deck .step:not(.shown) .fly { transform: translate(var(--fx), var(--fy)); transition-delay: 0s; }
  /* Radiation and graph readings sweep in from the left. */
  #deck svg .wipe { clip-path: inset(-40px -40px -40px -40px); transition: opacity .4s ease, clip-path 1.1s ease-in-out; }
  #deck svg .wipe.late { transition-delay: .6s; }
  #deck svg .wipe.step:not(.shown), #deck svg .step:not(.shown) .wipe { clip-path: inset(-40px 100% -40px -40px); transition-delay: 0s; }
  /* An electron waits at its old energy level until the step that moves it. */
  #deck .hop { transition: transform .9s ease-in-out; }
  #deck .fig:not(:has(.k2.shown)) .until-k2, #deck .fig:not(:has(.k3.shown)) .until-k3 { transform: translate(var(--fx), var(--fy)); }
  #deck .fig:has(.k2.shown) .spent-k2 { opacity: .3; }
  /* Penetration: each stream sets off from the source when its step is shown. Particles
     leave one at a time; the gamma wave front runs out to the lead, then on beyond it. */
  #deck .slide.active .step.shown .stream-ball { animation: stream var(--time) linear var(--delay) infinite backwards; }
  #deck .slide.active .wave-run { animation: wave-run var(--time) linear infinite; }
  /* Let the browser move these on their own layers rather than repaint the figure each frame. */
  #deck .slide.active .wave-run, #deck .slide.active .step.shown .stream-ball { will-change: transform; }
  #deck .wave-window { transform-box: fill-box; transform-origin: left center; transition: transform var(--cross) linear var(--wait); }
  #deck .step:not(.shown) .wave-window { transform: scaleX(0); transition: none; }
  #deck .on-arrival { transition: opacity .3s ease var(--wait); }
  #deck .step:not(.shown) .on-arrival { opacity: 0; transition: none; }
  /* Alpha scattering close-up: a track appears with its observation row. */
  #deck .with-row { transition: opacity .4s ease; }
  #deck .slide:not(:has(.obs-row:nth-child(3).shown)) .with-row-1, #deck .slide:not(:has(.obs-row:nth-child(4).shown)) .with-row-2 { opacity: 0; }
  /* Fission and fusion: copies of the incoming particles run in (.absorb, .meet), the originals
     dim at once (.launched), the nucleus they hit fades (.spent-k1), then the products appear and fly out. */
  #deck .fig:has(.k1.shown) .absorb, #deck .fig:has(.k1.shown) .meet { animation: run-in .7s ease-in forwards; }
  #deck .spent-k1 { transition: opacity .3s ease .6s; }
  #deck .launched { transition: opacity .12s ease; }
  #deck .fig:has(.k1.shown) .spent-k1, #deck .fig:has(.k1.shown) .launched { opacity: .3; }
  #deck svg .step.after-absorb { transition: opacity .3s ease .62s; }
  #deck svg .step.after-absorb:not(.shown) { transition-delay: 0s; }
  #deck .after-absorb.shown .fly { transition-delay: .62s; }
}
/* The running copies are hidden everywhere else: thumbnails and print show the still picture. */
.absorb, .meet { opacity: 0; }
/* The copy fades as it enters the nucleus, so it never sits on top of it. */
@keyframes run-in { 0% { opacity: 1; transform: none; } 60% { opacity: 1; } 88% { opacity: 0; } 100% { opacity: 0; transform: translate(var(--fx), var(--fy)); } }
/* Thumbnails show a built figure complete. */
.thumb-slide svg .step:not(.shown) { opacity: 1; transform: none; }

.slide .uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.use .fig { height: 250px; margin-bottom: 14px; }
.use h3 { font-size: 40px; }
.use p { font-size: 26px; }

@media (prefers-reduced-motion: reduce) {
  .slide, .step, .progress span { transition: none; }
  .slide.active .draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .slide.active .pulse { animation: none; }
  #deck svg .step, #deck .fly, #deck svg .wipe, #deck .hop, #deck .with-row, #deck .on-arrival, #deck .spent-k1, #deck .launched { transition: none; }
  #deck .fig:has(.k1.shown) .absorb, #deck .fig:has(.k1.shown) .meet { animation: none; }
}

@media (max-width: 640px) {
  .banner { height: 56px; }
  .banner-title { font-size: 1.1rem; }
  .stage { top: calc(56px + var(--standalone-top)); }
}

/* Print or save as PDF: one slide per landscape page, all steps shown. */
@media print {
  @page { size: 1600px 900px; margin: 0; }
  html, body { height: auto; overflow: visible; background: var(--bg-color); }
  .banner, .controls, .progress, .thumbs { display: none !important; }
  .stage { position: static; }
  .deck { position: static; transform: none !important; width: 1600px; height: auto; border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: none; }
  .slide { position: relative; width: 1600px; height: 900px; visibility: visible; opacity: 1; break-after: page; background-color: var(--bg-color); background-image: radial-gradient(var(--bg-pattern) 1.5px, transparent 1.5px); background-size: 36px 36px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .step:not(.shown) { opacity: 1; transform: none; }
  .reveal-hint, .mover { display: none; }
  .scatter-playing .scatter-static { display: inline; }
  .scatter-playing .scatter-live { display: none; }
}