/* Why Your Coffee Never Un-Stirs. Screen style from the design stack (the family of /recognition-geometry/): warm paper
   and ink, Inter display headlines, mono instrument labels, square corners, no gradients or soft shadows.
   One meaning per colour across the page:
   - coffee and milk are the cup itself;
   - magenta is the record: lines written, never fewer;
   - cyan is what comes back: the report's bits, the balance;
   - red is what is thrown away;
   - yellow is a perfect swap (a symmetry move, as on /recognition-geometry/).
   Ink is everything else. Selectors carry the page class so the shared palette and interior styles can't override them. */
body.cf-body[data-rpi-page] {
  --cf-paper: #faf8f3; --cf-ink: #1d1d1b; --cf-body: #2a2926; --cf-soft: #3c3a36; --cf-muted: #5f5b53;
  --cf-hair: #8a8a8a; --cf-rule: #d9d5cb; --cf-panel: #f3f0e8;
  --cf-cyan: #009fe3; --cf-magenta: #e6007e; --cf-yellow: #ffed00; --cf-red: #c8401f;
  --cf-cyan-text: #0473a5; --cf-magenta-text: #c4006b; --cf-red-text: #b23a1b;
  --cf-coffee: #2b1c12; --cf-tan: #a97c55; --cf-milk: #f3e7d3;
  --cf-display: "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cf-text: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cf-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cf-gutter: 2rem;
  background: var(--cf-paper); color: var(--cf-body); font-optical-sizing: auto;
}
@media (prefers-color-scheme: dark) {
  body.cf-body[data-rpi-page] {
    --cf-paper: #141413; --cf-ink: #faf8f3; --cf-body: #e9e6df; --cf-soft: #c9c5bc; --cf-muted: #aaa59b;
    --cf-hair: #8a8a8a; --cf-rule: #3a3833; --cf-panel: #1c1b19;
    --cf-cyan: #2bb3f0; --cf-magenta: #ff3d9e; --cf-yellow: #ffed00; --cf-red: #ff6a3d;
    --cf-cyan-text: #2bb3f0; --cf-magenta-text: #ff5aad; --cf-red-text: #ff6a3d;
    --cf-coffee: #2b1c12; --cf-tan: #a97c55; --cf-milk: #f3e7d3;
    color-scheme: dark;
  }
}

.cf-page { font: 420 1.0625rem/1.5 var(--cf-text); color: var(--cf-body); padding-bottom: 2rem; overflow-x: clip; }
.cf-page *, .cf-page *::before, .cf-page *::after { box-sizing: border-box; }
.cf-page p { margin: 0 0 1.1rem; }
.cf-page a { color: var(--cf-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.cf-page a:hover { text-decoration-thickness: 2px; }
body.cf-body[data-rpi-page] .cf-page :is(a, button, input, summary, canvas, [tabindex]):focus-visible { outline: 3px solid var(--cf-ink) !important; outline-offset: 3px; }
.cf-body .skip { position: absolute; left: 1rem; top: -10rem; z-index: 80; padding: .8rem 1rem; background: var(--cf-paper); color: var(--cf-ink); border: 1px solid var(--cf-ink); }
.cf-body .skip:focus { top: 1rem; }
.cf-wrap { width: min(calc(100% - 2 * var(--cf-gutter)), 75rem); margin-inline: auto; }
.cf-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cf-nowrap { white-space: nowrap; }

/* Type */
.cf-page .cf-eyebrow, .cf-page .cf-k {
  margin: 0 0 1rem; font: 700 .72rem/1.3 var(--cf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cf-soft);
}
.cf-page .cf-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--cf-rule); }
.cf-page .cf-eyebrow a:hover { border-bottom-color: var(--cf-ink); }
.cf-page .cf-k-mag { color: var(--cf-magenta-text); }
.cf-page .cf-k-cyan { color: var(--cf-cyan-text); }
.cf-page .cf-k-red { color: var(--cf-red-text); }
.cf-page .cf-k-ink { color: var(--cf-ink); }
body.cf-body[data-rpi-page] .cf-page .cf-title {
  margin: 0 0 1.3rem; font: 820 clamp(2.6rem, 3.7vw, 3.75rem)/.94 var(--cf-display);
  letter-spacing: -.038em; color: var(--cf-ink); text-shadow: 0 0 .5px color-mix(in srgb, var(--cf-ink) 55%, transparent);
}
.cf-page .cf-lede { margin: 0; font: 450 clamp(1.1rem, 1.3vw, 1.24rem)/1.34 var(--cf-text); letter-spacing: -.008em; color: var(--cf-ink); }
body.cf-body[data-rpi-page] .cf-page h2 { margin: 0; font: 780 clamp(1.7rem, 2.6vw, 2.4rem)/1.05 var(--cf-display); letter-spacing: -.02em; color: var(--cf-ink); max-width: 19ch; }
.cf-page .cf-copy q, .cf-page blockquote { quotes: "“" "”" "‘" "’"; }
.cf-page blockquote { margin: 1.6rem 0; padding: 0 0 0 1.2rem; border-left: 1.5px solid var(--cf-ink); font: 450 1.12rem/1.45 var(--cf-text); color: var(--cf-ink); }
.cf-page blockquote p { margin: 0 0 .6rem; }
.cf-page blockquote cite { display: block; font: 700 .66rem/1.5 var(--cf-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--cf-muted); }
.cf-page sup a, .cf-page .cf-ref { font: 700 .7em/1 var(--cf-mono); text-decoration: none; padding: 0 .1em; }

