/*
  Homepage only (index.html). Shared chrome lives in styles.css; this file re-types and
  re-colours it and adds the scroll story. The site CSP allows no JavaScript, so every
  moving part is CSS: one load animation in the opening, and scroll-driven animations
  (view timelines) in the four chapters.

  Rule for motion: the plain rules describe the finished picture. Animations only add
  "from" states, and only inside the motion blocks at the end of this file, so a browser
  without scroll timelines, or a reader who asked for reduced motion, sees the finished
  composition with nothing hidden.
*/

@font-face {
  font-family: "Recursive";
  src: url("fonts/recursive-latin-full-normal.woff2") format("woff2");
  font-weight: 300 1000;
  font-style: oblique 0deg 15deg;
  font-display: swap;
}

body.home {
  --paper: #f1f0f7;
  --ink: #1c2699;
  --ink-soft: #545a86;
  --muted: #545a86;
  --line: rgba(28, 38, 153, 0.16);
  --blue: #1c2699;
  --blue-deep: #1c2699;
  --periwinkle: #dcdcf3;
  --voice: #f0306f;
  --voice-text: #c8185a;
  --done: #0e8f7e;
  --done-text: #0b7366;
  --amber: #e7a11a;
  --screen: #ffffff;
  --desk: #dddceb;
  --shadow: 0 1px 2px rgba(28, 38, 153, 0.08), 0 18px 40px -18px rgba(28, 38, 153, 0.35);
  --raw: "CASL" 1, "MONO" 0, "slnt" -11;
  --clean: "CASL" 0, "MONO" 0, "slnt" 0;
  --command: "CASL" 0, "MONO" 1, "slnt" 0;
  font-family: "Recursive", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variation-settings: var(--clean);
  color: var(--ink);
  background: var(--paper);
}

.home :focus-visible {
  outline: 3px solid var(--voice);
  outline-offset: 4px;
}

.home .brand {
  font-weight: 800;
  letter-spacing: -0.03em;
}

.home nav > a:not(.nav-download) {
  color: var(--ink-soft);
}

.home .button-primary {
  background: var(--ink);
  box-shadow: 0 14px 30px -12px rgba(28, 38, 153, 0.55);
}

.home .button-primary:focus-visible {
  outline-color: var(--voice);
}

.home .beta-note {
  color: var(--ink-soft);
  font-weight: 600;
}

.home .beta-note span {
  background: var(--done);
  box-shadow: 0 0 0 5px rgba(14, 143, 126, 0.16);
}

/* Status tags: shape and fill differ, not only colour. */

.tag {
  display: inline-block;
  padding: 0.28em 0.7em 0.3em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: 0.1em;
}

.tag-beta {
  color: #ffffff;
  background: var(--done-text);
}

.tag-pro {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--screen);
}

.tag-v1 {
  color: var(--ink);
  background: #dcdcf3;
}

.tag-exploring {
  border: 1.5px dashed var(--ink-soft);
  color: var(--ink-soft);
  font-variation-settings: "CASL" 1, "MONO" 0, "slnt" -11;
}

/* Opening */

.opening {
  width: var(--page);
  margin: 0 auto;
  padding: clamp(36px, 8vh, 96px) 0 clamp(64px, 10vh, 112px);
}

.home .utterance {
  max-width: none;
  margin: 0;
  font-size: clamp(50px, 9.4vw, 148px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variation-settings: var(--clean);
  text-wrap: balance;
}

.utterance .filler {
  position: relative;
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  padding-bottom: 0.25em;
  margin-bottom: -0.25em;
  vertical-align: bottom;
  white-space: pre;
  color: var(--voice-text);
  opacity: 0;
}

.utterance .filler::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.35em;
  top: 42%;
  height: 0.07em;
  border-radius: 1em;
  background: var(--voice);
  transform: scaleX(1);
  transform-origin: left;
}

.utterance .word {
  display: inline-block;
}

/*
  The spoken "speak," gives way to the written "Speak," when the sentence is cleaned. The whole
  word swaps, not one letter, so screen readers hear one word. The padding keeps descenders
  outside the clipped box visible.
*/
.case-raw,
.case-clean {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.25em;
  margin-bottom: -0.25em;
  vertical-align: bottom;
}

.case-raw {
  max-width: 0;
  opacity: 0;
}

.case-clean {
  max-width: 5em;
}

