/* ═══════════════════════════════════════════════════════════════════
   INFINITY COIN

   The page is built on the same figure the mark is built on: two loops
   meeting at one crossing. The crossing holds whatever the token is
   right now; the queue comes round one loop and what it has been
   recedes down the other. Nothing on that figure moves unless the
   chain moved it, so the motion here is never decoration.

   Three rules kept throughout:
     · every accent stop is pre-solved for contrast against --ink-3,
       the LIGHTEST panel any accent text sits on. Solving against the
       darkest ground was a real shipped bug.
     · explicit rgba only, NEVER color-mix(var(--x), transparent):
       that pattern collapses to invisible ink if a var fails.
     · only transform and opacity are animated.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ink:       #0b0f0d;
  --ink-2:     #121816;
  --ink-3:     #1b2320;   /* the lightest panel. Nothing goes lighter. */
  --hair:      #2b3531;
  --hair-2:    #3b4642;

  --paper:       #ece8db;   /* 15.9:1 on --ink-3 */
  --paper-dim:   #c6c2b5;   /*  9.0:1 */
  --paper-low:   #acaca0;   /*  7.0:1 — drives every small mono label */
  --paper-faint: #98988d;   /*  5.5:1 — secondary only, never under 13px */

  /* IRIDESCENCE.
     Four stops, each solved independently against --ink-3. JS re-anchors
     all four on the hue of whatever coin the token is currently wearing,
     so the whole page answers to the chain, and it re-solves each stop
     for contrast before it applies it. */
  --irid-1: #23c2db;   /* cyan    7.50:1 */
  --irid-2: #c184eb;   /* violet  5.94:1 */
  --irid-3: #e872bd;   /* magenta 5.79:1 */
  --irid-4: #dbaa23;   /* gold    7.48:1 */
  --irid: linear-gradient(102deg, var(--irid-1) 0%, var(--irid-2) 34%, var(--irid-3) 64%, var(--irid-4) 100%);

  --accent:      #23c2db;
  --accent-ink:  #080c0a;
  --accent-glow: rgba(35, 194, 219, .10);
  --accent-line: rgba(35, 194, 219, .32);

  /* the ground mesh, re-anchored from the same solved stops */
  --mesh-1: rgba(35, 194, 219, .13);
  --mesh-2: rgba(193, 132, 235, .15);
  --mesh-3: rgba(232, 114, 189, .11);
  --mesh-4: rgba(219, 170, 35, .09);

  --ok:   #6ee7a8;   /* 10.4:1 */
  --warn: #f0b24a;   /*  8.5:1 */
  --bad:  #ff8a6b;   /*  7.0:1 */

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Archivo", ui-sans-serif, system-ui, "Helvetica Neue", sans-serif;
  --mono:  "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut:  clamp(1.15rem, 4vw, 3rem);
  --rule: 1px solid var(--hair);
  --node: clamp(38px, 5.4vw, 74px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; }

.wrap { width: min(1180px, 100% - calc(var(--gut) * 2)); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: .8em; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--accent-ink); padding: .7rem 1.1rem; font-weight: 700;
}
.skip:focus { left: .5rem; top: .5rem; }
:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--irid-1); outline-offset: 3px; }
::selection { background: var(--irid-3); color: #0b0f0d; }

/* ── the ground ─────────────────────────────────────────────────────
   A dark glazed surface with an oil-slick moving over it, a fine
   mosaic grid echoing the mark, and grain on top because near-black
   gradients band badly in 8-bit. */

body::before {
  content: "";
  position: fixed; inset: -20vh -10vw; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42vw 46vh at 16% 6%,  var(--mesh-1), transparent 64%),
    radial-gradient(48vw 44vh at 90% 22%, var(--mesh-2), transparent 66%),
    radial-gradient(44vw 48vh at 64% 94%, var(--mesh-3), transparent 68%),
    radial-gradient(54vw 44vh at 2% 76%,  var(--mesh-4), transparent 70%);
  animation: drift 52s ease-in-out infinite alternate;
  transition: opacity 1200ms ease;
}
@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
}

body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image:
    linear-gradient(0deg,  rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-size: 64px 64px, 64px 64px, 140px 140px;
}

