@import url('/assets/fonts/fonts.css');
/* Figtree: deck body text, open and light enough to read across a classroom. It has no Greek,
   so Manrope stays next in --font-body and supplies those letters. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-normal-300-900-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-normal-300-900-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Shared styles for the IB DP Physics decks (adapted from gcsephy/decks/atoms-and-radiation).
   Particle colors match simulations/atomic_models and simulations/nuclear_decay; the deck's
   own colors come from one palette (slate #2C4654, teal #4F9C8F, sage #96B083, sand #E2C678,
   apricot #E8A66C, terracotta #D87759), deepened where text needs the contrast. Terracotta is
   kept for additional higher level content. */
: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: #4A4540;
  --brand-primary: #2B7A70;
  --brand-accent: #E8A66C;
  --brand-accent-strong: #2C4654;
  --sage: #96B083;
  --sand: #E2C678;
  --bar-teal: #2B7A70;
  --on-bar-teal: #fff;
  --bar-slate: #2C4654;
  --on-bar-slate: #fff;
  --bar-apricot: #E8A66C;
  --on-bar-apricot: #1F3340;
  --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: #2B7A70;
  --electron: #1675BB;
  --positive: #B7791F;
  --proton: #D45132;
  --neutron: #657481;
  --alpha: #B5179E;
  --photon: #7C3AED;
  --undecayed: #D45132;
  --decayed: #9DB4B0;
  --paper: #EFE6CF;
  --aluminum: #AEB9C4;
  --lead: #4A5360;
  --gold: #C9A227;
  --solid: #9A948C;
  --object: #6E9F45;
  --hl: #CC5F41;
  --hl-ink: #fff;
  --hl-text: #B5492C;
  --spectrum-bg: #0B0B10;
  --thumb-w: 184px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: #111110;
  --bg-pattern: #1A1A18;
  --text-main: #EDEBE8;
  --text-secondary: #C0BCB4;
  --brand-primary: #7CC8BB;
  --brand-accent: #E8A66C;
  --brand-accent-strong: #E2C678;
  --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: #7CC8BB;
  --electron: #4BA3E3;
  --positive: #E0A445;
  --proton: #EF6A48;
  --neutron: #8C9AA6;
  --alpha: #E879F9;
  --photon: #A78BFA;
  --undecayed: #EF6A48;
  --decayed: #3F5A57;
  --paper: #D9CFB4;
  --aluminum: #8E9AA6;
  --lead: #5B6573;
  --gold: #E0B84A;
  --solid: #8A857D;
  --object: #7DB356;
  --bar-teal: #2F8377;
  --bar-slate: #456A7C;
  --hl: #E58A6C;
  --hl-ink: #2A0F08;
  --hl-text: #F0997C;
  --spectrum-bg: #000;
}

* { 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, #2C4654, #4F9C8F, #96B083, #E2C678, #E8A66C, #D87759); transition: width .3s ease; }

/* Revision-note pane colors (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 18px var(--font-mono);
  letter-spacing: .1em;
  color: var(--text-secondary);
  opacity: .8;
}

/* Typography */
.eyebrow { margin: 0; font: 700 24px var(--font-body); letter-spacing: .08em; 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%); }
/* A one-line point with a tall fraction: the dot sits level with the text, not at the top of the line. */
.points li.frac::before { top: 50%; margin-top: -10px; }
.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; }

/* Additional higher level. A slide with class "hl" carries a terracotta edge, an "HL only"
   flag in its top corner and a terracotta footer, and its thumbnail is tagged too, so HL content
   cannot be mistaken for standard level. .hl-tag marks one HL item on a mixed slide. */
