/* Priors: the ledger and the bonsai.
   A credit house, not a dashboard. Paper and ink by day, the grove by night. EB Garamond for what we say,
   Schibsted Grotesk for how it works, IBM Plex Mono only for things you would copy (ids, addresses, code).
   No pills, no glow, no tracked-out capitals. Every class the page scripts generate is styled here. */

:root {
  --paper: #f1ece1;
  --paper-2: #e9e2d3;
  --paper-3: #e2dac8;
  --ink: #1b1a16;
  --ink-2: #3a372f;
  --muted: #6d675a;
  --faint: #978f7e;
  --rule: #cbc2af;
  --rule-2: #ddd5c4;
  --field: #faf7f0;
  --field-edge: #a69c86;
  --green: #2f6b4f;
  --green-2: #3f8a67;
  --green-soft: rgba(47, 107, 79, .1);
  --red: #a9432c;
  --red-soft: rgba(169, 67, 44, .1);
  --brass: #94763a;
  --brass-soft: rgba(148, 118, 58, .12);
  --night: #0f1411;
  --night-2: #161c18;
  --night-ink: #e8e2d2;
  --night-muted: #9b9788;
  --night-rule: #2a322d;
  --leaf: #84c49f;

  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .21, 1);
  --nav-bg: rgba(241, 236, 225, .94);
  --hover: rgba(27, 26, 22, .03);
  --shade: rgba(27, 26, 22, .06);
  color-scheme: light;

  /* legacy names the scripts and older markup still reference */
  --bg: var(--paper); --text: var(--ink); --text-2: var(--ink-2); --mint: var(--green); --coral: var(--red);
  --acc: var(--green); --acc-2: var(--green-2); --rose: var(--brass); --gold: var(--brass);
}

/* dark: the same ledger after hours. Warm ink-black paper, bone ink; the grove panels stay their own night. */
:root[data-theme="dark"] {
  --paper: #15140f;
  --paper-2: #1d1c16;
  --paper-3: #27251e;
  --ink: #ece6d6;
  --ink-2: #cdc6b5;
  --muted: #9d9686;
  --faint: #756f62;
  --rule: #3b382f;
  --rule-2: #2a2821;
  --field: #1b1a14;
  --field-edge: #5f5a4c;
  --green: #7fbf98;
  --green-2: #95d0ab;
  --green-soft: rgba(127, 191, 152, .12);
  --red: #e0876d;
  --red-soft: rgba(224, 135, 109, .12);
  --brass: #d1ae68;
  --brass-soft: rgba(209, 174, 104, .14);
  --nav-bg: rgba(21, 20, 15, .92);
  --hover: rgba(236, 230, 214, .04);
  --shade: rgba(0, 0, 0, .35);
  --night: #0c100d;
  color-scheme: dark;
}
:root[data-theme="dark"] .brand svg [fill="#1b1a16"] { fill: var(--ink); }
:root[data-theme="dark"] .brand svg [fill="#2f6b4f"] { fill: var(--green); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
img { display: block; max-width: 100%; }
::selection { background: rgba(47, 107, 79, .22); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 32px; }
.num, .mono { font-variant-numeric: lining-nums tabular-nums; }
.mono, code { font-family: var(--mono); }
.label { font-size: 13px; color: var(--muted); font-weight: 400; }
.sub { color: var(--muted); font-size: 14px; }
.k { color: var(--green); } .g { color: var(--green); } .r { color: var(--red); } .o { color: var(--brass); } .c { color: var(--muted); } .y { color: var(--brass); }
a.k, .prose a, .d a, .board-heading p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.k:hover { color: var(--ink); }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 10px; }
section[id] { scroll-margin-top: 90px; }