/* ---------- Hero and the instrument ---------- */
.cf-hero { padding: 3rem 0 3.4rem; }
.cf-hero-grid {
  display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: 3rem;
  grid-template-areas: "text stage" "panel stage"; grid-template-rows: auto 1fr; align-items: start;
}
.cf-hero-text { grid-area: text; padding-bottom: 1.8rem; }
.cf-stage { grid-area: stage; min-width: 0; }
.cf-panel { grid-area: panel; min-width: 0; }

.cf-panes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 1.6rem; align-items: start; }
.cf-page .cf-stage-label { display: flex; align-items: center; gap: 1rem; height: 1.4rem; margin: 0 0 .6rem; }
.cf-page .cf-stage-label .cf-k { margin: 0; }
.cf-live { display: inline-flex; align-items: center; gap: .5rem; font: 700 .72rem/1 var(--cf-mono); letter-spacing: .14em; color: var(--cf-ink); }
.cf-live::before { content: ""; width: .5rem; height: .5rem; background: var(--cf-ink); }
.cf-cup-wrap { position: relative; width: 100%; aspect-ratio: 1; }
.cf-cup { display: block; width: 100%; height: 100%; }

/* The record */
.cf-record { padding-top: 0; }
.cf-page .cf-record .cf-k { margin: 0 0 .5rem; height: 1.4rem; display: flex; align-items: center; }
.cf-page .cf-count { margin: 0; }
.cf-num { display: block; font: 860 clamp(3rem, 4.6vw, 4.2rem)/.86 var(--cf-display); letter-spacing: -.05em; color: var(--cf-magenta-text); font-variant-numeric: tabular-nums lining-nums; }
.cf-num-sm { font-size: clamp(2.2rem, 3vw, 2.8rem); }
.cf-page .cf-sub { margin: .45rem 0 .2rem; font: 400 .78rem/1.35 var(--cf-mono); color: var(--cf-muted); }
.cf-record-lines, .cf-ledger-lines {
  list-style: none; margin: .7rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--cf-rule);
  font: 400 .76rem/1.55 var(--cf-mono); color: var(--cf-body); min-height: calc(7 * 1.55em + .5rem);
}
.cf-record-lines li, .cf-ledger-lines li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-record-lines li:last-child, .cf-ledger-lines li:last-child { color: var(--cf-ink); font-weight: 700; }
.cf-ln { color: var(--cf-magenta-text); font-weight: 700; }

