/* ==========================================================================
   TAKE AN COIN — Roblox experience landing + whitepaper preview
   Design system: toybox. Light studded ground (#e9edf7), chunky hard-edged 3D
   components, play-green brand accent. Tier colours stay a data encoding and
   must keep matching TIERS in app.js.
   ========================================================================== */

:root {
  /* surfaces — deep Roblox-UI navy, not concrete */
  --ink:        #10131c;
  --ink-2:      #151928;
  --surface:    #1b2033;
  --surface-2:  #232a42;
  --line:       #3a4463;
  --line-soft:  #262e46;

  /* text */
  --text:       #ffffff;
  --muted:      #a9b3cd;
  --muted-dim:  #77819e;

  /* brand — Roblox play-green */
  --acid:       #00e07a;
  --acid-dim:   #00b862;
  --concrete:   #8f9ab5;
  --concrete-d: #3f4864;

  /* Roblox secondary palette (badges, ribbons, accents) */
  --rb-yellow:  #ffc700;
  --rb-blue:    #29a8ff;
  --rb-red:     #ff3b30;
  --rb-purple:  #a855f7;

  /* tier data colours — kept in sync with the TIERS table in app.js */
  --t-uncracked: #8f9ab5;
  --t-dust:      #9aa6c2;
  --t-chip:      #00e07a;
  --t-stack:     #29a8ff;
  --t-vault:     #a855f7;
  --t-whale:     #ffc700;
  --t-genesis:   #ff3b30;

  --danger:     #ff3b30;

  /* type */
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --head:    "Baloo 2", "Anton", ui-rounded, system-ui, sans-serif;
  --body:    "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* geometry — chunky toy radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* the hard "toy 3D" edge: a solid drop plus lit top / shaded bottom */
  --pop:    0 6px 0 rgba(0,0,0,.42);
  --pop-in: inset 0 3px 0 rgba(255,255,255,.28), inset 0 -4px 0 rgba(0,0,0,.22);

  --pad: clamp(18px, 4vw, 64px);
  --maxw: 1280px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* concrete-ish substrate: fine grid + vignette, held far down */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: 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%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* .nav is deliberately NOT in this list: it is position:sticky (see the nav
   block below) and a blanket `position: relative` here silently unstuck it —
   which is exactly why the menu was only clickable at the top of the page. */
main, .footer { position: relative; z-index: 2; }

img, canvas { max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: .01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--acid); color: #0a0b0d; }

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

/* ---------------------------------------------------------------- atoms -- */

.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.mono-sm {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted-dim);
}

.muted-sm { font-size: 14px; color: var(--muted); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acid-dim);
  margin: 0 0 14px;
}

.footnote {
  margin-top: 22px;
  max-width: 78ch;
  line-height: 1.6;
}

/* buttons */
.btn {
  --bg: transparent;
  --fg: var(--text);
  --bd: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s var(--ease), background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--solid { --bg: var(--acid); --fg: #0a0b0d; --bd: var(--acid); }
.btn--solid:hover { --bg: #d2ff6b; --bd: #d2ff6b; }

.btn--outline { --bd: var(--line); --fg: var(--text); }
.btn--outline:hover { --bd: var(--acid); --fg: var(--acid); }

.btn--ghost { --bd: transparent; --fg: var(--muted); }
.btn--ghost:hover { --fg: var(--text); }

.btn--lg { min-height: 52px; padding: 0 24px; font-size: 13px; }
.btn--block { width: 100%; }

.btn--long { --bd: rgba(194,255,61,.45); --fg: var(--acid); }
.btn--long:hover { --bg: rgba(194,255,61,.1); }
.btn--short { --bd: rgba(255,77,94,.45); --fg: var(--danger); }
.btn--short:hover { --bg: rgba(255,77,94,.1); }

.input {
  min-height: 44px;
  width: 100%;
  padding: 0 14px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
}
.input::placeholder { color: var(--muted-dim); }
.input:focus { border-color: var(--acid); outline: none; }
.input--select { cursor: pointer; max-width: 260px; }

.status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--muted); }
.dot--idle { background: var(--concrete); }
.dot--live { background: var(--acid); animation: pulse 1.8s infinite; }
.dot--busy { background: var(--t-whale); animation: pulse .9s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.coin-mark {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: block;
  object-fit: contain;
}

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px var(--pad);
  background: rgba(10,11,13,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.nav.is-scrolled { border-bottom-color: var(--line); }

.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__wordmark {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .06em;
}

.nav__links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 14px;
  color: var(--muted);
}
.nav__links a { transition: color .16s var(--ease); }
.nav__links a:hover, .nav__links a.is-active { color: var(--acid); }

.nav__cta { display: flex; gap: 8px; margin-left: 12px; }

@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__cta .btn--ghost { display: none; }
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(48px, 7vw, 104px) var(--pad) clamp(40px, 5vw, 76px);
  max-width: var(--maxw);
  margin: 0 auto;
}

.hero__title {
  font-family: var(--display);
  font-size: clamp(58px, 10.5vw, 132px);
  line-height: .86;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.hero__title-accent {
  color: var(--acid);
  /* the markup carries a real space so the heading reads "TAKE AN COIN" to a
     screen reader; Anton's space is .2em, so the margin takes back most of the
     difference and the visual gap stays within a pixel of .14em */
  margin-left: -.05em;
}

.hero__lede {
  max-width: 56ch;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--muted);
}
.hero__lede strong { color: var(--text); font-weight: 600; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 34px; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  width: fit-content;
}
.hero__facts > div {
  padding: 12px 20px 12px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero__facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 2px; }
.hero__facts dd { margin: 0; font-family: var(--mono); font-size: 15px; color: var(--text); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- the coin -- */

.coin {
  --d: 96px;
  --c: var(--t-uncracked);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.30), transparent 46%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 88%, #000 12%), color-mix(in srgb, var(--c) 55%, #000 45%));
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--c) 45%, #000 55%),
    inset 0 0 0 8px color-mix(in srgb, var(--c) 22%, transparent),
    0 12px 30px rgba(0,0,0,.5);
  transition: width .3s var(--ease), height .3s var(--ease);
}
.coin::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--c) 55%, transparent);
}
.coin__mark {
  font-family: var(--display);
  font-size: calc(var(--d) * .42);
  line-height: 1;
  color: rgba(0,0,0,.55);
  mix-blend-mode: soft-light;
}

