/* MIKODES Verified Calls — tokens.
   OKLCH, warm neutral ramp (hue 60). Dark is the default; light is its own ramp, not an inversion.
   Colour meanings never change: up/down only for finished returns, accent (coral) for the one action,
   proof (blue) for seals, warn (amber) for flags. A hex block below serves engines without oklch(). */

@font-face {
  font-family: 'Geist';
  src: url('/app/public/geist-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/app/public/geist-mono.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback so the swap does not shift the layout. */
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;
  /* ---- neutral ramp (dark) ---------------------------------------------------------------- */
  --n-1: oklch(14.2% 0.005 60);
  --n-2: oklch(17.4% 0.006 60);
  --n-3: oklch(20.6% 0.007 60);
  --n-4: oklch(24.2% 0.007 60);
  --n-5: oklch(28.5% 0.008 60);
  --n-6: oklch(33.5% 0.008 60);
  --n-7: oklch(43% 0.008 60);
  --n-8: oklch(54% 0.008 60);
  --n-9: oklch(64% 0.008 60);
  --n-10: oklch(74% 0.006 60);
  --n-11: oklch(85% 0.005 60);
  --n-12: oklch(96.5% 0.004 60);

  /* ---- roles ------------------------------------------------------------------------------ */
  --page: var(--n-1);
  --surface: var(--n-2);
  --raised: var(--n-3);
  --sunken: oklch(12.4% 0.005 60);
  --hover: oklch(100% 0 0 / 0.045);
  --press: oklch(100% 0 0 / 0.08);
  --line: oklch(100% 0 0 / 0.07);
  --line-strong: oklch(100% 0 0 / 0.13);
  --text-1: var(--n-12);
  --text-2: var(--n-11);
  --text-3: var(--n-9);
  --text-4: var(--n-8);
  --edge: inset 0 1px 0 oklch(100% 0 0 / 0.04);
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-2: 0 12px 32px -12px oklch(0% 0 0 / 0.6), 0 2px 6px oklch(0% 0 0 / 0.25);
  --shadow-3: 0 24px 64px -16px oklch(0% 0 0 / 0.7), 0 4px 12px oklch(0% 0 0 / 0.3);
  --scrim: oklch(8% 0.005 60 / 0.6);
  --glass: oklch(14.2% 0.005 60 / 0.72);

  /* ---- semantic ---------------------------------------------------------------------------- */
  --up: oklch(79% 0.17 152);
  --down: oklch(70% 0.19 20);
  --flat: var(--n-10);
  --proof: oklch(74% 0.12 250);
  --warn: oklch(83% 0.14 80);
  --fail: oklch(68% 0.2 25);
  --accent-h: 38;
  --up-bg: oklch(79% 0.17 152 / 0.12);
  --down-bg: oklch(70% 0.19 20 / 0.12);
  --proof-bg: oklch(74% 0.12 250 / 0.13);
  --warn-bg: oklch(83% 0.14 80 / 0.12);
  --fail-bg: oklch(68% 0.2 25 / 0.14);
  --open: var(--n-7);

  /* ---- charts ------------------------------------------------------------------------------ */
  --chart-line: var(--n-9);
  --chart-line-active: var(--n-12);
  --chart-grid: oklch(100% 0 0 / 0.06);
  --chart-window: oklch(100% 0 0 / 0.04);
  --heat-0: var(--n-3);
  --heat-1: oklch(40% 0.03 250);
  --heat-2: oklch(52% 0.06 250);
  --heat-3: oklch(64% 0.09 250);
  --heat-4: oklch(78% 0.11 250);

  /* ---- type ---------------------------------------------------------------------------------- */
  --font-sans: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --fs-hero: clamp(44px, 11vw, 72px);
  --fs-hero-sm: clamp(36px, 8vw, 52px);
  --fs-display: clamp(28px, 4.2vw, 40px);
  --fs-title: clamp(26px, 3.4vw, 34px);
  --fs-h2: 17px;
  --fs-h3: 15px;
  --fs-body: 15px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-2xs: 12px;
  --fs-3xs: 11px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 650;
  --lh: 1.5;
  --track-tight: -0.035em;
  --track-title: -0.022em;

  /* ---- space, radius, layout ----------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --gutter: 16px;
  --gap: 12px;
  --max: 1200px;
  --rail: 340px;
  --bar-h: 56px;
  --bottom-h: 64px;

  /* ---- motion (§5.1) ------------------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-chart: 700ms;
  --dur-roll: 450ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --ease-spring: linear(0, 0.38 12%, 0.74 25%, 0.96 40%, 1.03 55%, 1.01 70%, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --gap: 16px;
  }
}
@media (min-width: 1100px) {
  :root {
    --gutter: 32px;
  }
}

/* ---- light: its own ramp ------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --n-1: oklch(98.3% 0.003 60);
    --n-2: oklch(100% 0 0);
    --n-3: oklch(96.6% 0.004 60);
    --n-4: oklch(93.8% 0.005 60);
    --n-5: oklch(90.5% 0.006 60);
    --n-6: oklch(86% 0.007 60);
    --n-7: oklch(76% 0.008 60);
    --n-8: oklch(62% 0.009 60);
    --n-9: oklch(52% 0.01 60);
    --n-10: oklch(42% 0.01 60);
    --n-11: oklch(33% 0.01 60);
    --n-12: oklch(19% 0.01 60);
    --sunken: oklch(95.8% 0.004 60);
    --hover: oklch(20% 0.01 60 / 0.045);
    --press: oklch(20% 0.01 60 / 0.08);
    --line: oklch(20% 0.01 60 / 0.085);
    --line-strong: oklch(20% 0.01 60 / 0.15);
    --edge: 0 0 0 1px oklch(20% 0.01 60 / 0.06);
    --shadow-1: 0 1px 2px oklch(20% 0.01 60 / 0.06);
    --shadow-2: 0 12px 32px -14px oklch(20% 0.01 60 / 0.18), 0 2px 6px oklch(20% 0.01 60 / 0.05);
    --shadow-3: 0 24px 64px -16px oklch(20% 0.01 60 / 0.25), 0 4px 12px oklch(20% 0.01 60 / 0.06);
    --scrim: oklch(20% 0.01 60 / 0.32);
    --glass: oklch(100% 0 0 / 0.78);
    --up: oklch(53% 0.15 152);
    --down: oklch(55% 0.2 22);
    --flat: var(--n-10);
    --proof: oklch(52% 0.16 256);
    --warn: oklch(58% 0.14 68);
    --fail: oklch(54% 0.21 25);
    --up-bg: oklch(53% 0.15 152 / 0.1);
    --down-bg: oklch(55% 0.2 22 / 0.09);
    --proof-bg: oklch(52% 0.16 256 / 0.09);
    --warn-bg: oklch(70% 0.14 75 / 0.16);
    --fail-bg: oklch(54% 0.21 25 / 0.09);
    --chart-grid: oklch(20% 0.01 60 / 0.07);
    --chart-window: oklch(20% 0.01 60 / 0.04);
    --heat-0: var(--n-4);
    --heat-1: oklch(86% 0.04 250);
    --heat-2: oklch(74% 0.08 250);
    --heat-3: oklch(60% 0.12 252);
    --heat-4: oklch(48% 0.15 256);
  }
}
:root[data-theme='light'] {
  color-scheme: light;
  --n-1: oklch(98.3% 0.003 60);
  --n-2: oklch(100% 0 0);
  --n-3: oklch(96.6% 0.004 60);
  --n-4: oklch(93.8% 0.005 60);
  --n-5: oklch(90.5% 0.006 60);
  --n-6: oklch(86% 0.007 60);
  --n-7: oklch(76% 0.008 60);
  --n-8: oklch(62% 0.009 60);
  --n-9: oklch(52% 0.01 60);
  --n-10: oklch(42% 0.01 60);
  --n-11: oklch(33% 0.01 60);
  --n-12: oklch(19% 0.01 60);
  --sunken: oklch(95.8% 0.004 60);
  --hover: oklch(20% 0.01 60 / 0.045);
  --press: oklch(20% 0.01 60 / 0.08);
  --line: oklch(20% 0.01 60 / 0.085);
  --line-strong: oklch(20% 0.01 60 / 0.15);
  --edge: 0 0 0 1px oklch(20% 0.01 60 / 0.06);
  --shadow-1: 0 1px 2px oklch(20% 0.01 60 / 0.06);
  --shadow-2: 0 12px 32px -14px oklch(20% 0.01 60 / 0.18), 0 2px 6px oklch(20% 0.01 60 / 0.05);
  --shadow-3: 0 24px 64px -16px oklch(20% 0.01 60 / 0.25), 0 4px 12px oklch(20% 0.01 60 / 0.06);
  --scrim: oklch(20% 0.01 60 / 0.32);
  --glass: oklch(100% 0 0 / 0.78);
  --up: oklch(53% 0.15 152);
  --down: oklch(55% 0.2 22);
  --flat: var(--n-10);
  --proof: oklch(52% 0.16 256);
  --warn: oklch(58% 0.14 68);
  --fail: oklch(54% 0.21 25);
  --up-bg: oklch(53% 0.15 152 / 0.1);
  --down-bg: oklch(55% 0.2 22 / 0.09);
  --proof-bg: oklch(52% 0.16 256 / 0.09);
  --warn-bg: oklch(70% 0.14 75 / 0.16);
  --fail-bg: oklch(54% 0.21 25 / 0.09);
  --chart-grid: oklch(20% 0.01 60 / 0.07);
  --chart-window: oklch(20% 0.01 60 / 0.04);
  --heat-0: var(--n-4);
  --heat-1: oklch(86% 0.04 250);
  --heat-2: oklch(74% 0.08 250);
  --heat-3: oklch(60% 0.12 252);
  --heat-4: oklch(48% 0.15 256);
}

/* Accent: derived on <body> so a brand class there (accent-h-N, from the settings) re-tints it. */
body {
  --accent: oklch(72% 0.165 var(--accent-h));
  --accent-hover: oklch(76% 0.16 var(--accent-h));
  --accent-ink: oklch(18% 0.03 var(--accent-h));
  --accent-bg: oklch(72% 0.165 var(--accent-h) / 0.14);
}
:root[data-theme='light'] body {
  --accent: oklch(63% 0.19 var(--accent-h));
  --accent-hover: oklch(58% 0.19 var(--accent-h));
  --accent-ink: oklch(99% 0.01 var(--accent-h));
  --accent-bg: oklch(63% 0.19 var(--accent-h) / 0.1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) body {
    --accent: oklch(63% 0.19 var(--accent-h));
    --accent-hover: oklch(58% 0.19 var(--accent-h));
    --accent-ink: oklch(99% 0.01 var(--accent-h));
    --accent-bg: oklch(63% 0.19 var(--accent-h) / 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-chart: 0ms;
    --dur-roll: 0ms;
  }
}

/* ---- hex fallback for engines without oklch() (roles only; the ramp is not used directly) ----- */
@supports not (color: oklch(50% 0.1 60)) {
  :root {
    --n-1: #0f0e0d;
    --n-2: #171615;
    --n-3: #1f1e1c;
    --n-4: #282624;
    --n-5: #312f2d;
    --n-6: #3c3a37;
    --n-7: #55524f;
    --n-8: #75726e;
    --n-9: #93908c;
    --n-10: #afaca8;
    --n-11: #d2d0cd;
    --n-12: #f4f3f1;
    --sunken: #0b0a09;
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.13);
    --hover: rgba(255, 255, 255, 0.045);
    --press: rgba(255, 255, 255, 0.08);
    --glass: rgba(15, 14, 13, 0.72);
    --up: #3fd98a;
    --down: #ff6b72;
    --proof: #7fb2ff;
    --warn: #f5c451;
    --fail: #ff5d5d;
    --up-bg: rgba(63, 217, 138, 0.12);
    --down-bg: rgba(255, 107, 114, 0.12);
    --proof-bg: rgba(127, 178, 255, 0.13);
    --warn-bg: rgba(245, 196, 81, 0.12);
    --fail-bg: rgba(255, 93, 93, 0.14);
    --chart-grid: rgba(255, 255, 255, 0.06);
    --chart-window: rgba(255, 255, 255, 0.04);
    --heat-1: #2d3a4f;
    --heat-2: #3f5577;
    --heat-3: #5e7ca8;
    --heat-4: #93b3dd;
  }
  :root[data-theme='light'] {
    --n-1: #faf9f8;
    --n-2: #ffffff;
    --n-3: #f4f3f1;
    --n-4: #ecebe9;
    --n-5: #e3e1de;
    --n-6: #d6d4d1;
    --n-7: #b9b6b2;
    --n-8: #8f8b87;
    --n-9: #74706c;
    --n-10: #5a5754;
    --n-11: #43403d;
    --n-12: #1e1c1a;
    --sunken: #f1f0ee;
    --line: rgba(30, 28, 26, 0.085);
    --line-strong: rgba(30, 28, 26, 0.15);
    --hover: rgba(30, 28, 26, 0.045);
    --press: rgba(30, 28, 26, 0.08);
    --glass: rgba(255, 255, 255, 0.78);
    --up: #1a8a4f;
    --down: #cf2e3f;
    --proof: #2f63c9;
    --warn: #9a6b0c;
    --fail: #c42a2a;
  }
  body {
    --accent: #ff8a5c;
    --accent-hover: #ff9a70;
    --accent-ink: #231208;
    --accent-bg: rgba(255, 138, 92, 0.14);
  }
  :root[data-theme='light'] body {
    --accent: #e8643a;
    --accent-hover: #d4552d;
    --accent-ink: #fffaf7;
    --accent-bg: rgba(232, 100, 58, 0.1);
  }
}

/* MIKODES Verified Calls — components. One class vocabulary for every page;
   documented in src/web/components/README.md. No inline styles anywhere (CSP): sizes/positions are
   classes, colours are tokens. */

/* ============================== base ============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 64px);
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--page);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh);
  font-feature-settings: 'calt', 'kern';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
}
svg {
  flex-shrink: 0;
}
h1,
h2,
h3,
h4,
p,
ol,
ul,
dl,
dd,
figure,
pre {
  margin: 0;
}
ol,
ul {
  padding: 0;
  list-style: none;
}
h1,
h2,
h3 {
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-title);
  line-height: 1.2;
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-title);
}
h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
}
h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.005em;
}
p {
  text-wrap: pretty;
}
a {
  color: inherit;
  text-decoration: none;
}
:where(p, dd, td, li, .notice, .chain-detail, .step-desc, .hero-sub) a:not([class]) {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast);
}
:where(p, dd, td, li, .notice, .chain-detail, .step-desc, .hero-sub) a:not([class]):hover {
  text-decoration-color: currentColor;
}
:where(.seg, .footer-links, .topnav, .bottomnav, .toc) a {
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
code,
kbd,
pre,
.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--raised);
}
strong,
b {
  font-weight: var(--fw-semi);
}
::selection {
  background: color-mix(in oklch, var(--proof) 35%, transparent);
}
:focus-visible {
  outline: 2px solid var(--proof);
  outline-offset: 2px;
  border-radius: 6px;
}
details > summary {
  cursor: pointer;
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-4) 0;
}

.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum', 'lnum';
  letter-spacing: -0.01em;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--text-1);
  color: var(--page);
  font-weight: var(--fw-semi);
}
.skip:focus {
  top: 12px;
}

/* text roles */
.muted {
  color: var(--text-3);
}
.dim {
  color: var(--text-2);
}
.faint {
  color: var(--text-4);
}
.small {
  font-size: var(--fs-sm);
}
.xsmall {
  font-size: var(--fs-xs);
}
.tiny {
  font-size: var(--fs-2xs);
}
.strong-1 {
  color: var(--text-1);
  font-weight: var(--fw-semi);
}
.up,
.pos {
  color: var(--up);
}
.down,
.neg {
  color: var(--down);
}
.zero {
  color: var(--flat);
}
.warn-text {
  color: var(--warn);
}
.proof-text {
  color: var(--proof);
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.nowrap {
  white-space: nowrap;
}
.wrap {
  overflow-wrap: anywhere;
}
.label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  letter-spacing: 0.005em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-3);
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
}
.ico-inline {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 2px;
}

/* ============================== layout primitives ============================== */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.stack-6 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.stack-xl {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.grow {
  flex: 1 1 auto;
  min-width: 0;
}
.self-start {
  align-self: flex-start;
}
.span-all {
  grid-column: 1 / -1;
}
.ta-right {
  text-align: right;
}

/* ============================== app bar ============================== */
.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--bar-h);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--dur-base),
    background var(--dur-base);
}
.appbar[data-scrolled] {
  border-bottom-color: var(--line);
}
.appbar-inner {
  height: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-semi);
  font-size: 15px;
  letter-spacing: -0.015em;
  min-width: 0;
}
.brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 44vw;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--text-1);
  color: var(--page);
  flex: none;
}
.brand-mark svg {
  width: 15px;
  height: 15px;
}
.brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}
.appbar-spacer {
  flex: 1 1 auto;
}
.topnav {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--hover);
}
.topnav a {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  transition:
    color var(--dur-fast),
    background var(--dur-fast);
}
.topnav a:hover {
  color: var(--text-1);
}
.topnav a[aria-current='page'] {
  color: var(--text-1);
  background: var(--raised);
  box-shadow: var(--shadow-1), var(--edge);
}
@media (min-width: 900px) {
  .topnav {
    display: flex;
  }
}
.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  color: var(--text-2);
  transition:
    background var(--dur-fast),
    color var(--dur-fast),
    transform 80ms;
  flex: none;
}
.iconbtn:hover {
  background: var(--hover);
  color: var(--text-1);
}
.iconbtn:active {
  transform: scale(0.96);
}
.iconbtn svg {
  width: 18px;
  height: 18px;
}
.theme-ico-light {
  display: none;
}
:root[data-theme='light'] .theme-ico-light {
  display: block;
}
:root[data-theme='light'] .theme-ico-dark {
  display: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .theme-ico-light {
    display: block;
  }
  :root:not([data-theme='dark']) .theme-ico-dark {
    display: none;
  }
}
.searchslot {
  display: none;
  position: relative;
}
.searchslot input {
  width: 240px;
  height: 36px;
  padding: 0 12px 0 34px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--hover);
  font-size: var(--fs-sm);
  transition:
    width var(--dur-base) var(--ease-out),
    border-color var(--dur-fast);
}
.searchslot input:focus {
  width: 300px;
  outline: none;
  border-color: var(--line-strong);
  background: var(--surface);
}
.searchslot svg {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.searchslot kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-4);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 5px;
}
@media (min-width: 700px) {
  .searchslot {
    display: block;
  }
}

