/* Shard block explorer (explorer.html), layered on app.css: same tokens,
   same Geist, same principles. The chain strip is the one bold, moving
   thing: every block shows its 64 places with one lit square per
   settlement, the forming block is quartz, counts down its 10-minute window
   and breathes on the place the next settlement will take, and a ring on
   every link marks the hash each block carries forward. Everything else is
   a still, ruled readout. Mono only for hashes. No inline styles:
   explorer.js sets geometry through custom properties (--w, --x, --elapsed). */

:root {
  --ex-tile-w: 9.75rem;
  --ex-tile-h: 11.25rem;
  --ex-gap: 1.75rem;
  --ex-forming: var(--quartz);
  --ex-forming-soft: rgba(46, 91, 218, .10);
  --ex-forming-line: rgba(46, 91, 218, .45);
  --ex-fee: rgba(85, 65, 219, .45);
  --ex-tip-shadow: 0 10px 30px -12px rgba(14, 18, 38, .35);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ex-forming-soft: rgba(214, 228, 255, .08);
    --ex-forming-line: rgba(214, 228, 255, .42);
    --ex-fee: rgba(167, 151, 255, .5);
    --ex-tip-shadow: 0 14px 34px -14px rgba(0, 0, 0, .9);
  }
}

.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.hash { font-family: var(--mono); font-size: .78em; letter-spacing: 0; overflow-wrap: anywhere; }
a.hash { text-decoration: none; }
a.hash:hover { text-decoration: underline; }
.hash-full { font-size: .8rem; line-height: 1.55; }

/* --- hero: title, search, the chain --- */

.ex-hero {
  position: relative; overflow: hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(46rem 20rem at 30% 92%, var(--glow), transparent 70%),
    radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0);
  background-size: auto, 24px 24px;
  border-bottom: 1px solid var(--line);
}
.ex-hero-inner {
  max-width: var(--measure); margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.25rem) var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); gap: 1.5rem 3rem; align-items: end;
}
.ex-hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.25rem); font-weight: 640; line-height: .98; letter-spacing: -0.05em;
}
.ex-lead { margin-top: 1rem; max-width: 36rem; font-size: 1.06rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

.ex-search { display: grid; gap: .45rem; min-width: 0; }
.ex-search-row {
  display: flex; align-items: center; gap: .45rem;
  padding: .3rem .3rem .3rem .85rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ex-search-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ex-search-ic { width: 1.05rem; height: 1.05rem; flex: none; color: var(--faint); }
.ex-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: .35rem 0; min-height: 2.2rem;
  font-size: .95rem;
}
.ex-search input:focus-visible { box-shadow: none; outline: none; }
.ex-search input::-webkit-search-cancel-button { display: none; }
.ex-search .hint { padding-left: 1rem; font-size: .8rem; }

.ex-head {
  max-width: var(--measure); margin: clamp(2rem, 4vw, 2.75rem) auto 0; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem;
}
.ex-head-facts { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0; align-items: baseline; }
.ex-head-facts div { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.ex-head-facts dt { font-size: .84rem; color: var(--muted); }
.ex-head-facts dd { margin: 0; font-weight: 600; font-size: 1.05rem; color: var(--ink); min-width: 0; }
#h-height { font-size: 1.5rem; letter-spacing: -0.03em; }
#h-tip .hash { font-size: .85rem; font-weight: 500; color: var(--ink-2); }

.sig {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 500; color: var(--muted);
  padding: .35rem .7rem .35rem .55rem; border-radius: 999px; border: 1px solid var(--line-strong);
}
.sig:empty { display: none; }
.sig .ic { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sig[data-state="ok"] { color: var(--good); background: var(--good-soft); border-color: transparent; }
.sig[data-state="bad"] { color: var(--bad); background: var(--bad-soft); border-color: transparent; }
.sig[data-state="checking"] .ic { animation: dots 1.2s ease-in-out infinite; }

.updated { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; font-size: .82rem; color: var(--muted); }
.updated:has(#updated-text:empty) { display: none; }
.updated-dot { position: relative; width: .45rem; height: .45rem; border-radius: 50%; background: var(--faint); flex: none; }
.updated[data-state="live"] .updated-dot { background: var(--good); }
.updated[data-state="live"] .updated-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--good); opacity: 0; animation: ping 2.6s cubic-bezier(0, 0, .2, 1) infinite;
}
.updated[data-state="warn"] { color: var(--warn); }
.updated[data-state="warn"] .updated-dot { background: var(--warn); }

/* --- the chain strip: newest at the left, history runs off to the right --- */

.chain {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: max(var(--gutter), calc((100% - var(--measure)) / 2 + var(--gutter)));
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  margin-top: 1rem;
}
.chain-track {
  list-style: none; margin: 0; display: flex; gap: var(--ex-gap); width: max-content;
  padding: 1rem var(--gutter) 1.4rem max(var(--gutter), calc((100vw - var(--measure)) / 2 + var(--gutter)));
}
.chain-empty {
  max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter) 1.5rem; color: var(--muted);
}
.blk, .blk-more { position: relative; flex: none; scroll-snap-align: start; }

.blk-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: .12rem;
  width: var(--ex-tile-w); min-height: var(--ex-tile-h); height: 100%; padding: .85rem .9rem .85rem;
  border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
a.blk-tile:hover { border-color: var(--accent-line); }
a.blk-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 14px; }

