/* ===================================================================
   presentation.css  -  the deck

   Namespace: .tr-*   It styles nothing else - not the application, not
   the demo shell, not the tutorial.

   Three parts and no more: a big picture, key points along the bottom,
   a transport. The picture is measured once and never rescales per
   beat, because a box that changes size between beats is how a pointer
   starts missing what it points at.

   The picture is one of three things: words, a spreadsheet, or a real
   screen of the application. The three share one frame and one set of
   tokens, so the deck does not look like three decks.

   NOTHING LOOPS. The only repeating animation in this file is a text
   caret, and it is given three blinks and then told to stop.

   Light and dark, both at AA contrast. Keyboard operable, focus
   visible, reduced motion respected. No external images, no emoji.
   =================================================================== */

.tr-root,
.tr-root *,
.tr-root *::before,
.tr-root *::after { box-sizing: border-box; }

body.tr-locked { overflow: hidden; }

/* ── tokens ──────────────────────────────────────────────────────── */
.tr-root {
  --tr-bg: #f3f5f8;
  --tr-panel: #ffffff;
  --tr-ink: #10161a;
  --tr-ink2: #4a5761;
  --tr-edge: #d4dbe2;
  --tr-accent: #16603c;
  --tr-accent-ink: #ffffff;
  --tr-focus: #1a73c7;
  --tr-dim: #8c98a3;
  --tr-cite: #5b3a86;
  --tr-no: #8d2f2f;

  /* the spreadsheet. Deliberately not our green: it is the other
     thing, and it should not borrow our identity. */
  --tr-sheet: #ffffff;
  --tr-sheet-head: #eef1f4;
  --tr-sheet-line: #d3d9df;
  --tr-sheet-ink: #1d262c;
  --tr-sheet-dim: #6d7880;
  --tr-sel: #2f5470;

  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  background: var(--tr-bg);
  color: var(--tr-ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .tr-root:not([data-theme="light"]) {
    --tr-bg: #0f1419;
    --tr-panel: #171d23;
    --tr-ink: #eef2f6;
    --tr-ink2: #adb9c4;
    --tr-edge: #303941;
    --tr-accent: #5fd39a;
    --tr-accent-ink: #0b130f;
    --tr-focus: #79b8ff;
    --tr-dim: #7c8894;
    --tr-cite: #c3a8e6;
    --tr-no: #e59090;

    --tr-sheet: #1b2229;
    --tr-sheet-head: #232c34;
    --tr-sheet-line: #39434c;
    --tr-sheet-ink: #e4eaef;
    --tr-sheet-dim: #97a3ad;
    --tr-sel: #8fb6d8;
  }
}
.tr-root[data-theme="dark"] {
  --tr-bg: #0f1419;
  --tr-panel: #171d23;
  --tr-ink: #eef2f6;
  --tr-ink2: #adb9c4;
  --tr-edge: #303941;
  --tr-accent: #5fd39a;
  --tr-accent-ink: #0b130f;
  --tr-focus: #79b8ff;
  --tr-dim: #7c8894;
  --tr-cite: #c3a8e6;
  --tr-no: #e59090;

  --tr-sheet: #1b2229;
  --tr-sheet-head: #232c34;
  --tr-sheet-line: #39434c;
  --tr-sheet-ink: #e4eaef;
  --tr-sheet-dim: #97a3ad;
  --tr-sel: #8fb6d8;
}

.tr-root :focus-visible {
  outline: 2px solid var(--tr-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.tr-ico { display: block; flex: 0 0 auto; }
.tr-mark { display: block; color: var(--tr-accent); flex: 0 0 auto; }

/* ── head ────────────────────────────────────────────────────────── */
.tr-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tr-edge);
  background: var(--tr-panel);
}
.tr-brand { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tr-brandn { font-weight: 600; font-size: 14px; letter-spacing: .01em; }
.tr-chap {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--tr-ink2);
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tr-x {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--tr-edge);
  border-radius: 7px;
  background: transparent;
  color: var(--tr-ink2);
  cursor: pointer;
}
.tr-x:hover { color: var(--tr-ink); border-color: var(--tr-ink2); }

/* ── the picture ────────────────────────────────────────────────── */
.tr-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tr-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-box > * { max-height: 100%; }
.tr-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* the entry move: a short rise, nothing more */
.tr-card,
.tr-scene,
.tr-word,
.tr-chapter,
.tr-gridbeat,
.tr-vs { transition: opacity 260ms ease, transform 260ms ease; }
.tr-enter { opacity: 0; transform: translateY(10px); }
.tr-enter.tr-enter--back { transform: translateY(-10px); }

/* the two small primitives every word beat is made of */
.tr-w,
.tr-fade {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.2, .7, .3, 1);
}
.tr-w { display: inline-block; }
.tr-w.on,
.tr-fade.on { opacity: 1; transform: none; }