.coin[data-tier="uncracked"] { --c: var(--t-uncracked); }
.coin[data-tier="dust"]      { --c: var(--t-dust); }
.coin[data-tier="chip"]      { --c: var(--t-chip); }
.coin[data-tier="stack"]     { --c: var(--t-stack); }
.coin[data-tier="vault"]     { --c: var(--t-vault); }
.coin[data-tier="whale"]     { --c: var(--t-whale); }
.coin[data-tier="genesis"]   { --c: var(--t-genesis); }

.coin.is-cracking { animation: shake .16s linear infinite; }
@keyframes shake {
  0% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(-2px,1px) rotate(-2deg); }
  50% { transform: translate(1px,-1px) rotate(1.5deg); }
  75% { transform: translate(-1px,-2px) rotate(-1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.coin.is-revealing { animation: pop .5s var(--ease); }
@keyframes pop {
  0% { transform: scale(.6); filter: brightness(2.4); }
  60% { transform: scale(1.14); }
  100% { transform: scale(1); filter: brightness(1); }
}
.coin.is-settling { animation: popoff .4s var(--ease); }
@keyframes popoff { to { transform: scale(0); opacity: 0; } }

/* -------------------------------------------------------- crack station -- */

.machine {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 18px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
}

.machine__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.machine__stage {
  position: relative;
  height: 250px;
  display: grid;
  place-items: center;
  margin: 4px 0 12px;
  border-bottom: 1px dashed var(--line);
  overflow: hidden;
}
.machine__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 46%, rgba(194,255,61,.075), transparent 62%);
  pointer-events: none;
}
.machine__beam {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--acid), transparent);
  opacity: 0;
  top: 50%;
}
.machine.is-busy .machine__beam { opacity: .85; animation: scan 3.5s linear forwards; }
@keyframes scan { from { top: 8%; } to { top: 92%; } }

.machine__progress {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
.bar {
  flex: 1;
  height: 5px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(115deg, var(--acid) 0 6px, var(--acid-dim) 6px 12px);
  transition: width .1s linear;
}

.machine__result { min-height: 76px; padding: 4px 0 12px; }
.machine__note { text-align: center; margin-top: 10px; }

.result__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.result__ticker { font-family: var(--display); font-size: 28px; letter-spacing: .02em; }
.result__tier {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.result__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.result__curse { color: var(--t-whale); }
.result--mythic .result__ticker { color: var(--t-genesis); }

/* -------------------------------------------------------------- section -- */

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 130px) var(--pad);
}
.section--split { border-top: 1px solid var(--line-soft); }

.section__head { max-width: 76ch; margin-bottom: clamp(28px, 4vw, 52px); }
.section__title {
  font-family: var(--display);
  font-size: clamp(34px, 5.2vw, 68px);
  line-height: .96;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section__lede { max-width: 62ch; color: var(--muted); font-size: clamp(15px, 1.4vw, 17px); }

/* ----------------------------------------------------------------- loop -- */

.loop {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.loop__step {
  background: var(--ink);
  padding: clamp(20px, 3vw, 34px);
  display: grid;
  gap: 10px;
  grid-template-columns: 74px minmax(0, 1fr);
  grid-template-areas: "num title" "num body" "num meta";
  align-items: start;
  position: relative;
}
.loop__num {
  grid-area: num;
  font-family: var(--display);
  font-size: 44px;
  line-height: .9;
  color: var(--concrete-d);
}
.loop__step h3 { grid-area: title; font-family: var(--display); font-size: 26px; text-transform: uppercase; letter-spacing: .02em; }
.loop__step p { grid-area: body; margin: 0; color: var(--muted); max-width: 70ch; }
.loop__meta { grid-area: meta; color: var(--muted-dim); }
.loop__step--key { background: linear-gradient(90deg, rgba(194,255,61,.055), transparent 55%), var(--ink); }
.loop__step--key .loop__num { color: var(--acid); }
.loop__step--key::after {
  content: "the novel part";
  position: absolute;
  top: 14px; right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acid-dim);
}

@media (max-width: 620px) {
  .loop__step { grid-template-columns: 1fr; grid-template-areas: "num" "title" "body" "meta"; }
  .loop__step--key::after { position: static; grid-area: num; justify-self: end; }
}

.hazard {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.hazard__label {
  padding: 22px;
  background:
    repeating-linear-gradient(45deg, rgba(255,77,94,.14) 0 8px, transparent 8px 16px),
    var(--surface-2);
  border-right: 1px solid var(--line);
  color: var(--danger);
  display: flex;
  align-items: center;
}
.hazard__body { padding: 22px 24px 24px 0; }
.hazard__body h3 { font-family: var(--display); font-size: 22px; text-transform: uppercase; margin-bottom: 8px; }
.hazard__body p { color: var(--muted); max-width: 76ch; margin: 0; }
.hazard__body strong { color: var(--text); }

@media (max-width: 620px) {
  .hazard { grid-template-columns: 1fr; }
  .hazard__label { border-right: 0; border-bottom: 1px solid var(--line); }
  .hazard__body { padding: 20px 22px 24px; }
}

/* ------------------------------------------------------------ desk side -- */

.section--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; }
@media (max-width: 1000px) { .section--split { grid-template-columns: 1fr; } }

.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 22px; color: var(--muted); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 2px;
  background: var(--acid);
}
.ticks strong { color: var(--text); font-weight: 600; }

.speed-scale { margin-top: 30px; }
.speed-scale__row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.speed-scale__bar {
  height: 9px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.speed-scale__bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--acid);
  transition: width .35s var(--ease);
}

/* ------------------------------------------------------------- terminal -- */

.terminal {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-2);
  padding: 16px;
}
.terminal__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.terminal__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line-soft);
}
.terminal__stats > div { padding: 12px 4px; display: grid; gap: 3px; }
.terminal__stats > div + div { border-left: 1px solid var(--line-soft); padding-left: 14px; }
.terminal__stats strong { font-family: var(--mono); font-size: 19px; font-weight: 600; }
#tPnl.is-up { color: var(--acid); }
#tPnl.is-down { color: var(--danger); }

