/* Mosh Explorer — independent on-chain observer.
   No cards, no gradients, no glow. Sections are separated by rules and alignment.
   Radius only on real controls. Mono is reserved for machine data. */
:root{
  --bg:#0B0C0C;
  --ink:#E7E5DF;
  --ink2:#8D918D;
  --ink3:#5E625F;
  --rule:#252726;
  --rule2:#343835;
  --up:#63A77B;
  --dn:#C66C61;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(18px,4.5vw,52px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
a{color:inherit; text-decoration:none; border-bottom:1px solid var(--rule2)}
a:hover{border-bottom-color:var(--ink2)}

/* ── masthead ─────────────────────────────────────────── */
.masthead{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; padding:20px var(--pad) 15px; border-bottom:1px solid var(--rule)}
.masthead h1{margin:0; font-size:17px; font-weight:600; letter-spacing:-.012em}
.mh-l p{margin:3px 0 0; font-size:12.5px; color:var(--ink3)}
.mh-r{display:flex; gap:22px; flex-wrap:wrap; font-size:12px; color:var(--ink3)}
.mh-r b{color:var(--ink2); font-weight:400}
.live{display:inline-flex; align-items:center; gap:7px}
.dot{width:5px; height:5px; border-radius:50%; background:var(--ink3)}
.dot.ok{background:var(--up)}
.dot.err{background:var(--dn)}

main{max-width:1220px; margin:0 auto; padding:0 var(--pad)}

/* ── lede: one number leads, the rest support it ──────── */
.lede{display:grid; grid-template-columns:minmax(280px,.85fr) 1.15fr; gap:40px 56px;
  align-items:end; padding:46px 0 40px; border-bottom:1px solid var(--rule)}
.lede-k{display:block; font-size:12.5px; color:var(--ink2)}
.lede-v{display:block; margin:10px 0 0; font-family:var(--mono); font-weight:400;
  font-size:clamp(40px,6.2vw,66px); line-height:1; letter-spacing:-.04em}
.lede-sub{display:block; margin-top:12px; font-size:13px; color:var(--ink2)}
.lede-sub span+span{margin-left:14px}
.chg-up{color:var(--up)} .chg-dn{color:var(--dn)} .chg-none{color:var(--ink3)}
.lede-rest{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.fig .k{display:block; font-size:12px; color:var(--ink2)}
.fig .v{display:block; margin-top:8px; font-family:var(--mono); font-weight:400;
  font-size:clamp(17px,1.85vw,23px); letter-spacing:-.03em; line-height:1.15; white-space:nowrap}
.fig .s{display:block; margin-top:5px; font-size:11.5px; color:var(--ink3)}

/* ── sections ─────────────────────────────────────────── */
.sec{padding:44px 0 40px; border-bottom:1px solid var(--rule)}
.sec h2{margin:0 0 6px; font-size:15.5px; font-weight:600; letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:13px; flex-wrap:wrap}
.sec h2 i{font-style:normal; font-family:var(--mono); font-size:12px;
  font-weight:400; color:var(--ink3)}
.h2sub{font-family:var(--mono); font-size:12px; font-weight:400; color:var(--ink3);
  margin-left:auto; text-align:right}
.lead{margin:10px 0 24px; font-size:13px; color:var(--ink2); max-width:76ch; line-height:1.6}
.note{margin:22px 0 0; font-size:12.5px; color:var(--ink3); max-width:88ch; line-height:1.6}
.note b{color:var(--ink2); font-weight:500}

/* ── definition rows ──────────────────────────────────── */
.cols2{display:grid; grid-template-columns:1fr 1fr; gap:0 60px}
.cols2.split{gap:0}
.split>.sec:first-child{padding-right:56px; border-right:1px solid var(--rule)}
.split>.sec:last-child{padding-left:56px}
dl{margin:16px 0 0}
dl>div{display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:11px 0; border-bottom:1px solid var(--rule)}
dt{font-size:13.5px; color:var(--ink2)}
dd{margin:0; font-family:var(--mono); font-size:14px; text-align:right; white-space:nowrap}
.posres{margin-top:26px}

/* ── tables ───────────────────────────────────────────── */
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:18px}
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{position:sticky; top:0; z-index:2; background:var(--bg); text-align:left;
  font-family:var(--sans); font-size:12px; font-weight:500; color:var(--ink3);
  padding:0 22px 11px 0; border-bottom:1px solid var(--rule2); white-space:nowrap}
.tbl td{padding:13px 22px 13px 0; border-bottom:1px solid var(--rule);
  white-space:nowrap; font-family:var(--mono); font-weight:400; font-size:13.5px}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl tbody tr:last-child td{border-bottom:0}
.r,th.r{text-align:right}
td.empty{text-align:center; color:var(--ink3); padding:34px 0; font-family:var(--sans)}
.state-live{color:var(--up)}
.state-frozen{color:var(--dn)}
.side-buy{color:var(--up)}
.side-sell{color:var(--dn)}
.muted{color:var(--ink3)}
.agents .cap{display:inline-flex; align-items:center; gap:11px; min-width:168px}
.agents .capbar{flex:1; min-width:52px; height:2px; background:var(--rule2)}
.agents .capbar i{display:block; height:100%; background:var(--ink2)}
.feed td:first-child{color:var(--ink2)}
tr.fresh td{background:#141614}

/* ── controls ─────────────────────────────────────────── */
.lookup{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
input{flex:1 1 240px; min-width:0; font-family:var(--mono); font-size:13.5px; color:var(--ink);
  background:none; border:1px solid var(--rule2); border-radius:3px; padding:10px 12px}
input:focus{outline:none; border-color:var(--ink2)}
input::placeholder{color:var(--ink3)}
.btn{font-family:var(--sans); font-size:13.5px; color:var(--bg); background:var(--ink);
  border:1px solid var(--ink); border-radius:3px; padding:10px 20px; cursor:pointer}
.btn:hover{background:#fff}

/* ── contract index ───────────────────────────────────── */
.cmap{display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; margin-top:20px}
.cgrp{margin-bottom:26px}
.cgrp h3{margin:0 0 4px; font-size:12px; font-weight:500; color:var(--ink3)}
.cgrp .cm{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--rule)}
.cgrp .nm{font-size:13.5px}
.cgrp .ds{font-size:11.5px; color:var(--ink3); margin-top:2px; max-width:26ch}
.cgrp a{font-family:var(--mono); font-size:12px; color:var(--ink2); white-space:nowrap}

/* ── atmosphere ───────────────────────────────────────
   Three plates sit behind the page at very low opacity, masked so they never
   run under a column of figures. Decorative only: every one is inert to
   pointer events and sits on a negative z-index. Swap the files in assets/
   to re-skin the page; nothing else depends on them. */
.wall{position:relative; isolation:isolate}
.wall::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  background-repeat:no-repeat; background-size:cover;
  filter:saturate(.5) contrast(1.06) brightness(.95);
}
.lede.wall::before{
  inset:-24px calc(var(--pad) * -1) -1px 0;
  background-image:url(assets/wall-mass.webp);
  background-position:78% 42%;
  opacity:.15;
  -webkit-mask-image:radial-gradient(115% 130% at 100% 6%, #000 0 26%, rgba(0,0,0,.5) 52%, transparent 82%);
  mask-image:radial-gradient(115% 130% at 100% 6%, #000 0 26%, rgba(0,0,0,.5) 52%, transparent 82%);
}
.sec.wall::before{
  inset:0 calc(var(--pad) * -1) auto 0; height:280px;
  background-position:72% 38%;
  opacity:.11;
  -webkit-mask-image:linear-gradient(180deg,#000 0 18%,transparent 92%),
                     linear-gradient(90deg,transparent 0 26%,#000 74%);
          mask-image:linear-gradient(180deg,#000 0 18%,transparent 92%),
                     linear-gradient(90deg,transparent 0 26%,#000 74%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.wall-hands::before{background-image:url(assets/wall-hands.webp)}
.wall-board::before{background-image:url(assets/wall-board.webp)}
/* the tape is the page's centre of gravity — keep its rows perfectly clean */
.wall-board::before{height:190px}
@media (max-width:860px){
  .lede.wall::before{opacity:.10}
  .sec.wall::before{opacity:.07; height:150px}
}

footer{max-width:1220px; margin:0 auto; padding:32px var(--pad) 64px}
footer p{margin:0 0 11px; font-size:12px; color:var(--ink3); max-width:100ch; line-height:1.65}

.stale{opacity:.4}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:1080px){
  .lede{grid-template-columns:1fr; gap:34px; align-items:start}
  .cmap{grid-template-columns:1fr; gap:0}
  .cgrp{margin-bottom:22px}
}
@media (max-width:860px){
  .cols2{grid-template-columns:1fr; gap:0}
  .split>.sec:first-child{padding-right:0; border-right:0}
  .split>.sec:last-child{padding-left:0}
}
@media (max-width:600px){
  body{font-size:14.5px}
  .lede-rest{grid-template-columns:repeat(2,1fr); gap:24px 20px}
  .mh-l p{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}