/* Rivalatch sheet: home (/), listing, privacy, terms, support, door board.
   Near-black backdrop, one warm-gold accent, glass plates with hairline edges.
   Design notes: vibegate-ship/docs/RIVALATCH_MOTION_NOTES.md. No fonts or CDNs fetched. */

:root {
  color-scheme: dark;
  --void: #08080a;
  --iron: #111114;
  --plate: #17181c;
  --plate-2: #1d1e23;
  --line: #2a2b31;
  --ink: #f1ece0;
  --ink-2: #cdc7b8;
  --mute: #9a9487;
  --faint: #67625a;
  --sheen: rgba(241, 236, 224, 0.08);
  --glass: rgba(18, 18, 22, 0.58);
  --glass-edge: rgba(241, 236, 224, 0.14);
  --glass-hi: rgba(241, 236, 224, 0.16);
  --gold: #e2c072;

  /* Door states. One hue each, kept quiet. Shape repeats the meaning. */
  --knock: #b4aea2;
  --lodged: #8fb898;
  --running: #8796a6;
  --pass: #e2c072;
  --fail: #d76d61;
  --recalled: #a698d2;
  --contested: #d39c5c;
  --tone: var(--knock);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;
  --ease-settle: cubic-bezier(0.2, 0.7, 0.1, 1);

  /* Glyph masks (16x16). Shape alone carries the state, so it reads in grayscale. */
  --g-knock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1.5 8h7.5M6.4 5.2 9.2 8l-2.8 2.8' fill='none' stroke='black' stroke-width='1.5'/><path d='M12.5 2v12' stroke='black' stroke-width='1.8'/></svg>");
  --g-lodged: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.75 14V2.75h8.5V14' fill='none' stroke='black' stroke-width='1.5'/><path d='M1.5 14.25h13' stroke='black' stroke-width='1.5'/><circle cx='9.9' cy='8.6' r='1.15' fill='black'/></svg>");
  --g-running: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='5.25' fill='none' stroke='black' stroke-width='1.5' stroke-dasharray='2.2 2.2'/><circle cx='8' cy='2.75' r='1.5' fill='black'/></svg>");
  --g-pass: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 1 15 8 8 15 1 8zM8 3.4 12.6 8 8 12.6 3.4 8zM8 5.6 10.4 8 8 10.4 5.6 8z' fill='black'/></svg>");
  --g-fail: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.75 2.75h10.5v10.5H2.75z' fill='none' stroke='black' stroke-width='1.5'/><path d='M5.6 5.6l4.8 4.8M10.4 5.6l-4.8 4.8' stroke='black' stroke-width='1.5'/></svg>");
  --g-recalled: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='5.9' cy='8' r='4' fill='none' stroke='black' stroke-width='1.4'/><circle cx='10.1' cy='8' r='4' fill='none' stroke='black' stroke-width='1.4'/></svg>");
  --g-contested: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1.25 3.25 7 8l-5.75 4.75zM14.75 3.25 9 8l5.75 4.75z' fill='black'/></svg>");
  --g-tick: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.4 6.4 11.6 13 4.6' fill='none' stroke='black' stroke-width='1.8'/></svg>");
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body { min-width: 320px; overflow-x: hidden; }

/* Backdrop: low warm light at the threshold. Static. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(820px 520px at 8% -12%, rgba(226, 192, 114, 0.075), transparent 60%),
    radial-gradient(760px 560px at 108% 92%, rgba(143, 184, 152, 0.045), transparent 55%),
    radial-gradient(600px 400px at 50% 120%, rgba(166, 152, 210, 0.04), transparent 60%),
    linear-gradient(180deg, #0b0b0e, var(--void) 40%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(0deg, rgba(241, 236, 224, 0.012) 0 1px, transparent 1px 3px);
}
body > * { position: relative; z-index: 1; }

::selection { background: rgba(226, 192, 114, 0.3); color: var(--ink); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
a { color: var(--ink); text-decoration-color: rgba(226, 192, 114, 0.5); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
code, .mono { font-family: var(--mono); font-size: 0.86em; color: var(--ink-2); }
code {
  background: rgba(241, 236, 224, 0.05);
  border: 1px solid rgba(241, 236, 224, 0.07);
  padding: 0.06em 0.36em;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
strong { color: var(--ink); font-weight: 600; }

.wrapx { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ── Operator-draft strip (role=status) ──────────────── */
.banner {
  padding: 9px 20px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute);
  border-bottom: 1px solid rgba(226, 192, 114, 0.16);
  background: linear-gradient(90deg, transparent, rgba(226, 192, 114, 0.06), transparent), rgba(10, 10, 12, 0.9);
}
.banner::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px 1px 0;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(226, 192, 114, 0.14);
}