/* a block's 64 places: one lit square per settlement */
.blk-slots {
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px;
  margin-top: auto; padding-top: .55rem;
}
.blk-slots i { display: block; aspect-ratio: 1; border-radius: 1.5px; background: var(--line-strong); opacity: .6; }
.blk-slots i.on { background: var(--accent); opacity: 1; }
.blk[data-state="open"] .blk-slots i.on { background: var(--ex-forming); }
.blk-slots i.next {
  background: transparent; opacity: 1; box-shadow: inset 0 0 0 1px var(--ex-forming);
  animation: breathe 1.6s ease-in-out infinite;
}
.blk-slots i.is-new { animation: pop .7s cubic-bezier(.2, .9, .3, 1.35) both; }
@keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
.blk-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.blk-h { font-size: 1.65rem; font-weight: 640; letter-spacing: -0.045em; line-height: 1.05; }
.blk-n { margin-top: .35rem; font-size: .86rem; font-weight: 500; color: var(--ink-2); }
.blk-tok { font-size: .84rem; color: var(--muted); }
.blk-age { font-size: .78rem; color: var(--muted); }
.blk-hash { margin-top: .5rem; font-family: var(--mono); font-size: .7rem; color: var(--muted); letter-spacing: 0; }

/* the link each block carries forward: a hairline with a ring */
.blk + .blk::before, .blk + .blk-more::before {
  content: ""; position: absolute; top: 50%; right: 100%; width: var(--ex-gap); height: 1px;
  background: var(--line-strong);
}
.blk + .blk::after {
  content: ""; position: absolute; top: 50%; right: calc(100% + var(--ex-gap) / 2);
  width: .55rem; height: .55rem; margin: calc(-.275rem + .5px) -.275rem 0 0;
  border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg);
}

/* the forming block */
.blk[data-state="open"] .blk-tile { border-color: var(--ex-forming-line); background: var(--surface); }
.blk-state {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; color: var(--ex-forming);
}
.blk-state::before {
  content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor;
  animation: breathe 2.2s ease-in-out infinite;
}
.blk[data-state="open"] .blk-age { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.blk-timer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ex-forming-soft);
}
.blk-timer::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--elapsed, 0) * 100%); background: var(--ex-forming);
  transition: width 1s linear;
}
.blk[data-state="open"] + .blk::before { background: var(--ex-forming-line); }
.blk[data-state="open"] + .blk::after { border-color: var(--ex-forming-line); }

.blk-ghost .blk-tile {
  border-style: dashed; background: transparent; color: var(--muted);
}
.blk-ghost .blk-top { font-size: .95rem; font-weight: 600; color: var(--ink-2); }
.blk-note { margin-top: .4rem; font-size: .82rem; line-height: 1.45; color: var(--muted); }

