/* tacuinum.app: warm paper, the icon's ink and sage, New York on Apple devices. Motion is CSS scroll-driven
   (Safari 26, Chrome 115; iOS 26 is the app's minimum, so every iPhone that runs Tacuinum gets it). Without support,
   or with Reduce Motion, every scene shows its final state. Apple's phone images are never animated or covered. */

:root {
  color-scheme: light dark;
  --paper: #F4EFE6;
  --paper-2: #ECE5D8;
  --sheet: #FFFDF8;
  --card: #FFFFFF;
  --ink: #1B3354;
  --text: #1E2631;
  --muted: #575F69;
  --rule: #D6CDBE;
  --tint: #2F4F6F;
  --sage: #4E6857;
  --high: #9E1B1B;
  --none: #5E5E66;
  --range: rgba(30, 38, 49, .07);
  --range-edge: rgba(30, 38, 49, .42);
  --shadow: rgba(48, 36, 16, .3);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .18 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --report: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(1rem, 4vw, 2.75rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10161F;
    --paper-2: #151D28;
    --sheet: #ECE6DA;
    --card: #1B2430;
    --ink: #EDE7DC;
    --text: #DCE1E7;
    --muted: #A6AFBA;
    --rule: #2C3746;
    --tint: #B7CDDC;
    --sage: #9DB3A3;
    --high: #FF7A6B;
    --none: #AEAEB2;
    --range: rgba(220, 225, 231, .08);
    --range-edge: rgba(220, 225, 231, .42);
    --shadow: rgba(0, 0, 0, .6);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--text);
  background: var(--paper) var(--grain);
  font: 400 1.0625rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p, figure, blockquote { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--ink); text-wrap: balance; }
a { color: var(--tint); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; border-radius: 3px; }
[id] { scroll-margin-top: 1rem; }
.wrap { width: min(100% - 2 * var(--gutter), 74rem); margin-inline: auto; }
.skip { position: absolute; z-index: 10; left: 1rem; top: -5rem; padding: .6rem 1rem; border-radius: .5rem; background: var(--ink); color: var(--paper); }
.skip:focus { top: 1rem; }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.015em; }
h3 { font-size: 1.4rem; line-height: 1.25; }

/* Header */

.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.4rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; font: 400 1.45rem/1 var(--serif); letter-spacing: -.01em; }
.brand img { width: 34px; height: 34px; border-radius: 23%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.top nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.2rem); font-size: .95rem; }
.top nav a { color: var(--text); text-decoration: none; }
.top nav a:hover { color: var(--tint); text-decoration: underline; }
@media (max-width: 40rem) { .top nav a:not(.lang) { display: none; } }

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  min-height: min(56rem, calc(100svh - 5.5rem));
  padding-block: clamp(1rem, 4vh, 3rem) clamp(3rem, 9vh, 6rem);
}
.ask p {
  font: italic 400 clamp(2.6rem, 6.1vw, 5.5rem)/1.03 var(--serif);
  color: var(--ink);
  letter-spacing: -.022em;
  text-wrap: balance;
  hanging-punctuation: first;
}
.ask figcaption { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; }
.hero h1 { margin-top: clamp(2.2rem, 6vh, 3.6rem); font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.2; }
.lede { margin-top: .9rem; max-width: 33rem; font-size: clamp(1.08rem, 1.35vw, 1.2rem); }
.get { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; margin-top: 1.6rem; }
.badge { display: inline-block; padding-block: 12.5px; border-radius: 10px; }
.badge img { width: auto; height: 50px; }
.meta { color: var(--muted); font-size: .92rem; line-height: 1.45; }

.hero-copy { position: relative; z-index: 2; }
.hero-art { position: relative; justify-self: center; width: min(100%, 23rem, (100svh - 8rem) * .49); }
.phone { position: relative; z-index: 1; }
.phone img { width: 100%; }
.phone figcaption { margin-top: .9rem; text-align: center; font-size: .82rem; color: var(--muted); }
.desk { position: absolute; inset: 0; }
.desk .sheet { position: absolute; width: 76%; }
.desk .s1 { left: -36%; top: 16%; rotate: -8deg; }
.desk .s2 { right: -38%; top: 34%; rotate: 6.5deg; }
.desk .s3 { left: 10%; top: -5%; rotate: -2.5deg; }