.tr-rule {
  width: 0;
  height: 2px;
  margin: 22px auto 0;
  background: var(--tr-accent);
  border-radius: 2px;
  transition: width 700ms cubic-bezier(.2, .7, .3, 1);
}
.tr-rule.on { width: 92px; }
.tr-rule--wide.on { width: min(420px, 60%); }

/* ── cards ───────────────────────────────────────────────────────── */
.tr-card {
  width: min(880px, 100%);
  max-height: 100%;
  overflow: auto;
  background: var(--tr-panel);
  border: 1px solid var(--tr-edge);
  border-radius: 14px;
  padding: 44px 48px;
  text-align: center;
  box-shadow: 0 8px 28px rgba(15, 26, 36, .08);
}
@media (prefers-color-scheme: dark) {
  .tr-root:not([data-theme="light"]) .tr-card { box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
}
.tr-root[data-theme="dark"] .tr-card { box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }

.tr-cardmark { display: flex; justify-content: center; margin-bottom: 18px; }
.tr-cardmark .tr-mark { width: 44px; height: 44px; }
.tr-cardh {
  margin: 0 0 12px;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.015em;
}
.tr-card--title .tr-cardh { font-size: clamp(32px, 5vw, 58px); }
.tr-cardsub { margin: 0; font-size: clamp(15px, 1.8vw, 20px); color: var(--tr-ink2); }
.tr-cardlead {
  margin: 0 auto;
  max-width: 46ch;
  font-size: clamp(15px, 1.7vw, 19px);
  color: var(--tr-ink2);
}
.tr-cardcite { margin: 20px 0 0; }
.tr-citek {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--tr-edge);
  border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--tr-cite);
  letter-spacing: .01em;
}
.tr-citek--sm { padding: 3px 9px; font-size: 11.5px; }

