@font-face { font-family: "Patrick Hand SC"; src: url("fonts/PatrickHandSC-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Patrick Hand"; src: url("fonts/PatrickHand-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Courier Prime"; src: url("fonts/CourierPrime-Regular.ttf") format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "Courier Prime"; src: url("fonts/CourierPrime-Bold.ttf") format("truetype"); font-weight: 700; font-display: block; }

:root {
  --paper: #fcfbf7;
  --wash: #eef2fb;
  --ink: #1e3a8a;
  --ink-2: #3f5a9e;
  --rule: #dbe2f1;
  --rule-mid: #a9b8dc;
  --red: #c62828;
  --red-ink: #b71c1c;
  --pencil: #687083;
  --hand-sc: "Patrick Hand SC", "Patrick Hand", "Marker Felt", cursive;
  --hand: "Patrick Hand", "Marker Felt", cursive;
  --typed: "Courier Prime", "Courier New", monospace;
  --line: 2rem;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { font-size: 18px; }
@media (min-width: 1800px) { html { font-size: 21px; } }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: linear-gradient(to bottom, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line), transparent var(--line));
  background-size: 100% var(--line);
  color: var(--ink);
  font-family: var(--hand);
  font-size: 1.25rem;
  line-height: 1.45;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  caret-color: var(--red);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--rule-mid); border: 3px solid var(--paper); border-radius: 6px; }
* { scrollbar-color: var(--rule-mid) var(--paper); }
a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--hand-sc); font-weight: 400; margin: 0; letter-spacing: 0.01em; text-wrap: balance; -webkit-text-stroke: 0.035em currentColor; paint-order: stroke fill; }
.track .t, .list li .t, .score-row .q, .masthead nav a, .btn, .rule-head .total { -webkit-text-stroke: 0.02em currentColor; }
svg.icon { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; flex: none; }

/* ---------- masthead ---------- */
.card { min-width: 0; display: flex; flex-direction: column; }
.masthead {
  display: flex; align-items: center; gap: 2rem;
  padding: 0 2.25rem; height: 4.5rem;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  position: sticky; top: 0; z-index: 5;
}
.masthead nav { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.masthead nav a {
  font-family: var(--hand-sc); font-size: 1.3rem; text-decoration: none; padding: 0.2rem 0;
  border-bottom: 2.5px solid transparent;
  transition: border-color 160ms var(--ease);
}
.masthead nav a:hover { border-bottom-color: var(--rule-mid); }
.masthead nav a[aria-current="page"] { border-bottom-color: var(--red); }
.masthead .right { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.modes { display: flex; border: 1.5px solid var(--ink); }
.modes button {
  background: none; border: 0; padding: 0.3rem 0.8rem; cursor: pointer; white-space: nowrap;
  font-family: var(--hand-sc); font-size: 1.1rem; color: var(--ink);
}
.modes button + button { border-left: 1.5px solid var(--ink); }
.modes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.modes button:disabled { color: var(--pencil); cursor: not-allowed; }
.counter { font-family: var(--typed); font-size: 1.2rem; font-weight: 700; display: flex; align-items: baseline; gap: 0.4rem; font-variant-numeric: tabular-nums; min-width: 3.5rem; justify-content: flex-end; }
.counter small { font-size: 0.85rem; font-weight: 400; color: var(--ink-2); }
.counter.over { color: var(--red-ink); }
.position { height: 4px; background: transparent; position: sticky; top: 4.5rem; z-index: 4; }
.position span { display: block; height: 100%; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform 250ms linear; }

main { padding: 2rem 2.25rem 4rem; min-width: 0; }

/* ---------- shared bits ---------- */
.rule-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 2.5px solid var(--ink); padding-bottom: 0.15rem; margin-bottom: 0.6rem; }
.rule-head h2 { font-size: 1.8rem; }
.rule-head .total { font-family: var(--hand-sc); font-size: 1.55rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--hand-sc); font-size: 1.35rem; line-height: 1;
  padding: 0.65rem 1.3rem; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  cursor: pointer; text-decoration: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: var(--wash); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: #172f73; }
.btn.warn { border-color: var(--red); color: var(--red-ink); }
.btn:disabled { color: var(--pencil); border-color: var(--rule-mid); background: var(--paper); cursor: not-allowed; }
.tag { display: inline-block; font-family: var(--hand-sc); font-size: 1.05rem; line-height: 1; padding: 0.3rem 0.55rem 0.25rem; border: 1.5px solid var(--ink); }
.tag.red { border-color: var(--red); color: var(--red-ink); }
.tag.solid { background: var(--ink); color: var(--paper); }
.note { color: var(--ink-2); font-size: 1.2rem; }
.typed { font-family: var(--typed); font-size: 1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
pre.typed { margin: 0.35rem 0 0; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--rule-mid); background: #fff; padding: 0.6rem 0.8rem; }
.margin-note {
  font-family: var(--hand); color: var(--red-ink); font-size: 1.35rem; line-height: 1.3;
  border: 1.5px solid var(--red); padding: 0.55rem 0.8rem; background: var(--paper); margin: 0 0 1.2rem; max-width: 46rem;
}
.margin-note b { font-family: var(--hand-sc); font-weight: 400; }
.field { display: grid; gap: 0.25rem; }
.field label { font-family: var(--hand-sc); font-size: 1.15rem; }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--ink); background: #fff; padding: 0.45rem 0.6rem; font-family: var(--hand); font-size: 1.2rem; border-radius: 0;
}
.field textarea { font-family: var(--typed); font-size: 0.95rem; }
.field input::placeholder { color: var(--pencil); }