/* ------------------------------------------------------------------ masthead */
.nav { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--ink); }
.nav .wrap { display: flex; align-items: center; gap: 34px; height: 66px; max-width: 1280px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand svg { width: 26px; height: 26px; }
.brand span { font: 500 26px/1 var(--serif); letter-spacing: -.01em; }
/* the serif wordmark sits 4px below the links' baseline; meet halfway so they read as one line */
.brand span { position: relative; top: -2px; }
.links { display: flex; gap: 24px; font-size: 15px; padding-top: 4px; }
.links a { color: var(--ink-2); padding: 4px 0; border-bottom: 1px solid transparent; }
.links a:hover { color: var(--ink); }
.links a.on { color: var(--ink); border-bottom-color: var(--ink); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.nav .sub { display: none; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.status.live { color: var(--ink-2); } .status.live .dot { background: var(--green-2); }
.status.snapshot { color: var(--brass); } .status.snapshot .dot { background: var(--brass); }
.status.error { color: var(--red); } .status.error .dot { background: var(--red); }
.nav.solid { box-shadow: 0 6px 24px var(--shade); }
.reading-progress { position: absolute; bottom: -1px; left: 0; height: 2px; width: 100%; background: var(--green); transform-origin: left; }

/* buttons: rectangles of ink, or quiet outlines */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; font: 500 15px/1 var(--sans); border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary, .btn.ink { background: var(--ink); color: var(--paper); }
.btn.primary:hover, .btn.ink:hover { background: var(--green); border-color: var(--green); color: var(--paper); }
.btn.sm { padding: 9px 14px; font-size: 14px; }
.btn .arr { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn:disabled { opacity: 1; cursor: not-allowed; color: var(--muted); border-color: var(--field-edge); background: transparent; }
.btn.primary:disabled { background: var(--paper-3); border-color: var(--field-edge); color: var(--ink-2); }
.btn.on { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.agentbtn { background: var(--ink); color: var(--paper); }
/* x402, beside "Your agent": outlined, with a small "new" mark (build-time switch SITE_X402_BUTTON) */
.x402btn { gap: 8px; }
.x402btn .mk { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--green); padding: 3px 5px 2px; }
.x402btn:hover .mk { background: var(--paper); color: var(--ink); }
.agentbtn:hover, .agentbtn.on { background: var(--green); border-color: var(--green); color: var(--paper); }
.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.link:hover { color: var(--green); }

/* ------------------------------------------------------------------ page heading (inner pages) */
.app-main { max-width: 1280px; padding-block: 40px 88px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.app-main > * { min-width: 0; }
.board-heading { padding: 18px 0 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding-bottom: 28px; }
.eyebrow { font-size: 15px; color: var(--green); margin-bottom: 14px; }
.eyebrow > span { display: none; }
.eyebrow .ek { font-style: italic; font-family: var(--serif); font-size: 17px; }
.board-heading h1 { font: 400 clamp(38px, 5vw, 64px)/1.02 var(--serif); letter-spacing: -.02em; }
.board-heading h1 em, .hero-accent { font-style: italic; color: var(--green); }
.board-heading p { margin-top: 16px; max-width: 40em; font: 400 19px/1.55 var(--serif); color: var(--ink-2); }
.board-heading .aside { font-size: 14px; color: var(--muted); text-align: right; max-width: 22em; }

/* ------------------------------------------------------------------ panels */
.panel { border-top: 1px solid var(--ink); background: transparent; }
.panel > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 14px 0 14px; border-bottom: 1px solid var(--rule); }
.panel > header h2 { font: 400 26px/1.15 var(--serif); letter-spacing: -.01em; }
.panel > header .sub { font-size: 14px; }
.panel > header .label { margin-left: auto; font-size: 14px; color: var(--muted); }
.panel > header .btn { margin-left: auto; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.split > * { min-width: 0; }
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-width: 0; }
.side > * { min-width: 0; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
.grid2 + .grid2, .grid2 + .panel { margin-top: 8px; }

/* the account: figures as a ruled ledger row */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.kpi { padding: 22px 22px 20px; border-left: 1px solid var(--rule); position: relative; min-width: 0; }
.kpi:first-child { border-left: 0; padding-left: 0; }
.kpi .label { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.kpi .val { font: 400 clamp(32px, 3.4vw, 46px)/1.05 var(--serif); letter-spacing: -.015em; font-variant-numeric: lining-nums tabular-nums; }
.kpi .val.rec { font: 500 18px/1.3 var(--mono); letter-spacing: .04em; color: var(--green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 10px; }
.kpi .val.rec .r { color: var(--red); } .kpi .val.rec .o { color: var(--brass); }
.kpi .sub { margin-top: 8px; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.good .val { color: var(--green); }
.kpi.bad .val { color: var(--red); }
.kpi::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--green); opacity: 0; transition: opacity .9s; }
.kpi.tick::after { opacity: 1; }

/* ------------------------------------------------------------------ tables */
.tablewrap, .tblwrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 720px; }
th, td { text-align: left; padding: 11px 9px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; white-space: nowrap; font-size: 14.5px; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th { font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--ink); background: transparent; }
th .sub { font-weight: 400; color: var(--faint); margin-left: 6px; font-size: 12px; }
tbody tr { transition: background .3s; }
tbody tr:hover td { background: var(--hover); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
td.rank { color: var(--faint); width: 44px; font-variant-numeric: tabular-nums; }
td.wrapcell { white-space: normal; min-width: 120px; }
tr.empty td { padding: 26px 0; color: var(--muted); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable.on { color: var(--ink); }
th.sortable.on::after { content: " ↓"; }
th.sortable.on[aria-sort="ascending"]::after { content: " ↑"; }
tr.top td.rank { color: var(--green); }
tr.dead .nm, tr.dead .scorecell b { color: var(--red); }
@keyframes rowFlash { from { background: var(--green-soft); } to { background: transparent; } }
tr.flash td { animation: rowFlash 3s ease-out both; }
table.score-table, table.loans-table { min-width: 520px; }
.tbl { min-width: 0; }
.tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.c { color: var(--muted); white-space: normal; font-size: 14px; }

/* agents in tables */
.agent { display: flex; align-items: center; gap: 12px; }
a.agent:hover .nm { color: var(--green); }
.agent .av { width: 32px; height: 32px; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--rule); font: 500 12px var(--mono); color: var(--ink-2); flex-shrink: 0; }
.agent .av.root { background: var(--brass-soft); border-color: var(--brass); color: var(--brass); }
.agent .av.dead { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.agent .nm { font: 500 17px/1.2 var(--serif); }
.agent .nm a:hover { color: var(--green); }
.agent .id { font: 12px var(--mono); color: var(--muted); }
.scorecell { display: flex; align-items: center; gap: 10px; min-width: 110px; }
.scorecell b { font-weight: 500; min-width: 3ch; font-variant-numeric: tabular-nums; }
tr.top .scorecell b { color: var(--green); }
.bar, .lbar { flex: 1; height: 4px; background: var(--rule-2); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width 1.6s var(--ease); }
.bar.dead i { background: var(--red); }
.lbar i { display: block; height: 100%; width: 0; background: var(--green); transition: width 1.6s var(--ease); }
.lbar.root i { background: var(--brass); }
.lbar.dead i { background: var(--red); }
.linecell { display: grid; gap: 6px; min-width: 110px; max-width: 170px; }
.linecell span { font-size: 14px; font-variant-numeric: tabular-nums; }
.linecell em { font-style: normal; color: var(--muted); }
td.rec { font: 13px var(--mono); color: var(--green); letter-spacing: .03em; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
td.rec .r { color: var(--red); } td.rec .o { color: var(--brass); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ink); }
.pager[hidden] { display: none; }

/* chips: a word with a mark, never a pill */
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.chip::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.chip.ok { color: var(--green); } .chip.warn, .chip.root { color: var(--brass); } .chip.bad { color: var(--red); } .chip.neutral { color: var(--ink-2); }

/* filters and search */
.lbtools { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); flex-wrap: wrap; }
.lbtools .seg { display: inline-flex; gap: 18px; }
.lbtools .seg button { font: 500 14px var(--sans); padding: 4px 0; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--muted); cursor: pointer; }
.lbtools .seg button:hover { color: var(--ink); }
.lbtools .seg button.on { color: var(--ink); border-bottom-color: var(--ink); }
input, textarea { font: 15px var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--field-edge); padding: 11px 12px; border-radius: 0; outline: none; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, textarea:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
input:disabled, textarea:disabled { background: var(--paper-2); color: var(--muted); cursor: not-allowed; }
.lbtools input { margin-left: auto; width: 220px; max-width: 100%; padding: 9px 12px; font-size: 14px; }

/* ------------------------------------------------------------------ the grove (night) */
.grove, .map, .seatgrove { position: relative; height: clamp(420px, 58vh, 820px); background: var(--night); overflow: hidden; }
.grove canvas, .map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tip, .grove .tip, .schem .tip { position: absolute; z-index: 2; pointer-events: none; padding: 9px 12px; background: var(--night-2); border: 1px solid var(--night-rule); color: var(--night-muted); font-size: 13px; line-height: 1.5; max-width: 250px; }
.tip b { color: var(--night-ink); font-weight: 500; }
.map { height: 380px; }
.map .legend { position: absolute; left: 14px; bottom: 12px; display: inline-flex; gap: 14px; font-size: 12px; color: var(--night-muted); }
.map .legend i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: middle; }

/* capital bar */
.cap { padding: 16px 0 4px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.capbar { display: flex; height: 8px; overflow: hidden; background: var(--rule-2); margin-bottom: 4px; }
.capbar i { display: block; height: 100%; width: 0; transition: width 1.6s var(--ease); }
.cap .idle { background: var(--ink-2); } .cap .out { background: var(--brass); } .cap .stake { background: var(--red); } .cap .res { background: var(--green); }
.caprow { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 15px; color: var(--ink-2); }
.caprow i { width: 8px; height: 8px; }
.caprow b { font: 400 20px var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }

/* activity */
.ledger { max-height: 560px; overflow: auto; }
.ev { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); align-items: start; font-size: 14px; }
.ev:last-child { border-bottom: 0; }
.ev .k { width: 7px; height: 7px; margin-top: 7px; background: var(--faint); }
.ev.repaid .k, .ev.claimed .k { background: var(--green); }
.ev.borrowed .k { background: var(--ink-2); }
.ev.vouched .k, .ev.root .k { background: var(--brass); }
.ev.defaulted .k, .ev.recourse .k, .ev.slashed .k { background: var(--red); }
.ev .d { color: var(--ink-2); overflow-wrap: anywhere; }
.ev .d b { color: var(--ink); font-weight: 500; }
.ev .t { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ev .t a:hover { color: var(--green); }
.ev .a { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.ev.repaid .a, .ev.claimed .a { color: var(--green); }
.ev.defaulted .a { color: var(--red); }
@keyframes evIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ev.new { animation: evIn 1.4s ease-out both; }

/* ------------------------------------------------------------------ boxes, code, definitions */
.box { border-top: 1px solid var(--ink); min-width: 0; }
.box > header { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.box > header span:first-child { font: italic 400 18px/1.2 var(--serif); color: var(--ink); }
.box > header span:last-child { margin-left: auto; font: 12.5px var(--mono); }
pre, .code { margin: 0; padding: 18px 20px; background: var(--paper-2); border: 0; font: 13px/1.75 var(--mono); color: var(--ink-2); white-space: pre; overflow-x: auto; }
.code b, pre b { color: var(--ink); font-weight: 500; }
.code .cm, pre .cm { color: var(--faint); }
.code .line { display: block; margin-inline: -20px; padding-inline: 20px; transition: background .6s; }
.code .line.hi { background: var(--green-soft); }
.branch, #p-cast { line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.branch a:hover { color: var(--green); }
.prose { font: 400 18px/1.6 var(--serif); color: var(--ink-2); padding: 16px 0; }
.prose b { color: var(--ink); font-weight: 500; }
.prose p + p { margin-top: 12px; }
.defs { display: grid; grid-template-columns: minmax(0, 1fr); }
.def { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.def:last-child { border-bottom: 0; }
.def .t { font: 500 17px/1.3 var(--serif); color: var(--ink); }
.def .d { color: var(--ink-2); }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 16px; font-size: 14px; padding: 16px 0; }
.kv span { color: var(--muted); }
.kv code { overflow-wrap: anywhere; color: var(--ink-2); font-size: 13px; }
.kv a { color: var(--green); }
#p-verify code a { color: var(--green); }
.params { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); padding: 12px 0; border-top: 1px solid var(--rule-2); }
.params b { color: var(--ink-2); font-weight: 500; }
.sig { padding: 10px 0; border-bottom: 1px solid var(--rule-2); font: 13px var(--mono); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.sig .fn { color: var(--ink); } .sig .fn .k { color: var(--green); } .sig .who { color: var(--muted); font-family: var(--sans); }
.ex { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.ex .v { text-align: right; font-variant-numeric: tabular-nums; }
.ex .sub { font-size: 13px; }
.ex.total { border-bottom: 3px double var(--ink); font-weight: 500; }
.ex.total .v { font: 400 24px var(--serif); color: var(--green); }
.stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.stat > div { padding: 18px 20px; border-left: 1px solid var(--rule); }
.stat > div:first-child { border-left: 0; padding-left: 0; }
.stat .v { font: 400 28px/1.1 var(--serif); }
.stat .v.g { color: var(--green); }
.stat .label { margin-top: 6px; }
.inv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.fsm svg { width: 100%; height: auto; display: block; padding: 14px 0; background: var(--paper-2); }
.fsm rect { fill: var(--paper); stroke: var(--ink); }
.fsm text { font: 12px var(--sans); fill: var(--ink-2); }
.fsm text.t { font: 500 15px var(--serif); fill: var(--ink); }
.fsm text.c { fill: var(--muted); font-size: 12px; }
.fsm path { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.fsm path.hot { stroke: var(--brass); stroke-dasharray: 4 8; animation: dash 3s linear infinite; }
.fsm path.bad { stroke: var(--red); stroke-dasharray: 4 8; animation: dash 3s linear infinite; }
.fsm path.ok { stroke: var(--green); stroke-dasharray: 4 8; animation: dash 3s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }

/* ------------------------------------------------------------------ agent page: lookup, wallet, owner */
.lookup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.lookup label { font: italic 400 19px var(--serif); color: var(--ink); }
.lookup input { flex: 1 1 260px; min-width: 0; }
#wallet > header .btn, #own > header .btn { margin-left: auto; }
#wallet > header .btn + .btn, #own > header .btn + .btn { margin-left: 8px; }
.wstat { padding: 10px 0; font-size: 14px; color: var(--ink-2); min-height: 8px; overflow-wrap: anywhere; }
.wstat.ok { color: var(--green); } .wstat.warn { color: var(--red); } .wstat.muted { color: var(--muted); }
.wstat a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.wmine { padding: 0 0 8px; }
.wmine a { text-decoration: underline; text-underline-offset: 3px; }
.acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule); }
.act { padding: 16px 24px 10px 0; border-bottom: 1px solid var(--rule-2); }
.acts > .act:nth-child(2n) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--rule-2); }
.act.alt, .acts > .act.alt { grid-column: 1 / -1; padding-left: 0; padding-right: 0; border-left: 0; }
.act:last-child { border-bottom: 0; }
.act .t { font: 500 17px/1.35 var(--serif); color: var(--ink); margin-bottom: 10px; }
.act .t b { font-weight: 500; }
.act .row, .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.act input { flex: 1 1 130px; min-width: 0; padding: 10px 12px; font-size: 14px; }
.row input.invite { flex: 1 1 260px; min-width: 200px; font: 12.5px var(--mono); }
.act .btn { padding: 10px 14px; font-size: 14px; }
.act .btn.busy { opacity: .6; }
.act .row > .btn:first-of-type:not(:disabled) { background: var(--ink); color: var(--paper); }
.act .row > .btn:first-of-type:not(:disabled):hover { background: var(--green); border-color: var(--green); }
.act .wstat { padding-left: 0; padding-right: 0; }
.row .reqlink { flex-basis: 100%; color: var(--green); font-size: 14px; }
#own .ownact { border: 0; padding-top: 6px; }
.act-cell { width: 1px; white-space: nowrap; }
.act-cell .btn.repay { padding: 6px 10px; font-size: 13px; }
body:not(.owner) .act-cell { display: none; }
.agentcard, .agentcard[hidden], .act[hidden], .row .reqlink[hidden] { display: none; }
.steps.grid2 .code { font-size: 12.5px; }

/* ------------------------------------------------------------------ seats page */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.doors.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door { display: block; position: relative; padding: 26px 28px 30px 0; border-right: 1px solid var(--rule); color: var(--ink); }
.door + .door { padding-left: 28px; }
.door:last-child { border-right: 0; }
.door .n { font: italic 400 26px/1 var(--serif); color: var(--brass); margin-bottom: 12px; }
.door b { display: block; font: 400 28px/1.1 var(--serif); letter-spacing: -.01em; margin-bottom: 10px; }
.door p { color: var(--ink-2); font-size: 15px; max-width: 34em; }
.door .tag { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 1px solid currentColor; }
.door .tag.live { color: var(--green); }
.door:hover b { color: var(--green); }
.steps.three, .steps:not(.grid2) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.steps.three > div { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--rule-2); }
.steps.three > div + div { padding-left: 24px; border-left: 1px solid var(--rule-2); }
.steps.three .n { font: italic 400 22px/1 var(--serif); color: var(--brass); margin-bottom: 10px; }
.steps.three b { display: block; font: 500 19px/1.25 var(--serif); margin-bottom: 6px; }
.steps.three p { color: var(--ink-2); font-size: 15px; }
.reqtext { margin: 10px 0 6px; padding: 14px 16px; background: var(--paper-2); white-space: pre-wrap; font: 13px/1.6 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.request .row .sub { flex-basis: 100%; }
.fallback summary { cursor: pointer; padding: 12px 0; color: var(--ink-2); font-size: 15px; list-style: none; }
.fallback summary::-webkit-details-marker { display: none; }
.fallback summary::before { content: "+ "; color: var(--green); }
.fallback[open] summary::before { content: "− "; }
.fallback > .t { padding-top: 6px; font-size: 16px; }
#rq-out[hidden] { display: none; }
.label.g { color: var(--green); }

/* ------------------------------------------------------------------ contract address */
.ca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k a a" "c c x"; border: 1px solid var(--ink); background: var(--paper-2); max-width: 640px; }
.ca .ca-k { grid-area: k; } .ca code { grid-area: a; } .ca #ca-copy { grid-area: c; } .ca .ca-x { grid-area: x; }
.ca .ca-k, .ca .k { padding: 13px 14px; border-right: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.ca code { min-width: 0; padding: 14px; font: 13px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.ca code::-webkit-scrollbar { display: none; }
.ca button, .ca #ca-copy { border: 0; border-top: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 14px var(--sans); padding: 13px 18px; cursor: pointer; }
.ca button:hover { background: var(--green); }
.ca .ca-x { display: flex; align-items: center; justify-content: center; padding: 13px 18px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.ca .ca-x:hover { color: var(--green); }

/* ------------------------------------------------------------------ landing */
.dateline { border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
.dateline .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 16px; max-width: 1280px; }
.dateline a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.dateline a:hover { color: var(--green); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-block: 56px 64px; align-items: end; }
.kicker { font-size: 15px; color: var(--green); margin: 0 0 22px; }
.hero h1 { font: 400 clamp(46px, 6.2vw, 86px)/.98 var(--serif); letter-spacing: -.022em; margin: 0 0 28px; }
.hero h1 em { font-style: italic; color: var(--green); }
.lede { font: 400 21px/1.5 var(--serif); color: var(--ink-2); max-width: 32em; margin: 0 0 34px; }
.actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.tree { margin: 0; align-self: stretch; display: flex; flex-direction: column; }
.tree canvas { width: 100%; flex: 1; min-height: 520px; display: block; cursor: grab; touch-action: pan-y; }
.tree canvas:active { cursor: grabbing; }
.tree figcaption { display: flex; gap: 14px; align-items: baseline; border-top: 1px solid var(--ink); padding-top: 12px; font: italic 400 16px/1.4 var(--serif); color: var(--muted); }
.tree figcaption b { font: normal 500 14px/1.4 var(--sans); color: var(--green); white-space: nowrap; }
.account { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.account .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.account .cell { padding: 28px 28px 24px; border-left: 1px solid var(--rule); min-width: 0; }
.account .cell:first-child { border-left: 0; padding-left: 0; }
.account .k { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.account .v { font: 400 clamp(38px, 4vw, 54px)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.account .v.good { color: var(--green); }
.account .s { font-size: 14px; color: var(--muted); margin-top: 10px; }
.source { font-size: 13px; color: var(--muted); padding-top: 12px; }
.source code { font-size: 12px; color: var(--ink-2); }
.chapter { padding: 104px 0; }
.chead { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; margin-bottom: 52px; }
.chead .no { font: italic 400 22px/1 var(--serif); color: var(--brass); border-top: 1px solid var(--ink); padding-top: 14px; }
.chead h2 { font: 400 clamp(34px, 4vw, 52px)/1.04 var(--serif); letter-spacing: -.018em; border-top: 1px solid var(--ink); padding-top: 12px; }
.chead p { font: 400 19px/1.55 var(--serif); color: var(--ink-2); margin-top: 18px; max-width: 36em; }
.howto { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; }
.diagram { position: sticky; top: 96px; align-self: start; }
.diagram svg { width: 100%; height: auto; }
.diagram .box { stroke: var(--ink); fill: transparent; transition: fill .5s var(--ease), stroke .5s var(--ease); }
.diagram .t1 { fill: var(--ink); font: 400 22px "EB Garamond", serif; }
.diagram .t2 { fill: var(--muted); font: 400 12px "Schibsted Grotesk", sans-serif; }
.diagram .lb { fill: var(--brass); font: italic 400 16px "EB Garamond", serif; transition: opacity .5s; }
.diagram .ar, .diagram .hd { stroke: var(--ink); transition: stroke .5s, opacity .5s; }
.diagram .g { stroke: var(--green); } .diagram .lb.g { fill: var(--green); stroke: none; }
.diagram .r { stroke: var(--red); } .diagram .lb.r { fill: var(--red); stroke: none; font-size: 14px; }
.diagram .loss { opacity: .28; transition: opacity .5s; }
/* the walk-through: one step at a time, its money moving, its box lit */
.diagram [data-step].on .box { fill: var(--green-soft); stroke: var(--green); }
.diagram [data-step].on .ar { stroke-dasharray: 5 6; animation: dash 1.1s linear infinite; }
.diagram [data-step="4"].on { opacity: 1; }
.howto.at-4 .diagram [data-step="1"] .box { fill: var(--red-soft); stroke: var(--red); }
.howto.playing .stepl { transition: opacity .5s var(--ease); opacity: .5; cursor: pointer; }
.howto.playing .stepl.on { opacity: 1; }
.stepl.on .n { color: var(--green); }
.stepl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-top: 1px solid var(--rule); }
.stepl:last-child { border-bottom: 1px solid var(--rule); }
.stepl .n { font: italic 400 34px/1 var(--serif); color: var(--brass); }
.stepl h3 { font: 500 25px/1.2 var(--serif); margin: 0 0 8px; }
.stepl p { color: var(--ink-2); max-width: 38em; }
.stepl .aside { display: block; margin-top: 10px; font-size: 15px; color: var(--muted); }
.night { background: var(--night); color: var(--night-ink); }
.night .chead .no { color: var(--leaf); border-color: var(--night-ink); }
.night .chead h2 { border-color: var(--night-ink); }
.night .chead p { color: var(--night-muted); }
.night .link { color: var(--night-ink); }
.night .link:hover { color: var(--leaf); }
.after { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 28px; font-size: 15px; }
/* the landing ledger (rows written by app.js into #log) */
.logwrap { min-width: 0; }
.logwrap header { display: grid; grid-template-columns: 110px 100px minmax(0, 1.1fr) minmax(0, 1.4fr) 170px; white-space: nowrap; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--night-ink); font-size: 14px; font-weight: 500; color: var(--night-muted); }
.logwrap header span:last-child { text-align: right; font-weight: 400; }
.log { display: grid; grid-template-columns: minmax(0, 1fr); }
.log .ln { display: grid; grid-template-columns: 110px 100px minmax(0, 1.1fr) minmax(0, 1.4fr) 170px 0; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--night-rule); align-items: baseline; white-space: nowrap; overflow: hidden; font-size: 15px; }
.log .ln > span { overflow: hidden; text-overflow: ellipsis; }
.log .ln .blk { font: 13px var(--mono); color: var(--night-muted); }
.log .ln .kind { font: 400 18px/1.2 var(--serif); color: var(--night-ink); }
.log .ln .amt { text-align: right; font-variant-numeric: tabular-nums; }
.log .ln .tx { display: none; }
.log .ln .who2 { color: var(--night-muted); }
.log .ln.repaid .kind, .log .ln.claimed .kind, .log .ln.repaid .amt { color: var(--leaf); }
.log .ln.vouched .kind, .log .ln.root .kind { color: #d6b36c; }
.log .ln.defaulted .kind, .log .ln.defaulted .amt, .log .ln.slashed .kind { color: #e08a6f; }
@keyframes lnIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.log .ln.new { animation: lnIn 1.4s ease-out both; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.way { padding: 34px 32px 38px 0; border-right: 1px solid var(--rule); }
.way + .way { padding-left: 32px; }
.way:last-child { border-right: 0; }
.way .who { font-size: 14px; color: var(--muted); }
.way h3 { font: 400 32px/1.08 var(--serif); letter-spacing: -.012em; margin: 10px 0 14px; }
.way p { color: var(--ink-2); margin-bottom: 22px; }
.way ul { margin: 0 0 24px; padding: 0; list-style: none; font-size: 15px; }
.way li { padding: 8px 0; border-top: 1px dotted var(--rule); color: var(--ink-2); }
.way li b { font-weight: 500; color: var(--ink); }
.token .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.token .wrap > * { min-width: 0; }
.token h2 { font: 400 clamp(32px, 3.6vw, 46px)/1.06 var(--serif); letter-spacing: -.016em; margin-bottom: 18px; }
.token p { font: 400 19px/1.55 var(--serif); color: var(--ink-2); margin-bottom: 26px; }
.terms2 { border-top: 1px solid var(--ink); }
.terms2 div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.terms2 span { font-size: 14px; color: var(--muted); }
.terms2 b { font: 400 22px/1.3 var(--serif); }

/* protocol page sections */
section.sec { padding-block: 72px; border-top: 1px solid var(--ink); }
section.sec:first-of-type { border-top: 0; }
.sec .head { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: baseline; margin-bottom: 36px; }
.sec .head .no { font: italic 400 22px/1 var(--serif); color: var(--brass); }
.sec .head h2 { font: 400 clamp(30px, 3.4vw, 44px)/1.08 var(--serif); letter-spacing: -.016em; }
.sec .head p { margin-top: 12px; font: 400 18px/1.55 var(--serif); color: var(--ink-2); max-width: 40em; }
.sec pre.code { font-size: 11.5px; line-height: 1.8; padding: 16px 16px; }
.sec .grid2 { gap: 28px; }
.app-main .sec > .wrap { padding-inline: 0; max-width: none; }

/* ------------------------------------------------------------------ colophon */
footer.foot { border-top: 1px solid var(--ink); padding: 42px 0 60px; font-size: 14px; color: var(--muted); }
footer.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; max-width: 1280px; }
footer.foot .brand span { font-size: 22px; color: var(--ink); }
footer.foot p { margin-top: 12px; max-width: 30em; }
footer.foot h4 { margin: 0 0 12px; font: 500 14px var(--sans); color: var(--ink); }
footer.foot a { display: block; padding: 3px 0; }
footer.foot a:hover { color: var(--ink); text-decoration: underline; }
footer.foot #foot-chain { display: block; margin-top: 10px; font-size: 13px; }

/* ------------------------------------------------------------------ skeletons: nothing but the truth */
@keyframes skShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk { color: transparent !important; background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper-3) 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: skShimmer 1.5s linear infinite; display: inline-block; min-width: 3.4em; vertical-align: middle; }
.night .sk { background: linear-gradient(90deg, var(--night-2) 25%, var(--night-rule) 50%, var(--night-2) 75%); background-size: 200% 100%; }
.sk > * { visibility: hidden; }
.sk.wide { min-width: min(100%, 24em); }
tbody.sk-rows td { padding-top: 12px; padding-bottom: 12px; }
tbody.sk-rows .sk { min-width: 100%; height: 1em; }

/* ------------------------------------------------------------------ motion */
.reveal { opacity: 1; transform: none; }
@keyframes arrive { from { opacity: .3; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .arrived { animation: arrive .6s var(--ease) var(--arrival-delay, 0ms) backwards; }
}
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ small screens */
@media (max-width: 1000px) {
  .split, .grid2, .grid3, .howto, .chead, .sec .head, .token .wrap, .board-heading { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .board-heading .aside { text-align: left; }
  .diagram { position: static; max-width: 320px; }
  .ways, .doors, .doors.two, .steps.three, .steps:not(.grid2) { grid-template-columns: minmax(0, 1fr); }
  .way, .way + .way, .door, .door + .door { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .steps.three > div + div { padding-left: 0; border-left: 0; }
  .logwrap header { grid-template-columns: 90px minmax(0, 1fr) auto; }
  .logwrap header span:nth-child(3), .logwrap header span:nth-child(4) { display: none; }
  .log .ln { grid-template-columns: 90px minmax(0, 1fr) 90px 0; }
  .log .ln .who2, .log .ln > span:nth-child(3) { display: none; }
}
/* the header's links, status and buttons outgrow the row below ~1260px: the status keeps its dot and drops its text,
   the links close up, and from 1040px the compact sizes the header takes under 900px */
@media (max-width: 1260px) {
  .status #status-text { display: none; }
  .links { gap: 18px; }
  .links .dd-top { white-space: nowrap; }
}
@media (max-width: 1040px) {
  .links { gap: 14px; font-size: 14px; }
  .x402btn { padding: 8px 10px; }
}
@media (max-width: 900px) {
  .wrap { padding-inline: 20px; }
  .nav .wrap { gap: 16px; height: 60px; }
  .links { gap: 14px; font-size: 14px; }
  .brand span { font-size: 22px; }
  .status #status-text { display: none; }
  .agentbtn { display: none; }
  .x402btn { padding: 8px 10px; }
  .dateline .wrap > span:first-child { display: none; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 40px 52px; }
  .lede { font-size: 19px; }
  .tree canvas { min-height: 380px; }
  .account .wrap, .kpis, .stat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .account .cell, .kpi, .stat > div { padding: 20px 14px 18px; }
  .account .cell:nth-child(odd), .kpi:nth-child(odd), .stat > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .account .cell:nth-child(n+3), .kpi:nth-child(n+3), .stat > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .chapter { padding: 72px 0; }
  .acts { grid-template-columns: minmax(0, 1fr); }
  .act, .acts > .act:nth-child(2n) { padding-left: 0; padding-right: 0; border-left: 0; }
  .def { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .terms2 div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ca { grid-template-areas: "k a a" "c c x"; }
  .ca code { font-size: 12px; padding: 12px; }
  .ca .ca-k { padding: 12px 10px; font-size: 13px; }
  footer.foot .wrap { grid-template-columns: minmax(0, 1fr); }
  .grove { height: 440px; }
  .lbtools input { margin-left: 0; width: 100%; }
}

/* phones: every field gets the full row so its placeholder reads whole; buttons share the row below */
@media (max-width: 620px) {
  .act input, .row input.invite { flex: 1 1 100%; min-width: 0; }
  .act .row > .btn { flex: 1 1 auto; }
}

/* display settings: a gear in the top bar, one switch behind it */
.prefs { position: relative; display: flex; }
.prefs-btn { width: 34px; height: 34px; display: grid; place-items: center; background: transparent; border: 1px solid var(--rule); color: var(--ink-2); cursor: pointer; padding: 0; }
.prefs-btn:hover, .prefs-btn[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
.prefs-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.prefs-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; min-width: 210px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px var(--shade); padding: 6px 0; }
.prefs-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; font: 500 14px var(--sans); color: var(--ink); cursor: pointer; }
.switch { position: relative; width: 38px; height: 22px; border-radius: 11px; border: 1px solid var(--field-edge); background: var(--paper-3); padding: 0; cursor: pointer; transition: background .2s, border-color .2s; flex: none; }
.switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2); transition: transform .2s var(--ease), background .2s; }
.switch[aria-checked="true"] { background: var(--green); border-color: var(--green); }
.switch[aria-checked="true"] i { transform: translateX(16px); background: var(--paper); }
.switch:focus-visible, .prefs-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 560px) {
  .links a[href*="github.com"] { display: none; }
  .nav .wrap { gap: 12px; }
  .links { gap: 12px; }
  /* the section links scroll sideways in their own strip rather than push the settings gear off the screen */
  .nav .links { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
    /* soft edges, so a link cut by the strip reads as "scroll for more", not as a clipped word */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); padding-inline: 6px; }
  .nav .links::-webkit-scrollbar { display: none; }
  .nav .links a { flex: none; }
  .nav .right { gap: 10px; }
  .x402btn { padding: 7px 9px; font-size: 13px; }
  .x402btn .mk { display: none; }
  .prefs-btn { width: 30px; height: 30px; }
}

/* the ownership proof on /invite?prove=… */
body.proving .doors, body.proving #request, body.proving #usdg { display: none; }
.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 22px 0 8px; align-items: start; }
.pv-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule-2); }
.pv-row .n { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); font: italic 400 18px/1 var(--serif); color: var(--ink); }
.pv-row.done .n { background: var(--green); border-color: var(--green); color: var(--paper); font-style: normal; }
.pv-row.done .n::after { content: "✓"; font: 500 15px var(--sans); } .pv-row.done .n { font-size: 0; }
.pv-row b { font: 500 18px/1.3 var(--serif); } .pv-row p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.pv-msg { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.7; }
.pv-done { border-top: 0; padding-top: 6px; }
.prove.dead .pv-grid { display: none; }
.prove.dead .sub { display: none; } .prove.dead .pv-done .sub { display: inline; }
@media (max-width: 760px) { .pv-grid { grid-template-columns: minmax(0, 1fr); } .pv-row { grid-template-columns: 30px minmax(0, 1fr); } .pv-row .btn { grid-column: 1 / -1; } }

/* the 3D grove: corner controls, a pinned record card, clickable table rows */
.grove-ctl { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; flex-direction: column; border: 1px solid var(--night-rule); background: var(--night-2); }
.grove-ctl button { width: 36px; height: 36px; border: 0; background: transparent; color: var(--night-ink); font: 400 20px/1 var(--sans); cursor: pointer; }
.grove-ctl button + button { border-top: 1px solid var(--night-rule); }
.grove-ctl button:hover { background: var(--night); color: var(--leaf); }
.grove-ctl button:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; }
.grove .tip.pinned { pointer-events: auto; padding: 12px 34px 12px 14px; }
.grove .tip .go { display: inline-block; margin-top: 8px; color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; }
.grove .tip .x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--night-muted); font-size: 18px; cursor: pointer; }
.grove .tip .x:hover { color: var(--night-ink); }
.grove canvas.three { cursor: grab; } .grove canvas.three:active { cursor: grabbing; }
#lb-body tr[data-id] { cursor: pointer; }

/* use a line (web/use.html): the small notes under a box */
.sec .note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sec .note a { text-decoration: underline; text-underline-offset: 3px; }

/* participate: two plain cards, facts with hints, seat terms as four tiles, short answers below */
.pt-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 22px 0 8px; }
.pt-card { border-top: 1px solid var(--rule); padding-top: 18px; min-width: 0; display: flex; flex-direction: column; }
.pt-kicker { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.pt-card h3 { font: 400 30px/1.1 var(--serif); letter-spacing: -.01em; }
.pt-lede { margin: 8px 0 14px; font: 400 18px/1.45 var(--serif); color: var(--ink-2); max-width: 30em; }
.pt-facts { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--rule-2); }
.pt-facts li { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.pt-facts li span { color: var(--muted); }
.pt-facts li b { font-weight: 500; color: var(--ink); }
.pt-tip { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; color: var(--muted); font: 500 12px/1 var(--sans); cursor: help; padding: 0; }
.pt-tip:hover, .pt-tip:focus-visible { color: var(--ink); border-color: var(--ink); }
.pt-tip::after { content: attr(data-tip); position: absolute; right: -6px; bottom: calc(100% + 10px); box-sizing: border-box; width: min(300px, calc(100vw - 32px)); padding: 12px 14px; background: var(--ink); color: var(--paper); font: 400 14px/1.45 var(--sans); text-align: left; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); z-index: 20; box-shadow: 0 10px 30px var(--shade); }
.pt-tip:hover::after, .pt-tip:focus::after, .pt-tip.open::after { opacity: 1; transform: none; }
.pt-tip.shut::after { opacity: 0 !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-card .row { margin-top: auto; }
.pt-card input { flex: 1 1 160px; min-width: 0; padding: 12px 14px; font-size: 15px; }
.pt-card .btn.busy, .pt-feerow .btn.busy { opacity: .6; }
.pt-card .wstat { padding-left: 0; padding-right: 0; }
.pt-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); margin: 2px 0 10px; }
.pt-kv > div { background: var(--paper); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.pt-kv span { font-size: 13px; color: var(--muted); }
.pt-kv b { font: 500 19px/1.2 var(--serif); color: var(--ink); }
.pt-kv i { font-style: normal; font-size: 13px; color: var(--muted); }
.pt-seats { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.pt-meter { display: inline-block; width: 90px; height: 6px; background: var(--rule-2); position: relative; }
.pt-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); }
#pt-terms { padding-top: 0; }
.pt-steps { margin: 6px 0 16px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.pt-steps li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 15px; color: var(--ink-2); }
.pt-steps li::before { content: counter(s); width: 24px; height: 24px; border: 1px solid var(--green); color: var(--green); border-radius: 50%; display: grid; place-items: center; font: 500 12.5px/1 var(--sans); }
.pt-steps b { font-weight: 500; color: var(--ink); }
.pt-more { display: flex; gap: 18px; margin-top: 10px; }
.pt-link { background: none; border: 0; padding: 0; color: var(--muted); font: 400 14px var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.pt-link:hover { color: var(--ink); }
.pt-link:disabled { opacity: .5; cursor: not-allowed; }
.pt-feerow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 16px 0; border-top: 1px solid var(--rule); margin-top: 18px; }
.pt-feelabel { font: 400 19px/1.2 var(--serif); }
.pt-feerow .wstat { padding: 0; }
.pt-faq details { border-bottom: 1px solid var(--rule-2); }
.pt-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font: 400 19px/1.3 var(--serif); display: flex; justify-content: space-between; gap: 16px; }
.pt-faq summary::-webkit-details-marker { display: none; }
.pt-faq summary::after { content: "+"; color: var(--muted); font: 400 20px/1 var(--sans); transition: transform .2s var(--ease); }
.pt-faq details[open] summary::after { transform: rotate(45deg); }
.pt-faq details p { margin: 0 0 18px; max-width: 46em; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 860px) {
  .pt-two { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pt-facts li { grid-template-columns: minmax(0, 1fr) auto; }
  .pt-facts li span { grid-column: 1 / -1; font-size: 13px; margin-bottom: -6px; }
  .pt-tip::after { right: 0; }
  .pt-card .row > .btn { flex: 1 1 auto; }
}

/* seats: a "best for" line on each door; the bond hint sits in the panel header */
.door .best { display: block; margin-top: 10px; font-size: 13.5px; color: var(--green); }
.panel > header .pt-tip { margin-left: 4px; }
.panel > p.pad { margin: 0; padding: 12px 0 16px; }
.v2why { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }
#p-v2 table.score-table { min-width: 0; }
#p-v2 td.num { white-space: nowrap; vertical-align: top; }

/* footer: the X account, with its mark */
footer.foot a.xlink { display: flex; align-items: center; gap: 8px; }
footer.foot a.xlink svg { width: 14px; height: 14px; flex: none; }

/* the dev log (web/updates.html, web/devlog.js): releases by day, each with a "details" list */
.dl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--ink); }
.dl-bar[hidden], .dl-day[hidden] { display: none; }
.dl-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.dl-filters button, .dl-all { font: 500 12.5px/1 var(--mono); letter-spacing: .04em; padding: 7px 10px; background: transparent; border: 1px solid var(--rule); color: var(--muted); cursor: pointer; }
.dl-filters button:hover, .dl-all:hover { border-color: var(--ink); color: var(--ink); }
.dl-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dl-log { border-top: 1px solid var(--ink); }
.dl-bar:not([hidden]) + .dl-log { border-top-color: var(--rule); }
.dl-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 28px; border-bottom: 1px solid var(--rule); }
.dl-day > time { position: relative; padding: 20px 0 0 18px; font: 500 14px/1.4 var(--mono); color: var(--ink-2); }
.dl-day > time::before { content: ""; position: absolute; left: 0; top: 25px; width: 8px; height: 8px; background: var(--green); }
.dl-item { padding: 18px 0 16px; border-bottom: 1px solid var(--rule-2); }
.dl-entries > .dl-item:last-child { border-bottom: 0; }
.dl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dl-tag { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--green); border: 1px solid var(--rule); padding: 4px 7px; }
.dl-ver { font: 400 12.5px/1 var(--mono); color: var(--ink-2); background: var(--paper-2); padding: 5px 7px; }
.dl-item h3 { font: 400 23px/1.25 var(--serif); letter-spacing: -.005em; margin: 9px 0 6px; }
.dl-item p { margin: 0; max-width: 46em; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.dl-item p code { font-size: .88em; background: var(--paper-2); padding: 1px 4px; overflow-wrap: anywhere; }
.dl-list code { font-size: .88em; background: var(--paper-3); padding: 1px 4px; overflow-wrap: anywhere; }
.dl-item details { margin-top: 10px; }
.dl-item summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font: 500 13px/1 var(--mono); color: var(--green); padding: 6px 0; }
.dl-item summary::-webkit-details-marker { display: none; }
.dl-item summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; font-size: 13px; line-height: 1; }
.dl-item details[open] > summary::before { content: "\2212"; }
.dl-item summary:hover { color: var(--ink); }
.dl-list { list-style: none; margin: 8px 0 4px; padding: 12px 14px; border-left: 2px solid var(--green); background: var(--paper-2); display: grid; gap: 9px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 52em; }
.dl-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.dl-k { font: 500 10.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 1px 0; border: 1px solid; }
.dl-k.new { color: var(--green); } .dl-k.fix { color: var(--brass); } .dl-k.chg { color: var(--ink-2); } .dl-k.sec { color: var(--red); } .dl-k.ref { color: var(--muted); }
.dl-list a.dl-a { font-family: var(--mono); font-size: .92em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.dl-list a.dl-a:hover { color: var(--green); }
.dl-empty { padding: 24px 0; color: var(--muted); }
@media (max-width: 720px) {
  .dl-day { grid-template-columns: minmax(0, 1fr); }
  .dl-day > time { padding: 18px 0 0 18px; }
  .dl-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dl-k { justify-self: start; padding: 1px 6px; }
}

/* the Protocol menu in the top bar: Protocol and its dev log, on hover or keyboard focus (web/nav.js: tap, Esc) */
.dd { position: relative; display: inline-flex; }
.dd-top::after { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 26px; } /* the pointer's path to the menu keeps it open */
.dd-caret { display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s var(--ease); }
.dd:hover .dd-caret, .dd:focus-within .dd-caret, .dd.open .dd-caret { transform: translateY(0) rotate(225deg); }
.dd-menu { position: absolute; top: calc(100% + 18px); left: -18px; z-index: 40; min-width: 270px; padding: 6px 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px var(--shade); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd.shut .dd-menu { opacity: 0; visibility: hidden; }
.links .dd-menu a, .links .dd-menu a.on { display: block; padding: 11px 16px 12px; border-bottom: 0; color: var(--ink); white-space: nowrap; }
.links .dd-menu a + a { border-top: 1px solid var(--rule-2); }
.dd-menu a b { display: block; font: 500 15px/1.3 var(--sans); }
.dd-menu a span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.links .dd-menu a:hover, .links .dd-menu a:focus-visible { background: var(--paper-2); }
.dd-menu a[aria-current="page"] b { color: var(--green); }
.dd-menu a[aria-current="page"] b::after { content: " ·  you are here"; font: 400 12px var(--mono); color: var(--muted); }
@media (max-width: 560px) {
  /* phones: the section links scroll in one strip, so Protocol and Dev log sit in it side by side */
  .dd, .links .dd-menu { display: contents; visibility: visible; }
  .dd-top { display: none; }
  .links .dd-menu a, .links .dd-menu a + a, .links .dd-menu a.on { display: inline; padding: 4px 0; border: 0; border-bottom: 1px solid transparent; color: var(--ink-2); background: none; }
  .links .dd-menu a.on { color: var(--ink); border-bottom-color: var(--ink); }
  .dd-menu a b { display: inline; font: inherit; color: inherit; }
  .dd-menu a[aria-current="page"] b { color: inherit; }
  .dd-menu a b::after, .dd-menu a[aria-current="page"] b::after { content: none; }
  .dd-menu a span { display: none; }
}


/* /agent: "your agent" (web/agent.html #launch) — a hero with how a line grows, the 4-step path, three action cards */
.ag-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; padding: 18px 0 30px; }
.ag-hero h1 { font: 400 clamp(38px, 5vw, 62px)/1.02 var(--serif); letter-spacing: -.02em; }
.ag-hero h1 em { font-style: italic; color: var(--green); }
.ag-hero p { margin-top: 16px; max-width: 34em; font: 400 19px/1.55 var(--serif); color: var(--ink-2); }
.ag-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.ag-level { border: 1px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--green-soft); padding: 20px 22px; }
.ag-level-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-2); }
.ag-level-top b { display: block; font: 500 16px var(--mono); }
.ag-level-top span { font-size: 13px; color: var(--muted); }
.ag-bot { width: 34px; height: 34px; background: var(--ink); display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; }
.ag-bot i { width: 6px; height: 6px; background: var(--green-2); }
@media (prefers-reduced-motion: no-preference) { .ag-bot i { animation: ag-blink 4.5s infinite; } }
@keyframes ag-blink { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.15); } }
.ag-ladder { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.ag-ladder li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14.5px; color: var(--ink-2); }
.ag-amt { font: 500 17px/1 var(--mono); text-align: center; padding: 9px 0; border: 1px solid var(--rule); color: var(--muted); }
.ag-ladder li.on .ag-amt { background: var(--green); border-color: var(--green); color: var(--paper); }
.ag-scorebar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font: 400 12.5px var(--mono); color: var(--muted); padding-top: 12px; border-top: 1px solid var(--rule-2); }
.ag-bar { height: 8px; background: var(--rule-2); position: relative; overflow: hidden; }
.ag-bar i { position: absolute; inset: 0 auto 0 0; width: 34%; background: linear-gradient(90deg, var(--green), var(--green-2)); }
@media (prefers-reduced-motion: no-preference) { .ag-bar i { animation: ag-grow 6s var(--ease) infinite; } }
@keyframes ag-grow { 0% { width: 4%; } 70%, 100% { width: 62%; } }
.ag-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

