:root{
--bg:#060606;
--panel:#0c0c0c;
--sunken:#000;
--chip:#15181c;
--line:#212429;
--line-soft:#17191d;
--header-bg:#000;
--ink:#efefeb;
--dim:#b3b3b3;
--accent:#a7ff52;
--accent-ink:#060606;
--accent-soft:#d0ffa2;
--accent-tint:rgb(167 255 82 / .09);
--accent-edge:rgb(167 255 82 / .45);
--rule:linear-gradient(90deg,#a7ff52 0%,#3f8100 55%,#1e2f14 100%);
--ok:#2cc98f;
--ok-tint:rgb(44 201 143 / .09);
--ok-edge:rgb(44 201 143 / .45);
--warn:#fb8a2e;
--warn-tint:rgb(251 138 46 / .09);
--warn-edge:rgb(251 138 46 / .45);
--bad:#e2425c;
--bad-tint:rgb(226 66 92 / .09);
--bad-edge:rgb(226 66 92 / .5);
--unknown:var(--warn);
--r-sm:.625rem;
--r-md:1.25rem;
--r-pill:6.25rem;
--shadow:none;
--font-head:Montserrat,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--font-body:"Open Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font-body)}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;letter-spacing:.2px}
h2{margin:0 0 12px;font-size:17px}
h3{margin:0 0 6px;font-size:15px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
code,kbd,samp{font-family:var(--font-mono);font-size:.9em;color:var(--accent-soft);word-break:break-all}
pre{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;overflow:auto;font-family:var(--font-mono);font-size:12.5px}
strong{font-weight:600}
header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--header-bg);position:sticky;top:0;z-index:5}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rule)}
header .sub,header .who{color:var(--dim)}
.brand{font-family:var(--font-head);font-weight:700}
.row{display:flex;gap:16px;padding:6px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.row .k{flex:0 0 220px;color:var(--dim)}
.row .v{flex:1;min-width:0}
.row.sub .k{padding-left:18px}
.is-ok{color:var(--ok)}
.is-warn{color:var(--warn)}
.is-bad{color:var(--bad);font-weight:600}
main{max-width:1120px;margin:0 auto;padding:18px}
footer{max-width:1120px;margin:0 auto;padding:8px 18px 34px;color:var(--dim);font-size:12.5px}
section,.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin:0 0 16px;box-shadow:var(--shadow)}
.note,.why,.dim,.empty{color:var(--dim)}
.note{font-size:13px;margin:0 0 12px}
.why{font-size:12.5px}
.dim{font-size:12.5px}
.empty{font-style:italic;margin:6px 0}
.note.bad{color:var(--bad)}
.unknown{color:var(--unknown);font-weight:600}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-family:var(--font-head);color:var(--dim);font-weight:600;border-bottom:1px solid var(--line);padding:7px 9px;white-space:nowrap}
td{border-bottom:1px solid var(--line-soft);padding:7px 9px;vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:1px 9px;border-radius:var(--r-pill);font-size:12px;border:1px solid var(--line);background:var(--chip);color:var(--dim)}
.badge.good{color:var(--ok);border-color:var(--ok-edge);background:var(--ok-tint)}
.badge.warn{color:var(--warn);border-color:var(--warn-edge);background:var(--warn-tint)}
.badge.bad{color:var(--bad);border-color:var(--bad-edge);background:var(--bad-tint);font-weight:700}
.banner{padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);margin-bottom:12px;line-height:1.5}
.banner.good{border-color:var(--ok-edge);background:var(--ok-tint)}
.banner.warn{border-color:var(--warn-edge);background:var(--warn-tint)}
.banner.bad{border-color:var(--bad-edge);background:var(--bad-tint)}
input[type=text],input[type=number],input[type=search],input:not([type]),textarea{width:100%;background:var(--sunken);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;font:inherit}
textarea{font-family:var(--font-mono);font-size:13px}
::placeholder{color:var(--dim);opacity:.75}
button{background:var(--chip);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 16px;font:inherit;cursor:pointer}
button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
button:disabled{cursor:not-allowed;opacity:.5}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
button.primary:hover:not(:disabled){color:var(--accent-ink)}
details summary{cursor:pointer;color:var(--dim);margin-top:10px}
main{max-width:1240px;padding:20px 18px 4px}
footer{max-width:1240px;border-top:1px solid var(--line-soft);margin-top:8px;padding-top:14px}
footer p{margin:0 0 6px}