.blk-more { display: flex; align-items: center; height: var(--ex-tile-h); padding-left: .25rem; }
.blk-more a { font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.blk-more a:hover { text-decoration: underline; }

.chain-key {
  max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter) 1.75rem;
  font-size: .8rem; color: var(--muted);
}

/* arrivals: a sealed block slides in, the new forming slot fades up */
.blk.is-sealed .blk-tile { animation: arrive .9s cubic-bezier(.2, .7, .2, 1) both, sealGlow 2.4s ease-out both; }
.blk.is-new .blk-tile { animation: arrive .9s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes arrive { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes sealGlow { from { box-shadow: 0 0 0 3px var(--accent-line); } to { box-shadow: 0 0 0 3px transparent; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes flash { from { background-color: var(--accent-soft); } to { background-color: transparent; } }

.ex-home-status {
  /* holds the chain's place while it loads, so nothing jumps */
  max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter);
  min-height: calc(var(--ex-tile-h) + 6rem); display: flex; align-items: center;
  color: var(--muted);
}
.ex-home-status[data-tone="warn"] { color: var(--warn); }
.ex-wait { color: var(--warn); }

/* --- the chain in numbers: a ruled readout strip --- */

.ex-stats { border-bottom: 1px solid var(--line); }
.ex-tiles {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--measure);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.ex-tile { display: flex; flex-direction: column; padding: 1.4rem 1.25rem 1.5rem; min-width: 0; }
.ex-tile:first-child { padding-left: 0; }
.ex-tile + .ex-tile { border-left: 1px solid var(--line); }
.ex-tile-value {
  order: -1; font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ex-tile-value .unit { font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: .3rem; }
.ex-tile-label {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem;
  font-size: .88rem; font-weight: 500; color: var(--ink-2);
}
.ex-tile[data-tone="good"] .ex-tile-label::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--good); flex: none; }
.ex-tile-note { margin-top: .15rem; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }

/* --- the last 24 hours, latest settlements: full-width bands --- */

.ex-band { max-width: var(--measure); margin: 0 auto; padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter) 0; }
.ex-day-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 2rem 3.5rem; align-items: start; }
.ex-sec-head { margin-bottom: 1.25rem; }
.ex-band h2, .ex-section h2, .ex-about h2 { font-size: 1.375rem; font-weight: 620; letter-spacing: -0.025em; }
.ex-sec-head .section-sub { margin-top: .35rem; font-size: .9rem; }
.ex-empty { color: var(--muted); padding: 1rem 0; }

