/* TOCKO storefront — AUTHORED BY HAND. build_site.py never rewrites this file.
   ==========================================================================

   TWO GROUNDS, and the switch means something. PAPER is the linen stock the
   paperback is actually printed on, and it is where the books are. INK is the
   Under — the boiler-dark below the ground line — and it is where the argument
   is: the claim, the engine, the ladder, the footer. Nothing is on ink for
   contrast alone.

   THE ACCENT IS MEASURED, NOT CHOSEN. Brass (#B08D3A) is the metal every
   tapper on all four jackets is struck from. Lemon (#E8C23A) is the one
   saturated note in the whole property — ART-DIRECTION §3 says it appears once
   per image or not at all, so here it is the buy action and nothing else. The
   reserved door green (#3E5B4A) is not in the palette and is handed to exactly
   one thing: Book Three's spine strip.

   THE PALETTE IS SET AT THE FLOOR, NOT BY EYE. Brass and leaf are picture
   colours and do not clear 4.5:1 at label size on linen, so text gets
   --brass-ink / --brass-hi / --leaf-ink: the same hues, moved until they pass.
   site_audit.py re-checks every pair on every run.

   THREE TYPE ROLES. Bricolage Grotesque carries the display voice, used heavy
   and tight. Newsreader is the reading face and appears only where the page is
   showing you what the printed book looks like. DM Mono is the utility face and
   carries every figure, with tabular numerals so prices and counts line up.   */

:root {
  /* ---- the materials. ART-DIRECTION §3, unchanged. -------------------- */
  --brass: #B08D3A;
  --brick: #9C5B45;
  --linen: #F0E7D6;
  --zinc:  #8A9299;
  --iron:  #241E1C;
  --lemon: #E8C23A;
  --leaf:  #6B7A4A;
  --door:  #3E5B4A;          /* reserved: Book Three, and nowhere else */
  /* Lettering struck into brass or printed on lemon. Dark enough to clear
     4.5:1 on both, which plain --iron does not on lemon at label size. */
  --strike: #2B2113;

  /* ---- the paper ground ---------------------------------------------- */
  --paper:      #F6F0E2;
  --paper-sink: #EFE6D3;
  --paper-card: #FCF8EF;
  --paper-edge: #8E7C4E;     /* borders of things you click or type in, 3.6:1 */
  --print:      #241E1C;     /* 14.5:1 */
  --print-dim:  #5B4E47;     /* 7.0:1  */
  --print-mute: #6F6058;     /* 5.3:1  */

  /* ---- the ink ground ------------------------------------------------- */
  --ink:       #1A1513;
  --ink-raise: #221C19;
  --stone:     #F0E7D6;      /* 14.7:1 */
  --stone-dim: #C0B2A2;      /* 8.7:1  */

  /* ---- picture colours, moved until they read as text ----------------- */
  --brass-ink: #7A5E17;      /* brass on paper, 5.4:1 */
  --brass-hi:  #C9A85A;      /* brass on ink,   8.0:1 */
  --leaf-ink:  #4F5C33;      /* leaf on paper,  6.4:1 */

  /* ---- the live surface. Components read these and only these, so a
          section changes ground by redefining tokens, never by restyling.  */
  --bg: var(--paper);
  --bg-2: var(--paper-sink);
  --card: var(--paper-card);
  --fg: var(--print);
  --fg-dim: var(--print-dim);
  --fg-mute: var(--print-mute);
  --accent: var(--brass-ink);
  --edge: var(--paper-edge);
  --line: rgb(36 30 28 / 0.17);
  --line-2: rgb(36 30 28 / 0.09);
  --lift: 0 1px 0 rgb(36 30 28 / 0.13), 0 12px 28px -22px rgb(36 30 28 / 0.6);

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --body: "Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --read: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --data: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --pad: clamp(1.125rem, 4.4vw, 3.25rem);
  --band: clamp(3.25rem, 8vw, 6.5rem);
  --radius: 3px;
}

/* The ink ground redefines tokens and paints itself. It never restyles a
   component and never targets a bare element: `.on-paper a { color }` outranks
   every class it contains and painted a masthead near-black once already. */
.ink {
  --bg: var(--ink);
  --bg-2: var(--ink-raise);
  --card: var(--ink-raise);
  --fg: var(--stone);
  --fg-dim: var(--stone-dim);
  --fg-mute: var(--stone-dim);
  --accent: var(--brass-hi);
  --edge: #6E5F44;
  --line: rgb(240 231 214 / 0.20);
  --line-2: rgb(240 231 214 / 0.10);
  --lift: 0 1px 0 rgb(0 0 0 / 0.5), 0 14px 32px -22px rgb(0 0 0 / 0.9);
  background: var(--bg);
  color: var(--fg);
}

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