/* The meters; the report's picture sits beside its own meter */
.cf-page .cf-count { display: flex; align-items: baseline; gap: .5rem; }
.cf-unit { font: 400 .78rem/1 var(--cf-mono); color: var(--cf-muted); }
.cf-meters { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--cf-rule); }
.cf-meter { margin: 0 0 .85rem; }
.cf-meter-report { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: .8rem; align-items: center; }
.cf-report { display: block; width: 4.4rem; height: 4.4rem; }
.cf-page .cf-help { margin: .3rem 0 0; font: 400 .74rem/1.4 var(--cf-text); color: var(--cf-muted); }
.cf-page .cf-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin: 0 0 .3rem; }
.cf-page .cf-meter-head .cf-k { margin: 0; font-size: .64rem; }
.cf-mv { font: 400 .78rem/1 var(--cf-mono); color: var(--cf-muted); white-space: nowrap; }
.cf-mv b { font: 860 1.15rem/1 var(--cf-display); letter-spacing: -.03em; color: var(--cf-ink); font-variant-numeric: tabular-nums; }
.cf-bar { height: .55rem; border: 1px solid var(--cf-rule); }
.cf-bar i { display: block; height: 100%; width: 0; transition: width .25s linear; }
.cf-bar-known i { background: var(--cf-ink); }
.cf-bar-report i { background: var(--cf-cyan); }
.cf-bar-thrown i { background: var(--cf-red); }

/* The chart */
.cf-chartbox { margin-top: 1.1rem; }
.cf-page .cf-chart-key { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0 0 .4rem; font: 700 .6rem/1.5 var(--cf-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cf-muted); }
.cf-key { display: inline-flex; align-items: center; gap: .45rem; }
.cf-key::before { content: ""; width: 1rem; height: 2px; flex: none; }
.cf-key-cyan::before { background: var(--cf-cyan); }
.cf-key-magenta::before { background: var(--cf-magenta); }
.cf-chart { display: block; width: 100%; height: 5.5rem; }

.cf-page .cf-caption { min-height: 3em; margin: 1rem 0 0; padding-top: .8rem; border-top: 1.5px solid var(--cf-ink); font: 450 1rem/1.45 var(--cf-text); color: var(--cf-ink); }
.cf-page .cf-honest { margin: .9rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--cf-muted); }

