/* Dot-matrix terminal.
 *
 * Synthesised from the five references, led by Synra — the most complete of
 * them. What every one of them shares, and what this system keeps:
 *
 *   · a pure black canvas with one huge grainy aurora as the only image
 *   · a dot-matrix display face, used for the headline and nothing small
 *   · monospace chrome, uppercase and widely tracked
 *   · a hairline grid dividing the page into cells (Cortexa)
 *   · dithered, halftoned, pixelated imagery — never a photograph
 *   · pills for actions and the nav; square corners for everything else
 *   · a footer built as a table grid (Constellation) under a giant wordmark
 *
 * The four images are renders, generated for this palette. Colour is carried
 * by the imagery; the interface itself is black, white and hairline.
 */

:root {
  /* Canvas and surfaces. Depth is value shift plus a hairline, never a shadow. */
  --ink: #000000;
  --surface: #0a0a0c;
  --surface-2: #121216;
  --surface-3: #1a1a20;

  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);

  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.64);
  --text-3: rgba(255, 255, 255, 0.4);
  --text-4: rgba(255, 255, 255, 0.26);

  /* The rewards are NVDA and AMD, so the accents are theirs. Green carries the
     interface; red belongs to the AMD vault and appears nowhere else, which is
     what keeps the pair off the Christmas cliff. */
  --nv-deep: #2e6b00;
  --nv: #76b900;
  --nv-hi: #a8e000;
  --nv-pale: #dcffa8;
  --amd: #ed1c24;
  --amd-hi: #ff5a5f;
  --aurora: linear-gradient(90deg, var(--nv-deep) 0%, var(--nv) 50%, var(--nv-pale) 100%);
  --aurora-amd: linear-gradient(90deg, #6b0a0e 0%, var(--amd) 50%, #ffc9cb 100%);

  /* A warning is not the AMD vault, so it stays warm rather than red. */
  --danger: #ffa53d;

  /* One monospace carries both the display sizes and the chrome. */
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display: var(--mono);
  --sans: Inter, ui-sans-serif, system-ui, sans-serif;

  --page: 1280px;
  --gutter: 40px;
  --section-gap: 96px;
  --pad: 28px;

  --pill: 9999px;

  --dur: 180ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* How far content must start below the floating island. It wraps to two
     rows on a phone, so the clearance grows with it. */
  --bar-clear: 116px;
}

/* Picking the AMD vault repoints the accent tokens, and every accented thing
   on the page follows: the eyebrow squares, the power bar, the lit phrase in
   the headline, the focus ring. The renders are green, so they are rotated
   round the wheel rather than generated a second time — 277 degrees is the
   distance from NVIDIA's green to AMD's red. */
body[data-vault="amd"] {
  --nv-deep: #6b0a0e;
  --nv: #ed1c24;
  --nv-hi: #ff5a5f;
  --nv-pale: #ffc9cb;
  --aurora: var(--aurora-amd);
}
/* An explicit identity rotation rather than `filter: none`, so the swap has a
   value to interpolate from and the renders wash across rather than cut. */
.hero-art,
.glow-band,
.card-art,
.footer-logo,
.mark,
.footer-curtain::before {
  filter: hue-rotate(0deg);
  transition: filter 560ms var(--ease);
}
body[data-vault="amd"] .hero-art,
body[data-vault="amd"] .glow-band,
body[data-vault="amd"] .card-art,
body[data-vault="amd"] .footer-logo,
body[data-vault="amd"] .mark,
body[data-vault="amd"] .footer-curtain::before {
  filter: hue-rotate(277deg);
}

/* Reading the other vault takes a moment; the figures step back while it
   happens rather than sitting there wrong. Only the data regions dim — the
   island stays lit so the control you just used never flickers. */
.strip,
main,
.hero-tags,
.footer-mark {
  transition: opacity 260ms var(--ease);
}
body.is-swapping .strip,
body.is-swapping main,
body.is-swapping .hero-tags,
body.is-swapping .footer-mark {
  opacity: 0.32;
}
body.is-swapping .vault-picker button {
  cursor: progress;
}

/* The accents are repointed by the attribute above, so anything wearing one
   has to be able to move between them. */