/* Paper: the hero's sheets and the report that gets read */

.paper {
  overflow: clip;
  aspect-ratio: 210 / 297;
  padding: 10% 8%;
  border-radius: 2px;
  background: var(--sheet);
  color: #23272E;
  font: 400 clamp(.4rem, .62vw, .54rem)/1.5 var(--report);
  box-shadow: 0 1px 1px var(--shadow), 0 16px 34px -18px var(--shadow);
}
.paper b { display: block; font-size: 1.3em; letter-spacing: .02em; }
.paper .dates { display: flex; justify-content: space-between; gap: 1em; margin: 1.1em 0 2.2em; }
.paper table { width: 100%; border-collapse: collapse; }
.paper th { padding-bottom: .7em; text-align: left; }
.paper td { padding: .4em 0; }
.paper .lines {
  display: block;
  width: 82%;
  height: 26%;
  margin-top: 2.4em;
  background: repeating-linear-gradient(to bottom, rgba(35, 39, 46, .13) 0 .5em, transparent .5em 1.6em);
}
.paper .lines.long { width: 100%; height: 62%; }

.report .paper { aspect-ratio: auto; padding: 1.7em 1.8em 2.2em; font-size: clamp(.62rem, .95vw, .8rem); }
.rtable { position: relative; display: grid; gap: .3em; }
.rrow { position: relative; display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.6fr; gap: .8em; padding: .38em .55em; }
.rhead { font-weight: 700; }
.rrow:not(.rhead)::after, .d-draw::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid #9DB0C5;
  border-radius: 2px;
}
.d-draw { position: relative; }
.d-draw::after { inset: -.3em -.45em; }
.band { position: absolute; left: -3%; right: -3%; top: 0; height: 2.4em; translate: 0 -50%; opacity: 0;
        background: linear-gradient(to bottom, transparent, rgba(47, 79, 111, .2), transparent); pointer-events: none; }

/* The interlude */

.scatter { padding-block: clamp(5rem, 16vh, 10rem); }
.said { max-width: 21ch; font: 400 clamp(1.9rem, 4.4vw, 3.7rem)/1.14 var(--serif); color: var(--ink); letter-spacing: -.015em; }
.said + .said { margin-top: 2.4rem; }
.said.answer { font-style: italic; }

/* Scenes (without motion: everything in place, final state) */