/* height:auto or the width/height attributes defeat aspect-ratio. The
   attributes stay: they are what reserves the space and stops layout shift. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* No text-rendering: optimizeLegibility. It forces kerning and ligature
     lookups over the whole document and stalls visibly at length. */
}

/* Audio rule R9 forbids digital silence, because a real room is never nothing.
   A printed surface is the same claim, so the ground is never a flat fill. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--iron); color: var(--linen); padding: 12px 18px;
  font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ----------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.028em;
  line-height: 0.96;
  text-wrap: balance;
  font-variation-settings: "wdth" 100, "opsz" 60;
}
h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 3.7rem); letter-spacing: -0.038em; }
h2 { font-size: clamp(1.8rem, 1.1rem + 2.9vw, 3rem); letter-spacing: -0.032em; }
h3 { font-size: clamp(1.18rem, 1rem + 0.8vw, 1.5rem); letter-spacing: -0.022em; line-height: 1.08; }
h4 { font-size: 1.02rem; letter-spacing: -0.018em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

.mono, .data {
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.lead {
  font-size: clamp(1.06rem, 1rem + 0.45vw, 1.26rem);
  line-height: 1.52;
  color: var(--fg-dim);
  text-wrap: pretty;
}
.dim { color: var(--fg-mute); }
.tight { max-width: 62ch; }
.measure { max-width: 66ch; }

/* Every door and every meter in a shared building carries a small engraved
   plate telling you whose it is. That is what a section label is here. */
.plate {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--data); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--strike);
  background: linear-gradient(178deg, #DCBA6A, var(--brass));
  padding: 0.52em 0.9em 0.5em; border-radius: 2px;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.34);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5),
              inset 0 -1px 0 rgb(0 0 0 / 0.3), 0 1px 2px rgb(36 30 28 / 0.34);
}
.plate::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F2DFA8, #7C5C1B);
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.35);
}

/* The dividers are floor slabs, drawn the way the cutaway draws a floor. */
.slab { height: 9px; background: var(--iron); position: relative; z-index: 2; }
.slab::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
  background: linear-gradient(180deg, rgb(36 30 28 / 0.2), transparent);
}

