/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 · genre: modern-minimal · macrostructure: Stat-Led Command Deck · design-system: design.md · designed-as-app */
@import url("./tokens.css");
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 · genre: modern-minimal · theme: graphite-blue / cool paper · macrostructure: ATH evidence ledger + dossiers · shell: compact header drawer · enrichment: sourced logos + honest market data · design-system: design.md · nav: N11 · footer: Ft2 · slop/contrast/honesty/chrome/tokens/responsive/mobile/icons: pass */
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-500.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-700.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
/* Display face for titles. Playfair Display is the editorial/museum serif the
   brief pointed at; it is self-hosted as a latin woff2 subset alongside Geist
   rather than pulled from a CDN, so the site keeps its single-origin fonts.
   It is a variable face, so one file covers 400-900. */
@font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-600.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ============================================================
   Crypto Bros — market intelligence UI
   Token warna mengikuti palet data-viz tervalidasi.
   ============================================================ */

/* Hallmark · genre: modern-minimal · macrostructure: Market Workbench
   · design-system: design.md · designed-as-app */
/* Hallmark · pre-emit critique: the prior UI repeated large cards, exposed
   refresh mechanics, and split the market story. This pass prioritizes one
   dense research flow, restrained blue accents, and visible data provenance. */

:root {
  color-scheme: dark;

  --surface: oklch(19% 0.008 255);
  --surface-2: oklch(23% 0.01 255);
  --plane: oklch(13% 0.008 255);
  --ink: oklch(98% 0.004 255);
  --ink-2: oklch(79% 0.01 255);
  --muted: oklch(61% 0.012 255);
  --grid: oklch(28% 0.008 255);
  --axis: oklch(34% 0.008 255);
  --border: oklch(100% 0 0 / 0.11);
  --border-2: oklch(100% 0 0 / 0.06);

  /* sequential (magnitude) */
  --seq-lo: oklch(32% 0.1 253);
  --seq-mid: oklch(62% 0.17 253);
  --seq-hi: oklch(88% 0.06 250);
  --seq-01: #0d366b;
  --seq-02: #104281;
  --seq-03: #184f95;
  --seq-04: #1c5cab;
  --seq-05: #256abf;
  --seq-06: #2a78d6;
  --seq-07: #3987e5;
  --seq-08: #5598e7;
  --seq-09: #6da7ec;
  --seq-10: #86b6ef;
  --seq-11: #9ec5f4;
  --seq-12: #b7d3f6;
  --seq-13: #cde2fb;

  /* diverging (polaritas) */
  --up: oklch(69% 0.15 248);
  --down: oklch(66% 0.16 24);
  --div-up-1: #184f95;
  --div-up-2: #256abf;
  --div-up-3: #3987e5;
  --div-up-4: #6da7ec;
  --div-down-1: #793b3a;
  --div-down-2: #a54b4b;
  --div-down-3: #d05d5d;
  --div-down-4: #f77675;

  --good: oklch(70% 0.16 145);
  --warn: oklch(80% 0.16 82);
  --crit: oklch(62% 0.2 25);
  --serious: #ec835a;
  --accent-ink: oklch(100% 0.004 255);
  --warn-ink: oklch(16% 0.03 82);
  --crit-ink: oklch(82% 0.08 24);
  --surface-hover: oklch(25% 0.014 255);
  --surface-raised: oklch(21% 0.01 255);
  --surface-image: oklch(23% 0.014 255);
  --overlay-header: oklch(13% 0.008 255 / 0.92);
  --overlay-legend: oklch(13% 0.008 255 / 0.86);
  --overlay-tooltip: oklch(13% 0.008 255 / 0.97);
  --ink-03: oklch(100% 0.004 255 / 0.03);
  --ink-035: oklch(100% 0.004 255 / 0.035);
  --ink-04: oklch(100% 0.004 255 / 0.04);
  --ink-05: oklch(100% 0.004 255 / 0.05);
  --ink-055: oklch(100% 0.004 255 / 0.055);
  --ink-06: oklch(100% 0.004 255 / 0.06);
  --ink-07: oklch(100% 0.004 255 / 0.07);
  --ink-20: oklch(100% 0.004 255 / 0.2);
  --accent-14: oklch(62% 0.17 253 / 0.14);
  --accent-15: oklch(62% 0.17 253 / 0.15);
  --accent-16: oklch(62% 0.17 253 / 0.16);
  --accent-20: oklch(62% 0.17 253 / 0.2);
  --accent-28: oklch(62% 0.17 253 / 0.28);
  --accent-30: oklch(62% 0.17 253 / 0.3);
  --accent-35: oklch(62% 0.17 253 / 0.35);
  --accent-40: oklch(62% 0.17 253 / 0.4);
  --accent-45: oklch(62% 0.17 253 / 0.45);
  --accent-50: oklch(62% 0.17 253 / 0.5);
  --accent-55: oklch(62% 0.17 253 / 0.55);
  --warn-07: oklch(80% 0.16 82 / 0.07);
  --warn-12: oklch(80% 0.16 82 / 0.12);
  --warn-26: oklch(80% 0.16 82 / 0.26);
  --warn-48: oklch(80% 0.16 82 / 0.48);
  --crit-12: oklch(66% 0.16 24 / 0.12);
  --crit-36: oklch(66% 0.16 24 / 0.36);
  --shadow-medium: oklch(8% 0.008 255 / 0.45);
  --shadow-strong: oklch(8% 0.008 255 / 0.55);
  --shadow-toast: oklch(8% 0.008 255 / 0.5);
  --map-land: #1a1f27;
  --map-stroke: rgba(255, 255, 255, 0.09);
  --map-grid-line: rgba(255, 255, 255, 0.04);
  --map-glow: rgba(87, 152, 231, 0.2);
  --map-glow-clear: rgba(87, 152, 231, 0);
  --map-stroke-strong: rgba(255, 255, 255, 0.55);
  --map-label-bg: rgba(11, 13, 16, 0.78);

  --radius: 8px;
  --radius-sm: 6px;
  --wrap: 1380px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --font: "Geist", "Segoe UI", sans-serif;
  /* Titles carry the display serif; everything else stays on Geist. */
  --font-title: "Playfair Display", "Iowan Old Style", Georgia, serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface: oklch(98% 0.004 255);
  --surface-2: oklch(95% 0.008 255);
  --plane: oklch(92.5% 0.012 255);
  --ink: oklch(20% 0.018 255);
  --ink-2: oklch(36% 0.018 255);
  --muted: oklch(49% 0.016 255);
  --grid: oklch(83% 0.012 255);
  --axis: oklch(68% 0.012 255);
  --border: oklch(20% 0.018 255 / 0.16);
  --border-2: oklch(20% 0.018 255 / 0.09);
  --seq-lo: oklch(40% 0.13 253);
  --seq-mid: oklch(54% 0.19 253);
  --seq-hi: oklch(39% 0.15 253);
  --up: oklch(48% 0.17 253);
  --down: oklch(51% 0.19 24);
  --accent-ink: oklch(99% 0.004 255);
  --crit-ink: oklch(35% 0.14 24);
  --surface-hover: oklch(92% 0.014 255);
  --surface-raised: oklch(97% 0.006 255);
  --surface-image: oklch(94% 0.012 255);
  --overlay-header: oklch(98% 0.004 255 / 0.92);
  --overlay-legend: oklch(98% 0.004 255 / 0.9);
  --overlay-tooltip: oklch(99% 0.003 255 / 0.98);
  --ink-03: oklch(20% 0.018 255 / 0.03);
  --ink-035: oklch(20% 0.018 255 / 0.035);
  --ink-04: oklch(20% 0.018 255 / 0.04);
  --ink-05: oklch(20% 0.018 255 / 0.05);
  --ink-055: oklch(20% 0.018 255 / 0.055);
  --ink-06: oklch(20% 0.018 255 / 0.06);
  --ink-07: oklch(20% 0.018 255 / 0.07);
  --ink-20: oklch(20% 0.018 255 / 0.2);
  --shadow-medium: oklch(30% 0.02 255 / 0.18);
  --shadow-strong: oklch(30% 0.02 255 / 0.22);
  --shadow-toast: oklch(30% 0.02 255 / 0.18);
  --map-land: #d7dde6;
  --map-stroke: rgba(35, 50, 70, 0.16);
  --map-grid-line: rgba(35, 50, 70, 0.08);
  --map-glow: rgba(42, 120, 214, 0.18);
  --map-glow-clear: rgba(42, 120, 214, 0);
  --map-stroke-strong: rgba(22, 42, 68, 0.62);
  --map-label-bg: rgba(248, 250, 253, 0.9);
}

* { box-sizing: border-box; }

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

/* Contract-first token research ----------------------------------------- */
.token-identity-strip {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.8fr) minmax(180px, .6fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  margin: 0 0 18px;
}

.token-identity-strip > * {
  min-width: 0;
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--border);
}

.token-identity-strip > *:last-child { border-right: 0; }

.token-identity-strip .dossier-stat strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-explorer-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 18px;
  color: var(--ink);
  text-decoration: none;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  transition: background-color 160ms ease, color 160ms ease;
}

.identity-explorer-link span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.identity-explorer-link:hover,
.identity-explorer-link:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.token-lore-section { margin: 0 0 18px; }

.token-lore-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: var(--radius);
  padding: clamp(18px, 2.5vw, 28px);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%,
    var(--surface) 52%);
  box-shadow: inset 3px 0 0 var(--accent);
}

.token-lore-card.is-pending {
  border-color: var(--border);
  box-shadow: inset 3px 0 0 var(--muted);
}

.token-lore-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.token-lore-prompt {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 12px;
  color: var(--accent);
  background: var(--plane);
  font: 700 16px/1 var(--mono);
}

.token-lore-head h2 { margin: 3px 0 0; font-size: clamp(20px, 2vw, 27px); }

.token-lore-state,
.provenance-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--border));
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, var(--surface));
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.is-pending .token-lore-state { color: var(--muted); border-color: var(--border); background: var(--plane); }

.token-lore-copy {
  max-width: 82ch;
  margin: 18px 0;
  color: var(--ink);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.7;
}

.token-lore-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.token-lore-foot small { color: var(--muted); text-align: right; }
.token-lore-sources,
.launchpad-source-row { display: flex; flex-wrap: wrap; gap: 8px; }

.lore-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--ink);
  background: var(--plane);
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease;
}

.lore-source-chip:hover,
.lore-source-chip:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.lore-source-chip .source-logo-wrap { width: 20px; height: 20px; }
.lore-source-chip .source-logo { max-width: 20px; max-height: 20px; }
.lore-source-chip .source-copy strong { font-size: 12px; }
.lore-source-chip .source-copy small { display: none; }

.table-token-link,
.launchpad-token-link { color: inherit; text-decoration: none; }

.dex-frame-skeleton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 460px;
  color: var(--muted);
  background: var(--plane);
}

/* Launchpad analytics ---------------------------------------------------- */
.launchpads-page { padding-bottom: 36px; }
.launchpad-ranking { display: grid; gap: 18px; }

.launchpad-analytics-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 980px;
  overflow: clip;
}

.launchpad-card-header {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.launchpad-rank {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .12em;
}

.launchpad-rank.is-unranked {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .08em;
}

.launchpad-card-title h2 { margin: 3px 0 0; font-size: clamp(24px, 2.8vw, 34px); }
.launchpad-asof { color: var(--muted); font-size: 12px; }

.launchpad-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--plane);
}

.launchpad-metric {
  min-width: 0;
  padding: 15px;
  border-right: 1px solid var(--border);
}