.eyebrow::before,
.badge::before,
.nav a.is-on::before,
.codewin-bar i,
.vault-picker button::before,
.spark i,
.step-i {
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.caution {
  transition: border-color var(--dur) var(--ease);
}

/* Moving between pages is a document load, so without this the screen blanks
   and everything is rebuilt. A cross-document view transition cross-fades the
   content instead, and the two things that are identical on every page — the
   island and the page grid — are named so they are carried across rather than
   faded out and back in. */
@view-transition {
  navigation: auto;
}
.topbar {
  view-transition-name: topbar;
}
.grid-lines {
  view-transition-name: grid;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: var(--ease);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

html {
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text);
  font-weight: 400;
}

/* Everything that reacts, reacts over the same duration and curve. The list
   is explicit rather than `all`, so nothing animates a layout property by
   accident. */
a,
button,
input,
.card,
.plate,
.step,
.hero-card,
.hero-tags span,
.badge,
.toast,
.field-row,
.ledger tbody tr td,
.footer-social a,
.footer-col a,
.link {
  transition: color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    text-decoration-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    fill var(--dur) var(--ease),
    stroke var(--dur) var(--ease);
}

/* A body link keeps its underline slot at all times and fades the rule in.
   text-decoration cannot be transitioned, so switching it on at hover made
   the line pop; text-decoration-color can. */
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}
/* Chrome and controls carry their own affordance and never take the rule. */
.nav a,
.btn,
.footer-social a,
.footer-col a,
.hero-cta a,
.announce a {
  text-decoration: none;
}

/* Focus is visible on every control, and wears the accent. */
:focus-visible {
  outline: 2px solid var(--nv);
  outline-offset: 3px;
}

code,
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
code {
  font-size: 0.92em;
  color: var(--nv-pale);
}

.wrap {
  position: relative;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The page grid: four cells wide, drawn as hairlines that run the whole
   height behind everything. It is what gives the layout its rhythm.
   It carries the same gutter as .wrap, so its columns land exactly on the
   cell edges of the content — without the padding the two grids sit a full
   gutter apart and only meet in the middle of the page. */
.grid-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.grid-lines > div {
  width: 100%;
  max-width: var(--page);
  padding: 0 var(--gutter);
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.grid-lines > div > i {
  border-right: 1px solid var(--line);
}
.grid-lines > div > i:first-child {
  border-left: 1px solid var(--line);
}

/* ================================================================== chrome */

/* UGLYCASH's bar, measured on their site at 1440px: not a bar at all but a
   fixed island, centred, only as wide as its contents, floating 21px down the
   page over whatever is behind it.
 *
 *   island   507 x 62, radius 16, no border, no shadow
 *            rgba(219,215,215,0.5) over backdrop-filter: blur(20px)
 *   button   138 x 53, radius 12, tucked inside the right edge with a 5px
 *            inset, so it nearly fills the island's height
 *
 * The fill is inverted here because the page under it is black rather than
 * #f2f2f2; the geometry is theirs.
 */
.topbar {
  position: fixed;
  top: 21px;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}
.topbar .wrap {
  width: auto;
  max-width: 100%;
  padding: 0;
  min-width: 0;
}
.topbar-in {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 30px;
  height: 62px;
  padding: 0 5px 0 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Pixel art must not be smoothed on the way down, or it turns to mush. The
   file carries a wide transparent margin of its own, so the box is larger
   than the mark looks and is pulled back in with a negative margin. */
.mark {
  width: 52px;
  height: 52px;
  flex: none;
  margin: -6px 0 -6px -12px;
  image-rendering: pixelated;
}
.brand-name {
  flex: none;
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Everything that is a thing inside the island is a rounded rect: the badge,
   the button, and the current page. A loose square floating beside a bare
   word read as a stray mark; sitting inside a chip it reads as a state. */
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}
.nav a.is-on {
  color: var(--text);
  background: rgba(255, 255, 255, 0.11);
}
.nav a.is-on::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--nv);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Which payout asset you are looking at. One stake token, two vaults: the
   choice colours the whole interface, so the picker is the only place where
   both accents appear at once. */
.vault-picker {
  display: flex;
  gap: 3px;
  height: 52px;
  min-width: 165px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.vault-picker button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  /* background-color, never the shorthand: the mark lives in background-image
     and a shorthand here resets it on whichever button is hovered or on. */
  background-color: transparent;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
/* The button is the asset's own mark. It is a background image, so the
   ticker stays in the DOM, clipped, rather than being thrown away — a button
   with no text has no name to read out. */
.vault-picker button {
  width: 78px;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52px auto;
}
.vault-picker button[data-accent="nv"] {
  background-image: url("assets/nvidia-mark.svg");
}
.vault-picker button[data-accent="amd"] {
  background-image: url("assets/amd-mark.svg");
  background-size: 44px auto;
}
/* Dimmed until chosen, so the selected one reads at full strength. */
.vault-picker button {
  opacity: 0.42;
}
.vault-picker button:hover,
.vault-picker button.is-on {
  opacity: 1;
}
.vp-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.vault-picker button:hover {
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.05);
}
.vault-picker button.is-on {
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.11);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  min-width: 96px;
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--nv-hi);
}
.badge.is-wrong {
  color: var(--danger);
}
.badge.is-wrong::before {
  background: var(--danger);
}