/* ---------------------------------------------------------------- shell */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.band { padding-block: var(--band); }
.band-tint { background: var(--bg-2); }
.head-block { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(26px, 4vw, 44px); }
.head-block .plate { align-self: flex-start; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 0.4em 0.7em; align-items: baseline;
  margin: 0 0 22px;
  font-family: var(--data); font-size: 0.67rem; letter-spacing: 0.11em;
  text-transform: uppercase;
}
.crumbs a { color: var(--fg-dim); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.crumbs span { color: var(--fg-mute); }

.pagehead { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(26px, 4vw, 42px); }
.pagehead .plate { align-self: flex-start; }
.pagehead h1 { max-width: 20ch; }
.pagehead .lead { max-width: 60ch; }

/* minmax(0, 1fr): a bare 1fr floors at its content's min-content width, so one
   wide table in a column pushes the whole page sideways on a phone. */
.two-col {
  display: grid; gap: clamp(26px, 4vw, 58px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

.rail-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(18px, 2.4vw, 26px); background: var(--card);
  position: sticky; top: 74px;
}
@media (max-width: 900px) { .rail-box { position: static; } }
.rail-box h2 { font-size: 1.28rem; letter-spacing: -0.024em; margin-bottom: 10px; }

/* -------------------------------------------------------------- masthead */

.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(9px);
  border-bottom: 1px solid rgb(36 30 28 / 0.17);
  color: var(--print);
}
.top-in {
  display: flex; align-items: center; gap: clamp(10px, 2vw, 24px);
  max-width: var(--wrap); margin-inline: auto; padding: 11px var(--pad);
}
.wordmark {
  font-family: var(--display); font-weight: 800; font-size: 1.2rem;
  letter-spacing: 0.16em; text-decoration: none; margin-right: auto;
  color: var(--print);
}
.top nav { display: flex; gap: clamp(10px, 1.7vw, 22px); }
.top nav a {
  font-family: var(--data); font-size: 0.69rem; letter-spacing: 0.11em;
  text-transform: uppercase; text-decoration: none; color: var(--print-dim);
  white-space: nowrap;
}
.top nav a:hover { color: var(--print); }
.top nav a[aria-current="page"] { color: var(--print); text-decoration: underline;
  text-decoration-color: var(--brass); text-underline-offset: 4px; }
@media (max-width: 940px) { .top nav { display: none; } }

.chip-btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  border: 1px solid rgb(36 30 28 / 0.2); background: transparent; color: var(--print);
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.11em;
  text-transform: uppercase; padding: 0.52em 0.8em; border-radius: 2px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.chip-btn:hover { border-color: var(--paper-edge); }
.chip-btn[data-empty="true"] { color: var(--print-mute); }
.chip-btn[data-empty="false"] { border-color: var(--print); font-weight: 500; }

/* -------------------------------------------------------------- buttons
   Lemon is the only saturated note in the world and it stops working the
   moment it is common, so it is the buy action and nothing else. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--body); font-weight: 600; font-size: 0.94rem;
  letter-spacing: -0.01em; padding: 0.78em 1.3em; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn-buy {
  background: var(--lemon); color: var(--strike); border-color: #B99A21;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 1px 0 rgb(36 30 28 / 0.25);
}
.btn-buy:hover { transform: translateY(-1px); }
.btn-buy:active { transform: translateY(0); }
.btn-line { border-color: currentColor; color: var(--fg); background: transparent; }
.btn-line:hover { background: var(--fg); color: var(--bg); }
.btn-ghost { border-color: var(--line); color: var(--fg-dim); background: transparent; font-weight: 500; }
.btn-ghost:hover { border-color: var(--edge); color: var(--fg); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn[data-state="added"] { background: var(--leaf-ink); border-color: var(--leaf-ink); color: var(--linen); }

.step {
  display: inline-flex; align-items: center; border: 1px solid var(--edge);
  border-radius: var(--radius); overflow: hidden;
}
.step button {
  width: 34px; height: 38px; border: 0; background: transparent; color: var(--fg);
  cursor: pointer; font-family: var(--data); font-size: 0.95rem; line-height: 1;
}
.step button:hover { background: var(--line-2); }
.step span, .step input {
  min-width: 2.6ch; text-align: center; font-family: var(--data); font-size: 0.86rem;
  font-variant-numeric: tabular-nums; border: 0; background: transparent;
  color: var(--fg); padding: 0; width: 3ch;
}

select, input[type="text"], input[type="email"] {
  font: inherit; font-size: 0.94rem; color: var(--fg); background: var(--card);
  border: 1px solid var(--edge); border-radius: var(--radius); padding: 0.6em 0.7em;
  max-width: 100%;
}

/* ------------------------------------------------------ the board, tapping
   The hero is the board in the Hall, and it taps back. Two taps inside 1.3s,
   then 1.8 seconds of room tone, then the tock. One tap does nothing: that is
   the rule, not a bug. */

.hero { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.hero-in {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(28px, 5vw, 58px) var(--pad) clamp(38px, 6vw, 70px);
  display: grid; gap: clamp(28px, 4.5vw, 56px);
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
}
@media (max-width: 900px) { .hero-in { grid-template-columns: minmax(0, 1fr); } }

.board {
  position: relative; background: var(--paper-card);
  border: 2px solid var(--iron); border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 26px); min-height: clamp(360px, 46vh, 440px);
  display: flex; flex-direction: column; cursor: pointer; box-shadow: var(--lift);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.rail { position: relative; height: 42px; flex: none; margin: 2px 0 4px; }
.rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 7px;
  border-radius: 2px; background: linear-gradient(180deg, #D6B25E, #8E6B22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 2px 4px -2px rgb(36 30 28 / 0.6);
}
/* Hooks and hung tappers share one eight-column grid, so a tapper lands ON a
   hook rather than near one. */
.hooks, .hung {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  justify-items: center; padding-inline: 5%;
}
.hooks { position: absolute; left: 0; right: 0; top: 19px; }
.hooks i {
  width: 9px; height: 13px; border: 2px solid var(--brass); border-top: 0;
  border-radius: 0 0 9px 9px; opacity: 0.8;
}
.hung { position: relative; flex: none; align-content: start; row-gap: 10px; }
.tapper {
  width: 100%; max-width: 58px; transform-origin: 50% 6%;
  animation: swing 0.95s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.tapper.rest { animation: none; }
@keyframes swing {
  0%   { transform: translateY(-26px) rotate(-19deg); opacity: 0; }
  35%  { opacity: 1; }
  55%  { transform: rotate(11deg); }
  78%  { transform: rotate(-5deg); }
  100% { transform: rotate(0); opacity: 1; }
}
/* In flow, not absolute: the eight tappers hang from the rail and the words
   sit in the space left under them. Absolutely positioning this over the whole
   board put "Two taps." straight through the row of discs. */
.tap-face {
  flex: 1; display: grid; place-content: center; align-content: center;
  text-align: center; padding: 18px 24px; pointer-events: none;
}
.tap-word {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.5rem, 1.4rem + 5.2vw, 4.4rem); line-height: 0.88;
  letter-spacing: -0.045em; margin: 0; color: var(--print);
  font-variation-settings: "wdth" 90, "opsz" 96;
}
.tap-sub { margin: 0.85em auto 0; color: var(--print-dim); font-size: 0.97rem; max-width: 24ch; }
.again {
  flex: none; text-align: center; margin: 0; color: var(--print-dim);
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
}
/* the 1.8-second hole, with the boiler breathing under it */
.board[data-state="wait"] .tap-face { animation: breathe 1.8s ease-in-out forwards; }
@keyframes breathe { 0% { opacity: 1; } 22% { opacity: 0.14; } 100% { opacity: 0.08; } }
.board[data-state="wait"] { border-color: var(--print-mute); }
.board[data-state="answer"] .tap-face { opacity: 0; }
.ping {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; border: 2px solid var(--brass); pointer-events: none;
  animation: ping 0.85s ease-out forwards;
}
@keyframes ping { to { transform: scale(7); opacity: 0; } }
.tock {
  position: absolute; inset: 0; display: grid; place-content: center;
  pointer-events: none; font-family: var(--display); font-weight: 800;
  letter-spacing: -0.05em; color: var(--print);
  font-size: clamp(2.1rem, 1rem + 5.4vw, 4.2rem);
  font-variation-settings: "wdth" 78, "opsz" 96;
  animation: tock 1.5s ease-out forwards;
}
@keyframes tock {
  0%   { opacity: 0; transform: scale(0.92); }
  14%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.02); }
}
.board-foot {
  flex: none; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  justify-content: space-between; border-top: 1px solid rgb(36 30 28 / 0.17);
  margin-top: 14px; padding-top: 12px;
}
.caught {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--print-dim); font-variant-numeric: tabular-nums;
}
.caught b { color: var(--print); font-weight: 500; }
.caught-name { font-family: var(--body); font-size: 0.9rem; text-transform: none; letter-spacing: 0; }