.ag-journey { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); }
.ag-journey li + li { border-left: 1px solid var(--rule); }
.ag-journey a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 14px 16px; color: var(--ink); height: 100%; box-sizing: border-box; }
.ag-journey a:hover { background: var(--paper-2); }
.ag-journey .ag-n { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--green); color: var(--green); display: grid; place-items: center; font: 500 13px/1 var(--sans); }
.ag-journey b { font-weight: 500; font-size: 15.5px; }
.ag-journey a > span:last-child { font-size: 13px; color: var(--muted); }
.ag-journey li.done .ag-n { background: var(--green); color: var(--paper); font-size: 0; }
.ag-journey li.done .ag-n::after { content: "✓"; font-size: 13px; }
.ag-journey li.next { background: var(--green-soft); }
.ag-journey li.next b::after { content: " · next"; font: 400 12px var(--mono); color: var(--green); }

.ag-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 22px 0 8px; }
.ag-three .pt-facts li { grid-template-columns: 96px minmax(0, 1fr) auto; }
.ag-three .row { margin-top: 10px; flex-wrap: wrap; }
.ag-three .pt-card .row:first-of-type { margin-top: auto; }
.ag-three input { flex: 1 1 90px; }
.ag-sub { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }
.ag-adv { margin: 18px 0 4px; border-top: 1px solid var(--rule-2); padding-top: 12px; }
.ag-adv summary { cursor: pointer; font-size: 14.5px; color: var(--ink-2); }
.ag-adv summary:hover { color: var(--ink); }