.opening-pill .pill-wave {
  max-width: 0;
  margin-right: -12px;
  overflow: hidden;
  opacity: 0;
}

.opening-pill,
.stage-pill {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--ink);
  box-shadow: var(--shadow);
}

.opening-pill {
  margin-top: clamp(22px, 4vh, 40px);
  grid-template-columns: auto auto auto;
  font-size: 15px;
  font-weight: 600;
}

.pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--done);
}

.pill-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}

.pill-wave i {
  width: 3px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
}

.opening-pill .pill-state {
  grid-column: 3;
  grid-row: 1;
}

.pill-listening {
  opacity: 0;
}

.opening-foot {
  margin-top: clamp(40px, 7vh, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: end;
  gap: 48px;
}

.home .hero-summary {
  max-width: 36em;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  letter-spacing: 0;
}

.opening-cta .hero-actions {
  margin-top: 0;
}

.home .requirements {
  color: var(--ink-soft);
}

/* Legend */

.legend {
  width: var(--page);
  margin: 0 auto;
  padding: 36px 0 44px;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 16px 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.legend h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.legend > p {
  grid-column: 1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.legend-list {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
}

.legend-list div {
  display: grid;
  gap: 8px;
  align-content: start;
}

.legend-list dt,
.legend-list dd {
  margin: 0;
}

.legend-list dd {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

/* Chapters: copy scrolls on the left, the stage stays pinned on the right. */

.chapter {
  --stage-h: min(74vh, 620px);
  width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  view-timeline: --chapter block;
}

.chapter + .chapter {
  border-top: 1px solid var(--line);
}

.chapter-copy {
  padding-block: 8vh 14vh;
}

.beat {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.beat:last-child {
  min-height: 0;
  padding-top: 6vh;
}

.chapter h2 {
  margin: 0 0 24px;
  font-size: clamp(38px, 4.6vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.chapter-copy p {
  max-width: 34em;
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

/* Footer links to the search pages (homepage and article pages). */
.home .footer-guides {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  font-weight: 650;
}

.home .footer-guides a {
  text-underline-offset: 4px;
}

.chapter-copy .beat-link {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 650;
}

.beat-link a,
.yours-body a {
  color: var(--ink);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.chapter-copy kbd {
  width: auto;
  height: auto;
  display: inline-block;
  padding: 1px 8px 2px;
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 7px;
  color: var(--ink);
  font-size: 0.85em;
  font-weight: 650;
  box-shadow: none;
}

.chapter-copy .measure {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.35;
  color: var(--ink);
  font-weight: 500;
}

.measure strong {
  font-weight: 850;
}

.status-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.status-list li {
  display: grid;
  grid-template-columns: 8.2em minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
}

.status-list .tag {
  justify-self: start;
}

.stage {
  position: sticky;
  top: max(10vh, calc(50vh - var(--stage-h) / 2));
  height: var(--stage-h);
  margin-block: 8vh;
  align-self: start;
}

.desk {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
  background-color: var(--desk);
  background-image: radial-gradient(rgba(28, 38, 153, 0.13) 1px, transparent 1.4px);
  background-size: 18px 18px;
  font-size: clamp(11px, 1.12vw, 16px);
}

.win {
  position: absolute;
  overflow: hidden;
  border-radius: 14px;
  background: var(--screen);
  box-shadow: var(--shadow);
}

.win-bar {
  height: 2.3em;
  padding: 0 0.9em;
  display: flex;
  align-items: center;
  gap: 0.42em;
  border-bottom: 1px solid rgba(28, 38, 153, 0.08);
  color: var(--ink-soft);
  font-size: 0.85em;
  font-weight: 600;
}

.win-bar i {
  width: 0.72em;
  height: 0.72em;
  border-radius: 50%;
  background: #dcdcea;
}

.win-bar span {
  margin-left: 0.6em;
}

.win-body {
  padding: 1.2em 1.4em;
}

.win-body p {
  margin: 0;
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--ink);
}

.stage-pill {
  position: absolute;
  left: 6%;
  bottom: 6%;
  max-width: 88%;
  font-size: 1.15em;
}

.raw {
  grid-column: 2;
  grid-row: 1;
  font-weight: 450;
  font-variation-settings: var(--raw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  clip-path: inset(0 0 0 0);
}

.stage-tag {
  position: absolute;
  top: 5%;
  right: 5%;
  z-index: 5;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  color: var(--ink);
  background: #ffffff;
  font-size: 0.9em;
  font-weight: 650;
  box-shadow: var(--shadow);
}

/* Stage 1: dictation into Notes */

.win-notes {
  left: 6%;
  top: 8%;
  width: 72%;
  height: 50%;
}

.doc-date {
  color: var(--ink-soft);
  font-size: 0.85em;
}

.doc-title {
  margin: 0.3em 0 0.7em !important;
  font-size: 1.7em;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.doc-line {
  font-size: 1.1em;
  line-height: 1.6;
}

.doc-line-old {
  color: var(--ink-soft);
}

.doc-line-new span {
  display: inline-block;
  clip-path: inset(0 0 0 0);
}

.note-card {
  position: absolute;
  right: 5%;
  top: 46%;
  width: 36%;
  padding: 1em 1.1em;
  display: grid;
  gap: 0.25em;
  border-radius: 14px;
  background: #fff7d6;
  box-shadow: var(--shadow);
}

.note-app {
  color: #8a5a00;
  font-size: 0.8em;
  font-weight: 700;
}

.note-date {
  color: var(--ink-soft);
  font-size: 0.8em;
}

.note-text {
  font-weight: 700;
  font-size: 1.05em;
}

.raw-one {
  opacity: 0;
}

/* Stage 2: acting on the Mac */

.desk-act .win-editor {
  left: 5%;
  top: 6%;
  width: 58%;
  height: 50%;
  z-index: 1;
}

.code-lines {
  display: grid;
  gap: 0.75em;
}

.code-lines i {
  height: 0.55em;
  border-radius: 1em;
  background: #e4e3f2;
}

.code-lines i:nth-child(1) { width: 42%; background: #cfd3f7; }
.code-lines i:nth-child(2) { width: 78%; margin-left: 8%; }
.code-lines i:nth-child(3) { width: 64%; margin-left: 8%; background: #f7d0dd; }
.code-lines i:nth-child(4) { width: 70%; margin-left: 16%; }
.code-lines i:nth-child(5) { width: 38%; margin-left: 8%; }
.code-lines i:nth-child(6) { width: 12%; }

.desk-act .win-browser {
  left: 34%;
  top: 16%;
  width: 60%;
  height: 46%;
  z-index: 4;
}

.browser-url {
  padding: 0.45em 0.8em;
  border-radius: 8px;
  color: var(--ink-soft);
  background: #eeeef6;
  font-size: 0.85em;
}

.browser-field {
  margin-top: 1em !important;
  min-height: 3.6em;
  padding: 0.7em 0.8em;
  border: 1.5px solid #cfd3f7;
  border-radius: 10px;
}

.browser-field span {
  display: inline-block;
  clip-path: inset(0 0 0 0);
}

.desk-act .win-terminal {
  left: 10%;
  top: 36%;
  width: 54%;
  height: 38%;
  z-index: 3;
  color: #d9ddff;
  background: #151c63;
  font-variation-settings: var(--command);
}

.win-terminal .win-bar {
  color: #aab1f0;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.win-terminal .win-bar i {
  background: #2c3589;
}

.win-terminal .win-body p + p {
  margin-top: 0.5em;
}

.win-terminal .caret {
  background: #d9ddff;
}

.toast {
  position: absolute;
  right: 4%;
  top: 4%;
  z-index: 6;
  padding: 0.7em 1em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  border-radius: 12px;
  background: #ffffff;
  font-weight: 650;
  box-shadow: var(--shadow);
}

.toast-icon {
  width: 1.1em;
  height: 1.1em;
  border-radius: 0.3em;
  background: conic-gradient(from 90deg, var(--voice), var(--amber), var(--done), var(--ink), var(--voice));
}

.chain {
  position: absolute;
  right: 4%;
  bottom: 24%;
  z-index: 6;
  width: 40%;
  padding: 0.9em 1em;
  display: grid;
  gap: 0.55em;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.chain-tag {
  justify-self: start;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  color: var(--ink);
  background: #dcdcf3;
  font-size: 0.8em;
  font-weight: 650;
}

.chain-step {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 600;
}

.chain-step b {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  border-radius: 50%;
  background: var(--done);
  box-shadow: inset 0 0 0 0.3em var(--done);
}

.chain-step b::after {
  content: "";
  display: block;
  width: 0.34em;
  height: 0.6em;
  margin: 0.14em auto 0;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
}

.command-stack {
  position: absolute;
  left: 5%;
  bottom: 5%;
  z-index: 7;
  display: grid;
  max-width: 90%;
}

.command {
  grid-area: 1 / 1;
  justify-self: start;
  padding: 0.6em 1.1em;
  border-radius: 999px;
  color: #ffffff;
  background: var(--ink);
  font-size: 1.15em;
  font-weight: 600;
  font-variation-settings: var(--command);
  white-space: nowrap;
  box-shadow: var(--shadow);
}

.command-one,
.command-two {
  opacity: 0;
}

/* Stage 3: a meeting, written down */

.desk-listen .win-meeting {
  left: 6%;
  right: 6%;
  top: 8%;
}

.win-meeting .win-body {
  padding: 1.4em 1.6em 1.6em;
}

.lanes {
  display: grid;
  gap: 0.6em;
}

.lane {
  height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
  border-radius: 10px;
  background: #f4f4fa;
}

.lane i {
  width: 0.3em;
  height: 14%;
  border-radius: 1em;
  background: currentColor;
}

.lane-a { color: var(--voice); }
.lane-b { color: var(--done); }
.lane-c { color: var(--amber); }

.lane-a i:nth-child(1), .lane-a i:nth-child(3), .lane-a i:nth-child(4) { height: 70%; }
.lane-a i:nth-child(2), .lane-a i:nth-child(5) { height: 45%; }
.lane-b i:nth-child(6), .lane-b i:nth-child(8) { height: 80%; }
.lane-b i:nth-child(7), .lane-b i:nth-child(9) { height: 50%; }
.lane-c i:nth-child(10), .lane-c i:nth-child(12) { height: 65%; }
.lane-c i:nth-child(11) { height: 90%; }

.transcript {
  margin-top: 1.2em;
  display: grid;
  gap: 0.7em;
}

.line {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  font-size: 1.05em;
}

.line b {
  flex: none;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.75em;
  font-weight: 700;
}

.line-a b { background: var(--voice-text); }
.line-b b { background: var(--done-text); }
.line-c b { color: #3d2a00; background: var(--amber); }

.actions {
  margin-top: 1.2em;
  padding: 0.9em 1em;
  display: grid;
  gap: 0.45em;
  border-radius: 12px;
  background: #eeeefa;
}

.actions p {
  font-weight: 800;
}

.actions span {
  padding-left: 1.3em;
  position: relative;
}

.actions span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 0.8em;
  height: 0.8em;
  border: 2px solid var(--ink);
  border-radius: 0.2em;
}

/* Stage 4: clipboard memory */

.timeline {
  position: absolute;
  left: 5%;
  top: 7%;
  width: 44%;
  display: grid;
  gap: 0.7em;
}

.clip {
  padding: 0.75em 0.9em;
  display: grid;
  gap: 0.2em;
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;
  font-size: 0.95em;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: var(--shadow);
}

.clip b {
  color: var(--ink-soft);
  font-size: 0.8em;
}

.clip-code,
.clip-log {
  font-variation-settings: var(--command);
}

.clip-code b,
.clip-log b {
  font-variation-settings: var(--clean);
}

.clip-url {
  outline: 2.5px solid var(--voice);
  outline-offset: 2px;
}

.clip-secret {
  border: 1.5px dashed var(--ink-soft);
  color: var(--ink-soft);
  background: transparent;
  box-shadow: none;
}

.desk-remember .win-message {
  right: 5%;
  top: 22%;
  width: 44%;
  height: 50%;
}

.win-message .win-body {
  display: grid;
  gap: 0.8em;
  align-content: start;
}

.message-them,
.message-me {
  max-width: 88%;
  padding: 0.6em 0.9em;
  border-radius: 1em;
  line-height: 1.4;
}

.message-them {
  justify-self: start;
  background: #eeeef6;
}

.message-me {
  justify-self: end;
  color: #ffffff;
  background: var(--ink);
  clip-path: inset(0 0 0 0);
}

.message-url {
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* Everything runs on this Mac */

.yours {
  width: var(--page);
  margin: 0 auto;
  padding: clamp(80px, 14vh, 160px) 0 clamp(56px, 10vh, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px 64px;
  border-top: 1px solid var(--line);
}

.yours h2 {
  margin: 0;
  font-size: clamp(50px, 7.6vw, 118px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: var(--clean);
}

.yours-body > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

.yours-facts {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.yours-facts li {
  padding: 14px 0;
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.yours-facts strong {
  color: var(--ink);
  font-size: 17px;
}

.yours-body .yours-next {
  margin-top: 22px;
  font-size: 15px;
}

/* Exploring, not promised */

.exploring {
  width: var(--page);
  margin: 0 auto;
  padding-bottom: clamp(64px, 12vh, 124px);
}

.exploring h2 {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 700;
  font-variation-settings: "CASL" 1, "MONO" 0, "slnt" -11;
}

.exploring-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.idea {
  padding: 26px 28px;
  border: 1.5px dashed rgba(84, 90, 134, 0.6);
  border-radius: 18px;
}

.idea h3 {
  margin: 14px 0 8px;
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.idea p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* Shared sections, re-coloured */

.home .beta {
  margin-top: 0;
  background: var(--ink);
}

.home .beta-main h2 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.home .beta-main > p:last-of-type {
  color: #dfe2ff;
}

.home .beta-facts {
  background: rgba(7, 12, 70, 0.35);
}

.home .button-light {
  color: var(--ink);
}

.home .known-limits h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.home .next-tool-copy h2 {
  font-weight: 750;
  letter-spacing: -0.035em;
}

/* Narrow screens: the stage pins to the top and the copy scrolls beneath it. */

@media (max-width: 860px) {
  .opening-foot,
  .legend,
  .yours {
    grid-template-columns: minmax(0, 1fr);
  }

  .legend > p,
  .legend-list {
    grid-column: auto;
    grid-row: auto;
  }

  .chapter {
    --stage-h: 46vh;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .stage {
    order: -1;
    top: 0;
    z-index: 3;
    margin: 0 -16px;
    padding: 12px 16px 16px;
    height: calc(var(--stage-h) + 28px);
    background: linear-gradient(var(--paper) 88%, rgba(241, 240, 247, 0));
  }

  .desk {
    font-size: clamp(9px, 2.5vw, 13px);
    border-radius: 22px;
  }

  .chapter-copy {
    padding-block: 4vh 10vh;
  }

  .beat {
    min-height: 44vh;
  }
}

/* Short screens (a phone on its side): no pinning, so the stage never covers the copy. */
@media (max-height: 520px) {
  .stage {
    position: relative;
    top: auto;
  }

  .chapter {
    --stage-h: 360px;
  }
}

@media (max-width: 560px) {
  .legend-list,
  .exploring-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .status-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .chapter-copy p {
    font-size: 16px;
  }
}

/* ---------- Motion: the opening plays once on load ---------- */

@media (prefers-reduced-motion: no-preference) {
  .utterance {
    animation: utter-clean 900ms cubic-bezier(0.2, 0.7, 0.1, 1) 2300ms both;
  }

  .utterance > span {
    animation: word-in 420ms cubic-bezier(0.2, 0.7, 0.1, 1) both;
  }

  .utterance > span:nth-child(1) { animation-delay: 250ms; }
  .utterance > span:nth-child(2) { animation-delay: 420ms; }
  .utterance > span:nth-child(3) { animation-delay: 580ms; }
  .utterance > span:nth-child(4) { animation-delay: 760ms; }
  .utterance > span:nth-child(5) { animation-delay: 940ms; }
  .utterance > span:nth-child(6) { animation-delay: 1090ms; }
  .utterance > span:nth-child(7) { animation-delay: 1240ms; }
  .utterance > span:nth-child(8) { animation-delay: 1380ms; }
  .utterance > span:nth-child(9) { animation-delay: 1520ms; }

  .utterance > .filler {
    animation:
      word-in 420ms cubic-bezier(0.2, 0.7, 0.1, 1) both,
      filler-out 600ms cubic-bezier(0.6, 0, 0.2, 1) 2350ms both;
  }

  .utterance > .filler:nth-child(1) { animation-delay: 250ms, 2350ms; }
  .utterance > .filler:nth-child(4) { animation-delay: 760ms, 2350ms; }

  .utterance .filler::after {
    animation: strike 320ms ease-out 1950ms both;
  }

  .pill-wave i {
    animation: pill-wave 460ms ease-in-out 4 alternate both;
  }

  .pill-wave i:nth-child(2) { animation-delay: -120ms; }
  .pill-wave i:nth-child(3) { animation-delay: -300ms; }
  .pill-wave i:nth-child(4) { animation-delay: -60ms; }
  .pill-wave i:nth-child(5) { animation-delay: -220ms; }
  .pill-wave i:nth-child(6) { animation-delay: -380ms; }
  .pill-wave i:nth-child(7) { animation-delay: -160ms; }

  .opening-pill .pill-dot {
    animation: dot-listen 2300ms steps(1, end) both;
  }

  .pill-listening {
    animation: listening-out 2300ms steps(1, end) both;
  }

  .opening-pill .pill-wave {
    animation: wave-out 2300ms steps(1, end) both;
  }

  .case-raw {
    animation: case-raw 2400ms steps(1, end) both;
  }

  .case-clean {
    animation: case-clean 2400ms steps(1, end) both;
  }

  .pill-done {
    animation: fade-up 400ms ease-out 2400ms both;
  }
}

@keyframes utter-clean {
  from {
    color: var(--voice-text);
    font-weight: 420;
    font-variation-settings: var(--raw);
  }
}

@keyframes word-in {
  from {
    opacity: 0;
    translate: 0 0.25em;
  }
}

@keyframes filler-out {
  from {
    max-width: 6em;
    opacity: 1;
  }
}

@keyframes strike {
  from {
    transform: scaleX(0);
  }
}

@keyframes pill-wave {
  from { height: 4px; }
  to { height: 18px; }
}

@keyframes dot-listen {
  from { background: var(--voice); }
}

@keyframes listening-out {
  from { opacity: 1; }
}

@keyframes wave-out {
  from {
    max-width: 60px;
    margin-right: 0;
    opacity: 1;
  }
}

@keyframes case-raw {
  from {
    max-width: 5em;
    opacity: 1;
  }
}

@keyframes case-clean {
  from {
    max-width: 0;
    opacity: 0;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

/* ---------- Motion: the chapters follow the scroll ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage * {
      animation-timing-function: linear;
      animation-fill-mode: both;
    }

    /* Stage 1 */
    .chapter-write .stage-pill { animation-name: pop-in; animation-timeline: --chapter; animation-range: contain 0% contain 8%; }
    .raw-one { animation-name: raw-one; animation-timeline: --chapter; animation-range: contain 4% contain 40%; }
    .doc-line-new span { animation-name: type-in; animation-timeline: --chapter; animation-range: contain 30% contain 46%; }
    .raw-two { animation-name: type-in-raw; animation-timeline: --chapter; animation-range: contain 44% contain 64%; }
    .note-card { animation-name: file-note; animation-timeline: --chapter; animation-range: contain 64% contain 84%; }

    /* Stage 2 */
    .command-one { animation-name: say-command; animation-timeline: --chapter; animation-range: contain 2% contain 26%; }
    .desk-act .win-terminal { animation-name: raise-terminal; animation-timeline: --chapter; animation-range: contain 12% contain 22%; }
    .command-two { animation-name: say-command; animation-timeline: --chapter; animation-range: contain 28% contain 50%; }
    .toast { animation-name: drop-in; animation-timeline: --chapter; animation-range: contain 38% contain 46%; }
    .command-three { animation-name: say-command-stay; animation-timeline: --chapter; animation-range: contain 54% contain 66%; }
    .chain { animation-name: pop-in; animation-timeline: --chapter; animation-range: contain 58% contain 64%; }
    .desk-act .win-browser { animation-name: raise-browser; animation-timeline: --chapter; animation-range: contain 64% contain 72%; }
    .chain-step-one b { animation-name: tick; animation-timeline: --chapter; animation-range: contain 68% contain 72%; }
    .browser-field span { animation-name: type-in; animation-timeline: --chapter; animation-range: contain 74% contain 86%; }
    .chain-step-two b { animation-name: tick; animation-timeline: --chapter; animation-range: contain 84% contain 88%; }

    /* Stage 3 */
    .lane { animation-name: lane-split; animation-timeline: --chapter; animation-range: contain 2% contain 26%; }
    .lane-a { --merge: 2.9em; }
    .lane-c { --merge: -2.9em; }
    .line-a { animation-name: line-in; animation-timeline: --chapter; animation-range: contain 30% contain 40%; }
    .line-b { animation-name: line-in; animation-timeline: --chapter; animation-range: contain 40% contain 50%; }
    .line-c { animation-name: line-in; animation-timeline: --chapter; animation-range: contain 50% contain 60%; }
    .actions { animation-name: lift-in; animation-timeline: --chapter; animation-range: contain 66% contain 82%; }

    /* Stage 4 */
    .clip-url { animation-name: clip-drop, recall; animation-timeline: --chapter, --chapter; animation-range: contain 2% contain 12%, contain 62% contain 70%; }
    .clip-code { animation-name: clip-drop; animation-timeline: --chapter; animation-range: contain 12% contain 22%; }
    .clip-log { animation-name: clip-drop; animation-timeline: --chapter; animation-range: contain 22% contain 32%; }
    .clip-secret { animation-name: clip-skip; animation-timeline: --chapter; animation-range: contain 32% contain 48%; }
    .stage-pill-remember { animation-name: pop-in; animation-timeline: --chapter; animation-range: contain 48% contain 54%; }
    .raw-recall { animation-name: type-in-raw; animation-timeline: --chapter; animation-range: contain 50% contain 62%; }
    .message-me { animation-name: type-in; animation-timeline: --chapter; animation-range: contain 70% contain 86%; }

    /* The closing line resolves from spoken to written as it arrives. */
    .yours h2 {
      animation: yours-clean linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    scale: 0.9;
  }
}

@keyframes raw-one {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  70% { clip-path: inset(0 0 0 0); opacity: 1; font-variation-settings: var(--raw); color: #ffffff; }
  85% { font-variation-settings: var(--clean); color: #b9c0ff; opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; font-variation-settings: var(--clean); }
}

@keyframes type-in {
  from { clip-path: inset(0 100% 0 0); }
}

@keyframes type-in-raw {
  from {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes file-note {
  from {
    opacity: 0;
    translate: -60% 120%;
    scale: 0.6;
    rotate: -6deg;
  }
}

@keyframes say-command {
  0% { opacity: 0; translate: 0 1em; font-variation-settings: var(--raw); font-weight: 450; }
  18% { opacity: 1; translate: 0 0; font-variation-settings: var(--raw); font-weight: 450; }
  45% { opacity: 1; font-variation-settings: var(--command); font-weight: 600; }
  85% { opacity: 1; translate: 0 0; font-variation-settings: var(--command); }
  100% { opacity: 0; translate: 0 -1em; font-variation-settings: var(--command); }
}

@keyframes say-command-stay {
  0% { opacity: 0; translate: 0 1em; font-variation-settings: var(--raw); font-weight: 450; }
  35% { opacity: 1; translate: 0 0; font-variation-settings: var(--raw); font-weight: 450; }
  100% { opacity: 1; font-variation-settings: var(--command); font-weight: 600; }
}

@keyframes raise-terminal {
  0% { z-index: 1; scale: 0.94; filter: saturate(0.6) brightness(1.4); }
  100% { z-index: 3; scale: 1; filter: none; }
}

@keyframes raise-browser {
  0% { z-index: 2; scale: 0.94; }
  100% { z-index: 4; scale: 1; }
}

@keyframes drop-in {
  from {
    opacity: 0;
    translate: 0 -1.5em;
  }
}

@keyframes tick {
  from {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--ink-soft);
  }
}

@keyframes lane-split {
  from {
    translate: 0 var(--merge, 0);
    color: var(--ink-soft);
  }
}

@keyframes line-in {
  from {
    opacity: 0;
    translate: 0 0.8em;
  }
}

@keyframes lift-in {
  from {
    opacity: 0;
    translate: 0 1.5em;
    scale: 0.96;
  }
}

@keyframes clip-drop {
  from {
    opacity: 0;
    translate: 0 -1.2em;
  }
}

@keyframes clip-skip {
  0% { opacity: 0; translate: 0 -1.2em; border-style: solid; color: var(--ink); background: #ffffff; }
  45% { opacity: 1; translate: 0 0; border-style: solid; color: var(--ink); background: #ffffff; }
  100% { opacity: 1; }
}

@keyframes recall {
  from {
    outline-color: transparent;
  }
}

@keyframes yours-clean {
  from {
    color: var(--voice-text);
    font-weight: 430;
    font-variation-settings: var(--raw);
  }
}