/* Controls */
.cf-page .cf-prompt { margin: 0 0 1rem; font-size: .95rem; line-height: 1.45; color: var(--cf-ink); }
.cf-block { padding: 1.05rem 0 1.15rem; border-top: 1px solid var(--cf-rule); }
.cf-prompt + .cf-block { border-top: 1.5px solid var(--cf-ink); }
.cf-page .cf-block .cf-k { margin-bottom: .75rem; }
.cf-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cf-row-tight { gap: .35rem; justify-content: center; }
.cf-btn {
  min-height: 44px; padding: .55rem .95rem; border: 1px solid var(--cf-ink); background: transparent; color: var(--cf-ink); cursor: pointer;
  font: 600 .9rem/1.2 var(--cf-text);
}
.cf-btn:hover { background: var(--cf-panel); }
.cf-btn:disabled { opacity: .4; cursor: default; }
.cf-btn:disabled:hover { background: transparent; }
.cf-btn-main, .cf-btn[aria-pressed="true"] { background: var(--cf-ink); color: var(--cf-paper); }
.cf-btn-main:hover, .cf-btn[aria-pressed="true"]:hover { background: var(--cf-soft); }
.cf-btn.is-next:not(:disabled) { box-shadow: 0 0 0 3px var(--cf-cyan); }
.cf-btn-red { border-color: var(--cf-red); }
.cf-btn-red:hover { background: color-mix(in srgb, var(--cf-red) 12%, transparent); }
.cf-btn-quiet { border-color: var(--cf-rule); }
.cf-btn-sym { background: var(--cf-yellow); color: #1d1d1b; border-color: #1d1d1b; }
.cf-btn-sym:hover { background: var(--cf-yellow); box-shadow: inset 0 0 0 1px #1d1d1b; }
.cf-btn-off { border-style: dashed; border-color: var(--cf-hair); color: var(--cf-muted); cursor: not-allowed; }
.cf-btn-off:hover { background: transparent; }
.cf-btn-off.is-refused { animation: cf-refuse .35s ease; }
@keyframes cf-refuse { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cf-btn-sm { min-height: 44px; padding: .4rem .6rem; font-size: .82rem; }

/* ---------- Sections ---------- */
.cf-section { padding: 4rem 0; border-top: 1px solid var(--cf-rule); scroll-margin-top: 70px; }
.cf-section[hidden] { display: none; }
.cf-section-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 1.5rem 4rem; align-items: start; }
.cf-section-head { position: sticky; top: 84px; }
.cf-copy { max-width: 44rem; min-width: 0; }
.cf-copy > :last-child { margin-bottom: 0; }

/* Plates and figures */
.cf-plate { margin: 2rem 0 0; }
.cf-plate img { display: block; width: 100%; height: auto; border: 1px solid var(--cf-rule); background: #efe9dc; }
.cf-plate figcaption, .cf-fig figcaption { margin-top: .7rem; font: 700 .64rem/1.5 var(--cf-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cf-muted); }
/* A live figure's caption is a sentence to read, not a label. */
.cf-fig[data-cf] > figcaption:not(.cf-label) { margin-top: 1rem; font: 420 .92rem/1.45 var(--cf-text); letter-spacing: 0; text-transform: none; color: var(--cf-soft); }
.cf-lumiere > figcaption { font: 700 .64rem/1.5 var(--cf-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--cf-muted) !important; }
.cf-pair { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.8rem; align-items: start; margin-top: 2rem; }
.cf-pair > figure { margin: 0; }
.cf-fig { margin: 2.2rem 0 0; padding-top: 1.1rem; border-top: 1.5px solid var(--cf-ink); }
.cf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cf-fig-tools { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .8rem; }
.cf-page .cf-fig-caption { min-height: 2.9em; margin: .9rem 0 0; font-size: .92rem; line-height: 1.45; color: var(--cf-ink); }
.cf-page .cf-hint { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; color: var(--cf-muted); }

/* SVG ink */
.cf-svg .ink { stroke: var(--cf-ink); fill: none; stroke-width: 1.8; }
.cf-svg .ink-fill { fill: var(--cf-ink); }
.cf-svg .hair { stroke: var(--cf-hair); fill: none; stroke-width: 1; }
.cf-svg .rule { stroke: var(--cf-rule); fill: none; stroke-width: 1; }
.cf-svg .yel { stroke: var(--cf-yellow); fill: none; stroke-width: 7; }
.cf-svg text { font: 700 11px var(--cf-mono); fill: var(--cf-soft); letter-spacing: .04em; }
.cf-svg text.axis { font-size: 10px; letter-spacing: .12em; fill: var(--cf-muted); }
.cf-svg text.note { font: 500 12px var(--cf-text); fill: var(--cf-muted); letter-spacing: 0; }
.cf-svg text.strong { font: 700 12px var(--cf-mono); fill: var(--cf-ink); letter-spacing: .02em; }

/* Sliders and readouts */
.cf-slider { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; flex: 1 1 18rem; }
.cf-page .cf-slider .cf-k { margin: 0; }
.cf-slider input[type="range"] { flex: 1 1 12rem; min-width: 10rem; height: 44px; accent-color: var(--cf-ink); }
.cf-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .6rem 1.2rem; margin: 1rem 0 0; }
.cf-readout > div { padding-top: .5rem; border-top: 1px solid var(--cf-rule); }
.cf-readout dt { font: 700 .62rem/1.4 var(--cf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cf-muted); }
.cf-readout dd { margin: .25rem 0 0; font: 780 1.35rem/1.1 var(--cf-display); letter-spacing: -.02em; color: var(--cf-ink); font-variant-numeric: tabular-nums; }
.cf-readout-red dt { color: var(--cf-red-text); }

/* Step 2: the dials */
.cf-ledger-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.cf-dials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.cf-dial-col { text-align: center; min-width: 0; }
.cf-page .cf-dial-col .cf-k { margin: .3rem 0 .5rem; font-size: .62rem; }
.cf-dial { display: block; width: 100%; max-width: 8rem; margin: 0 auto; overflow: visible; }
.cf-dial-face { fill: none; stroke: var(--cf-ink); stroke-width: 1.5; }
.cf-dial-ticks { stroke: var(--cf-hair); stroke-width: 1.2; fill: none; }
.cf-needle { stroke: var(--cf-ink); stroke-width: 2.4; stroke-linecap: square; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.cf-dial.is-zero .cf-needle { stroke: var(--cf-cyan); }
.cf-hub { fill: var(--cf-ink); }
.cf-dial-v { font: 700 13px var(--cf-mono); fill: var(--cf-ink); }
.cf-ledger-record .cf-k { margin: 0 0 .4rem; }
.cf-page .cf-ledger-state { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0 0; }
.cf-page .cf-ledger-state .cf-k { margin: 0; }
.cf-state { padding: .3rem .55rem; border: 1px solid var(--cf-rule); font: 700 .66rem/1.2 var(--cf-mono); letter-spacing: .1em; color: var(--cf-muted); }
.cf-ledger.is-balanced .cf-state { border-color: var(--cf-cyan); background: var(--cf-cyan); color: #10181d; }

/* Steps 3 and 4: the coins */
.cf-coins { display: flex; gap: .6rem; }
.cf-coin {
  display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1.5px solid var(--cf-ink);
  background: var(--cf-paper); color: var(--cf-ink); font: 800 1.2rem/1 var(--cf-display); padding: 0;
}
.cf-coin[data-face="H"] { background: var(--cf-ink); color: var(--cf-paper); }
button.cf-coin { cursor: pointer; }
.cf-coin.is-flip { animation: cf-flip .45s ease; }
@keyframes cf-flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }
.cf-swap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.cf-merge-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem 2rem; align-items: start; margin-bottom: 1.2rem; }
.cf-page .cf-merge-coins .cf-k { margin: 0 0 .6rem; }
.cf-reports { margin: 0; padding: 0; border: 0; display: grid; gap: .1rem; }
.cf-reports legend { padding: 0; margin: 0 0 .5rem; }
.cf-reports label { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-size: .95rem; color: var(--cf-ink); cursor: pointer; }
.cf-reports input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--cf-ink); }
.cf-arrangements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35rem; }
.cf-arrangements li {
  position: relative; padding: .5rem 0 1.5rem; border: 1px solid var(--cf-rule); text-align: center;
  font: 700 .82rem/1 var(--cf-mono); letter-spacing: .06em; color: var(--cf-muted);
}
.cf-arrangements li::after { content: attr(data-chance); position: absolute; left: 0; right: 0; bottom: .4rem; font: 400 .66rem/1 var(--cf-mono); letter-spacing: 0; color: var(--cf-muted); }
.cf-arrangements li.is-on { border-color: var(--cf-cyan); box-shadow: inset 0 0 0 1px var(--cf-cyan); color: var(--cf-ink); }
.cf-arrangements li.is-actual { background: var(--cf-panel); }
.cf-arrangements li.is-actual::before { content: ""; position: absolute; left: 50%; top: -5px; width: 8px; height: 8px; margin-left: -4px; background: var(--cf-ink); }
.cf-bitsbar { display: flex; height: .8rem; margin-top: 1rem; border: 1px solid var(--cf-rule); }
.cf-bits-known { background: var(--cf-ink); transition: width .3s ease; }
.cf-bits-lost { background: var(--cf-red); transition: width .3s ease; }

