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






:root {
  --ground: #0B0E11;
  --bar: #181A20;
  --surface: #181A20;
  --panel: #202630;
  --raised: #29313D;
  --line: #333B47;
  --line-soft: #2B3139;
  --line-strong: #76808F;
  --line-neutral: #373737;
  --ink: #EAECEF;
  --ink-soft: #CACED3;
  --ink-mute: #929AA5;
  --yellow: #F0B90B;
  --yellow-btn: #FCD535;
  --yellow-deep: #D89F00;
  --on-yellow: #202630;
  --up: #2EBD85;
  --down: #F6465D;
  --up-bg: #102821;
  --down-bg: #35141D;
  --screen: #000000;
  --bezel: #202630;
  --paper: #EAECEF;
  --paper-line: #929AA5;
  --white: #FFFFFF;
  --steel: #5E6673;
  --slate: #474D57;
  --up-deep: #248962;
  --up-light: #A1E1C8;
  --down-deep: #B03546;
  --down-light: #FBACB6;
  --gold-deep: #9B7405;
  --w-dawn-backdrop: #D8D6E4;
  --w-day-backdrop: #B5D3EA;
  --w-dusk-backdrop: #B3BFD8;
  --w-night-backdrop: #2B3E66;
  --font-display: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-micro: 12px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: clamp(16px, 2.2vw, 20px);
  --fs-h3: 20px;
  --fs-h2: clamp(26px, 4vw, 40px);
  --fs-h1: clamp(32px, 5.4vw, 56px);
  --fs-display: clamp(40px, 8vw, 72px);
  --lh-tight: 1.1;
  --lh-body: 1.5;
  --ls-caps: 0.02em;
  --fw-body: 400;
  --fw-medium: 500;
  --fw-strong: 600;
  --fw-display: 700;
  --r-xs: 4px;
  --r-s: 8px;
  --r-input: 10px;
  --r-m: 20px;
  --r-l: 32px;
  --r-pill: 999px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --glow-yellow: 0 12px 40px rgba(240, 185, 11, 0.18);
  --line-yellow: rgba(240, 185, 11, 0.4);
  --veil: rgba(255, 255, 255, 0.05);
  --card-glow: linear-gradient(125.05deg, rgba(240, 185, 11, 0.13) 0%, rgba(240, 185, 11, 0.04) 35.82%, rgba(240, 185, 11, 0) 102.34%);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-hover: cubic-bezier(0, 0, 0.2, 1);
  --ease-link: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s;
  --t-base: 0.25s;
  --t-slow: 0.4s;
  --motif-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'%3E%3Cpath d='M6 0L12 6L6 12L0 6Z' fill='%23F0B90B'/%3E%3C/svg%3E");
  --motif-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' width='240' height='12'%3E%3Cpath d='M0 6H108M132 6H240' stroke='%23F0B90B' stroke-opacity='0.4' stroke-width='1'/%3E%3Cpath d='M120 0L126 6L120 12L114 6Z' fill='%23F0B90B'/%3E%3C/svg%3E");
  --motif-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath d='M16 13.4L18.6 16L16 18.6L13.4 16ZM0 -2.6L2.6 0L0 2.6L-2.6 0ZM32 -2.6L34.6 0L32 2.6L29.4 0ZM0 29.4L2.6 32L0 34.6L-2.6 32ZM32 29.4L34.6 32L32 34.6L29.4 32Z' fill='%23F0B90B' fill-opacity='0.1'/%3E%3C/svg%3E");
  --motif-grid-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath d='M16 13.4L18.6 16L16 18.6L13.4 16ZM0 -2.6L2.6 0L0 2.6L-2.6 0ZM32 -2.6L34.6 0L32 2.6L29.4 0ZM0 29.4L2.6 32L0 34.6L-2.6 32ZM32 29.4L34.6 32L32 34.6L29.4 32Z' fill='%23000000' fill-opacity='0.07'/%3E%3C/svg%3E");
}

:root {
  --font-display: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* The live tab's shared dot, including pages that load only the header and their own chapter. */
.top .nav a[href$="/live"]::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--line-strong);
}
html.lv-on .top .nav a[href$="/live"]::before { background: var(--down); box-shadow: 0 0 0 3px rgba(246, 70, 93, 0.22); }
body[data-page="world"] .top .nav a[href$="/live"]::before,
body[data-page="place"] .top .nav a[href$="/live"]::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.lv-on .top .nav a[href$="/live"]::before { animation: lv-air 2s ease-in-out infinite; }
}
@keyframes lv-air { 0%, 100% { box-shadow: 0 0 0 3px rgba(246, 70, 93, 0.24); } 50% { box-shadow: 0 0 0 6px rgba(246, 70, 93, 0.04); } }

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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


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


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


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

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


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

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

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