.launchpad-metric:last-child { border-right: 0; }
.launchpad-metric span,
.launchpad-metric small { display: block; color: var(--muted); }
.launchpad-metric span { margin-bottom: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.launchpad-metric strong { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 19px; white-space: nowrap; }
.launchpad-metric small { margin-top: 5px; font-size: 11px; }

.launchpad-table-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.launchpad-table-head h3 { margin: 3px 0 0; font-size: 20px; }
.coverage-count { color: var(--muted); font-size: 12px; }
.launchpad-token-table { min-width: 1180px; }
.launchpad-token-table td { vertical-align: middle; }
.market-source-note {
  display: block;
  max-width: 160px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  white-space: normal;
}

.contract-cell {
  display: block;
  width: 150px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.launchpad-ratio { display: grid; gap: 3px; min-width: 170px; }
.launchpad-ratio strong { font-size: 14px; }
.launchpad-ratio small { max-width: 210px; color: var(--muted); line-height: 1.35; }
.launchpad-ratio.is-unavailable strong { color: var(--muted); }

.source-icon-link {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--plane);
}

.source-icon-link .source-copy { display: none; }
.source-icon-link .source-logo-wrap { width: 22px; height: 22px; }
.launchpad-card-footer { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

.launchpad-loading-grid { display: grid; gap: 18px; }
.launchpad-skeleton {
  height: 360px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(100deg, var(--surface) 20%, color-mix(in srgb, var(--muted) 10%, var(--surface)) 42%, var(--surface) 64%);
  background-size: 220% 100%;
  animation: launchpad-shimmer 1.2s linear infinite;
}

@keyframes launchpad-shimmer { to { background-position: -220% 0; } }

@media (max-width: 900px) {
  .token-identity-strip { grid-template-columns: 1fr 2fr; }
  .token-identity-strip > *:nth-child(2) { border-right: 0; }
  .token-identity-strip > *:last-child { grid-column: 1 / -1; border-top: 1px solid var(--border); }
  .launchpad-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launchpad-metric { border-bottom: 1px solid var(--border); }
  .launchpad-metric:nth-child(2n) { border-right: 0; }
  .launchpad-metric:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

@media (max-width: 620px) {
  .launchpad-analytics-card { contain-intrinsic-size: auto 1500px; }
  .token-identity-strip { grid-template-columns: 1fr; }
  .token-identity-strip > * { border-right: 0; border-bottom: 1px solid var(--border); }
  .token-identity-strip > *:last-child { grid-column: auto; border-top: 0; border-bottom: 0; }
  .token-lore-head { grid-template-columns: auto minmax(0, 1fr); }
  .token-lore-state { grid-column: 2; }
  .token-lore-foot { align-items: flex-start; flex-direction: column; }
  .token-lore-foot small { text-align: left; }
  .dex-frame-skeleton { min-height: 370px; }
  .launchpad-card-header { grid-template-columns: auto auto minmax(0, 1fr); }
  .launchpad-asof { grid-column: 2 / -1; }
  .launchpad-metric-grid { grid-template-columns: 1fr; }
  .launchpad-metric,
  .launchpad-metric:nth-child(2n),
  .launchpad-metric:last-child { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .launchpad-metric:last-child { border-bottom: 0; }
  .launchpad-table-head { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .launchpad-skeleton { animation: none; }
  .lore-source-chip { transition: none; }
}

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.r { text-align: right; }
.up { color: var(--up); }
.down { color: var(--down); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--seq-mid); color: var(--accent-ink); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------------- Header ---------------- */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--overlay-header);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 14px; padding-bottom: 12px; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-link { color: inherit; text-decoration: none; }

.brand-mark {
  display: block;
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 5px 10px var(--shadow-medium));
  transition: transform 180ms cubic-bezier(.16, 1, .3, 1);
}

.brand-link:focus-visible { outline: 2px solid var(--seq-mid); outline-offset: 4px; }

@media (hover: hover) and (pointer: fine) {
  .brand-link:hover .brand-mark { transform: translateY(-2px); }
}

.brand h1 { font-size: 18px; margin: 0; letter-spacing: -0.01em; }
.brand-sub { margin: 1px 0 0; font-size: 12px; color: var(--muted); }

.head-actions { display: flex; align-items: center; gap: 12px; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-hover); }
.theme-icon { grid-area: 1 / 1; font-size: 17px; line-height: 1; }
.theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: inline; }
:root[data-theme="light"] .theme-icon-moon { display: none; }

.primary-nav {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px; background: var(--ink-035);
  border: 1px solid var(--border); border-radius: 10px;
}
.primary-nav a {
  color: var(--ink-2); text-decoration: none; font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 7px; transition: color .14s, background .14s;
}
.primary-nav a:hover { color: var(--ink); background: var(--ink-05); }
.primary-nav a.is-active { color: var(--accent-ink); background: var(--seq-mid); }

.clock {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.clock-wib { font-size: 15px; font-weight: 600; }
.clock-utc { font-size: 11px; color: var(--muted); }

.btn {
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 13px; font: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .14s, border-color .14s;
}
.btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--ink-20); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.ghost { background: transparent; }
.btn-ic { font-size: 14px; line-height: 1; }

.chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-2); cursor: pointer;
  padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.chk input { accent-color: var(--seq-mid); }