#chart { display: block; width: 100%; margin: 12px 0; background: var(--ink); border: 1px solid var(--line-soft); border-radius: var(--r-sm); }

.terminal__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lev { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.lev__btn {
  min-height: 44px; min-width: 52px;
  background: transparent; border: 0; border-right: 1px solid var(--line);
  color: var(--muted); font-family: var(--mono); font-size: 12px; cursor: pointer;
}
.lev__btn:last-child { border-right: 0; }
.lev__btn.is-on { background: var(--acid); color: #0a0b0d; font-weight: 700; }
.side { display: flex; gap: 6px; }

.log {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-height: 132px;
  overflow-y: auto;
  border-top: 1px solid var(--line-soft);
}
.log li { padding: 6px 2px; border-bottom: 1px solid var(--line-soft); display: flex; gap: 10px; }
.log li:last-child { border-bottom: 0; }
.log li.is-win { color: var(--acid); }
.log li.is-loss { color: var(--danger); }
.terminal__note { text-align: center; margin-top: 10px; }

/* --------------------------------------------------------------- roster -- */

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 14px;
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 18px;
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c, var(--acid)) 55%, var(--line)); }
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--c, var(--acid));
  opacity: .85;
}
.card--lead { grid-column: span 2; }
@media (max-width: 720px) { .card--lead { grid-column: span 1; } }

.card__top { display: flex; align-items: center; gap: 12px; }
.card__sigil {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 18px;
  color: #0a0b0d;
  background: var(--c, var(--acid));
}
.card__name { font-family: var(--display); font-size: 22px; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.card__role { font-family: var(--mono); font-size: 11px; color: var(--muted-dim); letter-spacing: .06em; }
.card__tag { color: var(--muted); font-size: 14.5px; margin: 0; }
.card__drop { display: grid; gap: 6px; }
.drop { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; }
.drop__dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; background: var(--t-uncracked); }
.drop__ticker { min-width: 76px; color: var(--text); }
.drop__tier { color: var(--muted); }
.drop__note { margin-left: auto; color: var(--muted-dim); }
.card__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 11px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.card__spawn { color: var(--acid); }
.card__curse { color: var(--t-whale); font-size: 12px; }

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

.ladder { display: grid; gap: 10px; }
.rung {
  display: grid;
  /* column 2 is fixed so every row lines up: 132px fits the longest single word
     (TREADMILL needs 121px at 24px Anton) and multi-word names wrap instead of
     growing the track */
  grid-template-columns: 150px 132px minmax(0, 1fr) 190px;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.rung__coin { display: grid; place-items: center; }
.rung__name { font-family: var(--display); font-size: 24px; text-transform: uppercase; letter-spacing: .03em; min-width: 0; overflow-wrap: break-word; }
.rung__meta { font-family: var(--mono); font-size: 12px; color: var(--muted); display: grid; gap: 3px; }
.rung__meta b { color: var(--text); font-weight: 600; }
.rung__use { font-size: 14px; color: var(--muted); }
@media (max-width: 860px) {
  .rung { grid-template-columns: 86px minmax(0, 1fr); grid-template-areas: "coin name" "coin meta" "use use"; }
  .rung__coin { grid-area: coin; }
  .rung__name { grid-area: name; }
  .rung__meta { grid-area: meta; }
  .rung__use { grid-area: use; }
  .rung__coin .coin { --d: 62px !important; }
}

/* --------------------------------------------------------------- market -- */

.market { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: 18px; align-items: start; }
.market > * { min-width: 0; }
@media (max-width: 1040px) { .market { grid-template-columns: minmax(0, 1fr); } }

.market__main { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 16px; }
.market__tools { min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.market__tools .input[type="search"] { flex: 1 1 200px; min-width: 0; max-width: 280px; }

.chips { min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.chip:hover { color: var(--text); border-color: var(--muted-dim); }
.chip.is-on { color: #0a0b0d; background: var(--cc, var(--acid)); border-color: var(--cc, var(--acid)); font-weight: 700; }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc, var(--acid)); }
.chip.is-on .chip__dot { background: #0a0b0d; }

.market__tablewrap { overflow-x: auto; }
.market__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.market__table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-dim);
  padding: 8px 7px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
/* Eight columns have to live inside the ~735px main column of the coins grid.
   At 10px side padding the row content came to 791px, so the wrapper scrolled
   and the last header ("Rarity rank") sat clipped at the section edge. */
.market__table td { padding: 10px 7px; border-bottom: 1px solid var(--line-soft); }
.market__table tbody tr { transition: background .14s var(--ease); cursor: pointer; }
.market__table tbody tr:hover { background: var(--surface-2); }
.market__table tbody tr.is-selected { background: rgba(194,255,61,.06); }
.market__table .num { text-align: right; font-family: var(--mono); }
.mt__coin { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 13px; }
.mt__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; background: var(--c); }
.mt__tier { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 3px; padding: 2px 6px; }
.mt__flag { font-family: var(--mono); font-size: 10px; color: var(--t-whale); border: 1px solid rgba(255,198,46,.4); border-radius: 3px; padding: 1px 5px; margin-left: 6px; }
.mt__up { color: var(--acid); }
.mt__down { color: var(--danger); }
.mt__own { color: var(--muted); }

.market__side { display: grid; gap: 18px; }
.book, .vault { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 16px; }
.book__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.book__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.book__col span { display: block; margin-bottom: 6px; }
.book__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-family: var(--mono); font-size: 12px; }
.book__col li { display: flex; justify-content: space-between; padding: 3px 6px; border-radius: 2px; position: relative; overflow: hidden; }
.book__col li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 40%); opacity: .13; }
#bids li::before { background: var(--acid); }
#asks li::before { background: var(--danger); }
#bids li { color: var(--acid); }
#asks li { color: var(--danger); }
.book__col li em { font-style: normal; color: var(--muted); }
.book__spread { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; }

.vault__total { display: grid; gap: 2px; margin-bottom: 12px; }
.vault__total strong { font-family: var(--display); font-size: 40px; line-height: 1; }
.vault__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; max-height: 232px; overflow-y: auto; }
.vault__list li { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: 3px; }
.vault__list li em { font-style: normal; color: var(--muted-dim); }
.vault__list li b { margin-left: auto; color: var(--text); font-weight: 600; }
.vault__empty { border-style: dashed !important; }