.slide.hl::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: var(--hl); }
.slide.hl::after { content: "HL only"; position: absolute; top: 0; right: 88px; padding: 18px 24px 12px; border-radius: 0 0 16px 16px; background: var(--hl); color: var(--hl-ink); font: 700 24px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
/* Presenting fullscreen on a screen that is not 16:9 leaves a margin round the slide. There
   the bar and flag are drawn on the page instead, so they still reach the screen edges: the
   bar runs the full height of the screen's left edge and the flag hangs from its top edge. */
body.is-fullscreen #deck .slide.hl::before, body.is-fullscreen #deck .slide.hl::after { display: none; }
body.is-fullscreen:has(#deck .slide.hl.active)::before { content: ""; position: fixed; z-index: 25; left: 0; top: 0; bottom: 0; width: calc(16px * var(--deck-scale, 1)); background: var(--hl); }
body.is-fullscreen:has(#deck .slide.hl.active)::after { content: "HL only"; position: fixed; z-index: 25; top: 0; right: calc(var(--deck-gap-x, 0px) + 88px * var(--deck-scale, 1)); padding: calc(18px * var(--deck-scale, 1)) calc(24px * var(--deck-scale, 1)) calc(12px * var(--deck-scale, 1)); border-radius: 0 0 calc(16px * var(--deck-scale, 1)) calc(16px * var(--deck-scale, 1)); background: var(--hl); color: var(--hl-ink); font: 700 calc(24px * var(--deck-scale, 1)) var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.slide.hl .eyebrow { color: var(--hl-text); }
.slide.hl h1 span, .slide.hl h2 span { color: var(--hl-text); }
.slide.hl .slide-foot { color: var(--hl-text); opacity: 1; }
.hl-tag, .sl-tag { display: inline-block; vertical-align: .16em; margin: 0 4px; padding: 2px 12px; border-radius: 999px; font: 700 .58em var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.hl-tag { background: var(--hl); color: var(--hl-ink); }
.sl-tag { border: 2px solid var(--brand-primary); color: var(--brand-primary); }
.thumb.hl .thumb-num::after { content: "HL"; display: block; margin-top: 4px; padding: 1px 0; border-radius: 4px; background: var(--hl); color: var(--hl-ink); font: 700 10px var(--font-mono); text-align: center; }
.thumb.hl .thumb-frame { border-color: color-mix(in srgb, var(--hl) 55%, var(--card-border)); }
.card.hl { border-color: var(--hl); border-width: 2px; }
.card.hl .eyebrow { color: var(--hl-text); }
.term.hl { border-color: var(--hl); }
.term.hl b { color: var(--hl-text); }
.term.hl b::after { content: "HL"; margin-left: 10px; padding: 1px 9px; border-radius: 999px; background: var(--hl); color: var(--hl-ink); font: 700 15px var(--font-mono); letter-spacing: .1em; vertical-align: .3em; }

/* Mathematics is LaTeX typeset by MathJax (see deck-math.js). \class{res}{…} marks a result. */
.slide sup, .slide sub, .notes sup, .notes sub { font-size: .64em; line-height: 0; }
mjx-container .res { fill: var(--brand-primary); stroke: var(--brand-primary); }
/* Particles in nuclear equations: \class{alpha}{…}, \class{electron}{…}, \class{gamma}{…}. */
mjx-container .alpha { fill: var(--alpha); stroke: var(--alpha); }
mjx-container .electron { fill: var(--electron); stroke: var(--electron); }
mjx-container .gamma { fill: var(--photon); stroke: var(--photon); }
.slide.hl mjx-container .res { fill: var(--hl-text); stroke: var(--hl-text); }
.equation.small { font-size: 36px; }
.eq-note { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: stretch; }
.eq-note .idea { align-self: center; }
.equation.left { justify-content: flex-start; }
.equation .where { margin-left: 26px; font: 500 24px var(--font-body); color: var(--text-secondary); }
.work { display: grid; gap: 22px; margin: 0; padding: 22px 26px; border: 1px solid var(--card-border); border-radius: 20px; background: var(--card-bg); box-shadow: var(--card-shadow); font: 500 29px/1.5 var(--font-body); }
.work > span { display: block; white-space: nowrap; }
.work .say { font: 600 24px var(--font-mono); letter-spacing: .02em; color: var(--text-secondary); }
.work .say mjx-container { font-size: 109%; }
.work b { color: var(--brand-primary); }
.slide.hl .work b { color: var(--hl-text); }

/* Layouts */
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: .86fr 1.26fr; gap: 48px; align-items: center; }
.split.wide-fig { grid-template-columns: .76fr 1.38fr; }
.split.even { grid-template-columns: 1fr 1fr; }
/* A figure that is played before the text beside it is revealed comes first in the page
   but still sits on the right. */
.split.fig-first > :first-child { grid-column: 2; grid-row: 1; }
.split.fig-first > :last-child { grid-column: 1; grid-row: 1; }
/* 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.center { 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: 700 24px var(--font-body); letter-spacing: .03em; }
.panel-head span:first-child { margin-right: auto; }
/* Each heading item stays on one line; when they do not fit, the hint drops to a second row. */
.panel-head { flex-wrap: wrap; row-gap: 6px; }
.panel-head > span { white-space: nowrap; }
.panel-head > span:last-child:not(:first-child) { margin-left: auto; }
.pill { color: var(--text-secondary); font-size: 24px; border: 1px solid var(--input-border); border-radius: 999px; padding: 4px 12px; letter-spacing: .02em; }
.fig { position: relative; flex: 1; min-height: 0; }
.fig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Math typeset in the labels of a 3D model keeps MathJax's own size and sits in the line. */
.fig .model3d mjx-container svg { position: static; inset: auto; width: auto; height: auto; display: inline-block; }
.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: 20px; 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 assessed content: a tint of the deck's
   teal 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 color
   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: 56px; right: 88px; margin: 0; padding: 3px 14px; border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, transparent); border-radius: 999px; font: 700 20px var(--font-body); letter-spacing: .05em; 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. */
/* On an HL slide the label sits below the "HL only" flag. */
.slide.hl .not-examined { right: 292px; } /* beside the HL flag */
.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. */
.story-photos figcaption { width: 0; min-width: 100%; margin-top: 12px; font-size: 24px; line-height: 1.3; color: var(--text-secondary); }
.story-photos figcaption b { color: var(--text-main); }
/* A wide, shallow picture (a photographed spectrum) set above the text. */
.story-strip { margin: 0; }
.story-strip img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.story-strip figcaption { margin-top: 10px; font-size: 24px; line-height: 1.3; color: var(--text-secondary); }
.story-strip 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: 14px; color: var(--text-secondary); }
.credits a { color: inherit; }

/* Cards and tables */
.cards { display: grid; gap: 22px; }
.cards.calc { align-content: center; }
.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: 24px; }
.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: 700 24px var(--font-body); letter-spacing: .06em; 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; }