/* ================================================================= buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.btn:hover:not(:disabled) {
  border-color: var(--text);
  text-decoration: none;
}
.btn:disabled {
  color: var(--text-4);
  border-color: var(--line);
  cursor: not-allowed;
}

/* Primary: a white pill, with the small square notch the references put on
   their lead action. It is the one thing on the page that is pure white. */
.btn-cta {
  background: var(--text);
  border-color: var(--text);
  color: var(--ink);
  font-weight: 500;
}
.btn-cta::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 4px;
  width: 5px;
  height: 5px;
  background: var(--text);
}
.btn-cta:hover:not(:disabled) {
  background: var(--nv-pale);
  border-color: var(--nv-pale);
  color: var(--ink);
}
.btn-cta:disabled {
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--text-4);
}
.btn-cta:disabled::after {
  display: none;
}

/* Tucked inside the island's right edge, as theirs is: 52 of the island's
   62px, square-ish corners rather than the pill the other buttons use, and
   filled. Theirs is a near-white fill on a light island; inverted here, the
   same contrast move is white on black. An outline at this size disappeared
   into the blur behind it. */
.btn-nav {
  height: 52px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--text);
  border-color: var(--text);
  color: var(--ink);
  font-weight: 500;
  font-size: 12.5px;
}
.btn-nav:hover:not(:disabled) {
  background: var(--nv-pale);
  border-color: var(--nv-pale);
  color: var(--ink);
}
.btn-nav:disabled {
  background: rgba(255, 255, 255, 0.12);
  border-color: transparent;
  color: var(--text-3);
}
.btn-nav::after {
  display: none;
}

.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}
.btn-row > * {
  width: 100%;
  min-width: 0;
}

.link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-family: var(--mono);
  color: var(--text);
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
}
.link:hover {
  border-bottom-color: var(--text);
}

/* ==================================================================== hero */

/* Cortexa's hero: the page grid stays visible, the render glows through it,
   and the content sits in the corners rather than stacked in the middle.
   Two full-bleed hairlines split it into a band for the card and a band for
   the headline. */
.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(260px, 1fr) auto;
  min-height: 640px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("assets/hero-dune.png") center 52% / cover no-repeat;
  opacity: 0.72;
}
/* The render sinks back a long way: it is atmosphere behind the type, not a
   picture the type sits on. Black at every edge, darkest bottom-left where
   the headline lands. */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      86% 74% at 26% 92%,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.62) 46%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(#000 0%, rgba(0, 0, 0, 0.2) 34%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 40%);
}

.hero-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bar-clear) 0 40px;
}

/* The floating frosted panel, centred on the render. */
.hero-card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--line-2);
  background: rgba(18, 18, 24, 0.44);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.hero-card-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.hero-card-line b {
  font-weight: 400;
  color: var(--text-4);
}
.hero-card-line span {
  flex: 1;
  min-width: 0;
}
.hero-card-line i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--text);
  color: var(--ink);
  font-style: normal;
  font-size: 12px;
}
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.hero-tags span {
  padding: 6px 12px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
}
.hero-tags b {
  font-weight: 400;
  color: var(--text);
}