/* ------------------------------------------------------------ whitepaper -- */

.paper { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(22px, 4vw, 60px); align-items: start; }

.paper__toc { position: sticky; top: 84px; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.paper__toc a {
  padding: 7px 0 7px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-dim);
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.paper__toc a:hover { color: var(--text); }
.paper__toc a.is-active { color: var(--acid); border-left-color: var(--acid); }

/* the sidebar TOC collapses into the section flow on narrow screens:
   on mobile the paper reads as one column and the eyebrow headers carry the order */
@media (max-width: 940px) {
  .paper { grid-template-columns: minmax(0, 1fr); }
  .paper__toc { display: none; }
}

.paper__body { max-width: 82ch; counter-reset: wp; }
.wp { padding: 0 0 44px; margin-bottom: 40px; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 96px; }
.wp:last-child { border-bottom: 0; margin-bottom: 0; }
.wp h3 { font-family: var(--display); font-size: 30px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 14px; display: flex; gap: 12px; align-items: baseline; }
.wp__num { font-size: 15px; color: var(--acid-dim); }
.wp p { color: #b9c2ce; }
.wp em { color: var(--text); font-style: italic; }
.wp strong { color: var(--text); font-weight: 600; }
.wp__list { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 9px; color: #b9c2ce; }
.wp__note {
  font-size: 14.5px;
  color: var(--muted) !important;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  background: var(--ink-2);
}
.wp__tablewrap { overflow-x: auto; margin: 18px 0; }
.wp__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.wp__table th {
  text-align: left; padding: 9px 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-dim); border-bottom: 1px solid var(--line);
}
.wp__table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); color: #b9c2ce; }
.wp__table .num { text-align: right; font-family: var(--mono); }
.wp__table tbody tr:hover { background: var(--surface); }

.wp__roadmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 10px; margin-top: 8px; }
.phase { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; background: var(--surface); }
.phase h4 { font-family: var(--display); font-size: 19px; text-transform: uppercase; margin: 6px 0 6px; }
.phase p { font-size: 14px; color: var(--muted); margin: 0; }
.phase.is-done { border-color: rgba(194,255,61,.4); }
.phase.is-done .mono-sm { color: var(--acid); }
.phase.is-wip { border-color: rgba(255,198,46,.45); }
.phase.is-wip .mono-sm { color: var(--t-whale); }

/* ------------------------------------------------------------------ faq -- */

.faq { display: grid; gap: 8px; max-width: 88ch; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.faq details[open] { border-color: var(--muted-dim); }
.faq summary {
  padding: 16px 18px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--acid); font-size: 18px; }
.faq details[open] summary::after { content: "−"; }
.faq p { padding: 0 18px 18px; color: var(--muted); margin: 0; max-width: 76ch; }

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

.footer { border-top: 1px solid var(--line); background: var(--ink-2); padding: clamp(34px, 5vw, 56px) var(--pad) 40px; }
.footer__top { max-width: var(--maxw); margin: 0 auto 24px; display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; }
.footer__brand { display: grid; gap: 8px; }
.footer__brand .nav__wordmark { font-size: 20px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--muted); align-content: start; }
.footer__links a:hover { color: var(--acid); }
/* ------------------------------------------------------------ a11y / motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   ACT II — atmosphere, motion and the pitch
   Everything ambient here is CSS-only. No permanent requestAnimationFrame
   loop: a live rAF loop freezes Chrome's virtual clock and hangs the harness
   (see tools/chrome_run.sh). rAF is used only for one-shot, self-terminating
   work — count-ups and the crack burst.
   ========================================================================== */

/* ------------------------------------------------------- scroll progress -- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--acid-dim), var(--acid) 60%, #eaffb0);
  box-shadow: 0 0 14px rgba(194,255,61,.55);
  transform: scaleX(var(--sp, 0));
  transform-origin: left center;
}

/* --------------------------------------------------------- cursor light -- */

.spotlight {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease);
  background: radial-gradient(360px 360px at var(--mx, 50%) var(--my, 18%),
              rgba(194,255,61,.085), rgba(194,255,61,.03) 42%, transparent 70%);
}
body.has-pointer .spotlight { opacity: 1; }

/* ------------------------------------------------------------- hero aura -- */

/* .hero must be a positioned container, and .aura must stay out of flow:
   as an absolutely positioned child it is not a grid item, so it cannot
   displace .hero__copy / .hero__machine. */
.hero { position: relative; }
.aura {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero > .hero__copy,
.hero > .hero__machine { position: relative; z-index: 1; }

/* receding vault floor.
   Tuning note: rotateX(74deg) with perspective(400px) crushed a 612px plane
   down to a 68px sliver that sat below the fold, so the floor never rendered.
   A shallower tilt, a gentler perspective and a tall plane keep it on screen. */
.aura__floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150%;
  transform: perspective(760px) rotateX(66deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(to right, rgba(194,255,61,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(194,255,61,.22) 1px, transparent 1px);
  background-size: 84px 84px;
  animation: floorRun 4.2s linear infinite;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.45) 45%, transparent 88%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.45) 45%, transparent 88%);
}
@keyframes floorRun { from { background-position: 0 0; } to { background-position: 0 84px; } }

/* lime bloom behind the headline — two stacked radials so it reads as a light
   source with a hot core rather than a flat smudge */
.aura__bloom {
  position: absolute;
  inset: -30% 4% 20%;
  background:
    radial-gradient(15% 20% at 30% 40%, rgba(236,255,176,.22), transparent 72%),
    radial-gradient(52% 58% at 34% 46%, rgba(194,255,61,.13), transparent 74%);
  animation: bloomPulse 8s ease-in-out infinite;
}
@keyframes bloomPulse {
  0%, 100% { opacity: .65; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}

/* embers (populated once, by JS — no loop) */
.ember {
  position: absolute;
  bottom: -14px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 7px var(--acid);
  opacity: 0;
  animation: emberRise linear infinite;
}
@keyframes emberRise {
  0%   { transform: translateY(0) scale(1);      opacity: 0; }
  12%  { opacity: .85; }
  70%  { opacity: .5; }
  100% { transform: translateY(-78vh) scale(.25); opacity: 0; }
}

/* ambient light band drifting down the hero. Deliberately a soft WIDE gradient,
   not a 1px line — a hairline reads as a stray rule connecting nothing. */
.aura__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom,
    transparent, rgba(194,255,61,.05) 42%, rgba(194,255,61,.085) 50%,
    rgba(194,255,61,.05) 58%, transparent);
  animation: scanSweep 13s var(--ease) infinite;
}
@keyframes scanSweep {
  0%   { top: -24%; opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: .75; }
  100% { top: 100%; opacity: 0; }
}