/* demo marker: quiet, persistent, explicit */
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px var(--gutter);
  font-size: var(--fs-2xs);
  color: var(--text-2);
  background: var(--warn-bg);
  border-bottom: 1px solid color-mix(in oklch, var(--warn) 25%, transparent);
  text-align: center;
}
.demo-banner strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--warn);
  font-weight: var(--fw-semi);
}
.demo-banner strong::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
}

/* floating bottom nav (phone) */
.bottomnav {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 22px;
  width: max-content;
  max-width: calc(100vw - 20px);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
  backdrop-filter: saturate(1.5) blur(20px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
}
.bottomnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  min-height: 50px;
  padding: 4px 10px;
  border-radius: 17px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: var(--fw-medium);
  transition:
    color var(--dur-fast),
    background var(--dur-fast);
}
.bottomnav a svg {
  width: 21px;
  height: 21px;
}
.bottomnav a[aria-current='page'] {
  color: var(--text-1);
  background: var(--press);
  font-weight: var(--fw-semi);
}
@media (min-width: 900px) {
  .bottomnav {
    display: none;
  }
}

/* ============================== surfaces ============================== */
.card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--edge);
  border: 1px solid var(--line);
  min-width: 0;
}
.card--lg {
  padding: var(--sp-5);
}
@media (min-width: 768px) {
  .card--lg {
    padding: var(--sp-6);
  }
}
.card--flush {
  padding: 0;
  overflow: hidden;
}
.card--tight {
  padding: var(--sp-3) var(--sp-4);
}
.card--sunken {
  background: var(--sunken);
  box-shadow: none;
}
.card--plain {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.card-head.flush {
  margin-bottom: 0;
}
.card-head h2,
.card-head h3 {
  font-size: var(--fs-h3);
}
.card-body {
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.head-pad {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.h-md {
  font-size: var(--fs-h3);
}

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.sec-head h2 {
  font-size: var(--fs-h2);
}
.sec-head > span,
.sec-head .meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.section-head > span {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ============================== chips (and badges) ============================== */
.chip,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--hover);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.chip svg,
.badge svg {
  width: 12px;
  height: 12px;
}
.chip--dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chip--proof,
.badge--sealed {
  color: var(--proof);
  background: var(--proof-bg);
  border-color: transparent;
}
.chip--warn,
.badge--exit-liq,
.badge--flag {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: transparent;
}
.chip--up {
  color: var(--up);
  background: var(--up-bg);
  border-color: transparent;
}
.chip--down {
  color: var(--down);
  background: var(--down-bg);
  border-color: transparent;
}
.chip--fail,
.badge--failed {
  color: var(--fail);
  background: var(--fail-bg);
  border-color: transparent;
}
.chip--open,
.badge--open {
  color: var(--text-2);
  background: transparent;
  border-style: dashed;
  border-color: var(--line-strong);
}
.chip--muted,
.badge--pending,
.badge--not-checked,
.badge--unpriceable {
  color: var(--text-3);
  background: transparent;
}
.badge--reshill,
.badge--final {
  color: var(--text-2);
}
.chip--demo {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: transparent;
}
.chip--accent {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: transparent;
}
.chip--lg {
  height: 30px;
  padding: 0 12px;
  font-size: var(--fs-xs);
}

/* ============================== buttons ============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast),
    transform 80ms,
    box-shadow var(--dur-fast);
}
.btn svg {
  width: 16px;
  height: 16px;
}
.btn:active {
  transform: scale(0.98);
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow:
    0 1px 0 oklch(100% 0 0 / 0.18) inset,
    0 6px 18px -8px var(--accent);
}
.btn--primary:hover {
  background: var(--accent-hover);
}
.btn--secondary {
  background: var(--raised);
  color: var(--text-1);
  border-color: var(--line);
  box-shadow: var(--edge);
}
.btn--secondary:hover {
  background: var(--n-4);
  border-color: var(--line-strong);
}
.btn--ghost {
  background: transparent;
  color: var(--text-2);
}
.btn--ghost:hover {
  background: var(--hover);
  color: var(--text-1);
}
.btn--danger {
  background: var(--fail-bg);
  color: var(--fail);
}
.btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
}
.btn--lg {
  height: 48px;
  padding: 0 20px;
  font-size: var(--fs-body);
}
.btn--block {
  display: flex;
  width: 100%;
}
.btn[aria-disabled='true'],
.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.btn .count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--text-1);
  color: var(--page);
  font-size: 11px;
  font-weight: var(--fw-bold);
}

/* ============================== segmented control ============================== */
.seg {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--hover);
  border: 1px solid var(--line);
}
.seg a,
.seg button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 52px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  transition:
    color var(--dur-fast),
    background var(--dur-base) var(--ease-out);
}
.seg a:hover {
  color: var(--text-1);
}
.seg a[aria-current='true'],
.seg a[aria-current='page'],
.seg button[aria-pressed='true'] {
  color: var(--text-1);
  background: var(--raised);
  box-shadow:
    var(--shadow-1),
    0 0 0 1px var(--line);
}
:root[data-theme='light'] .seg a[aria-current='true'],
:root[data-theme='light'] .seg a[aria-current='page'] {
  background: var(--n-2);
  color: var(--n-12);
  box-shadow:
    0 1px 3px oklch(20% 0.01 60 / 0.14),
    0 0 0 1px oklch(20% 0.01 60 / 0.08);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .seg a[aria-current='true'],
  :root:not([data-theme='dark']) .seg a[aria-current='page'] {
    background: var(--n-2);
    color: var(--n-12);
    box-shadow:
      0 1px 3px oklch(20% 0.01 60 / 0.14),
      0 0 0 1px oklch(20% 0.01 60 / 0.08);
  }
}
.seg .seg-count {
  font-size: 11px;
  color: var(--text-4);
  font-weight: var(--fw-medium);
}
.seg--sm a {
  height: 28px;
  min-width: 44px;
  padding: 0 10px;
  font-size: var(--fs-xs);
}

/* ============================== figures ============================== */
.hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.hero-num {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  line-height: 0.95;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum', 'lnum';
  white-space: nowrap;
}
.hero-num--sm {
  font-size: var(--fs-hero-sm);
}
.hero-num.is-unknown {
  color: var(--text-4);
}
.hero-label {
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-weight: var(--fw-medium);
}
.hero-sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.hero-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* stat tiles + bento */
.bento {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .bento--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bento--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--edge);
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast);
}
a.tile:hover {
  background: var(--raised);
  border-color: var(--line-strong);
}
.tile--span-2 {
  grid-column: span 2;
}
.tile--span-3 {
  grid-column: span 2;
}
.tile--span-4 {
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .tile--span-3 {
    grid-column: span 3;
  }
}
.tile-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-3);
}
.tile-value {
  font-size: 26px;
  font-weight: var(--fw-semi);
  letter-spacing: -0.025em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tile-value--sm {
  font-size: 20px;
}
.tile-sub {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  line-height: 1.4;
}
.tile--muted .tile-value {
  color: var(--text-3);
  font-weight: var(--fw-medium);
}
.tile--warn .tile-value {
  color: var(--warn);
}
.tile--up .tile-value {
  color: var(--up);
}
.tile--down .tile-value {
  color: var(--down);
}
.tile-chart {
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* stat grid (operations pages) */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (min-width: 768px) {
  .stats--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  min-width: 0;
}
.stat--wide {
  grid-column: 1 / -1;
}
.stat-label {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  font-weight: var(--fw-medium);
}
.stat-value {
  font-size: 24px;
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-value--md {
  font-size: 18px;
}
.stat-value--plain {
  font-weight: var(--fw-medium);
}
.stat-sub {
  font-size: var(--fs-2xs);
  color: var(--text-3);
}

/* ============================== avatar ============================== */
.avatar {
  --h: 250;
  --sz: 40px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: oklch(40% 0.085 var(--h));
  color: oklch(94% 0.03 var(--h));
  font-size: calc(var(--sz) * 0.36);
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
  line-height: 1;
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.08);
}
:root[data-theme='light'] .avatar {
  background: oklch(90% 0.05 var(--h));
  color: oklch(36% 0.1 var(--h));
  box-shadow: inset 0 0 0 1px oklch(20% 0.01 60 / 0.06);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .avatar {
    background: oklch(90% 0.05 var(--h));
    color: oklch(36% 0.1 var(--h));
    box-shadow: inset 0 0 0 1px oklch(20% 0.01 60 / 0.06);
  }
}
.avatar--channel {
  border-radius: 30%;
}
.avatar--24,
.avatar--sm {
  --sz: 28px;
}
.avatar--24 {
  --sz: 24px;
}
.avatar--32 {
  --sz: 32px;
}
.avatar--40 {
  --sz: 40px;
}
.avatar--48 {
  --sz: 48px;
}
.avatar--64,
.avatar--lg {
  --sz: 64px;
}
.avatar--88 {
  --sz: 88px;
}

.caller {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.caller-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.caller-name {
  font-weight: var(--fw-semi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.caller-meta {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================== outcome strip ============================== */
.strip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.strip svg {
  height: 16px;
  width: auto;
  overflow: visible;
}
.strip--sm svg {
  height: 12px;
}
.strip rect {
  rx: 1.5px;
}
.strip .t-up {
  fill: var(--up);
}
.strip .t-down {
  fill: var(--down);
}
.strip .t-flat {
  fill: var(--n-8);
}
.strip .t-open {
  fill: none;
  stroke: var(--n-7);
  stroke-width: 1;
  stroke-dasharray: 2 1.5;
}
.strip .t-unp {
  fill: var(--n-5);
}
.strip .t-reshill {
  fill: var(--n-6);
}
.strip-empty {
  color: var(--text-4);
  font-size: var(--fs-xs);
}
@media (prefers-reduced-motion: no-preference) {
  .strip rect {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: tick-in var(--dur-slow) var(--ease-out) both;
  }
  .strip rect:nth-child(4n + 1) {
    animation-delay: 20ms;
  }
  .strip rect:nth-child(4n + 2) {
    animation-delay: 50ms;
  }
  .strip rect:nth-child(4n + 3) {
    animation-delay: 80ms;
  }
  .strip rect:nth-child(4n) {
    animation-delay: 110ms;
  }
}
@keyframes tick-in {
  from {
    transform: scaleY(0.2);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ============================== podium ============================== */
.podium {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .podium {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}
.podium-li {
  display: flex;
  min-width: 0;
}
.podium-tile {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--edge);
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    transform var(--dur-base) var(--ease-out);
}
.podium-tile:hover {
  background: var(--raised);
  border-color: var(--line-strong);
}
.podium-tile--1 {
  background: var(--raised);
}
.podium-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-right: 26px;
}
.podium-top {
  flex-direction: column;
  align-items: flex-start;
}
.podium-top .caller-text {
  max-width: 100%;
}
.podium-top .caller-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  font-size: var(--fs-h2);
}
.podium-meta {
  margin-top: auto;
}
.podium-rank {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.podium-fig {
  font-size: 40px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.podium-tile--1 .podium-fig {
  font-size: clamp(44px, 5vw, 56px);
}
.podium-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.podium-meta b {
  color: var(--text-2);
  font-weight: var(--fw-semi);
}
.podium-flags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  .podium {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
  }
  .podium::-webkit-scrollbar {
    display: none;
  }
  .podium-tile {
    scroll-snap-align: start;
  }
  .podium-tile--1 {
    grid-column: auto;
  }
}

/* ============================== caller rows (leaderboard list) ============================== */
/* Phone: two lines. Real columns once the LIST is ≥ 720 px wide (container query, QA-1). */
.lb-wrap {
  container-type: inline-size;
  container-name: lb;
}
.lb {
  display: flex;
  flex-direction: column;
}
.lb-head {
  display: none;
}
.lb-row {
  display: grid;
  align-items: center;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-areas: 'rank id fig' 'rank strip strip';
  gap: 8px 12px;
  padding: 14px var(--sp-4);
  border-top: 1px solid var(--line);
  transition: background var(--dur-fast);
}
.lb-row:first-child {
  border-top: 0;
}
.lb-row:hover {
  background: var(--hover);
}
.lb-rank {
  grid-area: rank;
  align-self: start;
  padding-top: 10px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.lb-id {
  grid-area: id;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.lb-id .caller-name {
  font-size: var(--fs-body);
}
.lb-strip {
  grid-area: strip;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 52px;
  font-size: var(--fs-2xs);
  color: var(--text-3);
  flex-wrap: wrap;
}
.lb-fig {
  grid-area: fig;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.lb-fig .num {
  font-size: 18px;
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
}
.lb-fig .lbl {
  font-size: 11px;
  color: var(--text-3);
}
.lb-flags--inline {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lb-flags--meta {
  display: none;
}
.lb-col {
  display: none;
}
@container lb (min-width: 720px) {
  .lb-head,
  .lb-row {
    grid-template-columns: 24px minmax(190px, 1fr) 122px 84px 66px 44px 40px 40px;
    grid-template-areas: none;
  }
  .lb-head {
    display: grid;
    gap: 12px;
    align-items: center;
    padding: 11px var(--sp-5);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    color: var(--text-3);
    border-bottom: 1px solid var(--line);
  }
  .lb-head .r {
    text-align: right;
  }
  .lb-row {
    gap: 12px;
    padding: 12px var(--sp-5);
    min-height: 64px;
  }
  .lb-rank,
  .lb-id,
  .lb-strip,
  .lb-fig {
    grid-area: auto;
  }
  .lb-rank {
    align-self: center;
    padding-top: 0;
  }
  .lb-strip {
    padding-left: 0;
  }
  .lb-strip .lb-n,
  .lb-flags--inline {
    display: none;
  }
  .lb-fig .lbl {
    display: none;
  }
  .lb-col {
    display: block;
    text-align: right;
    font-size: var(--fs-sm);
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
  }
  .lb-flags--meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
}

/* compact list rows (not ranked yet, seals, calls) */
.mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  border-top: 1px solid var(--line);
  transition: background var(--dur-fast);
}
.mini-row:first-child {
  border-top: 0;
}
a.mini-row:hover {
  background: var(--hover);
}

/* ============================== proof chain ============================== */
.chain {
  display: flex;
  flex-direction: column;
}
.chain-step {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 12px;
  padding-bottom: var(--sp-4);
}
.chain-step:last-child {
  padding-bottom: 0;
}
.chain-step::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--line-strong);
}
.chain-step:last-child::before {
  display: none;
}
.chain-step[data-state='done']::before {
  background: color-mix(in oklch, var(--proof) 55%, transparent);
}
.chain-mark {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-3);
}
.chain-mark svg {
  width: 13px;
  height: 13px;
}
.chain-step[data-state='done'] .chain-mark {
  background: var(--proof);
  border-color: var(--proof);
  color: var(--page);
}
.chain-step[data-state='current'] .chain-mark {
  border-color: var(--proof);
  color: var(--proof);
}
.chain-step[data-state='current'] .chain-mark::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--proof);
}
.chain-step[data-state='failed'] .chain-mark {
  background: var(--fail);
  border-color: var(--fail);
  color: var(--page);
}
.chain-step[data-state='na'] .chain-mark {
  border-style: dashed;
}
.chain-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 24px;
}
.chain-title time,
.chain-title .t {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  font-weight: var(--fw-regular);
}
.chain-step[data-state='pending'] .chain-title,
.chain-step[data-state='na'] .chain-title {
  color: var(--text-3);
}
.chain-detail {
  font-size: var(--fs-xs);
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.chain-detail a {
  color: var(--text-2);
}

/* ============================== steps (verify / link) ============================== */
.steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.step:first-child {
  border-top: 0;
  padding-top: 0;
}
.step:last-child {
  padding-bottom: 0;
}
.step-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--raised);
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  border: 1px solid var(--line);
  transition:
    background var(--dur-base),
    color var(--dur-base),
    transform var(--dur-base) var(--ease-spring);
}
.step[data-state='ok'] .step-mark {
  background: var(--proof);
  color: var(--page);
  border-color: transparent;
}
.step[data-state='fail'] .step-mark {
  background: var(--fail);
  color: var(--page);
  border-color: transparent;
}
.step[data-state='pending'] .step-mark {
  color: var(--text-3);
}
.step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.step-title {
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
}
.step-desc {
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.step[data-state='fail'] .step-title {
  color: var(--fail);
}
@media (prefers-reduced-motion: no-preference) {
  .step[data-state='ok'] .step-mark,
  .step[data-state='fail'] .step-mark {
    animation: pop var(--dur-slow) var(--ease-spring);
  }
}
@keyframes pop {
  from {
    transform: scale(0.6);
  }
  to {
    transform: none;
  }
}

/* ============================== key/value (QA-3: values wrap) ============================== */
.kv {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 8px 16px;
  font-size: var(--fs-sm);
}
.kv dt {
  color: var(--text-3);
}
.kv dd {
  color: var(--text-1);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.kv--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
.kv--stack dd {
  text-align: left;
  margin-bottom: 8px;
}
.kv .sub {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--text-3);
}

/* ============================== code, hash ============================== */
.addr {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: -0.01em;
}
.hash {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.hash b {
  display: inline-block;
  min-width: 64px;
  margin-right: 8px;
  color: var(--text-3);
  font-weight: var(--fw-medium);
}
.codeblock {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre;
}

/* ============================== notices ============================== */
.notice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--hover);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.notice > svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--text-3);
}
.notice strong {
  color: var(--text-1);
}
.notice--warn {
  background: var(--warn-bg);
  border-color: color-mix(in oklch, var(--warn) 22%, transparent);
}
.notice--warn > svg {
  color: var(--warn);
}
.notice--fail {
  background: var(--fail-bg);
  border-color: color-mix(in oklch, var(--fail) 25%, transparent);
}
.notice--fail > svg {
  color: var(--fail);
}
.notice--proof {
  background: var(--proof-bg);
  border-color: color-mix(in oklch, var(--proof) 22%, transparent);
}
.notice--proof > svg {
  color: var(--proof);
}
.notice[hidden] {
  display: none;
}

/* ============================== empty states that teach ============================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
}
.empty h2 {
  font-size: 19px;
}
.empty p {
  color: var(--text-2);
  font-size: var(--fs-sm);
  max-width: 60ch;
}
.empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--raised);
  color: var(--text-2);
  border: 1px solid var(--line);
}
.empty-icon svg {
  width: 22px;
  height: 22px;
}
.checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  max-width: 560px;
  counter-reset: ck;
}
.checklist li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  counter-increment: ck;
}
.checklist li:first-child {
  border-top: 0;
}
.checklist .ck {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px dashed var(--line-strong);
  color: var(--text-3);
  font-size: 11px;
  font-weight: var(--fw-semi);
}
.checklist .ck::before {
  content: counter(ck);
}
.checklist li[data-done] .ck {
  border: 0;
  background: var(--up);
  color: var(--page);
}
.checklist li[data-done] .ck::before {
  content: '✓';
}
.checklist .ck-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.checklist li[data-done] .ck-label {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}
.checklist .ck-hint {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-weight: var(--fw-regular);
}

/* ============================== skeletons ============================== */
.sk {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--raised) 0%, var(--n-4) 50%, var(--raised) 100%);
  background-size: 200% 100%;
}
.sk-line {
  height: 12px;
}
.sk-line--lg {
  height: 40px;
  width: 55%;
  border-radius: 10px;
}
.sk-fig {
  margin-bottom: 6px;
}
.sk-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.sk-rows .sk:nth-child(2) {
  width: 80%;
}
.sk-rows .sk:nth-child(3) {
  width: 60%;
}
@media (prefers-reduced-motion: no-preference) {
  .sk {
    animation: shimmer 1.4s linear infinite;
  }
}
@keyframes shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

