/* layout + nav come from site.css — page-specific styles only below */
  a { color:inherit; }
  .heading-context { color:var(--muted); font-size:var(--type-sm); font-weight:var(--weight-normal); }
  .tabpanel.tab-inactive, #cyclemap.is-hidden { display:none; }
  .metric-context { color:var(--muted); font-weight:var(--weight-normal); text-transform:none; }
  .tier-legend { margin-top:8px; }
  .funnel-label { text-align:center; }
  .snapshot-time, .note-emphasis { color:var(--neutral); }
  .supply-history { color:var(--dim); }
  .read-unavailable { color:var(--muted); }
  .eth-protocol-value { color:#627eea; }
  .data-unavailable { color:var(--muted); font-size:var(--type-sm); }
  .missing-marker { color:var(--dim); }
  .concentration-note { margin-top:8px; }
  .concentration-note b { color:var(--bright); }
  .composition-bar { margin-top:9px; }
  .ecolbl.table-context { margin:9px 0 0; }
  .tail-placeholder { color:var(--dim); }
  .tail-empty { padding:4px; color:var(--dim); }
  .ftmsg.is-error { color:#e5534b; }
  .ftscreener.is-disabled { color:var(--dim); cursor:default; }
  .ftscreener.is-disabled:hover { text-decoration:none; }
  .ft-context { color:var(--dim); }
  .drill-hint, .action-hint { color:var(--accent); }
  .btc-emphasis { color:#f7931a; }
  .legend-gain { color:#3fb950; }
  .legend-loss { color:#e5534b; }
  .hero h1 { margin:0 0 5px; font-size:22px; font-weight:var(--weight-bold); letter-spacing:-.2px; }
  .hero h1 span { color:var(--accent); }
  .hero .meta { margin-top:7px; color:var(--muted); font-size:var(--type-sm); }
  /* version badge — a bump-able build stamp so each iteration of this page is trackable at a glance (there's no
     build system for this static file, so it's a hand-maintained constant rendered here and in the footer). */
  .verbadge { display:inline-block; margin-left:10px; vertical-align:2px; font-size:11px; font-weight:700; letter-spacing:.4px;
    color:var(--accent); background:rgba(88,166,255,.12); border:1px solid rgba(88,166,255,.35); border-radius:11px; padding:2px 9px; }


  /* plain section headings — no number prefix, no subtitle; a single flat heading reads as its own visual break */
  .bighead { font-size:26px; font-weight:500; color:var(--neutral); margin:34px 0 14px; letter-spacing:-.2px; text-align:center; }

  .dirword { color:var(--neutral); font-weight:600; }
  .gly { color:var(--muted); }

  /* 2 — FLOW MAP (hero) — cards sized down, connectors sized UP, so the row reads as a flow/sequence rather than
     a set of independent cards with a lost punctuation-mark between them. Ratio, not either size alone, is the fix. */
  .flowmap { display:flex; align-items:stretch; gap:0; }
  /* Liquidity Flow row reads right-to-left on desktop (Projects...Bitcoin) so Bitcoin lands directly under
     Stablecoins above it — a clean vertical join instead of a diagonal one. Only the VISUAL order flips
     (flex-direction); connectors mirror so they still point the true flow direction. DOM/tab order stays
     Bitcoin-first, so keyboard/screen-reader navigation is unaffected by the visual reversal. */
  .flowmap.flow-rev { flex-direction:row-reverse; }
  .flowmap.flow-rev .fchev svg { transform:scaleX(-1); }
  @media(max-width:880px){
    .flowmap{flex-direction:column;} .fchev{transform:rotate(90deg);}
    /* mobile already stacks top-to-bottom in natural chain order, continuing straight on from Stablecoins
       above — reversing here would put Bitcoin last instead of first, so cancel the desktop-only flip. */
    .flowmap.flow-rev{flex-direction:column;} .flowmap.flow-rev .fchev svg{transform:none;}
  }
  .flowspine { position:relative; }
  /* dotted join — Stablecoins (macro row) and the Stablecoins tab (flow row's entry point) are the same $ figure
     from the same source field; JS positions this from the real node rects so it stays correct at any width.
     Desktop only: below 880px the two rows already stack in one continuous column, reading as the same join
     without a line. */
  .fconnector { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; z-index:2; }
  @media(max-width:880px){ .fconnector{ display:none; } }
  .fnode { flex:1 1 0; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:11px 12px; text-decoration:none; color:inherit; transition:border-color .12s, transform .12s; }
  a.fnode:hover { border-color:var(--accent); transform:translateY(-2px); }
  .fnode .fstage { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:800;
    display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .fscope { color:var(--muted); border:1px solid var(--line); border-radius:7px; padding:0 5px; font-size:8px;
    line-height:16px; letter-spacing:.35px; white-space:nowrap; }
  /* macro tier — colour ONLY encodes the risk state (red=off · amber=neutral · green=on); the label word ITSELF
     carries the colour now — no separate dot, one fewer element for the same signal. */
  .fnode .fstage.st-off { color:#e5534b; } .fnode .fstage.st-on { color:#3fb950; } .fnode .fstage.st-nt { color:#e3b341; }
  /* Liquidity Flow row — identity colour ONLY where one is already established elsewhere on this page (Bitcoin's
     own tab uses this exact orange, Ethereum's own tab uses this exact blue); Ecosystems/Projects have no
     established identity colour anywhere else, so they stay neutral rather than get an invented one. */
  .fnode .fstage.id-btc { color:#f7931a; } .fnode .fstage.id-eth { color:#627eea; }
  .fnode .fval { font-size:19px; font-weight:700; margin-top:6px; line-height:1.1; }
  .fnode .fmetric, .fnode .fsub { font-size:11px; color:var(--muted); margin-top:2px; }
  .fnode .fdir { font-size:12px; margin-top:6px; color:var(--neutral); font-weight:600; }
  .fspark { height:31px; margin-top:8px; border-top:1px solid rgba(139,148,158,.14); padding-top:5px; }
  .fspark svg { width:100%; height:25px; display:block; overflow:visible; }
  .fspark path { vector-effect:non-scaling-stroke; }
  .fspark .end { fill:#58a6ff; }
  .fchev { display:flex; align-items:center; justify-content:center; flex:0 0 50px; }
  .fchev svg { width:100%; height:26px; }
  .fdir.d-off { color:#e5534b; } .fdir.d-on { color:#3fb950; } .fdir.d-nt { color:#e3b341; }
  /* Crypto door — headline first, then a compact audit trail. The state formula is unchanged: this surface exposes
     its three real votes and the recorded input crossing that caused the latest state transition. Flat surfaces
     only; colour still means risk state and never carries the explanation by itself. */
  .cryptodoor { padding:19px 24px 13px; margin:30px 0; text-align:center; }
  .riskheadline { display:flex; align-items:center; justify-content:center; gap:16px; min-height:28px; }
  .riskstate { display:flex; align-items:center; justify-content:center; gap:14px; }
  .riskarrow { width:24px; height:24px; flex-shrink:0; transition:transform .15s ease; }
  .risklabel { font-size:19px; font-weight:700; letter-spacing:.6px; }
  .riskstamp { color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:2px 7px; font-size:9px;
    line-height:16px; font-weight:750; letter-spacing:.55px; text-transform:uppercase; }
  .riskcause { margin-top:7px; color:var(--bright); font-size:13px; font-weight:620; }
  .riskcause .transition { font-variant-numeric:tabular-nums; }
  .riskmeta { margin-top:2px; color:var(--muted); font-size:10.5px; }
  .riskvotes { max-width:930px; margin:13px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .riskvote { min-width:0; padding:9px 14px; text-align:left; }
  .riskvote + .riskvote { border-left:1px solid var(--line); }
  .rvtop { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .rvname { color:var(--neutral); font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.45px; }
  .rvstate { font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.35px; white-space:nowrap; }
  .rvvalue { margin-top:2px; color:var(--bright); font-size:12px; font-weight:620; font-variant-numeric:tabular-nums; }
  .rvdate { margin-top:1px; color:var(--muted); font-size:9.5px; }
  .riskvote.is-off .rvstate { color:var(--negative); }
  .riskvote.is-on .rvstate { color:#3fb950; }
  .riskvote.is-nt .rvstate { color:#e3b341; }
  .riskdetails { max-width:930px; margin:7px auto 0; color:var(--muted); text-align:left; }
  .riskdetails summary { display:flex; align-items:center; justify-content:center; gap:7px; width:max-content; margin:0 auto;
    color:var(--muted); font-size:10.5px; cursor:pointer; list-style:none; user-select:none; }
  .riskdetails summary::-webkit-details-marker { display:none; }
  .riskdetails summary::after { content:'▾'; color:var(--dim); transition:transform .12s ease; }
  .riskdetails[open] summary::after { transform:rotate(180deg); }
  .riskdetails summary:hover, .riskdetails summary:focus-visible { color:var(--bright); }
  .riskdetailbody { margin-top:8px; padding-top:9px; border-top:1px solid var(--line); }
  .riskrule { color:var(--neutral); font-size:11px; }
  .riskrule small { display:block; margin-top:2px; color:var(--dim); font-size:9.5px; }
  .riskhistory { margin-top:8px; }
  .riskhistory-title { color:var(--dim); font-size:9px; font-weight:750; letter-spacing:.45px; text-transform:uppercase; }
  .riskhistory-row { display:grid; grid-template-columns:190px minmax(0,1fr); gap:12px; padding:6px 0;
    border-top:1px solid rgba(139,148,158,.17); font-size:10.5px; }
  .riskhistory-row:first-of-type { margin-top:3px; }
  .riskhistory-state { color:var(--neutral); font-variant-numeric:tabular-nums; }
  .riskhistory-cause { color:var(--muted); }
  .cryptodoor.v-off { background:rgba(229,83,75,.10); }
  .cryptodoor.v-off .riskarrow, .cryptodoor.v-off .risklabel { color:#e5534b; }
  .cryptodoor.v-on  { background:rgba(63,185,80,.10); }
  .cryptodoor.v-on  .riskarrow, .cryptodoor.v-on  .risklabel { color:#3fb950; }
  .cryptodoor.v-nt  { background:rgba(227,179,65,.10); }
  .cryptodoor.v-nt  .riskarrow, .cryptodoor.v-nt  .risklabel { color:#e3b341; }
  @media(max-width:720px){
    .cryptodoor { padding:17px 16px 12px; }
    .riskheadline { gap:10px; }
    .riskvotes { grid-template-columns:1fr; }
    .riskvote + .riskvote { border-left:0; border-top:1px solid var(--line); }
    .riskhistory-row { grid-template-columns:1fr; gap:1px; }
  }
  @media(max-width:430px){
    .riskheadline { flex-direction:column; gap:5px; }
    .riskcause { font-size:12px; }
  }

  /* Historical context — one shared time window across every plot. The regime ribbon is the signature element:
     state colours show WHEN the rule changed; dated transition labels below say WHICH votes caused the change. */
  .historypanel { margin:-12px 0 28px; border:1px solid var(--line); background:rgba(13,17,23,.58); }
  .historyhead { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:14px 16px 12px; }
  .historykicker { color:var(--accent); font-size:9px; font-weight:800; letter-spacing:.65px; text-transform:uppercase; }
  .historyhead h3 { margin:2px 0 0; color:var(--bright); font-size:15px; font-weight:680; }
  .historyhead p { margin:2px 0 0; color:var(--muted); font-size:10.5px; }
  .rangebar { display:flex; border:1px solid var(--line); flex-shrink:0; }
  .rangebar button { min-width:45px; border:0; border-right:1px solid var(--line); background:transparent; color:var(--muted);
    padding:6px 9px; font-family:inherit; font-size:10px; font-weight:700; line-height:1; cursor:pointer; }
  .rangebar button:last-child { border-right:0; }
  .rangebar button:hover, .rangebar button:focus-visible { color:var(--bright); }
  .rangebar button.active { background:#193b63; color:#fff; }
  .regimecontext { padding:0 16px 13px; }
  .regimetop { display:flex; justify-content:space-between; gap:14px; margin-bottom:6px; color:var(--muted); font-size:10px; }
  .regimetop b { color:var(--neutral); font-weight:700; }
  .regimeribbon { position:relative; height:15px; border:1px solid var(--line); background:var(--row); overflow:hidden; }
  .regimeseg { min-width:2px; height:100%; position:absolute; top:0; }
  .regimeseg.off { background:#e5534b; } .regimeseg.on { background:#3fb950; } .regimeseg.mixed { background:#d29922; }
  .regimeseg.changed::after { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:#fff; opacity:.9; }
  .regimeaxis { display:flex; justify-content:space-between; margin-top:4px; color:var(--dim); font-size:9px; }
  .regimeevents { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; color:var(--muted); font-size:9.5px; }
  .regimeevent { display:flex; align-items:flex-start; gap:5px; min-width:170px; }
  .regimeevent i { width:6px; height:6px; margin-top:4px; background:var(--accent); flex:0 0 6px; }
  .regimeevent b { color:var(--neutral); font-weight:700; }
  .historycharts { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--line); }
  .hchart { min-width:0; grid-column:span 2; padding:11px 14px 10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .hchart:nth-child(3) { border-right:0; }
  .hchart.confirm { grid-column:span 2; }
  .hchart:last-child { border-right:0; }
  .hcharttop { display:flex; align-items:baseline; justify-content:space-between; gap:9px; }
  .hchartname { color:var(--neutral); font-size:10px; font-weight:760; letter-spacing:.4px; text-transform:uppercase; }
  .hchartvalue { color:var(--bright); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .hchartsub { margin-top:1px; color:var(--dim); font-size:9.5px; min-height:14px; }
  .hchart svg { width:100%; height:76px; display:block; margin-top:4px; overflow:visible; }
  .hchart .grid { stroke:#2a313c; stroke-width:1; vector-effect:non-scaling-stroke; }
  .hchart .series { fill:none; stroke:#58a6ff; stroke-width:1.7; vector-effect:non-scaling-stroke; }
  .hchart.confirm .series { stroke:#8b9dc3; }
  .hchart .endpoint { fill:#58a6ff; }
  .hchart text { fill:var(--dim); font-size:8px; }
  .historynote { padding:9px 16px 11px; color:var(--dim); font-size:9.5px; line-height:1.45; }
  @media(max-width:820px){
    .historyhead { align-items:flex-start; flex-direction:column; }
    .hchart, .hchart.confirm { grid-column:span 3; }
    .hchart:nth-child(3) { border-right:1px solid var(--line); }
    .hchart:nth-child(even) { border-right:0; }
  }
  @media(max-width:540px){
    .historypanel { margin-top:-14px; }
    .rangebar { width:100%; }
    .rangebar button { flex:1; }
    .hchart, .hchart.confirm { grid-column:1/-1; border-right:0; }
    .regimetop { flex-direction:column; gap:2px; }
  }

  /* 2 — BTC backdrop: facts (neutral) vs reads (tagged, may carry meaningful colour) */
  /* --- BITCOIN backdrop row: ONE row — price(+ledger) · halving clock · dominance(+trend).
     Each cell is a flex COLUMN with its "header" (label+value) pinned to the TOP and its detail row pinned to the
     BOTTOM (margin-top:auto) — so if grid stretch gives a cell extra height, that space becomes an even gap BETWEEN
     the two blocks, not a dead void below everything. This holds regardless of how much content each cell has. */
  .bcellrow { display:grid; grid-template-columns:1.28fr 1.14fr 1fr; gap:12px; align-items:stretch; }
  @media(max-width:900px){ .bcellrow{ grid-template-columns:1fr 1fr; } .bcell.price{ grid-column:1/-1; } }
  @media(max-width:520px){ .bcellrow{ grid-template-columns:1fr; } .bcell.price{ grid-column:auto; } }
  .bcell { background:var(--panel); border:1px solid var(--line); border-top:2px solid rgba(247,147,26,.55); border-radius:10px; padding:13px 15px; display:flex; flex-direction:column; }
  .bcell .fk { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; }
  .bcell .fv { font-size:20px; font-weight:680; margin-top:4px; color:var(--bright); line-height:1.15; }
  .bcell .fv.btc { color:#f7931a; }
  .bcell .fvs { font-size:12px; color:var(--muted); margin-top:3px; }
  .cyclebar { height:5px; background:var(--line); border-radius:3px; margin-top:7px; overflow:hidden; }
  .cyclebar > i { display:block; height:5px; background:var(--neutral); }
  .bcell.hv { border-color:rgba(247,147,26,.42); }
  .bcell.hv .cyclebar { margin-top:auto; padding-top:7px; }
  .hvclock { font-variant-numeric:tabular-nums; letter-spacing:.4px; }
  .hvsec { color:#ffc37f; }
  .cyclebar > i.btc { background:#f7931a; transition:width .6s ease; }
  @keyframes hvpulse { 0%,100%{ opacity:.3; transform:scale(.78); } 50%{ opacity:1; transform:scale(1.05); } }
  .livedot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#f7931a; margin-right:8px; vertical-align:middle; animation:hvpulse 1.2s ease-in-out infinite; }
  /* valuation ledger — MC/FDV/VOL/ATH folded INTO the price card as one thin footer row (they're all derived from
     price); packed left with fixed gaps (not space-between) so it stays a tight ledger, not stretched-thin text. */
  .pledger { display:flex; flex-wrap:wrap; gap:7px 20px; margin-top:auto; padding-top:9px; border-top:1px solid var(--line); }
  .pitem { white-space:nowrap; }
  .pitem[title] { cursor:help; }
  .pitem .mk { font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:var(--dim); font-weight:700; margin-right:5px; }
  .pitem .mv { font-size:12px; font-weight:660; color:var(--bright); font-variant-numeric:tabular-nums; }
  .pitem .md { font-size:10.5px; color:var(--muted); margin-left:3px; }
  /* dominance trend — a small REAL sparkline (reuses the same daily series as the big chart below), pinned to the
     bottom like the other two cells' detail row — not decoration, and not dead space either. */
  .domspark { margin-top:auto; padding-top:8px; }
  .domspark svg { width:100%; height:26px; display:block; }
  /* ETHEREUM cells — same .bcell/.bcellrow structure as Bitcoin's, just re-themed (flat solid colour, no new effect).
     Price gets the most width (it carries the 4-item MC/FDV/Vol/ATH ledger, same as BTC's price cell) — dominance
     and ratio have equal, lighter content (value + trend + sparkline) so they share the rest evenly. The ratio
     cell's prominence comes from its larger value font (below), not from taking space the ledger needs. */
  @media(min-width:901px){ .bcellrow.eth{ grid-template-columns:1.3fr 1fr 1fr; } }   /* scoped so it never outranks the base responsive breakpoints below */
  .bcellrow.eth .bcell { border-top-color:rgba(98,126,234,.55); }
  .bcell .fv.eth { color:#627eea; }
  .bcell.ratio .fv { font-size:25px; }
  .reads { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }   /* rainbow + Fear&Greed (or staking) side by side */
  @media(max-width:760px){ .reads{grid-template-columns:1fr;} }
  .readcard { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:13px 15px; }
  .readcard .rk { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .readtag { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--dim); border:1px solid var(--line); border-radius:7px; padding:1px 6px; white-space:nowrap; }
  .readcard .rv { font-size:23px; font-weight:680; margin-top:5px; line-height:1.15; }
  .readcard .rsub { font-size:12px; color:var(--muted); margin-top:1px; }
  .readcard .rnote { font-size:10.5px; color:var(--dim); margin-top:9px; line-height:1.45; }
  /* rainbow band = a smooth blue→red gradient (set inline) with a prominent white marker pointing to BTC's position */
  .rband { height:14px; border-radius:4px; margin-top:24px; position:relative; }
  .rmark { position:absolute; top:-3px; bottom:-3px; width:3px; background:#fff; transform:translateX(-50%); box-shadow:0 0 0 1px rgba(0,0,0,.45); }
  .rmark::before { content:"▼"; position:absolute; top:-15px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; }
  .raxis { display:flex; justify-content:space-between; font-size:10.5px; color:var(--dim); margin-top:7px; }
  .rchips { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
  .rchip { font-size:10.5px; color:var(--muted); border:1px solid var(--line); border-radius:7px; padding:2px 8px; }
  .rchip.on { font-weight:700; }
  .fngbar { position:relative; height:9px; border-radius:5px; margin-top:18px; background:linear-gradient(90deg,#e5534b,#e0913f,#d9c341,#7bc96f,#3fb950); }
  .fngmark { position:absolute; top:-4px; width:3px; height:17px; background:var(--text); border-radius:1px; transform:translateX(-50%); }
  .fngspark svg { width:100%; height:auto; display:block; margin-top:8px; }
  .linktoggle { font-size:11px; color:var(--dim); cursor:pointer; background:none; border:none; padding:6px 0 2px; font-family:inherit; display:block; }
  .linktoggle:hover { color:var(--muted); }
  #cyclemap { font-size:11.5px; color:var(--muted); line-height:1.7; margin-top:4px; }
  #cyclemap b { color:var(--neutral); font-weight:600; }

  /* THE CHAIN — tabs, one per flow-map node with dedicated on-page detail (Bitcoin/Ethereum/Ecosystems/Projects).
     Flat underline style, no shading — active state is a solid border + brighter text, nothing decorative. */
  .tabbar { display:flex; justify-content:center; gap:2px; border-bottom:1px solid var(--line); margin:10px 0 16px; flex-wrap:wrap; }
  .tabbtn { background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); font:inherit; font-size:13.5px; font-weight:600; padding:9px 16px; cursor:pointer; }
  .tabbtn:hover { color:var(--text); }
  .tabbtn.active { color:var(--text); border-bottom-color:var(--accent); }

  /* Projects tab — the survival FUNNEL: spectrum → age → ecosystem → category cascade, all reusing .tbar/.tlegend. */
  .funnelpanel .flab { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700; margin:15px 0 7px; }
  .funnelpanel .flab b { color:var(--bright); }
  .fcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin:2px 0 12px; }
  .fcrumb .cz { cursor:pointer; }
  .fcrumb .cz:hover { color:var(--text); text-decoration:underline; }
  .fcrumb .cz.cur { color:var(--bright); font-weight:600; cursor:default; text-decoration:none; }
  .fcrumb .cd { color:#3a414c; }
  .tbar .fseg.clk { cursor:pointer; }
  .tbar .fseg.clk:hover { outline:2px solid rgba(255,255,255,.55); outline-offset:-2px; }
  .tbar .fseg.sel { outline:2px solid var(--bright); outline-offset:-2px; }
  /* bar-1 boxed survivor group (the 23%) + the orthogonal projection rails that connect each bar down to the next. */
  .survgroup { outline:2.5px solid #3fb950; outline-offset:-2px; }
  .tbar > .survgroup { align-items:stretch; }
  .survgroup > div { display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:600; color:#f0f6fc; white-space:nowrap; overflow:hidden; }
  .railwrap { position:relative; }
  .railfnl { width:100%; height:30px; display:block; }
  .raillabel { position:absolute; top:0; height:23px; line-height:23px; font-weight:800; font-size:12px; white-space:nowrap; }
  .raillabel.centered { transform:translateX(-50%); }
  .raillabel.rlend { padding-right:6px; }
  /* inline project table — appears under bar 4 when a category is clicked (lazy-loaded from the screener's data). */
  .fthead { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin:15px 0 7px; font-size:12.5px; color:var(--neutral); }
  .fthead b { color:var(--bright); }
  .ftscreener { color:var(--accent); text-decoration:none; font-weight:600; font-size:11.5px; white-space:nowrap; }
  .ftscreener:hover { text-decoration:underline; }
  .ftscroll { overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
  .fttable { min-width:640px; }
  .ftr { display:flex; align-items:center; padding:5px 11px; border-bottom:1px solid var(--row); font-size:12px; }
  .ftr:last-child { border-bottom:none; }
  .fttable .ftr:not(.fthr):hover { background:var(--row); }
  .fthr { background:#1b212b; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.3px; font-weight:700; }
  .ftr .c-sym { flex:0 0 66px; font-weight:700; color:var(--bright); }
  .ftr .c-nm { flex:1 1 140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--neutral); padding-right:8px; }
  .ftr .c-num { flex:0 0 84px; text-align:right; font-variant-numeric:tabular-nums; }
  .ftmsg { padding:9px 2px; font-size:12px; color:var(--muted); }
  .ftmsg a { color:var(--accent); text-decoration:none; }

  .panel { margin-top:12px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
  .panel h2 { margin:0 0 3px; font-size:13px; font-weight:650; }
  .panel .bsub { color:var(--muted); font-size:12px; margin-bottom:12px; }
  .bnote { color:var(--dim); font-size:11px; margin-top:9px; line-height:1.5; }
  /* teaser for the address-tier distribution — a DIFFERENT lens (size, not identity); full detail lives on its own
     page (tiers.html), this is just a compact summary + link, not a duplicate of the full 12-band table. */
  .tierteaser h2 { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .tierlink { font-size:11.5px; font-weight:600; color:#f7931a; text-decoration:none; white-space:nowrap; } /* Bitcoin orange — this link lives on the Bitcoin tab, not the generic site-accent blue */
  .tierlink:hover { text-decoration:underline; }
  .tbar { display:flex; height:40px; border-radius:6px; overflow:hidden; border:1px solid var(--line); }
  .tbar > div { display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:600; color:var(--bright); white-space:nowrap; overflow:hidden; }
  .tbar > .fseg.two { flex-direction:column; line-height:1.15; }   /* two-line segment: name+% over the count (bar 2 replaces its legend this way) */
  .fseg.two .l2 { font-size:9.5px; font-weight:600; opacity:0.82; }
  .tlegend { display:flex; gap:12px; flex-wrap:wrap; margin-top:9px; font-size:11px; color:var(--muted); }
  .tlegend .it { display:flex; align-items:center; gap:5px; }
  .tlegend .sw { width:9px; height:9px; border-radius:2px; display:inline-block; }
  .tlegend b { color:var(--text); font-weight:600; }
  /* .l1stat — small stat cards in a flex row, shared across tabs (Ecosystems sidebar, Stablecoins
     summary). Compact, NOT sized like a full BTC/ETH section. */
  .l1stat { flex:1 1 220px; background:var(--row); border:1px solid var(--line); border-radius:8px; padding:10px 13px; }
  .l1stat .fk { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:6px; }
  .l1stat .fv { font-size:19px; font-weight:680; margin-top:4px; color:var(--bright); }
  .l1stat .fvs { font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.4; }
  /* "Ethereum vs the rest" band — ETH's share of all tracked stablecoin liquidity. Ethereum TAB only now (the
     Ecosystems tab carries composition via the L1 pie + per-chain table). ETH segment = identity blue. */
  .ebandlbl { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; }
  .ethband { display:flex; height:30px; border-radius:5px; overflow:hidden; margin-top:9px; border:1px solid var(--line); }
  .ethband > div { display:flex; align-items:center; justify-content:center; font-size:12px; white-space:nowrap; overflow:hidden; padding:0 4px; }
  .ethband .eth { background:#627eea; color:#0b0d11; font-weight:700; }
  .ethband .rest { background:#2b3140; color:var(--text); font-weight:600; }
  /* donut/legend layout — reused by the Ecosystems "Inside L1" pie (sidebar). Flat solid slice colours. */
  .donutrow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:9px; }
  .donutrow svg { width:110px; height:110px; flex:0 0 110px; }
  .dlegend { font-size:12px; min-width:210px; flex:1 1 210px; }
  .dlegend .di { display:flex; align-items:center; gap:8px; padding:2.5px 0; }
  .dlegend .dsw { width:10px; height:10px; border-radius:2px; flex:0 0 10px; }
  .dlegend .dn { flex:1; color:var(--neutral); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dlegend .dv { color:var(--muted); font-variant-numeric:tabular-nums; margin-right:8px; }
  .dlegend .dp { font-weight:700; color:var(--bright); font-variant-numeric:tabular-nums; }
  /* Ecosystems tab — net 30d capital-flow diverging bars (one row per chain, ALL chains). Bar grows right from a
     centre axis when gaining (green), left when losing (red); length = |Δ| vs the biggest mover. The centre line
     is a data reference (0-flow), not decoration. */
  .flowhead { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin:16px 0 9px; }
  .flowhead h3 { margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; }
  .flowhead .leg { font-size:10.5px; color:var(--dim); }
  .flowrow { display:flex; align-items:center; gap:10px; padding:2px 0; }
  .flowrow .fn { flex:0 0 110px; font-size:12px; color:var(--neutral); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .flowtrack { flex:1; position:relative; height:12px; }
  .flowtrack::before { content:''; position:absolute; left:50%; top:-1px; bottom:-1px; width:1px; background:var(--line); }
  .flowbar { position:absolute; top:1px; height:10px; }
  .flowbar.pos { left:50%; background:#3fb950; border-radius:0 2px 2px 0; }
  .flowbar.neg { right:50%; background:#e5534b; border-radius:2px 0 0 2px; }
  .flowval { flex:0 0 72px; text-align:right; font-size:11.5px; font-variant-numeric:tabular-nums; font-weight:600; }
  .flowtvl { flex:0 0 58px; text-align:right; font-size:11.5px; color:var(--neutral); font-variant-numeric:tabular-nums; }
  .ecomain .flowhead { margin-top:0; } /* align the table header with the sidebar's top in the two-column layout */
  .flowcols { display:flex; align-items:center; gap:10px; padding:0 0 5px; margin-bottom:3px; border-bottom:1px solid var(--line); }
  .flowcols > span { font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--dim); font-weight:700; }
  .flowcols .sortable { cursor:pointer; user-select:none; white-space:nowrap; }
  .flowcols .sortable:hover { color:var(--text); }
  .flowcols .sorted { color:var(--accent); }
  .flowcols .ftc { text-align:center; }
  .flowcols .flowtrack::before { display:none; } /* no centre axis on the header row */
  .tierbar { display:flex; height:12px; border-radius:3px; overflow:hidden; border:1px solid var(--line); margin-top:9px; }
  .tierbar > i { display:block; height:100%; }
  .tier-l1 { background:var(--accent); }
  .tier-l2 { background:#5f6b7d; }
  .tier-l0 { background:#454d5c; }
  /* Stablecoins tab — ecosystem TVL by chain, a real sortable comparison TABLE (not a card grid — a grid of
     ~20 near-identical boxes makes "which chain gained/lost the most" require reading every card one by one;
     a table with sortable numeric columns is what this shape of data (one row per chain, several comparable
     numeric fields) is actually for). Same source data + numbers as stablecoins.html's own eco section; the
     per-chain coin-composition drill-down and the full sortable coin table stay exclusive to the full page.  */
  .ecolbl { font-size:11px; color:var(--muted); margin-bottom:8px; }
  .ecolbl b { color:var(--neutral); font-weight:600; }
  .econote { font-size:11px; color:var(--dim); margin-top:9px; max-width:920px; }
  .pin { font-size:10px; }
  /* table (main content) + stat cards (sidebar) side by side — the table doesn't need the full panel width, so
     put the freed right-hand space to work instead of leaving it empty above/below a stretched card. */
  .ecolayout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
  @media(max-width:820px){ .ecolayout{ grid-template-columns:1fr; } }
  .ecoside { display:flex; flex-direction:column; gap:16px; }
  .typelegend { margin-top:10px; display:flex; flex-direction:column; gap:7px; }
  .typelegend .it { display:flex; align-items:center; gap:8px; font-size:12.5px; }
  .typelegend .sw { width:9px; height:9px; border-radius:2px; display:inline-block; flex-shrink:0; }
  .typelegend .nm { color:var(--neutral); flex:1; }
  .typelegend .pctv { font-weight:700; color:var(--bright); font-variant-numeric:tabular-nums; }
  .type-fiat { background:var(--accent); }
  .type-crypto { background:#56d4dd; }
  .type-algo { background:#d29922; }
  .type-yield { background:#bc8cff; }
  .type-rwa { background:#3fb950; }
  .type-commodity { background:var(--warning); }
  .type-other { background:var(--dim); }
  /* Sized to its OWN content (table-layout:fixed + explicit column widths), not stretched to the panel's full
     width — a 4-column, mostly-numeric table stretched to ~1000px turns into one huge dead gap between the
     chain name and its numbers. ~500px is what this data actually needs; the rest of the panel stays clean
     margin, not awkward in-table whitespace. Zebra striping (flat --row on even rows, no gradient) + a
     sticky-feeling header bar make 20 rows scannable at a glance instead of a flat wall of grey text. */
  .ecowrap { overflow-x:auto; }
  /* fills its column (proportional columns), so the table never floats at a fixed width leaving a dead band next
     to the sidebar. The wide Chain column is not dead space: it carries a proportional TVL bar (name + bar), a
     ranked-bar list — the bar length IS the chain's share of liquidity, so the width does real work and the
     Ethereum/Tron dominance reads instantly. Flat solid fill, no gradient. */
  .ecotable { table-layout:fixed; }
  .ecotable col.c-chain { width:52%; } .ecotable col.c-num { width:16%; }
  .chaincell { display:flex; align-items:center; gap:11px; }
  .chaincell .cname { flex:0 0 104px; overflow:hidden; color:var(--text); font-size:var(--table-compact-size); font-weight:var(--weight-bold); text-overflow:ellipsis; white-space:nowrap; }
  .chaincell .cbar { flex:1; height:7px; background:var(--row); border-radius:3px; overflow:hidden; min-width:24px; }
  .chaincell .cbar > i { display:block; height:100%; background:#3b7bd4; border-radius:3px; }
  .ecotable thead th { user-select:none; }
  .ecotable thead th.sorted { color:var(--accent); }
  .ecotable tbody :where(th,td) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ecotable tbody tr:nth-child(even) { background:rgba(255,255,255,.015); }
  .ecotable tr.ecootherrow > :not(:first-child) { color:var(--muted); }
  .ecotable tr.ecootherrow > :first-child { color:var(--text); font-weight:var(--weight-bold); }
  .ecotable tr.ecootherrow:hover > :first-child { color:var(--accent); }
  .ecotail { margin-top:10px; border:1px solid var(--line); border-radius:8px; padding:8px; background:var(--bg); }
  .tailbar { display:flex; gap:10px; align-items:center; margin-bottom:6px; }
  .tailbar input { min-width:160px; }
  .tailbar span { font-size:var(--type-xs); color:var(--muted); }
  .taillist { max-height:none; overflow:visible; }
  .tailrow { display:grid; grid-template-columns:minmax(0,1fr) minmax(70px,90px) 56px; gap:8px; padding:3px 4px; font-size:12px; border-bottom:1px solid var(--row); }
  .tailrow span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tailrow span:nth-child(2), .tailrow span:nth-child(3) { text-align:right; }
  .chartwrap svg, .domwrap svg { width:100%; height:auto; display:block; }
  .chartwrap text, .domwrap text { fill:var(--muted); font-size:11px; }
  .chartwrap text.cycle-label { font-size:10px; }
  .domwrap { margin-top:12px; }
  .domlbl { font-size:11px; color:var(--muted); margin-bottom:3px; }
  .clegend { display:flex; gap:16px; flex-wrap:wrap; margin-top:9px; font-size:12px; color:var(--muted); }
  .clegend .it { display:flex; align-items:center; gap:6px; }
  .clegend .ln { width:15px; height:0; border-top:2px solid; display:inline-block; vertical-align:middle; }
  .clegend .line-btc { border-color:#f7931a; }
  .clegend .line-market { border-color:#58a6ff; }
  .clegend .line-volume { border-color:#56d4dd; }
  .clegend .line-halving { border-color:#e3b341; }
  .bar { display:flex; height:34px; border-radius:6px; overflow:hidden; border:1px solid var(--line); position:relative; }
  #btcbar { margin-top:12px; } /* this panel's h2 has no .bsub subtitle after it (unlike the other panels), so the
    heading's own 3px margin-bottom leaves too tight a gap above the bar without this */
  .bar > div { display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#0b0d11; white-space:nowrap; overflow:hidden; }
  /* Colour = supply CATEGORY, and the bar is ordered left→right by market availability. Nothing here is random:
     CEX = orange (Bitcoin's own colour) because it's the live, sell-ready float — the one bucket that directly
       moves price — and it leads the bar; hatched because it's an ESTIMATE, not a measured figure.
     ETF·Company·Gov = a cool blue/cyan/purple family = held by known entities, off-market ("strong hands").
     Not-yet-mined = amber = future supply, not issued yet.
     Patoshi = grey = dormant since genesis, effectively lost (grey, so it never reads as "held").
     Howells/Thomas = specific lost-coin incidents (tiny slivers). Self-custody & unknown = dark hatch = the
     residual: individuals in private wallets + any BTC not attributable to a labelled bucket (unmeasured). */
  .seg-cex { background:repeating-linear-gradient(45deg,#f7931a,#f7931a 7px,#ffb454 7px,#ffb454 14px); font-weight:700; } /* orange = Bitcoin + critical · hatch = estimate */
  .seg-etf { background:var(--accent); } .seg-co { background:#56d4dd; } .seg-gov { background:#bc8cff; } .seg-mined { background:#d29922; }
  .seg-patoshi { background:#6b7280; } .seg-howells { background:#b5654f; min-width:3px; } .seg-thomas { background:#8a8f5c; min-width:3px; }
  /* Howells/Thomas are individually real but tiny (0.04%/0.03% of 21M) — a min-width keeps them hoverable/visible;
     it does NOT change any reported number, only the pixel floor of an otherwise sub-pixel sliver. */
  .seg-res { background:repeating-linear-gradient(45deg,#222a35,#222a35 7px,#161b22 7px,#161b22 14px); }
  .bar > .seg-res { color:var(--bright); font-weight:700; } /* light text on the dark residual hatch; CEX keeps the default dark text — its orange hatch is light */
  /* Patoshi RANGE overlay: the solid .seg-patoshi segment is the conservative 700k cut (counted in the bar math);
     this hatched overlay extends from that same start point out to the 1.1M high end, poking past the solid
     segment into the start of Unattributed — showing "could extend this far" without changing any counted number.
     position:absolute takes it out of the flex flow, so it never affects the bar's sum-to-100%. */
  .patoshi-range { position:absolute; top:0; bottom:0; background:repeating-linear-gradient(45deg,rgba(107,114,128,.55),rgba(107,114,128,.55) 6px,rgba(107,114,128,.15) 6px,rgba(107,114,128,.15) 12px); border-right:2px dashed rgba(107,114,128,.9); }
  .blegend { display:flex; gap:14px; flex-wrap:wrap; margin-top:11px; font-size:12px; color:var(--muted); }
  .blegend .it { display:flex; align-items:center; gap:6px; }
  .blegend .sw { width:11px; height:11px; border-radius:3px; display:inline-block; }
  .blegend .sw.cex { background:repeating-linear-gradient(45deg,#f7931a,#f7931a 4px,#ffb454 4px,#ffb454 8px); }
  .blegend .sw.res { background:repeating-linear-gradient(45deg,#222a35,#222a35 4px,#161b22 4px,#161b22 8px); border:1px solid var(--line); }
  .blegend .sw.etf { background:var(--accent); }
  .blegend .sw.company { background:#56d4dd; }
  .blegend .sw.government { background:#bc8cff; }
  .blegend .sw.unmined { background:#d29922; }
  .blegend .sw.patoshi { background:#6b7280; }
  .blegend .sw.howells { background:#b5654f; }
  .blegend .sw.thomas { background:#8a8f5c; }
  .tier-shade-0 { background:#f7931a; }
  .tier-shade-1 { background:#d97a12; }
  .tier-shade-2 { background:#b5640c; }
  .tier-shade-3 { background:#8f4e08; }
  .tier-shade-4 { background:#6b3a05; }
  .blegend b { color:var(--text); font-weight:600; }
  .blegend .caveat { color:var(--dim); }
  /* CEX = the liquid sell-ready float — the one bucket that directly pressures price, so it's flagged as the key
     metric: a flat solid highlight (no glow/gradient) + accent-coloured value, tied to a matching outline on its
     bar segment so eye jumps bar↔legend. */
  .blegend .it.key { background:rgba(247,147,26,.12); border:1px solid rgba(247,147,26,.42); border-radius:7px; padding:2px 9px; }
  .blegend .it.key b { color:#f7931a; }
  .blegend .ktag { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:#f7931a; }
  footer { margin-top:30px; border-top:1px solid var(--line); padding-top:16px; color:var(--muted); font-size:var(--type-xs); }
  footer .line { color:var(--muted); }
  footer .home { color:var(--muted); margin-top:8px; }

  /* headline numbers = brightest */
  #macroflow .fval, #flowmap .fval { color:var(--bright); }