.pitch h1 { font-size: clamp(2.4rem, 1.2rem + 5.4vw, 4.2rem); line-height: 0.92;
  font-variation-settings: "wdth" 92, "opsz" 96; max-width: none; }
.pitch .lead { margin-top: 0.72em; max-width: 34ch; }
.stem {
  font-family: var(--read); font-style: italic;
  font-size: clamp(1.02rem, 0.94rem + 0.34vw, 1.2rem);
  color: var(--fg-mute); margin: 0 0 0.7em;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.facts {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--line); font-family: var(--data); font-size: 0.69rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.facts b { color: var(--fg); font-weight: 500; }

/* ------------------------------------------------- the grid: the signature
   28 facts across, 8 rule-types down. 224 cells, 52 of them spent. It is the
   series' whole argument — the engine cannot run out — and the shop's index at
   the same time, because every lit cell is a story you can buy. It is the only
   bold thing on the site. */

.grid-wrap { overflow-x: auto; padding-bottom: 8px; }
.grid {
  display: grid; gap: 3px; min-width: 720px;
  grid-template-columns: 7.5rem repeat(var(--facts, 28), minmax(0, 1fr));
}
.grid .corner { grid-column: 1; }
.grid .rule-label {
  grid-column: 1; font-family: var(--data); font-size: 0.6rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-dim); align-self: center;
  padding-right: 10px; text-align: right; line-height: 1.25;
}
.grid .fact-label {
  font-family: var(--data); font-size: 0.52rem; color: var(--fg-mute);
  writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg);
  height: 3.1rem; justify-self: center; letter-spacing: 0.04em;
}
.cell {
  aspect-ratio: 1; border-radius: 1px; border: 0; padding: 0;
  background: var(--line-2); position: relative;
}
.cell.free { background: rgb(240 231 214 / 0.06); box-shadow: inset 0 0 0 1px var(--line-2); }
.cell.used {
  background: var(--brass); cursor: pointer;
  animation: light 0.5s ease backwards;
}
.cell.used:hover, .cell.used:focus-visible { background: var(--lemon); }
@keyframes light { from { opacity: 0; transform: scale(0.6); } }
.grid-legend {
  display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px;
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.grid-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 1px;
  margin-right: 0.5em; vertical-align: -1px; }