/* ── iridescent ink + hairlines ─────────────────────────────────────── */

.irid-text {
  background-image: var(--irid);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sheen 14s ease-in-out infinite alternate;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .irid-text { color: var(--accent); -webkit-text-fill-color: var(--accent); }
}
@keyframes sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ── header ─────────────────────────────────────────────────────────── */

.bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 15, 13, .9);
  backdrop-filter: blur(10px);
}
.bar-rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--irid); background-size: 220% 100%; opacity: .5;
  animation: sheen 18s ease-in-out infinite alternate;
}
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 62px; }

.ident { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--paper); min-width: 0; }
.ident-chip {
  width: 26px; height: 26px; flex: none; border-radius: 3px; overflow: hidden;
  background: var(--ink-3); box-shadow: 0 0 0 1px var(--hair-2);
  transition: box-shadow 500ms ease;
}
.ident-chip img { width: 100%; height: 100%; object-fit: cover; }
.ident-t { font-weight: 700; letter-spacing: -.005em; font-size: .95rem; white-space: nowrap; }
.ident-k { font-family: var(--mono); font-weight: 700; font-size: .72rem; margin-left: .1rem; }

.bar-r { display: flex; align-items: center; gap: .45rem; }
.pulse { display: inline-flex; align-items: center; gap: .42rem; font-size: .7rem; color: var(--paper-low); white-space: nowrap; letter-spacing: .02em; }
.pulse-d { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-faint); flex: none; }
.pulse[data-state="live"] .pulse-d { background: var(--ok); animation: beat 2.6s ease-in-out infinite; }
.pulse[data-state="live"] .pulse-t { color: var(--paper-low); }
.pulse[data-state="pre"]  .pulse-d { background: var(--paper-faint); }
.pulse[data-state="stale"] .pulse-d { background: var(--warn); }
.pulse[data-state="stale"] .pulse-t { color: var(--warn); }
.pulse[data-state="down"]  .pulse-d { background: var(--bad); }
.pulse[data-state="down"]  .pulse-t { color: var(--bad); }
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.ca {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  background: var(--ink-2); border: var(--rule); color: var(--paper-dim);
  padding: .34rem .6rem; border-radius: 3px; font-size: .72rem;
}
.ca-l { color: var(--paper-low); letter-spacing: .08em; font-weight: 600; }
.lnk {
  color: var(--paper-dim); text-decoration: none; border: var(--rule); border-radius: 3px;
  padding: .36rem .78rem; font-size: .78rem; font-weight: 700;
}
.ca:hover, .lnk:hover { color: var(--paper); border-color: transparent; background:
  linear-gradient(var(--ink-2), var(--ink-2)) padding-box, var(--irid) border-box; }

/* ── hero ───────────────────────────────────────────────────────────── */

.hero { padding: clamp(2rem, 5vw, 3.6rem) 0 clamp(2rem, 4vw, 3rem); }
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(340px, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: end;
  grid-template-areas:
    "head  panel"
    "track track";
}
.hd    { grid-area: head; min-width: 0; }
.panel { grid-area: panel; }
.track { grid-area: track; }

.eyebrow {
  margin: 0 0 .5rem; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .18em; color: var(--paper-low); font-weight: 700;
}
.specimen {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.9rem, 1rem + 7.6vw, 6.6rem);
  line-height: .92; letter-spacing: -.022em; margin: 0;
  overflow-wrap: anywhere;
}
.specimen-in { display: inline; }
.specimen .ch { display: inline-block; white-space: pre; }
.specimen .ch.in { animation: chIn 520ms cubic-bezier(.2, .8, .25, 1) backwards; }
.specimen .ch.out { animation: chOut 320ms cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes chIn  { from { opacity: 0; transform: translate3d(0, .42em, 0) rotate(2deg); } }
@keyframes chOut { to   { opacity: 0; transform: translate3d(0, -.34em, 0) rotate(-2deg); } }

.subline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .7rem;
  margin: .95rem 0 0; color: var(--paper-low); font-size: .9rem;
}
.tick { font-family: var(--mono); font-weight: 700; font-size: 1rem; letter-spacing: .01em; }
.subline .sep { color: var(--paper-faint); font-size: .9rem; }
.subline .mono { color: var(--paper-low); }