/* The masthead. Brand, chain and search share one row wherever there is room for them, because
   three stacked rows of sticky chrome cost a phone a third of its screen before the page starts. */
header{display:block;padding:12px 18px 10px}
.masthead{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.brand{font-size:19px;color:var(--ink);white-space:nowrap}
.brand span{color:var(--accent);margin-left:5px}
.chain{color:var(--dim);font-size:12.5px;font-family:var(--font-mono)}
.search{display:flex;gap:8px;margin:0;flex:1 1 280px;min-width:0}
.search input{flex:1;min-width:0;padding:7px 11px}
.search button{white-space:nowrap;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600;padding:7px 16px}
.search button:hover{color:var(--accent-ink)}
/* Below this the masthead is two rows and the nav is a third, and a sticky header that owns a
   third of a phone screen is worse than one a reader scrolls back up to. It stays RELATIVE rather
   than static: the shared stylesheet hangs the brand rule off the header as an absolute pseudo
   element, and a static header would leave that gradient line anchored to the viewport. */
@media(max-width:820px){header{position:relative;top:auto}}
nav{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;margin-top:10px;padding-bottom:2px}
.nav-link{color:var(--dim);font-size:13.5px;padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap}
.nav-link:hover{color:var(--accent);background:var(--chip);text-decoration:none}
.nav-link.here{color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--accent-edge)}
.skip{position:absolute;left:-9999px;top:0;z-index:9}
.skip:focus{left:10px;top:10px;background:var(--accent);color:var(--accent-ink);padding:9px 14px;border-radius:var(--r-sm);font-weight:600}

/* Panel headings. The lead panel of a page carries the only h1 on it and the brand rule under it. */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.sec-head h1,.sec-head h2{margin:0}
.sec-head h1{font-size:23px;letter-spacing:-.1px;word-break:break-word}
.sec-head h2{font-size:16px}
section.lead .sec-head{display:block;margin-bottom:14px}
section.lead .sec-head h1::after{content:"";display:block;width:52px;height:2px;margin-top:9px;background:var(--rule)}

/* Stat tiles: the short measurements, drawn to be read across rather than down. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin:0 0 14px}
.stat{background:var(--sunken);padding:11px 13px;display:flex;flex-direction:column;gap:5px;min-width:0}
.stat-k{color:var(--dim);font-family:var(--font-head);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.stat-v{font-family:var(--font-head);font-size:19px;line-height:1.2;color:var(--ink);word-break:break-word}
.stat-v code{font-size:19px;color:var(--ink);word-break:break-word}
.stat-v .badge{font-size:12px;vertical-align:2px}
/* A measured value carries its reason inline. At tile size that reason would be a headline, so it
   is dropped back to body text here rather than being cut — an unknown never loses its why. */
.stat-v .unknown{font-size:15px}
.stat-v .why{display:block;font-family:var(--font-body);font-size:12px;line-height:1.45;font-weight:400;margin-top:3px}
.stat>.why{font-size:11.5px;line-height:1.45}