.grid-read {
  min-height: 4.6em; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line); max-width: 62ch;
}
.grid-read .k {
  font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent);
}
.grid-read b { display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.24rem; letter-spacing: -0.026em; margin: 3px 0 4px; }
.grid-read i { font-family: var(--read); color: var(--fg-dim); font-size: 1.02rem; }

/* ------------------------------------------------------------ book cards */

.books { display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 22px); }
.card {
  display: grid; grid-template-columns: clamp(118px, 17vw, 190px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 38px); align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(16px, 2.6vw, 30px); background: var(--ground, var(--card));
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--spine, var(--brass));
}
@media (max-width: 640px) { .card { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.card-cover { border-radius: 2px; width: 100%;
  box-shadow: 0 2px 0 rgb(36 30 28 / 0.16), 0 16px 30px -22px rgb(36 30 28 / 0.8); }
.card h3 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); letter-spacing: -0.03em; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--brass);
  text-underline-offset: 5px; }
.card-tag { font-family: var(--read); font-style: italic; font-size: 1.05rem;
  color: var(--fg-dim); margin: 0.55em 0 0; max-width: 48ch; }
.card-spec {
  display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 16px;
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-mute); font-variant-numeric: tabular-nums;
}
.card .plate { margin-bottom: 12px; }
.buybox {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.buybox .btn-buy { margin-left: auto; }
@media (max-width: 560px) { .buybox .btn-buy { width: 100%; margin-left: 0; } }
.price {
  font-family: var(--display); font-weight: 800; font-size: 1.55rem;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
  font-variation-settings: "wdth" 88, "opsz" 40;
}
.price small {
  font-family: var(--data); font-size: 0.61rem; letter-spacing: 0.12em;
  color: var(--fg-mute); font-weight: 500; display: block; margin-top: 5px;
  text-transform: uppercase;
}
.saving {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--leaf-ink); font-variant-numeric: tabular-nums;
}
.ink .saving { color: var(--brass-hi); }
.set { --ground: var(--ink); --spine: var(--brass); }

.contents { margin-top: 18px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.contents summary {
  cursor: pointer; font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--fg-dim); list-style: none;
}
.contents summary::-webkit-details-marker { display: none; }
.contents summary::before { content: "+ "; color: var(--accent); }
.contents[open] summary::before { content: "– "; }
.toc { margin: 14px 0 0; padding: 0; list-style: none; column-width: 15rem; column-gap: 32px; }
.toc li { display: flex; gap: 9px; align-items: baseline; break-inside: avoid;
  padding: 2.5px 0; font-size: 0.9rem; }
