/* ============================================================================
   Nell & Key
   ============================================================================
   One quiet book. Warm ivory, forest ink, one terracotta accent used as a
   full stop and almost nowhere else. The type is the design: an expressive
   serif for titles, the same serif at reading size for prose, a plain sans
   for anything a person operates.

   Shared by the marketing page and the chapter, so the chapter looks like the
   page promised and the page looks like the chapter delivers.
   ========================================================================== */
:root {
  color-scheme: light;
  /* The brand kit's production tokens: paper, forest, oxblood for the mark
     and restrained emphasis, ochre for the occasional accent. */
  --paper: #F6F1E7;
  --paper-2: #EFE8D9;
  --ink: #173A32;
  --oxblood: #782D3B;
  --ink-soft: color-mix(in srgb, var(--ink) 78%, var(--paper));
  --ink-faint: color-mix(in srgb, var(--ink) 74%, var(--paper));
  --accent: #B66A36;
  --line: color-mix(in srgb, var(--ink) 14%, var(--paper));
  --line-strong: color-mix(in srgb, var(--ink) 30%, var(--paper));
  --leaf: #7F9C5B;
  --lemon: #E8C64B;
  --serif: Fraunces, "Iowan Old Style", Georgia, serif;
  --sans: Figtree, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --measure: 34rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.55 var(--serif); font-variation-settings: "opsz" 18; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, textarea, output, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: 0; line-height: 1.06; text-wrap: balance; font-variation-settings: "opsz" 144; }
h1 { font-size: 68px; }
h2 { font-size: 48px; }
h3 { font-size: 26px; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.stop { color: var(--accent); }
.eye { font: 500 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--oxblood); }
.eye.quiet { color: var(--ink-faint); }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
.prose { max-width: var(--measure); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; }
.small { font: 14px/1.5 var(--sans); color: var(--ink-soft); }

/* ------------------------------------------------------------ masthead --- */
.mast { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
/* The keybearer. Clear space of at least the mouse's ear around it, which the
   masthead's gap provides; one solid colour; never regenerated per page. */
.brand .mark { width: 38px; height: 38px; flex: 0 0 38px; margin-right: 2px; }
.brand b { font: 500 30px/1 var(--serif); letter-spacing: .06em; font-variation-settings: "opsz" 144; }
.brand span { font: 400 14px/1 var(--serif); color: var(--ink-soft); padding-left: 14px; border-left: 1px solid var(--line-strong); }
.mast-link { font: 500 16px/1 var(--serif); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.mast-link:hover { color: var(--accent); }
/* Beside the brand, a quiet link for investors; the parent's action stays the loud one on the page. */
.mast-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.mast-quiet { font-size: 14px; color: var(--ink-soft); padding-left: 18px; border-left: 1px solid var(--line-strong); min-height: 44px; }
.mast-quiet:hover, .mast-quiet:focus-visible { color: var(--oxblood); }
.northstar .mast-left { flex-wrap: wrap; row-gap: 0; }
.northstar #accountLink { white-space: nowrap; }
.account-gate { max-width: 680px; padding-top: 48px; padding-bottom: 72px; }
.account-gate input { width: 100%; }

/* -------------------------------------------------------------- buttons -- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 56px; padding: 14px 24px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 19px/1.2 var(--serif); text-decoration: none; transition: transform .18s ease, background .18s ease, color .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--paper-2); }
.btn:disabled { opacity: .45; transform: none; cursor: default; }
.btn .arrow { font-family: var(--sans); }
.btn.wide { width: 100%; }
.btn.compact { min-height: 46px; padding: 10px 18px; font-size: 16px; gap: 16px; }

/* ================================================================ the page */
.hero { padding-block: clamp(28px, 5vw, 64px) clamp(36px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.hero .prose { margin-top: 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.preview { margin: 0; }
.preview-frame { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper-2); box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--ink) 45%, transparent); }
.preview img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.preview figcaption { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }

.band { padding-block: clamp(56px, 8vw, 112px); border-top: 1px solid var(--line); }
.band-head { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: baseline; margin-bottom: clamp(28px, 4vw, 52px); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.step { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 12px; }
.step h3 { font-size: clamp(24px, 2.4vw, 32px); }
.step p { font-size: 18px; max-width: 28ch; }

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.feature .art { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }
.feature .art img { width: 100%; height: auto; }
.tag { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.tag.live { border-color: var(--leaf); color: color-mix(in srgb, var(--leaf) 70%, var(--ink)); }
.tag.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); }
.feature h2 { margin-top: 14px; }
.feature .prose { margin-top: 18px; }
.feature ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 18px; }
.feature li { display: flex; gap: 12px; }
.feature li::before { content: "\2192"; font-family: var(--sans); color: var(--accent); }

/* The parent book preview: an entry rendered exactly as the app renders one,
   and stamped as an example so nobody mistakes it for a child. */
.entry { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: clamp(22px, 3vw, 36px); position: relative; max-width: 620px; }
.entry .stamp { position: absolute; top: 16px; right: 16px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--oxblood); border: 1px solid var(--oxblood); padding: 7px 9px; border-radius: 4px; transform: rotate(3deg); }
.entry .help { margin-top: 14px; font: 14px/1.5 var(--sans); color: var(--ink-soft); }
.entry .alone { margin-top: 16px; padding: 12px 0 0 16px; border-left: 3px solid var(--oxblood); }
.entry .alone .eye { display: block; margin-bottom: 6px; }
.entry .alone p { margin-top: 6px; }
.entry .date { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.entry h3 { margin-top: 10px; font-size: 28px; }
.entry p { margin-top: 12px; font-size: 18px; }
.entry .ask { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line-strong); font-style: italic; }
.entry .ask b { font-style: normal; font-weight: 500; }
.entry .evidence { margin-top: 14px; font: 12px/1.5 var(--mono); color: var(--ink-faint); }
.entry .evidence i { font-style: normal; border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; margin-right: 4px; }

.horizon .prose { max-width: 40rem; }
.horizon .eye { display: block; margin-bottom: 14px; }

.closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.signup { display: grid; gap: 14px; max-width: 460px; }
.signup fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.signup label { display: block; font: 500 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.signup input { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font-family: var(--sans); }
.signup input:focus { border-color: var(--ink); }
.signup-status { font: 14px/1.5 var(--sans); color: var(--ink-soft); min-height: 1.5em; }
.signup-status a { color: var(--accent); }
footer { border-top: 1px solid var(--line); padding-block: 26px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; font: 14px/1.5 var(--sans); color: var(--ink-soft); }
footer a { text-decoration: none; }
footer a:hover { color: var(--accent); }

/* ================================================================ the chapter */
.chapter body, body.chapter { overflow-x: clip; }
.book { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: 8px 40px; }
.passage { min-width: 0; padding-top: 18px; }
.passage h1 { font-size: clamp(42px, 5vw, 66px); margin-top: 12px; }
.passage .prose { margin-top: 26px; }
.beat { margin-top: 26px; display: grid; gap: 22px; }
.beat p { max-width: var(--measure); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; }
.beat .q { font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; }
.acts { display: grid; gap: 10px; max-width: 420px; }
.acts .btn { width: 100%; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.plan { border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 14px 12px; background: #fff; text-align: left; display: grid; gap: 6px; transition: border-color .15s, transform .15s; }
.plan:hover { border-color: var(--ink); transform: translateY(-2px); }
.plan b { font: 500 30px/1 var(--serif); font-variation-settings: "opsz" 72; }
.plan span { font: 13px/1.4 var(--sans); color: var(--ink-soft); }
.plan[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink); }
.guesses { display: grid; gap: 8px; max-width: 420px; }
.guess { border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 12px 18px; background: #fff; text-align: left; font: 500 17px/1.3 var(--serif); display: flex; align-items: center; gap: 12px; }
.guess:hover { border-color: var(--ink); }
.guess[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink); }
.guess .k { font: 500 11px/1 var(--mono); width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; flex: 0 0 24px; }
.gives { display: flex; flex-wrap: wrap; gap: 8px; }
.give { border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 10px 16px; background: #fff; font: 500 15px/1.2 var(--sans); }
.give:hover { border-color: var(--ink); }
.give[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink); }
.q .small { display: block; font-weight: 400; margin-top: 4px; }
.challenge { border: 1px solid var(--line-strong); border-radius: 14px; padding: clamp(18px, 2.4vw, 26px); background: color-mix(in srgb, var(--oxblood) 4%, var(--paper)); display: grid; gap: 14px; max-width: 560px; }
.challenge .eye { color: var(--oxblood); }
.challenge .plans { max-width: none; }
.runs { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 17px; }
.runs li::marker { color: var(--oxblood); }
.runs b { font-weight: 500; }
.compare { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; max-width: 560px; }
.compare table { width: 100%; border-collapse: collapse; font: 15px/1.4 var(--sans); }
.compare th, .compare td { text-align: right; padding: 10px 14px; border-top: 1px solid var(--line); }
.compare th:first-child, .compare td:first-child { text-align: left; font-family: var(--serif); font-size: 16px; }
.compare thead th { border-top: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.compare .now { background: var(--paper-2); font-weight: 600; }
.compare .delta { color: var(--accent); font-weight: 600; }
.why { display: grid; gap: 8px; padding-left: 18px; margin: 0; max-width: var(--measure); }
.why li { font-size: 18px; }
.reflect textarea { width: 100%; max-width: 520px; min-height: 96px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; font-family: var(--serif); font-size: 18px; resize: vertical; }
.reflect textarea:focus { border-color: var(--ink); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ask-form { margin-top: 30px; display: grid; gap: 8px; max-width: 520px; }
.ask-form label { font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ask-row { display: flex; gap: 8px; }
.ask-row input { flex: 1; min-width: 0; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: #fff; font-family: var(--serif); font-size: 17px; }
.ask-row input:focus { border-color: var(--ink); }
.ask-hints { display: flex; flex-wrap: wrap; gap: 6px; }
.hint { font: 13px/1 var(--sans); min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); }
.hint:hover { border-color: var(--ink); color: var(--ink); }
.said { margin-top: 22px; padding: 16px 20px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--paper)); border-radius: 0 10px 10px 0; font-size: 19px; line-height: 1.45; max-width: 560px; min-height: 3.2em; }
.said b { font-weight: 500; color: var(--accent); font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.said[hidden] { display: none; }
.rules { margin-top: 30px; max-width: 560px; border-top: 1px solid var(--line); padding-top: 14px; }
.rules summary { cursor: pointer; font: 500 15px/1.4 var(--sans); color: var(--ink-soft); }
.rules ul { margin: 10px 0 0; padding-left: 20px; font-size: 16px; display: grid; gap: 6px; color: var(--ink-soft); }
.rules ul li::marker { color: var(--accent); }

.diorama { position: sticky; top: 16px; min-width: 0; }
.stage { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: transparent; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; }
.stage.ready canvas { opacity: 1; }
.stage-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: var(--paper-2); border: 1px dashed var(--line-strong); border-radius: 12px; }
.stage-fallback[hidden] { display: none; }
.stage-fallback p { max-width: 30ch; font-size: 17px; }
.stage-fallback .small { margin-top: 8px; }
.readout { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.readout div { padding: 12px 14px; border-left: 1px solid var(--line); }
.readout div:first-child { border-left: 0; }
.readout dt { font: 500 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.readout dd { font: 500 26px/1.1 var(--serif); font-variation-settings: "opsz" 72; margin-top: 4px; font-variant-numeric: tabular-nums; }
.readout dd small { font: 13px/1 var(--sans); color: var(--ink-soft); margin-left: 4px; }
.readout dd.changed { color: var(--accent); }
.stage-tools { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stage-tools .small { margin-left: auto; }
/* 44px tall: a finger, not a cursor. The touch walk refuses anything smaller. */
.tool { font: 500 13px/1 var(--sans); min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.tool:hover { border-color: var(--ink); }
.tool[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.foot-line { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font: 13px/1.4 var(--sans); color: var(--ink-soft); }
.dots { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 120px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: block; }
.dots i.on { background: var(--accent); width: 28px; border-radius: 999px; }
.dots i.done { background: var(--ink); }
.folio { font: 500 12px/1 var(--mono); letter-spacing: .14em; }

/* The book at the foot of the chapter: attempts, then the parent entry. */
.mybook { border-top: 1px solid var(--line); padding-block: clamp(40px, 6vw, 80px); }
.mybook-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.attempts { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 520px; }
.attempts li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 16px/1.4 var(--sans); }
.attempts .n { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--ink-faint); }
.attempts .r { font: 500 18px/1 var(--serif); font-variant-numeric: tabular-nums; }
.attempts .authored { opacity: .7; border-style: dashed; }
.attempts .alone { border-left: 3px solid var(--oxblood); }
.earlier { margin-top: 18px; font: 14px/1.5 var(--sans); color: var(--ink-soft); }
.earlier a { color: var(--oxblood); }
footer .stamp-mark { width: 40px; height: 40px; opacity: .9; }
.none { color: var(--ink-soft); font-size: 17px; margin-top: 16px; max-width: 40ch; }

@media (max-width: 1000px) {
  .hero-grid, .feature, .closing, .mybook-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .book { grid-template-columns: 1fr; gap: 20px; }
  .diorama { position: relative; top: auto; order: -1; }
  .stage { aspect-ratio: 16 / 10; max-height: 46vh; }
  .readout dd { font-size: 22px; }
}
@media (max-width: 640px) {
  .brand b { font-size: 24px; }
  .brand span { display: none; }
  .mast { min-height: 68px; }
  .readout { grid-template-columns: 1fr 1fr; }
  .readout div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .readout div:nth-child(4) { border-top: 1px solid var(--line); }
  .plans { grid-template-columns: 1fr; }
  .band-head { grid-template-columns: 40px 1fr; gap: 12px; }
  .stage { aspect-ratio: 16 / 11; }
  .passage h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ================================================================ the book */
body.tome { background: var(--paper); }
.book-main { padding-block: 8px 60px; max-width: 900px; }
.cover-page { padding: clamp(24px, 4vw, 48px) 0 28px; border-bottom: 1px solid var(--line); }
.cover-page h1 { margin-top: 12px; font-size: clamp(40px, 6vw, 72px); }
.bookplate { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bookplate label { font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.bookplate input { min-height: 46px; padding: 10px 14px; border: 0; border-bottom: 1.5px solid var(--line-strong); background: transparent; font: 400 22px var(--serif); font-variation-settings: "opsz" 72; min-width: 180px; }
.bookplate input:focus { border-color: var(--ink); outline: none; }
.contents-page { padding: 26px 0; border-bottom: 1px solid var(--line); }
.contents-page ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.contents-page a { display: grid; grid-template-columns: 40px 1fr auto 14px; gap: 14px; align-items: baseline; padding: 8px 0; text-decoration: none; border-bottom: 1px dotted var(--line); }
.contents-page a:hover .t { color: var(--oxblood); }
.contents-page .n { font: 500 11px var(--mono); color: var(--ink-faint); }
.contents-page .t { font: 400 20px/1.3 var(--serif); }
.contents-page .d { font: 13px var(--sans); color: var(--ink-soft); }
.contents-page .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--oxblood); display: block; }
.leaf { position: relative; padding: clamp(32px, 5vw, 56px) 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.leaf.in { opacity: 1; transform: none; }
.leaf h2 { margin-top: 10px; font-size: clamp(32px, 4.4vw, 50px); }
.leaf .ribbon { position: absolute; top: 0; right: 8px; width: 22px; height: 54px; background: var(--oxblood); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
.scene { margin: 22px 0 0; max-width: 520px; }
.vignette { width: 100%; height: auto; display: block; }
.account { margin-top: 18px; max-width: var(--measure); }
.account p { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; }
.account p + p { margin-top: 10px; }
.again { margin-top: 14px; max-width: var(--measure); font: 15px/1.5 var(--sans); color: var(--ink-soft); border-left: 3px solid var(--oxblood); padding-left: 12px; }
.takeaway { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 18px; border-top: 1px dashed var(--line-strong); max-width: 680px; }
.takeaway .eye { display: block; margin-bottom: 8px; }
.takeaway p { font-size: 18px; line-height: 1.45; }
.takeaway .ask { font-style: italic; }
.moment { margin-top: 20px; max-width: 680px; }
.moment summary { cursor: pointer; font: 500 15px/1.4 var(--sans); color: var(--oxblood); }
.moments { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.moments li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dotted var(--line); font-size: 16px; line-height: 1.45; }
.moments code { font: 500 11px var(--mono); color: var(--ink-faint); }
.moments .m-help span { color: var(--ink-soft); }
.moments .m-challenge span::before { content: "\25C6  "; color: var(--oxblood); font-size: 10px; }
.moment .help { margin-top: 12px; font: 14px/1.5 var(--sans); color: var(--ink-soft); }
.moment .alone { margin-top: 12px; padding: 10px 0 0 14px; border-left: 3px solid var(--oxblood); }
.moment .alone p { margin-top: 6px; font-size: 16px; }
.moment .evidence { margin-top: 12px; font: 12px/1.6 var(--mono); color: var(--ink-faint); }
.moment .evidence i { font-style: normal; border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; margin-right: 4px; }
.leaf.empty h2 { margin-top: 10px; }
.leaf.empty .prose { margin-top: 14px; }
.leaf.empty .cta-row { margin-top: 22px; }
@media (max-width: 640px) {
  .takeaway { grid-template-columns: 1fr; gap: 16px; }
  .contents-page a { grid-template-columns: 32px 1fr 14px; }
  .contents-page .d { display: none; }
}
@media print {
  .mast, footer, .bookplate, .moment summary, .ribbon { display: none; }
  .leaf { break-after: page; opacity: 1; transform: none; border-bottom: 0; }
  .moment[open] > *:not(summary) { display: block; }
  body { background: #fff; }
}
@media (prefers-reduced-motion: reduce) { .leaf { opacity: 1; transform: none; transition: none; } }

/* The first illustrated spread. One paper world, from the door to the book. */
[hidden] { display: none !important; }
* { letter-spacing: 0 !important; }
.wrap { max-width: 1480px; padding-inline: 40px; }
.mast { min-height: 88px; }
.brand b { font-size: 28px; }
.brand .mark { width: 48px; height: 48px; flex-basis: 48px; }
.mast-link { min-height: 44px; font: 500 14px/1.3 var(--sans); }
.btn { border-radius: 6px; font: 500 16px/1.35 var(--sans); min-height: 50px; padding: 13px 20px; }
.btn:hover { transform: translateY(-1px); background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }
.btn.ghost { border-color: var(--line-strong); }
.eye { font: 500 12px/1.4 var(--sans); text-transform: none; }
.prose { font-size: 21px; }
.skip-link { position: fixed; left: 18px; top: -80px; z-index: 100; padding: 12px; background: var(--paper); }
.skip-link:focus { top: 12px; }
.text-link { display: inline-flex; gap: 24px; min-height: 44px; align-items: center; margin-top: 22px; text-underline-offset: 6px; font: 500 15px var(--sans); }
.hero { padding: 18px 0 28px; }
.hero-copy { text-align: center; position: relative; z-index: 1; }
.hero-copy h1 { font-size: 58px; line-height: 1.08; margin-bottom: 10px; }
.hero-copy h2 { font-size: 32px; }
.hero-copy p { margin: 16px 0 22px; font: 17px/1.5 var(--sans); }
.hero-copy .btn { gap: 36px; }
.living-scene { position: relative; max-width: 1300px; margin: 0 auto; }
.living-scene .stage { height: min(430px, 45svh); max-height: none; aspect-ratio: auto; border-radius: 0; }
.living-scene figcaption { min-height: 30px; max-width: 650px; padding: 0 24px; margin: auto; text-align: center; font: 14px/1.5 var(--sans); }
.scene-poster { width: 100%; height: 100%; object-fit: contain; transition: opacity .3s; }
.stage.ready > .scene-poster { opacity: 0; pointer-events: none; }
.discover { position: absolute; bottom: 48px; right: 12%; background: var(--paper); border-color: var(--line-strong); }
.frontispiece #parents { background: var(--paper-2); }
.sample-leaf details { font: 13px/1.5 var(--sans); margin-top: 12px; }
.sample-leaf details summary { padding-block: 10px; }
.band { padding-block: 88px; }
.invitation-inner { text-align: center; max-width: 840px; }
.invitation-inner h2 { margin: 16px 0 22px; font-size: 54px; }
.invitation-inner .prose { margin-inline: auto; }
.story-invitation { background: color-mix(in srgb, var(--leaf) 8%, var(--paper)); }
.concept-note { margin: 28px auto 0; max-width: 780px; text-align: left; font: 14px/1.5 var(--sans); }
.concept-note summary { text-align: center; cursor: pointer; min-height: 44px; padding: 12px 0; color: var(--ink-soft); }
.concept-note img { margin-top: 22px; width: 100%; height: auto; }
.parent-journey { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; max-width: 1240px; }
.parent-intro h2 { margin: 16px 0 24px; }
.sample-leaf { border-left: 1px solid var(--line); padding: 12px 0 24px 40px; }
.sample-leaf .stamp { font: 12px/1.4 var(--sans); color: var(--oxblood); }
.sample-picture { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; }
.sample-leaf h3 { margin: 10px 0 16px; font-size: 30px; }
.sample-leaf p + p { margin-top: 14px; }
.sample-leaf .ask { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px; font-style: italic; }
.closing { max-width: 1240px; align-items: center; gap: 100px; }
.closing-mark { margin-bottom: 20px; }
.closing .prose { margin-top: 20px; }
.signup { width: 100%; }
.signup input { background: transparent; border-width: 0 0 1px; border-radius: 0; }

.chapter .book { grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr); gap: 36px; padding-top: 16px; }
.chapter .diorama { top: 18px; padding-right: 10px; }
.scene-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-inline: 12px; }
.chapter .stage { height: min(620px, 65svh); aspect-ratio: auto; border-radius: 0; max-height: none; }
.readout { border-width: 1px 0; border-radius: 0; background: transparent; margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.readout div { padding: 12px; }
.readout dt { font: 12px/1.3 var(--sans); text-transform: none; }
.readout dd { font-size: 27px; }
.stage-tools { gap: 8px; }
.camera-views { display: flex; border-bottom: 1px solid var(--line); margin-right: auto; }
.tool { border-radius: 4px; padding: 10px 12px; }
.camera-views .tool { border: 0; border-bottom: 2px solid transparent; background: transparent; }
.camera-views .tool[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--oxblood); }
#toolMotion { border-color: transparent; }
#sceneNote { flex-basis: 100%; min-height: 21px; }
.passage { border-left: 1px solid var(--line); padding: 12px 0 20px 28px; }
.passage h1 { font-size: 40px; margin-top: 10px; }
.beat { gap: 16px; margin-top: 24px; }
.beat p { font-size: 19px; line-height: 1.45; }
.beat .q { font-size: 22px; }
.beat .small { font: 14px/1.5 var(--sans); }
.plan, .guess, .give { border-radius: 6px; background: transparent; }
.plan { padding: 12px 10px; min-height: 96px; }
.plan b { font-size: 30px; }
.plans { gap: 8px; }
.guess { font: 15px/1.4 var(--sans); min-height: 48px; padding: 10px 12px; }
.gives { gap: 6px; }
.give { padding: 10px 12px; font-size: 13px; min-height: 44px; }
.choice-summary { display: flex; gap: 14px; align-items: center; justify-content: space-between; border-block: 1px solid var(--line); padding: 10px 0; font: 14px/1.4 var(--sans); }
.choice-summary button { border: 0; background: none; text-decoration: underline; min-height: 44px; color: var(--oxblood); }
.interest-input { display: block; width: 100%; min-height: 50px; border: 1px solid var(--line-strong); background: transparent; border-radius: 6px; padding: 10px 14px; margin-top: 10px; }
.beat details p { font-size: 17px; }
.ask-form { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 24px; }
.ask-form label { text-transform: none; font: 500 21px/1.3 var(--serif); }
.ask-row input { border-radius: 6px; background: transparent; font-size: 16px; padding: 10px 12px; }
.ask-suggestions, .beat details { font: 14px/1.5 var(--sans); }
summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.ask-hints { padding-block: 8px; }
.hint { border-radius: 4px; min-height: 44px; line-height: 1.4; }
.said { border-radius: 0; background: transparent; padding: 4px 0 4px 16px; font-size: 18px; }
.said b { color: var(--oxblood); text-transform: none; }
.rules { margin-top: 16px; padding-top: 0; }
.rules summary { font-size: 14px; }
.foot-line { gap: 10px; margin-top: 18px; }
.foot-line > span:first-child { display: none; }
.dots { min-width: 80px; }
.chapter .challenge { padding: 18px 0; border-width: 1px 0; border-radius: 0; background: transparent; }
.compare { border-radius: 4px; margin-top: 10px; }
.compare th, .compare td { padding: 8px 7px; font-size: 13px; }
.compare th:first-child, .compare td:first-child { font-size: 14px; }
.why { margin-top: 12px; }
.mybook .entry { border-radius: 6px; }
.attempts li { border-width: 0 0 1px; border-radius: 0; padding: 12px 0; background: transparent; }

.book-main { max-width: 1120px; }
.cover-page { position: relative; padding: 48px 0 40px; }
.cover-page .cover-mark { width: 70px; height: 70px; margin-bottom: 22px; }
.cover-page h1 { font-size: 58px; }
.cover-page .prose { font-size: 21px; }
.bookplate input { max-width: 100%; min-width: 100px; }
.bookplate input:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 4px; }
.leaf { padding-block: 48px; }
.leaf:not(.empty) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.leaf > .eye, .leaf > h2, .leaf > .again, .leaf > .takeaway, .leaf > .moment { grid-column: 1 / -1; width: 100%; }
.leaf > .account { align-self: center; }
.leaf h2 { font-size: 44px; max-width: 650px; }
.leaf .scene { max-width: none; width: 100%; margin: 20px 0; }
.leaf .vignette { max-width: 600px; margin-inline: auto; }
.keepsake-picture { display: block; width: 100%; height: auto; aspect-ratio: 18/10; object-fit: contain; }
.picture-caption { text-align: center; font: 14px/1.5 var(--sans); color: var(--ink-soft); margin-top: 4px; }
.leaf .account { max-width: 660px; margin: 20px auto 0; }
.account p { font-size: 21px; }
.leaf .again, .leaf .takeaway, .leaf .moment { max-width: 660px; margin-inline: auto; }
.takeaway { grid-template-columns: 1fr; border-top-style: solid; }
.takeaway .ask { font-size: 25px; }
.book-render { position: fixed; left: -2000px; top: 0; width: 900px; height: 500px; pointer-events: none; }
@media (min-width: 1600px) { .living-scene .stage { height: min(470px, calc(100svh - 510px)); } }
@media (max-width: 1000px) {
  .wrap { padding-inline: 28px; }
  .chapter .book { grid-template-columns: 1fr; gap: 24px; }
  .chapter .diorama { position: sticky; z-index: 3; top: 0; background: var(--paper); padding: 10px 0 0; }
  .chapter .stage { height: 290px; }
  .passage { border-left: 0; padding: 0 0 24px; }
  .passage h1 { font-size: 34px; }
  .parent-journey { gap: 32px; }
  .parent-intro h2 { font-size: 36px; }
  .closing { gap: 40px; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 20px; }
  .mast { min-height: 76px; gap: 12px; }
  .brand { gap: 8px; }
  .brand b { font-size: 23px; }
  .brand .mark { width: 36px; height: 36px; flex-basis: 36px; }
  .mast-link { font-size: 12px; max-width: 96px; }
  .mast-left { gap: 10px; }
  .mast-quiet { padding-left: 10px; font-size: 12px; max-width: none; }
  .hero { padding-top: 18px; }
  .hero-copy h1 { font-size: 46px; }
  .hero-copy h2 { font-size: 27px; max-width: 280px; margin: auto; }
  .hero-copy p { font-size: 15px; max-width: 280px; margin: 14px auto 18px; }
  .living-scene { margin-top: 4px; }
  .living-scene .stage { height: 280px; }
  .discover { bottom: 44px; right: 20px; font-size: 12px; }
  .living-scene figcaption { font-size: 12px; min-height: 40px; }
  .band { padding-block: 54px; }
  .invitation-inner h2, .closing h2 { font-size: 38px; }
  .prose { font-size: 19px; }
  .parent-journey { grid-template-columns: 1fr; gap: 36px; }
  .sample-leaf { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); }
  .sample-leaf h3 { font-size: 28px; }
  .chapter .stage { height: 210px; }
  .scene-heading { display: none; }
  .readout div { padding: 8px 5px; border-top: 0 !important; border-left: 1px solid var(--line) !important; }
  .readout div:first-child { border-left: 0 !important; }
  .readout dd { font-size: 21px; }
  .readout dd small { font-size: 10px; margin-left: 2px; }
  .readout dt { font-size: 10px; }
  .stage-tools { margin-top: 3px; gap: 0; }
  .tool { font-size: 12px; padding-inline: 9px; }
  #sceneNote:empty { display: none; }
  #sceneNote { margin: 0; font-size: 12px; }
  .chapter .book { gap: 16px; padding-top: 0; }
  .passage h1 { font-size: 30px; max-width: 310px; }
  .beat { margin-top: 18px; gap: 12px; }
  .beat p { font-size: 18px; }
  .beat .q { font-size: 20px; }
  .passage { scroll-margin-top: 340px; }
  .plan { min-height: 92px; }
  .cover-page h1 { font-size: 42px; }
  .cover-page { padding-top: 20px; }
  .leaf h2 { font-size: 34px; }
  .leaf:not(.empty) { grid-template-columns: 1fr; }
  .account p { font-size: 19px; }
  .takeaway .ask { font-size: 23px; }
  .bookplate { align-items: stretch; }
  .bookplate label { flex-basis: 100%; }
  .bookplate input { width: 180px; flex: 1; }
}
@media (max-height: 650px) and (max-width: 1000px) { .chapter .stage { height: 135px; } }
@media (max-width: 640px) and (max-height: 700px) {
  .frontispiece .hero-copy h1 { font-size: 38px; }
  .frontispiece .living-scene .stage { height: 190px; }
}

/* A scene and a conversation. The working detail stays in the ledger. */
.quiet-chapter .chapter-world { max-width: 1320px; padding-bottom: 24px; }
.quiet-chapter h1 { text-align: center; font-size: 48px; margin: 14px auto 0; }
.quiet-chapter .diorama { position: relative; top: auto; padding: 0; }
.quiet-chapter .stage { height: 420px; max-height: none; aspect-ratio: auto; }
.quiet-chapter .conversation { max-width: 660px; margin: 0 auto; padding: 0; border: 0; scroll-margin-top: 16px; }
.quiet-chapter .beat { margin: 0; min-height: 70px; }
.quiet-chapter .said { display: block; border: 0; background: none; margin: 0; padding: 0; font: 23px/1.4 var(--serif); text-align: center; min-height: 64px; }
.quiet-chapter .said span { display: inline; }
.current-choices { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.current-choices:empty { display: none; }
.choice-row { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.choice, .current-choices .btn { min-height: 48px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--ink); padding: 10px 16px; font: 15px/1.3 var(--sans); text-decoration: none; text-align: center; }
.choice b,.choice span { display: block; }
.choice b { font-weight: 500; font-size: 16px; }
.choice span { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.choice:hover, .current-choices .btn:hover { background: var(--paper-2); transform: none; }
.current-choices button:disabled { opacity: .55; cursor: wait; }
.quiet-chapter .ask-form { max-width: none; margin: 16px 0 0; padding: 0; border: 0; }
.quiet-chapter .ask-row { border: 1px solid var(--line-strong); background: var(--paper); border-radius: 6px; align-items: center; padding: 4px; }
.quiet-chapter .ask-row:focus-within { border-color: var(--oxblood); }
.quiet-chapter .ask-row input { border: 0; border-radius: 0; background: transparent; min-height: 46px; font: 16px/1.3 var(--sans); outline-offset: -3px; }
.icon-button { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 11px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font: 22px/1 var(--sans); }
.icon-button img { width: 20px; height: 20px; max-width: none; }
.icon-button:hover { background: var(--paper-2); }
.icon-button:disabled { opacity: .35; cursor: default; }
.icon-button[aria-pressed="true"] { border-color: var(--oxblood); background: var(--paper-2); }
.icon-button.send { background: var(--paper-2); }
.conversation-tools { display: flex; gap: 2px; justify-content: center; align-items: center; padding-top: 4px; }
dialog { color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 8px; padding: 24px; max-width: calc(100% - 24px); max-height: calc(100svh - 32px); overflow: auto; box-shadow: 0 12px 50px #173a3222; }
dialog::backdrop { background: #173a3244; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.dialog-head h2 { font-size: 28px; }
.ledger-dialog { width: 640px; }
.ledger-dialog .readout { margin: 12px 0 28px; }
.ledger-dialog details { padding: 16px 0; margin: 0; border-top: 1px solid var(--line); font: 15px/1.6 var(--sans); }
.ledger-dialog details > :not(summary) { margin-top: 12px; }
.ledger-dialog summary { cursor: pointer; min-height: 30px; }
.ledger-dialog table { width: 100%; font-size: 13px; }
.ledger-dialog th { text-align: left; }
.ledger-dialog .compare { overflow: auto; margin-block: 14px; }
.ledger-dialog h3 { font-size: 24px; }
.ledger-dialog .entry { background: transparent; border: 0; padding: 0; }
.ledger-dialog .entry h3 { font-size: 24px; }
.ledger-dialog .entry p { font-size: 15px; }
.calculator-dialog { width: 380px; }
.calculator-dialog h2 { font-size: 25px; }
.calculator-inputs { display: grid; grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr) 44px; gap: 6px; align-items: center; }
.calculator-inputs input,.calculator-inputs select { width: 100%; height: 48px; min-width: 0; padding: 6px; background: transparent; border: 1px solid var(--line-strong); border-radius: 4px; font: 17px var(--sans); }
.calculator-dialog output { display: block; min-height: 70px; padding-top: 20px; font: 24px/1.4 var(--serif); overflow-wrap: anywhere; }

/* The closed book is an object. Its records are inside, never below it. */
.quiet-book .book-main { max-width: 1160px; }
.quiet-book .cover-page { display: flex; flex-direction: column; align-items: center; gap: 20px; border: 0; padding: 28px 0 36px; }
.keepsake-cover { position: relative; width: 332px; min-height: 452px; max-width: 100%; padding: 28px 24px 26px 36px; display: flex; flex-direction: column; align-items: center; gap: 22px; background: var(--paper-2); border: 1px solid var(--line-strong); border-left: 12px solid var(--oxblood); border-radius: 3px 7px 7px 3px; box-shadow: 5px 5px 0 var(--paper),6px 6px 0 var(--line-strong),10px 12px 25px #173a3214; text-align: center; transition: transform .2s ease,box-shadow .2s ease; }
.keepsake-cover:not(:disabled):hover { transform: translateY(-4px); box-shadow: 5px 5px 0 var(--paper),6px 6px 0 var(--line-strong),12px 18px 32px #173a3222; }
.keepsake-cover:disabled { cursor: default; }
.cover-imprint,.cover-count,.cover-open { font: 13px/1.4 var(--sans); color: var(--ink-soft); }
.keepsake-cover img { width: 112px; height: 112px; object-fit: contain; }
.cover-title { display: block; max-width: 100%; font: 42px/1.08 var(--serif); overflow-wrap: anywhere; }
.cover-open { margin-top: auto; color: var(--oxblood); }
.keepsake-cover:disabled .cover-open { visibility: hidden; }
.cover-bookmark { position: absolute; top: -1px; right: 26px; width: 18px; height: 34px; background: var(--oxblood); clip-path: polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); }
.quiet-book .bookplate { display: flex; gap: 8px; align-items: center; margin: 4px 0 0; width: 332px; max-width: 100%; }
.quiet-book .bookplate input { flex: 1; min-width: 0; width: 0; min-height: 44px; font: 15px var(--sans); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 8px; }
.quiet-book #empty { text-align: center; max-width: 340px; font-size: 19px; }
.quiet-book #empty a { display: block; margin-top: 12px; }
.quiet-book #bookmarkNote { margin: 0; text-align: center; }
.reader-toolbar { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
#readerPosition { font: 13px var(--mono); min-width: 48px; text-align: center; }
.download-book { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; }
.download-book img { width: 18px; height: 18px; }
.quiet-book .contents-page { padding: 16px 0; margin: 0; border-bottom: 1px solid var(--line); font: 14px/1.4 var(--sans); }
.quiet-book .contents-page summary { cursor: pointer; }
.quiet-book .leaf { padding: 24px 0 30px; border-bottom: 0; }
.quiet-book .leaf h2 { font-size: 38px; max-width: 740px; margin-bottom: 8px; }
.quiet-book .leaf .account p { font-size: 20px; line-height: 1.5; }
.quiet-book .leaf .takeaway { padding-top: 20px; margin-top: 22px; }
.quiet-book .leaf .takeaway .ask { font-size: 23px; }
.quiet-book .leaf .moment { margin-top: 20px; }
.quiet-book #bookKept { margin-top: 24px; }
.book-reader { scroll-margin-top: 12px; }
@media(min-width:1600px) { .quiet-chapter .stage { height: 480px; } }
@media(max-width:700px) {
  .quiet-chapter .mast,.quiet-book .mast { min-height: 68px; }
  .quiet-chapter h1 { font-size: 34px; max-width: 360px; margin-top: 10px; }
  .quiet-chapter .stage { height: 280px; }
  .quiet-chapter .said { font-size: 21px; min-height: 60px; }
  .quiet-chapter .conversation { max-width: 520px; }
  .current-choices { gap: 6px; }
  .choice,.current-choices .btn { font-size: 14px; padding: 9px 10px; }
  .choice b { font-size: 15px; }
  .quiet-book .cover-page { padding-top: 12px; }
  .keepsake-cover { width: 300px; min-height: 404px; padding: 24px; gap: 20px; }
  .cover-title { font-size: 37px; }
  .reader-toolbar { gap: 2px; }
  .download-book { font-size: 12px; gap: 6px; padding: 6px; }
  .quiet-book .leaf:not(.empty) { grid-template-columns: 1fr; }
  .quiet-book .leaf h2 { font-size: 30px; }
  .quiet-book .leaf .scene { margin: 10px 0; }
  .quiet-book .leaf .account { margin-top: 12px; }
  .quiet-book .leaf .account p { font-size: 19px; }
  .ledger-dialog .readout { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:360px) { .quiet-chapter h1 { font-size: 30px; }.quiet-chapter .stage { height: 230px; }.quiet-chapter .said{font-size:20px}.choice b{font-size:14px}.choice span{font-size:11px}.keepsake-cover{min-height:380px}.cover-title{font-size:34px} }
@media(max-height:650px) and (max-width:1000px) { .quiet-chapter .stage { height: 150px; }.quiet-chapter h1{font-size:28px} }
@media(prefers-reduced-motion:reduce) { .keepsake-cover,.keepsake-cover:hover { transition:none;transform:none } }

/* ------------------------------------------------------------ the mission */
.mission .mission-world { max-width: none; padding: 0; }
.mission-eye { text-align: center; margin-top: 6px; }
.mission-title { text-align: center; font-size: clamp(30px, 4vw, 44px); margin: 4px auto 12px; }
.mission-stage { width: 100%; }
.mission .stage { height: min(72svh, 820px); aspect-ratio: auto; border-radius: 0; max-height: none; }
.mission-readout { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: center; padding: 10px 16px; border-block: 1px solid var(--line); font: 14px/1.4 var(--sans); color: var(--ink-soft); }
.mission-readout b { font: 500 20px/1 var(--serif); color: var(--ink); margin-left: 6px; }
.story-strip { max-width: 780px; padding-block: 20px 48px; display: grid; gap: 18px; }
.story-strip .beat { margin-top: 0; text-align: center; justify-items: center; }
.story-strip .choice-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.card { border: 1.5px solid var(--ink); border-radius: 14px; background: #fff; padding: clamp(18px, 3vw, 28px); display: grid; gap: 16px; text-align: center; box-shadow: 0 10px 30px rgba(23, 58, 50, .08); }
.card[hidden] { display: none; }
.card-eye { font: 500 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--oxblood); }
.card-lines p { font: 500 clamp(22px, 2.6vw, 30px)/1.3 var(--serif); }
.card-choices { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.card-choice { min-width: 120px; min-height: 60px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--ink); color: var(--paper); font: 500 26px/1 var(--serif); padding: 12px 22px; }
.card-choice:hover { transform: translateY(-2px); }
.card-choice[aria-pressed="true"] { background: transparent; color: var(--oxblood); border-color: var(--oxblood); }
.card-hint { min-height: 60px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: transparent; padding: 12px 18px; font: 500 16px/1.2 var(--sans); }
.card-hint:disabled { opacity: .5; }
.card-hint { display: inline-flex; align-items: center; gap: 8px; }
.card-hint img { width: 18px; height: 18px; }
.card-note { min-height: 22px; font: 15px/1.5 var(--sans); color: var(--ink-soft); }
/* The semantic equation, from the engine's numbers: clear, large, its own line, with a quiet caption. Accessible text, never baked into the scene. */
.card-equation { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 0; font: 500 clamp(30px, 4vw, 44px)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.card-equation .eq-op { color: var(--ink-soft); font-size: .8em; }
.card-equation .eq-unknown { color: var(--oxblood); }
.card-caption { margin: 2px 0 6px; font: 500 13px/1.4 var(--sans); letter-spacing: .02em; color: var(--ink-soft); }
/* The closing equation on the child stage: what stayed plus the sales is the drawer at closing. Same grammar as the sum, never a table. */
.close-equation { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 2px; font: 500 clamp(28px, 3.6vw, 40px)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.close-equation .eq-op { color: var(--ink-soft); font-size: .8em; }
.close-equation .eq-total { color: var(--oxblood); }
.close-caption { margin: 0 0 8px; font: 500 13px/1.4 var(--sans); color: var(--ink-soft); }
.mission .said { text-align: center; padding: 0; min-height: 26px; }
@media (max-width: 640px) {
  .mission .stage { height: min(62svh, 560px); }
  .card-choice { min-width: 100px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .card-choice:hover { transform: none; } }

/* ---------------------------------------------------------- the northstar */
.northstar .mast { justify-content: flex-start; }
.northstar .hero { padding: 26px 0 18px; }
.northstar .hero-copy { max-width: 900px; }
.northstar .hero-copy h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.08; margin-bottom: 14px; }
.northstar .hero-copy .sub { margin: 0 auto; max-width: 720px; font: 19px/1.5 var(--sans); color: var(--ink); }
.northstar .hero-copy .promise { margin: 10px auto 0; max-width: 720px; font: 500 19px/1.5 var(--serif); color: var(--ink); }
.founder-note { margin: 22px auto 24px; max-width: 560px; padding: 16px 20px; border-left: 3px solid var(--oxblood); text-align: left; background: color-mix(in srgb, var(--paper-2) 60%, transparent); border-radius: 0 10px 10px 0; }
.founder-lead { font: 500 19px/1.4 var(--serif); }
.founder-body { margin-top: 6px; font: 17px/1.5 var(--sans); color: var(--ink); }
.founder-sign { margin-top: 8px; }
.scene-try-line { text-align: center; margin: -4px 0 8px; }
.scene-try { font: 500 14px/1 var(--sans); }
/* The intake and the founder's desk: one column, quiet. */
.intake-main { max-width: 640px; padding-block: 24px 64px; display: grid; gap: 18px; }
.intake h1 { font-size: clamp(30px, 4vw, 42px); }
.panel { border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; padding: 20px 22px; display: grid; gap: 12px; }
.panel[hidden] { display: none; }
.stack { display: grid; gap: 12px; }
.stack label { display: grid; gap: 6px; font: 500 15px/1.4 var(--sans); }
.stack input, .stack select, .stack textarea { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line-strong); border-radius: 10px; font: 17px/1.3 var(--sans); background: #fff; color: var(--ink); }
.stack textarea { resize: vertical; }
.cta-row.left { justify-content: flex-start; align-items: center; }
.text-link { background: none; border: 0; color: var(--oxblood); font: 500 15px/1.3 var(--sans); text-decoration: underline; cursor: pointer; padding: 6px 0; }
.more summary { cursor: pointer; font: 500 15px/1.4 var(--sans); }
.more { display: grid; gap: 12px; }
.founder-line { margin-top: -6px; }
.family .prose { font-size: 17px; }
.connection { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--oxblood); background: color-mix(in srgb, var(--paper-2) 60%, transparent); border-radius: 0 10px 10px 0; text-align: left; }
.connection p { font: 16px/1.5 var(--sans); }
.connection .eye { margin-bottom: 6px; }
.note { font: 500 18px/1.45 var(--serif); color: var(--ink); border-left: 3px solid var(--oxblood); padding-left: 12px; text-align: left; }
.northstar .hero-copy .small { margin: 12px 0 22px; }
.parent-line { color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.primer-day { max-width: none; }
.primer-day .scene-label { text-align: center; margin: 6px 0 8px; }
.primer-day .stage { height: min(66svh, 720px); max-height: none; aspect-ratio: auto; border-radius: 0; }
.scene-strip { display: grid; gap: 14px; justify-items: center; padding-block: 14px 8px; max-width: 760px; }
.beat-line { text-align: center; font: 500 19px/1.4 var(--serif); min-height: 28px; }
.beat-line.small { font: 14px/1.5 var(--sans); min-height: 22px; }
.landing-card { width: 100%; max-width: 640px; }
.pain { padding-block: 64px; }
.pain-lines { max-width: 760px; text-align: center; display: grid; gap: 6px; }
.pain-lines p { font: 400 clamp(20px, 2.4vw, 28px)/1.4 var(--serif); color: var(--ink-soft); }
.pain-lines .strong { color: var(--ink); font-weight: 500; margin-top: 10px; }
.flow { padding-block: 56px; }
.flow-line { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; counter-reset: node; }
.flow-line::before { content: ""; position: absolute; left: 10%; right: 10%; top: 14px; height: 1px; background: var(--line-strong); }
.node { position: relative; text-align: center; padding-top: 40px; font: 500 15px/1.35 var(--serif); color: var(--ink-faint); transition: color .4s; }
.node::before { content: ""; position: absolute; left: 50%; top: 6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line-strong); transition: background .4s, border-color .4s, transform .4s; }
.node.lit { color: var(--ink); }
.node.lit::before { background: var(--oxblood); border-color: var(--oxblood); transform: scale(1.15); }
.flow-next { text-align: center; margin: 22px auto 0; max-width: 720px; min-height: 22px; }
.audiences .two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1100px; }
.audiences .prose { margin-top: 12px; font-size: 21px; }
.invitation { text-align: center; }
.invitation-inner h2 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 26px; }
@media (max-width: 1000px) { .flow-line { grid-template-columns: repeat(5, minmax(0, 1fr)); } .node { font-size: 13px; } }
@media (max-width: 640px) {
  .primer-day .stage { height: min(58svh, 520px); }
  .audiences .two { grid-template-columns: 1fr; gap: 28px; }
  .flow-line { grid-template-columns: 1fr; gap: 10px; padding-left: 26px; }
  .flow-line::before { left: 33px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .node { text-align: left; padding: 6px 0 6px 28px; }
  .node::before { left: 0; top: 50%; margin: -8px 0 0 0; }
}
@media (prefers-reduced-motion: reduce) { .node, .node::before { transition: none; } }
/* The landing's card sits on the scene on wide screens, so the sum, the choice and the world are one picture. */
@media (min-width: 1001px) {
  .primer-day .stage { position: relative; }
  .primer-day .scene-strip { position: absolute; left: 3%; bottom: 28px; width: min(440px, 40%); padding: 0; align-items: stretch; justify-items: stretch; z-index: 2; pointer-events: none; }
  .primer-day .scene-strip > * { pointer-events: auto; }
  .primer-day .beat-line { text-align: left; background: color-mix(in srgb, var(--paper) 88%, transparent); padding: 8px 12px; border-radius: 8px; }
  .primer-day .landing-card { max-width: none; text-align: left; }
  .primer-day .landing-card .card-choices { justify-content: flex-start; }
  .primer-day { position: relative; }
}
.account .observed { font: 16px/1.5 var(--sans); color: var(--ink-soft); border-left: 2px solid var(--oxblood); padding-left: 12px; }
.takeaway .next-check { font: 500 18px/1.4 var(--serif); margin-top: 6px; }
.takeaway > div + div { margin-top: 16px; }

/* On wide screens the story strip sits on the scene, so the sum, the choice and the world are one picture. */
@media (min-width: 1001px) {
  .mission-stage { position: relative; }
  .mission .story-strip { position: absolute; left: 3%; bottom: 64px; width: min(480px, 42%); max-width: none; padding: 0; z-index: 2; gap: 12px; justify-items: stretch; }
  .mission .story-strip .beat { text-align: left; justify-items: start; background: color-mix(in srgb, var(--paper) 90%, transparent); padding: 12px 14px; border-radius: 10px; }
  .mission .story-strip .beat p { font-size: 19px; }
  .mission .story-strip .card { text-align: left; }
  .mission .story-strip .card-choices { justify-content: flex-start; }
  .mission .said { text-align: left; background: color-mix(in srgb, var(--paper) 90%, transparent); padding: 8px 12px; border-radius: 8px; }
  .mission .stage { height: min(72svh, 820px); }
}

/* ------------------------------------------------------- the vocal mission */
.vocal .mission-title { font-size: clamp(24px, 3vw, 34px); margin: 2px auto 8px; }
.vocal .stage { height: min(74svh, 860px); }
.captions { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; z-index: 3; }
.captions[hidden] { display: none; }
.captions p { display: inline-block; max-width: min(720px, 92%); background: rgba(23, 58, 50, .86); color: #fff; padding: 8px 14px; border-radius: 8px; font: 500 clamp(18px, 1.6vw, 22px)/1.35 var(--serif); text-align: center; min-height: 1.35em; }
.captions p:empty { display: none; }
.captions .cw { display: inline; opacity: .55; transition: opacity .25s, color .25s; }
.captions .cw-done { opacity: .85; }
.captions .cw-now { opacity: 1; color: #f4d35e; }
/* Response controls are tucked while Sam speaks and revealed at a question. */
.responses { display: contents; }
.responses[hidden] { display: none; }
.story-strip[data-await="none"] .card-choices, .story-strip[data-await="none"] .card-hint { visibility: hidden; }
/* The tray: two zones apart by position, label and colour; the purchase below, a different unit. */
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zone { border-radius: 10px; padding: 10px; min-height: 96px; }
.zone-drawer { background: color-mix(in srgb, var(--ink) 8%, #fff); border: 1.5px solid var(--ink); }
.zone-cups { background: color-mix(in srgb, #B66A36 12%, #fff); border: 1.5px dashed #B66A36; }
.zone-label { font: 500 12px/1.3 var(--sans); margin-bottom: 8px; color: var(--ink); }
.zone-cups .zone-label { color: #7a4a2b; }
.zone .tray { justify-content: flex-start; min-height: 52px; }
.zone-cups .coin { background: #f4ecd8; border-color: #B66A36; }
.purchase { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 14px/1.4 var(--sans); }
.purchase .buys { font: 500 14px/1 var(--sans); color: #7a4a2b; }
.purchase .cups-row { letter-spacing: 3px; color: var(--ink); font-size: 18px; }
.atlas-comparison { border-collapse: collapse; width: 100%; font: 14px/1.4 var(--sans); }
.atlas-comparison th, .atlas-comparison td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.atlas-comparison thead th { font-size: 12px; color: var(--oxblood); }
.atlas-comparison td.differs { font-weight: 600; color: var(--ink); }
.voice-bar { display: grid; gap: 10px; justify-items: center; margin-top: 4px; }
.mic { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; min-width: 200px; padding: 12px 22px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 18px/1 var(--sans); cursor: pointer; }
.mic:disabled { opacity: .5; cursor: default; }
.mic .mic-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--paper); }
.mic.live { background: var(--oxblood); border-color: var(--oxblood); }
.mic.live .mic-dot { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
.mic-state { text-align: center; max-width: 46ch; }
.text-form { display: flex; gap: 8px; width: 100%; max-width: 480px; }
.text-form input { flex: 1; min-height: 48px; padding: 8px 14px; border: 1.5px solid var(--line-strong); border-radius: 10px; font: 17px/1.3 var(--sans); background: #fff; color: var(--ink); }
.text-form input:focus { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.voice-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* The secondary accessibility control: reading and listening options, quiet and collapsed, the microphone opt-in inside it. */
.access-controls { width: 100%; max-width: 480px; }
.access-controls > summary { list-style: none; cursor: pointer; font: 500 14px/1.5 var(--sans); color: var(--ink-soft); text-align: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; min-height: 40px; }
.access-controls > summary::-webkit-details-marker { display: none; }
.access-controls > summary:hover, .access-controls > summary:focus-visible { color: var(--oxblood); border-color: var(--line-strong); }
.access-controls[open] > summary { margin-bottom: 12px; }
.access-tools { display: grid; gap: 10px; justify-items: center; }
.voice-tools .tool, .text-form .tool, .card-hear { min-height: 44px; padding: 8px 14px; }
.voice-tools .tool[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.transcript { text-align: center; min-height: 20px; }
.break-note { display: flex; gap: 10px; align-items: center; justify-content: center; }
.break-note[hidden] { display: none; }
/* While the sum is on the card, Sam's spoken line is the story; the written beat would only repeat it above the question. */
.vocal .story-strip .beat[data-beat="card"] { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Atlas objects: one quiet object at a time, in the site's ink. */
.atlas-host { border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; padding: 14px 16px; display: grid; gap: 10px; }
.mission-stage .atlas-host { margin: 12px auto 0; max-width: 560px; }
.atlas-host[hidden] { display: none; }
.live-check { border: 1px dashed var(--line-strong); border-radius: 8px; padding: 8px 12px; }
.live-check[hidden] { display: none; }
.live-check pre { white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; font: 12px/1.4 var(--mono); }
.atlas-name { font: 500 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--oxblood); }
.atlas-hint { text-align: center; }
.atlas-tray .tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.coin { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ink); background: #e8c64b; color: var(--ink); font: 500 18px/1 var(--serif); transition: transform .3s, opacity .3s; }
.coin.to-cups { background: #f4ecd8; border-style: dashed; }
.coin.counted { outline: 3px solid var(--oxblood); outline-offset: 2px; }
.coin.out { transform: scale(.55); opacity: .3; filter: grayscale(1); }
.atlas-slide { justify-self: center; }
.atlas-bar { display: grid; gap: 8px; }
.atlas-bar .bar { display: flex; min-height: 44px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--ink); font: 500 17px/1 var(--serif); }
.atlas-bar .whole span { flex: 1; display: grid; place-items: center; background: var(--ink); color: var(--paper); }
.atlas-bar .parts span { display: grid; place-items: center; }
.atlas-bar .spent { background: #e8c64b; }
.atlas-bar .rest { background: #f4ecd8; }
.atlas-bar .rest.unknown { background: repeating-linear-gradient(45deg, #f4ecd8, #f4ecd8 8px, #fff 8px, #fff 16px); }
.atlas-line .line { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tick { width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: #fff; font: 500 17px/1 var(--serif); }
.tick.start { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tick.counted { outline: 3px solid var(--oxblood); outline-offset: 1px; }
.tick.landing { background: #e8c64b; }
.atlas-frame { display: grid; grid-template-columns: repeat(5, 40px); gap: 6px; justify-content: center; }
.atlas-frame .cell { width: 40px; height: 40px; border: 1.5px solid var(--ink); border-radius: 6px; background: #fff; }
.atlas-frame .cell.full { background: #e8c64b; }
.atlas-graph { display: grid; gap: 8px; }
.atlas-graph .row { display: grid; grid-template-columns: 9em 1fr auto; gap: 10px; align-items: center; font: 15px/1.3 var(--sans); }
.atlas-graph .bar { display: block; height: 22px; background: var(--ink); border-radius: 4px; min-width: 4px; }
.atlas-graph b { font: 500 17px/1 var(--serif); }
.atlas-timeline { margin: 0; padding-left: 20px; font: 16px/1.5 var(--sans); }
@media (max-width: 640px) {
  .vocal .stage { height: min(56svh, 520px); }
  .captions p { font-size: 17px; padding: 6px 10px; }
  .mic { min-width: 0; width: 100%; justify-content: center; }
  .coin { width: 44px; height: 44px; }
}
@media (min-width: 1001px) {
  /* The strip lives inside the main column, between the stage's top and the readout, so it never climbs over the masthead or covers the readout. Its content sits low, beside the scene, and a tall strip scrolls inside itself. */
  .vocal main.mission-world { position: relative; }
  .vocal .story-strip { top: 40px; bottom: 52px; width: min(520px, 44%); max-height: none; gap: 10px; align-content: end; overflow-y: auto; overscroll-behavior: contain; pointer-events: none; }
  .vocal .story-strip > * { pointer-events: auto; }
  /* Sam's line keeps its content height inside the fixed box; the mobile reservation would let the grid squeeze it. */
  .vocal .story-strip .said { min-height: auto; }
  .vocal .story-strip .card { padding: 14px 18px; gap: 8px; }
  .vocal .story-strip .card-lines p { font-size: clamp(20px, 1.6vw, 22px); }
  /* The Atlas object stands on the stage, to the right of the story, where the world it explains is. */
  .vocal .mission-stage .atlas-host { position: absolute; right: 3%; top: 0; width: min(520px, 40%); max-height: calc(100% - 140px); overflow-y: auto; z-index: 2; box-shadow: 0 10px 30px rgba(23, 58, 50, .1); }
  .vocal .story-strip .beat[data-beat="closed"] .q { display: none; }
  .vocal .captions { left: calc(3% + min(520px, 44%) + 16px); right: 16px; justify-content: center; }
  .vocal .voice-bar { background: color-mix(in srgb, var(--paper) 92%, transparent); padding: 10px 12px; border-radius: 10px; justify-items: stretch; }
  .vocal .mic-state { text-align: left; max-width: none; }
  .vocal .transcript { text-align: left; }
  .vocal .voice-tools { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .mic.live .mic-dot { animation: none; } .coin { transition: none; } }

/* Never silent: a clear "Your turn" prompt with a subtle pulse at the thinking moment. */
.your-turn { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font: 500 15px/1.4 var(--sans); color: var(--oxblood); }
.your-turn[hidden] { display: none; }
.yt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--oxblood); animation: ytpulse 1.6s ease-in-out infinite; }
@keyframes ytpulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .yt-dot { animation: none; } }
/* The child-sized afternoon summary: one row per scene event, picture-led, in the money grammar. Never a dense spreadsheet. */
.afternoon-summary { border-collapse: collapse; width: 100%; max-width: 460px; margin: 8px 0 12px; font: 15px/1.4 var(--sans); }
.afternoon-summary tr { border-bottom: 1px solid var(--line); }
.afternoon-summary th { text-align: left; font: 500 14px/1.4 var(--sans); color: var(--ink-soft); padding: 8px 10px 8px 0; width: 5.5em; }
.afternoon-summary td { padding: 8px 0; vertical-align: middle; }
.afternoon-summary .s-number { text-align: right; font: 500 18px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.afternoon-summary tr[data-row="closing"] .s-number { color: var(--oxblood); }
.s-icons { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; max-width: 220px; }
.s-note { width: 15px; height: 10px; border-radius: 2px; background: #3c6e47; border: 1px solid rgba(0,0,0,.15); }
.s-note.spent { background: color-mix(in srgb, var(--oxblood) 70%, #fff); }
.s-note.coin { width: 12px; height: 12px; border-radius: 50%; background: #d8b13f; }
.s-cup { width: 9px; height: 12px; border-radius: 0 0 4px 4px; background: #e7e0cf; border: 1px solid rgba(0,0,0,.15); }
/* Row by row: each row fades and slides in when the summary appears, in order. */
.afternoon-summary .s-row { animation: srow .4s both; animation-delay: calc(var(--i) * .5s + .2s); }
@keyframes srow { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .afternoon-summary .s-row { animation: none; } }

/* Dragon World, Slice A scene + story strip. Slice B replaces the SVG stub with
   a bespoke voxel castle, dragons, and battlefield behind the same interface. */
.dragon-world .dragon-scene { position: absolute; inset: 0; }
.dragon-scene-svg { width: 100%; height: 100%; display: block; }
.dragon-scene-svg[data-animate="summon"] .dragon-formation { animation: dragon-rise .6s ease both; }
.dragon-scene-svg[data-animate="repel"] .dragon-invaders { animation: dragon-fade .6s ease both; }
@keyframes dragon-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dragon-fade { from { opacity: 1; } to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .dragon-scene-svg * { animation: none !important; } }
.dragon-world .atlas-host { font: 14px/1.4 var(--sans); color: var(--ink-soft); padding: 6px 0; }
.dragon-world #dragonWho { color: var(--oxblood); }

/* Dragon World representations (dragon-atlas.js): the equation shown as MathML
   and as grouped place-value bundles, with the bar and number-line hints. */
.dragon-atlas { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; max-width: 360px; }
.dragon-atlas math { font: 500 22px/1.2 var(--serif); color: var(--ink); }
.dbundles { display: flex; flex-wrap: wrap; gap: 4px; }
.dbundle { width: 20px; height: 20px; border-radius: 3px; background: #cda06a; border: 1px solid rgba(23,58,50,.18); }
.dbundle.taken { background: transparent; border: 1px dashed var(--line-strong); opacity: .55; }
.datlas-note { font: 13px/1.4 var(--sans); color: var(--ink-soft); margin: 0; }
.dbar { position: relative; height: 26px; background: #EAD9B8; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; }
.dbar-spent { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--oxblood) 32%, #EAD9B8); }
.dbar-label { position: relative; display: block; text-align: center; font: 500 13px/26px var(--sans); color: var(--ink); }
.dline { position: relative; height: 34px; }
.dline-track { position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: var(--line-strong); }
.dline-jump { position: absolute; top: 8px; height: 12px; border: 2px solid var(--oxblood); border-bottom: 0; border-radius: 8px 8px 0 0; }
.dline-end { position: absolute; top: 20px; font: 12px/1 var(--mono); color: var(--ink-soft); }
.dline-0 { left: 0; } .dline-max { right: 0; }

/* Dragon World stage: give the voxel scene a framed box with real height. */
.dragon-world .stage { background: linear-gradient(180deg, #dfe7ec 0%, #eef1e6 62%, #e7ecdd 100%); }
.dragon-world .dragon-scene { position: absolute; inset: 0; }
.dragon-world .dragon-scene canvas { display: block; }

/* Dragon World, the parent chapter after the mission: the learning thread as
   quiet chips, one engine-backed line, the next check, and the step-by-step
   account. No mastery bar, no diagnosis. */
.dragon-parent { position: relative; z-index: 2; background: var(--paper); max-width: 720px; margin-inline: auto; padding-block: 24px 48px; display: grid; gap: 12px; border-top: 1px solid var(--line); }
.dragon-parent h2 { font: 500 24px/1.2 var(--serif); margin: 0; }
.dragon-parent > p { margin: 0; }
.dragon-chips { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dragon-chip { font: 500 13px/1 var(--sans); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.dragon-thread-line { font: 15px/1.5 var(--sans); color: var(--ink-soft); }
.dragon-next { font: 500 15px/1.5 var(--sans); color: var(--ink); }
.dragon-account { font: 14px/1.5 var(--sans); color: var(--ink-soft); }
.dragon-account ol { margin: 8px 0 0 18px; padding: 0; }
.dragon-account li { margin-bottom: 6px; }
/* Book boot guard: hide the book until it decides between the sign-in gate and
   the loaded book, so the default cover never flashes as stale content. */
.book-boot { display: none; }
body.is-booting .book-boot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 60vh; color: var(--ink-soft); font: 16px/1.5 var(--sans); }
body.is-booting .book-main { visibility: hidden; }
body.account-gated .book-main { display: none; }
body.account-gated .book-boot { display: none; }

/* ============================================================
   Clean child-facing mission (family-atelier, item 1): the voxel scene is the
   hero and stays uncovered; the equation, the answer boxes and the controls sit
   in one calm column below it; the only thing over the scene is the short,
   cross-faded caption. This deliberately overrides the earlier desktop rules
   that floated the whole story strip on top of the scene.
   ============================================================ */
/* The equation-only panel: white, roomy, tabular, so carries and columns read clearly. */
.eq-panel { display: inline-flex; align-items: baseline; gap: 14px; margin: 0 auto; padding: 12px 28px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(23, 58, 50, .06); font: 500 clamp(30px, 5vw, 46px)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.eq-panel .eq-op { color: var(--ink-soft); font-size: .8em; }
.eq-panel .eq-unknown { color: var(--oxblood); }
/* The small replay-the-scene icon, beside Ask for a hint. */
.card-replay { min-width: 56px; justify-content: center; font-size: 0; }
.card-replay .replay-ico { font-size: 24px; line-height: 1; }
/* The landing's single call to action: A day in the Primer. */
.scene-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 clamp(15px, 1.6vw, 18px)/1 var(--sans); color: var(--oxblood); text-decoration: none; text-underline-offset: 6px; }
.scene-cta:hover, .scene-cta:focus-visible { text-decoration: underline; }
.scene-cta .arrow { font-size: .9em; }
/* The Lemonade mission page only (never Dragon, which shares .mission .vocal but
   keeps its released layout): the strip is a normal column below the scene, not
   an overlay. The :not(.dragon-world) guard leaves Dragon exactly as shipped. */
.mission:not(.dragon-world) .story-strip, .vocal:not(.dragon-world) .story-strip {
  position: static; inset: auto; width: 100%; max-width: 620px; margin: 0 auto;
  padding: 14px 16px 32px; gap: 16px; z-index: auto; max-height: none; overflow: visible;
  pointer-events: auto; justify-items: center; align-content: start; text-align: center;
}
.mission:not(.dragon-world) .story-strip > *, .vocal:not(.dragon-world) .story-strip > * { pointer-events: auto; }
.mission:not(.dragon-world) .story-strip .beat, .vocal:not(.dragon-world) .story-strip .beat { text-align: center; justify-items: center; background: none; padding: 0; }
.mission:not(.dragon-world) .story-strip .beat p, .vocal:not(.dragon-world) .story-strip .beat p { font-size: clamp(17px, 1.6vw, 19px); }
/* Sam's spoken line lives once, as the caption over the scene; the echoed line below is not repeated. */
.vocal:not(.dragon-world) .story-strip .said { display: none; }
/* The card is no longer a boxed blob: a plain column holding the equation panel and the boxes. */
.mission:not(.dragon-world) .story-strip .card, .vocal:not(.dragon-world) .story-strip .card { border: none; background: none; box-shadow: none; padding: 0; gap: 16px; justify-items: center; text-align: center; }
.mission:not(.dragon-world) .story-strip .card-choices, .vocal:not(.dragon-world) .story-strip .card-choices { justify-content: center; }
/* The caption returns to the middle of the scene, short and centered. */
.vocal:not(.dragon-world) .captions { left: 0; right: 0; justify-content: center; }
/* The atlas manipulative sits below the scene with the equation, never floating over it. */
.vocal:not(.dragon-world) .mission-stage .atlas-host, .mission:not(.dragon-world) .mission-stage .atlas-host { position: static; inset: auto; width: 100%; max-width: 560px; margin: 12px auto 0; box-shadow: none; }
/* The scene stays the hero (the largest thing on the page) while leaving room
   for the equation and the answer boxes in view at the question. */
.mission:not(.dragon-world) .stage, .vocal:not(.dragon-world) .stage { height: min(52svh, 600px); }
.mission:not(.dragon-world) .mission-title, .vocal:not(.dragon-world) .mission-title { margin-block: 4px; }

/* ---------------------------------------------------------------------------
   The first-access diagnostic: a quiet, child-sized setup on the book page.
   One question at a time, plain words and buttons. Book-only classes; nothing
   here touches the mission or Dragon strips.
   --------------------------------------------------------------------------- */
.diagnostic { display: block; padding: 8px 0 40px; }
.diagnostic[hidden] { display: none; }
.diagnostic-card { max-width: var(--measure); margin: 0 auto; display: grid; gap: 16px; }
.diagnostic-card h1 { font: 600 clamp(26px, 4vw, 34px)/1.15 var(--serif); margin: 2px 0 0; }
.diag-progress { color: var(--ink-faint); font-family: var(--mono); letter-spacing: .04em; margin: 0; }
.diag-help { color: var(--ink-soft); margin: 0; max-width: var(--measure); }
.diag-note { color: var(--oxblood); min-height: 1.2em; margin: 4px 0 0; }
.diag-back { color: var(--ink-faint); margin-top: 8px; }
.diagnostic-card input[type="text"], .diagnostic-card select { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); font: 400 18px var(--sans); }
.diagnostic-card input[type="text"]:focus-visible, .diagnostic-card select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.diagnostic-card label { font: 500 15px var(--sans); color: var(--ink-soft); }
.diag-choices { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.diag-choice, .diag-chip { min-height: 52px; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); font: 500 17px var(--sans); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.diag-choice:hover, .diag-chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.diag-choice:focus-visible, .diag-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.diag-choice.chosen, .diag-chip.chosen { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.diag-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.diag-count { color: var(--ink-faint); margin: 2px 0 0; }
.diag-review { display: grid; gap: 2px; margin: 8px 0; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.diag-review-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.diag-review-row:last-child { border-bottom: 0; }
.diag-review-row .eye { display: block; margin-bottom: 4px; }
.diag-review-row p { margin: 0; font: 500 17px var(--sans); }
.diag-change { margin: 0; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .diag-choice, .diag-chip { transition: none; } }

/* ---------------------------------------------------------------------------
   Dragon World: the live castle-safety meter. A readable graphical gauge fed
   only by the engine's battle-moment aggregates; the page tweens the fill
   through intermediate values. Dragon-scoped; nothing here touches the shop.
   --------------------------------------------------------------------------- */
.dragon-world .siege-meter { display: grid; gap: 8px; padding: 10px 16px; border-block: 1px solid var(--line); }
.dragon-world .meter-row { display: flex; align-items: center; gap: 12px; justify-content: center; font: 500 13px/1.2 var(--sans); color: var(--ink-soft); }
.dragon-world .meter-label { min-width: 88px; text-align: right; }
.dragon-world .meter-track { position: relative; flex: 1; max-width: 320px; height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--oxblood) 22%, var(--paper)); overflow: hidden; border: 1px solid var(--line-strong); }
.dragon-world .meter-fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--leaf), #9cbf74); transition: none; }
.dragon-world .meter-row b { min-width: 62px; font: 500 16px/1 var(--serif); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .dragon-world .meter-fill { transition: none; } }

/* Dragon World chapter surfaced in the family's book (the book is not in the
   dragon-world scope; the chip/thread/next classes above are unscoped). */
.dragon-book { max-width: 720px; margin: 24px auto 0; padding: 20px 22px; display: grid; gap: 12px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; }
.dragon-book[hidden] { display: none; }
.dragon-book h2 { font: 500 24px/1.2 var(--serif); margin: 0; }
.dragon-book > p { margin: 0; }