/* Par Reporter: the page. Every rule starts at .prp, a prp- class or one of the story's np-
   classes; tokens fall back to the site's values when the Site's shell doesn't define them. The
   site's own style everywhere (cream,
   ink, Newsreader and mono, thin lines, no hard shadow); the crayon is only in the drawings and
   the kit's generic card for the phones and the laptop; the story is the newsroom's own page.
   Without JavaScript the demo shows its last step; the module only adds motion under
   [data-prp-anim]. */

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/newsreader-400.ttf) format("truetype"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/newsreader-400-italic.ttf) format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/geist-400.ttf) format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/geist-500.ttf) format("truetype"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/geist-600.ttf) format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-400.ttf) format("truetype"); }

.prp {
  --prp-bg: var(--bg, #f7f0e1);
  --prp-surface: var(--surface, #fffdf8);
  --prp-text: var(--text, #211a10);
  --prp-body: #3d3325;
  --prp-muted: var(--text-muted, #6e6350);
  --prp-faint: #72674f;
  --prp-border: var(--border, #e9dec7);
  --prp-strong: var(--border-strong, #d8cbaa);
  --prp-ink: var(--accent, #2b231b);
  --prp-cobalt: var(--pil-cobalt, #2747b0);
  --prp-path: #b9c3dc;
  --prp-yellow: var(--pil-yellow, #f5c63c);
  --prp-yellow-soft: var(--pil-yellow-soft, #fff3c9);
  --prp-serif: var(--font-display, "Newsreader", "Iowan Old Style", Georgia, serif);
  --prp-sans: var(--font-body, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --prp-mono: var(--font-mono, "JetBrains Mono", "SF Mono", Menlo, monospace);
  --prp-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --prp-gutter: var(--gutter, clamp(16px, 5vw, 64px));
  --prp-max: var(--wrap, 1180px);
  --prp-link: 620ms;
  margin: 0;
  background: var(--prp-bg);
  color: var(--prp-text);
  font: 400 16px/1.55 var(--prp-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.prp *, .prp *::before, .prp *::after { box-sizing: border-box; }
.prp :is(h1, h2, h3) { font-family: var(--prp-serif); font-weight: 400; margin: 0; color: var(--prp-text); }
.prp a { color: inherit; }
.prp :focus-visible { outline: 2px solid var(--prp-ink); outline-offset: 3px; border-radius: 4px; }
.prp img { max-width: 100%; }

.prp-skip { position: absolute; left: -999px; top: 8px; padding: 8px 12px; background: var(--prp-surface); border: 1px solid var(--prp-strong); border-radius: 8px; }
.prp-skip:focus { left: 8px; z-index: 10; }
.prp-wrap { width: 100%; max-width: var(--prp-max); margin: 0 auto; padding-inline: var(--prp-gutter); }

/* the bar */
.prp-bar { border-bottom: 1px solid var(--prp-border); }
.prp-bar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.prp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 18px/1 var(--prp-sans); }
.prp-brand img { width: 28px; height: 28px; }
.prp-quiet { font-size: 14px; color: var(--prp-muted); text-decoration: none; }

/* the opening: the promise in one line, then the scene */
.prp-intro { padding-top: clamp(48px, 8vw, 104px); }
.prp-kicker, .prp-num { margin: 0; font: italic 400 clamp(19px, 1.7vw, 23px)/1.3 var(--prp-serif); color: var(--prp-cobalt); }
.prp-intro h1 { margin-top: 18px; max-width: 15em; font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.prp-key { font-style: italic; font-weight: 700; letter-spacing: -0.025em; }
.prp-intro h1 .prp-key { display: block; }
.prp-lede { margin: 26px 0 0; max-width: 36em; font: 400 clamp(19px, 1.9vw, 23px)/1.48 var(--prp-serif); color: var(--prp-body); }
.prp-for { margin: 18px 0 0; font: 12.5px/1.5 var(--prp-mono); color: var(--prp-muted); }
.prp-scene { margin: clamp(24px, 4vw, 48px) auto 0; padding-inline: var(--prp-gutter); max-width: 1180px; }
.prp-scene img { display: block; width: 100%; height: auto; }

/* sections */
.prp-sec { padding-block: clamp(64px, 9vw, 120px); }
.prp-head { max-width: 40em; }
.prp-head h2 { margin-top: 14px; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.prp-head > p:not(.prp-num) { margin: 18px 0 0; font-size: 17px; line-height: 1.62; color: var(--prp-body); }

/* ---------- the live desk: Nadia's phone and Par, then what readers see ---------- */
.prp-demo { --prp-gap: clamp(28px, 3vw, 44px); margin: clamp(32px, 4vw, 56px) calc(50% - min(620px, 50vw - 20px)) 0; container: prp-demo / inline-size; }
/* Narrow first: her phone, Par, then a reader's phone, the path running down. */
.prp-stage { display: grid; grid-template-columns: minmax(0, 340px); justify-content: center; }
.prp-left, .prp-side { min-width: 0; }
.prp-side-label { margin: 0 0 10px; font: 12.5px/1.4 var(--prp-mono); color: var(--prp-muted); }
.prp-phone { width: 100%; height: 600px; overflow: hidden; }

/* Nadia's AI: the kit's generic card, newest at the bottom like any chat; what she said this
   morning scrolls up and off the top as the new note and the draft come in. */
.prp-desk { display: flex; flex-direction: column; }
.prp-desk .pil-ui-top { padding: 12px 14px 10px; gap: 8px; }
.prp-desk .pil-ui-top h3 { font-size: 21px; }
.prp-desk-ai { width: 18px; height: auto; flex: none; }
.prp-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 12px 12px 10px; overflow: hidden; }
.prp-msg { flex: none; margin: 0; }
.prp-msg--log { font: 11.5px/1.45 var(--prp-mono); color: var(--prp-muted); }
.prp-msg--voice { align-self: flex-end; width: 90%; padding: 10px; border: 2px solid var(--pil-ink, #1d1a16); border-radius: 16px 16px 4px 16px; background: var(--pil-paper, #fffdf6); }
.prp-voice { display: flex; align-items: center; gap: 8px; margin: 0; }
.prp-voice > img { width: 24px; height: 24px; flex: none; }
.prp-wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.prp-wave i { display: block; width: 3px; height: 40%; border-radius: 2px; background: var(--prp-cobalt); }
.prp-wave i:nth-child(2n) { height: 80%; }
.prp-wave i:nth-child(3n) { height: 60%; }
.prp-voice-t { font: 11px/1.2 var(--prp-mono); color: var(--prp-muted); }
.prp-said { margin: 8px 0 0; font: 400 14px/1.35 var(--prp-sans); }
.prp-photo { display: block; width: 100%; height: 100px; margin-top: 8px; border-radius: 10px; object-fit: cover; background: #fff; }
.prp-draft, .prp-prev { padding: 10px 12px 12px; border: 2px solid var(--pil-ink, #1d1a16); border-radius: 16px; }
.prp-draft { background: var(--prp-yellow-soft); }
.prp-prev { background: var(--pil-paper, #fffdf6); }
.prp-draft-k { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 12px/1.2 var(--prp-sans); }
.prp-draft-k img { width: 14px; height: auto; }
.prp-draft-h { margin: 6px 0 0; font: 400 18px/1.15 var(--prp-serif); }
.prp-draft-list { margin: 6px 0 0; padding-left: 18px; font: 12.5px/1.45 var(--prp-sans); color: var(--prp-body); }
.prp-draft-c { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font: 12px/1.3 var(--prp-sans); color: var(--prp-body); }
.prp-draft-c img { width: 16px; height: 16px; flex: none; }
.prp-approve-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; min-height: 36px; }
.prp-prev .prp-approve-row { min-height: 0; margin-top: 8px; }
.prp-approve { min-height: 36px; padding: 6px 14px; border: 2px solid var(--pil-ink, #1d1a16); border-radius: 99px; background: var(--prp-yellow); font: 600 13px/1 var(--prp-sans); color: var(--pil-ink, #1d1a16); cursor: pointer; }
.prp-approve.is-press { animation: prp-press 380ms var(--prp-ease); }
.prp-done, .prp-pill { padding: 5px 10px 4px; border: 2px solid var(--pil-ink, #1d1a16); border-radius: 99px; background: var(--pil-paper, #fffdf6); font: 600 12px/1 var(--prp-sans); }
.prp-done { display: none; }
.prp-pill { display: inline-block; }
/* The finished step: published, nothing left to approve (also the page without JavaScript). */
.prp-draft[data-published] .prp-approve { display: none; }
.prp-draft[data-published] .prp-done { display: inline-block; }
.prp-demo:not([data-prp-anim]) .prp-approve { display: none; }
.prp-demo:not([data-prp-anim]) .prp-done { display: inline-block; }
/* the field she talks into, ready at rest */
.prp-say { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 12px 12px; padding: 6px 6px 6px 14px; border: 2px solid var(--pil-ink, #1d1a16); border-radius: 99px; background: #fff; font: 14px/1.2 var(--prp-sans); color: var(--prp-muted); }
.prp-say img { width: 30px; height: 30px; flex: none; }

/* Par, under her phone: the brain, its memory line, the dotted path in (from the phone) and out
   (to the readers) */
.prp-side--par { position: relative; display: flex; flex-direction: column; align-items: center; }
.prp-brain { width: 100%; text-align: center; }
.prp-poses { position: relative; display: block; width: 96px; aspect-ratio: 348 / 409; margin: 0 auto; }
.prp-pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 260ms; }
.prp-pose.is-on, .prp-demo:not([data-prp-anim]) .prp-pose[data-pose="3"] { opacity: 1; }
/* room for the longest line on two lines, so the memory line never moves what is under it */
.prp-mem { min-height: 52px; margin: 6px 0 0; font: 13px/1.35 var(--prp-sans); }
.prp-mem-t { display: block; font: 11.5px/1.3 var(--prp-mono); color: var(--prp-muted); }
.prp-mem-v { display: none; font-weight: 600; }
.prp-mem-v.is-on, .prp-demo:not([data-prp-anim]) .prp-mem-v[data-at="3"] { display: inline; }
.prp-mem-v.is-flip { animation: prp-flip 520ms var(--prp-ease); }
.prp-lane { position: relative; display: block; width: 0; height: 30px; border-left: 4px dotted var(--prp-path); transition: border-color 300ms; }
.prp-lane[data-on] { border-left-color: var(--prp-cobalt); }
.prp-lane i { position: absolute; top: 0; left: -9px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--prp-yellow); border: 2px solid var(--pil-ink, #1d1a16); opacity: 0; }
.prp-lane.is-run i { animation: prp-down var(--prp-link) var(--prp-ease) both; }

/* What readers see: a reader's phone here, a laptop on a wide screen (below). The story is the
   newsroom's own page, in its own type (a newspaper serif and a plain grotesque, on white), with
   the drawings in it; each part that changes keeps the room of its last step, so nothing moves
   when the update lands. On the phone it scrolls inside the screen. */
.prp-screen { height: 640px; overflow-y: auto; border: var(--pil-line, 2.5px) solid var(--pil-ink, #1d1a16); border-radius: 26px; background: #fff; box-shadow: var(--pil-shadow, 6px 7px 0 #1d1a16); }
.prp-base { display: none; }
.prp-paper { --prp-halo: 6px; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 24px; background: #fff; color: #161616; font: 400 15.5px/1.5 Georgia, "Times New Roman", serif; }
.prp-paper :where(p, ul, ol, figure) { margin: 0; }
/* On the phone the three columns of the laptop are one: the opening, then the map, what we know,
   the timeline and the chart, then the picture and the rest. */
.np-col { display: contents; }
.np-mast { order: 1; } .np-top { order: 2; } .np-h { order: 3; } .np-stand { order: 4; } .np-by { order: 5; }
.np-swap--lede { order: 6; } .np-map { order: 7; } .np-know { order: 8; } .np-time { order: 9; } .np-chart { order: 10; }
.np-art { order: 11; } .np-swap--body { order: 12; } .np-src { order: 13; }
.np-mast { padding-bottom: 10px; border-bottom: 1px solid #d9d9d9; font: 700 19px/1.1 Georgia, "Times New Roman", serif; letter-spacing: -0.01em; text-align: center; }
.np-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 600 11.5px/1.3 "Helvetica Neue", Arial, sans-serif; color: #555; }
.np-tag { padding: 3px 7px; border-radius: 4px; background: #c8102e; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.np-sec { margin-left: auto; color: #555; text-transform: uppercase; letter-spacing: .06em; }
.prp .np-h { font: 700 24px/1.14 Georgia, "Times New Roman", serif; letter-spacing: -0.015em; color: #111; }
.np-stand { font-size: 16px; line-height: 1.4; color: #3a3a3a; }
.np-by { font: 600 12px/1.3 "Helvetica Neue", Arial, sans-serif; color: #555; }
.np-art img, .np-map img { display: block; width: 100%; height: auto; }
.np-art figcaption, .np-map figcaption, .np-chart figcaption { margin-top: 5px; font: 12px/1.4 "Helvetica Neue", Arial, sans-serif; color: #666; }
.np-lede { font-size: 16.5px; line-height: 1.5; }
.np-lede::first-letter { font-weight: 700; }
.np-swap--body p { font-size: 15px; }
.np-map-pics { display: block; border: 1px solid #e3e3e3; border-radius: 4px; overflow: hidden; }
.np-know-h, .np-time-h, .np-chart-h, .np-src-h { margin-bottom: 5px; font: 700 12px/1.3 "Helvetica Neue", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #111; }
.np-know { display: grid; gap: 12px; padding: 12px 0; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; }
.prp-paper :is(.np-know, .np-src) ul { padding-left: 18px; }
.prp-paper :is(ul, ol) { font-size: 14.5px; line-height: 1.45; }
.prp-paper li + li { margin-top: 4px; }
.np-time ol { list-style: none; padding: 0; }
.np-time li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
.np-time b { font: 700 13px/1.6 "Helvetica Neue", Arial, sans-serif; color: #c8102e; }
.np-src ul { font: 13px/1.5 "Helvetica Neue", Arial, sans-serif; color: #444; }
/* The chart her AI made: streets closed to cars at each update, one box per street. */
.np-chart { --np-unit: 9px; }
.prp-paper .np-bars { display: flex; align-items: flex-end; gap: 14px; list-style: none; padding: 0 0 4px; border-bottom: 1px solid #bbb; font: 600 12px/1.2 "Helvetica Neue", Arial, sans-serif; }
.np-bars li { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 36px; }
.prp-paper .np-bars li + li { margin-top: 0; }
.np-bar { display: block; width: 100%; background: #c8102e; }
.np-bars [data-v="2"] .np-bar { height: calc(var(--np-unit) * 2); }
.np-bars [data-v="4"] .np-bar { height: calc(var(--np-unit) * 4); }
.np-bars [data-v="5"] .np-bar { height: calc(var(--np-unit) * 5); }
.np-bars [data-v="6"] .np-bar { height: calc(var(--np-unit) * 6); }
.np-t { font-weight: 400; color: #666; }

/* what changed, lit for a moment as it lands */
.prp-paper [data-fresh].is-fresh { animation: prp-fresh 4000ms ease-out; }
/* a drawing: tint behind it, no halo over the words around it */
.prp-paper .np-art img.is-fresh { animation-name: prp-tint; }
/* the map fills its frame edge to edge, so it gets a ring instead */
.prp-paper .np-map-pics img.is-fresh { animation-name: prp-ring; }

/* steps that have not happened yet, and versions the update replaced */
.prp-demo [data-hidden] { display: none; }
.prp-demo:not([data-prp-anim]) [data-until] { display: none; }
.prp-msg.is-arriving { animation: prp-arrive 520ms var(--prp-ease) both; }
.prp-msg--voice.is-talking .prp-wave i { animation: prp-talk 420ms ease-in-out infinite alternate; }
.prp-msg--voice.is-talking .prp-wave i:nth-child(2n) { animation-delay: -140ms; }
.prp-msg--voice.is-talking .prp-wave i:nth-child(3n) { animation-delay: -280ms; }
.prp-msg--voice.is-talking .prp-said, .prp-msg--voice.is-talking .prp-photo { visibility: hidden; }

.prp-again-row { display: flex; justify-content: center; min-height: 36px; margin: 18px 0 0; }
.prp-again { visibility: hidden; min-height: 36px; padding: 6px 14px; border: 1px solid var(--prp-strong); border-radius: 99px; background: var(--prp-surface); font: 500 13px/1 var(--prp-sans); color: var(--prp-text); cursor: pointer; }
.prp-demo[data-turn] .prp-again { visibility: visible; }
.prp-demo > figcaption { max-width: 46em; margin: 18px auto 0; font: 13px/1.6 var(--prp-mono); color: var(--prp-faint); text-align: center; }

/* Wide: her phone with Par under it on the left; the readers' laptop on the right, the story in
   three columns so every part that changes is on the screen at once. The figure takes more room
   than the text column; the story's type scales with the screen (cqw). */
@container prp-demo (min-width: 900px) {
  .prp-stage { grid-template-columns: 300px minmax(0, 1fr); align-items: end; gap: 0 var(--prp-gap); }
  .prp-phone { height: 650px; }
  .prp-lane--out { position: absolute; top: 52px; left: calc(50% + 60px); right: calc(-1 * var(--prp-gap)); width: auto; height: 0; border-left: 0; border-top: 4px dotted var(--prp-path); }
  .prp-lane--out[data-on] { border-top-color: var(--prp-cobalt); }
  .prp-lane--out i { top: -9px; left: 0; margin: 0 0 0 -7px; }
  .prp-lane--out.is-run i { animation-name: prp-across; }
  .prp-device { padding-inline: 3%; }
  .prp-screen { height: auto; overflow: hidden; container-type: inline-size; padding: 12px; border: 0; border-radius: 20px 20px 6px 6px; background: var(--pil-ink, #1d1a16); box-shadow: none; }
  .prp-base { display: block; height: 18px; margin-inline: -3%; border: var(--pil-line, 2.5px) solid var(--pil-ink, #1d1a16); border-radius: 2px 2px 18px 18px; background: var(--pil-paper, #fffdf6); box-shadow: var(--pil-shadow, 6px 7px 0 #1d1a16); }
  .prp-paper { --prp-halo: .45cqw; display: grid; grid-template-columns: 40fr 33fr 27fr; grid-template-rows: auto auto auto auto minmax(0, 1fr); gap: .9cqw 2.2cqw; aspect-ratio: 16 / 10; overflow: hidden; padding: 1.5cqw 2.2cqw; border-radius: 4px; font-size: 1.3cqw; }
  .prp-paper > *, .np-col > * { order: 0; }
  .np-mast, .np-top, .np-h, .np-stand { grid-column: 1 / -1; }
  .np-col { display: flex; flex-direction: column; gap: .9cqw; min-width: 0; }
  .np-mast { padding-bottom: .6cqw; font-size: 2.1cqw; }
  .np-top { gap: .5cqw .8cqw; font-size: 1.12cqw; }
  .np-tag { padding: .2cqw .55cqw; border-radius: .3cqw; }
  .prp .np-h { font-size: 3.3cqw; line-height: 1.1; }
  .np-stand { font-size: 1.62cqw; line-height: 1.3; }
  .np-by { font-size: 1.1cqw; }
  .np-art figcaption, .np-map figcaption, .np-chart figcaption { margin-top: .35cqw; font-size: 1.04cqw; }
  .np-lede { font-size: 1.5cqw; line-height: 1.42; }
  .np-swap--body p { font-size: 1.32cqw; line-height: 1.42; }
  .np-know-h, .np-time-h, .np-chart-h, .np-src-h { margin-bottom: .35cqw; font-size: 1.04cqw; }
  .np-know { gap: .8cqw; padding: .8cqw 0; }
  .prp-paper :is(.np-know, .np-src) ul { padding-left: 1.4cqw; }
  .prp-paper :is(ul, ol) { font-size: 1.27cqw; line-height: 1.38; }
  .prp-paper li + li { margin-top: .3cqw; }
  .np-time li { grid-template-columns: 4cqw minmax(0, 1fr); gap: .6cqw; }
  .np-time b { font-size: 1.15cqw; line-height: 1.5; }
  .np-src ul { font-size: 1.15cqw; }
  .np-chart { --np-unit: .75cqw; }
  .prp-paper .np-bars { gap: 1.2cqw; padding-bottom: .3cqw; font-size: 1.04cqw; }
  .np-bars li { gap: .25cqw; width: 3cqw; }
}

/* narrow: the reader's phone sits under Par, the path running down into it */
@container prp-demo (max-width: 899px) {
  .prp-left { max-width: 340px; width: 100%; margin: 0 auto; }
  .prp-side--reader { margin-top: 4px; }
}
/* the narrowest phones wrap more lines: her phone grows so the new note and the draft still fit */
@container prp-demo (max-width: 339px) {
  .prp-phone { height: 662px; }
}

/* what Par already knows: the site's thin lines; the crayon is only the brain */
.prp-knows-inner { display: grid; grid-template-columns: clamp(64px, 8vw, 112px) minmax(0, 1fr); column-gap: clamp(16px, 2.4vw, 32px); align-items: center; padding-block: clamp(18px, 2.4vw, 28px); border-top: 1px solid var(--prp-strong); border-bottom: 1px solid var(--prp-strong); }
.prp-knows-brain { display: block; width: 100%; height: auto; }
.prp-knows-say { margin: 0; max-width: 27em; font: 400 clamp(26px, 3.2vw, 46px)/1.12 var(--prp-serif); letter-spacing: -0.01em; text-wrap: pretty; }
.prp-knows-so { display: block; margin-top: .15em; }
.prp-knows-so em { font-style: italic; color: var(--prp-ink); }
.prp-knows-from { margin: 12px 0 0; font: 12.5px/1.5 var(--prp-mono); color: var(--prp-muted); }

/* what each part does */
.prp-list { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.prp-list li { padding: 18px 0 20px; border-top: 1px solid var(--prp-strong); }
.prp-list p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--prp-body); }
.prp-list .prp-list-k { margin-bottom: 6px; font: 12.5px/1.4 var(--prp-mono); color: var(--prp-cobalt); }

/* the end */
.prp-end { border-top: 1px solid var(--prp-border); }
.prp-end h2 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; }
.prp-end p { margin: 16px 0 0; font-size: 17px; color: var(--prp-body); }
.prp-end-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.prp a.prp-btn { display: inline-block; padding: 12px 22px; border-radius: 99px; background: var(--prp-ink); color: var(--prp-bg); font: 600 15px/1 var(--prp-sans); text-decoration: none; }
.prp-link { font-size: 15px; }
.prp-foot { padding-block: 32px 48px; border-top: 1px solid var(--prp-border); }
.prp-foot p { margin: 0; font: 12.5px/1.5 var(--prp-mono); color: var(--prp-muted); }

/* reduced motion: every step in place, nothing moves */
.prp-demo[data-prp-reduced] *, .prp-demo[data-prp-reduced] { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .prp *, .prp *::before, .prp *::after { transition: none !important; animation: none !important; }
}

@keyframes prp-arrive { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes prp-talk { 0% { transform: scaleY(0.35); } 100% { transform: scaleY(1.15); } }
@keyframes prp-press { 50% { transform: scale(0.92); } }
@keyframes prp-flip { 0% { opacity: 0.2; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
@keyframes prp-across { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes prp-down { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes prp-fresh { 0%, 45% { background-color: var(--pil-yellow-soft, #fff3c9); box-shadow: 0 0 0 var(--prp-halo, 6px) var(--pil-yellow-soft, #fff3c9); } 100% { background-color: transparent; box-shadow: 0 0 0 var(--prp-halo, 6px) transparent; } }
@keyframes prp-tint { 0%, 45% { background-color: var(--pil-yellow-soft, #fff3c9); } 100% { background-color: transparent; } }
@keyframes prp-ring { 0%, 45% { outline: 4px solid var(--pil-yellow, #f5c63c); outline-offset: -4px; } 100% { outline: 4px solid transparent; outline-offset: -4px; } }