/* 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; }
/* an address, short until asked for (addr.js): 0xAa85…0902 [Show] */
.addr { display: inline; }
.addr-v[data-shown] { overflow-wrap: anywhere; word-break: break-all; }
/* (also where a box styles every button in it: the token's address box, the Go app's account menu) */
.addr-tog, .ca .addr-tog, .ga-me-menu .addr-tog { position: relative; display: inline-block; width: auto; margin: 0 0 0 6px; padding: 1px 7px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--muted); font: 500 11px/1.4 var(--sans); letter-spacing: 0; text-align: center; text-transform: none; vertical-align: middle; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; flex: none; align-self: center; }
.addr-tog:hover, .addr-tog:focus-visible, .ca .addr-tog:hover, .ga-me-menu .addr-tog:hover { color: var(--ink); border-color: var(--ink); background: none; }
.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); }
/* brass as small text: darker by day, so it reads (4.5:1) on brass-soft and the cards; --brass stays for fills and rules */
:root { --brass-ink: #765c2b; }
:root[data-theme="dark"] { --brass-ink: var(--brass); }
.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); }
/* a field the page refused (aria-invalid, with the reason in its status line) */
.acct input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]), .acct input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]):focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.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-ink); }
.ac-pill.off { background: var(--paper-3); color: var(--ink-2); }
.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; }
.ac-loans .sub { color: var(--ink-2); }
.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; } }

