@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-italic-cyrillic.woff2")
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-italic-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-700-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Special Elite";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/special-elite-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik Mono One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/rubik-mono-one-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik Mono One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/rubik-mono-one-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
/* Token Damage site. Values from design/canvas (WebHome, WebMobile, Quiz, Style). One red. */
:root {
  color-scheme: dark;
  --desk: #0e0e0d;
  --desk-dot: #21201d;
  --desk-text: #d8d4ca;
  /* The mockups use #7f7a6f and #5e5a51 here; lifted to pass WCAG AA on the desk. */
  --desk-muted: #8f8a7f;
  --desk-faint: #8a857a;
  --link: #a9a397;
  --bright: #f6f2e9;
  --paper: #f9f6ee;
  --paper-2: #f3efe4;
  --ink: #17160f;
  --muted: #6d685e;
  --leader: #c9c2b2;
  --ochre: #7a5a12;
  --red-text: #b3261e;
  --red: #e0331b;
  --led: #3fbf6b;
  --amber: #e5ad55;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --stamp-face: "Special Elite", "Courier New", monospace;
  --receipt-w: 480px;
  /* Per language: CJK receipts may run slightly smaller (docs/I18N.md). */
  --receipt-scale: 1;
  --n-size: 50px;
  --line-size: 13.5px;
  --note-size: 15px;
  --stamp-size: 24px;
  --meta-size: 10.5px;
  --fine-size: 9.5px;
  --pad: 26px 30px 16px;
  --gap: 14px;
  /* Home page receipt zoom, set by screen height so the whole page fits without scrolling (end of file). */
  --z: 1;
  /* What the paper, printer and side columns actually use: --z, except where a page needs more room (/r). */
  --zoom: var(--z);
}
:root:lang(ja) {
  --mono:
    "IBM Plex Mono", "Noto Sans Mono CJK JP", "Noto Sans Mono CJK SC", monospace;
  --receipt-scale: 0.94;
}
:root:lang(zh-CN) {
  --mono:
    "IBM Plex Mono", "Noto Sans Mono CJK SC", "Noto Sans Mono CJK JP", monospace;
  --receipt-scale: 0.94;
}

/* Russian stamps: Special Elite has no Cyrillic. Rubik Mono One is a heavy rubber-stamp face; the browser only
   downloads it where a Russian stamp is shown. Russian stamp words are long, so they may wrap. */
:root:lang(ru) {
  --stamp-face: "Rubik Mono One", "IBM Plex Mono", monospace;
}
:root:lang(ru) .r-verdict .stamp {
  font-size: calc(var(--stamp-size) * 0.64);
  white-space: normal;
  max-width: 11em;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0;
  padding: 7px 9px 6px;
}
:root:lang(ru) .score .stamp {
  font-size: 17px;
  line-height: 1.25;
}

html {
  overscroll-behavior: none;
}
body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--desk);
  background-image:
    radial-gradient(
      ellipse 900px 640px at 50% -8%,
      rgba(255, 238, 210, 0.11),
      rgba(255, 238, 210, 0) 62%
    ),
    radial-gradient(circle, var(--desk-dot) 1px, transparent 1.3px);
  background-size:
    100% 100%,
    28px 28px;
  color: var(--desk-text);
  font-family: var(--mono);
  -webkit-text-size-adjust: 100%;
}
a {
  color: var(--link);
}
a:hover {
  color: var(--bright);
}
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
/* Headings and results that scripts move focus to for screen readers; not controls. */
[tabindex="-1"]:focus {
  outline: none;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[hidden] {
  display: none !important;
}

/* ---------- header ---------- */
.top {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  position: relative;
  z-index: 9;
}
.wordmark {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--bright);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-decoration: none;
  cursor: pointer;
}
.top nav {
  /* Right-aligned with or without a wordmark beside it (the home page has none). */
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.top nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  text-decoration: none;
}

/* The speaker toggle. Its slot keeps a fixed width whether or not the button is shown (no JS), so the nav
   never moves when the page comes to life. */
.sound-slot {
  display: inline-flex;
  justify-content: center;
  min-width: 44px;
}
.sound {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--link);
  cursor: pointer;
}
.sound:hover {
  color: var(--bright);
}
.sound .off,
.sound[aria-pressed="false"] .on {
  display: none;
}
.sound[aria-pressed="false"] .off {
  display: block;
}