/* Keeps a nuclide and its trailing punctuation together. */
.glue { display: inline-flex; align-items: center; }
/* Rows holding nuclides: center text, arrows and symbols on one line. */
.eqrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .35em; }
.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 .62em var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.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: 700 24px var(--font-body); letter-spacing: .02em; }
.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; }
.chip.hl { background: var(--hl); border-color: var(--hl); color: var(--hl-ink); }
.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: 700 24px var(--font-body); letter-spacing: .06em; color: var(--text-secondary); }
.obs-head span:last-child { grid-column: 3; }

/* Quiz */
/* Three rows of two-line questions have to end clear of the slide footer. */
.quiz { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; align-content: start; }
.q { display: flex; flex-direction: column; gap: 10px; padding: 17px 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 .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: #E9F0E2; color: #33502A; border: 1px solid #7C9A69; font-size: 27px; font-weight: 700; }
[data-theme="dark"] .q .ans { background: #1F2A1B; color: #CFE2C2; border-color: #96B083; }
.step { transition: opacity .3s ease, transform .3s ease; }
.step:not(.shown) { opacity: 0; transform: translateY(8px); }
.reveal-hint { font: 700 24px var(--font-body); letter-spacing: .05em; 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: 28px; fill: var(--text-secondary); }
.lbl.mono { font-family: var(--font-mono); font-size: 26px; }
.lbl.small { font-size: 24px; }
.lbl.strong { font-weight: 700; fill: var(--text-main); }
.lbl.display { font-family: var(--font-display); font-size: 35px; 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; }
.level { stroke: var(--text-main); stroke-width: 4; stroke-linecap: round; }
.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; }
.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; } }
/* A figure drawn in three dimensions (D.3's hand) replaces its flat picture on screen even with reduced motion. */
@media screen { #deck .fig:has(.hand3d, .disks3d, .model3d) .still { display: none; } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .75; } }
/* A sphere falling through a fluid (A.2): position and speed at steps of the fall, for a speed
   that rises as 1 − e^(−t/τ) with τ = 0.9 s over a 5 s fall. */
@keyframes sink { 0% { transform: translateY(calc(var(--drop) * 0.000)); } 5% { transform: translateY(calc(var(--drop) * 0.008)); } 10% { transform: translateY(calc(var(--drop) * 0.028)); } 15% { transform: translateY(calc(var(--drop) * 0.059)); } 20% { transform: translateY(calc(var(--drop) * 0.097)); } 30% { transform: translateY(calc(var(--drop) * 0.188)); } 40% { transform: translateY(calc(var(--drop) * 0.292)); } 50% { transform: translateY(calc(var(--drop) * 0.404)); } 60% { transform: translateY(calc(var(--drop) * 0.520)); } 80% { transform: translateY(calc(var(--drop) * 0.758)); } 100% { transform: translateY(calc(var(--drop) * 1.000)); } }
@keyframes speed-grow { 0% { transform: scaleY(0.000); } 5% { transform: scaleY(0.243); } 10% { transform: scaleY(0.426); } 15% { transform: scaleY(0.565); } 20% { transform: scaleY(0.671); } 30% { transform: scaleY(0.811); } 40% { transform: scaleY(0.892); } 50% { transform: scaleY(0.938); } 60% { transform: scaleY(0.964); } 80% { transform: scaleY(0.988); } 100% { transform: scaleY(0.996); } }
@keyframes speed-head { 0% { transform: translateY(calc(var(--len) * 1.000)); } 5% { transform: translateY(calc(var(--len) * 0.757)); } 10% { transform: translateY(calc(var(--len) * 0.574)); } 15% { transform: translateY(calc(var(--len) * 0.435)); } 20% { transform: translateY(calc(var(--len) * 0.329)); } 30% { transform: translateY(calc(var(--len) * 0.189)); } 40% { transform: translateY(calc(var(--len) * 0.108)); } 50% { transform: translateY(calc(var(--len) * 0.062)); } 60% { transform: translateY(calc(var(--len) * 0.036)); } 80% { transform: translateY(calc(var(--len) * 0.012)); } 100% { transform: translateY(calc(var(--len) * 0.004)); } }
@keyframes trace-run { to { clip-path: inset(-20px -20px -20px -20px); } }
@keyframes dot-run { to { transform: translateX(0); } }
@keyframes body-approach { from { transform: translate(var(--x0), var(--y0, 0px)); } to { transform: translate(var(--x1), var(--y1, 0px)); } }
@keyframes body-depart { from { transform: translate(var(--x1), var(--y1, 0px)); } to { transform: none; } }

/* 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; }
  /* Collisions (A.2): each body waits at its starting place. When step k2 is shown it slides
     to the point of contact and straight on to where it is drawn, without a pause (--t1 and
     --t2 are the times of the two parts). What is written above a body before the collision
     (.pre) changes to what is written after it (.post) at the moment of contact, so a body
     is never without its label. */
  #deck .cbody { transform: translate(var(--x0), var(--y0, 0px)); }
  #deck .fig:has(.k2.shown) .cbody { transform: none; animation: body-approach var(--t1, 1.3s) linear, body-depart var(--t2, 1.3s) linear var(--t1, 1.3s); }
  #deck .fig:has(.k2.shown) .mover .pre { opacity: 0; transition: opacity .2s ease var(--t1, 1.3s); }
  #deck .fig:not(:has(.k2.shown)) .mover .post { opacity: 0; }
  #deck .fig:has(.k2.shown) .mover .post { transition: opacity .2s ease var(--t1, 1.3s); }
  /* Terminal velocity (A.2): when step k2 is shown the sphere is released. It sinks, speeding up
     and then steady, while the arrows that depend on its speed (drag and velocity) grow with it:
     .grow is an arrow's shaft and .grow-head its head, --len the arrow's full length. Beside it
     the speed–time curve (.trace) is uncovered from the left at a steady rate, led by a dot
     (.trace-dot, --span the width of the graph) that rises with the same speed. */
  #deck .mover .grow { transform: scaleY(0); }
  #deck .mover .grow-head { transform: translateY(var(--len)); }
  #deck .mover .with-speed { opacity: 0; }
  #deck .mover .trace { clip-path: inset(-20px 100% -20px -20px); }
  #deck .mover .trace-dot { transform: translateX(calc(var(--span) * -1)); }
  #deck .fig:has(.k2.shown) .sinker { animation: sink 5s linear forwards; }
  #deck .fig:has(.k2.shown) .mover .grow { animation: speed-grow 5s linear forwards; }
  #deck .fig:has(.k2.shown) .mover .grow-head { animation: speed-head 5s linear forwards; }
  #deck .fig:has(.k2.shown) .mover .with-speed { opacity: 1; transition: opacity .25s ease .1s; }
  #deck .fig:has(.k2.shown) .mover .trace { animation: trace-run 5s linear forwards; }
  #deck .fig:has(.k2.shown) .mover .trace-dot { animation: dot-run 5s linear forwards; }
  /* 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; }
  /* Random decay: each nucleus changes at its own moment. */
  #deck .pop { transition: opacity .25s ease var(--d); }
  #deck .step:not(.shown) .pop { opacity: 0; transition-delay: 0s; }
  /* 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; }
}
/* 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 .pop, #deck .with-row, #deck .on-arrival { transition: none; }
  .panel-head .reveal-hint { display: 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; }
}

/* A landscape phone gives the slide the whole screen: no banner, and slim controls in the side margins. */
@media screen and (orientation: landscape) and (max-height: 500px) {
  body:not(.is-fullscreen) .banner, body:not(.is-fullscreen) .progress { display: none; }
  body:not(.is-fullscreen) .stage { top: var(--standalone-top); bottom: var(--vv-bottom, 0px); left: 0; }
  body:not(.is-fullscreen) .controls { left: max(6px, env(safe-area-inset-left)); top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; gap: 4px; padding: 4px; }
  body:not(.is-fullscreen) .controls button { width: 40px; height: 40px; }
  body:not(.is-fullscreen) .controls .counter { min-width: 0; font-size: 12px; line-height: 1.2; text-align: center; }
  body:not(.is-fullscreen) .notes { right: max(6px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); }
  body:not(.is-fullscreen) .notes-toggle { min-height: 40px; padding: 0 9px; }
  body:not(.is-fullscreen) .notes-toggle :is(.notes-label, .notes-chevron) { display: none; }
  body:not(.is-fullscreen) .notes .notes-body { left: calc(max(6px, env(safe-area-inset-left)) + 58px); right: calc(max(6px, env(safe-area-inset-right)) + 58px); bottom: max(8px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 16px - var(--standalone-top, 0px)); padding: 12px 18px 14px; }
}

/* Copyright line on the title slide */
.slide-copyright { position: absolute; right: 88px; bottom: 28px; margin: 0; font: 600 15px var(--font-mono); letter-spacing: .06em; color: var(--text-secondary); opacity: .8; }

/* Keep a typeset quantity and its plain-text unit on the same line. */
.equation-inline { white-space: nowrap; }