/* ---------------------------------------------------------- reveal system -- */

[data-reveal] {
  transition: opacity .72s var(--ease) var(--d, 0s), transform .72s var(--ease) var(--d, 0s);
}
[data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(24px);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* a rule that draws itself in */
.divider {
  height: 1px;
  background: var(--line);
  margin: clamp(38px, 6vw, 72px) auto;
  max-width: var(--maxw);
  position: relative;
  overflow: hidden;
}
.divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--acid), transparent 62%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
}
.divider.is-in::after { transform: scaleX(1); }

/* ---------------------------------------------------------- hero upgrades -- */

.hero__title { position: relative; }
.hero__title-accent {
  background: linear-gradient(96deg, var(--acid) 8%, #eaffb0 42%, var(--acid-dim) 78%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: accentDrift 7s ease-in-out infinite;
  background-size: 220% 100%;
}
@keyframes accentDrift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* NOTE: a specular sweep across .hero__title was tried and removed — caught
   mid-animation it reads as a mis-registered lighter block sitting behind the
   left half of the headline, not as light. The animated accent gradient above
   carries the motion instead. */

.hero__facts dd { font-family: var(--display); }

/* the status pill gets a live pulse */
.dot--idle { animation: dotPulse 2.4s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { opacity: .45; box-shadow: 0 0 0 0 rgba(194,255,61,0); }
  50%      { opacity: 1;   box-shadow: 0 0 0 4px rgba(194,255,61,.10); }
}

/* --------------------------------------------------------- coin upgrades -- */

/* idle spin; the crack/reveal animations outrank it on specificity */
.coin--spin { animation: coinSpin 12s linear infinite; }
@keyframes coinSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

.coin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.40) 48%, rgba(255,255,255,.05) 57%, transparent 70%);
  background-size: 260% 100%;
  background-position: 170% 0;
  mix-blend-mode: screen;
  animation: coinShine 4.6s var(--ease) infinite;
}
@keyframes coinShine {
  0%        { background-position: 175% 0; }
  55%, 100% { background-position: -75% 0; }
}

.coin--aura { box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 46px color-mix(in srgb, var(--c) 34%, transparent); }

/* ------------------------------------------------------ crack station fx -- */

.machine__stage { position: relative; }
.machine.is-hit { animation: machineHit .42s var(--ease); }
@keyframes machineHit {
  0%, 100% { transform: translate(0, 0); }
  18% { transform: translate(-4px, 3px); }
  36% { transform: translate(4px, -3px); }
  54% { transform: translate(-3px, -2px); }
  72% { transform: translate(3px, 2px); }
}

.fx { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.fx--shock {
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid var(--acid);
  border-radius: 50%;
  animation: shockOut .95s var(--ease) forwards;
}
@keyframes shockOut {
  from { transform: scale(.35); opacity: .95; }
  to   { transform: scale(7);   opacity: 0; }
}
.fx--shock-2 { border-color: #fff; animation-delay: .12s; }

.fx--shard {
  width: 7px; height: 7px;
  background: var(--concrete);
  border-radius: 2px;
  animation: shardFly 1.05s cubic-bezier(.18,.72,.3,1) forwards;
}
@keyframes shardFly {
  from { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  to   { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 180deg)); opacity: 0; }
}

.fx--flash {
  inset: 0;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fc, var(--acid)) 60%, transparent), transparent 62%);
  animation: fxFlash .7s var(--ease) forwards;
}
@keyframes fxFlash { from { opacity: .85; } to { opacity: 0; } }

/* tier-coloured result card */
.machine__result.is-revealed { animation: resultIn .5s var(--ease); }
@keyframes resultIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- the pitch -- */

.pitch__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 26px;
}
.metric {
  background: var(--surface);
  padding: 22px 20px 20px;
  position: relative;
  display: grid;
  gap: 7px;
  align-content: start;
}
.metric::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--acid);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .55s var(--ease);
}
.metric:hover::before { transform: scaleY(1); }
.metric:hover { background: var(--surface-2); }
.metric__value {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: -.005em;
}
.metric__value em { font-style: normal; color: var(--acid); }
.metric__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.metric__note { font-size: 13px; color: var(--muted); line-height: 1.5; }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 16px;
  margin-top: 30px;
}
.pillar {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.pillar:hover { border-color: var(--muted-dim); transform: translateY(-3px); }

/* Body copy lengths differ per card, so the tag pill used to sit at a different
   height in every card. Pushing it to the bottom of the (equal-height) card
   puts all four pills on one baseline. Selector is deliberately two classes:
   the base .pillar__tag rule appears LATER in this file, so an equal-specificity
   margin-top here would simply lose to it. */
.pillar .pillar__tag { margin-top: auto; align-self: flex-start; }

/* The ghost numeral must read as a background ornament. Being position:absolute
   it painted in the positioned layer, ABOVE the static <h3>, and swallowed the
   middle of the title text. Lifting the heading into the positioned layer puts
   the numeral back behind the words where it belongs. */
.pillar h3 { position: relative; z-index: 1; }

.pillar__no {
  position: absolute;
  right: 12px;
  top: 4px;
  font-family: var(--display);
  font-size: 64px;
  line-height: 1;
  color: var(--surface-2);
  pointer-events: none;
}
.pillar h3 { font-family: var(--body); font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.pillar p { color: var(--muted); font-size: 14.5px; }
.pillar__tag {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--acid);
  border: 1px solid color-mix(in srgb, var(--acid) 34%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ------------------------------------------------- roster / ladder / market -- */

.card { transform-style: preserve-3d; transition: transform .35s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease); }
.card:hover { border-color: var(--muted-dim); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.card__sigil { animation: sigilFloat 6s ease-in-out infinite; }
@keyframes sigilFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}
body.has-pointer .card:hover .card__sigil { animation: sigilSpin 2.4s linear infinite; }
@keyframes sigilSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.rung { transition: transform .35s var(--ease), border-color .3s var(--ease); }
.rung:hover { transform: translateX(6px); border-color: var(--muted-dim); }

/* sparkline cell in the market table */
.spark { display: block; width: 68px; height: 18px; overflow: visible; }
.spark path { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

tr.is-fresh { animation: rowFresh 1.1s var(--ease); }
@keyframes rowFresh { from { background: color-mix(in srgb, var(--acid) 12%, transparent); } to { background: transparent; } }

/* live pill */
.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
}
.live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acid);
  animation: dotPulse 1.9s ease-in-out infinite;
}