/* ---------- home: printer, strip, stage ---------- */
.home {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.home .top {
  position: absolute;
  inset: 0 0 auto 0;
}
.printer {
  position: absolute;
  left: 50%;
  margin-left: calc(-280px * var(--zoom));
  top: 60px;
  width: calc(560px * var(--zoom));
  height: 36px;
  border-radius: 18px;
  background: linear-gradient(#1c1b19, #131311);
  box-shadow:
    0 1px 0 #2e2c28 inset,
    0 12px 30px -10px rgba(0, 0, 0, 0.9);
  z-index: 6;
}
.printer .slot {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 7px;
  height: 22px;
  border-radius: 11px;
  background: #060606;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.95);
}
.led {
  position: absolute;
  right: 9px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 7px;
  background: var(--led);
  box-shadow: 0 0 8px var(--led);
}
.led.boot {
  animation: tdLed 1.7s steps(1, end) both;
}
.led.wait {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
}
/* Paper still in the printer. It reaches up inside the printer (hidden behind it) so it can follow a pull
   without showing its top edge; what shows is the same 14px as before. */
/* The strip springs back after a tear with a little overshoot. The well starts at the printer's top edge and
   cuts off anything above it, so the bounce never shows paper over the printer. */
.strip-well {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 200px;
  z-index: 5;
  clip-path: inset(0 -100vw -100vh -100vw);
  pointer-events: none;
}
.strip {
  position: absolute;
  left: 50%;
  margin-left: calc(var(--receipt-w) * var(--zoom) / -2);
  top: 2px;
  width: calc(var(--receipt-w) * var(--zoom));
  height: 48px;
  background: var(--paper);
  z-index: 5;
}
.strip::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 40px;
  border-top: 2px dashed rgba(23, 22, 15, 0.5);
}
.strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 48px;
  height: 12px;
  background:
    linear-gradient(135deg, var(--paper) 50%, transparent 50%) left top / 20px
      20px repeat-x,
    linear-gradient(-135deg, var(--paper) 50%, transparent 50%) left top / 20px
      20px repeat-x;
}
.stage {
  position: relative;
  width: var(--receipt-w);
  /* zoom scales margins too: divide, so the paper still leaves the printer at 110px. */
  margin: calc(110px / var(--zoom)) auto 0;
  zoom: var(--zoom);
  z-index: 2;
  perspective: 1200px;
  flex-grow: 1;
}
.hang {
  position: relative;
  z-index: 4;
  transform-origin: 50% 0;
  animation: tdSway 7s ease-in-out infinite;
}
.drag {
  transform-origin: 50% 0;
  will-change: transform;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.drag.dragging {
  cursor: grabbing;
}
.drag.dip {
  animation: tdDip 0.9s ease-in-out;
}
.strip.recoil-strip {
  animation: tdStripRecoil 0.25s ease-out;
}
.falling {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  pointer-events: none;
}
.falling > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.specks {
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 0;
  pointer-events: none;
  z-index: 7;
}
.spk {
  position: absolute;
  width: 6px;
  height: 3px;
  background: var(--paper-2);
  border-radius: 1px;
  animation: tdSpk 0.95s cubic-bezier(0.3, 0, 0.9, 0.6) forwards;
}
.home-foot {
  position: relative;
  z-index: 8;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Clear air under the stub, so the button reads as the page's, not as a line on the receipt. */
  padding: 36px 16px 26px;
  font-size: 12px;
  color: var(--desk-muted);
  text-align: center;
  text-shadow:
    0 1px 6px var(--desk),
    0 0 14px var(--desk);
}
.pullrow {
  position: relative;
  z-index: 8;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 12px;
}
/* Beside the paper, where the eye is while pulling (design/prototype/hero-tear.html), not in the footer,
   which sits below the fold on laptop-height windows. */
.hint {
  position: absolute;
  left: calc(50% + var(--receipt-w) * var(--zoom) / 2 + 60px);
  top: 104px;
  z-index: 9;
  font-size: 12px;
  font-weight: 600;
  color: var(--bright);
  pointer-events: none;
}
@media (max-width: 900px) {
  .hint {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 18px;
    text-align: center;
    font-size: 14px;
    text-shadow:
      0 1px 6px var(--desk),
      0 0 14px var(--desk);
  }
}
.nx {
  min-height: 44px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--desk-muted);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.2s;
}
.nx:hover {
  color: var(--bright);
}
.faint {
  font-size: 11px;
  color: var(--desk-faint);
}
/* A dated AI fact in the page chrome: plain ink, not satire (docs/ROASTS.md §Pool). */
.news {
  min-height: 2lh;
  max-width: 34em;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  text-wrap: pretty;
}
.news-k {
  margin-right: 0.6em;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
}
/* The wire on the home page: under the paper, above the footer. Below the stage, so a torn receipt falls in
   front of it. */
