:root{
  --ground:#F5F2EC; --surface:#EFEBE3; --surface-2:#E7E2D8;
  --rule:#DAD5CA; --rule-strong:#C2BBAD;
  --text:#22333F; --muted:#6E7D88; --dim:#9AA5AD;
  --safe:#5E8F82; --attached:#B8893C; --eroding:#C0703F;
  --exhausted:#A8524C; --agent:#3E6B7E;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Instrument Serif",Georgia,serif;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);
  font-family:var(--mono);font-size:13px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--agent);text-decoration:none;border-bottom:1px solid rgba(62,107,126,.35)}
a:hover{border-bottom-color:var(--agent)}
:focus-visible{outline:2px solid var(--agent);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}


.masthead{border-bottom:1px solid var(--rule-strong);background:var(--ground)}
.masthead .wrap{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:20px 24px 16px}
.wordmark{font-family:var(--sans);font-weight:600;font-size:15px;
  letter-spacing:.24em;text-transform:uppercase;margin:0}
.wordmark span{color:var(--muted);font-weight:400;letter-spacing:.14em}
.sitenav{display:flex;gap:20px;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase}
.sitenav a{border:none;color:var(--dim)}
.sitenav a:hover{color:var(--text)}
.sitenav a[aria-current="page"]{color:var(--text)}
.acct{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}
.linkbtn{background:none;border:none;padding:0;font-family:var(--mono);font-size:11px;
  color:var(--agent);cursor:pointer;border-bottom:1px solid rgba(62,107,126,.35)}
.linkbtn:hover{border-bottom-color:var(--agent)}

.disclosure{background:var(--surface);border-bottom:1px solid var(--rule);
  font-size:11.5px;color:var(--muted)}
.disclosure .wrap{padding:11px 24px}
.disclosure strong{color:var(--text);font-weight:500}

section{padding:44px 0}
.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
  margin:0 0 10px;font-family:var(--sans);font-weight:500}
h2{font-family:var(--display);font-weight:400;font-size:32px;margin:0 0 8px;line-height:1.1}
.lede{color:var(--muted);margin:0 0 26px;font-size:12.5px;max-width:74ch}
.lede b{color:var(--text);font-weight:500}

.stats{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:24px}
.stat{background:var(--ground);padding:16px 18px}
.stat dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  margin:0 0 9px;font-family:var(--sans);font-weight:500}
.stat dd{margin:0;font-family:var(--display);font-size:28px;line-height:1}
.stat .sub{font-size:11px;color:var(--muted);margin-top:7px}

button.act,.cta{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.06em;
  padding:11px 20px;border:1px solid var(--text);background:var(--text);color:var(--ground);
  cursor:pointer;border-radius:2px;display:inline-block;text-align:center}
button.act:hover:not(:disabled),.cta:hover{background:#2C4150;border-color:#2C4150;color:var(--ground)}
button.act:disabled{opacity:.35;cursor:not-allowed}
button.ghost{background:none;color:var(--text);border-color:var(--rule-strong)}
button.ghost:hover:not(:disabled){background:var(--surface-2);border-color:var(--text)}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
input{font-family:var(--mono);font-size:14px;padding:11px 13px;border:1px solid var(--rule-strong);
  background:var(--ground);color:var(--text);border-radius:2px;flex:0 1 320px;min-width:150px}
input:focus{outline:none;border-color:var(--agent)}

.step{border:1px solid var(--rule);background:var(--surface);padding:22px;margin-bottom:16px}
.step p{max-width:74ch}
.step h3{font-family:var(--display);font-size:19px;font-weight:400;margin:0 0 4px}
.step p{color:var(--muted);font-size:11.5px;margin:0 0 14px}
.num{font-family:var(--sans);font-size:10px;letter-spacing:.18em;color:var(--dim);
  text-transform:uppercase;display:block;margin-bottom:6px}

.msg{padding:12px 14px;border:1px solid var(--rule-strong);background:var(--surface);
  font-size:11.5px;margin-top:16px;word-break:break-word}
.msg.err{border-color:var(--exhausted);color:var(--exhausted)}
.msg.ok{border-color:var(--safe);color:var(--safe)}
.mono-sm{font-size:11px;color:var(--muted)}
footer{padding:32px 0 64px;color:var(--dim);font-size:11px;border-top:1px solid var(--rule)}
[hidden]{display:none !important}

@media(max-width:640px){
  .wrap{padding:0 16px}
  .masthead .wrap,.disclosure .wrap{padding-left:16px;padding-right:16px}
  .masthead .wrap{gap:10px;padding-top:14px;padding-bottom:12px}
  .sitenav{gap:16px;order:3;width:100%}
  .acct{margin-left:0;order:2}
  section{padding:30px 0}
  h2{font-size:25px}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:13px 14px}
  .stat dd{font-size:23px}
  .step{padding:16px}
  .field{flex-direction:column;align-items:stretch}
  .field input{min-width:0;width:100%}
  .field button,.row button.act{width:100%}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Pre-paint connection state. The inline head script sets .pre-connected from
   sessionStorage so the correct screen renders first time. */
.whenIn{display:none}
.whenOut{display:block}
.pre-connected .whenOut{display:none !important}
.pre-connected .whenIn{display:block !important}
.pre-connected #addr,.pre-connected #disconnect{display:inline !important}
.pre-connected #connect{opacity:.35;pointer-events:none}

/* Values still being read from the chain show a placeholder, never a zero. */
.pending{color:var(--dim) !important}

/* Steady the frame between pages: the masthead and disclosure are identical on
   every page, so fixing their height stops the content jumping. */
html{background:var(--ground)}
main{min-height:52vh}