.scene { padding-block: clamp(4rem, 12vh, 8rem); }
.pin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.steps { display: grid; gap: 1.7rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.step p, .say { max-width: 30rem; }
.step p { margin-top: .45rem; }
.say { margin-top: 1.1rem; }
.say.t1 { margin-top: 2.2rem; }
.read .stage { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; gap: 1.25rem; }

.review, .cards-in { display: grid; gap: .5rem; }
.review { font-size: clamp(.68rem, 1.55svh, .8rem); color: #1C1C1E; }
.confirm-all {
  display: flex; align-items: center; justify-content: center; gap: .55em;
  padding: .75em 1em; border-radius: 999px;
  background: #FFFFFF; color: #2F4F6F; font-weight: 500; text-align: center; text-wrap: balance;
  box-shadow: 0 1px 2px rgba(20, 20, 30, .08);
}
.confirm-all svg { width: 1.35em; height: 1.35em; }
.card { padding: .7em .9em .75em; border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(20, 20, 30, .07); }
.crop {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.6fr; gap: .5em;
  padding: .3em .6em; border: 1px solid #D5DCE4; border-radius: 6px;
  color: #33363B; font: .8em/1.35 var(--report);
}
.l1 { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; margin-top: .5em; font-size: 1.1em; }
.l1 b { font-weight: 600; }
.v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v small { color: #5E5E66; font-size: .88em; font-weight: 400; }
.l2 { display: flex; justify-content: space-between; gap: .6em; margin-top: .1em; color: #5E5E66; }
.flag { display: inline-flex; align-items: center; gap: .3em; font-weight: 500; white-space: nowrap; }
.flag svg { width: 1.05em; height: 1.05em; }
.card .flag.high { color: #9E1B1B; }
.state { display: grid; align-items: center; margin-top: .45em; color: #5E5E66; }
.state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .45em; }
.state svg { width: 1.2em; height: 1.2em; flex: none; }
.s-read { opacity: 0; color: #2F4F6F; }
.s-ok svg { color: #8E8E93; }
.doubt .state { display: flex; align-items: flex-start; gap: .6em; color: #1C1C1E; }
.doubt .state svg { margin-top: .05em; }
.pill { flex: none; margin-left: auto; padding: .25em .9em; border-radius: 999px; background: #EEEEF0; color: #2F4F6F; font-weight: 500; }

/* The chart */

.plot-title { margin-bottom: .5rem; color: var(--muted); font-size: .95rem; }
.plot-title b { margin-right: .35rem; font: 400 1.6rem/1.1 var(--serif); color: var(--ink); }
.plot-area { position: relative; }
.plot-area > svg { width: 100%; height: auto; overflow: visible; }
.grid line { stroke: var(--rule); stroke-width: 1; }
.grid .year { stroke-dasharray: 2 4; }
.grid .base { stroke: var(--muted); stroke-opacity: .55; }
.grid text { fill: var(--muted); font: 12.5px var(--sans); }
.range rect { fill: var(--range); }
.range line { stroke: var(--range-edge); stroke-width: 1.2; stroke-dasharray: 5 4; }
.trend { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pt { fill: var(--none); stroke: var(--paper); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.p4 { fill: var(--high); }
.sel { stroke: var(--high); stroke-width: 1.2; stroke-dasharray: 3 4; }
.callout {
  position: absolute; right: 37%; top: 0;
  display: grid; justify-items: start; gap: .05rem; min-width: 10.5rem; padding: .65rem .9rem;
  border-radius: 12px; background: var(--card); font-size: .82rem; color: var(--muted);
  box-shadow: 0 0 0 1px var(--rule), 0 10px 28px -14px var(--shadow);
}
.c-date { color: var(--text); font-weight: 500; }
.c-val { color: var(--text); font-size: 1.55rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.c-val small { color: var(--muted); font-size: .58em; font-weight: 400; }
.callout .flag { color: var(--high); }
.c-src { margin-top: .25rem; line-height: 1.35; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1rem; color: var(--muted); font-size: .85rem; }
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
.legend svg { width: .8rem; height: .8rem; }
.sw-none { color: var(--none); }
.sw-high { color: var(--high); }
.sw-range { display: inline-block; width: 1.3rem; height: .8rem; background: var(--range); border-block: 1.2px dashed var(--range-edge); }
.reply { margin-top: 1.5rem; font: italic 400 clamp(2rem, 4vw, 3.2rem)/1.1 var(--serif); color: var(--ink); }

/* Plates: the app's own screens, flat, framed like the plates of a book */

.plates { padding-block: clamp(4rem, 12vh, 8rem); }
.plate-row { display: grid; grid-template-columns: repeat(2, minmax(0, 21rem)); justify-content: center; gap: clamp(2rem, 7vw, 7rem); margin-top: clamp(2.5rem, 7vh, 4.5rem); }
.mat { padding: clamp(10px, 1.6vw, 16px); border: 1px solid var(--rule); background: var(--paper-2); }
.plate .mat img { border-radius: 14% / 6.45%; }
.detail .mat img { border-radius: 10px; }
.plate figcaption, .detail figcaption { margin-top: 1rem; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.tav { display: block; margin-bottom: .15rem; font: italic 400 1.1rem/1.3 var(--serif); color: var(--ink); }

/* History, with Apple's phone kept still */

.history { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 7vw, 7rem); padding-block: clamp(4rem, 12vh, 8rem); }
.history .phone { position: sticky; top: max(1.5rem, calc(50svh - 21.5rem)); align-self: start; justify-self: center; width: min(100%, 21rem); }
.block { padding-block: clamp(2rem, 9vh, 4.5rem); }
.block + .block { border-top: 1px solid var(--rule); }
.history-copy h2 + .block { padding-top: 2.4rem; }
.block p { max-width: 32rem; margin-top: .6rem; }
.detail { width: min(100%, 20rem); margin-top: 1.8rem; }

/* Privacy, as a ledger */

.ledger { padding-block: clamp(5rem, 14vh, 9rem); background: var(--paper-2); }
.ledger h2 { max-width: 15ch; font-size: clamp(2.3rem, 5.4vw, 4.5rem); line-height: 1.04; letter-spacing: -.022em; }
.ledger h2 em { display: block; }
.ledger-list { max-width: 46rem; margin: clamp(2.5rem, 7vh, 4rem) 0 0; font: 400 clamp(1.1rem, 1.9vw, 1.45rem)/1.3 var(--serif); }
.ledger-list div { display: flex; align-items: baseline; gap: .6rem; padding-block: .55rem; }
.ledger-list div::after { content: ""; order: 2; flex: 1 1 1.5rem; min-width: 1.5rem; translate: 0 -.28em; border-bottom: 2px dotted var(--muted); opacity: .55; transform-origin: left; }
.ledger-list dt { order: 1; }
.ledger-list dd { order: 3; max-width: 55%; margin: 0; color: var(--ink); font-style: italic; text-align: right; }
.note { max-width: 40rem; margin-top: 2.4rem; color: var(--muted); }

/* The name */

.name { padding-block: clamp(5rem, 14vh, 9rem); }
.name > * { max-width: 40rem; }
.name h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.name p { margin-top: 1.3rem; font: 400 clamp(1.15rem, 1.6vw, 1.35rem)/1.6 var(--serif); }
.initial::first-letter { float: left; padding: .07em .12em 0 0; color: var(--sage); font-size: 3.55em; line-height: .8; }

/* Questions */

.faq { padding-block: clamp(4rem, 12vh, 8rem); }
.qa { max-width: 46rem; margin-top: 2.4rem; border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 1.15rem; cursor: pointer; list-style: none;
  font: 400 clamp(1.15rem, 1.7vw, 1.35rem)/1.3 var(--serif); color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; color: var(--muted); font: 300 1.5rem/1 var(--sans); transition: rotate .2s var(--ease); }
.qa details[open] summary::after { rotate: 45deg; }
.qa details p { max-width: 38rem; padding-bottom: 1.3rem; }
.more { margin-top: 1.6rem; color: var(--muted); }

/* End and footer */

.end { display: grid; justify-items: center; padding-block: clamp(5rem, 16vh, 10rem); text-align: center; }
.end-icon { width: 112px; height: 112px; border-radius: 23%; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 18px 40px -18px rgba(27, 51, 84, .5); }
.end-name { margin-top: 1.4rem; font: 400 clamp(2.6rem, 5vw, 3.6rem)/1 var(--serif); color: var(--ink); letter-spacing: -.02em; }
.end-sub { margin-top: .6rem; font-size: 1.2rem; }
.end .badge { margin-top: 1.4rem; }
.foot { padding-block: 3rem 4rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .88rem; }
.disclaimer { max-width: 44rem; color: var(--text); }
.foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.2rem; }
.foot nav a { color: var(--text); }
.fine { max-width: 52rem; margin-top: 1rem; font-size: .8rem; }

/* Narrow screens */

@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .scatter { padding-block: 4rem 3rem; }
  .hero-art { width: min(68%, 18rem); margin-top: 1rem; }
  .pin, .history { grid-template-columns: 1fr; }
  .read .stage { grid-template-columns: 1fr; margin-top: 1rem; }
  .chart .stage { margin-top: 1rem; }
  .callout { position: static; width: fit-content; margin-top: .9rem; }
  .plate-row { grid-template-columns: minmax(0, 20rem); }
  .history .phone { position: static; width: min(70%, 18rem); }
  .block { padding-block: 2.2rem; }
}

/* Motion */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .ask, .hero h1, .lede, .get { animation: rise .9s var(--ease) both; }
  .hero h1 { animation-delay: .12s; }
  .lede { animation-delay: .2s; }
  .get { animation-delay: .28s; }
  .desk .paper { animation: settle 1.2s var(--ease) both; }
  .s3 .paper { animation-delay: .05s; }
  .s1 .paper { animation-delay: .2s; }
  .s2 .paper { animation-delay: .35s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes settle { from { opacity: 0; transform: translateY(-28px) rotate(-5deg) scale(1.05); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes reading { from { opacity: .16; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes up-in { from { opacity: 0; translate: 0 22px; } }
@keyframes box { from { opacity: 0; scale: 1.06; } }
@keyframes sweep { 0% { top: 0; opacity: 0; } 8%, 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes straighten { from { rotate: -5deg; scale: 1.05; } }
@keyframes aside { from { translate: 22% -50%; scale: 1; } }
@keyframes press { 50% { scale: .96; } to { background: #2F4F6F; color: #FFFFFF; } }
@keyframes step { 0%, 100% { opacity: var(--off); } 12%, 88% { opacity: 1; } }
@keyframes step-first { 0%, 75% { opacity: 1; } 100% { opacity: var(--off); } }
@keyframes step-last { 0% { opacity: var(--off); } 10%, 100% { opacity: 1; } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes pop { from { opacity: 0; scale: 0; } }
@keyframes gather { to { rotate: 0deg; } }
@keyframes lead { from { scale: 0 1; } }
@keyframes list { to { translate: 0 min(0px, -100% + var(--stage-h) - 6rem); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* The hero's sheets straighten up as the page moves on. */
    .hero { view-timeline: --hero block; }
    .desk .sheet { animation: gather linear both; animation-timeline: --hero; animation-range: exit 0% exit 70%; }

    /* The interlude is read as it passes. */
    .said span { animation: reading linear both; animation-timeline: view(); animation-range: cover 18% cover 40%; }

    /* Plates, the Health detail, ledger rows. Apple's phone images stay still. */
    .plate, .detail, .block h3, .block p { animation: up-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .ledger-list div { view-timeline: --row block; }
    .ledger-list div::after { animation: lead linear both; animation-timeline: --row; animation-range: entry 20% cover 30%; }
    .ledger-list dd { animation: fade-in linear both; animation-timeline: --row; animation-range: cover 22% cover 34%; }

    /* Wide screens: the two scenes are pinned while the page scrolls through them. */
    @media (min-width: 52.01rem) and (min-height: 38rem) {
      .scene { padding-block: 0; }
      .scene .pin { position: sticky; top: 0; height: 100svh; }
      .scene.read { height: 440svh; view-timeline: --read block; }
      .scene.chart { height: 320svh; view-timeline: --chart block; }

      .read { --stage-h: min(40rem, 84svh); }
      .read .stage { display: block; position: relative; height: var(--stage-h); }
      .read .report { position: absolute; left: 0; top: 50%; width: 58%; translate: 0 -50%; scale: .88; transform-origin: 0 50%; z-index: 1;
                      animation: aside linear both; animation-timeline: --read; animation-range: contain 44% contain 52%; }
      .read .report .paper { animation: straighten linear both; animation-timeline: --read; animation-range: contain 0% contain 10%; }
      .read .review { position: absolute; z-index: 2; right: 0; top: 0; bottom: 0; width: 47%; display: flex; flex-direction: column; }
      .read .cards { flex: 1; min-height: 0; overflow: clip;
                     -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
      .read .cards-in { animation: list linear both; animation-timeline: --read; animation-range: contain 72% contain 92%; }

      .rrow:not(.rhead)::after, .d-draw::after { animation: box linear both; animation-timeline: --read; }
      .d-draw::after { animation-range: contain 14% contain 17%; }
      .rtable .r1::after { animation-range: contain 17% contain 20%; }
      .rtable .r2::after { animation-range: contain 20% contain 23%; }
      .rtable .r3::after { animation-range: contain 23% contain 26%; }
      .rtable .r4::after { animation-range: contain 26% contain 29%; }
      .rtable .r5::after { animation-range: contain 29% contain 32%; }
      .rtable .r6::after { animation-range: contain 32% contain 35%; }
      .band { animation: sweep linear both; animation-timeline: --read; animation-range: contain 15% contain 37%; }

      .review .card, .confirm-all { animation: up-in linear both; animation-timeline: --read; }
      .review .c1 { animation-range: contain 50% contain 54%; }
      .review .c2 { animation-range: contain 52% contain 56%; }
      .review .c3 { animation-range: contain 54% contain 58%; }
      .review .c4 { animation-range: contain 56% contain 60%; }
      .review .c5 { animation-range: contain 58% contain 62%; }
      .review .c6 { animation-range: contain 60% contain 64%; }
      .confirm-all { animation: up-in linear both, press linear both; animation-timeline: --read, --read;
                     animation-range: contain 48% contain 52%, contain 66% contain 70%; }
      .s-read { opacity: 1; animation: fade-out linear both; animation-timeline: --read; animation-range: contain 69% contain 71%; }
      .s-ok { animation: fade-in linear both; animation-timeline: --read; animation-range: contain 71% contain 74%; }

      .steps { --off: .26; }
      .step { animation: step linear both; animation-timeline: --read; }
      .st1 { animation-name: step-first; animation-range: contain 0% contain 14%; }
      .st2 { animation-range: contain 10% contain 48%; }
      .st3 { animation-name: step-last; animation-range: contain 44% contain 100%; }

      .grid, .range { animation: fade-in linear both; animation-timeline: --chart; animation-range: contain 0% contain 8%; }
      .trend { stroke-dasharray: 1; animation: draw linear both; animation-timeline: --chart; animation-range: contain 8% contain 55%; }
      .pt { animation: pop linear both; animation-timeline: --chart; }
      .p1 { animation-range: contain 7% contain 10%; }
      .p2 { animation-range: contain 23% contain 26%; }
      .p3 { animation-range: contain 39% contain 42%; }
      .p4 { animation-range: contain 54% contain 58%; }
      .sel, .callout { animation: fade-in linear both; animation-timeline: --chart; animation-range: contain 58% contain 64%; }
      .reply { animation: up-in linear both; animation-timeline: --chart; animation-range: contain 68% contain 76%; }
      .say { animation: up-in linear both; animation-timeline: --chart; }
      .t1 { animation-range: contain 0% contain 6%; }
      .t2 { animation-range: contain 22% contain 30%; }
      .t3 { animation-range: contain 56% contain 64%; }
    }

    /* Narrow or short screens: no pinning; each part moves as it crosses the screen. */
    @media (max-width: 52rem), (max-height: 37.99rem) {
      .rrow:not(.rhead)::after, .d-draw::after { animation: box linear both; animation-timeline: view(); animation-range: cover 30% cover 40%; }
      .review .card, .confirm-all { animation: up-in linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
      .s-read { opacity: 1; animation: fade-out linear both; animation-timeline: view(); animation-range: cover 44% cover 47%; }
      .s-ok { animation: fade-in linear both; animation-timeline: view(); animation-range: cover 47% cover 51%; }
      .chart .stage { timeline-scope: --chart; }
      .plot { view-timeline: --chart block; }
      .grid, .range { animation: fade-in linear both; animation-timeline: --chart; animation-range: entry 20% entry 80%; }
      .trend { stroke-dasharray: 1; animation: draw linear both; animation-timeline: --chart; animation-range: entry 70% cover 55%; }
      .pt { animation: pop linear both; animation-timeline: --chart; }
      .p1 { animation-range: entry 70% entry 90%; }
      .p2 { animation-range: cover 33% cover 37%; }
      .p3 { animation-range: cover 43% cover 47%; }
      .p4 { animation-range: cover 53% cover 57%; }
      .sel { animation: fade-in linear both; animation-timeline: --chart; animation-range: cover 56% cover 62%; }
      .reply { animation: up-in linear both; animation-timeline: --chart; animation-range: cover 62% cover 70%; }
    }
  }
}