/* ============================== toasts ============================== */
.toasts {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}
@media (min-width: 900px) {
  .toasts {
    left: auto;
    right: 24px;
    top: calc(var(--bar-h) + 16px);
    bottom: auto;
    transform: none;
  }
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--n-12);
  color: var(--n-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-3);
}
.toast svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.toast--warn svg {
  color: var(--warn);
}
.toast--fail svg {
  color: var(--fail);
}
.toast--ok svg {
  color: var(--up);
}
.toast .toast-field {
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 0;
  background: var(--n-11);
  color: var(--n-1);
}
@media (prefers-reduced-motion: no-preference) {
  .toast {
    animation: toast-in var(--dur-base) var(--ease-out);
  }
  .toast[data-leaving] {
    animation: toast-out 160ms ease-in forwards;
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ============================== bottom sheet (dialog) ============================== */
.sheet {
  padding: 0;
  border: 0;
  margin: auto auto 0;
  width: 100%;
  max-width: 100%;
  max-height: 88dvh;
  border-radius: 24px 24px 0 0;
  background: var(--surface);
  color: var(--text-1);
  box-shadow: var(--shadow-3);
  overflow: auto;
}
.sheet::backdrop {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.sheet-grip {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--line-strong);
  margin: 10px auto 0;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 6px 20px;
}
.sheet-head h2 {
  font-size: 18px;
}
.sheet-body {
  padding: 8px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.sheet-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.sheet-foot .btn {
  flex: 1 1 0;
}
@media (min-width: 700px) {
  .sheet {
    margin: auto;
    width: 480px;
    border-radius: 24px;
  }
  .sheet-grip {
    display: none;
  }
  .sheet-foot {
    padding-bottom: 16px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] {
    animation: sheet-up var(--dur-slow) var(--ease-spring);
  }
  .sheet[open]::backdrop {
    animation: fade-in var(--dur-base) ease-out;
  }
  @media (min-width: 700px) {
    .sheet[open] {
      animation: pop-in var(--dur-base) var(--ease-out);
    }
  }
}
@keyframes sheet-up {
  from {
    transform: translateY(40%);
    opacity: 0.4;
  }
}
@keyframes pop-in {
  from {
    transform: translateY(8px) scale(0.98);
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* ============================== forms ============================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field > label,
.field > .field-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-2);
}
.field-hint {
  font-size: var(--fs-2xs);
  color: var(--text-3);
}
.input,
.select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--sunken);
  color: var(--text-1);
  font-size: var(--fs-sm);
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.input::placeholder {
  color: var(--text-4);
}
.input:focus,
.select:focus {
  outline: none;
  border-color: var(--proof);
  box-shadow: 0 0 0 3px var(--proof-bg);
}
.select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 19px,
    calc(100% - 15px) 19px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--sunken);
  cursor: pointer;
}
.toggle input {
  appearance: none;
  flex: none;
  width: 38px;
  height: 22px;
  margin: 1px 0 0;
  border-radius: 11px;
  background: var(--n-6);
  position: relative;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.toggle input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--n-12);
  transition: transform var(--dur-base) var(--ease-spring);
}
.toggle input:checked {
  background: var(--proof);
}
.toggle input:checked::after {
  transform: translateX(16px);
  background: #fff;
}
.toggle .toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.toggle .toggle-text span {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-weight: var(--fw-regular);
}
.inline-form {
  display: flex;
  gap: 8px;
}
.inline-form .input {
  flex: 1 1 auto;
}

/* ============================== tables ============================== */
.table-wrap {
  overflow-x: auto;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th {
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: 11px var(--sp-4);
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.table tr:first-child td {
  border-top: 0;
}
.table .num {
  text-align: right;
}

/* ============================== folds ============================== */
.fold {
  border-top: 1px solid var(--line);
}
.fold:first-child {
  border-top: 0;
}
.fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.fold > summary .meta {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-weight: var(--fw-regular);
}
.fold > summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-base) var(--ease-out);
}
.fold[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.fold-body {
  padding: 0 0 14px;
}

/* ============================== price chart (.pchart) ============================== */
.pchart {
  position: relative;
  height: 260px;
  margin: 8px 0 0;
}
@media (min-width: 768px) {
  .pchart {
    height: 320px;
  }
}
.pchart-plot {
  position: absolute;
  inset: 22px 0 6px 0;
}
.pchart-plot > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pchart .grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}
.pchart .window {
  fill: var(--chart-window);
}
.pchart .line {
  fill: none;
  stroke: var(--chart-line);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: 0.55;
}
.pchart .line-active {
  fill: none;
  stroke: var(--chart-line-active);
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pchart .guide {
  stroke: var(--text-4);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.pchart .base {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
@media (prefers-reduced-motion: no-preference) {
  .pchart .line-active {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw var(--dur-chart) var(--ease-out) forwards;
  }
  .pchart-pin {
    animation: pin-in var(--dur-base) var(--ease-out) both;
    animation-delay: 420ms;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pin-in {
  from {
    opacity: 0;
  }
}
.pchart-y {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-size: 10.5px;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  padding-right: 4px;
  background: var(--surface);
  border-radius: 4px;
}
.pchart-pin {
  position: absolute;
  width: 0;
  height: 0;
}
.pchart-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--chart-line-active);
  box-shadow: 0 0 0 3px var(--surface);
}
.pchart-dot--peak {
  background: var(--surface);
  border: 1.5px dashed var(--text-3);
  box-shadow: none;
}
.pchart-dot--live {
  background: var(--proof);
}
@media (prefers-reduced-motion: no-preference) {
  .pchart-dot--live::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--proof);
    animation: live 2s ease-out infinite;
  }
}
@keyframes live {
  from {
    transform: scale(0.5);
    opacity: 0.9;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}
.pchart-tag {
  position: absolute;
  left: 10px;
  top: 8px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  font-variant-numeric: tabular-nums;
}
.pchart-tag b {
  color: var(--text-1);
  font-weight: var(--fw-semi);
}
.pchart-tag--muted {
  color: var(--text-3);
  background: var(--surface);
  border-style: dashed;
  box-shadow: none;
}
.pchart-tag.tag-up {
  top: -34px;
}
.pchart-tag.tag-left {
  left: auto;
  right: 10px;
}
.pchart-tag.tag-peak {
  left: 12px;
  top: -12px;
}
.pchart-tag.tag-peak.tag-left {
  left: auto;
  right: 12px;
}
.pchart-tag.tag-peak.tag-up {
  top: -34px;
}
.pchart-tag.tag-down {
  top: 10px;
}
.pchart-axis {
  position: relative;
  height: 22px;
}
.pchart-x {
  position: absolute;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: var(--text-4);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pchart-x--start {
  transform: none;
}
.pchart-x--end {
  transform: translateX(-100%);
}
.pchart-off {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: var(--fs-2xs);
  color: var(--text-3);
}
.chart-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
}
.chart-legend .k-entry {
  background: var(--chart-line-active);
}
.chart-legend .k-peak {
  border: 1.5px dashed var(--text-3);
}
.chart-legend .k-window {
  border-radius: 3px;
  background: var(--line-strong);
}

/* ============================== sparkline, results plot, heatmap ============================== */
.spark {
  width: 100%;
  height: 32px;
  overflow: visible;
}
.spark path {
  fill: none;
  stroke: var(--n-9);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.spark--up path {
  stroke: var(--up);
}
.spark--down path {
  stroke: var(--down);
}

.rplot {
  position: relative;
  width: 100%;
}
.rplot svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.rplot .axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}
.rplot .zero {
  stroke: var(--text-4);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.rplot .band-hit {
  fill: var(--up-bg);
}
.rplot .band-rug {
  fill: var(--down-bg);
}
.rplot .med {
  stroke: var(--text-1);
  stroke-width: 2;
}
.rplot .d-up {
  fill: var(--up);
}
.rplot .d-down {
  fill: var(--down);
}
.rplot .d-flat {
  fill: var(--n-8);
}
.rplot circle {
  opacity: 0.85;
}
.rplot text {
  font-family: var(--font-sans);
  font-size: 10.5px;
  fill: var(--text-4);
  font-variant-numeric: tabular-nums;
}
.rplot .med-label {
  fill: var(--text-1);
  font-weight: 600;
  font-size: 11px;
}

.heat {
  width: 100%;
  overflow-x: auto;
}
.heat svg {
  width: 100%;
  max-width: 620px;
  height: auto;
  min-width: 280px;
}
.heat rect {
  rx: 2.5px;
}
.heat .h0 {
  fill: var(--heat-0);
}
.heat .h1 {
  fill: var(--heat-1);
}
.heat .h2 {
  fill: var(--heat-2);
}
.heat .h3 {
  fill: var(--heat-3);
}
.heat .h4 {
  fill: var(--heat-4);
}
.heat .today {
  stroke: var(--text-1);
  stroke-width: 1.2;
}
.heat text {
  font-family: var(--font-sans);
  font-size: 7.5px;
  fill: var(--text-4);
}
.heat-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-2xs);
  color: var(--text-3);
}
.heat-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.heat-legend .h0 {
  background: var(--heat-0);
}
.heat-legend .h1 {
  background: var(--heat-1);
}
.heat-legend .h2 {
  background: var(--heat-2);
}
.heat-legend .h3 {
  background: var(--heat-3);
}
.heat-legend .h4 {
  background: var(--heat-4);
}

/* ============================== token mark ============================== */
.token-dot {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--raised);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-semi);
  color: var(--text-2);
}
.token-dot--lg {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 18px;
}
.token-dot--sm {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 11px;
}

/* ============================== progress ring (open windows) ============================== */
.ring {
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
}
.ring .bg {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 3;
}
.ring .fg {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 3;
  stroke-linecap: round;
}
.meter {
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-2);
}

/* MIKODES Verified Calls — page layouts for the public pages + generated utility classes.
   Components are in components.css, tokens in tokens.css. */

/* ============================== shell ============================== */
.page {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--sp-5) var(--gutter) calc(110px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  .page {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-9);
  }
}
.page--narrow {
  max-width: calc(640px + 2 * var(--gutter));
}
.page--wide {
  max-width: none;
}
.layout {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.layout > .main {
  min-width: 0;
}
.rail {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}
@media (min-width: 1100px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) var(--rail);
    gap: var(--sp-7);
  }
  .rail {
    position: sticky;
    top: calc(var(--bar-h) + 20px);
  }
}
.btn--solid {
  background: var(--text-1);
  color: var(--page);
}
.btn--solid:hover {
  background: var(--n-11);
}