.status-bar {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-2);
  padding-bottom: 9px;
}
.status-sep { color: var(--axis); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.busy { background: var(--warn); animation: pulse 1.1s infinite; }
.dot.ok { background: var(--good); }
.dot.err { background: var(--crit); }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------------- KPI ---------------- */

.kpi-strip {
  display: grid; gap: 14px; margin: 22px 0 26px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.kpi h2 {
  margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.kpi-val {
  margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -0.02em;
  line-height: 1.15; overflow-wrap: anywhere;
}
.kpi-sub { margin: 6px 0 0; font-size: 12px; color: var(--ink-2); }
.kpi-accent {
  border-color: var(--accent-45);
  background: linear-gradient(150deg, var(--accent-14), var(--surface) 62%);
}
.kpi-accent .kpi-val { color: var(--seq-hi); }

/* ---------------- Panel ---------------- */

.panel {
  position: relative; /* jangkar untuk tooltip absolut di dalamnya */
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 26px;
}

.panel > h2 { margin: 0 0 14px; font-size: 19px; letter-spacing: -0.01em; }

.panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap; margin-bottom: 16px;
}
.panel-head h2 { margin: 0 0 5px; font-size: 19px; letter-spacing: -0.01em; }
.panel-sub { margin: 0; font-size: 13px; color: var(--ink-2); max-width: 68ch; }

.panel-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.seg {
  display: inline-flex; background: var(--plane);
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.seg-btn {
  background: transparent; border: 0; color: var(--ink-2);
  padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer;
  border-right: 1px solid var(--border-2);
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { color: var(--ink); background: var(--ink-04); }
.seg-btn.is-on { background: var(--seq-mid); color: var(--accent-ink); font-weight: 600; }

.sw {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  vertical-align: -1px; margin: 0 1px;
}
.sw.up { background: var(--up); }
.sw.down { background: var(--down); }

/* ---------------- Peta ---------------- */

.map-layout {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

.map-holder {
  position: relative; background: var(--plane);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; min-height: 420px;
}

#mapCanvas { display: block; width: 100%; height: clamp(560px, 68vh, 740px); touch-action: none; }

.map-legend {
  position: absolute; left: 14px; bottom: 14px;
  max-width: calc(100% - 28px);
  background: var(--overlay-legend); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 11px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px;
  backdrop-filter: blur(4px);
}
/* bilah warna mengalah lebih dulu saat ruang sempit, label tetap terbaca */
.map-legend .legend-bar { flex: 1 1 90px; min-width: 60px; }
.map-legend .legend-bar span { width: auto; flex: 1 1 0; min-width: 4px; }

.map-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 10px; background: var(--plane); color: var(--ink-2); font-size: 13px;
}

.top-marker-legend {
  position: absolute; right: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 9px; border-radius: 999px;
  color: var(--ink-2); font-size: 11px;
  background: var(--overlay-legend); border: 1px solid var(--border);
  backdrop-filter: blur(4px);
}
.top-marker-legend span {
  display: grid; place-items: center; width: 21px; height: 21px;
  border-radius: 50%; color: var(--warn-ink); background: var(--warn); font-weight: 800;
}

.spinner {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--axis); border-top-color: var(--seq-mid);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.map-side { display: flex; flex-direction: column; gap: 14px; }

.side-block {
  background: var(--plane); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.side-block h3 {
  margin: 0 0 10px; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}

.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-item {
  display: grid; grid-template-columns: 20px 22px minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px;
  padding: 6px 6px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.rank-item:hover, .rank-item:focus-visible { background: var(--ink-05); outline: none; }
.rank-n { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.rank-dot { width: 10px; height: 10px; border-radius: 50%; }
.country-flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  flex: none;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--border);
}
.country-cell,
.chain-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.chain-logo {
  width: 24px;
  height: 24px;
  flex: none;
  object-fit: contain;
  border-radius: 6px;
  background: var(--surface-image);
  box-shadow: 0 0 0 1px var(--border);
}
.rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-val { font-variant-numeric: tabular-nums; font-size: 12px; }
.rank-share { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); min-width: 42px; text-align: right; }

.region-list { display: flex; flex-direction: column; gap: 11px; }
.region-top { display: flex; justify-content: space-between; font-size: 13px; }
.region-bar { height: 6px; background: var(--ink-06); border-radius: 3px; overflow: hidden; margin: 5px 0 3px; }
.region-bar span { display: block; height: 100%; border-radius: 3px; }
.region-meta { font-size: 11px; }

/* ---------------- Detail ---------------- */

.detail-card {
  margin-top: 16px; background: var(--plane);
  border: 1px solid var(--accent-40); border-radius: var(--radius); padding: 16px;
}
.detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.detail-head h3 { margin: 0; font-size: 17px; }
.detail-head .btn { margin-left: auto; }

.pill {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-20); color: var(--seq-hi); border: 1px solid var(--accent-35);
}
.pill.ghost { background: transparent; color: var(--ink-2); border-color: var(--border); }

.detail-stats {
  display: grid; gap: 10px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.stat-l { display: block; font-size: 11px; color: var(--muted); }
.stat-v { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; }

.detail-card h4 { margin: 0 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---------------- Insight ---------------- */

.insight-grid {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.insight {
  background: var(--plane); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.insight.accent {
  border-color: var(--accent-50);
  background: linear-gradient(155deg, var(--accent-15), var(--plane) 65%);
}
.insight-tag {
  display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 6px;
}
.insight-big {
  margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.insight.accent .insight-big { color: var(--seq-hi); }
.insight-sub { margin: 2px 0 8px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.insight-body { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ---------------- Chart ---------------- */

.chart-block { margin-bottom: 22px; }
.chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.chart-head h3 { margin: 0; font-size: 14px; font-weight: 600; }

.chart-holder { position: relative; background: var(--plane); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.chart-loading { display: flex; align-items: center; gap: 10px; justify-content: center; height: 240px; color: var(--ink-2); font-size: 13px; }

#jam { position: relative; }

.legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--ink-2); }
.legend-title { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; font-weight: 600; }
.legend-bar { display: flex; height: 9px; border-radius: 3px; overflow: hidden; border: 1px solid var(--border-2); }
.legend-bar span { width: 15px; height: 100%; }
.legend-end { font-variant-numeric: tabular-nums; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: none; }
.legend-note { color: var(--muted); }

/* ---------------- Matriks ---------------- */

.matrix { display: flex; flex-direction: column; gap: 2px; min-width: 620px; }
.matrix-row { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.matrix-label { font-size: 11px; color: var(--ink-2); font-weight: 600; }
.matrix-h { font-size: 9px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.matrix-head .matrix-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.matrix-cell {
  height: 24px; border-radius: 3px; cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.matrix-cell:hover, .matrix-cell:focus-visible {
  transform: scale(1.16); box-shadow: 0 0 0 2px var(--plane), 0 0 0 3px var(--ink);
  outline: none; position: relative; z-index: 2;
}
.matrix-cell.empty { background: var(--ink-03); cursor: default; }

.chart-holder:has(.matrix) { overflow-x: auto; }

/* ---------------- Treemap ---------------- */

.treemap-holder {
  position: relative; height: clamp(380px, 48vh, 540px);
  margin: 12px 0 20px; background: var(--plane);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}

.tile {
  position: absolute; border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 4px; cursor: pointer; text-align: center;
  transition: filter .12s, box-shadow .12s;
}
.tile:hover, .tile:focus-visible {
  filter: brightness(1.16); outline: none;
  box-shadow: 0 0 0 2px var(--plane), 0 0 0 3px var(--ink); z-index: 3;
}
.tile-sym { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.tile-sym.sm { font-size: 11px; }
.tile-sym.xs { font-size: 9px; font-weight: 600; }
.tile-pct { font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.tile-pct.sm { font-size: 10px; }
.tile-vol { font-size: 10px; opacity: .78; font-variant-numeric: tabular-nums; }

/* ---------------- Tooltip ---------------- */

.tooltip {
  position: absolute; z-index: 30; pointer-events: none;
  background: var(--overlay-tooltip); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px; min-width: 216px; max-width: 300px;
  box-shadow: 0 12px 34px var(--shadow-strong); font-size: 12px;
}
.tip-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--border-2); }
.tip-head strong { font-size: 13px; }
.tip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tip-rank { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.tip-grid { display: grid; grid-template-columns: auto auto; gap: 3px 14px; margin: 0; }
.tip-grid dt { color: var(--muted); }
.tip-grid dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tip-foot { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border-2); color: var(--muted); font-size: 10.5px; }

/* ---------------- Tabel ---------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table caption { text-align: left; color: var(--muted); font-size: 11px; padding-bottom: 8px; }
.data-table th {
  text-align: left; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 7px 10px;
  border-bottom: 1px solid var(--axis); white-space: nowrap;
}
.data-table th.r { text-align: right; }
.data-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-2); white-space: nowrap; }
.data-table tbody tr:hover { background: var(--ink-035); }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.is-peak { background: var(--accent-14); }
.data-table tr.is-peak td:first-child { box-shadow: inset 2px 0 0 var(--seq-mid); }
.data-table tfoot td { padding: 8px 10px; color: var(--ink-2); border-top: 1px solid var(--axis); }
.data-table.compact td, .data-table.compact th { padding: 5px 9px; }

.split { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-bottom: 18px; }

/* ---------------- Disclosure & catatan ---------------- */

.disclosure {
  margin-top: 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--plane);
}
.disclosure summary {
  cursor: pointer; padding: 11px 15px; font-size: 13px; font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before { content: '▸'; color: var(--muted); transition: transform .15s; }
.disclosure[open] summary::before { transform: rotate(90deg); }
.disclosure > div { padding: 0 15px 15px; }

.caveat {
  margin: 16px 0 0; padding: 12px 15px; font-size: 12.5px; line-height: 1.6;
  background: var(--warn-07); border: 1px solid var(--warn-26);
  border-radius: var(--radius-sm); color: var(--ink-2);
}
.caveat strong { color: var(--warn); }
.caveat code { background: var(--ink-07); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

.note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.note.warn {
  color: var(--ink-2); background: var(--warn-07);
  border: 1px solid var(--warn-26); border-radius: var(--radius-sm);
  padding: 8px 11px;
}
.error { color: var(--crit); font-size: 13px; }

/* ---------------- Metodologi ---------------- */

.method-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.method-grid h3 { margin: 0 0 8px; font-size: 13px; }
.method-grid ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.method-grid li { margin-bottom: 6px; }
.method-grid code { background: var(--ink-07); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

/* ---------------- Footer & toast ---------------- */

.site-foot { padding: 22px 20px 40px; font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--border); margin-top: 10px; }
.site-foot p { margin: 0 0 4px; }

/* ---------------- Routed pages ---------------- */

.route-hero {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 32px; align-items: end; padding: 54px 0 32px;
}
.route-hero h2 {
  margin: 4px 0 10px; max-width: 18ch;
  font-size: clamp(32px, 5vw, 62px); line-height: .98; letter-spacing: -.045em;
}
.route-hero p:not(.eyebrow) { margin: 0; max-width: 68ch; color: var(--ink-2); }
.eyebrow {
  margin: 0; color: var(--seq-hi); font-size: 10px; line-height: 1.2;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.hero-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hero-kpis article {
  min-height: 142px; padding: 18px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-kpis article:first-child {
  border-color: var(--warn-48);
  background: linear-gradient(155deg, var(--warn-12), var(--surface) 70%);
}
.hero-kpis span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.hero-kpis strong { margin-top: 8px; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; }
.hero-kpis small { margin-top: 6px; color: var(--ink-2); }

.source-chip {
  justify-self: end; align-self: center;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-2); font-size: 12px; background: var(--surface);
}
.sentiment-hero { align-items: center; }
.sentiment-kpis { margin-top: 0; }

.section-intro {
  display: flex; justify-content: space-between; align-items: end;
  gap: 20px; margin: 12px 0 14px;
}
.section-intro h2 { margin: 4px 0 0; font-size: 22px; }
.section-intro > p { margin: 0; color: var(--muted); font-size: 12px; }

.platform-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px; margin-bottom: 26px;
}
.platform-card {
  grid-column: span 4; min-width: 0;
  padding: 17px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.platform-card:nth-child(1), .platform-card:nth-child(2) { grid-column: span 6; }
.platform-card-head {
  display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 18px;
}
.platform-card h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.1; }
.platform-kicker { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.pulse-badge {
  white-space: nowrap; padding: 4px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; border: 1px solid var(--border);
}
.pulse-badge.hot, .pulse-badge.up { color: var(--seq-hi); background: var(--accent-16); border-color: var(--accent-40); }
.pulse-badge.cold, .pulse-badge.down { color: var(--crit-ink); background: var(--crit-12); border-color: var(--crit-36); }
.pulse-badge.flat, .pulse-badge.unknown { color: var(--ink-2); background: var(--ink-035); }
.platform-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.platform-metric {
  min-width: 0; padding: 11px; border-radius: var(--radius-sm);
  background: var(--plane); border: 1px solid var(--border-2);
}
.metric-label { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.metric-value {
  display: block; margin: 5px 0 3px; overflow-wrap: anywhere;
  font-size: clamp(16px, 2.2vw, 23px); line-height: 1.1;
}
.metric-change { display: block; font-size: 10px; }
.metric-bars { display: grid; gap: 6px; margin-top: 14px; }
.metric-bar-row { display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: 8px; font-size: 10px; color: var(--muted); }
.metric-bar-track { height: 5px; overflow: hidden; border-radius: 99px; background: var(--ink-055); }
.metric-bar-track span { display: block; height: 100%; border-radius: inherit; }
.platform-chains {
  margin: 13px 0 0; color: var(--muted); font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-loading {
  grid-column: 1 / -1; min-height: 160px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--ink-2); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.chain-hot { margin-left: 8px; color: var(--warn-ink); background: var(--warn); border-color: transparent; }
.chain-platforms { white-space: normal !important; min-width: 210px; }
.methodology-compact .method-grid p { margin: 0; color: var(--ink-2); font-size: 12.5px; }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--seq-mid);
  border-radius: var(--radius-sm); padding: 11px 15px; font-size: 12.5px;
  box-shadow: 0 14px 40px var(--shadow-toast); max-width: 340px;
}
.toast.warn { border-left-color: var(--warn); }
.toast.err { border-left-color: var(--crit); }
.toast.ok { border-left-color: var(--good); }

/* ---------------- Responsif ---------------- */

@media (max-width: 1100px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-side { flex-direction: row; flex-wrap: wrap; }
  .map-side > * { flex: 1 1 300px; }
  .platform-card, .platform-card:nth-child(1), .platform-card:nth-child(2) { grid-column: span 6; }
}

@media (max-width: 720px) {
  body { font-size: 14px; }
  .wrap { padding: 0 14px; }
  .panel { padding: 15px; }
  .head-inner { padding-top: 11px; }
  .brand h1 { font-size: 16px; }
  .brand-sub { display: none; }
  .primary-nav { order: 3; width: 100%; }
  .primary-nav a { flex: 1; text-align: center; }
  .head-actions { margin-left: auto; }
  .kpi-val { font-size: 22px; }
  .panel-head { flex-direction: column; align-items: stretch; }
  .panel-tools { justify-content: flex-start; }
  #mapCanvas { height: 340px; }
  .map-holder { min-height: 340px; }
  .treemap-holder { height: 380px; }
  .tooltip { min-width: 180px; max-width: 240px; font-size: 11.5px; }
  .route-hero { grid-template-columns: 1fr; gap: 20px; padding: 34px 0 24px; }
  .route-hero h2 { font-size: 38px; }
  .hero-kpis { grid-template-columns: 1fr 1fr; }
  .hero-kpis article { min-height: 120px; padding: 14px; }
  .hero-kpis strong { font-size: 19px; }
  .source-chip { justify-self: start; }
  .section-intro { align-items: start; flex-direction: column; gap: 5px; }
  .platform-card, .platform-card:nth-child(1), .platform-card:nth-child(2) { grid-column: 1 / -1; }
  .top-marker-legend { top: 10px; right: 10px; }
}

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

:focus-visible { outline: 2px solid var(--seq-mid); outline-offset: 2px; }

/* ---------------- Halaman Cases ---------------- */

.cases-hero p:not(.eyebrow) { max-width: 74ch; }

.case-chart-holder { position: relative; margin-bottom: 16px; }
.case-chart-holder svg { display: block; }

.case-facts { margin-bottom: 16px; }

.catalyst-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.catalyst { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; }
.catalyst-date {
  font-size: 11px; color: var(--seq-hi); background: var(--accent-16);
  border: 1px solid var(--accent-30); border-radius: 6px;
  padding: 2px 6px; text-align: center; white-space: nowrap;
}
.catalyst-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

.thesis { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; }

/* Grid kartu token di hub Cases */
.case-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.case-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--plane); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px;
  text-decoration: none; color: inherit;
  transition: border-color .14s, transform .14s, background .14s;
}
.case-card:hover, .case-card:focus-visible {
  border-color: var(--accent-55);
  background: var(--surface-raised); transform: translateY(-2px);
}
.case-card-logo {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--surface-image);
  box-shadow: 0 0 0 1px var(--border);
}
.case-card-body { min-width: 0; flex: 1; }
.case-card-head { display: flex; align-items: baseline; gap: 8px; }
.case-card-head strong { font-size: 16px; letter-spacing: -0.01em; }
.case-card-year {
  font-size: 10.5px; color: var(--seq-hi); background: var(--accent-16);
  border: 1px solid var(--accent-30); border-radius: 999px; padding: 1px 8px;
}
.case-card-name {
  display: block; font-size: 12px; color: var(--muted); margin-bottom: 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case-card-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 10px;
  font-size: 11.5px;
}
.case-card-facts dt { color: var(--muted); }
.case-card-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.case-card-cta { font-size: 11.5px; color: var(--seq-hi); font-weight: 600; }

/* Logo kecil di dalam baris tabel */
.row-logo {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
  vertical-align: -4px; margin-right: 6px; background: var(--surface-image);
}

/* ---------------- Halaman artikel token ---------------- */

.article-wrap { max-width: 980px; }

.token-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 30px 0 24px; flex-wrap: wrap;
}
.token-logo {
  width: 96px; height: 96px; border-radius: 24px; flex: none;
  object-fit: cover; background: var(--surface-image);
  box-shadow: 0 0 0 1px var(--border), 0 10px 30px var(--shadow-medium);
}
.token-hero h2 {
  margin: 4px 0 8px; font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.025em; line-height: 1.1;
}
.token-sym {
  font-size: 0.5em; font-weight: 600; color: var(--seq-hi); vertical-align: middle;
  background: var(--accent-16); border: 1px solid var(--accent-30);
  border-radius: 8px; padding: 3px 9px; margin-left: 6px;
}
.article-summary { margin: 0; font-size: 13.5px; color: var(--ink-2); max-width: 70ch; line-height: 1.6; }

.article-body { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); max-width: 72ch; }
.article-body p { margin: 0 0 16px; }
.article-body p:last-child { margin-bottom: 0; }

/* ---------------- Ping auto-refresh ---------------- */

/* ---------------- Logo platform ---------------- */

.platform-ident { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Platform marks are official brand assets and arrive in every shape a brand
   guideline allows — square glyph, wide lockup, tall badge. `contain` inside a
   fixed square keeps the whole mark visible; `cover` used to crop the edges off
   the wider ones (Pons, Four.meme). */
.platform-logo {
  width: 54px; height: 54px; aspect-ratio: 1; border-radius: 12px; flex: none;
  padding: 5px; box-sizing: border-box;
  object-fit: contain; background: var(--surface-image); box-shadow: 0 0 0 1px var(--border);
}

@media (max-width: 720px) {
  .token-hero { padding: 20px 0 16px; gap: 14px; }
  .token-logo { width: 68px; height: 68px; border-radius: 18px; }
  .case-grid { grid-template-columns: 1fr; }
}

/* ---------------- 2026 research workbench ---------------- */

.site-head {
  background: color-mix(in oklch, var(--plane) 92%, transparent);
  backdrop-filter: blur(16px);
}

.head-inner { min-height: 58px; padding-block: var(--space-2); }
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--border);
}
.brand h1 { font-size: 16px; }
.primary-nav { background: transparent; }
.primary-nav a.is-active { background: var(--seq-mid); }
.primary-nav a,
.btn,
.seg-btn,
.text-link,
.table-link,
.source-link { white-space: nowrap; }
.primary-nav a:active,
.btn:active,
.seg-btn:active,
.text-link:active,
.table-link:active,
.source-link:active,
.leader-row:active { filter: brightness(.9); }
.seg-btn:disabled,
.source-link[aria-disabled="true"],
.leader-row[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.status-bar {
  min-height: 28px;
  padding-bottom: var(--space-2);
  color: var(--muted);
}

.kpi-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
}
.kpi {
  border: 0;
  border-radius: 0;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
}
.kpi-accent {
  background: linear-gradient(150deg, color-mix(in oklch, var(--seq-mid) 14%, var(--surface)), var(--surface));
}

.panel {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--ink) 3%, transparent);
}
.panel-head h2 { font-size: 20px; }
.panel-sub { color: var(--muted); }
.text-link,
.table-link {
  color: var(--seq-hi);
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.text-link:hover,
.table-link:hover { text-decoration: underline; }

.performance-panel { padding-bottom: var(--space-4); }
.leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.leader-row {
  display: grid;
  grid-template-columns: 28px 24px minmax(0, 1fr) auto 74px;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: 10px var(--space-3);
  color: var(--ink);
  text-decoration: none;
  background: var(--plane);
}
.leader-row:hover { background: var(--surface-2); }
.leader-rank { color: var(--muted); font-size: 11px; }
.leader-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.leader-name strong { font-size: 12px; }
.leader-name small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leader-mcap { color: var(--muted); font-size: 11px; }
.leader-change { text-align: right; font-size: 13px; }

.route-hero {
  min-height: 300px;
  padding: clamp(32px, 5vw, 56px) 0 clamp(44px, 7vw, 72px);
  align-items: center;
}
.route-hero h2 {
  max-width: 14ch;
  font-size: clamp(38px, 5.5vw, 72px);
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.hero-kpis { align-self: stretch; }
.hero-kpis article {
  min-height: 150px;
  border-radius: var(--radius);
  background: var(--surface);
}
.hero-kpis article:first-child {
  border-color: var(--border);
  background: var(--surface);
}

.risk-line {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) 0;
  color: var(--muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.coin-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 190px;
}
.coin-cell > span:not(.pill) {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
}
.coin-cell small { color: var(--muted); }
.market-leader-table td { height: 52px; }
.research-card { min-height: 190px; }
.research-summary {
  margin: var(--space-3) 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}
.research-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-2);
  font-size: 12px;
}

.breadcrumb {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-5);
  color: var(--muted);
  font-size: 12px;
}
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.detail-dossier { max-width: 1160px; }
.dynamic-token-hero { padding-block: var(--space-6); }
.dossier-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
}
.dossier-stat {
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface);
}
.dossier-stat > span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dossier-stat strong {
  display: block;
  margin-top: var(--space-2);
  font-size: 20px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.dossier-stat small { display: block; margin-top: var(--space-1); color: var(--muted); }
.history-chart {
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--plane);
}
.history-chart svg { display: block; width: 100%; height: auto; }
.map-loading[hidden] { display: none; }
.chart-grid-line { stroke: var(--grid); stroke-width: 1; }
.chart-axis-label { fill: var(--muted); font-size: 10px; font-family: var(--font); }
.history-line {
  fill: none;
  stroke: var(--seq-mid);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.history-marker { fill: var(--plane); stroke: var(--seq-hi); stroke-width: 2; }
.history-marker-guide { stroke: var(--seq-hi); stroke-width: 1; opacity: .55; }
.history-marker-label {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 650;
}
.history-marker-name {
  fill: var(--muted);
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.history-marker-value { fill: var(--ink); }
.milestone-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-3);
  background: var(--border-2);
}
.empty-state {
  display: grid;
  place-items: center;
  min-height: 300px;
  margin: 0;
  color: var(--muted);
}
.source-panel {
  display: grid;
  grid-template-columns: minmax(180px, .4fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}
.source-panel h2 { margin: var(--space-1) 0 0; }
.source-links { display: grid; gap: var(--space-2); }
.source-link {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--plane);
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-link:hover { border-color: var(--seq-mid); }

.source-link span:last-child {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--border);
}
.identity-item {
  min-width: 0;
  padding: var(--space-3);
  background: var(--plane);
}
.identity-item span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.identity-item strong,
.identity-item a {
  display: block;
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.research-method {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(280px, 1.2fr);
  gap: var(--space-5);
  align-items: start;
}
.research-method p { margin: 0; color: var(--ink-2); }
.research-method ol { margin: 0; padding-left: 20px; color: var(--ink-2); }
.research-method li + li { margin-top: var(--space-2); }

.breakout-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.breakout-card {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.breakout-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.breakout-logo {
  width: 52px;
  height: 52px;
  flex: none;
  object-fit: cover;
  border-radius: 14px;
  background: var(--surface-image);
  box-shadow: 0 0 0 1px var(--border);
}
.breakout-title { min-width: 0; flex: 1; }
.breakout-title h3 { margin: 2px 0 2px; font-size: 18px; }
.breakout-title p { margin: 0; color: var(--muted); font-size: 11px; }
.breakout-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: var(--space-4);
  background: var(--border-2);
}
.breakout-metric {
  min-width: 0;
  padding: var(--space-3);
  background: var(--plane);
}
.breakout-metric span { display: block; color: var(--muted); font-size: 10px; }
.breakout-metric strong {
  display: block;
  margin-top: var(--space-1);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.breakout-note { min-height: 58px; margin: 0 0 var(--space-4); color: var(--ink-2); font-size: 12px; }
.contract-line {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}
.breakout-sources { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.source-button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--plane);
  font-size: 11px;
}
.source-button:hover { border-color: var(--seq-mid); }
.verified-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  color: var(--ink-2);
  font-size: 12px;
}
.verified-line .dot { background: var(--good); }
.verified-line > span:last-child { min-width: 0; line-height: 1.55; }

@media (max-width: 900px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leaderboard-grid { grid-template-columns: 1fr; }
  .dossier-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breakout-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .head-inner { flex-wrap: wrap; }
  .primary-nav { overflow-x: auto; justify-content: flex-start; }
  .primary-nav a { flex: 0 0 auto; }
  .head-actions .clock-utc { display: none; }
  .panel { padding: var(--space-4); }
  .route-hero { min-height: auto; }
  .route-hero h2 { font-size: clamp(36px, 12vw, 54px); }
  .leader-row { grid-template-columns: 24px 24px minmax(0, 1fr) 68px; }
  .leader-mcap { display: none; }
  .dossier-facts { grid-template-columns: 1fr 1fr; }
  .milestone-grid { grid-template-columns: 1fr 1fr; }
  .source-panel { grid-template-columns: 1fr; }
  .identity-grid,
  .research-method { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .wrap { padding-inline: 12px; }
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi { padding: var(--space-3); }
  .kpi-val { font-size: 20px; }
  .dossier-facts { grid-template-columns: 1fr; }
  .leader-row { gap: var(--space-2); padding-inline: var(--space-2); }
  .primary-nav a { padding-inline: 6px; font-size: 11px; }
  .breakout-card { padding: var(--space-4); }
  .breakout-metrics { grid-template-columns: 1fr; }
}

/* ---------------- Compact evidence records + interactive history ---------------- */

.compact-route-hero {
  display: block;
  min-height: 0;
  padding: var(--space-6) 0 var(--space-5);
}
.compact-route-hero h2 {
  max-width: none;
  font-size: clamp(34px, 5vw, 54px);
}
.compact-route-hero > div { max-width: 760px; }
.compact-route-hero .hero-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3) !important;
  color: var(--muted) !important;
  font-size: 12px;
}
.hero-meta strong {
  color: var(--ink);
  font-size: 18px;
}

.method-disclosure { margin-bottom: var(--space-5); }
.breakout-section { margin-bottom: var(--space-5); }
.breakout-section > .panel-head { margin-bottom: var(--space-4); }
.method-disclosure summary {
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
.method-disclosure summary::-webkit-details-marker { display: none; }
.method-disclosure summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--muted);
}
.method-disclosure[open] summary::before { transform: rotate(90deg); }
.method-disclosure ol {
  max-width: 880px;
  margin: var(--space-4) 0 0;
  padding-left: 22px;
  color: var(--ink-2);
  font-size: 12px;
}
.method-disclosure li + li { margin-top: var(--space-2); }

.breakout-list { grid-template-columns: 1fr; }
.breakout-card {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(380px, 1.15fr);
  gap: var(--space-4);
  padding: var(--space-4);
}
.breakout-head { margin: 0; }
.breakout-title h3 { font-size: 20px; }
.chain-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1) !important;
}
.chain-label img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}
.breakout-timeline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--border);
}
.breakout-date {
  min-width: 0;
  padding: var(--space-3);
  background: var(--plane);
}
.breakout-date span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.breakout-date time {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink);
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.breakout-date.is-crossing time { color: var(--seq-hi); }
.breakout-metrics {
  grid-column: 1 / -1;
  margin: 0;
}
.breakout-metric { padding: var(--space-3); }
.breakout-metric strong { font-size: 16px; }
.breakout-identity {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--plane);
}
.breakout-identity > span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.breakout-identity > strong {
  display: block;
  margin-top: var(--space-1);
  font-size: 12px;
}
.contract-link {
  display: block;
  margin-top: var(--space-2);
  color: var(--seq-hi);
  font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}