.ag-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 20px 0 6px; }
.ag-use { border-top: 1px solid var(--rule); padding-top: 16px; }
.ag-ico { width: 38px; height: 38px; border: 1px solid var(--ink); display: grid; place-items: center; font: 500 18px var(--mono); margin-bottom: 12px; }
.ag-use h3 { font: 400 23px/1.2 var(--serif); margin: 0 0 6px; }
.ag-use p { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.ag-copy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; background: var(--paper-2); font-size: 14px; color: var(--muted); }
.ag-copy code { flex: 1 1 320px; min-width: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  .ag-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ag-level { max-width: 460px; }
  .ag-three, .ag-uses { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 720px) {
  .ag-journey { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ag-journey li:nth-child(3) { border-left: 0; }
  .ag-journey li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* /agent lookup: a list of agents under the field (web/agent.js) */
.ag-combo { position: relative; flex: 1 1 260px; min-width: 0; display: flex; }
.ag-combo input { flex: 1 1 auto; min-width: 0; }
.ag-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 25; list-style: none; margin: 0; padding: 4px 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px var(--shade); max-height: 340px; overflow-y: auto; }
.ag-suggest li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; cursor: pointer; font-size: 15px; }
.ag-suggest li + li { border-top: 1px solid var(--rule-2); }
.ag-suggest li[aria-selected="true"], .ag-suggest li[data-id]:hover { background: var(--paper-2); }
.ag-suggest .lk-name i { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.ag-suggest .lk-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ag-suggest .lk-none { cursor: default; color: var(--muted); font-size: 14px; }

/* /start and /stocks: the Priors account pages (web/start.js, web/stocks.js) */
.rigbar { padding: 12px 16px; background: var(--brass-soft); border-left: 3px solid var(--brass); font-size: 14.5px; color: var(--ink-2); }
.st-step > header h2 { display: flex; align-items: baseline; gap: 12px; }
.st-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ink); font: italic 400 18px/1 var(--serif); transform: translateY(-3px); }
.st-step.done .st-n { background: var(--green); border-color: var(--green); color: var(--paper); }
.st-step[aria-disabled="true"] .acts, .st-step[aria-disabled="true"] > .act { opacity: .55; }
.st-p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); max-width: 44em; }
.st-addr { flex: 1 1 320px; min-width: 0; padding: 10px 12px; background: var(--paper-2); font: 13px var(--mono); color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.st-key { letter-spacing: .02em; }
.st-own { margin: 4px 0 10px; font-size: 14px; }
.st-own summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.st-own .row { margin-top: 8px; }
.st-own .row input { font: 13px var(--mono); }
.st-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); counter-reset: st; }
.st-steps li { counter-increment: st; padding: 12px 16px 12px 0; font-size: 14.5px; color: var(--muted); display: flex; gap: 10px; align-items: baseline; }
.st-steps li + li { padding-left: 16px; border-left: 1px solid var(--rule-2); }
.st-steps li::before { content: counter(st); font: italic 400 17px/1 var(--serif); color: var(--faint); }
.st-steps li.on { color: var(--ink); } .st-steps li.on::before { content: "…"; color: var(--brass); font-style: normal; }
.st-steps li.done { color: var(--green); } .st-steps li.done::before { content: "✓"; color: var(--green); font: 500 14px var(--sans); }
.st-steps li.fail { color: var(--red); } .st-steps li.fail::before { content: "×"; color: var(--red); font: 500 15px var(--sans); }
.st-done { border-top: 1px solid var(--rule); padding-top: 18px; }
.st-done .t { font-size: 22px; }
.st-done code { font: 13px var(--mono); overflow-wrap: anywhere; }
@media (max-width: 760px) { .st-steps { grid-template-columns: minmax(0, 1fr); } .st-steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-2); } }
.sk-check { display: flex; gap: 12px; align-items: flex-start; padding: 0 0 18px; font-size: 15px; color: var(--ink); cursor: pointer; max-width: 52em; }
.sk-check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--green); flex: none; }
.sk-elig { border-top-color: var(--brass); }
.sk-table { min-width: 640px; }
.sk-tok { display: flex; align-items: center; gap: 10px; }
.sk-tok img { width: 24px; height: 24px; border-radius: 50%; background: var(--paper-2); flex: none; }
.sk-tok b { font-weight: 500; min-width: 3.4em; }
.sk-tok .sub { font-size: 13.5px; white-space: normal; }
.sk-radio { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--ink-2); margin-right: 14px; cursor: pointer; }
.sk-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule-2); }
.sk-figs > div { padding: 16px 16px 16px 0; display: grid; gap: 6px; }
.sk-figs > div + div { padding-left: 16px; border-left: 1px solid var(--rule-2); }
.sk-figs b { font: 400 24px/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.stocks select, .start select { font: 14px var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--field-edge); padding: 10px 12px; border-radius: 0; }
@media (max-width: 760px) { .sk-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-figs > div:nth-child(3) { padding-left: 0; border-left: 0; } }
.sk-act { width: 1px; white-space: nowrap; text-align: right; }