/* ── Wordmark + top bar ──────────────────────────────── */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.wordmark svg { width: 18px; height: 22px; flex: none; color: var(--gold); }
.wordmark small {
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--mute);
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  border-bottom: 1px solid rgba(241, 236, 224, 0.07);
}
.top nav { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.top nav a, .chiplinks a {
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.top nav a:hover, .chiplinks a:hover { color: var(--ink); border-color: var(--glass-edge); }

/* ── Kicker, display, labels ─────────────────────────── */
.kicker {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker::before { content: ""; width: 24px; height: 1px; background: var(--gold); opacity: 0.7; flex: none; }
.label-sm {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ── Marks: glyph + word, one color per door state ───── */
.mark {
  --tone: var(--knock);
  --glyph: var(--g-knock);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tone);
  white-space: nowrap;
}
.mark::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
.mark.knock     { --tone: var(--knock);     --glyph: var(--g-knock); }
.mark.lodged    { --tone: var(--lodged);    --glyph: var(--g-lodged); }
.mark.running   { --tone: var(--running);   --glyph: var(--g-running); }
.mark.pass      { --tone: var(--pass);      --glyph: var(--g-pass); }
.mark.fail      { --tone: var(--fail);      --glyph: var(--g-fail); }
.mark.recalled  { --tone: var(--recalled);  --glyph: var(--g-recalled); }
.mark.contested { --tone: var(--contested); --glyph: var(--g-contested); }
.mark.running::before { animation: glyph-turn 2.4s linear infinite; }

/* ── Plates ──────────────────────────────────────────── */
.card {
  --tone: var(--knock);
  position: relative;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 16px 18px 16px 22px;
}
.card.knock     { --tone: var(--knock); }
.card.lodged    { --tone: var(--lodged); }
.card.running   { --tone: var(--running); }
.card.pass      { --tone: var(--pass); }
.card.fail      { --tone: var(--fail); }
.card.recalled  { --tone: var(--recalled); }
.card.contested { --tone: var(--contested); }
.card.plain     { --tone: var(--line); }
/* margin rule in the state color */
.card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--tone);
  border-radius: 3px 0 0 3px;
}
.card.plain::before { display: none; }
.card.running { border-style: dashed; }
.card.recalled { box-shadow: 5px 5px 0 -1px rgba(166, 152, 210, 0.16); }
.card.pass {
  border-color: rgba(226, 192, 114, 0.45);
  background: linear-gradient(180deg, rgba(226, 192, 114, 0.07), transparent 60%), var(--plate-2);
}
/* Seal pin: the receipt is sealed. Visual only. */
.card.pass > .mark::after,
.card.pass > .mrow > .mark::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pass);
  box-shadow: 0 0 0 3px rgba(226, 192, 114, 0.16), 0 0 10px rgba(226, 192, 114, 0.35);
}
/* 409: two pressures meet at the top edge. */
.press { display: none; }
.card.contested > .press {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  display: block;
  pointer-events: none;
}
.press::before, .press::after { content: ""; position: absolute; top: 0; height: 2px; width: 48%; }
.press::before { left: 0; background: linear-gradient(90deg, transparent, var(--contested)); transform-origin: left; }
.press::after { right: 0; background: linear-gradient(270deg, transparent, var(--contested)); transform-origin: right; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .glass {
    background-color: var(--glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    border-color: var(--glass-edge);
    box-shadow:
      inset 0 1px 0 var(--glass-hi),
      inset 0 0 0 1px rgba(241, 236, 224, 0.02),
      0 18px 40px -18px rgba(0, 0, 0, 0.7);
  }
  .card { background-image: linear-gradient(135deg, rgba(241, 236, 224, 0.07), rgba(241, 236, 224, 0.01) 40%, transparent 60%); }
  .card.pass {
    background-color: rgba(30, 27, 20, 0.62);
    background-image: linear-gradient(180deg, rgba(226, 192, 114, 0.1), transparent 60%);
    border-color: rgba(226, 192, 114, 0.42);
  }
  .card.running { border-color: rgba(135, 150, 166, 0.4); }
  .card.recalled {
    box-shadow:
      inset 0 1px 0 var(--glass-hi),
      5px 5px 0 -1px rgba(166, 152, 210, 0.16),
      0 18px 40px -18px rgba(0, 0, 0, 0.7);
  }
}
.glass { border: 1px solid var(--line); border-radius: 3px; background-color: rgba(17, 17, 20, 0.86); }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 3px;
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(241, 236, 224, 0.03);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.btn:hover { border-color: rgba(241, 236, 224, 0.5); color: var(--ink); }
.btn.primary {
  color: var(--gold);
  border-color: rgba(226, 192, 114, 0.5);
  background: linear-gradient(180deg, rgba(226, 192, 114, 0.12), rgba(226, 192, 114, 0.03));
}
.btn.primary:hover { border-color: var(--gold); color: var(--gold); }

/* ── Code plates ─────────────────────────────────────── */
pre.code {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font: 12px/1.65 var(--mono);
  color: var(--ink-2);
  background: rgba(8, 8, 10, 0.72);
  border: 1px solid rgba(241, 236, 224, 0.08);
  border-radius: 3px;
  tab-size: 2;
}
pre.code .c { color: var(--faint); }
pre.code .k { color: var(--gold); }
pre.code .s { color: #b9c9a8; }
pre.code .v { color: var(--recalled); }

/* ── Legal + support docs ────────────────────────────── */
body.doc .wrapx { max-width: 820px; }
.doc-head { padding: 44px 0 6px; }
.doc-head .crumbs {
  margin: 0 0 26px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.doc-head .crumbs a {
  color: var(--mute);
  text-decoration: none;
  padding: 6px 11px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  margin: 0 4px 6px 0;
  display: inline-block;
  transition: color 160ms ease, border-color 160ms ease;
}
.doc-head .crumbs a:hover { color: var(--gold); border-color: rgba(226, 192, 114, 0.5); }
body.doc h1 {
  font: 400 40px/1.1 var(--serif);
  letter-spacing: -0.012em;
  margin: 0 0 12px;
  text-wrap: balance;
}
body.doc .muted { color: var(--mute); font-size: 13px; }
body.doc .card { margin: 26px 0 64px; padding: 10px 34px 30px 38px; }
body.doc .card::before { background: linear-gradient(180deg, var(--gold), rgba(226, 192, 114, 0.15)); }
body.doc h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
body.doc h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(226, 192, 114, 0.25), transparent); }
body.doc .card p, body.doc .card li { color: var(--ink-2); }
body.doc .card p { margin: 0 0 12px; }
body.doc ul { margin: 6px 0 14px; padding: 0; list-style: none; }
body.doc li { position: relative; padding: 0 0 0 22px; margin: 8px 0; }
body.doc li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(226, 192, 114, 0.6);
  transform: rotate(45deg);
}
body.doc .card .muted { color: var(--mute); }
.foot {
  padding: 26px 0 40px;
  border-top: 1px solid rgba(241, 236, 224, 0.06);
  color: var(--mute);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.foot .chiplinks { display: flex; gap: 2px; flex-wrap: wrap; }
.foot .chiplinks a { font-size: 10px; padding: 6px 10px; }

/* ── Motion keyframes (transform + opacity only) ─────── */
@keyframes plate-settle {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes plate-remark {
  0% { transform: translate3d(3px, 0, 0); }
  45% { transform: translate3d(-1px, 0, 0); }
  100% { transform: none; }
}
@keyframes plate-seal {
  0% { transform: scale(1.014); }
  100% { transform: none; }
}
@keyframes glyph-turn { to { transform: rotate(360deg); } }
@keyframes press-l { 0%, 100% { transform: scaleX(0.92); } 50% { transform: scaleX(1.03); } }
@keyframes press-r { 0%, 100% { transform: scaleX(1.03); } 50% { transform: scaleX(0.92); } }

@media (max-width: 680px) {
  .wrapx { padding: 0 18px; }
  body.doc h1 { font-size: 30px; }
  body.doc .card { padding: 6px 20px 22px 24px; }
  .doc-head { padding-top: 30px; }
  /* Mobile: nav stays, as one swipeable row under the wordmark (no page overflow). */
  .top { flex-wrap: wrap; gap: 4px 18px; padding: 14px 0 8px; }
  .top nav {
    flex-wrap: nowrap; justify-content: flex-start; width: calc(100% + 36px); margin: 0 -18px;
    padding: 0 8px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent);
    mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent);
  }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { flex: none; padding: 8px 10px; font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   Hero, door stage (demo), and bands. Shared by /listing/ and / (home).
   Moved verbatim from the listing's inline <style>; order preserved.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 610px; gap: 48px;
  align-items: center; padding: 40px 0 56px;
}
h1.display {
  font: 400 56px/1.03 var(--serif); letter-spacing: -0.015em; margin: 0 0 20px; color: var(--ink);
  text-wrap: balance;
}
h1.display em { font-style: italic; color: var(--ink-2); }
.lede { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 480px; margin: 0 0 26px; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.wire {
  max-width: 480px; margin: 0; padding: 13px 16px 13px 18px; font-size: 12.5px; line-height: 1.6; color: var(--mute);
}
.wire strong { color: var(--ink-2); font-weight: 500; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.facts li {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute);
  padding: 6px 11px; border: 1px solid var(--glass-edge); border-radius: 999px; background: rgba(241, 236, 224, 0.03);
}
.facts li b { color: var(--ink); font: 500 11px var(--mono); letter-spacing: 0.02em; text-transform: none; margin-left: 6px; }

/* ── Door stage (demo) ──────────────────────────────── */
.dstage {
  position: relative; height: 640px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(241, 236, 224, 0.08);
  background:
    radial-gradient(360px 300px at 16% 46%, rgba(226, 192, 114, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(20, 20, 24, 0.6), rgba(10, 10, 12, 0.6));
}
.projection {
  position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(260px 200px at 62% 30%, rgba(143, 184, 152, 0.10), transparent 70%),
    radial-gradient(240px 220px at 70% 78%, rgba(166, 152, 210, 0.08), transparent 70%),
    radial-gradient(300px 220px at 45% 55%, rgba(226, 192, 114, 0.09), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(-3%, -2%, 0); } to { transform: translate3d(3%, 2%, 0); } }
.dstage.is-paused *, .dstage.is-paused *::before, .dstage.is-paused *::after { animation-play-state: paused !important; }
.demo-tag {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute);
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 8, 10, 0.7);
}
.stage-title { position: absolute; top: 18px; left: 28px; z-index: 3; }

/* The door: frame, leaf, light through the gap, gold threshold. */
.door { --tone: var(--knock); position: absolute; left: 28px; top: 112px; width: 140px; height: 300px; z-index: 2; }
.door svg { display: block; width: 100%; height: 100%; overflow: visible; }
.door .light { fill: var(--tone); opacity: 0.0; transition: opacity 600ms ease, fill 600ms ease; }
.door .leaf { transform-box: fill-box; transform-origin: 0 50%; transition: transform 700ms var(--ease-settle); }
.door.is-ajar .light { opacity: 0.55; }
.door.is-ajar .leaf { transform: scaleX(0.88); }
.door .frame { stroke: rgba(241, 236, 224, 0.28); transition: stroke 600ms ease; }
.door.is-ajar .frame { stroke: color-mix(in srgb, var(--tone) 70%, transparent); }
.door.lodged { --tone: var(--lodged); } .door.running { --tone: var(--running); }
.door.pass { --tone: var(--pass); } .door.fail { --tone: var(--fail); }
.door.recalled { --tone: var(--recalled); } .door.contested { --tone: var(--contested); }
.rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.rings i {
  position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid var(--tone); opacity: 0; transform: scale(0.35);
}
.door.is-knocking .rings i { animation: knock-ring 1100ms var(--ease-settle) both; }
.door.is-knocking .rings i:nth-child(2) { animation-delay: 160ms; }
.door.is-knocking .rings i:nth-child(3) { animation-delay: 320ms; }
@keyframes knock-ring { 0% { opacity: 0.85; transform: scale(0.35); } 100% { opacity: 0; transform: scale(1.7); } }
.dlabel {
  position: absolute; left: 36px; width: 124px; top: 432px; z-index: 2; text-align: center;
  padding: 7px 4px 8px; border: 1px solid var(--line); border-radius: 3px; background: rgba(8, 8, 10, 0.88);
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); line-height: 1.6;
}
.dlabel b { display: block; font-weight: 500; letter-spacing: 0.06em; text-transform: none; font-size: 12px; color: var(--ink-2); transition: color 400ms ease; }
.dlabel b.lodged { color: var(--lodged); } .dlabel b.running { color: var(--running); }
.dlabel b.pass { color: var(--pass); } .dlabel b.recalled { color: var(--recalled); } .dlabel b.contested { color: var(--contested); }