.breakout-note {
  min-height: 0;
  margin: 0;
  align-self: center;
}
.breakout-sources {
  grid-column: 1 / -1;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-2);
}

.source-panel {
  display: block;
}
.source-panel h2 { margin: 0 0 var(--space-1); }
.source-links {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-4);
}
.source-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 54px;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.source-logo-wrap {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.source-logo-wrap.is-wide { width: 46px; }
.source-logo {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.source-logo-wrap.is-wide .source-logo { width: 38px; }
.source-logo-wrap.is-mono .source-logo { filter: invert(1); }
:root[data-theme="light"] .source-logo-wrap.is-mono .source-logo { filter: none; }
.source-logo-wrap.is-light-asset .source-logo { filter: none; }
:root[data-theme="light"] .source-logo-wrap.is-light-asset .source-logo { filter: invert(1); }
.source-copy {
  min-width: 0;
  display: block;
}
.source-copy strong,
.source-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-copy strong { font-size: 12px; }
.source-copy small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}
.source-arrow {
  color: var(--muted);
  font-size: 12px;
}
.source-link.is-disabled,
.source-button.is-disabled {
  cursor: not-allowed;
  opacity: .6;
}
.source-link:active,
.source-button:active { background: var(--surface-hover); }
.source-button {
  display: inline-grid;
  grid-template-columns: 22px minmax(0, auto);
  gap: var(--space-2);
  max-width: 260px;
  min-height: 34px;
  padding: var(--space-1) var(--space-2);
}
.source-button .source-logo-wrap {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
}
.source-button .source-logo-wrap.is-wide { width: 22px; }
.source-button .source-logo {
  width: 18px;
  height: 18px;
}
.source-button .source-logo-wrap.is-wide .source-logo { width: 20px; }
.source-button .source-copy strong {
  font-size: 11px;
  white-space: nowrap;
}
.source-button .source-copy small,
.source-button .source-arrow { display: none; }

.case-facts .stat small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.case-facts .stat.is-emphasis,
.dossier-stat.is-emphasis {
  border-color: var(--accent-45);
  background: var(--accent-14);
}
.case-facts .stat.is-emphasis .stat-v,
.dossier-stat.is-emphasis strong {
  color: var(--seq-hi);
  font-size: 22px;
}

.market-history-chart {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--plane);
}
.interactive-chart-controls {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.chart-toggle-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--plane);
}
.chart-toggle {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.chart-toggle:hover { color: var(--ink); background: var(--surface-hover); }
.chart-toggle:active { background: var(--accent-20); }
.chart-toggle:disabled { cursor: not-allowed; opacity: .55; }
.chart-toggle.is-active {
  color: var(--accent-ink);
  background: var(--seq-mid);
}
.interactive-chart-stage {
  position: relative;
  min-height: 330px;
}
.interactive-chart-stage svg {
  display: block;
  width: 100%;
  height: auto;
}
.history-arrow {
  stroke: var(--seq-hi);
  stroke-width: 1;
  opacity: .75;
}
.history-marker.is-peak { fill: var(--warn); stroke: var(--plane); }
.history-marker.is-launch { fill: var(--seq-hi); }
.history-marker.is-first { fill: var(--plane); }
.history-marker.is-minor { fill: var(--seq-mid); stroke-width: 1; }
.history-crosshair {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  pointer-events: none;
}
.history-hover-dot {
  fill: var(--plane);
  stroke: var(--seq-hi);
  stroke-width: 2;
  pointer-events: none;
}
.history-overlay { cursor: crosshair; }
.chart-hover-card {
  position: absolute;
  z-index: 4;
  min-width: 150px;
  padding: 8px 10px;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--overlay-tooltip);
  box-shadow: 0 12px 28px var(--shadow-medium);
  pointer-events: none;
}
.chart-hover-card strong,
.chart-hover-card span { display: block; }
.chart-hover-card strong { font-size: 11px; }
.chart-hover-card span { margin-top: 2px; color: var(--seq-hi); font-size: 13px; }
.chart-selection {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
}
.chart-selection span { color: var(--seq-hi); }
.chart-milestones {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--border);
  background: var(--border-2);
}
.chart-milestone {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
}
.chart-milestone span,
.chart-milestone small {
  display: block;
  color: var(--muted);
  font-size: 9px;
}
.chart-milestone strong {
  display: block;
  margin: 2px 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.chart-coverage {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--muted);
  border-top: 1px solid var(--border-2);
  font-size: 10px;
}
.chart-empty-window {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  max-width: 48ch;
  margin: auto;
  padding: var(--space-5);
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}