.note { margin: 1.5rem 0 0; color: var(--paper-dim); font-size: .95rem; max-width: 52ch; }
.note em { color: var(--paper); font-style: italic; font-family: var(--serif); font-size: 1.14em; }

.cta { margin-top: 1.4rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ── the live box ───────────────────────────────────────────────────── */

.panel {
  border: var(--rule); border-radius: 3px; background: var(--ink-2);
  padding: 1rem 1.1rem 1.15rem; position: relative;
}
.panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: 4px; z-index: -1;
  background: var(--irid); background-size: 240% 100%; opacity: .34;
  animation: sheen 24s ease-in-out infinite alternate;
}
.panel-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: .7rem; border-bottom: var(--rule);
}
.panel-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--paper-low); font-weight: 700; }
.panel-r { font-size: .68rem; color: var(--paper-low); }

/* A thick coloured border on ONE side is the single most recognisable tell of an
   AI-built UI (impeccable flags it), and it reads as a framework component
   rather than as part of this page. A hairline box on all four sides plus the
   tinted ground says the same thing in this register. */
.alert {
  margin: .8rem 0 0; padding: .58rem .7rem; border-radius: 2px; font-size: .8rem;
  background: rgba(255, 138, 107, .09); border: 1px solid rgba(255, 138, 107, .34); color: var(--bad);
}
.alert[data-kind="warn"] { background: rgba(240, 178, 74, .09); border-color: rgba(240, 178, 74, .34); color: var(--warn); }
.alert[data-kind="note"] { background: rgba(172, 172, 160, .07); border-color: rgba(172, 172, 160, .26); color: var(--paper-low); }

.facts { margin: .2rem 0 0; padding: 0; }
.facts > div[hidden] { display: none; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .58rem 0; border-bottom: var(--rule); }
.facts dt { color: var(--paper-low); font-size: .78rem; flex: none; }
.facts dd { margin: 0; color: var(--paper-dim); text-align: right; overflow-wrap: anywhere; font-size: .9rem; font-weight: 500; }
.facts dd a { color: var(--paper-dim); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.facts dd a:hover { color: var(--paper); }
.facts dd.unsure { color: var(--warn); }

.nextbar { margin: 1.1rem 0 0; }
.nextbar-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .45rem; }
.nextbar-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--paper-low); font-weight: 700; }
.nextbar-p { font-size: .74rem; color: var(--paper-dim); }
.nextbar-track { height: 6px; background: var(--ink); border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); }
/* scaleX, not width: animating a layout property forces reflow every frame. */
.nextbar-track span {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center;
  background: var(--irid); background-size: 200% 100%;
  transition: transform 800ms cubic-bezier(.2, .7, .2, 1);
  animation: sheen 9s ease-in-out infinite alternate;
  will-change: transform;
}
.nextbar-t { margin: .6rem 0 0; font-size: .82rem; color: var(--paper-low); }
.nextbar-t .mono { color: var(--paper-dim); }
.nextbar-t b { color: var(--paper); font-weight: 600; }

.panel-f { margin: .85rem 0 0; font-size: .76rem; }
.panel-f a { color: var(--paper-low); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.panel-f a:hover { color: var(--paper); border-bottom-color: var(--accent-line); }

/* ── the figure ─────────────────────────────────────────────────────── */

.track {
  position: relative; width: min(100%, 940px); margin-inline: auto; aspect-ratio: 1000 / 440;
  margin-block: clamp(.5rem, 2vw, 1.4rem);
}
.thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.thread-b { fill: none; stroke: var(--hair-2); stroke-width: 1.1; }
.thread-c {
  fill: none; stroke: url(#ig); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 74 926; stroke-dashoffset: 0;
  animation: run 13s linear infinite;
}
@keyframes run { to { stroke-dashoffset: -1000; } }

.nodes { position: absolute; inset: 0; }
.nd {
  position: absolute; top: 0; left: 0;
  width: var(--node); height: var(--node);
  transform-origin: center center;
  transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 50%)) scale(var(--s, 1));
  transition: transform 900ms cubic-bezier(.22, .85, .2, 1), opacity 700ms ease, filter 900ms ease;
  will-change: transform;
}
/* Beads, not tiles: a round node reads as sitting ON the thread instead of
   interrupting it, and these are coins. */