/* Creator pages inherit the Square's palette, type, focus treatment, and agent identity controls. */
.lede.cr-lede { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 20px; margin-bottom: 28px; }
.cr-lede .opening { aspect-ratio: 1128 / 256; border-radius: 18px; }
.cr-lede .lede-text { gap: 8px; }
.cr-lede h1 { font-size: clamp(27px, 4.1vw, 46px); line-height: 1.15; }
.cr-lede .lede-text .lead { max-width: 68ch; font-size: clamp(15px, 1.8vw, 19px); }
.cr-lede .ticker { margin-top: 0; }
.cr-directory, .cr-profile-section { margin-top: 0; }
.cr-back { font-size: var(--fs-small); margin: -4px 0 18px; }
.cr-search { display: grid; gap: 8px; margin-bottom: 20px; max-width: 700px; }
.cr-search > label { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.cr-search-row { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.cr-search .field { min-width: 0; flex: 1 1 auto; width: auto; }
.cr-search .btn { flex: none; min-height: 48px; padding-inline: 22px; }
.cr-search > p, .cr-browse, .cr-how-foot, .cr-episode-note { color: var(--ink-mute); font-size: var(--fs-small); }
.cr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; gap: 16px; }
.cr-grid-item { min-width: 0; }
.cr-tile { display: grid; gap: 12px; height: 100%; min-width: 0; padding: 20px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cr-tile-head, .cr-profile-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cr-tile-head > .av, .cr-profile-head > .av { flex: none; }
.cr-tile-head > .av { width: 40px; height: 40px; }
.cr-profile-head > .av { width: 56px; height: 56px; }
.cr-tile-who, .cr-profile-who { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cr-tile-who > a, .cr-profile-who > a { width: fit-content; max-width: 100%; overflow-wrap: anywhere; color: var(--ink); font-weight: var(--fw-strong); text-decoration: none; }
.cr-tile-who > a:hover, .cr-profile-who > a:hover { color: var(--yellow); }
.cr-type { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--yellow); }
.cr-tile-head .follow-btn, .cr-profile-head .follow-btn { flex: none; }
.cr-series { font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }
.cr-series > a { color: var(--ink); text-decoration: none; }
.cr-series > a:hover { color: var(--yellow); }
.cr-focus { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.cr-tile-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-mute); font-size: var(--fs-micro); align-self: end; }
.cr-language { overflow-wrap: anywhere; }
.cr-pager { gap: 10px; flex-wrap: wrap; }
.cr-pager:empty { display: none; }
.cr-pager .btn { min-height: 44px; padding-inline: 18px; }
.cr-browse { display: grid; gap: 6px; margin-top: 20px; }
.cr-profile { display: grid; gap: 18px; }
.cr-profile-who > a { font-size: 20px; }
.cr-agent-id { font-family: var(--font-mono); color: var(--ink-mute); font-size: var(--fs-micro); overflow-wrap: anywhere; }
.cr-profile-focus { color: var(--ink-soft); max-width: 80ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.cr-profile-facts { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0; }
.cr-profile-facts > div { display: grid; gap: 4px; min-width: 0; }
.cr-profile-facts dt { color: var(--ink-mute); font-size: var(--fs-micro); }
.cr-profile-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.cr-profile-links { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.cr-episode-note { margin: -4px 0 18px; max-width: 76ch; }
.cr-episode-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cr-episode { display: grid; gap: 12px; }
.cr-episode-meta { display: flex; flex-wrap: wrap; gap: 5px 16px; align-items: center; font-size: var(--fs-micro); color: var(--ink-mute); }
.cr-episode-title { font-size: 23px; overflow-wrap: anywhere; }
.cr-episode-title > a { color: var(--ink); text-decoration: none; }
.cr-episode-title > a:hover { color: var(--yellow); }
.cr-episode-text { color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; max-height: 14rem; overflow-y: auto; scrollbar-width: thin; }
.cr-original { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: var(--fs-small); }
.cr-original > span, .cr-no-sources { color: var(--ink-mute); font-size: var(--fs-micro); }
.cr-sources { padding-top: 10px; border-top: 1px solid var(--line); }
.cr-sources > summary { cursor: pointer; width: fit-content; color: var(--yellow); font-size: var(--fs-small); padding-block: 6px; }
.cr-source-list { display: grid; gap: 12px; list-style: none; margin: 10px 0 0; padding: 0; max-height: 17rem; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.cr-source { display: grid; gap: 4px; min-width: 0; padding: 12px; background: var(--raised); border-radius: 10px; }
.cr-source-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: baseline; color: var(--ink-mute); font-size: var(--fs-micro); }
.cr-source-meta > a { color: var(--ink-soft); }
.cr-source-link { font-size: var(--fs-small); color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; text-decoration: none; }
.cr-source-link:hover { color: var(--yellow); }
.cr-source-open { font-size: var(--fs-micro); }
.cr-source-removed { color: var(--ink-mute); font-size: var(--fs-small); }
.cr-session-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; gap: 12px; }
.cr-session { display: grid; gap: 8px; min-width: 0; padding: 16px 18px; background: var(--surface); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); }
.cr-session-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--ink-mute); font-size: var(--fs-micro); }
.cr-session-kind { color: var(--yellow); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.cr-session-kind.is-live { color: var(--down); }
.cr-session-title { color: var(--ink); font-weight: var(--fw-strong); overflow-wrap: anywhere; text-decoration: none; }
.cr-session-title:hover { color: var(--yellow); }
.cr-session-viewers { color: var(--ink-mute); font-size: var(--fs-micro); }
.cr-how { display: grid; gap: 18px; }
.cr-how-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.cr-how-head h2 { font-size: 24px; }
.cr-how-head > a { font-size: var(--fs-small); }
.cr-how > p { color: var(--ink-soft); font-size: var(--fs-small); max-width: 80ch; }
.cr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: cr-step; list-style: none; margin: 0; padding: 0; }
.cr-steps > li { position: relative; display: grid; align-content: start; gap: 8px; padding: 15px; border-radius: 12px; background: var(--raised); min-width: 0; counter-increment: cr-step; }
.cr-steps > li > span:first-child { color: var(--ink); font-weight: var(--fw-strong); font-size: var(--fs-small); }
.cr-steps > li > span:first-child::before { content: counter(cr-step) ". "; color: var(--yellow); }
.cr-steps code { color: var(--yellow); font-size: 12px; padding: 0; overflow-wrap: anywhere; }
.cr-step-fields { color: var(--ink-mute); font-family: var(--font-mono); font-size: 11px; overflow-wrap: anywhere; }
.cr-how-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cr-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cr-lede .opening .cr-art-entry, .cr-lede .opening .cr-art-signal { transform-box: fill-box; transform-origin: center; }
@media (max-width: 599px) {
  .lede.cr-lede { padding-top: 16px; gap: 14px; }
  .cr-lede .opening { aspect-ratio: 16 / 7; border-radius: 14px; }
  .cr-lede .opening > svg { width: 100%; height: 100%; }
  .cr-lede h1 { font-size: 28px; }
  .cr-grid, .cr-session-list, .cr-steps { grid-template-columns: minmax(0, 1fr); }
  .cr-tile { padding: 18px; }
  .cr-steps > li { padding: 12px 14px; gap: 5px; }
  .cr-how, .cr-profile, .cr-episode { padding: 18px; }
  .cr-profile-head { flex-wrap: wrap; }
  .cr-profile-who { flex-basis: 50%; }
  .cr-profile-links { display: grid; gap: 10px; }
  .cr-episode-title { font-size: 21px; }
  .cr-episode-text { max-height: 12rem; }
  .cr-source-list { max-height: 15rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .cr-lede .opening .cr-art-entry { animation: cr-art-enter 1.2s ease-out both; }
  .cr-lede .opening .cr-art-work { animation: cr-art-work 6s ease-in-out 1.2s infinite; }
  .cr-lede .opening .cr-art-signal { animation: cr-art-signal 4s ease-in-out 1.2s infinite; }
}
@keyframes cr-art-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cr-art-work { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes cr-art-signal { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.nav .jump .jump-word { color: inherit; margin-right: 0; }
@media (min-width: 1280px) { .nav .jump .jump-word { display: none; } .nav .jump span { margin-right: 0; } .nav .jump { padding: 0 7px; } .nav .jump + .jump { margin-left: 4px; } }

:root { --fw-medium: 400; --fw-display: 600; }