.wire {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 26px 16px 0;
  color: var(--desk-muted);
  text-align: center;
  text-shadow:
    0 1px 6px var(--desk),
    0 0 14px var(--desk);
}
.wire .news {
  /* The kicker (15px + 6px) and three lines, whatever the fact: a longer one never moves Next or the footer.
     News is capped at 120 characters, which is three lines on a 360px phone (pool tests). */
  min-height: calc(21px + 3lh);
  font-size: 12.5px;
}
/* Stacked (phones, tablets): the wire, then Next, then the footer, which needs little air of its own. */
.pullrow + .home-foot {
  padding-top: 10px;
}
.wire .news-k {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 6px;
}
.wire .news-k::before,
.wire .news-k::after {
  content: "";
  width: 28px;
  border-top: 1px solid currentColor;
  opacity: 0.5;
}
.news.swap {
  animation: tdFade 0.6s ease-out;
}

/* ---------- the receipt ---------- */
.receipt {
  color: var(--ink);
}
.teeth {
  height: 12px;
  background:
    linear-gradient(45deg, var(--paper) 50%, transparent 50%) 10px bottom / 20px
      20px repeat-x,
    linear-gradient(-45deg, var(--paper) 50%, transparent 50%) 10px bottom /
      20px 20px repeat-x;
}
.paper {
  position: relative;
  background: linear-gradient(var(--paper), var(--paper-2));
  color: var(--ink);
  box-shadow:
    0 50px 90px -30px rgba(0, 0, 0, 0.95),
    0 10px 24px -12px rgba(0, 0, 0, 0.6);
}
.paper-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.035) 0 1px,
    transparent 1px 3px
  );
}
.paper-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--pad);
}
.r-head,
.r-hero,
.r-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.r-hero,
.r-foot {
  gap: 7px;
}
.r-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(20px * var(--receipt-scale));
  font-weight: 700;
  letter-spacing: 0.14em;
}
.r-meta,
.r-sub {
  font-size: calc(var(--meta-size) * var(--receipt-scale));
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.r-sub {
  letter-spacing: 0.18em;
}
.r-typed {
  font-size: calc(12px * var(--receipt-scale));
  letter-spacing: 0.12em;
  color: var(--muted);
}
.r-typed b {
  color: var(--ink);
}
.r-n {
  font-size: calc(var(--n-size) * var(--receipt-scale));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.rule {
  border-top: 2px dashed var(--ink);
}
.r-lines {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: calc(var(--line-size) * var(--receipt-scale));
  font-variant-numeric: tabular-nums;
}
.line .lead {
  flex-grow: 1;
  border-bottom: 2px dotted var(--leader);
  margin-bottom: 4px;
}
.line.estimate,
.legend .estimate {
  color: var(--ochre);
}
.line.satire,
.legend .satire {
  color: var(--red-text);
}
.r-verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
/* Pool lines on the paper: a ✶ line under RAM-X, a receipt joke above the legend. */
.pool-satire {
  /* Two lines held open, so the visitor's own line never moves the paper when it replaces the built one. */
  min-height: 2lh;
  margin: 0;
  /* 12px floor: the joke is meant to be read (and Lighthouse counts smaller text as illegible). */
  font-size: max(12px, calc(12px * var(--receipt-scale)));
  line-height: 1.4;
  color: var(--red-text);
  text-wrap: pretty;
}
.pool-joke {
  min-height: 2lh;
  max-width: 30em;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: balance;
}
.note {
  font-size: calc(var(--note-size) * var(--receipt-scale));
  line-height: 1.45;
  font-style: italic;
}
.stamps {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
.stamp {
  font-family: var(--stamp-face);
  font-size: var(--stamp-size);
  line-height: 1;
  color: var(--red);
  border: 4px double var(--red);
  padding: 7px 10px 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0.92;
  transform: rotate(-7deg);
}
.stamp-2 {
  font-size: calc(var(--stamp-size) * 0.75);
  transform: rotate(4deg);
}
.slam {
  opacity: 0;
  animation: tdSlam 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 2.1s forwards;
}
.r-ach {
  font-size: calc(var(--meta-size) * var(--receipt-scale));
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: center;
}
.legend,
.who {
  font-size: calc(var(--fine-size) * var(--receipt-scale));
  letter-spacing: 0.1em;
  color: var(--muted);
}
.who {
  letter-spacing: 0.18em;
}
.barcode {
  display: flex;
  justify-content: center;
}
.barcode span {
  height: 28px;
  background: var(--ink);
}
.perf {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 0 50%, var(--desk) 12px, transparent 12.5px),
    radial-gradient(circle at 100% 50%, var(--desk) 12px, transparent 12.5px);
}
.perf::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 50%;
  border-top: 2px dashed var(--ink);
}
.perf span {
  position: relative;
  padding: 0 10px;
  background: var(--paper-2);
  font-size: var(--meta-size);
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* ---------- stub ---------- */
.stub-wrap {
  position: relative;
  height: 88px;
}
.stub {
  position: relative;
  background: var(--paper-2);
  color: var(--ink);
  transform-origin: 0 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stub:hover {
  transform: rotate(1.4deg) translateY(1px);
}
.stub-body {
  height: 76px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 10px 0 24px;
}
.stub-label {
  font-size: var(--fine-size);
  letter-spacing: 0.18em;
  color: var(--muted);
}
.stub-cmd {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.dollar {
  font-size: 16px;
  color: #6d685e;
}
.stub-cmd code {
  flex-grow: 1;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
}
.stub-edge {
  height: 12px;
  background:
    linear-gradient(135deg, var(--paper-2) 50%, transparent 50%) left top / 20px
      20px repeat-x,
    linear-gradient(-135deg, var(--paper-2) 50%, transparent 50%) left top /
      20px 20px repeat-x;
}
.cp {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: none;
  border-radius: 22px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.15s;
}
.cp:hover {
  background: var(--red);
  color: #f7f4ec;
}
.cp:active {
  transform: scale(0.96);
}
.stub.tear {
  animation: tdTear 0.7s cubic-bezier(0.4, 0, 0.8, 0.4) forwards;
  pointer-events: none;
}
.stub.refeed {
  animation: tdReFeed 0.5s steps(10, end) both;
}
.copied {
  position: absolute;
  inset: 0 0 auto 0;
  height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  text-align: center;
}
.copied .msg {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--bright);
  animation: tdFade 0.6s ease-out;
}
.copied .sub {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--desk-muted);
}
.recoil {
  animation: tdRecoil 0.45s ease-out;
}
.feed {
  animation: tdFeed 1.5s steps(30, end) both;
}
.fade {
  opacity: 0;
  animation: tdFade 0.6s ease-out forwards;
}
.tearoff {
  animation: tdTearOff 1.2s forwards;
  pointer-events: none;
  will-change: transform;
}

/* ---------- inner pages ---------- */
.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.sheet-wrap {
  width: min(680px, calc(100% - 32px));
  margin: 24px auto 0;
  flex-grow: 1;
}
.sheet-wrap.narrow {
  width: min(var(--receipt-w), calc(100% - 32px));
}
.sheet {
  background: var(--paper);
  color: var(--ink);
  padding: 26px 30px 30px;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.95);
  line-height: 1.6;
  font-size: 15px;
}
.sheet-edge {
  height: 12px;
  background:
    linear-gradient(135deg, var(--paper) 50%, transparent 50%) left top / 20px
      20px repeat-x,
    linear-gradient(-135deg, var(--paper) 50%, transparent 50%) left top / 20px
      20px repeat-x;
}
.sheet-edge.top {
  background:
    linear-gradient(45deg, var(--paper) 50%, transparent 50%) 10px bottom / 20px
      20px repeat-x,
    linear-gradient(-45deg, var(--paper) 50%, transparent 50%) 10px bottom /
      20px 20px repeat-x;
}
.sheet h1 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.sheet h2 {
  margin: 28px 0 8px;
  padding-top: 14px;
  border-top: 2px dashed var(--ink);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sheet p {
  margin: 0 0 12px;
}
.sheet a {
  color: var(--ink);
}
.sheet .lede {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.sheet .tier {
  margin: 0 0 8px;
}
.sheet .tier.estimate {
  color: var(--ochre);
}
.sheet .tier.satire {
  color: var(--red-text);
}
.table-scroll {
  overflow-x: auto;
  margin: 0 0 12px;
}
.sheet table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.sheet th,
.sheet td {
  padding: 5px 8px 5px 0;
  border-bottom: 2px dotted var(--leader);
  text-align: right;
  white-space: nowrap;
}
.sheet th:first-child,
.sheet td:first-child {
  text-align: left;
}
.sheet th {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  vertical-align: bottom;
}
/* Price columns: headers wrap to their narrowest width and each figure keeps clear air on its left. */
.sheet .prices th .stack {
  display: inline-block;
  width: min-content;
  white-space: normal;
  line-height: 1.35;
}
.sheet .prices th + th,
.sheet .prices td + td {
  padding-left: 18px;
}
.sources li {
  margin: 0 0 8px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.sources li.satire {
  color: var(--red-text);
}
.pool-sources summary {
  margin: 4px 0 12px;
  font-size: 13px;
  cursor: pointer;
}
.page-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px 26px;
  font-size: 12px;
  color: var(--desk-muted);
  text-align: center;
}
.langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
  font-size: 12px;
}
.langs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}
.langs [aria-current="page"] {
  color: var(--bright);
  text-decoration: none;
}

/* ---------- buttons on paper ---------- */
.btn {
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.ghost {
  background: transparent;
  color: var(--ink);
}
.btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #f7f4ec;
}

/* ---------- /r ---------- */
.guess {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.guess .prompt {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
.guess label {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.guess input[type="range"] {
  width: 100%;
  min-height: 44px;
  accent-color: var(--ink);
}
.guess output {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* The home page's printer and paper, with the guess slip waiting where the receipt comes out. The right
   column (under the stage when stacked) holds the result, the quiz link and the privacy line. */
.r-guess .sheet,
.r-slip {
  margin: 0;
}
.r-side {
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 34em;
  margin: 0 auto;
  padding: 18px 16px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--desk-muted);
  text-align: center;
  text-shadow:
    0 1px 6px var(--desk),
    0 0 14px var(--desk);
}
.r-side p {
  margin: 0;
}
.r-side .result {
  font-size: 16px;
  font-weight: 700;
  color: var(--bright);
  text-wrap: balance;
}
.r-side .notice {
  font-size: 14px;
  color: var(--bright);
}
.r-side .fine {
  font-size: 12px;
}
.r-quiz {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}
.r-copied {
  color: var(--bright);
}
.r-self {
  color: var(--bright);
}
.r-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}
.r-copied:empty {
  display: none;
}
.r-side + .home-foot {
  padding-top: 16px;
}

/* ---------- /quiz ---------- */
.quiz-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.quiz-head .t {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.quiz-head .s {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--muted);
}
.quiz {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px dashed var(--ink);
}
.q-progress {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.q-text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
.q-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.opt {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.opt.right {
  background: var(--ink);
  color: var(--paper-2);
  font-weight: 700;
}
.opt.wrong {
  border-color: var(--red-text);
  color: var(--red-text);
  text-decoration: line-through;
}
.opt.muted {
  border-style: dotted;
  border-color: #b9b2a3;
  color: var(--muted);
}
.opt:disabled {
  cursor: default;
  opacity: 1;
}
.verdict-right {
  font-size: 16px;
  font-weight: 700;
}
.verdict-wrong {
  font-size: 16px;
  font-weight: 700;
  color: var(--red-text);
}
.explain,
.q-satire {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.q-satire {
  color: var(--red-text);
}
.q-source {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}
.score .news {
  color: var(--muted);
}
.score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.score .label {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--muted);
}
.score .big {
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
}
.score .stamp {
  font-size: 24px;
  color: var(--red-text);
  border-color: var(--red-text);
  padding: 10px 16px 7px;
  transform: rotate(-4deg);
  white-space: normal;
}
.score .rule {
  align-self: stretch;
}
.cmd {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 6px 14px;
  background: var(--ink);
  color: var(--paper-2);
  font-size: 15px;
  text-align: left;
}
.cmd code {
  font: inherit;
}
.cmd-copy {
  flex-shrink: 0;
  height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 22px;
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cmd-copy:hover {
  background: var(--red);
  color: #f7f4ec;
}
.row {
  display: flex;
  gap: 8px;
  align-self: stretch;
}
.row .btn {
  flex: 1 1 0;
  font-size: 14px;
}
.quiz-static ol {
  padding-left: 1.4em;
}
.quiz-static li {
  margin-bottom: 18px;
}
.quiz-static details {
  margin-top: 6px;
}
.quiz-static summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ---------- phone ---------- */
@media (max-width: 520px) {
  /* Most ✶ pool lines take three lines at phone width. */
  .pool-satire {
    min-height: 3lh;
  }
  :root {
    /* Zoomed, the paper still spans the screen: wider in its own units, so it wraps less and fits more. */
    --receipt-w: calc((100vw - 32px) / var(--zoom));
    --n-size: 36px;
    --line-size: 12px;
    --note-size: 13px;
    --stamp-size: 18px;
    --meta-size: 9.5px;
    --fine-size: 8.5px;
    --pad: 20px 20px 12px;
    --gap: 12px;
  }
  .top {
    padding: 0 12px 0 16px;
    height: 54px;
  }
  .wordmark {
    font-size: 12px;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
  .top nav a {
    padding: 0 8px;
  }
  .printer {
    left: 6px;
    right: 6px;
    width: auto;
    margin-left: 0;
    top: 54px;
  }
  .led {
    width: 6px;
    height: 6px;
  }
  .strip-well {
    top: 54px;
  }
  .strip {
    left: 16px;
    margin-left: 0;
  }
  .stage {
    margin-top: calc(104px / var(--zoom));
    perspective: 1000px;
  }
  .stub-wrap {
    height: 80px;
  }
  .stub-body {
    height: 68px;
    padding: 0 8px 0 18px;
  }
  .stub-cmd code,
  .dollar {
    font-size: 15px;
  }
  .barcode span {
    height: 24px;
  }
  .home-foot {
    gap: 4px;
    font-size: 11px;
    padding-top: 28px;
    padding-bottom: 14px;
  }
  .pullrow {
    flex-direction: column;
    gap: 0;
    padding-top: 2px;
  }
  /* Phones show the receipt, its stub and the footer: pulling the paper is the way to the next customer, and
     the news stays for bigger screens. Next stays for screen readers and keyboards (a pull is touch only): out of
     sight until it has focus, then a pill at the bottom of the screen. */
  .wire {
    display: none;
  }
  .pullrow {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .pullrow:focus-within {
    position: fixed;
    left: 50%;
    bottom: 16px;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    transform: translateX(-50%);
    padding: 0 18px;
    border-radius: 22px;
    background: var(--desk);
    box-shadow: 0 0 0 1px var(--desk-muted);
  }
  .pullrow + .home-foot {
    padding-top: 24px;
  }
  .sheet {
    padding: 20px 18px 24px;
  }
}

/* ---------- motion ---------- */
@keyframes tdSway {
  0%,
  100% {
    transform: rotate(0.25deg);
  }
  50% {
    transform: rotate(-0.25deg);
  }
}
@keyframes tdFeed {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(-40px -80px -260px -80px);
  }
}
@keyframes tdSlam {
  from {
    opacity: 0;
    transform: scale(2.4) rotate(-18deg);
  }
  to {
    opacity: 0.92;
    transform: scale(1) rotate(-7deg);
  }
}
@keyframes tdTear {
  0% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: rotate(4deg) translate(6px, 8px);
    opacity: 1;
  }
  100% {
    transform: rotate(14deg) translate(60px, 140px);
    opacity: 0;
  }
}
@keyframes tdReFeed {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 -20px 0);
  }
}
@keyframes tdRecoil {
  0% {
    transform: none;
  }
  35% {
    transform: translateY(-5px);
  }
  70% {
    transform: translateY(2px);
  }
  100% {
    transform: none;
  }
}
@keyframes tdTearOff {
  0% {
    transform: translateY(var(--dy)) rotate(var(--rot)) scaleY(var(--sy));
    animation-timing-function: linear;
  }
  13% {
    transform: translateY(calc(var(--dy) + 6px))
      rotate(calc(var(--rot) + var(--dir) * 3.2deg)) scaleY(1.01);
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  17% {
    transform: translateY(calc(var(--dy) + 24px))
      rotate(calc(var(--rot) + var(--dir) * 3.8deg));
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.5);
  }
  100% {
    transform: translateY(calc(var(--dy) + var(--fall)))
      translateX(calc(var(--dir) * 40px))
      rotate(calc(var(--rot) + var(--dir) * 11deg)) rotateX(12deg);
  }
}
@keyframes tdStripRecoil {
  0%,
  100% {
    transform: none;
  }
  30% {
    transform: translateY(-2px);
  }
}
@keyframes tdSpk {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translate(var(--sx), var(--sd)) rotate(var(--sr));
    opacity: 0;
  }
}
@keyframes tdFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tdLed {
  0%,
  40%,
  80% {
    background: var(--amber);
    box-shadow: 0 0 8px var(--amber);
  }
  20%,
  60% {
    background: #2a2926;
    box-shadow: none;
  }
  100% {
    background: var(--led);
    box-shadow: 0 0 8px var(--led);
  }
}
@keyframes tdDip {
  0%,
  100% {
    transform: none;
  }
  45% {
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hang,
  .feed,
  .slam,
  .stub,
  .stub.tear,
  .stub.refeed,
  .recoil,
  .fade,
  .led.boot,
  .drag.dip,
  .copied .msg {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
  .slam {
    transform: rotate(-7deg);
  }
  .stub.tear {
    visibility: hidden;
  }
}

/* ---------- the home page fits one screen ----------
   Wide screens: the wire to the left of the paper, Next to the right, the footer centered at the bottom, so
   nothing but the footer sits under the receipt. The paper and its stub end 849px down at zoom 1 (paper from 110px, 739px
   tall); the footer takes 99px, plus 2px of rounding. Each step below is the largest zoom that fits its lowest
   height: z = (height - 211) / 739, down to 0.58 at 640px; shorter screens scroll. Pure CSS, so the page never
   shifts once drawn. */
@media (min-width: 1000px) {
  .wire {
    position: absolute;
    top: 140px;
    right: calc(50% + var(--receipt-w) * var(--zoom) / 2 + 44px);
    width: min(250px, calc(50% - var(--receipt-w) * var(--zoom) / 2 - 64px));
    padding: 0;
    justify-content: flex-start;
    text-align: left;
  }
  .wire .news-k {
    justify-content: flex-start;
  }
  .wire .news-k::before {
    display: none;
  }
  .wire .news {
    min-height: 0;
  }
  .pullrow {
    position: absolute;
    top: 140px;
    left: calc(50% + var(--receipt-w) * var(--zoom) / 2 + 44px);
    padding: 0;
  }
  /* The footer as everywhere else: the two lines on top, the links centered under them, closer together. */
  .pullrow + .home-foot,
  .home-foot {
    gap: 4px;
    padding: 6px 24px 12px;
  }
}
@media (min-width: 1000px) and (max-height: 949px) {
  :root {
    --z: 0.94;
  }
}
@media (min-width: 1000px) and (max-height: 909px) {
  :root {
    --z: 0.89;
  }
}
@media (min-width: 1000px) and (max-height: 869px) {
  :root {
    --z: 0.83;
  }
}
@media (min-width: 1000px) and (max-height: 829px) {
  :root {
    --z: 0.78;
  }
}
@media (min-width: 1000px) and (max-height: 789px) {
  :root {
    --z: 0.72;
  }
}
@media (min-width: 1000px) and (max-height: 749px) {
  :root {
    --z: 0.67;
  }
}
@media (min-width: 1000px) and (max-height: 709px) {
  :root {
    --z: 0.62;
  }
}
@media (min-width: 1000px) and (max-height: 669px) {
  :root {
    --z: 0.58;
  }
}
/* Tablets and narrow windows: stacked. From 700px wide the footer is as compact as on wide screens; under the paper go the wire (93px), Next (56px) and the footer (99px, or 125px under 700px wide).
   z = (height - budget) / 739, never under 0.67 so the receipt stays readable; shorter screens scroll. */
@media (min-width: 700px) and (max-width: 999px) {
  .pullrow + .home-foot,
  .home-foot {
    gap: 4px;
    padding: 6px 24px 12px;
  }
}
@media (min-width: 700px) and (max-width: 999px) and (max-height: 1106px) {
  :root {
    --z: 0.94;
  }
}
@media (min-width: 700px) and (max-width: 999px) and (max-height: 1066px) {
  :root {
    --z: 0.89;
  }
}
@media (min-width: 700px) and (max-width: 999px) and (max-height: 1026px) {
  :root {
    --z: 0.83;
  }
}
@media (min-width: 700px) and (max-width: 999px) and (max-height: 986px) {
  :root {
    --z: 0.78;
  }
}
@media (min-width: 700px) and (max-width: 999px) and (max-height: 946px) {
  :root {
    --z: 0.72;
  }
}
@media (min-width: 700px) and (max-width: 999px) and (max-height: 906px) {
  :root {
    --z: 0.67;
  }
}
@media (min-width: 521px) and (max-width: 699px) and (max-height: 1124px) {
  :root {
    --z: 0.94;
  }
}
@media (min-width: 521px) and (max-width: 699px) and (max-height: 1084px) {
  :root {
    --z: 0.89;
  }
}
@media (min-width: 521px) and (max-width: 699px) and (max-height: 1044px) {
  :root {
    --z: 0.83;
  }
}
@media (min-width: 521px) and (max-width: 699px) and (max-height: 1004px) {
  :root {
    --z: 0.78;
  }
}
@media (min-width: 521px) and (max-width: 699px) and (max-height: 964px) {
  :root {
    --z: 0.72;
  }
}
@media (min-width: 521px) and (max-width: 699px) and (max-height: 924px) {
  :root {
    --z: 0.67;
  }
}
@media (min-width: 521px) and (max-width: 699px) and (max-height: 884px) {
  :root {
    --z: 0.67;
  }
}
/* Phones: the receipt and its stub fit the first screen; the wire, Next and the footer follow just below. The stub
   ends at about 104px + 687px × z (measured), plus 12px of air: z = (height - 116) / 687, never under 0.68.
   At full size, Russian at 390px ends at 804px, hence 816px for zoom 1; under 380px wide a zoom over 0.92
   wraps more lines, hence the cap. */
@media (min-width: 380px) and (max-width: 520px) and (max-height: 816px) {
  :root {
    --z: 0.97;
  }
}
@media (min-width: 380px) and (max-width: 520px) and (max-height: 786px) {
  :root {
    --z: 0.93;
  }
}
@media (min-width: 380px) and (max-width: 520px) and (max-height: 756px) {
  :root {
    --z: 0.88;
  }
}
@media (min-width: 380px) and (max-width: 520px) and (max-height: 726px) {
  :root {
    --z: 0.84;
  }
}
@media (min-width: 380px) and (max-width: 520px) and (max-height: 696px) {
  :root {
    --z: 0.8;
  }
}
@media (min-width: 380px) and (max-width: 520px) and (max-height: 666px) {
  :root {
    --z: 0.75;
  }
}
@media (min-width: 380px) and (max-width: 520px) and (max-height: 636px) {
  :root {
    --z: 0.71;
  }
}
@media (min-width: 380px) and (max-width: 520px) and (max-height: 606px) {
  :root {
    --z: 0.68;
  }
}
@media (max-width: 379px) and (max-height: 854px) {
  :root {
    --z: 0.92;
  }
}
@media (max-width: 379px) and (max-height: 824px) {
  :root {
    --z: 0.92;
  }
}
@media (max-width: 379px) and (max-height: 794px) {
  :root {
    --z: 0.92;
  }
}
@media (max-width: 379px) and (max-height: 764px) {
  :root {
    --z: 0.9;
  }
}
@media (max-width: 379px) and (max-height: 734px) {
  :root {
    --z: 0.85;
  }
}
@media (max-width: 379px) and (max-height: 704px) {
  :root {
    --z: 0.81;
  }
}
@media (max-width: 379px) and (max-height: 674px) {
  :root {
    --z: 0.77;
  }
}
@media (max-width: 379px) and (max-height: 644px) {
  :root {
    --z: 0.72;
  }
}
@media (max-width: 379px) and (max-height: 614px) {
  :root {
    --z: 0.68;
  }
}
@media (max-width: 359px) {
  .wire .news {
    min-height: calc(21px + 4lh);
  }
}

/* /r on wide screens: the result and its links in the right column, level with the wire. */
@media (min-width: 1000px) {
  .r-side {
    position: absolute;
    top: 140px;
    left: calc(50% + var(--receipt-w) * var(--zoom) / 2 + 44px);
    width: min(260px, calc(50% - var(--receipt-w) * var(--zoom) / 2 - 64px));
    margin: 0;
    padding: 0;
    align-items: flex-start;
    text-align: left;
  }
  .r-side + .home-foot {
    padding-top: 6px;
  }
}

/* A friend's receipt carries more rows than the home sample (plan multiple, latest call, a longer note): about
   871px of paper at full size against 739px, so /r zooms 0.84 of --z to keep a laptop page on one screen. On
   tablets the result stacks under the receipt and the page may scroll a little; phones keep --z, where the
   receipt and its stub still fit the first screen. */
@media (min-width: 521px) {
  .r-page {
    --zoom: calc(var(--z) * 0.84);
  }
}