.nd-f {
  display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--ink-3); box-shadow: 0 0 0 1px var(--hair-2);
}
.nd-f img { width: 100%; height: 100%; object-fit: cover; }
.nd-q { opacity: .78; filter: saturate(.32); }
.nd-a { opacity: .42; filter: saturate(.12); }
.nd-now { z-index: 3; }
.nd-now .nd-f {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 7px var(--ink), 0 18px 46px rgba(0, 0, 0, .55);
}
.nd-now::after {
  content: ""; position: absolute; inset: -34%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-glow), rgba(0, 0, 0, 0) 72%);
  transition: background 900ms ease;
}
.nd-empty .nd-f {
  background: repeating-linear-gradient(45deg, var(--ink-2) 0 5px, var(--ink) 5px 10px);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--hair);
}

/* The loops are not decoration and they are not empty: each one holds the
   half of the mechanism it stands for. */
.track-c {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 26%; text-align: center; display: grid; gap: .3rem;
}
.track-c-a { left: 31.4%; }
.track-c-b { left: 68.6%; }
.track-k {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--paper-low); font-weight: 700;
}
.track-v {
  font-family: var(--serif); font-size: clamp(1.05rem, .7rem + 1.1vw, 1.7rem);
  line-height: 1.1; color: var(--paper-dim); overflow-wrap: anywhere;
}

body.struck .nd-now .nd-f { animation: struck 2.2s ease-out; }
@keyframes struck {
  0%   { box-shadow: 0 0 0 1px var(--accent-line), 0 0 0 7px var(--ink), 0 0 0 7px var(--accent-line); }
  14%  { box-shadow: 0 0 0 1px var(--accent-line), 0 0 0 7px var(--ink), 0 0 0 26px var(--accent-glow); }
  100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 7px var(--ink), 0 18px 46px rgba(0, 0, 0, .55); }
}

/* ── the band that never stops ──────────────────────────────────────── */

.band {
  display: flex; align-items: center; gap: 1rem;
  border-block: var(--rule); background: var(--ink-2);
  padding-inline: var(--gut); height: 46px; overflow: hidden;
}
.band-k {
  flex: none; font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .18em; color: var(--paper-low); font-weight: 700;
  padding-right: 1rem; border-right: var(--rule); align-self: stretch;
  display: flex; align-items: center;
}
.band-w {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 5%, #000 92%, rgba(0,0,0,0));
  mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 5%, #000 92%, rgba(0,0,0,0));
}
.band-r {
  display: flex; align-items: center; gap: 1.6rem; width: max-content;
  animation: roll 72s linear infinite;
  will-change: transform;
}
.band-r i {
  font-family: var(--mono); font-style: normal; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper-low); white-space: nowrap;
}
.band-r i::after { content: "∞"; margin-left: 1.6rem; color: var(--paper-faint); letter-spacing: 0; }
@keyframes roll { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 620px) { .band-k { display: none; } }

/* ── burn it anywhere ───────────────────────────────────────────────── */

.anywhere { border-bottom: var(--rule); }
.anywhere-in {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(.9rem, 3vw, 2.4rem); align-items: center; padding: 1.5rem 0;
}
.anywhere-k {
  margin: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-ink); font-weight: 700;
  background: var(--irid); background-size: 200% 100%;
  padding: .42rem .7rem; border-radius: 2px; white-space: nowrap;
  animation: sheen 11s ease-in-out infinite alternate;
}
.anywhere-t { margin: 0; color: var(--paper-dim); font-size: .95rem; max-width: 76ch; }
.anywhere-t b { color: var(--paper); font-weight: 700; }
.anywhere-t .mono { color: var(--accent); }
.anywhere-a {
  white-space: nowrap; font-size: .8rem; font-weight: 700; color: var(--paper-dim);
  text-decoration: none; border: var(--rule); border-radius: 2px; padding: .5rem .85rem;
}
.anywhere-a:hover { color: var(--paper); border-color: transparent; background:
  linear-gradient(var(--ink-2), var(--ink-2)) padding-box, var(--irid) border-box; }

/* ── the register strip ─────────────────────────────────────────────── */