/* ---------- cover ---------- */
.cover { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: center; min-height: calc(100vh - 9rem); }
.cover h1 { font-size: 5.4rem; line-height: 0.98; }
.cover .underline { height: 4px; background: var(--ink); margin: 1.1rem 0 1.3rem; max-width: 40rem; }
.cover .lede { font-family: var(--hand-sc); font-size: 1.75rem; line-height: 1.35; max-width: 38rem; margin: 0 0 2rem; }
.cover .actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.cover .facts { margin-top: 2.6rem; border-top: 1.5px solid var(--ink); padding-top: 0.8rem; max-width: 40rem; }
.cover .facts p { margin: 0 0 0.4rem; }
.list { list-style: none; margin: 0 0 2rem; padding: 0; }
.panel { border: 1.5px solid var(--ink); background: var(--paper); padding: 1rem 1.4rem 0.4rem; }
.list li.plain { grid-template-columns: 1fr; }
.list li.plain .d { grid-column: 1; }
.list li { display: grid; grid-template-columns: 2.3rem 1fr auto; align-items: baseline; gap: 0.5rem; min-height: var(--line); padding: 0.15rem 0; border-bottom: 1px solid var(--rule-mid); }
.list li .n { font-family: var(--hand-sc); color: var(--ink-2); }
.list li .t { font-family: var(--hand-sc); font-size: 1.3rem; }
.list li .d { color: var(--ink-2); font-size: 1.15rem; grid-column: 2 / 4; margin-top: -0.2rem; }