/* Two-step verification (web/account-2fa.js): in Transfer out, and its code window (the sign-in window's look) */
.ac-2fa { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.tf-setup, .tf-codes { display: grid; gap: 10px; margin-top: 12px; }
.tf-qr svg { display: block; width: 180px; height: 180px; padding: 8px; background: #fff; border-radius: 12px; }
.tf-qr svg rect { fill: #000; } /* black on white in both themes: what a phone's camera reads */
.tf-key { font: 500 14px/1.4 var(--mono, monospace); letter-spacing: .04em; word-break: break-all; user-select: all; }
.tf-list { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 22px; margin: 0; padding-left: 22px; font: 500 14px/1.5 var(--mono, monospace); }
.tf-code { font: 500 18px/1.2 var(--mono, monospace); letter-spacing: .12em; max-width: 12ch; }
.tf-ask .tf-code { width: 100%; max-width: none; margin: 0 0 14px; padding: 12px 14px; text-align: center; border-radius: 12px; background: var(--field); border: 1px solid var(--field-edge); color: var(--ink); }
.tf-ask .tf-code[aria-invalid="true"] { border-color: var(--red); }
.tf-ask .btn.primary { width: 100%; }

/* 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-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font: 400 12.5px/1.2 var(--mono); color: var(--muted); }
.me-addr-line .me-addr { margin-top: 0; font-family: var(--sans); font-size: 12px; }
.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, .acct .ac-me h2 { 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; } }

/* Savings (account.html #ac-save) */
.acct .as-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 14px; }
.acct .as-form { display: grid; gap: 8px; margin-bottom: 10px; }
.acct .as-form input { max-width: 220px; }
.acct .ac-save p.sub { margin: 10px 0 0; }
@media (max-width: 640px) { .acct .as-figs { grid-template-columns: minmax(0, 1fr); } .acct .as-form input { max-width: none; flex: 1; } }

/* ---- Go mode, signed in: the account as a full-screen app (web/goapp.js). The site's top bar, footer and page
   heading give way to a sidebar and a top bar; on the account page one tab shows at a time. ---- */
body.goapp { --ga-side: 236px; --ga-top: 64px; background: var(--paper); }
body.goapp > .nav, body.goapp > .foot, body.goapp .board-heading, body.goapp #ac-sections, body.goapp .sk-builder { display: none; }
/* the app opening (mode.js decided Go mode before paint, goapp.js painted the shell from the corner's record): nothing
   of the public page shows while the page signs in; it fills the app, or gets the screen back (goapp.js release) */
html.go-boot body > .nav, html.go-boot body > .foot { display: none; }
html.go-boot body > main { visibility: hidden; }
.ga-opening { margin-left: var(--ga-side); padding: 40px var(--ga-gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 500 15px/1.4 var(--sans); color: var(--muted); }
.ga-opening-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); animation: ga-pulse 1.1s ease-in-out infinite; }
@keyframes ga-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ga-opening-dot { animation: none; } }
/* the content is centred in the space beside the sidebar, at most 1160 px wide; the top bar lines up with it */
body.goapp { --ga-gutter: max(32px, calc((100vw - var(--ga-side) - 1160px) / 2)); }
body.goapp > main { box-sizing: border-box; width: auto; max-width: none; margin: 0 0 0 var(--ga-side); padding: 28px var(--ga-gutter) 72px; border: 0; }
body.goapp > main:focus { outline: none; } /* the skip link's stop (goapp.js): the whole tab, not a control */
.ga-side { position: fixed; inset: 0 auto 0 0; width: var(--ga-side); z-index: 40; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; background: var(--card); border-right: 1px solid var(--card-edge); overflow-y: auto; }
.ga-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font: 500 24px/1 var(--serif); color: var(--ink); text-decoration: none; }
.ga-brand svg { width: 28px; height: 28px; }
.ga-mode { margin-left: auto; font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--green); background: var(--glow); border-radius: 999px; padding: 5px 8px; }
.ga-tabs { position: relative; display: flex; flex-direction: column; gap: 2px; }
/* the current tab's mark: one block that glides from tab to tab (goapp.js places it), with a pixel bar on its left */
.ga-ind { position: absolute; left: 0; right: 0; top: 0; z-index: 0; border-radius: 12px; background: var(--glow); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent); pointer-events: none; }
.ga-ind::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 14px; margin-top: -7px; background: var(--green); box-shadow: 3px 0 0 0 color-mix(in srgb, var(--green) 35%, transparent); }
.ga-tabs.ready .ga-ind { transition: transform .42s cubic-bezier(.3, 1.4, .45, 1), height .2s var(--ease); }
.ga-tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font: 500 15px/1.2 var(--sans); color: var(--ink-2, var(--ink)); text-decoration: none; }
.ga-tab .px-ico { color: var(--muted); flex: none; transition: color .2s steps(3), transform .16s steps(2); }
.ga-tab > span { position: relative; transition: transform .16s steps(2); }
/* hover: the pixel icon lights and lifts a pixel, and a pixel rule types itself under the name, block by block */
.ga-tab > span::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--green) 0 4px, transparent 4px 6px) 0 0 / 6px 2px repeat-x; clip-path: inset(0 100% 0 0); transition: clip-path .3s steps(8); }
.ga-tab:hover .px-ico, .ga-tab:focus-visible .px-ico { color: var(--green); transform: translateY(-1px); }
.ga-tab:hover > span, .ga-tab:focus-visible > span { transform: translateX(2px); }
.ga-tab:hover > span::after, .ga-tab:focus-visible > span::after { clip-path: inset(0 0 0 0); }
.ga-tab.on > span::after { display: none; }
.ga-tab.on { color: var(--ink); font-weight: 600; }
.ga-tab.on .px-ico { color: var(--green); }
.ga-foot .ga-tab.on { background: var(--glow); }
@media (prefers-reduced-motion: reduce) { .ga-tabs.ready .ga-ind, .ga-tab .px-ico, .ga-tab > span, .ga-tab > span::after { transition: none; } }
.ga-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--card-edge); }
.ga-new { color: var(--green); }
.ga-new .px-ico { color: var(--green); }
.ga-builder { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--card-edge); font: 500 13px/1.3 var(--sans); color: var(--muted); text-decoration: none; }
.ga-builder:hover { color: var(--ink); border-color: var(--muted); }
/* the language menu (goapp.js): a quiet button above Builder mode, the languages in their own names under it */
.ga-lang { margin-top: 8px; }
.ga-lang-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--card-edge); background: none; color: var(--muted); font: 500 13px/1.3 var(--sans); text-align: left; cursor: pointer; }
.ga-lang-btn > span { flex: 1; min-width: 0; }
.ga-lang-btn:hover, .ga-lang-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--muted); }
.ga-lang-btn[aria-expanded="true"] .dd-caret { transform: translateY(0) rotate(225deg); }
.ga-lang-list { list-style: none; margin: 6px 0 0; padding: 4px; display: flex; flex-direction: column; gap: 2px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--card-edge); }
.ga-lang-list[hidden] { display: none; }
.ga-lang-list button { width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px/1.2 var(--sans); text-align: left; cursor: pointer; }
.ga-lang-list button:hover, .ga-lang-list button:focus-visible { background: var(--glow); }
.ga-lang-list [aria-current="true"] { font-weight: 600; }
.ga-lang-list [aria-current="true"]::after { content: " ✓"; color: var(--green); }
.ga-top { position: sticky; top: 0; z-index: 30; margin-left: var(--ga-side); height: var(--ga-top); display: flex; align-items: center; gap: 14px; padding: 0 var(--ga-gutter); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--card-edge); }
.ga-top { padding-right: 24px; }
.ga-title { margin: 0; font: 500 26px/1 var(--serif); letter-spacing: -.3px; white-space: nowrap; }
/* the house's figures, like a market's header */
.ga-stats { display: flex; align-items: center; gap: 4px; margin: 0 0 0 22px; min-width: 0; overflow: hidden; }
.ga-stat { position: relative; padding: 4px 14px; border-left: 1px solid var(--card-edge); }
.ga-stat:first-child { border-left: 0; }
.ga-stat dt { font: 500 11px/1.2 var(--sans); color: var(--muted); white-space: nowrap; }
.ga-stat dd { margin: 3px 0 0; font: 600 15px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ga-stat.zero dd { color: var(--green); }
.ga-stat.tick dd { animation: ga-tick 1.4s var(--ease); }
@keyframes ga-tick { 0% { color: var(--green); text-shadow: 0 0 12px color-mix(in srgb, var(--green) 50%, transparent); } 100% { color: inherit; text-shadow: none; } }
@media (max-width: 1640px) { .ga-stat[data-stat="agents"], .ga-stat[data-stat="loans"] { display: none; } }
@media (max-width: 1320px) { .ga-stat[data-stat="reserve"], .ga-stat[data-stat="lost"] { display: none; } }
@media (max-width: 1080px) { .ga-stats { display: none; } }
/* notes in the bottom right corner */
.ga-toasts { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.ga-toast { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-edge); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); color: var(--ink); text-decoration: none; overflow: hidden; animation: ga-toast-in .42s cubic-bezier(.3, 1.35, .45, 1) both; }
.ga-toast::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--muted); }
.ga-toast.up::before { background: var(--green); } .ga-toast.down::before { background: var(--red); }
.ga-toast-logo img { display: block; width: 32px; height: 32px; border-radius: 8px; background: #fff; }
.ga-toast-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ga-toast-t b { font: 600 14.5px/1.2 var(--sans); }
.ga-toast-t b em { font-style: normal; font-variant-numeric: tabular-nums; }
.ga-toast.up .ga-toast-t b em { color: var(--green); } .ga-toast.down .ga-toast-t b em { color: var(--red); }
.ga-toast-t span { font: 400 13px/1.35 var(--sans); color: var(--muted); }
.ga-toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--green) 55%, transparent); transform-origin: 0 50%; animation: ga-toast-left var(--left, 8000ms) linear forwards; }
.ga-toast.paused .ga-toast-bar { animation-play-state: paused; }
.ga-toast:hover { border-color: var(--muted); }
.ga-toast.out { animation: ga-toast-out .26s var(--ease) forwards; }
@keyframes ga-toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ga-toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes ga-toast-left { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ga-toast, .ga-toast.out { animation: none; } }
.ga-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ga-cash { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--card-edge); }
.ga-cash .label { font: 600 11px/1 var(--sans); letter-spacing: .06em; color: var(--muted); }
.ga-cash b { font: 600 16px/1 var(--sans); }
.ga-top .btn.sm { border-radius: 999px; }
.ga-me { position: relative; }
.ga-me-btn { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--card-edge); background: var(--card); color: var(--ink); cursor: pointer; font: 500 14px/1 var(--sans); }
.ga-me-btn .me-tree { border-radius: 999px; }
.ga-me-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; display: none; flex-direction: column; padding: 8px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-edge); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45); }
.ga-me.open .ga-me-menu { display: flex; }
.ga-me-head { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--card-edge); margin-bottom: 4px; }
.ga-me-head code { font-size: 12px; color: var(--muted); }
.ga-me-menu button, .ga-me-menu a { text-align: left; padding: 10px; border-radius: 10px; border: 0; background: none; color: var(--ink); font: 500 14px/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.ga-me-menu button:hover, .ga-me-menu a:hover { background: var(--card-2); }
.ga-me-menu [aria-checked="true"]::after { content: " ✓"; color: var(--green); }
.ga-menu-btn { display: none; border: 1px solid var(--card-edge); background: var(--card); color: var(--ink); border-radius: 12px; padding: 8px; cursor: pointer; }
/* the account page's tabs: one section at a time (account-page.js marks the current ones) */
body.goapp #main.account > section:not(.ga-on) { display: none !important; }
body.goapp .acct > .rigbar { margin-bottom: 12px; }
/* Agents: your agents, or all of them (account-explore.js) */
.ac-agbar, .ac-explore { display: none; }
body.goapp #main.account > .ac-agbar.ga-on { display: flex; margin-bottom: 14px; }
body.goapp #main.account > .ac-explore.ga-on { display: block; }
#main[data-agview="all"] > #ac-agents, #main[data-agview="all"] > #ac-empty { display: none !important; }
#main:not([data-agview="all"]) > #ac-explore { display: none !important; }
.ag-switch { position: relative; display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--card); border: 1px solid var(--card-edge); }
.ag-switch button { position: relative; padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 14px/1 var(--sans); cursor: pointer; transition: color .2s steps(3), background .2s var(--ease); }
.ag-switch button:hover { color: var(--ink); }
.ag-switch button.on { background: var(--glow); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent); }
.ex-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ex-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ex-head h2 .sub { font: 500 13px var(--sans); margin-left: 8px; }
.ex-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 6px; }
.ex-tools .ga-search { flex: 1 1 220px; }
.ex-items { display: grid; gap: 6px; margin-top: 8px; }
.ex-row { position: relative; display: grid; grid-template-columns: 30px minmax(120px, 1.4fr) minmax(110px, 1fr) 96px 96px 64px minmax(110px, auto); align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); color: var(--ink); text-decoration: none; overflow: hidden; animation: ex-in .5s var(--ease) both; animation-delay: calc(var(--i) * 18ms); }
.ex-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .24s steps(4); }
.ex-row:hover, .ex-row:focus-visible { background: color-mix(in srgb, var(--green) 7%, var(--card-2)); }
.ex-row:hover::before, .ex-row:focus-visible::before { transform: scaleY(1); }
.ex-rank { font: 500 13px var(--mono, monospace); color: var(--faint, var(--muted)); text-align: right; }
.ex-name { font: 600 15px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-name .sub { font: 500 12.5px var(--mono, monospace); color: var(--muted); }
.ex-score { display: flex; align-items: center; gap: 8px; }
.ex-score b { font: 500 20px/1 var(--serif); color: var(--green); min-width: 36px; font-variant-numeric: tabular-nums; }
.ex-score i { flex: 1; height: 5px; border-radius: 999px; background: var(--card); overflow: hidden; }
.ex-score s { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-2)); text-decoration: none; }
.ex-num b { display: block; font: 600 14.5px/1.15 var(--sans); font-variant-numeric: tabular-nums; }
.ex-num .sub { font-size: 11.5px; white-space: nowrap; }
.ex-st { white-space: nowrap; }
.ex-st { justify-self: end; font: 600 12.5px var(--sans); }
.ex-on { color: var(--brass-ink, var(--brass)); } .ex-idle { color: var(--muted); }
.ex-side { position: sticky; top: calc(var(--ga-top) + 16px); max-height: calc(100vh - var(--ga-top) - 40px); overflow: auto; }
.ex-feed { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.ex-ev { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "dot what amt" ". when when"; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--card-edge); font: 500 13.5px/1.3 var(--sans); animation: ex-in .45s var(--ease) both; }
.ex-ev:last-child { border-bottom: 0; }
.ex-dot { grid-area: dot; width: 6px; height: 6px; margin-top: 5px; background: var(--muted); }
.ex-ev.up .ex-dot { background: var(--green); } .ex-ev.down .ex-dot { background: var(--red); }
.ex-what { grid-area: what; min-width: 0; } .ex-what .sub { font: 500 12px var(--mono, monospace); }
.ex-amt { grid-area: amt; font-variant-numeric: tabular-nums; }
.ex-ev.up .ex-amt { color: var(--green); }
.ex-when { grid-area: when; font-size: 12px; color: var(--muted); }
@keyframes ex-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ex-row, .ex-ev { animation: none; } .ex-row::before { transition: none; } }
@media (max-width: 1560px) { .ex-row { grid-template-columns: 26px minmax(110px, 1.3fr) minmax(90px, .9fr) 86px 86px minmax(100px, auto); } .ex-line { display: none; } }
@media (max-width: 1280px) { .ex-layout { grid-template-columns: minmax(0, 1fr); } .ex-side { position: static; max-height: none; } }
@media (max-width: 900px) { .ex-row { grid-template-columns: 26px minmax(0, 1fr) 110px; } .ex-row .ex-num, .ex-row .ex-st { display: none; } }
/* Home: quick doors */
.ga-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.ga-door { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); color: var(--ink); text-decoration: none; }
.ga-door:hover { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); }
.ga-door b { font: 600 15px/1.2 var(--sans); display: flex; align-items: center; gap: 8px; }
.ga-door b .px-ico { color: var(--green); }
.ga-door span { font: 400 13px/1.35 var(--sans); color: var(--muted); }
/* shared bits of the new tabs */
.ga-list { display: grid; gap: 8px; margin: 10px 0; }
.ga-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 14px; background: var(--card-2); }
.ga-row .grow { flex: 1 1 200px; min-width: 0; }
.ga-row b { font: 600 15px/1.2 var(--sans); }
.ga-row .sub { display: block; }
.ga-chip { font: 600 11px/1 var(--sans); letter-spacing: .04em; padding: 5px 8px; border-radius: 999px; background: var(--glow); color: var(--green); }
.ga-chip.warn { background: var(--red-soft); color: var(--red); }
.ga-note { font: 400 13px/1.45 var(--sans); color: var(--muted); }
.ga-empty { padding: 16px; border-radius: 14px; border: 1px dashed var(--card-edge); color: var(--muted); font: 400 14px/1.45 var(--sans); }
/* a phone: the sidebar slides in from the menu button */
@media (max-width: 860px) {
  body.goapp { --ga-side: 0px; --ga-gutter: 16px; }
  body.goapp > main { margin: 0; padding: 16px 16px 72px; }
  /* closed, it is out of the Tab order and of screen readers too, not only off screen */
  .ga-side { width: 272px; transform: translateX(-102%); visibility: hidden; transition: transform .2s var(--ease, ease), visibility .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  /* opening, it shows at once (the focus moves into it); shutting, it stays visible while it slides away */
  .ga-side.open { transform: none; visibility: visible; transition: transform .2s var(--ease, ease); }
  /* open, the page behind it dims; a tap there lands on the body, so it only shuts the sidebar (goapp.js) */
  body.goapp.ga-drawer::after { content: ""; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .35); }
  .ga-top { padding: 0 12px; gap: 10px; }
  .ga-menu-btn { display: inline-flex; }
  .ga-title { font-size: 21px; }
  .ga-me-name, .ga-cash .label { display: none; }
  .ga-add { display: none; }
  .ga-cash { padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) { .ga-side, .ga-side.open { transition: none; } }
.acct .ga-h { margin: 18px 0 4px; font: 600 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sk-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 18px; padding: 14px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--card-edge); font: 400 14px/1.45 var(--sans); color: var(--muted); }
.sk-buy b { color: var(--ink); }
.sk-buy .row { margin: 0; gap: 8px; }
body.goapp .st-tabs, body.goapp #st-build-pane { display: none !important; }
.go-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 14px 18px; border-radius: 18px; background: var(--glow); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); color: var(--ink); text-decoration: none; font: 400 14.5px/1.4 var(--sans); }
.go-cta:hover { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); }
.go-cta-tag { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--green); border-radius: 999px; padding: 6px 9px; }
.go-cta-txt { flex: 1 1 260px; color: var(--muted); }
.go-cta-txt b { color: var(--ink); }
.go-cta-arr { font-weight: 600; color: var(--green); white-space: nowrap; }
html[data-signed-in] .go-cta-new { display: none; } /* signed in (me.js): no sign-in to offer */