.strip { border-bottom: var(--rule); background: var(--ink-2); position: relative; }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 1.5rem .5rem; text-align: center; border-left: var(--rule); }
.stat:first-child { border-left: 0; }
.n {
  display: block; font-family: var(--serif); font-size: clamp(1.4rem, .9rem + 2vw, 2.6rem);
  line-height: 1; overflow-wrap: anywhere;
}
.l { display: block; margin-top: .5rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--paper-low); font-weight: 600; }

/* ── sections ───────────────────────────────────────────────────────── */

.sec { padding: clamp(3rem, 7vw, 5.5rem) 0; border-bottom: var(--rule); }
.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3.1rem);
  line-height: 1.04; letter-spacing: -.02em; margin: 0 0 1.6rem;
  display: flex; align-items: baseline; gap: .8rem;
}
.h2-n { font-family: var(--mono); font-weight: 700; font-size: .4em; letter-spacing: 0; }
.lede { color: var(--paper-dim); margin: -1rem 0 2rem; max-width: 58ch; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: var(--rule); }
.steps li { padding: 1.5rem 1.3rem 1.7rem; border-left: var(--rule); }
.steps li:first-child { border-left: 0; }
.s-n { font-family: var(--mono); font-size: .7rem; color: var(--accent); margin: 0 0 1.4rem; letter-spacing: .1em; }
.steps h3 { font-family: var(--serif); font-weight: 400; font-size: 1.44rem; margin: 0 0 .5rem; line-height: 1.1; }
.steps p:last-child { margin: 0; color: var(--paper-dim); font-size: .9rem; }
.steps b { color: var(--paper); font-weight: 700; }

.caveat { margin: 1.6rem 0 0; color: var(--paper-low); font-size: .86rem; max-width: 70ch; border-left: 2px solid var(--hair); padding-left: 1rem; }

/* ── the burn box ───────────────────────────────────────────────────── */

.form { border: var(--rule); background: var(--ink-2); padding: clamp(1.1rem, 3vw, 2rem); border-radius: 3px; position: relative; }
.form::before {
  content: ""; position: absolute; inset: -1px; border-radius: 4px; z-index: -1;
  background: var(--irid); background-size: 240% 100%; opacity: .3;
  animation: sheen 24s ease-in-out infinite alternate;
}
.row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; }
.fld { display: block; margin-bottom: 1.1rem; }
.fld-l { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--paper-low); margin-bottom: .5rem; font-weight: 600; }
.fld-l i { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--paper-faint); margin-left: .5rem; font-weight: 400; }
.fld input[type="text"] {
  width: 100%; background: var(--ink); border: var(--rule); border-radius: 2px; color: var(--paper);
  font-family: var(--mono); font-size: 1rem; padding: .8rem .9rem;
}
.fld input:focus { border-color: var(--accent); outline: none; }
.fld input::placeholder { color: var(--paper-faint); }

.willmove { margin: 0; padding: .8rem .9rem; border: var(--rule); border-radius: 2px; background: var(--ink); color: var(--paper-low); font-size: .9rem; }
.willmove-on { color: var(--accent); border-color: var(--accent-line); }

.act { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: .4rem; }
.btn {
  border: 0; border-radius: 2px; text-decoration: none;
  font-family: var(--sans); font-weight: 800; font-size: .9rem; letter-spacing: .02em;
  padding: .9rem 1.5rem; cursor: pointer; display: inline-block;
  transition: filter 140ms ease, transform 140ms ease;
}
.btn-a {
  background: var(--irid); background-size: 200% 100%; color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset;
  animation: sheen 12s ease-in-out infinite alternate;
}
.btn-b { background: transparent; color: var(--paper-dim); box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn-b:hover { color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-faint); }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { background: var(--ink-3); color: var(--paper-low); cursor: not-allowed; animation: none; box-shadow: none; filter: none; }
.act-n { margin: 0; font-size: .84rem; color: var(--paper-low); max-width: 46ch; }
.act-n.err { color: var(--bad); }
.act-n.ok  { color: var(--ok); }