/* Step 5: the wait */
.cf-wait-top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.cf-page .cf-wait-read { margin: 0; }
.cf-wait-read .cf-num { color: var(--cf-ink); min-width: 4ch; }
.cf-page .cf-wait-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; margin: .8rem 0 .8rem; font: 600 1.05rem/1.3 var(--cf-text); color: var(--cf-ink); }
.cf-page .cf-wait-line .cf-k { margin: 0; }
.cf-digits { display: block; width: 100%; height: 6rem; margin-top: .9rem; }

/* The film (held) */
.cf-film-frame { aspect-ratio: 16 / 9; margin-top: 1.5rem; background: var(--cf-panel); }
.cf-film-frame video { display: block; width: 100%; height: 100%; }

/* Sources */
.cf-sources { margin: 0; padding-left: 1.4rem; font-size: .92rem; line-height: 1.55; }
.cf-sources li { margin: 0 0 .7rem; padding-left: .3rem; scroll-margin-top: 90px; }
.cf-sources li::marker { font: 700 .76rem var(--cf-mono); color: var(--cf-soft); }

/* Closing */
.cf-closing { padding: 4.5rem 0 3rem; border-top: 1.5px solid var(--cf-ink); }
.cf-page .cf-closing-line { margin: 0; max-width: 22ch; font: 820 clamp(2rem, 4vw, 3.4rem)/.98 var(--cf-display); letter-spacing: -.035em; color: var(--cf-ink); }