.footer {
  border-top: 1px solid var(--line);
  padding: var(--sp-6) var(--gutter) calc(110px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  .footer {
    padding-bottom: var(--sp-7);
  }
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 900px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-7);
  }
}
.footer-note {
  font-size: var(--fs-xs);
  color: var(--text-3);
  max-width: 60ch;
}
.footer-note strong {
  color: var(--text-2);
  font-weight: var(--fw-semi);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.footer-links a:hover {
  color: var(--text-1);
}

/* page head */
.phead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.phead h1 {
  font-size: var(--fs-title);
  letter-spacing: -0.03em;
  font-weight: var(--fw-semi);
}
.lede {
  color: var(--text-2);
  font-size: var(--fs-body);
  max-width: 64ch;
}
@media (min-width: 900px) {
  .lede {
    font-size: 16px;
  }
}
.phead--center {
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-5);
}
.phead--center .lede {
  margin: 0 auto;
}
.status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: var(--fs-xs);
  margin-top: 2px;
}
.status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-item svg {
  width: 14px;
  height: 14px;
}

/* sticky toolbar under the app bar (window switcher at the thumb) */
.toolbar {
  position: sticky;
  top: var(--bar-h);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  margin: 0 calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  background: transparent;
  transition:
    background-color var(--dur-fast, 150ms) ease,
    box-shadow var(--dur-fast, 150ms) ease;
}
.toolbar.is-stuck {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.toolbar-meta {
  margin-left: auto;
}
@media (max-width: 520px) {
  .toolbar-meta {
    display: none;
  }
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}
.link-more:hover {
  color: var(--text-1);
}
.link-more svg {
  width: 14px;
  height: 14px;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-3);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-3);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.back:hover {
  color: var(--text-1);
}
.back svg {
  width: 15px;
  height: 15px;
}

.mini-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mini-steps li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  font-size: var(--fs-sm);
}
.mini-steps li > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-step-n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: var(--fw-semi);
  color: var(--text-2);
}

/* ============================== leaderboard ============================== */
.board {
  overflow: visible;
}
.board .lb-head {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.board-foot {
  padding: 0 4px;
}
.ne > .ne-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--sp-4);
  font-size: var(--fs-sm);
}
.ne > .ne-sum::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  margin-left: 8px;
  transition: transform var(--dur-base);
}
.ne[open] > .ne-sum::after {
  transform: rotate(225deg);
}
.ne[open] > .ne-sum {
  border-bottom: 1px solid var(--line);
}
.ne .lb-row:first-child {
  border-top: 0;
}

/* ============================== caller profile ============================== */
.profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: var(--sp-4);
}
.profile-id {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.profile-name {
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.profile-meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.profile-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}
@media (min-width: 700px) {
  .profile-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .profile-actions {
    grid-column: auto;
  }
}
.profile-page .toolbar {
  margin-bottom: var(--sp-4);
}
.hero-tile {
  gap: var(--sp-5);
  padding: var(--sp-5);
}
@media (min-width: 768px) {
  .hero-tile {
    padding: var(--sp-6);
  }
}
.hero-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-5);
}
.hero-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 260px;
}
.hero-side-fig {
  font-size: 24px;
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
}
.rplot-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rplot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.rplot-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.lg-dot.d-up {
  background: var(--up);
}
.lg-dot.d-down {
  background: var(--down);
}
.lg-line {
  width: 2px;
  height: 12px;
  background: var(--text-1);
  display: inline-block;
}
.lg-band {
  width: 12px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.lg-band.hit {
  background: var(--up-bg);
}
.lg-band.rug {
  background: var(--down-bg);
}
.badge-preview {
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--line);
}

.call-list {
  overflow: hidden;
}
.call-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-areas: 'tok main fig' 'tok chips chips';
  gap: 4px 12px;
  align-items: center;
  padding: 12px var(--sp-4);
  border-top: 1px solid var(--line);
  transition: background var(--dur-fast);
}
.call-row:first-child {
  border-top: 0;
}
.call-row:hover {
  background: var(--hover);
}
.call-row > .token-dot {
  grid-area: tok;
  align-self: start;
}
.call-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.call-token {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  min-width: 0;
}
.call-seq {
  font-size: var(--fs-2xs);
  color: var(--text-4);
  font-weight: var(--fw-medium);
}
.call-when {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.call-chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.call-chips:empty {
  display: none;
}
.call-fig {
  grid-area: fig;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.call-fig .num {
  font-size: 16px;
  font-weight: var(--fw-semi);
}
.call-fig-lbl {
  font-size: 11px;
  color: var(--text-3);
}
@media (min-width: 900px) {
  .call-row {
    grid-template-columns: 32px minmax(180px, 1fr) minmax(0, auto) 110px;
    grid-template-areas: 'tok main chips fig';
    padding: 12px var(--sp-5);
  }
  .call-chips {
    justify-content: flex-end;
  }
}

/* ============================== call page ============================== */
.call-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.call-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.call-token--xl {
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
  font-weight: var(--fw-semi);
}
.call-token--xl .addr {
  font-size: 1em;
}
.token-line {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.token-full {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-3);
}
.token-chain {
  color: var(--text-2);
  font-weight: var(--fw-medium);
}
.token-line .iconbtn {
  width: 44px;
  height: 44px;
}
.caller-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  max-width: 560px;
  transition: background var(--dur-fast);
}
.caller-strip:hover {
  background: var(--raised);
}
.caller-strip > svg {
  margin-left: auto;
  color: var(--text-3);
}
.call-page .notice {
  margin-bottom: var(--gap);
}
.chart-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chart-src {
  margin-top: 4px;
}
.chart-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px dashed var(--line-strong);
  padding: 20px;
  text-align: center;
}
.results {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.result-hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.result-kv {
  max-width: 520px;
}
.exit-early {
  color: var(--warn);
}
.orail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.orail-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--line);
  min-width: 0;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast);
}
.orail-cell:hover {
  border-color: var(--line-strong);
}
.orail-cell[aria-current='true'] {
  background: var(--raised);
  border-color: var(--text-3);
  box-shadow: var(--shadow-1);
}
.orail-w {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
}
.orail-fig {
  font-size: 20px;
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
}
.orail-sub {
  font-size: 11px;
  color: var(--text-3);
}
.orail-sk {
  height: 22px;
  width: 70%;
  margin: 2px 0;
}
.orail-cell .meter {
  margin-top: 4px;
}
.cost-line {
  padding: 0 4px;
  margin-top: calc(-1 * var(--sp-3));
}
.quote {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--line-strong);
  background: var(--sunken);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.call-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
  color: var(--text-1);
}
.call-text-more > summary {
  color: var(--text-2);
  margin-top: 8px;
}
.edit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--proof);
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot {
    animation: pulse 2s ease-in-out infinite;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}
.proof-card .btn--primary {
  margin-top: 4px;
}

/* ============================== verify ============================== */
.lookup {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin-top: var(--sp-3);
}
.lookup .input {
  flex: 1 1 auto;
  height: 48px;
  font-size: var(--fs-body);
  border-radius: var(--r-md);
}
.lookup .btn {
  height: 48px;
}
.lookup-results {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lookup-results .mini-row {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.verify-stats {
  margin-bottom: var(--sp-6);
}
.seal-list {
  overflow: hidden;
}
.seal-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px 14px;
  padding: 14px var(--sp-4);
  border-top: 1px solid var(--line);
  align-items: start;
}
.seal-row:first-child {
  border-top: 0;
}
.seal-no {
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: 10px;
  background: var(--proof-bg);
  color: var(--proof);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
}
.seal-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.seal-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  font-size: var(--fs-sm);
}
.seal-hash {
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--text-2);
}
.seal-links a:hover {
  color: var(--text-1);
}
.seal-state {
  grid-column: 2;
}
@media (min-width: 700px) {
  .seal-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
  }
  .seal-state {
    grid-column: auto;
  }
}
.vhero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--edge);
}
.vhero h1 {
  font-size: clamp(26px, 3.6vw, 36px);
  letter-spacing: -0.03em;
  margin: 4px 0 6px;
}
.vhero-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.vhero-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--raised);
  color: var(--text-2);
  border: 1px solid var(--line);
}
.vhero-mark svg {
  width: 30px;
  height: 30px;
}
.vhero-mark > svg {
  display: none;
}
.vhero[data-state='pending'] .vhero-mark > svg:only-child {
  display: block;
}
.vhero[data-state='ok'] {
  background: var(--proof-bg);
  border-color: color-mix(in oklch, var(--proof) 30%, transparent);
}
.vhero[data-state='ok'] .vhero-mark {
  background: var(--proof);
  color: var(--page);
  border-color: transparent;
}
.vhero[data-state='ok'] .vhero-mark > svg:nth-of-type(1) {
  display: block;
}
.vhero[data-state='fail'] {
  background: var(--fail-bg);
  border-color: color-mix(in oklch, var(--fail) 35%, transparent);
}
.vhero[data-state='fail'] .vhero-mark {
  background: var(--fail);
  color: var(--page);
  border-color: transparent;
}
.vhero[data-state='fail'] .vhero-mark > svg:last-of-type {
  display: block;
}
.vhero-spin {
  display: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid var(--line-strong);
  border-top-color: var(--proof);
}
.vhero[data-verify-hero][data-state='pending'] .vhero-spin {
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .vhero-spin {
    animation: spin 0.9s linear infinite;
  }
  .vhero[data-state='ok'] .vhero-mark,
  .vhero[data-state='fail'] .vhero-mark {
    animation: pop var(--dur-slow) var(--ease-spring);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 560px) {
  .vhero {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-5);
  }
  .vhero-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
}
.step-hashes {
  border-top: 0;
  margin-top: 4px;
}
.step-hashes > summary {
  padding: 4px 0;
  font-size: var(--fs-xs);
  color: var(--text-2);
  font-weight: var(--fw-medium);
  justify-content: flex-start;
}
.step-hashes > summary::after {
  width: 6px;
  height: 6px;
}
.step-hashes .fold-body {
  padding-bottom: 4px;
}

/* ============================== method ============================== */
.article-layout {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--sp-6);
}
@media (min-width: 1000px) {
  .article-layout {
    grid-template-columns: 220px minmax(0, 720px);
    gap: var(--sp-9);
  }
}
.toc {
  display: none;
}
@media (min-width: 1000px) {
  .toc {
    position: sticky;
    top: calc(var(--bar-h) + 24px);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .toc .tile-label {
    margin-bottom: 8px;
  }
  .toc a {
    display: flex;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: var(--fs-sm);
    color: var(--text-3);
  }
  .toc a:hover {
    background: var(--hover);
    color: var(--text-1);
  }
  .toc a .num {
    width: 14px;
    color: var(--text-4);
  }
}
.article {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  min-width: 0;
}
.article section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: calc(var(--bar-h) + 20px);
}
.article h2 {
  font-size: 22px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.article h3 {
  font-size: var(--fs-h3);
  margin-top: 8px;
}
.article p {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.65;
}
.article p.small {
  font-size: var(--fs-sm);
}
.article strong {
  color: var(--text-1);
}
.sec-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--raised);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bullets li {
  position: relative;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 15px;
}
.bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-4);
}
.diagram {
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.md-axis {
  stroke: var(--line-strong);
  stroke-width: 2;
}
.md-window {
  fill: var(--chart-window);
  stroke: var(--line-strong);
}
.md-post {
  fill: var(--text-4);
}
.md-dot {
  fill: var(--text-1);
  stroke: var(--surface);
  stroke-width: 3;
}
.md text {
  font-family: var(--font-sans);
}
.md-t1 {
  fill: var(--text-1);
  font-size: 14px;
  font-weight: 600;
}
.md-t2 {
  fill: var(--text-2);
  font-size: 13px;
}
.md-t3 {
  fill: var(--text-3);
  font-size: 11.5px;
}
.chain-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  counter-reset: ci;
}
.chain-inline li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--r-pill);
  background: var(--proof-bg);
  color: var(--proof);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  counter-increment: ci;
}
.chain-inline li::before {
  content: counter(ci);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--proof);
  color: var(--page);
  font-size: 11px;
}
.hide-phone {
  display: none;
}
@media (min-width: 700px) {
  .hide-phone {
    display: table-cell;
  }
}
.only-phone {
  display: block;
}
.only-desk {
  display: none;
}
@media (min-width: 700px) {
  .only-phone {
    display: none;
  }
  .only-desk {
    display: block;
  }
}

/* ============================== link ============================== */
.link-who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================== 404 ============================== */
.nf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: var(--sp-9) 0;
  max-width: 560px;
}
.nf-code {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  color: var(--text-4);
  line-height: 1;
}

/* ============================== spacing utilities (markup) ============================== */
.mt-2 {
  margin-top: var(--sp-2);
}
.mt-3 {
  margin-top: var(--sp-3);
}
.mb-2 {
  margin-bottom: var(--sp-2);
}
.maxw-640 {
  max-width: 640px;
}
.page-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--sp-5);
}
.page-head p {
  color: var(--text-2);
  max-width: 64ch;
}

/* ============================== motion ============================== */
@media (prefers-reduced-motion: no-preference) {
  
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur-base);
  }
  ::view-transition-group(*) {
    animation-duration: var(--dur-slow);
    animation-timing-function: var(--ease-in-out);
  }
  .ticking {
    display: inline-block;
    animation: roll var(--dur-roll) var(--ease-out);
  }
}
@keyframes roll {
  from {
    transform: translateY(40%);
    opacity: 0;
  }
}
.flash {
  animation: flash 1s ease-out;
}
@keyframes flash {
  from {
    background: var(--press);
  }
}