/* Headline bottom-left, body copy bottom-right, on the hairline. */
.hero-bottom {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
}
.hero-bottom .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  padding-top: 44px;
  padding-bottom: 52px;
}
.hero-lead h1 {
  font-family: var(--mono);
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--text);
  text-wrap: balance;
}
/* The one coloured phrase, carrying the render's own gradient. */
.lit {
  background: var(--aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.hero-sub {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--text-2);
  text-wrap: pretty;
}


/* ============================================================== stat strip */

/* Synra's bottom-of-hero row: a pixel glyph, a dot-matrix number, a label. */
.strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.strip .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  padding: 34px 20px 30px;
  text-align: center;
  min-width: 0;
}
.strip .card:last-child {
  border-right: 0;
}
.cell-v {
  display: block;
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(16px, 1.9vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}
/* Values wrap at different lengths, so the labels are pinned to the bottom
   and stay on one line across the row. */
.strip .eyebrow {
  margin: auto 0 0;
  padding-top: 4px;
  color: var(--text-4);
  letter-spacing: 0.1em;
}
.strip .eyebrow::before {
  display: none;
}
/* The little pixel glyph above each figure. */
.pix {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: transparent;
}
.pix-a {
  box-shadow: 0 0 0 var(--text-3), 6px 0 0 var(--text-3), 3px 3px 0 var(--text-3),
    0 6px 0 var(--text-3), 6px 6px 0 var(--text-3), 3px 9px 0 var(--text-3),
    0 12px 0 var(--text-3), 6px 12px 0 var(--text-3);
}
.pix-b {
  box-shadow: 0 0 0 var(--text-3), 3px 3px 0 var(--text-3), 6px 6px 0 var(--text-3),
    9px 3px 0 var(--text-3), 12px 0 0 var(--text-3), 6px 12px 0 var(--text-3);
}
.pix-c {
  box-shadow: 3px 0 0 var(--text-3), 9px 0 0 var(--text-3), 0 3px 0 var(--text-3),
    12px 3px 0 var(--text-3), 0 9px 0 var(--text-3), 12px 9px 0 var(--text-3),
    3px 12px 0 var(--text-3), 9px 12px 0 var(--text-3), 6px 6px 0 var(--text-3);
}
.pix-d {
  box-shadow: 3px 0 0 var(--text-3), 9px 0 0 var(--text-3), 0 3px 0 var(--text-3),
    3px 3px 0 var(--text-3), 6px 3px 0 var(--text-3), 9px 3px 0 var(--text-3),
    12px 3px 0 var(--text-3), 3px 6px 0 var(--text-3), 9px 6px 0 var(--text-3),
    0 9px 0 var(--text-3), 3px 9px 0 var(--text-3), 6px 9px 0 var(--text-3),
    9px 9px 0 var(--text-3), 12px 9px 0 var(--text-3), 3px 12px 0 var(--text-3),
    9px 12px 0 var(--text-3);
}

/* The island floats, so it is out of flow. The overview opens at the very top
   and its render runs behind the island; the other pages open with a shorter
   band that carries the same render and the same clearance, so none of them
   starts cold on black. */
.page-band {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: calc(var(--bar-clear) + 16px) 0 64px;
  border-bottom: 1px solid var(--line);
}
.page-band-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("assets/hero-dune.png") center 44% / cover no-repeat;
  opacity: 0.5;
  filter: hue-rotate(0deg);
  transition: filter 560ms var(--ease);
}
body[data-vault="amd"] .page-band-art {
  filter: hue-rotate(277deg);
}
.page-band-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      78% 90% at 22% 60%,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.68) 52%,
      rgba(0, 0, 0, 0.18) 100%
    ),
    linear-gradient(#000 0%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0) 62%);
}
.page-band .wrap {
  position: relative;
  z-index: 1;
}
.page-band .head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* ================================================================== layout */

main {
  position: relative;
  z-index: 1;
}

.section {
  padding: var(--section-gap) 0;
  border-bottom: 1px solid var(--line);
}

/* Pushing the eyebrow into its own column put the heading flush against a
   hairline, which reads as a collision rather than as alignment. The head is
   stacked again and simply stops three columns in, so it ends near a rule
   without sitting on one. The rule under it is what does the organising. */
.head {
  max-width: calc(75% - 32px);
  margin-bottom: 44px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.head .lede {
  max-width: 60ch;
}
.head h1,
.head h2 {
  font-family: var(--mono);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}

/* Eyebrow: mono, uppercase, widely tracked, with a leading pixel square. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--nv);
}

.lede {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
}
.lede b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text);
}

.note {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-3);
}

.fineprint {
  margin: 28px 0 0;
  max-width: 720px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3);
}

.caution {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--nv-hi);
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
}

.label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.banner {
  margin: 20px 0 0;
  padding: 13px 16px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-2);
}

/* =================================================================== cells */

/* Everything that holds content is a square-cornered cell with a hairline.
   No rounded cards anywhere: pills are reserved for actions and the nav. */
.card,
.plate,
.step {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: var(--pad);
  min-width: 0;
}
.card h3,
.step h3 {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.card p,
.step p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
}

/* Cells sit edge to edge and share their hairlines, like a table. */
.tiles,
.timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.tiles > *,
.timeline > * {
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.tile-v {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}

.step-i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-2);
  color: var(--text-2);
}
.step-i svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}

/* Pixel art keeps its pixels: no smoothing on upscale. The cut-outs carry a
   real alpha channel, so they need no blend mode to sit on the cell. */
.card-art {
  display: block;
  width: 116px;
  height: 116px;
  margin: 0 0 4px;
  image-rendering: pixelated;
}

