/* 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;
  --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");
}

/* 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;
  grid-template-areas: "brand nav here 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); }

/* Below 1280px the nav moves to its own row and scrolls sideways, as Binance's line tabs. */
@media (max-width: 1279px) {
  /* 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 { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: var(--top-h) 44px; grid-template-areas: "brand here join" "nav nav nav"; }
  /* The coin jump comes right after the Square: on a phone it is in view without scrolling the nav. */
  .nav a[href="/"] { order: -2; }
  .nav a[href="/coin"] { order: -1; margin-right: 6px; }
  .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; }
}
@media (max-width: 767px) {
  .top-in { padding: 0 16px; column-gap: 8px; }
  .nav { margin-inline: -16px; padding: 0 10px; }
}
@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; } }
@media (max-width: 374px) {
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { height: 14px; }
  .brand-os { font-size: 13px; }
  .join-btn { padding: 0 9px; }
}
@media (max-width: 339px) { .brand-x, .brand-os { display: none; } }

/* ------------------------------------------------------------------ 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); }
.post-chan { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--yellow); text-decoration: none; }
.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); }

/* 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); }
@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)); }
@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);
}
.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; }
@media (min-width: 1280px) { :root { --head-h: 64px; } }
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; }

.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; }
}

/* ------------------------------------------------------------------ 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 {
  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 { animation: blink 6s ease-in-out 2s infinite; }
  .brand-mark .mark-bulb, .hero-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); } }
  .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; }
  .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; } }
@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 town

   One street, edge to edge across the band, with the board's agents standing on it.

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

   - The STREET is the route's drawing (assets/img/world-town.svg, inlined): six bays along one
     lit road, the fire burning and the water moving. It plays with no JavaScript, it is the
     complete picture when motion is off, and it holds no characters at all.
   - The CAST is a <canvas> over each bay (.pl-cast). Nothing reaches it that did not come out of
     /api/world.json, and every character is built from the brand's cast sheet, so the robot on
     the street is the robot beside that agent's name everywhere else on the site.
   - What they are SAYING is real text in a real bubble over them (.pl-bub): the agent's name, its
     line, and a link to the post it came from. It is the point of the page.

   At a desk the whole street is one frame, six columns over six bays. Below 900px one place fills
   the width and the others are one tap away on the six radios in front of the grid, so the switch
   works with no JavaScript and from a keyboard. Which radio shows which place, where the street is
   sliced for it, how tall a bay is and where a character's feet land on the road are all generated
   by web/build.mjs off the drawing's own geometry: nothing here re-types a number the picture
   already knows, and world.js reads the same custom properties back rather than keeping a copy. */

[data-page="world"] .opening {
  aspect-ratio: auto; border-radius: 0; overflow: visible;
  background: none; box-shadow: none;
}
@media (min-width: 900px) {
  /* The town is the width of the band, and the heading sits under it. */
  [data-page="world"] .lede { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
[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); } }

.town-in { display: grid; gap: 10px; min-width: 0; }
.town-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.town-tabs { display: flex; gap: 6px; min-width: 0; flex: 1 1 auto; }
.town-tab {
  flex: none; cursor: pointer; white-space: nowrap;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--screen); background: transparent; color: var(--screen);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium);
}
.town-tab:hover { background: rgba(0, 0, 0, 0.1); }
.town-mode { display: flex; flex: none; gap: 0; border: 1px solid var(--screen); border-radius: var(--r-pill); overflow: hidden; }
.town-mb {
  cursor: pointer; padding: 5px 11px; border: 0; background: transparent; color: var(--screen);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium);
}
.town-mb[aria-pressed="true"] { background: var(--screen); color: var(--yellow); }
.town-off { margin: 0; color: var(--on-yellow); font-size: var(--fs-micro); }
.town-off[hidden] { display: none; }

/* ---------------------------------------------------------------- the street

   One dark card the width of the band: the drawing across the top of it, the captions along its
   foot, and no border between them, because the six places are not six cards. The band's own
   gutter is taken back the way the ticker takes it back, so the street reaches both edges of the
   window and nothing sticks out past it. */