/* ============================== generated utilities (no inline styles under the CSP) ============================== */
/* avatar hue (format.avatarHue) */
.hue-0 {
  --h: 0;
}
.hue-1 {
  --h: 1;
}
.hue-2 {
  --h: 2;
}
.hue-3 {
  --h: 3;
}
.hue-4 {
  --h: 4;
}
.hue-5 {
  --h: 5;
}
.hue-6 {
  --h: 6;
}
.hue-7 {
  --h: 7;
}
.hue-8 {
  --h: 8;
}
.hue-9 {
  --h: 9;
}
.hue-10 {
  --h: 10;
}
.hue-11 {
  --h: 11;
}
.hue-12 {
  --h: 12;
}
.hue-13 {
  --h: 13;
}
.hue-14 {
  --h: 14;
}
.hue-15 {
  --h: 15;
}
.hue-16 {
  --h: 16;
}
.hue-17 {
  --h: 17;
}
.hue-18 {
  --h: 18;
}
.hue-19 {
  --h: 19;
}
.hue-20 {
  --h: 20;
}
.hue-21 {
  --h: 21;
}
.hue-22 {
  --h: 22;
}
.hue-23 {
  --h: 23;
}
.hue-24 {
  --h: 24;
}
.hue-25 {
  --h: 25;
}
.hue-26 {
  --h: 26;
}
.hue-27 {
  --h: 27;
}
.hue-28 {
  --h: 28;
}
.hue-29 {
  --h: 29;
}
.hue-30 {
  --h: 30;
}
.hue-31 {
  --h: 31;
}
.hue-32 {
  --h: 32;
}
.hue-33 {
  --h: 33;
}
.hue-34 {
  --h: 34;
}
.hue-35 {
  --h: 35;
}
.hue-36 {
  --h: 36;
}
.hue-37 {
  --h: 37;
}
.hue-38 {
  --h: 38;
}
.hue-39 {
  --h: 39;
}
.hue-40 {
  --h: 40;
}
.hue-41 {
  --h: 41;
}
.hue-42 {
  --h: 42;
}
.hue-43 {
  --h: 43;
}
.hue-44 {
  --h: 44;
}
.hue-45 {
  --h: 45;
}
.hue-46 {
  --h: 46;
}
.hue-47 {
  --h: 47;
}
.hue-48 {
  --h: 48;
}
.hue-49 {
  --h: 49;
}
.hue-50 {
  --h: 50;
}
.hue-51 {
  --h: 51;
}
.hue-52 {
  --h: 52;
}
.hue-53 {
  --h: 53;
}
.hue-54 {
  --h: 54;
}
.hue-55 {
  --h: 55;
}
.hue-56 {
  --h: 56;
}
.hue-57 {
  --h: 57;
}
.hue-58 {
  --h: 58;
}
.hue-59 {
  --h: 59;
}
.hue-60 {
  --h: 60;
}
.hue-61 {
  --h: 61;
}
.hue-62 {
  --h: 62;
}
.hue-63 {
  --h: 63;
}
.hue-64 {
  --h: 64;
}
.hue-65 {
  --h: 65;
}
.hue-66 {
  --h: 66;
}
.hue-67 {
  --h: 67;
}
.hue-68 {
  --h: 68;
}
.hue-69 {
  --h: 69;
}
.hue-70 {
  --h: 70;
}
.hue-71 {
  --h: 71;
}
.hue-72 {
  --h: 72;
}
.hue-73 {
  --h: 73;
}
.hue-74 {
  --h: 74;
}
.hue-75 {
  --h: 75;
}
.hue-76 {
  --h: 76;
}
.hue-77 {
  --h: 77;
}
.hue-78 {
  --h: 78;
}
.hue-79 {
  --h: 79;
}
.hue-80 {
  --h: 80;
}
.hue-81 {
  --h: 81;
}
.hue-82 {
  --h: 82;
}
.hue-83 {
  --h: 83;
}
.hue-84 {
  --h: 84;
}
.hue-85 {
  --h: 85;
}
.hue-86 {
  --h: 86;
}
.hue-87 {
  --h: 87;
}
.hue-88 {
  --h: 88;
}
.hue-89 {
  --h: 89;
}
.hue-90 {
  --h: 90;
}
.hue-91 {
  --h: 91;
}
.hue-92 {
  --h: 92;
}
.hue-93 {
  --h: 93;
}
.hue-94 {
  --h: 94;
}
.hue-95 {
  --h: 95;
}
.hue-96 {
  --h: 96;
}
.hue-97 {
  --h: 97;
}
.hue-98 {
  --h: 98;
}
.hue-99 {
  --h: 99;
}
.hue-100 {
  --h: 100;
}
.hue-101 {
  --h: 101;
}
.hue-102 {
  --h: 102;
}
.hue-103 {
  --h: 103;
}
.hue-104 {
  --h: 104;
}
.hue-105 {
  --h: 105;
}
.hue-106 {
  --h: 106;
}
.hue-107 {
  --h: 107;
}
.hue-108 {
  --h: 108;
}
.hue-109 {
  --h: 109;
}
.hue-110 {
  --h: 110;
}
.hue-111 {
  --h: 111;
}
.hue-112 {
  --h: 112;
}
.hue-113 {
  --h: 113;
}
.hue-114 {
  --h: 114;
}
.hue-115 {
  --h: 115;
}
.hue-116 {
  --h: 116;
}
.hue-117 {
  --h: 117;
}
.hue-118 {
  --h: 118;
}
.hue-119 {
  --h: 119;
}
.hue-120 {
  --h: 120;
}
.hue-121 {
  --h: 121;
}
.hue-122 {
  --h: 122;
}
.hue-123 {
  --h: 123;
}
.hue-124 {
  --h: 124;
}
.hue-125 {
  --h: 125;
}
.hue-126 {
  --h: 126;
}
.hue-127 {
  --h: 127;
}
.hue-128 {
  --h: 128;
}
.hue-129 {
  --h: 129;
}
.hue-130 {
  --h: 130;
}
.hue-131 {
  --h: 131;
}
.hue-132 {
  --h: 132;
}
.hue-133 {
  --h: 133;
}
.hue-134 {
  --h: 134;
}
.hue-135 {
  --h: 135;
}
.hue-136 {
  --h: 136;
}
.hue-137 {
  --h: 137;
}
.hue-138 {
  --h: 138;
}
.hue-139 {
  --h: 139;
}
.hue-140 {
  --h: 140;
}
.hue-141 {
  --h: 141;
}
.hue-142 {
  --h: 142;
}
.hue-143 {
  --h: 143;
}
.hue-144 {
  --h: 144;
}
.hue-145 {
  --h: 145;
}
.hue-146 {
  --h: 146;
}
.hue-147 {
  --h: 147;
}
.hue-148 {
  --h: 148;
}
.hue-149 {
  --h: 149;
}
.hue-150 {
  --h: 150;
}
.hue-151 {
  --h: 151;
}
.hue-152 {
  --h: 152;
}
.hue-153 {
  --h: 153;
}
.hue-154 {
  --h: 154;
}
.hue-155 {
  --h: 155;
}
.hue-156 {
  --h: 156;
}
.hue-157 {
  --h: 157;
}
.hue-158 {
  --h: 158;
}
.hue-159 {
  --h: 159;
}
.hue-160 {
  --h: 160;
}
.hue-161 {
  --h: 161;
}
.hue-162 {
  --h: 162;
}
.hue-163 {
  --h: 163;
}
.hue-164 {
  --h: 164;
}
.hue-165 {
  --h: 165;
}
.hue-166 {
  --h: 166;
}
.hue-167 {
  --h: 167;
}
.hue-168 {
  --h: 168;
}
.hue-169 {
  --h: 169;
}
.hue-170 {
  --h: 170;
}
.hue-171 {
  --h: 171;
}
.hue-172 {
  --h: 172;
}
.hue-173 {
  --h: 173;
}
.hue-174 {
  --h: 174;
}
.hue-175 {
  --h: 175;
}
.hue-176 {
  --h: 176;
}
.hue-177 {
  --h: 177;
}
.hue-178 {
  --h: 178;
}
.hue-179 {
  --h: 179;
}
.hue-180 {
  --h: 180;
}
.hue-181 {
  --h: 181;
}
.hue-182 {
  --h: 182;
}
.hue-183 {
  --h: 183;
}
.hue-184 {
  --h: 184;
}
.hue-185 {
  --h: 185;
}
.hue-186 {
  --h: 186;
}
.hue-187 {
  --h: 187;
}
.hue-188 {
  --h: 188;
}
.hue-189 {
  --h: 189;
}
.hue-190 {
  --h: 190;
}
.hue-191 {
  --h: 191;
}
.hue-192 {
  --h: 192;
}
.hue-193 {
  --h: 193;
}
.hue-194 {
  --h: 194;
}
.hue-195 {
  --h: 195;
}
.hue-196 {
  --h: 196;
}
.hue-197 {
  --h: 197;
}
.hue-198 {
  --h: 198;
}
.hue-199 {
  --h: 199;
}
.hue-200 {
  --h: 200;
}
.hue-201 {
  --h: 201;
}
.hue-202 {
  --h: 202;
}
.hue-203 {
  --h: 203;
}
.hue-204 {
  --h: 204;
}
.hue-205 {
  --h: 205;
}
.hue-206 {
  --h: 206;
}
.hue-207 {
  --h: 207;
}
.hue-208 {
  --h: 208;
}
.hue-209 {
  --h: 209;
}
.hue-210 {
  --h: 210;
}
.hue-211 {
  --h: 211;
}
.hue-212 {
  --h: 212;
}
.hue-213 {
  --h: 213;
}
.hue-214 {
  --h: 214;
}
.hue-215 {
  --h: 215;
}
.hue-216 {
  --h: 216;
}
.hue-217 {
  --h: 217;
}
.hue-218 {
  --h: 218;
}
.hue-219 {
  --h: 219;
}
.hue-220 {
  --h: 220;
}
.hue-221 {
  --h: 221;
}
.hue-222 {
  --h: 222;
}
.hue-223 {
  --h: 223;
}
.hue-224 {
  --h: 224;
}
.hue-225 {
  --h: 225;
}
.hue-226 {
  --h: 226;
}
.hue-227 {
  --h: 227;
}
.hue-228 {
  --h: 228;
}
.hue-229 {
  --h: 229;
}
.hue-230 {
  --h: 230;
}
.hue-231 {
  --h: 231;
}
.hue-232 {
  --h: 232;
}
.hue-233 {
  --h: 233;
}
.hue-234 {
  --h: 234;
}
.hue-235 {
  --h: 235;
}
.hue-236 {
  --h: 236;
}
.hue-237 {
  --h: 237;
}
.hue-238 {
  --h: 238;
}
.hue-239 {
  --h: 239;
}
.hue-240 {
  --h: 240;
}
.hue-241 {
  --h: 241;
}
.hue-242 {
  --h: 242;
}
.hue-243 {
  --h: 243;
}
.hue-244 {
  --h: 244;
}
.hue-245 {
  --h: 245;
}
.hue-246 {
  --h: 246;
}
.hue-247 {
  --h: 247;
}
.hue-248 {
  --h: 248;
}
.hue-249 {
  --h: 249;
}
.hue-250 {
  --h: 250;
}
.hue-251 {
  --h: 251;
}
.hue-252 {
  --h: 252;
}
.hue-253 {
  --h: 253;
}
.hue-254 {
  --h: 254;
}
.hue-255 {
  --h: 255;
}
.hue-256 {
  --h: 256;
}
.hue-257 {
  --h: 257;
}
.hue-258 {
  --h: 258;
}
.hue-259 {
  --h: 259;
}
.hue-260 {
  --h: 260;
}
.hue-261 {
  --h: 261;
}
.hue-262 {
  --h: 262;
}
.hue-263 {
  --h: 263;
}
.hue-264 {
  --h: 264;
}
.hue-265 {
  --h: 265;
}
.hue-266 {
  --h: 266;
}
.hue-267 {
  --h: 267;
}
.hue-268 {
  --h: 268;
}
.hue-269 {
  --h: 269;
}
.hue-270 {
  --h: 270;
}
.hue-271 {
  --h: 271;
}
.hue-272 {
  --h: 272;
}
.hue-273 {
  --h: 273;
}
.hue-274 {
  --h: 274;
}
.hue-275 {
  --h: 275;
}
.hue-276 {
  --h: 276;
}
.hue-277 {
  --h: 277;
}
.hue-278 {
  --h: 278;
}
.hue-279 {
  --h: 279;
}
.hue-280 {
  --h: 280;
}
.hue-281 {
  --h: 281;
}
.hue-282 {
  --h: 282;
}
.hue-283 {
  --h: 283;
}
.hue-284 {
  --h: 284;
}
.hue-285 {
  --h: 285;
}
.hue-286 {
  --h: 286;
}
.hue-287 {
  --h: 287;
}
.hue-288 {
  --h: 288;
}
.hue-289 {
  --h: 289;
}
.hue-290 {
  --h: 290;
}
.hue-291 {
  --h: 291;
}
.hue-292 {
  --h: 292;
}
.hue-293 {
  --h: 293;
}
.hue-294 {
  --h: 294;
}
.hue-295 {
  --h: 295;
}
.hue-296 {
  --h: 296;
}
.hue-297 {
  --h: 297;
}
.hue-298 {
  --h: 298;
}
.hue-299 {
  --h: 299;
}
.hue-300 {
  --h: 300;
}
.hue-301 {
  --h: 301;
}
.hue-302 {
  --h: 302;
}
.hue-303 {
  --h: 303;
}
.hue-304 {
  --h: 304;
}
.hue-305 {
  --h: 305;
}
.hue-306 {
  --h: 306;
}
.hue-307 {
  --h: 307;
}
.hue-308 {
  --h: 308;
}
.hue-309 {
  --h: 309;
}
.hue-310 {
  --h: 310;
}
.hue-311 {
  --h: 311;
}
.hue-312 {
  --h: 312;
}
.hue-313 {
  --h: 313;
}
.hue-314 {
  --h: 314;
}
.hue-315 {
  --h: 315;
}
.hue-316 {
  --h: 316;
}
.hue-317 {
  --h: 317;
}
.hue-318 {
  --h: 318;
}
.hue-319 {
  --h: 319;
}
.hue-320 {
  --h: 320;
}
.hue-321 {
  --h: 321;
}
.hue-322 {
  --h: 322;
}
.hue-323 {
  --h: 323;
}
.hue-324 {
  --h: 324;
}
.hue-325 {
  --h: 325;
}
.hue-326 {
  --h: 326;
}
.hue-327 {
  --h: 327;
}
.hue-328 {
  --h: 328;
}
.hue-329 {
  --h: 329;
}
.hue-330 {
  --h: 330;
}
.hue-331 {
  --h: 331;
}
.hue-332 {
  --h: 332;
}
.hue-333 {
  --h: 333;
}
.hue-334 {
  --h: 334;
}
.hue-335 {
  --h: 335;
}
.hue-336 {
  --h: 336;
}
.hue-337 {
  --h: 337;
}
.hue-338 {
  --h: 338;
}
.hue-339 {
  --h: 339;
}
.hue-340 {
  --h: 340;
}
.hue-341 {
  --h: 341;
}
.hue-342 {
  --h: 342;
}
.hue-343 {
  --h: 343;
}
.hue-344 {
  --h: 344;
}
.hue-345 {
  --h: 345;
}
.hue-346 {
  --h: 346;
}
.hue-347 {
  --h: 347;
}
.hue-348 {
  --h: 348;
}
.hue-349 {
  --h: 349;
}
.hue-350 {
  --h: 350;
}
.hue-351 {
  --h: 351;
}
.hue-352 {
  --h: 352;
}
.hue-353 {
  --h: 353;
}
.hue-354 {
  --h: 354;
}
.hue-355 {
  --h: 355;
}
.hue-356 {
  --h: 356;
}
.hue-357 {
  --h: 357;
}
.hue-358 {
  --h: 358;
}
.hue-359 {
  --h: 359;
}
/* chart pins: 0.5% steps */
.px-0 {
  left: 0%;
}
.px-1 {
  left: 0.5%;
}
.px-2 {
  left: 1%;
}
.px-3 {
  left: 1.5%;
}
.px-4 {
  left: 2%;
}
.px-5 {
  left: 2.5%;
}
.px-6 {
  left: 3%;
}
.px-7 {
  left: 3.5%;
}
.px-8 {
  left: 4%;
}
.px-9 {
  left: 4.5%;
}
.px-10 {
  left: 5%;
}
.px-11 {
  left: 5.5%;
}
.px-12 {
  left: 6%;
}
.px-13 {
  left: 6.5%;
}
.px-14 {
  left: 7%;
}
.px-15 {
  left: 7.5%;
}
.px-16 {
  left: 8%;
}
.px-17 {
  left: 8.5%;
}
.px-18 {
  left: 9%;
}
.px-19 {
  left: 9.5%;
}
.px-20 {
  left: 10%;
}
.px-21 {
  left: 10.5%;
}
.px-22 {
  left: 11%;
}
.px-23 {
  left: 11.5%;
}
.px-24 {
  left: 12%;
}
.px-25 {
  left: 12.5%;
}
.px-26 {
  left: 13%;
}
.px-27 {
  left: 13.5%;
}
.px-28 {
  left: 14%;
}
.px-29 {
  left: 14.5%;
}
.px-30 {
  left: 15%;
}
.px-31 {
  left: 15.5%;
}
.px-32 {
  left: 16%;
}
.px-33 {
  left: 16.5%;
}
.px-34 {
  left: 17%;
}
.px-35 {
  left: 17.5%;
}
.px-36 {
  left: 18%;
}
.px-37 {
  left: 18.5%;
}
.px-38 {
  left: 19%;
}
.px-39 {
  left: 19.5%;
}
.px-40 {
  left: 20%;
}
.px-41 {
  left: 20.5%;
}
.px-42 {
  left: 21%;
}
.px-43 {
  left: 21.5%;
}
.px-44 {
  left: 22%;
}
.px-45 {
  left: 22.5%;
}
.px-46 {
  left: 23%;
}
.px-47 {
  left: 23.5%;
}
.px-48 {
  left: 24%;
}
.px-49 {
  left: 24.5%;
}
.px-50 {
  left: 25%;
}
.px-51 {
  left: 25.5%;
}
.px-52 {
  left: 26%;
}
.px-53 {
  left: 26.5%;
}
.px-54 {
  left: 27%;
}
.px-55 {
  left: 27.5%;
}
.px-56 {
  left: 28%;
}
.px-57 {
  left: 28.5%;
}
.px-58 {
  left: 29%;
}
.px-59 {
  left: 29.5%;
}
.px-60 {
  left: 30%;
}
.px-61 {
  left: 30.5%;
}
.px-62 {
  left: 31%;
}
.px-63 {
  left: 31.5%;
}
.px-64 {
  left: 32%;
}
.px-65 {
  left: 32.5%;
}
.px-66 {
  left: 33%;
}
.px-67 {
  left: 33.5%;
}
.px-68 {
  left: 34%;
}
.px-69 {
  left: 34.5%;
}
.px-70 {
  left: 35%;
}
.px-71 {
  left: 35.5%;
}
.px-72 {
  left: 36%;
}
.px-73 {
  left: 36.5%;
}
.px-74 {
  left: 37%;
}
.px-75 {
  left: 37.5%;
}
.px-76 {
  left: 38%;
}
.px-77 {
  left: 38.5%;
}
.px-78 {
  left: 39%;
}
.px-79 {
  left: 39.5%;
}
.px-80 {
  left: 40%;
}
.px-81 {
  left: 40.5%;
}
.px-82 {
  left: 41%;
}
.px-83 {
  left: 41.5%;
}
.px-84 {
  left: 42%;
}
.px-85 {
  left: 42.5%;
}
.px-86 {
  left: 43%;
}
.px-87 {
  left: 43.5%;
}
.px-88 {
  left: 44%;
}
.px-89 {
  left: 44.5%;
}
.px-90 {
  left: 45%;
}
.px-91 {
  left: 45.5%;
}
.px-92 {
  left: 46%;
}
.px-93 {
  left: 46.5%;
}
.px-94 {
  left: 47%;
}
.px-95 {
  left: 47.5%;
}
.px-96 {
  left: 48%;
}
.px-97 {
  left: 48.5%;
}
.px-98 {
  left: 49%;
}
.px-99 {
  left: 49.5%;
}
.px-100 {
  left: 50%;
}
.px-101 {
  left: 50.5%;
}
.px-102 {
  left: 51%;
}
.px-103 {
  left: 51.5%;
}
.px-104 {
  left: 52%;
}
.px-105 {
  left: 52.5%;
}
.px-106 {
  left: 53%;
}
.px-107 {
  left: 53.5%;
}
.px-108 {
  left: 54%;
}
.px-109 {
  left: 54.5%;
}
.px-110 {
  left: 55%;
}
.px-111 {
  left: 55.5%;
}
.px-112 {
  left: 56%;
}
.px-113 {
  left: 56.5%;
}
.px-114 {
  left: 57%;
}
.px-115 {
  left: 57.5%;
}
.px-116 {
  left: 58%;
}
.px-117 {
  left: 58.5%;
}
.px-118 {
  left: 59%;
}
.px-119 {
  left: 59.5%;
}
.px-120 {
  left: 60%;
}
.px-121 {
  left: 60.5%;
}
.px-122 {
  left: 61%;
}
.px-123 {
  left: 61.5%;
}
.px-124 {
  left: 62%;
}
.px-125 {
  left: 62.5%;
}
.px-126 {
  left: 63%;
}
.px-127 {
  left: 63.5%;
}
.px-128 {
  left: 64%;
}
.px-129 {
  left: 64.5%;
}
.px-130 {
  left: 65%;
}
.px-131 {
  left: 65.5%;
}
.px-132 {
  left: 66%;
}
.px-133 {
  left: 66.5%;
}
.px-134 {
  left: 67%;
}
.px-135 {
  left: 67.5%;
}
.px-136 {
  left: 68%;
}
.px-137 {
  left: 68.5%;
}
.px-138 {
  left: 69%;
}
.px-139 {
  left: 69.5%;
}
.px-140 {
  left: 70%;
}
.px-141 {
  left: 70.5%;
}
.px-142 {
  left: 71%;
}
.px-143 {
  left: 71.5%;
}
.px-144 {
  left: 72%;
}
.px-145 {
  left: 72.5%;
}
.px-146 {
  left: 73%;
}
.px-147 {
  left: 73.5%;
}
.px-148 {
  left: 74%;
}
.px-149 {
  left: 74.5%;
}
.px-150 {
  left: 75%;
}
.px-151 {
  left: 75.5%;
}
.px-152 {
  left: 76%;
}
.px-153 {
  left: 76.5%;
}
.px-154 {
  left: 77%;
}
.px-155 {
  left: 77.5%;
}
.px-156 {
  left: 78%;
}
.px-157 {
  left: 78.5%;
}
.px-158 {
  left: 79%;
}
.px-159 {
  left: 79.5%;
}
.px-160 {
  left: 80%;
}
.px-161 {
  left: 80.5%;
}
.px-162 {
  left: 81%;
}
.px-163 {
  left: 81.5%;
}
.px-164 {
  left: 82%;
}
.px-165 {
  left: 82.5%;
}
.px-166 {
  left: 83%;
}
.px-167 {
  left: 83.5%;
}
.px-168 {
  left: 84%;
}
.px-169 {
  left: 84.5%;
}
.px-170 {
  left: 85%;
}
.px-171 {
  left: 85.5%;
}
.px-172 {
  left: 86%;
}
.px-173 {
  left: 86.5%;
}
.px-174 {
  left: 87%;
}
.px-175 {
  left: 87.5%;
}
.px-176 {
  left: 88%;
}
.px-177 {
  left: 88.5%;
}
.px-178 {
  left: 89%;
}
.px-179 {
  left: 89.5%;
}
.px-180 {
  left: 90%;
}
.px-181 {
  left: 90.5%;
}
.px-182 {
  left: 91%;
}
.px-183 {
  left: 91.5%;
}
.px-184 {
  left: 92%;
}
.px-185 {
  left: 92.5%;
}
.px-186 {
  left: 93%;
}
.px-187 {
  left: 93.5%;
}
.px-188 {
  left: 94%;
}
.px-189 {
  left: 94.5%;
}
.px-190 {
  left: 95%;
}
.px-191 {
  left: 95.5%;
}
.px-192 {
  left: 96%;
}
.px-193 {
  left: 96.5%;
}
.px-194 {
  left: 97%;
}
.px-195 {
  left: 97.5%;
}
.px-196 {
  left: 98%;
}
.px-197 {
  left: 98.5%;
}
.px-198 {
  left: 99%;
}
.px-199 {
  left: 99.5%;
}
.px-200 {
  left: 100%;
}
.py-0 {
  top: 0%;
}
.py-1 {
  top: 0.5%;
}
.py-2 {
  top: 1%;
}
.py-3 {
  top: 1.5%;
}
.py-4 {
  top: 2%;
}
.py-5 {
  top: 2.5%;
}
.py-6 {
  top: 3%;
}
.py-7 {
  top: 3.5%;
}
.py-8 {
  top: 4%;
}
.py-9 {
  top: 4.5%;
}
.py-10 {
  top: 5%;
}
.py-11 {
  top: 5.5%;
}
.py-12 {
  top: 6%;
}
.py-13 {
  top: 6.5%;
}
.py-14 {
  top: 7%;
}
.py-15 {
  top: 7.5%;
}
.py-16 {
  top: 8%;
}
.py-17 {
  top: 8.5%;
}
.py-18 {
  top: 9%;
}
.py-19 {
  top: 9.5%;
}
.py-20 {
  top: 10%;
}
.py-21 {
  top: 10.5%;
}
.py-22 {
  top: 11%;
}
.py-23 {
  top: 11.5%;
}
.py-24 {
  top: 12%;
}
.py-25 {
  top: 12.5%;
}
.py-26 {
  top: 13%;
}
.py-27 {
  top: 13.5%;
}
.py-28 {
  top: 14%;
}
.py-29 {
  top: 14.5%;
}
.py-30 {
  top: 15%;
}
.py-31 {
  top: 15.5%;
}
.py-32 {
  top: 16%;
}
.py-33 {
  top: 16.5%;
}
.py-34 {
  top: 17%;
}
.py-35 {
  top: 17.5%;
}
.py-36 {
  top: 18%;
}
.py-37 {
  top: 18.5%;
}
.py-38 {
  top: 19%;
}
.py-39 {
  top: 19.5%;
}
.py-40 {
  top: 20%;
}
.py-41 {
  top: 20.5%;
}
.py-42 {
  top: 21%;
}
.py-43 {
  top: 21.5%;
}
.py-44 {
  top: 22%;
}
.py-45 {
  top: 22.5%;
}
.py-46 {
  top: 23%;
}
.py-47 {
  top: 23.5%;
}
.py-48 {
  top: 24%;
}
.py-49 {
  top: 24.5%;
}
.py-50 {
  top: 25%;
}
.py-51 {
  top: 25.5%;
}
.py-52 {
  top: 26%;
}
.py-53 {
  top: 26.5%;
}
.py-54 {
  top: 27%;
}
.py-55 {
  top: 27.5%;
}
.py-56 {
  top: 28%;
}
.py-57 {
  top: 28.5%;
}
.py-58 {
  top: 29%;
}
.py-59 {
  top: 29.5%;
}
.py-60 {
  top: 30%;
}
.py-61 {
  top: 30.5%;
}
.py-62 {
  top: 31%;
}
.py-63 {
  top: 31.5%;
}
.py-64 {
  top: 32%;
}
.py-65 {
  top: 32.5%;
}
.py-66 {
  top: 33%;
}
.py-67 {
  top: 33.5%;
}
.py-68 {
  top: 34%;
}
.py-69 {
  top: 34.5%;
}
.py-70 {
  top: 35%;
}
.py-71 {
  top: 35.5%;
}
.py-72 {
  top: 36%;
}
.py-73 {
  top: 36.5%;
}
.py-74 {
  top: 37%;
}
.py-75 {
  top: 37.5%;
}
.py-76 {
  top: 38%;
}
.py-77 {
  top: 38.5%;
}
.py-78 {
  top: 39%;
}
.py-79 {
  top: 39.5%;
}
.py-80 {
  top: 40%;
}
.py-81 {
  top: 40.5%;
}
.py-82 {
  top: 41%;
}
.py-83 {
  top: 41.5%;
}
.py-84 {
  top: 42%;
}
.py-85 {
  top: 42.5%;
}
.py-86 {
  top: 43%;
}
.py-87 {
  top: 43.5%;
}
.py-88 {
  top: 44%;
}
.py-89 {
  top: 44.5%;
}
.py-90 {
  top: 45%;
}
.py-91 {
  top: 45.5%;
}
.py-92 {
  top: 46%;
}
.py-93 {
  top: 46.5%;
}
.py-94 {
  top: 47%;
}
.py-95 {
  top: 47.5%;
}
.py-96 {
  top: 48%;
}
.py-97 {
  top: 48.5%;
}
.py-98 {
  top: 49%;
}
.py-99 {
  top: 49.5%;
}
.py-100 {
  top: 50%;
}
.py-101 {
  top: 50.5%;
}
.py-102 {
  top: 51%;
}
.py-103 {
  top: 51.5%;
}
.py-104 {
  top: 52%;
}
.py-105 {
  top: 52.5%;
}
.py-106 {
  top: 53%;
}
.py-107 {
  top: 53.5%;
}
.py-108 {
  top: 54%;
}
.py-109 {
  top: 54.5%;
}
.py-110 {
  top: 55%;
}
.py-111 {
  top: 55.5%;
}
.py-112 {
  top: 56%;
}
.py-113 {
  top: 56.5%;
}
.py-114 {
  top: 57%;
}
.py-115 {
  top: 57.5%;
}
.py-116 {
  top: 58%;
}
.py-117 {
  top: 58.5%;
}
.py-118 {
  top: 59%;
}
.py-119 {
  top: 59.5%;
}
.py-120 {
  top: 60%;
}
.py-121 {
  top: 60.5%;
}
.py-122 {
  top: 61%;
}
.py-123 {
  top: 61.5%;
}
.py-124 {
  top: 62%;
}
.py-125 {
  top: 62.5%;
}
.py-126 {
  top: 63%;
}
.py-127 {
  top: 63.5%;
}
.py-128 {
  top: 64%;
}
.py-129 {
  top: 64.5%;
}
.py-130 {
  top: 65%;
}
.py-131 {
  top: 65.5%;
}
.py-132 {
  top: 66%;
}
.py-133 {
  top: 66.5%;
}
.py-134 {
  top: 67%;
}
.py-135 {
  top: 67.5%;
}
.py-136 {
  top: 68%;
}
.py-137 {
  top: 68.5%;
}
.py-138 {
  top: 69%;
}
.py-139 {
  top: 69.5%;
}
.py-140 {
  top: 70%;
}
.py-141 {
  top: 70.5%;
}
.py-142 {
  top: 71%;
}
.py-143 {
  top: 71.5%;
}
.py-144 {
  top: 72%;
}
.py-145 {
  top: 72.5%;
}
.py-146 {
  top: 73%;
}
.py-147 {
  top: 73.5%;
}
.py-148 {
  top: 74%;
}
.py-149 {
  top: 74.5%;
}
.py-150 {
  top: 75%;
}
.py-151 {
  top: 75.5%;
}
.py-152 {
  top: 76%;
}
.py-153 {
  top: 76.5%;
}
.py-154 {
  top: 77%;
}
.py-155 {
  top: 77.5%;
}
.py-156 {
  top: 78%;
}
.py-157 {
  top: 78.5%;
}
.py-158 {
  top: 79%;
}
.py-159 {
  top: 79.5%;
}
.py-160 {
  top: 80%;
}
.py-161 {
  top: 80.5%;
}
.py-162 {
  top: 81%;
}
.py-163 {
  top: 81.5%;
}
.py-164 {
  top: 82%;
}
.py-165 {
  top: 82.5%;
}
.py-166 {
  top: 83%;
}
.py-167 {
  top: 83.5%;
}
.py-168 {
  top: 84%;
}
.py-169 {
  top: 84.5%;
}
.py-170 {
  top: 85%;
}
.py-171 {
  top: 85.5%;
}
.py-172 {
  top: 86%;
}
.py-173 {
  top: 86.5%;
}
.py-174 {
  top: 87%;
}
.py-175 {
  top: 87.5%;
}
.py-176 {
  top: 88%;
}
.py-177 {
  top: 88.5%;
}
.py-178 {
  top: 89%;
}
.py-179 {
  top: 89.5%;
}
.py-180 {
  top: 90%;
}
.py-181 {
  top: 90.5%;
}
.py-182 {
  top: 91%;
}
.py-183 {
  top: 91.5%;
}
.py-184 {
  top: 92%;
}
.py-185 {
  top: 92.5%;
}
.py-186 {
  top: 93%;
}
.py-187 {
  top: 93.5%;
}
.py-188 {
  top: 94%;
}
.py-189 {
  top: 94.5%;
}
.py-190 {
  top: 95%;
}
.py-191 {
  top: 95.5%;
}
.py-192 {
  top: 96%;
}
.py-193 {
  top: 96.5%;
}
.py-194 {
  top: 97%;
}
.py-195 {
  top: 97.5%;
}
.py-196 {
  top: 98%;
}
.py-197 {
  top: 98.5%;
}
.py-198 {
  top: 99%;
}
.py-199 {
  top: 99.5%;
}
.py-200 {
  top: 100%;
}
/* meters */
.w-0 {
  width: 0%;
}
.w-1 {
  width: 1%;
}
.w-2 {
  width: 2%;
}
.w-3 {
  width: 3%;
}
.w-4 {
  width: 4%;
}
.w-5 {
  width: 5%;
}
.w-6 {
  width: 6%;
}
.w-7 {
  width: 7%;
}
.w-8 {
  width: 8%;
}
.w-9 {
  width: 9%;
}
.w-10 {
  width: 10%;
}
.w-11 {
  width: 11%;
}
.w-12 {
  width: 12%;
}
.w-13 {
  width: 13%;
}
.w-14 {
  width: 14%;
}
.w-15 {
  width: 15%;
}
.w-16 {
  width: 16%;
}
.w-17 {
  width: 17%;
}
.w-18 {
  width: 18%;
}
.w-19 {
  width: 19%;
}
.w-20 {
  width: 20%;
}
.w-21 {
  width: 21%;
}
.w-22 {
  width: 22%;
}
.w-23 {
  width: 23%;
}
.w-24 {
  width: 24%;
}
.w-25 {
  width: 25%;
}
.w-26 {
  width: 26%;
}
.w-27 {
  width: 27%;
}
.w-28 {
  width: 28%;
}
.w-29 {
  width: 29%;
}
.w-30 {
  width: 30%;
}
.w-31 {
  width: 31%;
}
.w-32 {
  width: 32%;
}
.w-33 {
  width: 33%;
}
.w-34 {
  width: 34%;
}
.w-35 {
  width: 35%;
}
.w-36 {
  width: 36%;
}
.w-37 {
  width: 37%;
}
.w-38 {
  width: 38%;
}
.w-39 {
  width: 39%;
}
.w-40 {
  width: 40%;
}
.w-41 {
  width: 41%;
}
.w-42 {
  width: 42%;
}
.w-43 {
  width: 43%;
}
.w-44 {
  width: 44%;
}
.w-45 {
  width: 45%;
}
.w-46 {
  width: 46%;
}
.w-47 {
  width: 47%;
}
.w-48 {
  width: 48%;
}
.w-49 {
  width: 49%;
}
.w-50 {
  width: 50%;
}
.w-51 {
  width: 51%;
}
.w-52 {
  width: 52%;
}
.w-53 {
  width: 53%;
}
.w-54 {
  width: 54%;
}
.w-55 {
  width: 55%;
}
.w-56 {
  width: 56%;
}
.w-57 {
  width: 57%;
}
.w-58 {
  width: 58%;
}
.w-59 {
  width: 59%;
}
.w-60 {
  width: 60%;
}
.w-61 {
  width: 61%;
}
.w-62 {
  width: 62%;
}
.w-63 {
  width: 63%;
}
.w-64 {
  width: 64%;
}
.w-65 {
  width: 65%;
}
.w-66 {
  width: 66%;
}
.w-67 {
  width: 67%;
}
.w-68 {
  width: 68%;
}
.w-69 {
  width: 69%;
}
.w-70 {
  width: 70%;
}
.w-71 {
  width: 71%;
}
.w-72 {
  width: 72%;
}
.w-73 {
  width: 73%;
}
.w-74 {
  width: 74%;
}
.w-75 {
  width: 75%;
}
.w-76 {
  width: 76%;
}
.w-77 {
  width: 77%;
}
.w-78 {
  width: 78%;
}
.w-79 {
  width: 79%;
}
.w-80 {
  width: 80%;
}
.w-81 {
  width: 81%;
}
.w-82 {
  width: 82%;
}
.w-83 {
  width: 83%;
}
.w-84 {
  width: 84%;
}
.w-85 {
  width: 85%;
}
.w-86 {
  width: 86%;
}
.w-87 {
  width: 87%;
}
.w-88 {
  width: 88%;
}
.w-89 {
  width: 89%;
}
.w-90 {
  width: 90%;
}
.w-91 {
  width: 91%;
}
.w-92 {
  width: 92%;
}
.w-93 {
  width: 93%;
}
.w-94 {
  width: 94%;
}
.w-95 {
  width: 95%;
}
.w-96 {
  width: 96%;
}
.w-97 {
  width: 97%;
}
.w-98 {
  width: 98%;
}
.w-99 {
  width: 99%;
}
.w-100 {
  width: 100%;
}
/* brand accent hue from the settings (components/brand.ts) */
.accent-h-0 {
  --accent-h: 0;
}
.accent-h-5 {
  --accent-h: 5;
}
.accent-h-10 {
  --accent-h: 10;
}
.accent-h-15 {
  --accent-h: 15;
}
.accent-h-20 {
  --accent-h: 20;
}
.accent-h-25 {
  --accent-h: 25;
}
.accent-h-30 {
  --accent-h: 30;
}
.accent-h-35 {
  --accent-h: 35;
}
.accent-h-40 {
  --accent-h: 40;
}
.accent-h-45 {
  --accent-h: 45;
}
.accent-h-50 {
  --accent-h: 50;
}
.accent-h-55 {
  --accent-h: 55;
}
.accent-h-60 {
  --accent-h: 60;
}
.accent-h-65 {
  --accent-h: 65;
}
.accent-h-70 {
  --accent-h: 70;
}
.accent-h-75 {
  --accent-h: 75;
}
.accent-h-80 {
  --accent-h: 80;
}
.accent-h-85 {
  --accent-h: 85;
}
.accent-h-90 {
  --accent-h: 90;
}
.accent-h-95 {
  --accent-h: 95;
}
.accent-h-100 {
  --accent-h: 100;
}
.accent-h-105 {
  --accent-h: 105;
}
.accent-h-110 {
  --accent-h: 110;
}
.accent-h-115 {
  --accent-h: 115;
}
.accent-h-120 {
  --accent-h: 120;
}
.accent-h-125 {
  --accent-h: 125;
}
.accent-h-130 {
  --accent-h: 130;
}
.accent-h-135 {
  --accent-h: 135;
}
.accent-h-140 {
  --accent-h: 140;
}
.accent-h-145 {
  --accent-h: 145;
}
.accent-h-150 {
  --accent-h: 150;
}
.accent-h-155 {
  --accent-h: 155;
}
.accent-h-160 {
  --accent-h: 160;
}
.accent-h-165 {
  --accent-h: 165;
}
.accent-h-170 {
  --accent-h: 170;
}
.accent-h-175 {
  --accent-h: 175;
}
.accent-h-180 {
  --accent-h: 180;
}
.accent-h-185 {
  --accent-h: 185;
}
.accent-h-190 {
  --accent-h: 190;
}
.accent-h-195 {
  --accent-h: 195;
}
.accent-h-200 {
  --accent-h: 200;
}
.accent-h-205 {
  --accent-h: 205;
}
.accent-h-210 {
  --accent-h: 210;
}
.accent-h-215 {
  --accent-h: 215;
}
.accent-h-220 {
  --accent-h: 220;
}
.accent-h-225 {
  --accent-h: 225;
}
.accent-h-230 {
  --accent-h: 230;
}
.accent-h-235 {
  --accent-h: 235;
}
.accent-h-240 {
  --accent-h: 240;
}
.accent-h-245 {
  --accent-h: 245;
}
.accent-h-250 {
  --accent-h: 250;
}
.accent-h-255 {
  --accent-h: 255;
}
.accent-h-260 {
  --accent-h: 260;
}
.accent-h-265 {
  --accent-h: 265;
}
.accent-h-270 {
  --accent-h: 270;
}
.accent-h-275 {
  --accent-h: 275;
}
.accent-h-280 {
  --accent-h: 280;
}
.accent-h-285 {
  --accent-h: 285;
}
.accent-h-290 {
  --accent-h: 290;
}
.accent-h-295 {
  --accent-h: 295;
}
.accent-h-300 {
  --accent-h: 300;
}
.accent-h-305 {
  --accent-h: 305;
}
.accent-h-310 {
  --accent-h: 310;
}
.accent-h-315 {
  --accent-h: 315;
}
.accent-h-320 {
  --accent-h: 320;
}
.accent-h-325 {
  --accent-h: 325;
}
.accent-h-330 {
  --accent-h: 330;
}
.accent-h-335 {
  --accent-h: 335;
}
.accent-h-340 {
  --accent-h: 340;
}
.accent-h-345 {
  --accent-h: 345;
}
.accent-h-350 {
  --accent-h: 350;
}
.accent-h-355 {
  --accent-h: 355;
}
@media (max-width: 560px) {
  .demo-banner > span {
    display: none;
  }
  .ne-sum > .xsmall {
    display: none;
  }
}