@media (max-width: 720px) {
  .breakout-card { grid-template-columns: 1fr; }
  .breakout-timeline,
  .breakout-metrics,
  .breakout-sources { grid-column: 1; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .interactive-chart-controls { align-items: flex-start; flex-direction: column; }
  .range-toggle { max-width: 100%; overflow-x: auto; }
  .chart-toggle { white-space: nowrap; }
  .source-links { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .breakout-timeline { grid-template-columns: 1fr; }
  .breakout-date time { font-size: 20px; }
  .interactive-chart-stage { min-height: 300px; }
  .chart-selection { align-items: flex-start; flex-direction: column; gap: 2px; }
  .chart-milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- Verified market identities and DEX dossiers ---------------- */

.exchange-cell {
  display: inline-flex;
  align-items: center;
  min-width: 150px;
  gap: var(--space-2);
}
.exchange-logo,
.exchange-logo-fallback {
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: var(--surface-image);
}
.exchange-logo { object-fit: cover; }
.exchange-logo-fallback {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.exchange-logo-fallback[hidden] { display: none; }
.exchange-name-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.exchange-name-link:hover { color: var(--seq-hi); }

.tile-logo {
  width: 30px;
  height: 30px;
  margin-bottom: var(--space-1);
  border: 1px solid color-mix(in oklch, currentColor 24%, transparent);
  border-radius: 50%;
  background: var(--surface-image);
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.tile-logo.sm {
  width: 18px;
  height: 18px;
  margin-bottom: 2px;
}
.tip-logo {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-image);
  object-fit: cover;
}
.compact-coin-cell { min-width: 170px; }

.case-grid {
  row-gap: var(--space-5);
  column-gap: var(--space-4);
}
.research-card {
  min-height: 218px;
  padding: var(--space-4);
}
.case-card-year {
  margin-left: auto;
  font-size: 10px;
  white-space: nowrap;
}
.case-card-cta {
  display: block;
  margin-top: var(--space-3);
  color: var(--seq-hi);
}

.article-wrap {
  display: grid;
  gap: var(--space-5);
}
.article-wrap > * { min-width: 0; }
.article-wrap .token-hero { padding-bottom: 0; }
.article-wrap .risk-line { margin-bottom: 0; }
.case-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  gap: var(--space-6);
  align-items: start;
}
.article-body h2 { margin: 0 0 var(--space-3); color: var(--ink); }
.case-analysis {
  display: grid;
  gap: var(--space-4);
}
.case-analysis > div {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-2);
}
.case-analysis h3 { margin: 0 0 var(--space-2); font-size: 13px; }
.case-analysis p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}

.dex-chart-shell {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--plane);
}
.dex-panel { padding: 0; overflow: hidden; }
.dex-chart-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.dex-chart-copy h3 { margin: 0; font-size: 14px; }
.dex-chart-copy p {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.dex-source-link { min-width: 210px; }
.dex-frame-wrap {
  min-height: 460px;
  background: var(--plane);
}
.dex-frame {
  display: block;
  width: 100%;
  height: clamp(460px, 62vh, 640px);
  border: 0;
}

.source-links {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.source-link { min-width: 0; }

@media (max-width: 720px) {
  .case-card { gap: var(--space-3); }
  .case-card-head { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .case-card-year { margin-left: 0; }
  .case-story-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .dex-chart-copy { grid-template-columns: minmax(0, 1fr); }
  .dex-source-link { min-width: 0; width: 100%; }
  .dex-frame-wrap { min-height: 420px; }
  .dex-frame { height: 500px; }
}

/* ---------------- 2026 preview index + routed research dossiers ---------------- */

.breakout-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.breakout-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  gap: var(--space-4);
  padding: var(--space-4);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition:
    border-color 180ms cubic-bezier(.16, 1, .3, 1),
    background-color 180ms cubic-bezier(.16, 1, .3, 1);
}

.breakout-preview-card:focus-visible {
  outline: 2px solid var(--seq-mid);
  outline-offset: 3px;
}

.breakout-preview-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
}

.breakout-preview-logo {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-image);
}

.breakout-preview-title { min-width: 0; }
.breakout-preview-title h3 {
  margin: 2px 0 1px;
  overflow-wrap: anywhere;
  font-size: 18px;
  letter-spacing: -.015em;
}
.breakout-preview-title .eyebrow { margin-bottom: 0; }

.breakout-preview-facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--border-2);
}
.breakout-preview-facts > div {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--plane);
}
.breakout-preview-facts span,
.breakout-preview-facts strong,
.breakout-preview-facts small { display: block; }
.breakout-preview-facts span {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.breakout-preview-facts strong {
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.breakout-preview-facts small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.breakout-preview-cta {
  grid-column: 1 / -1;
  justify-self: end;
  color: var(--seq-hi);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 180ms cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .breakout-preview-card:hover {
    border-color: var(--accent-45);
    background: var(--surface-raised);
  }
  .breakout-preview-card:hover .breakout-preview-cta { transform: translateX(3px); }
}

.event-article {
  display: grid;
  max-width: 1120px;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
}

.event-article > * { min-width: 0; }
.event-article .breadcrumb { margin: var(--space-5) 0 0; }

.event-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.event-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-4);
}

.event-token-logo {
  width: 88px;
  height: 88px;
  flex: none;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface-image);
  box-shadow: 0 12px 30px var(--shadow-medium);
}

.event-identity h2 {
  margin: 2px 0 4px;
  overflow-wrap: anywhere;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: -.035em;
  line-height: 1.04;
}
.event-identity h2 span {
  display: inline-block;
  color: var(--muted);
  font-size: .42em;
  letter-spacing: .02em;
}
.event-identity p:last-child { margin: 0; color: var(--muted); font-size: 12px; }

.event-live-snapshot {
  display: grid;
  min-width: 190px;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--seq-mid);
  background: var(--surface);
}
.event-live-snapshot span,
.event-live-snapshot small { color: var(--muted); font-size: 10px; }
.event-live-snapshot strong { font-size: 18px; }

.event-key-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
}
.event-key-facts > div {
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface);
}
.event-key-facts span,
.event-key-facts strong { display: block; }
.event-key-facts span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.event-key-facts strong {
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
  font-size: clamp(18px, 2.3vw, 26px);
  letter-spacing: -.025em;
}
.event-key-facts .is-emphasis { background: var(--accent-14); }
.event-key-facts .is-emphasis strong { color: var(--seq-hi); }

.event-story-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: var(--space-6);
}
.event-story-panel .article-body { max-width: 68ch; }
.event-story-panel .article-body h2 { font-size: 24px; }

.event-analysis {
  display: grid;
  gap: var(--space-4);
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--border);
}
.event-analysis > div + div {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-2);
}
.event-analysis span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.event-analysis strong { font-size: 16px; }
.event-analysis p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}

.event-history-panel { padding: 0; overflow: hidden; }
.event-history-panel > .panel-head { padding: var(--space-4); }
.chart-load-state {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.chart-loading-shell,
.chart-series-unavailable {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 330px;
  gap: var(--space-2);
  padding: var(--space-5);
  color: var(--muted);
  text-align: center;
}
.chart-loading-shell p,
.chart-series-unavailable p { max-width: 48ch; margin: 0; font-size: 12px; }
.chart-series-unavailable strong { color: var(--ink); font-size: 15px; }
.chart-series-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--seq-hi);
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
}

.event-timeline-fallback {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  min-height: 240px;
  padding: var(--space-5);
  background: var(--border-2);
}
.event-timeline-fallback > div {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--surface);
}
.event-timeline-fallback > div.is-emphasis { background: var(--accent-14); }
.event-timeline-fallback span {
  color: var(--seq-hi);
  font-size: 10px;
  font-weight: 750;
}
.event-timeline-fallback small {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.event-timeline-fallback strong {
  overflow-wrap: anywhere;
  font-size: 18px;
}
.chart-fallback-note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-size: 11px;
}

.event-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.event-contract-panel h2,
.event-bottom-grid .source-panel h2 { margin: 0 0 var(--space-4); font-size: 20px; }
.event-contract-row {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-2);
}
.event-contract-row span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.event-contract-row strong,
.event-contract-row a {
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* One restrained page entrance. Dynamic data rows are revealed once. */
.motion-ready [data-enter] {
  opacity: 0;
  transform: translateY(8px);
}
.motion-ready [data-enter].is-entered {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 220ms cubic-bezier(.16, 1, .3, 1),
    transform 220ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--enter-order, 0) * 34ms);
}

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

@media (max-width: 720px) {
  .event-hero { grid-template-columns: minmax(0, 1fr); }
  .event-live-snapshot { min-width: 0; width: 100%; }
  .event-story-panel,
  .event-bottom-grid { grid-template-columns: minmax(0, 1fr); }
  .event-analysis {
    padding-inline-start: 0;
    padding-top: var(--space-5);
    border-inline-start: 0;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 480px) {
  .brand-mark { width: 40px; height: 40px; }
  .brand-sub { display: none; }
  .breakout-preview-card { grid-template-columns: minmax(0, 1fr); }
  .breakout-preview-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breakout-preview-facts > div:last-child { grid-column: 1 / -1; }
  .event-key-facts,
  .event-timeline-fallback { grid-template-columns: minmax(0, 1fr); }
  .event-identity { align-items: flex-start; }
  .event-token-logo { width: 68px; height: 68px; border-radius: 18px; }
  .event-identity h2 { font-size: clamp(27px, 10vw, 36px); }
  .event-live-snapshot { padding: var(--space-3); }
  .chart-load-state { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark,
  .breakout-preview-card,
  .breakout-preview-cta,
  .motion-ready [data-enter],
  .motion-ready [data-enter].is-entered {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------- DEX launch evidence + category market share ---------------- */

.meme-market-panel {
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(300px, .8fr) minmax(360px, 1.5fr);
  align-items: center;
  gap: var(--space-5);
}
.meme-market-copy h2 { margin: var(--space-1) 0; }
.meme-market-copy .panel-sub { margin: 0; }
.meme-market-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--border);
}
.meme-market-metrics article {
  min-width: 0;
  padding: var(--space-3);
  background: var(--plane);
}
.meme-market-metrics span,
.meme-market-metrics strong,
.meme-market-metrics small { display: block; }
.meme-market-metrics span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.meme-market-metrics strong {
  margin-top: var(--space-1);
  font-size: clamp(18px, 2vw, 25px);
}
.meme-market-metrics small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.meme-market-share { min-width: 0; }
.market-share-bar {
  display: flex;
  height: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--plane);
}
.market-share-segment {
  width: var(--share);
  min-width: 1px;
  border-inline-end: 1px solid var(--plane);
  transition: opacity var(--dur-micro) var(--ease-out);
}
.market-share-segment:hover { opacity: .74; }
.market-share-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}
.market-share-legend > span {
  display: inline-grid;
  grid-template-columns: 8px auto auto;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}
.market-share-legend strong { color: var(--ink-2); }
.market-share-key { width: 8px; height: 8px; border-radius: 2px; }
.market-share-1 { background: var(--seq-08); }
.market-share-2 { background: var(--seq-07); }
.market-share-3 { background: var(--seq-06); }
.market-share-4 { background: var(--seq-05); }
.market-share-5 { background: var(--seq-04); }
.market-share-6 { background: var(--seq-03); }
.market-share-7 { background: var(--axis); }

.leader-mcap {
  display: grid;
  justify-items: end;
  gap: 1px;
  color: var(--muted);
}
.leader-mcap small {
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.leader-mcap strong { color: var(--ink-2); font-size: 11px; }

.source-link.source-only {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 46px;
}
.source-link.source-only strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-button {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.source-button .source-logo-wrap { flex: 0 0 22px; }
.source-button .source-copy { flex: 1 1 auto; }
.source-button .source-arrow { flex: none; }

.dex-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--border);
  background: var(--border-2);
}
.dex-snapshot-grid > div {
  min-width: 0;
  padding: var(--space-3);
  background: var(--plane);
}
.dex-snapshot-grid span,
.dex-snapshot-grid strong { display: block; }
.dex-snapshot-grid span {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dex-snapshot-grid strong { margin-top: 3px; font-size: 13px; overflow-wrap: anywhere; }
.dex-frame-wrap.is-deferred {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: var(--space-5);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--plane);
  background-size: 48px 48px;
}
.dex-load-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: min(100%, 300px);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  border: 1px solid var(--accent-45);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out);
}
.dex-load-button > span:first-child { color: var(--seq-hi); font-size: 18px; }
.dex-load-button strong,
.dex-load-button small { display: block; }
.dex-load-button small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.dex-load-button:active { transform: translateY(1px); }
.dex-empty-note { margin: 0; padding: var(--space-4); color: var(--muted); }