.ex-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ex-table th {
  text-align: left; font-size: .78rem; font-weight: 500; color: var(--muted);
  padding: 0 .65rem .55rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.ex-table td { padding: .7rem .65rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ex-table th:first-child, .ex-table td:first-child { padding-left: 0; }
.ex-table th:last-child, .ex-table td:last-child { padding-right: 0; }
.ex-table .c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-table tbody tr { transition: background-color .2s ease; }
.ex-table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.ex-table tr.is-new td { animation: flash 2.8s ease-out both; }
.ex-table a { text-decoration: none; }
.ex-table a:hover { text-decoration: underline; }

.tx-link { display: inline-flex; align-items: baseline; gap: .65rem; color: var(--ink); white-space: nowrap; }
.tx-seq { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.6rem; }
.tx-link .hash { color: var(--muted); font-size: .74rem; }
.c-model { min-width: 0; }
.model-name { display: block; color: var(--ink-2); white-space: nowrap; }
.model-span { display: block; font-size: .76rem; color: var(--muted); }
.c-when { color: var(--muted); }
.c-block a { font-weight: 500; }
.cell-label { display: none; }

.kind { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; color: var(--ink-2); }
.kind::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; flex: none; background: var(--accent); }
.kind[data-kind="expired"]::before { background: var(--ex-forming); }
.kind[data-kind="refund"]::before, .kind[data-kind="void"]::before {
  background: transparent; border: 1.5px solid var(--faint); width: .55rem; height: .55rem;
}

/* hourly columns: one series, iris; table twin below */
.chart { position: relative; border-radius: 10px; }
.chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.chart-title, .mix-h { font-size: .9rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0; margin-bottom: .75rem; }
.chart-frame { position: relative; padding-left: 2.1rem; }
.chart-y { position: absolute; left: 0; width: 1.7rem; text-align: right; font-size: .7rem; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-y-top { top: -.3rem; }
.chart-y-mid { top: calc(66px - .3rem); }
.chart-plot { position: relative; min-height: 154px; touch-action: pan-y; }
.chart-plot svg { display: block; overflow: visible; }
.chart-plot .grid { stroke: var(--line); stroke-width: 1; }
.chart-plot .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-plot .bar { fill: var(--accent); transition: opacity .15s ease; }
.chart-plot[data-hot] .bar:not(.is-hot) { opacity: .45; }
.chart-plot .hover-band { fill: var(--accent-soft); transition: opacity .1s ease; }
.chart-plot .hover-band[data-hidden] { opacity: 0; }
.chart-plot .tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart-tip {
  position: absolute; z-index: 3; top: -.4rem; left: calc(2.1rem + var(--x, 0px));
  transform: translate(-50%, -100%);
  display: grid; gap: .1rem; min-width: 9rem; padding: .5rem .7rem; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--ex-tip-shadow);
  font-size: .78rem; color: var(--muted); pointer-events: none; white-space: nowrap;
}
.chart-tip[data-side="left"] { transform: translate(calc(-100% + 1rem), -100%); }
.chart-tip[data-side="right"] { transform: translate(-1rem, -100%); }
.chart-tip strong { font-size: .92rem; font-weight: 600; color: var(--ink); }
.chart-tip .tip-when { color: var(--muted); }
.chart-table { margin-top: .9rem; }
.chart-table summary { font-size: .82rem; color: var(--accent); cursor: pointer; width: max-content; }
.chart-table table { margin-top: .6rem; }
.ex-table-compact td, .ex-table-compact th[scope="row"] { padding-top: .4rem; padding-bottom: .4rem; font-size: .84rem; }
.ex-table-compact th[scope="row"] { font-weight: 400; color: var(--ink-2); text-align: left; border-bottom: 1px solid var(--line); padding-left: 0; }

.mix { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mix-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(3.5rem, 30%) auto 2.6rem; gap: .75rem;
  align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .86rem;
}
.mix-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem; min-width: 0; }
.mix-model { color: var(--ink-2); overflow-wrap: anywhere; }
.mix-live { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.mix-live::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--good); }
.mix-bar { height: .5rem; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.mix-fill { display: block; height: 100%; width: calc(var(--w, 0) * 100%); background: var(--accent); border-radius: 0 999px 999px 0; }
.mix-n { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.mix-pct { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }

/* --- what you're looking at --- */

.ex-about { max-width: var(--measure); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--gutter) 0; }
.ex-about-points {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line);
}
.ex-about-points li { padding: 1.5rem 2rem 0 0; }
.ex-about-points li + li { padding-left: 2rem; border-left: 1px solid var(--line); }
.ex-about-points svg { width: 1.6rem; height: 1.6rem; color: var(--accent); }
.ex-about-points h3 { margin-top: .9rem; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; }
.ex-about-points p { margin-top: .45rem; color: var(--muted); font-size: .94rem; line-height: 1.6; max-width: 36ch; }

/* --- sub-pages: block, settlement, search, all blocks --- */

.ex-page { max-width: var(--measure); margin: 0 auto; padding: 1.1rem var(--gutter) 0; }
.ex-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .9rem; }
.crumbs li { display: inline-flex; gap: .35rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }
.ex-search-sm { width: min(100%, 24rem); }
.ex-search-sm .ex-search-row { background: var(--surface-2); }