/* the closing chooser */
.tr-choose {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.tr-cbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 8px;
  border: 1px solid var(--tr-edge);
  background: var(--tr-panel);
  color: var(--tr-ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.tr-cbtn:hover { border-color: var(--tr-ink2); }
.tr-cbtn--primary {
  background: var(--tr-accent);
  border-color: var(--tr-accent);
  color: var(--tr-accent-ink);
}
.tr-cbtn--primary:hover { filter: brightness(1.06); }
.tr-cbtn--quiet { color: var(--tr-ink2); }

/* ── a chapter: one line, full bleed ─────────────────────────────── */
.tr-chapter {
  width: min(1000px, 100%);
  text-align: center;
}
.tr-chword {
  font-size: clamp(28px, 5.4vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

/* ── word beats ──────────────────────────────────────────────────
   No interface at all: type, a rule, a caret, a number. */
.tr-word {
  width: min(900px, 100%);
  max-height: 100%;
  overflow: auto;
  text-align: center;
  padding: 8px 4px;
}

/* a question, unanswered */
.tr-q {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 46px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.tr-caret {
  display: inline-block;
  width: 3px;
  height: clamp(26px, 4vw, 44px);
  margin-top: 18px;
  background: var(--tr-accent);
  opacity: 0;
  vertical-align: middle;
}
.tr-caret.on { animation: tr-blink 900ms steps(2, start) 3; opacity: 1; }
.tr-caret--still { animation: none; opacity: .28; }
@keyframes tr-blink { 0% { opacity: 1; } 100% { opacity: 0; } }

.tr-qtail {
  margin: 22px 0 0;
  font-size: clamp(15px, 1.8vw, 20px);
  color: var(--tr-ink2);
}

/* lines that arrive one at a time */
.tr-stack {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 24ch;
  text-align: left;
}
.tr-stackli {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  font-size: clamp(19px, 2.8vw, 33px);
  font-weight: 600;
  letter-spacing: -.015em;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 460ms ease, transform 460ms cubic-bezier(.2, .7, .3, 1);
}
.tr-stackli.on { opacity: 1; transform: none; }
.tr-stackrule {
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--tr-accent);
}

/* a number that counts, once */
.tr-num {
  font-size: clamp(64px, 14vw, 156px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--tr-accent);
}
.tr-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 22px auto 0;
  max-width: 420px;
}
.tr-tick {
  width: 16px;
  height: 20px;
  border-radius: 3px;
  background: var(--tr-edge);
  transform: scaleY(.55);
  transform-origin: bottom;
  transition: background 260ms ease, transform 260ms cubic-bezier(.2, .7, .3, 1);
}
.tr-tick.on { background: var(--tr-accent); transform: none; }
.tr-numlab { margin: 20px 0 0; font-size: clamp(15px, 1.8vw, 20px); color: var(--tr-ink2); }

/* a sentence struck through and written again, or lifted and replaced */
.tr-line {
  margin: 0;
  font-size: clamp(20px, 3.2vw, 38px);
  font-weight: 620;
  line-height: 1.22;
  letter-spacing: -.018em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms ease, transform 460ms cubic-bezier(.2, .7, .3, 1),
    color 420ms ease;
  position: relative;
  display: inline-block;
  padding: 4px 2px;
}
.tr-line.on { opacity: 1; transform: none; }
.tr-line--a { color: var(--tr-ink2); }
.tr-line--b { display: block; margin-top: 16px; color: var(--tr-accent); }
.tr-line--a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  top: 52%;
  height: 2px;
  background: var(--tr-no);
  transition: right 520ms cubic-bezier(.2, .7, .3, 1);
}
.tr-line--a.struck::after { right: 0; }
.tr-line--a.spent { opacity: .42; }

/* a word that comes apart into its own copies */
.tr-shword {
  font-size: clamp(38px, 8vw, 92px);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--tr-ink2);
  transition: letter-spacing 900ms cubic-bezier(.2, .7, .3, 1), opacity 500ms ease;
}
.tr-shword.apart { letter-spacing: .22em; opacity: .55; }
.tr-sl {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.tr-sl.on { opacity: 1; transform: none; }
.tr-copies {
  margin: 20px auto 0;
  padding: 0;
  list-style: none;
  max-width: 420px;
  text-align: left;
}
.tr-copy {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  margin-top: 6px;
  border: 1px solid var(--tr-sheet-line);
  border-radius: 7px;
  background: var(--tr-sheet);
  color: var(--tr-sheet-ink);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px;
  opacity: 0;
  transform: translateY(8px) rotate(-.5deg);
  transition: opacity 360ms ease, transform 360ms cubic-bezier(.2, .7, .3, 1);
}
.tr-copy:nth-child(even) { transform: translateY(8px) rotate(.6deg); }
.tr-copy.on { opacity: 1; transform: none; }

/* a line typed, then taken away, leaving the blank */
.tr-slot {
  display: inline-block;
  min-width: min(560px, 90%);
  padding: 10px 4px;
  border-bottom: 2px solid var(--tr-edge);
  font-size: clamp(18px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -.012em;
  min-height: 62px;
  transition: border-color 400ms ease;
}
.tr-slot.going { border-bottom-color: var(--tr-no); }
.tr-slot.empty { border-bottom-color: var(--tr-edge); border-bottom-style: dashed; }
.tr-slotline { color: var(--tr-ink); }
.tr-slotline.tr-ghost { color: var(--tr-dim); text-decoration: line-through; }

/* ── the spreadsheet ─────────────────────────────────────────────── */
.tr-gridbeat {
  width: min(880px, 100%);
  max-height: 100%;
  overflow: auto;
}
.tr-sheetbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--tr-sheet-line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--tr-sheet-head);
  color: var(--tr-sheet-dim);
}
.tr-sheetname {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--tr-sheet-ink);
}
.tr-sheet {
  border: 1px solid var(--tr-sheet-line);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  background: var(--tr-sheet);
}
.tr-sheet--sm { border-radius: 10px; }
.tr-grid { display: grid; }
.tr-gc,
.tr-gr {
  background: var(--tr-sheet-head);
  color: var(--tr-sheet-dim);
  font-size: 11px;
  text-align: center;
  padding: 4px 2px;
  border-right: 1px solid var(--tr-sheet-line);
  border-bottom: 1px solid var(--tr-sheet-line);
  font-variant-numeric: tabular-nums;
}
.tr-gr { display: flex; align-items: center; justify-content: center; }
.tr-cell {
  padding: 9px 10px;
  border-right: 1px solid var(--tr-sheet-line);
  border-bottom: 1px solid var(--tr-sheet-line);
  color: var(--tr-sheet-ink);
  font-size: 14px;
  min-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: box-shadow 160ms ease, color 300ms ease, background 300ms ease;
}
.tr-cell--hd { font-weight: 600; background: color-mix(in srgb, var(--tr-sheet-head) 55%, transparent); }
.tr-cell--n { text-align: right; font-variant-numeric: tabular-nums; }
.tr-sheet--sm .tr-cell { font-size: 13px; padding: 7px 8px; min-height: 32px; }
.tr-sel { box-shadow: inset 0 0 0 2px var(--tr-sel); }
.tr-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--tr-sel);
}
.tr-ok { color: var(--tr-sheet-ink); font-weight: 600; }
.tr-changed { background: color-mix(in srgb, var(--tr-no) 14%, transparent); }
.tr-note {
  margin: 16px 0 0;
  font-size: clamp(14px, 1.7vw, 18px);
  color: var(--tr-ink2);
  text-align: center;
}