.elsewhere { margin-top: 1.8rem; border-top: var(--rule); padding-top: 1.5rem; }
.elsewhere-h { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 0 0 .6rem; }
.elsewhere p { color: var(--paper-dim); font-size: .92rem; max-width: 66ch; }
.ways { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: var(--rule); }
.ways li { background: var(--ink); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.ways b { font-size: .88rem; font-weight: 700; }
.ways span { color: var(--paper-low); font-size: .82rem; }
.ways code { font-family: var(--mono); font-size: .92em; color: var(--paper-dim); }
.cli { background: var(--ink-2); border: var(--rule); border-radius: 2px; padding: .9rem 1rem; overflow-x: auto; }
.cli code { font-family: var(--mono); font-size: .76rem; color: var(--paper-dim); white-space: pre; }
.cli span { color: var(--accent); }

/* ── the queue ──────────────────────────────────────────────────────── */

.qgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--hair); border: var(--rule); }
.q { background: var(--ink); padding: .8rem .7rem 1rem; display: flex; flex-direction: column; gap: .45rem; min-width: 0; position: relative; isolation: isolate; }
.q::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--irid); opacity: 0; transition: opacity 260ms ease; }
.q-img { aspect-ratio: 1; background: var(--ink-3); border-radius: 2px; overflow: hidden; }
.q-img img { width: 100%; height: 100%; object-fit: cover; }
.q-n { font-family: var(--serif); font-size: 1.05rem; line-height: 1.1; overflow-wrap: anywhere; }
.q-s { color: var(--paper-low); font-size: .68rem; }
.q-b { font-size: .64rem; color: var(--paper-low); margin-top: auto; }
.q-next { background: var(--ink-3); box-shadow: inset 0 2px 0 var(--accent); }
.q-next::after { opacity: .06; }
.q-next .q-b { color: var(--accent); font-weight: 700; }

/* ── the register ───────────────────────────────────────────────────── */

/* Hairlines come from each cell, not from a backing plate: with auto-fill the
   last row is usually part empty, and a backing plate renders that gap as a
   grey slab. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px; background: var(--ink); border: var(--rule); }
.sk { background: var(--ink); box-shadow: 0 0 0 1px var(--hair); padding: .9rem; display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: inherit; position: relative; isolation: isolate; }
.sk::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--irid); opacity: 0; transition: opacity 260ms ease; }
.sk:hover::after { opacity: .07; }
.sk:hover { background: var(--ink-2); }
.sk-img { aspect-ratio: 1; background: var(--ink-3); border-radius: 2px; overflow: hidden; }
.sk-img img { width: 100%; height: 100%; object-fit: cover; }
.sk-no { font-family: var(--mono); font-size: .66rem; color: var(--paper-low); letter-spacing: .08em; }
.sk-n { font-family: var(--serif); font-size: 1.24rem; line-height: 1.05; overflow-wrap: anywhere; }
.sk-m { font-family: var(--mono); font-size: .68rem; color: var(--paper-low); display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; }
.sk-b { color: var(--accent); }

.sk-img.gone, .q-img.gone { background: repeating-linear-gradient(45deg, var(--ink-3) 0 6px, var(--ink-2) 6px 12px); }
.empty { padding: 2.5rem 1rem; text-align: center; color: var(--paper-low); grid-column: 1 / -1; background: var(--ink); }

/* ── who is burning ─────────────────────────────────────────────────── */

.board { list-style: none; margin: 0; padding: 0; border-top: var(--rule); max-width: 760px; }
.board li { display: flex; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: var(--rule); }
.board .r { font-family: var(--mono); font-size: .78rem; color: var(--accent); width: 2.4rem; flex: none; }
.board .w { font-family: var(--mono); font-size: .82rem; color: var(--paper-dim); overflow-wrap: anywhere; flex: 1; text-decoration: none; }
.board .w:hover { color: var(--paper); }
.board .c { font-size: .8rem; color: var(--paper-low); white-space: nowrap; }

/* ── footer ─────────────────────────────────────────────────────────── */