/* Margin plates, tied back to the door by hairline leaders. */
.dmargin { position: absolute; left: 214px; right: 26px; top: 62px; z-index: 2; }
.slotwrap { position: relative; margin-bottom: 14px; }
.slot {
  position: absolute; inset: 0; display: flex; align-items: center; padding: 0 20px;
  border: 1px dashed rgba(241, 236, 224, 0.1); border-radius: 3px;
  color: var(--faint); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: opacity 400ms ease;
}
.dmargin .card { padding: 14px 16px 14px 20px; transition: opacity 600ms ease, transform 600ms var(--ease-settle); }
.dmargin .card::after {
  content: ""; position: absolute; top: 22px; right: 100%; width: 46px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tone)); opacity: 0.6;
}
.dmargin .card.is-off { opacity: 0; transform: translate3d(0, 8px, 0); }
.dmargin .card:not(.is-off) + .slot { opacity: 0; }
.dmargin .card.is-new { animation: plate-settle 620ms var(--ease-settle) both; }
.dmargin .card.is-remarked { animation: plate-remark 700ms var(--ease-settle) both; }
.dmargin .card.pass.is-new, .dmargin .card.pass.is-remarked { animation: plate-seal 900ms var(--ease-settle) both; }
.dmargin .card.contested > .press::before { animation: press-l 2.8s ease-in-out infinite; }
.dmargin .card.contested > .press::after { animation: press-r 2.8s ease-in-out infinite; }
.dmargin .card.dim { opacity: 0.45; }
#slot-k { height: 104px; } #slot-s { height: 146px; } #slot-r { height: 206px; }
#pk, #ps, #pr { min-height: inherit; }
.slotwrap > .card { height: 100%; }
.dmargin .mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
.dlabel-serif { font: 400 18px/1.3 var(--serif); color: var(--ink); margin: 8px 0 4px; overflow-wrap: anywhere; }
.dmeta { font: 11px/1.5 var(--mono); color: var(--mute); overflow-wrap: anywhere; }
.stamp {
  --tone: var(--lodged);
  font: 600 10px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  color: var(--tone); padding: 5px 8px 5px 9px; border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent);
  border-radius: 2px; background: color-mix(in srgb, var(--tone) 10%, transparent);
  opacity: 0;
}
.stamp b { font: 600 11px/1 var(--mono); letter-spacing: 0.04em; margin-left: 6px; }
.stamp.on { opacity: 1; }
.stamp.on.is-new { animation: stamp-in 420ms var(--ease-settle) both; }
.stamp.lodged { --tone: var(--lodged); } .stamp.recalled { --tone: var(--recalled); } .stamp.contested { --tone: var(--contested); }
@keyframes stamp-in { 0% { opacity: 0; transform: scale(1.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

.checks { list-style: none; margin: 8px 0 0; padding: 0; }
.checks li {
  display: flex; align-items: center; gap: 9px; height: 24px; font: 11.5px/1 var(--mono); color: var(--mute);
  border-top: 1px solid rgba(241, 236, 224, 0.05); opacity: 0.35; transition: opacity 300ms ease, color 300ms ease;
}
.checks li:first-child { border-top: 0; }
.checks li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checks li .tk { width: 12px; height: 12px; flex: none; border: 1px dashed rgba(241, 236, 224, 0.25); border-radius: 50%; }
.checks li.is-run { opacity: 1; color: var(--ink-2); }
.checks li.is-run .tk { border: 0; background: var(--running); -webkit-mask: var(--g-running) center / contain no-repeat; mask: var(--g-running) center / contain no-repeat; animation: glyph-turn 2.4s linear infinite; }
.checks li.is-ok { opacity: 1; color: var(--ink-2); }
.checks li.is-ok .tk { border: 0; background: var(--lodged); -webkit-mask: var(--g-tick) center / contain no-repeat; mask: var(--g-tick) center / contain no-repeat; animation: tick-in 360ms var(--ease-settle) both; }
.checks li .st { margin-left: auto; font-size: 10px; letter-spacing: 0.08em; color: var(--lodged); opacity: 0; }
.checks li.is-ok .st { opacity: 1; }
@keyframes tick-in { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.vs > div { padding: 8px 10px; border: 1px solid rgba(211, 156, 92, 0.25); border-radius: 3px; background: rgba(211, 156, 92, 0.05); }
.vs .label-sm { font-size: 9px; letter-spacing: 0.14em; white-space: nowrap; color: var(--contested); }
.vs .dmeta { margin-top: 4px; font-size: 10.5px; color: var(--ink-2); }
.vs .dmeta span { color: var(--mute); }
.rfields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; margin: 12px 0 0; }
.rfields div { min-width: 0; }
.rfields .wide { grid-column: span 2; }
.rfields dt { font: 10px/1.2 var(--mono); color: var(--faint); margin: 0 0 3px; }
.rfields dd { margin: 0; font: 12px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.rfields dd.gold { color: var(--pass); }
.rtag {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--recalled);
  padding: 3px 7px; border: 1px solid rgba(166, 152, 210, 0.4); border-radius: 999px; opacity: 0; transition: opacity 400ms ease;
}
.card.echoed { box-shadow: 5px 5px 0 -1px rgba(166, 152, 210, 0.22), 0 18px 40px -18px rgba(0, 0, 0, 0.7); }
.card.echoed .rtag { opacity: 1; }
.card.echoed > .mark::after, .card.echoed .mrow .mark::after { display: none; }
.dstep {
  position: absolute; left: 214px; right: 26px; bottom: 22px; z-index: 2;
  display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ink-2); min-height: 40px;
}
.dstep .dots { display: flex; gap: 6px; flex: none; }
.dstep .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background-color 300ms ease; }
.dstep .dots i.on { background: var(--gold); }
.dstep span { font: italic 14px/1.4 var(--serif); }

/* ── Bands ──────────────────────────────────────────── */
section.band { padding: 72px 0; border-top: 1px solid rgba(241, 236, 224, 0.06); }
.band h2.title { font: 400 32px/1.15 var(--serif); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px; }
.band .sub { color: var(--mute); margin: 0 0 32px; max-width: 640px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rule { padding: 20px 22px; }
.rule h3 { margin: 0 0 8px; font: 400 19px/1.25 var(--serif); color: var(--ink); }
.rule p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.tool { padding: 16px 18px; }
.tool .name { font: 500 15px var(--mono); color: var(--gold); }
.tool .http { margin-top: 6px; font: 12px var(--mono); color: var(--ink-2); }
.tool p { margin: 8px 0 0; font-size: 12.5px; color: var(--mute); }
.pane { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pane-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pane-h h3 { margin: 0; font: 400 19px/1.2 var(--serif); }
.pane p.note { margin: 0; font-size: 12.5px; color: var(--mute); }
.anatomy { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.fields { list-style: none; margin: 0; padding: 0; }
.fields li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid rgba(241, 236, 224, 0.07); }
.fields li:first-child { border-top: 0; padding-top: 2px; }
.fields .f { font: 12.5px var(--mono); color: var(--gold); overflow-wrap: anywhere; }
.fields .d { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.fields .d code { font-size: 11.5px; }
.legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.legend .card { min-height: 150px; }
.legend .card .http { float: right; font: 500 12px var(--mono); color: var(--tone); }
.legend .card h3 { margin: 12px 0 6px; font: 400 19px/1.2 var(--serif); }
.legend .card p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.legend .card.contested > .press::before { animation: press-l 2.8s ease-in-out infinite; }
.legend .card.contested > .press::after { animation: press-r 2.8s ease-in-out infinite; }
.legend .tagfc { display: inline-block; margin-top: 10px; font: 11px var(--mono); color: var(--fail); padding: 2px 7px; border: 1px solid rgba(215, 109, 97, 0.35); border-radius: 3px; }
.q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.q .card { padding: 22px 24px 22px 28px; }
.q h3 { margin: 12px 0 8px; font: 400 22px/1.25 var(--serif); }
.q p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 10px 0 10px 40px; border-top: 1px solid rgba(241, 236, 224, 0.07); color: var(--ink-2); font-size: 13.5px; }
.steps li:first-child { border-top: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(226, 192, 114, 0.45); color: var(--gold); font: 500 11px/22px var(--mono); text-align: center;
}
.hostlist { list-style: none; margin: 10px 0 0; padding: 0; }
.hostlist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(241, 236, 224, 0.07); color: var(--ink-2); font-size: 13.5px; flex-wrap: wrap; }
.hostlist li:first-child { border-top: 0; }
.site-foot { padding: 28px 0 44px; border-top: 1px solid rgba(241, 236, 224, 0.06); color: var(--mute); font-size: 12px; line-height: 1.7; }
.site-foot .chiplinks { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 12px -10px; }

@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr; }
  .dstage { max-width: 610px; }
  .grid3, .tools, .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anatomy, .q { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  h1.display { font-size: 42px; }
  .hero { padding: 28px 0 40px; gap: 32px; }
  .dstage { height: 712px; }
  .stage-title { left: 14px; }
  .door { left: 12px; width: 60px; height: 128px; top: 150px; }
  .rings i { left: -30px; top: -30px; width: 60px; height: 60px; }
  .dlabel { left: 6px; width: 72px; top: 296px; font-size: 8px; letter-spacing: 0.14em; padding: 6px 2px; }
  .dlabel b { font-size: 10.5px; letter-spacing: 0.02em; }
  .dmargin, .dstep { left: 92px; right: 10px; }
  .dmargin .card::after { width: 16px; }
  .dmargin .card { padding: 12px 12px 12px 16px; }
  #slot-k { height: 116px; } #slot-s { height: 180px; } #slot-r { height: 222px; }
  .dmargin .mrow .label-sm { font-size: 9px; letter-spacing: 0.12em; white-space: nowrap; }
  .vs .dmeta { font-size: 10px; }
  .dlabel-serif { font-size: 16px; }
  .rfields { gap: 8px 10px; }
  .rfields dd { font-size: 11px; }
  .rfields dt { font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .checks li { font-size: 10.5px; gap: 7px; }
  .vs { grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
  .vs > div { padding: 6px 8px; }
  .stamp { padding: 4px 6px; letter-spacing: 0.14em; }
  .grid3, .grid2, .tools, .legend { grid-template-columns: 1fr; }
  .fields li { grid-template-columns: 1fr; gap: 4px; }
  section.band { padding: 52px 0; }
  .band h2.title { font-size: 27px; }
  pre.code { font-size: 11px; }
}

/* Hidden tab: every loop holds still (class set by rivalatch.js). */
html.is-tab-hidden *, html.is-tab-hidden *::before, html.is-tab-hidden *::after { animation-play-state: paused !important; }

/* Reduced motion: one settled frame. Nothing moves. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}