/* ---------------------------------------------------------------------------------------------------------------
   The app look for /start and /stocks (main.acct): rounded cards, pill buttons, big numbers, token rows with logos.
   Scoped to .acct so the rest of the site keeps its editorial style. */
:root { --card: #fbf8f1; --card-2: #f5f0e5; --card-edge: #e3dccd; --glow: rgba(47, 107, 79, .14); }
:root[data-theme="dark"] { --card: #1c1b15; --card-2: #23221b; --card-edge: #34322a; --glow: rgba(127, 191, 152, .16); }
.acct { max-width: 1120px; padding-block: 28px 80px; gap: 18px; }
.acct .board-heading { padding: 10px 0 4px; }
.acct .board-heading h1 { font-size: clamp(36px, 5.2vw, 60px); }
.acct .board-heading p { font-size: 18px; margin-top: 12px; }
.acct .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.acct .chips li { padding: 7px 13px; border-radius: 999px; background: var(--green-soft); color: var(--green); font: 500 13.5px/1 var(--sans); }
.acct .chips li::before { content: "✓ "; }

.acct .panel { background: var(--card); border: 1px solid var(--card-edge); border-radius: 22px; padding: 6px 22px 16px; box-shadow: 0 1px 0 rgba(27, 26, 22, .02), 0 10px 30px -18px rgba(27, 26, 22, .25); }
.acct .panel > header { border-bottom: 0; padding: 16px 0 6px; }
.acct .panel > header h2 { font-size: 24px; }
.acct .panel > header .label { font-size: 13.5px; }
.acct .rigbar { border-radius: 14px; border-left-width: 0; background: var(--brass-soft); }
.acct .acts { border-top: 0; gap: 12px; margin-top: 6px; }
.acct .act, .acct .acts > .act:nth-child(2n) { padding: 0; border: 0; }
.acct .acts > .act, .acct .acts > .act:nth-child(2n) { background: var(--card-2); border-radius: 16px; padding: 16px 16px 8px; }
.acct .act .t { font: 500 18px/1.3 var(--serif); margin-bottom: 6px; }
.acct .act.alt { padding-top: 14px; }
.acct .st-p { font-size: 14.5px; }

.acct .btn { border-radius: 999px; padding: 13px 22px; font: 600 15px/1 var(--sans); border-color: var(--ink); }
.acct .btn.sm { padding: 9px 15px; font-size: 13.5px; font-weight: 500; }
.acct .btn.primary { background: var(--green); border-color: var(--green); color: #fbf8f1; box-shadow: 0 8px 20px -10px var(--green); }
.acct .btn.primary:hover { background: var(--green-2); border-color: var(--green-2); }
.acct .btn.primary:disabled { background: var(--paper-3); border-color: var(--paper-3); color: var(--muted); box-shadow: none; }
.acct .act .row > .btn:first-of-type:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.acct .act .row > .btn.primary:first-of-type:not(:disabled) { background: var(--green); border-color: var(--green); color: #fbf8f1; }
/* the dark theme's green is light, so what sits on it turns dark (near-white on it read at about 2:1) */
:root[data-theme="dark"] .acct .btn.primary:not(:disabled), :root[data-theme="dark"] .acct .act .row > .btn.primary:first-of-type:not(:disabled),
:root[data-theme="dark"] .acct .sk-table .btn.sm:not(:disabled), :root[data-theme="dark"] .acct .st-step.done .st-n { color: var(--paper); }
.acct .btn.big { width: 100%; padding: 17px 22px; font-size: 16.5px; }
/* busy: the label stays and a small spinner turns after it (was: a blank grey pill while waiting) */
.acct .btn.busy, .acct .act .btn.busy { opacity: 1; color: var(--ink-2); background: var(--paper-2); border-color: var(--rule); cursor: progress; }
.acct .btn.busy::after { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: app-spin .8s linear infinite; }
@keyframes app-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .acct .btn.busy::after { animation: none; } }
.acct input:not([type="radio"]):not([type="checkbox"]), .acct select, .stocks.acct select { border-radius: 14px; font-size: 16px; padding: 13px 14px; background: var(--field); border: 1px solid var(--card-edge); }
.acct input:not([type="radio"]):not([type="checkbox"]):focus, .acct select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); }
.acct .st-addr { border-radius: 12px; background: var(--card-2); border: 1px dashed var(--card-edge); font-size: 12.5px; }
.acct .wstat { font-size: 14.5px; }
.acct .wstat.ok { font-weight: 500; }

/* progress: three segments over the start steps */
.st-prog { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: sp; }
.st-prog li { counter-increment: sp; font: 500 13.5px/1.2 var(--sans); color: var(--muted); padding-top: 12px; border-top: 4px solid var(--paper-3); border-radius: 2px; }
.st-prog li::before { content: counter(sp) " · "; color: var(--faint); }
.st-prog li.on { color: var(--ink); border-top-color: var(--brass); }
.st-prog li.done { color: var(--green); border-top-color: var(--green); }
.st-prog li.done::before { content: "✓ "; color: var(--green); }

.acct .st-step[aria-disabled="true"] { opacity: .6; }
.acct .st-step[aria-disabled="true"] .acts, .acct .st-step[aria-disabled="true"] > .act { opacity: 1; pointer-events: none; }
.acct .st-n { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--paper-3); font: 600 15px/1 var(--sans); font-style: normal; transform: translateY(-2px); }
.acct .st-step.done .st-n { background: var(--green); color: #fbf8f1; font-size: 0; }
.acct .st-step.done .st-n::before { content: "✓"; font-size: 15px; }
.acct #st-1.done { padding-bottom: 8px; }
.acct #st-bal { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green); font: 600 13.5px/1.2 var(--sans); }
.acct .st-steps { border-top: 0; gap: 8px; margin-top: 14px; }
.acct .st-steps li, .acct .st-steps li + li { border: 0; padding: 12px 14px; border-radius: 14px; background: var(--card-2); }
.acct #st-go-row input { flex: 1 1 240px; }
.acct .st-done { border-top: 0; margin-top: 14px; padding: 22px; border-radius: 18px; background: linear-gradient(160deg, var(--green-soft), transparent 70%), var(--card-2); }
.acct .st-done .t { font: 400 30px/1.2 var(--serif); }
.acct .st-done .t b { font: 500 44px/1 var(--serif); color: var(--green); }
.acct .st-done #st-key-box { margin: 16px 0 10px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-edge); }

/* Stocks: eligibility first, then the account/line/deposit column beside the token list */
.acct .sk-elig { border-color: var(--brass); box-shadow: inset 4px 0 0 var(--brass); }
.acct .sk-elig .pad { padding: 4px 0 10px; font-size: 15px; }
.acct .sk-check { padding: 12px 14px; border-radius: 14px; background: var(--card-2); margin-bottom: 4px; }
.sk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; grid-template-areas: "list side"; gap: 18px; align-items: start; }
.sk-grid > .sk-side { grid-area: side; display: grid; gap: 18px; }
.sk-grid > #sk-list { grid-area: list; }
.sk-grid.solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list"; }
.sk-grid.solo > .sk-side { display: none; }
.acct .sk-table tr[hidden] { display: none; }