.market-history-panel,
.case-story-panel,
.event-history-panel {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

@media (max-width: 1040px) {
  .meme-market-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meme-market-share { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .meme-market-panel { grid-template-columns: minmax(0, 1fr); }
  .meme-market-share { grid-column: auto; }
  .leader-row { grid-template-columns: 24px 24px minmax(0, 1fr) minmax(74px, auto) 68px; }
  .leader-mcap { display: grid; }
}

@media (max-width: 520px) {
  .meme-market-metrics { grid-template-columns: minmax(0, 1fr); }
  .leader-row { grid-template-columns: 20px 24px minmax(0, 1fr) 66px; }
  .leader-mcap { display: none; }
}

/* ---------------- Crypto Bros shared route shell ----------------
   A compact three-line control lives inside the header. It opens a grouped
   research panel below the header without exposing a redundant “Menu” label. */

body { padding-inline-start: 0; }

.site-head {
  position: sticky;
  inset: 0 auto auto 0;
  top: 0;
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
  border-right: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: none;
  z-index: var(--z-sticky);
}

.head-inner {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: var(--space-3);
  min-height: 58px;
  max-width: var(--wrap, 1240px);
  margin-inline: auto;
  padding-block: var(--space-2);
}

.brand { align-items: center; gap: var(--space-3); }
.brand-mark {
  width: 44px;
  height: 44px;
  /* the Crypto Bros mark is wider than it is tall; cover cut its edges off */
  object-fit: contain;
  border-radius: 11px;
  box-shadow: 0 0 0 1px var(--border), 0 10px 24px -16px var(--accent);
}
.brand-sub { display: none; }

.head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: auto;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
}

.status-bar.wrap {
  padding-block: var(--space-2);
  border-top: 0;
}

.nav-launcher:disabled { opacity: .55; cursor: not-allowed; }

/* ---- launcher ----
   A three-line button in the header, sized to match the theme toggle beside it.
   The drawer it opens is positioned against --head-h, which the shell measures,
   because pages carrying a status bar are taller than those without. */

.nav-launcher {
  text-decoration: none;
  display: inline-grid;
  place-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition:
    transform var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out);
  z-index: calc(var(--z-navigation) + 1);
}

.nav-launcher-bars {
  display: grid;
  gap: 4px;
}

.nav-launcher-bars span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}

.nav-launcher:active { transform: translateY(1px); }

body[data-nav-open] .nav-launcher {
  border-color: var(--accent-28);
  background: var(--surface-hover);
}
body[data-nav-open] .nav-launcher-bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body[data-nav-open] .nav-launcher-bars span:nth-child(2) { opacity: 0; }
body[data-nav-open] .nav-launcher-bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---- drawer ---- */

.primary-nav {
  position: fixed;
  right: max(20px, calc((100vw - var(--wrap)) / 2 + 20px));
  top: calc(var(--head-h, 58px) + var(--space-2));
  display: block;
  width: min(46rem, calc(100vw - 40px));
  max-height: min(72dvh, 34rem);
  padding: var(--space-md);
  overflow-y: auto;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 30px 70px -28px var(--shadow-strong);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(.985);
  transform-origin: top right;
  transition:
    transform var(--dur-short) var(--ease-out),
    opacity var(--dur-short) var(--ease-out),
    visibility 0s linear var(--dur-short);
  z-index: var(--z-navigation);
}

body[data-nav-open] .primary-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

body[data-nav-open] { overflow: hidden; }

.nav-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-2);
}

.nav-panel-title {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-panel-sub { margin: 0; color: var(--muted); font-size: 11.5px; }

.nav-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-md);
}

.nav-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.nav-column-title {
  margin: 0 0 var(--space-2xs);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.primary-nav a {
  text-decoration: none;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  transition:
    color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out);
}

.nav-copy { display: grid; gap: 2px; min-width: 0; }
.primary-nav a strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.primary-nav a small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }

.nav-icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: color var(--dur-micro) var(--ease-out);
}
.primary-nav a.is-active .nav-icon { color: var(--seq-hi); }

.primary-nav a.is-active {
  border-color: var(--accent-28);
  background: var(--accent-14);
  box-shadow: inset 2px 0 0 var(--seq-mid);
}
.primary-nav a.is-active strong { color: var(--seq-hi); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  padding: 0;
  border: 0;
  /* A neutral scrim in both themes: the drawer needs separation, not a wash. */
  background: oklch(13% 0.008 255 / 0.45);
  cursor: pointer;
  z-index: var(--z-backdrop);
}
.nav-backdrop[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .primary-nav a:hover {
    color: var(--ink);
    border-color: var(--border);
    background: var(--surface-hover);
  }
  .primary-nav a:hover .nav-icon { color: var(--ink-2); }
  .nav-launcher:hover { border-color: var(--ink-20); background: var(--surface-hover); }
}

@media (min-width: 34rem) {
  .nav-column + .nav-column {
    padding-left: var(--space-md);
    border-left: 1px solid var(--border-2);
  }
}

@media (min-width: 60rem) {
  .brand-sub {
    display: block;
    max-width: 40ch;
    margin-top: 2px;
  }
}

@media (max-width: 33.99rem) {
  .head-inner { gap: var(--space-2); }
  .brand { gap: var(--space-2); min-width: 0; }
  .brand h1 { font-size: 14px; white-space: nowrap; }
  .brand-mark { width: 40px; height: 40px; }
  .head-actions { gap: var(--space-2); }
  .theme-toggle, .nav-launcher { width: 40px; height: 40px; }
  .primary-nav {
    right: 10px;
    width: calc(100vw - 20px);
    max-height: calc(100dvh - var(--head-h, 58px) - 20px);
    padding: var(--space-3);
  }
  .nav-panel-sub { display: none; }
  .nav-columns { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

.site-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.site-foot p { margin: 0; }

.source-link.source-only.is-branded-source {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.source-link.has-no-logo { grid-template-columns: minmax(0, 1fr) auto; }

.lazy-data-note {
  display: grid;
  min-height: 220px;
  margin: 0;
  place-items: center;
  color: var(--muted);
  border-block: 1px solid var(--border-2);
  text-align: center;
}

@media (min-width: 40rem) {
  .site-foot {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ---------------- Case document · shared article format ----------------
   Every research endpoint (memecoin case, 2026 breakout, NFT collection)
   opens with the official logo centred above the headline, then reads as one
   article: thesis, why it moved, factors, chart, and the dated triggers. */

.case-doc {
  display: grid;
  gap: var(--space-md);
  max-width: 62rem;
  padding-bottom: var(--space-xl);
}
.case-doc > * { min-width: 0; }
.case-doc .breadcrumb { margin: var(--space-md) 0 0; }

.doc-masthead {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-lg) var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-2);
  text-align: center;
}

.doc-logo {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--surface);
}

.doc-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.doc-title {
  margin: 0;
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.doc-title .doc-sym {
  margin-left: 10px;
  color: var(--muted);
  font-family: var(--font-outlier);
  font-size: .5em;
  letter-spacing: .04em;
  vertical-align: middle;
}

.doc-standfirst {
  max-width: 60ch;
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.doc-meta div {
  display: grid;
  gap: 2px;
  min-width: 8.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--plane);
  text-align: left;
}
.doc-meta span { color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.doc-meta strong { color: var(--ink); font-size: 15px; }
.doc-meta small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.doc-meta .is-emphasis { border-color: var(--accent-28); background: var(--accent-14); }
.doc-meta-ath { margin-top: calc(var(--space-2) * -0.25); }

.doc-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
}

.doc-section { display: grid; gap: var(--space-3); }
.doc-section > h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.01em;
}
.doc-section > .eyebrow { margin: 0; }
.doc-prose { max-width: 68ch; color: var(--ink-2); font-size: 15px; line-height: 1.75; }
.doc-prose p { margin: 0 0 var(--space-3); }
.doc-prose p:last-child { margin-bottom: 0; }

.doc-callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-3);
}
.doc-callout {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--plane);
}
.doc-callout h3 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.doc-callout p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.doc-callout.is-accent { border-color: var(--accent-28); background: var(--accent-14); }

.doc-factors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc-factor {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
}
.doc-factor strong { color: var(--ink); font-size: 14px; }
.doc-factor span { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }

.doc-triggers { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.doc-trigger {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-2);
}
.doc-trigger:last-child { border-bottom: 1px solid var(--border-2); }
.doc-trigger time {
  color: var(--seq-hi);
  font-family: var(--font-outlier);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.doc-trigger p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; }

.doc-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

.doc-lead {
  max-width: 68ch;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}

.doc-markers {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc-markers li {
  position: relative;
  padding-left: var(--space-md);
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}
.doc-markers li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--seq-mid);
}

@media (max-width: 40rem) {
  .doc-logo { width: 84px; height: 84px; border-radius: 22px; }
  .doc-trigger { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .doc-meta div { min-width: 0; flex: 1 1 9rem; }
}

/* ---------------- Landing route index ---------------- */

.landing {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-xl) var(--space-2xl);
}

.landing-hero {
  display: grid;
  gap: var(--space-md);
  max-width: 46rem;
}
.landing-hero h2 {
  margin: 0;
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.06;
  letter-spacing: -.03em;
}
.landing-hero p {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.65;
}
.landing-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.landing-cta {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  color: var(--accent-ink);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--seq-mid);
  font-weight: 600;
}
.landing-cta.is-quiet {
  color: var(--ink);
  border-color: var(--border);
  background: transparent;
}

.landing-group { display: grid; gap: var(--space-md); }
.landing-group > header { display: grid; gap: var(--space-2xs); }
.landing-group h3 { margin: 0; font-size: 20px; }

.landing-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: var(--space-3);
}

.landing-route {
  text-decoration: none;
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition:
    transform var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}
.landing-route strong { color: var(--ink); font-size: 17px; }
.landing-route span { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.landing-route em {
  margin-top: var(--space-2xs);
  color: var(--muted);
  font-family: var(--font-outlier);
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: .04em;
}

@media (hover: hover) and (pointer: fine) {
  .landing-route:hover {
    transform: translateY(-2px);
    border-color: var(--accent-28);
    background: var(--surface-hover);
  }
}

/* ---------------- NFT route ---------------- */

.nft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-3);
}

.nft-card {
  text-decoration: none;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition:
    transform var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out);
}
.nft-card-head { display: flex; align-items: center; gap: var(--space-3); }
.nft-card-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--plane);
}
.nft-card-head strong { display: block; color: var(--ink); font-size: 16px; }
.nft-card-head small { color: var(--muted); font-size: 12px; }
.nft-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-2);
}
.nft-card-stats div { display: grid; gap: 2px; }
.nft-card-stats span { color: var(--muted); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.nft-card-stats strong { color: var(--ink); font-size: 14px; }
.nft-card p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.nft-card.is-context { background: var(--plane); }
.nft-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-2);
}
.nft-read-link {
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.nft-read-link:hover { color: var(--seq-hi); }

@media (hover: hover) and (pointer: fine) {
  .nft-card:hover { transform: translateY(-2px); border-color: var(--accent-28); }
}

.nft-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 11px;
}
.nft-flag.is-live { color: var(--seq-hi); border-color: var(--accent-28); background: var(--accent-14); }

@media (max-width: 28rem) {
  .nft-grid { grid-template-columns: minmax(0, 1fr); }
  .nft-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.floor-chart { width: 100%; min-width: 0; margin: 0; }
.floor-chart svg { display: block; width: 100%; height: auto; }
.floor-chart figcaption { margin-top: var(--space-2); color: var(--muted); font-size: 12px; line-height: 1.5; }

/* ---------------- 2026 market tape + tactile controls ---------------- */

body {
  overflow-x: clip;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--seq-mid) 4%, transparent), transparent 24rem),
    var(--plane);
}

.market-tape {
  position: relative;
  z-index: calc(var(--z-sticky) - 1);
  min-height: 42px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-2);
  background: color-mix(in oklch, var(--plane) 92%, var(--seq-mid) 8%);
}

.market-tape::before,
.market-tape::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 0;
  width: clamp(20px, 5vw, 80px);
  pointer-events: none;
}
.market-tape::before { left: 0; background: linear-gradient(90deg, var(--plane), transparent); }
.market-tape::after { right: 0; background: linear-gradient(-90deg, var(--plane), transparent); }
.market-tape-viewport { width: 100%; overflow: hidden; contain: inline-size; }
.market-tape-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-height: 42px;
  will-change: transform;
}
.market-tape[data-state="ready"] .market-tape-track,
.market-tape[data-state="partial"] .market-tape-track {
  animation: market-tape-right 34s linear infinite;
}
.market-tape-group { display: inline-flex; align-items: center; flex: none; }
.market-tape-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 190px;
  min-height: 42px;
  padding-inline: var(--space-4);
  border-right: 1px solid var(--border-2);
  white-space: nowrap;
}
.market-tape-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 50%;
}
.market-tape-item strong { color: var(--ink); font-size: 12px; letter-spacing: .08em; }
.market-tape-price { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.market-tape-change { margin-left: auto; font-size: 11px; }
.market-tape-change.up { color: var(--up); }
.market-tape-change.down { color: var(--down); }
.market-tape-skeleton {
  width: 190px;
  height: 18px;
  margin-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--surface), var(--surface-hover), var(--surface));
  background-size: 200% 100%;
  animation: tape-skeleton 1.2s linear infinite;
}
.market-tape-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.market-tape-error[hidden] { display: none; }
@keyframes market-tape-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes tape-skeleton { to { background-position: -200% 0; } }