/* ---- Go mode, round 2: the in-tab stock flow, the agents list, the score, help, the withdrawal steps, polish ---- */
body.goapp .acct .panel { padding: 8px 26px 22px; border-radius: 20px; }
body.goapp .acct .panel > header { padding: 18px 0 10px; }
body.goapp .acct .panel > header h2 { font-size: 26px; }
body.goapp .acct .panel > header .sub { font-size: 14.5px; }
.ga-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 8px 0 6px; padding: 14px 16px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); font: 400 14px/1.45 var(--sans); color: var(--muted); }
.ga-banner b { color: var(--ink); }
.ga-banner .row { margin: 0; gap: 8px; }
.ga-h-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; }
.ga-h-row .ga-h { margin: 0; }
.ga-search { max-width: 280px; padding: 10px 14px !important; font-size: 14.5px !important; }
.ga-table td, .ga-table th { vertical-align: middle; }
.ga-acts { display: inline-flex; gap: 6px; }
.ga-row .sk-logo { flex: none; }
.ga-sheet { margin: 14px 0; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--green); background: var(--card-2); box-shadow: 0 0 0 4px var(--glow); }
.ga-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ga-sheet-head h3 { margin: 0; font: 500 22px/1.1 var(--serif); }
.ga-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.ga-sheet-grid label { display: grid; gap: 6px; font: 600 12px/1 var(--sans); letter-spacing: .04em; color: var(--muted); }
.ga-sheet-grid label .row { margin: 0; }
.ga-sheet-grid .sub { font-weight: 400; letter-spacing: 0; }
/* agents: the chosen card and its score on the left, the list on the right */
.ag-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.ag-main { display: grid; gap: 18px; min-width: 0; }
.ag-list { position: sticky; top: calc(var(--ga-top, 64px) + 16px); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - var(--ga-top, 64px) - 40px); padding: 16px !important; }
.ag-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-list-head b { font: 500 20px/1 var(--serif); }
.ag-list .ga-search { max-width: none; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-chip { border: 1px solid var(--card-edge); background: var(--card-2); color: var(--ink); border-radius: 999px; padding: 6px 11px; font: 500 12.5px/1 var(--sans); cursor: pointer; }
.ag-chip.on { background: var(--green); border-color: var(--green); color: var(--paper); }
.ag-sort { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--sans); color: var(--muted); }
.ag-sort select { padding: 7px 10px !important; font-size: 13px !important; border-radius: 10px !important; }
.ag-items { display: grid; gap: 6px; overflow-y: auto; padding-right: 2px; }
.ag-item { display: grid; gap: 4px; text-align: left; padding: 11px 12px; border-radius: 14px; border: 1px solid transparent; background: var(--card-2); color: var(--ink); cursor: pointer; font: inherit; }
.ag-item:hover { border-color: var(--card-edge); }
.ag-item.on { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow); }
.ag-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-item-top b { font: 600 14.5px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-item-sub { font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.ag-item-due { font: 600 12px/1.2 var(--sans); color: var(--brass-ink); }
.ag-item-due.r { color: var(--red); }
.ag-score > header h2 { display: flex; align-items: baseline; gap: 10px; }
.ag-big { font: 500 40px/1 var(--serif); color: var(--green); }
/* the score's parts (sc-: the site's .ag-bar is the home page's decorative bar, animated for ever) */
.sc-bars { display: grid; gap: 10px; margin: 10px 0 14px; }
.sc-bar { display: grid; grid-template-columns: 170px minmax(0, 1fr) 70px; align-items: center; gap: 12px; font: 500 13.5px/1.2 var(--sans); cursor: help; }
.sc-bar-t { height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.sc-bar-t i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--green-2)); transform-origin: 0 50%; }
.sc-bar-v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes sc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) { .sc-grow .sc-bar-t i { animation: sc-grow .9s var(--ease) both; } .sc-grow .sc-bar:nth-child(2) i { animation-delay: .06s; } .sc-grow .sc-bar:nth-child(3) i { animation-delay: .12s; } .sc-grow .sc-bar:nth-child(4) i { animation-delay: .18s; } .sc-grow .sc-bar:nth-child(5) i { animation-delay: .24s; } .sc-grow .sc-bar:nth-child(6) i { animation-delay: .3s; } }
.st-have { margin: 12px 0 0; }
.ag-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* help */
.ga-help { padding: 18px 0 6px; border-bottom: 1px solid var(--card-edge); margin-bottom: 4px; }
.ga-help h3 { margin: 0 0 4px; font: 500 26px/1.1 var(--serif); }
/* take it out: three steps */
.wd-steps { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 14px; }
.wd-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 18px; background: var(--card-2); }
.wd-n { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--green); color: var(--paper); font: 600 14px/1 var(--sans); }
.wd-body { min-width: 0; }
.wd-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wd-h h3 { margin: 0; font: 500 21px/1.1 var(--serif); }
.wd-asset { background: var(--card) !important; }
.wd-amt { width: 160px; text-align: right; padding: 9px 12px !important; }
.wd-dest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
#ac-wd-set input { flex: 1 1 320px; min-width: 0; }
.wd-review { padding: 14px; border-radius: 14px; background: var(--card); border: 1px dashed var(--card-edge); font: 400 14.5px/1.5 var(--sans); margin-bottom: 12px; }
.wd-sum { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: 16px; }
.wd-review .r { color: var(--red); }
@media (max-width: 1100px) {
  .ag-layout { grid-template-columns: minmax(0, 1fr); }
  .ag-list { position: static; max-height: none; order: -1; }
  .ag-items { max-height: 320px; }
}
@media (max-width: 640px) {
  .ga-sheet-grid { grid-template-columns: 1fr; }
  .sc-bar { grid-template-columns: 110px minmax(0, 1fr) 56px; font-size: 12.5px; }
  .ag-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wd-amt { width: 110px; }
  .wd-step { grid-template-columns: minmax(0, 1fr); }
  .wd-n { display: none; }
}
/* the Agents tab's own layout replaces the old grid of cards */
.ac-agents { display: block; }
#ag-cards > article[hidden] { display: none; }
/* the stock table stays inside its panel: it scrolls sideways within it on a narrow screen, never past the edge */
#ac-stocks .tablewrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
#ac-stocks .ga-table { width: 100%; min-width: 620px; }
#ac-stocks .ga-table .sk-act { width: 1%; white-space: nowrap; }
#ac-stocks .ga-table .btn.sm { padding: 7px 12px; }
#ac-stocks .ga-table td.num { white-space: nowrap; }
#ac-stocks .sk-tok .sub { display: block; }
.acct .le-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acct .le-earn { background: var(--glow) !important; }
.acct .le-earn b { color: var(--green); }
.acct .le-earn .label { color: var(--ink-2); }
.acct .le-earn i { display: block; margin-top: 4px; font: 400 12px/1.35 var(--sans); font-style: normal; color: var(--ink-2); }
@media (max-width: 900px) { .acct .le-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the Stocks tab's tokens: rows that always fit their panel (on a phone: the token, then price, holding and buttons).
   The buttons' column has one width in the header and in every row (each is its own grid), so the columns line up. */
.st-head, .st-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(110px, .8fr) minmax(110px, .8fr) 10.5rem; align-items: center; gap: 12px; }
.st-head { padding: 0 12px 6px; font: 600 11.5px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.st-head span:nth-child(2), .st-head span:nth-child(3) { text-align: right; }
.st-list { display: grid; gap: 6px; }
.st-row { padding: 10px 12px; border-radius: 14px; background: var(--card-2); }
.st-row[hidden] { display: none; }
.st-tok { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-tok .nm { display: grid; min-width: 0; }
.st-tok .nm b { font: 600 15px/1.2 var(--sans); }
.st-tok .nm .sub { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-price, .st-held { display: grid; text-align: right; }
.st-price b, .st-held b { font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.st-price .sub, .st-held .sub { font-size: 12px; }
.st-price .sub.r { color: var(--red); }
.st-acts { display: inline-flex; justify-content: flex-end; gap: 6px; }
.st-acts .btn.sm { padding: 7px 12px; }
@media (max-width: 640px) {
  .st-head { display: none; }
  .st-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tok tok" "price held" "acts acts"; row-gap: 8px; }
  .st-tok { grid-area: tok; } .st-price { grid-area: price; text-align: left; } .st-held { grid-area: held; } .st-acts { grid-area: acts; }
  .st-acts .btn.sm { flex: 1; text-align: center; }
}

/* ---- Go app layout: nothing overlaps, clips or runs off at any width (a layout audit, 360 to 1920 px) ---- */
/* the top bar: the title gives way last but can, the house's figures give way first and only whole (a figure that
   does not fit wraps onto a second line the bar hides), and the right-hand cluster never moves */
.ga-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.ga-title:focus { outline: none; } /* focused by script on a tab change (account-page.js), for screen readers */
.ga-stats { flex: 0 100 auto; flex-wrap: wrap; align-content: flex-start; height: 44px; }
.ga-stat { box-sizing: border-box; height: 44px; display: flex; flex-direction: column; justify-content: center; }
.ga-stat[hidden] { display: none; }
.ga-right { flex: none; }
.ga-me-btn { max-width: 220px; min-width: 40px; min-height: 40px; }
.ga-me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-me-menu { max-width: calc(100vw - 24px); }
.ga-me-head b { overflow-wrap: anywhere; }
/* a figure's label and value sit at the top of their cell, however tall a neighbour in the row is */
.acct .sk-figs > div { align-content: start; }
/* All agents: a long name wraps (two lines at most) so the agent's number beside it always shows */
.ex-name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ex-name .sub { white-space: nowrap; }
@media (max-width: 560px) { .ex-row { grid-template-columns: 22px minmax(0, 1fr) 92px; gap: 10px; padding: 10px 12px; } .ex-name { -webkit-line-clamp: 3; line-clamp: 3; } }
/* the Stocks tab: a token's long name wraps to a second line rather than hiding its LTV */
.st-tok .nm .sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* phones: notes in the corner stay compact (the newest two), and every control is at least 32 px tall to tap */
@media (max-width: 560px) {
  .ga-toasts { right: 10px; bottom: 10px; gap: 6px; width: calc(100vw - 20px); }
  .ga-toast { padding: 9px 12px 11px; gap: 10px; }
  .ga-toast:nth-child(n+3) { display: none; }
  .ga-toast-logo img { width: 28px; height: 28px; }
}
@media (max-width: 860px) {
  .acct .ac-link { display: inline-flex; align-items: center; min-height: 32px; }
  .acct .ac-me .ac-addr { align-items: center; row-gap: 0; }
  .acct .ac-name { align-items: center; row-gap: 0; }
  .addr-tog::after { content: ""; position: absolute; inset: -8px -4px; } /* a bigger tap area, the same small pill */
  .ag-switch button { padding: 11px 16px; }
  .ag-chip { padding: 9px 12px; }
  .st-acts .btn.sm { padding: 9px 12px; }
  .st-own summary { padding: 8px 0; }
}

/* ---- Home, the control tower: the featured stocks, savings on Morpho, the pool, the latest of History ---- */
.hm-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin: 18px 0 8px; }
.hm-grid[hidden] { display: none; }
.hm-card { min-width: 0; padding: 16px 18px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--card-edge); display: flex; flex-direction: column; gap: 10px; }
.hm-card > header { display: flex; align-items: baseline; gap: 8px; }
.hm-card > header h3 { margin: 0; font: 600 15px/1.2 var(--sans); color: var(--ink); }
.hm-card > header .sub { font: 500 11px/1 var(--sans); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.hm-card > header .k { margin-left: auto; font-size: 13px; }
.hm-stocks { grid-row: span 2; }
.hm-list { display: flex; flex-direction: column; }
.hm-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 76px; align-items: center; gap: 12px; padding: 9px 6px; margin: 0 -6px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background .15s steps(2); }
.hm-row + .hm-row { border-top: 1px solid var(--rule-2); }
.hm-row:hover { background: var(--card); }
.hm-row .sk-logo { width: 30px; height: 30px; }
.hm-nm { display: flex; flex-direction: column; min-width: 0; }
.hm-nm b { font: 600 14px/1.2 var(--sans); }
.hm-nm .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-px { font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hm-ch { justify-self: end; font: 600 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; padding: 5px 7px; border-radius: 7px; background: var(--card); color: var(--muted); white-space: nowrap; }
.hm-ch.up { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.hm-ch.down { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.hm-big { display: flex; align-items: baseline; gap: 10px; }
.hm-big b { font: 400 40px/1 var(--serif); color: var(--green); font-variant-numeric: lining-nums tabular-nums; }
.hm-big b.na { font-size: 22px; color: var(--muted); }
.hm-big span { font: 500 13px/1 var(--sans); color: var(--muted); }
.hm-save .sub { margin: 0; font-size: 12.5px; color: var(--muted); }
.hm-save .btn { align-self: flex-start; }
.hm-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px 14px; margin: 0; }
.hm-dl dt { font: 500 11.5px/1.2 var(--sans); color: var(--muted); }
.hm-dl dd { margin: 3px 0 0; font: 600 15px/1.15 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-pool .hm-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-recent { grid-column: 1 / -1; }
.hm-feed { list-style: none; margin: 0; padding: 0; }
.hm-ev { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; }
.hm-ev + .hm-ev { border-top: 1px solid var(--rule-2); }
.hm-ev-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--card); color: var(--ink-2); }
.hm-ev.repaid .hm-ev-ico, .hm-ev.back .hm-ev-ico { color: var(--green); }
.hm-ev.defaulted .hm-ev-ico { color: var(--red); }
.hm-ev-what { font: 500 14px/1.3 var(--sans); min-width: 0; }
.hm-ev-amt { font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-ev-amt.in { color: var(--green); }
.hm-ev-when, .hm-ev-when a { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) {
  .hm-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-stocks { grid-row: auto; }
}
@media (max-width: 560px) {
  .hm-row { grid-template-columns: 28px minmax(0, 1fr) auto 64px; gap: 10px; }
  .hm-pool .hm-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-ev { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .hm-ev-when { grid-column: 2 / -1; }
}

/* the account's own address copies itself when clicked (addr.js .addr-copy): a pointer, a dotted underline on hover,
   and "Copied" over it for a moment */
.addr-copy[data-addr] { position: relative; cursor: copy; border-radius: 4px; text-decoration: underline dotted transparent; text-underline-offset: 3px; transition: text-decoration-color .15s steps(2), color .15s steps(2); }
.addr-copy[data-addr]:hover, .addr-copy[data-addr]:focus-visible { color: var(--ink); text-decoration-color: currentColor; outline: none; }
.addr-copy.copied::after { content: "Copied"; position: absolute; left: 50%; top: calc(100% + 6px); z-index: 5; transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--paper, #fff); font: 600 11px/1 var(--sans); white-space: nowrap; pointer-events: none; animation: addr-copied .18s steps(3) both; }
@keyframes addr-copied { from { opacity: 0; transform: translate(-50%, -3px); } to { opacity: 1; transform: translate(-50%, 0); } }