.acct #sk-pos { background: linear-gradient(165deg, var(--green-soft), transparent 60%), var(--card); border-color: var(--green); }
.acct .sk-hero { padding: 6px 0 12px; }
.acct .sk-hero .label { display: block; margin-bottom: 4px; }
.acct .sk-hero b { font: 500 52px/1 var(--serif); color: var(--green); font-variant-numeric: lining-nums tabular-nums; }
.acct .sk-figs { border-bottom: 0; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acct .sk-figs > div, .acct .sk-figs > div + div { padding: 10px 12px; border: 0; border-radius: 14px; background: var(--card-2); }
.acct .sk-figs b { font-size: 19px; }
.acct #sk-pos .act { padding-top: 14px; }
.acct #sk-borrow-form input { flex: 1 1 120px; }
.acct #sk-key-box { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); }
.acct #sk-dep { border-color: var(--green); box-shadow: 0 0 0 4px var(--glow), 0 10px 30px -18px rgba(27, 26, 22, .25); }
.acct #sk-dep .acts { grid-template-columns: minmax(0, 1fr); }
.acct #sk-amt { font: 500 22px/1.2 var(--sans); flex: 1 1 0; }
.acct #sk-dep-form { flex-wrap: nowrap; }
.acct #sk-dep-form #sk-max, .acct #sk-dep-form #sk-max:not(:disabled) { background: var(--green-soft); border-color: transparent; color: var(--green); flex: none; }
.acct #sk-to, .acct #st-key-addr, .acct .st-done code { overflow-wrap: anywhere; word-break: break-all; }
.acct #st-out, .acct .act .row > #st-out:first-of-type:not(:disabled) { background: transparent; color: var(--ink-2); border-color: var(--rule); }
.acct #st-1.done > header .sub { display: none; }
.acct #sk-quote.ok { font-size: 16px; }
.acct .sk-radio input, .acct .act .sk-radio input { accent-color: var(--green); margin: 0; flex: none; width: 16px; height: 16px; padding: 0; }
.acct .sk-radio { padding: 9px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--card-edge); margin: 0 6px 6px 0; }