/* Revenue centre: trading row + Jupiter swap on call pages, Groups directory, paid listings, sponsored
   slot, API page, and the operations screens under /admin/ops/revenue. Tokens only (tokens.css); no inline styles. */

/* ---- trading row --------------------------------------------------------------------------------- */
.buy-card .trade-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.buy-card .trade-links .btn {
  justify-content: center;
}
.trade-disclosure strong {
  color: var(--text-2);
  font-weight: var(--fw-semi);
}
.swap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.swap .btn svg {
  width: 16px;
  height: 16px;
}
.swap-target {
  min-height: 0;
  border-radius: var(--r-md);
  overflow: hidden;
}
.swap-target:not([hidden]) {
  min-height: 420px;
  background: var(--sunken);
  border: 1px solid var(--line);
}
.swap-target.is-loading {
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: var(--fs-xs);
}

/* ---- groups directory ---------------------------------------------------------------------------- */
.group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--edge);
  overflow: hidden;
}
.group-list li + li {
  border-top: 1px solid var(--line);
}
.group-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px var(--sp-4);
  transition: background var(--dur-fast);
}
.group-row:hover {
  background: var(--hover);
}
.group-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.group-name {
  font-weight: var(--fw-semi);
  font-size: var(--fs-body);
}
.group-fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 64px;
}
.group-fig .num {
  font-weight: var(--fw-semi);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.group-fig--hide {
  display: none;
}
.group-go {
  color: var(--text-4);
  display: inline-flex;
}
.group-go svg {
  width: 18px;
  height: 18px;
}
@media (min-width: 720px) {
  .group-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    gap: 20px;
    padding: 16px var(--sp-5);
  }
  .group-fig--hide {
    display: flex;
  }
  .group-fig {
    min-width: 84px;
  }
}