.toc .num { font-family: var(--data); font-size: 0.67rem; color: var(--accent);
  min-width: 1.6em; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.toc .ref { color: var(--fg-mute); font-family: var(--read); font-style: italic; font-size: 0.86rem; }

/* ------------------------------------------------------------ shop grid */

.shelf {
  display: grid; gap: clamp(18px, 2.6vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.shelf-item {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: clamp(14px, 2vw, 20px);
}
.shelf-item img { border-radius: 2px; box-shadow: 0 2px 0 rgb(36 30 28 / 0.14); }
.shelf-item h3 { font-size: 1.24rem; }
.shelf-item h3 a { text-decoration: none; }
.shelf-item p { font-size: 0.92rem; color: var(--fg-dim); margin: 0; }
.shelf-item .buybox { margin-top: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(22px, 3vw, 34px); }
.filters .chip-btn[aria-pressed="true"] { background: var(--iron); color: var(--linen);
  border-color: var(--iron); }

/* --------------------------------------------------------- the ladder */

.tbl-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data caption {
  text-align: left; font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-mute); padding-bottom: 10px;
}
table.data th, table.data td {
  text-align: left; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
table.data thead th {
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-mute); font-weight: 500;
  border-bottom: 2px solid var(--fg);
}
table.data tbody th { font-weight: 500; }
table.data .num { text-align: right; padding-right: 0; font-family: var(--data); font-size: 0.92rem; }
.spec th { font-family: var(--data); font-size: 0.67rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-mute); font-weight: 500; width: 36%; }
.spec td { font-size: 0.97rem; }

/* --------------------------------------------------- the fifty-two table */

.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th, .tbl td { text-align: left; padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tbl thead th {
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-mute); font-weight: 500;
  border-bottom: 2px solid var(--fg); padding-bottom: 9px;
}
.tbl tbody th { font-family: var(--data); font-size: 0.75rem; color: var(--accent);
  font-weight: 500; width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl .ic { width: 60px; padding-right: 12px; }
.tbl .ic img { width: 52px; max-width: none; }
.tbl .g { font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -0.02em; display: block; }
.tbl .g a { text-decoration: underline; text-decoration-color: var(--brass);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tbl .r { font-family: var(--read); font-style: italic; color: var(--fg-dim);
  font-size: 0.95rem; display: block; margin-top: 2px; }
.tbl .w { font-size: 0.92rem; color: var(--fg-dim); }
.tbl .b { font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; }
.tbl tr:hover td, .tbl tr:hover th { background: var(--line-2); }

.flags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.flag {
  font-family: var(--data); font-size: 0.6rem; letter-spacing: 0.09em;
  text-transform: uppercase; border: 1px solid var(--line); border-radius: 2px;
  padding: 0.18em 0.45em; color: var(--fg-dim); white-space: nowrap;
}
.flag.free { border-color: var(--brass); color: var(--accent); }

@media (max-width: 720px) {
  .tbl { min-width: 0; display: block; }
  .tbl thead { display: none; }
  .tbl tbody { display: block; }
  .tbl tbody tr {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px;
    padding: 18px 0 20px; border-bottom: 1px solid var(--line-2);
  }
  .tbl tbody th { grid-area: 1 / 1; padding: 0; border: 0; width: auto; }
  .tbl .ic { grid-area: 2 / 1; padding: 0; width: auto; }
  .tbl .ic img { width: 44px; }
  .tbl tbody td:not(.ic) { grid-column: 2; display: block; padding: 0 0 9px; border: 0; }
  .tbl tbody td:last-child { padding-bottom: 0; }
  .tbl tr:hover td, .tbl tr:hover th { background: none; }
}

/* ---------------------------------------------------------- the noises */

.noises {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px 30px; margin: 0; padding: 0; list-style: none;
}
.noises li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0;
  border-bottom: 1px solid var(--line-2); break-inside: avoid; }
.noises .n { font-family: var(--data); font-size: 0.65rem; color: var(--fg-mute);
  min-width: 2.2em; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.noises .s { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-size: 0.98rem; font-variation-settings: "wdth" 82, "opsz" 40; }
.noises .gm { margin-left: auto; padding-left: 12px; text-align: right;
  font-family: var(--data); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; }

/* --------------------------------------------------------- the pictures */

.banner {
  width: 100%; display: block; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--linen);
  margin-block: clamp(20px, 3vw, 32px); max-height: min(56vh, 430px);
}
.banner-wide { aspect-ratio: 21 / 9; }
.banner-16 { aspect-ratio: 16 / 9; }
@media (max-width: 620px) { .banner-wide { aspect-ratio: 16 / 9; } .banner-16 { aspect-ratio: 4 / 3; } }
.figure-art {
  width: 100%; display: block; border-radius: 2px; background: var(--linen);
  border: 1px solid var(--line); margin: 0 0 clamp(24px, 3.4vw, 36px);
}
.portrait-art { width: 100%; border-radius: var(--radius); background: var(--linen);
  box-shadow: 0 20px 40px -28px #000; }

.reading {
  background: var(--paper-card); border: 1px solid rgb(36 30 28 / 0.17);
  border-radius: var(--radius); padding: clamp(22px, 4.2vw, 52px);
  box-shadow: var(--lift); color: var(--print);
}
.reading p { font-family: var(--read); font-size: clamp(1.06rem, 1rem + 0.55vw, 1.3rem);
  line-height: 1.64; margin: 0 0 0.9em; max-width: 62ch; }
.reading .furn { color: var(--print-dim); }
.reading blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 2px solid var(--brass);
  font-family: var(--read); font-style: italic; }
.reading blockquote p { margin: 0 0 0.3em; font-size: 1.08rem; }
.beat-label {
  display: block; margin: 2.2em 0 1em; padding-top: 0.9em;
  border-top: 1px solid rgb(36 30 28 / 0.09); font-family: var(--data);
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-ink);
}
.beat-label:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.noise { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-style: normal; font-variation-settings: "wdth" 80, "opsz" 40; font-size: 1.04em; }

.legend {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
  margin-top: 24px; background: var(--bg-2); font-size: 0.92rem; color: var(--fg-dim);
}
.legend b { font-family: var(--display); color: var(--fg); display: block;
  margin-bottom: 5px; font-size: 0.98rem; }

/* -------------------------------------------------------- cross-links */

.cross {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cross a {
  display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  overflow: hidden; transition: border-color 0.14s ease;
}
.cross a:hover { border-color: var(--edge); }
.cross img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 1px solid var(--line); background: var(--linen); }
.cross-body { display: flex; flex-direction: column; flex: 1; padding: 16px 20px 18px; }
.cross .k { font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent); }
.cross b { display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.14rem; letter-spacing: -0.026em; margin: 4px 0 5px; }
.cross span { font-size: 0.9rem; color: var(--fg-dim); line-height: 1.45; }
.cross .go { display: block; margin-top: auto; padding-top: 14px; font-family: var(--data);
  font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }

.pagenav {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  align-items: center; border-top: 1px solid var(--line);
  margin-top: clamp(32px, 5vw, 52px); padding-top: 20px;
}
.rail-links { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rail-links a {
  display: block; text-decoration: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 13px; font-family: var(--display);
  font-weight: 700; font-size: 0.98rem; letter-spacing: -0.02em;
}
.rail-links a:hover { border-color: var(--edge); }
.rail-links .k { display: block; font-family: var(--data); font-size: 0.6rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute);
  font-weight: 400; margin-bottom: 2px; }

.vol-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.vol-list li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px;
  align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line-2);
}
.vol-list img { width: 44px; }
.vol-list .g { font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: -0.024em; }
.vol-list .g .num { font-family: var(--data); font-size: 0.7rem; color: var(--accent);
  margin-right: 0.6em; font-weight: 500; font-variant-numeric: tabular-nums; }
.vol-list p { margin: 3px 0 0; font-size: 0.94rem; color: var(--fg-dim); max-width: 64ch; }
.vol-list .r { font-family: var(--read); font-style: italic; color: var(--fg-mute);
  font-size: 0.92rem; display: block; margin-top: 3px; }
.vol-list .free {
  font-family: var(--data); font-size: 0.6rem; letter-spacing: 0.11em;
  text-transform: uppercase; background: var(--lemon); color: var(--strike);
  border-radius: 2px; padding: 0.16em 0.45em; margin-left: 0.5em; white-space: nowrap;
}

/* minmax(0,1fr) and min-width:0 together: a grid item floors at its
   min-content width, so the thirteen-column disc rail below pushed the
   whole volume page sideways at 390px even though .discs scrolls. */
.season { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 26px); }
.season-row { min-width: 0; }
.season-row .n { font-family: var(--data); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-mute); display: block; margin-bottom: 8px; }
.season-row .n b { color: var(--fg); font-weight: 500; }
.discs {
  display: grid; grid-template-columns: repeat(var(--per, 13), minmax(34px, 1fr));
  gap: clamp(4px, 0.8vw, 10px); overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin;
}
@media (max-width: 640px) {
  .discs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
           mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}
.disc { width: 100%; border: 0; background: none; padding: 0; cursor: pointer;
  border-radius: 4px; transition: transform 0.14s ease; }
.disc img { width: 100%; filter: drop-shadow(0 2px 3px rgb(36 30 28 / 0.28)); }
.disc:hover, .disc:focus-visible { transform: translateY(-4px); }
.disc[aria-pressed="true"] { transform: translateY(-6px); }

/* -------------------------------------------------------------- prose */

.prose h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  margin: clamp(36px, 4.6vw, 56px) 0 14px; }
.prose h3 { font-size: 1.14rem; margin: 26px 0 8px; }
.prose p, .prose li { max-width: 66ch; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }
.prose > p:first-child, .prose > .figure-art:first-child { margin-top: 0; }
.prose .say { font-family: var(--display); font-weight: 800;
  font-variation-settings: "wdth" 82, "opsz" 40; letter-spacing: -0.02em; }