/* ── the comparison ──────────────────────────────────────────────── */
.tr-vs {
  width: min(1180px, 100%);
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tr-vstask {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}
.tr-vstaskt {
  font-size: clamp(17px, 2.2vw, 26px);
  font-weight: 650;
  letter-spacing: -.015em;
}
.tr-vsbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.tr-vspane {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--tr-edge);
  border-radius: 12px;
  background: var(--tr-panel);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.2, .7, .3, 1),
    filter 500ms ease;
}
.tr-vspane.on { opacity: 1; transform: none; }
.tr-vspane.tr-spent { opacity: .5; filter: saturate(.5); }
.tr-vspane--app { border-color: color-mix(in srgb, var(--tr-accent) 45%, var(--tr-edge)); }
.tr-vslab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tr-ink2);
}
.tr-vslab .tr-mark { width: 15px; height: 15px; }
.tr-vslab--app { color: var(--tr-accent); }

.tr-rec { display: flex; flex-direction: column; gap: 6px; }
.tr-recrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--tr-accent);
  border-radius: 0 7px 7px 0;
  background: color-mix(in srgb, var(--tr-accent) 8%, transparent);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 400ms ease, transform 400ms cubic-bezier(.2, .7, .3, 1);
}
.tr-recrow.on { opacity: 1; transform: none; }
.tr-reck {
  flex: 0 0 38%;
  font-size: 12.5px;
  color: var(--tr-ink2);
  letter-spacing: .02em;
}
.tr-recv {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-vsverd {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
}
.tr-vsverd .tr-ico { margin-top: 2px; }
.tr-vsverd--no { color: var(--tr-no); }
.tr-vsverd--yes { color: var(--tr-accent); }

/* ── the key points ─────────────────────────────────────────────── */
.tr-band {
  flex: 0 0 auto;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--tr-edge);
  background: var(--tr-panel);
  min-height: 84px;
}
.tr-bh {
  margin: 0 0 6px;
  font-size: clamp(16px, 1.9vw, 21px);
  font-weight: 600;
  letter-spacing: -.01em;
}
.tr-pts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.tr-pts li { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--tr-ink2); }
.tr-ptdot { display: flex; color: var(--tr-accent); }
.tr-bsub { margin: 0; font-size: 14px; color: var(--tr-ink2); }
.tr-rest { margin: 8px 0 0; font-size: 13px; color: var(--tr-ink2); }