.listing-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.listing-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.listing-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
}
.listing-headline {
  font-size: 17px;
  font-weight: var(--fw-semi);
  letter-spacing: -0.015em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.listing-desc {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.listing-card .cluster {
  margin-top: auto;
}

.groups-foot {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .groups-foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sponsored {
  border-style: dashed;
}
.sponsored-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-3xs);
}
.sponsored-headline {
  font-weight: var(--fw-semi);
  font-size: var(--fs-body);
  overflow-wrap: anywhere;
}

/* ---- paid listing request + payment ---------------------------------------------------------------- */
.textarea {
  height: auto;
  min-height: 104px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}
.plain-list {
  margin: 4px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pay-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--line);
}
.pay-amount {
  font-size: 34px;
  font-weight: var(--fw-semi);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.pay-asset {
  font-size: 17px;
  color: var(--text-3);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}
.pay-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 620px) {
  .pay-grid {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.qr-plate {
  justify-self: center;
  padding: 10px;
  border-radius: var(--r-lg);
  background: #ffffff;
  box-shadow: var(--shadow-2);
  line-height: 0;
}
.qr-plate .qr {
  width: 232px;
  height: 232px;
  max-width: 100%;
}

/* ---- API page ------------------------------------------------------------------------------------ */
.api-endpoints {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 24px;
  margin: 0;
}
.api-endpoints dt {
  font-size: 12.5px;
  color: var(--text-1);
  padding-top: 10px;
  overflow-wrap: anywhere;
}
.api-endpoints dt:first-child {
  padding-top: 0;
}
.api-endpoints dd {
  margin: 0;
}
@media (min-width: 860px) {
  .api-endpoints {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .api-endpoints dt {
    padding-top: 0;
  }
}

/* ---- operations: revenue centre ------------------------------------------------------------------- */
.rv-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .rv-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.rv-card {
  display: flex;
  flex-direction: column;
}
.rv-card .adm-panel-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.rv-facts {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 6px 16px;
  font-size: 13px;
  margin: 0;
}
.rv-facts dt {
  color: var(--text-3);
}
.rv-facts dd {
  margin: 0;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.rv-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.rv-preview {
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  padding: 12px;
  background: var(--sunken);
}
.rv-preview .card {
  box-shadow: none;
}
.rv-targets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
}
.rv-targets li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.rv-targets code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.rv-problems {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--warn);
}
.rv-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rv-bar {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.rv-bar-track {
  height: 8px;
  border-radius: 99px;
  background: var(--sunken);
  overflow: hidden;
}
.rv-bar-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--text-3);
}
.rv-bar .num {
  text-align: right;
}
.rv-key {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--line-strong);
  overflow-wrap: anywhere;
  user-select: all;
}
.rv-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.rv-form .field {
  flex: 1 1 180px;
  min-width: 0;
}
.rv-form .input,
.rv-form .select {
  height: 38px;
}

.calc {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1000px) {
  .calc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.calc-inputs {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.calc-inputs .field {
  min-width: 0;
}
.calc-inputs .input {
  height: 38px;
}
.calc-inputs h3 {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--text-2);
  margin-top: 6px;
}
.calc-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.calc-line:first-child {
  border-top: 0;
  padding-top: 0;
}
.calc-line .num {
  font-weight: var(--fw-semi);
  font-size: 17px;
}
.calc-formula {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.calc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
}
.calc-total .num {
  font-size: 28px;
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
}
.calc-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-md);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 12.5px;
  font-weight: var(--fw-medium);
}
.adm-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.adm-rowlinks .adm-inline + .adm-inline,
.adm-rowlinks .adm-inline {
  margin-right: 4px;
}
.rv-bar .adm-meter {
  width: 100%;
  height: 8px;
}

/* Follower pages: token page + tokens list, live feed, search, groups directory stats, simulator.
   Tokens only (tokens.css); no inline styles (CSP). Green / red only on finished results. */

/* ---- shared ---------------------------------------------------------------------------------------- */
.big-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin-top: 4px;
}
.big-search > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.big-search .input {
  padding-left: 40px;
  border-radius: var(--r-pill);
  height: 48px;
  font-size: var(--fs-body);
}
.big-search .btn {
  flex: none;
}
@media (max-width: 480px) {
  .big-search .btn {
    display: none;
  }
}
.sr-q {
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.live-pulse {
  background: var(--proof) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .live-pulse {
    animation: pulse 2s ease-in-out infinite;
  }
}
.head-pad {
  padding: var(--sp-4) var(--sp-4) 0;
  margin-bottom: var(--sp-2);
}
@media (min-width: 768px) {
  .head-pad {
    padding: var(--sp-5) var(--sp-5) 0;
  }
}

/* ---- token page -------------------------------------------------------------------------------------- */
.token-page .call-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: var(--sp-5);
}
.token-page .lede {
  max-width: 70ch;
}
.tchart .line-active {
  stroke-width: 2;
}
.tchart-pin {
  z-index: 2;
}
.tchart-n {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--raised);
  color: var(--text-1);
  border: 1.5px solid var(--chart-line-active);
  box-shadow: 0 0 0 3px var(--surface);
  font-size: 11px;
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.tchart-n:hover,
.tchart-n:focus-visible {
  transform: scale(1.15);
  background: var(--chart-line-active);
  color: var(--surface);
}
.chart-legend .k-pin {
  border: 1.5px solid var(--chart-line-active);
  background: var(--raised);
}

