/* SIEGE — parchment and ink. Sampled from the banner: #DCBE96 · #E6C8A0 · #0A0A0A
   This is an app shell: a fixed top bar, a fixed bottom bar, and one page at a time between them. */

:root{
  --parchment:#e8d6b4;
  --parchment-2:#efe1c6;
  --sand:#dcbe96;
  --tan:#c8aa82;
  --umber:#8a6e4e;
  --ink:#100d09;
  --ink-2:#5a4c3a;
  --rule:rgba(16,13,9,.16);
  --rule-2:rgba(16,13,9,.32);
  --good:#3f6b34;
  --bad:#8c3a1e;

  --w:1180px;
  --gut:clamp(18px,4vw,54px);
  --bar:58px;
  --disp:"Fraunces",Georgia,serif;
  --mono:"DM Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;background:var(--parchment);color:var(--ink);
  font-family:var(--disp);font-optical-sizing:auto;font-weight:300;
  font-size:clamp(14.5px,1vw,16px);line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  background-image:
    radial-gradient(circle at 15% 8%,rgba(255,255,255,.5),transparent 40%),
    radial-gradient(circle at 85% 88%,rgba(138,110,78,.14),transparent 46%);
  background-attachment:fixed;
}
.mono{font-family:var(--mono);font-variant-ligatures:none}
a{color:inherit}
code.mono{background:rgba(16,13,9,.07);padding:.06em .36em;border-radius:2px;font-size:.88em}

/* ───────────────────────── top bar ───────────────────────── */
.topbar{
  position:sticky;top:0;z-index:40;height:var(--bar);flex:0 0 auto;
  display:flex;align-items:center;gap:clamp(12px,3vw,36px);padding:0 var(--gut);
  background:rgba(232,214,180,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.26em;font-weight:500}
.tabs{display:flex;gap:2px;margin-right:auto;font-family:var(--mono);font-size:12px}
.tabs a{
  text-decoration:none;color:var(--ink-2);padding:7px 13px;border:1px solid transparent;
  border-radius:2px;transition:color .15s,background .15s,border-color .15s;white-space:nowrap;
}
.tabs a:hover{color:var(--ink);background:rgba(16,13,9,.05)}
.tabs a.on{color:var(--ink);border-color:var(--rule-2);background:rgba(255,255,255,.4)}
.wallet{display:flex;align-items:center;gap:9px}
.chainpill{
  font-size:10.5px;letter-spacing:.1em;padding:5px 10px;border:1px solid var(--rule-2);
  color:var(--ink-2);cursor:default;
}
.chainpill.bad{color:var(--bad);border-color:var(--bad);cursor:pointer}
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:9px 18px;border-radius:2px;
  background:var(--ink);color:var(--parchment);border:1px solid var(--ink);cursor:pointer;
  text-decoration:none;display:inline-block;transition:background .16s,transform .16s;
}
.btn:hover:not(:disabled){background:#2a2118;transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn--wallet{padding:9px 16px}
@media (max-width:900px){
  .tabs a{padding:7px 9px;font-size:11px}
  .mark span{display:none}
}

/* ───────────────────────── the page ──────────────────────── */
#view{flex:1 1 auto;width:100%}
.page{max-width:var(--w);margin:0 auto;padding:clamp(30px,5vw,60px) var(--gut) clamp(40px,6vw,80px)}
.page__head{max-width:66ch;margin-bottom:clamp(26px,4vw,44px)}
.page__head h1{
  font-family:var(--disp);font-weight:900;font-size:clamp(30px,4.6vw,54px);
  line-height:1.02;letter-spacing:-.025em;margin:0 0 12px;
}
.page__head p{margin:0;color:var(--ink-2);font-size:clamp(14.5px,1.15vw,17px)}
.page__head b{color:var(--ink);font-weight:700}

.stage{width:100%;height:clamp(200px,30vh,300px);margin-bottom:clamp(24px,3vw,38px);
  border:1px solid var(--rule);background:rgba(255,255,255,.22)}
.stage canvas{display:block;width:100%;height:100%}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.stat{background:rgba(255,255,255,.34);padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.stat__k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.stat__v{font-size:clamp(19px,2.2vw,27px);font-weight:500;letter-spacing:-.02em;line-height:1}
.stat__s{font-size:11px;color:var(--ink-2);letter-spacing:.02em}
.loading{padding:20px 22px;color:var(--ink-2);font-size:12px;background:rgba(255,255,255,.34)}

.banner{
  margin-top:22px;padding:18px 20px;border:1px solid var(--rule-2);
  background:rgba(138,110,78,.09);display:flex;flex-direction:column;gap:6px;
}
.banner b{font-weight:700}
.banner span{color:var(--ink-2);font-size:14px;max-width:74ch}
.foot-note{margin-top:26px;color:var(--ink-2);font-size:13px;max-width:74ch}

/* ──────────────────────── breach desk ────────────────────── */
.desk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  border:1px solid var(--rule-2);background:rgba(255,255,255,.3)}
.desk__in{padding:clamp(20px,3vw,32px);border-right:1px solid var(--rule)}
.desk__in label{display:block;margin-bottom:24px}
.desk__in span{display:flex;justify-content:space-between;align-items:baseline;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px}
.desk__in b{font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500}
.desk__in input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:var(--rule-2);outline:none}
.desk__in input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  background:var(--ink);cursor:pointer;transform:rotate(45deg)}
.desk__in input[type=range]::-moz-range-thumb{width:13px;height:13px;background:var(--ink);
  border:none;border-radius:0;cursor:pointer}
