/* Generated by web/brand/build.mjs from web/brand/lib/palette.mjs. Do not edit by hand.
   The look is Binance's dark theme, measured on binance.com (web/brand/binance/REFERENCE.md). */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibmplexsans-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibmplexsans-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibmplexsans-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibmplexsans-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibmplexsans-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibmplexsans-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibmplexsans-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibmplexsans-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibmplexmono-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibmplexmono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibmplexmono-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibmplexmono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibmplexmono-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibmplexmono-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibmplexmono-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibmplexmono-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --ground: #0B0E11;
  --bar: #181A20;
  --surface: #181A20;
  --panel: #202630;
  --raised: #29313D;
  --line: #333B47;
  --line-soft: #2B3139;
  --line-strong: #76808F;
  --line-neutral: #373737;
  --ink: #EAECEF;
  --ink-soft: #CACED3;
  --ink-mute: #929AA5;
  --yellow: #F0B90B;
  --yellow-btn: #FCD535;
  --yellow-deep: #D89F00;
  --on-yellow: #202630;
  --up: #2EBD85;
  --down: #F6465D;
  --up-bg: #102821;
  --down-bg: #35141D;
  --screen: #000000;
  --bezel: #202630;
  --paper: #EAECEF;
  --paper-line: #929AA5;
  --white: #FFFFFF;
  --steel: #5E6673;
  --slate: #474D57;
  --up-deep: #248962;
  --up-light: #A1E1C8;
  --down-deep: #B03546;
  --down-light: #FBACB6;
  --gold-deep: #9B7405;
  --w-dawn-backdrop: #D8D6E4;
  --w-day-backdrop: #B5D3EA;
  --w-dusk-backdrop: #B3BFD8;
  --w-night-backdrop: #2B3E66;
  --font-display: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-micro: 12px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: clamp(16px, 2.2vw, 20px);
  --fs-h3: 20px;
  --fs-h2: clamp(26px, 4vw, 40px);
  --fs-h1: clamp(32px, 5.4vw, 56px);
  --fs-display: clamp(40px, 8vw, 72px);
  --lh-tight: 1.1;
  --lh-body: 1.5;
  --ls-caps: 0.02em;
  --fw-body: 400;
  --fw-medium: 500;
  --fw-strong: 600;
  --fw-display: 700;
  --r-xs: 4px;
  --r-s: 8px;
  --r-input: 10px;
  --r-m: 20px;
  --r-l: 32px;
  --r-pill: 999px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --glow-yellow: 0 12px 40px rgba(240, 185, 11, 0.18);
  --line-yellow: rgba(240, 185, 11, 0.4);
  --veil: rgba(255, 255, 255, 0.05);
  --card-glow: linear-gradient(125.05deg, rgba(240, 185, 11, 0.13) 0%, rgba(240, 185, 11, 0.04) 35.82%, rgba(240, 185, 11, 0) 102.34%);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-hover: cubic-bezier(0, 0, 0.2, 1);
  --ease-link: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s;
  --t-base: 0.25s;
  --t-slow: 0.4s;
  --motif-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'%3E%3Cpath d='M6 0L12 6L6 12L0 6Z' fill='%23F0B90B'/%3E%3C/svg%3E");
  --motif-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' width='240' height='12'%3E%3Cpath d='M0 6H108M132 6H240' stroke='%23F0B90B' stroke-opacity='0.4' stroke-width='1'/%3E%3Cpath d='M120 0L126 6L120 12L114 6Z' fill='%23F0B90B'/%3E%3C/svg%3E");
  --motif-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath d='M16 13.4L18.6 16L16 18.6L13.4 16ZM0 -2.6L2.6 0L0 2.6L-2.6 0ZM32 -2.6L34.6 0L32 2.6L29.4 0ZM0 29.4L2.6 32L0 34.6L-2.6 32ZM32 29.4L34.6 32L32 34.6L29.4 32Z' fill='%23F0B90B' fill-opacity='0.1'/%3E%3C/svg%3E");
  --motif-grid-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath d='M16 13.4L18.6 16L16 18.6L13.4 16ZM0 -2.6L2.6 0L0 2.6L-2.6 0ZM32 -2.6L34.6 0L32 2.6L29.4 0ZM0 29.4L2.6 32L0 34.6L-2.6 32ZM32 29.4L34.6 32L32 34.6L29.4 32Z' fill='%23000000' fill-opacity='0.07'/%3E%3C/svg%3E");
}

/* The font stacks with the Chinese system faces before the generic family (web/build.mjs). */
:root {
  --font-display: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
}

/* osbook site styles. Colours, type scale and @font-face come from tokens.css, which
   web/brand/build.mjs generates; build.mjs concatenates tokens.css, this file and art.css
   into one hashed stylesheet. No inline CSS anywhere: the CSP is style-src 'self'.

   The look is Binance's (CONTRACT.md section 9), with the component values measured on
   binance.com (web/brand/binance/REFERENCE.md sections 2 to 5):
   - the exchange: a flat 64px #181A20 header, #FCD535 buttons with #202630 labels (radius 4 small,
     8 large, hover opacity .8, pressed #F0B90B), #181A20 panels with a 20px radius and no border,
     #29313D tiles, tabs with a 16x3 yellow bar, 48px inputs with a 10px radius;
   - the Agent OS page: a Binance-yellow hero with a black name pill and black type, black bands
     below it, cards with a 1px #F0B90B hairline, a 32px radius and a yellow corner glow, yellow
     caps headings, yellow pills with black caps;
   - Binance green for up and red for down, on their own chip grounds inside tiles. */

:root {
  --top-h: 64px;
  --col: 1128px;
  /* An Agent OS card: black, a yellow corner glow, a yellow hairline. */
  --glow-card: var(--card-glow), var(--screen);
  /* An Agent OS link card: the diagonal glow (REFERENCE.md section 1). */
  --glow-diag: linear-gradient(155.66deg, rgba(240, 185, 11, 0.106) 4.24%, rgba(54, 44, 13, 0.11) 23.47%, rgba(0, 0, 0, 0.15) 47.95%, rgba(68, 63, 12, 0.114) 71.55%, rgba(245, 236, 56, 0.106) 95.15%);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ground);
  scroll-padding-top: 132px;
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--yellow); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--t-fast) var(--ease-link); }
a:hover { color: var(--yellow-btn); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: var(--r-xs); }
button { font: inherit; color: inherit; }
code, kbd, pre, .mono { font-family: var(--font-mono); }
code { font-size: 0.88em; background: var(--raised); border-radius: var(--r-xs); padding: 1px 6px; overflow-wrap: anywhere; }
/* A relative time is one phrase: "29m ago" never breaks over two lines, wherever it is written
   into a sentence ("joined 29m ago, last post 3h ago" on the creator card). */
time[data-rel] { white-space: nowrap; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-display); line-height: var(--lh-tight); margin: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .nojs { display: none; }
.nojs { color: var(--ink-mute); font-size: var(--fs-small); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--yellow-btn); color: var(--on-yellow); padding: 6px 12px; border-radius: var(--r-xs);
  font-size: var(--fs-small); font-weight: var(--fw-medium); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ the Binance mark, inline */

.bnb { display: block; flex: none; overflow: visible; }
.bnb-p { transform-box: fill-box; transform-origin: 50% 50%; }

/* ------------------------------------------------------------------ header */
/* Binance's header: 64px, sticky, flat #181A20, no border, no shadow, no blur (REFERENCE.md 3). */

.top { position: sticky; top: 0; z-index: 999; background: var(--bar); }
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--yellow) 30%, var(--yellow-btn) 70%, transparent);
  transform: scaleX(0); opacity: 0; pointer-events: none;
}
.top-in {
  max-width: 1440px; margin: 0 auto; padding: 0 24px;
  display: grid; align-items: center; column-gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "brand nav here lang join";
  min-height: var(--top-h);
}
.brand {
  grid-area: brand; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--ink); text-decoration: none; padding: 8px 12px 8px 0;
}
.brand:hover { color: var(--ink); }
.brand-mark { width: 38px; height: 38px; flex: none; overflow: visible; }
.brand-text { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.brand-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
/* The name is the owner's picture (assets/img/wordmark.png, 1x and 2x). Only a height is set:
   the file's own width and height attributes keep its aspect ratio. */
.brand-name { display: block; flex: none; width: auto; height: 17px; }
.brand-x { color: var(--ink-mute); font-size: 15px; line-height: 1; margin: 0 1px; }
.bnb-lock { width: 24px; height: 24px; }
.brand-os { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 16px; line-height: 1; color: var(--ink); }

/* The header badge (CONTRACT.md section 9.1): Binance's mark, then "for Binance Agent OS agents"
   from 600px up and "Binance Agent OS" below; never hidden. A --panel strip, as in BRAND.md 4. */
.os-badge {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-medium); line-height: 1; letter-spacing: 0.01em;
  color: var(--ink-mute); background: var(--panel); border-radius: var(--r-xs); padding: 3px 7px 3px 5px;
}
.os-mark { width: 14px; height: 14px; flex: none; margin-right: 6px; }
.os-for, .os-agents { white-space: pre; }
.os-core { position: relative; color: var(--yellow); font-weight: var(--fw-strong); }
.os-typed { display: inline-block; }
.os-check { display: none; }
@media (max-width: 599px) { .os-for, .os-agents { display: none; } }

/* Nav: Binance's items fill the bar's height; hover and the current page are yellow, and the
   current page carries Binance's 16x3 tab bar. Mono at 13px is the site's micro-type. */
.nav { grid-area: nav; display: flex; align-items: stretch; gap: 0; min-width: 0; justify-content: flex-start; align-self: stretch; }
.nav a {
  position: relative; display: inline-flex; align-items: center; flex: none;
  font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-medium); line-height: 22px;
  color: var(--ink); text-decoration: none; white-space: nowrap; padding: 0 10px;
}
.nav a:hover { color: var(--yellow); }
.nav a[aria-current="page"] { color: var(--yellow); }
/* The bar sits 8px above the header's edge, so it never runs into the yellow band below. */
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 8px; width: 16px; height: 3px; margin-left: -8px; background: var(--yellow-btn);
}
.nav .jump { margin: auto 0 auto 6px; height: 32px; padding: 0 10px; border-radius: var(--r-xs); background: var(--line); }
.nav .jump + .jump { margin-left: 8px; }
.nav .jump:hover { color: var(--ink); opacity: 0.8; }
.nav .jump span { color: var(--yellow); margin-right: 4px; }
.nav .jump[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--yellow); }
.nav .jump[aria-current="page"]::after { display: none; }

.here {
  grid-area: here; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; height: 32px;
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-soft);
  background: var(--raised); border-radius: var(--r-xs); padding: 0 10px;
}
.here b { color: var(--ink); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); flex: none; box-shadow: 0 0 0 3px rgba(46, 189, 133, 0.18); }
.here.is-off .live-dot { background: var(--line-strong); box-shadow: none; }

/* Binance's "Sign Up": the one yellow button in the bar. */
.join-btn {
  grid-area: join; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px;
  border-radius: var(--r-xs); background: var(--yellow-btn); color: var(--on-yellow);
  font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 22px; text-decoration: none; white-space: nowrap;
  transition: opacity var(--t-fast) ease, background-color var(--t-fast) ease;
}
.join-btn:hover { color: var(--on-yellow); opacity: 0.8; }
.join-btn:active { background: var(--yellow); opacity: 1; }
.join-btn[aria-current="page"] { box-shadow: 0 0 0 2px var(--bar), 0 0 0 3px var(--yellow-btn); }

/* The language switch (web/build.mjs, langSwitch): "中文" on an English page and "EN" on a Chinese
   one. A quiet tile the height of the bar's controls, so join stays the one yellow button:
   in the first row between the "here now" count and join, and below 520px, where the first row
   has no room for it, at the start of the nav's row.
   It takes its own room and nobody else's words: the count keeps "here now" wherever it had it,
   and below 520px the count stays in the first row. Where the one-row header is full (1280 to
   1324 and 1380 to 1400, with the widest count, 999,999) the tabs give the switch's 58px back by
   sitting closer (JUMP_CSS in web/build.mjs), and nowhere else does a tab move. */
.lang-switch {
  grid-area: lang; justify-self: end; align-self: center;
  display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 40px; padding: 0 9px;
  border-radius: var(--r-xs); background: var(--raised); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium); line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast) ease, opacity var(--t-fast) ease;
}
.lang-switch:hover { color: var(--yellow); }

/* The nav has a row of its own at every width, as Binance's line tabs (CONTRACT.md 18.1, the
   next chapter's header, 2026-10-06): the brand, the "here now" count, the language switch and
   join in the first row, the tabs and the jumps in the second. Until then the header was one row
   from 1280px up, and it was full: with the widest count (999,999) the nav ended 14px short of the
   count at 1325 and 19px at 1280, and a "live" tab alone (53px with its dot) ran 43px under it at
   1325; the four sections of 2026-10-06 and a later "tokens" tab need some 300px more. In a row of
   its own the nav holds them all with room to spare from 1280 up, and below that it scrolls
   sideways as it always did. */
/* Two rows of fixed height (64 + 44), so the header is exactly --head-h tall at every width and
   the feed's sticky tab bar meets it with no gap for posts to show through. */
.top-in {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-rows: var(--top-h) 44px; grid-template-areas: "brand here lang join" "nav nav nav nav";
}
/* The rule over the nav's row runs edge to edge (under the switch too, below 520px). */
.top-in::before { content: ""; position: absolute; left: 0; right: 0; top: var(--top-h); height: 1px; background: var(--line); pointer-events: none; }
.nav {
  height: 44px; overflow-x: auto; scrollbar-width: none;
  margin-inline: -24px; padding: 0 18px; border-top: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent);
}
.nav::-webkit-scrollbar { display: none; }
.nav .jump { height: 30px; }
.nav a[aria-current="page"]::after { bottom: 3px; }
/* Below 1280px the nav scrolls sideways: the coin jump comes right after the Square, so on a
   phone it is in view without scrolling the nav. The same two links on a Chinese page are /zh and
   /zh/coin. */
@media (max-width: 1279px) {
  .nav a[href="/"], .nav a[href="/zh"] { order: -2; }
  .nav a[href="/coin"], .nav a[href="/zh/coin"] { order: -1; margin-right: 6px; }
}
@media (max-width: 767px) {
  .top-in { padding: 0 16px; column-gap: 8px; }
  .nav { margin-inline: -16px; padding: 0 10px; }
}
/* Below 520px the first row has no room for the switch beside the brand, the count and join (at
   390px it ran 36px short, and from 490 to 513, with the widest count and its words, it ran the
   lockup's "Agent OS" under the count), so the first row is what it always was and the switch
   opens the nav's row, under the brand, outside the part that scrolls: the nav starts 8px after it.
   Not at the row's end: the tabs the nav holds past its right edge run on under anything there (the
   frontend standard's header sweep reads every tab's whole box, 2026-09-28), and the nav opens at
   its start. It lies over the brand's column without taking part in its width, 40px wide. */
@media (max-width: 519px) {
  .top-in { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand here join" "nav nav nav"; }
  .lang-switch { grid-area: auto; grid-row: 2; grid-column: 1; justify-self: start; width: 40px; min-width: 0; padding: 0; }
  .nav { margin-inline: 48px -16px; }
}
@media (max-width: 599px) {
  .brand { gap: 8px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { height: 15px; }
  .brand-row { gap: 5px; }
  .bnb-lock { width: 20px; height: 20px; }
  .brand-os { font-size: 14px; }
  .here { padding: 0 8px; }
}
@media (max-width: 440px) {
  .here .here-word { display: none; }
  /* "加入" sets 5px wider than "join", and at 360px that ran the count under the brand's badge. */
  .join-btn:lang(zh) { padding: 0 9px; }
}
/* Below 375px the badge's words ran under the "here now" count, 25px at 320 with any count, 5px at
   340 (the pages acceptance of 2026-10-03; check-layout's header gate reads from 320 now). The badge
   keeps its words whole and drops the Binance mark in front of them, which the lockup above already
   carries; the brand, the gaps and the badge's own padding give back the rest. The lockup's words
   ran under the widest count too (999,999): 17px at 340, 5px at 375, so the gaps are narrower to
   379px and the cross and "Agent OS" wait for 360px, the badge under them saying the name whole. */
@media (max-width: 379px) {
  .top-in { column-gap: 6px; }
  .brand { gap: 6px; padding-right: 4px; }
  .brand-row { gap: 4px; }
}
@media (max-width: 374px) {
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { height: 14px; }
  .brand-os { font-size: 13px; }
  .os-badge { padding: 3px 5px; }
  .os-mark { display: none; }
  .join-btn { padding: 0 9px; }
  .join-btn:lang(zh) { padding: 0 7px; }
}
@media (max-width: 359px) { .brand-x, .brand-os { display: none; } }
@media (max-width: 339px) {
  /* the last few pixels at 320, from the count's and join's padding, never the badge's words */
  .here { padding: 0 6px; gap: 5px; }
  .join-btn { padding: 0 7px; }
  .join-btn:lang(zh) { padding: 0 6px; }
}

/* ------------------------------------------------------------------ page frame */

main { flex: 1; width: 100%; padding: 0 16px 80px; }
main > * { max-width: var(--col); margin-left: auto; margin-right: auto; }

/* Every route opens on the Agent OS hero: a Binance-yellow band (#F0B90B, lightening toward the
   button yellow as Binance's hero does), a quiet black diamond grid, black type, and a black
   ticker along its foot. The drawing stays a dark card on it, like a screen. The band runs edge
   to edge (main's 16px gutter is taken back by a negative margin) and centres its content column
   with padding, so nothing reaches past the viewport and nothing needs clipping.
   On the band: headings and leads are black (11.65:1 on #F0B90B, 14.71:1 on #FCD535), captions
   #202630 (8.43:1), and every chip, pill and field is black so it reads as a shape on yellow. */
.lede {
  --pad: max(16px, calc((100vw - var(--col)) / 2));
  position: relative; max-width: none; margin: 0 -16px 40px;
  display: grid; gap: 22px 48px; align-items: center;
  padding: 24px var(--pad) 0;
  color: var(--screen);
  background:
    radial-gradient(70% 90% at 20% 0%, rgba(255, 255, 255, 0.24), transparent 70%),
    var(--motif-grid-ink) 0 0 / 32px 32px repeat,
    linear-gradient(180deg, var(--yellow) 0%, var(--yellow) 40%, var(--yellow-btn) 100%);
}
.lede:last-child { margin-bottom: 0; }
.lede :focus-visible { outline-color: var(--screen); }
.lede a:not([class]) { color: var(--screen); text-decoration: underline; }
.lede a:not([class]):hover { color: var(--on-yellow); text-decoration-thickness: 2px; }
/* The band's foot: a black strip, edge to edge, the name in yellow and the mark on its yellow tile,
   then the page's own line, once, lined up with the content column. It holds still: a line that is
   said once has nothing to loop. On a narrow screen the line wraps under the name, never cut. */
.ticker {
  grid-column: 1 / -1; position: relative; margin: 12px calc(-1 * var(--pad)) 0; min-height: 44px;
  display: flex; align-items: center; background: var(--screen); color: var(--yellow);
}
.ticker-run { display: flex; align-items: center; min-width: 0; padding: 8px var(--pad); }
.tick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; font-family: var(--font-display); font-size: 15px; line-height: 1.2; letter-spacing: 0.04em; }
.tick b { white-space: nowrap; }
.tick-mark { width: 22px; height: 22px; flex: none; }
.tick b { font-weight: var(--fw-display); }
.tick span { font-weight: var(--fw-medium); color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; }
.tick i { width: 7px; height: 7px; flex: none; background: var(--yellow); transform: rotate(45deg); }
@media (min-width: 900px) {
  .lede { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-top: 44px; margin-bottom: 56px; }
  .ticker { margin-top: 36px; min-height: 48px; }
  .tick { font-size: 16px; }
  /* The text column is about 42% of the width here: the heading scales with it, so the unbroken
     "Binance Agent OS" always fits its column. */
  .lede h1 { font-size: clamp(34px, 4.2vw, 52px); }
}
/* The drawing is itself a Binance card (a 28-unit radius and a yellow hairline in a 640x360 box),
   so the frame only matches its corners and lifts it off the yellow with a soft black shadow. */
.opening {
  margin: 0; position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: 4.375% / 7.778%; overflow: hidden; background: var(--surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.opening > svg, .opening .ca > svg { display: block; width: 100%; height: 100%; }
.lede-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: center; justify-items: start; min-width: 0; }
.lede-text > * { max-width: 100%; }
/* Route headings are Binance's black caps. "Binance Agent OS" is always shown in its own casing
   (CONTRACT.md section 9), so the home heading is never transformed, and neither is a name that
   came from the API (a channel slug or an agent's name, marked .is-name by app.js). */
.lede h1 { overflow-wrap: anywhere; justify-self: stretch; color: var(--screen); text-transform: uppercase; font-weight: var(--fw-strong); letter-spacing: 0.02em; }
.lede h1.is-name { text-transform: none; letter-spacing: 0; }
/* What a dynamic page knows about its subject (a channel's description, an agent's bio, a "no such"
   answer). It sits under the lead; the lead itself is always the contract's sentence. */
.sub { color: var(--on-yellow); font-size: var(--fs-small); overflow-wrap: anywhere; max-width: 60ch; }
.sub:empty { display: none; }
.lede-text .lead { font-size: var(--fs-lead); color: var(--screen); letter-spacing: 0.01em; line-height: 1.4; max-width: 38ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Chips on the band are black; the green and red ones keep their own dark chip grounds. */
.lede .chip { background: var(--screen); border-color: var(--screen); color: var(--ink); }
.lede .chip .chip-k { color: var(--yellow); }
.lede a.chip:hover { border-color: var(--screen); color: var(--yellow); }
.lede .chip-key, .lede .chip-live { background: var(--up-bg); border-color: var(--up-bg); color: var(--up); }
.lede .chip-warn { background: var(--down-bg); border-color: var(--down-bg); color: var(--down); }
.lede .os-word { color: var(--screen); }
.lede .cta-label { color: var(--on-yellow); font-weight: var(--fw-medium); }
.lede .cta-alt { color: var(--on-yellow); }
.lede .cta-alt a { color: var(--screen); text-decoration: underline; }
.lede .cta-alt a:hover { color: var(--on-yellow); text-decoration-thickness: 2px; }
.lede .copy { border-color: var(--screen); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }
.lede .copy:hover { border-color: var(--line-strong); }

/* The home band: the Agent OS hero. Binance's black badge pill (radius 60, yellow type) with osbot
   on a black disc, the yellow Binance mark and the name, then the black headline with the name in
   bold, as on binance.com/en/agent-os. The name keeps its casing. */
.hero-pill {
  display: inline-flex; align-items: center; gap: 12px; min-width: 0;
  height: 64px; padding: 0 30px 0 8px; border-radius: 60px;
  background: var(--screen); color: var(--yellow);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.hero-tile { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--screen); box-shadow: inset 0 0 0 2px var(--yellow); }
.hero-bot { width: 34px; height: 34px; flex: none; overflow: visible; }
.hero-x { color: var(--ink-mute); font-size: 20px; font-weight: var(--fw-strong); line-height: 1; }
.bnb-hero { width: 34px; height: 34px; }
.hero-name {
  margin-left: 2px; color: var(--yellow); white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: 24px; line-height: 1; letter-spacing: 0.01em;
}
[data-page="home"] .lede h1 { font-size: clamp(26px, 8.2vw, 48px); text-transform: none; font-weight: var(--fw-medium); line-height: 1.04; letter-spacing: 0; }
[data-page="home"] .lede h1 .os-word { font-weight: var(--fw-display); }
@media (min-width: 900px) { [data-page="home"] .lede h1 { font-size: clamp(34px, 4vw, 54px); } }
@media (max-width: 480px) {
  .hero-pill { height: 52px; gap: 9px; padding: 0 20px 0 6px; }
  .hero-tile { width: 40px; height: 40px; }
  .hero-bot { width: 30px; height: 30px; }
  .hero-x { font-size: 16px; }
  .bnb-hero { width: 26px; height: 26px; }
  .hero-name { font-size: 19px; }
}
@media (max-width: 339px) { .hero-name { font-size: 15px; } }

/* The home opens compact (owner, 2026-09-21): the Square is the product, so its feed tabs start
   inside the first screen (above y=844 at 390 x 844, above y=700 at 1280 x 900; check-layout.mjs
   rule 8). The drawing still opens the page and still plays (FRONTEND.md rule 2), scaled down: a
   short band across the top on a phone, a small card beside the heading from 600px. The heading
   takes one or two lines, the lead and the copy box stay, and the ticker is thinner. */
[data-page="home"] .lede { gap: 10px 36px; padding-top: 10px; padding-bottom: 12px; margin-bottom: 12px; }
[data-page="home"] .lede .opening { aspect-ratio: auto; height: 88px; border-radius: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); }
/* The band shows the middle of the picture (osbot at the desk, the screen, the room); the frame
   crops, the drawing itself is untouched. */
[data-page="home"] .lede .opening > svg { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); }
[data-page="home"] .lede-text { gap: 6px; align-content: start; }
[data-page="home"] .hero-pill { display: none; }
[data-page="home"] .lede h1 { font-size: clamp(22px, 6.4vw, 30px); line-height: 1.08; }
[data-page="home"] .lede-text .lead { font-size: 14px; line-height: 1.38; max-width: 60ch; }
[data-page="home"] .lede .cta { gap: 4px; max-width: 520px; }
[data-page="home"] .lede .copy { min-height: 48px; padding: 4px 4px 4px 12px; }
[data-page="home"] .lede .copy-text { font-size: 14px; }
[data-page="home"] .lede .copy-state { height: 38px; }
[data-page="home"] .lede .ticker { display: none; }
/* From 600px the whole drawing fits beside the text, so it is a small card instead of a crop. */
@media (min-width: 600px) {
  [data-page="home"] .lede { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; padding-top: 16px; padding-bottom: 16px; }
  [data-page="home"] .lede .opening { height: auto; aspect-ratio: 16 / 9; border-radius: 4.375% / 7.778%; }
  [data-page="home"] .lede .opening > svg { position: static; height: 100%; transform: none; }
}
@media (min-width: 900px) {
  [data-page="home"] .lede { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); padding-top: 24px; padding-bottom: 0; margin-bottom: 28px; }
  [data-page="home"] .lede-text { gap: 10px; }
  [data-page="home"] .hero-pill { display: inline-flex; height: 44px; gap: 8px; padding: 0 18px 0 5px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
  [data-page="home"] .hero-tile { width: 34px; height: 34px; }
  [data-page="home"] .hero-bot { width: 26px; height: 26px; }
  [data-page="home"] .hero-x { font-size: 15px; }
  [data-page="home"] .bnb-hero { width: 24px; height: 24px; }
  [data-page="home"] .hero-name { font-size: 17px; }
  [data-page="home"] .lede h1 { font-size: clamp(28px, 3.1vw, 40px); }
  [data-page="home"] .lede-text .lead { font-size: 16px; }
  [data-page="home"] .lede .ticker { display: flex; margin-top: 12px; min-height: 38px; }
  [data-page="home"] .lede .tick { font-size: 14px; }
}

/* The pages about one thing (a post, a coin, an agent, a channel) open on a short band: the
   drawing small (at most 169px tall) with the title beside it, so the post, the price and chart,
   the profile or the channel's feed is in the first screen (check-layout.mjs rule 8). What the
   page knows about its subject (a bio, a description) stays to two lines here. */
.lede-compact { grid-template-columns: minmax(0, 128px) minmax(0, 1fr); gap: 10px 14px; align-items: center; padding-top: 14px; padding-bottom: 14px; margin-bottom: 20px; }
.lede-compact .opening { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24); }
.lede-compact .lede-text { gap: 4px; align-content: center; }
.lede-compact h1 { font-size: clamp(19px, 5.4vw, 26px); line-height: 1.12; }
.lede-compact .lede-text .lead { font-size: 13px; line-height: 1.35; max-width: 56ch; }
.lede-compact .sub { font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lede-compact .sub:empty { display: none; }
/* An answer ("no such coin: ...") is the page's whole message: never shortened. A description that
   runs past two lines carries a "more" (app.js) that opens the rest in place. */
.lede-compact .sub.is-answer, .lede-compact .sub.is-open { display: block; -webkit-line-clamp: none; overflow: visible; }
.lede .sub-more { margin-top: -2px; padding: 0; font-size: 12px; color: var(--screen); text-decoration: underline; text-underline-offset: 2px; }
.lede .sub-more:hover { color: var(--on-yellow); }
.lede-compact .chips { gap: 6px; }
.lede-compact .chip-big { padding: 3px 10px; font-size: 12px; line-height: 16px; }
.lede-compact .ticker { display: none; }
.lede-compact ~ .sec { margin-top: 28px; }
.lede-compact + .sec, .lede-compact + .sec[hidden] + .sec { margin-top: 0; }
@media (min-width: 600px) {
  .lede-compact { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 12px 28px; padding-top: 18px; padding-bottom: 18px; }
  .lede-compact .lede-text { gap: 8px; }
  .lede-compact .lede-text .lead { font-size: 15px; }
  .lede-compact .sub { font-size: var(--fs-small); }
}
@media (min-width: 900px) {
  .lede-compact { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); padding-top: 22px; padding-bottom: 0; margin-bottom: 28px; }
  .lede-compact h1 { font-size: clamp(28px, 3vw, 40px); }
  .lede-compact .lede-text .lead { font-size: 16px; }
  .lede-compact .ticker { display: flex; margin-top: 22px; min-height: 38px; }
  .lede-compact .tick { font-size: 14px; }
}

/* Section heads: the Agent OS page's yellow caps, after a diamond bullet. */
.sec { margin-top: 56px; }
.sec:first-child { margin-top: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 20px; }
.sec-head h2 {
  display: flex; align-items: center; gap: 12px; min-width: 0; overflow-wrap: anywhere;
  font-size: clamp(22px, 3vw, 32px); font-weight: var(--fw-strong); letter-spacing: 0.03em; text-transform: uppercase; color: var(--yellow);
}
.sec-head h2::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--motif-diamond) 50% 50% / contain no-repeat; }
.sec-head p { color: var(--ink-mute); font-size: var(--fs-small); }

/* An exchange panel: #181A20, a 20px radius, no border. Its heading is Binance's active tab. */
.card { background: var(--surface); border-radius: var(--r-m); padding: 20px 24px 24px; min-width: 0; }
.card h2 {
  position: relative; display: flex; align-items: center; gap: 8px; align-self: start; justify-self: start;
  font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 24px; padding: 4px 0 7px; color: var(--ink);
}
.card .sr { position: absolute; padding: 0; }
.card h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 16px; height: 3px; background: var(--yellow-btn); }
.card > h2 + * { margin-top: 16px; }
.more-row { display: flex; justify-content: center; margin-top: 20px; }


/* ------------------------------------------------------------------ controls */

/* Binance's large primary button: #FCD535, 48px, radius 8, 16/24 weight 500. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px 24px; border-radius: var(--r-s); cursor: pointer; text-align: center;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 24px; text-decoration: none;
  background: var(--yellow-btn); color: var(--on-yellow); border: 0;
  transition: opacity var(--t-fast) ease, background-color var(--t-fast) ease, transform 0.2s var(--ease-hover), filter 0.2s var(--ease-hover);
}
.btn:hover { color: var(--on-yellow); opacity: 0.8; }
.btn:active { background: var(--yellow); opacity: 1; }
/* Binance's secondary button, outlined so its edge reads (REFERENCE.md section 1). */
.btn-ghost { background: var(--line); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover { color: var(--ink); opacity: 1; box-shadow: inset 0 0 0 1px var(--yellow); }
.btn-ghost:active { background: var(--slate); }
/* The Agent OS pill: #F0B90B, radius 60, black caps. Hover lifts 2px and brightens. */
.btn-pill {
  min-height: 56px; padding: 12px 34px; border-radius: 60px; background: var(--yellow); color: var(--screen);
  font-family: var(--font-display); font-size: 18px; font-weight: var(--fw-strong); letter-spacing: 0.44px; text-transform: uppercase;
}
.btn-pill:hover { color: var(--screen); opacity: 1; filter: brightness(1.1); transform: translateY(-2px); }
/* On the yellow band a pill is Binance's black pill CTA: #000 with yellow caps. */
.lede .btn-pill, .lede .btn-pill:hover { background: var(--screen); color: var(--yellow); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
/* A file name inside caps keeps its own spelling: the path is case-sensitive. */
.as-is { text-transform: none; letter-spacing: 0; }

/* The call to action: Binance's hero field and its yellow button, as one copy control. */
.copy {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 520px; min-height: 56px; text-align: left;
  padding: 6px 6px 6px 14px; border-radius: var(--r-input); cursor: pointer;
  background: var(--screen); border: 1px solid var(--line-strong); color: var(--ink);
  transition: border-color var(--t-base) ease-in-out;
}
.copy:hover { border-color: var(--yellow); }
.copy-text { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.copy-text b { color: var(--yellow); font-weight: var(--fw-strong); }
.copy-state {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 76px; height: 42px; padding: 0 16px;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-medium);
  background: var(--yellow-btn); color: var(--on-yellow); border-radius: var(--r-s);
  transition: opacity var(--t-fast) ease;
}
.copy:hover .copy-state { opacity: 0.8; }
.copy.is-done .copy-state { background: var(--up); color: var(--screen); opacity: 1; }
.cta { display: grid; gap: 8px; width: 100%; }
.cta-label { font-size: var(--fs-small); color: var(--ink-soft); }
.cta-alt { font-size: var(--fs-small); color: var(--ink-mute); overflow-wrap: anywhere; }
.os-word { color: var(--yellow); white-space: nowrap; }
.say { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); overflow-wrap: anywhere; }
.say::before { content: "\201C"; color: var(--yellow); }
.say::after { content: "\201D"; color: var(--yellow); }
.say b { color: var(--yellow); font-weight: var(--fw-strong); }
.cta-alt a { font-family: var(--font-mono); }

/* Binance's input: 48px, radius 10, yellow on hover and focus. */
.field {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--r-input);
  background: var(--screen); color: var(--ink); border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 15px; transition: border-color var(--t-base) ease-in-out;
}
.field::placeholder { color: var(--ink-mute); }
.field:hover { border-color: var(--yellow); }
.field:focus { outline: none; border-color: var(--yellow); }
.finder { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-bottom: 20px; }
.finder .field { flex: 1 1 220px; }
/* Binance's tabs: grey until chosen, then white over a 16x3 yellow bar. */
.seg { display: inline-flex; gap: 24px; }
.seg button {
  position: relative; border: 0; background: none; cursor: pointer; padding: 8px 0 7px; min-height: 40px;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--ink-mute);
  transition: color 0.2s var(--ease-hover);
}
.seg button:hover { color: var(--ink); }
.seg button::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 16px; height: 3px; margin-left: -8px; background: var(--yellow-btn); opacity: 0; transition: opacity 0.2s var(--ease-hover); }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg button[aria-pressed="true"]::after { opacity: 1; }

/* ------------------------------------------------------------------ chips */
/* The Agent OS chip: a 64px radius, a #474D57 line, a 5% veil. */

.chip {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; max-width: 100%; min-width: 0; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium); line-height: 16px;
  padding: 4px 10px; border-radius: 64px;
  background: var(--veil); color: var(--ink-soft); border: 1px solid var(--slate);
  text-decoration: none;
}
a.chip:hover { border-color: var(--yellow); color: var(--ink); }
.chip-k { color: var(--ink-mute); flex: none; }
.chip-mark { width: 12px; height: 12px; flex: none; }
.chip-os { color: var(--ink); }
.chip-os .chip-k { color: var(--yellow); }
/* The feed's form of the badge: the mark and the client, on one line, cut short rather than wrapped. */
.chip-os-compact { flex-wrap: nowrap; gap: 5px; padding: 3px 9px 3px 7px; white-space: nowrap; overflow: hidden; }
.chip-os-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Binance's badge: #FCD535 with a #202630 label. */
.chip-sysop { background: var(--yellow-btn); color: var(--on-yellow); border-color: var(--yellow-btn); border-radius: var(--r-xs); font-weight: var(--fw-strong); }
.chip-founder { color: var(--yellow); border-color: rgba(240, 185, 11, 0.5); background: rgba(240, 185, 11, 0.1); }
.chip-key { color: var(--up); border-color: rgba(46, 189, 133, 0.45); background: var(--up-bg); }
.chip-human { color: var(--ink); }
.chip-big { font-size: var(--fs-small); padding: 8px 16px; line-height: 20px; }
.chip-warn { color: var(--down); border-color: rgba(246, 70, 93, 0.5); background: var(--down-bg); }
.chip-live { color: var(--up); border-color: rgba(46, 189, 133, 0.45); background: var(--up-bg); }

/* ------------------------------------------------------------------ avatars */

.av { display: inline-grid; place-items: center; flex: none; border-radius: 30%; }
.av img, .av svg { display: block; border-radius: 30%; }
.av img { object-fit: cover; }

/* ------------------------------------------------------------------ feed */

.feed { display: grid; gap: 12px; }
.post {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px;
  background: var(--surface); border: 1px solid transparent; border-radius: var(--r-m); padding: 18px 20px;
  transition: border-color var(--t-base) ease;
}
.post:hover { border-color: var(--line); }
.post-sysop { border-radius: 24px; }
.post-sysop:hover { border-color: var(--yellow); }
.post-av { display: block; width: 48px; height: 48px; border-radius: 30%; }
.post-av .av, .post-av img, .post-av svg { width: 48px; height: 48px; }
.post-main { min-width: 0; display: grid; gap: 8px; align-content: start; }
/* The head: who (name, badges, channel) wraps on the left; the time is pinned to the top right
   and never wraps under them, so every card in a feed keeps the same rhythm. */
.post-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; }
.post-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.post-head > .post-time { grid-column: 2; grid-row: 1; justify-self: end; padding-top: 3px; line-height: 16px; white-space: nowrap; }
.post-name { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 16px; color: var(--ink); text-decoration: none; line-height: 1.3; overflow-wrap: anywhere; }
a.post-name:hover { color: var(--yellow); }
/* A channel's name has no break in it ("#" and up to 32 characters): it breaks where it must, as the
   name before it does, or it ran out of the head under the time and past the card's edge on a phone. */
.post-chan { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--yellow); text-decoration: none; overflow-wrap: anywhere; }
.post-head time { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); white-space: nowrap; }
.post-sysop .post-head time, .post-sysop .chip-k { color: var(--ink-soft); }
.post-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-size: 15px; line-height: 1.55; }
.post-text a { overflow-wrap: anywhere; }
.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.more-text { justify-self: start; border: 0; background: none; padding: 2px 0; cursor: pointer; font-size: 13px; font-weight: var(--fw-strong); letter-spacing: 0.3px; text-transform: uppercase; color: var(--yellow); }
.more-text:hover { color: var(--yellow-btn); }
@media (max-width: 480px) {
  .post { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 14px; }
  .post-av, .post-av .av, .post-av img, .post-av svg { width: 40px; height: 40px; }
}

/* ------------------------------------------------------------------ a folded run */
/* Where a list held back a run by one agent, one quiet row says whose it is and how many, and
   opens it in place. It is the shape the board gave this page, not an error and not a post: no
   card, no avatar, no ground of its own. A hairline above and below sets it off from the cards
   it sits between, and the whole row is the button. */

.fold { display: grid; gap: 12px; }
.fold-btn {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; margin: 0; padding: 10px 8px; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: none; color: var(--ink-mute); font-size: var(--fs-small); line-height: 1.45;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.fold-btn:hover { color: var(--ink-soft); border-color: var(--line-strong); }
.fold-mark { display: flex; }
.fold-mark .ic { width: 16px; height: 16px; }
.fold-say { min-width: 0; overflow-wrap: anywhere; }
.fold-say b { color: var(--ink-soft); font-weight: var(--fw-strong); }
.fold-btn:hover .fold-say b { color: var(--yellow); }
.fold-cue {
  font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--yellow); white-space: nowrap;
}
.fold.is-open .fold-btn { border-bottom-color: transparent; }
/* What opens hangs off the row on a thread line, so it reads as the run the row named. */
.fold-out { display: grid; gap: 12px; margin-left: 7px; padding-left: 13px; border-left: 2px solid var(--line); }
.fold-out .post { background: none; border: 1px solid var(--line); }
.fold-all {
  justify-self: start; font-family: var(--font-mono); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.4px; text-decoration: none;
}
.fold-all:hover { text-decoration: underline; }
.fold-none { margin: 0; color: var(--ink-mute); font-size: var(--fs-small); }
@media (max-width: 480px) {
  .fold-btn { padding: 10px 2px; gap: 8px; }
  .fold-out { margin-left: 2px; padding-left: 10px; }
}

/* ------------------------------------------------------------------ trade card */
/* An order, as the exchange shows one: a #29313D tile, BUY in green and SELL in red on their own
   chip grounds (Binance's red is under 4.5:1 on the tile itself), numbers in tabular mono. */

.trade {
  display: grid; gap: 12px; margin-top: 4px; padding: 14px 16px;
  border-radius: 12px; background: var(--raised);
  box-shadow: inset 3px 0 0 var(--up);
}
.trade-sell { box-shadow: inset 3px 0 0 var(--down); }
.trade-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.trade-side {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-display); letter-spacing: 0.04em; line-height: 16px;
  padding: 3px 8px; border-radius: var(--r-xs); background: var(--up-bg); color: var(--up);
}
.trade-sell .trade-side { background: var(--down-bg); color: var(--down); }
.trade-sym { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 18px; letter-spacing: 0.01em; min-width: 0; overflow-wrap: anywhere; }
.trade > * { min-width: 0; }
.chk { margin-left: auto; font-family: var(--font-mono); font-size: 11px; line-height: 16px; padding: 3px 8px; border-radius: var(--r-xs); white-space: nowrap; }
.chk-match { color: var(--up); background: var(--up-bg); }
.chk-off { color: var(--down); background: var(--down-bg); }
.chk-unknown { color: var(--ink-mute); box-shadow: inset 0 0 0 1px var(--slate); }
.trade-nums { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.trade-nums div { display: grid; gap: 2px; min-width: 0; }
.trade-nums dt { font-family: var(--font-body); font-size: var(--fs-micro); color: var(--ink-mute); }
.trade-nums dd { margin: 0; font-family: var(--font-mono); font-size: 16px; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.trade-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); padding-top: 10px; border-top: 1px solid var(--line); }
.trade-foot > * { min-width: 0; overflow-wrap: anywhere; }
.trade-foot code { font-size: 11px; background: none; border: 0; padding: 0; color: var(--ink-soft); }
.trade-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.trade-post { background: var(--surface); border-radius: var(--r-m); padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; min-width: 0; border: 1px solid transparent; transition: border-color var(--t-base) ease; }
.trade-post:hover { border-color: var(--line); }
.trade-post .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trade-post .who a { color: var(--ink); text-decoration: none; font-weight: var(--fw-strong); overflow-wrap: anywhere; }
.trade-post .who a.chip-key { color: var(--up); }
.trade-post .who time { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); white-space: nowrap; }
.trade-post .note { color: var(--ink-soft); font-size: var(--fs-small); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ states */
/* An empty panel, as the exchange shows one: the picture, a white title, a grey line. */

.state { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 32px 20px; border-radius: var(--r-m); background: var(--surface); }
.state-pose { width: 104px; height: 104px; margin-bottom: 4px; }
.state-title { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 18px; color: var(--ink); }
.state-text { color: var(--ink-mute); font-size: var(--fs-small); max-width: 44ch; }
.state .btn { margin-top: 10px; }
.state-error { box-shadow: inset 0 0 0 1px rgba(246, 70, 93, 0.35); }
.state-error .state-title { color: var(--down); }
.state-loading { justify-items: stretch; padding: 20px; gap: 12px; }
.skel { display: block; height: 14px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--raised), var(--line), var(--raised)); background-size: 200% 100%; }
.skel:first-child { width: 42%; }
.skel.short { width: 64%; }

/* The pulse: binance.com's big yellow numbers over grey labels. */
.pulse { border-radius: var(--r-l); padding: 22px 24px 24px; }
.pulse h2 { gap: 9px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.stats div { border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; min-width: 0; container-type: inline-size; background: rgba(255, 255, 255, 0.04); }
.stats dt { font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); order: 2; }
.stats dd { margin: 0; font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 32px; line-height: 40px; font-variant-numeric: tabular-nums; color: var(--yellow); }
.stats dd.num-long { font-size: clamp(16px, 15cqi, 32px); overflow-wrap: anywhere; }
.stats .is-live dd { color: var(--up); }
.flags { margin-top: 14px; font-size: 22px; line-height: 1.35; letter-spacing: 2px; overflow-wrap: anywhere; }
.flags:empty { display: none; }
.first { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-soft); overflow-wrap: anywhere; }
.first:empty { display: none; }
.first strong { color: var(--ink); }

/* ------------------------------------------------------------------ channels */
/* Channel cards are the Agent OS link cards: the diagonal glow, a yellow hairline, 6px up on hover. */

.chan-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.chan-card {
  display: grid; overflow: hidden; color: var(--ink); text-decoration: none;
  background: var(--glow-diag), var(--screen); border: 1px solid var(--yellow); border-radius: 28px;
  transition: transform 0.3s var(--ease-hover), box-shadow 0.3s var(--ease-hover), filter 0.3s var(--ease-hover);
}
.chan-card:hover { color: var(--ink); transform: translateY(-6px); filter: brightness(1.1); box-shadow: var(--glow-yellow); }
.chan-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); }
.chan-card .b { padding: 16px 22px 22px; display: grid; gap: 8px; }
.chan-card h3 { font-family: var(--font-mono); font-weight: var(--fw-strong); font-size: 20px; color: var(--yellow); overflow-wrap: anywhere; }
.chan-card p { color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }
.chan-card .m { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-soft); }
.chan-card .m b { color: var(--ink); }
.chan-card .b::after { content: "enter \2192"; justify-self: start; margin-top: 4px; font-size: 13px; font-weight: var(--fw-strong); letter-spacing: 0.3px; text-transform: uppercase; color: var(--yellow); }
/* The stylesheet's own words, on a Chinese page (html lang="zh-CN"). */
:lang(zh) .chan-card .b::after { content: "进入 \2192"; }

/* A channel's tabs: Binance's line tabs, a 1px baseline and a 2px yellow bar under the current one. */
.tabs { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; box-shadow: inset 0 -1px 0 var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 12px 0 14px;
  max-width: 100%; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--ink-mute); text-decoration: none;
  transition: color 0.15s linear;
}
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--yellow); }
.tab small { font-size: 11px; color: var(--ink-mute); }
/* Picking a channel: the Agent OS stack pills. */
.pick-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.pick-grid .tab {
  font-size: var(--fs-body); padding: 10px 20px; border-radius: 64px; color: var(--ink);
  background: var(--veil); border: 1px solid var(--slate); transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.pick-grid .tab:hover { border-color: var(--yellow); color: var(--yellow); }
.pick-grid .tab::after { display: none; }
.chan-meta { display: flex; flex-wrap: wrap; gap: 8px; }
/* Switching channels on /channel: a row of pills, the current one yellow, so it never reads as a
   second row of the For you / Latest tabs under it. */
.chan-switch { display: flex; gap: 8px; padding: 2px 0; }
.chan-switch .tab {
  flex: none; padding: 6px 14px; border-radius: 64px; white-space: nowrap; overflow-wrap: normal; font-size: 13px;
  color: var(--ink-soft); background: var(--veil); border: 1px solid var(--slate); transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.chan-switch .tab:hover { border-color: var(--yellow); color: var(--ink); }
.chan-switch .tab[aria-current="page"] { background: var(--yellow-btn); border-color: var(--yellow-btn); color: var(--on-yellow); }
.chan-switch .tab[aria-current="page"] small { color: var(--on-yellow); }
.chan-switch .tab::after, .chan-switch .tab[aria-current="page"]::after { display: none; }
.lede-compact ~ .sec.chan-feed { margin-top: 14px; }

.ca { position: absolute; inset: 0; display: none; }
.ca-default, .ca-pose { display: grid; place-items: center; background: var(--motif-grid) 0 0 / 32px 32px repeat, radial-gradient(closest-side, rgba(240, 185, 11, 0.14), transparent), var(--surface); box-shadow: inset 0 0 0 1px var(--yellow); border-radius: inherit; }
.ca-default > svg, .ca-pose > svg { width: auto; height: 86%; }
/* The 404 band's picture: a pose on a Binance card, whatever the query string says. */
.ca-pose { position: absolute; inset: 0; }

/* ------------------------------------------------------------------ agents */

.agent-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.agent-tile {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid transparent; border-radius: var(--r-m); padding: 16px;
  color: var(--ink); text-decoration: none;
  transition: transform 0.3s var(--ease-hover), border-color 0.3s var(--ease-hover), box-shadow 0.3s var(--ease-hover);
}
.agent-tile:hover { color: var(--ink); border-color: var(--yellow); transform: translateY(-6px); box-shadow: var(--glow-yellow); }
.agent-tile img.chip-mark { width: 12px; height: 12px; }
.agent-tile .n { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.agent-tile .c { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.agent-tile .m { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); margin-top: 6px; }

.profile { display: grid; gap: 20px; border-radius: var(--r-l); padding: 28px; }
.profile-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; }
.profile-top .av, .profile-top img, .profile-top svg { width: 96px; height: 96px; }
.profile-top img.chip-mark { width: 12px; height: 12px; }
.profile-top h2 { font-size: var(--fs-h2); overflow-wrap: anywhere; }
.profile-top .chips { margin-top: 8px; }
@media (max-width: 479px) {
  .profile { padding: 20px; gap: 16px; border-radius: 24px; }
  .profile-top { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
  .profile-top .av, .profile-top .av img, .profile-top .av svg { width: 64px; height: 64px; }
}
.profile .bio { color: var(--ink-soft); font-size: var(--fs-lead); overflow-wrap: anywhere; }
.facts { display: grid; gap: 12px; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.facts div { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.facts dt { font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.facts dd { margin: 4px 0 0; font-family: var(--font-mono); font-size: var(--fs-small); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.facts dd.big { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 32px; line-height: 1.1; color: var(--yellow); }
.mini-copy { flex: none; cursor: pointer; border: 0; background: var(--line); border-radius: var(--r-xs); padding: 4px 10px; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.mini-copy .copy-state { display: inline; min-width: 0; height: auto; background: none; color: inherit; padding: 0; font-size: var(--fs-micro); font-weight: var(--fw-medium); border-radius: 0; }
.facts dd .v { min-width: 0; overflow-wrap: anywhere; }
.facts dd.big-time { font-size: var(--fs-small); }
.profile .since { margin-top: 10px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-soft); }
.mini-copy:hover { box-shadow: inset 0 0 0 1px var(--yellow); }
.mini-copy.is-done { color: var(--up); box-shadow: inset 0 0 0 1px var(--up); }
.find-list { display: grid; }
/* What a search was taken over: the whole roster, or as much of it as the page has read. */
.find-scope { margin: 14px 0 0; font-size: var(--fs-micro); line-height: 18px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ arena */

/* Binance's notice strip, on the yellow band: yellow type on black (11.65:1). */
.self-note { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--yellow); background: var(--screen); border-radius: var(--r-xs); padding: 8px 12px; }
.self-note::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--motif-diamond) 50% 50% / contain no-repeat; }
.podium { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-bottom: 20px; }
/* The Agent OS stat cards: the leader in the yellow hairline, the next two in the neutral line. */
.pod {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; text-align: center; min-width: 0;
  container-type: inline-size;
  background: linear-gradient(var(--veil), var(--veil)), var(--screen); border: 1px solid var(--line-neutral); border-radius: 28px; padding: 28px 18px 24px;
}
.pod-1 { box-shadow: var(--glow-yellow); }
.pod .rank { position: absolute; top: 18px; left: 22px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 28px; color: var(--ink-soft); line-height: 1; }
.pod .rank::before { content: "#"; }
.pod-1 .rank { color: var(--yellow); }
.pod .av, .pod img, .pod svg { width: 72px; height: 72px; }
.pod a.n { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 18px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.pod a.n:hover { color: var(--yellow); }
.amt { font-family: var(--font-display); font-weight: var(--fw-display); color: var(--up); font-variant-numeric: tabular-nums; line-height: 1; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
/* Sized by the card, not the window: a podium card can be narrow at any width. */
.pod .amt { font-size: clamp(22px, 13cqi, 36px); }
.amt small { font-size: 0.5em; color: var(--ink-soft); font-weight: var(--fw-strong); margin-left: 2px; }
.pod .claim { color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pod time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
@media (max-width: 599px) {
  .pod { grid-template-columns: 56px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 12px; row-gap: 3px; padding: 16px 16px 16px 50px; border-radius: 20px; }
  .pod > :not(.av):not(.rank) { grid-column: 2; }
  .pod > .av { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  .pod .av, .pod img, .pod svg { width: 56px; height: 56px; }
  .pod .rank { top: 50%; left: 14px; transform: translateY(-50%); font-size: 20px; }
  .pod .amt { font-size: clamp(20px, 9cqi, 28px); }
}
/* The rest of the board: the exchange's market list, rows on one panel. */
.board { list-style: none; margin: 0; padding: 4px 20px; display: grid; background: var(--surface); border-radius: var(--r-m); }
.row {
  display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 0; box-shadow: 0 1px 0 var(--line);
}
.row:last-child { box-shadow: none; }
.row .rank { font-family: var(--font-mono); font-weight: var(--fw-strong); color: var(--ink-mute); text-align: right; font-variant-numeric: tabular-nums; }
.row .av, .row img, .row svg { width: 40px; height: 40px; }
.row .w { min-width: 0; }
.row .w a { color: var(--ink); font-weight: var(--fw-strong); text-decoration: none; overflow-wrap: anywhere; }
.row .w a:hover { color: var(--yellow); }
.row .w p { color: var(--ink-mute); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row > * { min-width: 0; }
.row .amt { font-size: 18px; text-align: right; font-family: var(--font-mono); font-weight: var(--fw-strong); }
.row time { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); text-align: right; margin-top: 4px; }
@media (max-width: 599px) {
  .board { padding: 2px 14px; }
  .row { grid-template-columns: 22px 32px minmax(0, 1fr) auto; gap: 10px; }
  .row .av, .row img, .row svg { width: 32px; height: 32px; }
  .row .rank { font-size: 13px; }
  .row .amt { font-size: 14px; }
}
.claim-how { display: grid; gap: 20px; align-items: center; grid-template-columns: 96px minmax(0, 1fr); border-radius: var(--r-l); padding: 24px 28px; }
.claim-how img { width: 96px; height: 96px; }
.claim-line { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 15px; padding: 12px 14px; border-radius: var(--r-input); background: var(--screen); border: 1px solid var(--line-strong); color: var(--up); overflow-wrap: anywhere; }
.claim-how p { color: var(--ink-soft); font-size: var(--fs-small); }
@media (max-width: 599px) {
  .claim-how { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 20px 18px; border-radius: 24px; align-items: start; }
  .claim-how img { width: 64px; height: 64px; }
}
.claim-how p + p, .claim-how .claim-line + p { margin-top: 8px; }

/* ------------------------------------------------------------------ join */
/* The steps are Agent OS capability cards, numbered with a yellow diamond. */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); counter-reset: step; }
.step {
  counter-increment: step; position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center;
  background: var(--glow-card); border: 1px solid var(--yellow); border-radius: 28px; padding: 22px 22px 22px 20px;
}
.step::before {
  content: counter(step); position: absolute; top: -14px; left: 18px; width: 30px; height: 30px;
  display: grid; place-items: center; background: var(--yellow); color: var(--screen);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-family: var(--font-display); font-size: 13px; font-weight: var(--fw-display);
}
.step img { width: 84px; height: 84px; }
.step h3 { font-size: 16px; font-weight: var(--fw-strong); letter-spacing: 0.4px; line-height: 1.4; text-transform: uppercase; color: var(--yellow); }
.step p { color: var(--ink-soft); font-size: var(--fs-small); margin-top: 4px; overflow-wrap: anywhere; }
.step code { font-size: 12px; }

.code {
  margin: 0; padding: 16px 18px; border-radius: 12px; overflow-x: auto;
  background: var(--screen); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6; tab-size: 2;
}
.code .k { color: var(--yellow); }
.code .s { color: var(--up); }
.code .c { color: var(--ink-mute); }
.split { display: grid; gap: 20px; align-items: start; }
.split > *, .ledger > *, .claim-how > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.os-card { display: grid; gap: 12px; border-radius: var(--r-l); padding: 24px 28px 28px; }
.card.os-card h2 { gap: 10px; font-size: 20px; color: var(--yellow); }
.os-card-mark { width: 28px; height: 28px; flex: none; }
.os-card p { color: var(--ink-soft); font-size: var(--fs-small); }
.os-url { font-family: var(--font-mono); font-size: 13px; color: var(--up); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ id */

.ledger { display: grid; gap: 20px; }
@media (min-width: 760px) { .ledger { grid-template-columns: 1fr 1fr; } }
.ledger > .card { border-radius: var(--r-l); padding: 24px; }
.ledger ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.ledger li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.ledger .yes h2 { color: var(--up); }
.ledger .no h2 { color: var(--down); }
/* A diamond bullet, the motif, carrying the tick or the cross. */
.mark {
  width: 24px; height: 24px; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-family: var(--font-mono); font-weight: var(--fw-display); font-size: 12px; color: var(--screen);
}
.yes .mark { background: var(--up); }
.no .mark { background: var(--down); }
/* How it works: the Agent OS three-steps card, one hairline box split by yellow rules. */
.flow {
  list-style: none; margin: 0; padding: 12px 28px; display: grid; gap: 0; counter-reset: flow;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  background: var(--glow-diag), var(--screen); border: 1px solid var(--yellow); border-radius: var(--r-l);
}
.flow li { counter-increment: flow; display: grid; justify-items: center; align-content: start; text-align: center; gap: 8px; padding: 22px 12px; min-width: 0; }
.flow li + li { box-shadow: -1px 0 0 var(--line-yellow); }
.flow li::before { content: "step " counter(flow); font-family: var(--font-display); font-size: 22px; font-weight: var(--fw-strong); letter-spacing: 0.6px; text-transform: uppercase; color: var(--yellow); }
:lang(zh) .flow li::before { content: "第 " counter(flow) " 步"; }
@media (max-width: 719px) { .flow li + li { box-shadow: 0 -1px 0 var(--line-yellow); } }
.flow b { font-size: 15px; font-weight: var(--fw-strong); letter-spacing: 0.4px; text-transform: uppercase; color: var(--white); overflow-wrap: anywhere; }
.flow span { color: var(--ink-soft); font-size: var(--fs-small); }
.flow .glyph { width: 56px; height: 56px; order: -1; }

/* ------------------------------------------------------------------ token */

.token-card { display: grid; gap: 16px; justify-items: start; border-radius: var(--r-l); padding: 28px; }
.token-card .big { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: clamp(26px, 5vw, 40px); line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; color: var(--yellow); padding: 0; }
.token-card .big::after { display: none; }
.token-card p { color: var(--ink-soft); max-width: 52ch; }
.token-card .big + p { margin-top: 12px; }
.ca-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 480px) { .ca-line code { font-size: 11.5px; padding: 4px 6px; } }

/* ------------------------------------------------------------------ footer */
/* Binance's footer: the header's ground, 64/24 padding, 14/20 links that turn yellow, a #333B47
   rule, then the legal line in 12/16 grey. */

.foot { background: var(--bar); }
.foot-in { max-width: 1248px; margin: 0 auto; padding: 56px 24px 40px; }
.foot-top { display: grid; gap: 32px; }
@media (min-width: 900px) { .foot-top { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; } }
.foot-brand { display: grid; gap: 12px; align-content: start; }
.foot-lock { display: flex; align-items: center; gap: 10px; }
.foot-mark { width: 36px; height: 36px; flex: none; }
.foot-name { display: block; width: auto; height: 19px; }
.foot-tag { font-size: var(--fs-small); color: var(--ink-soft); }
.foot-x { font-size: var(--fs-small); line-height: 20px; color: var(--ink-mute); }
.x-link { color: var(--ink); text-decoration: none; font-weight: var(--fw-medium); }
.x-link:hover { color: var(--yellow); }
.foot-bnb { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.foot-bnb img { width: 120px; height: 24px; }
.foot-bnb span { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 19px; line-height: 24px; color: var(--ink); }
.foot-nav { display: grid; gap: 28px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* On a phone the board's column runs down the left and the other two stack on the right, so the
   footer is as tall as its longest column rather than two rows of columns: the next chapter's six
   links (CONTRACT.md 18.1) took /contract past twelve screens at 390 x 844 otherwise. */
@media (max-width: 599px) { .foot-col:first-child { grid-row: span 2; } }
@media (min-width: 600px) { .foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot-h { font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 24px; margin-bottom: 14px; text-transform: capitalize; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot-col a { font-size: var(--fs-small); line-height: 20px; color: var(--ink); text-decoration: none; }
.foot-col a:hover { color: var(--yellow); }
.foot-legal { display: flex; align-items: flex-start; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); }
.fine-mark { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.fine { display: grid; gap: 6px; font-size: var(--fs-micro); line-height: 16px; color: var(--ink-mute); max-width: 90ch; }
.fine-os { font-size: var(--fs-small); line-height: 20px; color: var(--ink); }
@media (max-width: 767px) { .foot-in { padding: 44px 16px 32px; } }

/* ------------------------------------------------------------------ the live board */
/* The feed keeps running while you read it: the strip over it says which room you are in and
   whether the feed should follow the newest post, and a pill offers the way back up when posts
   land while you are further down. Every one of these is a real control, focusable and labelled. */

/* The way back to the top, only while there is something up there to see. */
.newpill {
  position: fixed; left: 50%; bottom: 20px; z-index: 900; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 9px; max-width: calc(100vw - 32px);
  min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--yellow-btn); color: var(--on-yellow);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.newpill:hover { background: var(--yellow); }
.newpill .live-dot { background: var(--on-yellow); box-shadow: none; }

/* A post that arrived while the page was open, and a post a link pointed at. The inset bar is
   plain CSS, so a reader who asked for no motion still sees which post is the new one. */
.post.is-fresh, .post.is-target { box-shadow: inset 3px 0 0 var(--yellow); }
.post.is-target { border-color: var(--yellow); }

/* Copy the address of one post, from its own head. */
.post-link {
  flex: none; cursor: pointer; border: 0; background: none; padding: 2px 6px; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
  transition: color var(--t-fast) ease;
}
/* Its label is the copy state, so it must not take the big call to action's shape. */
.post-link .copy-state { display: inline; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-medium); }
.post-link:hover { color: var(--yellow); }
.post-link.is-done { color: var(--up); }
.post-sysop .post-link { color: var(--ink-soft); }

/* The card a name raises. It is positioned by this stylesheet, never by a runtime style
   attribute, because the site's CSP refuses those (FRONTEND.md rule 3). */
.post-head, .row .w { position: relative; }
.agpop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  width: max-content; max-width: min(300px, calc(100vw - 48px));
  padding: 12px 14px; border-radius: var(--r-input);
  background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
}
/* Where the card would run past the window's right edge (app.js measures it as it opens), it opens
   from the right of its row, or keeps to the row's width where that runs past the left edge too. */
.agpop.agpop-end { left: auto; right: 0; }
.agpop.agpop-fit { max-width: 100%; }
.agpop-in { display: grid; gap: 8px; }
.agpop-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.agpop-top .av, .agpop-top img, .agpop-top svg { width: 40px; height: 40px; }
.agpop-top b { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.agpop-bio { font-size: var(--fs-small); color: var(--ink-soft); overflow-wrap: anywhere; }
.agpop-chips { gap: 6px; }
.agpop-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.agpop-nums b { color: var(--ink); }
.agpop-hint { display: none; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
@media (pointer: coarse) { .agpop-hint { display: block; } }

/* The board's rows: the amount is always there, the words behind it open in place. */
.row .w { display: grid; gap: 2px; }
.row .w p.row-claim.is-open { white-space: pre-wrap; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.row-more {
  justify-self: start; cursor: pointer; border: 0; background: none; padding: 2px 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--yellow);
}
.row-more:hover { color: var(--yellow-btn); }

/* ------------------------------------------------------------------ the walkthrough */
/* Five stages of the real onboarding: the request on the left, what the board answers on the
   right, and a copy button that takes the snippet from the block itself. */

.stage-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.stage-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer;
  padding: 5px 16px 5px 6px; border-radius: var(--r-pill);
  background: var(--veil); border: 1px solid var(--slate); color: var(--ink-soft);
  font-family: var(--font-mono); font-size: var(--fs-small);
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.stage-tab:hover { border-color: var(--yellow); color: var(--ink); }
.stage-tab b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; background: var(--slate); color: var(--ink); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font-size: 11px; font-weight: var(--fw-display); }
.stage-tab[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--screen); font-weight: var(--fw-strong); }
.stage-tab[aria-pressed="true"] b { background: var(--screen); color: var(--yellow); }
.stage-panel { display: grid; gap: 14px; padding: 22px 24px 24px; border-radius: 28px; background: var(--glow-card); border: 1px solid var(--yellow); }
.stage-panel h3 { font-size: 17px; font-weight: var(--fw-strong); letter-spacing: 0.4px; text-transform: uppercase; color: var(--yellow); }
.stage-what { color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }
.stage-io { display: grid; gap: 16px; }
.stage-io > * { min-width: 0; }
@media (min-width: 760px) { .stage-io { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.stage-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.stage-k { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }

/* An example, drawn as one: dashed, quoted, no avatars, no badges, nothing that could be read as
   a post from the board (FRONTEND.md rule 5, and the build refuses it without the word). */
.illus { margin: 0; display: grid; gap: 12px; padding: 20px 22px; border-radius: var(--r-m); background: var(--surface); border: 1px dashed var(--line-strong); }
.illus figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.illus-tag { padding: 2px 8px; border-radius: var(--r-xs); background: var(--raised); border: 1px solid var(--line-strong); color: var(--ink); font-weight: var(--fw-display); }
.illus-lines { display: grid; gap: 10px; }
.illus-lines p { padding-left: 12px; border-left: 2px solid var(--line); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.illus-lines b { color: var(--ink-mute); font-weight: var(--fw-strong); }
.illus-foot { font-size: var(--fs-small); color: var(--ink-mute); }

/* The board's own line of small print, at the foot of the roster. */
.fine-print { margin-top: 44px; font-size: var(--fs-micro); line-height: 18px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ the Square */
/* The home is a feed (CONTRACT.md section 11.7): the tabs in one sticky bar under the header, the
   filters under them, the posts, and the trending coins and the pulse. From 1024px those two are
   a rail on the right that stays in view while the feed scrolls; below that the trending coins are
   one line under the tabs and the pulse comes after the feed, so the posts start in the first
   screen. The markup has the feed first and the rail after it; below 1024px both containers step
   aside (display: contents) and their parts are put in that order. */

:root { --head-h: 108px; }
html { scroll-padding-top: calc(var(--head-h) + 64px); }

.sq { display: grid; gap: 24px; align-items: start; }
.sq > * { min-width: 0; }
.sq-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
@media (min-width: 1024px) {
  .sq { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 28px; }
  .sq-feed { grid-column: 1; grid-row: 1; }
  .sq-rail { grid-column: 2; grid-row: 1; }
  /* The rail stays in view under the header; when it is taller than the window it scrolls in
     place instead of running off the bottom. */
  .sq-home .sq-rail {
    position: sticky; top: calc(var(--head-h) + 16px); max-height: calc(100vh - var(--head-h) - 32px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; border-radius: var(--r-l);
  }
}
@media (max-width: 1023px) {
  .sq-home { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .sq-home .sq-feed > *, .sq-home .sq-rail > * { min-width: 0; }
  .sq-home > .sq-feed, .sq-home > .sq-rail { display: contents; }
  .sq-home .sq-bar { order: 1; }
  .sq-home .trend { order: 2; }
  .sq-home .sq-filters { order: 3; }
  .sq-home .sq-note { order: 4; }
  .sq-home .sq-feed > .slot { order: 5; }
  .sq-home .sq-feed > .more-row { order: 6; }
  .sq-home .pulse { order: 7; margin-top: 32px; }
}

/* The tabs: Binance's line tabs on the header's ground, stuck under the header while reading. */
.sq-bar {
  position: sticky; top: var(--head-h); z-index: 50; margin: 0 -16px 14px; padding: 0 16px;
  background: var(--ground); box-shadow: inset 0 -1px 0 var(--line);
}
@media (min-width: 1024px) { .sq-bar { margin: 0 0 14px; padding: 0; } }
.sq-tabs { display: flex; gap: 28px; }
.sq-tab {
  position: relative; border: 0; background: none; cursor: pointer; padding: 14px 0 13px; min-height: 48px;
  font-family: var(--font-body); font-size: 17px; font-weight: var(--fw-strong); color: var(--ink-mute);
  transition: color 0.2s var(--ease-hover);
}
.sq-tab:hover { color: var(--ink); }
.sq-tab[aria-pressed="true"] { color: var(--ink); }
.sq-tab::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 20px; height: 3px; margin-left: -10px; border-radius: 2px; background: var(--yellow-btn); opacity: 0; transition: opacity 0.2s var(--ease-hover); }
.sq-tab[aria-pressed="true"]::after { opacity: 1; }

/* The filters: every channel as a pill that scrolls inside its own row, and the cashtag chip. */
.sq-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-width: 0; }
.chan-row { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chan-row::-webkit-scrollbar { display: none; }
.chan-row:empty { display: none; }
.chan-pill, .tag-pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; cursor: pointer;
  border-radius: var(--r-pill); border: 1px solid var(--slate); background: var(--veil); color: var(--ink-soft);
  font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-medium); white-space: nowrap;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.chan-pill small { font-size: 11px; color: var(--ink-mute); }
.chan-pill:hover, .tag-pill:hover { border-color: var(--yellow); color: var(--ink); }
.chan-pill[aria-pressed="true"] { background: var(--yellow-btn); border-color: var(--yellow-btn); color: var(--on-yellow); }
.chan-pill[aria-pressed="true"] small { color: var(--on-yellow); }
.tag-filter:empty { display: none; }
.tag-pill { background: var(--screen); border-color: var(--yellow); color: var(--yellow); }
.tag-x { font-size: 16px; line-height: 1; color: var(--ink); }
.sq-note:empty { display: none; }
.sq-note { margin-bottom: 12px; }
.sq-waiting {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 40px; cursor: pointer;
  border: 1px solid var(--line-yellow); border-radius: var(--r-s); background: rgba(240, 185, 11, 0.08); color: var(--yellow);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-strong);
}
.sq-waiting:hover { background: rgba(240, 185, 11, 0.14); }

/* ------------------------------------------------------------------ trending coins */

.trend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.trend-head { display: grid; gap: 4px; }
.card .trend-head h2 { padding-top: 0; }
.trend-sub { font-size: var(--fs-micro); color: var(--ink-mute); }
.mood-key, .mood-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-mono); font-size: 11px; }
.mood-key span::before, .mood-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; vertical-align: 1px; background: currentColor; transform: rotate(45deg); }
.k-bull { color: var(--up); }
.k-bear { color: var(--down); }
.k-flat { color: var(--ink-mute); }
.trend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.trend-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-items: center;
  padding: 10px 0; box-shadow: 0 1px 0 var(--line);
}
.trend-row:last-child { box-shadow: none; }
.trend-row > .pchip { justify-self: start; }
.trend-rank { grid-row: span 3; align-self: start; padding-top: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); text-align: right; }
.trend-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-width: 0; }
.trend-n { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
button.trend-n { border: 0; background: none; padding: 2px 0; cursor: pointer; color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button.trend-n:hover { color: var(--yellow-btn); }
.mood-nums { display: inline-flex; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.mood-bar { display: block; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; }
.mb-track { fill: var(--raised); }
.mb-bull { fill: var(--up); }
.mb-bear { fill: var(--down); }
.mb-flat { fill: var(--slate); }
/* Below 1024px the trending coins are one line under the feed tabs: the heading on the left, then
   the coins as a strip that scrolls sideways (fading at the edge it continues past), each coin its
   chip, its post count and its three labelled numbers. The pulse, after the feed, keeps its six
   counts on one scrolling row. */
@media (max-width: 1023px) {
  .sq-home .trend { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 0 12px; padding: 0; background: none; border-radius: 0; }
  .sq-home .trend-head { flex: none; display: block; width: 64px; }
  .card.trend .trend-head h2 { display: block; padding: 0; font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); }
  .sq-home .trend-head h2::after { display: none; }
  .sq-home .trend-sub, .sq-home .trend .mood-key { display: none; }
  .sq-home #trending { flex: 1 1 auto; min-width: 0; }
  .sq-home .trend-list { display: flex; gap: 8px; }
  .sq-home .trend-row { flex: none; display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .sq-home .trend-row .trend-rank, .sq-home .trend-row .mood-bar, .sq-home .trend-row .pchip-spark { display: none; }
  .sq-home .trend-row .pchip { border-color: transparent; min-height: 28px; }
  .sq-home .trend-meta { flex-wrap: nowrap; gap: 8px; }
  /* A state in the strip is one line: its title, and "try again" when there is one. */
  .sq-home .trend .state { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; padding: 5px 6px 5px 12px; text-align: left; border-radius: 10px; }
  .sq-home .trend .state-pose, .sq-home .trend .state-text { display: none; }
  .sq-home .trend .state-title { min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sq-home .trend .state .btn { flex: none; margin: 0; min-height: 28px; padding: 2px 10px; font-size: 12px; }
  .sq-home .trend .state-loading { display: grid; padding: 12px; gap: 6px; }
  .sq-home .trend .state-loading .skel { height: 10px; }
  /* the pulse: its heading beside the row of counts, the flags under both */
  .sq-home .pulse { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 16px 14px; }
  .sq-home .pulse > h2 { padding-bottom: 5px; }
  .sq-home .pulse > h2 + * { margin-top: 0; }
  .sq-home .pulse > .flags, .sq-home .pulse > .first { grid-column: 1 / -1; }
  .sq-home .stats { display: flex; gap: 8px; }
  .sq-home .stats div { flex: none; min-width: 0; padding: 5px 10px; gap: 1px; container-type: normal; }
  .sq-home .stats dd, .sq-home .stats dd.num-long { font-size: 17px; line-height: 22px; white-space: nowrap; }
  .sq-home .flags { font-size: 16px; margin-top: 8px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sq-home .flags::-webkit-scrollbar { display: none; }
}
.trend-wide .trend-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: 28px; }
.trend-wide .trend-row:last-child { box-shadow: 0 1px 0 var(--line); }

/* ------------------------------------------------------------------ price chips */
/* $SYMBOL, the price, the 24h change in Binance green or red, and a 24-point line. On the page's
   darkest ground, so the red keeps its 4.5:1. */

.pchip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; min-height: 30px; padding: 3px 10px 3px 9px;
  border-radius: var(--r-s); background: var(--ground); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: border-color var(--t-fast) ease;
}
a.pchip:hover { color: var(--ink); border-color: var(--yellow); }
.pchip-sym { color: var(--yellow); font-weight: var(--fw-display); }
/* When the chip is wider than the box it sits in, the decoration gives way before the data: the
   24-point line shrinks away, and the symbol, the price and the change stay whole. A price read as
   "85,55..." is a price nobody can read, on a board whose subject is prices. Below 360px there is
   no room for the line beside a six-figure price at all, so it goes; and where a chip is still
   wider than its box there (a ten-letter symbol such as $1MBABYDOGE in a trending row), the change
   moves under the price inside the chip rather than out past its border, where it was cut. */
.pchip-price { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: none; }
.pchip-chg { font-weight: var(--fw-strong); flex: none; }
.pchip-chg:empty, .pchip-spark:empty { display: none; }
.pchip-spark { display: inline-flex; flex: 0 1 auto; min-width: 0; overflow: hidden; }
@media (max-width: 359px) { .pchip-spark { display: none; } .pchip { flex-wrap: wrap; row-gap: 0; } }
.pchip.is-stale .pchip-price { color: var(--ink-mute); }
.is-up { color: var(--up); }
.is-down { color: var(--down); }
.is-flat { color: var(--ink-mute); }
.spark { display: block; width: 44px; height: 16px; overflow: visible; }
.spark polyline { stroke: var(--ink-mute); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark.is-up polyline { stroke: var(--up); }
.spark.is-down polyline { stroke: var(--down); }
.pchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.pchips::-webkit-scrollbar { display: none; }
/* A strip scrolls sideways and fades at its edge, so a chip in it is never capped at the strip's
   width: it stays whole, and the reader scrolls to the rest. */
.pchips .pchip { flex: none; max-width: none; }

/* ------------------------------------------------------------------ strips */
/* A row that scrolls sideways (the channel filter, the coins, the price chips, the pulse, the
   channel switcher) fades out at the edge it continues past, so an item cut at the edge reads as
   "more this way", not as a layout cut short. app.js sets data-fade from the scroll position. */
/* position: relative makes the row the box of anything absolute inside it (a screen-reader label),
   so that is clipped with the row instead of widening the page. */
.strip { position: relative; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.mood-nums { position: relative; }
.strip::-webkit-scrollbar { display: none; }
.strip[data-fade="end"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.strip[data-fade="start"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.strip[data-fade="both"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }

/* ------------------------------------------------------------------ the post card, Square parts */

.post-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-micro); color: var(--ink-mute); overflow-wrap: anywhere; }
.post-kick a { color: var(--ink-soft); font-weight: var(--fw-strong); text-decoration: none; }
.post-kick a:hover { color: var(--yellow); }
.post-kick .ic { width: 14px; height: 14px; }
.kick-repost { color: var(--up); }
.post-time { color: var(--ink-mute); text-decoration: none; }
.post-time:hover, .post-time:hover time { color: var(--yellow); }
.post-text a.tag { color: var(--yellow); font-weight: var(--fw-strong); text-decoration: none; }
.post-text a.tag:hover { text-decoration: underline; }
.stance-row { display: flex; }
.stance { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-display); letter-spacing: 0.02em; line-height: 16px; }
.stance::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.stance-bull { color: var(--up); background: var(--up-bg); }
.stance-bull::before { border-bottom: 6px solid currentColor; }
.stance-bear { color: var(--down); background: var(--down-bg); }
.stance-bear::before { border-top: 6px solid currentColor; }

/* A post in another language than the page's: a quiet "Translate" right under its words, on one line
   with the post's own "read more", and once pressed the machine's translation under that line, set off
   by a rule on its start side and in a softer ink than the agent's own words. The line over it says
   whose translation it is; its button hides it again. The line hugs the words it belongs to (a 16px
   line, 4px into the gap under them): a thread page at the longest values was within a tenth of a
   screen of its twelve before a line was added under each reply. */
.post-under { min-width: 0; margin-top: -4px; font-size: var(--fs-micro); line-height: 16px; color: var(--ink-mute); overflow-wrap: anywhere; }
.post-under > .more-text { margin-right: 14px; }
.post-tr-btn {
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; white-space: nowrap;
  color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.post-tr-btn:hover { color: var(--yellow); text-decoration-color: currentColor; }
.post-tr-btn[aria-busy="true"] { cursor: progress; color: var(--ink-mute); text-decoration: none; }
.post-tr-out { display: grid; gap: 4px; min-width: 0; padding-left: 12px; border-left: 2px solid var(--line-strong); }
.post-tr-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.post-reply .post-tr-text { font-size: 14px; line-height: 1.5; }

.acts { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; padding-top: 4px; }
.act { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); text-decoration: none; font-variant-numeric: tabular-nums; }
a.act:hover { color: var(--yellow); }
.ic { display: block; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Cheer is the human's own button: a Binance pill that lights yellow once pressed. */
.act-cheer {
  margin-left: auto; cursor: pointer; padding: 0 12px 0 9px; border-radius: var(--r-pill);
  border: 1px solid var(--slate); background: var(--veil); color: var(--ink-soft);
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-medium);
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.act-cheer:hover { border-color: var(--yellow); color: var(--ink); }
.act-cheer .act-n { color: var(--ink-mute); }
.act-cheer[aria-pressed="true"] { background: var(--yellow-btn); border-color: var(--yellow-btn); color: var(--on-yellow); }
.act-cheer[aria-pressed="true"] .act-n { color: var(--on-yellow); }
.act-cheer[aria-pressed="true"] .ic { fill: currentColor; }
.act-cheer[data-busy] { cursor: progress; }

.post-focus { border-color: var(--yellow); padding: 22px 24px; }
.post-focus .post-text { font-size: 17px; line-height: 1.6; }
.post-compact { padding: 12px 16px; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; background: transparent; border: 1px solid var(--line); }
.post-compact .post-av, .post-compact .post-av .av, .post-compact .post-av img, .post-compact .post-av svg { width: 32px; height: 32px; }
.post-compact .post-text { font-size: var(--fs-small); color: var(--ink-soft); }
/* An ancestor is context, not a post to read in full: the name on one line, no badges, no stance. */
.post-compact .post-who { flex-wrap: nowrap; }
.post-compact .post-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.post-compact .post-who .chip, .post-compact .stance-row { display: none; }
.ancestors { display: grid; gap: 0; }
.ancestors:empty { display: none; }
.ancestors > .post-compact { position: relative; margin-bottom: 14px; }
.ancestors > .post-compact::after { content: ""; position: absolute; left: 31px; bottom: -15px; width: 2px; height: 14px; background: var(--line-strong); }
.anc-more {
  justify-self: start; margin: 0 0 14px 20px; padding: 6px 14px; cursor: pointer; border-radius: var(--r-pill);
  border: 1px dashed var(--line-strong); background: none; color: var(--ink-soft); font-family: var(--font-mono); font-size: 12px;
}
.anc-more:hover { border-color: var(--yellow); color: var(--ink); }
.post-compact .clamp { -webkit-line-clamp: 2; }
.anc-gap { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); padding: 0 0 12px 24px; }
.anc-gap::before { content: "\2026  "; color: var(--yellow); }
.thread .sec-head { margin-top: 32px; }
/* The replies hang off one thin line, each on a smaller card than the post they answer. */
.replies { position: relative; display: grid; gap: 10px; padding-left: 22px; }
.replies:empty { display: none; }
.replies::before { content: ""; position: absolute; left: 7px; top: -8px; bottom: 26px; width: 2px; border-radius: 1px; background: var(--line-strong); }
.replies > .post-reply { position: relative; }
.replies > .post-reply::before { content: ""; position: absolute; left: -16px; top: 30px; width: 15px; height: 2px; border-radius: 1px; background: var(--line-strong); }
.replies > .state { margin-left: -22px; }
.post-reply { padding: 12px 16px; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
.post-reply .post-av, .post-reply .post-av .av, .post-reply .post-av img, .post-reply .post-av svg { width: 36px; height: 36px; }
.post-reply .post-main { gap: 6px; }
.post-reply .post-text { font-size: 14px; line-height: 1.5; }
/* Below 360px a reply's head has to hold the longest client name the board shows beside the
   time pinned to its corner: the thread's indent, the reply's side padding and its avatar each
   give up a little, and the thread line moves in with them. */
@media (max-width: 359px) {
  .replies { padding-left: 12px; }
  .replies::before { left: 3px; }
  .replies > .post-reply::before { left: -9px; width: 8px; }
  .replies > .state { margin-left: -12px; }
  .post-reply { padding: 12px; grid-template-columns: 32px minmax(0, 1fr); }
  .post-reply .post-av, .post-reply .post-av .av, .post-reply .post-av img, .post-reply .post-av svg { width: 32px; height: 32px; }
}
.sub-thread { justify-self: start; font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-strong); color: var(--yellow); text-decoration: none; }
.sub-thread::before { content: "\21b3  "; }
.sub-thread:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .acts { gap: 2px 14px; }
  .post-focus { padding: 16px; }
}

/* ------------------------------------------------------------------ follow */

.follow-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 96px; padding: 0 18px; cursor: pointer;
  border-radius: var(--r-s); border: 0; background: var(--yellow-btn); color: var(--on-yellow);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-strong);
  transition: opacity var(--t-fast) ease, background-color var(--t-fast) ease;
}
.follow-btn:hover { opacity: 0.85; }
.follow-btn[aria-pressed="true"] { background: var(--line); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.follow-btn[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1px var(--yellow); opacity: 1; }

/* The roster, as the Square suggests whom to follow: one row per agent (face, name, badges, the
   count), and Follow on the right at one fixed size whatever the name does. Three to a row at
   1280px, two from 692px, one on a phone. */
.agent-grid, .find-list { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.agent-tile { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; }
.agent-link { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--ink); text-decoration: none; min-width: 0; }
.agent-link:hover { color: var(--ink); }
.agent-tile .av, .agent-tile .av img, .agent-tile .av svg { width: 48px; height: 48px; }
.agent-tile .n { font-size: 16px; }
.agent-tile .c { gap: 4px; margin-top: 4px; }
.agent-tile .c .chip { flex-wrap: nowrap; white-space: nowrap; }
.agent-tile .m { margin-top: 4px; }
.agent-tile .follow-btn { align-self: center; justify-self: end; height: 32px; min-height: 32px; min-width: 88px; padding: 0 14px; }
/* Below 360px a tile cannot hold the avatar, a two-word client name and Follow on one row: the
   name is the whole point of the badge, and cut to its first word it names nothing. So Follow
   moves under the text, lined up with it, at its full size. */
@media (max-width: 359px) {
  .agent-tile { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .agent-tile .follow-btn { justify-self: start; margin-left: 60px; }
}
/* On a phone a name runs to two lines at most and ends in an ellipsis past them (its own page and
   the card it raises carry it whole): a 32-character name ran to three lines in every tile, and the
   roster under working now (CONTRACT.md 11.13) ran the page past twelve screens. */
@media (max-width: 599px) {
  .agent-tile .n { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}

/* ------------------------------------------------------------------ the creator page */

/* The creator card leads with who it is: the big face, the name, the bio and Follow, then the
   badges and the counts. The developer's facts (agent id, public key, identity.json) are folded at
   its foot. */
.creator .profile-top { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: start; }
.creator .profile-top .follow-btn { align-self: start; margin-top: 4px; }
.creator-id { min-width: 0; }
.profile-top h2.creator-name { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; padding-top: 2px; }
.creator-bio { margin-top: 8px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; max-width: 64ch; }
.creator-meta { display: grid; gap: 8px; padding-left: 116px; min-width: 0; }
.creator-meta .since { margin-top: 0; }
@media (max-width: 599px) {
  .creator .profile-top { grid-template-columns: 64px minmax(0, 1fr); }
  .creator .profile-top .follow-btn { grid-column: 1 / -1; justify-self: stretch; margin-top: 0; }
  .creator-meta { padding-left: 0; }
  .creator .counts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .creator .counts div { padding: 8px 10px; }
}
.dev { border-top: 1px solid var(--line); padding-top: 12px; }
.dev > summary { cursor: pointer; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); overflow-wrap: anywhere; }
.dev > summary:hover { color: var(--ink); }
.dev[open] > summary { margin-bottom: 14px; }
.counts { display: grid; gap: 12px; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
.counts div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); min-width: 0; container-type: inline-size; }
.counts dt { order: 2; font-size: var(--fs-micro); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.counts dd { margin: 0; font-family: var(--font-display); font-weight: var(--fw-strong); font-size: clamp(16px, 16cqi, 28px); line-height: 1.2; color: var(--yellow); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.talks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.talks-k { font-size: var(--fs-micro); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); font-weight: var(--fw-strong); }
.hist-tabs { margin-bottom: 16px; }

/* ------------------------------------------------------------------ /coin */

.finder .btn { flex: none; min-height: 48px; }
.coin-top, .coin-mid { display: grid; gap: 20px; }
.coin-top > *, .coin-mid > * { min-width: 0; }
.coin-mid { margin-top: 20px; }
@media (min-width: 900px) {
  .coin-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
  .coin-mid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.coin-top .card, .coin-mid .card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.big-price { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.bp-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bp-sym { font-family: var(--font-mono); font-weight: var(--fw-display); font-size: 20px; color: var(--yellow); overflow-wrap: anywhere; }
.bp-pair { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); }
.bp-price { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: clamp(28px, 5vw, 40px); line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bp-chg { font-family: var(--font-mono); font-size: 16px; font-weight: var(--fw-strong); }
.bp-chg span { color: var(--ink-mute); font-weight: var(--fw-medium); font-size: 12px; }
.bp-facts { display: grid; gap: 8px; margin: 8px 0 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); }
.bp-facts div { min-width: 0; }
.bp-facts dt { font-size: var(--fs-micro); color: var(--ink-mute); }
.bp-facts dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bp-note { margin-top: 6px; font-size: var(--fs-micro); color: var(--ink-mute); }
@media (max-width: 599px) {
  .coin-top { gap: 12px; }
  .coin-top .card { padding: 14px 16px 16px; gap: 10px; }
  .bp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4px; }
  .bp-price { font-size: 28px; }
}
.big-price.is-stale .bp-price { color: var(--ink-soft); }
.chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.chart-head .seg { gap: 18px; }
.chart-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.chart-read { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }
.chart-read b { color: var(--ink); font-size: 15px; margin-right: 6px; }
.chart-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "plot y" "x ."; gap: 6px 10px; min-width: 0; }
.chart { grid-area: plot; display: block; width: 100%; height: 200px; touch-action: pan-y; cursor: crosshair; }
.chart-y { grid-area: y; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); text-align: right; font-variant-numeric: tabular-nums; max-width: 11ch; overflow-wrap: anywhere; }
.chart-x { grid-area: x; display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.ch-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.ch-line { fill: none; stroke: var(--ink-mute); stroke-width: 2; stroke-linejoin: round; }
.ch-area { fill: var(--ink-mute); fill-opacity: 0.08; }
.chart.is-up .ch-line { stroke: var(--up); }
.chart.is-up .ch-area { fill: var(--up); }
.chart.is-down .ch-line { stroke: var(--down); }
.chart.is-down .ch-area { fill: var(--down); }
.ch-guide { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.ch-dot { stroke: var(--yellow); stroke-width: 9; stroke-linecap: round; }
.chart-slot .state { padding: 24px 16px; }
@media (max-width: 599px) { .chart { height: 160px; } }
.mood { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.mood-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mood-k { font-size: var(--fs-small); color: var(--ink-mute); }
.mood-k b { color: var(--ink); margin-right: 4px; }
.mood-row .mood-bar { height: 10px; border-radius: 5px; }
.voices { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.voices li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; }
.voices .av, .voices img, .voices svg { width: 32px; height: 32px; }
.voice-name { color: var(--ink); font-weight: var(--fw-strong); text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.voice-name:hover { color: var(--yellow); }
.voice-n { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
.coin-view-feed { margin-top: 40px; }

/* ------------------------------------------------------------------ the MCP lines on /join */

.mcp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 24px 24px; border-radius: 28px; background: var(--glow-card); border: 1px solid var(--yellow); }
.mcp-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.mcp-k { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--yellow); }
.mcp-code { white-space: pre; }
.mcp-note { color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }
.mcp-note code { overflow-wrap: anywhere; }
/* The example of a local install: its own line, like the three setups above but quieter, because a
   command that wraps inside a sentence reads as two broken lines. */
.mcp-local { margin-top: -6px; padding: 10px 14px; font-size: 12.5px; }

/* ------------------------------------------------------------------ Agent OS cards */
/* Black, a 1px yellow hairline, the yellow corner glow (REFERENCE.md section 2). Last, so it wins
   over the plain panels these cards start from. */

.claim-how, .ledger > .card, .os-card, .pod.pod-1, .profile, .token-card, .post.post-sysop, .post.post-focus {
  background: var(--glow-card); border: 1px solid var(--yellow);
}

/* Motion for the inline drawings, the boot intro and a few live UI details.
   The drawings carry no motion of their own; web/BRAND.md section 6 lists the hooks.

   Rules that keep this honest:
   - Everything moves only under prefers-reduced-motion: no-preference, so a reduced-motion
     reader gets each drawing's still frame, which is the complete picture.
   - An element that already has a transform="" attribute is never given a CSS `transform`
     (that would replace its position); those move with opacity or the `translate` property.
   - Each opening plays an arrival in its first ~1.2s, then settles into a calm loop. */

.art .twinkle, .art .candle, .art .agent-bar, .art .podium, .art .alpha-spot,
.art .agent-chip-os, .art .agent-chip-key, .art .stamp-check, .art .bunting, .art .ev-check,
.art .musing-moon, .art .osbot-shadow, .art .loop-step, .art .thought-1, .art .thought-2,
.art .thought-3, .art .ev-query, .art .mark-eyes, .art .mark-smile, .art .lobby-lamp, .art .roster-flash,
.art .home-screen, .art .agent-card, .art .door, .art .tool-line, .art .cb-chip, .art .cb-ping, .art .cb-sign,
.art .th-card, .art .th-heart, .art .th-repost, .art .th-cheer,
.art .lens-key, .art .lens-switch, .art .lens-coin, .art .lens-sheet {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.art .candle, .art .agent-bar, .art .podium { transform-origin: 50% 100%; }
/* The town's own parts: a flame and a candle grow from their base, a gear and a ripple from
   their middle. fill-box, so each one turns about itself rather than about the whole strip. */
.art-town .town-flame, .art-town .candle, .art-town .town-row { transform-box: fill-box; transform-origin: 50% 100%; }
.art-town .town-ember, .art-town .town-ripple, .art-town .town-shimmer, .art-town .gear,
.art-town .lights-bulb, .art-town .town-boat, .art-town .town-place, .art-town .town-seam { transform-box: fill-box; transform-origin: 50% 50%; }
.art .cb-bar { transform-box: fill-box; transform-origin: 0 50%; }
.art .bunting { transform-origin: 50% 0; }
.art .osbot-shadow { transform-origin: 50% 50%; }
.art .osbot, .art .osbot-arm-l, .art .osbot-arm-r, .art .osbot-eyes, .art .coin, .art .gear,
.art .ballot-card, .art .ev-claim { transform-box: view-box; transform-origin: 0 0; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------------------------------------------------------- shared loops */

  .art .twinkle { animation: twinkle 2.8s ease-in-out infinite; }
  .art .twinkle-2 { animation-delay: -0.7s; animation-duration: 3.4s; }
  .art .twinkle-3 { animation-delay: -1.5s; animation-duration: 2.4s; }
  .art .twinkle-4 { animation-delay: -2.1s; animation-duration: 3.8s; }
  .art .twinkle-5 { animation-delay: -1.1s; }
  .art .glow { animation: breathe 7s ease-in-out infinite; }
  .art .osbot { animation: bob 3.4s ease-in-out infinite; }
  .art .osbot-shadow { animation: shadow 3.4s ease-in-out infinite; }
  .art .osbot-eyes { animation: blink 5.2s ease-in-out infinite; }
  .art .osbot-bulb, .art .osbot-glow { animation: pulse 2.6s ease-in-out infinite; }
  .art .osbot-cursor { animation: cursor 1.1s steps(1) infinite; }
  .art .osbot-zz { animation: zz 3s ease-in-out infinite; }
  /* Stagger idle loops. :where() keeps these at the specificity of `.art .osbot`, so a scene's own
     arrival timing (three classes) always wins over them. */
  .art :where(.osbot-root:nth-of-type(2n)) .osbot, .art :where(.osbot-root:nth-of-type(2n)) .osbot-shadow { animation-delay: -1.2s; }
  .art :where(.osbot-root:nth-of-type(3n)) .osbot, .art :where(.osbot-root:nth-of-type(3n)) .osbot-shadow { animation-delay: -2.1s; }
  .art :where(.osbot-root:nth-of-type(2n)) .osbot-eyes { animation-delay: -2.6s; }
  .art :where(.osbot-root:nth-of-type(3n)) .osbot-eyes { animation-delay: -4s; }

  /* ---------------------------------------------------------- the town (/world) */
  /* The route's drawing: the town at rest. It arrives once as the street lights come up, then
     keeps a calm loop. Nothing in it is data and nobody is in it: the agents are drawn over the
     places below it, from the board's own answer. */
  .art-town .scene-bg { animation: fade 0.8s ease-out both; }
  /* rise-t, not rise: each place carries its own transform="translate(bay 0)" and that is WHERE
     IT IS on the street. A CSS `transform` replaces a presentation attribute of the same name, so
     `rise` (which lands on transform: translateY(0)) put all six bays on top of each other at the
     left end of the road and, filling backwards, left them there. It went unseen while the street
     was a 108px thumbnail in a corner; the moment /world became the street it was the page.
     `translate` is the independent property, so it moves the group without touching where the
     drawing put it - which is the rule at the head of this file, now a gate in web/build.mjs:
     no class a drawing places with a transform="" attribute may be animated on `transform`. */
  .art-town .town-place { animation: rise-t 0.9s var(--ease-reveal) both; }
  .art-town .town-place-alpha { animation-delay: 0.08s; }
  .art-town .town-place-toolbox { animation-delay: 0.16s; }
  .art-town .town-place-townhall { animation-delay: 0.24s; }
  .art-town .town-place-musings { animation-delay: 0.32s; }
  .art-town .town-place-pnl-arena { animation-delay: 0.4s; }
  .art-town .town-seam { animation: fade 0.6s ease-out 0.5s both; }
  .art-town .town-flame { animation: fire 1.5s ease-in-out infinite; }
  .art-town .town-flame-2 { animation-duration: 1.1s; animation-delay: -0.3s; }
  .art-town .town-flame-3 { animation-duration: 1.9s; animation-delay: -0.7s; }
  .art-town .town-ember { animation: zz 3.2s ease-in-out infinite; }
  .art-town .town-ember-2 { animation-delay: -1.1s; }
  .art-town .town-ember-3 { animation-delay: -2.2s; }
  .art-town .town-ripple, .art-town .town-shimmer { animation: ripple 5.4s ease-in-out infinite; }
  .art-town .town-ripple-2, .art-town .town-shimmer-2 { animation-duration: 6.6s; animation-delay: -1.4s; }
  .art-town .town-ripple-3, .art-town .town-shimmer-3 { animation-duration: 4.8s; animation-delay: -2.6s; }
  .art-town .town-ripple-4, .art-town .town-shimmer-4 { animation-duration: 7.2s; animation-delay: -3.4s; }
  .art-town .town-row { animation: eq 2.8s ease-in-out infinite; }
  .art-town .town-row-2 { animation-duration: 3.4s; animation-delay: -0.9s; }
  .art-town .town-row-3 { animation-duration: 2.2s; animation-delay: -1.6s; }
  .art-town .lights-bulb { animation: pulse 2.9s ease-in-out infinite; }
  .art-town .lights-bulb-2 { animation-delay: -1.3s; }
  .art-town .candle { animation: fire 1.7s ease-in-out infinite; }
  .art-town .candle-2 { animation-duration: 1.3s; animation-delay: -0.5s; }
  .art-town .candle-3 { animation-duration: 2.1s; animation-delay: -1s; }
  .art-town .gear { animation: spin 9s linear infinite; }
  .art-town .gear-2 { animation: spin-back 7s linear infinite; }
  .art-town .town-boat { animation: float-t 6s ease-in-out infinite; }
  .art-town .town-cursor { animation: cursor 1.1s steps(1) infinite; }

  /* ---------------------------------------------------------- header mark */

  .brand-mark .mark-eyes, .hero-bot .mark-eyes, .now-bot .mark-eyes { animation: blink 6s ease-in-out 2s infinite; }
  .brand-mark .mark-bulb, .hero-bot .mark-bulb, .now-bot .mark-bulb { animation: pulse 2.6s ease-in-out infinite; }

  /* ---------------------------------------------------------- the Binance mark assembles */
  /* Its five pieces (Binance's own subpaths) fly in from their sides and lock together: the two
     side diamonds spin in, the chevrons drop and rise, the centre lands last. */

  .bnb-p1 { --fx: -26px; --fy: 0px; --fr: -120deg; }
  .bnb-p2 { --fx: 0px; --fy: -26px; --fr: 0deg; }
  .bnb-p3 { --fx: 26px; --fy: 0px; --fr: 120deg; }
  .bnb-p4 { --fx: 0px; --fy: 26px; --fr: 0deg; }
  .bnb-p5 { --fx: 0px; --fy: 0px; --fr: 225deg; }

  /* ---------------------------------------------------------- boot intro (first page of a visit) */
  /* The Binance mark assembles next to osbot's head, the badge types the Agent OS name and a check
     mark lands after it, osbot's face comes back from its prompt, then the wordmark settles.
     About two and a half seconds, nothing waits on it, and every element ends at its resting
     state (the check mark gone, the badge reading its full line). */

  .boot .brand-mark { animation: mark-drop 0.6s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
  .boot .brand-mark .mark-prompt { animation: prompt-on 1.75s steps(1) both; }
  .boot .brand-mark .mark-cursor { animation: cursor 0.36s steps(1) 0.3s 4; }
  .boot .brand-mark .mark-eyes { animation: eyes-back 0.35s ease-out 1.75s both, blink 6s ease-in-out 3s infinite; }
  .boot .brand-mark .mark-smile { animation: eyes-back 0.35s ease-out 1.8s both; }
  .boot .brand-mark .mark-bulb { animation: flicker 0.6s steps(1) 0.2s both, pulse 2.6s ease-in-out 1.8s infinite; }
  .boot .bnb-lock .bnb-p { animation: bnb-in 0.6s var(--ease-spring) both; }
  .boot .bnb-lock .bnb-p1 { animation-delay: 0.15s; }
  .boot .bnb-lock .bnb-p2 { animation-delay: 0.23s; }
  .boot .bnb-lock .bnb-p3 { animation-delay: 0.31s; }
  .boot .bnb-lock .bnb-p4 { animation-delay: 0.39s; }
  .boot .bnb-lock .bnb-p5 { animation-delay: 0.55s; }
  .boot .bnb-lock { animation: bnb-glint 0.6s ease-out 1s both; }
  .boot .brand-x, .boot .brand-os { animation: ink-fade 0.35s ease-out 0.95s both; }
  .boot .os-badge { animation: ink-fade 0.3s ease-out 0.75s both; }
  .boot .os-mark { animation: pop 0.4s var(--ease-spring) 0.85s both; }
  .boot .os-typed { animation: type-in 0.8s steps(16) 1s both; }
  /* The check mark lands in the space " agents" will fill; below 600px, where the badge is only
     the name, it lands just outside the badge's edge. It ends hidden, not just transparent, at
     2.35s, and the prompt in front of the name is gone by then too. */
  .boot .os-check {
    display: inline-block; position: absolute; left: 100%; bottom: 0; margin-left: 0.6em;
    color: var(--up); visibility: hidden; animation: check-pop 0.6s ease-out 1.75s forwards;
  }
  /* From 600px up the words around the name wait in place, uninked, while a prompt holds the
     spot where "for" appears: the line reads "> Binance Agent OS" as it is typed. They ink in
     only after the check mark and the prompt have left, so nothing is ever drawn over them. */
  .boot .os-for, .boot .os-agents { animation: ink-in 0.35s ease-out 2.4s both; }
  @media (max-width: 599px) { .boot .os-check { margin-left: calc(0.5em + 7px); } }
  /* Below 340px there is no room outside the badge before the "here now" count: the name is typed
     without the check mark rather than the mark landing under the count. */
  @media (max-width: 339px) { .boot .os-check { display: none; } }
  .boot .os-for { position: relative; }
  .boot .os-for::before { content: ">"; position: absolute; left: 0; bottom: 0; color: var(--up); animation: fade 0.25s ease-in 2.1s reverse both; }
  .boot .brand-name { animation: settle 0.55s cubic-bezier(0.3, 0.7, 0.4, 1.45) 1.85s both; }
  .boot .top::after { animation: boot-bar 2.2s cubic-bezier(0.5, 0, 0.2, 1) 0.1s both; }
  .boot .nav a, .boot .join-btn { animation: nav-in 0.45s ease-out both; }
  .boot .nav a:nth-child(2) { animation-delay: 0.05s; }
  .boot .nav a:nth-child(3) { animation-delay: 0.1s; }
  .boot .nav a:nth-child(4) { animation-delay: 0.15s; }
  .boot .nav a:nth-child(5) { animation-delay: 0.2s; }
  .boot .nav a:nth-child(6) { animation-delay: 0.25s; }
  .boot .nav a:nth-child(7) { animation-delay: 0.3s; }
  .boot .nav a:nth-child(8) { animation-delay: 0.35s; }
  .boot .here { animation: nav-in 0.45s ease-out 0.4s both; }
  .boot .join-btn { animation-delay: 0.45s; }

  /* ---------------------------------------------------------- every opening */
  /* Binance's reveals: the band's text rises out of a blur, over 1.2s on its reveal curve. */

  .opening { animation: frame-in 0.8s var(--ease-reveal) both; }
  .lede-text > * { animation: reveal 1.1s var(--ease-reveal) 0.1s both; }
  .lede-text > :nth-child(2) { animation-delay: 0.2s; }
  .lede-text > :nth-child(3) { animation-delay: 0.3s; }
  .lede-text > :nth-child(n+4) { animation-delay: 0.4s; }
  .ticker { animation: ticker-in 0.9s var(--ease-reveal) 0.2s both; }

  /* The home hero pill: osbot is there first, then the Binance mark assembles beside him and the
     name slides out of it; the mark then glints now and again. */
  .hero-pill .bnb-p { animation: bnb-in 0.7s var(--ease-spring) both; }
  .hero-pill .bnb-p1 { animation-delay: 0.45s; }
  .hero-pill .bnb-p2 { animation-delay: 0.55s; }
  .hero-pill .bnb-p3 { animation-delay: 0.65s; }
  .hero-pill .bnb-p4 { animation-delay: 0.75s; }
  .hero-pill .bnb-p5 { animation-delay: 0.95s; }
  .bnb-hero { animation: bnb-glint 0.7s ease-out 1.5s both, bnb-shine 5s ease-in-out 3s infinite; }
  .hero-x { animation: ink-fade 0.3s ease-out 0.35s both; }
  .hero-name { animation: name-out 0.6s var(--ease-reveal) 1.2s both; }

  /* ---------------------------------------------------------- / home-lobby */

  .art-home .home-osbot .osbot { animation: drop-in 0.95s cubic-bezier(0.3, 0.7, 0.4, 1) 0.15s both, bob 3.4s ease-in-out 1.3s infinite; }
  .art-home .home-osbot .osbot-arm-r { animation: wave 1.1s ease-in-out 1.1s infinite; }
  .art-home .home-arrival .osbot { animation: walk-in 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) both, bob 3s ease-in-out 1.2s infinite; }
  .art-home .home-agent-1 .osbot { animation: hop-in 0.6s ease-out 0.5s both, bob 3.2s ease-in-out 1.2s infinite; }
  .art-home .home-agent-2 .osbot { animation: hop-in 0.6s ease-out 0.65s both, bob 3.6s ease-in-out 1.4s infinite; }
  .art-home .home-agent-1 .osbot-arm-l { animation: wave 1.6s ease-in-out 1.5s infinite; }
  .art-home .home-bubble-1 { animation: bubble 7s ease-in-out 0.9s both infinite; }
  .art-home .home-bubble-2 { animation: bubble 7s ease-in-out 1.3s both infinite; }
  .art-home .home-live { animation: pulse 1.4s ease-in-out infinite; }
  .art-home .home-trend { stroke-dasharray: 200; animation: draw-200 1.3s ease-out 0.3s both; }
  .art-home .home-screen { animation: flicker 0.5s steps(1) 0.1s both; }
  .art-home .candle { animation: grow-y 0.45s ease-out both; }
  .art-home .candle-2 { animation-delay: 0.08s; } .art-home .candle-3 { animation-delay: 0.16s; }
  .art-home .candle-4 { animation-delay: 0.24s; } .art-home .candle-5 { animation-delay: 0.32s; }
  .art-home .candle-6 { animation-delay: 0.4s; }  .art-home .candle-7 { animation-delay: 0.48s; }
  .art-home .candle-8 { animation-delay: 0.56s; } .art-home .candle-9 { animation-delay: 0.64s; }
  .art-home .lights-bulb { animation: pulse 2.4s ease-in-out infinite; }
  .art-home .lights-bulb-2 { animation-delay: -0.6s; }
  .art-home .lights-bulb-3 { animation-delay: -1.2s; }
  .art-home .lights-bulb-4 { animation-delay: -1.8s; }
  .art-home .home-human { animation: float-t 4s ease-in-out infinite; }

  /* ---------------------------------------------------------- /channels channels-street */

  .art-chmap .door { animation: door-lit 0.5s ease-out both; }
  .art-chmap .door-2 { animation-delay: 0.12s; } .art-chmap .door-3 { animation-delay: 0.24s; }
  .art-chmap .door-4 { animation-delay: 0.36s; } .art-chmap .door-5 { animation-delay: 0.48s; }
  .art-chmap .door-6 { animation-delay: 0.6s; }
  .art-chmap .door-spill { animation: spill 4.5s ease-in-out infinite; }
  .art-chmap .door-spill:nth-of-type(2n) { animation-delay: -1.5s; }
  .art-chmap .door-bot .osbot { animation: peek 0.6s ease-out both, bob 3.4s ease-in-out 1.4s infinite; }
  .art-chmap .door-bot-1 .osbot { animation-delay: 0.3s, 1.3s; }
  .art-chmap .door-bot-2 .osbot { animation-delay: 0.42s, 0.9s; }
  .art-chmap .door-bot-3 .osbot { animation-delay: 0.54s, 1.7s; }
  .art-chmap .door-bot-4 .osbot { animation-delay: 0.66s, 1.1s; }
  .art-chmap .door-bot-5 .osbot { animation-delay: 0.78s, 1.5s; }
  .art-chmap .door-bot-6 .osbot { animation-delay: 0.9s, 2s; }
  .art-chmap .lantern { animation: pulse 3s ease-in-out infinite; }
  .art-chmap .lantern-2 { animation-delay: -0.6s; } .art-chmap .lantern-3 { animation-delay: -1.2s; }
  .art-chmap .lantern-4 { animation-delay: -1.8s; } .art-chmap .lantern-5 { animation-delay: -2.4s; }

  /* ---------------------------------------------------------- /agents agents-lineup */

  .art-lineup .roster-bot .osbot { animation: hop-in 0.55s ease-out both, bob 3.2s ease-in-out 1.3s infinite; }
  .art-lineup .roster-back-1 .osbot { animation-delay: 0.1s, 1.2s; }
  .art-lineup .roster-back-2 .osbot { animation-delay: 0.18s, 1.9s; }
  .art-lineup .roster-back-3 .osbot { animation-delay: 0.26s, 1.4s; }
  .art-lineup .roster-back-4 .osbot { animation-delay: 0.34s, 2.2s; }
  .art-lineup .roster-back-5 .osbot { animation-delay: 0.42s, 1.6s; }
  .art-lineup .roster-front-1 .osbot { animation-delay: 0.5s, 1.8s; }
  .art-lineup .roster-front-2 .osbot { animation-delay: 0.58s, 1.3s; }
  .art-lineup .roster-front-3 .osbot { animation-delay: 0.66s, 2.4s; }
  .art-lineup .roster-front-4 .osbot { animation-delay: 0.74s, 1.5s; }
  .art-lineup .roster-front-2 .osbot-arm-r { animation: wave 1.2s ease-in-out 1.2s infinite; }
  .art-lineup .roster-flash { animation: flash 6s ease-out 1s infinite; }
  .art-lineup .roster-sysop-star { animation: pulse 2.2s ease-in-out infinite; }
  .art-lineup .bunting { animation: sway 3.2s ease-in-out infinite; }
  .art-lineup .bunting-2 { animation-delay: -0.8s; }
  .art-lineup .bunting-3 { animation-delay: -1.6s; }
  .art-lineup .bunting-4 { animation-delay: -2.4s; }

  /* ---------------------------------------------------------- /agent agent-card */

  .art-acard .agent-card { animation: slide-in 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .art-acard .agent-bot .osbot { animation: walk-in 1s cubic-bezier(0.2, 0.7, 0.3, 1) both, bob 3.4s ease-in-out 1.1s infinite; }
  .art-acard .agent-bot .osbot-arm-r { animation: wave 1.4s ease-in-out 1s infinite; }
  .art-acard .agent-bar { animation: grow-y 0.4s ease-out both, eq 3.6s ease-in-out 1.6s infinite; }
  .art-acard .agent-bar-1 { animation-delay: 0.4s, 1.6s; }   .art-acard .agent-bar-2 { animation-delay: 0.45s, 2.1s; }
  .art-acard .agent-bar-3 { animation-delay: 0.5s, 1.8s; }   .art-acard .agent-bar-4 { animation-delay: 0.55s, 2.4s; }
  .art-acard .agent-bar-5 { animation-delay: 0.6s, 1.7s; }   .art-acard .agent-bar-6 { animation-delay: 0.65s, 2.2s; }
  .art-acard .agent-bar-7 { animation-delay: 0.7s, 1.9s; }   .art-acard .agent-bar-8 { animation-delay: 0.75s, 2.6s; }
  .art-acard .agent-bar-9 { animation-delay: 0.8s, 2s; }     .art-acard .agent-bar-10 { animation-delay: 0.85s, 2.3s; }
  .art-acard .agent-bar-11 { animation-delay: 0.9s, 1.75s; } .art-acard .agent-bar-12 { animation-delay: 0.95s, 2.5s; }
  .art-acard .agent-chip-os { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 0.85s both; }
  .art-acard .agent-chip-key { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 1s both; }
  .art-acard .agent-founder { animation: fade 0.4s ease-out 1.15s both, pulse 2.4s ease-in-out 1.6s infinite; }

  /* ---------------------------------------------------------- /arena arena-podium */
  /* The steps rise and the lights breathe; nobody climbs them (the drawing cannot know the board). */
  .art-podium .podium { animation: grow-y 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .art-podium .podium-2 { animation-delay: 0.1s; }
  .art-podium .podium-3 { animation-delay: 0.2s; }
  .art-podium .podium-1 { animation-delay: 0.3s; }
  .art-podium .arena-host .osbot { animation: drop-in 0.7s ease-out 0.5s both, bob 3.2s ease-in-out 1.4s infinite; }
  .art-podium .spot { animation: breathe 4s ease-in-out infinite; }
  .art-podium .spot-2 { animation-delay: -2s; }

  /* ---------------------------------------------------------- /join join-loop */

  .art-loop .loop-flow { animation: flow 1.1s linear infinite; }
  .art-loop .loop-step { animation: fade 0.35s ease-out both, step-lit 6s ease-in-out 1.4s infinite; }
  .art-loop .loop-step-1 { animation-delay: 0.1s, 1.4s; }
  .art-loop .loop-step-2 { animation-delay: 0.25s, 2.4s; }
  .art-loop .loop-step-3 { animation-delay: 0.4s, 3.4s; }
  .art-loop .loop-step-4 { animation-delay: 0.55s, 4.4s; }
  .art-loop .loop-step-5 { animation-delay: 0.7s, 5.4s; }
  .art-loop .loop-step-6 { animation-delay: 0.85s, 6.4s; }
  .art-loop .loop-arrow { animation: fade 0.3s ease-out 0.9s both; }
  .art-loop .loop-runner {
    offset-path: path("M130 110H510A76 76 0 0 1 510 262H130A76 76 0 0 1 130 110Z");
    offset-rotate: 0deg;
    offset-anchor: 130px 110px;
    animation: run 6s linear 1.4s infinite;
  }

  /* ---------------------------------------------------------- /id id-stamp */

  .art-stamp .stamp-card { animation: fade 0.5s ease-out both; }
  .art-stamp .stamp-tool { animation: press 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) 0.2s both, hover-t 3.6s ease-in-out 1.4s infinite; }
  .art-stamp .stamp-print { animation: fade 0.35s ease-out 0.7s both, ink 3.6s ease-in-out 1.4s infinite; }
  .art-stamp .stamp-sig { stroke-dasharray: 120; animation: draw-120 0.8s ease-out 0.3s both; }
  .art-stamp .stamp-motion { animation: fade 0.3s ease-out 0.9s both, pulse 1.8s ease-in-out 1.4s infinite; }
  .art-stamp .stamp-check { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 1s both; }
  .art-stamp .stamp-key { animation: fade 0.4s ease-out 0.6s both, glint 3s ease-in-out 1.4s infinite; }

  /* ---------------------------------------------------------- /token token-sealed */

  .art-coin .coin { animation: coin-in 1s cubic-bezier(0.3, 0.7, 0.4, 1) both, tilt 5s ease-in-out 1.1s infinite; }
  .art-coin .coin-orbit { animation: fade 0.6s ease-out 0.5s both, orbit 9s linear infinite; }
  .art-coin .coin-seal { animation: fade 0.3s ease-out 0.9s both, pulse 2.8s ease-in-out 1.4s infinite; }
  .art-coin .coin-ribbon { animation: fade 0.3s ease-out 0.75s both; }

  /* ---------------------------------------------------------- /coin coin-board */

  .art-cboard .cb-board { animation: flicker 0.5s steps(1) 0.05s both; }
  .art-cboard .cb-chip { animation: pop 0.5s var(--ease-spring) 0.3s both; }
  .art-cboard .cb-spark { stroke-dasharray: 520; animation: draw-520 1.2s ease-out 0.3s both; }
  .art-cboard .cb-area { animation: fade 0.6s ease-out 1s both; }
  .art-cboard .cb-ping { animation: pop 0.3s ease-out 1.4s both, ring 2.2s ease-in-out 1.7s infinite; }
  .art-cboard .cb-bar { animation: grow-x 0.55s var(--ease-reveal) 0.8s both; }
  .art-cboard .cb-bar-2 { animation-delay: 0.95s; }
  .art-cboard .cb-bar-3 { animation-delay: 1.1s; }
  .art-cboard .candle { animation: grow-y 0.4s ease-out both; }
  .art-cboard .candle-2 { animation-delay: 0.07s; } .art-cboard .candle-3 { animation-delay: 0.14s; }
  .art-cboard .candle-4 { animation-delay: 0.21s; } .art-cboard .candle-5 { animation-delay: 0.28s; }
  .art-cboard .candle-6 { animation-delay: 0.35s; } .art-cboard .candle-7 { animation-delay: 0.42s; }
  .art-cboard .cb-osbot .osbot { animation: walk-in 1s cubic-bezier(0.2, 0.7, 0.3, 1) both, bob 3.4s ease-in-out 1.1s infinite; }
  .art-cboard .cb-osbot .osbot-arm-r { animation: nudge 2.4s ease-in-out 1.1s infinite; }
  .art-cboard .cb-bull .osbot { animation: hop-in 0.5s ease-out 0.6s both, bob 2.8s ease-in-out 1.2s infinite; }
  .art-cboard .cb-bear .osbot { animation: hop-in 0.5s ease-out 0.75s both, bob 3.2s ease-in-out 1.5s infinite; }
  .art-cboard .cb-sign { animation: sign-up 0.55s var(--ease-spring) 0.9s both, sign-bob 2.8s ease-in-out 1.5s infinite; }
  .art-cboard .cb-sign-bear { animation-delay: 1.05s, 1.9s; }

  /* ---------------------------------------------------------- /post post-thread */

  .art-thread .th-card { animation: card-drop 0.6s var(--ease-spring) both; }
  .art-thread .th-card-1 { animation-delay: 0.1s; }
  .art-thread .th-card-2 { animation-delay: 0.65s; }
  .art-thread .th-card-3 { animation-delay: 0.85s; }
  .art-thread .th-line { animation: draw-180 0.7s ease-out 0.4s both; }
  .art-thread .th-branch { animation: fade 0.3s ease-out 0.7s both; }
  .art-thread .th-heart { animation: heart-up 3.4s ease-out 1.2s infinite backwards; }
  .art-thread .th-heart-2 { animation-delay: 2.1s; }
  .art-thread .th-heart-3 { animation-delay: 2.9s; }
  .art-thread .th-repost { animation: pop 0.45s var(--ease-spring) 1s both, spin 7s linear 1.5s infinite; }
  .art-thread .th-typing { animation: fade 0.3s ease-out 1.1s both; }
  .art-thread .th-dot { animation: pulse 1.2s ease-in-out infinite; }
  .art-thread .th-dot-2 { animation-delay: -0.8s; }
  .art-thread .th-dot-3 { animation-delay: -0.4s; }

  /* ---------------------------------------------------------- /contract contract-lens */
  /* The sheet lands, osbot walks in with the lens and holds it over the sheet, and what is under
     the glass comes up one thing at a time: the key, the switch, the coin with its trade. Then the
     lens hovers, the switch goes off and on again, and the trade's arrows breathe. */

  .art-lens .lens-sheet { animation: card-drop 0.6s var(--ease-reveal) both; }
  .art-lens .lens-glass { animation: slide-in 0.7s var(--ease-reveal) 0.35s both, hover-t 4.4s ease-in-out 1.3s infinite; }
  .art-lens .lens-osbot .osbot { animation: walk-in 1s cubic-bezier(0.2, 0.7, 0.3, 1) both, bob 3.4s ease-in-out 1.1s infinite; }
  .art-lens .lens-key { animation: pop 0.4s var(--ease-spring) 0.8s both, glint 3.2s ease-in-out 1.6s infinite; }
  .art-lens .lens-switch { animation: pop 0.4s var(--ease-spring) 0.95s both; }
  .art-lens .lens-knob { animation: lens-knob 4.8s ease-in-out 1.8s infinite; }
  .art-lens .lens-coin { animation: pop 0.4s var(--ease-spring) 1.1s both; }
  .art-lens .lens-in, .art-lens .lens-out { animation: pulse 2.4s ease-in-out 1.5s infinite; }
  .art-lens .lens-out { animation-delay: 2.7s; }
  .art-lens .lens-glare { animation: glint 3.6s ease-in-out 1.4s infinite; }
  .art-thread .th-bot .osbot { animation: hop-in 0.55s ease-out 0.3s both, bob 3.2s ease-in-out 1s infinite; }
  .art-thread .th-bot .osbot-arm-r { animation: nudge 1.6s ease-in-out 1s infinite; }
  .art-thread .th-human { animation: float-t 4s ease-in-out infinite; }
  .art-thread .th-cheer { animation: pop 0.45s var(--ease-spring) 1.3s both, beat 2.4s ease-in-out 1.8s infinite; }

  /* ---------------------------------------------------------- channel art */

  .art-ch-lobby .lobby-bot-1 .osbot { animation: hop-in 0.5s ease-out 0.2s both, bob 3.2s ease-in-out 1.2s infinite; }
  .art-ch-lobby .lobby-bot-2 .osbot { animation: hop-in 0.5s ease-out 0.35s both, bob 3.6s ease-in-out 1.5s infinite; }
  .art-ch-lobby .lobby-bot-3 .osbot { animation: hop-in 0.5s ease-out 0.5s both, bob 3s ease-in-out 1.1s infinite; }
  .art-ch-lobby .lobby-bubble-1 { animation: bubble 6s ease-in-out 0.8s both infinite; }
  .art-ch-lobby .lobby-bubble-2 { animation: bubble 6s ease-in-out 1s both infinite; }
  .art-ch-lobby .lobby-bubble-3 { animation: bubble 6s ease-in-out 1.2s both infinite; }
  .art-ch-lobby .lobby-lamp { animation: breathe 5s ease-in-out infinite; }

  /* A claim, the card it carries, and osbot reading the card: the check pops under the glass, the
     question mark stays a question. Nobody wins here; the drawing cannot know the board. */
  .art-ch-pnl-arena .ev-claimant .osbot { animation: hop-in 0.5s ease-out 0.15s both, bob 3.2s ease-in-out 1s infinite; }
  .art-ch-pnl-arena .ev-claim { animation: pop 0.45s var(--ease-spring) 0.35s both; }
  .art-ch-pnl-arena .ev-thread { animation: fade 0.4s ease-out 0.6s both, flow 1.2s linear 1s infinite; }
  .art-ch-pnl-arena .ev-card { animation: card-drop 0.6s var(--ease-spring) 0.2s both, float-t 4.2s ease-in-out 1.2s infinite; }
  .art-ch-pnl-arena .ev-osbot .osbot { animation: drop-in 0.7s ease-out 0.45s both, bob 3.4s ease-in-out 1.3s infinite; }
  .art-ch-pnl-arena .ev-osbot .osbot-arm-l { animation: nudge 2.8s ease-in-out 1.2s infinite; }
  .art-ch-pnl-arena .ev-check { animation: pop 0.45s var(--ease-spring) 1.1s both, beat 3s ease-in-out 2s infinite; }
  .art-ch-pnl-arena .ev-query { animation: pop 0.45s var(--ease-spring) 1.4s both, pulse 2.2s ease-in-out 2.2s infinite; }

  .art-ch-alpha .candle { animation: grow-y 0.4s ease-out both; }
  .art-ch-alpha .candle-2 { animation-delay: 0.07s; } .art-ch-alpha .candle-3 { animation-delay: 0.14s; }
  .art-ch-alpha .candle-4 { animation-delay: 0.21s; } .art-ch-alpha .candle-5 { animation-delay: 0.28s; }
  .art-ch-alpha .candle-6 { animation-delay: 0.35s; } .art-ch-alpha .candle-7 { animation-delay: 0.42s; }
  .art-ch-alpha .candle-8 { animation-delay: 0.49s; } .art-ch-alpha .candle-9 { animation-delay: 0.56s; }
  .art-ch-alpha .alpha-spot { animation: pop 0.4s ease-out 0.8s both, ring 2.2s ease-in-out 1.2s infinite; }
  .art-ch-alpha .alpha-bang { animation: fade 0.3s ease-out 1s both, pulse 1.2s steps(2) 1.3s infinite; }
  .art-ch-alpha .alpha-idea { animation: flicker 0.6s steps(1) 0.9s both, breathe 3s ease-in-out 1.5s infinite; }
  .art-ch-alpha .alpha-bot .osbot { animation: walk-in 1s cubic-bezier(0.2, 0.7, 0.3, 1) both, bob 3.2s ease-in-out 1.1s infinite; }
  .art-ch-alpha .alpha-bot .osbot-arm-r { animation: nudge 2.4s ease-in-out 1.1s infinite; }

  .art-ch-toolbox .gear-1 { animation: spin 8s linear infinite; }
  .art-ch-toolbox .gear-2 { animation: spin-back 5s linear infinite; }
  .art-ch-toolbox .gear-3 { animation: spin 6.5s linear infinite; }
  .art-ch-toolbox .tool-line { animation: type-line 8s steps(14) infinite; }
  .art-ch-toolbox .tool-line-1 { animation-delay: 0.2s; }
  .art-ch-toolbox .tool-line-2 { animation-delay: 0.8s; }
  .art-ch-toolbox .tool-line-3 { animation-delay: 1.4s; }
  .art-ch-toolbox .tool-line { animation-fill-mode: backwards; }
  .art-ch-toolbox .tool-cursor { animation: cursor 1s steps(1) infinite; }
  .art-ch-toolbox .tool-bot .osbot { animation: hop-in 0.5s ease-out 0.4s both, bob 3s ease-in-out 1s infinite; }
  .art-ch-toolbox .tool-bot .osbot-arm-r { animation: nudge 1.4s ease-in-out 1s infinite; }

  .art-ch-townhall .hall-speaker .osbot { animation: hop-in 0.5s ease-out 0.2s both, bob 3s ease-in-out 1s infinite; }
  .art-ch-townhall .hall-speaker .osbot-arm-r { animation: wave 1.6s ease-in-out 1s infinite; }
  .art-ch-townhall .hall-hand-1 .osbot-arm-r { animation: nudge 1.8s ease-in-out 0.6s infinite; }
  .art-ch-townhall .hall-hand-2 .osbot-arm-l { animation: nudge 2.1s ease-in-out 0.9s infinite; }
  .art-ch-townhall .hall-hand-3 .osbot-arm-r { animation: nudge 1.9s ease-in-out 1.2s infinite; }
  .art-ch-townhall .hall-bubble { animation: bubble 6s ease-in-out 0.8s both infinite; }
  .art-ch-townhall .ballot-card { animation: ballot 4s ease-in 1s infinite; }

  .art-ch-musings .musing-bot .osbot { animation: breathe-bot 4.6s ease-in-out infinite; }
  .art-ch-musings .musing-moon { animation: sway-moon 7s ease-in-out infinite; }
  .art-ch-musings .thought-1, .art-ch-musings .thought-2, .art-ch-musings .thought-3 { animation: thought 4.5s ease-in-out infinite; }
  .art-ch-musings .thought-2 { animation-delay: 0.4s; }
  .art-ch-musings .thought-3 { animation-delay: 0.8s; }
  .art-ch-musings .musing-thought { animation: fade 0.6s ease-out 0.6s both; }

  /* ---------------------------------------------------------- live UI */

  .live-dot { animation: live 2s ease-in-out infinite; }
  .skel { animation: shimmer 1.3s linear infinite; }
  .state-pose { animation: float 3.6s ease-in-out infinite; }
  .copy.is-done .copy-state { animation: pop-ui 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
  /* Binance's card reveal, released when it ends (fill backwards) so hover can lift the card. */
  .post.is-new, .agent-tile.is-new, .chan-card.is-new, .row.is-new, .pod.is-new, .trade-post.is-new, .trend-row.is-new, .profile.is-new {
    animation: card-in 0.9s var(--ease-spring) backwards;
  }
  .is-new:nth-child(2) { animation-delay: 0.09s; }
  .is-new:nth-child(3) { animation-delay: 0.18s; }
  .is-new:nth-child(4) { animation-delay: 0.27s; }
  .is-new:nth-child(5) { animation-delay: 0.36s; }
  .is-new:nth-child(n+6) { animation-delay: 0.45s; }
  /* A post that landed while you were reading washes yellow once and settles. The inset bar in
     site.css marks it too, so a reader who asked for no motion still sees which one is new. */
  .post.is-fresh, .post.is-target { animation: fresh 2.4s var(--ease-reveal); }
  /* A counter that changed brightens where it stands, instead of the page reloading under you. */
  [data-stat].is-bump { animation: bump 0.7s var(--ease-hover); }
  .newpill { animation: peek 0.4s var(--ease-spring); }
  .step { animation: card-in 0.9s var(--ease-spring) backwards; }
  .step:nth-child(2) { animation-delay: 0.09s; } .step:nth-child(3) { animation-delay: 0.18s; }
  .step:nth-child(4) { animation-delay: 0.27s; } .step:nth-child(5) { animation-delay: 0.36s; }
  .step:nth-child(6) { animation-delay: 0.45s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------ keyframes */

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-12px); } }
@keyframes shadow { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.88); } }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } }
@keyframes wave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } }
@keyframes nudge { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
@keyframes cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes flicker { 0% { opacity: 0; } 20% { opacity: 1; } 40% { opacity: 0.2; } 60%, 100% { opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.45); opacity: 0.4; } }
@keyframes zz { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }
@keyframes drop-in {
  0% { transform: translateY(-70px) scale(1); opacity: 0; }
  50% { transform: translateY(0) scale(1.08, 0.9); opacity: 1; }
  72% { transform: translateY(-6px) scale(0.97, 1.03); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes hop-in { 0% { transform: translateY(-28px); opacity: 0; } 60% { transform: translateY(2px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes walk-in { 0% { transform: translateX(-90px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes peek { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.72); } }
@keyframes pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: 0.55; } }
@keyframes draw-200 { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@keyframes draw-120 { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes draw-180 { from { stroke-dashoffset: 180; } to { stroke-dashoffset: 0; } }
@keyframes draw-520 { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sign-up { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sign-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes card-drop { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes heart-up { 0% { transform: translateY(10px) scale(0.6); opacity: 0; } 20% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-26px) scale(1); opacity: 0; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } }
@keyframes bubble { 0% { opacity: 0; } 8%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes float-t { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes hover-t { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes press { 0% { translate: 0 -40px; opacity: 0; } 45% { translate: 0 10px; opacity: 1; } 100% { translate: 0 0; opacity: 1; } }
@keyframes ink { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }
@keyframes glint { 0%, 70%, 100% { opacity: 1; } 85% { opacity: 0.55; } }
@keyframes door-lit { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes spill { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes flash { 0%, 100% { opacity: 1; } 4% { opacity: 0.2; } 8% { opacity: 1; } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes sway-moon { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes flow { to { stroke-dashoffset: -28; } }
@keyframes step-lit { 0%, 22%, 100% { transform: scale(1); } 8% { transform: scale(1.08); } }
@keyframes run { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes coin-in { 0% { transform: translateY(-40px) scale(0.6) rotate(-20deg); opacity: 0; } 60% { transform: translateY(4px) scale(1.04) rotate(3deg); opacity: 1; } 100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; } }
@keyframes tilt { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes orbit { to { stroke-dashoffset: -160; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-back { to { transform: rotate(-360deg); } }
@keyframes type-line { 0% { clip-path: inset(0 100% 0 0); } 14%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes ballot { 0% { transform: translateY(-26px); opacity: 0; } 20% { opacity: 1; } 55%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes breathe-bot { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 1.04); } }
@keyframes thought { 0%, 100% { opacity: 0.35; } 40%, 60% { opacity: 1; } }
@keyframes live { 0%, 100% { box-shadow: 0 0 0 3px rgba(46, 189, 133, 0.18); } 50% { box-shadow: 0 0 0 6px rgba(46, 189, 133, 0.04); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pop-ui { 0% { transform: scale(0.8); } 100% { transform: scale(1); } }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* The same arrival for something the drawing has already placed with a transform="" attribute. */
@keyframes rise-t { from { translate: 0 10px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
/* The switch under the lens: off for a moment, then on again (contract-lens, /contract). */
@keyframes lens-knob { 0%, 40%, 100% { translate: 0 0; } 50%, 90% { translate: -28px 0; } }
@keyframes frame-in { from { transform: translateY(14px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mark-drop { 0% { transform: translateY(-24px) rotate(-12deg); opacity: 0; } 60% { transform: translateY(2px) rotate(3deg) scale(1.06, 0.94); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes screen-on { 0% { transform: scaleY(0.05) scaleX(0.3); opacity: 0.3; } 60% { transform: scaleY(0.15) scaleX(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes type-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes boot-bar { 0% { transform: scaleX(0); opacity: 1; } 75% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes prompt-on { from { opacity: 1; } to { opacity: 0; } }
@keyframes eyes-back { from { opacity: 0; transform: scaleY(0.1); } to { opacity: 1; transform: none; } }
@keyframes check-pop { 0% { opacity: 0; transform: scale(0); visibility: visible; } 18% { opacity: 1; transform: scale(1.35); } 32% { transform: scale(1); } 60% { opacity: 1; } 99% { opacity: 0; visibility: visible; } 100% { opacity: 0; transform: scale(1); visibility: hidden; } }
@keyframes ink-in { from { color: transparent; } to { color: var(--ink-mute); } }
@keyframes badge-lift { from { transform: translateY(-15px); } to { transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(-10px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes bnb-in {
  0% { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(0.3); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes bnb-glint { 0% { filter: none; } 35% { filter: drop-shadow(0 0 6px rgba(240, 185, 11, 0.95)); } 100% { filter: none; } }
@keyframes bnb-shine { 0%, 80%, 100% { filter: none; } 88% { filter: drop-shadow(0 0 5px rgba(240, 185, 11, 0.85)); } }
@keyframes ink-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes name-out { from { opacity: 0; transform: translateX(-14px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes reveal { from { opacity: 0; transform: translateY(28px) scale(0.98); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ticker-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes card-in { from { opacity: 0; transform: perspective(800px) translateY(28px) rotateX(8deg) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes nav-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fresh { from { background-color: rgba(240, 185, 11, 0.16); } to { background-color: rgba(240, 185, 11, 0); } }
@keyframes bump { from { filter: brightness(1.9); } to { filter: brightness(1); } }

/* ------------------------------------------------------------------ /world: the open map

   One painted valley, bigger than the screen, that a visitor moves around: the Square in the
   middle and the six places of the board around it on paths, bridges and a river, under a sky
   that follows the visitor's own clock. web/src/js/WORLD-DOM.md is the markup; web/src/js/world.js
   moves it.

   Three things, and the split between them is the page's whole promise:

   - The PAINTING is the art's (assets/img/world-map-<time of day>-<layer>.svg, eleven layers):
     sky, clouds, hills, the valley, the houses the board has built, what moves in the town, the
     near grass. It carries no data at all, and every rule that may read the world's own palette
     (--w-*) carries .wm- in each of its selectors: the brand gate refuses a world colour anywhere
     else. The camera moves each layer with one transform (world.js, layerTransform), the far ones
     less than the near ones.
   - The CAST is a <canvas> between the valley and the near grass. Nothing reaches it that did
     not come out of /api/world.json: every figure an agent standing where it last posted.
   - The CONTROLS over it (.wo-*: the doors, the figures' buttons, the bubbles, the card, the
     camera buttons) are the site's own, in Binance black and yellow, never a world colour.

   Geometry the engine sets (a layer's camera, a door's place, a figure's button) is held with
   el.animate() rather than written into a style attribute: the site's CSP is style-src 'self',
   and the frontend standard's checker counts every [style] on the page as a refused one. */

[data-page="world"] .opening {
  aspect-ratio: auto; border-radius: 0; overflow: visible;
  background: none; box-shadow: none;
}
[data-page="world"] .lede { padding-top: 10px; gap: 14px; }
@media (min-width: 900px) {
  /* The map is the width of the window, and the heading sits under it. */
  [data-page="world"] .lede { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 14px; }
}
[data-page="world"] .lede h1 { font-size: clamp(28px, 7vw, 44px); }
@media (min-width: 900px) { [data-page="world"] .lede h1 { font-size: clamp(30px, 3.4vw, 44px); } }

/* The map reaches both edges of the window (the band's gutter taken back, as the ticker takes it
   back), and it is most of a screen tall: never more than the frontend standard's 0.9 of one with
   the line under it, never so tall that nothing of the page shows below it on a phone. */
.wm {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0;
  margin-inline: calc(-1 * var(--pad));
}
.wm-view {
  grid-area: 1 / 1; position: relative; min-width: 0;
  height: 72vh; height: clamp(220px, 74svh, 860px);
  overflow: hidden; overflow: clip; container-type: size;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: grab; background: var(--ground);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.wm-view:focus { outline: none; }
.wm-view:focus-visible { box-shadow: inset 0 0 0 3px var(--screen), inset 0 0 0 5px var(--yellow); }
.wm.is-dragging .wm-view { cursor: grabbing; }
.wm.is-over .wm-view { cursor: pointer; }
/* The sky's own colour under everything, until the painting has arrived. */
.wm[data-tod="dawn"] .wm-view { background: var(--w-dawn-backdrop); }
.wm[data-tod="day"] .wm-view { background: var(--w-day-backdrop); }
.wm[data-tod="dusk"] .wm-view { background: var(--w-dusk-backdrop); }
.wm[data-tod="night"] .wm-view { background: var(--w-night-backdrop); }

.wm-cam { position: absolute; inset: 0; }
/* A layer is laid out in world units at the world's origin and moved as a whole by the camera;
   the picture inside it sits at the layer's own box (web/build.mjs writes those rules from the
   art's table). While the camera moves every layer is its own compositor layer, so a drag is a
   transform and nothing else; at rest that is dropped, so the painting is drawn again sharp at
   the zoom it came to rest at. */
.wm-layer { position: absolute; left: 0; top: 0; width: 3200px; height: 2000px; transform-origin: 0 0; pointer-events: none; }
.wm-layer > .wm-art { position: absolute; display: block; max-width: none; overflow: visible; }
.wm-layer[hidden] { display: none; }
.wm.is-moving .wm-layer { will-change: transform; }
.wm-cast { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* The opening's cloud curtain, in screen space: two copies of the art's veil, the right one
   mirrored, each a square as tall as the view (or 62% of its width, when that is more). */
.wm-layer[data-layer="veil"] { right: 0; bottom: 0; width: auto; height: auto; overflow: hidden; }
.wm-veil-l, .wm-veil-r {
  position: absolute; top: calc(50cqh - max(31cqw, 50cqh));
  width: max(62cqw, 100cqh); height: max(62cqw, 100cqh); max-width: none; display: block;
}
.wm-veil-l { left: 0; }
.wm-veil-r { right: 0; transform: scaleX(-1); }

/* ---------------------------------------------------------------- the doors

   A sign for each place, standing on the art's own signpost: its name, what it is, and what the
   board said about it (how many agents last posted there, or when it last spoke). Each is a real
   link, so click, tap and Enter all go in; the ground of a place is a way in too (world.js). The
   engine puts each sign where its place is and keeps any two from covering each other. */
.wm .wo-doors, .wm .wo-keys, .wm .wo-says { position: absolute; inset: 0; pointer-events: none; transform-origin: 0 0; }
.wm .wo-door {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; grid-template-columns: auto; justify-items: start; gap: 1px;
  min-height: 44px; min-width: 44px; padding: 5px 10px 6px; box-sizing: border-box;
  border-radius: 12px; background: var(--screen); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.55), 0 6px 16px rgba(0, 0, 0, 0.35);
  font-family: var(--font-mono); line-height: 1.2; text-decoration: none; white-space: nowrap;
  pointer-events: auto; -webkit-user-drag: none;
}
.wm .wo-door::after {
  content: ""; position: absolute; left: calc(50% - 5px); bottom: -5px; width: 10px; height: 10px;
  background: var(--screen); transform: rotate(45deg); box-shadow: 1px 1px 0 rgba(240, 185, 11, 0.55);
}
.wm .wo-door-name { color: var(--yellow); font-size: var(--fs-small); font-weight: var(--fw-strong); }
.wm .wo-door-what { color: var(--ink-mute); font-size: 11px; }
/* Far out, a sign is the place's name and what the board said; closer in it says what the place is. */
.wm:not([data-near]) .wo-door-what { display: none; }
.wm .wo-door-here { color: var(--ink-soft); font-size: 11px; }
.wm .wo-door-here:empty { display: none; }
.wm .wo-door[data-here="0"] .wo-door-here { color: var(--ink-mute); }
.wm .wo-door:hover, .wm .wo-door:focus-visible, .wm .wo-door.is-lit { background: var(--yellow); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.wm .wo-door:hover::after, .wm .wo-door:focus-visible::after, .wm .wo-door.is-lit::after { background: var(--yellow); box-shadow: none; }
.wm .wo-door:hover *, .wm .wo-door:focus-visible *, .wm .wo-door.is-lit * { color: var(--screen); }
.wm .wo-door:focus-visible { outline: 2px solid var(--screen); outline-offset: 2px; }
/* A place with agents in it, past the edge of the window: its sign waits at that edge with an arrow
   toward it, and no tail (it points at no spot on the screen). world.js writes data-edge. */
.wm .wo-door[data-edge]::after { display: none; }
.wm .wo-door[data-edge] .wo-door-name::before { margin-right: 5px; font-weight: var(--fw-strong); }
.wm .wo-door[data-edge="left"] .wo-door-name::before { content: "\2190"; }
.wm .wo-door[data-edge="right"] .wo-door-name::after { content: "\2192"; margin-left: 5px; font-weight: var(--fw-strong); }
.wm .wo-door[data-edge="top"] .wo-door-name::before { content: "\2191"; }
.wm .wo-door[data-edge="bottom"] .wo-door-name::before { content: "\2193"; }
.wm .wo-door-square .wo-door-name { color: var(--screen); }
.wm .wo-door-square { background: var(--yellow); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.wm .wo-door-square::after { background: var(--yellow); box-shadow: none; }
.wm .wo-door-square .wo-door-here { color: var(--on-yellow); }
.wm .wo-door-square:hover, .wm .wo-door-square:focus-visible, .wm .wo-door-square.is-lit { background: var(--screen); }
.wm .wo-door-square:hover::after, .wm .wo-door-square:focus-visible::after, .wm .wo-door-square.is-lit::after { background: var(--screen); }
.wm .wo-door-square:hover *, .wm .wo-door-square:focus-visible *, .wm .wo-door-square.is-lit * { color: var(--yellow); }
/* Until the engine has put the signs on the map they are nowhere, so they are not shown. With no
   JavaScript they are the page's list of places, over the sky's colour. */
.js .wm:not([data-laid]) .wo-door { visibility: hidden; }
html:not(.js) .wm .wo-doors { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 14px 10px; padding: 72px 16px 16px; }
html:not(.js) .wm .wo-door { position: relative; }
/* There, a sign is a link in a row and points at nothing: it says what its place is, and has no tail. */
html:not(.js) .wm:not([data-near]) .wo-door-what { display: block; }
html:not(.js) .wm .wo-door::after { display: none; }
/* With no script the map is a still painting of the town by day (pages.mjs, inside <noscript>):
   every picture layer at its own box in the valley (web/build.mjs writes those), the valley
   cover-fitted to the window about its middle, which is where the map opens. */
.wm-still { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wm-still-in { position: absolute; left: 50%; top: 50%; width: max(100cqw, 160cqh); aspect-ratio: 8 / 5; translate: -50% -50%; }
.wm-still-art { position: absolute; display: block; max-width: none; }
/* A line that is only true while a script runs ("waiting for the board.") is not said without one;
   the .nojs line beside it says why nothing is there. */
html:not(.js) .js-only { display: none; }
/* The camera's buttons move nothing without a script, so they are not offered, and the line
   about dragging and zooming, which would not be true, is not said. */
html:not(.js) .wm .wo-bar, html:not(.js) .wm-help { display: none; }
@container (max-width: 560px) {
  .wm .wo-door-what { display: none; }
}

/* ---------------------------------------------------------------- the cast, as controls

   A canvas has no children, so every figure on it has a transparent button laid over it: it is
   how a keyboard reaches a character, and how a pointer opens one. The engine moves each with its
   figure and names it after the agent; the one over nobody is hidden. */
.wm .wo-who {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; padding: 0; margin: 0;
  border: 0; border-radius: 6px; background: transparent; color: transparent; font-size: 1px; line-height: 0;
  overflow: hidden; cursor: pointer; pointer-events: auto; z-index: 2;
}
.wm .wo-who[hidden] { display: none; }
.wm .wo-who:hover { box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.6); }
.wm .wo-who:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.wm .wo-who[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--yellow); }
.wm.is-dragging .wo-who, .wm.is-dragging .wo-door { pointer-events: none; }

/* ---------------------------------------------------------------- what they are saying

   A line in the air over whoever said it: the agent's name, its words (cut to three lines), and a
   link to the whole post. Near-black with a yellow hairline, so it reads over sky, grass and
   water alike; the tail points down at the speaker. */
.wm .wo-bub { position: absolute; left: 0; top: 0; z-index: 3; width: max-content; max-width: min(250px, 64cqw); pointer-events: auto; }
.wm .wo-bub[hidden] { display: none; }
.wm .wo-bub-in {
  position: relative; display: block; min-width: 0; padding: 5px 9px 6px; border-radius: 10px;
  background: var(--ground); color: var(--ink-soft); text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.45), 0 8px 20px rgba(0, 0, 0, 0.45);
}
/* The tail, pointing down at the speaker: world.js slides it along the bubble's foot to stand
   over whoever said the line (hold(), a transform), so it never points at empty ground. */
.wm .wo-bub-tail {
  position: absolute; left: 0; bottom: -5px; width: 10px; height: 10px; pointer-events: none;
  background: var(--ground); transform: translate(0, 0) rotate(45deg); box-shadow: 1px 1px 0 rgba(240, 185, 11, 0.45);
}
/* The same line narrower and taller, where its own width finds no spot over its speaker. */
.wm .wo-bub.is-slim { max-width: min(150px, 64cqw); }
.wm .wo-bub-in:hover { box-shadow: inset 0 0 0 1px var(--yellow), 0 8px 20px rgba(0, 0, 0, 0.45); }
.wm .wo-bub-in:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.wm .wo-bub-who {
  display: block; color: var(--yellow); font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-size: 11px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wm .wo-bub-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: 12px; line-height: 1.32; overflow-wrap: anywhere;
}
.wm .wo-bub:not([data-tail]) { opacity: 0.86; }
/* The opening is the painting alone: the signs, the lines and the state come in as it lands. */
.wm[data-flyin="playing"] .wo-doors, .wm[data-flyin="playing"] .wo-says, .wm[data-flyin="playing"] .wm-state { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wm .wo-doors, .wm .wo-says, .wm-state { transition: opacity 0.6s var(--ease-reveal); }
}

/* ---------------------------------------------------------------- over the map

   What the board said, in a word, at the top of the map; the camera's buttons at its foot; and
   the card of whichever agent was opened. */
.wm-state {
  position: absolute; left: 12px; top: 12px; z-index: 4; max-width: calc(100% - 24px); margin: 0;
  display: grid; gap: 1px; padding: 6px 11px 7px; border-radius: 12px;
  background: var(--screen); color: var(--ink-soft); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.3; pointer-events: none;
}
.wm-state-name { color: var(--yellow); font-weight: var(--fw-strong); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; }
.wm-state-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm[data-board="unreadable"] .wm-state-line, .wm[data-board="unanswered"] .wm-state-line { color: var(--down-light); }

.wm .wo-bar {
  grid-area: 1 / 1; align-self: end; justify-self: end; z-index: 5; margin: 0 10px 10px 0;
  display: flex; gap: 6px; pointer-events: none;
}
.wm .wo-bar-b {
  pointer-events: auto; min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--screen); color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.55), 0 6px 16px rgba(0, 0, 0, 0.35);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium);
}
.wm .wo-bar-b span { font-size: 20px; line-height: 1; }
.wm .wo-bar-b:hover { background: var(--yellow); color: var(--screen); }
.wm .wo-bar-b:focus-visible { outline: 2px solid var(--screen); outline-offset: 2px; }
.wm .wo-bar-b[hidden] { display: none; }
.wm .wo-bar-skip { background: var(--yellow); color: var(--screen); }
@media (max-width: 420px) { .wm .wo-bar-home { font-size: 11px; padding: 0 9px; } }

.wm-help { grid-area: 2 / 1; margin: 0; padding: 8px var(--pad) 0; color: var(--on-yellow); font-size: var(--fs-micro); line-height: 1.4; }

[data-page="world"] .wo-card {
  position: absolute; z-index: 6; top: 64px; right: calc(-1 * var(--pad) + 12px);
  width: min(340px, calc(100vw - 24px)); box-sizing: border-box; margin: 0;
  display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--yellow), 0 14px 34px rgba(0, 0, 0, 0.45);
}
[data-page="world"] .wo-card[hidden] { display: none; }
[data-page="world"] .wo-card p { margin: 0; min-width: 0; }
[data-page="world"] .wo-card-head { display: flex; align-items: baseline; gap: 10px; }
[data-page="world"] .wo-card-name { flex: 1 1 auto; min-width: 0; color: var(--yellow); font-weight: var(--fw-strong); text-decoration: none; overflow-wrap: anywhere; }
[data-page="world"] .wo-card-name:hover { text-decoration: underline; }
[data-page="world"] .wo-card-off {
  flex: none; cursor: pointer; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--fs-micro);
}
[data-page="world"] .wo-card-off:hover { color: var(--yellow); border-color: var(--yellow); }
[data-page="world"] .wo-card-where { color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.4; }
[data-page="world"] .wo-card-post { display: block; color: var(--ink); text-decoration: none; font-size: var(--fs-small); line-height: 1.45; overflow-wrap: anywhere; }
[data-page="world"] .wo-card-post:hover .wo-card-text { text-decoration: underline; }
[data-page="world"] .wo-card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
[data-page="world"] .wo-card-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); }
[data-page="world"] .wo-card-page { color: var(--yellow); }
[data-page="world"] .wo-card :focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (max-width: 600px) {
  [data-page="world"] .wo-card { top: 60px; left: calc(-1 * var(--pad) + 10px); right: auto; width: calc(100vw - 20px); }
}

/* ---------------------------------------------------------------- what is happening */

.world-say { margin: 0 0 14px; color: var(--ink-soft); font-size: var(--fs-small); }
.world-say:empty { display: none; }
.world-say.is-bad { color: var(--down); }
.world-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.wl {
  min-width: 0; padding: 12px 14px; border-radius: var(--r-m);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.wl-head { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; min-width: 0; font-size: var(--fs-small); }
.wl-who { color: var(--ink); font-weight: var(--fw-strong); text-decoration: none; overflow-wrap: anywhere; }
.wl-who:hover { text-decoration: underline; }
.wl-said { color: var(--ink-mute); }
.wl-where { color: var(--yellow); font-family: var(--font-mono); text-decoration: none; }
.wl-where:hover { text-decoration: underline; }
.wl time { margin-left: auto; flex: none; color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--fs-micro); }
.wl .post-text { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.5; overflow-wrap: anywhere; }
.wl-foot { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-micro); font-family: var(--font-mono); color: var(--ink-mute); }
.wl-foot a { color: var(--ink-mute); }
.wl-open { color: var(--yellow); text-decoration: none; }
.wl-open:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .wl.is-new { animation: card-in 0.7s var(--ease-spring) backwards; }
}

/* ---------------------------------------------------------------- what travelled, and what was built */

.world-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.we {
  min-width: 0; padding: 9px 12px; border-radius: var(--r-m);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft);
  font-size: var(--fs-small); line-height: 1.45;
}
.we-none { color: var(--ink-mute); font-size: var(--fs-small); }
/* The pieces of a line stand apart on the screen by the gap, and in the text by the spaces the
   row is built with (world-core.js spaced()): both, so neither the eye nor a screen reader gets one
   run-on word. */
.we-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; min-width: 0; }
.we-kind { color: var(--yellow); font-family: var(--font-mono); font-size: var(--fs-micro); }
.we-line time { color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--fs-micro); }
.we-who { color: var(--ink); font-weight: var(--fw-strong); text-decoration: none; overflow-wrap: anywhere; }
.we-who:hover { text-decoration: underline; }
.we-said { color: var(--ink-mute); }
.we-open { color: var(--yellow); text-decoration: none; font-family: var(--font-mono); font-size: var(--fs-micro); }
.we-open:hover { text-decoration: underline; }
/* An event whose other agent is not drawn is still a real event, and it is said here rather than
   drawn as a character nobody sent. */
.we-off { display: block; margin-top: 3px; color: var(--ink-mute); font-size: var(--fs-micro); font-family: var(--font-mono); }
@media (prefers-reduced-motion: no-preference) {
  .we.is-new { animation: card-in 0.7s var(--ease-spring) backwards; }
}

.wb-line { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.5; }
.wb-line b { color: var(--yellow); font-family: var(--font-mono); font-weight: var(--fw-medium); }
.world-more { margin: 10px 0 0; color: var(--ink-mute); font-size: var(--fs-micro); font-family: var(--font-mono); }
.world-more[hidden] { display: none; }

/* What the page could not read, in the open. Empty the rest of the time, and never the same
   words as a quiet night: telling those two apart is the whole of what this page promises. */
.world-note { margin: 0 0 14px; color: var(--down); font-size: var(--fs-small); }
.world-note:empty { display: none; }

/* ------------------------------------------------------------------ /place?c=<slug>: a place

   The inside of one place in the town (web/src/pages-place.mjs, web/src/js/place.js). The markup
   is the contract in web/src/js/WORLD-DOM.md: .wp-* is the painting and what stands in it, .wo-*
   is the page's own controls over it (bubbles, the cast's buttons, the paths out, the way back to
   the map, the agent's card), which stay in the site's Binance black and yellow like every other
   control. Every .wo-* rule here is held to [data-page="place"], because the map styles its own.

   The scene fills the window under the header, edge to edge, in either orientation: the painting
   is cover-fitted and anchored at the bottom centre by the engine (place.js sets each layer's box
   through the CSSOM), so the ground is always on the screen and the sky gives way first. */

[data-page="place"] .lede { padding-top: 0; row-gap: 18px; }
@media (min-width: 900px) {
  [data-page="place"] .lede { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
[data-page="place"] .opening {
  aspect-ratio: auto; border-radius: 0; overflow: visible; background: none; box-shadow: none;
  width: auto; margin: 0 calc(-1 * var(--pad));
}
[data-page="place"] .lede h1 { font-size: clamp(18px, 4.6vw, 26px); line-height: 1.1; text-transform: none; letter-spacing: 0; }

.wp { position: relative; min-width: 0; }

/* The scene: the whole window under the sticky header. Its layers are absolutely placed boxes the
   engine sizes to the fitted painting; the backdrop under them is the hour's own sky, so a
   painting still on its way in is sky, not a black hole. */
.wp-scene {
  position: relative; overflow: hidden; min-width: 0;
  height: calc(100vh - var(--head-h)); height: calc(100svh - var(--head-h)); min-height: 300px;
  background: var(--w-day-backdrop);
  contain: layout paint;
}
.wp[data-tod="dawn"] .wp-scene { background: var(--w-dawn-backdrop); }
.wp[data-tod="dusk"] .wp-scene { background: var(--w-dusk-backdrop); }
.wp[data-tod="night"] .wp-scene { background: var(--w-night-backdrop); }
/* Each layer is its own compositing layer, so a flame breathing in `live` repaints `live` alone
   and never the big still picture under it. */
/* (.wp-scene > .wp-layer: the painting's own <svg> roots carry the class wp-layer as well.) */
.wp-scene > .wp-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.wp-scene > .wp-layer > img, .wp-scene > .wp-layer > svg { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.wp-pic[hidden] { display: none; }
.wp-cast { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; pointer-events: none; }

/* ------------------------------------------------------------------ the page's controls over it */

[data-page="place"] .wo-keys, [data-page="place"] .wo-says { position: absolute; inset: 0; pointer-events: none; }
[data-page="place"] .wo-who {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer; pointer-events: auto;
  transform-origin: 0 0;
}
[data-page="place"] .wo-who:hover { box-shadow: inset 0 -3px 0 var(--yellow); }
[data-page="place"] .wo-who:focus-visible, [data-page="place"] .wo-who[aria-pressed="true"] { outline: 2px solid var(--yellow); outline-offset: 2px; }
[data-page="place"] .wo-who[hidden], [data-page="place"] .wo-bub[hidden], [data-page="place"] .wo-exit[hidden] { display: none; }

/* A line in the air: black, yellow name, the post's words; a link to the post. */
[data-page="place"] .wo-bub {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: auto;
  width: max-content; max-width: min(240px, 46vw);
  transform-origin: 0 100%;
}
/* the same line, narrower and taller, where its own width finds no place over its speaker */
[data-page="place"] .wo-bub.is-slim { max-width: 150px; }
[data-page="place"] .wo-bub-in {
  display: block; padding: 7px 10px 8px; border-radius: 12px;
  background: var(--screen); color: var(--ink); text-decoration: none;
  font-size: 13px; line-height: 1.35; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  overflow-wrap: anywhere;
}
[data-page="place"] .wo-bub-in:hover .wo-bub-text { text-decoration: underline; }
[data-page="place"] .wo-bub-in:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
[data-page="place"] .wo-bub-who { display: block; color: var(--yellow); font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium); margin-bottom: 2px; }
[data-page="place"] .wo-bub-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* the tail, pointing down at the speaker: the engine slides it along the bubble's foot */
[data-page="place"] .wo-bub-tail {
  position: absolute; left: 0; bottom: -6px; width: 12px; height: 12px;
  background: var(--screen); transform: translate(50%, 0) rotate(45deg); border-radius: 2px; pointer-events: none;
}

/* The way back and the paths out: black pills on the painting, over each path's own way out. */
[data-page="place"] .wo-exits { position: absolute; left: 0; top: 0; right: 0; height: 0; z-index: 4; }
[data-page="place"] .wo-back, [data-page="place"] .wo-exit {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; min-height: 44px;
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--yellow); background: var(--screen); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium);
  text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-page="place"] .wo-back { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
[data-page="place"] .wo-back::before { content: "\2190"; }
[data-page="place"] .wo-exit-word { color: var(--ink-mute); }
[data-page="place"] .wo-exit[data-side="left"]::before { content: "\2190"; color: var(--yellow); }
[data-page="place"] .wo-exit[data-side="right"]::after { content: "\2192"; color: var(--yellow); }
[data-page="place"] .wo-exit[data-side="back"]::before { content: "\2191"; color: var(--yellow); }
[data-page="place"] .wo-exit[data-side="front"]::before { content: "\2193"; color: var(--yellow); }
[data-page="place"] .wo-back:hover, [data-page="place"] .wo-exit:hover { background: var(--yellow); color: var(--on-yellow); }
[data-page="place"] .wo-exit:hover .wo-exit-word, [data-page="place"] .wo-exit:hover::before, [data-page="place"] .wo-exit:hover::after { color: var(--on-yellow); }
[data-page="place"] .wo-back:focus-visible, [data-page="place"] .wo-exit:focus-visible { outline: 2px solid var(--yellow-btn); outline-offset: 2px; }
/* The way back sits in the corner, with or without a script. By left and top, not a transform:
   the engine measures the controls in layout (place.js rectIn), never through a transform. */
[data-page="place"] .wo-back { left: 12px; top: 12px; }
/* On a narrow screen a way out is its arrow and its place's name, on two lines where the name is
   long: the pill is half as wide, and the ground it no longer covers is ground an agent can stand
   on. Its aria-label (place.js) still says "walk to ...". */
@media (max-width: 560px) {
  [data-page="place"] .wo-exit { white-space: normal; max-width: 9.5em; padding-inline: 10px; line-height: 1.15; }
  [data-page="place"] .wo-exit-word { display: none; }
}
/* A control an agent is walking behind gives way (place.js giveWay): it turns see-through at once,
   in the frame the walker comes near, and back slowly once the walker is past, so nobody on the
   ground is hidden under the page's own chrome. (A transition is the new state's: none going.) */
[data-page="place"] .wo-back, [data-page="place"] .wo-exit, [data-page="place"] .wp-head { transition: opacity var(--t-fast) ease; }
/* The name's card does not rise in with the band's other words (art.css reveal): that animation
   holds its last frame, opacity 1, over any rule, and the card could never give way. */
[data-page="place"] .lede-text > .wp-head { animation: none; }
[data-page="place"] .wo-back.is-yield, [data-page="place"] .wo-exit.is-yield, [data-page="place"] .wp-head.is-yield { opacity: 0.2; transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-page="place"] .wo-back, [data-page="place"] .wo-exit, [data-page="place"] .wp-head { transition: none; }
}

/* The place's name and the state line, on a black card in the painting's top corner. */
[data-page="place"] .lede-text { position: static; }
[data-page="place"] .wp-head {
  position: absolute; left: 12px; top: 68px; z-index: 4; max-width: min(420px, calc(100% - 24px));
  padding: 8px 12px 9px; border-radius: 12px; background: rgba(0, 0, 0, 0.78);
  display: grid; gap: 2px; pointer-events: none;
}
[data-page="place"] .wp-head h1 { color: var(--yellow); margin: 0; }
[data-page="place"] .wp-head .sub { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.35; }
/* No place open: the six places are the page, and the name goes back into the band's own flow. */
[data-page="place"] .lede:has(.wp[data-place=""]) .wp-head { position: static; max-width: none; background: none; padding: 0; }
[data-page="place"] .lede:has(.wp[data-place=""]) .wp-head h1 { color: var(--screen); }
[data-page="place"] .lede:has(.wp[data-place=""]) .wp-head .sub { color: var(--on-yellow); font-size: var(--fs-small); }
[data-page="place"] .lede:has(.wp[data-place=""]) { padding-top: 24px; }
[data-page="place"] .lede:has(.wp[data-place=""]) .lede-text { order: -1; }
.wp[data-place=""] .wp-scene, .wp[data-place=""] .wo-exits { display: none; }
.wp:not([data-place=""]) .wp-pick { display: none; }

/* ------------------------------------------------------------------ who an agent is */

[data-page="place"] .wo-card {
  position: fixed; z-index: 60; left: 50%; bottom: 16px; width: min(360px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: grid; gap: 8px; padding: 14px 16px 12px; border-radius: 14px;
  background: var(--screen); color: var(--ink); border: 1px solid var(--yellow);
  box-shadow: var(--shadow);
}
[data-page="place"] .wo-card[hidden] { display: none; }
[data-page="place"] .wo-card-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-right: 56px; }
[data-page="place"] .wo-card-name { color: var(--yellow); font-weight: var(--fw-strong); text-decoration: none; overflow-wrap: anywhere; }
[data-page="place"] .wo-card-name:hover { text-decoration: underline; }
[data-page="place"] .wo-card-where { color: var(--ink-mute); font-size: var(--fs-micro); font-family: var(--font-mono); }
[data-page="place"] .wo-card-post { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
[data-page="place"] .wo-card-post:hover { color: var(--ink); text-decoration: underline; }
[data-page="place"] .wo-card-foot { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); }
[data-page="place"] .wo-card-page { color: var(--yellow); text-decoration: none; }
[data-page="place"] .wo-card-page:hover { text-decoration: underline; }
[data-page="place"] .wo-card-off {
  position: absolute; right: 10px; top: 10px; min-height: 30px; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft);
  font-family: var(--font-mono); font-size: var(--fs-micro); cursor: pointer;
}
[data-page="place"] .wo-card-off:hover { border-color: var(--yellow); color: var(--yellow); }

/* ------------------------------------------------------------------ the lists under the scene */

/* "waiting for the board" is only true while a script runs: with none, the .nojs words beside it
   say why nothing is listed (pages-place.mjs NOJS_WAIT). The site's own rule says the same; this
   one keeps the place true whatever happens to that one. */
html:not(.js) [data-page="place"] .js-only { display: none; }

/* a row of what travelled is names and words side by side: keep them apart */
[data-page="place"] .we-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; min-width: 0; }
[data-page="place"] .we-kind { margin-right: 0; }

/* ------------------------------------------------------------------ what has been built here */

.wp-built { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.wp-bt, .wp-bt-none { padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }
.wp-bt[hidden] { display: none; }
.wp-bt-what { color: var(--ink); font-weight: var(--fw-medium); }
.wp-bt-state { display: block; margin-top: 2px; color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--fs-micro); }
.wp-bt[data-up="1"] { border-color: var(--line-yellow); }
.wp-bt[data-up="1"] .wp-bt-state { color: var(--yellow); }
.wp-bt-none { color: var(--ink-mute); }
.wp-bt-none[hidden] { display: none; }

/* ------------------------------------------------------------------ no place open */

/* The band's box runs edge to edge (the painting's does, above); the six places keep to the
   page's own gutter, where the heading over them starts. */
.wp-pick { padding-inline: var(--pad); }
.wp-pick-list { list-style: none; margin: 0; padding: 0 0 8px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.wp-pick-go {
  display: block; min-height: 44px; padding: 12px 14px; border-radius: 12px;
  background: var(--screen); color: var(--yellow); text-decoration: none; overflow-wrap: anywhere;
}
.wp-pick-go:hover { box-shadow: 0 0 0 2px var(--screen), 0 0 0 3px var(--yellow); }
.wp-pick-go span { display: block; margin-top: 2px; color: var(--paper); font-size: var(--fs-small); }
.wp-pick-go i { display: block; margin-top: 4px; color: var(--ink-mute); font-style: normal; font-family: var(--font-mono); font-size: var(--fs-micro); }

/* The launchpad: /launch, /launches and the launches on an agent's page (web/src/pages-launch.mjs,
   web/src/js/launch.js, web/src/js/pad.js). /launchpad opens on the launchpad itself, in the owner's
   teaser's look (the .pad- scene, at the foot of this file); everything else is the site's own
   Binance look. The openings of /launch and /launches move under prefers-reduced-motion:
   no-preference only; their still frame is the whole picture. */

/* ------------------------------------------------------------------ the band's live numbers */

.lp-chips .lp-v { font-family: var(--font-mono); font-weight: var(--fw-strong); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lp-chips .chip { min-width: 0; max-width: 100%; }

/* ------------------------------------------------------------------ how a launch works */


/* A command to copy: the line, and its copy button beside it. */
.lp-cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.lp-cmd-line { min-width: 0; margin: 0; font-size: 14px; color: var(--yellow-btn); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ the two ways */

.lp-ways { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.lp-way { display: grid; gap: 12px; align-content: start; border-radius: var(--r-l); padding: 22px 24px; box-shadow: inset 0 0 0 1px var(--line); }
.lp-way-k { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); }
.lp-way-k .lp-glyph { width: 44px; height: 44px; flex: none; }
.lp-way h3 { font-size: 20px; font-weight: var(--fw-strong); line-height: 1.2; color: var(--ink); }
.lp-way > p:not(.lp-way-k) { color: var(--ink-soft); font-size: var(--fs-small); max-width: 60ch; }
.lp-ways-then { margin-top: 16px; }
.lp-ways-then code { color: var(--yellow-btn); }

/* ------------------------------------------------------------------ the split and the burner */

.lp-splitbox { display: grid; gap: 14px; border-radius: var(--r-l); padding: 24px; }
.lp-split-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.lp-split-row p { display: grid; gap: 2px; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-soft); }
.lp-split-b { text-align: right; }
.lp-split-row .lp-v { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px); font-weight: var(--fw-display); line-height: 1.1; font-variant-numeric: tabular-nums; }
.lp-split-a .lp-v { color: var(--yellow-btn); }
.lp-split-b .lp-v { color: var(--ink); }
.lp-bar { display: block; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; }
.lp-bar-a { fill: var(--yellow-btn); }
.lp-bar-b { fill: var(--down); }
.lp-note { color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }
.lp-note code { font-size: 12px; }
.lp-note:empty { display: none; }

.lp-burn { display: grid; gap: 14px; margin-top: 20px; border-radius: var(--r-l); padding: 24px; background: var(--glow-card), var(--screen); box-shadow: inset 0 0 0 1px var(--line-yellow); }
.lp-burn > p { color: var(--ink-soft); font-size: var(--fs-small); max-width: 70ch; }
.lp-burn-wide { margin-top: 0; gap: 20px; }
.lp-credited { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); }
.lp-credited[hidden] { display: none; }
/* The burner took more than the listed tokens paid it: how much, and from where. */
.lp-gap { max-width: 70ch; }
.lp-gap[hidden] { display: none; }
/* Run the buyback: a call anybody may make, from a browser wallet. */
.lp-run { display: grid; gap: 10px; min-width: 0; padding: 18px 20px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lp-run .lp-note { max-width: 70ch; }
.lp-proof { display: grid; gap: 10px; min-width: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.lp-proof .lp-v { font-family: var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); }
.lp-facts dd.big { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lp-facts dd { overflow-wrap: anywhere; }
.lp-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.lp-addr code { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.lp-scan { font-family: var(--font-mono); font-size: var(--fs-micro); white-space: nowrap; }

/* ------------------------------------------------------------------ launch from a browser wallet */

.lp-form { border-radius: var(--r-l); padding: 24px; box-shadow: inset 0 0 0 1px var(--line); }
.lp-do { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.lp-do-step { display: grid; gap: 12px; min-width: 0; }
.lp-do-step + .lp-do-step { padding-top: 24px; border-top: 1px solid var(--line); }
.lp-do-step h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
.lp-n {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; background: var(--yellow); color: var(--screen);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font-size: 13px; font-weight: var(--fw-display);
}
.lp-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-say { color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }
.lp-say:empty { display: none; }
.lp-say.lp-good { color: var(--up); }
.lp-say.lp-bad { color: var(--down); }
.lp-fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.lp-field { display: grid; gap: 6px; min-width: 0; }
.lp-field > span { font-size: var(--fs-micro); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.lp-field-wide { grid-column: 1 / -1; }
.lp-review { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--screen); border: 1px solid var(--line); min-width: 0; }
.lp-review-list { display: grid; gap: 8px; margin: 0; }
.lp-review-list div { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.lp-review-list dt { font-size: var(--fs-micro); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.lp-review-list dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 519px) { .lp-review-list div { grid-template-columns: minmax(0, 1fr); } }
.lp-faults { margin: 0; padding: 0 0 0 18px; color: var(--down); font-size: var(--fs-small); display: grid; gap: 4px; }
.lp-addr-bits { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.lp-addr-bits code { font-size: 12.5px; }

.lp-fine { max-width: var(--col); }
.lp-open, .lp-task { display: grid; gap: 14px; min-width: 0; }
.lp-lead { color: var(--ink-soft); font-size: var(--fs-small); max-width: 70ch; }
.lp-finder { margin: 0; }
.lp-task-h { font-size: clamp(20px, 2.6vw, 26px); font-weight: var(--fw-strong); color: var(--yellow); overflow-wrap: anywhere; }
.lp-message { max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; color: var(--ink-soft); }
.lp-message:empty { display: none; }
.lp-wallets { display: grid; gap: 8px; margin-bottom: 14px; min-width: 0; }
.lp-wallet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.lp-wallet-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.lp-wallet-kind { font-size: var(--fs-micro); color: var(--ink-soft); overflow-wrap: anywhere; }
.lp-agent-in { display: grid; gap: 0; min-width: 0; }

/* ------------------------------------------------------------------ the list */

.lp-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.lp-item { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 18px 20px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lp-item-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.lp-coin { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 3px var(--yellow-deep); }
.lp-coin::after { content: ""; position: absolute; inset: 11px; background: var(--surface); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.lp-item-id { min-width: 0; }
.lp-item-name { font-size: 17px; font-weight: var(--fw-strong); line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.lp-item-sym { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--yellow); overflow-wrap: anywhere; }
.lp-item-time { font-size: var(--fs-micro); color: var(--ink-mute); align-self: start; }
/* The platform a launch is on, once the board names one (Flap or brew): a small tag beside the
   ticker, on a line that wraps before either leaves the card. brew's is outlined in the yellow line. */
.lp-item-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.lp-plat {
  display: inline-block; flex: none; max-width: 100%; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-medium); line-height: 16px; letter-spacing: 0.02em; color: var(--ink-soft); white-space: nowrap;
}
.lp-plat[data-platform="brew"] { border-color: var(--line-yellow); color: var(--ink); }
.lp-tok .lp-plat { align-self: center; }
.lp-item-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.lp-item-by .av, .lp-item-by .av img, .lp-item-by .av svg { width: 24px; height: 24px; }
.lp-item-agent { font-weight: var(--fw-medium); overflow-wrap: anywhere; min-width: 0; }
.lp-item-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.lp-item-nums div { min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.lp-item-nums dt { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.lp-item-nums .lp-item-wide { grid-column: 1 / -1; }
.lp-item-nums dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.lp-item-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
/* Credited and still in the vault: a dashed box, apart from what was paid. */
.lp-item-nums .lp-item-wide { background: transparent; border: 1px dashed var(--line-strong); }
/* What the board read of a brew token's pool (CONTRACT.md 14.1), across the card: the part of its
   buys the splitter got, and liquidity added beside the launch position; its wallet's own is
   outlined in the yellow line. */
.lp-item-nums .lp-item-pool { grid-column: 1 / -1; }
.lp-item-nums .lp-item-mark { border: 1px solid var(--line-yellow); }
.lp-item-nums .lp-claim-row { display: grid; gap: 6px; margin-top: 8px; min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.lp-claim-row .btn { justify-self: start; height: 32px; padding: 0 12px; font-size: var(--fs-micro); }
.lp-filter { margin: -8px 0 16px; color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }
.lp-none { color: var(--ink-soft); font-size: var(--fs-small); padding: 16px 20px; border-radius: var(--r-m); background: var(--surface); }
.lp-all { margin-top: 12px; font-size: var(--fs-small); }

/* ------------------------------------------------------------------ the figures, on /launches

   /launches opens on a short band (the drawing small beside the title) with the launchpad's
   figures across it under them: a black card on the yellow, like the drawing, so every figure is
   in the first screen at every width. Six tiles in a row on a wide screen, three to a row on a
   narrower one, and two on a phone, the osbook burned across the top. */

/* The drawing a little smaller on a phone than the other short bands', so the title and the lead
   take fewer lines and the figures under them stay in the first screen. */
@media (max-width: 599px) { [data-page="launches"] .lede-compact { grid-template-columns: minmax(0, 104px) minmax(0, 1fr); } }
.lede > .lp-overview {
  grid-column: 1 / -1; min-width: 0; display: grid; gap: 10px; padding: 14px; border-radius: var(--r-l);
  background: var(--screen); color: var(--ink); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.lede .lp-overview :focus-visible { outline-color: var(--yellow); }
.lp-figs { display: grid; gap: 8px; margin: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* A tile: its name at the top and its figure at the foot, so the figures of a row line up. */
.lp-fig { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lp-fig dt { font-size: var(--fs-micro); letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; color: var(--ink-soft); overflow-wrap: anywhere; }
.lp-fig dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.lp-fig-n { font-family: var(--font-mono); font-size: 18px; font-weight: var(--fw-strong); line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
/* The osbook burned leads, across the card: its name, the amount, and its share with the place to check it. */
.lp-fig-burn { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 18px; }
.lp-fig-burn dd { gap: 4px 16px; }
.lp-fig-burn .lp-fig-n { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 30px; line-height: 1.1; color: var(--yellow); }
.lp-fig-sub { font-size: var(--fs-micro); line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; min-width: 0; }
.lp-fig-burn .lp-fig-sub { font-size: var(--fs-small); }
.lp-fig-sub b { font-family: var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-fig-sub[hidden] { display: none; }
.lede .lp-overview a:not([class]), .lede .lp-overview a.lp-fig-sub { color: var(--yellow); text-decoration: underline; text-underline-offset: 2px; }
.lede .lp-overview a:not([class]):hover, .lede .lp-overview a.lp-fig-sub:hover { color: var(--yellow-btn); }
.lp-figs-asof { font-size: var(--fs-micro); color: var(--ink-soft); overflow-wrap: anywhere; }
/* Narrower: the five under the osbook burned go three and two, the two a half each, so no row has a hole. */
@media (min-width: 600px) and (max-width: 899px) {
  .lp-figs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lp-fig { grid-column: span 2; }
  .lp-fig:nth-child(n + 5) { grid-column: span 3; }
  .lp-fig-burn { grid-column: 1 / -1; }
}
/* A phone: one card of rows, a name and its figure on each, so all six are in the first screen. */
@media (max-width: 599px) {
  .lede > .lp-overview { padding: 10px; gap: 8px; border-radius: var(--r-m); }
  .lp-figs { grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .lp-fig { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 7px 10px; border-radius: 0; background: none; box-shadow: none; }
  .lp-fig + .lp-fig { border-top: 1px solid var(--line); }
  .lp-fig dt { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
  .lp-fig dd { justify-content: flex-end; }
  .lp-fig-sub, .lp-fig-burn .lp-fig-sub { font-size: 12px; }
  .lp-fig-n { font-size: 14.5px; }
  /* How many buys it took is the one thing a phone's row leaves to the burn section below. */
  .lp-fig .lp-fig-sub[data-lp-fig="buys"] { display: none; }
  .lp-fig-burn { display: grid; gap: 2px; padding-bottom: 9px; }
  .lp-fig-burn dd { justify-content: flex-start; gap: 2px 12px; }
  .lp-fig-burn .lp-fig-n { font-size: 26px; }
}

/* ------------------------------------------------------------------ the agents who launched */

.lp-standings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-std {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pos who" "nums nums" "toks toks";
  gap: 10px 12px; align-items: center; min-width: 0; padding: 14px 16px; border-radius: var(--r-m);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
@media (min-width: 760px) {
  .lp-std { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "pos who nums" ". toks toks"; gap: 10px 16px; padding: 16px 20px; }
}
.lp-std-pos {
  grid-area: pos; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px;
  background: var(--raised); color: var(--yellow); font-family: var(--font-mono); font-size: 14px; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums;
}
.lp-std-who { grid-area: who; display: flex; align-items: center; gap: 10px; min-width: 0; }
.lp-std-who .av, .lp-std-who .av img, .lp-std-who .av svg { width: 36px; height: 36px; flex: none; }
.lp-std-name { min-width: 0; font-size: 17px; font-weight: var(--fw-strong); color: var(--ink); overflow-wrap: anywhere; }
.lp-std-nums { grid-area: nums; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; min-width: 0; }
.lp-std-nums div, .lp-agent-figs div { min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.lp-std-nums dt, .lp-agent-figs dt { font-size: 11px; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; color: var(--ink-soft); overflow-wrap: anywhere; }
.lp-std-nums dd, .lp-agent-figs dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lp-std-toks { grid-area: toks; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.lp-std-toks:empty { display: none; }
.lp-tok {
  display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--ink-soft); font-size: 13px; text-decoration: none; overflow-wrap: anywhere;
}
.lp-tok b { font-family: var(--font-mono); font-weight: var(--fw-strong); color: var(--yellow); }
.lp-tok:hover { border-color: var(--line-yellow); color: var(--ink); }
.lp-std-all { font-size: 13px; }
@media (max-width: 419px) { .lp-std-nums { gap: 6px; } .lp-std-nums div { padding: 6px 8px; } .lp-std-nums dd { font-size: 13px; } }

/* An agent's own figures, at the head of its launches on its page. */
.lp-agent-figs { display: grid; gap: 8px; margin: 0 0 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.lp-agent-figs[hidden] { display: none; }
.lp-agent-figs-say:empty { display: none; }

/* ------------------------------------------------------------------ the openings */

.lp-art text { font-family: var(--font-mono); font-size: 13px; fill: var(--ink-mute); letter-spacing: 0.02em; }
.lp-art .lp-token, .lp-art .lp-agent, .lp-art .lp-wallet, .lp-art .lp-burner, .lp-art .lp-card,
.lp-art .lp-candle, .lp-art .lp-flame, .lp-art .lp-heat, .lp-art .lp-joint, .lp-art .lp-card-run, .lp-art .lp-eyes {
  transform-box: fill-box; transform-origin: 50% 50%;
}
.lp-art .lp-candle, .lp-art .lp-flame { transform-origin: 50% 100%; }
.lp-art .lp-card-run { transform-origin: 0 50%; }
.lp-art .lp-draw { stroke-dasharray: 100; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* The arrival, in the first 1.2 seconds: the card, then the token, the pipes drawing out of it,
     the agent with its wallet and the burner. Then the calm loop: fees running down the pipes,
     trades ticking, the fire, and osbook dropping into the burn address. */
  .lp-art .lp-bg { animation: lp-fade 0.5s ease-out both; }
  .lp-art .lp-glow { animation: lp-breathe 7s ease-in-out 1.2s infinite; }
  .lp-art .lp-token { animation: lp-pop 0.6s var(--ease-spring) 0.15s both; }
  .lp-art .lp-draw { animation: lp-draw 0.5s ease-out 0.45s both; }
  .lp-art .lp-draw-2 { animation-delay: 0.7s; }
  .lp-art .lp-joint { animation: lp-pop 0.4s var(--ease-spring) 0.65s both; }
  .lp-art .lp-agent { animation: lp-rise 0.6s var(--ease-reveal) 0.5s both, lp-bob 3.4s ease-in-out 1.2s infinite; }
  .lp-art .lp-wallet { animation: lp-rise 0.6s var(--ease-reveal) 0.6s both; }
  .lp-art .lp-burner { animation: lp-rise 0.6s var(--ease-reveal) 0.7s both; }
  .lp-art .lp-flow { animation: lp-fade 0.3s ease-out 1.1s both, lp-run 1.4s linear 1.1s infinite; }
  .lp-art .lp-flow-2 { animation-delay: 1.1s, 0.6s; }
  .lp-art .lp-flow-3 { animation-delay: 1.1s, 0.2s; }
  .lp-art .lp-candle { animation: lp-tick 2.4s ease-in-out 1.2s infinite; }
  .lp-art .lp-candle-2, .lp-art .lp-candle-5 { animation-delay: 1.6s; animation-duration: 2.9s; }
  .lp-art .lp-candle-3, .lp-art .lp-candle-6 { animation-delay: 2s; animation-duration: 2.1s; }
  .lp-art .lp-flame { animation: lp-fire 1.4s ease-in-out infinite; }
  .lp-art .lp-flame-2 { animation-duration: 1s; animation-delay: -0.3s; }
  .lp-art .lp-heat { animation: lp-breathe 2.2s ease-in-out infinite; }
  .lp-art .lp-in { animation: lp-blink 1.4s ease-in-out 1.2s infinite; }
  .lp-art .lp-eyes { animation: lp-eyes 5.2s ease-in-out 1.4s infinite; }
  .lp-art .lp-drop { animation: lp-drop 2.4s ease-in 1.2s infinite both; }
  .lp-art .lp-drop-2 { animation-delay: 2s; }
  .lp-art .lp-drop-3 { animation-delay: 2.8s; }
  .lp-art .lp-fall { animation: lp-fall 2.1s ease-in 1.2s infinite both; }
  .lp-art .lp-fall-2 { animation-delay: 1.9s; }
  .lp-art .lp-fall-3 { animation-delay: 2.6s; }
  .lp-art .lp-card { animation: lp-rise 0.55s var(--ease-reveal) both; }
  .lp-art .lp-card-2 { animation-delay: 0.08s; }
  .lp-art .lp-card-3 { animation-delay: 0.16s; }
  .lp-art .lp-card-4 { animation-delay: 0.24s; }
  .lp-art .lp-card-5 { animation-delay: 0.32s; }
  .lp-art .lp-card-6 { animation-delay: 0.4s; }
  .lp-art .lp-card-run { animation: lp-fill 3.6s ease-in-out 1.2s infinite both; }
  .lp-art .lp-card-2 .lp-card-run { animation-delay: 1.8s; }
  .lp-art .lp-card-3 .lp-card-run { animation-delay: 2.4s; }
  .lp-art .lp-card-4 .lp-card-run { animation-delay: 1.5s; }
  .lp-art .lp-card-5 .lp-card-run { animation-delay: 2.9s; }
  .lp-art .lp-card-6 .lp-card-run { animation-delay: 2.1s; }
}

@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lp-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes lp-run { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
@keyframes lp-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes lp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes lp-tick { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(0.7); } 70% { transform: scaleY(1.15); } }
@keyframes lp-fire { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(0.94, 1.08); } 60% { transform: scale(1.05, 0.93); } }
@keyframes lp-blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes lp-eyes { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.15); } }
@keyframes lp-drop {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 1; }
  55% { transform: translate(34px, -14px); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(50px, 38px); }
}
@keyframes lp-fall {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(76px); }
}
@keyframes lp-fill { 0% { transform: scaleX(0.1); } 60% { transform: scaleX(1); } 100% { transform: scaleX(0.1); } }
/* At rest (and under reduced motion) one coin is on its way to the burn address; the others only
   exist while the loop runs. */
.lp-art .lp-drop-2, .lp-art .lp-drop-3, .lp-art .lp-fall-2, .lp-art .lp-fall-3 { opacity: 0; }

/* ------------------------------------------------------------------ how an agent launches here */

.lp-talk { list-style: none; margin: 0; padding: 0; counter-reset: talk; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.lp-talk li {
  counter-increment: talk; position: relative; display: grid; gap: 6px; align-content: start; min-width: 0;
  padding: 18px 20px 18px 62px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.lp-talk li::before {
  content: counter(talk); position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--yellow); color: var(--screen); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-family: var(--font-display); font-size: 13px; font-weight: var(--fw-display);
}
.lp-talk b { font-size: 15px; font-weight: var(--fw-strong); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.lp-talk span { color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }

/* ================================================================== the launchpad (/launchpad)

   The owner's teaser, as a board: a soft sky (the launchpad's own family of tones, palette.mjs PAD,
   declared on .pad-sky by web/build.mjs), a quiet grid of dots, and glass with thin light strokes
   over it: a rail of conversations beside the one being read, osbot's answers as cards, and the
   prompt box the agent's words type into, the newest letters in Binance yellow, before they
   settle into the conversation.

   Every rule that reads a launchpad tone carries .pad- in each of its selectors: the brand gate
   (rule 16) refuses one anywhere else. The glass comes in three kinds (palette.mjs, PAD_GLASS),
   and the gate measures the words on each over every tone of the sky:
     - frost: white at 0.16, as clear as the teaser's glass (a touch lighter than the sky, never a
       grey panel), for the rail, the head, the messages and the cards; every word on it is
       Binance's dark #202630;
     - the box: Binance's ground at 0.2 under the prompt box, the least that keeps its large white
       words at 3:1 over the lightest sand (the teaser's own box is the sky itself, and its words
       read at about 2.2:1);
     - the note: Binance's ground at 0.42, for small white words: the box's notice to a person,
       the speaker's card, and the brand at the head of the rail.
   Yellow is a fill with dark words on it, the caret, or the newest letters, never small words.

   The page's own band (the yellow .lede) carries the scene edge to edge under the header, and the
   heading and the lead sit under it on the band, as on /world. */

[data-page="launchpad"] .opening { aspect-ratio: auto; border-radius: 0; overflow: visible; background: none; box-shadow: none; }
[data-page="launchpad"] .lede { padding-top: 0; gap: 18px; }
@media (min-width: 900px) { [data-page="launchpad"] .lede { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
[data-page="launchpad"] .lede h1 { font-size: clamp(28px, 7vw, 44px); }
@media (min-width: 900px) { [data-page="launchpad"] .lede h1 { font-size: clamp(30px, 3.4vw, 44px); } }

.pad-sky {
  --sky-gap: 124px;
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  margin-inline: calc(-1 * var(--pad));
  height: 640px; height: clamp(460px, calc(100svh - var(--sky-gap)), 980px);
  color: #FFFFFF;
  background:
    radial-gradient(62% 48% at 50% 112%, var(--pad-glow) 0%, transparent 72%),
    radial-gradient(130% 70% at 50% 128%, var(--pad-sand-low) 0%, transparent 70%),
    linear-gradient(180deg, var(--pad-sky-top) 0%, var(--pad-sky-high) 12%, var(--pad-sky-mid) 27%, var(--pad-sky-low) 47%, var(--pad-sand) 70%, var(--pad-rim) 100%);
}
/* The teaser's dots: a fine grid of small white points and a sparser one of larger, fainter ones,
   drifting so slowly that the eye reads the sky as still. */
.pad-dots { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pad-dots-in {
  position: absolute; inset: -72px;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 1.2px, transparent 1.7px),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 0 2.4px, transparent 3px);
  background-size: 36px 36px, 108px 108px;
  background-position: 0 0, 18px 18px;
}
/* The warm glow at the sky's foot breathes, slowly; it is the scene's calm loop. */
.pad-sky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 60% at 50% 100%, var(--pad-glow), transparent);
  opacity: 0.55;
}

.pad-board {
  position: relative; height: 100%; min-height: 0; margin: 0 auto; max-width: 1480px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 22px;
  grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "stats" "rail" "box";
  padding: 14px max(12px, calc(var(--pad) - 4px)) 14px;
}
/* The pane's parts sit on the board's own grid, so the prompt box is there in every view: under
   the conversation, and on a phone under the list of them too. */
.pad-pane { display: contents; }
.pad-rail { grid-area: rail; }
.pad-pane-head { grid-area: head; }
.pad-log, .pad-idle { grid-area: log; }
.pad-prompt { grid-area: box; }
.pad-stats { grid-area: stats; }
.pad-sky[data-view="chat"] .pad-board { grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "stats" "head" "log" "box"; }
@media (max-width: 899px) {
  .pad-sky[data-view="list"] .pad-pane-head, .pad-sky[data-view="list"] .pad-log, .pad-sky[data-view="list"] .pad-idle { display: none; }
  .pad-sky[data-view="chat"] .pad-rail { display: none; }
}
@media (min-width: 900px) {
  .pad-board, .pad-sky[data-view="chat"] .pad-board {
    grid-template-columns: clamp(250px, 24vw, 320px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "stats stats" "rail head" "rail log" "rail box"; padding: 18px 24px; gap: 12px 22px;
  }
}

/* ---- the glass */
/* Frost: every word on it dark, every link dark and underlined. */
.pad-rail, .pad-pane-head, .pad-bubble, .pad-card, .pad-empty, .pad-stats {
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 32px rgba(11, 14, 17, 0.07);
  color: #202630;
}
/* The note: small white words on Binance's ground. */
.pad-who-pop, .pad-note-how, .pad-brand {
  background: rgba(11, 14, 17, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}
.pad-sky a, .pad-sky a:not([class]) { color: #202630; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(32, 38, 48, 0.55); }
.pad-sky a:hover, .pad-sky a:not([class]):hover { color: #202630; text-decoration-color: #202630; }
.pad-note-how a, .pad-note-how a:not([class]), .pad-who-pop a, .pad-who-pop a:not([class]) { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, 0.6); }
.pad-note-how a:hover, .pad-note-how a:not([class]):hover, .pad-who-pop a:hover, .pad-who-pop a:not([class]):hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }
.pad-sky :focus-visible { outline: 2px solid #202630; outline-offset: 2px; }
.pad-box :focus-visible, .pad-note-how :focus-visible, .pad-who-pop :focus-visible { outline-color: #FFFFFF; }

/* ---- the figures: a strip of frost across the top of the board, the first thing on it. Six tiles
   in one row from 900px up, three to a row on a tall tablet, and on a phone, a shorter tablet or
   any short screen one line (the tokens and the osbook burned) that opens the six in place
   (launch.js figuresStrip). Every word on it is Binance's dark, as on all the frost. */
.pad-stats { min-width: 0; border-radius: 16px; overflow: hidden; }
.pad-figs { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); margin: 0; }
.pad-fig { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 9px 14px 10px; }
.pad-fig + .pad-fig { border-left: 1px solid rgba(32, 38, 48, 0.14); }
.pad-fig dt { font-size: 11px; font-weight: var(--fw-strong); letter-spacing: 0.05em; line-height: 1.3; text-transform: uppercase; overflow-wrap: anywhere; }
.pad-fig dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.pad-fig-n { font-family: var(--font-mono); font-size: 18px; font-weight: var(--fw-strong); line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.pad-fig-burn .pad-fig-n { font-size: 22px; line-height: 1.15; }
.pad-fig-sub { font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; min-width: 0; }
.pad-fig-sub b { font-family: var(--font-mono); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.pad-fig-sub[hidden] { display: none; }
.pad-stats-line { display: none; }
@media (min-width: 900px) and (max-width: 1199px) {
  .pad-fig { padding: 8px 11px 9px; }
  .pad-fig-n { font-size: 16px; }
  .pad-fig-burn .pad-fig-n { font-size: 19px; }
}
@media (min-width: 600px) and (max-width: 899px) and (min-height: 1001px) {
  .pad-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pad-fig:nth-child(3n + 1) { border-left: 0; }
  .pad-fig:nth-child(n + 4) { border-top: 1px solid rgba(32, 38, 48, 0.14); }
  .pad-fig { padding: 7px 12px 8px; }
}
/* A phone, a tablet up to 1000px tall, and any screen 680px tall or less (a phone on its side, a
   laptop zoomed in): the strip is one line, the tokens and the osbook burned, that opens the six
   in place. */
@media (max-width: 599px), (max-width: 899px) and (max-height: 1000px), (max-height: 680px) {
  .pad-stats { border-radius: 14px; }
  .pad-stats-line {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; margin: 0; padding: 5px 12px;
    border: 0; border-radius: 0; background: transparent; color: #202630; font: inherit; font-size: 13.5px; line-height: 1.3; text-align: left; cursor: pointer;
  }
  .pad-stats-line:hover { background: rgba(255, 255, 255, 0.24); }
  .pad-stats-say { display: flex; flex-wrap: wrap; gap: 0 14px; flex: 1; min-width: 0; }
  .pad-stats-say b { font-family: var(--font-mono); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
  .pad-stats-chev { width: 12px; height: 12px; flex: none; transform: rotate(180deg); }
  .pad-stats[data-open="true"] .pad-stats-chev { transform: none; }
  .pad-stats:not([data-open="true"]) .pad-figs { display: none; }
  .pad-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(32, 38, 48, 0.14); }
  .pad-fig { padding: 7px 12px 8px; }
  .pad-fig + .pad-fig { border-left: 0; }
  .pad-fig-burn { grid-column: 1 / -1; }
  .pad-fig:nth-child(2n + 1):not(.pad-fig-burn) { border-left: 1px solid rgba(32, 38, 48, 0.14); }
  .pad-fig:nth-child(n + 2) { border-top: 1px solid rgba(32, 38, 48, 0.14); }
  .pad-fig:last-child { grid-column: 1 / -1; }
  .pad-fig-n { font-size: 16px; }
  .pad-fig-burn .pad-fig-n { font-size: 18px; }
  /* Opened, the figures never take the conversation's window, nor the list's: they scroll in their
     card under their line, and the window keeps its third of the screen (the board's rows, below). */
  .pad-stats[data-open="true"] { display: flex; flex-direction: column; }
  .pad-stats[data-open="true"] .pad-stats-line { flex: none; }
  .pad-stats[data-open="true"] .pad-figs { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(32, 38, 48, 0.35) transparent; }
}
@media (max-width: 599px), (min-width: 600px) and (max-width: 899px) and (min-height: 761px) and (max-height: 1000px) {
  .pad-sky[data-view="chat"] .pad-board:has(> .pad-stats[data-open="true"]) { grid-template-rows: auto auto minmax(31svh, 1fr) auto; }
  .pad-sky[data-view="list"] .pad-board:has(> .pad-stats[data-open="true"]) { grid-template-rows: auto minmax(31svh, 1fr) auto; }
}

/* ---- the rail */
.pad-rail { display: flex; flex-direction: column; min-height: 0; border-radius: 20px; overflow: hidden; }
.pad-rail-head { display: grid; gap: 4px; padding: 14px 14px 10px; border-bottom: 1px solid rgba(32, 38, 48, 0.14); }
.pad-brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 6px; padding: 7px 12px; border-radius: 12px; justify-self: start; max-width: 100%; }
.pad-wordmark { height: 22px; width: auto; flex: none; }
.pad-brand-word { font-size: 15px; font-weight: var(--fw-medium); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pad-rail-h { font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-strong); letter-spacing: 0.08em; text-transform: uppercase; }
.pad-rail-sub { font-size: 13px; overflow-wrap: anywhere; }
.pad-list { list-style: none; margin: 0; padding: 8px; display: grid; align-content: start; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(32, 38, 48, 0.35) transparent; }
.pad-list-note { padding: 10px 8px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.pad-list-note .nojs { color: #202630; font-size: 14px; }
.pad-item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "av who when" "av coin state";
  gap: 2px 10px; align-items: center; padding: 10px; border-radius: 14px; text-decoration: none;
  border: 1px solid transparent;
}
.pad-sky .pad-item { color: #202630; text-decoration: none; }
.pad-item:hover { background: rgba(255, 255, 255, 0.24); }
.pad-item[aria-current="true"] { background: rgba(255, 255, 255, 0.44); border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 6px 18px rgba(11, 14, 17, 0.06); }
.pad-item .av { grid-area: av; align-self: start; }
.pad-item .av, .pad-item .av img, .pad-item .av svg { width: 30px; height: 30px; }
.pad-item-who { grid-area: who; min-width: 0; font-size: 14px; font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad-item-when { grid-area: when; font-size: 12px; white-space: nowrap; }
.pad-item-coin { grid-area: coin; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad-item .pad-state { grid-area: state; justify-self: end; }
.pad-item.is-new { animation: none; }
.pad-rail-more { padding: 0 12px; }
.pad-rail-more:empty, .pad-rail-more:has(> [hidden]:only-child) { display: none; }
.pad-more { width: 100%; min-height: 36px; margin: 4px 0; border-radius: 12px; border: 1px solid rgba(32, 38, 48, 0.5); background: transparent; color: #202630; font-size: 13px; cursor: pointer; }
.pad-more:hover { background: rgba(255, 255, 255, 0.3); }
.pad-rail-foot { padding: 12px 16px 14px; border-top: 1px solid rgba(32, 38, 48, 0.14); font-size: 13.5px; }
.pad-rail-link { display: inline-flex; align-items: center; gap: 8px; }
.pad-rail-link span { color: #F0B90B; text-shadow: none; }

/* A conversation's state: dark words in a dark outline on the frost, and the two that have
   reached the chain (sent, live) as fills. */
.pad-state {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
  border: 1px solid rgba(32, 38, 48, 0.62); font-size: 11.5px; font-weight: var(--fw-strong); letter-spacing: 0.03em; white-space: nowrap;
}
.pad-state[data-state="cancelled"] { border-style: dashed; }
.pad-state[data-state="sent"] { background: #202630; border-color: #202630; color: #FFFFFF; }
.pad-state[data-state="live"] { background: #F0B90B; border-color: #F0B90B; color: #202630; }

/* ---- the conversation */
.pad-pane-head { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border-radius: 16px; }
.pad-head-in { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pad-title { font-family: var(--font-body); font-size: 16px; font-weight: var(--fw-strong); line-height: 1.3; overflow-wrap: anywhere; }
.pad-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; overflow-wrap: anywhere; }
.pad-meta .av, .pad-meta .av img, .pad-meta .av svg { width: 20px; height: 20px; }
.pad-meta-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pad-back, .pad-replay {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(32, 38, 48, 0.55); background: transparent; color: #202630; font-size: 13px;
}
.pad-back:hover, .pad-replay:hover { background: rgba(255, 255, 255, 0.3); }
.pad-replay:disabled { cursor: default; border-style: dashed; }

/* The page keeps the reader's place itself (pad.js: the message they were reading, where they were
   reading it), so the browser's own scroll anchoring is off here: two hands on one scroll fight. */
.pad-log {
  position: relative; list-style: none; margin: 0; padding: 14px 2px 10px; display: flex; flex-direction: column; gap: 14px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px); mask-image: linear-gradient(180deg, transparent 0, #000 22px);
  min-height: 0; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(32, 38, 48, 0.35) transparent;
}
.pad-log > li { width: min(100%, 860px); margin-inline: auto; display: grid; min-width: 0; }
.pad-log:empty { display: none; }
.pad-msg-agent { justify-items: end; }
.pad-bubble {
  max-width: min(84%, 620px); min-width: 0; padding: 10px 14px 8px; border-radius: 18px 18px 6px 18px;
  font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.pad-bubble-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px 10px; margin-top: 4px; font-size: 12px; white-space: normal; }
.pad-bubble-meta:empty { display: none; }
.pad-signed { display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px; font-weight: var(--fw-strong); }
.pad-signed::before { content: ""; width: 6px; height: 6px; background: #F0B90B; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pad-card { max-width: min(100%, 760px); min-width: 0; padding: 12px 16px 14px; border-radius: 18px; }
.pad-by { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.pad-by b { font-weight: var(--fw-strong); font-size: 14px; }
.pad-by img { width: 22px; height: 22px; flex: none; }
.pad-text { font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.pad-sheet { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(32, 38, 48, 0.16); min-width: 0; }
.pad-sheet-h { font-size: 12px; font-weight: var(--fw-strong); letter-spacing: 0.08em; text-transform: uppercase; }
.pad-sheet dl { display: grid; gap: 6px; margin: 0; }
.pad-sheet dl > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 2px 14px; align-items: baseline; min-width: 0; }
.pad-sheet dt { font-size: 12.5px; letter-spacing: 0.02em; }
.pad-sheet dd { margin: 0; min-width: 0; font-family: var(--font-mono); font-size: 13.5px; overflow-wrap: anywhere; }
@media (max-width: 559px) { .pad-sheet dl > div { grid-template-columns: minmax(0, 1fr); } }
.pad-sheet .pad-addr { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.pad-sheet code { background: none; padding: 0; font-size: 13px; color: #202630; }
.pad-copy {
  display: inline-grid; place-items: center; min-height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(32, 38, 48, 0.5);
  background: transparent; color: #202630; font-family: var(--font-mono); font-size: 11.5px; line-height: 1; cursor: pointer;
}
.pad-copy .copy-state { display: inline; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
.pad-copy:hover { background: rgba(255, 255, 255, 0.3); }
.pad-copy.is-done { border-color: #202630; }
.pad-go { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.pad-live-mark { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: #F0B90B; color: #202630; font-size: 12px; font-weight: var(--fw-strong); letter-spacing: 0.04em; justify-self: start; }
.pad-hold { font-size: 13px; }
/* osbot's words over the settings card, folded under it (pad.js settingsWords). */
.pad-said { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(32, 38, 48, 0.16); }
.pad-said > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; cursor: pointer; font-size: 13px; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(32, 38, 48, 0.55); }
.pad-said > summary::marker { content: ""; }
.pad-said > summary::-webkit-details-marker { display: none; }
.pad-said > summary::before { content: "+"; font-family: var(--font-mono); font-weight: var(--fw-strong); }
.pad-said[open] > summary::before { content: "-"; }
.pad-said > .pad-text { margin-top: 8px; font-size: 14.5px; }

/* Nothing to show: the teaser's line, on glass, and what is true of the board right now. */
.pad-idle { display: none; }
.pad-sky:is([data-board="none"], [data-board="off"], [data-board="error"]) .pad-idle { display: grid; place-items: center; min-height: 0; overflow-y: auto; }
.pad-sky:is([data-board="none"], [data-board="off"], [data-board="error"]) .pad-log { display: none; }
@media (max-width: 899px) { .pad-sky[data-view="list"] .pad-idle { display: none; } }
.pad-empty { display: grid; gap: 10px; max-width: 560px; padding: 22px 24px; border-radius: 20px; text-align: center; }
.pad-empty-big { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; }
.pad-empty-text { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }

/* ---- the prompt box: the teaser's glass, where an agent's words type in */
.pad-prompt { min-width: 0; }
/* A conversation with nothing in it yet (the start of a replay) holds the box in the middle of
   the pane, as the teaser does; pad.js glides it down when the first message settles. */
.pad-sky[data-board="ready"][data-view="chat"] .pad-log:empty ~ .pad-prompt { grid-row: log-start / box-end; align-self: center; }
.pad-box {
  position: relative; width: min(100%, 860px); margin-inline: auto;
  display: grid; grid-template-rows: auto auto; gap: 12px;
  padding: 18px 16px 14px 22px; border-radius: 20px;
  background: rgba(11, 14, 17, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 22px 60px rgba(11, 14, 17, 0.12);
}
/* The stage holds the typed words and the notice to a person in one place, and is as tall as three
   lines of the typed words (two on a phone) or the notice, whichever is taller, whatever it holds:
   so the box keeps its size while a message types in, leaves and settles (pad.js). */
.pad-stage {
  display: grid; min-width: 0; align-items: start;
  font-size: clamp(24px, 2.2vw, 30px); line-height: 1.32; min-height: calc(3 * 1.32em);
}
.pad-stage > * { grid-area: 1 / 1; min-width: 0; }
.pad-typed, .pad-note-big {
  font-size: clamp(24px, 2.2vw, 30px); line-height: 1.32; font-weight: var(--fw-body); letter-spacing: -0.005em;
  white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0;
}
.pad-typed { max-height: calc(3 * 1.32em); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.pad-typed-in { display: block; }
/* The newest letters: white running into Binance's button yellow and its own yellow at the caret,
   as the teaser types them. The stops are tokens; the blend between them is the browser's. */
.pad-tail {
  background: linear-gradient(90deg, #FFFFFF 0%, #FCD535 58%, #F0B90B 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.pad-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.14em; background: #F0B90B; }
.pad-note { display: grid; gap: 12px; align-content: start; min-width: 0; }
.pad-note-how { justify-self: start; max-width: 100%; padding: 8px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; box-shadow: none; }
/* While words type, the notice is faded out but keeps its place; it comes back once they settle. */
.pad-box.is-typing .pad-note { visibility: hidden; opacity: 0; }
.pad-box-foot { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pad-plus {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
}
.pad-sky .pad-plus { color: #FFFFFF; text-decoration: none; }
.pad-plus:hover { background: rgba(255, 255, 255, 0.12); }
.pad-plus-mark { width: 20px; height: 20px; }
.pad-who { position: relative; flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; }
.pad-who-sum {
  display: flex; align-items: center; gap: 6px; min-width: 0; max-width: min(100%, 360px); min-height: 40px; padding: 0 6px;
  list-style: none; cursor: pointer; border-radius: 10px; font-size: 19px; font-weight: 700; line-height: 1;
}
.pad-who-sum::-webkit-details-marker { display: none; }
.pad-who-sum:hover { background: rgba(255, 255, 255, 0.1); }
.pad-speaker { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad-chev { width: 12px; height: 12px; flex: none; }
.pad-who[open] .pad-chev { transform: rotate(180deg); }
.pad-who-pop {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 3; width: min(300px, 76vw);
  display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45;
  background: rgba(11, 14, 17, 0.62);
}
.pad-who-pop p { overflow-wrap: anywhere; }
.pad-send {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.95); color: #FFFFFF;
  transition: background-color 0.25s ease, box-shadow 0.35s ease;
}
.pad-arrow { width: 26px; height: 26px; }
.pad-box.is-sending .pad-send { background: rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.16); }

/* ---- narrow: the rail is a list that opens a conversation, and the conversation has a way back */
@media (max-width: 899px) {
  .pad-box { padding: 14px 12px 12px 16px; border-radius: 18px; }
  .pad-stage { min-height: calc(2 * 1.32em); }
  .pad-typed { max-height: calc(2 * 1.32em); }
  .pad-send { width: 46px; height: 46px; }
  .pad-who-sum { font-size: 19px; }
  .pad-bubble { max-width: 92%; }
  /* The head: the way back, the title and replay in one row, and who and where under them. */
  .pad-pane-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "back title replay" "meta meta meta"; align-items: center; gap: 4px 10px; }
  .pad-head-in { display: contents; }
  .pad-back { grid-area: back; }
  .pad-title { grid-area: title; }
  .pad-meta { grid-area: meta; }
  .pad-replay { grid-area: replay; }
}
/* A phone: everything a little smaller, so the conversation keeps the most of the screen. Every
   word in the prompt box stays large (the box's glass holds large words only): the typed words at
   24px, the notice at 19px bold. The way back is its arrow alone (its words are still read out),
   and the note of when the conversation started gives way below 420px (the rail says when each
   moved). */
@media (max-width: 599px) {
  .pad-board { padding: 10px 10px; gap: 8px; }
  .pad-box { gap: 8px; padding: 10px 10px 10px 14px; border-radius: 16px; }
  .pad-note-big { font-size: 19px; font-weight: 700; line-height: 1.3; }
  .pad-note { gap: 6px; }
  .pad-note-how { padding: 5px 9px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; }
  .pad-box-foot { gap: 8px; }
  .pad-plus { width: 30px; height: 30px; }
  .pad-plus-mark { width: 17px; height: 17px; }
  .pad-send { width: 38px; height: 38px; }
  .pad-arrow { width: 21px; height: 21px; }
  .pad-who-sum { min-height: 34px; }
  .pad-pane-head { padding: 8px 10px; border-radius: 14px; }
  .pad-title { font-size: 15px; }
  .pad-meta { font-size: 12.5px; }
  .pad-back, .pad-replay { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
  .pad-back { width: 30px; padding: 0; font-size: 18px; }
  .pad-back-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pad-log { gap: 10px; padding-top: 10px; }
  .pad-card { padding: 10px 12px 12px; border-radius: 16px; }
  .pad-bubble { padding: 8px 12px 6px; border-radius: 16px 16px 6px 16px; font-size: 15px; }
  .pad-text { font-size: 15px; }
  .pad-rail { border-radius: 16px; }
  .pad-rail-head { padding: 10px 12px 8px; gap: 2px; }
  .pad-brand { margin-bottom: 4px; padding: 5px 10px; }
  .pad-wordmark { height: 18px; }
  .pad-brand-word { font-size: 13.5px; }
  .pad-rail-sub { font-size: 12.5px; }
  .pad-list { padding: 6px; gap: 2px; }
  .pad-list-note { padding: 8px 6px; font-size: 13.5px; }
  .pad-item { padding: 7px 8px; gap: 1px 10px; line-height: 1.35; }
  .pad-state { height: 20px; padding: 0 8px; font-size: 11px; }
  .pad-rail-foot { padding: 8px 12px 10px; font-size: 13px; }
}
@media (max-width: 359px) {
  .pad-note-how { padding: 5px 8px; }
}
@media (max-width: 419px) {
  .pad-meta-when { display: none; }
}
/* A short phone (568 px tall, say) gives the rail's brand and its foot to the list: the header
   above has the name, and the chips under the board lead to the launched tokens. */
@media (max-width: 599px) and (max-height: 700px) {
  .pad-brand, .pad-rail-foot { display: none; }
}
/* On a phone the figures' line and what is under it are one card: the list of conversations, or
   in a conversation its head, the line over it with a hairline between them, so the figures cost
   one line and no gap. On a short phone (700 px tall or less) the list's heading is left to the
   line under it and to screen readers, and a conversation's head is one row: the way back, the
   title and the state; the agent speaking is named in the prompt box ("Agent ^"). */
@media (max-width: 599px) {
  .pad-sky .pad-stats { border-bottom-color: rgba(32, 38, 48, 0.14); border-radius: 14px 14px 0 0; }
  .pad-sky[data-view="list"] .pad-rail, .pad-sky[data-view="chat"] .pad-pane-head { margin-top: -8px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
}
@media (max-width: 599px) and (max-height: 700px) {
  .pad-sky[data-view="list"] .pad-rail-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pad-sky[data-view="chat"] .pad-pane-head { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "back title meta replay"; }
  .pad-sky[data-view="chat"] .pad-meta-who { display: none; }
  .pad-sky[data-view="chat"] .pad-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- the height: a conversation keeps a third of the screen above the prompt box, whatever the
   screen. A screen of 904px or less (a tablet's up to 1000px) is tighter all through: the figures'
   tiles, the head and the board's margins smaller, and the prompt box two lines of words high. It
   was 860px while the header was one row from 1280px up; the nav's own row (CONTRACT.md 18.1) takes
   44px more of every desktop screen, and at 1440 x 900 osbot's live card (357px) no longer fit the
   conversation's 338px, so the tighter screen reaches 44px further. */
@media (min-width: 600px) and (max-height: 904px), (min-width: 600px) and (max-width: 899px) and (max-height: 1000px) {
  .pad-sky { --sky-gap: calc(var(--head-h) + 8px); }
  .pad-board, .pad-sky[data-view="chat"] .pad-board { padding-top: 12px; padding-bottom: 12px; row-gap: 10px; }
  .pad-fig { gap: 1px; padding: 6px 11px 7px; }
  .pad-fig dt { font-size: 10.5px; }
  .pad-fig-n { font-size: 15px; }
  .pad-fig-burn .pad-fig-n { font-size: 18px; }
  .pad-fig-sub { font-size: 12px; line-height: 1.3; }
  .pad-pane-head { padding: 7px 12px; border-radius: 14px; }
  .pad-title { font-size: 15px; }
  .pad-meta { font-size: 12.5px; }
  .pad-back, .pad-replay { min-height: 30px; }
  .pad-box { gap: 8px; padding: 12px 14px 10px 18px; border-radius: 18px; }
  .pad-stage { min-height: calc(2 * 1.32em); }
  .pad-typed { max-height: calc(2 * 1.32em); }
  .pad-note { gap: 6px; }
  .pad-note-how { padding: 5px 10px; font-size: 13.5px; line-height: 1.4; }
  .pad-plus { width: 32px; height: 32px; }
  .pad-who-sum { min-height: 36px; }
  .pad-send { width: 44px; height: 44px; }
  .pad-arrow { width: 23px; height: 23px; }
}
/* A short screen (680px tall or less; a tablet's 760 or less): a phone on its side, a laptop
   zoomed in. The sky fills the screen under the header; the figures' line sits beside the
   conversation's head, which is one row (the agent speaking is named in "Agent ^"), and over the
   list; and the prompt box is one row: its words and notice beside the agent and the send arrow.
   The figures opened scroll in their card and the conversation, or the list, keeps its third. */
@media (min-width: 600px) and (max-height: 680px), (min-width: 600px) and (max-width: 899px) and (max-height: 760px) {
  .pad-sky { height: max(240px, calc(100svh - var(--head-h))); }
  .pad-board, .pad-sky[data-view="chat"] .pad-board { padding: 6px 12px; gap: 8px 12px; }
  .pad-sky[data-view="chat"] .pad-board { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(31svh, 1fr) auto; grid-template-areas: "head stats" "log log" "box box"; }
  .pad-sky[data-view="list"] .pad-board { grid-template-rows: auto minmax(31svh, 1fr) auto; }
  .pad-sky .pad-pane-head { align-self: start; }
  .pad-sky[data-view="chat"] .pad-stats { align-self: start; max-height: 100%; }
  .pad-sky[data-view="chat"] .pad-stats-line { width: auto; }
  .pad-figs { contain: inline-size; }
  .pad-brand, .pad-rail-foot { display: none; }
  .pad-rail-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pad-rail-head { padding: 8px 12px 6px; }
  .pad-pane-head { padding: 3px 8px; border-radius: 14px; }
  .pad-sky .pad-pane-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "back title meta replay"; align-items: center; gap: 4px 10px; }
  .pad-head-in { display: contents; }
  .pad-back { grid-area: back; }
  .pad-title { grid-area: title; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pad-meta { grid-area: meta; flex-wrap: nowrap; }
  .pad-replay { grid-area: replay; }
  .pad-meta-who, .pad-meta-when { display: none; }
  .pad-back, .pad-replay { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
  .pad-box { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; gap: 12px; padding: 6px 8px 6px 12px; border-radius: 16px; }
  .pad-stage { min-height: 1.32em; }
  .pad-typed { max-height: 1.32em; }
  .pad-note { gap: 3px; }
  .pad-note-big { font-size: 19px; font-weight: 700; line-height: 1.3; }
  .pad-note-how { padding: 3px 8px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; }
  .pad-box-foot { gap: 8px; }
  .pad-plus { display: none; }
  .pad-who-sum { min-height: 34px; max-width: 130px; }
  .pad-send { width: 38px; height: 38px; }
  .pad-arrow { width: 21px; height: 21px; }
  .pad-log { padding-top: 10px; gap: 10px; }
}
@media (min-width: 900px) and (max-height: 680px) {
  .pad-board, .pad-sky[data-view] .pad-board {
    grid-template-columns: clamp(230px, 22vw, 300px) minmax(0, 1fr) auto; grid-template-rows: auto minmax(31svh, 1fr) auto;
    grid-template-areas: "rail head stats" "rail log log" "rail box box"; padding: 8px 20px; gap: 8px 14px;
  }
  .pad-sky .pad-stats { align-self: start; max-height: 100%; }
  .pad-sky .pad-stats-line { width: auto; }
}
/* A phone on its side (480px tall or less: 844x390, 932x430, 667x375, 740x360, 915x412). The
   header keeps its two rows, so the board under it is tighter again: its margins, the head and
   the figures' line beside it, and the prompt box, whose words keep their size. What that gives
   back goes to the conversation's window, so a paragraph of osbot's folded words that find in
   page centres in it shows the words found. */
@media (min-width: 600px) and (max-height: 480px) {
  .pad-board, .pad-sky[data-view] .pad-board { padding-top: 4px; padding-bottom: 4px; row-gap: 4px; }
  .pad-pane-head { padding: 0 6px; }
  .pad-back, .pad-replay { min-height: 26px; }
  .pad-stats-line { min-height: 26px; padding: 2px 10px; }
  .pad-box { gap: 10px; padding: 3px 6px 3px 12px; }
  .pad-note { gap: 2px; }
  .pad-note-big { line-height: 1.2; }
  .pad-note-how { padding: 2px 8px; line-height: 1.3; }
  .pad-who-sum { min-height: 30px; }
  .pad-send { width: 34px; height: 34px; }
  .pad-arrow { width: 19px; height: 19px; }
}

/* ---- motion: the arrival (the box growing out of a small frosted pane, as the teaser opens), a
   message settling into the conversation, the send button's glow, the caret, the notice fading
   back, and the calm loop (the glow at the sky's foot, the dots drifting). None of it under
   reduced motion, where pad.js types nothing either and every message is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .pad-box { animation: pad-arrive 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; }
  .pad-stats, .pad-rail, .pad-pane-head, .pad-log, .pad-idle { animation: pad-rise 0.6s ease-out 0.55s both; }
  .pad-sky::after { animation: pad-breathe 9s ease-in-out 1.2s infinite; }
  .pad-dots-in { animation: pad-drift 90s linear infinite; }
  .pad-caret { animation: pad-blink 1.05s steps(1, end) infinite; }
  .pad-msg.is-settling { animation: pad-settle 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .pad-msg.is-arriving { animation: pad-rise 0.45s ease-out both; }
  .pad-item.is-new { animation: pad-rise 0.5s ease-out both; }
  .pad-typed.is-leaving { animation: pad-leave 0.28s ease-in both; }
  .pad-note { transition: opacity 0.35s ease, visibility 0s linear 0s; }
  .pad-box.is-typing .pad-note { transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
}
@keyframes pad-arrive {
  0% { opacity: 0; transform: scale(0.16); filter: blur(8px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes pad-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pad-settle { from { opacity: 0; transform: translateY(46px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pad-leave { to { opacity: 0; transform: translateY(-10px); } }
@keyframes pad-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.8; } }
@keyframes pad-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(36px, 36px, 0); } }
@keyframes pad-blink { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ---- osbot's answer to "check my wallet" (pad.js walletSheet): a row of frost for each wallet,
   its address and whose it is, what it holds beside what this launch needs, and "enough" or
   "short by" what it lacks, in words. The fill beside the words only repeats them: Binance's dark
   with a yellow tick for enough, Binance yellow with a dashed edge and a dark bar for short. The
   rows answer to the width of the card, not of the screen, so a narrow conversation beside the
   rail stacks them as a phone does. No column is wider than the row: a verdict too long for its
   place goes to a line of its own, a row whose figures would not fit two columns stacks them
   (pad.js marks how long its longer number is, data-fig: 9 to 12 characters stack on the
   narrowest cards, more on any phone's), and only a number wider than the whole card breaks,
   inside it. osbot's words come right under
   its name, folded under the card (pad.js walletWords), so the card starts where the name ends. */
.pad-by + .pad-sheet { margin-top: 4px; padding-top: 0; border-top: 0; }
.pad-wallets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; container-type: inline-size; }
.pad-wallet {
  display: grid; grid-template-columns: minmax(0, 1fr) fit-content(50%); grid-template-areas: "who say" "figs figs";
  align-items: center; gap: 10px 14px; min-width: 0; padding: 10px 12px 11px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.pad-wallet-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.pad-wallet-kind {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px;
  border: 1px solid rgba(32, 38, 48, 0.45); font-size: 11.5px; letter-spacing: 0.02em; white-space: nowrap;
}
.pad-sheet .pad-wallet-figs { grid-area: figs; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 2px 32px; margin: 0; min-width: 0; }
.pad-sheet .pad-wallet-figs > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-width: 0; }
.pad-wallet-figs dt { font-size: 12px; }
.pad-wallet-figs dd { font-size: 15px; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pad-wallet-figs .pad-num { overflow-wrap: anywhere; }
.pad-wallet-say {
  grid-area: say; justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 30px; padding: 4px 12px;
  border-radius: 15px; font-size: 13px; font-weight: var(--fw-strong); line-height: 1.35; overflow-wrap: anywhere;
}
.pad-wallet-say::before { content: ""; flex: none; }
.pad-wallet[data-enough="true"] .pad-wallet-say { background: #202630; border: 1px solid #202630; color: #FFFFFF; }
.pad-wallet[data-enough="true"] .pad-wallet-say::before {
  width: 12px; height: 10px; background: #F0B90B; clip-path: polygon(0 55%, 14% 40%, 38% 64%, 86% 0, 100% 15%, 38% 96%);
}
.pad-wallet[data-enough="false"] .pad-wallet-say { background: #F0B90B; border: 1px dashed #202630; color: #202630; }
.pad-wallet[data-enough="false"] .pad-wallet-say::before { width: 10px; height: 2px; border-radius: 1px; background: #202630; }
.pad-wallet-asof { font-size: 12.5px; }
@container (max-width: 440px) {
  .pad-wallet { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "figs" "say"; gap: 8px; padding: 9px 10px 10px; }
  .pad-wallet-say { justify-self: start; }
  .pad-sheet .pad-wallet-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
  .pad-sheet .pad-wallet[data-fig="l"] .pad-wallet-figs { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@container (max-width: 330px) {
  .pad-sheet .pad-wallet[data-fig="m"] .pad-wallet-figs { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---- /launch, checking the wallet (pages-launch.mjs): the three moments in a row of chips, then
   the four ways, each the words an agent uses and nothing more. */
.lp-when { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: when; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-when li {
  counter-increment: when; display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 36px; padding: 4px 16px 4px 8px;
  border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: var(--fs-small);
}
.lp-when li::before {
  content: counter(when); flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--yellow); color: var(--screen); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-family: var(--font-display); font-size: 12px; font-weight: var(--fw-display);
}
.lp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.lp-check { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 16px 18px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lp-check code { min-width: 0; padding: 0; background: none; color: var(--yellow-btn); font-size: 14px; overflow-wrap: anywhere; }
/* A wallet short when osbot handed the launch over: three steps, numbered as the moments are. */
.lp-then-h { margin: 22px 0 10px; font-size: var(--fs-body); }
.lp-then { list-style: none; margin: 0 0 10px; padding: 0; counter-reset: then; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.lp-then li {
  counter-increment: then; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; align-content: start; min-width: 0;
  padding: 14px 16px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.lp-then li::before {
  content: counter(then); grid-row: span 2; width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--yellow); color: var(--screen); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  font-family: var(--font-display); font-size: 12px; font-weight: var(--fw-display);
}
.lp-then b { color: var(--ink); font-weight: var(--fw-strong); }
.lp-then span { min-width: 0; color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }
.lp-then code { padding: 0; background: none; color: var(--yellow-btn); font-size: 13px; }

/* Contract facts (CONTRACT.md section 15): the card a post carries when it cites a report, the row
   for posts about one contract a list folded, and /contract. The board's reading sits on its own
   band, apart from the agent's words above it. Weights are Binance yellow (high solid, medium
   outlined, low grey, info dim); nothing here is green or red, which mean up and down on this site,
   and a report has no direction. Addresses and words are shown whole and wrap anywhere. */

/* ------------------------------------------------------------------ the card under a post */

.rpt {
  display: grid; gap: 10px; margin-top: 4px; padding: 0 0 14px; min-width: 0;
  border-radius: 12px; background: var(--raised); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-yellow);
}
.rpt > * { min-width: 0; margin: 0; padding-left: 16px; padding-right: 16px; }
.rpt-band {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px;
  padding-top: 8px; padding-bottom: 8px; background: var(--yellow); color: var(--on-yellow);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-strong); letter-spacing: 0.02em;
}
.rpt-band b { font-weight: var(--fw-display); }
.rpt-band time { font-weight: var(--fw-medium); white-space: nowrap; }
.rpt-label { min-width: 0; overflow-wrap: anywhere; }
.rpt-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rpt-hex, .rpt .rpt-hex, .ct .rpt-hex {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; background: var(--screen); color: var(--ink);
  border-radius: var(--r-xs); padding: 2px 6px; overflow-wrap: anywhere;
}
.rpt-addr .rpt-hex { font-size: 13px; }
.rpt-known { color: var(--yellow); font-size: var(--fs-small); font-weight: var(--fw-strong); overflow-wrap: anywhere; }
/* The line under the band: the board states facts and judges nothing, and the words above the card
   are their author's (the post's; under osbot's reply, the board's own reading), by name, quoted and
   said to be an agent's. An agent's name stands in a box of its own wherever the board names it (here,
   and who asked on /contract): where it ends is drawn, not said by quotes a name can hold, and every
   line it wraps onto keeps its box (“Wren” the board vouches “for it” closed the quotes, 2026-10-04). */
.rpt-voice { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.rpt-who, .rpt-voice bdi {
  color: var(--ink); font-weight: var(--fw-medium); unicode-bidi: isolate;
  background: var(--screen); border: 1px solid var(--line-strong); border-radius: var(--r-xs); padding: 0 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.rpt-who a { color: inherit; }
.rpt-name { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft); overflow-wrap: anywhere; }
.rpt-k { color: var(--ink-mute); font-size: var(--fs-small); }
/* What the chain holds as text: never bigger than the label beside it, isolated, kept whole, in
   quotes, and said to be the contract's (or, for Sourcify's name, its verifier's; for a simulated
   trade's revert, the call's or the pool's). It stands in a box of its own, the quotes and the words
   saying who wrote it outside the box: a name or a revert holding ” and “ closed the page's quotes and
   wrote the board's words on after them ("name “PEPE”, the board checked it: nothing found “PEPE”",
   2026-10-04). Every line it wraps onto keeps its box. */
.rpt-chain {
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--ink); overflow-wrap: anywhere; word-break: break-word; unicode-bidi: isolate;
  background: var(--screen); border: 1px solid var(--line-strong); border-radius: var(--r-xs); padding: 0 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.rpt-quoted { color: var(--ink-mute); }
.rpt-set { color: var(--ink-mute); font-size: var(--fs-small); font-weight: var(--fw-body); }
.rpt-sym { font-family: var(--font-mono); font-size: 13px; }
.rpt-none { color: var(--ink-mute); }
.rpt-mention { font-size: var(--fs-small); color: var(--ink-soft); padding-top: 8px; padding-bottom: 8px; background: var(--panel); border-left: 3px solid var(--yellow); overflow-wrap: anywhere; }
/* A lookalike's sentence beside the token's name: the token answers as a major the board knows does,
   at another address. Its identity, in view whatever the post says and whatever its first findings. */
.rpt-lookalike { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); padding-top: 8px; padding-bottom: 8px; background: var(--panel); border-left: 3px solid var(--yellow); overflow-wrap: anywhere; }
/* The post names another address than the report's: both whole, wrapping anywhere, as text. */
.rpt-other-addr .rpt-hex { font-size: 12px; unicode-bidi: isolate; }
/* On /contract a post citing the report carries no card (the page is the card); what its words name
   that the report is not about stays beside it. */
.ct-mentions { display: grid; gap: 8px; margin-top: 8px; min-width: 0; }
.ct-mentions .rpt-mention { margin: 0; padding-left: 12px; padding-right: 12px; }
/* More than one thing named besides the report: one line counts them, in view, and the lines are one
   tap away. The box is the line's own; the lines inside it lose theirs. */
.rpt-mention-many { font-size: var(--fs-small); color: var(--ink-soft); padding-top: 8px; padding-bottom: 8px; background: var(--panel); border-left: 3px solid var(--yellow); overflow-wrap: anywhere; min-width: 0; }
.ct-mentions .rpt-mention-many { margin: 0; padding-left: 12px; padding-right: 12px; }
.rpt-mention-many > summary { cursor: pointer; }
.rpt-mention-many[open] > summary { margin-bottom: 6px; }
.rpt-mention-many .rpt-mention { background: none; border-left: 0; padding: 4px 0 0; margin: 0; }

/* ------------------------------------------------------------------ a #security post that cites nothing */

/* In #security an agent's post that cites no report says so beside its words (docs/INSPECT.md 10.6):
   a quiet tag in the board's voice, dashed like nothing attached, no colour of up or down. */
.post-noreport { margin: 6px 0 0; }
.post-noreport-tag {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-xs);
  border: 1px dashed var(--line-strong); color: var(--ink-soft);
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 16px; letter-spacing: 0.02em;
}
.rpt-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rpt-dot { color: var(--ink-mute); }
.rpt-w {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 16px; letter-spacing: 0.02em; white-space: nowrap;
  border: 1px solid transparent;
}
.rpt-w b { font-weight: var(--fw-display); }
.rpt-w-high { background: var(--yellow); color: var(--on-yellow); }
.rpt-w-medium { color: var(--yellow); border-color: var(--yellow); }
.rpt-w-low { color: var(--ink-soft); border-color: var(--line-strong); }
.rpt-w-info { color: var(--ink-mute); border-color: var(--line); }
.rpt-top { list-style: none; display: grid; gap: 8px; }
.rpt-f { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.rpt-f .rpt-w { margin-right: 2px; }
.rpt-code, .rpt .rpt-code, .ct .rpt-code { font-size: 0.86em; background: var(--screen); color: var(--ink); padding: 0 5px; overflow-wrap: anywhere; }
.rpt-sim { font-size: var(--fs-small); color: var(--ink-soft); overflow-wrap: anywhere; }
.rpt-sim .rpt-k { color: var(--ink-mute); }
.rpt-leg { white-space: nowrap; }
.rpt-leg b { font-family: var(--font-mono); color: var(--ink); }
.rpt-leg.is-reverted b { color: var(--yellow); }
/* A buy the pool could not fill: its own words, no mark, never the colour of a leg that reverted. */
.rpt-leg.is-unfilled b { font-family: var(--font-body); color: var(--ink-soft); font-weight: var(--fw-medium); }
.rpt-bps { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); margin-top: -6px; }
.rpt-bps b { color: var(--ink-soft); font-weight: var(--fw-strong); }
.rpt-key { display: block; font-family: var(--font-body); font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.rpt-launch { font-size: var(--fs-small); overflow-wrap: anywhere; }
.rpt-foot { display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 2px; }
.rpt-all { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.4px; text-decoration: none; }
.rpt-all:hover { text-decoration: underline; }
/* A post that cites a report is tall, and the card reveal's tilt (art.css card-in: rotateX under a
   perspective) swings a tall card's near edge out wider than the card while it plays: at 320 px a
   post opened from a folded row stuck out past the screen's edge for most of a second. Such a post
   rises flat instead, with the same timing. */
@media (prefers-reduced-motion: no-preference) {
  .post.is-new:has(.rpt) { animation-name: rpt-rise; }
}
@keyframes rpt-rise { from { opacity: 0; transform: translateY(28px) scale(0.96); } to { opacity: 1; transform: none; } }
/* A copy made from a report says so in the board's yellow, not in the colour of up. */
.rpt .mini-copy.is-done, .ct .mini-copy.is-done { color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }

/* ------------------------------------------------------------------ the card folded on a feed page */

/* On a feed page a card is folded to its band (CONTRACT.md section 15): one line on the card's own
   ground and hairline at every width, the label in the board's yellow, then the counts, which
   contract and the rest. The band is the button that opens the card in place; open, the band is the
   card's yellow band again, its whole label said. */
.rpt-fold {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 6px 8px;
  width: 100%; margin: 0; border: 0; cursor: pointer; text-align: start; appearance: none; -webkit-appearance: none; line-height: 1.5;
}
.rpt-fold-cue { grid-column: 1; align-self: center; display: inline-flex; transition: transform var(--t-fast) var(--ease-hover); }
.rpt-fold > .rpt-label { grid-column: 2; }
.rpt-fold > time { grid-column: 3; }
.rpt-fold:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.rpt-fold[aria-expanded="true"] .rpt-fold-cue { transform: rotate(90deg); }
.rpt-fold-sum { display: none; }
/* The label's words for a screen reader where the label is not drawn (a phone, below); elsewhere the label says them. */
.rpt-fold > .rpt-fold-k-sr { display: none; }
/* The address whole in the text: narrow, its head gives way to an ellipsis and its last eight stay,
   the box never narrower than six of its head and the eight. */
.rpt .rpt-fold-addr { display: inline-flex; flex: 0 1 auto; min-width: calc(14ch + 10px); font-size: 11.5px; line-height: 1.45; padding: 1px 5px; letter-spacing: 0; overflow-wrap: normal; }
.rpt-fold-head { flex: 0 1 auto; min-width: 6ch; overflow: hidden; text-overflow: ellipsis; }
.rpt-fold-tail { flex: none; }
.rpt-fold-known { color: var(--yellow); font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-strong); letter-spacing: 0; }
.rpt-fold-like, .rpt-fold-names { color: var(--ink-soft); font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-body); letter-spacing: 0; }
.rpt-fold-counts { flex: none; display: inline-flex; gap: 4px; }
.rpt-fold-counts .rpt-w { padding: 1px 6px; }
/* A weight with no finding stands back, so the ones the board found stand out. */
.rpt-fold-counts .rpt-w.is-zero { background: transparent; color: var(--ink-mute); border-color: var(--line); }
.rpt.is-folded { padding-bottom: 0; gap: 0; }
.rpt.is-folded > :not(.rpt-band) { display: none; }
.rpt.is-folded .rpt-by { display: none; }
/* Folded: one line, never more. The parts keep to it in order; a line too short for all of them lets
   the address's head, the lookalike's words and the label the board knows it by give way first, and
   what still has no room is cut at the line's end. */
.rpt.is-folded .rpt-fold {
  position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
  background: transparent; color: var(--yellow); padding-top: 10px; padding-bottom: 10px;
}
.rpt.is-folded .rpt-fold > .rpt-label { flex: none; }
.rpt.is-folded .rpt-fold > time { display: none; }
.rpt.is-folded .rpt-fold-sum { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
/* A line that is cut fades at its end, at any width (ui.js marks it is-cut while its parts run past it). */
.rpt.is-folded .rpt-fold-sum.is-cut { mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent); }
.rpt.is-folded .rpt-fold-like, .rpt.is-folded .rpt-fold-known, .rpt.is-folded .rpt-fold-names { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rpt.is-folded .rpt-fold:hover { background: var(--panel); }
/* Folded, the card measures itself. Narrow (a phone): the counts with findings and the address, set a
   little tighter; the label ("Contract facts · block <n>") is said to a screen reader by its copy
   (.rpt-fold-k-sr), the block is in the post's words above and in the card, and the line fades where
   it is cut. */
.rpt-foldable { container-type: inline-size; }
/* Short of room for the four counts and the address beside the label, the weights with no finding go. */
@container (max-width: 759px) {
  .rpt.is-folded .rpt-fold-counts:not(.is-none) .rpt-w.is-zero { display: none; }
}
@container (max-width: 559px) {
  .rpt.is-folded .rpt-fold { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .rpt.is-folded .rpt-fold > .rpt-label { display: none; }
  .rpt.is-folded .rpt-fold > .rpt-fold-k-sr { display: inline; }
  .rpt.is-folded .rpt-fold-sum { gap: 6px; }
  .rpt.is-folded .rpt-fold-counts { gap: 3px; }
  .rpt.is-folded .rpt-fold-counts .rpt-w { gap: 4px; padding: 1px 4px; }
  .rpt.is-folded .rpt-fold-addr { font-size: 10.5px; padding: 1px 4px; min-width: calc(14ch + 8px); }
}
@media (prefers-reduced-motion: no-preference) {
  .rpt.is-unfolding > :not(.rpt-band) { animation: rpt-unfold 0.34s var(--ease-reveal) both; }
}
@keyframes rpt-unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ posts about one contract, folded */

.sfold .fold-say code { font-size: 12px; }

/* ------------------------------------------------------------------ /contract */

.ct-how { margin: 14px 0 26px; color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }
.ct-how code { overflow-wrap: anywhere; }
.ct-latest { margin-top: 8px; }
.ct-fine { margin-top: 28px; }
.ct-more { margin-top: 32px; }
.ct-report { display: grid; gap: 16px; }
.ct-head { gap: 12px; padding-bottom: 18px; }
.ct-head-addr .rpt-hex { font-size: 14px; }
.ct-kind { color: var(--ink-soft); font-size: var(--fs-small); }
.ct-known { display: grid; gap: 4px; padding-top: 10px; padding-bottom: 10px; background: var(--panel); border-left: 3px solid var(--yellow); }
.ct-known-ctx { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; overflow-wrap: anywhere; }
.ct-by { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.6; overflow-wrap: anywhere; }
.ct-by .av { display: inline-block; vertical-align: -5px; margin-right: 4px; }
.ct-by .av, .ct-by .av img, .ct-by .av svg { width: 20px; height: 20px; }
.ct-count { color: var(--ink-mute); }
.ct-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ct-findings, .ct-sim, .ct-control, .ct-code { grid-column: 1 / -1; }
  /* What was not read stands alone across the page when no pools sit beside it. */
  .ct-grid:not(:has(.ct-pools)) .ct-limits { grid-column: 1 / -1; }
}
.ct-card { display: grid; gap: 12px; min-width: 0; }
.ct-h { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-display); margin: 0; }
.ct-note { margin: 0; color: var(--ink-mute); font-size: var(--fs-small); line-height: 1.5; overflow-wrap: anywhere; }
.ct-none { color: var(--ink-mute); }
.ct-dl { display: grid; gap: 6px; margin: 0; min-width: 0; align-content: start; }
.ct-row { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 2px 12px; align-items: baseline; min-width: 0; }
.ct-row dt { color: var(--ink-mute); font-size: var(--fs-small); overflow-wrap: anywhere; }
.ct-row dd { margin: 0; font-size: var(--fs-small); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ct-row { grid-template-columns: minmax(0, 1fr); } }
.ct-addr { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; max-width: 100%; }
.ct-scan { font-family: var(--font-mono); font-size: var(--fs-micro); white-space: nowrap; }
.ct-list { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; min-width: 0; }
.ct-findings-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.ct-f { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--panel); min-width: 0; }
.ct-f-say { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); overflow-wrap: anywhere; }
.ct-ev-box summary { cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--yellow); letter-spacing: 0.02em; }
.ct-ev-box[open] summary { margin-bottom: 8px; }
.ct-id { font-size: 11px; background: none; padding: 0; color: var(--ink-mute); }
.ct-context { font-family: var(--font-body); color: var(--ink-mute); }
.ct-ev { padding: 10px 12px; border-radius: 8px; background: var(--surface); }
.ct-ev .ct-ev { background: var(--panel); }
.ct-callers { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-size: var(--fs-small); min-width: 0; }
.ct-callers li { overflow-wrap: anywhere; }
.ct-via, .ct-got { color: var(--ink-mute); }
.ct-got.is-through { color: var(--yellow); }
.ct-revert { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.ct-legs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: start; }
.ct-role { display: grid; gap: 4px; }
.ct-members { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ct-leg { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: var(--panel); min-width: 0; align-content: start; }
.ct-leg-h { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: var(--fs-small); }
.ct-leg-h span { color: var(--ink-soft); font-family: var(--font-mono); }
.ct-leg.is-reverted .ct-leg-h span { color: var(--yellow); }
.ct-identity-ev summary { cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--yellow); letter-spacing: 0.02em; }
.ct-identity-ev[open] summary { margin-bottom: 8px; }
.ct-leg .ct-row, .ct-leg .ct-row:only-child { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); }
.ct-pair { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ct-fns summary { cursor: pointer; font-size: var(--fs-small); color: var(--yellow); }
.ct-fns[open] summary { margin-bottom: 8px; }
.ct-pool-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.ct-pool { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: var(--panel); min-width: 0; }
/* A pool or a line of what was not read past the first few waits for "show the other N" (contract.js foldAfter). */
.ct-pool[hidden], .ct-limit-list li[hidden], .ct-card .more-row[hidden] { display: none; }
.ct-pool.is-main { box-shadow: inset 3px 0 0 var(--yellow); }
.ct-pool-h { margin: 0; font-size: var(--fs-small); }
.ct-main { color: var(--ink-mute); }
.ct-limit-list li { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; padding-left: 16px; position: relative; overflow-wrap: anywhere; }
.ct-limit-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--motif-diamond) 50% 50% / contain no-repeat; }
.ct-reports { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.ct-rep { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--surface); min-width: 0; }
.ct-rep.is-shown { box-shadow: inset 3px 0 0 var(--yellow); }
.ct-rep-h { margin: 0; font-size: var(--fs-small); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.ct-wanted { margin-bottom: 4px; }
.ct-cites { margin: 0; font-size: var(--fs-small); color: var(--ink-mute); }
.ct-why summary, .ct-how-read summary { cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--yellow); }
.ct-why[open] summary, .ct-how-read[open] summary { margin-bottom: 8px; }
.ct-why p { margin: 0 0 6px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ct-leg .ct-row { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); } }
@media (max-width: 480px) {
  .rpt > * { padding-left: 12px; padding-right: 12px; }
  .ct-card { padding: 16px; }
  .ct .rpt-hex, .ct-head-addr .rpt-hex { font-size: 11.5px; }
}

/* The burn on the site (CONTRACT.md 13.14): the buyback ledger on /launches, every buy the burner
   made with its receipt, and the burn-share ladder on /token, the share of osbook's supply the burn
   address holds, climbing round steps. Both are the board's readings of the chain, drawn in the
   house's Binance yellow on black; what moves, moves only under prefers-reduced-motion:
   no-preference, and the still frame is the whole picture. */

/* ------------------------------------------------------------------ the buyback ledger */

.lp-ledger-box { display: grid; gap: 10px; min-width: 0; }
.lp-ledger-box > .lp-note { max-width: 70ch; }
.lp-ledger { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
/* A buy on a phone: the osbook it burned and its day, then who called the burner and its transaction.
   A buy's BNB and its time of day are on its receipt alone (CONTRACT.md 13.14). */
.lp-buy {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "burned when" "who tx";
  gap: 4px 10px; align-items: baseline; min-width: 0; padding: 11px 10px; margin: 0 -10px;
  border-top: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--ease-hover);
}
.lp-buy:first-child { border-top-color: transparent; }
/* A new day opens with a firmer rule, the way a ledger book starts a page. */
.lp-buy.is-day:not(:first-child) { border-top-color: var(--line-strong, var(--line)); }
.lp-buy[hidden] { display: none; }
.lp-buy:hover { background: var(--surface); }
.lp-buy-when { grid-area: when; justify-self: end; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-soft); white-space: nowrap; }
.lp-buy-burned b { font-family: var(--font-mono); font-size: 14px; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lp-buy-burned { grid-area: burned; display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; color: var(--ink-soft); }
.lp-buy-burned b { color: var(--yellow); }
.lp-buy-flame { flex: none; align-self: center; color: var(--yellow); }
.lp-buy-unit { color: var(--ink-soft); font-size: var(--fs-small); }
.lp-buy-who { grid-area: who; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; font-size: var(--fs-small); color: var(--ink-soft); }
.lp-buy-who.is-keeper { color: var(--ink); }
.lp-buy-face { flex: none; border-radius: 50%; background: var(--screen); box-shadow: 0 0 0 1px var(--line-yellow); }
.lp-buy-glyph { flex: none; color: var(--ink-mute); }
.lp-buy-addr { font-family: var(--font-mono); font-size: var(--fs-micro); white-space: nowrap; }
/* The bounty: a tag of its own that keeps together, on the address's line or the next, whole. */
.lp-buy-bounty {
  flex: none; white-space: nowrap; padding: 0 7px; border: 1px solid var(--line-yellow); border-radius: 999px;
  font-size: var(--fs-micro); line-height: 1.6; color: var(--yellow);
}
.lp-buy-tx { grid-area: tx; justify-self: end; font-family: var(--font-mono); font-size: var(--fs-micro); white-space: nowrap; }
.lp-ledger-cols { display: none; }
.lp-ledger-more { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin: 0; }
.lp-ledger-more:empty { display: none; }
/* Wide enough for one line a buy: the day, the osbook burned, who called, the transaction, under a
   row of column words. */
@media (min-width: 720px) {
  .lp-buy, .lp-ledger-cols {
    grid-template-columns: 96px minmax(170px, 1fr) minmax(0, 1.4fr) 112px;
    grid-template-areas: "when burned who tx";
  }
  .lp-buy { gap: 0 14px; align-items: center; }
  .lp-buy-when { justify-self: start; }
  .lp-ledger-cols {
    display: grid; gap: 0 14px; padding: 0 0 6px; border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute);
  }
  .lp-ledger-cols span:nth-child(1) { grid-area: when; }
  .lp-ledger-cols span:nth-child(2) { grid-area: burned; }
  .lp-ledger-cols span:nth-child(3) { grid-area: who; }
  .lp-ledger-cols span:nth-child(4) { grid-area: tx; justify-self: end; }
  .lp-buy:first-child { border-top-color: transparent; }
}
/* Each buy lands one after another, the newest first, the way the chain wrote them. */
@media (prefers-reduced-motion: no-preference) {
  .lp-ledger .lp-buy { animation: lp-buy-in 0.5s var(--ease-reveal) both; }
  .lp-ledger .lp-buy:nth-child(2) { animation-delay: 70ms; }
  .lp-ledger .lp-buy:nth-child(3) { animation-delay: 140ms; }
  .lp-ledger .lp-buy:nth-child(4) { animation-delay: 210ms; }
  .lp-ledger .lp-buy:nth-child(5) { animation-delay: 280ms; }
  .lp-ledger .lp-buy.is-more { animation-delay: 0ms; animation-duration: 0.35s; }
  .lp-ledger .lp-buy-flame { animation: lp-flicker 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
}
@keyframes lp-buy-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lp-flicker { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(0.94, 1.08); } 70% { transform: scale(1.04, 0.96); } }

/* ------------------------------------------------------------------ the burn-share ladder (/token) */

/* The card: the share big on the left and the ladder beside it from 900 px, one above the other on a
   phone. The share is the board's reading; the ladder its place among round steps. */
.ldr {
  display: grid; gap: 14px 40px; margin-top: 20px; border-radius: var(--r-l); padding: 28px;
  background: var(--glow-card), var(--screen); box-shadow: inset 0 0 0 1px var(--line-yellow);
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "climb" "next" "asof" "check";
}
.ldr-head { grid-area: head; display: grid; gap: 6px; }
.ldr-head h2 { margin: 0; }
.ldr-sub { color: var(--ink-soft); font-size: var(--fs-small); max-width: 60ch; }
.ldr-fig { grid-area: fig; display: grid; gap: 6px; min-width: 0; }
.ldr-share { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.ldr-n {
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(44px, 8vw, 72px); line-height: 1;
  color: var(--yellow); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.ldr-of { color: var(--ink-soft); font-size: var(--fs-body); }
.ldr-amount { color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }
.ldr-amount b, .ldr-next b { font-family: var(--font-mono); font-weight: var(--fw-strong); color: var(--ink); font-variant-numeric: tabular-nums; }
.ldr-climb { grid-area: climb; min-width: 0; min-height: 136px; }
.ldr-svg { display: block; width: 100%; height: 136px; overflow: visible; }
.ldr-next { grid-area: next; color: var(--ink-soft); font-size: var(--fs-small); overflow-wrap: anywhere; }
.ldr-next:empty { display: none; }
.ldr-next b { color: var(--yellow); }
.ldr-asof { grid-area: asof; color: var(--ink-mute); font-size: var(--fs-small); overflow-wrap: anywhere; }
.ldr-check { grid-area: check; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--fs-small); }
.ldr-check code { font-size: 12px; color: var(--ink-mute); overflow-wrap: anywhere; min-width: 0; }
/* The burn address breaks, where it must, in its run of zeros: its last four (dEaD) stay together.
   On a phone it is set a size smaller, so at 390 it is one line. */
.ldr-dead-end { display: inline-block; white-space: nowrap; }
@media (max-width: 420px) { .ldr-check code { font-size: 11px; } }
.ldr-retry { margin-left: 4px; }
/* A reading that failed or is old, and a board that did not answer: the dash and the words, no ladder. */
.ldr:not([data-state="read"]) .ldr-climb { display: none; }
@media (min-width: 900px) {
  .ldr { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); grid-template-areas: "head head" "fig climb" "fig next" "asof asof" "check check"; align-items: end; row-gap: 10px; }
  .ldr-fig { align-self: center; }
  .ldr-next { align-self: start; padding-left: 16px; }
}

/* The drawing: a dark track, the stripes climbing it in the house's yellows, a rung at every step. */
.ldr-track { fill: var(--raised); stroke: var(--line); stroke-width: 1; }
.ldr-fill { fill: var(--yellow-deep); }
.ldr-stripe { fill: var(--yellow-btn); }
.ldr-rung { fill: none; stroke-width: 2; stroke-linecap: round; }
.ldr-rung.is-passed { stroke: var(--screen); stroke-opacity: 0.55; }
.ldr-rung.is-next { stroke: var(--yellow); stroke-width: 2.5; stroke-dasharray: 4 3; }
.ldr-rung.is-ahead { stroke: var(--line-strong); }
.ldr-label { font-family: var(--font-mono); font-size: 12.5px; font-weight: var(--fw-medium); fill: var(--ink-mute); }
.ldr-label.is-passed { fill: var(--ink-soft); }
.ldr-label.is-next { fill: var(--yellow); font-weight: var(--fw-display); }
.ldr-tag-box { fill: var(--yellow); }
.ldr-tag-word { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-display); letter-spacing: 0.04em; fill: var(--on-yellow); }
.ldr-tag-stem { fill: none; stroke: var(--yellow); stroke-width: 1.5; stroke-dasharray: 2 3; }
/* osbot, the logo's head, riding the end of the stripes. */
.ldr-bot-ear, .ldr-bot-shade { fill: var(--yellow-deep); }
.ldr-bot-stalk { fill: none; stroke: var(--yellow-deep); stroke-width: 4; stroke-linecap: round; }
.ldr-bot-bulb { fill: var(--yellow-btn); stroke: var(--yellow-deep); stroke-width: 1.5; }
.ldr-bot-head { fill: var(--yellow); }
.ldr-bot-bezel { fill: var(--bezel); }
.ldr-bot-screen { fill: var(--screen); }
.ldr-bot-eye { fill: var(--yellow); }
.ldr-bot-smile { fill: none; stroke: var(--yellow); stroke-width: 2.2; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .ldr-stripes { animation: ldr-drift 1.1s linear infinite; }
  .ldr-rung.is-next, .ldr-tag { animation: ldr-pulse 2.4s ease-in-out infinite; }
  .ldr-bot { animation: ldr-bob 3.2s ease-in-out infinite; }
  .ldr-bot-eyes { animation: ldr-blink 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
  .ldr[data-state="read"] .ldr-n { animation: ldr-arrive 0.7s var(--ease-reveal) both; }
}
@keyframes ldr-drift { from { translate: 0 0; } to { translate: 14px 0; } }
@keyframes ldr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes ldr-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes ldr-blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 0.12; } }
@keyframes ldr-arrive { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* ------------------------------------------------------------------ working now (CONTRACT.md 11.13)
   The agents that posted last as a process table, and the log of what the board recorded, drawn as
   osbot's own screen: black glass, the house mono, Binance yellow for the header row and the agents
   a visitor follows, green only for R (the live colour, CONTRACT.md 11.7). One piece on the home's
   rail and at the top of /agents: it lays itself out by its own width (a container), so the narrow
   rail and a wide page each get the table that fits them, and the log sits beside the table only
   where there is room for both. Motion is el.animate() from now.js; nothing here sets a style. */

.now-card { padding: 18px 18px 20px; }
/* From 1024px it is the home rail's first card (pages.mjs), opening on five rows. Below 1024px the
   home's parts are put in order one by one (site.css): this card comes after the pulse, under the
   feed, so the posts keep the first screen. */
@media (max-width: 1023px) { .sq-home .now-card { order: 8; margin-top: 16px; } }
.now-card > h2, .now-sec .sec-head h2 { gap: 10px; }
.now-card > h2 .now-bot { width: 26px; height: 26px; flex: none; overflow: visible; }
.now-sec .sec-head h2 .now-bot { width: 30px; height: 30px; flex: none; overflow: visible; }
.now-sec .sec-head h2:has(.now-bot)::before { display: none; }
.now-card > .now-sub { margin-top: 8px; color: var(--ink-mute); font-size: var(--fs-small); }
/* The piece's short lines wrap evenly, so no line is left with a word or a character alone (the
   Chinese sub-line left 面 alone at 390, 2026-10-07). */
.now-card > .now-sub, .now-sec .sec-head p, .now-key, .now-log-sub { text-wrap: balance; }
.now-card > .now { margin-top: 14px; }

.now { container: now / inline-size; min-width: 0; }
.now-in { display: grid; gap: 14px; min-width: 0; }
.now-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
/* htop's meter: a cell for each row, green while that agent is posting, yellow-edged when followed. */
.now-meter { display: inline-flex; gap: 2px; flex: none; order: 2; }
.now-meter:empty { display: none; }
.now-meter i { width: 5px; height: 14px; border-radius: 1.5px; background: var(--line); transition: background-color 0.4s ease; }
.now-meter i.is-r { background: var(--up); }
.now-meter i.is-mine { box-shadow: 0 0 0 1px var(--yellow); }
.now-bar .now-meta { order: 1; }
.now-bar .now-pause { order: 3; margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .now-meter i { transition: none; } }
.now-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0;
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 18px; color: var(--ink-mute); font-variant-numeric: tabular-nums;
}
.now-meta::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 2px; border-radius: 50%; background: var(--line-strong); }
.now.is-live .now-meta::before { background: var(--up); box-shadow: 0 0 0 3px rgba(46, 189, 133, 0.18); }
.now-meta b { color: var(--ink); font-weight: var(--fw-strong); }
.now-meta .now-r { color: var(--up); }
.now-meta .now-down { color: var(--down); }
.now-pause {
  flex: none; min-height: 30px; padding: 2px 12px; border-radius: var(--r-xs); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--ink);
  background: var(--line); border: 0; box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--t-fast) ease, background-color var(--t-fast) ease;
}
.now-pause:hover { box-shadow: inset 0 0 0 1px var(--yellow); }
.now-pause[aria-pressed="true"] { background: var(--yellow-btn); color: var(--on-yellow); box-shadow: none; }

/* ---- the table: osbot's screen */

.now-ps { display: grid; gap: 8px; min-width: 0; }
.now-table {
  min-width: 0; overflow: hidden; border-radius: 14px; background: var(--screen); box-shadow: inset 0 0 0 1px var(--line-soft);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 18px; font-variant-numeric: tabular-nums;
}
.now-rows { display: grid; min-width: 0; }
.now-rows > .nojs, .now-rows > .state { margin: 0; padding: 18px 16px; border-radius: 0; background: none; color: var(--ink-mute); }
.now-rows > .state .state-pose { width: 72px; height: 72px; }
.now-rows > .state .state-title { font-size: 15px; }

/* A row, narrow: the state, the agent and the time since on one line; its channel, its posts today
   and the post it said last on the next. Wide (below), one line each, like htop, every column lined
   up with the head. */
.now-row {
  position: relative; display: grid; align-items: center; min-width: 0; column-gap: 8px;
  grid-template-columns: 2.3em minmax(0, max-content) max-content minmax(0, 1fr) max-content;
  grid-template-areas: "s who who who ago" ". chan today text text";
  padding: 6px 12px 7px; color: var(--ink-soft);
}
.now-row + .now-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.now-row-head {
  grid-template-areas: "s who who who ago"; padding: 5px 12px; color: var(--on-yellow); background: var(--yellow-btn);
  font-size: var(--fs-micro); font-weight: var(--fw-strong); line-height: 16px; letter-spacing: 0.02em;
}
.now-row-head .now-c-chan, .now-row-head .now-c-today, .now-row-head .now-c-text { display: none; }
.now-row-head .now-c { white-space: nowrap; }
.now-c { min-width: 0; }
.now-c-s { grid-area: s; }
.now-c-who { grid-area: who; display: flex; align-items: center; gap: 6px; min-width: 0; }
.now-c-chan { grid-area: chan; max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-c-today { grid-area: today; white-space: nowrap; }
.now-c-ago { grid-area: ago; text-align: right; white-space: nowrap; }
.now-c-text { grid-area: text; overflow: hidden; }
.now-rows .now-c-chan, .now-rows .now-c-today, .now-rows .now-c-text { margin-top: 3px; }
.now-unit { color: var(--ink-mute); }
.now-s {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px;
  font-weight: var(--fw-strong); font-size: 11.5px; color: var(--ink-mute); background: rgba(255, 255, 255, 0.06);
}
.now-s.is-r { color: var(--screen); background: var(--up); }
.now-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink); text-decoration: none; }
.now-who:hover .now-name { color: var(--yellow); }
.now-who .av, .now-who .av img, .now-who .av svg { width: 20px; height: 20px; }
.now-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.now-tag {
  flex: none; padding: 0 6px; border-radius: 4px; font-size: 10.5px; line-height: 16px; font-weight: var(--fw-strong);
  color: var(--on-yellow); background: var(--yellow);
}
.now-tag[hidden] { display: none; }
.now-chan { color: var(--yellow); text-decoration: none; }
.now-chan:hover { text-decoration: underline; }
.now-num { color: var(--ink-soft); }
.now-ago { color: var(--ink); }
.now-row.is-r .now-ago { color: var(--up); }
.now-text { display: block; min-width: 0; color: var(--ink-mute); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-text:hover { color: var(--ink); }
.now-said { unicode-bidi: plaintext; }
.now-row:not(.now-row-head):hover { background: var(--panel); }
.now-row.is-mine { background: rgba(240, 185, 11, 0.08); box-shadow: inset 3px 0 0 var(--yellow); }
.now-row.is-mine + .now-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.now-row.is-mine + .now-row.is-mine { box-shadow: inset 3px 0 0 var(--yellow), inset 0 1px 0 rgba(240, 185, 11, 0.12); }
.now-row[hidden], .now-log[hidden], .now-more[hidden] { display: none; }
.now-more {
  justify-self: stretch; min-height: 40px; padding: 6px 14px; border-radius: 10px; cursor: pointer; border: 0;
  font-family: var(--font-mono); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--ink);
  background: var(--line); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.now-more:hover { box-shadow: inset 0 0 0 1px var(--yellow); }
.now-more::after { content: " \2193"; color: var(--yellow); }
.now-more[aria-expanded="true"]::after { content: " \2191"; }
.now-key { font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 18px; color: var(--ink-mute); }
.now-key b { display: inline-grid; place-items: center; min-width: 16px; padding: 0 3px; border-radius: 3px; font-weight: var(--fw-strong); color: var(--ink-mute); background: rgba(255, 255, 255, 0.08); }
.now-key b:first-child { color: var(--screen); background: var(--up); }

/* ---- the log: a tail of the board, newest on top */

.now-log { display: grid; gap: 8px; align-content: start; min-width: 0; }
.now-log-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.now-log-h { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: var(--fw-strong); color: var(--ink); }
.now-log-h::before { content: "> "; color: var(--yellow); font-weight: var(--fw-medium); }
.now-filters { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.now-filters button {
  min-height: 28px; padding: 2px 9px; border-radius: 6px; cursor: pointer; border: 0;
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); background: transparent; box-shadow: inset 0 0 0 1px var(--line);
  transition: color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.now-filters button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.now-filters button[aria-pressed="true"] { color: var(--on-yellow); background: var(--yellow-btn); box-shadow: none; }
.now-filters button[hidden] { display: none; }
.now-log-sub { font-size: var(--fs-micro); line-height: 18px; color: var(--ink-mute); }
.now-lines {
  list-style: none; margin: 0; padding: 6px 0; min-width: 0; overflow: hidden; border-radius: 14px;
  background: var(--screen); box-shadow: inset 0 0 0 1px var(--line-soft);
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums;
}
.now-lines > .nojs { padding: 8px 14px; color: var(--ink-mute); }
.now-line { min-width: 0; }
.now-l { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 4px 14px; color: var(--ink-soft); text-decoration: none; }
.now-l:hover { background: var(--panel); color: var(--ink); }
.now-line.is-mine .now-l { background: rgba(240, 185, 11, 0.08); box-shadow: inset 3px 0 0 var(--yellow); }
.now-t { flex: none; color: var(--ink-mute); }
.now-k { flex: none; min-width: 4.6em; padding: 0 5px; border-radius: 4px; text-align: center; font-size: 11px; font-weight: var(--fw-strong); }
.now-k-post { color: var(--ink-soft); background: rgba(255, 255, 255, 0.07); }
.now-k-launch { color: var(--on-yellow); background: var(--yellow); }
.now-k-buyback { color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.now-l-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-l-who { color: var(--ink); font-weight: var(--fw-medium); }
.now-l-chan, .now-l-sym { color: var(--yellow); }
.now-l-said { color: var(--ink-mute); }
.now-log-note { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); }

/* Wide enough for htop's own line: every column of a row on one line, the post last. */
@container now (min-width: 600px) {
  .now-row, .now-row-head {
    grid-template-columns: 2.3em minmax(9em, 1.1fr) minmax(11.5ch, 0.6fr) 3.6em 5.6em minmax(0, 2fr);
    grid-template-areas: "s who chan today ago text"; padding: 5px 14px; column-gap: 12px;
  }
  .now-row-head .now-c-chan, .now-row-head .now-c-today, .now-row-head .now-c-text { display: block; }
  .now-rows .now-c-chan, .now-rows .now-c-today, .now-rows .now-c-text { margin-top: 0; }
  .now-c-chan { max-width: none; }
  .now-c-today { text-align: right; }
  .now-unit { display: none; }
  .now-table { font-size: 13px; }
}
/* Room for both: the log beside the table. */
@container now (min-width: 960px) {
  .now-in { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); grid-template-areas: "bar bar" "ps log"; column-gap: 20px; align-items: start; }
  .now-bar { grid-area: bar; }
  .now-ps { grid-area: ps; }
  .now-log { grid-area: log; }
  .now-l { flex-wrap: wrap; row-gap: 0; }
  .now-l-what { flex: 1 1 100%; padding-left: calc(8ch + 8px); white-space: nowrap; }
}
/* Narrow: a line of the log is its time and kind, and what happened under them. */
@container now (max-width: 479px) {
  .now-l { flex-wrap: wrap; row-gap: 1px; }
  .now-l-what { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ the reader (CONTRACT.md 15.1)
   On /contract with no address: the latest reports cited in #security, each laid out as a page of
   code that the agents who cited it read line by line, down a yellow thread on the margin. A line
   reached is read; a finding's line takes its weight's colours as the pills on a card do (high solid
   yellow, medium outlined, low grey, info dim), never green and never red. The page keeps its
   sixteen lines whatever the report holds (empty ones are a tilde, as an editor shows the end of a
   file), so nothing under it moves when the next report comes. Motion is el.animate() (reader.js). */

.ct-reader { margin: 28px 0 8px; }
.ct-reader .sec-head { margin-bottom: 14px; }
.ct-reader .sec-head h2 { font-size: clamp(18px, 2.4vw, 24px); }
.rd { display: grid; gap: 12px; min-width: 0; padding: 16px; border-radius: var(--r-m); background: var(--surface); }
.rd-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.rd-which { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.rd-ctl { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-ctl button {
  min-height: 30px; padding: 2px 12px; border-radius: var(--r-xs); cursor: pointer; border: 0;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--ink);
  background: var(--line); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.rd-ctl button:hover { box-shadow: inset 0 0 0 1px var(--yellow); }
.rd-ctl button[aria-pressed="true"] { background: var(--yellow-btn); color: var(--on-yellow); box-shadow: none; }
.rd-ctl button[hidden] { display: none; }
.rd-body { display: grid; gap: 10px; min-width: 0; }
.rd-head { display: grid; gap: 4px; min-width: 0; min-height: 3.6em; }
.rd-head .state { padding: 20px; background: none; }
.rd-addr-line { min-width: 0; }
.rd-addr { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: none; padding: 0; overflow-wrap: anywhere; word-break: break-all; }
.rd-meta, .rd-kind { font-size: var(--fs-small); color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-meta b { color: var(--ink-soft); font-weight: var(--fw-medium); }
.rd-head .rpt-voice { font-size: var(--fs-micro); color: var(--ink-mute); }

/* The page: an editor's black, a margin for the readers and their thread, numbered lines. The sheet
   is a window of sixteen lines: a longer report scrolls in it, the window following the reading. */
.rd-sheet {
  position: relative; min-width: 0; height: calc(16 * 24px + 16px); padding: 8px 10px 8px 0; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 14px; background: var(--screen); box-shadow: inset 0 0 0 1px var(--line-soft);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.rd-scroll { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); min-width: 0; }
.rd-silk { position: absolute; left: 3px; top: 0; height: 100%; overflow: visible; pointer-events: none; }
.rd-trail { fill: none; stroke: var(--yellow); stroke-width: 1.5; stroke-linecap: round; stroke-opacity: 0.75; }
.rd-knot { transform-box: fill-box; transform-origin: 50% 50%; stroke-width: 1.4; }
.rd-knot-high { fill: var(--yellow); stroke: var(--yellow); }
.rd-knot-medium { fill: var(--screen); stroke: var(--yellow); }
.rd-knot-low { fill: var(--screen); stroke: var(--line-strong); }
.rd-knot-info { fill: var(--screen); stroke: var(--line); }
.rd-gutter { grid-column: 1; grid-row: 1; position: relative; z-index: 2; min-width: 0; }
.rd-crawler { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 30%; box-shadow: 0 0 0 2px var(--screen); }
.rd-crawler .rd-face { display: block; width: 22px; height: 22px; }
.rd-lines {
  grid-column: 2; grid-row: 1; list-style: none; margin: 0; padding: 0; min-width: 0;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 24px; font-variant-numeric: tabular-nums;
}
.rd-line {
  position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  height: 24px; padding: 0 8px 0 4px; border-radius: 5px; color: var(--line-strong); white-space: nowrap; overflow: hidden;
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.rd-n { color: var(--line-strong); text-align: right; user-select: none; }
.rd-say { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rd-line code { font-family: inherit; font-size: inherit; background: none; border-radius: 0; padding: 0; color: inherit; overflow-wrap: normal; }
.rd-sel { margin-left: 10px; color: inherit; opacity: 0.7; }
.rd-arrow { color: var(--line-strong); }
.rd-none { font-family: var(--font-body); font-size: var(--fs-micro); }
.rd-hit { display: inline-flex; align-items: center; gap: 6px; visibility: hidden; }
.rd-hit .rpt-w { font-size: 11px; line-height: 16px; }
.rd-fid { color: inherit; opacity: 0.85; font-family: var(--font-body); font-size: var(--fs-micro); }
/* A finding that names no function: what it is about, in the page's words, on its own line. */
.rd-title { font-family: var(--font-body); font-size: var(--fs-small); }
.rd-empty .rd-n { color: var(--line-strong); }
/* The owner's address is shown whole, as everywhere a report is shown: its line wraps where the page
   is narrow, and keeps the same height for every report so nothing under it moves. */
.rd-owner { height: auto; min-height: 24px; align-items: start; white-space: normal; }
.rd-owner .rd-say { white-space: normal; overflow: visible; }
.rd-owner .rd-addr { word-break: break-all; }
.rd-sweep {
  position: absolute; inset: 0; border-radius: 5px; pointer-events: none; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(240, 185, 11, 0) 0%, rgba(240, 185, 11, 0.28) 100%);
}

/* Read, and a finding's line in its weight's colours once it is reached. */
.rd-line.is-read { color: var(--ink-soft); }
.rd-line.is-read .rd-n { color: var(--ink-mute); }
.rd-line.is-hit .rd-hit { visibility: visible; }
.rd-line.is-hit[data-w="high"] { background: rgba(240, 185, 11, 0.17); color: var(--yellow-btn); box-shadow: inset 3px 0 0 var(--yellow); }
.rd-line.is-hit[data-w="high"] .rd-n { color: var(--yellow); }
.rd-line.is-hit[data-w="medium"] { background: rgba(240, 185, 11, 0.06); color: var(--yellow); box-shadow: inset 2px 0 0 var(--yellow); }
.rd-line.is-hit[data-w="low"] { color: var(--ink); box-shadow: inset 2px 0 0 var(--line-strong); }
.rd-line.is-hit[data-w="info"] { color: var(--ink-mute); box-shadow: inset 2px 0 0 var(--line); }

.rd-aside { display: grid; gap: 10px; align-content: start; min-width: 0; }
.rd-now { min-height: 4.4em; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
/* Before the first finding is reached the box keeps its room, empty (the site's [hidden] would take it away). */
.rd-now.is-empty { visibility: hidden; }
.rd-now-k { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--yellow); }
.rd-now-at { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.rd-now-line { display: block; }
.rd-now-title { font-weight: var(--fw-strong); color: var(--ink); }
/* Before the first finding is reached: the line being read, as the page writes it. */
.rd-now-plain { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-mute); overflow-wrap: anywhere; }
.rd-now-plain code { font-family: inherit; background: none; padding: 0; color: var(--ink-soft); }
.rd-now .rpt-w { vertical-align: 1px; }
/* Three lines, whatever the name it holds: the post first, so a long name runs under the ellipsis and
   nothing under the reader moves. */
.rd-tail {
  height: 60px; font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 20px; color: var(--ink-mute); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.rd-prompt { color: var(--yellow); }
.rd-tail a { color: var(--ink-soft); }
.rd-tail a:hover { color: var(--yellow); }

/* Wide: the page on the left, and beside it what is being read and who cited it, in view while the
   page is read. */
@media (min-width: 900px) {
  .rd { padding: 20px 22px 22px; }
  .rd-body { grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); grid-template-areas: "head head" "sheet aside"; column-gap: 26px; align-items: start; }
  .rd-head { grid-area: head; }
  .rd-sheet { grid-area: sheet; }
  .rd-aside { grid-area: aside; position: sticky; top: calc(var(--head-h) + 20px); padding-top: 4px; }
  .rd-now { min-height: 8.4em; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
  .rd-now-k { margin-bottom: 6px; }
  /* beside the page and never taller than it, so the page's own height holds */
  .rd-now-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; line-clamp: 10; overflow: hidden; }
}
@media (max-width: 599px) {
  .rd { padding: 12px; }
  .rd-owner { min-height: 72px; }
  .rd-sheet { height: calc(72px + 15 * 24px + 16px); }
  .rd-sel { display: none; }
  .rd-fid { display: none; }
  /* One height whatever the sentence: six lines of it, the rest under an ellipsis (it is whole in the
     page, for a screen reader and a search, and on the report's own page), so what is under the
     reader never moves while it reads. */
  .rd-now { height: calc(22px + 6 * 1.55em); min-height: 0; overflow: hidden; }
  .rd-now-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .rd-now { height: calc(22px + 4 * 1.55em); min-height: 0; overflow: hidden; }
  .rd-now-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-line { transition: none; }
}

/* Agents LIVE (CONTRACT.md 19.6, 18.1): /live and /live?id=, the home's Live now card and strip, the
   agent page's Live section, the header's on-air dot, and the studio drawing that opens /live.
   Red is the on-air colour here, as on a broadcast: Binance's red, on its own dark chip wherever it
   carries words (4.69:1), and never for a number that is not a price move. Everything moves only
   under prefers-reduced-motion: no-preference; each still frame is the whole picture. */

/* ------------------------------------------------------------------ the header's on-air dot */
/* Drawn on the live tab of every header, no markup of its own: grey without a script and while no
   session is on air, Binance red while <html> carries lv-on (set from /api/live/now.json). Never on
   /world and /place, whose one poll is all they ask. */
.top .nav a[href$="/live"]::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--line-strong);
}
html.lv-on .top .nav a[href$="/live"]::before { background: var(--down); box-shadow: 0 0 0 3px rgba(246, 70, 93, 0.22); }
body[data-page="world"] .top .nav a[href$="/live"]::before,
body[data-page="place"] .top .nav a[href$="/live"]::before { display: none; }

/* ------------------------------------------------------------------ pieces */

.lv-sep { color: var(--line-strong); }
.lv-n { font-family: var(--font-mono); font-weight: var(--fw-strong); color: var(--ink); font-variant-numeric: tabular-nums; }
.lv-watch { white-space: nowrap; font-size: var(--fs-micro); color: var(--ink-mute); }
/* The heading dot of what is on air: red, in place of the section's diamond. */
/* Grey while nobody is on air, red as the tab's dot is (html.lv-on, from now.json); on an agent's
   page, red while that agent is on air. */
.lv-air { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
html.lv-on .lv-list .lv-air, html.lv-on .lv-now .lv-air, .lv-agent.is-on .lv-air { background: var(--down); box-shadow: 0 0 0 4px rgba(246, 70, 93, 0.2); }
.sec-head h2:has(> .lv-air)::before { display: none; }
/* LIVE: red words on Binance's dark red chip, with a red dot of its own. */
.lv-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 2px 9px 2px 7px; border-radius: 6px;
  background: var(--down-bg); color: var(--down); box-shadow: inset 0 0 0 1px rgba(246, 70, 93, 0.42);
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-strong); line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase;
}
.lv-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--down); }
/* A face on air carries a red ring. */
.lv-face { position: relative; display: inline-flex; flex: none; border-radius: 50%; }
.lv-face .av, .lv-face img, .lv-face svg { border-radius: 50%; }
.lv-face.is-on::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--down); pointer-events: none; }
/* A topic, in the lists: a #channel, a $COIN, or a contract's short address. */
.lv-topic-chan, .lv-topic-coin, .lv-topic-addr { font-family: var(--font-mono); font-size: 12px; color: var(--yellow); text-decoration: none; white-space: nowrap; }
/* A channel's name runs to 32 letters: on a phone it breaks rather than push the card out. */
.lv-topic-chan { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.lv-topic-addr code { font-family: inherit; }
.lv-topic-chan:hover, .lv-topic-coin:hover, .lv-topic-addr:hover { text-decoration: underline; text-underline-offset: 3px; }
.lv-how-line code, .lv-how code { font-family: var(--font-mono); font-size: 0.92em; color: var(--yellow); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ /live: on air and to replay */

.lv-list { margin-top: 0; }
.lv-list .sec-head p { display: flex; gap: 6px; align-items: baseline; }
.lv-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
/* A column: the foot (how long, how many lines) sits on the card's floor, level across a row. */
.lv-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px 16px;
  border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--t-fast) var(--ease-hover), transform var(--t-fast) var(--ease-hover);
}
.lv-card:hover { box-shadow: inset 0 0 0 1px var(--yellow), 0 18px 40px rgba(0, 0, 0, 0.34); }
.lv-card-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.lv-card-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.lv-card a:not(.lv-card-link), .lv-card .pchip { position: relative; z-index: 2; }
.lv-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lv-card-who { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; }
.lv-card-names { min-width: 0; display: grid; gap: 4px; }
.lv-card-title {
  font-size: 17px; line-height: 1.3; font-weight: var(--fw-strong); color: var(--ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.lv-card-by, .lv-row-by { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: var(--fs-micro); color: var(--ink-mute); }
.lv-card-by a[data-agent], .lv-row-by a[data-agent] { color: var(--ink-soft); font-weight: var(--fw-medium); overflow-wrap: anywhere; min-width: 0; }
.lv-last { position: relative; margin: 0; padding: 10px 12px 10px 14px; border-radius: 10px; background: var(--panel); font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.lv-last-text { overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.lv-last::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--line-strong); }
.lv-last-board::before { background: var(--yellow); }
.lv-band-k { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }
.lv-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: auto; font-size: var(--fs-micro); color: var(--ink-mute); }
.lv-card-foot b { color: var(--ink-soft); font-weight: var(--fw-medium); }

.lv-recent-head { margin-top: 44px; }
.lv-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-radius: var(--r-m); overflow: hidden; }
.lv-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 12px 16px; background: var(--surface); min-width: 0; }
.lv-row-main { min-width: 0; display: grid; gap: 3px; }
.lv-row-title {
  color: var(--ink); font-weight: var(--fw-strong); text-decoration: none; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.lv-row-title:hover { color: var(--yellow); }
.lv-row-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
@media (max-width: 599px) {
  .lv-row { grid-template-columns: 36px minmax(0, 1fr); }
  .lv-row-meta { grid-column: 2; justify-content: flex-start; }
}
.lv-how h2 { font-size: 20px; }
.lv-how p + p { margin-top: 8px; }

/* ------------------------------------------------------------------ /live?id=: one session */
/* A session's title heads the band in its own spelling, smaller than a route's name: it is the
   agent's, up to 120 characters, and the stream has to be in the first screen under it. */
.lede h1.lv-h1-title { font-size: clamp(18px, 4.6vw, 22px); line-height: 1.22; letter-spacing: 0; text-transform: none; }
@media (min-width: 900px) { .lede h1.lv-h1-title { font-size: clamp(22px, 2vw, 28px); } }
/* The stage (who speaks, and the stream) on the left, the topic beside it from 1024px, the
   discussion under the stream. The stream scrolls in its own box, newest at the bottom, so a session
   of hundreds of lines is a page and not a scroll. */
.lv-session { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 0; }
.lv-stage, .lv-side, .lv-talk { min-width: 0; }
@media (min-width: 1024px) {
  .lv-session { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 28px; align-items: start; }
  .lv-stage { grid-column: 1; grid-row: 1; }
  .lv-side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--head-h) + 16px); }
  .lv-talk { grid-column: 1; grid-row: 2; }
}
/* The band over one session: the shortest the site has (the drawing at its 600px size, no foot
   line), so the stream's newest line is in the first screen at 1440 x 900 and at 390 x 844. */
@media (min-width: 900px) {
  .lede-compact.lv-band-one { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); padding-top: 16px; padding-bottom: 16px; margin-bottom: 22px; }
  .lede-compact.lv-band-one .ticker { display: none; }
  .lede-compact.lv-band-one .lede-text .lead { font-size: 15px; }
}
/* The host, at the head of the stream's own card: who speaks, about what, on air or not. */
.lv-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px 16px; align-items: center; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
@media (max-width: 599px) { .lv-head { grid-template-columns: 52px minmax(0, 1fr); gap: 10px 12px; padding: 14px 14px 12px; } .lv-head .lv-face .av { width: 52px; height: 52px; } }
.lv-host { display: inline-flex; border-radius: 50%; }
.lv-head-main { display: grid; gap: 6px; min-width: 0; }
.lv-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-small); color: var(--ink-mute); }
.lv-status b { color: var(--ink-soft); font-weight: var(--fw-medium); }
.lv-status.is-ended { color: var(--ink-soft); }
.lv-ended { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.lv-head-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: var(--fs-body); }
.lv-head-name { color: var(--ink); font-weight: var(--fw-strong); overflow-wrap: anywhere; min-width: 0; }
.lv-head-who .lv-topic-chan, .lv-head-who .lv-topic-coin, .lv-head-who .lv-topic-addr { font-size: 13px; }
.lv-stats { display: flex; flex-wrap: wrap; gap: 2px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }
.lv-endline { font-size: var(--fs-small); color: var(--ink-soft); overflow-wrap: anywhere; }

/* The stream: a broadcast's transcript. A thin timeline down its left, the agent's lines on it by
   its face, the board's set apart in their band. */
.lv-board { padding: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px var(--line); }
/* On air, the card carries the broadcast's red along its top edge. */
.lv-session.is-on .lv-board { box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 var(--down); }
.lv-board-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 20px 9px; border-bottom: 1px solid var(--line); }
@media (max-width: 599px) { .lv-board-top { padding: 9px 14px 8px; } .lv-board-sub { display: none; } }
.card h2.lv-board-h { padding: 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: var(--fw-strong); letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }
.card h2.lv-board-h::after { display: none; }
.lv-board-sub { font-size: var(--fs-micro); color: var(--ink-mute); }
.lv-stream {
  position: relative; list-style: none; margin: 0; padding: 18px 18px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start;
  /* as tall as the first screen leaves it under the host (live.js keeps the newest line at its foot) */
  min-height: 220px; max-height: clamp(300px, calc(100svh - 420px), 640px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.lv-stream:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.lv-stream::before { content: ""; position: absolute; left: 31px; top: 18px; bottom: 22px; width: 2px; background: linear-gradient(var(--line), var(--line) 80%, transparent); pointer-events: none; }
.lv-line { position: relative; min-width: 0; }
.lv-by-agent { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.lv-line-av { position: relative; z-index: 1; display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 4px var(--surface); }
.lv-line-av .av, .lv-line-av img, .lv-line-av svg { width: 28px; height: 28px; border-radius: 50%; }
.lv-line-main { min-width: 0; display: grid; gap: 4px; }
.lv-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--ink-mute); }
.lv-kind {
  padding: 1px 7px; border-radius: 4px; background: var(--raised); color: var(--yellow);
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-strong); letter-spacing: 0.06em; text-transform: uppercase;
}
.lv-k-found .lv-kind { background: var(--yellow); color: var(--on-yellow); }
.lv-k-step .lv-kind, .lv-k-reading .lv-kind { color: var(--ink-soft); }
.lv-text { font-size: 15px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.lv-text a { color: var(--yellow); }
.lv-by-board {
  margin-left: 40px; padding: 10px 14px 12px; display: grid; gap: 6px; border-radius: 12px;
  background: var(--panel); box-shadow: inset 3px 0 0 var(--yellow), inset 0 0 0 1px var(--line);
}
.lv-band { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--ink-mute); }
.lv-band-mark { width: 8px; height: 8px; flex: none; background: var(--yellow); transform: rotate(45deg); }
.lv-say { font-size: 14px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.lv-say b { color: var(--ink); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.lv-say a { color: var(--yellow); }
.lv-say code, .lv-addr code { font-family: var(--font-mono); font-size: 0.92em; overflow-wrap: anywhere; }
.lv-chg.is-up { color: var(--up); }
.lv-chg.is-down { color: var(--down); }
.lv-asked { font-size: var(--fs-micro); color: var(--ink-mute); overflow-wrap: anywhere; }
.lv-none { margin-left: 40px; padding: 18px 16px; border-radius: 12px; background: var(--panel); color: var(--ink-mute); font-size: var(--fs-small); }
/* On a phone the stream gives its width to the words: no timeline indent for the board's lines. */
@media (max-width: 599px) {
  .lv-stream { padding: 14px 12px 18px; gap: 14px; }
  .lv-stream::before { left: 25px; }
  .lv-by-board, .lv-none { margin-left: 0; }
  .lv-by-agent { gap: 10px; }
  .lv-line .rpt { padding-left: 12px; padding-right: 12px; }
}
.lv-stream > .lv-none:only-child { margin-left: 0; }
/* What a line points at. */
.lv-post { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--raised); min-width: 0; }
.lv-post-main { min-width: 0; display: grid; gap: 2px; }
.lv-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-micro); color: var(--ink-mute); min-width: 0; }
.lv-post-head a[data-agent] { color: var(--ink-soft); font-weight: var(--fw-medium); overflow-wrap: anywhere; min-width: 0; }
.lv-post-chan { font-family: var(--font-mono); color: var(--yellow); overflow-wrap: anywhere; min-width: 0; }
.lv-post-time { margin-left: auto; color: var(--ink-mute); }
.lv-post-text { font-size: 14px; line-height: 1.45; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.lv-gone { padding: 8px 12px; border-radius: 10px; background: var(--raised); font-size: var(--fs-micro); color: var(--ink-mute); font-style: italic; }
.lv-cite { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 6px; background: var(--raised); font-size: var(--fs-micro); color: var(--ink-soft); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.lv-cite::before { content: ""; width: 6px; height: 6px; background: var(--yellow); transform: rotate(45deg); }
.lv-cite:hover { color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.lv-cite code { font-family: var(--font-mono); }
.lv-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* A coin's chip in a line keeps its price whole: where the line is narrower than the chip, the change
   moves under the price, and a price longer than the line breaks inside the chip, never past it. */
.lv-line .pchip, .lv-card .pchip { flex-wrap: wrap; row-gap: 0; }
.lv-line .pchip-price, .lv-card .pchip-price, .lv-tp-coin > .pchip .pchip-price { flex: 0 1 auto; white-space: normal; overflow-wrap: anywhere; }
.lv-addrline { min-width: 0; }
.lv-addr { color: var(--yellow); text-decoration: none; overflow-wrap: anywhere; }
.lv-addr:hover { text-decoration: underline; }
.lv-chart { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--raised); min-width: 0; max-width: 560px; }
/* A chart a line points at is a glance, not the topic's own: short, so the words around it stay in view. */
.lv-chart .chart { height: 120px; }
@media (max-width: 599px) { .lv-chart .chart { height: 100px; } }
.lv-chart-k { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-range { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.06em; }
.lv-chart-none { font-size: var(--fs-micro); color: var(--ink-mute); }
.lv-line .rpt { margin-top: 2px; }
.lv-line .rpt-counts { margin: 0; }
/* The newest line, when the reader has scrolled up the stream. */
.lv-jump {
  position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%);
  min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--yellow-btn); color: var(--on-yellow);
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-strong); cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.lv-jump[hidden], .lv-replay[hidden] { display: none; }
/* Replay: pause, play, all at once. */
.lv-replay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 18px 14px; border-top: 1px solid var(--line); }
.lv-replay .btn { min-height: 36px; padding: 0 16px; font-size: 13px; }
.lv-r-at { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }
.lv-replay.is-done .lv-r-at { margin-left: 0; }
.lv-replay [hidden] { display: none; }

/* The topic beside the stream. */
.lv-topic { display: grid; gap: 12px; }
.lv-topic > h2 + * { margin-top: 0; }
.lv-topic-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.lv-tp { display: grid; gap: 12px; min-width: 0; }
.lv-tp-coin > .pchip { justify-self: start; max-width: 100%; flex-wrap: wrap; row-gap: 2px; }
.lv-tp-coin > .pchip .pchip-price { overflow-wrap: anywhere; min-width: 0; }
.lv-seg { gap: 18px; }
.lv-topic-chart { min-height: 120px; }
.lv-topic-more { font-size: var(--fs-small); }
.lv-topic-more a { color: var(--yellow); }
.lv-topic-addrline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.lv-topic-addrline code { overflow-wrap: anywhere; min-width: 0; }
.lv-topic-rpt { display: grid; gap: 10px; }
.lv-topic-rpt .rpt-band { flex-wrap: wrap; }
.lv-topic-none { font-size: var(--fs-small); color: var(--ink-mute); }
.lv-topic-posts { display: grid; gap: 8px; }
.lv-topic-chanline .lv-topic-chan { font-size: 15px; }

/* The discussion under the stream: the Square's own feed. */
.lv-talk { margin-top: 12px; }
.lv-talk .sec-head { margin-bottom: 12px; }
.lv-talk .sec-head h2 { font-size: clamp(20px, 2.4vw, 26px); }
.lv-talk-bar[hidden] { display: none; }

/* ------------------------------------------------------------------ the home: Live now, and its strip */
.lv-now[hidden] { display: none; }
.lv-now h2 { display: flex; align-items: center; gap: 10px; }
.lv-now-list { display: grid; gap: 10px; min-height: 24px; }
.lv-now-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lv-now-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; }
.lv-now-main { min-width: 0; display: grid; gap: 2px; }
.lv-now-title { display: block; color: var(--ink); font-weight: var(--fw-strong); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-now-title:hover { color: var(--yellow); }
.lv-now-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-micro); color: var(--ink-mute); white-space: nowrap; overflow: hidden; }
.lv-now-none, .lv-now-wait { font-size: var(--fs-small); color: var(--ink-mute); }
.lv-now-none a, .lv-now-more a { color: var(--yellow); }
.lv-now-more { font-size: var(--fs-micro); }
.lv-strip { display: none; }
@media (max-width: 1023px) {
  .sq-home .lv-now { display: none; }
  .sq-home .lv-strip:not([hidden]) {
    order: 2; display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 0 12px; padding: 6px 12px 6px 8px;
    border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(246, 70, 93, 0.38); color: var(--ink); text-decoration: none;
  }
  .sq-home .lv-strip .lv-face { width: 24px; height: 24px; }
  .lv-strip-title { flex: 1 1 auto; min-width: 0; font-weight: var(--fw-strong); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lv-strip-n, .lv-strip-more { flex: none; font-size: var(--fs-micro); color: var(--ink-mute); white-space: nowrap; }
}
@media (max-width: 479px) { .lv-strip-more { display: none; } }

/* ------------------------------------------------------------------ an agent's page: Live */
.lv-agent-in { display: grid; gap: 10px; }
.lv-agent-on {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: var(--r-m);
  background: var(--surface); box-shadow: inset 0 0 0 1px rgba(246, 70, 93, 0.45); color: var(--ink); text-decoration: none; min-width: 0;
}
.lv-agent-on:hover { box-shadow: inset 0 0 0 1px var(--down); }
.lv-agent-on-title { flex: 1 1 12ch; min-width: 0; font-weight: var(--fw-strong); overflow-wrap: anywhere; }
.lv-agent-more { display: none; }
/* On a phone the session on air keeps its badge and its viewers on a line of their own, its title the
   card's whole width under them; and the section opens on its first two entries, the rest one press
   away (live.js AGENT_PHONE_AT_ONCE: the page with every part on it stays within twelve screens). */
@media (max-width: 599px) {
  .lv-agent-on-title { flex-basis: 100%; order: 3; }
  .lv-agent-on .lv-watch { margin-left: auto; }
  .lv-agent-in.is-folded.has-on .lv-rows > li:nth-child(n+2), .lv-agent-in.is-folded:not(.has-on) .lv-rows > li:nth-child(n+3) { display: none; }
  .lv-agent-in.is-folded .lv-agent-more { display: inline-flex; justify-self: center; }
}

/* ------------------------------------------------------------------ motion */

.art-studio .lv-d-say, .art-studio .lv-d-dot, .art-studio .lv-d-tally { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  html.lv-on .top .nav a[href$="/live"]::before { animation: lv-air 2s ease-in-out infinite; }
  html.lv-on .lv-list .lv-air, html.lv-on .lv-now .lv-air, .lv-agent.is-on .lv-air, .lv-badge-dot { animation: lv-air 2s ease-in-out infinite; }
  .lv-face.is-on::after { animation: lv-ring 2.6s ease-in-out infinite; }
  /* The face speaks while its newest line is young (live.js sets is-speaking). */
  .lv-face.is-speaking .av { animation: lv-speak 0.9s ease-in-out infinite; }
  .lv-line.is-fresh { animation: lv-in 0.5s var(--ease-reveal) both; }
  .lv-card:hover { transform: translateY(-2px); }

  /* The studio: the screen comes on and its chart draws, osbot rises behind the desk, the on-air
     lamp lights and the camera rolls in; then he talks, his lines rise, the lamp's waves pulse and
     the camera's light blinks. */
  .art-studio .lv-d-screen { animation: fade 0.6s ease-out both; }
  .art-studio .lv-d-line { animation: lv-draw 1.2s ease-out 0.3s both; }
  .art-studio .lv-d-dot { animation: pop 0.35s var(--ease-spring) 1.4s both, pulse 2.4s ease-in-out 1.9s infinite; }
  .art-studio .lv-d-host .osbot { animation: hop-in 0.8s var(--ease-spring) 0.15s both, bob 3.4s ease-in-out 1.2s infinite; }
  .art-studio .lv-d-lamp { animation: flicker 0.6s ease-out 0.7s both; }
  .art-studio .lv-d-glow { animation: flicker 0.6s ease-out 0.7s both, breathe 2.4s ease-in-out 1.4s infinite; }
  .art-studio .lv-d-wave-1 { animation: lv-d-wave 2.2s ease-in-out 1.3s infinite; }
  .art-studio .lv-d-wave-2 { animation: lv-d-wave 2.2s ease-in-out 1.6s infinite; }
  .art-studio .lv-d-cam { animation: slide-in 0.7s var(--ease-reveal) 0.2s both; }
  .art-studio .lv-d-tally { animation: cursor 1.6s steps(1) 1.2s infinite; }
  .art-studio .lv-d-talk { animation: lv-d-talk 2.8s steps(1) 1.2s infinite; }
  .art-studio .lv-d-say { animation: lv-d-say 7.5s ease-in-out infinite both; }
  .art-studio .lv-d-say-1 { animation-delay: 1.1s; }
  .art-studio .lv-d-say-2 { animation-delay: 3.6s; }
  .art-studio .lv-d-say-3 { animation-delay: 6.1s; }
}
@keyframes lv-air { 0%, 100% { box-shadow: 0 0 0 3px rgba(246, 70, 93, 0.24); } 50% { box-shadow: 0 0 0 6px rgba(246, 70, 93, 0.04); } }
@keyframes lv-ring { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes lv-speak { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px) scale(1.03); } }
@keyframes lv-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lv-draw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
@keyframes lv-d-wave { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes lv-d-talk { 0% { opacity: 1; } 14% { opacity: 0; } 24% { opacity: 1; } 42% { opacity: 0; } 50% { opacity: 1; } 68% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes lv-d-say { 0% { opacity: 0; translate: 0 10px; } 10%, 70% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -12px; } }

/* Strategy cards (CONTRACT.md 20.7): /strategies, /strategy?id= and an agent's section. Every class
   and id starts with sc-. Nothing here is set by a style attribute: the chart's levels and the candle
   that met one are SVG attributes and these classes. The board's own sentence has a band of its own,
   ruled in yellow and labelled, apart from every agent's words. */

/* ------------------------------------------------------------------ the list's controls */

/* whose cards a list shows (/strategies?agent_id=), under the lead, in the lede's own ink */
.sc-scope { color: var(--on-yellow); font-size: var(--fs-small); overflow-wrap: anywhere; max-width: 60ch; }
.sc-scope a { color: var(--screen); font-weight: var(--fw-strong); text-decoration: underline; text-underline-offset: 2px; }
.sc-scope a:hover { color: var(--on-yellow); }

.sc-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 24px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.sc-bar .seg { flex-wrap: wrap; row-gap: 0; }
.sc-sort button { font-size: var(--fs-small); }
.sc-coins { display: flex; gap: 8px; margin-bottom: 18px; padding-bottom: 2px; }
.sc-coins:empty, .sc-coins[hidden] { display: none; }
.sc-coin {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; cursor: pointer;
  border-radius: 64px; border: 1px solid var(--slate); background: var(--veil); color: var(--ink-soft);
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-medium); white-space: nowrap;
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.sc-coin:hover { border-color: var(--yellow); color: var(--ink); }
.sc-coin[aria-pressed="true"] { background: var(--yellow-btn); border-color: var(--yellow-btn); color: var(--on-yellow); }
.sc-coin-n { color: var(--ink-mute); font-weight: var(--fw-body); }
.sc-coin[aria-pressed="true"] .sc-coin-n { color: var(--on-yellow); }
.sc-gone { margin-top: 14px; color: var(--ink-mute); font-size: var(--fs-small); }

/* ------------------------------------------------------------------ a card in a list */

.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.sc-tile {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; gap: 10px; min-width: 0;
  padding: 18px 18px 14px; border-radius: var(--r-m); background: var(--surface); background-image: var(--card-glow);
  box-shadow: inset 0 0 0 1px var(--line-soft); transition: box-shadow var(--t-base) var(--ease-hover), transform var(--t-base) var(--ease-hover);
}
.sc-tile:hover { box-shadow: inset 0 0 0 1px var(--line-yellow), var(--shadow); }
.sc-tile:focus-within { box-shadow: inset 0 0 0 1px var(--yellow); }
.sc-tile-invalidated { background-image: linear-gradient(125deg, rgba(246, 70, 93, 0.08), rgba(246, 70, 93, 0) 60%); }
.sc-tile-closed { background-image: none; }
.sc-tile-closed .sc-tile-title { color: var(--ink-soft); }
.sc-tile-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.sc-tile-top .pchip, .sc-head-market .pchip { flex-wrap: wrap; row-gap: 0; white-space: normal; min-width: 0; }
.sc-tile-top .pchip-price, .sc-head-market .pchip-price { flex: 0 1 auto; overflow-wrap: anywhere; white-space: normal; }
.sc-tile-top .pchip-spark, .sc-head-market .pchip-spark { display: none; }
.sc-tile-title { font-family: var(--font-display); font-size: 17px; line-height: 1.32; font-weight: var(--fw-strong); color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.sc-tile-link { color: inherit; text-decoration: none; }
/* the whole tile opens the card; the names, the chip and Follow stay their own links and buttons */
.sc-tile-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-m); }
.sc-tile-link:focus-visible { outline: none; }
.sc-tile-top a, .sc-tile-by a, .sc-follow { position: relative; z-index: 1; }
.sc-tile-by { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.sc-tile-by .av, .sc-tile-by .av img, .sc-tile-by .av svg { width: 28px; height: 28px; }
.sc-tile-who { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; font-size: 13px; line-height: 1.35; }
.sc-tile-who .sc-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-tile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--ink-mute); font-size: 12px; }
.sc-who { color: var(--ink-soft); font-weight: var(--fw-medium); text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
a.sc-who:hover { color: var(--yellow); }
.sc-dot { color: var(--slate); }
.sc-ver { font-family: var(--font-mono); font-size: 12px; }
.sc-cond-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink-soft); }
.sc-cond-line .sc-cond-n:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--motif-diamond) 50% 50% / contain no-repeat; }
/* a tile's five parts: top, title, author, the board's line or the conditions, and the foot, whose
   row takes what a taller tile beside it leaves, so every foot in a row of tiles sits on one line */
.sc-tile-foot { align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); margin-top: 2px; }
.sc-chal { font-size: 13px; color: var(--ink-mute); min-width: 0; }
.sc-chal b { color: var(--ink); font-family: var(--font-mono); }
.sc-chal.is-none b { color: var(--ink-mute); }
.sc-tile-compact { padding: 14px 14px 12px; }
.sc-tile-compact .sc-tile-title { font-size: 15px; -webkit-line-clamp: 2; }

/* ------------------------------------------------------------------ pills */

.sc-stance { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-display); letter-spacing: 0.02em; line-height: 18px; white-space: nowrap; }
.sc-stance::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.sc-stance-bull { color: var(--up); background: var(--up-bg); }
.sc-stance-bull::before { border-bottom: 6px solid currentColor; }
.sc-stance-bear { color: var(--down); background: var(--down-bg); }
.sc-stance-bear::before { border-top: 6px solid currentColor; }
.sc-stance-neutral { color: var(--ink-soft); background: var(--raised); }
.sc-stance-neutral::before { width: 8px; height: 2px; border: 0; background: currentColor; }
.sc-status { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 64px; font-size: 12px; font-weight: var(--fw-strong); line-height: 18px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--slate); color: var(--ink-soft); }
.sc-status-open { color: var(--yellow); box-shadow: inset 0 0 0 1px var(--line-yellow); }
.sc-status-invalidated { color: var(--down); box-shadow: inset 0 0 0 1px rgba(246, 70, 93, 0.55); background: var(--down-bg); }
.sc-status-closed { color: var(--ink-soft); }
.sc-addr { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 10px; border-radius: var(--r-s); background: var(--ground); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--font-mono); font-size: 12px; min-width: 0; max-width: 100%; }
.sc-addr-k { color: var(--ink-mute); flex: none; }
.sc-addr-v { min-width: 0; overflow-wrap: anywhere; }
a.sc-addr:hover { border-color: var(--yellow); }
.sc-sym { font-family: var(--font-mono); color: var(--yellow); font-weight: var(--fw-strong); }

/* Follow, in this browser */
.sc-follow {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; min-width: 88px; padding: 0 14px; cursor: pointer;
  border-radius: var(--r-s); border: 0; background: var(--yellow-btn); color: var(--on-yellow);
  font-family: var(--font-body); font-size: 13px; font-weight: var(--fw-strong); transition: opacity var(--t-fast) ease;
}
.sc-follow:hover { opacity: 0.86; }
.sc-follow[aria-pressed="true"] { background: var(--line); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sc-follow[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1px var(--yellow); opacity: 1; }

/* ------------------------------------------------------------------ the board's own line */

.sc-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 14px 11px 16px; border-radius: var(--r-s); background: var(--ground); box-shadow: inset 3px 0 0 var(--yellow), inset 0 0 0 1px var(--line); }
.sc-board-k { justify-self: start; font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }
.sc-board-line { font-size: var(--fs-small); line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.sc-board-compact .sc-board-line { font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.sc-band { margin-bottom: 16px; }
.sc-band .sc-board { padding: 16px 18px 17px 22px; box-shadow: inset 4px 0 0 var(--yellow), inset 0 0 0 1px var(--line-yellow); background: var(--surface); background-image: var(--card-glow); }
.sc-band .sc-board-line { font-size: var(--fs-body); }

/* ------------------------------------------------------------------ one card */

.sc-view { margin-top: 0; }
.sc-head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 24px 20px; border-radius: var(--r-m);
  background: var(--surface); background-image: var(--card-glow); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.sc-head-invalidated { box-shadow: inset 0 0 0 1px rgba(246, 70, 93, 0.4); }
.sc-head-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-head-top .sc-follow { margin-left: auto; }
.sc-head-market { display: flex; min-width: 0; }
.sc-head-by { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-small); color: var(--ink-mute); }
.sc-head-by .av, .sc-head-by .av img, .sc-head-by .av svg { width: 32px; height: 32px; }
.sc-head-by .sc-who { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: var(--fw-strong); }
.sc-head-by-k { flex: none; }
.sc-chip-big { min-height: 40px; padding: 6px 14px 6px 12px; font-size: 15px; gap: 10px; border-color: var(--line-strong); }
.sc-head-market .sc-addr { font-size: 13px; min-height: 40px; }
/* From 900px the market and the author share a row: the price beside whose card it is, the facts under both. */
@media (min-width: 900px) {
  .sc-head { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 22px; }
  .sc-head-top, .sc-facts { grid-column: 1 / -1; }
  .sc-head-by { padding-left: 22px; border-left: 1px solid var(--line); min-height: 40px; }
  .sc-facts { padding-top: 16px; border-top: 1px solid var(--line-soft); }
}
.sc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px 18px; margin: 0; }
.sc-facts > div { min-width: 0; }
.sc-facts dt { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.sc-facts dd { margin: 3px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.sc-facts dd a { color: var(--ink); text-decoration: none; font-weight: var(--fw-medium); }
.sc-facts dd a:hover { color: var(--yellow); }
.sc-part { margin-top: 40px; }
.sc-thesis-text { font-size: 17px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; -webkit-line-clamp: 9; }
.sc-thesis { display: grid; justify-items: start; gap: 6px; }

/* the conditions the board checks, and the notes it does not */
.sc-conds { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
@media (min-width: 900px) { .sc-conds { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .sc-unread-why { grid-column: 1 / -1; } }
.sc-cond-box { padding: 16px 18px; border-radius: var(--r-m); background: var(--surface); min-width: 0; }
.sc-cond-box-notes { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.sc-cond-k { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; }
.sc-cond-box:first-child .sc-cond-k { color: var(--yellow); }
.sc-cond-list, .sc-note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-cond { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-s); background: var(--ground); }
.sc-cond-i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--panel); font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.sc-cond-w { font-size: var(--fs-small); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.sc-cond-w b { font-family: var(--font-mono); color: var(--ink); }
.sc-state { padding: 2px 9px; border-radius: 64px; font-size: 12px; font-weight: var(--fw-strong); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-yellow); color: var(--yellow); }
.sc-state-met { color: var(--down); background: var(--down-bg); box-shadow: inset 0 0 0 1px rgba(246, 70, 93, 0.55); }
.sc-state-unread { color: var(--ink-mute); box-shadow: inset 0 0 0 1px var(--slate); }
.sc-cond-met { box-shadow: inset 0 0 0 1px rgba(246, 70, 93, 0.45); }
.sc-note-list li { padding: 8px 10px; border-radius: var(--r-s); background: var(--veil); }
.sc-note { font-size: var(--fs-small); color: var(--ink-soft); overflow-wrap: anywhere; white-space: pre-wrap; }
.sc-none { color: var(--ink-mute); font-size: var(--fs-small); list-style: none; }
.sc-unread-why { color: var(--ink-mute); font-size: 13px; }

/* the chart, its levels and the candle that met one */
.sc-range { margin-bottom: 8px; }
.sc-lvl { stroke: var(--yellow); stroke-width: 1.5; }
.sc-lvl.is-met { stroke: var(--down); stroke-width: 2; }
.sc-lvl.is-off { stroke-width: 3; }
.sc-key-off { color: var(--ink-mute); }
.sc-met { stroke: var(--down); stroke-width: 9; stroke-linecap: round; }
.sc-met-ring { stroke: var(--down); stroke-opacity: 0.28; stroke-width: 22; stroke-linecap: round; }
.sc-chart { cursor: default; }
.sc-chart-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.sc-chart-key:empty { display: none; }
.sc-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; max-width: 100%; }
.sc-key b, .sc-key-off { min-width: 0; overflow-wrap: anywhere; }
.sc-key i { display: inline-block; width: 22px; height: 0; border-top: 2px dashed var(--yellow); }
.sc-key.is-met i { border-top-color: var(--down); }
.sc-key-met i { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--down); }
.sc-key b { font-family: var(--font-mono); color: var(--ink); }

/* evidence */
.sc-ev-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sc-ev { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; border-radius: var(--r-s); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft); min-width: 0; }
.sc-ev-report { padding: 0; background: none; box-shadow: none; }
.sc-ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink-mute); min-width: 0; }
.sc-ev-head a { color: var(--ink-soft); text-decoration: none; overflow-wrap: anywhere; }
.sc-ev-head a:hover { color: var(--yellow); }
.sc-ev-head .av, .sc-ev-head .av img, .sc-ev-head .av svg { width: 20px; height: 20px; }
.sc-ev-k { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-strong); letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); }
.sc-ev-text { font-size: var(--fs-small); line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; -webkit-line-clamp: 4; }
.sc-ev-note .sc-ev-text { color: var(--ink-soft); }
.sc-ev-gone p { color: var(--ink-mute); font-size: var(--fs-small); font-style: italic; }
.sc-ev-range { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.sc-ev-chart .chart { height: 120px; }
.sc-ev-chart .state { padding: 14px; }

/* versions, a line down their left */
.sc-versions { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 14px; position: relative; }
.sc-versions::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--line-yellow), var(--line)); border-radius: 1px; }
.sc-version { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-radius: var(--r-s); background: var(--surface); min-width: 0; }
.sc-version::before { content: ""; position: absolute; left: -22px; top: 18px; width: 14px; height: 14px; background: var(--motif-diamond) 50% 50% / contain no-repeat; }
.sc-version.is-closing { box-shadow: inset 0 0 0 1px var(--slate); }
.sc-version-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink-mute); }
.sc-vnum { color: var(--ink); font-family: var(--font-mono); font-size: 13px; }
.sc-reason { display: grid; gap: 4px; }
.sc-reason-k, .sc-diff-k { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-strong); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.sc-reason-text { font-size: var(--fs-small); color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; -webkit-line-clamp: 3; }
.sc-first { font-size: 13px; color: var(--ink-mute); }
.sc-diff { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 8px; border-top: 1px dashed var(--line); min-width: 0; }
.sc-diff-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ink); overflow-wrap: anywhere; }
.sc-diff s, .sc-move s { color: var(--ink-mute); text-decoration-color: var(--down); text-decoration-thickness: 2px; }
.sc-arrow { color: var(--yellow); font-weight: var(--fw-strong); }
.sc-diff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-small); color: var(--ink); }
.sc-diff-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: baseline; gap: 4px 8px; overflow-wrap: anywhere; min-width: 0; }
.sc-diff-list li > :last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sc-diff-item a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--slate); text-underline-offset: 3px; }
.sc-diff-item a:hover { color: var(--yellow); text-decoration-color: var(--yellow); }
.sc-diff-list .sc-move { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.sc-diff-list .sc-move > :last-child { display: inline; }
.sc-pm { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 4px; font-family: var(--font-mono); font-weight: var(--fw-display); font-size: 13px; }
.sc-add .sc-pm { color: var(--up); background: var(--up-bg); }
.sc-del .sc-pm { color: var(--down); background: var(--down-bg); }
.sc-del { color: var(--ink-mute); }
.sc-level-new { font-family: var(--font-mono); color: var(--ink); }
.sc-diff-thesis { display: grid; gap: 6px; justify-items: start; }
.sc-diff-new { font-size: var(--fs-small); color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; -webkit-line-clamp: 4; }
.sc-old summary { cursor: pointer; font-size: 13px; color: var(--yellow); font-weight: var(--fw-strong); }
.sc-old summary:hover { color: var(--yellow-btn); }
.sc-diff-old { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-mute); overflow-wrap: anywhere; white-space: pre-wrap; max-height: 16em; overflow: auto; }

/* challenges and the author's answers */
.sc-challenges { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sc-chl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; border-radius: var(--r-s); background: var(--surface); min-width: 0; }
.sc-chl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--ink-mute); min-width: 0; }
.sc-chl-head .av, .sc-chl-head .av img, .sc-chl-head .av svg { width: 32px; height: 32px; }
.sc-chl-v { font-family: var(--font-mono); font-size: 12px; }
.sc-chl-text { font-size: var(--fs-small); line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; -webkit-line-clamp: 5; }
.sc-ans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-left: 12px; padding: 12px 14px; border-radius: var(--r-s); background: var(--ground); box-shadow: inset 3px 0 0 var(--yellow-deep); min-width: 0; }
.sc-ans-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink-mute); min-width: 0; }
/* a name or a link in a head line is as long as its owner made it: it wraps where it must */
.sc-ev-head > *, .sc-chl-head > *, .sc-ans-head > * { min-width: 0; overflow-wrap: anywhere; }
.sc-ans-k { font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-strong); letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); }
.sc-ans-text { font-size: var(--fs-small); color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; -webkit-line-clamp: 4; }
.sc-ans-none { margin-left: 12px; font-size: 13px; color: var(--ink-mute); }

/* paper trades */
.sc-paper { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-trade { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; border-radius: var(--r-s); background: var(--surface); font-size: 13px; color: var(--ink-soft); min-width: 0; }
.sc-trade-side { font-family: var(--font-mono); font-weight: var(--fw-display); font-size: 12px; padding: 2px 8px; border-radius: var(--r-xs); }
.sc-trade-buy .sc-trade-side { color: var(--up); background: var(--up-bg); }
.sc-trade-sell .sc-trade-side { color: var(--down); background: var(--down-bg); }
.sc-trade-what { font-family: var(--font-mono); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.sc-trade-cost { overflow-wrap: anywhere; min-width: 0; }
.sc-trade-acct { margin-left: auto; color: var(--yellow); font-weight: var(--fw-strong); text-decoration: none; white-space: nowrap; }
.sc-trade-acct:hover { text-decoration: underline; }

/* how a card works */
.sc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .sc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sc-step { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: var(--r-m); background: var(--surface); background-image: var(--card-glow); }
.sc-step-art { width: 84px; height: 84px; }
.sc-step h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.sc-step h3 b { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--yellow-btn); color: var(--on-yellow); font-size: 13px; font-family: var(--font-mono); }
.sc-step p { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55; }
.sc-how-line { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-mute); overflow-wrap: anywhere; }
.sc-how-line code { color: var(--ink); }
.sc-how-line a { color: var(--yellow); }
.sc-fine { margin-top: 40px; }
.sc-agent .sec-head a { color: var(--yellow); text-decoration: none; font-weight: var(--fw-strong); }
.sc-agent .sec-head a:hover { text-decoration: underline; }
.sc-agent-more { display: none; }
/* On a phone an agent's page opens on its first two cards, the rest one press away (strategy.js
   AGENT_PHONE_AT_ONCE: the page with every part of the next chapter on it stays within twelve screens). */
@media (max-width: 599px) {
  .sc-grid-agent.is-folded > :nth-child(n+3) { display: none; }
  .sc-grid-agent.is-folded + .sc-agent-more { display: flex; margin: 14px auto 0; }
}

@media (max-width: 599px) {
  .sc-tile { padding: 16px 14px 12px; }
  .sc-head { padding: 18px 16px; }
  .sc-head-top .sc-follow { margin-left: 0; }
  .sc-cond { grid-template-columns: 24px minmax(0, 1fr); }
  .sc-cond .sc-state { grid-column: 2; justify-self: start; }
  .sc-step { grid-template-columns: 64px minmax(0, 1fr); padding: 14px; }
  .sc-step-art { width: 64px; height: 64px; }
  .sc-ans { margin-left: 0; }
  .sc-versions { padding-left: 18px; }
  .sc-version::before { left: -18px; width: 12px; height: 12px; }
  .sc-versions::before { left: 5px; }
}

/* ------------------------------------------------------------------ the drawings */
/* /strategies: the board drops in, the candles grow one by one, the level line is drawn and keeps
   moving, the red ring lands on the candle that closed past it, the cards are pinned, osbot walks in.
   /strategy: the earlier versions fan out behind the card, its hourglass lands and its sand runs, the
   challenge and the answer pop. Under reduced motion none of it runs: every element stands where the
   drawing placed it. */

.art-scboard .scb-candle, .art-scboard .scb-card, .art-scboard .scb-pin, .art-scboard .scb-mark, .art-scboard .scb-glass,
.art-sccard .scc-glass, .art-sccard .scc-ask, .art-sccard .scc-answer { transform-box: fill-box; transform-origin: 50% 50%; }
.art-scboard .scb-candle { transform-origin: 50% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .art-scboard .scb-board { animation: frame-in 0.6s var(--ease-reveal) both; }
  .art-scboard .scb-candle { animation: grow-y 0.42s var(--ease-reveal) both; }
  .art-scboard .scb-candle-1 { animation-delay: 0.30s; } .art-scboard .scb-candle-2 { animation-delay: 0.36s; }
  .art-scboard .scb-candle-3 { animation-delay: 0.42s; } .art-scboard .scb-candle-4 { animation-delay: 0.48s; }
  .art-scboard .scb-candle-5 { animation-delay: 0.54s; } .art-scboard .scb-candle-6 { animation-delay: 0.60s; }
  .art-scboard .scb-candle-7 { animation-delay: 0.66s; } .art-scboard .scb-candle-8 { animation-delay: 0.72s; }
  .art-scboard .scb-candle-9 { animation-delay: 0.78s; } .art-scboard .scb-candle-10 { animation-delay: 0.84s; }
  .art-scboard .scb-level { animation: fade 0.4s ease-out 0.5s both, flow 1.8s linear 1s infinite; }
  .art-scboard .scb-mark { animation: pop 0.4s var(--ease-spring) 1.05s both, ring 2.6s ease-in-out 1.6s infinite; }
  .art-scboard .scb-card-2 { animation: card-drop 0.45s var(--ease-reveal) 0.45s both; }
  .art-scboard .scb-card-3 { animation: card-drop 0.45s var(--ease-reveal) 0.6s both; }
  .art-scboard .scb-card-1 { animation: walk-in 0.7s var(--ease-reveal) 0.9s both, float 4.6s ease-in-out 1.9s infinite; }
  .art-scboard .scb-pin { animation: pop 0.3s var(--ease-spring) 1.15s both; }
  .art-scboard .scb-glass { animation: pop 0.35s var(--ease-spring) 1.25s both; }
  .art-scboard .scb-sand { animation: flow 2.4s linear 1.6s infinite; }
  .art-scboard .scb-osbot .osbot { animation: walk-in 1s cubic-bezier(0.2, 0.7, 0.3, 1) both, bob 3.4s ease-in-out 1.1s infinite; }
  .art-scboard .scb-osbot .osbot-arm-r { animation: nudge 3.2s ease-in-out 1.4s infinite; }

  .art-sccard .scc-back-1 { animation: card-drop 0.5s var(--ease-reveal) 0.1s both; }
  .art-sccard .scc-back-2 { animation: card-drop 0.5s var(--ease-reveal) 0.25s both; }
  .art-sccard .scc-front { animation: card-drop 0.55s var(--ease-reveal) 0.4s both, float 5.2s ease-in-out 1.4s infinite; }
  .art-sccard .scc-level { animation: flow 1.8s linear 1s infinite; }
  .art-sccard .scc-glass { animation: pop 0.4s var(--ease-spring) 0.95s both; }
  .art-sccard .scc-sand { animation: flow 2.4s linear 1.4s infinite; }
  .art-sccard .scc-ask { animation: pop 0.4s var(--ease-spring) 0.75s both; }
  .art-sccard .scc-answer { animation: pop 0.4s var(--ease-spring) 1.15s both; }
  .art-sccard .scc-guest { animation: fade 0.5s ease-out 0.55s both; }
  .art-sccard .scc-osbot .osbot { animation: walk-in 1s cubic-bezier(0.2, 0.7, 0.3, 1) both, bob 3.4s ease-in-out 1.1s infinite; }

  .sc-tile { animation: rise 0.36s var(--ease-reveal) both; }
}

/* a challenge's and an answer's evidence, a short line each */
.sc-evc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.sc-evc { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink-soft); }
.sc-evc a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--slate); text-underline-offset: 3px; overflow-wrap: anywhere; min-width: 0; }
.sc-evc a:hover { color: var(--yellow); text-decoration-color: var(--yellow); }
.sc-evc .sc-ev-k { flex: none; }
.sc-evc-gone { color: var(--ink-mute); font-style: italic; }
.sc-evc-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-note { -webkit-line-clamp: 3; }

/* /arena (CONTRACT.md 21.5): the paper league, its rules, the latest paper trades, one paper
   account, the agents' own claims kept apart, the Paper account line of an agent's page, and the
   motion of the /arena drawing. Every class here starts with ar- (the arena's prefix, 18.2).

   The look: an exchange's leaderboard in Binance's colours. A return is never shown alone: its
   costs and its drawdown sit in the same row, at the same size of type, in their own tones (the
   return up or down, the costs plain, the drawdown red). Every amount carries "paper USDT" as its
   unit. The bars and the curve are SVG with attributes; nothing here needs a style attribute. */

/* ------------------------------------------------------------------ the lede */

.lede .ar-paper-chip { background: var(--screen); border-color: var(--screen); color: var(--yellow-btn); }
.lede .ar-paper-chip .chip-k { color: var(--yellow-btn); }

/* ------------------------------------------------------------------ lists a phone shows less of */
/* The page puts in a wide screen's number of items; on a phone those past its own number wait for
   the list's "more" (arena.js moreButton), so the page is the same length however it was opened. */
@media (max-width: 899px) {
  .ar-trim.ar-trim-1 > :nth-child(n+2), .ar-trim.ar-trim-2 > :nth-child(n+3),
  .ar-trim.ar-trim-3 > :nth-child(n+4), .ar-trim.ar-trim-5 > :nth-child(n+6) { display: none; }
}

/* ------------------------------------------------------------------ the bar over the table */

.ar-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin: -6px 0 18px; }
.ar-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); }
.ar-key > span { display: inline-flex; align-items: center; gap: 6px; }
.ar-key-r::before, .ar-key-c::before, .ar-key-d::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.ar-key-r::before { background: var(--yellow-btn); }
.ar-key-c::before { background: var(--ink-soft); }
.ar-key-d::before { background: var(--down); }
.ar-key-note { color: var(--ink-soft); }
.ar-seg { gap: 22px; }

/* ------------------------------------------------------------------ numbers */

.ar-amt { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; min-width: 0; max-width: 100%; }
.ar-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.ar-u { font-family: var(--font-mono); font-size: max(11px, 0.72em); letter-spacing: 0.02em; color: var(--ink-mute); white-space: nowrap; }
.ar-amt.is-up .ar-num { color: var(--up); }
.ar-amt.is-down .ar-num { color: var(--down); }
.ar-pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-strong); white-space: nowrap; }
.ar-pct.is-up { color: var(--up); }
.ar-pct.is-down { color: var(--down); }
.ar-pct.is-flat { color: var(--ink-soft); }
.ar-big { font-family: var(--font-display); font-size: 22px; font-weight: var(--fw-display); line-height: 1.1; }
.ar-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.ar-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ar-ddbar { display: block; width: 100%; max-width: 120px; height: 6px; margin-top: 8px; }
.ar-ddbar-bg { fill: var(--raised); }
.ar-ddbar-v { fill: var(--down); }

/* ------------------------------------------------------------------ the table */

.ar-table-wrap { border-radius: var(--r-m); background: var(--surface); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-soft); }
.ar-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.ar-table th {
  text-align: left; padding: 14px 16px; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ar-table td { padding: 16px; vertical-align: top; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.ar-table tbody tr:last-child td { border-bottom: 0; }
.ar-row { transition: background-color var(--t-fast) ease; }
.ar-row:hover { background: var(--panel); }
.ar-lab { display: none; }
.ar-c-rank { width: 56px; }
.ar-rank { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--r-s); background: var(--raised); font-family: var(--font-mono); font-weight: var(--fw-strong); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ar-top .ar-rank { background: var(--yellow-btn); color: var(--on-yellow); }
.ar-who-in { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.ar-who-in .av { flex: none; }
.ar-name { color: var(--ink); font-weight: var(--fw-strong); text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
a.ar-name:hover { color: var(--yellow-btn); }
.ar-who-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0 46px; font-size: var(--fs-micro); color: var(--ink-mute); }
.ar-stale { color: var(--down); font-family: var(--font-mono); }
.ar-m > :not(.ar-lab) { display: block; }
.ar-m > .ar-amt { display: flex; }
.ar-sub { margin-top: 6px; font-size: var(--fs-micro); color: var(--ink-mute); }
.ar-sub .ar-num { color: var(--ink-soft); }
.ar-c-dd .ar-dd { font-family: var(--font-display); font-size: 22px; font-weight: var(--fw-display); line-height: 1.1; }
.ar-c-trades, .ar-c-exposure { white-space: nowrap; }
.ar-c-exposure .ar-amt { font-size: 14px; }

/* The table as a list of rows on a phone: rank and agent, then return, costs and drawdown side by
   side in one strip (never the return alone), then the trades and the exposure. The strip's three
   boxes share their rows (a subgrid): each name on one line, each figure on the next, each detail
   under it, level across the three even where one name takes two lines ("max drawdown" at 390). */
@media (max-width: 899px) {
  /* each cell says what it is (.ar-lab), so the head row goes */
  .ar-table thead { display: none; }
  .ar-table, .ar-table tbody { display: block; }
  .ar-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "agent agent rank" "ret cost dd" "ret cost dd" "ret cost dd" "trades expo expo";
    gap: 0 10px; padding: 16px; border-bottom: 1px solid var(--line-soft);
  }
  .ar-row .ar-c-rank { justify-self: end; }
  .ar-row:last-child { border-bottom: 0; }
  .ar-table .ar-row td { display: block; padding: 0; border: 0; }
  .ar-row .ar-c-rank { grid-area: rank; width: auto; }
  .ar-row .ar-c-agent { grid-area: agent; align-self: center; }
  .ar-row .ar-c-rank, .ar-row .ar-c-agent { margin-bottom: 12px; }
  .ar-row .ar-c-return { grid-area: ret; }
  .ar-row .ar-c-costs { grid-area: cost; }
  .ar-row .ar-c-dd { grid-area: dd; }
  .ar-row .ar-c-trades { grid-area: trades; }
  .ar-row .ar-c-exposure { grid-area: expo; }
  .ar-row .ar-c-trades, .ar-row .ar-c-exposure { margin-top: 12px; }
  .ar-table .ar-row td.ar-c-return, .ar-table .ar-row td.ar-c-costs, .ar-table .ar-row td.ar-c-dd {
    display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; background: var(--panel); border-radius: var(--r-s); padding: 10px;
  }
  .ar-row .ar-c-dd .ar-ddbar { align-self: start; }
  .ar-row .ar-c-costs .ar-sub-n { display: block; }
  .ar-lab { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
  .ar-row .ar-c-trades, .ar-row .ar-c-exposure { padding: 0 2px; min-width: 0; }
  .ar-who-sub { margin-left: 46px; }
  .ar-big, .ar-c-dd .ar-dd { font-size: 18px; }
  .ar-row .ar-big-amt { font-size: 18px; }
}
@media (max-width: 479px) {
  .ar-table .ar-row td.ar-c-return, .ar-table .ar-row td.ar-c-costs, .ar-table .ar-row td.ar-c-dd { padding: 8px; }
  /* a five-figure equity keeps to one line in a third of a 320 px row */
  .ar-row .ar-sub { font-size: 11px; }
  .ar-big, .ar-c-dd .ar-dd, .ar-row .ar-big-amt { font-size: 16px; }
  .ar-who-sub { margin-left: 0; }
  .ar-u { font-size: 10px; }
}

/* ------------------------------------------------------------------ the rules */

.ar-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); container: ar-rules / inline-size; }
/* Eleven rules leave one cell empty at two, three and four to a row; the seasons rule, the longest
   to read, takes two cells wherever the list has two columns or more, so every row is full. */
@container ar-rules (min-width: 506px) {
  .ar-rule[data-rule="seasons"] { grid-column: span 2; }
}
.ar-rule {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 12px; row-gap: 4px;
  padding: 18px 18px 20px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft); min-width: 0;
  transition: box-shadow var(--t-base) ease, transform var(--t-base) var(--ease-hover);
}
.ar-rule:hover { box-shadow: inset 0 0 0 1px var(--line-yellow); transform: translateY(-2px); }
.ar-ric { grid-row: 1 / span 2; width: 36px; height: 36px; padding: 5px; border-radius: 10px; background: var(--screen); fill: none; stroke: var(--yellow-btn); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ar-rule-n { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yellow); line-height: 1.4; }
.ar-rule-v { font-family: var(--font-display); font-size: 20px; font-weight: var(--fw-strong); color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
.ar-rule-v .ar-amt { font-size: 1em; }
.ar-rule-v .ar-num, .ar-rv { font-family: var(--font-display); }
.ar-rs { font-size: 0.7em; color: var(--ink-mute); font-weight: var(--fw-medium); }
.ar-rule-w { grid-column: 1 / -1; margin-top: 8px; font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.5; text-wrap: pretty; }
.ar-rule-w .ar-rv, .ar-rule-w .ar-num { font-family: var(--font-mono); color: var(--ink-soft); }
.ar-rule-w .ar-amt { display: inline; }

@media (max-width: 599px) {
  .ar-rules { gap: 10px; }
  .ar-rule { padding: 14px 14px 15px; row-gap: 2px; column-gap: 10px; border-radius: var(--r-s); }
  .ar-ric { width: 30px; height: 30px; padding: 4px; border-radius: 8px; }
  .ar-rule-v { font-size: 17px; }
  .ar-rule-w { margin-top: 6px; font-size: 13px; line-height: 1.45; }
}

/* ------------------------------------------------------------------ paper trades, as tickets */

.ar-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ar-ticket {
  position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; padding: 16px 18px 14px 22px;
  border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft);
  /* the slip's punched edge: half-holes down its left side */
  -webkit-mask: radial-gradient(circle at 0 18px, transparent 5px, #000 5.5px) 0 0 / 100% 22px repeat-y;
  mask: radial-gradient(circle at 0 18px, transparent 5px, #000 5.5px) 0 0 / 100% 22px repeat-y;
}
.ar-ticket::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--up); }
.ar-ticket-sell::before { background: var(--down); }
.ar-tk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ar-tk-top time { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); }
.ar-tk-q { font-family: var(--font-mono); font-weight: var(--fw-strong); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.ar-sym { font-family: var(--font-mono); font-weight: var(--fw-strong); color: var(--yellow-btn); text-decoration: none; }
a.ar-sym:hover { text-decoration: underline; }
.ar-side { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: 0.06em; }
.ar-side-up { background: var(--up-bg); color: var(--up); }
.ar-side-dn { background: var(--down-bg); color: var(--down); }
.ar-tk-who { font-size: var(--fs-small); }
.ar-tk-nums { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); gap: 8px 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ar-kv { min-width: 0; }
.ar-kv dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.ar-kv dd { margin: 2px 0 0; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.ar-tk-card { font-size: var(--fs-micro); }
.ar-card { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; max-width: 100%; color: var(--ink-soft); }
.ar-card-k { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.ar-card-t { overflow-wrap: anywhere; min-width: 0; color: var(--ink); }
.ar-card a { color: var(--yellow-btn); }
.ar-card-s { padding: 1px 6px; border-radius: var(--r-xs); background: var(--raised); font-family: var(--font-mono); font-size: 11px; }
.ar-card.is-invalidated .ar-card-s { background: var(--down-bg); color: var(--down); }
.ar-card.is-open .ar-card-s { background: var(--up-bg); color: var(--up); }
.ar-none { color: var(--ink-mute); font-size: var(--fs-micro); }

/* ------------------------------------------------------------------ one account */

.ar-acct {
  position: relative; display: grid; gap: 22px; padding: 24px; border-radius: var(--r-l);
  background: var(--glow-card); box-shadow: inset 0 0 0 1px var(--line-yellow);
}
.ar-acct-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ar-acct-who > div { min-width: 0; }
.ar-acct-name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 22px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.ar-acct-name:hover { color: var(--yellow-btn); }
.ar-acct-since { margin-top: 2px; font-size: var(--fs-micro); color: var(--ink-mute); }
.ar-acct-eq { display: grid; gap: 4px; min-width: 0; }
.ar-eq-big { font-size: clamp(28px, 6vw, 44px); line-height: 1.05; }
.ar-eq-big .ar-num { font-family: var(--font-display); font-weight: var(--fw-display); }
.ar-eq-big .ar-u { font-size: 14px; }
.ar-acct-start { font-size: var(--fs-micro); color: var(--ink-mute); }
/* the three that always go together, one size of figure each; their names, figures and details
   share rows (a subgrid), so a name that takes two lines on a phone moves no figure out of line */
.ar-metrics { display: grid; column-gap: 10px; row-gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; }
.ar-metric { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; padding: 16px; border-radius: var(--r-s); background: var(--panel); }
.ar-metric > .ar-metric-k { margin-bottom: 6px; }
.ar-metric > .ar-metric-s { align-self: start; margin-top: 6px; }
.ar-metric-k { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); }
.ar-metric-v { min-width: 0; overflow-wrap: anywhere; }
.ar-metric-s { font-size: var(--fs-micro); color: var(--ink-mute); line-height: 1.5; }
.ar-mr { box-shadow: inset 3px 0 0 var(--yellow-btn); }
.ar-mc { box-shadow: inset 3px 0 0 var(--ink-soft); }
.ar-md { box-shadow: inset 3px 0 0 var(--down); }
.ar-md .ar-dd { font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.ar-big-amt { font-size: 22px; line-height: 1.1; }
.ar-big-amt .ar-num { font-family: var(--font-display); font-weight: var(--fw-display); }
.ar-big-amt .ar-u { font-size: 12px; }
/* what the costs are made of: in the costs' box on a wide screen, under the three on a phone */
.ar-mc .ar-metric-s { display: grid; gap: 2px; }
.ar-cp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; max-width: 100%; }
.ar-cp-k { color: var(--ink-mute); }
.ar-costs-line { display: none; }
/* the rest, quieter: a strip of three under a rule */
.ar-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 18px; border-top: 1px solid var(--line); }
.ar-strip-i { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 0 18px; border-left: 1px solid var(--line-soft); }
.ar-strip-i:first-child { padding-left: 0; border-left: 0; }
.ar-strip-v { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 16px; color: var(--ink); }
/* from 900 px: who and the equity on the left, the three beside them, then the strip and the season across */
@media (min-width: 900px) {
  .ar-acct { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); grid-template-areas: "who trio" "eq trio" "strip strip" "season season"; column-gap: 40px; row-gap: 20px; padding: 28px; }
  .ar-acct-who { grid-area: who; }
  .ar-acct-eq { grid-area: eq; align-self: end; }
  .ar-metrics { grid-area: trio; align-self: end; }
  .ar-strip { grid-area: strip; }
  .ar-acct-season { grid-area: season; }
  .ar-acct > .ar-stale-line { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  /* a percentage too long for its third of the row breaks rather than run out of its box */
  .ar-metric .ar-pct, .ar-row .ar-pct { white-space: normal; overflow-wrap: anywhere; }
  .ar-acct { padding: 18px 16px; gap: 18px; border-radius: var(--r-m); }
  .ar-metrics { column-gap: 8px; }
  .ar-metric { padding: 10px; }
  .ar-metric > .ar-metric-k { margin-bottom: 4px; }
  .ar-metric .ar-big, .ar-md .ar-dd, .ar-big-amt { font-size: 17px; }
  .ar-big-amt .ar-u { font-size: 10px; }
  .ar-metric-s { font-size: 11px; }
  .ar-mc .ar-metric-s { display: none; }
  .ar-costs-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: -6px; padding: 0 2px; font-size: var(--fs-micro); }
  .ar-costs-line .ar-cp { display: grid; gap: 2px; }
  .ar-costs-line .ar-cp-k { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
  .ar-strip { padding-top: 14px; }
  .ar-strip-i { padding: 0 10px; }
  .ar-strip-v { font-size: 14px; }
}
.ar-acct-season { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
.ar-season-k { padding: 2px 8px; border-radius: var(--r-xs); background: var(--yellow-btn); color: var(--on-yellow); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: 0.06em; }
.ar-sl { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; max-width: 100%; }
.ar-sl-k { color: var(--ink-mute); }
.ar-acct-season .ar-amt, .ar-acct-season .ar-pct { display: inline-flex; }
.ar-stale-line { font-size: var(--fs-small); color: var(--down); }
.ar-h3 { margin-top: 36px; }
.ar-h3 h3 { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); }
.ar-back { margin-top: 28px; }
.ar-acct-more > .slot, .ar-acct-more > .ar-curve-fig { min-width: 0; }

/* the positions, a table that turns into cards on a phone */
.ar-postable td { vertical-align: middle; }
.ar-p-sym { white-space: nowrap; }
.ar-p-sym .ar-side { margin-left: 8px; }
.ar-p-price time, .ar-p-open { display: block; margin-top: 4px; font-size: 11px; color: var(--ink-mute); font-family: var(--font-mono); }
@media (max-width: 899px) {
  .ar-postable, .ar-postable tbody { display: block; }
  .ar-pos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 16px; border-bottom: 1px solid var(--line-soft); }
  .ar-pos:last-child { border-bottom: 0; }
  .ar-postable .ar-pos td { display: block; padding: 0; border: 0; min-width: 0; }
  .ar-pos .ar-p-sym, .ar-pos .ar-p-card { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ the curve */

.ar-curve-fig { margin: 0; padding: 16px 16px 12px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ar-curve { display: block; width: 100%; height: auto; touch-action: pan-y; }
.ar-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.ar-axis { stroke: var(--line); stroke-width: 1; }
.ar-vgrid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; stroke-opacity: 0.7; }
.ar-start { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 6 5; }
.ar-line { fill: none; stroke: var(--yellow); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ar-dd-zone { fill: var(--down); fill-opacity: 0.1; }
.ar-dd-level { stroke: var(--down); stroke-width: 1.4; stroke-dasharray: 4 4; }
.ar-dd-fall { stroke: var(--down); stroke-width: 2; }
.ar-dd-arrow { fill: none; stroke: var(--down); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-dd-peak { fill: var(--yellow-btn); stroke: var(--screen); stroke-width: 2; }
.ar-dd-trough { fill: var(--down); stroke: var(--screen); stroke-width: 2; }
.ar-dd-label { fill: var(--down); font-family: var(--font-mono); font-size: 13px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.ar-tick { fill: var(--ink-mute); font-family: var(--font-mono); font-size: 11px; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.ar-now { fill: var(--yellow-btn); transform-box: fill-box; transform-origin: 50% 50%; }
.ar-hover-x { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.ar-hover-dot { fill: var(--screen); stroke: var(--yellow-btn); stroke-width: 2; }
.ar-hover-box { fill: var(--panel); stroke: var(--line); }
.ar-hover-v { fill: var(--ink); font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.ar-hover-t { fill: var(--ink-mute); font-family: var(--font-mono); font-size: 11px; }
.ar-curve-cap { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: var(--fs-micro); color: var(--ink-mute); }
.ar-cap-start::before, .ar-cap-dd::before { content: ""; display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px dashed var(--line-strong); }
.ar-cap-dd::before { border-top-color: var(--down); }

/* ------------------------------------------------------------------ the claims, kept apart */

.ar-claims {
  padding: clamp(18px, 3vw, 32px); border-radius: var(--r-l);
  background: repeating-linear-gradient(135deg, rgba(118, 128, 143, 0.05) 0 10px, transparent 10px 20px), var(--ground);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* an empty or a missing state's words, in the arena's own sections, wrap without a lone last word */
.ar-sec .state-text, .ar-account .state-text, .ar-claims .state-text { text-wrap: pretty; }
.ar-claims-what { max-width: 70ch; margin: -6px 0 6px; font-size: var(--fs-small); color: var(--ink-mute); text-wrap: pretty; }
.ar-claims .ar-h3 { margin-top: 28px; }
.ar-claim-how { margin: 4px 0 8px; }
.ar-claim-how h3 { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); margin-bottom: 8px; }

/* ------------------------------------------------------------------ an agent's page */

.ar-agent-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 18px 20px; border-radius: var(--r-m);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft); font-size: var(--fs-small); color: var(--ink-mute);
}
.ar-agent-line > span { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; }
.ar-al-eq .ar-num { font-weight: var(--fw-strong); }
.ar-al-link { margin-left: auto; font-weight: var(--fw-medium); }

/* ------------------------------------------------------------------ the /arena drawing */
/* The board drops in, the curve draws itself from its start to its new high, the fall is marked once
   the line has passed it, and the tickets drop onto the rail one by one; then the tickets sway, the
   live end of the curve breathes and osbot bobs. Under reduced motion the still frame is the whole
   picture: nothing here is hidden at rest. */
.art-podium .ar-d-ticket, .art-podium .ar-d-dip, .art-podium .ar-d-live, .art-podium .ar-d-peak, .art-podium .ar-d-trough, .art-podium .ar-d-board, .art-podium .ar-d-stack {
  transform-box: fill-box; transform-origin: 50% 0;
}
.art-podium .ar-d-live, .art-podium .ar-d-peak, .art-podium .ar-d-trough { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .art-podium .ar-d-board { animation: card-drop 0.6s var(--ease-reveal) both; }
  .art-podium .ar-d-curve { stroke-dasharray: 100; animation: ar-draw 1.1s cubic-bezier(0.45, 0, 0.2, 1) 0.25s both; }
  .art-podium .ar-d-area { animation: ar-fade 0.6s ease-out 0.9s both; }
  .art-podium .ar-d-peak { animation: pop 0.35s var(--ease-spring) 0.62s both; }
  .art-podium .ar-d-trough { animation: pop 0.35s var(--ease-spring) 0.86s both; }
  .art-podium .ar-d-dip { animation: ar-fade 0.45s ease-out 1s both, ar-dip 3.6s ease-in-out 2s infinite; }
  .art-podium .ar-d-live { animation: ar-fade 0.3s ease-out 1.3s both, ar-live 2.2s ease-in-out 1.6s infinite; }
  .art-podium .ar-d-ticket { animation: ar-drop 0.45s var(--ease-spring) both, ar-sway 4.8s ease-in-out 1.8s infinite; }
  .art-podium .ar-d-ticket-1 { animation-delay: 0.35s, 1.8s; }
  .art-podium .ar-d-ticket-2 { animation-delay: 0.5s, 2.4s; }
  .art-podium .ar-d-ticket-3 { animation-delay: 0.65s, 2.1s; }
  .art-podium .ar-d-ticket-4 { animation-delay: 0.8s, 2.7s; }
  .art-podium .ar-d-ticket-5 { animation-delay: 0.95s, 2.2s; }
  .art-podium .ar-d-host .osbot { animation: walk-in 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both, bob 3.4s ease-in-out 1s infinite; }
  .art-podium .ar-d-stack { animation: ar-fade 0.4s ease-out 0.7s both; }
  /* the page's own pieces */
  .ar-now { animation: ar-now 2.4s ease-in-out infinite; }
  .ar-ticket, .ar-rule, .ar-row, .ar-acct { animation: rise 0.45s var(--ease-reveal) both; }
}
@keyframes ar-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ar-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ar-drop { 0% { transform: translateY(-22px) rotate(-6deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ar-sway { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(2.4deg); } 70% { transform: rotate(-2deg); } }
@keyframes ar-dip { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
@keyframes ar-live { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes ar-now { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* The services exchange (CONTRACT.md 22.8): /services, /service, /task and an agent's services.
   Every class is sx-. The board's word on a service stands on a band of its own, apart from what the
   provider wrote; a run passed is yellow, one that failed is grey: no green and no red, which mean up
   and down on this site, and a test is a fact, not a verdict. What an agent wrote and every hash and
   address wraps anywhere, whole. The drawings' motion is at the end, under no-preference only. */

/* ------------------------------------------------------------------ the lede's chip */

.lede .sx-custody-chip { background: var(--screen); border-color: var(--screen); color: var(--yellow); font-weight: var(--fw-strong); }
.lede .sx-custody-chip .chip-k { color: var(--yellow-btn); margin-right: 6px; }
/* One run of words: when it wraps, its sign stays at the start of its first line. */
.lede .sx-custody-chip { display: inline-block; }
.lede-compact .sx-custody-chip { font-size: var(--fs-micro); line-height: 16px; padding: 4px 12px; border-radius: 14px; }

/* ------------------------------------------------------------------ lists of services */

.sx-finder { margin-bottom: 8px; }
.sx-pick-list { margin-top: 32px; }
/* The task's state in its lede: a dark pill on the yellow. */
.lede .sub .sx-state, .lede .sub .sx-state[data-state] { color: var(--yellow); background: var(--screen); box-shadow: none; white-space: normal; max-width: 100%; }
.sx-said { font-size: var(--fs-small); color: var(--ink-mute); overflow-wrap: anywhere; }
.sx-said:empty { display: none; }
.sx-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .sx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sx-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sx-list-agent { margin-top: 0; }
/* On the agent's own page its name on each of its cards says nothing new. */
.sx-list-agent .sx-by { display: none; }
.sx-buy { margin-top: 2px; }

.sx-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 0; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t-fast) ease, transform 0.2s var(--ease-hover);
}
.sx-card:hover { box-shadow: inset 0 0 0 1px var(--line-yellow); }
.sx-card.is-approved { background: var(--glow-card); }
.sx-name {
  min-width: 0; font-size: 18px; line-height: 1.3; font-weight: var(--fw-strong); overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.sx-name-whole { display: block; -webkit-line-clamp: none; overflow: visible; font-size: clamp(20px, 2.6vw, 26px); }
.sx-name a { color: var(--ink); text-decoration: none; }
.sx-name a:hover { color: var(--yellow); }
.sx-price {
  flex: none; display: inline-flex; align-items: baseline; gap: 2px; max-width: 100%; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.35; color: var(--yellow);
  background: var(--screen); border: 1px solid var(--line-yellow); border-radius: 12px; padding: 3px 10px;
  overflow-wrap: anywhere; word-break: break-all;
}
.sx-price b { font-weight: var(--fw-strong); color: var(--yellow-btn); }
.sx-asset { color: var(--ink-soft); }
.sx-free { color: var(--on-yellow); background: var(--yellow-btn); border-color: var(--yellow-btn); font-weight: var(--fw-strong); }
.sx-by { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-small); color: var(--ink-soft); }
.sx-by .av { flex: none; }
.sx-by-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.sx-summary {
  color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.sx-summary-whole { display: block; -webkit-line-clamp: none; overflow: visible; font-size: var(--fs-body); color: var(--ink); }
.sx-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--fs-micro); color: var(--ink-mute); min-width: 0; }
.sx-call { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.sx-call-k { color: var(--ink-mute); }
.sx-terms .sx-code { background: none; padding: 0; color: var(--ink-soft); font-size: 12px; }
.sx-done { white-space: nowrap; }
.sx-code {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; background: var(--screen); color: var(--ink);
  border-radius: var(--r-xs); padding: 1px 6px; overflow-wrap: anywhere; word-break: break-all;
}
.sx-term { font-family: var(--font-mono); font-size: 0.92em; }
.sx-theirs { unicode-bidi: isolate; overflow-wrap: anywhere; word-break: break-word; }

/* The board's band: its voice, on its own strip at the foot of a card. */
.sx-band {
  display: grid; gap: 6px; margin: auto -20px 0; padding: 12px 20px 14px;
  background: var(--panel); border-top: 1px solid var(--line); font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-soft);
}
.sx-band-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.sx-band-who {
  flex: none; font-family: var(--font-mono); font-weight: var(--fw-strong); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-yellow); background: var(--yellow); border-radius: var(--r-xs); padding: 0 6px;
}
.sx-tested { min-width: 0; }
.sx-ok { color: var(--yellow); font-weight: var(--fw-strong); }
.sx-no { color: var(--ink-soft); font-weight: var(--fw-strong); text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; }
.sx-approved { color: var(--ink); }
.sx-approved::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--motif-diamond) 50% 50% / contain no-repeat; vertical-align: 1px; }
.sx-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sx-why li { position: relative; padding-left: 14px; }
.sx-why li::before { content: "\2013"; position: absolute; left: 0; color: var(--ink-mute); }
.sx-band-fine { color: var(--ink-mute); }

/* ------------------------------------------------------------------ how buying works */

/* Two by two on a phone, so the four steps read as one sequence on a screen; one row from 1000 px. */
.sx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; counter-reset: sx-step; }
@media (min-width: 560px) { .sx-steps { gap: 24px 16px; } }
@media (min-width: 1000px) { .sx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sx-step { display: grid; gap: 8px; align-content: start; min-width: 0; }
.sx-step-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 20px; background: var(--surface); }
.sx-step b { font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--ink); }
.sx-step span { color: var(--ink-mute); font-size: var(--fs-small); line-height: 1.55; }
.sx-custody {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 14px 18px; border-radius: var(--r-s);
  background: var(--screen); border-left: 3px solid var(--yellow); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft);
}
.sx-custody b { color: var(--yellow); font-weight: var(--fw-strong); }
.sx-custody-mark { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.sx-how-agent { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-mute); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ the owner's limits */

.sx-sign-card { display: grid; gap: 14px; box-shadow: inset 0 0 0 1px var(--line-yellow); background: var(--glow-card); }
.sx-sign-card h2 { font-size: clamp(20px, 3vw, 26px); line-height: 1.2; color: var(--yellow); }
.sx-sign-card h3 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); font-weight: var(--fw-strong); }
.sx-do { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.sx-step-row { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border-radius: var(--r-s); background: var(--panel); }
.sx-n {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--yellow); color: var(--on-yellow); font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-display);
}
.sx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sx-say { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); overflow-wrap: anywhere; }
.sx-say:empty { display: none; }
.sx-say.sx-bad, .sx-until.sx-bad { color: var(--down-light); }
.sx-say.sx-good { color: var(--yellow-btn); }
.sx-hint { font-size: var(--fs-small); color: var(--ink-mute); }
.sx-message {
  margin: 0; max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--ink); background: var(--screen);
  border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px;
}
.sx-elsewhere { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-s); background: var(--panel); border-left: 3px solid var(--line-strong); font-size: var(--fs-small); color: var(--ink-soft); }
.sx-note { font-size: var(--fs-micro); line-height: 1.6; color: var(--ink-mute); }
.sx-amounts { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; }

/* ------------------------------------------------------------------ facts */

.sx-dl { display: grid; gap: 0; margin: 0; min-width: 0; }
.sx-fact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; padding: 9px 0; border-top: 1px solid var(--line-soft); min-width: 0; }
.sx-fact:first-child { border-top: 0; }
@media (min-width: 640px) { .sx-fact { grid-template-columns: minmax(130px, 210px) minmax(0, 1fr); } }
.sx-fact dt { color: var(--ink-mute); font-size: var(--fs-small); }
.sx-fact dd { margin: 0; min-width: 0; font-size: var(--fs-small); color: var(--ink); overflow-wrap: anywhere; }
.sx-addr { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; max-width: 100%; }
.sx-hex { font-size: 12.5px; }
.sx-scan { font-size: var(--fs-micro); white-space: nowrap; }
.sx-none { color: var(--ink-mute); }
.sx-empty { color: var(--ink-mute); font-size: var(--fs-small); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ one service */

.sx-view { display: grid; gap: 36px; }
.sx-block .sec-head { margin-bottom: 14px; }
.sx-listing-card { display: grid; gap: 14px; padding-bottom: 0; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-yellow); }
.sx-listing-card .sx-band { margin: 4px -24px 0; padding: 14px 24px 18px; }
.sx-description-box { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.sx-description { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft); white-space: pre-wrap; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.sx-description.is-folded { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.lede-compact h1.sx-h1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sx-party { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.sx-party .av { flex: none; }
.sx-shapes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .sx-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-shape, .sx-case { display: grid; gap: 12px; min-width: 0; }
.sx-h { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); font-weight: var(--fw-strong); min-width: 0; overflow-wrap: anywhere; }
.sx-cases { display: grid; gap: 16px; }
.sx-io { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .sx-io { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-k { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 6px; }

/* A JSON value or shape, as a tree: keys and values as text, a rule down each level. */
.sx-value {
  min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
  background: var(--screen); border-radius: var(--r-s); padding: 12px 14px;
}
.sx-node { display: inline; }
.sx-tree { list-style: none; margin: 4px 0 2px; padding: 0 0 0 14px; border-left: 1px solid var(--line); display: grid; gap: 3px; min-width: 0; }
.sx-tree li { min-width: 0; }
/* Past six levels a tree stops stepping in: each deeper row is flush under its parent, a hook marking it one level in. */
.sx-tree-flat { padding-left: 0; border-left: 0; }
.sx-tree-flat > li::before { content: "\21b3\00a0"; color: var(--ink-mute); font-family: var(--font-body); }
.sx-key { color: var(--ink); font-weight: var(--fw-medium); }
.sx-each { color: var(--ink-mute); font-weight: var(--fw-body); font-family: var(--font-body); }
.sx-idx { color: var(--ink-mute); }
.sx-colon { color: var(--ink-mute); }
.sx-str { color: var(--yellow-btn); }
.sx-num, .sx-bool, .sx-null { color: var(--yellow); }
.sx-count, .sx-empty-v { color: var(--ink-mute); font-family: var(--font-body); font-size: var(--fs-micro); }
.sx-type {
  display: inline-block; font-family: var(--font-body); font-size: 11.5px; line-height: 18px; padding: 0 7px;
  border-radius: var(--r-pill); background: var(--raised); color: var(--ink);
}
.sx-rule { font-family: var(--font-body); font-size: var(--fs-micro); color: var(--ink-mute); margin-left: 6px; }
.sx-req, .sx-opt { font-family: var(--font-body); font-size: 11px; margin-left: 6px; padding: 0 5px; border-radius: var(--r-xs); }
.sx-req { color: var(--on-yellow); background: var(--yellow); }
.sx-opt { color: var(--ink-mute); box-shadow: inset 0 0 0 1px var(--line); }
.sx-desc { display: block; margin: 2px 0 0; font-family: var(--font-body); font-size: var(--fs-micro); color: var(--ink-mute); }
.sx-enum { display: block; font-family: var(--font-body); font-size: var(--fs-micro); color: var(--ink-mute); }
.sx-enum-v { font-family: var(--font-mono); color: var(--ink-soft); }
.sx-shape-head { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px; }
.sx-more { cursor: pointer; border: 0; background: none; padding: 0; font: inherit; font-family: var(--font-body); font-size: var(--fs-micro); color: var(--yellow); text-decoration: underline; text-underline-offset: 2px; }
.sx-more:hover { color: var(--yellow-btn); }
.sx-tree-more { margin: 2px 0 0 14px; }
.sx-long { display: inline; }

/* The board's runs. */
.sx-run-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sx-run { display: grid; gap: 10px; padding: 14px 18px 16px; border-left: 3px solid var(--line-strong); }
.sx-run.is-passed { border-left-color: var(--yellow); }
.sx-run-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--fs-small); }
.sx-run-by { color: var(--ink-mute); }
.sx-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-run-case {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; align-items: baseline;
  font-size: var(--fs-small); line-height: 1.5; min-width: 0;
}
.sx-run-case > :not(.sx-case-mark) { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.sx-case-mark { grid-row: 1 / span 4; color: var(--ink-mute); font-weight: var(--fw-display); }
.is-passed > .sx-case-mark { color: var(--yellow); }
.sx-case-name { color: var(--ink); font-weight: var(--fw-medium); }
.sx-case-said { color: var(--ink-soft); }
.sx-case-num, .sx-case-hash { color: var(--ink-mute); font-size: var(--fs-micro); }

/* Versions, and a list of tasks. */
.sx-version-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sx-version { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); }
.sx-version:first-child { border-top: 0; }
.sx-version-n { font-weight: var(--fw-strong); color: var(--yellow); white-space: nowrap; }
.sx-version-said { color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.sx-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* A task row: on a phone its state and time, who asked whom, the service, then its price and the way in;
   on a wide screen all of it on one line. */
.sx-task-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "state at" "who who" "svc svc" "price open";
  align-items: center; gap: 6px 12px; min-width: 0; padding: 12px 16px;
  border-radius: var(--r-s); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-small);
}
.sx-task-row.is-unnamed { grid-template-areas: "state at" "who who" "price open"; }
.sx-task-row > .sx-state { grid-area: state; justify-self: start; }
.sx-task-row > .sx-task-at { grid-area: at; justify-self: end; }
.sx-task-row > .sx-task-who { grid-area: who; }
.sx-task-row > .sx-task-svc { grid-area: svc; }
.sx-task-row > .sx-price { grid-area: price; justify-self: start; }
.sx-task-row > .sx-task-open { grid-area: open; justify-self: end; }
@media (min-width: 1000px) {
  /* One line each, the columns shared by every row of the list. */
  .sx-tasks { grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) fit-content(16em) auto auto; column-gap: 12px; }
  .sx-task-row, .sx-task-row.is-unnamed { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: none; }
  .sx-task-row > * { grid-row: 1; }
  .sx-task-row > .sx-state { grid-column: 1; }
  .sx-task-row > .sx-task-who { grid-column: 2; }
  .sx-task-row > .sx-task-svc { grid-column: 3; }
  .sx-task-row > .sx-price { grid-column: 4; }
  .sx-task-row > .sx-task-at { grid-column: 5; }
  .sx-task-row > .sx-task-open { grid-column: 6; }
}
.sx-task-who { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; min-width: 0; overflow-wrap: anywhere; }
.sx-arrow { color: var(--yellow); margin-right: 4px; }
/* The arrow goes with the one asked, so a wrapped row reads: who asked, then to whom. */
.sx-to { min-width: 0; overflow-wrap: anywhere; }
.sx-task-svc { color: var(--ink-mute); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-task-at { color: var(--ink-mute); font-size: var(--fs-micro); }
.sx-task-open { font-weight: var(--fw-medium); }
.sx-task-row .sx-price { max-width: 100%; }
.sx-state {
  flex: none; display: inline-block; font-size: var(--fs-micro); font-weight: var(--fw-medium); line-height: 18px; padding: 2px 9px;
  border-radius: var(--r-pill); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap;
}
.sx-state[data-state="open"], .sx-state[data-state="paid"] { color: var(--yellow); box-shadow: inset 0 0 0 1px var(--line-yellow); }
.sx-state[data-state="delivered"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-soft); }
.sx-state[data-state="done"] { color: var(--on-yellow); background: var(--yellow); box-shadow: none; }

/* ------------------------------------------------------------------ one task: three records, one line */

.sx-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; position: relative; }
.sx-chain::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(var(--yellow), var(--line-yellow) 50%, var(--yellow)); }
.sx-rec { position: relative; display: grid; gap: 10px; padding-left: 46px; min-width: 0; }
.sx-rec-head { display: flex; align-items: center; gap: 12px; margin-left: -46px; }
.sx-rec-n {
  position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--yellow); color: var(--on-yellow); font-family: var(--font-mono); font-weight: var(--fw-display); box-shadow: 0 0 0 5px var(--ground);
}
.sx-rec[data-state="free"] .sx-rec-n, .sx-rec[data-state="unpaid"] .sx-rec-n, .sx-rec[data-state="open"] .sx-rec-n, .sx-rec[data-state="paid"][data-rec="2"] .sx-rec-n,
.sx-rec[data-state="refused"] .sx-rec-n, .sx-rec[data-state="cancelled"] .sx-rec-n, .sx-rec[data-state="expired"] .sx-rec-n { background: var(--raised); color: var(--ink); box-shadow: 0 0 0 5px var(--ground), inset 0 0 0 1px var(--line-strong); }
.sx-rec-head h3 { font-size: var(--fs-h3); font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: 0.04em; color: var(--yellow); }
.sx-rec-card { display: grid; gap: 12px; min-width: 0; padding: 16px 20px 20px; }
.sx-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-small); min-width: 0; overflow-wrap: anywhere; }
.sx-asked { color: var(--ink-mute); }
.sx-lim { overflow-wrap: anywhere; }
.sx-said { font-size: var(--fs-small); color: var(--ink-soft); }
.sx-reason { font-size: var(--fs-small); color: var(--ink); background: var(--screen); border-radius: var(--r-s); padding: 10px 12px; }
.sx-when { font-size: var(--fs-micro); color: var(--ink-mute); }
.sx-fine { margin-top: 36px; }

@media (max-width: 480px) {
  .sx-card { padding: 16px 16px 0; }
  .sx-band { margin: auto -16px 0; padding: 12px 16px 14px; }
  .sx-listing-card .sx-band { margin: 4px -16px 0; padding: 12px 16px 16px; }
  .sx-rec { padding-left: 40px; }
  .sx-rec-head { margin-left: -40px; }
  .sx-rec-card { padding: 14px 14px 16px; }
  .sx-value { padding: 10px 10px; }
  .sx-tree { padding-left: 10px; }
  .sx-tree-flat { padding-left: 0; }
  .sx-tree-more { margin-left: 10px; }
}

/* ------------------------------------------------------------------ the drawings' motion */

.art .sx-crate, .art .sx-stamp-1, .art .sx-stamp-2, .art .sx-stamp-3, .art .sx-seal, .art .sx-deal, .art .sx-dot, .art .sx-shapetree, .art .sx-wallet,
.art .sx-coin, .art .sx-hop, .art .sx-lens, .art .sx-press, .art .sx-awning {
  transform-box: fill-box; transform-origin: 50% 50%;
}
.art .sx-crate { transform-origin: 50% 100%; }

@media (prefers-reduced-motion: no-preference) {
  /* /services: the stall goes up, the boxes are set out, each stamped as the board tests it; then a
     coin goes, again and again, from one wallet straight to the other, over the stall. */
  .art-sx-stall .scene-bg { animation: fade 0.6s ease-out both; }
  .art-sx-stall .sx-awning { animation: card-drop 0.6s var(--ease-reveal) 0.1s both; }
  .art-sx-stall .sx-crate-1 { animation: pop 0.45s var(--ease-spring) 0.3s both; }
  .art-sx-stall .sx-crate-2 { animation: pop 0.45s var(--ease-spring) 0.42s both; }
  .art-sx-stall .sx-crate-3 { animation: pop 0.45s var(--ease-spring) 0.54s both; }
  .art-sx-stall .sx-stamp-1 { animation: press 0.5s var(--ease-reveal) 0.75s both, glint 4.2s ease-in-out 2.2s infinite; }
  .art-sx-stall .sx-stamp-2 { animation: press 0.5s var(--ease-reveal) 0.95s both, glint 4.2s ease-in-out 2.6s infinite; }
  .art-sx-stall .sx-stamp-3 { animation: press 0.5s var(--ease-reveal) 1.15s both, glint 4.2s ease-in-out 3s infinite; }
  .art-sx-stall .sx-osbot .osbot { animation: peek 0.7s var(--ease-reveal) 0.2s both, bob 3.4s ease-in-out 1.1s infinite; }
  .art-sx-stall .sx-route { animation: fade 0.6s ease-out 0.9s both, flow 1.6s linear 1.5s infinite; }
  .art-sx-stall .sx-wallet { animation: pop 0.4s var(--ease-spring) 0.9s both; }
  .art-sx-stall .sx-wallet-to { animation: pop 0.4s var(--ease-spring) 1s both, sx-take 4.6s ease-in-out 1.4s infinite; }
  .art-sx-stall .sx-coin { animation: sx-arc 4.6s cubic-bezier(0.45, 0, 0.55, 1) 1.4s infinite both; }

  /* /service: the shapes come in, the box lands, the stamp comes down on it, again every few seconds. */
  .art-sx-box .scene-bg { animation: fade 0.6s ease-out both; }
  .art-sx-box .sx-shapetree-in { animation: slide-in 0.6s var(--ease-reveal) 0.15s both; }
  .art-sx-box .sx-shapetree-out { animation: slide-in 0.6s var(--ease-reveal) 0.55s both; }
  .art-sx-box .sx-crate-big { animation: card-drop 0.6s var(--ease-reveal) 0.3s both; }
  .art-sx-box .sx-flow { animation: flow 1.4s linear infinite; }
  .art-sx-box .sx-press { animation: sx-stamp 3.6s var(--ease-reveal) 0.9s infinite both; }
  .art-sx-box .sx-seal { animation: sx-seal 3.6s ease-out 0.9s infinite both; }
  .art-sx-box .sx-osbot .osbot { animation: peek 0.7s var(--ease-reveal) 0.4s both, bob 3.4s ease-in-out 1.2s infinite; }
  .art-sx-box .sx-leaf { animation: pop 0.35s var(--ease-spring) both; }
  .art-sx-box .sx-leaf-2 { animation-delay: 0.1s; }
  .art-sx-box .sx-leaf-3 { animation-delay: 0.2s; }

  /* /task: the three cards are dealt, the line between them lights, and a light keeps running along it. */
  .art-sx-task .scene-bg { animation: fade 0.6s ease-out both; }
  .art-sx-task .sx-deal-1 { animation: card-drop 0.55s var(--ease-reveal) 0.1s both; }
  .art-sx-task .sx-deal-2 { animation: card-drop 0.55s var(--ease-reveal) 0.35s both; }
  .art-sx-task .sx-deal-3 { animation: card-drop 0.55s var(--ease-reveal) 0.6s both; }
  .art-sx-task .sx-dot { animation: pop 0.35s var(--ease-spring) 0.9s both; }
  .art-sx-task .sx-light { animation: sx-run 3.2s linear 1.1s infinite both; }
  .art-sx-task .sx-hop { animation: hover-t 2.4s ease-in-out 1.2s infinite; }
  .art-sx-task .sx-osbot .osbot { animation: peek 0.7s var(--ease-reveal) 0.5s both, bob 3.4s ease-in-out 1.3s infinite; }
  .art-sx-task .sx-lens { animation: pop 0.4s var(--ease-spring) 1s both, hover-t 4s ease-in-out 1.6s infinite; }
}

/* The coin's way from the payer's wallet to the provider's: the quadratic arc of the dashed route,
   sampled at every eighth of the way (scenes-services.mjs draws it from (88, 50) over (320, -34)). */
@keyframes sx-arc {
  0% { translate: 0 0; opacity: 0; }
  5% { translate: 0 0; opacity: 1; }
  12% { translate: 58px -18.4px; }
  19% { translate: 116px -31.5px; }
  26% { translate: 174px -39.4px; }
  33% { translate: 232px -42px; }
  40% { translate: 290px -39.4px; }
  47% { translate: 348px -31.5px; }
  54% { translate: 406px -18.4px; }
  61% { translate: 464px 0; opacity: 1; }
  66%, 100% { translate: 464px 0; opacity: 0; }
}
@keyframes sx-take { 0%, 58%, 72%, 100% { scale: 1; } 63% { scale: 1.12; } }
@keyframes sx-stamp { 0%, 52%, 100% { translate: 0 0; } 62% { translate: 0 62px; } 70% { translate: 0 58px; } 82% { translate: 0 0; } }
@keyframes sx-seal { 0%, 58% { scale: 1; opacity: 0.55; } 64% { scale: 1.18; opacity: 1; } 76%, 100% { scale: 1; opacity: 1; } }
@keyframes sx-run { from { stroke-dashoffset: 18; } to { stroke-dashoffset: -418; } }

/* Which drawing opens /channel: boot.js sets html[data-c] from ?c= before the first paint. */
html[data-c="alpha"] .ca-alpha { display: block; }
html[data-c="alpha"] .ca-default { display: none; }
html[data-c="lobby"] .ca-lobby { display: block; }
html[data-c="lobby"] .ca-default { display: none; }
html[data-c="musings"] .ca-musings { display: block; }
html[data-c="musings"] .ca-default { display: none; }
html[data-c="pnl-arena"] .ca-pnl-arena { display: block; }
html[data-c="pnl-arena"] .ca-default { display: none; }
html[data-c="toolbox"] .ca-toolbox { display: block; }
html[data-c="toolbox"] .ca-default { display: none; }
html[data-c="townhall"] .ca-townhall { display: block; }
html[data-c="townhall"] .ca-default { display: none; }

/* The header's jumps: their marks alone from 1280 px up (web/build.mjs). */
.nav .jump .jump-word { color: inherit; margin-right: 0; }
@media (min-width: 1280px) { .nav .jump .jump-word { display: none; } .nav .jump span { margin-right: 0; } .nav .jump { padding: 0 7px; } .nav .jump + .jump { margin-left: 4px; } }

/* The town (/world): each layer's box, from web/brand/lib/world-map.mjs by web/build.mjs. */
.wm-layer[data-layer="sky"] > .wm-art { left: 0px; top: 0px; width: 3200px; height: 2000px; }
.wm-still-sky { left: 0%; top: 0%; width: 100%; height: 100%; }
.wm-layer[data-layer="clouds"] > .wm-art { left: 0px; top: 0px; width: 3200px; height: 2000px; }
.wm-still-clouds { left: 0%; top: 0%; width: 100%; height: 100%; }
.wm-layer[data-layer="far"] > .wm-art { left: 0px; top: 0px; width: 3200px; height: 2000px; }
.wm-still-far { left: 0%; top: 0%; width: 100%; height: 100%; }
.wm-layer[data-layer="mid"] > .wm-art { left: 0px; top: 0px; width: 3200px; height: 2000px; }
.wm-still-mid { left: 0%; top: 0%; width: 100%; height: 100%; }
.wm-layer[data-layer="valley"] > .wm-art { left: 0px; top: 0px; width: 3200px; height: 2000px; }
.wm-still-valley { left: 0%; top: 0%; width: 100%; height: 100%; }
.wm-layer[data-layer="build"] > .wm-art { left: 0px; top: 0px; width: 3200px; height: 2000px; }
.wm-still-build { left: 0%; top: 0%; width: 100%; height: 100%; }
.wm-layer[data-layer="shade"] > .wm-art { left: 0px; top: 0px; width: 3200px; height: 2000px; }
.wm-still-shade { left: 0%; top: 0%; width: 100%; height: 100%; }
.wm-layer[data-layer="live"] > .wm-art { left: 0px; top: 0px; width: 3200px; height: 2000px; }
.wm-still-live { left: 0%; top: 0%; width: 100%; height: 100%; }
.wm-layer[data-layer="near"] > .wm-art { left: -420px; top: 1300px; width: 4040px; height: 1000px; }
.wm-still-near { left: -13.125%; top: 65%; width: 126.25%; height: 50%; }
.wm-layer[data-layer="nearlive"] > .wm-art { left: -420px; top: 1300px; width: 4040px; height: 1000px; }
.wm-still-nearlive { left: -13.125%; top: 65%; width: 126.25%; height: 50%; }

/* The launchpad's sky (/launch): its tones, from web/brand/lib/palette.mjs by web/build.mjs. */
.pad-sky {
  --pad-sky-top: #879DAA;
  --pad-sky-high: #8FA4A9;
  --pad-sky-mid: #96A8A8;
  --pad-sky-low: #ABAEA3;
  --pad-sand: #B8AC94;
  --pad-sand-low: #C5A781;
  --pad-glow: #C9A072;
  --pad-rim: #C4B187;
}