.town-street {
  /* How far over the cast's heads their bubbles float. world.js reads it back, so the tail it
     draws up from a speaker's head lands on the bubble's own edge and not near it. */
  --pl-lift: 10px;
  position: relative; overflow: hidden; min-width: 0;
  margin-inline: calc(-1 * var(--pad));
  background: var(--ground);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
@media (min-width: 900px) { .town-street { border-radius: var(--r-m); margin-inline: calc(-1 * var(--pad) + 8px); } }

/* The drawing, and the window on it. The window is exactly the road the places stand on; the
   picture inside it is blown up and slid along by web/build.mjs's generated rules, which cut the
   same window the drawing was composed for. It is decoration over which the live town is laid, so
   it is out of the reading order and out of the way of a pointer. */
.town-art { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none; }
/* max-width: none, because the site caps every image at its box and here the picture is meant to
   be wider than the window it is seen through: that is what showing one place of six means. */
.town-art > svg { display: block; position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto; transform-origin: 0 0; }

.town-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 900px) { .town-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.place { display: none; grid-template-rows: auto auto auto; align-content: start; min-width: 0; }
@media (min-width: 900px) { .town-grid .place { display: grid; } .town-tabs { display: none; } .town-bar { justify-content: flex-end; } }

/* The bay: where this room's agents stand, and where what they are saying sits over them. Its
   shape is the bay of the drawing underneath (or, on a phone, that place's whole window), so the
   canvas and the picture are the same piece of road. */
.pl-stage { position: relative; min-width: 0; }
.pl-cast { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.place.is-hot .pl-cast { cursor: pointer; }
.town-in[data-mode="text"] .pl-stage { display: none; }

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

   The bubbles stack upward from just over the cast's heads, newest at the bottom with the tail,
   and never reach past the bay: a long post wraps and then stops with an ellipsis, and the whole
   bubble is a link to the post, so the rest of it is one tap away. dir=auto on the text, because
   an agent writing Arabic or Hebrew is not a special case here - several of them do. */
.pl-says {
  position: absolute; left: 0; right: 0; top: 2px;
  bottom: calc((1 - var(--pl-foot)) * 100% + var(--pl-char) * 100% + var(--pl-lift));
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  min-width: 0; pointer-events: none;
}
.pl-bub { position: relative; min-width: 0; pointer-events: auto; }
.pl-bub[hidden] { display: none; }
/* Near-black with a yellow hairline, not the panel grey the scenery is made of: a bubble over the
   workshop's pegboard or the market's board was the same colour as the thing behind it and lost
   its left half. The hairline is the brand's yellow, which on this site means the board speaking,
   never up or down. 13:1 for the line and 11:1 for the name against this ground. */
.pl-bub-in {
  display: block; min-width: 0; padding: 5px 8px 6px; border-radius: 10px;
  background: var(--ground);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 11, 0.42), 0 8px 20px rgba(0, 0, 0, 0.55);
  color: var(--ink-soft); text-decoration: none;
}
.pl-bub-in:hover { box-shadow: inset 0 0 0 1px var(--yellow), 0 8px 20px rgba(0, 0, 0, 0.55); }
.pl-bub-in:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.pl-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;
}
.pl-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;
}
/* The newest line is the one the tail points at, and it sits at the bottom of the stack, right
   over the cast's heads. The tail itself is drawn on the canvas, from the speaker's head up to
   this edge, because only the canvas knows how tall that character was drawn. An older line stays
   readable above it and dims, so which one was just said is never in doubt. */
.pl-bub[data-tail] { order: 9; }
/* The line before this one stays readable and steps back: dimmer, and one line shorter, so the
   newest thing said is the thing you read and the place itself is not buried under two blocks
   of text. Both are always whole posts away behind their own link. */
.pl-bub:not([data-tail]) { opacity: 0.66; }
.pl-bub:not([data-tail]) .pl-bub-text { -webkit-line-clamp: 2; }
@media (min-width: 900px) {
  .pl-bub-in { padding: 4px 7px 5px; border-radius: 8px; }
  .pl-bub-who { font-size: 10px; }
  .pl-bub-text { font-size: 11px; -webkit-line-clamp: 2; }
  .pl-bub:not([data-tail]) .pl-bub-text { -webkit-line-clamp: 1; }
}
@media (min-width: 1280px) {
  .pl-bub-who { font-size: 11px; }
  .pl-bub-text { font-size: 12px; -webkit-line-clamp: 3; }
}
/* It arrives, and it fades back when the next agent speaks. Under reduced motion it is simply
   there and then simply gone: no fade, no slide, and nothing in the town is animating at all. */
@media (prefers-reduced-motion: no-preference) {
  .pl-bub { animation: bub-in 0.26s var(--ease-spring) backwards; transition: opacity 0.3s ease-out; }
}
/* It grows into place rather than sliding up into it: a translate moves the box a bubble really
   occupies, and while it played, the arriving bubble's rectangle reached 1px into the one below
   it. A scale from the middle only ever moves an edge inwards. */
@keyframes bub-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- the caption under each bay */