/* ---------- The answer in five steps, and the numbers ---------- */
.cf-steps { padding: 3rem 0 3.4rem; border-top: 1.5px solid var(--cf-ink); }
body.cf-body[data-rpi-page] .cf-page .cf-steps-title { margin: 0 0 1.4rem; max-width: none; font: 700 .72rem/1.3 var(--cf-mono); letter-spacing: .14em; color: var(--cf-soft); }
.cf-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.4rem; }
.cf-steps-list li { border-top: 1.5px solid var(--cf-ink); }
.cf-steps-list a { display: block; height: 100%; padding: .9rem 0 1rem; color: var(--cf-body); text-decoration: none; }
.cf-steps-list a:hover .cf-step-t b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.cf-step-n { display: block; margin-bottom: .6rem; font: 860 2.4rem/.86 var(--cf-display); letter-spacing: -.05em; color: var(--cf-ink); font-variant-numeric: tabular-nums; }
.cf-step-t { display: block; font-size: .95rem; line-height: 1.42; }
.cf-step-t b { display: block; margin-bottom: .3rem; font: 780 1.12rem/1.15 var(--cf-display); letter-spacing: -.015em; color: var(--cf-ink); }
.cf-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem 1.4rem; margin: 2.4rem 0 0; }
.cf-numbers > div { padding-top: .8rem; border-top: 1px solid var(--cf-rule); }
.cf-big { font: 860 clamp(2.2rem, 3.6vw, 3.4rem)/.86 var(--cf-display); letter-spacing: -.05em; color: var(--cf-magenta-text); font-variant-numeric: tabular-nums lining-nums; }
.cf-big small { font-size: .42em; letter-spacing: -.02em; font-weight: 780; }
.cf-numbers dd { margin: .55rem 0 0; font-size: .9rem; line-height: 1.4; color: var(--cf-soft); max-width: 24ch; }

/* Figure labels */
.cf-page .cf-fig-k { margin: 0 0 1rem; color: var(--cf-ink); }
.cf-step-tag { display: inline-block; margin-right: .6rem; padding: .18rem .4rem; background: var(--cf-ink); color: var(--cf-paper); letter-spacing: .12em; }
.cf-page .cf-digits-k { margin: .6rem 0 0; font-size: .62rem; color: var(--cf-muted); }
.cf-readout-wait { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cf-dd-unit { font: 400 .8rem/1 var(--cf-mono); color: var(--cf-muted); letter-spacing: 0; }
.cf-math { white-space: nowrap; font-variant-numeric: lining-nums; }

/* The 1896 film, forward and reversed */
.cf-lumiere-frame { aspect-ratio: 464 / 356; background: #111; border: 1px solid var(--cf-rule); }
.cf-lumiere-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #111; }
.cf-lumiere-tools { margin-top: .8rem; }
.cf-lumiere[data-dir="reversed"] .cf-lumiere-frame { border-color: var(--cf-magenta); }

/* More plate layouts */
.cf-pair-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: end; }
.cf-trio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .78fr); gap: 1.2rem; align-items: start; margin-top: 2rem; }
.cf-trio > figure { margin: 0; }
.cf-plate-portrait { max-width: 22rem; }
.cf-plate-wide { max-width: 36rem; }