/* ---------- tracks ---------- */
.deck { display: grid; grid-template-columns: minmax(27rem, 0.5fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.deck > * { min-width: 0; }
.ask .memory { overflow-wrap: anywhere; }
.tapelist { position: sticky; top: 6.5rem; perspective: 1200px; border: 1.5px solid var(--ink); background: var(--paper); padding: 1rem 1.1rem 1.2rem; }
.side-face .track { background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat; background-position: 2.55rem 0; background-size: 1px 100%; }
.playing { border: 1.5px solid var(--ink); background: var(--paper); padding: 1.4rem 1.8rem 1.8rem; min-height: 60vh; }
.sides { display: flex; gap: 0; margin-bottom: 0.9rem; border: 1.5px solid var(--ink); width: fit-content; }
.sides button { background: none; border: 0; cursor: pointer; padding: 0.3rem 1rem; font-family: var(--hand-sc); font-size: 1.2rem; display: flex; gap: 0.4rem; align-items: center; }
.sides button + button { border-left: 1.5px solid var(--ink); }
.sides button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.side-face { transform-origin: 50% 50%; transition: transform 220ms var(--ease), opacity 220ms var(--ease); }
.side-face.turning { transform: rotateY(90deg); opacity: 0.2; }
.track {
  display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.6rem; align-items: baseline;
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--rule-mid);
  text-align: left; padding: 0.3rem 0.4rem; cursor: pointer; color: var(--ink);
  transition: background-color 160ms var(--ease);
}
.track:hover { background-color: var(--wash); }
.track .n { font-family: var(--hand-sc); font-size: 1.15rem; color: var(--ink-2); }
.track .t { font-family: var(--hand-sc); font-size: 1.32rem; line-height: 1.2; }
.track .time { font-family: var(--hand-sc); font-size: 1.2rem; }
.track .sub { grid-column: 2 / 4; font-size: 1.05rem; color: var(--pencil); }
.track[aria-current="true"] { background-color: var(--wash); }
.track[aria-current="true"] .n { color: var(--red-ink); }
.track:disabled { cursor: not-allowed; }
.track:disabled .t, .track:disabled .time { color: var(--pencil); }
.hidden-track { margin-top: 1.4rem; }
.hidden-track .gap { font-family: var(--typed); font-size: 1rem; color: var(--ink-2); text-align: center; margin-bottom: 0.3rem; }
.budget { display: flex; justify-content: space-between; font-family: var(--hand-sc); font-size: 1.2rem; margin-top: 0.7rem; color: var(--ink-2); }
.ask { margin-top: 1.8rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.ask form { display: flex; gap: 0.5rem; }
.ask input { flex: 1; min-width: 0; border: 1.5px solid var(--ink); background: #fff; padding: 0.5rem 0.65rem; font-family: var(--hand); font-size: 1.25rem; border-radius: 0; }
.ask .memory { font-size: 1.1rem; color: var(--ink-2); display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: baseline; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; color: var(--ink); font-family: var(--hand); font-size: 1.1rem; }

.playing h1 { font-size: 3rem; line-height: 1.08; }
.playing .rule3 { height: 3px; background: var(--ink); margin: 0.75rem 0 0.6rem; }
.meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin-bottom: 1.4rem; font-size: 1.1rem; color: var(--ink-2); }
.dry-note { color: var(--red-ink); font-size: 1.2rem; margin: -0.6rem 0 1.2rem; max-width: 52rem; }
.empty { padding: 3rem 0; max-width: 40rem; }
.empty h1 { font-size: 3.4rem; }
.empty p { font-size: 1.45rem; }

.steps { list-style: none; margin: 0 0 1.8rem; padding: 0; counter-reset: step; }
.steps li { border-bottom: 1px solid var(--rule-mid); padding: 0.45rem 0 0.55rem; animation: ink 340ms var(--ease) both; }
.steps .line { display: grid; grid-template-columns: 2rem auto 1fr; gap: 0.6rem; align-items: baseline; }
.steps .num { font-family: var(--hand-sc); color: var(--ink-2); }
.steps .tool { font-family: var(--typed); font-weight: 700; font-size: 1rem; }
.steps .sum { font-size: 1.15rem; }
.steps .err .sum, .steps .err .tool { color: var(--red-ink); }
.steps details.q { margin-left: 2.6rem; }
.steps details.q summary { cursor: pointer; font-family: var(--typed); font-size: 1rem; color: var(--ink-2); list-style: none; width: fit-content; text-decoration: underline; text-underline-offset: 0.2em; }
.steps details.q summary::-webkit-details-marker { display: none; }
.steps details.q[open] summary { display: none; }
.steps .writing { color: var(--ink-2); font-size: 1.15rem; animation: none; }
.steps .writing::after { content: ""; display: inline-block; width: 0.55em; height: 1.05em; margin-left: 0.2em; background: var(--red); vertical-align: -0.15em; animation: caret 1s steps(2) infinite; }
@keyframes ink { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes caret { 50% { opacity: 0; } }

.answer { font-size: 1.5rem; line-height: 1.45; max-width: 58rem; }
.answer p { margin: 0 0 0.7rem; }
.answer ul { margin: 0 0 0.8rem; padding-left: 1.4rem; }
.answer li { margin-bottom: 0.25rem; }
.answer li::marker { color: var(--red); }
.answer code { font-family: var(--typed); font-size: 0.8em; }
.section { margin: 2rem 0 0.6rem; }
.section h2 { font-size: 1.8rem; border-bottom: 2.5px solid var(--ink); padding-bottom: 0.1rem; }
figure.chart { margin: 1.2rem 0 0; max-width: 62rem; }
figure.chart img { width: 100%; display: block; border: 1px solid var(--rule-mid); }
figure.chart figcaption { font-size: 1.1rem; color: var(--ink-2); margin-top: 0.3rem; }
.notes { list-style: none; padding: 0; margin: 0.6rem 0 0; counter-reset: note; max-width: 62rem; }
.notes li { counter-increment: note; margin-bottom: 0.9rem; }
.notes li .lab { font-family: var(--typed); font-size: 1rem; display: flex; gap: 0.5rem; }
.notes li .lab::before { content: "[" counter(note) "]"; color: var(--red-ink); font-weight: 700; }
.foot { margin-top: 1.4rem; font-family: var(--typed); font-size: 1rem; color: var(--ink-2); }
.slip { border: 1.5px solid var(--red); color: var(--red-ink); padding: 0.7rem 0.9rem; font-size: 1.25rem; max-width: 52rem; }
.slip b { font-family: var(--hand-sc); font-weight: 400; }

/* ---------- what changed ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.two > div, .two > section { border: 1.5px solid var(--ink); background: var(--paper); padding: 1rem 1.4rem 1.2rem; }
.comp { margin-top: 2rem; border: 1.5px solid var(--ink); background: var(--paper); padding: 1rem 1.4rem 1.2rem; }
label.btn { cursor: pointer; }
.btn[aria-disabled="true"] { color: var(--pencil); border-color: var(--rule-mid); background: var(--paper); cursor: not-allowed; pointer-events: none; }
details.fold .two > div { padding: 0.8rem 1rem; }
.page-title { font-size: 3.6rem; line-height: 1; margin-bottom: 0.4rem; }
.page-lede { font-size: 1.45rem; max-width: 52rem; margin: 0 0 2rem; }
.req { display: grid; grid-template-columns: 2rem 1fr 7rem 3rem; gap: 0.6rem; align-items: baseline; border-bottom: 1px solid var(--rule-mid); padding: 0.2rem 0.3rem; min-height: var(--line); }
.req .t { font-size: 1.25rem; }
.req .c, .req .p { font-family: var(--hand-sc); font-size: 1.1rem; color: var(--ink-2); }
.req svg { color: var(--ink); }
details.fold { margin-top: 1.4rem; border-top: 1.5px solid var(--ink); padding-top: 0.6rem; }
details.fold summary { cursor: pointer; font-family: var(--hand-sc); font-size: 1.45rem; list-style: none; display: flex; gap: 0.5rem; align-items: center; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold .fold-ic { color: var(--red-ink); }
details.fold[open] .fold-ic .v { display: none; }
details.fold .two { margin-top: 0.8rem; }
details.fold pre { max-height: 32rem; overflow: auto; }

/* ---------- tools / briefing / scorecard ---------- */
.controls { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: end; margin: 0.8rem 0 1rem; }
.runs { list-style: none; padding: 0; margin: 0.6rem 0; }
.runs li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.7rem; align-items: center; border-bottom: 1px solid var(--rule-mid); padding: 0.3rem 0; font-size: 1.2rem; }
.mag { height: 0.32rem; background: var(--red-ink); justify-self: start; }
.mag.high { background: var(--ink); }
table.ruled { border-collapse: collapse; width: 100%; max-width: 62rem; font-size: 1.15rem; }
table.ruled th { font-family: var(--hand-sc); font-weight: 400; text-align: left; border-bottom: 2.5px solid var(--ink); padding: 0.25rem 0.5rem; font-size: 1.15rem; }
table.ruled { background: var(--paper); }
table.ruled td { border-bottom: 1px solid var(--rule-mid); padding: 0.3rem 0.5rem; vertical-align: baseline; }
table.ruled td.num { font-family: var(--typed); font-variant-numeric: tabular-nums; text-align: right; font-size: 1rem; white-space: nowrap; }
table.ruled th.num { text-align: right; }
.sheet { max-width: 66rem; border: 1.5px solid var(--ink); background: var(--paper); padding: 1.4rem 1.8rem; }
.sheet h1 { font-size: 2.6rem; line-height: 1.1; margin-bottom: 1rem; }
.score-row { display: grid; grid-template-columns: 2.6rem 1fr 6rem; gap: 0.7rem; align-items: baseline; border-bottom: 1px solid var(--rule-mid); padding: 0.4rem 0.3rem; }
.score-row .q { font-family: var(--hand-sc); font-size: 1.3rem; line-height: 1.2; }
.score-row .needs { grid-column: 2 / 4; color: var(--ink-2); font-size: 1.15rem; }
.score-row .why { grid-column: 2 / 4; font-size: 1.15rem; }
.score-row .mark { font-family: var(--hand-sc); font-size: 1.25rem; text-align: right; display: flex; gap: 0.3rem; justify-content: flex-end; align-items: center; }
.score-row .mark.pass { color: var(--ink); }
.score-row .mark.fail { color: var(--red-ink); }
.score-row .id { font-family: var(--typed); font-weight: 700; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 1100px) {
  html { font-size: 16px; }
  .cover, .deck, .two { grid-template-columns: 1fr; }
  .tapelist { position: static; }
  .deck { grid-template-columns: minmax(0, 1fr); }
  .cover h1 { font-size: 4rem; }
}
@media (max-width: 700px) {
  .masthead { height: auto; flex-wrap: wrap; padding: 0.6rem 1rem; gap: 0.6rem; position: static; }
  .masthead nav { gap: 0.4rem 1rem; }
  .counter { min-width: 0; }
  .masthead .right { margin-left: 0; }
  .position { top: 0; }
  main { padding: 1.2rem 1rem 3rem; }
  .cover h1 { font-size: 3rem; }
  .req { grid-template-columns: 1.6rem 1fr; }
  .req .c, .req .p { display: none; }
}

#rows, .req-wrap { border: 1.5px solid var(--ink); background: var(--paper); padding: 0.4rem 1rem; }

/* presenter zoom (Z) and screen transitions */
main#view { will-change: transform; }
body.zoomed { overflow: hidden; }
#view { view-transition-name: page; }
::view-transition-old(page) { animation: page-out 180ms var(--ease) both; }
::view-transition-new(page) { animation: page-in 320ms var(--ease) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(page), ::view-transition-new(page) { animation: none; } }

/* ---------- audience: stakeholder (just the data) / developer (everything underneath) ---------- */
.subbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 2.25rem 0; }
.aud-pick { display: flex; align-items: center; gap: 0.7rem; }
.aud-pick .lab { font-family: var(--hand-sc); font-size: 1.1rem; color: var(--ink-2); }
.explain-btn { font-size: 1.15rem; padding: 0.45rem 0.9rem; }
.explain-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
body[data-aud="stakeholder"] .dev-only { display: none !important; }
body[data-aud="developer"] .sh-only { display: none !important; }
.expect { color: var(--ink-2); font-size: 1.15rem; margin: 0.2rem 0 0.6rem; }
.steps .line { grid-template-columns: 2rem auto 1fr auto; }
.steps .at { font-family: var(--typed); font-size: 0.9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.steps .args { display: block; margin: 0.15rem 0 0 2.6rem; font-family: var(--typed); font-size: 0.9rem; color: var(--ink-2); word-break: break-word; }
.steps li.think { border-bottom-style: dashed; padding: 0.25rem 0; }
.steps li.think .tool { font-weight: 400; color: var(--ink-2); }
body[data-aud="stakeholder"] .steps li { padding: 0.3rem 0 0.35rem; }
body[data-aud="stakeholder"] .steps .line { grid-template-columns: 2rem 1fr; }
.slow { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; border: 1.5px dashed var(--red); padding: 0.6rem 0.9rem; margin: 0 0 1.4rem; max-width: 52rem; color: var(--red-ink); font-size: 1.2rem; }
.slow .btn { font-size: 1.1rem; padding: 0.4rem 0.8rem; }
.kpi-early { margin-bottom: 1.2rem; }

/* ---------- Explain: spoken narration with live captions ---------- */
.explainer {
  position: fixed; left: 1.5rem; right: 1.5rem; bottom: 1.2rem; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--rule-mid);
  padding: 0.9rem 1.1rem; max-width: 64rem; margin: 0 auto;
  animation: ex-in 260ms var(--ease) both;
}
.explainer[hidden] { display: none; }
@keyframes ex-in { from { opacity: 0; transform: translateY(12px); } }
.ex-toggle, .ex-close { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; padding: 0; }
.ex-close { background: var(--paper); color: var(--ink); border-color: var(--rule-mid); }
.ex-toggle::before { content: ""; width: 0.8rem; height: 0.9rem; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.ex-toggle.paused::before { width: 0; height: 0; border: 0; border-left: 0.8rem solid currentColor; border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent; margin-left: 0.2rem; }
.ex-head { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--hand-sc); font-size: 1.05rem; color: var(--ink-2); }
.ex-time { font-family: var(--typed); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ex-text { margin: 0.2rem 0 0; font-size: 1.45rem; line-height: 1.4; color: var(--rule-mid); }
.ex-text .w { transition: color 120ms linear; }
.ex-text .w.said { color: var(--ink); }
.ex-text .w.now { color: var(--ink); background: linear-gradient(to top, rgba(198, 40, 40, 0.22) 38%, transparent 38%); }
@media (max-width: 700px) {
  .subbar { padding: 0.6rem 1rem 0; }
  .explainer { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; }
  .ex-text { font-size: 1.2rem; }
}
.online-tag { font-size: 0.95rem; color: var(--ink-2); border-color: var(--rule-mid); }
.subbar .online-tag { margin-left: auto; margin-right: 0.4rem; }

/* ---------- course label, story timeline and chat ---------- */
.course-badge { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 0.8rem; font-family: var(--hand-sc); font-size: 1.2rem; color: var(--red-ink); border: 1.5px solid var(--red); padding: 0.25rem 0.8rem 0.25rem 0.35rem; }
.course-note { padding: 0.8rem 2.25rem 1.4rem; color: var(--ink-2); font-size: 1.05rem; border-top: 1px solid var(--rule-mid); }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: start; }
.timeline { list-style: none; padding: 0; margin: 0.6rem 0 0; }
.timeline li { display: grid; grid-template-columns: 5.2rem 2.2rem 1fr; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule-mid); }
.timeline .when { font-family: var(--typed); font-size: 0.95rem; color: var(--ink-2); padding-top: 0.2rem; }
.timeline .dot { font-family: var(--hand-sc); color: var(--red-ink); }
.timeline b { font-family: var(--hand-sc); font-weight: 400; font-size: 1.3rem; }
.timeline p { margin: 0.1rem 0 0; font-size: 1.15rem; }
.chat { position: sticky; top: 6rem; }
.chat-log { border: 1.5px solid var(--ink); background: var(--paper); padding: 0.8rem 1rem; max-height: 52vh; overflow-y: auto; display: grid; gap: 0.8rem; margin-top: 0.6rem; }
.msg { max-width: 92%; }
.msg .who { font-family: var(--hand-sc); font-size: 1rem; color: var(--ink-2); }
.msg .body { border: 1px solid var(--rule-mid); padding: 0.45rem 0.75rem; background: #fff; }
.msg .body p { margin: 0.2rem 0; }
.msg .body ul { margin: 0.2rem 0; padding-left: 1.2rem; }
.msg.me { justify-self: end; text-align: right; }
.msg.me .body { background: var(--wash); border-color: var(--ink); }
.msg .foot { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--ink-2); }
.msg.pending .body { color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.chip { font: inherit; font-size: 1.05rem; border: 1px solid var(--rule-mid); background: var(--paper); color: var(--ink); padding: 0.2rem 0.6rem; cursor: pointer; }
.chip:hover { border-color: var(--ink); background: var(--wash); }
.chat-form { display: flex; gap: 0.6rem; }
.chat-form input { flex: 1; min-width: 0; font-size: 1.2rem; padding: 0.5rem 0.7rem; border: 1.5px solid var(--ink); background: #fff; }
.masthead nav { gap: 1.2rem; }
@media (max-width: 1100px) { .story { grid-template-columns: 1fr; } .chat { position: static; } }
@media (max-width: 700px) { .course-note { padding: 0.8rem 1rem 1.2rem; } .timeline li { grid-template-columns: 4.2rem 1fr; } .timeline .dot { display: none; } }
.msg .sources { margin: 0.4rem 0 0; padding: 0.35rem 0 0 1.6rem; border-top: 1px dashed var(--rule-mid); font-size: 0.95rem; color: var(--ink-2); }
.msg .sources li::marker { color: var(--red-ink); font-family: var(--typed); }

/* ---------- phones ----------
   One-line swipeable nav, a compact header, finger-sized targets (44px), and wide charts and tables
   that swipe sideways instead of shrinking until they can't be read. */
@media (max-width: 700px) {
  /* only the one-line nav stays on screen while scrolling; the mode buttons scroll away with the page */
  .masthead { display: contents; }
  .masthead nav {
    position: sticky; top: 0; z-index: 6; background: var(--paper); border-bottom: 2px solid var(--ink);
    flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 0; padding: 0 0.6rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .masthead nav::-webkit-scrollbar { display: none; }
  .masthead nav a { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.55rem; scroll-snap-align: start; font-size: 1.2rem; }
  .masthead .right { width: 100%; padding: 0.6rem 1rem 0; box-sizing: border-box; }
  .masthead .right .modes { flex: 1; }
  .modes button { flex: 1; min-height: 44px; padding: 0 0.5rem; }
  .counter, .position { display: none; }
  .subbar { padding: 0.6rem 1rem 0; gap: 0.6rem; flex-wrap: nowrap; }
  .aud-pick { flex: 1; min-width: 0; }
  .aud-pick .lab, .wide-only { display: none; }
  .aud-pick .modes { width: 100%; }
  .explain-btn { flex: none; min-height: 44px; padding: 0 0.9rem; }
  /* online copy: the "Live AI runs locally" note gets its own line under the switch, instead of squeezing into it */
  .subbar:has(.online-tag) { flex-wrap: wrap; }
  .subbar .online-tag { order: 3; flex: 1 0 100%; margin: 0; text-align: center; white-space: normal; }
  .btn { min-height: 44px; }
  .sides button { min-height: 44px; }
  .track { min-height: 48px; }
  .chip { min-height: 40px; }
  .linkish { min-height: 44px; display: inline-flex; align-items: center; }
  .course-note a { display: inline-block; padding: 0.4rem 0; }
  .playing { padding: 1rem 1rem 1.4rem; min-height: 85vh; scroll-margin-top: 3.6rem; }
  .playing h1 { font-size: 2rem; }
  figure.chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  figure.chart img { width: 640px; max-width: none; }
  figure.chart figcaption::after { content: " · swipe to see all"; color: var(--pencil); }
  table.ruled { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chat-form .btn, .ask form .btn { flex: none; padding: 0 0.9rem; }
  .two { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .two > div, .two > section, .comp { padding: 0.9rem 1rem 1rem; }
  .controls .field { min-width: 0; }
  .field input, .field select, .field textarea { max-width: 100%; }
  .chat-log { max-height: 60vh; }
}
@media (max-width: 1100px) {
  .story .chat { order: -1; }     /* phones and tablets come to ask: the chat first, the timeline after */
  .story, .deck { grid-template-columns: minmax(0, 1fr); }
  .story > *, .tapelist { min-width: 0; }
}
@media (hover: none) {
  .btn:hover, .chip:hover { background: var(--paper); }
  .btn.primary:hover { background: var(--ink); }
}
button, a, label.btn, .chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }


/* ---------- home: every area, and the "how we built it" chat ---------- */
.home-hero { max-width: 60rem; margin-bottom: 1.4rem; }
.home-hero .page-title { margin: 0.2rem 0 0.4rem; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.7rem; margin-top: 0.7rem; }
.area { display: grid; grid-template-columns: 2.2rem 1fr; grid-template-rows: auto 1fr; column-gap: 0.4rem; padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--ink); background: var(--paper); text-decoration: none; color: var(--ink);
  transition: background-color 160ms var(--ease), transform 120ms var(--ease); }
.area:hover { background: var(--wash); }
.area:active { transform: translateY(1px); }
.area .n { grid-row: 1 / span 2; font-family: var(--hand-sc); color: var(--red-ink); font-size: 1.15rem; }
.area b { font-family: var(--hand-sc); font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.area .d { font-size: 1.05rem; color: var(--ink-2); line-height: 1.35; margin-top: 0.15rem; }
.area.out { border-style: dashed; }
.home-chat { position: sticky; top: 6rem; }
.home-chat .chat-log { max-height: 46vh; }
.blog-ref { margin: 0.5rem 0 0; font-size: 1.1rem; color: var(--ink-2); }
.msg .read-more { margin: 0.4rem 0 0; font-size: 0.98rem; color: var(--ink-2); }
.msg .read-more a { color: var(--red-ink); }
@media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } .home-chat { position: static; } }
@media (max-width: 700px) { .area-grid { grid-template-columns: 1fr; } .area b { font-size: 1.25rem; } }

/* ---------- the floating Ask chat (every screen) ---------- */
.ask-fab {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 30;
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem 0.7rem 0.95rem;
  font-family: var(--hand-sc); font-size: 1.3rem; line-height: 1; color: var(--paper); background: var(--ink);
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--red); cursor: pointer;
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), bottom 200ms var(--ease);
}
.ask-fab:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--red); }
.ask-fab:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--red); }
.ask-fab .icon { width: 1.3em; height: 1.3em; }
.ask-fab[aria-expanded="true"] { background: var(--paper); color: var(--ink); }
.explainer:not([hidden]) ~ .ask-fab { bottom: 11rem; }
.ask-panel {
  position: fixed; right: 1.2rem; bottom: 5.4rem; z-index: 31;
  width: min(28rem, calc(100vw - 2.4rem)); height: min(70vh, 44rem);
  display: flex; flex-direction: column; background: var(--paper);
  border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--rule-mid);
  animation: ask-in 200ms var(--ease) both;
}
.ask-panel[hidden] { display: none; }
@keyframes ask-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.ask-panel header { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem 0.6rem; border-bottom: 2px solid var(--ink);
  background: linear-gradient(to bottom, var(--red) 0 2px, transparent 2px 4px, var(--red) 4px 6px, transparent 6px) top / 100% 6px no-repeat, var(--paper); padding-top: 1rem; }