/* section number watermark on the new section */
.section--pitch { position: relative; }

/* ==========================================================================
   ACT III — vault armature, dossier headers, live micro-motion.
   Every ambient motion here is CSS-driven on purpose: a permanent
   requestAnimationFrame loop freezes Chrome's virtual clock and hangs
   tools/selftest.html, so rAF may only ever be one-shot.
   ========================================================================== */

/* --------------------------------------------- vault armature (the stage) -- */

.machine__stage { height: 300px; }

/* fine machining grid behind the armature */
.machine__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.030) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 28%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 50%, #000 28%, transparent 76%);
  pointer-events: none;
}

/* scoped to the machine stage: an unscoped `.vault` here also matched the crack-log
   side panel (styled by `.book, .vault` further up), stripping it out of flow and
   making it unclickable. Same equal-specificity, later-wins trap as the nav one. */
.machine__stage .vault { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.vault__trace {
  position: absolute;
  top: 50%; left: 50%;
  width: 224px; height: 224px;
  margin: -112px 0 0 -112px;
  border: 1px dashed rgba(255,255,255,.075);
  border-radius: 50%;
}
.vault__trace--b {
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  border-style: dotted;
  border-color: rgba(194,255,61,.14);
}

/* One orb per tier. --r is the orbit radius, --d the diameter on the real dia
   scale (24/36/52/72/96/128) halved, since the stage renders the world small.
   Deterministic centring via top/left + negative margin, not grid static
   position, so the orbit origin is never ambiguous. */
.orb {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.8), var(--t) 55%, color-mix(in srgb, var(--t) 35%, #000) 100%);
  box-shadow: 0 0 9px color-mix(in srgb, var(--t) 50%, transparent);
  animation: orbit var(--dur) linear infinite;
  animation-delay: var(--ph);
}
@keyframes orbit {
  from { transform: rotate(0deg)   translateX(var(--r)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); }
}

/* the coin rides above the armature */
.machine__stage > .coin { position: relative; z-index: 2; }

/* The uncracked coin read as flat pale goo at hero scale: darker face,
   crisper rim, legible mark. */
.coin[data-tier="uncracked"] {
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.20), transparent 46%),
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--t-uncracked) 78%, #000 22%),
      color-mix(in srgb, var(--t-uncracked) 30%, #000 70%));
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.12),
    inset 0 -12px 24px rgba(0,0,0,.6),
    inset 0 10px 20px rgba(255,255,255,.07),
    0 16px 34px rgba(0,0,0,.6);
}
.coin[data-tier="uncracked"]::after { border-color: rgba(255,255,255,.18); }
.coin[data-tier="uncracked"] .coin__mark {
  color: rgba(255,255,255,.78);
  mix-blend-mode: normal;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

/* ---------------------------------------------------------------- tierkey -- */

.tierkey {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tierkey li { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-dim); }
.tierkey i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 7px color-mix(in srgb, var(--c) 60%, transparent);
}
.tierkey b { color: var(--muted); font-weight: 400; }

/* --------------------------------------------------------- dossier heads -- */

.section { position: relative; }
.section__head { position: relative; padding-left: 70px; }

.sec-no {
  position: absolute;
  left: 0;
  top: -8px;
  font-family: var(--display);
  font-size: 48px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.15);
  letter-spacing: .01em;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 760px) {
  .section__head { padding-left: 0; }
  .sec-no {
    position: static;
    display: block;
    font-size: 32px;
    margin-bottom: 6px;
    -webkit-text-stroke-color: rgba(255,255,255,.2);
  }
}

/* ---------------------------------------------------- live micro-motion -- */

/* magnetic buttons. --magx/--magy deliberately NOT --mx/--my: the card tilt
   already owns those names and custom properties are inherited, so a button
   inside a tilted card would otherwise drift with the card's pointer delta. */
body.has-pointer .btn {
  transition: transform .18s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease);
}
body.has-pointer .btn:hover { transform: translate3d(var(--magx, 0), var(--magy, 0), 0); }

/* tier chips pick up their own tier colour */
#mTiers .chip { transition: border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
#mTiers .chip:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent),
              0 0 20px color-mix(in srgb, currentColor 25%, transparent);
}

/* a light sweep crosses market rows on hover */
#mBody tr { position: relative; }
#mBody tr::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(194,255,61,.09), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
#mBody tr:hover::after { opacity: 1; }

/* ==========================================================================
   ROBLOX SKIN — outermost layer. Studded toybox surfaces, chunky hard-edged
   3D components, sticker badges. Applied last so it wins on equal specificity.
   ========================================================================== */