/* Key/value detail. One hairline grid, labels in the heading face so they read as labels. */
.kv{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.kv-row{display:grid;grid-template-columns:minmax(150px,232px) 1fr;gap:14px;background:var(--panel);padding:9px 13px;align-items:baseline}
.kv dt{color:var(--dim);font-family:var(--font-head);font-size:12.5px;margin:0}
.kv dd{margin:0;min-width:0;word-break:break-word}
.kv dd>code{word-break:break-all}
.kv dd p{margin:4px 0 0}
@media(max-width:640px){.kv-row{grid-template-columns:1fr;gap:3px}}

/* Tables. Wide ones scroll inside themselves so the PAGE never scrolls sideways, and a long one
   keeps its header in view — which needs a scroll box of its own, so only long ones get one. */
.scroll{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:var(--r-sm)}
.scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scroll.tall{max-height:min(70vh,680px)}
thead th{position:sticky;top:0;z-index:1;background:var(--panel);box-shadow:inset 0 -1px 0 var(--line);border-bottom:0;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:9px 11px}
td{padding:9px 11px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--sunken)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.amount{font-variant-numeric:tabular-nums}
.unit{color:var(--dim);font-size:12px}

/* Hashes: shortened on screen, whole in the title, and whole on the clipboard. */
.hashcell{display:inline-flex;align-items:center;gap:6px;max-width:100%}
code.hash{white-space:nowrap}
.copy{display:none}
.can-copy .copy{display:inline-block;background:var(--chip);border:1px solid var(--line);color:var(--dim);border-radius:var(--r-sm);padding:1px 7px;font-family:var(--font-head);font-size:10.5px;line-height:1.6;cursor:pointer;opacity:0;transition:opacity .12s}
.can-copy .hashcell:hover .copy,.can-copy .copy:focus-visible{opacity:1}
.can-copy .copy:hover{color:var(--accent);border-color:var(--accent)}
/* Nothing hovers on a touch screen, so there the buttons are simply present. */
@media(hover:none){.can-copy .copy{opacity:1}}

/* The chain-provenance banner, which every page carries. */
.provenance{border:1px solid var(--line);border-left-width:4px;border-radius:var(--r-sm);padding:12px 15px;margin:0 0 16px;background:var(--panel)}
.provenance strong{display:block;font-family:var(--font-head);font-size:14px;margin-bottom:4px}
.provenance p{margin:0;color:var(--dim);font-size:13px}
.provenance.good{border-left-color:var(--ok);background:var(--ok-tint)}
.provenance.good strong{color:var(--ok)}
.provenance.warn{border-left-color:var(--warn);background:var(--warn-tint)}
.provenance.warn strong{color:var(--warn)}
.provenance.flat{border-left-color:var(--accent);background:var(--accent-tint)}
.provenance.flat strong{color:var(--accent)}

/* The ledger index. Seven ledgers plus four registries, as one glanceable grid. */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px}
.card{display:flex;flex-direction:column;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;color:var(--ink)}
.card:hover{border-color:var(--accent-edge);background:var(--chip);text-decoration:none}
.card h3{margin:0 0 6px}
.card .purpose{color:var(--dim);font-size:12.5px;margin:0 0 10px}
.card .headline{margin:0 0 10px;font-size:13.5px}
.card .root{margin:auto 0 0}

/* Block records: a fixed-width kind pill, then what it did and why that matters. */
.records{list-style:none;margin:0;padding:0}
.records li{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.records li:last-child{border-bottom:0}
.records .tag{flex:0 0 138px;background:var(--chip);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--dim);font-family:var(--font-head);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;text-align:center}
.records .headline{margin:0 0 4px}
.records p{margin:0}
@media(max-width:640px){.records li{flex-direction:column;gap:7px}.records .tag{flex:0 0 auto;align-self:flex-start}}

/* Paging, which states its own bound rather than hiding it. */
.pager{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.pager-link{padding:5px 12px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:13px;white-space:nowrap}
.pager-link:hover{border-color:var(--accent);text-decoration:none}
.pager-link.off{color:var(--dim);opacity:.55}
.pager-note{color:var(--dim);font-size:12.5px;margin:9px 0 0}
.pager .pager-note{flex:1;margin:0;text-align:center}

/* Emptiness, drawn as a held space rather than as a stray line of italics. A list with nothing in
   it is a fact about the chain, and it should look like a fact rather than like a rendering slip. */
.empty{border:1px dashed var(--line);border-radius:var(--r-sm);padding:13px 15px;margin:0 0 10px}
.badge{padding:2px 10px;font-family:var(--font-head);font-weight:600;line-height:1.5}
.fees{border-left:3px solid var(--accent);padding:10px 14px;background:var(--accent-tint);color:var(--dim);font-size:13px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:0 0 16px}
.notes{color:var(--dim);font-size:13px;margin:12px 0 0;padding-left:18px}
.notes li{margin-bottom:4px}

/* The contract read form: a GET form, so the question stays in the URL. */
form label{display:block;color:var(--dim);font-size:13px;margin:0 0 11px}
form label input,form label select{margin-top:5px}
select{background:var(--sunken);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;font:inherit;max-width:100%}
.source{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;overflow-x:auto;font-family:var(--font-mono);font-size:12.5px;white-space:pre;color:var(--accent-soft)}