.ask-panel header div { flex: 1; min-width: 0; }
.ask-panel h2 { font-size: 1.45rem; margin: 0; }
.ask-panel header p { margin: 0.1rem 0 0; font-size: 0.95rem; color: var(--ink-2); line-height: 1.3; }
.ask-x { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: none; border: 1.5px solid var(--rule-mid); color: var(--ink); cursor: pointer; }
.ask-x:hover { border-color: var(--ink); background: var(--wash); }
.ask-log { flex: 1; overflow-y: auto; padding: 0.8rem 0.9rem; display: grid; align-content: start; gap: 0.75rem; overscroll-behavior: contain; }
/* one size for questions and answers; smaller, quieter text for sources, resources and footnotes */
.ask-log .msg { max-width: 94%; }
.ask-log .msg .body { font-size: 1.08rem; line-height: 1.42; padding: 0.45rem 0.7rem; }
.ask-log .msg .body p { margin: 0.25rem 0; }
.ask-log .msg .who { font-size: 0.9rem; }
.ask-log .msg .foot { font-size: 0.85rem; }
.ask-log .sources { font-size: 0.88rem; }
.ask-log .thinking { color: var(--ink-2); }
.caret { display: inline-block; width: 0.5em; height: 1em; margin-left: 0.1em; background: var(--red); vertical-align: -0.12em; animation: caret 1s steps(2) infinite; }
.resources { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; margin: 0.5rem 0 0.1rem; padding-top: 0.4rem; border-top: 1px dashed var(--rule-mid); font-size: 0.9rem; }
.resources > span { font-family: var(--hand-sc); color: var(--ink-2); margin-right: 0.2rem; }
.resources a { border: 1px solid var(--rule-mid); padding: 0.05rem 0.45rem; text-decoration: none; background: var(--paper); }
.resources a:hover { border-color: var(--ink); background: var(--wash); }
.ask-chips { margin: 0; padding: 0.4rem 0.9rem 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ask-chips::-webkit-scrollbar { display: none; }
.ask-chips .chip { flex: none; font-size: 0.95rem; }
.ask-panel .chat-form { padding: 0.5rem 0.9rem 0.2rem; }
.ask-panel .chat-form input { font-size: 1.08rem; padding: 0.45rem 0.65rem; }
.ask-panel .chat-form .btn { padding: 0.45rem 0.8rem; }
.chat-form .stop { display: none; }
.chat-form.busy .send { display: none; }
.chat-form.busy .stop { display: inline-flex; align-items: center; justify-content: center; }
.chat-form.busy input { opacity: 0.6; }
.ask-note { margin: 0; padding: 0.2rem 0.9rem 0.6rem; font-size: 0.82rem; color: var(--ink-2); line-height: 1.3; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ask-card { border: 1.5px solid var(--ink); background: var(--paper); padding: 0 1rem 0.8rem; }
.ask-card .rule-head { margin-top: 0.6rem; }
.ask-card > p { font-size: 1.1rem; margin: 0.5rem 0; }
@media (max-width: 700px) {
  .ask-fab { right: 0.8rem; bottom: 0.8rem; }
  .ask-panel { inset: 0; width: auto; height: auto; border: 0; box-shadow: none; }
  body.asking { overflow: hidden; }
  body.asking .ask-fab { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ask-panel, .ask-fab { animation: none; transition: none; } }

/* ---------- brand, menus, compact mode switch ----------
   The logo replaces the old vertical spine. Demo, Blog, Present and More open lists (app.js: menuClose);
   the mode switch is three icons, with only the chosen mode spelled out. */
.masthead { gap: 1.6rem; }
.brand { display: flex; align-items: center; gap: 0.5rem; flex: none; text-decoration: none; font-family: var(--hand-sc); font-size: 1.25rem; color: var(--ink); -webkit-text-stroke: 0.02em currentColor; }
.brand img { display: block; }
.masthead nav .menu { position: relative; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 0.2rem; background: none; border: 0; border-bottom: 2.5px solid transparent;
  padding: 0.2rem 0; cursor: pointer; color: var(--ink); font-family: var(--hand-sc); font-size: 1.3rem; -webkit-text-stroke: 0.02em currentColor;
}
.menu-btn .chev { width: 0.9em; height: 0.9em; transition: transform 160ms var(--ease); }
.menu.open .menu-btn .chev { transform: rotate(180deg); }
.menu-btn:hover { border-bottom-color: var(--rule-mid); }
.menu.current .menu-btn { border-bottom-color: var(--red); }
.sub {
  display: none; position: absolute; top: calc(100% + 0.6rem); left: -0.9rem; z-index: 10; min-width: 19rem;
  list-style: none; margin: 0; padding: 0.35rem 0; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--wash);
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem; }   /* keeps hover alive across the gap */
.menu.open .sub { display: block; }
@media (hover: hover) and (min-width: 701px) { .menu:hover .sub { display: block; } }
.masthead nav .sub a, body > .sub a { display: block; min-height: 0; padding: 0.45rem 0.9rem; font-family: var(--hand); font-size: 1rem; -webkit-text-stroke: 0; text-decoration: none; color: var(--ink); line-height: 1.25; border-bottom: 0; border-left: 3px solid transparent; }
.masthead nav .sub a:hover, .masthead nav .sub a:focus-visible, body > .sub a:hover, body > .sub a:focus-visible { background: var(--wash); border-left-color: var(--red); }
.masthead nav .sub a[aria-current="page"], body > .sub a[aria-current="page"] { border-left-color: var(--red); }
.sub a b { display: flex; -webkit-text-stroke: 0.02em currentColor; align-items: center; gap: 0.3rem; font-family: var(--hand-sc); font-weight: 400; font-size: 1.2rem; }
.sub a b .ext { width: 0.8em; height: 0.8em; color: var(--ink-2); }
.sub a span { display: block; font-size: 1rem; color: var(--ink-2); }
.masthead .right .modes button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.55rem; font-size: 1.05rem; }
.masthead .right .modes button span { display: none; }
.masthead .right .modes button[aria-pressed="true"] span { display: inline; }
@media (max-width: 1100px) { .brand span { display: none; } .masthead nav { gap: 1.1rem; } }
@media (max-width: 700px) {
  .brand { display: none; }
  .menu-btn { min-height: 44px; padding: 0 0.55rem; font-size: 1.2rem; border-bottom: 0; }
  .sub { position: fixed; top: var(--nav-bottom, 46px); left: 0.5rem; right: 0.5rem; min-width: 0; max-height: calc(100vh - var(--nav-bottom, 46px) - 1rem); overflow-y: auto; }
  .sub::before { display: none; }
  body > .sub { display: block; z-index: 20; }   /* the open list is moved out of the swipeable nav (app.js), which phones clip */
  .masthead nav:has(.menu.open) { mask-image: none; }
  .masthead .right .modes button { justify-content: center; }
}

/* the chat's "working on it" line: three bouncing dots, what it's doing, and the passages it found */
.msg .status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; color: var(--ink-2); }
.dots { display: inline-flex; gap: 0.25rem; }
.dots i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--red); animation: bounce 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: 0.15s; } .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-0.3rem); opacity: 1; } }
.msg .found { flex-basis: 100%; margin: 0.2rem 0 0; padding-left: 1.2rem; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: 0.7; } }