/* the token list as rows with logos; on a phone each row wraps instead of widening the page */
.acct .sk-search { width: 100%; margin: 6px 0 4px; }
.acct .tablewrap { overflow: visible; }
.acct table.sk-table { min-width: 0; }
.acct .sk-table th { border-bottom: 1px solid var(--rule-2); }
.acct .sk-table td { border-bottom: 1px solid var(--rule-2); padding-block: 12px; }
.acct .sk-table tr:last-child td { border-bottom: 0; }
.acct .sk-table tbody tr:hover td { background: var(--hover); }
.sk-logo { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--paper-3); overflow: hidden; display: grid; place-items: center; }
.sk-logo::before { content: attr(data-l); font: 600 12px/1 var(--sans); color: var(--ink-2); letter-spacing: .02em; }
.sk-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.sk-logo img.in { background: #fff; }
.sk-logo.dk img.in { background: #1b1a16; }
.acct .sk-tok { gap: 12px; }
/* desktop: the token cell stays a table cell (as a flex box its bottom rule drifted from the row's) */
@media (min-width: 641px) {
  /* fixed columns: the numbers keep their width and the name takes the rest, cut with an ellipsis */
  .acct table.sk-table { table-layout: fixed; }
  .acct .sk-table th:nth-child(2) { width: 96px; } .acct .sk-table th:nth-child(3) { width: 80px; }
  .acct .sk-table th:nth-child(4) { width: 78px; } .acct .sk-table th:nth-child(5) { width: 70px; } .acct .sk-table th.sk-act { width: 94px; }
  .acct .sk-table td.sk-tok { display: table-cell; overflow: hidden; }
  .acct .sk-table td.sk-tok > .sk-logo { display: inline-grid; vertical-align: middle; margin-right: 12px; }
  .acct .sk-table td.sk-tok > .nm { display: inline-grid; vertical-align: middle; max-width: calc(100% - 50px); }
}
.acct .sk-tok b { font: 600 15.5px/1.2 var(--sans); min-width: 0; display: block; }
.acct .sk-tok .nm { display: grid; min-width: 0; }
.acct .sk-tok .sub { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct .sk-table td.num:nth-child(2) { font: 600 15.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
/* a lending hold, under the price age: wraps inside its column instead of running over the next ones */
.acct .sk-table td.num .sub { display: block; white-space: normal; font-size: 12px; line-height: 1.3; margin-top: 2px; }
.acct .sk-table .btn.sm { padding: 8px 14px; }
.acct .sk-table .btn.sm:not(:disabled) { background: var(--green); border-color: var(--green); color: #fbf8f1; }

.acct .pt-faq { padding-bottom: 6px; }
.acct .pt-faq details:last-child { border-bottom: 0; }

@media (max-width: 980px) {
  .sk-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "list"; }
}
@media (max-width: 640px) {
  .acct { padding-block: 18px 64px; gap: 14px; }
  .acct .panel { padding: 4px 16px 12px; border-radius: 18px; }
  .acct .board-heading p { font-size: 16.5px; }
  .acct .acts { grid-template-columns: minmax(0, 1fr); }
  .acct .sk-hero b { font-size: 44px; }
  .acct .sk-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acct .sk-figs b { font-size: 16px; }
  .acct .st-prog li { font-size: 12.5px; }
  .acct #st-go-row .btn, .acct #sk-borrow-form .btn { flex: 1 1 100%; }
  .acct #sk-borrow-form input { flex: 1 1 0; min-width: 0; }
  .acct #sk-borrow-form select { flex: none; }
  /* each token row: logo and name, price on the right; the rest on a second line */
  .acct .sk-table thead { display: none; }
  .acct .sk-table, .acct .sk-table tbody { display: block; }
  .acct .sk-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
  .acct .sk-table tr:last-child { border-bottom: 0; }
  /* the line break before "the rest": without it a row with empty balance cells fits on one line and squeezes the name away */
  .acct .sk-table tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .acct .sk-table td { display: block; border: 0; padding: 0; white-space: nowrap; }
  .acct .sk-table td.sk-tok { flex: 1 1 0; min-width: 0; display: flex; }
  .acct .sk-table td.sk-tok .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .acct .sk-table td:empty { display: none; }
  .acct .sk-table td:nth-child(2) { margin-left: auto; }
  .acct .sk-table td:nth-child(n+3):not(.sk-act) { order: 3; font-size: 12.5px; color: var(--muted); padding-left: 46px; }
  .acct .sk-table td:nth-child(n+4):not(.sk-act) { padding-left: 0; }
  .acct .sk-table td[data-h]::after { content: " " attr(data-h); }
  .acct .sk-table td.sk-act { order: 4; margin-left: auto; width: auto; }
}

/* /account: the signed-in account, every agent it owns as a card */
.acct .ac-sum .ac-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: end; }
.acct .ac-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acct .ac-addr { margin-top: 12px; }
.acct #ac-out-btn { background: transparent; color: var(--ink-2); border-color: var(--rule); }
.ac-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 18px; }
.ac-agents[hidden] { display: none; }
.acct .ac-card > header { align-items: center; }
.acct .ac-card .ac-id { font: 500 15px var(--sans); color: var(--muted); }
.acct .ac-card .sk-hero b { font-size: 44px; }
.ac-pill { margin-left: auto; padding: 6px 12px; border-radius: 999px; font: 600 12.5px/1 var(--sans); }
.ac-pill.ok { background: var(--green-soft); color: var(--green); }
.ac-pill.on { background: var(--brass-soft); color: var(--brass); }
.ac-pill.off { background: var(--paper-3); color: var(--muted); }
.ac-pill.bad { background: var(--red-soft); color: var(--red); }
.ac-level { display: grid; gap: 8px; margin: 14px 0 2px; font-size: 14px; color: var(--ink-2); }
.ac-bar { height: 8px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.ac-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.ac-stock { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--card-2); font-size: 14.5px; }
.ac-stock a { margin-left: auto; }
.ac-loans { margin-top: 14px; padding: 12px 14px 6px; border-radius: 14px; background: var(--brass-soft); }
.ac-loans .t { font: 500 17px/1.3 var(--serif); }
.ac-loans ul { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 4px; }
.ac-loans li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.acct .ac-borrow { margin-top: 14px; }
.acct .ac-borrow input { flex: 1 1 120px; min-width: 0; }
.acct .ac-card > .sub { margin-top: 4px; }
@media (max-width: 760px) {
  .acct .ac-sum .ac-top { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .acct .ac-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ac-agents { grid-template-columns: minmax(0, 1fr); }
  .acct .ac-borrow .btn { flex: 1 1 100%; }
  .acct .ac-borrow select { flex: none; }
}

/* Start: Go mode and Builder mode, the live strip, what an agent gets, and joining the builders */
.start .st-hero h1 { font-size: clamp(40px, 6vw, 72px); }
.start .st-live { display: flex; flex-wrap: wrap; margin: 26px 0 0; padding: 0; }
.start .st-live > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 2px 28px 2px 0; margin-right: 28px; border-right: 1px solid var(--rule); }
.start .st-live > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.start .st-live dd { margin: 0; font: 500 clamp(24px, 3vw, 32px)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.start .st-live dt { font: 400 13.5px/1.2 var(--sans); color: var(--muted); }
.start .st-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 6px; border-radius: 22px; background: var(--card-2); border: 1px solid var(--card-edge); }
/* Go mode or Builder mode: the chosen one is a card of ink with its pixel mark (the site's "selected", as on the dev
   log's filters), the other stays flat and quiet */
.start .st-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; text-align: left; padding: 16px 20px; border-radius: 16px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: 400 14px/1.4 var(--sans); transition: background .18s var(--ease), color .18s var(--ease); }
.start .st-tab .px-ico { grid-row: span 2; width: 36px; height: 36px; color: var(--faint); transition: color .18s var(--ease); }
.start .st-tab b { font: 500 22px/1.1 var(--serif); color: var(--ink-2); }
.start .st-tab:hover { background: var(--hover); color: var(--ink-2); }
.start .st-tab:hover .px-ico { color: var(--ink-2); }
.start .st-tab.on, .start .st-tab.on:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.start .st-tab.on b, .start .st-tab.on .px-ico { color: var(--paper); }
.start .st-tab.on > span { opacity: .78; }
.start .st-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.start .st-pane { display: grid; gap: 28px; }
.start .st-pane[hidden] { display: none; }
.start .st-gets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.start .st-get { display: grid; gap: 6px; align-content: start; padding: 20px 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--card-edge); }
.start .st-get b { font: 500 21px/1.2 var(--serif); color: var(--ink); }
.start .st-get > span:last-child { font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.start .st-get-n { font: 500 13px/1 var(--mono); letter-spacing: .12em; color: var(--green); }
.acct .st-wl { margin-top: 26px; padding: 22px 24px; border-radius: 20px; background: linear-gradient(135deg, var(--green-soft), transparent 70%), var(--card-2); border: 1px solid var(--card-edge); display: grid; gap: 14px; }
.acct .st-wl-head h3 { margin: 6px 0 6px; font: 500 30px/1.05 var(--serif); color: var(--ink); }
.acct .st-wl-head p { margin: 0; max-width: 44em; font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.acct .st-wl-tag { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--green); color: var(--paper); font: 600 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.acct .st-wl-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acct .st-wl-form input { flex: 1 1 260px; min-width: 0; }
.acct .st-wl-form .btn { flex: none; }
.acct .st-wl-form .wl-ts { order: 3; flex-basis: 100%; }
.start .st-build-lede { margin: 0; max-width: 46em; font: 400 18px/1.55 var(--serif); color: var(--ink-2); }
.start .st-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.start .st-build { display: grid; gap: 10px; align-content: start; justify-items: start; padding: 22px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--card-edge); }
.start .st-build h3 { margin: 0; font: 500 24px/1.15 var(--serif); color: var(--ink); }
.start .st-build p { margin: 0; font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.start .st-build-k { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.start .st-cmd { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--card-edge); font: 400 12.5px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .start .st-gets, .start .st-builds { grid-template-columns: minmax(0, 1fr); }
  .start .st-tab { padding: 12px 14px; column-gap: 12px; }
  .start .st-tab .px-ico { width: 24px; height: 24px; }
  .start .st-tab b { font-size: 19px; }
  .start .st-tab span { font-size: 12.5px; }
}

/* The sign-in window (web-src/privy-signin.mjs): Priors' own, over any page; one button that leaves for Google. */
.signin { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(15, 20, 17, .55); backdrop-filter: blur(6px); animation: signin-in .18s var(--ease); }
.signin-card { position: relative; width: min(400px, 100%); display: grid; justify-items: center; text-align: center; gap: 0; padding: 34px 28px 26px; background: var(--card, var(--paper)); border: 1px solid var(--card-edge, var(--rule)); border-radius: 22px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); color: var(--ink); }
.signin-mark { width: 44px; height: 44px; }
.signin-card h2 { margin: 14px 0 0; font: 500 30px/1.1 var(--serif); color: var(--ink); }
.signin-sub { margin: 8px 0 24px; font: 400 15px/1.45 var(--sans); color: var(--muted); }
.signin .signin-g { width: 100%; gap: 12px; padding: 14px 22px; border-radius: 999px; font: 600 15px/1 var(--sans); background: var(--field); border: 1px solid var(--field-edge); color: var(--ink); }
.signin .signin-g:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }
.signin .signin-g:disabled { color: var(--muted); }
.signin .signin-g svg { flex: none; }
.signin-note { margin: 16px 0 0; font: 400 13px/1.4 var(--sans); color: var(--faint); }
.signin-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 400 22px/1 var(--sans); cursor: pointer; }
.signin-x:hover { background: var(--hover); color: var(--ink); }
@keyframes signin-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .signin { animation: none; } }

/* Sign in with Google on the account pages: a neutral button carrying Google's mark (web/start, stocks, account) */
.acct .btn.gbtn, .acct .act .row > .btn.gbtn:first-of-type:not(:disabled) { gap: 12px; padding: 14px 24px; background: var(--field); border-color: var(--field-edge); color: var(--ink); }
.acct .btn.gbtn:hover, .acct .act .row > .btn.gbtn:first-of-type:not(:disabled):hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }
#st-privy-row, #sk-privy-row, #ac-privy-row { margin-top: 10px; }
.acct .btn.gbtn .g-logo { flex: none; }
@media (max-width: 560px) {
  .start .st-live > div { padding-right: 16px; margin-right: 16px; }
  .start .st-live dt { font-size: 12px; }
}