/* A full-bleed render band, used once mid-page as a breath. */
.glow-band {
  position: relative;
  height: 280px;
  border-bottom: 1px solid var(--line);
  background: url("assets/glow-band.png") center / cover no-repeat;
}
.glow-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0.85) 100%
  );
}
.glow-band p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 24px;
  max-width: 760px;
  font-family: var(--mono);
  font-size: clamp(15px, 2vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: center;
  text-wrap: balance;
}
.glow-band .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================= code window */

.codewin {
  border: 1px solid var(--line);
  background: var(--surface);
}
.codewin-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.codewin-bar i {
  width: 6px;
  height: 6px;
  background: var(--text-4);
}
.codewin-bar i:first-child {
  background: var(--nv-deep);
}
.codewin-bar i:nth-child(2) {
  background: var(--nv);
}
.codewin-bar i:nth-child(3) {
  background: var(--nv-hi);
}
.codewin-bar span {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.codewin-body {
  margin: 0;
  padding: 26px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
}
.codewin-body .k {
  color: var(--nv);
}
.codewin-body .c {
  color: var(--text-4);
}

/* The script emits bare dt/dd pairs, so the list itself is the grid. A
   column-gap here broke the row rule into two segments with a hole between
   them; the cells butt together and pad themselves instead. The split is the
   same one the footer table uses, so the addresses line up with it. */
.addresses {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  align-items: baseline;
  border-top: 1px solid var(--line);
}
.addresses dt,
.addresses dd {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.addresses dt {
  padding-right: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
/* The cells butt together so the row rule stays unbroken, but the value is
   padded off the vertical rule rather than starting on it. */
.addresses dd {
  margin: 0;
  padding-left: 24px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ================================================================== panels */

.plate h3 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.duo,
.sim {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  align-items: stretch;
}
.duo > .plate,
.sim > .plate {
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.gauge-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.gauge-v {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.gauge-foot {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}

/* The one place the aurora appears as a fill. */
.track {
  position: relative;
  height: 6px;
  margin-top: 18px;
  border: 1px solid var(--line-2);
  background: var(--ink);
  overflow: hidden;
}
.fill {
  height: 100%;
  width: 0;
  background: var(--aurora);
  transition: width 420ms var(--ease);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.metric {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px;
  min-width: 0;
}
.metric-k {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.metric-v {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ================================================================== inputs */

.field {
  display: block;
  margin-top: 28px;
}
.field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  background: var(--ink);
}
.field-row:focus-within {
  border-color: var(--text);
}
.field-row input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 17px;
  outline: none;
}
.field-row input::placeholder {
  color: var(--text-4);
}
.unit {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  white-space: nowrap;
}
.field-sub {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
}
.field-sub b {
  font-weight: 400;
  color: var(--text-2);
}

.claim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.claim-v {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.sync-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--line-2);
  background: var(--ink);
}
.sync-row p {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-2);
}

.foot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}
.foot .num {
  color: var(--text);
  font-size: 13px;
}

/* ================================================================== ledger */

.figure {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.figure-v {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.figure-k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.mid-v {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Deposit history as a bar field; the most recent one carries the aurora. */
.spark {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 76px;
  margin-top: 26px;
}
.spark i {
  flex: 1;
  min-width: 2px;
  background: var(--surface-3);
}
.spark i:last-child {
  background: var(--aurora);
}
.spark-empty {
  align-self: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-4);
}

.ledger-wrap {
  border: 1px solid var(--line);
  overflow: hidden;
}
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12.5px;
}
.ledger th {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.ledger td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.ledger tr:last-child td {
  border-bottom: 0;
}
.ledger tbody tr:hover td {
  background: var(--surface-2);
}
.ledger .c-amount {
  text-align: right;
  color: var(--text);
  white-space: nowrap;
}
.ledger .c-from,
.ledger .c-epoch {
  color: var(--text-4);
}
.ledger .c-link {
  text-align: right;
  white-space: nowrap;
}
.ledger-empty {
  text-align: center;
  padding: 34px 18px;
  color: var(--text-4);
}

/* =============================================================== simulator */

.slider {
  margin-top: 30px;
}
.slider:first-of-type {
  margin-top: 0;
}
.slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.slider-v {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
}
.slider-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-4);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--ink);
  border: 1px solid var(--line-2);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 18px;
  background: var(--text);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb {
  background: var(--nv);
}
input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: var(--text);
  cursor: pointer;
}

.result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-3);
}
.result .num {
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}
.result-lead {
  padding-top: 0;
}
.result-lead .num {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.02em;
}

/* ================================================================== footer */

footer {
  position: relative;
  z-index: 1;
}
/* The dithered curtain, then the wordmark beneath it. */
.footer-curtain {
  position: relative;
  height: 300px;
}
/* The render is dimmed on its own layer, so the social buttons sitting on top
   of it keep full contrast. */
.footer-curtain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/footer-curtain.png") center bottom / cover no-repeat;
  opacity: 0.66;
}
/* It has to dissolve into the page rather than stop on an edge: black at the
   top where it meets the section rule, and black again before the wordmark. */