/* ---------------------------------------------------------------- studs -- */
/* The one texture that reads as Roblox from across the room. Fixed layer, so
   it sits under everything (main/nav/footer already carry z-index: 2). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 4.5px, transparent 5.5px);
  background-size: 34px 34px;
  opacity: .6;
}

/* ----------------------------------------------------------- typography -- */
h1, h2, h3, h4,
.hero__title,
.section__title,
.nav__wordmark,
.result__ticker,
.card__name,
.rung__name,
.pillar h3 {
  font-family: var(--head);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Roblox-style rounded hero wordmark. Sized down from the Anton setting: Baloo
   2 is far wider per glyph, so the old 132px would burst the copy column.
   The 52px floor is deliberate — tools/selftest.html asserts the headline
   renders above 48px, and a 46px floor failed that check at 390px. */
.hero__title {
  font-size: clamp(52px, 8.4vw, 108px);
  line-height: .9;
  text-shadow: 0 5px 0 rgba(0,0,0,.34);
}

.eyebrow {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 8px;
  background: rgba(0,224,122,.13);
  border: 1px solid rgba(0,224,122,.34);
  color: var(--acid);
}

.section__lede {
  max-width: 70ch;
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------------------------------------------------------------- buttons -- */
.btn {
  border: 3px solid rgba(0,0,0,.32);
  border-radius: var(--r-md);
  box-shadow: var(--pop), var(--pop-in);
  font-family: var(--head);
  font-weight: 800;
  letter-spacing: .01em;
}
.btn--solid {
  background: linear-gradient(180deg, #3cf39c, var(--acid-dim));
  color: #06210f;
}
.btn--ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.032));
  color: var(--text);
}
body.has-pointer .btn:hover { filter: brightness(1.07); }

/* placed after the hover rule on purpose: :hover and :active have identical
   specificity here, so source order decides which one wins on a press. */
body.has-pointer .btn:active,
.btn:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 rgba(0,0,0,.42), var(--pop-in);
}

/* ------------------------------------------------------------- surfaces -- */
.card, .rung, .pillar, .proof__card, .loopmap li {
  border: 3px solid rgba(0,0,0,.30);
  border-radius: var(--r-lg);
  background-image: linear-gradient(180deg, rgba(255,255,255,.065), transparent 46%);
  box-shadow: var(--pop);
}
.rung, .loopmap li { border-radius: var(--r-md); }
.pillar, .proof__card, .loopmap li { border-radius: var(--r-md); }
.machine, .panel { border-radius: var(--r-lg); }
.machine__stage { border-radius: var(--r-md); }

/* the coin gets a fat dark rim — the single cheapest way to make it read toy */
.coin {
  border: 4px solid rgba(0,0,0,.34);
  box-shadow:
    0 9px 0 rgba(0,0,0,.34),
    inset 0 5px 0 rgba(255,255,255,.22),
    inset 0 -7px 0 rgba(0,0,0,.24);
}

/* ---------------------------------------------------------- trending badge -- */
.rb-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 6px 15px 6px 6px;
  border: 3px solid rgba(0,0,0,.30);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffdf63, var(--rb-yellow));
  box-shadow: 0 5px 0 rgba(0,0,0,.34), inset 0 3px 0 rgba(255,255,255,.5);
  color: #241c00;
  transform: rotate(-1.8deg);
}
.rb-badge__rank {
  font-family: var(--head);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--rb-red);
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.24);
}
.rb-badge__text {
  display: flex;
  flex-direction: column;
  font-family: var(--head);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.15;
  text-transform: uppercase;
}
.rb-badge__text em {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .06em;
  opacity: .72;
}

/* ------------------------------------------------------------- why now ---- */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px;
  margin: 6px 0 34px;
}
.proof__card { display: flex; flex-direction: column; padding: 22px 20px; }
.proof__num {
  font-family: var(--display);
  font-size: 52px;
  line-height: .95;
  color: var(--rb-yellow);
  text-shadow: 3px 3px 0 rgba(0,0,0,.34);
}
.proof__label {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acid);
}
.proof__card p { margin: 9px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

.why__sub { font-size: 26px; margin: 34px 0 16px; }

.loopmap {
  counter-reset: lm;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 14px;
}
.loopmap li {
  counter-increment: lm;
  position: relative;
  padding: 16px 18px 16px 62px;
}
.loopmap li::before {
  content: counter(lm);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #3cf39c, var(--acid-dim));
  color: #06210f;
  font-family: var(--head);
  font-weight: 800;
  font-size: 17px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.22);
}
.loopmap b { display: block; font-family: var(--head); font-weight: 800; font-size: 16px; }
.loopmap span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.why__swap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 12px;
}
.why__swap > div {
  padding: 12px 16px;
  border: 3px dashed var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
}
.why__swap span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.why__swap b {
  display: block;
  margin-top: 2px;
  font-family: var(--head);
  font-weight: 800;
  font-size: 19px;
  color: var(--acid);
}
.why__credit {
  max-width: 78ch;
  margin: 26px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-dim);
}
.why__credit a { color: var(--rb-blue); }

/* ------------------------------------------------------------------- nav -- */
.nav {
  background: linear-gradient(180deg, rgba(21,25,40,.97), rgba(16,19,28,.92));
  border-bottom: 2px solid var(--line-soft);
}
.nav__links a { font-family: var(--head); font-weight: 700; }

/* ----------------------------------------------------------- live pill ---- */
.live {
  border-width: 2px;
  font-family: var(--head);
  font-weight: 700;
  letter-spacing: .08em;
}

/* ==========================================================================
   ROBLOX LIGHT — Roblox's own web UI is a light canvas with white cards, thick
   dark type and saturated colour blocks. The dark terminal palette read as a
   crypto exchange, so the canvas flips here. Token override first, then the
   handful of places that hardcoded dark-only values.
   ========================================================================== */

:root {
  --ink:        #e9edf7;
  --ink-2:      #dce2f1;
  --surface:    #ffffff;
  --surface-2:  #f3f6fd;
  --line:       #c9d3e9;
  --line-soft:  #e0e7f5;

  --text:       #141827;
  --muted:      #56607a;
  --muted-dim:  #5f6a85;

  /* Green as TEXT needs a deeper value than as a fill: #00b862 on white is
     2.6:1 and every ticker delta and loop label came out unreadable. Fills
     that need the bright green hardcode it locally instead. */
  --acid:       #00874a;
  --acid-dim:   #00693a;
  --concrete:   #6b7794;

  /* tier data colours, re-tuned for a white ground: the neon set only worked
     on black — #ffc700 on white is 1.5:1 and unreadable as a label. Darker
     values keep the tier distinct as a FILL and legible as TEXT. Sync with
     TIERS in app.js whenever these change. */
  --t-uncracked: #8b96ad;
  --t-dust:      #7b88a3;
  --t-chip:      #00a35a;
  --t-stack:     #1f8fe0;
  --t-vault:     #8a3ff0;
  --t-whale:     #c07f00;
  --t-genesis:   #e0261b;

  --pop:    0 6px 0 rgba(20,24,39,.15);
  --pop-in: inset 0 3px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(20,24,39,.09);
}

