/* INDX app — design system lifted from the INDX website (tokens, fonts, scale,
   component language), laid out as a working dapp: fixed sidebar, stat strips,
   featured cards, allocation bars and rich tables. */

@font-face {
  font-family: "Geist Mono";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url(/fonts/geist-mono-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Neue Machina";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url(/fonts/neue-machina-medium.woff2) format("woff2");
}

:root {
  /* Pure black, the same value the site uses.
     The page was #050507 with a full-viewport aura over it, which meant every
     surface sat on a lifted, tinted base and no edge could be crisp. Contrast
     is the whole effect: black page, near-black surfaces, and colour spent
     only where it means something. */
  --color-bg: #000;
  --color-base: #fff;
  --color-text: #f2f2f2;
  --color-primary: #f85c3a;

  /* neon family sampled from the site's own background art and aura gradients */
  --neon-magenta: #dc36c3;
  --neon-indigo: #5a66ee;
  --neon-violet: #9b5ae8;
  --neon-cyan: #20a0ff;
  /* The website's own brand gradients, verbatim. Used for the settlement
     clock, progress fills and every luminous edge -- the app and the site have
     to be the same nine stops or the two read as different products. */
  --gradient-primary: linear-gradient(
    244deg, #fff7a7 0%, #f48445 19.51%, #fff7a7 30.2%, #ff98ff 43.39%,
    #5a66ee 57.46%, #91bdff 64.75%, #91bdff 83.71%, #ff98ff 93.14%, #dc36c3 100%);
  --gradient-secondary: linear-gradient(
    255deg, #fff7a7 6.27%, #f48445 29.73%, #fff7a7 42.59%, #ff98ff 58.44%,
    #5a66ee 75.36%, #91bdff 84.12%, #91bdff 106.93%, #ff98ff 118.26%, #dc36c3 126.51%);
  --gradient-metal: radial-gradient(
    65.14% 95.92% at 48.14% 5%, #ebe6e1 46.83%, #c3c0ba);

  --font-primary: "Geist Mono", ui-monospace, monospace;
  --font-secondary: "Neue Machina", system-ui, sans-serif;
  --glass-bg: rgba(255, 255, 255, .05);
  --glass-bg-faint: rgba(255, 255, 255, .012);
  --glass-border-strong: rgba(255, 255, 255, .1);
  --glass-blur: 10px;
  /* Two chamfers, because the site uses two. The small one is the button
     notch; the large one is the card silhouette, cut on the opposite diagonal.
     Setting either to 0 returns that surface to a plain rectangle -- the whole
     shape language is these two numbers. */
  --chamfer: .9rem;
  --chamfer-card: 2.4rem;

  /* The two silhouettes, resolved once. Every clipped surface refers to these
     rather than repeating the polygon, so the shape stays one edit. */
  --cut: polygon(
    0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  --cut-card: polygon(
    0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card),
    100% 100%, var(--chamfer-card) 100%, 0 calc(100% - var(--chamfer-card)));
  --radius-pill: 9999px;
  --dur-fast: .3s;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* elevation ramp: page -> panel -> card -> hover, each step readable */
  --line: #23232d;
  --line-soft: #16161d;
  --card: #0e0e14;
  --card-hi: #191921;
  --card-hover: #22222c;
  --panel: #050507;
  --tile-line: #23232d;
  --pink: #ff6aa5;
  --green: #5fe09a;
  --amber: #f0b34c;
  --blue: #6aa8ff;
  --violet: #9b8cff;
  --muted: #9b9da5;
  --muted-2: #8a8c94;
  --muted-3: #6b6d75;
  --bright: #cfd2d8;

  --sidebar: 24rem;
}

html {
  font-size: 2.6666666667vw;
  font-family: var(--font-primary);
  line-height: normal;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
}
@media (min-width: 768px) { html { font-size: .5208333333vw; } }
@media (min-width: 1920px) { html { font-size: 10px; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 150%;
}
* { box-sizing: border-box; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-secondary); font-weight: 500; line-height: 115%; margin: 0; }
button { font: inherit; }


/* ── page-header artwork ────────────────────────────────────────────────
   The site's own illustrations, bled off the right edge of the header.

   Three rules keep this honest. It is `aria-hidden` and carries no label, so
   nothing reads it as content. It is masked to nothing before it reaches the
   heading, so it never sits behind a figure. And it is never a chart: the
   shapes are waves, a torus and a mesh, none of which can be mistaken for a
   series. A dapp that decorated itself with a glowing upward curve would be
   making a claim, and it has nothing yet to claim.

   The header does NOT clip. `overflow: hidden` was cutting the art box's top
   and bottom -- the box is taller than the header -- and a mask that has not
   reached zero by the cut leaves a straight edge, which is the rectangle this
   whole treatment is trying not to have. Instead the art is sized and pinned
   so it never leaves the page, and the mask alone shapes it. */
.phead { position: relative; }
.phead > .row { position: relative; z-index: 1; }

.phead-art {
  /* Pinned to the header's right edge rather than past it: nothing overflows,
     so nothing needs clipping. It stays clear of the status pill the header
     carries on its right, which has to stay readable -- it is the one thing on
     the page that says whether anything is live. */
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: 52rem; height: 30rem; pointer-events: none;
  background-repeat: no-repeat; background-position: center right;
  background-size: contain;
  /* the source images are composited on black, which is the page colour */
  mix-blend-mode: screen; opacity: .62;
  /* One radial mask, not two composited ones.
     These illustrations are rendered on a field that is near-black rather than
     black, so under `screen` the field itself lightens the page and the whole
     image box shows as a rectangle. The mask has to reach zero before every
     edge of the box. A single gradient does that unambiguously; an intersect
     of two did not survive the prefixed/unprefixed pairing, and the rectangle
     came back. */
  -webkit-mask-image: radial-gradient(closest-side at 58% 50%, #000 18%, transparent 88%);
  mask-image: radial-gradient(closest-side at 58% 50%, #000 18%, transparent 88%);
}
.phead-art.-waves { background-image: url(/img/waves2-transparent.webp); }
.phead-art.-hole  { background-image: url(/img/black-hole.webp); opacity: .8; }
.phead-art.-mesh  { background-image: url(/img/waves4@2x.webp); opacity: .5; }
.phead-art.-print { background-image: url(/img/fingerprint-glow.webp); opacity: .5; }
.phead-art.-cube  { background-image: url(/img/cube.webp); opacity: .55; }

/* Below the sidebar breakpoint the header is the whole width and the art
   would sit under the heading rather than beside it. */
@media (max-width: 900px) {
  .phead-art { width: 26rem; height: 18rem; right: 0; opacity: .26; }
}
@media (prefers-reduced-motion: no-preference) {
  .phead-art { animation: artDrift 22s var(--ease) infinite alternate; }
}
@keyframes artDrift { to { transform: translateY(-54%) scale(1.05); } }

/* ───────────── ambient brand auras ─────────────
   Same recipe the website uses behind its footer: blurred radial gradients in
   the indigo/magenta/orange family, screen-blended, fixed behind all content. */
.aura {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.aura::before, .aura::after {
  content: ""; position: absolute; border-radius: 50%; mix-blend-mode: screen;
}
.aura::before {
  width: 46vw; height: 46vw; top: -26vw; right: -14vw;
  background: radial-gradient(circle at center,
    rgba(90, 102, 238, .55), rgba(220, 54, 195, .22) 46%, transparent 70%);
  filter: blur(100px); opacity: .22;
}
.aura::after { display: none; }
/* a third, cooler pool anchored to the sidebar edge */
.aura i {
  position: absolute; left: -6vw; top: 34vh; width: 46vw; height: 46vw;
  border-radius: 50%; mix-blend-mode: screen; filter: blur(100px); opacity: 0;
  background: radial-gradient(circle at center,
    rgba(32, 160, 255, .48), rgba(155, 90, 232, .20) 55%, transparent 74%);
}
@media (prefers-reduced-motion: no-preference) {
  .aura::before { animation: drift 26s var(--ease) infinite alternate; }
  .aura::after { animation: drift2 32s var(--ease) infinite alternate; }
}
@keyframes drift  { to { transform: translate3d(-5vw, 4vh, 0) scale(1.08); } }
@keyframes drift2 { to { transform: translate3d(4vw, -5vh, 0) scale(1.1); } }

/* ───────────────────────── layout ───────────────────────── */
.app { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.side {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 40;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 2.2rem 1.6rem 1.6rem;
  background: var(--panel); border-right: 1px solid var(--line-soft);
}
.side .brand { display: flex; align-items: center; gap: 1rem; padding: 0 .8rem 2rem; text-decoration: none; }
.side .brand svg { width: 9.5rem; height: auto; color: #fff; }
.side .brand .env {
  font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .25rem .7rem;
}

.sidenav { display: flex; flex-direction: column; gap: .2rem; }
.sidenav a {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1rem 1.2rem; border-radius: 0; text-decoration: none;
  clip-path: var(--cut);
  font-size: 1.35rem; color: var(--muted);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.sidenav a svg { width: 1.7rem; height: 1.7rem; flex-shrink: 0; opacity: .75; }
.sidenav a:hover { color: #fff; background: var(--glass-bg-faint); }
.sidenav a.on {
  color: #fff;
  background: linear-gradient(90deg, rgba(248, 92, 58, .16), rgba(220, 54, 195, .06));
  box-shadow: inset 0 0 0 1px rgba(248, 92, 58, .22);
}
.sidenav a.on svg { opacity: 1; color: var(--color-primary); }
.sidenav .sub { display: flex; flex-direction: column; gap: .1rem; margin: .2rem 0 .6rem 2.2rem; }
.sidenav .sub a { font-size: 1.2rem; padding: .7rem 1.2rem; color: var(--muted-2); }
.sidenav .sub a .tag { margin-left: auto; font-size: .9rem; color: var(--muted-3); }
.side hr { border: 0; border-top: 1px solid var(--line); margin: 1.2rem .8rem; }
.side .spacer { flex: 1; }

.main { flex: 1; margin-left: var(--sidebar); min-width: 0; }
.wrap { max-width: 128rem; padding: 4.4rem 4rem 10rem; }

@media (max-width: 900px) {
  :root { --sidebar: 0px; }
  /* the sidebar becomes a top bar, so the shell has to stack rather than stay
     a row -- without this the bar takes the whole row and .main gets nothing */
  .app { flex-direction: column; }
  .side {
    position: static; width: auto; inset: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: .4rem; padding: 1.2rem; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .side .brand { padding: 0 1rem 0 0; }
  .side .sidenav { flex-direction: row; flex-wrap: wrap; }
  .side .sidenav .sub, .side hr, .side .spacer { display: none; }
  .main { margin-left: 0; }
  .wrap { padding: 2.4rem 1.6rem 6rem; }
}

/* ───────────────────────── buttons ───────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .7rem; height: 3.8rem; padding: 0 1.9rem; flex-shrink: 0;
  font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-base); background: var(--color-primary);
  border: 0; cursor: pointer; text-decoration: none;
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  transition: filter var(--dur-fast) var(--ease);
}
.btn:hover { filter: brightness(1.14); }
.btn.-ghost { color: var(--color-text); background: var(--glass-bg); border: 1px solid var(--glass-border-strong); }
.btn.-ghost:hover { filter: brightness(1.5); }
.btn.-sm { height: 3.1rem; padding: 0 1.4rem; font-size: 1.05rem; }
.btn.-wide { width: 100%; }

/* ───────────────────────── page furniture ───────────────────────── */
.phead { margin-bottom: 3.6rem; }
.phead .eyebrow {
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem;
  font-size: 1.1rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-primary);
}
.phead .eyebrow::before { content: "/"; opacity: .8; }
.phead h1 { font-size: clamp(3.2rem, 4.4vw, 5rem); letter-spacing: -.03em; }
.phead p { margin: 1.2rem 0 0; color: var(--muted); font-size: 1.4rem; max-width: 72rem; line-height: 160%; }
.phead .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

/* The card silhouette: chamfered top-right and bottom-left, the mirror of the
   button's notch, exactly as the site cuts it.

   Opaque, and with no backdrop-filter. Both of those were the reason nothing
   read as crisp: a 70%-opaque blurred panel over a bright aura is a tinted
   sheet of frosted glass, and every card was picking up whatever colour
   happened to be behind it. Definition here comes from fill contrast against
   near-black, which is what the site relies on and why its boxes look cut
   rather than floated.

   `clip-path` means a border cannot be drawn along the two diagonals, so the
   outline is carried by the fill step instead of a stroke -- again, what the
   site does. */
.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 38%),
    var(--card);
  border: 0; padding: 3.2rem; margin-bottom: 2.4rem;
  clip-path: var(--cut-card);
}
.card.-flat { background: var(--card-hi); }

/* Glow, as a drop-shadow rather than a box-shadow.
   A box-shadow is painted inside the element's box and `clip-path` cuts it
   away; `drop-shadow` is computed from the clipped silhouette, so the light
   follows the chamfer instead of being sliced off at the corner. */
.card.-glow {
  background:
    linear-gradient(180deg, rgba(220, 54, 195, .07), rgba(255, 255, 255, 0) 46%),
    var(--card);
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, .14))
    drop-shadow(0 1.2rem 3.2rem rgba(220, 54, 195, .38))
    drop-shadow(0 0 7rem rgba(90, 102, 238, .30));
}

/* A luminous rule along the top edge, the way the site lights a featured
   panel. Drawn inside the clip so it stops at the chamfer. */
.card.-glow::before {
  content: ""; position: absolute; left: 0; right: var(--chamfer-card); top: 0;
  height: 2px; background: var(--gradient-primary); opacity: .9;
}
.card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin-bottom: 2.4rem;
}
.card-title {
  font-size: 2.2rem; color: #fff; font-family: var(--font-secondary);
  letter-spacing: -.02em;
}
/* the site's feature-card marker: a small primary square under the title */
.card.-glow .card-title::after {
  content: ""; display: block; width: .9rem; height: .9rem;
  background: var(--color-primary); margin-top: 1.4rem;
}
.sect { margin: 2.4rem 0 1.2rem; font-size: 1.1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.sect.-first { margin-top: 0; }

/* how-it-works explainer */
.steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 1.6rem; }
.steps .step { display: flex; gap: 1.2rem; }
.steps .n {
  flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(248, 92, 58, .16); color: var(--color-primary);
  font-size: 1.1rem; font-weight: 700;
}
.steps h4 { font-size: 1.5rem; color: #fff; margin-bottom: .6rem; }
.steps p { margin: 0; font-size: 1.2rem; color: var(--muted); line-height: 160%; }
.steps .arw { color: var(--muted-3); align-self: center; font-size: 1.6rem; }
@media (max-width: 1100px) { .steps { grid-template-columns: 1fr; } .steps .arw { display: none; } }

/* stat strip */
.strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  background: var(--card-hi); border: 0; margin-bottom: 2rem;
  clip-path: var(--cut);
}
.strip > div { padding: 2.6rem 2.4rem; border-right: 1px solid var(--line-soft); }
.strip > div:last-child { border-right: 0; }
.strip dt { margin: 0 0 .8rem; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.strip dd { margin: 0; font-size: 3rem; font-weight: 700; color: #fff; font-family: var(--font-secondary); letter-spacing: -.02em; line-height: 1; }
.strip dd.idle { color: var(--muted-3); }
.strip dd small { font-size: 1.1rem; font-weight: 400; color: var(--muted-2); margin-left: .4rem; }

/* featured */
.featured { display: grid; grid-template-columns: auto 1fr 28rem; gap: 3rem; align-items: center; }
@media (max-width: 1200px) { .featured { grid-template-columns: 1fr; gap: 2rem; } }
.featured .meta { display: flex; gap: 3.2rem; flex-wrap: wrap; margin: 1.8rem 0; }
.featured .meta dt { font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .5rem; }
.featured .meta dd { margin: 0; font-size: 1.6rem; color: #fff; font-weight: 700; font-family: var(--font-secondary); }
.featured h2 { font-size: 2.6rem; }
.featured .by { color: var(--muted); font-size: 1.25rem; margin: .8rem 0 0; }
.alloc-list { border-left: 1px solid var(--line); padding-left: 2.4rem; }
@media (max-width: 1200px) { .alloc-list { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 2rem; } }
.alloc-row { margin-bottom: 1.2rem; }
.alloc-row .lbl { display: flex; justify-content: space-between; font-size: 1.2rem; margin-bottom: .6rem; }
.alloc-row .lbl b { color: #fff; font-weight: 700; }
.alloc-row .lbl span { color: var(--muted); display: flex; align-items: center; gap: .7rem; }
.alloc-row .stack { min-width: 0; }
.alloc-row .stack span { box-shadow: 0 0 1rem -.1rem currentColor; }

/* donut */
.donut { position: relative; width: 19rem; height: 19rem; flex-shrink: 0; }
.donut svg {
  width: 100%; height: 100%; transform: rotate(-90deg);
  filter: drop-shadow(0 0 .9rem rgba(255, 255, 255, .10))
          drop-shadow(0 0 2.6rem rgba(155, 90, 232, .28));
}
.donut .mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.donut .mid b { font-size: 3.4rem; font-weight: 700; color: #fff; font-family: var(--font-secondary); line-height: 1; }
.donut .mid span { font-size: 1.1rem; color: var(--muted-2); margin-top: .4rem; }

/* dot / chip */
.dot { width: .9rem; height: .9rem; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--card-hi); border: 1px solid var(--tile-line); border-radius: var(--radius-pill);
  padding: .4rem 1rem; font-size: 1.05rem; color: var(--bright); white-space: nowrap;
}
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }

/* toolbar: search + filter pills */
.toolbar { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.6rem; }
.search {
  display: flex; align-items: center; gap: .9rem; flex: 1; min-width: 22rem; max-width: 40rem;
  background: var(--card-hi); border: 1px solid var(--line-soft); border-radius: 0; padding: 0 1.3rem; height: 3.8rem;
  clip-path: var(--cut);
}
.search svg { width: 1.5rem; height: 1.5rem; color: var(--muted-3); flex-shrink: 0; }
.search input { flex: 1; background: none; border: 0; outline: none; color: var(--color-text); font: inherit; font-size: 1.25rem; }
.search input::placeholder { color: var(--muted-3); }
.segment {
  display: inline-flex; background: var(--card-hi); border: 1px solid var(--line-soft);
  border-radius: 0; padding: .3rem; flex-wrap: wrap;
  clip-path: var(--cut);
}
.segment button, .segment a {
  appearance: none; border: 0; background: none; cursor: pointer; text-decoration: none;
  font-size: 1.15rem; font-weight: 600; color: var(--muted-2);
  padding: .7rem 1.3rem; border-radius: 0; transition: color .2s, background-color .2s;
}
.segment button.on, .segment a.on { background: #26262f; color: #fff; }
.segment button:not(.on):hover, .segment a:not(.on):hover { color: var(--bright); }
.segment button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* ───────────────────────── tables ───────────────────────── */
.tablewrap { overflow-x: auto; margin: 0 -.4rem; padding: 0 .4rem; }
table.tbl { width: 100%; min-width: 86rem; border-collapse: separate; border-spacing: 0 .8rem; font-size: 1.25rem; }
table.tbl th {
  text-align: left; font-weight: 400; font-size: 1rem; color: var(--muted-2);
  letter-spacing: .13em; text-transform: uppercase; padding: 0 1.6rem .4rem; white-space: nowrap;
}
table.tbl td { background: var(--card-hi); border: 0; padding: 1.7rem 1.6rem; vertical-align: middle; }
/* The chamfer belongs to the row, not to each cell, so it is cut into the two
   end cells and the row reads as one shape. */
table.tbl td:first-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - var(--chamfer)));
}
table.tbl td:last-child {
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
table.tbl tbody tr:hover td { background: var(--card-hover); }
table.tbl .b { font-weight: 700; color: #fff; }
table.tbl .sub { display: block; font-size: 1.05rem; color: var(--muted-3); margin-top: .3rem; max-width: 34rem; }
table.tbl .num { font-weight: 700; color: #fff; font-family: var(--font-secondary); }
table.tbl .idle { color: var(--muted-3); }
.go { color: var(--muted-3); text-decoration: none; font-size: 1.6rem; }
tr:hover .go { color: var(--color-primary); }

.asset { display: flex; align-items: center; gap: 1.1rem; }
.av {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: #2f6bff; color: #fff; font-style: normal; font-size: 1.2rem; font-weight: 700;
}
.av.-g { background: #1f6f4a; } .av.-a { background: #7a5a1c; }
.av.-p { background: #7a2a4a; } .av.-v { background: #443a7a; }

/* stacked allocation bar with legend */
.stack {
  display: flex; height: .7rem; border-radius: var(--radius-pill); overflow: hidden;
  background: var(--line-soft); min-width: 16rem;
  box-shadow: 0 0 1.4rem -.2rem rgba(155, 90, 232, .45);
}
.stack span { display: block; height: 100%; }
.stacklegend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .7rem; font-size: 1rem; color: var(--muted); }
.stacklegend span { display: inline-flex; align-items: center; gap: .5rem; }

/* inventory band meter */
.band { position: relative; height: .7rem; border-radius: 4px; background: var(--line); min-width: 11rem; }
.band .range { position: absolute; top: 0; bottom: 0; background: rgba(95, 224, 154, .22); border-radius: 4px; }
.band .mark { position: absolute; top: -.35rem; width: .25rem; height: 1.4rem; background: #fff; border-radius: 1px; }
.band .mark.-target { background: var(--muted-2); }

/* pills */
.pill {
  display: inline-block; font-size: .95rem; border-radius: 999px; padding: .4rem 1rem;
  font-weight: 600; background: rgba(255,255,255,.06); color: var(--muted-2); white-space: nowrap;
}
.pill.ok { background: #5fe09a26; color: var(--green); }
.pill.risk { background: #ff6aa526; color: var(--pink); }
.pill.warn { background: #f0b34c26; color: var(--amber); }
.pill.info { background: #6aa8ff26; color: var(--blue); }
.pill.brand { background: rgba(248,92,58,.16); color: var(--color-primary); }

/* metric tiles */
.grid { display: grid; gap: 1.2rem; }
.grid.-c2 { grid-template-columns: repeat(2, 1fr); }
.grid.-c3 { grid-template-columns: repeat(3, 1fr); }
.grid.-c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid.-c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid.-c4, .grid.-c3, .grid.-c2 { grid-template-columns: 1fr; } }

.tile {
  background: var(--card-hi); border: 0; padding: 2.2rem;
  clip-path: var(--cut);
}
.tile .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tile .v { font-size: 2.8rem; font-weight: 700; color: #fff; font-family: var(--font-secondary); letter-spacing: -.02em; line-height: 1.1; }
.tile .v.idle { color: var(--muted-3); }
.tile .v.green { color: var(--green); } .tile .v.amber { color: var(--amber); }
.tile .v.blue { color: var(--blue); } .tile .v.pink { color: var(--pink); }
.tile label {
  display: block; margin-top: 1.2rem; font-size: 1.05rem; color: var(--muted-2);
  letter-spacing: .1em; text-transform: uppercase;
}

/* chart frame (empty until the indexer runs) */
.chartframe {
  position: relative; height: 26rem; border: 1px solid var(--line-soft); border-radius: 0;
  background:
    repeating-linear-gradient(to right, var(--line-soft) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 25%),
    var(--card);
}
.chartframe .empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8rem; text-align: center;
}
.chartframe .empty b { color: var(--bright); font-size: 1.3rem; }
.chartframe .empty span { color: var(--muted-3); font-size: 1.15rem; max-width: 40rem; }

/* notice */
.notice {
  display: flex; align-items: flex-start; gap: 1.2rem;
  border: 0; border-left: 2px solid var(--amber);
  background: var(--card-hi); padding: 1.5rem 1.8rem; margin-bottom: 2rem;
  clip-path: var(--cut);
  font-size: 1.2rem; color: var(--muted); line-height: 160%;
}
.notice b { color: var(--amber); font-weight: 600; flex-shrink: 0; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 11rem 1fr auto; gap: 1.8rem; align-items: center;
  padding: 1.5rem 1.8rem; background: var(--card-hi); border: 0;
  margin-bottom: .6rem; font-size: 1.25rem;
  clip-path: var(--cut);
}
@media (max-width: 680px) { .timeline li { grid-template-columns: 1fr; gap: .6rem; } }
.timeline .when { color: var(--muted-3); font-size: 1.1rem; }
.timeline .what { color: #fff; }
.timeline .what span { display: block; color: var(--muted); font-size: 1.1rem; margin-top: .3rem; }

/* definition grid */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.2rem; }
.kv > div { background: var(--card-hi); border: 0; padding: 1.8rem; clip-path: var(--cut); }
.kv dt { font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 .8rem; }
.kv dd { margin: 0; font-size: 1.5rem; color: #fff; font-weight: 700; font-family: var(--font-secondary); }
.kv dd.sm { font-size: 1.25rem; font-weight: 400; color: var(--bright); font-family: var(--font-primary); line-height: 155%; }

.flowdiag {
  font-family: var(--font-primary); font-size: 1.15rem; color: var(--muted);
  background: var(--card-hi); border: 0; clip-path: var(--cut);
  padding: 1.8rem; white-space: pre; overflow-x: auto; line-height: 1.75; margin: 0;
}
.flowdiag b { color: #fff; font-weight: 700; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ───────────────────────── mint / redeem ───────────────────────── */
.flow2 { display: grid; grid-template-columns: 1fr 34rem; gap: 2.4rem; align-items: start; }
/* a grid item defaults to min-width:auto, so a wide child sizes the column to
   its min-content and the whole page overflows instead of the child scrolling */
.flow2 > * { min-width: 0; }
@media (max-width: 1100px) { .flow2 { grid-template-columns: 1fr; } }

.field {
  background: var(--card-hi); border: 0; clip-path: var(--cut);
  padding: 1.6rem 1.8rem; margin-bottom: .8rem;
}
.field .top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.field label { font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.field .bal { font-size: 1.1rem; color: var(--muted-3); }
.field .entry { display: flex; align-items: center; gap: 1.2rem; }
.field input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: #fff; font: inherit; font-family: var(--font-secondary);
  font-size: 2.8rem; font-weight: 500; letter-spacing: -.02em;
}
.field input::placeholder { color: var(--muted-3); opacity: .5; }
.field input:disabled { cursor: not-allowed; }
.field .unit {
  display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0;
  background: var(--card-hi); border: 1px solid var(--tile-line);
  border-radius: var(--radius-pill); padding: .7rem 1.3rem;
  font-size: 1.25rem; font-weight: 600; color: #fff;
}
.field .unit i { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.field .unit i.-usdg { background: #2f6bff; }

.swapdir { display: flex; justify-content: center; margin: -.4rem 0 .4rem; }
.swapdir span {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-hi); border: 1px solid var(--tile-line);
  color: var(--muted); font-size: 1.6rem;
}

.summary { border-top: 1px solid var(--tile-line); margin-top: 1.6rem; padding-top: 1.6rem; }
.summary .line { display: flex; justify-content: space-between; gap: 1.6rem; padding: .7rem 0; font-size: 1.25rem; }
.summary .line span { color: var(--muted); }
.summary .line b { color: #fff; font-weight: 600; }
.summary .line b.idle { color: var(--muted-3); font-weight: 400; }

/* settlement ladder (§8 redemption path) */
.ladder { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.ladder li {
  position: relative; padding: 0 0 2.2rem 3.4rem; counter-increment: step;
  font-size: 1.25rem; color: var(--muted);
}
.ladder li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-hi); border: 1px solid var(--tile-line);
  color: var(--muted-2); font-size: 1.05rem; font-weight: 700;
}
.ladder li::after {
  content: ""; position: absolute; left: 1.05rem; top: 2.4rem; bottom: .4rem;
  width: 1px; background: var(--tile-line);
}
.ladder li:last-child { padding-bottom: 0; }
.ladder li:last-child::after { display: none; }
/* The step title only. Unscoped, this caught every <b> inside a step's text
   and broke it onto its own line as if it were a second heading -- which is
   exactly what it did to the documentation's how-to steps. */
.ladder li > b:first-child { display: block; color: #fff; font-weight: 600; margin-bottom: .3rem; }
.ladder li b { color: var(--bright); font-weight: 700; }

/* chart series toggles — dot + label, dimmed when the series is off */
.segment [data-series-btn] { display: inline-flex; align-items: center; gap: .7rem; }
.segment [data-series-btn] .dot { transition: opacity var(--dur-fast); }
.segment [data-series-btn]:not(.on) { color: var(--muted-3); background: none; }
.segment [data-series-btn]:not(.on) .dot { opacity: .3; }

/* ── admin console ─────────────────────────────────────────────────────── */
/* An operation the console can perform: what it does, the authority it needs,
   and the call it maps to. Every one is disabled until something is deployed,
   which is why the authority is shown rather than implied by the button. */
.ops { list-style: none; margin: 0; padding: 0; }
.ops li {
  display: flex; align-items: center; gap: 1.6rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line-soft);
}
.ops li:first-child { padding-top: 0; }
.ops li:last-child { border-bottom: 0; padding-bottom: 0; }
.ops .what { flex: 1 1 auto; min-width: 0; }
.ops .what b { display: block; color: #fff; font-size: 1.4rem; font-weight: 600; margin-bottom: .4rem; }
.ops .what span { display: block; color: var(--muted); font-size: 1.2rem; line-height: 165%; }
.ops .meta { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.ops .btn { flex: 0 0 auto; }

/* a contract call, shown verbatim so the console cannot drift from the ABI */
.sig {
  display: inline-block; font-family: var(--font-primary); font-size: 1.1rem;
  color: var(--bright); background: var(--card-hi);
  border: 1px solid var(--line-soft); border-radius: 0;
  padding: .3rem .8rem; white-space: nowrap;
}
.sig i { color: var(--muted-3); font-style: normal; }

/* two-column authority split: what each role may and may not do */
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.roles > div {
  background: var(--card-hi); border: 0; padding: 2rem;
  clip-path: var(--cut);
}
.roles h4 { font-size: 1.5rem; color: #fff; margin-bottom: .4rem; }
.roles .who { display: block; color: var(--muted-3); font-size: 1.15rem; margin-bottom: 1.4rem; }
.roles ul { list-style: none; margin: 0; padding: 0; }
.roles li {
  position: relative; padding-left: 2.2rem; margin-bottom: .9rem;
  color: var(--muted); font-size: 1.2rem; line-height: 160%;
}
.roles li:last-child { margin-bottom: 0; }
.roles li::before { position: absolute; left: 0; top: 0; font-size: 1.3rem; line-height: 155%; }
.roles li.-can::before { content: "+"; color: var(--green); }
.roles li.-cant::before { content: "\00d7"; color: var(--muted-3); }

@media (max-width: 900px) {
  .ops li { flex-wrap: wrap; }
  .ops .meta { width: 100%; justify-content: flex-start; }
  .roles { grid-template-columns: minmax(0, 1fr); }
}

/* ── live status ────────────────────────────────────────────────────────── */
/* Says why a figure is or is not live. Always visible: a dash with no
   explanation reads as a broken page, and a number with no provenance reads as
   a fact. */
.livebar {
  display: flex; align-items: center; gap: .7rem;
  margin-top: 1rem; padding: .7rem 1rem;
  background: var(--card-hi); border: 0; clip-path: var(--cut);
  font-size: 1.05rem; color: var(--muted-2);
}
.livebar .dot {
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--muted-3); flex-shrink: 0;
}
.livebar[data-state="live"] .dot { background: var(--green); }
.livebar[data-state="warn"] .dot { background: var(--amber); }

/* a wallet button showing a connected address */
.btn[data-connected] { color: var(--green); border-color: var(--green); }

/* an armed guardian control: one more press and other people lose access */
.btn.-armed {
  color: var(--pink); border-color: var(--pink);
  background: #ff6aa514;
}

/* ── settlement countdown ──────────────────────────────────────────────── */
/* The hero of the Earnings page. Honest without a chain: the boundaries are
   fixed UTC times, so the clock is real even before anything is deployed. */
.settle { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: stretch; }
.settle-main { display: flex; flex-direction: column; justify-content: center; }
.settle-label {
  font-size: 1.1rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 1.2rem;
}
.settle-clock {
  font-family: var(--font-secondary); font-weight: 500;
  font-size: 7.2rem; line-height: 1; letter-spacing: -.03em;
  background: var(--gradient-primary); background-size: 200% 100%;
  background-clip: text; -webkit-background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .settle-clock { animation: settleShift 14s linear infinite; }
}
@keyframes settleShift { to { background-position: 200% 0; } }
.settle-times {
  margin-top: 1rem; font-size: 1.25rem; color: var(--muted);
  letter-spacing: .06em;
}
.settle-bar {
  margin-top: 2.4rem; height: .6rem; border-radius: var(--radius-pill);
  background: var(--card-hi); border: 1px solid var(--tile-line); overflow: hidden;
}
.settle-bar span {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: var(--gradient-primary);
  transition: width 1s linear;
}
.settle-foot {
  display: flex; justify-content: space-between; margin-top: 1rem;
  font-size: 1.15rem; color: var(--muted-3);
}
.settle-side {
  border-left: 1px solid var(--line); padding-left: 3rem;
  display: flex; flex-direction: column;
}
.settle-note {
  margin: 1.6rem 0 0; color: var(--muted); font-size: 1.2rem; line-height: 170%;
}
.settle .strip { border: 0; padding: 0; }
@media (max-width: 1100px) {
  .settle { grid-template-columns: 1fr; gap: 2rem; }
  .settle-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 2rem; }
  .settle-clock { font-size: 5.4rem; }
}