/* ── the transport ──────────────────────────────────────────────── */
.tr-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--tr-edge);
  background: var(--tr-panel);
}
.tr-tb {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--tr-edge);
  border-radius: 8px;
  background: transparent;
  color: var(--tr-ink);
  cursor: pointer;
}
.tr-tb:hover { border-color: var(--tr-ink2); }
.tr-tb[disabled] { opacity: .45; cursor: not-allowed; }
.tr-tb--play {
  background: var(--tr-accent);
  border-color: var(--tr-accent);
  color: var(--tr-accent-ink);
}
.tr-tb--play:hover { filter: brightness(1.06); }

.tr-track {
  flex: 1 1 auto;
  min-width: 60px;
  height: 5px;
  border-radius: 999px;
  background: var(--tr-edge);
  overflow: hidden;
}
.tr-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tr-accent);
  transition: width 240ms linear;
}
.tr-time {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--tr-ink2);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.tr-dots { flex: 0 0 auto; display: flex; gap: 4px; align-items: center; }
.tr-dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tr-edge);
  cursor: pointer;
}
.tr-dot:hover { background: var(--tr-dim); }
.tr-dot.on { background: var(--tr-accent); transform: scale(1.3); }

/* ── narrow ─────────────────────────────────────────────────────
   No horizontal overflow at 1280, 1024 or 375: the comparison stacks,
   then the dots and the clock stand down, before anything scrolls
   sideways. */
@media (max-width: 1180px) {
  .tr-card { padding: 34px 30px; }
  .tr-dots { display: none; }
}
@media (max-width: 900px) {
  .tr-vsbody { grid-template-columns: 1fr; }
  .tr-vspane.tr-spent { opacity: .62; }
  .tr-main { padding: 12px; }
  .tr-band { padding: 10px 14px 12px; }
}
@media (max-width: 560px) {
  .tr-root { font-size: 14px; }
  .tr-time { display: none; }
  .tr-head { padding: 8px 12px; gap: 10px; }
  .tr-chap { font-size: 11.5px; }
  .tr-foot { padding: 8px 12px; gap: 8px; }
  .tr-card { padding: 24px 18px; border-radius: 12px; }
  .tr-pts { gap: 6px 16px; }
  .tr-pts li { font-size: 13px; }
  .tr-choose { flex-direction: column; }
  .tr-cbtn { justify-content: center; }
  .tr-cell { font-size: 12.5px; padding: 7px 7px; }
  .tr-sheet--sm .tr-cell { font-size: 12px; padding: 6px 6px; }
  .tr-reck { flex-basis: 42%; font-size: 11.5px; }
  .tr-recv { font-size: 13px; }
  .tr-slot { min-width: 100%; }
  .tr-copies { max-width: 100%; }
  .tr-ticks { max-width: 260px; }
  .tr-tick { width: 12px; height: 16px; }
}

/* ── reduced motion ─────────────────────────────────────────────
   Every beat readable at rest. Nothing slides in, nothing advances on
   a timer, nothing blinks, the play button is disabled and says so,
   and each beat is reached with Next. The builders hand every one of
   their acts over at once, so each beat arrives already finished; the
   erase beat, whose finished state would be a blank line, draws the
   sentence greyed and struck instead. The replay engine settles each
   scene on its own final state, so the picture is complete without a
   single frame of motion. */
@media (prefers-reduced-motion: reduce) {
  .tr-card,
  .tr-scene,
  .tr-word,
  .tr-chapter,
  .tr-gridbeat,
  .tr-vs,
  .tr-w,
  .tr-fade,
  .tr-rule,
  .tr-stackli,
  .tr-line,
  .tr-line--a::after,
  .tr-shword,
  .tr-sl,
  .tr-copy,
  .tr-slot,
  .tr-cell,
  .tr-tick,
  .tr-vspane,
  .tr-recrow,
  .tr-fill,
  .tr-dot { transition: none !important; }
  .tr-enter { opacity: 1 !important; transform: none !important; }
  .tr-caret,
  .tr-caret.on { animation: none !important; opacity: .28; }
  .tr-typing::after { display: none; }
}