.theme-toggle {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--accent-28), var(--border)) border-box;
  box-shadow: 0 8px 24px -20px var(--seq-mid);
}
.theme-toggle { width: 44px; height: 44px; }
.theme-glyph { width: 20px; height: 20px; overflow: visible; }
.theme-glyph-sun,
.theme-glyph-rays,
.theme-glyph-moon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  transform-origin: 12px 12px;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.theme-glyph-sun { fill: color-mix(in oklch, var(--warn) 24%, transparent); }
.theme-glyph-moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-glyph-sun,
.theme-glyph-rays { opacity: 0; transform: rotate(-45deg) scale(.6); }
:root[data-theme="light"] .theme-glyph-moon { opacity: 0; transform: rotate(45deg) scale(.6); }
:root[data-theme="light"] .theme-glyph-sun,
:root[data-theme="light"] .theme-glyph-rays { opacity: 1; transform: rotate(0) scale(1); }

.has-interaction-ripple { position: relative; overflow: hidden; isolation: isolate; }
.interaction-ripple {
  position: absolute;
  z-index: 3;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--seq-mid) 28%, transparent);
  pointer-events: none;
  animation: interaction-ripple 520ms var(--ease-out) forwards;
}
@keyframes interaction-ripple { to { transform: scale(24); opacity: 0; } }
/* Source marks carry identity; labels stay short and literal. */
.source-link,
.source-link.source-only.is-branded-source { grid-template-columns: 34px minmax(0, 1fr); }
.source-link.has-no-logo { grid-template-columns: minmax(0, 1fr); }
.source-link { max-width: 100%; overflow: hidden; }
.source-copy { min-width: 0; }
.source-copy strong,
.source-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-button { gap: var(--space-2); }
.source-arrow { display: none !important; }

.identity-item code {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Article pages use the same font family, with an editorial rhythm instead of
   introducing an ornamental route-specific typeface. */
.case-doc { counter-reset: research-section; }
.case-doc .doc-masthead { position: relative; }
.case-doc .doc-title {
  max-width: 18ch;
  font-size: clamp(2.15rem, 6.5vw, 4.75rem);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.case-doc .doc-standfirst { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.7; }
.case-doc .doc-section { counter-increment: research-section; }
.case-doc .doc-section > .eyebrow::before {
  content: "0" counter(research-section) " / ";
  color: var(--seq-mid);
  font-family: var(--font-outlier);
  letter-spacing: .02em;
}
.case-doc .doc-section > h2 {
  max-width: 26ch;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.case-doc .doc-callout.is-accent {
  border-color: var(--accent-28);
  background: linear-gradient(110deg, var(--accent-14), var(--plane) 58%);
}
.case-doc .doc-callout.is-accent p { color: var(--ink); font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.65; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }

@media (max-width: 36rem) {
  .market-tape-item { min-width: 168px; padding-inline: var(--space-3); }
  .market-tape[data-state="ready"] .market-tape-track,
  .market-tape[data-state="partial"] .market-tape-track { animation-duration: 26s; }
  .case-doc .doc-title { max-width: 13ch; }
}

@media (max-width: 48rem) {
  .clock { display: none; }
}

.landing-cta,
.landing-route,
.nft-read-link,
.source-link,
.source-button { white-space: nowrap; }
.landing-cta:active,
.landing-route:active,
.nft-read-link:active,
.source-button:active { opacity: .72; }
.theme-toggle:disabled,
.source-link[aria-disabled="true"],
.source-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .market-tape-track,
  .market-tape-skeleton,
  .interaction-ripple { animation: none !important; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
}

/* ---------------- Homepage · Stat-Led Command Deck ---------------- */

.command-deck {
  margin: var(--space-5) 0 var(--space-6);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 18px 60px color-mix(in oklch, var(--plane) 72%, transparent);
  animation: command-deck-in 420ms var(--ease-out) both;
}

.command-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  min-height: 360px;
  border-bottom: 1px solid var(--border);
}

.command-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  padding: var(--space-6) clamp(var(--space-5), 5vw, var(--space-2xl)) var(--space-2xl);
}

.command-copy .eyebrow { margin-bottom: var(--space-3); }
.command-copy h2 {
  max-width: 12ch;
  min-width: 0;
  margin: 0;
  font-size: clamp(44px, 6.2vw, 84px);
  line-height: .96;
  letter-spacing: -.065em;
  overflow-wrap: anywhere;
}
.command-copy > p:not(.eyebrow) {
  max-width: 48ch;
  margin: var(--space-5) 0 0;
  color: var(--ink-2);
  font-size: clamp(15px, 1.5vw, 18px);
}

.command-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.command-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.command-link:hover { border-color: var(--ink-20); background: var(--surface-hover); }
.command-link:focus-visible,
.mover-row:focus-visible { outline: 2px solid var(--seq-mid); outline-offset: -2px; }
.command-link:active,
.mover-row:active { filter: brightness(.9); }
.command-link.is-primary { color: var(--accent-ink); border-color: var(--seq-mid); background: var(--seq-mid); }
.command-link.is-primary:hover { background: var(--seq-07); }

.command-primary-metric {
  display: grid;
  align-content: end;
  min-width: 0;
  padding: var(--space-6);
  border-left: 1px solid var(--border);
  background: color-mix(in oklch, var(--seq-mid) 8%, var(--plane));
}
.command-primary-metric span,
.command-metric-rail span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.command-primary-metric strong {
  margin-top: var(--space-3);
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
.command-primary-metric small {
  margin-top: var(--space-3);
  color: var(--ink-2);
  font-size: 15px;
}
.command-primary-metric small.up { color: var(--up); }
.command-primary-metric small.down { color: var(--down); }
.command-primary-metric p {
  margin: var(--space-5) 0 0;
  color: var(--muted);
  font-size: 11px;
}

.command-metric-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.command-metric-rail article {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--plane);
}
.command-metric-rail strong {
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.command-composition {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.command-composition h3 { margin: 0; font-size: 13px; }
.command-composition p { margin: var(--space-1) 0 0; color: var(--muted); font-size: 10px; }

.command-movers { padding: var(--space-5); scroll-margin-top: var(--space-3xl); }
.movers-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.movers-head .eyebrow { margin-bottom: var(--space-1); }
.movers-head h3 { margin: 0; font-size: clamp(22px, 2.7vw, 34px); letter-spacing: -.035em; }
.movers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.movers-grid > section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--plane);
}
.mover-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border);
}
.mover-column-head h4 { margin: 0; font-size: 12px; }
.mover-column-head span { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .08em; }
.mover-list { min-height: 276px; }
.mover-row {
  display: grid;
  grid-template-columns: 26px 30px minmax(0, 1fr) auto 74px;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: 55px;
  padding: var(--space-2) var(--space-3);
  color: var(--ink);
  border-bottom: 1px solid var(--border-2);
  text-decoration: none;
  transition: background-color 180ms var(--ease-out);
}
.mover-row:last-child { border-bottom: 0; }
.mover-row:hover { background: var(--surface-hover); }
.mover-rank { color: var(--muted); font-size: 10px; }
.mover-name { display: grid; min-width: 0; line-height: 1.2; }
.mover-name strong { font-size: 12px; }
.mover-name small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mover-market-cap { display: grid; justify-items: end; line-height: 1.2; }
.mover-market-cap small { color: var(--muted); font-size: 9px; }
.mover-market-cap strong { font-size: 11px; }
.mover-change { min-width: 68px; text-align: right; font-size: 13px; }
.mover-empty {
  display: grid;
  place-items: center;
  min-height: 276px;
  margin: 0;
  padding: var(--space-5);
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}
.mover-coverage {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: 10px;
}

@keyframes command-deck-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 62rem) {
  .command-hero { grid-template-columns: minmax(0, 1fr); }
  .command-primary-metric { min-height: 220px; border-top: 1px solid var(--border); border-left: 0; }
  .movers-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 46rem) {
  .command-deck { margin-top: var(--space-3); }
  .command-hero { min-height: 0; }
  .command-copy { padding: var(--space-5) var(--space-4) var(--space-6); }
  .command-copy h2 { font-size: clamp(42px, 14vw, 62px); }
  .command-primary-metric { padding: var(--space-5) var(--space-4); }
  .command-metric-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-metric-rail article { padding: var(--space-4); }
  .command-composition { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
  .command-movers { padding: var(--space-4); }
  .movers-head { align-items: flex-start; flex-direction: column; }
  .movers-head .seg { width: 100%; }
  .movers-head .seg-btn { flex: 1; }
  .mover-row { grid-template-columns: 22px 30px minmax(0, 1fr) 70px; gap: var(--space-2); }
  .mover-market-cap { grid-column: 3 / 5; grid-row: 2; justify-items: start; }
  .mover-market-cap small { display: none; }
  .mover-change { grid-column: 4; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .command-deck { animation: none; }
}

/* ============================================================
   Responsive layer — mobile is a layout, not a scaled desktop
   ------------------------------------------------------------
   Root cause this section fixes: a grid or flex item defaults to
   `min-width: auto`, so its width is pushed up to its min-content size. A
   research card holding a 1180px table therefore laid itself out at ~1534px
   inside a 390px phone, and `overflow-x: clip` on html/body then hid the
   1150px that hung off the right edge instead of letting anyone reach it.
   Every container that holds a wide dataset now declares `min-width: 0` and
   confines the wide part to its own scroll region or to a card stack.
   ============================================================ */

/* --- 1. Structural containment ------------------------------------------ */

/* The clip on html/body stays as a guard so a single stray element can never
   create body-level horizontal scrolling. It must never be the thing that
   makes a layout look correct — tests/responsive-audit.test.mjs neutralises it
   and asserts the true layout width. */

.launchpad-ranking > *,
.rank-board,
.rank-board > *,
.panel > .table-scroll,
.doc-section > .table-scroll,
.launchpad-analytics-card,
.launchpad-card-header,
.launchpad-card-footer,
.launchpad-source-row,
.launchpad-table-head,
.kpi,
.hero-kpis > *,
.nft-card,
.case-card,
.research-card { min-width: 0; }

.table-scroll {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
}
.table-scroll:focus-visible { outline: 2px solid var(--seq-mid); outline-offset: 2px; }

/* Anything that carries an unbroken string — a contract address, a token name
   with no spaces, a URL — breaks rather than pushing its container wide. */
.kpi-val,
.rank-card-title,
.rank-card-details dd,
.launchpad-card-title h2,
.route-hero h2,
.doc-title { overflow-wrap: anywhere; }

img, svg, video, canvas, table { max-width: 100%; }
.table-scroll table { max-width: none; }

/* --- 2. Launchpad card --------------------------------------------------- */

/* Long chain/category copy is launchpad identity — it wraps, it is never
   truncated. */
.launchpad-card-title .eyebrow { white-space: normal; overflow-wrap: anywhere; }
.launchpad-card-title { min-width: 0; }

/* Metric values wrap onto a second line instead of being ellipsised away. */
.launchpad-metric strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* A contract address is evidence; it gets shown in full, not cut at 150px. */
.contract-cell {
  display: block;
  width: auto;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-card .contract-cell {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  /* rank + logo + title on one row, timestamp on its own row below */
  .launchpad-card-header {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
  }
  .launchpad-rank { align-self: center; }
  .launchpad-asof { grid-column: 1 / -1; }
  .launchpad-card-title h2 { font-size: clamp(22px, 7vw, 30px); }
  .platform-logo { width: 48px; height: 48px; }
}

/* --- 3. Ranking board: dense table on desktop, cards on a phone ---------- */

.rank-board { display: block; }
.rank-cards { display: none; list-style: none; margin: 0; padding: 0; }

.rank-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-2);
}
.rank-card:last-child { border-bottom: 0; }

.rank-card-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.rank-card-rank { flex: none; width: 2.2ch; color: var(--muted); font-size: 12px; }
.rank-card-head .row-logo,
.rank-card-head img {
  flex: none;
  width: 30px; height: 30px;
  margin: 0;
  vertical-align: baseline;
}
.rank-card-ident { min-width: 0; display: grid; gap: 2px; }
.rank-card-title {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}
a.rank-card-title::after {
  content: '';
  position: absolute;
  inset: 0;
}
.rank-card { position: relative; }
.rank-card-sub { color: var(--muted); font-size: 12px; line-height: 1.3; }

.rank-card-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: var(--space-3);
  margin: 0;
}
.rank-card-metric { min-width: 0; }
.rank-card-metrics dt {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.rank-card-metrics dd {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.rank-card-metrics dd small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
}

.rank-card-more { position: relative; z-index: 1; }
.rank-card-more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--seq-hi);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.rank-card-more summary::-webkit-details-marker { display: none; }
.rank-card-more summary::before { content: '▸'; color: var(--muted); transition: transform var(--dur-micro) var(--ease-out); }
.rank-card-more[open] summary::before { transform: rotate(90deg); }
.rank-card-more summary:focus-visible { outline: 2px solid var(--seq-mid); outline-offset: 2px; }