.hint{font-size:11px;color:var(--ink-2);margin:0}
.desk__out{padding:clamp(20px,3vw,32px)}
.big{display:flex;flex-direction:column;gap:5px;margin-bottom:20px}
.big .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.big .val{font-size:clamp(26px,3.6vw,40px);font-weight:500;line-height:1;letter-spacing:-.02em}
.bound{margin:16px 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.bound b{color:var(--ink)}
@media (max-width:820px){
  .desk{grid-template-columns:1fr}
  .desk__in{border-right:none;border-bottom:1px solid var(--rule)}
}

.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl td{padding:9px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.tbl td:last-child{text-align:right;color:var(--ink)}
.tbl tr.bound td{color:var(--ink);font-weight:500}
.tbl tr.bound td:first-child::before{content:"▸ ";color:var(--umber)}
.tbl tr.sep td{border-bottom:none;padding-top:14px}
.neg{color:var(--bad)}
.pos{color:var(--good)}

/* ───────────────────────── warchest ──────────────────────── */
.claim{margin-top:26px;border:1px solid var(--rule-2);background:rgba(255,255,255,.3);
  padding:clamp(20px,3vw,30px)}
.claim__row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.claim__row .lbl{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.claim__row .big-val{display:block;font-size:clamp(22px,3vw,32px);font-weight:500;line-height:1.2}
.claim__row .sub{display:block;font-size:11px;color:var(--ink-2)}
.claim__idle{color:var(--ink-2);font-size:13px}
.claim__msg{margin-top:14px;font-size:12px;color:var(--ink-2);word-break:break-all}

/* ─────────────────────────── docs ────────────────────────── */
.page--docs{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(26px,4vw,60px);
  align-items:start;max-width:var(--w)}
.toc{position:sticky;top:calc(var(--bar) + 24px)}
.toc__k{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:grid;grid-template-columns:26px 1fr;gap:8px;text-decoration:none;color:var(--ink-2);
  padding:8px 0;border-bottom:1px solid var(--rule);font-size:14px;transition:color .15s}
.toc a span{font-size:10.5px;color:var(--umber)}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);font-weight:500}
.chapter__n{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--umber);margin-bottom:10px}
.chapter h1{font-family:var(--disp);font-weight:900;font-size:clamp(28px,4vw,46px);
  line-height:1.04;letter-spacing:-.025em;margin:0 0 20px}
.chapter p{margin:0 0 14px;color:var(--ink-2);max-width:66ch}
.chapter b{color:var(--ink);font-weight:700}
.chapter pre{font-family:var(--mono);font-size:12.5px;line-height:1.7;margin:16px 0;
  padding:16px 18px;background:var(--ink);color:var(--sand);overflow-x:auto}
.limits{margin:12px 0 0;padding-left:20px;color:var(--ink-2);max-width:66ch}
.limits li{margin-bottom:10px}
.chapter__nav{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:20px;
  border-top:1px solid var(--rule);font-family:var(--mono);font-size:12px}
.chapter__nav a{text-decoration:none;color:var(--ink-2)}
.chapter__nav a:hover{color:var(--ink)}
@media (max-width:820px){
  .page--docs{grid-template-columns:1fr}
  .toc{position:static}
}

/* ──────────────────────── bottom bar ─────────────────────── */
.bottombar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--gut);border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-2);
}
.bottombar a{text-decoration:none}
.bottombar a:hover{color:var(--ink)}