/* substrate: studs stay, the old dark grid and grain all but disappear */
body::after {
  background-image: radial-gradient(circle at 50% 50%, rgba(20,24,39,.055) 4.5px, transparent 5.5px);
  opacity: .8;
}
body::before { opacity: .22; }
.grain { opacity: .2; }

/* chrome */
.nav {
  background: #ffffff;
  border-bottom: 2px solid var(--line-soft);
  box-shadow: 0 2px 0 rgba(20,24,39,.04);
}
.footer { background: #ffffff; border-top: 2px solid var(--line-soft); }

/* decorations that were drawn in white and would vanish on a light ground */
.sec-no { -webkit-text-stroke: 1px rgba(20,24,39,.20); }
.pillar__no { color: rgba(20,24,39,.07); }
.proof__num { color: #d98a00; text-shadow: 2px 2px 0 rgba(20,24,39,.10); }

/* the hero aura was tuned against black and goes muddy on light */
.aura__bloom { opacity: .5; }
.aura__floor { opacity: .32; }
.aura__scan { opacity: .45; }
.spotlight { opacity: .3; }

/* surfaces */
.card, .rung, .pillar, .proof__card, .loopmap li,
.machine, .panel {
  border-color: rgba(20,24,39,.12);
  background-color: #ffffff;
}
.card, .rung, .pillar, .proof__card, .loopmap li {
  background-image: linear-gradient(180deg, rgba(255,255,255,.9), rgba(243,246,253,.6));
}
.machine__stage { background: #f3f6fd; }
.machine__stage::before { background-image: radial-gradient(circle at 50% 46%, rgba(0,184,98,.11), transparent 62%); }
.machine__stage::after { opacity: .5; }

/* buttons */
.btn--solid { background: linear-gradient(180deg, #2fd98a, var(--acid-dim)); color: #04240f; }
.btn--ghost {
  background: #ffffff;
  color: var(--text);
  border-color: rgba(20,24,39,.15);
}

/* the coin keeps its fat dark rim — it reads like an item icon on white */
.coin {
  box-shadow:
    0 9px 0 rgba(20,24,39,.16),
    inset 0 5px 0 rgba(255,255,255,.5),
    inset 0 -7px 0 rgba(0,0,0,.15);
}

.eyebrow {
  background: rgba(0,184,98,.12);
  border-color: rgba(0,184,98,.34);
  color: #00804a;
}

.why__swap > div { background: #ffffff; border-color: var(--line); }
.why__swap b { color: #00804a; }
.why__credit a { color: #1668c9; }

/* data surfaces */
thead th { background: var(--surface-2); }
#mBody tr:hover { background: var(--surface-2); }
#mBody tr:hover::after,
#mBody tr::after { background: linear-gradient(90deg, transparent, rgba(0,184,98,.10), transparent); }

/* The whitepaper prose hardcoded #b9c2ce, a light grey that only ever worked
   on the black canvas. On the light canvas 190 text nodes measured 1.54:1 —
   effectively invisible. These three rules were the entire cause. */
.wp p,
.wp__list,
.wp__table td { color: var(--muted); }
.wp__table tbody tr:hover { background: var(--surface-2); }

/* step numbers and the play button stay vividly green — they are fills, not
   text, so they keep the bright value the token no longer carries */
.loopmap li::before { background: linear-gradient(180deg, #3cf39c, #00a35a); }
.btn--solid { background: linear-gradient(180deg, #35e394, #00a35a); color: #04240f; }

/* last two measurable contrast stragglers: the amber numerals and the red
   Short button both sat just under 3:1 */
.proof__num { color: #a86a00; }
.btn--short { color: #b8241a; }

/* ============================ sticky navigation ============================ */
/* The nav must stay pinned and clickable at every scroll position. This rule
   is last in the file so nothing earlier can unstuck it again. */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
}
/* pinned nav would otherwise cover the heading an in-page anchor jumps to */
html { scroll-padding-top: 84px; }
.nav__links a { scroll-margin-top: 84px; }

/* ======================= ranked list rows in the side rail ================= */
/* #bids and #asks rows are name + value pairs ("Kitsune" + "Cherry Blossom").
   As plain flex items with no alignment they render touching and the value reads
   as part of the name. Label left, value right, same shape as .book__spread.
   Last in the file so no earlier layer can undo it. */
.book__col li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.book__col li em { margin-left: auto; text-align: right; }

/* ============================== preview player ============================= */
/* A click-to-load facade. The dark screen is deliberate: it reads as a player, and
   the play disc uses the bright green as a FILL (the text-safe green is far too
   dark to sit on a navy panel). The iframe only exists after a press. */
.hero__machine { display: grid; gap: 12px; align-content: start; }
.preview { margin: 0; }
.preview__facade {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 26px;
  border: 3px solid #0f1324;
  border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 34%, #3a4670 0%, #1d2444 58%, #121631 100%);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 10px 0 rgba(15, 19, 36, .3);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.preview__facade:hover { transform: translateY(-3px); box-shadow: 0 13px 0 rgba(15, 19, 36, .34); }
.preview__facade:active { transform: translateY(2px); box-shadow: 0 5px 0 rgba(15, 19, 36, .3); }
.preview__badge { position: absolute; top: 15px; left: 18px; color: #ffffff; opacity: .85; }
.preview__play {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #00e07a;
  box-shadow: var(--pop-in), 0 0 0 8px rgba(0, 224, 122, .18);
}
.preview__play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-38%, -50%);
  border-left: 24px solid #0f1324;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.preview__caption { display: grid; gap: 3px; text-align: center; }
.preview__caption b { font-family: var(--display); font-size: clamp(24px, 3.4vw, 36px); line-height: 1; letter-spacing: .02em; }
.preview__caption span { color: #cdd5ee; }
.preview__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 3px solid #0f1324;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 10px 0 rgba(15, 19, 36, .3);
}
.preview__frame iframe,
.preview__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0f1324;
  object-fit: cover;
}
.preview__note { color: var(--muted-dim); text-align: center; }