.ex-page-head { margin: clamp(1.75rem, 4vw, 2.5rem) 0 1.75rem; }
.ex-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.ex-page-head h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); font-weight: 640; letter-spacing: -0.045em; line-height: 1.02; }
.ex-page-head h1:focus { outline: none; }
.pager { display: flex; flex-wrap: wrap; gap: .5rem; }
.pager a[rel="prev"]::before { content: "‹"; font-size: 1.15em; line-height: 1; margin-right: .15rem; }
.pager a[rel="next"]::after { content: "›"; font-size: 1.15em; line-height: 1; margin-left: .15rem; }
.pager-foot { margin-top: 1.5rem; align-items: center; }
.ex-status { margin-top: .7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--muted); font-size: .95rem; }
.ex-status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ex-forming); flex: none; animation: breathe 2.2s ease-in-out infinite; }
.ex-status[data-state="pending"] .ex-status-dot { background: var(--warn); }
.ex-loading { padding: 2.5rem 0; color: var(--muted); }

.ex-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }

.facts { margin: 0; border-top: 1px solid var(--line); }
.fact { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: .25rem 1.25rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.fact dt { font-size: .875rem; color: var(--muted); }
.fact dd { margin: 0; color: var(--ink); min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; }
.fact dd.is-mono { align-items: flex-start; }
.fact .hash-full { flex: 1 1 18rem; min-width: 0; }
.model-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.model-item {
  display: inline-flex; align-items: baseline; gap: .45rem; font-size: .84rem;
  padding: .15rem .55rem; border-radius: 6px; border: 1px solid var(--line);
}
.model-item .model-name { display: inline; }
.model-count { color: var(--muted); font-variant-numeric: tabular-nums; }

.copy {
  display: inline-flex; align-items: center; gap: .3rem; flex: none;
  font-size: .74rem; font-weight: 500; color: var(--muted); cursor: pointer;
  padding: .2rem .5rem; min-height: 0; border-radius: 6px; border: 1px solid var(--line-strong); background: transparent;
}
.copy:hover { color: var(--ink); border-color: var(--faint); }
.copy .ic { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.copy[data-done] { color: var(--good); border-color: var(--good); }

/* the one surface you act on */
.verify {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem 1.5rem; display: grid; gap: .85rem; min-width: 0;
}
.verify h2 { font-size: 1.25rem; font-weight: 620; letter-spacing: -0.02em; }
.verify-p { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.verify .btn { justify-self: start; }
.verify-out:empty { display: none; }
.verify-out { display: grid; gap: .5rem; min-width: 0; }

.tree { margin: .35rem 0 0; padding: .75rem .5rem .5rem; border-radius: 12px; background: var(--surface-2); }
.tree svg { display: block; width: 100%; height: auto; max-height: 13rem; margin: 0 auto; }
.tree-edge { stroke: var(--accent-line); stroke-width: 1; }
.tree-node { fill: var(--accent); }
.tree-root { fill: var(--accent); stroke: var(--surface-2); stroke-width: 2; }
.tree.is-running .tree-edge { animation: edgeOn .5s ease both; animation-delay: var(--d, 0ms); }
.tree.is-running .tree-node { animation: nodeOn .5s ease both; animation-delay: var(--d, 0ms); }
@keyframes nodeOn { from { fill: var(--line-strong); } to { fill: var(--accent); } }
@keyframes edgeOn { from { stroke: var(--line); } to { stroke: var(--accent-line); } }
.tree-cap { margin-top: .45rem; padding: 0 .25rem; font-size: .76rem; color: var(--muted); line-height: 1.45; }

.checks { list-style: none; margin: .25rem 0 0; padding: 0; }
.check {
  display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .25rem .6rem; align-items: start;
  padding: .6rem 0; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.5; color: var(--ink-2);
  animation: checkIn .35s ease both; animation-delay: calc(var(--i, 0) * 110ms + 250ms);
}
.check .ic { width: 1.2rem; height: 1.2rem; margin-top: .1rem; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.check[data-ok="yes"] .ic { stroke: var(--good); }
.check[data-ok="no"] .ic { stroke: var(--bad); }
.check[data-ok="no"] { color: var(--bad); }
.check[data-ok="na"] .ic { stroke: var(--faint); }
@keyframes checkIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.preimage { grid-column: 2; }
.preimage summary { font-size: .78rem; color: var(--accent); cursor: pointer; width: max-content; }
.preimage code {
  display: block; margin-top: .4rem; padding: .6rem .7rem; border-radius: 8px; background: var(--surface-2);
  font-size: .72rem; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere;
}
.verify-done { font-weight: 600; font-size: .92rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.verify-done[data-ok="yes"] { color: var(--good); }
.verify-done[data-ok="no"] { color: var(--bad); }

.ex-section { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.ex-section h2 { margin-bottom: 1rem; }

/* settlement page */
.tx-lead { margin-top: .9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; max-width: 46rem; }
.tx-lead .kind {
  font-size: .82rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line-strong);
}
.tx-lead-text { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 500; letter-spacing: -0.015em; color: var(--ink-2); line-height: 1.4; }

.flow { border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.3rem; display: grid; gap: .8rem; min-width: 0; }
.flow h2 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; }
.flow-p, .flow-note { font-size: .86rem; color: var(--muted); line-height: 1.5; }
.flow-note { color: var(--muted); font-size: .8rem; }
.flow-bar { display: flex; gap: 2px; height: 14px; }
.flow-seg { flex: var(--w, 1) 1 0; min-width: 4px; border-radius: 3px; }
.flow-seg:first-child { border-radius: 6px 3px 3px 6px; }
.flow-seg:last-child { border-radius: 3px 6px 6px 3px; }
.flow-seg:only-child { border-radius: 6px; }
.flow-donor { background: var(--accent); }
.flow-fee { background: var(--ex-fee); }
.flow-refund { background: var(--line-strong); }
.flow-legend { margin: 0; display: grid; }
.flow-item { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.flow-item dt { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink-2); }
.flow-item dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; white-space: nowrap; }
.flow-key { width: .7rem; height: .7rem; border-radius: 3px; flex: none; }
.flow-total { border-bottom: 0; }
.flow-total dt { color: var(--muted); padding-left: 1.25rem; }

/* search misses, errors */
.ex-error { padding: clamp(2rem, 5vw, 3rem) 0 0; display: grid; gap: .75rem; justify-items: start; max-width: 46rem; }
.ex-error h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 620; letter-spacing: -0.03em; line-height: 1.2; overflow-wrap: anywhere; }
.ex-error h1:focus { outline: none; }
.hits { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }

/* all blocks */
.ex-blocks .c-height { white-space: nowrap; }
.blk-link { font-weight: 600; font-variant-numeric: tabular-nums; }
.tag-open {
  display: inline-block; margin-left: .5rem; font-size: .72rem; font-weight: 600; color: var(--ex-forming);
  padding: .1rem .45rem; border-radius: 6px; border: 1px solid var(--ex-forming-line);
}

/* --- Chinese, Japanese, Korean: no negative tracking --- */
:lang(zh) .ex-hero h1, :lang(ja) .ex-hero h1, :lang(ko) .ex-hero h1,
:lang(zh) .ex-page-head h1, :lang(ja) .ex-page-head h1, :lang(ko) .ex-page-head h1,
:lang(zh) .blk-h, :lang(ja) .blk-h, :lang(ko) .blk-h,
:lang(zh) .ex-tile-value, :lang(ja) .ex-tile-value, :lang(ko) .ex-tile-value { letter-spacing: -0.01em; }

/* --- responsive --- */

@media (max-width: 68rem) {
  .ex-hero-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ex-search { max-width: 34rem; }
  .ex-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ex-tile, .ex-tile + .ex-tile { border-left: 0; padding-left: 0; }
  .ex-tile { border-bottom: 1px solid var(--line); }
  .ex-tile:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); padding-left: 1.25rem; }
  .ex-tile:nth-child(n + 4) { border-bottom: 0; }
  .ex-day-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .ex-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 46rem) {
  :root { --ex-tile-w: 8.6rem; --ex-tile-h: 10.4rem; --ex-gap: 1.25rem; }
  .ex-hero h1 { font-size: 2.5rem; }
  .ex-lead { font-size: 1rem; }
  .ex-search .hint { padding-left: .25rem; }
  .ex-head { gap: .6rem 1.25rem; }
  .updated { margin-left: 0; width: 100%; }
  .blk-tile { padding: .75rem .75rem .7rem; }
  .blk-h { font-size: 1.45rem; }
  .blk-n, .blk-tok { font-size: .8rem; }
  .ex-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-tile, .ex-tile + .ex-tile, .ex-tile:not(:nth-child(3n + 1)) { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--line); }
  .ex-tile:nth-child(even) { border-left: 1px solid var(--line); padding-left: 1.1rem; }
  .ex-tile:nth-child(n + 5) { border-bottom: 0; }
  .ex-tile { padding-top: 1.1rem; padding-bottom: 1.15rem; }
  .ex-tile-value { font-size: 1.6rem; }

  /* settlement tables become two-line rows */
  .ex-table:not(.ex-table-compact) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ex-table:not(.ex-table-compact), .ex-table:not(.ex-table-compact) tbody { display: block; }
  .ex-table:not(.ex-table-compact) tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem;
    grid-template-areas: "tx charge" "model when" "kind block";
    padding: .75rem 0; border-bottom: 1px solid var(--line);
  }
  .ex-table:not(.ex-table-compact) td { display: block; padding: 0; border: 0; min-width: 0; }
  .ex-table .c-tx { grid-area: tx; }
  .ex-table .c-charge { grid-area: charge; text-align: right; font-weight: 500; }
  .ex-table .c-model { grid-area: model; font-size: .84rem; }
  .ex-table .model-name { white-space: normal; overflow-wrap: anywhere; }
  .ex-table .c-when { grid-area: when; text-align: right; font-size: .8rem; }
  .ex-table .c-kind { grid-area: kind; font-size: .84rem; }
  .ex-table .c-block { grid-area: block; text-align: right; font-size: .84rem; }
  .ex-table .c-block .cell-label { display: inline; color: var(--muted); }
  .ex-table:not(.ex-table-compact) .c-tok { display: none; }
  .ex-table.ex-blocks tr { grid-template-areas: "h when" "hash credits" "txs txs"; }
  .ex-blocks td:nth-child(1) { grid-area: h; }
  .ex-blocks td:nth-child(2) { grid-area: hash; }
  .ex-blocks td:nth-child(3) { grid-area: txs; text-align: left; color: var(--muted); font-size: .82rem; }
  .ex-table.ex-blocks td:nth-child(4), .ex-table.ex-blocks td:nth-child(6) { display: none; }
  .ex-blocks td:nth-child(5) { grid-area: credits; }
  .ex-blocks td:nth-child(7) { grid-area: when; }

  .ex-about-points { grid-template-columns: minmax(0, 1fr); border-top: 0; margin-top: 1rem; }
  .ex-about-points li, .ex-about-points li + li { padding: 1.25rem 0; border-left: 0; border-top: 1px solid var(--line); }
  .ex-bar { flex-direction: column; align-items: stretch; }
  .ex-search-sm { width: 100%; }
  .fact { grid-template-columns: minmax(0, 1fr); padding: .7rem 0; }
  .verify { padding: 1.15rem 1rem 1.2rem; border-radius: 16px; }
  .flow { padding: 1.1rem 1rem; }
  .mix-row { grid-template-columns: minmax(0, 1fr) minmax(3rem, 26%) auto 2.4rem; gap: .6rem; }
}

@media (forced-colors: active) {
  .blk-slots i { background: GrayText; }
  .blk-slots i.on { background: CanvasText; opacity: 1; }
  .chart-plot .bar { fill: CanvasText; }
  .mix-fill, .flow-seg { background: CanvasText; }
}