/* x402 on the account page (web/account-x402.js): two tabs, the APIs any agent can pay, selling your own */
.acct .ax-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px; margin: 4px 0 16px; border-radius: 18px; background: var(--card-2); border: 1px solid var(--card-edge); }
.acct .ax-tab { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 13px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.acct .ax-tab b { font: 500 20px/1.15 var(--serif); color: var(--ink-2); }
.acct .ax-tab span { font: 400 13.5px/1.35 var(--sans); }
.acct .ax-tab:hover { background: var(--hover); }
.acct .ax-tab.on, .acct .ax-tab.on:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.acct .ax-tab.on b { color: var(--paper); }
.acct .ax-tab.on span { opacity: .78; }
.acct .ax-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.acct .ax-api { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); }
.acct .ax-api-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.acct .ax-api-top b { font: 500 19px/1.2 var(--serif); color: var(--ink); }
.acct .ax-price { font: 500 13px/1 var(--mono); color: var(--green); white-space: nowrap; }
.acct .ax-api p { margin: 0; font: 400 14.5px/1.45 var(--sans); color: var(--ink-2); }
.acct .ax-api-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.acct .ax-setup { margin-top: 16px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--green); background: var(--green-soft); display: grid; gap: 12px; }
.acct .ax-setup h3 { margin: 0; font: 500 21px/1.2 var(--serif); }
.acct .ax-setup select { max-width: 280px; }
.acct .ax-steps { margin: 0; padding-left: 20px; display: grid; gap: 14px; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.acct .ax-steps .sub { display: block; margin-top: 6px; }
.acct .ax-code { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--field-edge); }
.acct .ax-code code { flex: 1; min-width: 0; font: 400 13px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.acct .ax-code .btn { flex: none; }
.acct .ax-pre pre { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; overflow-x: auto; }
.acct .ax-pre pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.acct .ax-steps > li, .acct .ax-setup, .acct .ax-code { min-width: 0; }
.acct .ax-form { display: grid; gap: 14px; }
.acct .ax-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.acct .ax-grid label { display: grid; gap: 6px; font: 500 13.5px/1.3 var(--sans); color: var(--muted); }
.acct .ax-grid .ax-wide { grid-column: 1 / -1; }
.acct .ax-grid input, .acct .ax-grid select { box-sizing: border-box; width: 100%; height: 46px; font: 15px var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--field-edge); border-radius: 12px; padding: 11px 13px; }
/* the agent's key: a text field drawn masked, not a password field, so no browser offers to save it as a password */
.acct .ax-done { margin-top: 14px; display: grid; gap: 8px; }
.acct .ax-sales { margin-bottom: 14px; }
@media (max-width: 640px) {
  .acct .ax-tabs, .acct .ax-grid { grid-template-columns: minmax(0, 1fr); }
  .acct .ax-tab b { font-size: 17px; }
}
.acct .ax-pick { flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.acct .ax-clients { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.acct .ax-client { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--field-edge); background: transparent; color: var(--ink-2); font: 500 13.5px/1 var(--sans); cursor: pointer; }
.acct .ax-client.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Stocks: beside the side panel (wide screens), the 35 tokens scroll inside their panel (header and search stay put),
   so the page stays short. On a phone the list sits under the panels, its header row is hidden and its rows are cards:
   there it is part of the page, which scrolls on past its end. */
@media (min-width: 981px) {
  .acct #sk-list .tablewrap { max-height: min(640px, 72vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .acct #sk-list .sk-table thead th { position: sticky; top: 0; z-index: 1; background: var(--card); }
}
.acct .sk-builder { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2); font: 400 14px/1.5 var(--sans); color: var(--muted); }
.acct .sk-builder b { color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------------------ the signed-in account (web/me.js, account page) */
/* pixel glyphs and trees: drawn in whole pixels, like the mark */
.px-ico { flex: none; display: block; shape-rendering: crispEdges; }
.me-tree { flex: none; display: block; image-rendering: pixelated; }
.me-plate { fill: var(--paper-2); }
/* hide balances: every figure that is money blurs, on every page, until shown again */
html[data-hide-balances] .money, html[data-hide-balances] .ac-card .sk-hero b, html[data-hide-balances] .ac-card .sk-figs b, html[data-hide-balances] .ac-loans b { filter: blur(7px); user-select: none; }

/* the header's account corner: the account's tree and its USDG, a menu of its figures and doors under it */
.me { position: relative; display: inline-flex; }
.me::after { content: ""; position: absolute; left: -12px; right: 0; top: 100%; height: 16px; } /* the pointer's path to the menu */
.me-btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 4px; background: transparent; border: 1px solid var(--ink); color: var(--ink); cursor: pointer; font: 500 14px/1 var(--sans); }
.me-btn:hover, .me.open .me-btn { background: var(--paper-2); }
.me-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.me-btn .me-tree { width: 32px; height: 32px; }
.me-bal { display: inline-flex; align-items: baseline; gap: 6px; }
.me-bal b { font: 500 19px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.me-bal > span { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--muted); }
.me .dd-caret { margin-left: 0; }
.me.open .dd-caret { transform: translateY(0) rotate(225deg); }
.me-menu { position: absolute; top: calc(100% + 14px); right: 0; z-index: 45; width: 340px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 22px 60px -18px var(--shade); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s; }
.me.open .me-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .me:hover .me-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .me:hover .dd-caret { transform: translateY(0) rotate(225deg); } }
.me.shut .me-menu, .me.shut:hover .me-menu { opacity: 0; visibility: hidden; transform: translateY(-4px); }
.me.shut .dd-caret, .me.shut:hover .dd-caret { transform: translateY(-3px) rotate(45deg); }
.me-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; border-bottom: 1px solid var(--rule-2); }
.me-head .me-tree { width: 48px; height: 48px; }
.me-head b { display: block; font: 500 21px/1.15 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.me-addr { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 0; background: none; border: 0; font: 400 12.5px/1 var(--mono); color: var(--muted); cursor: pointer; }
.me-addr:hover { color: var(--ink); }
.me-figs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 14px 18px; border-bottom: 1px solid var(--rule-2); }
.me-figs > div > span { display: block; font: 400 12.5px/1.2 var(--sans); color: var(--muted); }
.me-figs b { display: block; margin-top: 6px; font: 500 28px/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.me-figs b i { font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .1em; color: var(--muted); }
.me-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 18px 14px; border-bottom: 1px solid var(--rule-2); }
.me-acts .btn { gap: 8px; }
.me-acts .btn:first-child { background: var(--ink); color: var(--paper); }
.me-acts .btn:first-child:hover { background: var(--ink-2); border-color: var(--ink-2); }
.me-list { display: grid; padding: 6px 0; }
.me-list > a, .me-list > button { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 18px; background: none; border: 0; text-align: left; color: var(--ink); font: 500 14.5px/1.25 var(--sans); cursor: pointer; }
.me-list > a:hover, .me-list > button:hover, .me-list > a:focus-visible, .me-list > button:focus-visible { background: var(--paper-2); outline: 0; }
.me-list b { display: block; font-weight: 500; }
.me-list i { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.me-list .px-ico { color: var(--ink-2); }
.me-list a[aria-current="page"] b::after { content: "  · here"; font: 400 11.5px var(--mono); color: var(--muted); }
.me-hide .switch { pointer-events: none; }
.me-hide[aria-checked="true"] .switch { background: var(--ink); border-color: var(--ink); }
.me-hide[aria-checked="true"] .switch i { transform: translateX(16px); background: var(--paper); }
.me-list > .me-out { margin-top: 6px; border-top: 1px solid var(--rule-2); padding-top: 12px; color: var(--red); }
.me-list > .me-out .px-ico { color: var(--red); }
@media (max-width: 900px) {
  .me-btn { height: 38px; padding: 0 8px 0 3px; gap: 8px; }
  .me-bal b { font-size: 17px; }
}
@media (max-width: 560px) {
  .me-btn { height: 34px; padding: 0 3px; }
  .me-btn .me-tree { width: 26px; height: 26px; }
  .me-bal, .me .dd-caret { display: none; }
  .me { position: static; }
  .me-menu { position: fixed; top: 56px; left: 10px; right: 10px; width: auto; max-height: calc(100vh - 72px); overflow-y: auto; }
}

/* the account page once signed in: its own header (the tree, who, the figures, the doors), then a strip of sections */
.account.in .board-heading { display: none; }
.acct .ac-me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 14px 0 18px; border-bottom: 1px solid var(--rule-2); }
.acct .ac-me .me-tree { width: 96px; height: 96px; }
.acct .ac-me .eyebrow { margin: 0 0 6px; }
.acct .ac-me h1 { margin: 0; font: 500 clamp(28px, 3.4vw, 40px)/1.05 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.acct .ac-me .ac-addr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 12px; }
.acct .ac-me .ac-addr code { font: 400 13px/1.35 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.acct .ac-link { padding: 0; background: none; border: 0; font: 500 13.5px/1 var(--sans); color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.acct .ac-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.acct .ac-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.acct .ac-name-form { margin-top: 10px; max-width: 520px; }
.acct .ac-name-form .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.acct .ac-name-form input { flex: 1 1 220px; min-width: 0; font-family: var(--mono); }
.acct .ac-name-form .sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.acct .ac-doors { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.acct .ac-doors .btn { gap: 8px; }
.acct .ac-sum .ac-top { padding-top: 16px; }
.acct .ac-add { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--card-2); border: 1px dashed var(--card-edge); }
.acct .ac-add[hidden] { display: none; }
.acct .ac-add p { margin: 0 0 10px; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
.ac-sections { position: sticky; top: 66px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; margin: -10px 0; background: var(--paper); }
.ac-sections[hidden] { display: none; }
.ac-sections::-webkit-scrollbar { display: none; }
.ac-sections a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px; font: 500 14px/1 var(--sans); color: var(--ink-2); }
.ac-sections a:hover { border-color: var(--ink); color: var(--ink); }
.ac-sections a.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ac-sections a .n { font: 500 12px/1 var(--mono); opacity: .7; }

/* history: the account's ledger, newest first */
.acct .ac-feed { list-style: none; margin: 4px 0 0; padding: 0; }
.acct .ac-ev { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule-2); }
.acct .ac-ev:last-child { border-bottom: 0; }
.acct .ac-ev-ico { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--card-2); color: var(--ink-2); }
.acct .ac-ev.repaid .ac-ev-ico, .acct .ac-ev.back .ac-ev-ico { color: var(--green); }
.acct .ac-ev.defaulted .ac-ev-ico { color: var(--red); background: var(--red-soft); }
.acct .ac-ev-what { font: 500 15px/1.3 var(--sans); color: var(--ink); min-width: 0; }
.acct .ac-ev-amt { font: 500 17px/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; text-align: right; white-space: nowrap; }
.acct .ac-ev-amt.in { color: var(--green); }
.acct .ac-ev-sub { font: 400 13px/1.3 var(--sans); color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.acct .ac-ev-when { font: 400 12.5px/1 var(--mono); color: var(--muted); text-align: right; white-space: nowrap; }
.acct a.ac-ev-when:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .acct .ac-me { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .acct .ac-me .me-tree { width: 64px; height: 64px; }
  .acct .ac-doors { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .acct .ac-doors .btn { padding: 12px 8px; font-size: 14px; }
}
@media (max-width: 900px) { .ac-sections { top: 60px; } }

/* the contact page (/contact): the form posts to the bot's POST /contact */
.contact .ct-panel { max-width: 760px; }
.ct-form { display: grid; gap: 14px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-field { display: grid; gap: 6px; }
.ct-field > span { font: 500 12px var(--sans); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.ct-field input, .ct-field textarea { width: 100%; box-sizing: border-box; }
.ct-field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.ct-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ct-send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ct-status { margin: 0; font-size: 14px; }
.ct-status.ok { color: var(--green); }
.ct-status.warn { color: var(--red); }
.ct-status.muted { color: var(--muted); }
.ct-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.ct-addr { font-family: var(--mono); }
@media (max-width: 640px) { .ct-row { grid-template-columns: 1fr; } }