.rank-card-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: 12px;
}
.rank-card-details dt { color: var(--muted); }
.rank-card-details dd { margin: 0; overflow-wrap: anywhere; }
.rank-card-details a { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 40rem) {
  .rank-board > .table-scroll { display: none; }
  .rank-cards { display: block; }
}

/* --- 4. Site status moved out of the header ------------------------------ */

/* The status line used to sit under the brand and cost ~30px of a phone's
   first screen on every route. It now reports from the footer, where it reads
   as provenance rather than chrome. The dot semantics are unchanged, and the
   footer reserves the row's height up front so relocating it shifts nothing. */
.site-foot .status-bar {
  align-items: flex-start;
  min-height: 1.5rem;
  padding: 0;
  color: var(--ink-2);
}
.site-foot .status-bar .dot { margin-top: .45em; }
.site-foot-status { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.site-foot-status .status-bar { max-width: 100%; }

/* A status carried only by colour is invisible to a reader who cannot see it,
   so the dot is paired with its own text label. */
.status-bar .status-state {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- 5. Touch targets and focus ----------------------------------------- */

.rank-card-more summary,
.table-link,
.source-icon-link,
.provenance-badge { min-height: 44px; }
.source-icon-link { width: 44px; height: 44px; }

@media (pointer: coarse) {
  .table-link,
  .lore-source-chip,
  .nft-flag { min-height: 44px; }
  .table-link { display: inline-flex; align-items: center; }
}

/* --- 6. KPI strips at the narrow end ------------------------------------ */

@media (max-width: 40rem) {
  .kpi-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
  .hero-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
}

@media (max-width: 22.5rem) {
  .kpi-strip,
  .hero-kpis { grid-template-columns: minmax(0, 1fr); }
  .kpi-val { font-size: 20px; }
}

/* Hidden in the header from the first paint, so the shell's move into the
   footer costs no reflow and the mobile header is brand + theme + menu only. */
.site-head .status-bar { display: none; }

/* The footer row now carries a second item, so it has to be able to wrap and
   its children have to be allowed to shrink — flex items default to
   min-width: auto, which pushed the status line past the right edge at 768px. */
.site-foot { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.site-foot > * { min-width: 0; }
.site-foot p { overflow-wrap: anywhere; }
/* Host for a ranking board: the board supplies its own scroll region, so the
   host must not be one as well. */
.rank-board-host { min-width: 0; }

/* ============================================================
   Airdrop research — index and case article
   ============================================================ */

.airdrop-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.airdrop-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.airdrop-card.is-featured { border-color: var(--accent-45); background: linear-gradient(150deg, var(--accent-14), var(--surface) 62%); }
.airdrop-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.airdrop-card-head strong { font-size: 16px; overflow-wrap: anywhere; }
.airdrop-card-sym { color: var(--muted); font-size: 12px; letter-spacing: .06em; flex: none; }
.airdrop-card-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--space-3); margin: 0; }
.airdrop-card-stats dt { margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.airdrop-card-stats dd { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }

.candidate-pool { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.candidate {
  display: grid;
  gap: 3px;
  padding-left: var(--space-3);
  border-left: 2px solid var(--border);
}
.candidate.is-published { border-left-color: var(--good); }
.candidate small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.candidate a { color: var(--seq-hi); }

/* --- Evidence board ------------------------------------------------------ */

.evidence-grid {
  display: grid;
  gap: 1px;
  margin-top: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.evidence-card { min-width: 0; padding: var(--space-4); background: var(--plane); }
.evidence-card.is-accent { background: linear-gradient(150deg, var(--accent-14), var(--plane) 70%); }
.evidence-card h3 { margin: 0 0 var(--space-2); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.evidence-value { margin: 0; font-size: 22px; font-weight: 650; line-height: 1.15; overflow-wrap: anywhere; }
.evidence-sub { margin: var(--space-2) 0 0; color: var(--ink-2); font-size: 11.5px; line-height: 1.5; }
.evidence-source { margin: var(--space-2) 0 0; color: var(--muted); font-size: 11px; }

.source-kind {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.source-kind:hover, .source-kind:focus-visible { border-color: var(--accent); color: var(--ink); }
/* Provenance is stated in words on the chip itself, so the colour is a second
   channel rather than the only one. */
.source-kind.is-official { border-color: var(--good); color: var(--good); }
.source-kind.is-on-chain { border-color: var(--seq-mid); color: var(--seq-hi); }
.source-kind.is-derived { border-color: var(--warn); color: var(--warn); }

/* --- Distribution flow --------------------------------------------------- */

/* Four narrowing stages. A stage the research could not source keeps its place
   and says so, rather than borrowing the number from the stage below it. */
.distribution-flow {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}
.flow-stage {
  position: relative;
  min-width: 0;
  /* each stage is drawn narrower than the one above, to the extent the
     container allows — the funnel shape carries the meaning */
  width: calc(100% - (var(--flow-step, 0) * min(6%, 2.5rem)));
  margin-inline: auto;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--plane);
  text-align: center;
}
.flow-stage + .flow-stage::before {
  content: '↓';
  position: absolute;
  top: calc(var(--space-3) * -1);
  left: 50%;
  translate: -50% -30%;
  color: var(--seq-mid);
  font-size: 14px;
  line-height: 1;
}
.flow-stage.is-unknown { border-style: dashed; background: transparent; }
.flow-label { margin: 0 0 var(--space-2); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.flow-value { margin: 0; font-size: clamp(22px, 6vw, 30px); font-weight: 650; line-height: 1.1; overflow-wrap: anywhere; }
.flow-value.is-copy { font-size: 14px; font-weight: 500; color: var(--ink-2); line-height: 1.5; }
.flow-stage.is-unknown .flow-value { color: var(--muted); font-size: 16px; }
.flow-note { margin: var(--space-2) 0 0; color: var(--ink-2); font-size: 11.5px; line-height: 1.5; }
.flow-source { margin: var(--space-2) 0 0; }

/* --- Two valuations ------------------------------------------------------ */

.valuation-board {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.valuation {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--plane);
}
.valuation.is-primary { border-color: var(--accent-45); background: linear-gradient(150deg, var(--accent-14), var(--plane) 66%); }
.valuation h3 { margin: 3px 0 var(--space-3); font-size: 16px; }
.valuation-value { margin: 0; font-size: clamp(26px, 7vw, 38px); font-weight: 650; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.valuation-formula { margin: var(--space-2) 0 0; color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.valuation-note { margin: var(--space-3) 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.55; }

.doc-subhead { margin: var(--space-4) 0 var(--space-2); font-size: 13px; }
.doc-list { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; line-height: 1.65; }
.doc-list li { margin-bottom: 6px; }
.lesson-list li { margin-bottom: var(--space-3); }
.price-after { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--space-3); margin: var(--space-4) 0 0; }
.price-after dt { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.price-after dd { margin: 3px 0 0; font-size: 18px; font-weight: 600; }

.airdrop-masthead { text-align: left; }
.airdrop-table { min-width: 62rem; }

/* ============================================================
   NFT history cards — four rule-relevant numbers, always visible
   ============================================================ */

.nft-card-title {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.nft-card-title:hover, .nft-card-title:focus-visible { color: var(--seq-hi); }

.nft-card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: var(--space-3);
}
.nft-stat { min-width: 0; }
.nft-stat span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.nft-stat strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.nft-stat small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.35; }

.nft-card-more { margin-top: var(--space-2); }
.nft-card-more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--seq-hi);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.nft-card-more summary::-webkit-details-marker { display: none; }
.nft-card-more summary::before { content: '▸'; color: var(--muted); transition: transform var(--dur-micro) var(--ease-out); }
.nft-card-more[open] summary::before { transform: rotate(90deg); }
.nft-card-more summary:focus-visible { outline: 2px solid var(--seq-mid); outline-offset: 2px; }

/* Qualification state is spelled out in the badge text; the border colour is a
   second channel, never the only one. */
.nft-flag.is-qualified { border-color: var(--good); }
.nft-flag.is-pending { border-style: dashed; color: var(--muted); }
.nft-flag.is-excluded { border-color: var(--warn); }

/* A panel head is a flex row, and flex items default to min-width: auto, so a
   segmented control wider than the column pushed the panel past the viewport
   instead of wrapping. Let both sides shrink, and let a long control wrap onto
   a second row rather than run off the edge. */
.panel-head > * { min-width: 0; max-width: 100%; }
.seg { max-width: 100%; flex-wrap: wrap; }
.seg-btn { min-width: 0; min-height: 44px; }

@media (max-width: 40rem) {
  /* Four ranking metrics fit as two rows of two on a phone; a horizontal
     scroller would hide half of them behind a gesture. */
  .seg { display: flex; width: 100%; }
  .seg-btn { flex: 1 1 45%; }
}
/* ============================================================
   Display typography — titles in the serif, data in the sans
   ------------------------------------------------------------
   The display face is reserved for identity and headline copy. Every number,
   label, table and control stays on Geist, because a serif's proportional
   figures undermine the tabular alignment the research tables depend on.
   ============================================================ */

.brand h1,
.route-hero h2,
.doc-title,
.command-copy h2,
.panel-head h2,
.panel > h2,
.doc-section > h2,
.airdrop-card-head strong,
.nft-card-title,
.case-card-name {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* The serif carries more optical weight at the same size, so the hero and the
   brand lockup are re-tuned rather than left on the sans metrics. */
.brand h1 { font-size: 19px; letter-spacing: -0.005em; }
.route-hero h2 { letter-spacing: -0.02em; line-height: 1.02; }
.doc-title { letter-spacing: -0.015em; }

/* Numerals never take the display face: tabular alignment beats flourish. */
.num,
.kpi-val,
.evidence-value,
.valuation-value,
.flow-value,
.rank-card-metrics dd,
.data-table,
.doc-meta strong { font-family: var(--font); }

@media (max-width: 33.99rem) {
  .brand h1 { font-size: 16px; }
}

/* Airdrop case masthead: the project's own mark and its official page, so a
   case identifies its subject before it starts quoting numbers about it. */
.airdrop-doc-logo { margin-bottom: var(--space-3); }
.airdrop-logo.is-doc {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--plane);
}
.airdrop-logo.is-doc img { width: 72px; height: 72px; object-fit: contain; padding: 8px; box-sizing: border-box; }
.airdrop-logo.is-doc .airdrop-logo-fallback { display: none; color: var(--muted); font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.airdrop-logo.is-doc.is-fallback img { display: none; }
.airdrop-logo.is-doc.is-fallback .airdrop-logo-fallback { display: block; }

.doc-official { margin-top: var(--space-3); }
.official-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--seq-hi);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.official-link:hover, .official-link:focus-visible { border-color: var(--accent); color: var(--ink); }

/* ============================================================
   Ticker tidy-up
   ------------------------------------------------------------
   Every mark now sits in the same circular frame, so a logo that ships with
   its own disc (BTC, ZEC) and one that does not (ETH) read at the same weight
   instead of one floating loose beside the other.
   ============================================================ */
.market-tape-logo {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.market-tape-logo img { width: 22px; height: 22px; object-fit: contain; display: block; }
.market-tape-item { gap: 9px; }
/* "S&P 500" is far wider than a three-letter ticker, so the symbol column is
   allowed to size to its content rather than forcing a uniform width. */
.market-tape-item strong { white-space: nowrap; }

/* ============================================================
   Chain badge — one presentation for every chain, everywhere
   ------------------------------------------------------------
   Chain names arrive from research config, CoinGecko platform ids and
   DeFiLlama slugs, so the same chain used to appear as "Solana" on one route
   and "solana" on another. chain-brands.js canonicalises the name; this styles
   it the same way wherever it lands.
   ============================================================ */
.chain-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  vertical-align: middle;
}
.chain-badge-logo {
  flex: none;
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.chain-badge-name { min-width: 0; overflow-wrap: anywhere; }
.chain-badge.is-unknown { color: var(--muted); }

/* Several chains for one token read as a row, wrapping rather than stretching
   the cell that holds them. */
.chain-badge-set { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }

.rank-card-details .chain-badge-logo,
.data-table .chain-badge-logo { width: 16px; height: 16px; }
.doc-meta .chain-badge-logo { width: 20px; height: 20px; }
/* `.doc-meta span` styles the field label ("CHAINS") as small uppercase. Every
   element of a chain badge is also a <span>, so all three levels — set,
   badge, name — have to opt back out, or the chain renders as "ETHEREUM" two
   sizes below its siblings. A chain name is a proper noun, not a label. */
.doc-meta .chain-badge-set,
.doc-meta .chain-badge,
.doc-meta .chain-badge-name,
.chain-badge-name {
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
  font-size: inherit;
}