/* T2 deck theme: light, high-contrast, projector-friendly. System fonts only (works offline).
   Colours: ink for text, one blue accent for links and emphasis, warm orange for "caution" points. */
:root {
  --ink: #1d2733;
  --muted: #5b6776;
  --accent: #1f5f99;
  --caution: #b45309;
  --panel: #f2f5f8;
  --rule: #d8dee6;
  --bg: #ffffff;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.reveal-viewport { background: var(--bg); }
.reveal { font-family: var(--font); font-size: 30px; color: var(--ink); }

.reveal .slides section {
  box-sizing: border-box;
  height: 100%;
  padding: 30px 56px 62px;
  text-align: left;
}

.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--font);
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}
.reveal h1 { font-size: 2.3em; margin: 0 0 0.3em; }
.reveal h2 { font-size: 1.5em; margin: 0 0 0.55em; }
.reveal h3 { font-size: 1em; margin: 0 0 0.3em; }
.reveal p { margin: 0 0 0.6em; line-height: 1.4; }
.reveal ul { display: block; margin: 0 0 0 1.1em; }
.reveal li { line-height: 1.4; }
.reveal li + li { margin-top: 0.45em; }
.reveal li ul { margin-top: 0.3em; font-size: 0.9em; }
.reveal ul + p, .reveal .cols + p { margin-top: 0.9em; }
.reveal a { color: var(--accent); }
/* reveal's reset.css flattens sub/sup; restore them (line-height 0 keeps line spacing even). */
.reveal sub, .reveal sup { font-size: 0.7em; line-height: 0; position: relative; }
.reveal sub { vertical-align: sub; }
.reveal sup { vertical-align: super; }
.reveal b, .reveal strong { font-weight: 700; }
.reveal .hl { color: var(--accent); font-weight: 700; }
.reveal .caution { color: var(--caution); font-weight: 700; }
.reveal .muted { color: var(--muted); }
.reveal .small { font-size: 0.78em; }
.reveal .cite { color: var(--muted); font-size: 0.8em; white-space: nowrap; }