/* Sources, closing, keep reading */
.cf-page .cf-sources-note { margin: 0 0 1.2rem; font-size: .9rem; color: var(--cf-muted); }
.cf-sources a { overflow-wrap: anywhere; color: var(--cf-soft); }
.cf-sources a.cf-back { margin-left: .2rem; text-decoration: none; color: var(--cf-muted); }
.cf-sources li:target { background: color-mix(in srgb, var(--cf-yellow) 28%, transparent); }
.cf-page .cf-closing-sub { margin: 1.4rem 0 0; max-width: 40rem; font: 450 clamp(1.1rem, 1.4vw, 1.3rem)/1.38 var(--cf-text); color: var(--cf-ink); }
.cf-next { padding: 2.4rem 0 3rem; border-top: 1px solid var(--cf-rule); }
.cf-next ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .4rem 1.6rem; }
.cf-next li { border-top: 1px solid var(--cf-rule); }
.cf-next a { display: block; padding: .7rem 0; font: 600 1rem/1.3 var(--cf-text); color: var(--cf-ink); text-decoration: none; }
.cf-next a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Responsive ---------- */
/* Tablets: the cup and its record side by side, then the live caption and the buttons, then the chart. */
@media (max-width: 1080px) {
  .cf-hero-grid { display: flex; flex-direction: column; align-items: stretch; }
  .cf-stage { display: contents; }
  .cf-hero-text { order: 1; max-width: 40rem; }
  .cf-panes { order: 2; }
  .cf-caption { order: 3; }
  .cf-panel { order: 4; display: grid; grid-template-columns: repeat(3, auto); gap: 0 2rem; justify-content: start; margin-top: 1rem; }
  .cf-chartbox { order: 5; }
  .cf-honest { order: 6; }
  .cf-title { max-width: 16ch; }
  .cf-panel .cf-prompt { grid-column: 1 / -1; }
  .cf-panel .cf-block { border-top: 1.5px solid var(--cf-ink); }
  .cf-section-head { position: static; }
}
@media (max-width: 1080px) {
  .cf-steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem 1.4rem; }
  .cf-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cf-section-grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .cf-trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cf-trio > figure:last-child { max-width: 16rem; }
  .cf-pair { grid-template-columns: minmax(0, 1fr); }
  .cf-pair > .cf-plate { max-width: 30rem; }
  .cf-ledger-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the cup, then the buttons right under it, then the record and the meters. */
@media (max-width: 700px) {
  .cf-hero-grid { display: flex; flex-direction: column; align-items: stretch; }
  .cf-stage, .cf-panes { display: contents; }
  .cf-hero-text { order: 1; }
  .cf-pane-cup { order: 2; }
  .cf-caption { order: 3; }
  .cf-panel { order: 4; display: block; margin-top: 1rem; }
  .cf-pane-side { order: 5; margin-top: 1.2rem; }
  .cf-chartbox { order: 6; }
  .cf-honest { order: 7; }
  .cf-panel .cf-block { border-top: 1px solid var(--cf-rule); }
  .cf-panel .cf-prompt + .cf-block { border-top: 1.5px solid var(--cf-ink); }
  .cf-merge-top { grid-template-columns: minmax(0, 1fr); }
  .cf-pair > .cf-plate + .cf-plate { max-width: 16rem; }
  .cf-pair-even > .cf-plate + .cf-plate { max-width: none; }
  .cf-trio { grid-template-columns: minmax(0, 1fr); }
  .cf-steps-list { grid-template-columns: minmax(0, 1fr); }
  .cf-steps-list a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .8rem; }
  .cf-step-n { font-size: 2rem; margin: 0; }
  .cf-numbers { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .cf-readout-wait { grid-template-columns: minmax(0, 1fr); }
  .cf-svg text { font-size: 17px; }
  .cf-svg text.axis { font-size: 15px; }
  .cf-svg text.strong { font-size: 17px; }
  .cf-arrangements { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.cf-body[data-rpi-page] { --cf-gutter: 1rem; }
  .cf-hero { padding-top: 2rem; }
  .cf-section { padding: 2.8rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-btn-off.is-refused { animation: none; }
  .cf-page *, .cf-svg * { transition: none !important; animation: none !important; }
}
@media print {
  body.cf-body[data-rpi-page] { background: #fff; color: #000; }
  .cf-stage, .cf-panel, .cf-fig, .cf-film { display: none; }
  .cf-hero-grid { display: block; }
  .cf-section { break-inside: avoid; padding: 1.5rem 0; }
  .cf-section-head { position: static; }
}
.cf-doi { font-family: var(--cf-mono); font-size: .86em; color: var(--cf-soft); overflow-wrap: anywhere; }