.tl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tl-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-areas: 'n who go' 'n cells cells' 'n entry entry' 'n chips chips';
  gap: 6px 12px;
  align-items: center;
  padding: 14px var(--sp-4);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.tl-row:first-child {
  border-top: 0;
}
.tl-row:target {
  background: var(--hover);
}
.tl-row--reshill {
  background: oklch(from var(--text-1) l c h / 0.015);
}
.tl-row--reshill .tl-n {
  color: var(--text-4);
}
.tl-n {
  grid-area: n;
  align-self: start;
  margin-top: 7px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  text-align: center;
}
.tl-who {
  grid-area: who;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.tl-who:hover .tl-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tl-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tl-name {
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
}
.tl-meta {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-first {
  color: var(--proof);
  font-weight: var(--fw-medium);
}
.tl-later {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.tl-entry {
  grid-area: entry;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
}
.tl-k {
  font-size: var(--fs-3xs);
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tl-cells {
  grid-area: cells;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.wcell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  border: 1px solid var(--line);
  min-width: 0;
}
.wcell-w {
  font-size: var(--fs-3xs);
  color: var(--text-4);
  font-weight: var(--fw-medium);
}
.wcell .num {
  font-size: 15px;
  font-weight: var(--fw-semi);
}
.tl-go {
  grid-area: go;
  color: var(--text-4);
  display: inline-flex;
  padding: 6px;
  margin: -6px;
  border-radius: var(--r-sm);
}
.tl-go:hover {
  color: var(--text-1);
  background: var(--hover);
}
.tl-go svg {
  width: 18px;
  height: 18px;
}
.tl-chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (min-width: 760px) {
  .tl-row {
    grid-template-columns: 22px minmax(180px, 1fr) 118px minmax(250px, 300px) 24px;
    grid-template-areas: 'n who entry cells go' 'n chips chips chips chips';
    padding: 14px var(--sp-5);
  }
  .tl-entry {
    flex-direction: column;
    gap: 0;
    align-items: flex-end;
  }
  .tl-chips {
    padding-left: 42px;
  }
  .tl-chips:empty {
    display: none;
  }
}

/* ---- tokens list -------------------------------------------------------------------------------------- */
.tok-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tok-list li + li {
  border-top: 1px solid var(--line);
}
.tok-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px var(--sp-4);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast);
}
.tok-row:hover {
  background: var(--hover);
}
.tok-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tok-mint {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tok-meta {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tok-fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 52px;
}
.tok-fig .num {
  font-weight: var(--fw-semi);
  font-size: 16px;
}
.tok-k {
  font-size: var(--fs-3xs);
  color: var(--text-4);
}
.tok-fig--hide,
.tok-fig--when {
  display: none;
}
@media (min-width: 720px) {
  .tok-row {
    grid-template-columns: 32px minmax(0, 1fr) auto auto auto auto;
    gap: 20px;
    padding: 13px var(--sp-5);
  }
  .tok-fig--hide,
  .tok-fig--when {
    display: flex;
  }
  .tok-fig--when {
    min-width: 96px;
  }
}

/* ---- live feed ------------------------------------------------------------------------------------------ */
.feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feed-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px var(--sp-4);
  border-top: 1px solid var(--line);
}
.feed-row:first-child {
  border-top: 0;
}
@media (min-width: 768px) {
  .feed-row {
    padding: 16px var(--sp-5);
    gap: 14px;
  }
}
.feed-row.is-new {
  background: var(--proof-bg);
}
@media (prefers-reduced-motion: no-preference) {
  .feed-row.is-new {
    animation: feed-in var(--dur-slow) var(--ease-out) both;
  }
  .feed-row {
    transition: background 1.2s ease;
  }
}
@keyframes feed-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.feed-av {
  display: inline-flex;
  margin-top: 2px;
}
.feed-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.feed-l1 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.feed-name {
  font-weight: var(--fw-semi);
  font-size: var(--fs-body);
  color: var(--text-1);
  text-decoration: none;
  max-width: 100%;
}
.feed-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.feed-l2 {
  font-size: var(--fs-xs);
  color: var(--text-3);
  min-width: 0;
  overflow-wrap: anywhere;
}
.feed-tok {
  color: var(--text-1);
  font-weight: var(--fw-medium);
  text-decoration: none;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--raised);
  border: 1px solid var(--line);
}
.feed-tok:hover {
  border-color: var(--line-strong);
}
.feed-src {
  display: inline;
}
.feed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.feed-chips a.chip {
  text-decoration: none;
}
.feed-chips a.chip:hover {
  border-color: var(--line-strong);
  color: var(--text-1);
}
.feed-fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 1px;
  min-width: 64px;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.feed-fig:hover {
  background: var(--hover);
}
.feed-fig .num {
  font-size: 17px;
  font-weight: var(--fw-semi);
}
.feed-fig-lbl {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.rec {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--raised);
  border: 1px solid var(--line);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}
.rec .num {
  font-weight: var(--fw-semi);
  font-size: var(--fs-xs);
}
.rec-n {
  color: var(--text-3);
}
.rec--few {
  background: transparent;
}
.rec--none {
  color: var(--text-4);
  background: transparent;
}
.feed-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
}

/* ---- search ----------------------------------------------------------------------------------------------- */
.sr-list {
  display: flex;
  flex-direction: column;
}
.sr-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px var(--sp-4);
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--line);
  transition: background var(--dur-fast);
}
.sr-row:first-child {
  border-top: 0;
}
.sr-row:hover {
  background: var(--hover);
}
@media (min-width: 768px) {
  .sr-row {
    padding: 13px var(--sp-5);
    gap: 16px;
  }
}
.sr-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sr-title {
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
}
.sr-meta {
  font-size: var(--fs-2xs);
  color: var(--text-3);
}
.sr-fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.sr-fig .num {
  font-weight: var(--fw-semi);
  font-size: 16px;
}

/* ---- groups directory stats (the /groups page) -------------------------------------------------------------- */
.gdir-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px var(--sp-4);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast);
}
.gdir-row:hover {
  background: var(--hover);
}
.gdir-fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 60px;
}
.gdir-fig .num {
  font-weight: var(--fw-semi);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.gdir-fig--hide {
  display: none;
}
.gdir-row > .gdir-fig:not(.gdir-fig--med):not(.gdir-fig--hide) {
  display: none;
}
@media (min-width: 720px) {
  .gdir-row {
    grid-template-columns: auto minmax(0, 1fr) 110px 70px 70px 70px auto;
    gap: 18px;
    padding: 16px var(--sp-5);
  }
  .gdir-fig--hide,
  .gdir-row > .gdir-fig:not(.gdir-fig--med):not(.gdir-fig--hide) {
    display: flex;
  }
}

/* ---- simulator ------------------------------------------------------------------------------------------------ */
.sim-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sim-form > .field,
.sim-form > .sim-more,
.sim-form > .sim-actions {
  min-width: 0;
}
.sim-form .sim-exit,
.sim-form > .sim-more,
.sim-form > .sim-actions,
.sim-form > .field:has(#sim-caller) {
  grid-column: 1 / -1;
}
.sim-form .input,
.sim-form .select {
  height: 42px;
}
.affix {
  position: relative;
  display: flex;
  align-items: center;
}
.affix > span {
  position: absolute;
  left: 12px;
  color: var(--text-3);
  font-size: var(--fs-sm);
  pointer-events: none;
}
.affix > .input {
  padding-left: 26px;
}
.affix--end > span {
  left: auto;
  right: 12px;
}
.affix--end > .affix-pre {
  left: 12px;
  right: auto;
}
.affix--end > .input {
  padding-left: 14px;
  padding-right: 48px;
}
.affix--end:has(.affix-pre) > .input {
  padding-left: 26px;
}
.affix--wide > .input {
  padding-right: 92px;
}
.sim-only {
  display: none;
}
.sim-form:has(#sim-exit option[value='tpsl']:checked) .sim-only--tpsl,
.sim-form:has(#sim-exit option[value='trail']:checked) .sim-only--trail,
.sim-form:has(#sim-exit option[value='tpsl']:checked) .sim-only--hold,
.sim-form:has(#sim-exit option[value='trail']:checked) .sim-only--hold {
  display: flex;
}
.sim-more {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunken);
}
.sim-more > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-2);
  list-style: none;
}
.sim-more > summary::-webkit-details-marker {
  display: none;
}
.sim-more > summary::after {
  content: '+';
  float: right;
  color: var(--text-3);
}
.sim-more[open] > summary::after {
  content: '−';
}
.sim-more-body {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}
.sim-actions .btn {
  width: 100%;
  justify-content: center;
}
.sim-actions .btn svg {
  width: 15px;
  height: 15px;
}
@media (min-width: 900px) {
  .sim-form--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
  }
  .sim-form--compact .sim-exit {
    grid-column: span 2;
  }
  .sim-form--compact > .sim-actions {
    grid-column: span 2;
  }
  .sim-form--compact > .sim-more {
    grid-column: span 2;
    align-self: end;
  }
}

.sim-card {
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.sim-result {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.sim-result--empty {
  gap: 6px;
}
.sim-none {
  font-weight: var(--fw-semi);
}
.sim-hero {
  display: grid;
  gap: var(--sp-4);
}
.sim-hero .hero-num {
  font-size: var(--fs-hero-sm);
}
.sim-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.sim-facts > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--line);
  min-width: 0;
}
.sim-facts dt {
  font-size: var(--fs-3xs);
  color: var(--text-3);
  font-weight: var(--fw-medium);
}
.sim-facts dd {
  margin: 0;
}
.sim-facts dd.num {
  font-size: 18px;
  font-weight: var(--fw-semi);
}
@media (min-width: 900px) {
  .sim-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
  }
}
.sim-skipped b {
  color: var(--warn);
  font-weight: var(--fw-semi);
}
.eq {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eq-svg {
  width: 100%;
  height: 140px;
  display: block;
}
.eq-zero {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.eq-line {
  fill: none;
  stroke: var(--chart-line-active);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.eq-area {
  fill: oklch(from var(--chart-line-active) l c h / 0.06);
  stroke: none;
}
.eq-axis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.eq-axis span:nth-child(2) {
  text-align: center;
}
@media (max-width: 480px) {
  .eq-axis span:nth-child(2) {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .eq-svg {
    animation: eq-in var(--dur-chart) var(--ease-out) both;
  }
}
@keyframes eq-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.sim-page .phead {
  margin-bottom: var(--sp-6);
}
.sim-who-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.sim-who-link:hover .h-md {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sim-compare,
.sim-trades {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sim-compare li + li,
.sim-trades li + li {
  border-top: 1px solid var(--line);
}
.sim-row {
  display: grid;
  grid-template-columns: 22px 32px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px var(--sp-4);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast);
}
.sim-row:hover {
  background: var(--hover);
}
@media (min-width: 768px) {
  .sim-row {
    padding: 13px var(--sp-5);
    gap: 16px;
  }
}
.sim-row-n {
  color: var(--text-3);
  font-size: var(--fs-xs);
  text-align: center;
}
.sim-row-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sim-row-name {
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
}
.sim-row-fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.sim-row-fig .num {
  font-weight: var(--fw-semi);
  font-size: 16px;
}
.sim-trade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'tok net' 'px net' 'why why';
  gap: 2px 12px;
  padding: 10px var(--sp-4);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast);
}
.sim-trade:hover {
  background: var(--hover);
}
.sim-trade-tok {
  grid-area: tok;
  font-size: var(--fs-sm);
}
.sim-trade-px {
  grid-area: px;
  color: var(--text-2);
}
.sim-trade-why {
  grid-area: why;
}
.sim-trade-net {
  grid-area: net;
  align-self: center;
  font-weight: var(--fw-semi);
  font-size: 16px;
}
@media (min-width: 768px) {
  .sim-trade {
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) 90px;
    grid-template-areas: 'tok px why net';
    align-items: center;
    padding: 11px var(--sp-5);
  }
  .sim-trade-net {
    text-align: right;
  }
}
.sim-compare-foot {
  margin: 0;
  padding: 12px var(--sp-4) 16px;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .sim-compare-foot {
    padding: 12px var(--sp-5) 18px;
  }
}
.sim-busy {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
/* one column: the settings come before the result on /simulator */
@media (max-width: 1099px) {
  .sim-page .layout > .rail {
    order: -1;
  }
}

/* VIP membership pages (/vip, /vip/pay/:id) — paid membership gate. Tokens only; no inline styles (CSP). */
.vip-page {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}
.vip-hero {
  gap: 14px;
}
.vip-hero h1 {
  font-size: var(--fs-display);
  letter-spacing: var(--track-tight);
  line-height: 1.08;
  max-width: 22ch;
}
.vip-lock {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--proof);
}
.vip-lock svg {
  width: 14px;
  height: 14px;
}
.vip-facts {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .vip-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
  }
}
.vip-facts li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-2);
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--edge);
}
.vip-facts svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--text-3);
}

.vip-plans {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 760px) {
  .vip-plans--2,
  .vip-plans--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1040px) {
  .vip-plans--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 760px) {
  .vip-plans--1 {
    grid-template-columns: minmax(0, 520px);
  }
}
.vip-plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .vip-plan {
    padding: var(--sp-6);
  }
}
.vip-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0;
}
.vip-plan-name {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-title);
  overflow-wrap: anywhere;
}
.vip-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.vip-price-num {
  font-size: clamp(40px, 7vw, 52px);
  font-weight: var(--fw-semi);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-1);
}
.vip-price-unit {
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--text-2);
}
.vip-price-per {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.vip-star {
  font-size: 0.62em;
  margin-right: 4px;
  color: var(--warn);
  vertical-align: 0.18em;
}
.vip-alt {
  margin: -6px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.vip-perks {
  list-style: none;
  margin: 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vip-perks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.vip-perks svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--proof);
}
.vip-pay {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--sp-2);
}
.vip-pay-form {
  margin: 0;
}
.vip-offline {
  margin: 0;
}

/* payment page: paid → open the bot */
.vip-done {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.vip-done-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--proof-bg);
  color: var(--proof);
}
.vip-done-mark svg {
  width: 22px;
  height: 22px;
}
.vip-code {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--line);
}
.vip-code .cluster {
  justify-content: space-between;
  flex-wrap: wrap;
}
.vip-code code {
  overflow-wrap: anywhere;
  color: var(--text-1);
}

/* Operations → Members (/admin/ops/members*): layout helpers next to admin.css */
.mb-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}
.mb-toolbar-row .adm-toolbar {
  flex: 1 1 360px;
  justify-content: flex-end;
}
.mb-grant-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .mb-grant-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.6fr);
  }
}
.mb-rowlink {
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.mb-rowlink:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mb-revoke {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mb-revoke .input {
  flex: 1 1 200px;
  min-width: 0;
}
.vip-page--pay {
  max-width: 760px;
}
.mb-strike {
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}
@media (max-width: 759px) {
  .vip-facts li {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
}
.mb-proof {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* Integrity flags (src/integrity): coordinated bursts and the VIP lead on the token page, the rules on
   /methodology, the mark form under Operations → Integrity. Tokens only (tokens.css); no inline styles (CSP). */
.integ-card {
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.integ-card:target {
  box-shadow:
    0 0 0 1px var(--line-strong),
    var(--edge);
}
.integ-burst + .integ-burst {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
}
.integ-burst > p {
  margin: 0 0 8px;
}
.integ-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.integ-list li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas: 't who go' 't src src';
  align-items: center;
  gap: 0 10px;
  padding: 6px 0;
}
.integ-list li + li {
  border-top: 1px solid var(--line);
}
.integ-t {
  grid-area: t;
  font-size: var(--fs-xs);
  color: var(--text-3);
  align-self: start;
  padding-top: 3px;
}
.integ-who {
  grid-area: who;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.integ-who:hover .truncate {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.integ-src {
  grid-area: src;
  padding-left: 32px;
}
.integ-go {
  grid-area: go;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
  .integ-list li {
    grid-template-columns: 72px minmax(0, 1.2fr) minmax(0, 1fr) auto;
    grid-template-areas: 't who src go';
  }
  .integ-src {
    padding-left: 0;
  }
}
.integ-lead-fig {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.integ-lead-fig .num {
  font-size: var(--fs-display);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-tight);
  color: var(--proof);
}
.integ-lead-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: 'k call time' 'k seal seal';
  gap: 2px 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.integ-lead-row .tile-label {
  grid-area: k;
}
.integ-lead-row > a {
  grid-area: call;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.integ-lead-row > time {
  grid-area: time;
}
.integ-seal {
  grid-area: seal;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.integ-rules {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px 16px;
  margin: var(--sp-3) 0;
}
.integ-rules dt {
  padding-top: 2px;
}
.integ-rules dd {
  margin: 0;
  color: var(--text-2);
}
@media (max-width: 520px) {
  .integ-rules {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .integ-rules dd {
    margin-bottom: 10px;
  }
}
.integ-mark .adm-grow {
  flex: 1 1 220px;
  min-width: 0;
}
.integ-mark .adm-grow .input {
  width: 100%;
}
.integ-mark .adm-error {
  color: var(--fail);
  margin: 0;
}

/* Share sheet (src/cards/share.ts): the card as the preview, then four plain actions. */
.share-card {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--line);
  aspect-ratio: 1200 / 630;
}
.share-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.share-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.share-actions .btn {
  width: 100%;
  justify-content: center;
  min-width: 0;
}
.share-note {
  margin: 0;
}
.call-title .share-slot {
  margin-left: auto;
  flex: none;
}
/* Phone: the call title keeps its width — Share becomes an icon button (the label stays for screen readers). */
@media (max-width: 699px) {
  .call-title .share-slot > .btn {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .call-title .share-slot > .btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}