/* The story at the top of writewithvesper.com: from a daydream to a book you can hold. One number drives
   everything: --progress, 0 at the top of the story and 1 when the stage
   lets go. --raw turns it into the story's ruler (0 → 740, about one svh of scroll each). --at is the same
   ruler with two pauses in it (for the note and the AI), so the beats written before those were added keep
   their numbers. Every beat is a slice of a ruler and every transform a calc() of the slices. The
   scroll-driven animation and the JS fallback both only set --progress, so they share one definition. */

@font-face {
  font-family: 'Vesper Prose';
  src: url('/fonts/EBGaramond.ttf') format('truetype');
  font-weight: 400 800;
  font-display: swap;
}

@property --progress { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --raw { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --at { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --catch { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --note { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ai { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --suggest { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ai-out { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --path { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --fill { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tonight { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --plot { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --string { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --chap { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --collapse { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --rigin { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --fan { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --write { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tally { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --gather { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --zoom { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --strike { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --insert { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --notes { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --share { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --fly { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --bubbles { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --bound { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --trace { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --fold { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --swap { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --turn { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --open { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --finale { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ring { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --pulse { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --x { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --y { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --s { syntax: '<number>'; inherits: true; initial-value: 1; }
/* How far a character has drawn itself in (0 → 1). */
@property --draw { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --bob { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --words { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --thousands { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --hundreds { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --evenings { syntax: '<integer>'; inherits: true; initial-value: 0; }

@counter-style pad3 { system: extends decimal; pad: 3 "0"; }

/* Tokens from landing/public/experience.css, plus the illustrations' paper, peach blob and tone. */
:root {
  --surface: #fafafa;
  --card: #fff;
  --ink: #141414;
  --muted: #737373;
  --faint: #8b8b88;
  --border: #e3e3e0;
  --accent: #0000bd;
  --sheet: #fafafa;
  --blob: #f5b9a8;
  --tone: #ec9580;
  --shadow: 0 24px 65px -35px #14141435;
  --p-peach: #f5b9a8;
  --p-mint: #bde3d3;
  --p-lilac: #d6cbec;
  --p-yellow: #f5e184;
  --p-sky: #bccce0;
  --lean-x: 0;
  --lean-y: 0;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --surface: #161616;
    --card: #1c1c1c;
    --ink: #e8e5df;
    --muted: #a39e98;
    --faint: #8c8780;
    --border: #333330;
    --accent: #8f8fff;
    --sheet: #222220;
    --blob: #55312a;
    --tone: #b2766a;
    --shadow: 0 24px 65px -35px #0008;
    --p-peach: #55312a;
    --p-mint: #2e4840;
    --p-lilac: #3d3650;
    --p-yellow: #4d4526;
    --p-sky: #34414f;
    color-scheme: dark;
  }
}

:root[data-theme=dark] {
  --surface: #161616;
  --card: #1c1c1c;
  --ink: #e8e5df;
  --muted: #a39e98;
  --faint: #8c8780;
  --border: #333330;
  --accent: #8f8fff;
  --sheet: #222220;
  --blob: #55312a;
  --tone: #b2766a;
  --shadow: 0 24px 65px -35px #0008;
  --p-peach: #55312a;
  --p-mint: #2e4840;
  --p-lilac: #3d3650;
  --p-yellow: #4d4526;
  --p-sky: #34414f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.045em; line-height: 1.09; }
h1 { font-size: clamp(40px, min(5.2vw, 8.4svh), 76px); font-weight: 650; margin-bottom: 22px; }
h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; margin-bottom: 18px; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

.wrap { width: min(1184px, calc(100% - 96px)); margin-inline: auto; }

.eyebrow {
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

.pro {
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 99px;
  letter-spacing: .06em;
}

/* ------------------------------------------------------------------ the logo, drawn by the story */

.top {
  /* The ring is the story's progress: a dot at the top, a closed circle once the book is finished. */
  --ring: clamp(0, var(--progress) * 740 / 696, 1);
  --pulse: clamp(0, (var(--progress) * 740 - 696) / 14, 1);
  position: fixed;
  inset: 0 0 auto;
  z-index: 4;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  background: linear-gradient(var(--surface) 62%, transparent);
}

.top > * { pointer-events: auto; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 25px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: -.04em;
  text-decoration: none;
}

.ring { width: 22px; height: 22px; overflow: visible; }

.ring-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: var(--ring) 2;
  transform: rotate(-90deg);
  transform-origin: 12px 12px;
}

.ring-head { transform: rotate(calc(var(--ring) * 360deg)); transform-origin: 12px 12px; }

.ring-head circle {
  fill: var(--accent);
  transform-origin: 12px 3px;
  scale: calc(1.6 - 1.08 * var(--ring));
}

.ring-halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  transform-origin: 12px 12px;
  scale: calc(1 + 1.1 * var(--pulse));
  opacity: calc((1 - var(--pulse)) * min(1, var(--pulse) * 30));
}

.prototype-chip {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 11px;
  background: var(--surface);
}

/* ------------------------------------------------------------------ story geometry */

.story {
  --distance: 740svh;                 /* the ruler: one unit of --raw is one svh of scroll */
  --W: min(25vw, 40svh, 360px);       /* page width when the book is open, at scale 1 */
  --H: calc(var(--W) * 8.5 / 5.5);    /* the Vesper preset's 5.5 × 8.5 in */
  --T: calc(var(--W) * .065);         /* thickness of the text block */
  --o: 0px;
  --b: 2px;
  --u: calc(var(--W) / 10);           /* the board's unit */
  --bs: 1;                            /* the board's scale */
  --wrap: min(1184px, 100vw - 96px);
  --xR: calc(var(--wrap) / 4 + 16px); /* centre of the right column */
  --yC: 1svh;
  --xF: calc(var(--W) / 2);           /* open spread centred in the viewport */
  --yF: -9svh;
  --xB: var(--xR);
  --yB: var(--yC);
  --card-top: calc(72px + 3svh);
  --card-h: 156px;
  --kf: .62;                          /* the book's scale while it's written, */
  --krev: .9;                         /* revised, */
  --ksh: .42;                         /* shared, */
  --kb: .66;                          /* and bound */
  --dxS: calc(var(--u) * -3.8 * var(--bs));
  --dyS: calc(var(--u) * .6 * var(--bs));
  --shift-g: calc(var(--W) * var(--kb) / 2);
  --fan-spread: 1;
  position: relative;
  height: calc(100svh + var(--distance));
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story {
      animation: story-progress linear both;
      animation-timeline: view();
      animation-range: contain 0% contain 100%;
    }
  }
}

@keyframes story-progress {
  from { --progress: 0; }
  to { --progress: 1; }
}

.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  pointer-events: none;

  --raw: calc(var(--progress) * 740);
  --at: calc(var(--raw) - clamp(0, var(--raw) - 42, 60) - clamp(0, var(--raw) - 422, 60));

  /* The two beats on --raw alone: the note on the phone, and the AI. */
  --catch-l: clamp(0, (var(--raw) - 44) / 34, 1);
  --ai-l: clamp(0, (var(--raw) - 424) / 24, 1);
  --catch: calc(var(--catch-l) * var(--catch-l) * (3 - 2 * var(--catch-l)));
  --ai: calc(var(--ai-l) * var(--ai-l) * (3 - 2 * var(--ai-l)));
  --note: clamp(0, (var(--raw) - 64) / 20, 1);
  --suggest: clamp(0, (var(--raw) - 438) / 22, 1);
  --ai-out: clamp(0, (var(--raw) - 470) / 12, 1);
  --path: clamp(0, (var(--at) - 410) / 30, 1);

  /* The beats, on the ruler. Linear slices, smoothstepped where they move things. */
  --plot-l: clamp(0, (var(--at) - 42) / 30, 1);
  --chap-l: clamp(0, (var(--at) - 122) / 32, 1);
  --collapse-l: clamp(0, (var(--at) - 198) / 22, 1);
  --fan-l: clamp(0, (var(--at) - 212) / 30, 1);
  --gather-l: clamp(0, (var(--at) - 286) / 14, 1);
  --zoom-l: clamp(0, (var(--at) - 290) / 22, 1);
  --share-l: clamp(0, (var(--at) - 366) / 24, 1);
  --bound-l: clamp(0, (var(--at) - 456) / 26, 1);
  --fold-l: clamp(0, (var(--at) - 484) / 36, 1);
  --turn-l: clamp(0, (var(--at) - 522) / 22, 1);
  --open-l: clamp(0, (var(--at) - 544) / 32, 1);
  --plot: calc(var(--plot-l) * var(--plot-l) * (3 - 2 * var(--plot-l)));
  --chap: calc(var(--chap-l) * var(--chap-l) * (3 - 2 * var(--chap-l)));
  --collapse: calc(var(--collapse-l) * var(--collapse-l) * (3 - 2 * var(--collapse-l)));
  --fan: calc(var(--fan-l) * var(--fan-l) * (3 - 2 * var(--fan-l)));
  --gather: calc(var(--gather-l) * var(--gather-l) * (3 - 2 * var(--gather-l)));
  --zoom: calc(var(--zoom-l) * var(--zoom-l) * (3 - 2 * var(--zoom-l)));
  --share: calc(var(--share-l) * var(--share-l) * (3 - 2 * var(--share-l)));
  --bound: calc(var(--bound-l) * var(--bound-l) * (3 - 2 * var(--bound-l)));
  --fold: calc(var(--fold-l) * var(--fold-l) * (3 - 2 * var(--fold-l)));
  --turn: calc(var(--turn-l) * var(--turn-l) * (3 - 2 * var(--turn-l)));
  --open: calc(var(--open-l) * var(--open-l) * (3 - 2 * var(--open-l)));
  --string: clamp(0, (var(--at) - 48) / 26, 1);
  --rigin: clamp(0, (var(--at) - 206) / 14, 1);
  --write: clamp(0, (var(--at) - 216) / 52, 1);
  --tally: clamp(0, (var(--at) - 214) / 72, 1);
  --strike: clamp(0, (var(--at) - 310) / 34, 1);
  --insert: clamp(0, (var(--at) - 322) / 30, 1);
  --notes: clamp(0, (var(--at) - 334) / 22, 1);
  --fly: clamp(0, (var(--at) - 392) / 34, 1);
  --bubbles: clamp(0, (var(--at) - 418) / 26, 1);
  --trace: clamp(0, (var(--at) - 462) / 24, 1);
  --swap: clamp(0, (var(--at) - 510) / 8, 1);
  --finale: clamp(0, (var(--at) - 564) / 26, 1);

  /* Where the book is: written in the right column, zoomed to revise, small while it's shared,
     turned to fold, then open in the middle. */
  --x: calc(var(--xR) + var(--dxS) * var(--share) * (1 - var(--bound)) + var(--shift-g) * var(--bound) + (var(--xF) - var(--xR) - var(--shift-g)) * var(--turn));
  --y: calc(var(--yC) + var(--dyS) * var(--share) * (1 - var(--bound)) + (var(--yF) - var(--yC)) * var(--turn));
  --s: calc((var(--kf) + (var(--krev) - var(--kf)) * var(--zoom) + (var(--ksh) - var(--krev)) * var(--share) + (var(--kb) - var(--ksh)) * var(--bound) + (1 - var(--kb)) * var(--turn)) * (.55 + .45 * var(--rigin)));
}

/* ------------------------------------------------------------------ the spark's copy and card */

.spark {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 100svh;
  padding-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.spark-copy {
  --tilt-x: 2deg;
  --tilt-y: 7deg;
  align-self: center;
  max-width: 520px;
  padding: clamp(22px, 4svh, 34px) 38px clamp(18px, 3svh, 26px);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 40px 90px -40px #1414144d, 0 1px 0 color-mix(in srgb, var(--card) 70%, transparent) inset;
  transform: perspective(1400px) rotateX(calc(var(--tilt-x) - var(--lean-y) * 4deg)) rotateY(calc(var(--tilt-y) + var(--lean-x) * 6deg));
  transform-origin: 30% 50%;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.lead {
  font-size: clamp(16px, 2.4svh, 20px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 460px;
  margin-bottom: 26px;
}

.scroll-hint {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-hint span { display: inline-block; color: var(--accent); margin-left: 4px; }

.writing-card {
  display: flex;
  flex-direction: column;
  margin: 0 0 24px;
  background: var(--card);
  padding: 18px 22px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transform: rotate(-1deg);
  transition: border-color .3s, box-shadow .3s;
}

.writing-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.card-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: .11em;
  font-weight: 600;
  color: var(--muted);
}

.tiny-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

textarea {
  flex: 1;
  display: block;
  resize: none;
  width: 100%;
  background: none;
  color: var(--ink);
  border: 0;
  padding: 12px 0 0;
  min-height: 72px;
  font: 23px/1.35 'Vesper Prose', Georgia, serif;
  caret-color: var(--accent);
  outline: 0;
}

textarea::placeholder { color: var(--faint); opacity: .85; }

/* ------------------------------------------------------------------ the characters, drawn by scroll */

.ill { display: block; overflow: visible; }
.ill { --c-tone: var(--tone-l); --c-blob: var(--blob-l); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .ill { --c-tone: var(--tone-d); --c-blob: var(--blob-d); }
}

:root[data-theme=dark] .ill { --c-tone: var(--tone-d); --c-blob: var(--blob-d); }

.ill .k { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ill .ink { stroke: var(--ink); }
.ill .paper { stroke: var(--surface); }
.ill .accent { stroke: var(--accent); }
.ill .tone { stroke: var(--c-tone); }
.ill .blob { fill: var(--c-blob); }
.ill .shape { fill: var(--surface); }
.ill .solid { fill: var(--ink); }
.ill .accent-fill { fill: var(--accent); }

/* Each path starts at its own moment (--t, the app's animation delay) and draws over a fixed span.
   The gap is longer than the line, so no round cap shows before its time. */
.ill .trace {
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1.01 - 1.01 * clamp(0, (var(--draw) * 1.7 - var(--t, 0)) / .5, 1));
}

.ill .fade { opacity: clamp(0, (var(--draw) * 1.7 - var(--t, 0)) / .4, 1); }

.ill .blob {
  transform-box: fill-box;
  transform-origin: center;
  scale: calc(.8 + .2 * clamp(0, var(--draw) * 3, 1));
  opacity: clamp(0, var(--draw) * 3, 1);
}

/* ------------------------------------------------------------------ the board: idea, plot, chapters */

.board, .readers {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(var(--xB), var(--yB)) scale(var(--bs));
}

.board > *, .readers > * { position: absolute; left: 0; top: 0; }

/* The carriage fills the stage, then zooms into the daydreamer's cloud as the note takes over. */
.daydream {
  position: absolute;
  inset: 0;
  transform-origin: 86% 20%;
  transform: scale(calc(1 + .5 * var(--catch)));
  opacity: clamp(0, 1 - var(--catch) * 1.6, 1);
}

.daydream .ill { width: 100%; height: 100%; }

/* Out of the windows: mountains drift, trees go by, the evening star stays put. */
.landscape { opacity: clamp(0, var(--draw) * 3 - 1.4, 1); }
.ill-train { --c-ground: #bcd39a; --c-peach: #f5b9a8; --c-mint: #bde3d3; --c-lilac: #d6cbec; --c-yellow: #f5e184; }
.ill-train .ground { fill: var(--c-ground); }
.ill-train .far { opacity: .55; }
.ill-train .wainscot { opacity: .35; }
.ill-train .blob-peach { fill: var(--c-peach); }
.ill-train .blob-mint { fill: var(--c-mint); }
.ill-train .blob-lilac { fill: var(--c-lilac); }
.ill-train .blob-yellow { fill: var(--c-yellow); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .ill-train { --c-ground: #3a4630; --c-peach: #55312a; --c-mint: #2e4840; --c-lilac: #3d3650; --c-yellow: #4d4526; }
}

:root[data-theme=dark] .ill-train { --c-ground: #3a4630; --c-peach: #55312a; --c-mint: #2e4840; --c-lilac: #3d3650; --c-yellow: #4d4526; }

.say-text { font: italic 21px 'Vesper Prose', Georgia, serif; fill: var(--ink); }
.zzz text { font: 24px 'Vesper Prose', Georgia, serif; fill: var(--muted); }

/* Only the first line is said when nothing moves; the conversation takes turns otherwise. */
.say { transform-box: fill-box; transform-origin: 50% 100%; }
.say-b, .say-c { opacity: 0; }

/* The daydream, in the thought cloud. */
.dream-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-sizing: border-box;
}

.dream-text {
  margin: 0;
  font: italic 22px/1.22 'Vesper Prose', Georgia, serif;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

/* 01 Notes: the daydream on a Mac, an iPad and an iPhone, in sync; each takes a turn being written on. */
.devices {
  transform: translateY(calc(var(--u) * 1.6 * (1 - var(--catch))));
  opacity: calc(min(var(--catch) * 2, 1) * (1 - clamp(0, var(--plot) * 1.8, 1)));
}

.devices > * { position: absolute; }
.devices .mac { left: 0; top: 0; --dl: 6s; }
.devices .tablet { --dl: 3s; }
.devices .phone { --dl: 0s; }

.mac-screen, .mac-base, .devices .tablet, .devices .phone {
  position: absolute;
  background: var(--sheet);
  border: 2px solid var(--ink);
}

.mac-screen {
  left: calc(var(--u) * -4.5);
  top: calc(var(--u) * -5);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 5.8);
  border-radius: calc(var(--u) * .45);
}

.mac-side {
  position: absolute;
  left: calc(var(--u) * .35);
  top: calc(var(--u) * .55);
  bottom: calc(var(--u) * .35);
  width: calc(var(--u) * 1.8);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .32);
  border-right: 1px solid var(--border);
}

.mac-side i { display: block; height: 2px; width: 72%; border-radius: 2px; background: var(--ink); opacity: .3; }
.mac-side i:first-child { background: var(--accent); opacity: 1; width: 52%; }

.mac-base {
  left: calc(var(--u) * -5.7);
  top: calc(var(--u) * .8);
  width: calc(var(--u) * 11.4);
  height: calc(var(--u) * .5);
  border-radius: 0 0 calc(var(--u) * .5) calc(var(--u) * .5);
}

.mac-base::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  width: calc(var(--u) * 1.4);
  height: calc(var(--u) * .16);
  margin-left: calc(var(--u) * -.7);
  border: 2px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}

.devices .tablet {
  left: calc(var(--u) * -8.2);
  top: calc(var(--u) * -1.6);
  width: calc(var(--u) * 4.2);
  height: calc(var(--u) * 5.6);
  border-radius: calc(var(--u) * .5);
}

.devices .phone {
  left: calc(var(--u) * 4.9);
  top: calc(var(--u) * -1);
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 5.2);
  border-radius: calc(var(--u) * .5);
}

.devices .phone .island { width: calc(var(--u) * .8); height: calc(var(--u) * .22); margin-left: calc(var(--u) * -.4); top: calc(var(--u) * .2); }
.note-rule { position: absolute; left: 12%; right: 12%; top: 22%; height: 1.5px; background: var(--tone); }
.note-lines { position: absolute; left: 12%; right: 12%; top: 33%; display: flex; flex-direction: column; gap: calc(var(--u) * .3); opacity: var(--note); }
.note-lines i { display: block; height: 2px; border-radius: 2px; background: var(--ink); opacity: .6; }
.note-lines i.s { width: 55%; }

.caret {
  position: absolute;
  width: 2px;
  height: calc(var(--u) * .5);
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
}

.mac-screen .caret { left: 76%; top: 52%; }
.devices .tablet .caret { left: 60%; top: 62%; }
.devices .phone .caret { left: 60%; top: 60%; }

.sync {
  left: calc(var(--u) * -9);
  top: calc(var(--u) * -7);
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 13);
  overflow: visible;
  opacity: var(--note);
}

.sync-line { fill: none; stroke: var(--accent); stroke-width: .5; stroke-linecap: round; stroke-dasharray: .1 2.2; }
.sync circle { fill: var(--accent); }

.device-cycle {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 13px;
  white-space: nowrap;
  transform: translate(-50%, -50%) translate(0, calc(var(--u) * 5.6));
  opacity: var(--note);
}

.cycle { display: grid; }
.cycle b { grid-area: 1 / 1; font-weight: 500; color: var(--ink); opacity: 0; }
.cycle b:first-child { opacity: 1; }
.cycle b:nth-child(1) { --dl: 0s; }
.cycle b:nth-child(2) { --dl: 3s; }
.cycle b:nth-child(3) { --dl: 6s; }

/* The plot board, on an iPad. */
.ipad {
  width: calc(var(--u) * 19);
  height: calc(var(--u) * 14);
  border: 2px solid var(--ink);
  border-radius: calc(var(--u) * .9);
  transform: translate(-50%, -50%) translate(0, calc(var(--u) * -2.2)) scale(calc(.96 + .04 * var(--plot)));
  opacity: calc(clamp(0, var(--plot) * 2 - .3, 1) * (1 - var(--collapse)));
}

.camera {
  position: absolute;
  left: calc(var(--u) * .3);
  top: 50%;
  width: calc(var(--u) * .2);
  height: calc(var(--u) * .2);
  margin-top: calc(var(--u) * -.1);
  border-radius: 50%;
  background: var(--ink);
  opacity: .6;
}

.idea-card {
  --ix: calc(var(--u) * 1 * (1 - var(--plot)));
  --iy: calc(var(--u) * -2.2 * (1 - var(--plot)) + var(--u) * -6.6 * var(--plot));
  --isc: calc(.5 + .28 * var(--plot));
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 4.2);
  padding: calc(var(--u) * .42) calc(var(--u) * .5) 0;
  background: var(--sheet);
  border-radius: 4px;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--ix) * (1 - var(--collapse))), calc(var(--iy) * (1 - var(--collapse))))
    scale(calc(var(--isc) * (1 - .6 * var(--collapse))));
  opacity: calc(var(--note) * (1 - var(--collapse)));
}

.idea-card::after, .card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  border-radius: inherit;
}

/* An index card's rule, in the blob's tone. */
.idea-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 1.02);
  height: 1.5px;
  background: var(--tone);
}

.pin {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -.16);
  width: calc(var(--u) * .34);
  height: calc(var(--u) * .34);
  margin-left: calc(var(--u) * -.17);
  border-radius: 50%;
  background: var(--accent);
  z-index: 1;
}

.idea-card.twinkle .pin { animation: pulse .5s ease-out; }

.idea-kicker {
  margin: 0 0 calc(var(--u) * .36);
  font-size: calc(var(--u) * .27);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.idea-text {
  margin: 0;
  font: calc(var(--u) * .5)/1.32 'Vesper Prose', Georgia, serif;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

.plot-line {
  left: calc(var(--u) * -9);
  top: calc(var(--u) * -7.5);
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 9);
  overflow: visible;
  opacity: calc(1 - var(--chap));
}

.plot-line path { fill: none; stroke: var(--ink); stroke-linecap: round; }
.plot-line .string { stroke-width: .5; stroke-dasharray: 1 2; stroke-dashoffset: calc(1.01 - 1.01 * var(--string)); }
.plot-line .branch { stroke-width: .35; opacity: .5; stroke-dasharray: 1 2; stroke-dashoffset: calc(1.01 - 1.01 * clamp(0, var(--string) * 2 - 1, 1)); }

.plot-pin {
  --dl: clamp(0, (var(--at) - 60 - var(--d) * 8) / 10, 1);
  width: calc(var(--u) * .3);
  height: calc(var(--u) * .3);
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) translate(calc(var(--u) * var(--px)), calc(var(--u) * var(--py))) scale(var(--dl));
  opacity: calc(1 - var(--chap));
}

/* Five beats hang on the plot line, then split into twelve chapters on the board. */
.card {
  --cx: calc(var(--bx) + (var(--gx) - var(--bx)) * var(--m));
  --cy: calc(var(--by) + (var(--gy) - var(--by)) * var(--m));
  width: calc(var(--u) * (2.9 + .8 * var(--m)));
  height: calc(var(--u) * (3.7 - 1.2 * var(--m)));
  padding: calc(var(--u) * .78) calc(var(--u) * .3) 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .26);
  background: var(--sheet);
  border-radius: 4px;
  transform-origin: 50% 0;
  transform:
    translate(-50%, -50%)
    translate(calc(var(--u) * var(--cx) * (1 - var(--collapse))), calc(var(--u) * var(--cy) * (1 - var(--collapse))))
    rotate(var(--rot))
    scale(calc(1 - .7 * var(--collapse)));
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px dashed var(--ink);
  border-radius: inherit;
  opacity: calc(var(--m) * .8);
}

.card.beat::after { opacity: calc(1 - var(--m)); }
.card.new::after { display: none; }

.card.beat {
  --dl: clamp(0, (var(--at) - 60 - var(--d) * 8) / 18, 1);
  --m: var(--chap);
  --rot: calc(var(--r) * 1deg * (1 - var(--m)) - 26deg * (1 - var(--dl)));
  opacity: calc(var(--dl) * (1 - var(--collapse)));
}

.card.new {
  --ml: clamp(0, (var(--at) - 132 - var(--n) * 4) / 18, 1);
  --m: calc(var(--ml) * (2 - var(--ml)));
  --rot: calc(var(--r) * 1deg * (1 - var(--m)));
  opacity: calc(min(1, var(--ml) * 3) * (1 - var(--collapse)));
}

.beat-label, .num {
  position: absolute;
  left: calc(var(--u) * .3);
  top: calc(var(--u) * .3);
  font-size: calc(var(--u) * .26);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.beat-label { opacity: calc(1 - var(--m) * 3); }
.num { opacity: var(--m); font-size: calc(var(--u) * .3); letter-spacing: 0; color: var(--ink); }

.cl {
  display: block;
  flex: none;
  height: 1.4px;
  width: 92%;
  border-radius: 2px;
  background: var(--ink);
  opacity: .55;
}

.cl.t { height: 2.4px; width: 70%; opacity: .9; }
.cl.s { width: 58%; }

.status {
  position: absolute;
  right: calc(var(--u) * .3);
  bottom: calc(var(--u) * .28);
  width: calc(var(--u) * .3);
  height: calc(var(--u) * .3);
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  opacity: var(--m);
}

/* The dashboard's evening streak: tonight's bar fills, a star lights, the bar starts again. */
.streak-card {
  --words: calc(84212 * var(--tally));
  --thousands: round(down, var(--words) / 1000, 1);
  --hundreds: calc(var(--words) - var(--thousands) * 1000);
  --evenings: calc(212 * var(--tally));
  --fill: max(mod(var(--tally) * 9, 1), clamp(0, (var(--tally) - .995) * 200, 1));
  --tonight: calc(500 * var(--fill));
  width: calc(var(--u) * 10.6);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .4) calc(var(--u) * .5) calc(var(--u) * .34);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%) translate(0, calc(var(--u) * 7.1));
  opacity: min(clamp(0, var(--tally) * 12, 1), 1 - var(--gather));
}

.streak-card p { margin: 0; }
.streak-label { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.streak-figure { font-size: 30px; line-height: 1.1; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.streak-figure .evenings::before { counter-reset: e var(--evenings); content: counter(e); }
.streak-unit { font-size: 11px; color: var(--muted); }
.streak-sky svg { display: block; width: 100%; height: auto; overflow: visible; }

.streak-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: .5;
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1.01 - 1.01 * clamp(0, (var(--tally) * 9 - 1) / 8, 1));
}

.streak-sky circle:not(.tonight-halo) {
  --lit: clamp(0, (var(--tally) * 9 - var(--k) - .92) * 12, 1);
  fill: color-mix(in srgb, var(--accent) calc(var(--lit) * 100%), var(--card));
  stroke: color-mix(in srgb, var(--accent) calc(30% + var(--lit) * 70%), var(--card));
  stroke-width: 1;
}

.tonight-halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: calc(.5 * clamp(0, (var(--tally) * 9 - 8.92) * 12, 1));
}

.tonight-row { display: flex; align-items: center; gap: 8px; margin-top: 4px !important; font-size: 11px; color: var(--muted); }
.tonight-row .bar { flex: 1; height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.tonight-row .bar i { display: block; height: 100%; width: calc(var(--fill) * 100%); background: var(--accent); }
.tonight-words { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 62px; text-align: right; }
.tonight-words::before { counter-reset: t var(--tonight); content: counter(t) " / 500"; }

.streak-finish {
  grid-column: 1 / -1;
  margin-top: calc(var(--u) * .3) !important;
  padding-top: calc(var(--u) * .26);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  text-wrap: balance;
}

.streak-finish .words::before { counter-reset: k var(--thousands) h var(--hundreds); content: counter(k) "," counter(h, pad3); color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ the book (3D) */

.scene {
  position: absolute;
  inset: 0;
  perspective: 2800px;
  perspective-origin: calc(50% + var(--x)) calc(50% + var(--y));
}

.rig, .companions, .backdrop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--W);
  height: var(--H);
  margin: calc(var(--H) / -2) 0 0 calc(var(--W) / -2);
}

.rig {
  transform-style: preserve-3d;
  transform:
    translate3d(var(--x), var(--y), 0)
    rotateX(calc(-14deg * var(--share) * (1 - var(--turn))))
    rotateY(calc(-26deg * var(--share) * (1 - var(--turn))))
    scale(var(--s));
}

.companions, .backdrop { transform: translate(var(--x), var(--y)) scale(var(--s)); }

.sheet {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  background: var(--sheet);
  border-radius: 3px;
}

.sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  border-radius: inherit;
}

.fan-sheet {
  transform-origin: 50% 100%;
  transform:
    translateZ(calc(var(--T) / 2 - var(--z) * var(--T) / 6.5))
    translateX(calc(var(--dx) * var(--W) * var(--fan-spread) * var(--fan) * (1 - var(--gather))))
    rotate(calc(var(--a) * var(--fan-spread) * var(--fan) * (1 - var(--gather))));
  opacity: calc(clamp(0, var(--fan) * 6, 1) * var(--rigin));
}

.lines {
  --L: clamp(0, var(--write) * 1.55 - var(--k) * .11, 1);
  position: absolute;
  inset: 13% 12% 10% 14%;
  display: flex;
  flex-direction: column;
  gap: 3.7cqw;
}

.ln {
  position: relative;
  display: block;
  flex: none;
  height: 1.2cqw;
  width: var(--w);
  border-radius: 1cqw;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  transform-origin: 0 50%;
  transform: scaleX(clamp(0, var(--L) * var(--n) - var(--i), 1));
}

.ln.in { margin-left: 7cqw; width: calc(var(--w) - 7cqw); }

/* The top page: written like the others, then revised. */
.page-one { transform: translateZ(calc(var(--T) / 2)); background: none; }

.page-one::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sheet);
  opacity: var(--rigin);
}

.page-one::after { mask: conic-gradient(from 210deg, #000 calc(var(--rigin) * 1turn), #0000 0); }

.ms { position: absolute; inset: 0; opacity: calc(1 - var(--swap)); }
.ms-lines { --L: clamp(0, var(--write) * 1.25, 1); inset: 10% 13% 8% 13%; gap: 2.6cqw; }

.ln.x {
  --sj: clamp(0, var(--strike) * 4 - var(--j), 1);
  background: color-mix(in srgb, var(--ink) calc(78% - 58% * var(--sj)), transparent);
}

/* Struck text: marked in the blob's peach, then crossed out with a firm ink line. */
.ln.x::before {
  content: '';
  position: absolute;
  inset: -1.1cqw -1.2cqw;
  border-radius: 1cqw;
  background: var(--blob);
  opacity: calc(.5 * var(--sj));
  z-index: -1;
}

.strike {
  position: absolute;
  left: -2.5%;
  right: -2.5%;
  top: 50%;
  height: .9cqw;
  margin-top: -.45cqw;
  border-radius: 1cqw;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: rotate(-1.2deg) scaleX(var(--sj));
}

/* The new words, written in above the struck line and underlined, as the version compare shows them. */
.ins {
  --ij: clamp(0, var(--insert) * 4 - var(--j), 1);
  position: absolute;
  left: var(--il);
  width: var(--iw);
  bottom: calc(100% + 1.15cqw);
  height: 1cqw;
  border-radius: 1cqw;
  background: var(--ink);
  clip-path: inset(-2cqw calc((1 - var(--ij)) * 100%) -2cqw -4cqw);
}

.ins::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .7cqw);
  height: .55cqw;
  border-radius: 1cqw;
  background: var(--accent);
}

/* Page one: the shipped Vesper preset's proportions (native-previews.css, .vesper-template), with the
   type a size up so the first line reads at prototype scale. */
.print {
  position: absolute;
  inset: 0;
  opacity: var(--swap);
  font-family: 'Vesper Prose', Georgia, serif;
  color: var(--ink);
}

.page-content {
  position: absolute;
  top: 29%;
  left: 15.748%;
  right: 11.453%;
  max-height: 62%;
  overflow: hidden;
  font-size: 3.7cqw;
  line-height: 1.32;
}

.chapter-number { font-variant-caps: all-small-caps; letter-spacing: .12em; text-align: center; }

.page-content h3 {
  width: 80%;
  margin: .7333em auto 1.32em;
  font: 400 1.8em/1.15 'Vesper Prose', Georgia, serif;
  letter-spacing: 0;
  text-align: center;
}

.printed-prose { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.small-caps-opening { margin: 0; max-height: 6.6em; overflow: hidden; overflow-wrap: break-word; }
.small-caps-opening::first-line { font-variant-caps: small-caps; }

.ghost-lines {
  display: flex;
  flex-direction: column;
  gap: calc(1.32em - 2.4px);
  padding-top: calc(1.32em - 4px);
}

.ghost-lines i {
  display: block;
  height: 2.4px;
  width: var(--w);
  border-radius: 2px;
  background: var(--ink);
  opacity: .14;
}

.ghost-lines i.in { margin-left: 1.2em; width: calc(var(--w) - 1.2em); }

.folio {
  position: absolute;
  left: 15.748%;
  right: 11.453%;
  bottom: 6.45%;
  font-size: 3cqw;
  line-height: 1;
  text-align: center;
}

.edge {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-color: var(--sheet);
  border: 1.5px solid var(--ink);
  opacity: calc(var(--gather) * var(--rigin));
}

.edge-fore {
  top: 0;
  left: calc(var(--W) - var(--T) / 2);
  width: var(--T);
  height: 100%;
  transform: rotateY(90deg);
  background-image: repeating-linear-gradient(90deg, #0000 0 3px, color-mix(in srgb, var(--ink) 45%, #0000) 3px 4px);
}

.edge-top {
  left: 0;
  top: calc(var(--T) / -2);
  width: 100%;
  height: var(--T);
  transform: rotateX(90deg);
  background-image: repeating-linear-gradient(0deg, #0000 0 3px, color-mix(in srgb, var(--ink) 45%, #0000) 3px 4px);
}

/* The case. Back board behind the block; the spine hinges on its left edge, the front board on the
   spine's. Folded: spine 90°, front board another 90°. Open: the front board swings back to lie flat. */
.case {
  position: absolute;
  left: 0;
  top: calc(var(--o) * -1);
  width: calc(var(--W) + var(--o));
  height: calc(var(--H) + 2 * var(--o));
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--T) / -2 - var(--b)));
}

.spine {
  position: absolute;
  right: 100%;
  top: 0;
  width: calc(var(--T) + 2 * var(--b));
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 100% 50%;
  transform: rotateY(calc(90deg * var(--fold)));
}

.front {
  position: absolute;
  right: 100%;
  top: 0;
  width: calc(var(--W) + var(--o));
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 100% 50%;
  transform: rotateY(calc(90deg * var(--fold) - 180deg * var(--open)));
}

.face {
  --face: var(--sheet);
  position: absolute;
  inset: 0;
  border-radius: 3px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  container-type: inline-size;
}

.face::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--face);
  opacity: clamp(0, var(--trace) * 2.2 - 1.1, 1);
}

.face::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  border-radius: inherit;
  mask: conic-gradient(from 200deg, #000 calc(var(--trace) * 1turn), #0000 0);
}

.face > * { position: relative; }
.spine .face { border-radius: 1px; }
.spine-outside, .front-outside { transform: rotateY(180deg); }

.spine-outside { display: flex; flex-direction: column; justify-content: space-around; padding: 0; }

.spine-outside span {
  display: block;
  height: 2px;
  margin: 0 18%;
  background: var(--ink);
  opacity: clamp(0, var(--trace) * 2 - 1, 1);
}

.dedication {
  margin: 0;
  padding-top: 52%;
  font: italic 5cqw/1.5 'Vesper Prose', Georgia, serif;
  color: var(--muted);
  text-align: center;
  opacity: clamp(0, var(--open) * 2.5 - 1.2, 1);
}

.front-outside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16% 0 13%;
  font-family: 'Vesper Prose', Georgia, serif;
  color: var(--ink);
}

.front-outside > * { opacity: clamp(0, var(--trace) * 2 - 1, 1); }

.cover-kicker, .cover-author {
  margin: 0;
  font-size: 7cqw;
  line-height: 1;
  font-variant-caps: all-small-caps;
  letter-spacing: .16em;
}

.cover-author { font-style: italic; font-variant-caps: normal; letter-spacing: 0; font-size: 8cqw; }
.cover-art { position: relative; width: 62cqw; aspect-ratio: 1; }
.cover-blob { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--blob); }
.cover-star { position: absolute; left: 30%; top: 30%; width: 40%; overflow: visible; }
.cover-star .star-shape { fill: var(--accent); }
.cover-star .star-ticks { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }

/* ------------------------------------------------------------------ around the book */

.blob {
  position: absolute;
  left: -26%;
  top: 8%;
  width: 152%;
  height: 84%;
  fill: var(--blob);
  opacity: var(--rigin);
  transform-origin: 50% 50%;
  transform: translateX(calc(var(--W) * -.5 * var(--open))) scale(calc(1 + .5 * var(--open)), calc(1 + .06 * var(--open)));
}

.companions .ill { position: absolute; height: auto; }

.ill-pencil {
  --draw: clamp(0, (var(--at) - 206) / 24, 1);
  left: -69.5%;
  top: 41%;
  width: 92%;
  transform: translate(calc(-40% * var(--fan)), calc(24% * var(--fan)));
  opacity: clamp(0, 1 - var(--gather) * 1.6, 1);
}

.ill-notebook {
  --draw: clamp(0, (var(--at) - 294) / 24, 1);
  left: -92%;
  top: 64%;
  width: 92%;
  opacity: clamp(0, min(1 - var(--share) * 2.5, 1 - var(--ai) * 2), 1);
}

.ill-ai {
  --draw: clamp(0, (var(--raw) - 426) / 24, 1);
  left: -96%;
  top: 54%;
  width: 96%;
  opacity: clamp(0, 1 - var(--share) * 2.5, 1);
}

.pill {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--card);
  font-size: 12px;
  color: var(--muted);
}

.compare-pill {
  left: 0;
  top: -7.5%;
  opacity: calc(clamp(0, var(--strike) * 5, 1) * (1 - var(--ai)));
}

.style-pill {
  left: calc(100% + 5%);
  top: 22%;
  color: var(--ink);
  opacity: calc(clamp(0, var(--insert) * 4 - 2.6, 1) * (1 - var(--ai)));
}

/* Rewrite, on request: chips, a suggestion, Keep or Undo. And the switch that turns all of it off. */
.ai-card {
  position: absolute;
  left: 46%;
  top: 38%;
  width: 82%;
  padding: 12px 14px 11px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 12px;
  line-height: 1.3;
  transform-origin: 0 0;
  transform: scale(calc(.9 + .1 * var(--suggest)));
  opacity: min(clamp(0, var(--suggest) * 3, 1), 1 - var(--ai-out));
}

.ai-card p { margin: 0; }
.ai-head { display: flex; align-items: center; justify-content: space-between; font-weight: 650; }

.switch {
  position: relative;
  width: 26px;
  height: 15px;
  border: 1.5px solid var(--ink);
  border-radius: 99px;
}

.switch i { position: absolute; right: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.chips { display: flex; gap: 5px; margin-top: 10px !important; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 11px;
  color: var(--muted);
}

.chip.on { border-color: var(--ink); color: var(--ink); }

.ai-lines { display: flex; flex-direction: column; gap: 9px; margin: 13px 0 12px !important; }

.ai-lines i {
  display: block;
  position: relative;
  height: 3px;
  width: var(--w);
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 75%, transparent);
  clip-path: inset(-4px calc((1 - clamp(0, var(--suggest) * 2 - .6, 1)) * 100%) -4px 0);
}

.ai-lines i::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 1.5px;
  background: var(--accent);
}

.ai-actions { display: flex; justify-content: flex-end; gap: 6px; }
.btn { padding: 3px 11px; border: 1px solid var(--border); border-radius: 99px; font-size: 11px; font-weight: 600; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.ill-finished-book {
  --draw: var(--finale);
  left: -172%;
  top: 54%;
  width: 78%;
}

/* ------------------------------------------------------------------ first readers */

.ill-reader {
  --draw: clamp(0, (var(--at) - 370) / 26, 1);
  width: calc(var(--u) * 7.2);
  transform: translate(-50%, -50%) translate(calc(var(--u) * 4), calc(var(--u) * .4));
  opacity: clamp(0, 1 - var(--bound) * 2.5, 1);
}

.thread {
  left: calc(var(--u) * -6);
  top: calc(var(--u) * -8);
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 10);
  overflow: visible;
  opacity: clamp(0, 1 - var(--bound) * 2.5, 1);
}

.thread-line { fill: none; stroke: var(--accent); stroke-width: .5; stroke-linecap: round; stroke-dasharray: .1 2.6; }
.thread-mask { fill: none; stroke: #fff; stroke-width: 6; stroke-dasharray: 1 2; stroke-dashoffset: calc(1.01 - 1.01 * var(--fly)); }

/* The reading copy, flying along the thread: a cubic Bézier through the same four points. */
.plane {
  --t: var(--fly);
  --v: calc(1 - var(--fly));
  --px: calc(var(--v) * var(--v) * var(--v) * -2.4 + 3 * var(--v) * var(--v) * var(--t) * -1.2 + 3 * var(--v) * var(--t) * var(--t) * 2.8 + var(--t) * var(--t) * var(--t) * 4.1);
  --py: calc(var(--v) * var(--v) * var(--v) * -2.2 + 3 * var(--v) * var(--v) * var(--t) * -6.4 + 3 * var(--v) * var(--t) * var(--t) * -6.4 + var(--t) * var(--t) * var(--t) * -.6);
  --dx: calc(3 * var(--v) * var(--v) * 1.2 + 6 * var(--v) * var(--t) * 4 + 3 * var(--t) * var(--t) * 1.3);
  --dy: calc(3 * var(--v) * var(--v) * -4.2 + 3 * var(--t) * var(--t) * 5.8);
  width: calc(var(--u) * 1.3);
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  transform: translate(-50%, -50%) translate(calc(var(--u) * var(--px)), calc(var(--u) * var(--py))) rotate(calc(atan2(var(--dy), var(--dx)) + 42deg));
  opacity: min(1, var(--fly) * 14, (1 - var(--fly)) * 10);
}

.bubble {
  --pop: clamp(0, var(--bubbles) * 2.2 - var(--k), 1);
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .2);
  white-space: nowrap;
  padding: calc(var(--u) * .2) calc(var(--u) * .34);
  background: var(--sheet);
  border: 2px solid var(--ink);
  border-radius: calc(var(--u) * .5);
  font: italic calc(var(--u) * .42)/1.2 'Vesper Prose', Georgia, serif;
  transform: translate(-50%, -50%) translate(var(--bx), var(--by)) scale(calc(.7 + .3 * var(--pop)));
  opacity: calc(var(--pop) * clamp(0, 1 - var(--bound) * 2.5, 1));
}

.bubble .dot { width: calc(var(--u) * .22); height: calc(var(--u) * .22); border-radius: 50%; background: var(--accent); flex: none; }
.bubble-one { --k: 0; --bx: calc(var(--u) * 4.6); --by: calc(var(--u) * -5.7); }
.bubble-two { --k: .9; --bx: calc(var(--u) * 6.4); --by: calc(var(--u) * -4.2); }
.bubble.mark { font: 600 calc(var(--u) * .36)/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: calc(var(--u) * .2) calc(var(--u) * .4); }

/* The author's Readers card: each reader a dot on the way to the finish line. */
.readers-card {
  width: calc(var(--u) * 11.4);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .5);
  padding: calc(var(--u) * .3) calc(var(--u) * .45);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%) translate(calc(var(--u) * .4), calc(var(--u) * 6.3));
  opacity: calc(clamp(0, (var(--at) - 412) / 10, 1) * clamp(0, 1 - var(--bound) * 2.5, 1));
}

.readers-label { margin: 0; white-space: nowrap; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.readers-path { flex: 1; min-width: 0; width: 100%; height: auto; overflow: visible; }
.readers-path .track { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 4; stroke-linecap: round; opacity: .5; }
.readers-path .finish { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.readers-path circle { fill: var(--accent); transform: translateX(calc((var(--from) + (var(--to) - var(--from)) * var(--path)) * 1px)); }

/* ------------------------------------------------------------------ captions in the stage */

.captions { position: absolute; inset: 0; }

.cap, .cap-blob {
  --in: clamp(0, (var(--raw) - var(--from)) / 6, 1);
  --out: clamp(0, (var(--to) - var(--raw)) / 6, 1);
}

/* Every caption floats on glass, leaning a little toward the pointer, over a soft pastel blob. */
.cap {
  position: absolute;
  left: calc((100% - var(--wrap)) / 2);
  top: 50%;
  width: min(440px, calc(var(--wrap) / 2 - 60px));
  padding: 28px 32px 26px;
  border-radius: 24px;
  transform: translateY(-50%) perspective(1400px) rotateX(calc(1.5deg - var(--lean-y) * 4deg)) rotateY(calc(6deg + var(--lean-x) * 6deg));
  translate: 0 calc((1 - var(--in)) * 18px - (1 - var(--out)) * 18px + var(--bob));
  opacity: min(var(--in), var(--out));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.cap h2 { margin-bottom: 14px; }
.cap p:last-child { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; }
.cap-catch { --from: 56; --to: 100; }
.cap-plot { --from: 104; --to: 182; }
.cap-chapters { --from: 184; --to: 254; }
.cap-write { --from: 258; --to: 350; }
.cap-revise { --from: 352; --to: 424; }
.cap-ai { --from: 426; --to: 480; }
.cap-readers { --from: 486; --to: 580; }
.cap-bind { --from: 582; --to: 672; }
.cap-final { --from: 682; --to: 9999; }

.cap-blob {
  position: absolute;
  left: calc((100% - var(--wrap)) / 2 - 60px);
  top: calc(50% - 210px);
  width: 340px;
  height: 290px;
  overflow: visible;
  fill: var(--p-peach);
  opacity: calc(min(var(--in), var(--out)) * .9);
  translate: 0 calc((1 - var(--in)) * 34px - (1 - var(--out)) * 34px);
}

.cap-blob.cap-catch { fill: var(--p-sky); }
.cap-blob.cap-plot { fill: var(--p-yellow); }
.cap-blob.cap-chapters { fill: var(--p-lilac); }
.cap-blob.cap-write { fill: var(--p-mint); }
.cap-blob.cap-ai { fill: var(--p-lilac); }
.cap-blob.cap-readers { fill: var(--p-mint); }
.cap-blob.cap-final { fill: var(--p-yellow); left: calc(50% - 360px); top: auto; bottom: 0; width: 300px; height: 240px; }

.cap.cap-final {
  left: 50%;
  top: auto;
  bottom: 2.5svh;
  padding: 18px 28px 16px;
  width: min(600px, calc(100% - 32px));
  transform: translateX(-50%) perspective(1400px) rotateX(calc(4deg - var(--lean-y) * 4deg)) rotateY(calc(var(--lean-x) * 6deg));
  text-align: center;
  pointer-events: auto;
}

.cap-final h2 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 10px; }
.cap-final .cta-row { margin: 0 0 8px; }
.cap-final p:last-child { font-size: 14px; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--surface);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.button:hover { transform: translateY(-1px); }
.cap-final .eyebrow { margin-bottom: 8px; }

/* ------------------------------------------------------------------ little extras */

/* 02 Plot: the "You are here" star on the line, and an Apple Pencil sketching. */
.you-are-here {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  transform: translate(-50%, calc(-100% + var(--u) * .25)) translate(calc(var(--u) * -1.72), calc(var(--u) * -1.37));
  opacity: calc(clamp(0, (var(--at) - 96) / 10, 1) * (1 - var(--chap)));
}

.you-are-here span { order: -1; }
.you-are-here svg { width: calc(var(--u) * .5); height: calc(var(--u) * .5); fill: var(--accent); overflow: visible; }

.stylus {
  left: calc(var(--u) * 3.1);
  top: calc(var(--u) * .7);
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 4);
  overflow: visible;
  opacity: calc(clamp(0, var(--plot) * 2 - 1, 1) * (1 - var(--chap)));
}

.stylus path { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.stylus .shape-fill { fill: var(--sheet); stroke: none; }
.stylus .sketch { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 1 2; }

/* 03 Chapters: how many, at a glance. */
.chapters-pill {
  transform: translate(-50%, -50%) translate(0, calc(var(--u) * 4.4));
  opacity: calc(var(--chap) * (1 - var(--collapse)));
}

/* 04 Writing: it's evening; a moon, and stars coming out. */
.night {
  left: calc(var(--u) * 4.6);
  top: calc(var(--u) * -8.6);
  width: calc(var(--u) * 4.4);
  height: auto;
  overflow: visible;
  opacity: calc(var(--rigin) * (1 - var(--gather)));
}

.night .moon { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.night .twinkle { fill: var(--accent); transform-box: fill-box; transform-origin: center; }

/* 05 Revision: yesterday's versions, still there behind the page. */
.version {
  position: absolute;
  inset: 0;
  background: var(--sheet);
  border: 2px solid var(--ink);
  border-radius: 3px;
  opacity: calc(clamp(0, var(--strike) * 5, 1) * (1 - clamp(0, var(--share) * 3, 1)));
}

.version.v1 { transform: translate(7%, -4.4%) rotate(2.6deg); }
.version.v2 { transform: translate(3.5%, -2.2%) rotate(1.2deg); }
.version span { position: absolute; right: 2px; top: -22px; font-size: 11px; font-weight: 600; color: var(--muted); }
.version.v2 span { right: auto; left: 72%; }

/* 06 AI: a small sparkle as the suggestion arrives. */
.sparkles { position: absolute; left: 43%; top: 34%; opacity: calc(var(--suggest) * (1 - var(--ai-out))); }
.sparkles i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sparkles i:nth-child(1) { left: -14px; top: -10px; }
.sparkles i:nth-child(2) { left: -4px; top: -24px; width: 4px; height: 4px; }
.sparkles i:nth-child(3) { left: -24px; top: 2px; width: 4px; height: 4px; }

/* 07 Readers: a heart floating up from "Loved this". */
.heart {
  width: calc(var(--u) * .55);
  overflow: visible;
  fill: var(--sheet);
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linejoin: round;
  transform: translate(-50%, -50%) translate(calc(var(--u) * 8.3), calc(var(--u) * -4.7));
  opacity: calc(clamp(0, var(--bubbles) * 2.2 - 1.7, 1) * clamp(0, 1 - var(--bound) * 2.5, 1));
}

/* 08 The book: every evening you showed up, a star. */
.evening-stars { position: absolute; inset: 0; opacity: var(--finale); }

.evening-stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 12px;
  height: 12px;
  background: var(--accent);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Liquid glass: translucent, blurring what's behind it, lit along its top edge. */
.glass {
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  box-shadow: 0 30px 80px -40px #14141455, inset 0 1px 0 color-mix(in srgb, var(--card) 75%, transparent);
}

/* ------------------------------------------------------------------ after */

.after { padding: 18svh 0 22svh; text-align: center; }
.after p:not(.eyebrow) { color: var(--muted); font-size: 18px; }
.quiet-link { font-size: 14px; font-weight: 500; }

/* ------------------------------------------------------------------ time-based moments (load, typing) */

@media (prefers-reduced-motion: no-preference) {
  .ill-train { animation: draw-in 2.2s linear .1s backwards; }
  .carriage { animation: sway 2.6s ease-in-out infinite; }
  .landscape .far { animation: ride 44s linear infinite; }
  .landscape .near { animation: ride 12s linear infinite; }
  .say, .say-b, .say-c { opacity: 0; animation: say 12s var(--d) infinite backwards; }
  .zzz text { animation: drift 3.6s ease-in-out infinite; }
  .zzz text:nth-child(2) { animation-delay: 1.2s; }
  .zzz text:nth-child(3) { animation-delay: 2.4s; }
  .spark-copy { animation: float 7s ease-in-out infinite; }
  .cap { animation: bob 7s ease-in-out infinite; }
  .cap-blob { animation: breathe-soft 9s ease-in-out infinite; }
  .ill .ticks { animation: twinkle 2.8s ease-in-out infinite; }
  .ill .blob { animation: breathe-soft 9s ease-in-out 2.6s infinite; }
  .devices .mac, .devices .tablet, .devices .phone { animation: lift 9s ease-in-out var(--dl) infinite; }
  .caret { animation: caret 9s linear var(--dl) infinite; }
  .devices .mac .caret { --dl: 6s; }
  .devices .tablet .caret { --dl: 3s; }
  .cycle b { opacity: 0; animation: caret 9s linear var(--dl) infinite; }
  .cycle b:first-child { animation-fill-mode: backwards; }
  .you-are-here svg { animation: breathe-star 2.6s ease-in-out infinite; }
  .stylus .sketch { animation: sketch 3.4s ease-in-out infinite; }
  .stylus-body { animation: stylus 3.4s ease-in-out infinite; }
  .night .moon { animation: drift-moon 8s ease-in-out infinite; }
  .night .twinkle { animation: twinkle-star 2.6s ease-in-out var(--d) infinite; }
  .sparkles i { animation: pop 1.8s ease-out infinite; }
  .sparkles i:nth-child(2) { animation-delay: .3s; }
  .sparkles i:nth-child(3) { animation-delay: .6s; }
  .heart { animation: rise 3s ease-out infinite; }
  .evening-stars i { animation: twinkle-star 2.4s ease-in-out var(--d) infinite; }
  .dream-text { animation: appear .6s ease-out 1.5s backwards; }
  .scroll-hint span { animation: nudge 2.2s ease-in-out 2s infinite; }
  .ring-head circle { animation: breathe-dot 2.4s ease-in-out infinite; }
}

@keyframes draw-in { from { --draw: 0; } }
@keyframes ride { to { transform: translateX(-440px); } }
@keyframes sway { 50% { transform: translateY(1.6px); } }
@keyframes say { 0% { opacity: 0; transform: translateY(10px) scale(.94); } 4%, 29% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: none; } }
@keyframes drift { 0% { opacity: 0; transform: translate(0, 6px); } 30%, 60% { opacity: .9; } 100% { opacity: 0; transform: translate(-6px, -10px); } }
@keyframes float { 50% { translate: 0 -7px; } }
@keyframes bob { 50% { --bob: -7px; } }
@keyframes breathe-soft { 50% { scale: 1.035; } }
@keyframes twinkle { 50% { opacity: .4; } }
@keyframes lift { 0%, 100% { translate: 0 0; } 6%, 28% { translate: 0 calc(var(--u) * -.3); } 36% { translate: 0 0; } }
@keyframes caret { 0%, 3% { opacity: 0; } 5%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes breathe-star { 50% { scale: 1.3; } }
@keyframes sketch { 0% { stroke-dashoffset: 1.01; } 45%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1.01; } }
@keyframes stylus { 0% { translate: -30px 2px; } 45%, 75% { translate: 0 0; } 100% { translate: -30px 2px; } }
@keyframes drift-moon { 50% { translate: 0 -4px; rotate: -3deg; } }
@keyframes twinkle-star { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .35; scale: .7; } }
@keyframes pop { 0% { scale: 0; opacity: 1; } 60% { scale: 1.4; opacity: 1; } 100% { scale: .2; opacity: 0; } }
@keyframes rise { 0% { translate: 0 0; scale: .6; } 20% { scale: 1; } 100% { translate: 6px -40px; scale: .9; opacity: 0; } }
@keyframes appear { from { opacity: 0; } }
@keyframes pulse { 40% { transform: scale(1.6); } }
@keyframes nudge { 50% { transform: translateY(4px); } }
@keyframes breathe-dot { 50% { opacity: .55; } }

/* ------------------------------------------------------------------ phones */

@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .top { height: 56px; }
  .mark { font-size: 21px; }
  .ring { width: 19px; height: 19px; }
  .prototype-chip { font-size: 10px; }

  .story {
    --W: min(78vw, 34svh);
    --bs: .62;
    --xR: 0px;
    --xF: 0px;                       /* page one centred; the open cover runs off to the left */
    --yC: -11svh;
    --yF: -9svh;
    --kf: .6;
    --krev: .8;
    --ksh: .4;
    --kb: .6;
    --fan-spread: .75;
    --card-h: 132px;
  }

  .spark { grid-template-columns: 1fr; align-content: start; gap: 14px; padding-top: 76px; }
  .spark-copy { align-self: start; padding: 20px 20px 16px; border-radius: 20px; --tilt-x: 0deg; --tilt-y: 0deg; }
  .daydream { top: max(52svh, 450px); transform-origin: 80% 30%; }
  .spark-copy .eyebrow { margin-bottom: 10px; font-size: 10px; }
  h1 { font-size: 40px; margin-bottom: 10px; }
  .lead { font-size: 16px; margin-bottom: 0; }
  .scroll-hint { display: none; }
  .writing-card { padding: 14px 18px 8px; margin: 14px 0 0; }
  textarea { font-size: 19px; }

  .cap {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 3svh;
    width: auto;
    transform: none;
    text-align: center;
    padding: 16px 14px 12px;
    border-radius: 20px;
  }

  .cap.cap-final { transform: none; left: 16px; right: 16px; width: auto; }
  .cap-blob, .cap-blob.cap-final { left: 4%; top: auto; bottom: 15svh; width: 44vw; height: 36vw; }

  .cap .eyebrow { margin-bottom: 6px; font-size: 10px; }
  .cap h2 { font-size: 26px; margin-bottom: 8px; }
  .cap h2 br { display: none; }
  .cap p:last-child { font-size: 15px; }
  .streak-card { transform: translate(-50%, -50%) translate(0, calc(var(--u) * 11.2)) scale(1.1); }
  .device-note { font-size: 15px; }
  .ill-finished-book { left: -30%; top: 74%; width: 62%; }
}

/* ------------------------------------------------------------------ reduced motion: the finished book, still */

@media (prefers-reduced-motion: reduce) {
  .story {
    --progress: 1 !important;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .spark { position: relative; order: 1; height: auto; min-height: 0; padding-bottom: 24px; }
  .spark-copy { padding-top: calc(var(--card-top) + 24px); }
  .scroll-hint { display: none; }
  .stage { position: relative; order: 2; height: max(100svh, 720px); }
  .cap:not(.cap-final), .cap-blob:not(.cap-final) { display: none; }

  @media (max-width: 760px) {
    .spark-copy { padding-top: 0; }
    .writing-card { height: auto; min-height: var(--card-h); }
  }
}