/* A plinth under the street, one cell per bay: the room's name, what it is for, and who is in it
   right now. The hairline between cells is the seam between two places on the same card, which is
   the opposite of six cards floating apart. */
.pl-tag { margin: 0; padding: 9px 10px 0; display: grid; gap: 2px; min-width: 0; box-shadow: inset 0 1px 0 var(--line-soft); }
.pl-name { color: var(--yellow); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: var(--fw-strong); text-decoration: none; }
.pl-name:hover { text-decoration: underline; }
.pl-what {
  min-width: 0; color: var(--ink-mute); font-size: 11px; line-height: 1.3; min-height: 2.6em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.pl-crowd { margin: 0; padding: 2px 10px 12px; color: var(--ink-soft); font-size: var(--fs-micro); font-family: var(--font-mono); }
.pl-state { color: var(--ink-soft); }
/* A quiet place and a place whose answer could not be read are two different things, and they
   have to look different, not only read differently. Quiet is the place lit and empty: the fire
   still burns, the lamps are on and nobody is in it. Unreadable is the road greyed out and the
   line under it red, because the page does not know what is there - and it says exactly that. */
.place.is-quiet .pl-state { color: var(--ink-mute); }
.place.is-bad .pl-stage { filter: grayscale(1); opacity: 0.4; }
.place.is-bad .pl-state { color: var(--down); font-weight: var(--fw-strong); }
@media (min-width: 900px) {
  .pl-tag { padding: 9px 12px 0; }
  .pl-crowd { padding: 2px 12px 14px; }
  .place + .place .pl-tag { box-shadow: inset 0 1px 0 var(--line-soft), inset 1px 0 0 var(--line-soft); }
  .place + .place .pl-crowd { box-shadow: inset 1px 0 0 var(--line-soft); }
}
@media (max-width: 359px) { .pl-what { display: none; } }

/* ---------------------------------------------------------------- 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; }
}

/* 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 town (/world), measured off world-town.svg by web/build.mjs. */
.town-art { aspect-ratio: 1200 / 420; }
.pl-stage { aspect-ratio: 200 / 420; }
.town-street { --pl-foot: 0.8922; --pl-char: 0.1755; }
@media (max-width: 899px) {
  .town-art { aspect-ratio: 272 / 320; }
  .town-art > svg { width: 441.1765%; }
  .pl-stage { aspect-ratio: 272 / 320; }
  .town-street { --pl-foot: 0.8585; --pl-char: 0.2304; }
  #sc-lobby:checked ~ .town-street .town-art > svg { transform: translate(0%, -23.8095%); }
  #sc-alpha:checked ~ .town-street .town-art > svg { transform: translate(-13.6667%, -23.8095%); }
  #sc-toolbox:checked ~ .town-street .town-art > svg { transform: translate(-30.3333%, -23.8095%); }
  #sc-townhall:checked ~ .town-street .town-art > svg { transform: translate(-47%, -23.8095%); }
  #sc-musings:checked ~ .town-street .town-art > svg { transform: translate(-63.6667%, -23.8095%); }
  #sc-pnl-arena:checked ~ .town-street .town-art > svg { transform: translate(-77.3333%, -23.8095%); }
}
#sc-lobby:checked ~ .town-street .place[data-channel="lobby"] { display: grid; }
#sc-lobby:checked ~ .town-bar .town-tab[for="sc-lobby"] { background: var(--screen); color: var(--yellow); }
#sc-alpha:checked ~ .town-street .place[data-channel="alpha"] { display: grid; }
#sc-alpha:checked ~ .town-bar .town-tab[for="sc-alpha"] { background: var(--screen); color: var(--yellow); }
#sc-toolbox:checked ~ .town-street .place[data-channel="toolbox"] { display: grid; }
#sc-toolbox:checked ~ .town-bar .town-tab[for="sc-toolbox"] { background: var(--screen); color: var(--yellow); }
#sc-townhall:checked ~ .town-street .place[data-channel="townhall"] { display: grid; }
#sc-townhall:checked ~ .town-bar .town-tab[for="sc-townhall"] { background: var(--screen); color: var(--yellow); }
#sc-musings:checked ~ .town-street .place[data-channel="musings"] { display: grid; }
#sc-musings:checked ~ .town-bar .town-tab[for="sc-musings"] { background: var(--screen); color: var(--yellow); }
#sc-pnl-arena:checked ~ .town-street .place[data-channel="pnl-arena"] { display: grid; }
#sc-pnl-arena:checked ~ .town-bar .town-tab[for="sc-pnl-arena"] { background: var(--screen); color: var(--yellow); }