.foot { padding: 2.8rem 0 3.2rem; }
.foot-in { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.foot-m { width: 62px; height: 62px; flex: none; border-radius: 4px; }
.foot-c { flex: 1; min-width: 220px; }
.foot-c p { margin: 0; }
.foot-l { color: var(--paper-dim); font-size: .88rem; }
.foot-a { color: var(--paper-low); font-size: .74rem; margin-top: .25rem; overflow-wrap: anywhere; }
.foot-s { color: var(--paper-low); font-size: .78rem; margin-top: .25rem; }
.foot-x { color: var(--paper-dim); font-size: .82rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.foot-x:hover { color: var(--paper); }

/* ── states ─────────────────────────────────────────────────────────── */

/* PRE-LAUNCH. Every live number is blank by design and the form is inert.
   Nothing here may imply a price or a volume before the token exists. */
/* NOT with opacity. `opacity: .55` on the form measured --paper-low down to
   3.11:1 on the disabled button and 3.24:1 on its labels: an inert control is
   still a control people have to read. Signal it with the frame and the
   copy instead, and leave every colour on its solved value. */
body[data-prelaunch] .form::before { opacity: .1; }
body[data-prelaunch] .form { background: var(--ink); }
body[data-prelaunch] .fld input { pointer-events: none; border-style: dashed; }
body[data-prelaunch] .willmove { border-style: dashed; }
body[data-prelaunch] .nd-now .nd-f { box-shadow: 0 0 0 1px var(--hair-2), 0 18px 46px rgba(0, 0, 0, .5); }

/* NO READ AT ALL. A progress bar implies a burn total we do not have, so it
   is removed rather than shown at zero. */
body[data-noread] .nextbar { display: none; }

/* STALE. The last good read is kept on screen and marked, because a zero
   would be a lie and a spinner would hide one. */
/* Signal staleness with COLOUR, never with opacity. Opacity blends toward
   the ground: --paper-dim at 55% measured 3.99:1 on --ink-2, under the floor.
   --paper-low is a solved 7:1 and reads as "dimmed" just as clearly. */
body[data-stale] .facts dd,
body[data-stale] .facts dd a,
body[data-stale] .nextbar-t,
body[data-stale] .nextbar-t b,
body[data-stale] .nextbar-t .mono,
body[data-stale] .nextbar-p,
body[data-stale] .stat .n { color: var(--paper-low); }
body[data-stale] .nextbar-track span { filter: saturate(.12); }
/* images, not text: opacity here costs nothing legible */
body[data-stale] .nd { filter: grayscale(1) saturate(0); opacity: .55; }

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .hero-in {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "track" "panel";
    align-items: start;
  }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li:nth-child(3) { border-left: 0; }
  .steps li:nth-child(n+3) { border-top: var(--rule); }
  .qgrid { grid-template-columns: repeat(3, 1fr); }
  .anywhere-in { grid-template-columns: 1fr; gap: .85rem; }
  .anywhere-k, .anywhere-a { justify-self: start; }
  .ways { grid-template-columns: 1fr; }
}
/* No room inside a narrow loop for a caption, so below tablet the two halves
   of the mechanism drop underneath the figure as a two column strip. */
@media (max-width: 860px) {
  .track { aspect-ratio: 1000 / 460; margin-bottom: 4rem; overflow: visible; }
  .track-c {
    top: 100%; width: 47%; text-align: left; gap: .2rem;
    transform: translate(-50%, .7rem);
  }
  .track-c-a { left: 24%; }
  .track-c-b { left: 74%; }
  .track-v { font-size: 1.05rem; }
}

@media (max-width: 700px) {
  .strip-in { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: var(--rule); }
  .row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-left: 0; border-top: var(--rule); }
  .steps li:first-child { border-top: 0; }
  .qgrid { grid-template-columns: repeat(2, 1fr); }
  .ident-t { font-size: .86rem; }
  .pulse .pulse-t { display: none; }
  .foot-in { gap: 1rem; }
}
@media (max-width: 430px) {
  .ident-k { display: none; }
  .ca { padding: .3rem .45rem; }
  .cta .btn { flex: 1; text-align: center; }
}

/* ── reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body::before, .bar-rule, .irid-text, .thread-c, .band-r, .btn-a, .anywhere-k,
  .panel::before, .form::before, .nextbar-track span, .pulse-d { animation: none !important; }
  .band-r { transform: none; }
  .specimen .ch.in, .specimen .ch.out { animation: none !important; opacity: 1; }
  body.struck .nd-now .nd-f { animation: none !important; }
}