.pull {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); letter-spacing: -0.032em;
  line-height: 1.1; margin: clamp(26px, 3.4vw, 38px) 0; max-width: 22ch;
  font-variation-settings: "wdth" 92, "opsz" 72;
}
.claim-q {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.038em;
  line-height: 1.02; font-size: clamp(1.75rem, 1rem + 3.4vw, 3.1rem);
  max-width: 20ch; margin: 0; font-variation-settings: "wdth" 94, "opsz" 96;
}
.claim-q em { font-style: normal; color: var(--accent); }
.cols-2 { display: grid; gap: clamp(24px, 3.4vw, 44px); grid-template-columns: minmax(0, 1fr); }
.cols-3 { display: grid; gap: clamp(24px, 4vw, 52px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width: 760px) { .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa h3 { font-size: 1.06rem; margin-bottom: 8px; line-height: 1.3; }
.qa p { color: var(--fg-dim); font-size: 0.95rem; }
.who { margin: 0; display: grid; gap: 15px; }
.who div { border-left: 2px solid var(--brass); padding-left: 15px; }
.who dt { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; }
.who dd { margin: 2px 0 0; color: var(--fg-dim); font-size: 0.93rem; line-height: 1.5; }

.cutaway-frame { position: relative; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--linen); }
.cutaway-frame img { width: 100%; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(24px, 2.6vw, 32px); aspect-ratio: 1; border-radius: 50%;
  background: var(--iron); color: var(--linen); border: 2px solid var(--linen);
  font-family: var(--data); font-size: clamp(0.62rem, 0.8vw, 0.78rem); font-weight: 500;
  display: grid; place-content: center; box-shadow: 0 3px 8px -2px rgb(36 30 28 / 0.7);
}
.places { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 24px; }
.place { border-top: 2px solid var(--fg); padding-top: 11px; }
.place .n { font-family: var(--data); font-size: 0.67rem; letter-spacing: 0.12em; color: var(--accent); }
.place b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.04rem;
  letter-spacing: -0.02em; margin: 2px 0 3px; }
.place span { font-size: 0.87rem; color: var(--fg-mute); line-height: 1.45; display: block; }

/* --------------------------------------------------------------- cart */

.lines { margin: 0; padding: 0; list-style: none; }
.line {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 16px;
  align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-2);
}
@media (max-width: 620px) {
  .line { grid-template-columns: 60px minmax(0, 1fr); }
  .line .line-end { grid-column: 2; justify-items: start; }
}
.line img { border-radius: 2px; box-shadow: 0 1px 3px rgb(36 30 28 / 0.3); }
.line b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -0.02em; }
.line .meta { display: block; margin-top: 4px; }
.line-end { display: grid; gap: 8px; justify-items: end; }
.rm { background: none; border: 0; color: var(--fg-mute); cursor: pointer;
  font-family: var(--data); font-size: 0.63rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 2px 0; }
.rm:hover { color: var(--brick); }
.sum { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0;
  font-size: 0.95rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.sum.save { color: var(--leaf-ink); }
.ink .sum.save { color: var(--brass-hi); }
.sum.total {
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; color: var(--fg);
  font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em;
}
.empty-state { text-align: center; padding: 56px 0; color: var(--fg-mute); }
.notice {
  border: 1px solid var(--brass); border-radius: var(--radius); padding: 16px 18px;
  background: color-mix(in srgb, var(--brass) 12%, transparent); font-size: 0.93rem;
  line-height: 1.55;
}
.notice b { font-family: var(--display); display: block; margin-bottom: 4px; }
.notice code { font-family: var(--data); font-size: 0.85em; background: rgb(36 30 28 / 0.1);
  padding: 0.1em 0.35em; border-radius: 2px; }
.ink .notice code { background: rgb(240 231 214 / 0.14); }

.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 39;
  background: var(--iron); color: var(--linen);
  padding: 11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  animation: up 0.22s ease backwards;
}
@keyframes up { from { transform: translateY(100%); } }
.stickybar .mono { color: rgb(240 231 214 / 0.72); }

/* ------------------------------------------------------------- footer */

.foot { background: var(--ink); color: var(--stone-dim); font-size: 0.9rem; }
.foot .wrap { padding-block: clamp(38px, 5vw, 60px); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 26px clamp(24px, 3vw, 44px);
  justify-content: space-between; align-items: flex-start; }
.foot-grid > div { min-width: 150px; }
.foot b { color: var(--stone); font-family: var(--display); font-weight: 800;
  font-size: 1.15rem; letter-spacing: 0.15em; display: block; margin-bottom: 8px; }
.foot .mono { margin-bottom: 8px; color: var(--stone-dim); }
.foot p { margin-bottom: 0; }
.foot a { color: var(--brass-hi); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* --------------------------------------------------------- motion off
   Entrances use `backwards` fill so the page is already in its finished state
   if animations never run. A reveal gated on a class a script adds is a blank
   page when the script fails. */

@media (prefers-reduced-motion: reduce) {
  .tapper, .tock, .board[data-state="wait"] .tap-face, .cell.used, .stickybar {
    animation-duration: 0.01ms;
  }
  .ping { display: none; }
  .btn, .disc, .cross a { transition: none; }
}