.footer-curtain::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    #000 0%,
    rgba(0, 0, 0, 0.45) 22%,
    rgba(0, 0, 0, 0.3) 52%,
    rgba(0, 0, 0, 0.85) 86%,
    #000 100%
  );
}
.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.footer-social a:hover {
  border-color: var(--text);
  color: var(--text);
  text-decoration: none;
}
.footer-curtain .wrap {
  height: 100%;
}

.footer-mark {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  padding: 40px 0 32px;
  border-top: 1px solid var(--line);
}
.footer-lockup {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  min-width: 0;
}
/* A four-letter name can carry the footer the way the references do: the
   lockup runs to a third of the page rather than sitting in a corner. */
.footer-logo {
  width: clamp(56px, 9vw, 116px);
  height: clamp(56px, 9vw, 116px);
  flex: none;
  margin-left: clamp(-16px, -1.2vw, -10px);
  image-rendering: pixelated;
}
.footer-mark h2 {
  font-family: var(--display);
  font-size: clamp(44px, 9.4vw, 124px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--text);
  overflow-wrap: anywhere;
}
/* The footer is a bordered table, as Constellation's is: columns that each
   carry their own header cell and share their hairlines. */
.footer-table {
  display: grid;
  /* Four equal columns, so the table's own cell borders fall on the page
     grid's rules rather than near them. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.footer-h {
  width: 100%;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.footer-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 20px;
  min-width: 0;
  width: 100%;
}
.footer-col a,
.footer-col .dim {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.footer-col a:hover {
  color: var(--text);
}
.footer-about p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-3);
}

.footer-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 0 36px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-4);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(520px, calc(100vw - 32px));
  padding: 13px 20px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
}
.toast.is-error {
  border-color: var(--danger);
  color: var(--danger);
}

/* ============================================================== responsive */

@media (max-width: 1080px) {
  :root {
    --gutter: 24px;
    --section-gap: 72px;
    --pad: 22px;
  }
  .grid-lines > div {
    grid-template-columns: repeat(2, 1fr);
  }
  .tiles,
  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .duo,
  .sim {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    min-height: 560px;
  }
  .hero-bottom .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
}

/* The island runs out of room well before the rest of the page does: brand,
   four links, two marks, a badge and a button. It wraps here, a good 260px
   earlier than everything else, because below this the brand name was the
   thing that collapsed to nothing. */
@media (max-width: 1080px) {
  :root {
    --bar-clear: 242px;
  }
  .topbar {
    padding: 0 12px;
  }
  .topbar .wrap {
    width: 100%;
  }
  .topbar-in {
    height: auto;
    width: 100%;
    flex-wrap: wrap;
    gap: 14px;
    row-gap: 12px;
    padding: 10px 10px 14px 14px;
  }
  /* The nav takes its own scrollable row rather than disappearing — on the
     overview page it is the only route to the other pages. */
  .nav {
    order: 3;
    width: 100%;
    margin: 0;
    gap: 26px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav a.is-on::before {
    left: -10px;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .topbar-right {
    margin-left: auto;
  }
}

@media (max-width: 820px) {
  .strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .strip .card:nth-child(2n) {
    border-right: 0;
  }
  .strip .card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .claim,
  .sync-row,
  .footer-mark {
    flex-direction: column;
    align-items: stretch;
  }
  .footer-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .head {
    max-width: none;
  }
  .ledger .c-epoch,
  .ledger .c-from {
    display: none;
  }
  .footer-curtain {
    height: 220px;
  }
  .hero {
    min-height: 560px;
    grid-template-rows: minmax(180px, 1fr) auto;
  }
  /* Keeps the island's clearance: this rule used to flatten it to 28px and
     the wrapped island then sat on top of the hero panel. */
  .hero-top {
    padding: var(--bar-clear) 0 28px;
  }
}

@media (max-width: 560px) {
  .grid-lines {
    display: none;
  }
  /* The footer stacks here, so a right-aligned notice reads as a mistake. */
  .footer-tm {
    text-align: left;
  }
  .tiles,
  .timeline,
  .strip,
  .btn-row,
  .metrics {
    grid-template-columns: minmax(0, 1fr);
  }
  .strip .card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .addresses {
    grid-template-columns: minmax(0, 1fr);
  }
  .addresses dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .addresses dd {
    padding-top: 6px;
    text-align: left;
  }
  .hero {
    min-height: 480px;
  }
  .hero-bottom .wrap {
    padding-top: 32px;
    padding-bottom: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ======================================================= centred section */

/* AuthKit's section head: the eyebrow sits between two rules that fade out
   from it, the heading takes two lines, and the whole block is centred. Used
   where the page should change rhythm rather than keep marching left. */
.head-mid {
  max-width: none;
  margin-bottom: 56px;
  padding-bottom: 0;
  border-bottom: 0;
  text-align: center;
}
.head-mid .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
.head-mid .eyebrow::before,
.head-mid .eyebrow::after {
  content: "";
  width: 84px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--line-2) 100%);
}
.head-mid .eyebrow::after {
  transform: rotate(180deg);
}
/* Wide enough that a short heading stays on one line and a long one breaks
   into two, which is the rhythm the reference uses. */
.head-mid h2 {
  margin: 0 auto;
  max-width: 24ch;
  text-wrap: balance;
}
.head-mid .lede {
  margin: 18px auto 0;
  max-width: 54ch;
  font-size: 15px;
  color: var(--text-3);
}

/* ========================================================== closing cards */

.closing {
  position: relative;
  padding: var(--section-gap) 0 calc(var(--section-gap) + 8px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* The faint blueprint behind the closing pair, with a dot at each crossing —
   the same trick the reference uses to make a flat band feel built. */
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 118px 118px;
  mask-image: radial-gradient(70% 62% at 50% 46%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 62% at 50% 46%, #000 0%, transparent 100%);
}
.closing .wrap {
  position: relative;
  z-index: 1;
}

.closing-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.big-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 32px 36px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
  min-width: 0;
  transition: border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.big-card:hover {
  border-color: var(--line-2);
  background: var(--surface-2);
  text-decoration: none;
}
/* Four corner dots, inset — the reference's own marker for a card that is a
   destination rather than a panel. */
.big-card::before {
  --dot: 3px;
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  background-image:
    radial-gradient(var(--nv) 50%, transparent 50%),
    radial-gradient(var(--nv) 50%, transparent 50%),
    radial-gradient(var(--nv) 50%, transparent 50%),
    radial-gradient(var(--nv) 50%, transparent 50%);
  background-size: var(--dot) var(--dot);
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease);
}
.big-card:hover::before {
  opacity: 1;
}
.big-card img {
  width: 132px;
  height: 132px;
  margin-bottom: 16px;
  image-rendering: pixelated;
}
.big-card h3 {
  font-family: var(--mono);
  font-size: 21px;
  letter-spacing: -0.03em;
  color: var(--text);
}
.big-card p {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-3);
}

.closing-foot {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

@media (max-width: 820px) {
  .closing-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .head-mid .eyebrow::before,
  .head-mid .eyebrow::after {
    width: 36px;
  }
  .big-card img {
    width: 104px;
    height: 104px;
  }
}

/* ============================================================ the board */

/* The chip effect, drawn rather than rendered: traces, loose components and
   framed modules around a central package. It is inline SVG so it stays crisp
   at any width, and so the accent flip reaches into the drawing — a bitmap
   would have to be generated twice. */
.board {
  position: relative;
  margin-top: 8px;
}
.board-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Copper that has no current in it. */
.b-trace path {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.25;
  stroke-linecap: square;
}
.b-via circle {
  fill: var(--ink);
  stroke: var(--line-2);
  stroke-width: 1.25;
}
.b-smd rect {
  fill: var(--surface-3);
}

/* A module: a thin frame with a small device drawn inside it. */
.b-frame {
  fill: var(--surface);
  stroke: var(--line-2);
  stroke-width: 1.25;
}
.b-art path,
.b-art rect,
.b-art circle {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* The package at the centre, with its pins and a bevelled inner wall. */
.b-pin rect {
  fill: var(--line-2);
}
.b-chip-body {
  fill: var(--surface-2);
  stroke: var(--line-2);
  stroke-width: 1.25;
}
.b-chip-bevel {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1.25;
}
/* The die is our own mark, the same file the nav wears, so the package at the
   centre of the board carries the real logo rather than a redraw of it. */
.b-die-img {
  image-rendering: pixelated;
  filter: hue-rotate(0deg);
  transition: filter 560ms var(--ease);
}
body[data-vault="amd"] .b-die-img {
  filter: hue-rotate(277deg);
}

/* Pons is the launchpad the token trades behind, so the module wears their
   own mark. */
.b-logo {
  opacity: 0.92;
}

/* The two payout assets wear their issuer's wordmark, inlined so it can be
   coloured — the source files carry no fill and would land black on black as
   an <img>. Both keep their own brand colour and are deliberately left out of
   the vault accent flip: they identify the asset, so they must not change
   when the interface does.

   These are third-party trademarks, shown to name the asset each vault pays
   out in. This project is not affiliated with, endorsed by or connected to
   either company. */
.b-logo-nv path {
  fill: #76b900;
}
.b-logo-amd path {
  fill: #ffffff;
}

/* Labels are HTML so they keep the interface's own type and can be selected. */
.board-tag {
  position: absolute;
  transform: translate(-50%, 0);
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text-3);
  white-space: nowrap;
}
.board-tag-lit {
  border-color: var(--line-2);
  color: var(--text);
}

@media (max-width: 820px) {
  /* Six modules and their traces do not survive a phone. The drawing is a
     diagram of something the page already states in words, so it goes. */
  .board {
    display: none;
  }
}

/* Third-party marks appear on the board to name the asset each vault pays
   out in; this states plainly that naming them is not a claim of any tie. */
.footer-tm {
  max-width: 62ch;
  text-align: right;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

/* ============================================================== figures */

/* Two drawings that explain the ramp. They are built from the vault's own
   parameters by the script, so they describe this vault rather than the idea
   of one. */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.fig {
  margin: 0;
  min-width: 0;
  padding: var(--pad);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.fig-cap p {
  margin: 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-3);
}
.fig-cap b {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--text);
}
.fig-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 22px;
  overflow: visible;
}

.f-grid path,
.f-axis path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.f-axis path {
  stroke: var(--line-2);
}
.f-tick text,
.f-foot text {
  fill: var(--text-4);
  font-family: var(--mono);
  font-size: 13px;
  text-anchor: end;
}
.f-foot text {
  text-anchor: start;
}
.f-foot-end {
  text-anchor: end;
}

/* The climb itself. */
.f-line {
  fill: none;
  stroke: var(--nv);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.f-area {
  fill: var(--nv);
  opacity: 0.12;
  stroke: none;
}
.f-now-rule {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.f-now-dot {
  fill: var(--nv);
  stroke: var(--ink);
  stroke-width: 2.5;
}

/* The row of epochs. */
.f-epoch rect {
  fill: var(--surface-2);
  stroke: var(--line-2);
  stroke-width: 1.25;
}
.f-epoch rect.is-dead {
  fill: var(--surface-3);
  stroke: var(--text-4);
}
.f-epoch rect.is-live {
  fill: color-mix(in srgb, var(--nv) 12%, var(--surface-2));
  stroke: var(--nv);
}
.f-drop path {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.5;
  stroke-linecap: square;
}
.f-drop circle {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.5;
}
.f-epoch-lab text {
  fill: var(--text-3);
  font-family: var(--mono);
  font-size: 13px;
  text-anchor: middle;
}
.f-epoch-lab .is-dead-lab {
  fill: var(--text-4);
}
.f-epoch-lab .is-live-lab {
  fill: var(--nv);
}
.f-brace path {
  fill: none;
  stroke: var(--nv);
  stroke-width: 1.25;
  opacity: 0.5;
}

@media (max-width: 1080px) {
  .figures {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ========================================================= gauge and dial */

/* The bar alone said nothing before a wallet was connected. Marking the floor
   and both ends turns it into a scale you can read while it is still empty:
   this is the range your power moves through. */
.gauge {
  margin-top: 18px;
}
.gauge .track {
  margin-top: 0;
}
.gauge-floor {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: var(--text-3);
}
.gauge-scale {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}
.gauge-scale b {
  font-weight: 400;
  color: var(--text-3);
}

/* How far through the current epoch the chain is. It is the one thing on this
   page that moves on its own, so it is worth drawing. */
.cadence {
  display: flex;
  align-items: center;
  gap: 24px;
}
.cadence-text {
  min-width: 0;
}
.dial {
  position: relative;
  width: 132px;
  height: 132px;
  flex: none;
}
.dial svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.dial-bg {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 6;
}
.dial-fg {
  fill: none;
  stroke: var(--nv);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms linear, stroke var(--dur) var(--ease);
}
.dial-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  pointer-events: none;
}
.dial-v {
  font-family: var(--mono);
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.dial-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
}

@media (max-width: 560px) {
  .cadence {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}