/* Title and section-divider slides: content sits in a vertically centred column. */
.reveal .center-col { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.reveal .kicker { font-size: 0.62em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4em; }
/* Exercise problem slides: the qMRLab logo and the course name above the kicker. */
.reveal .brand { display: flex; align-items: center; gap: 0.45em; margin-bottom: 0.7em; font-size: 0.78em; font-weight: 700; }
.reveal .brand img { height: 1.5em; width: auto; margin: 0; }
.reveal .subtitle { font-size: 1.05em; color: var(--muted); }
.reveal .byline { font-size: 0.66em; color: var(--muted); margin-top: 2.2em; }
.reveal section.divider h1 { font-size: 2.2em; }
.reveal section.divider .subtitle { max-width: 34em; }

/* Equations */
.reveal .eq { margin: 0.5em 0; font-size: 1.1em; }
.reveal .eq-note { font-size: 0.78em; color: var(--muted); }
.reveal .eq-box { background: var(--panel); border-radius: 10px; padding: 0.35em 0.8em; margin: 0.4em 0 0.7em; }
.reveal .katex-display { margin: 0.35em 0; }
.reveal .eq-small { font-size: 0.72em; margin: 0.6em 0 0.9em; }

/* Two columns */
.reveal .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.reveal .cols > * { min-width: 0; }

/* Cards (the chapter's three topics) */
.reveal .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 0.4em; }
.reveal .card { background: var(--panel); border-radius: 12px; padding: 22px 24px; font-size: 0.8em; border-top: 6px solid var(--card); }
.reveal .card h3 { font-size: 1.45em; margin-bottom: 0.5em; }
.reveal .card p { margin-bottom: 0.5em; }
.reveal .card.mono { --card: #0072b2; }
.reveal .card.multi { --card: #e69f00; }
.reveal .card.t2star { --card: #009e73; }
.reveal .card.mwf { --card: #cc79a7; }

/* Images (pulse sequences) */
.reveal .pulse img { display: block; margin: 0.8em auto 0; max-width: 100%; max-height: 470px; }
.reveal .caption { font-size: 0.72em; color: var(--muted); text-align: center; margin-top: 0.8em; }

/* Book figures: the host fills the space under the title; deck.js scales the figure to fit. */
/* Reveal sets an inline display on <section>, so the column layout lives on an inner wrapper. */
.reveal section.figure { padding-top: 16px; padding-bottom: 48px; }
.reveal .fig-layout { height: 100%; display: flex; flex-direction: column; }
.reveal section.figure h2 { font-size: 1.15em; margin-bottom: 0.3em; flex: none; }
.reveal .fig-hint { flex: none; }
/* Square figures: title and hint in a left column so the figure can use the full slide height. */
.reveal section.figure.side .fig-layout { display: grid; grid-template-columns: 300px 1fr; grid-template-rows: auto 1fr; column-gap: 32px; }
.reveal section.figure.side h2 { grid-column: 1; grid-row: 1; margin-top: 0.6em; }
.reveal section.figure.side .fig-hint { grid-column: 1; grid-row: 2; text-align: left; font-size: 0.6em; }
.reveal section.figure.side .side-text { grid-column: 1; grid-row: 2; font-size: 0.62em; }
.reveal section.figure.side .side-text .fig-hint { font-size: 0.9em; margin-top: 0.8em; }
.reveal section.figure.side .side-text li + li { margin-top: 0.6em; }
.reveal section.figure.side .fig-host { grid-column: 2; grid-row: 1 / span 2; }
.reveal .fig-host { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.reveal .fig-frame { position: relative; flex: none; }
.reveal .fig-plot { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.reveal .fig-hint { font-size: 0.55em; color: var(--muted); text-align: center; margin: 0.2em 0 0; }
.reveal .fig-fallback { align-self: center; background: var(--panel); border-radius: 10px; padding: 1em 1.4em; font-size: 0.75em; }

/* Link back to the book: same place on every slide. */
.reveal .book-link {
  position: absolute;
  left: 56px;
  bottom: 18px;
  font-size: 17px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.reveal .book-link:hover, .reveal .book-link:focus-visible { color: var(--accent); }
.reveal .home-link {
  position: absolute; left: 56px; bottom: 16px; font-size: 15px; color: var(--muted); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 999px; padding: 2px 12px; background: var(--bg);
}
.reveal .home-link:hover, .reveal .home-link:focus-visible { color: var(--accent); border-color: var(--accent); }
.reveal .pop-out {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 40;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--panel);
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--rule);
}
.reveal .pop-out:hover, .reveal .pop-out:focus-visible { background: var(--bg); }
.reveal .slide-number { font-family: var(--font); background: transparent; color: var(--muted); font-size: 15px; right: 18px; bottom: 14px; }
.reveal .controls { color: var(--accent); }
.reveal .progress { color: var(--accent); }

/* ---------------------------------------------------------------- Exercise slides */
/* Question and controls on the left, a book or computed figure on the right. */
.reveal section.ex { padding-top: 22px; padding-bottom: 50px; }
.reveal .ex-layout { height: 100%; display: flex; flex-direction: column; }
.reveal .ex-layout > h2 { flex: none; font-size: 1.15em; margin-bottom: 0.4em; }
.reveal .ex-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 0.85fr 1.15fr; column-gap: 36px; }
.reveal .ex-cols > * { min-width: 0; min-height: 0; }
/* Book figures are wide (e.g. 600 × 350): give them more of the slide. */
.reveal .ex-cols:has(> .fig-host) { grid-template-columns: 0.7fr 1.3fr; }
.reveal .ex-text { font-size: 0.7em; }
.reveal .ex-text p { margin-bottom: 0.5em; }
.reveal .ex-cols .fig-host, .reveal .result-host { height: 100%; display: flex; justify-content: center; align-items: flex-start; }
.reveal .question { background: var(--panel); border-left: 6px solid var(--accent); border-radius: 6px; padding: 0.45em 0.8em; margin: 0 0 0.7em; }
.reveal .question b:first-child { color: var(--accent); }
.reveal .answer { background: #eef6ef; border-left: 6px solid #2e7d32; border-radius: 6px; padding: 0.45em 0.8em; margin: 0.6em 0 0; }
.reveal .footnote { font-size: 0.78em; color: var(--muted); margin-top: 0.6em; }
.reveal .problem ol { list-style: none; margin: 0; padding: 0; }
.reveal .problem li { font-size: 0.8em; }
.reveal .problem li + li { margin-top: 0.55em; }
.reveal .problem.long p, .reveal .problem.long li { font-size: 0.66em; }
.reveal table.measure { border-collapse: collapse; margin: 0.2em 0 0.6em; }
.reveal table.measure th, .reveal table.measure td { padding: 0.18em 0.6em; border-bottom: 1px solid var(--rule); text-align: right; }
.reveal table.measure th:first-child, .reveal table.measure td:first-child { text-align: left; white-space: nowrap; }
.reveal table.measure th { font-size: 0.85em; color: var(--muted); font-weight: 600; }
.reveal input[data-key] { font: inherit; width: 4.6em; padding: 1px 6px; border: 1px solid #9aa7b5; border-radius: 4px; text-align: right; background: #fffdf3; }
.reveal input[data-key].list { width: 13em; text-align: left; }
.reveal input[data-key].list.short { width: 10.5em; }
.reveal .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.3em 0 0.5em; }
.reveal .btn-row button { font: inherit; font-size: 0.85em; padding: 0.2em 0.75em; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.reveal .btn-row button.secondary { background: #fff; color: var(--accent); }
.reveal .btn-row button:disabled { opacity: 0.4; cursor: default; }
.reveal .btn-row button:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.reveal .result { min-height: 1.3em; line-height: 1.4; }
.reveal .result.error { color: var(--caution); font-weight: 600; }
.reveal .result table.measure { font-size: 0.92em; }
.reveal .result table.measure td + td { white-space: nowrap; }
.reveal ul.answer { margin-left: 0; padding-left: 1.7em; }
.reveal ul.answer li + li { margin-top: 0.3em; }
/* Invisible step: lets → (or a clicker) trigger a Solve. */
.reveal .fragment.step { display: block; height: 0; overflow: hidden; }

.reveal .ex-cols.even { grid-template-columns: 1fr 1fr; }
/* Problem N: the 3D view of the magnetization (js/exn.js). */
.reveal .bloch-host { height: 100%; display: flex; flex-direction: column; align-items: center; }
.reveal canvas.bloch { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100% - 1.4em); aspect-ratio: 1040 / 1000; cursor: grab; }
.reveal .bloch-host .game-hint { margin: 0; }
.reveal .game-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 380px; column-gap: 24px; }
.reveal .game-cols > * { min-width: 0; }
.reveal .game-cols canvas { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 8px; }
.reveal .game-cols .btn-row { align-items: center; margin-top: 0; }
.reveal .game-status { font-size: 0.6em; font-weight: 700; margin-left: 0.6em; }
.reveal .game-spins .panel-label select { font: inherit; text-transform: none; letter-spacing: 0; margin-left: 0.4em; }
.reveal .game-spins > .panel-label { display: flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.reveal .game-spins .fan-pick { display: inline-flex; align-items: center; gap: 0.3em; margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.reveal .game-spins select.game-view { width: 7.5em; margin-left: 0.2em; }
.reveal .game-spins select.game-fan { width: 8.5em; margin-left: 0; }
.reveal .game-spins canvas { cursor: grab; touch-action: none; }
.reveal .game-hint { font-size: 0.5em; margin-top: 0.3em; }
/* slide 2 of part 2 makes room for its settings box under the spins */
.reveal section.echo-game .game-3d { width: 86%; margin: 0 auto; }
.reveal .settings-box { font-size: 0.42em; background: var(--panel); border-radius: 8px; padding: 0.5em 0.7em; margin-top: 0.4em; }
.reveal .settings-box p { margin: 0 0 0.3em; line-height: 1.35; }
.reveal .settings-box table { border-collapse: collapse; width: 100%; }
.reveal .settings-box td { padding: 0.1em 0.4em 0.1em 0; vertical-align: top; }
.reveal .settings-box td:first-child { font-weight: 700; white-space: nowrap; }
.reveal .game-top { display: flex; align-items: baseline; gap: 0.6em; min-height: 1.6em; margin-bottom: 0.2em; }
.reveal .game-top .game-status { margin-left: 0; }
.reveal .game-prompt { font-size: 0.62em; font-weight: 700; color: var(--accent); margin: 0; }
.reveal .play-row { margin: 0 0 0.3em; }
.reveal .fit-hint { font-size: 0.85em; background: #fff7e0; border-left: 4px solid #e8b100; padding: 0.4em 0.7em; border-radius: 4px; }
.reveal .fit-hint p { margin: 0; }
.reveal .fit-hint p + p { margin-top: 0.4em; }
.reveal .b1-note { font-size: 0.62em; margin: -0.3em 0 0.4em; }
.reveal .game-cols .panel-label { font-size: 0.5em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0.25em 0 0.15em; }
.reveal .fit-result { font-size: 1em; }
.reveal .fit-result .big { font-size: 1.6em; font-weight: 700; }

/* The list of worked solutions (exercises decks). */
.reveal .exercise-list li { font-size: 0.9em; }
.reveal .exercise-list a { text-decoration: none; }
.reveal .exercise-list + p { margin-top: 1.6em; }
/* A table laid out across (Exercise 3): tighter columns. */
.reveal table.measure.wide { font-size: 0.82em; }
/* A table of inputs in several columns (Exercise 2c): narrower boxes. */
.reveal table.measure.compact input[data-key] { width: 2.9em; }
.reveal table.measure.compact th, .reveal table.measure.compact td { padding: 0.18em 0.3em; }
.reveal table.measure.wide th, .reveal table.measure.wide td { padding: 0.18em 0.35em; }

/* Problem N, part 1: the echo labs, the imperfect-180° bars, and the starting page's cards. */
.reveal .lab-intro { font-size: 0.6em; margin: -0.3em 0 0.3em; }
.reveal .c-se { color: #2e8b3a; }
.reveal .c-ste { color: #8e44ad; }
.reveal .c-both { color: #b9770e; }
.reveal .c-se-bg { background: #2e8b3a; }
.reveal .c-ste-bg { background: #8e44ad; }
.reveal .c-none-bg { background: #aab4bf; }
.reveal .imp-controls { display: flex; gap: 24px; align-items: center; font-size: 0.5em; margin: -0.1em 0 0.3em; }
.reveal .imp-controls label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.reveal .imp-bars { flex: 1; display: grid; gap: 3px; }
.reveal .imp-bar { display: grid; grid-template-columns: 17em 1fr 3em; align-items: center; gap: 8px; }
.reveal .imp-track { height: 0.9em; background: var(--panel); border-radius: 4px; overflow: hidden; }
.reveal .imp-fill { display: block; height: 100%; width: 0; transition: width 0.15s; }
.reveal table.apart { font-size: 0.62em; }
.reveal table.apart td:first-child { font-weight: 700; white-space: nowrap; }
.reveal .cards.two { grid-template-columns: 1fr 1fr; margin-top: 1.2em; }
.reveal a.card { display: block; color: inherit; text-decoration: none; transition: transform 0.1s, box-shadow 0.1s; }
.reveal a.card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.reveal .card .card-tag { font-size: 0.8em; font-style: italic; color: var(--muted); margin: -0.3em 0 0.6em; }
.reveal .nav-tip { font-size: 0.62em; color: var(--muted); margin-top: 1.4em; max-width: 46em; }

/* Problem N: "What we saw" slides after each example, and the lessons at the end of each part. */
.reveal section.lesson h2 { color: var(--accent); max-width: 30em; }
.reveal section.lesson ul, .reveal section.lesson ol { font-size: 1em; max-width: 34em; margin-top: 0.6em; }
.reveal section.lesson li + li { margin-top: 0.55em; }
.reveal section.summary-lessons ol { font-size: 0.9em; list-style: none; margin-left: 0; padding-left: 0; counter-reset: lesson; }
/* the numbers line up with the kicker and heading above; the text hangs to their right */
.reveal section.summary-lessons ol > li { position: relative; padding-left: 1.6em; counter-increment: lesson; }
.reveal section.summary-lessons ol > li::before { content: counter(lesson) "."; position: absolute; left: 0; }
.reveal ol.intro-plan { display: block; list-style: decimal outside; font-size: 0.95em; color: var(--muted); margin: 0 0 0.9em 1.4em; }
.reveal ol.intro-plan li + li { margin-top: 0.3em; }
.reveal ol.intro-plan.alpha { list-style: lower-alpha outside; color: var(--ink); font-size: 0.85em; }
.reveal ol.intro-plan.alpha li::marker { content: counter(list-item, lower-alpha) ")  "; }
.reveal .ex-text .game-prompt { font-size: 0.95em; margin-bottom: 0.4em; }
.reveal .lab-intro + .imp-controls, .reveal .game-prompt + .lab-intro { margin-top: 0.1em; }

/* Problem N: the sandbox's controls and results line. */
.reveal .sandbox-controls { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.5em; margin: -0.3em 0 0.4em; align-items: center; }
.reveal .sandbox-controls label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.reveal .sandbox-controls input[type="number"] { width: 4.2em; font: inherit; }
.reveal .sandbox-controls input[type="range"] { width: 7em; }
.reveal .sandbox-controls select { font: inherit; }
.reveal .sandbox-results { font-size: 0.5em; min-height: 1.4em; margin: -0.2em 0 0.1em; }

/* Problem N: the arrow keys on screen (js/exn.js). A held key lights up in the B1 orange. Scale with font-size. */
.reveal .arrow-keys { display: inline-grid; grid-template-columns: repeat(3, 2.6em); grid-template-rows: repeat(2, 2.6em); gap: 0.25em; }
.reveal .arrow-keys .ak { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: var(--panel); border: 1px solid #c9d1da; border-radius: 0.35em; box-shadow: 0 0.14em 0 #b4bec9; color: var(--ink);
  transition: background 0.06s, color 0.06s, transform 0.06s, box-shadow 0.06s; }
.reveal .arrow-keys .ak[data-key="ArrowUp"] { grid-column: 2; grid-row: 1; }
.reveal .arrow-keys .ak[data-key="ArrowLeft"] { grid-column: 1; grid-row: 2; }
.reveal .arrow-keys .ak[data-key="ArrowDown"] { grid-column: 2; grid-row: 2; }
.reveal .arrow-keys .ak[data-key="ArrowRight"] { grid-column: 3; grid-row: 2; }
.reveal .arrow-keys .ak b { font-size: 1.1em; }
.reveal .arrow-keys .ak small { font-size: 0.6em; color: var(--muted); margin-top: 0.2em; }
.reveal .arrow-keys .ak.down { background: #e8770e; border-color: #c25f00; color: #fff; transform: translateY(0.12em); box-shadow: 0 0.02em 0 #c25f00; }
.reveal .arrow-keys .ak.down small { color: #fff; }
.reveal .arrow-keys.no-axes .ak small { display: none; }
.reveal .keys-row { display: flex; align-items: center; gap: 1.6em; }
.reveal .target-score { margin: 0; line-height: 1.4; }
.reveal .level-pick { display: inline-flex; align-items: center; gap: 0.3em; margin-right: 0.6em; }
.reveal .level-pick button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.reveal .c-fast { color: #b2182b; }
.reveal .c-slow { color: #2166ac; }
.reveal .fan-flip { display: flex; align-items: center; gap: 0.5em; margin: 0.2em 0 0.4em; }
.reveal .fan-flip input { width: 12em; }
.reveal .b1map-host { display: flex; justify-content: center; align-items: flex-start; }
/* The game's symbols, in the text (Exercise 2-1's single echo, Exercise 2-3's refresher). */
.reveal .sym-box { display: inline-block; min-width: 1.5em; padding: 0 0.2em; text-align: center; line-height: 1.25; color: #999; font-weight: 400;
  border: 2px dashed #c0392b; background: rgba(192, 57, 43, 0.07); border-radius: 2px; }
.reveal .sym-hit { display: inline-block; min-width: 1.5em; padding: 0 0.2em; text-align: center; line-height: 1.25; border: 2px solid #2e8b3a; background: #e8f3e8; }
.reveal .sym-bar { display: inline-block; width: 0.3em; height: 1.1em; vertical-align: -0.15em; }
.reveal .c-ref { color: #c0392b; }
.reveal ol.how-to { font-size: 0.6em; margin: -0.2em 0 0.2em 1.2em; }
.reveal ol.how-to li { margin-bottom: 0.15em; }
.reveal .how-tip { font-size: 0.6em; background: #fdf1ef; border-left: 4px solid #c0392b; padding: 0.2em 0.6em; margin: 0 0 0.3em; }
.reveal .single-result { font-size: 0.6em; }
.reveal table.symbols { font-size: 0.62em; border-collapse: collapse; }
.reveal table.symbols td { padding: 0.35em 0.6em; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.reveal table.symbols td:first-child { text-align: center; white-space: nowrap; font-weight: 700; }
.reveal .sym-acq { color: #2e8b3a; font-size: 0.8em; border-bottom: 2px dashed #2e8b3a; }
.reveal .sym-now { display: inline-block; width: 3px; height: 1.3em; background: #1d2733; vertical-align: -0.25em; }
.reveal .refresher-keys { display: flex; flex-direction: column; align-items: center; gap: 0.5em; font-size: 0.62em; }
.reveal .refresher-keys .arrow-keys { font-size: 1.6em; }
.reveal .play-demo { display: inline-block; padding: 0.2em 0.75em; border-radius: 6px; background: var(--accent); color: #fff; font-size: 1.1em; }
.reveal section.single-echo .game-top .game-status:empty { display: none; }
.reveal table.b1-levels { width: 100%; font-size: 1.5em; margin-top: 0.5em; }
.reveal table.b1-levels td, .reveal table.b1-levels th { text-align: center; padding: 0.3em 0.8em; }

/* Full-height zones at the left and right edges replace Reveal's corner arrows (js/nav.js). */
.nav-zones .reveal .controls { display: none !important; }  /* Reveal sets display inline */
.nav-zone { position: fixed; top: 0; bottom: 0; width: 72px; z-index: 40; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: transparent; border: 0; padding: 0; color: transparent; font-size: 72px; font-weight: 300; line-height: 1; transition: background 0.15s, color 0.15s; }
.nav-zone.prev { left: 0; }
.nav-zone.next { right: 0; }
.nav-zone:hover, .nav-zone:focus-visible { background: rgba(91, 103, 118, 0.14); color: rgba(29, 39, 51, 0.75); outline: none; }
.nav-zone[hidden] { display: none; }
@media print { .nav-zone { display: none; } }

/* Exercise 2-4: the echo image to click, its echo slider, and the data credit (CC BY 4.0). */
.reveal .echo-col { display: flex; flex-direction: column; align-items: center; min-height: 0; }
.reveal canvas.echo-image { width: auto; height: auto; max-width: 100%; max-height: 72%; aspect-ratio: 1; cursor: crosshair; border-radius: 4px; }
.reveal .echo-pick { display: flex; align-items: center; gap: 0.5em; font-size: 0.55em; margin-top: 0.4em; }
.reveal .echo-pick input { width: 16em; }
.reveal .t2-plots { display: flex; justify-content: center; align-items: flex-start; }
.reveal .data-credit { font-size: 0.4em; color: var(--muted); margin-top: 0.5em; }
.reveal .data-credit a { color: inherit; }
.reveal section.mwf-map .how-to { font-size: 0.55em; }
.reveal section.mwf-map .how-to .katex-display { display: inline-block; margin: 0 0.3em; }
.reveal .mwf-left, .reveal .mwf-right { display: flex; flex-direction: column; align-items: center; min-height: 0; }
.reveal .mwf-left p { font-size: 0.5em; margin: 0; }
.reveal .mwf-map-host { width: 440px; height: 310px; display: flex; align-items: center; justify-content: center; margin-top: 0.3em; }
.reveal .mwf-map-host:not(.drawn) { border: 2px dashed var(--rule); border-radius: 8px; color: var(--muted); font-size: 0.55em; }
.reveal .mwf-map-host.drawn { border: 0; }

/* Lecture slide "T2 and T2*": the text, and the precession animation (js/relax.js). */
.reveal .relax-cols { grid-template-columns: 0.8fr 1.2fr; gap: 30px; }
.reveal .relax-text h3 { font-size: 0.95em; margin: 0.2em 0 0.3em; }
.reveal .relax-text p { font-size: 0.85em; }
.reveal .relax-text ul.small { font-size: 0.7em; margin-bottom: 0.4em; }
.reveal .relax-anim { display: flex; flex-direction: column; align-items: center; }
.reveal .relax-anim canvas { display: block; width: 100%; height: auto; }
.reveal canvas.relax-3d { cursor: grab; }
.reveal .relax-controls { display: flex; align-items: center; gap: 0.8em; font-size: 0.55em; margin: 0.1em 0 0.2em; }
.reveal .relax-controls button { font: inherit; padding: 0.2em 0.8em; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.reveal .relax-controls label { display: inline-flex; align-items: center; gap: 0.3em; cursor: pointer; }
.reveal .relax-readout { color: var(--muted); min-width: 11em; }
.reveal .relax-hint { font-size: 0.45em; color: var(--muted); margin: -0.4em 0 0.2em; }

/* Lecture slide "Why map T2?": a T2-weighted image beside the T2 map (js/t2wmap.js). */
.reveal ul.tight { font-size: 0.85em; }
.reveal ul.tight li + li { margin-top: 0.25em; }
.reveal .t2w-pair { display: flex; justify-content: center; gap: 40px; margin-top: 0.5em; }
.reveal .t2w-pair figure { margin: 0; width: 380px; }
.reveal .t2w-pair figcaption { font-size: 0.5em; line-height: 1.35; margin-top: 0.3em; }
.reveal section.t2w-vs-map .relax-hint { margin-top: 0.6em; text-align: center; }

/* Lecture slide "T2-weighted imaging vs T2 mapping": the simulated spin echo (js/t2wsim.js) beside the book's Figure 3.1. */
.reveal .t2w-cols { grid-template-columns: 0.85fr 1.15fr; gap: 30px; }
.reveal .t2w-cols h3 { font-size: 0.9em; margin: 0 0 0.25em; }
.reveal .t2w-cols ul.small { font-size: 0.62em; margin-bottom: 0.3em; }
.reveal .t2w-controls { font-size: 0.5em; display: grid; gap: 0.2em; }
.reveal .t2w-controls label { display: flex; align-items: center; gap: 0.5em; }
.reveal .t2w-controls input { width: 14em; }
.reveal .t2w-controls p { margin: 0; display: flex; align-items: center; gap: 0.8em; }
.reveal .t2w-reset { font: inherit; font-size: 0.9em; padding: 0.1em 0.6em; border-radius: 6px; border: 1px solid var(--accent); background: #fff; color: var(--accent); cursor: pointer; }
.reveal .t2w-view { display: flex; justify-content: center; align-items: stretch; gap: 14px; margin: 0.2em 0 0.5em; }
.reveal .t2w-sim { display: flex; justify-content: center; }
.reveal .t2w-win { display: flex; flex-direction: column; align-items: center; gap: 0.3em; font-size: 0.45em; color: var(--muted); }
.reveal .t2w-win input { writing-mode: vertical-lr; direction: rtl; flex: 1; width: 1.6em; }  /* top = 1, bottom = 0.02 */
.reveal .t2w-win b { color: var(--ink); }
.reveal .t2map-fig { height: 400px; }
.reveal section.t2w-proto .relax-hint { margin: 0.4em 0 0; }

/* Lecture slide "Acquiring a decay curve": a decay curve sampled at one TE, or at many. */
.reveal .decay-row { display: grid; grid-template-columns: repeat(3, 290px); gap: 40px; justify-content: center; margin: 0.15em 0 0 -1.1em; }
.reveal .decay-row figure { margin: 0; }
.reveal .decay-row figcaption { font-size: 0.5em; color: var(--muted); text-align: center; margin-top: 0.25em; }
.reveal svg.decay-svg { display: block; width: 290px; height: auto; }
.reveal .decay-row.one { grid-template-columns: 370px; margin-top: 0.1em; }
.reveal .decay-row.one svg.decay-svg { width: 370px; }
.reveal svg.decay-svg .axis { stroke: #9aa5b1; stroke-width: 2; }
.reveal svg.decay-svg .axis-label { fill: var(--muted); font-size: 24px; font-style: italic; }
.reveal svg.decay-svg .decay { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.reveal svg.decay-svg .te-arrow { stroke: var(--accent); stroke-width: 3; }
.reveal svg.decay-svg .te-head { fill: var(--accent); }
.reveal svg.decay-svg .dim { stroke: var(--ink); stroke-width: 2; }
.reveal svg.decay-svg .dim-head { fill: var(--ink); }
.reveal svg.decay-svg .dim-label { fill: var(--ink); font-size: 24px; font-weight: 700; }
.reveal svg.decay-svg .te-guide { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.6; }
.reveal svg.decay-svg .te-dot { fill: var(--accent); }
.reveal p.footnote { font-size: 0.55em; color: var(--muted); margin-top: 1.4em; }
.reveal .eq-box.tight { padding: 0.15em 0.8em; margin: 0.25em 0 0.45em; font-size: 0.9em; }

/* Lecture slide "From a decay to a T2 distribution": a schematic two-component decay and its distribution. */
.reveal svg.t2dist-svg { display: block; width: 820px; height: auto; margin: 0.3em auto 0; }
.reveal svg.t2dist-svg .ax { stroke: #9aa5b1; stroke-width: 2; }
.reveal svg.t2dist-svg .lab, .reveal svg.t2dist-svg .tick { fill: var(--muted); font-size: 18px; }
.reveal svg.t2dist-svg .cap { fill: var(--muted); font-size: 20px; }
.reveal svg.t2dist-svg .sum, .reveal svg.t2dist-svg .dist { fill: none; stroke: var(--ink); stroke-width: 3; }
.reveal svg.t2dist-svg .pt { fill: var(--ink); }
.reveal svg.t2dist-svg .area { fill: rgba(31, 95, 153, 0.15); }
.reveal svg.t2dist-svg .mw-line { fill: none; stroke: #a8538a; stroke-width: 2; stroke-dasharray: 6 5; }
.reveal svg.t2dist-svg .iew-line { fill: none; stroke: #b9770e; stroke-width: 2; stroke-dasharray: 6 5; }
.reveal svg.t2dist-svg .mw-box { fill: rgba(204, 121, 167, 0.22); stroke: #a8538a; stroke-width: 1.5; }
.reveal svg.t2dist-svg .iew-box { fill: rgba(230, 159, 0, 0.2); stroke: #b9770e; stroke-width: 1.5; }
.reveal svg.t2dist-svg .tag { font-size: 20px; font-weight: 700; }
.reveal svg.t2dist-svg .tag.mw { fill: #a8538a; }
.reveal svg.t2dist-svg .tag.iew { fill: #b9770e; }
.reveal svg.t2dist-svg .arrow-lab { fill: var(--muted); font-size: 44px; }

/* Lecture deck: where class stops for an interactive exercise (a link in the top-right corner, new tab). */
.reveal .pause-badges { position: absolute; top: 6px; right: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.reveal a.pause-badge { font-size: 15px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 3px 12px; text-decoration: none; }
.reveal a.pause-badge:hover { filter: brightness(1.1); }

/* Exercise 2-4, "Two components in one voxel": the draggable arrows and the fit by hand (js/biexp.js). */
.reveal section.biexp .ex-cols { grid-template-columns: 0.8fr 1.2fr; }
.reveal .biexp-controls { font-size: 0.55em; display: flex; flex-direction: column; gap: 0.45em; }
.reveal .biexp-controls label { display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; }
.reveal .bx-name { font-weight: 700; }
.reveal .biexp-err { margin: 0.3em 0 0; font-size: 1.1em; }
.reveal .bx-good { color: #2e8b3a; font-weight: 700; }
.reveal .bx-ok { color: #b9770e; font-weight: 700; }
.reveal .bx-far { color: var(--muted); }
.reveal .bx-log { font-size: 1em; margin-left: 0.6em; }
.reveal .biexp-mono, .reveal .biexp-answer { margin: 0; line-height: 1.35; }
.reveal .biexp-answer { background: var(--panel); border-radius: 6px; padding: 0.3em 0.5em; }
.reveal .biexp-plot { display: flex; justify-content: center; }
.reveal svg.biexp-t2 { width: 100%; height: auto; user-select: none; }
.reveal svg.biexp-t2 .grid { stroke: #e6eaef; stroke-width: 1; }
.reveal svg.biexp-t2 .axis { stroke: #9aa5b1; stroke-width: 2; }
.reveal svg.biexp-t2 .tick { fill: #5b6776; font-size: 15px; }
.reveal svg.biexp-t2 .lab { fill: #5b6776; font-size: 17px; }
.reveal svg.biexp-t2 .arrow-lab { font-size: 16px; font-weight: 700; }
.reveal svg.biexp-t2 .handle:focus { outline: none; }
.reveal .bx-hint { margin: -0.3em 0 0; }
.reveal .mwf-readout { font-size: 0.5em; margin: 0.2em 0 0; min-height: 1.3em; }
.reveal .mwf-score { font-size: 0.5em; margin: 0.1em 0 0; min-height: 1.3em; }
.reveal .mwf-left p.mwf-diff-note { font-size: 0.45em; color: var(--muted); margin: 0.1em 0 0; max-width: 34em; line-height: 1.3; }
.reveal .mwf-tabs { display: flex; margin: 0.3em 0 0; font-size: 0.5em; }
.reveal .mwf-tabs button { font: inherit; padding: 0.25em 0.9em; border: 1px solid var(--accent); background: #fff; color: var(--accent); cursor: pointer; }
.reveal .mwf-tabs button + button { border-left: 0; }
.reveal .mwf-tabs button:first-child { border-radius: 6px 0 0 6px; }
.reveal .mwf-tabs button:last-child { border-radius: 0 6px 6px 0; }
.reveal .mwf-tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.reveal .mwf-tabs button:disabled { opacity: 0.4; cursor: default; }
.reveal .mwf-tabs button:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.reveal .mwf-right .btn-row { margin-bottom: 0; }
.reveal .mwf-right .btn-row button { font-size: 0.6em; }
.reveal .game-prompt.mwf-q { font-size: 0.55em; margin: -0.1em 0 0.2em; }