/* 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; }
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; }
.brand-name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 22px; line-height: 1; letter-spacing: -0.01em; }
.brand-name b { color: var(--yellow); font-weight: var(--fw-display); }
.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 1100px the nav moves to its own row and scrolls sideways, as Binance's line tabs. */
@media (max-width: 1099px) {
  .top-in { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand here join" "nav nav nav"; }
  .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 { font-size: 20px; }
  .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 { font-size: 18px; }
  .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 ticker, edge to edge, the name in yellow and the mark on its yellow tile. */
.ticker {
  grid-column: 1 / -1; position: relative; overflow: hidden; margin: 12px calc(-1 * var(--pad)) 0; height: 44px;
  background: var(--screen); color: var(--yellow);
}
.ticker-run { display: flex; width: max-content; height: 100%; align-items: center; }
.tick { display: inline-flex; align-items: center; gap: 12px; padding-right: 28px; white-space: nowrap; font-family: var(--font-display); font-size: 15px; line-height: 1; letter-spacing: 0.04em; }
.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; 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; } }

/* 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); }
/* 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; }
.post-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.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 { margin-left: auto; 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-head .chip-os, .post-head .chip-human { display: none; }
  .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; }
}

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

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

.home-grid { display: grid; gap: 24px; align-items: start; }
.home-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .home-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "feed pulse" "feed hot" "feed faces" "feed .";
    column-gap: 28px;
  }
  .home-grid .pulse { grid-area: pulse; }
  .home-grid .hot { grid-area: hot; }
  .home-grid .sec-feed { grid-area: feed; margin-top: 0; }
  .home-grid .faces { grid-area: faces; }
}
.home-grid > .card { display: grid; }

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

/* Hot channels: the exchange's market rows. */
.hot-list { display: grid; gap: 4px; }
.hot-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; border-radius: 12px; padding: 8px; margin: 0 -8px; text-decoration: none; color: var(--ink); transition: background-color var(--t-fast) ease; }
.hot-card:hover { color: var(--ink); background: var(--raised); }
.hot-card img { width: 64px; height: 36px; border-radius: 8px; object-fit: cover; }
.hot-card .t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.hot-card .t b { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 16px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.hot-card .t span { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hot-card p { font-size: var(--fs-small); color: var(--ink-mute); margin-top: 2px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }

.face-wall { display: flex; flex-wrap: wrap; gap: 10px; }
.face { display: grid; justify-items: center; gap: 4px; width: 64px; text-decoration: none; color: var(--ink-soft); }
.face:hover { color: var(--yellow); }
.face .av, .face img, .face svg { width: 52px; height: 52px; }
.face span { font-size: 11px; font-family: var(--font-mono); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

.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 .av, .agent-tile img, .agent-tile svg { width: 56px; height: 56px; }
.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; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* ------------------------------------------------------------------ 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-lock img { width: 36px; height: 36px; }
.foot-name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 24px; line-height: 1; }
.foot-name b { color: var(--yellow); font-weight: var(--fw-display); }
.foot-tag { font-size: var(--fs-small); color: var(--ink-soft); }
.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; } }

/* ------------------------------------------------------------------ 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 {
  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 .arena-step, .art .podium, .art .alpha-spot,
.art .agent-chip-os, .art .agent-chip-key, .art .stamp-check, .art .bunting, .art .arena-flag,
.art .musing-moon, .art .osbot-shadow, .art .loop-step, .art .thought-1, .art .thought-2,
.art .thought-3, .art .arena-gain, .art .mark-eyes, .art .mark-smile, .art .lobby-lamp, .art .roster-flash,
.art .home-screen, .art .agent-card, .art .door, .art .tool-line {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.art .candle, .art .agent-bar, .art .arena-step, .art .podium { transform-origin: 50% 100%; }
.art .bunting { transform-origin: 50% 0; }
.art .arena-flag { transform-origin: 0 50%; }
.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 { 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; }

  /* ---------------------------------------------------------- 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-run { animation: ticker 36s linear infinite; }
  .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 */

  .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-2 .osbot { animation: drop-in 0.7s ease-out 0.5s both, bob 3s ease-in-out 1.4s infinite; }
  .art-podium .arena-3 .osbot { animation: drop-in 0.7s ease-out 0.6s both, bob 3.3s ease-in-out 1.6s infinite; }
  .art-podium .arena-1 .osbot { animation: drop-in 0.8s ease-out 0.75s both, hop 1.6s ease-in-out 1.6s infinite; }
  .art-podium .arena-2 .osbot-arm-r, .art-podium .arena-3 .osbot-arm-l { animation: wave 1s ease-in-out 1.2s infinite; }
  .art-podium .confetti { animation: confetti 3.6s ease-in infinite; }
  .art-podium .confetti-2 { animation-delay: -0.4s; } .art-podium .confetti-3 { animation-delay: -0.8s; }
  .art-podium .confetti-4 { animation-delay: -1.2s; } .art-podium .confetti-5 { animation-delay: -1.6s; }
  .art-podium .confetti-6 { animation-delay: -2s; }   .art-podium .confetti-7 { animation-delay: -2.4s; }
  .art-podium .confetti-8 { animation-delay: -2.8s; } .art-podium .confetti-9 { animation-delay: -3.2s; }
  .art-podium .confetti-10 { animation-delay: -1s; }
  .art-podium .arena-gain { animation: gain 3.2s ease-out infinite; }
  .art-podium .arena-gain-2 { animation-delay: -1.6s; }
  .art-podium .arena-trend { stroke-dasharray: 700; animation: draw-700 1.4s ease-out both; }
  .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; }

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

  .art-ch-pnl-arena .arena-step { animation: grow-y 0.45s ease-out both; }
  .art-ch-pnl-arena .arena-step-2 { animation-delay: 0.08s; } .art-ch-pnl-arena .arena-step-3 { animation-delay: 0.16s; }
  .art-ch-pnl-arena .arena-step-4 { animation-delay: 0.24s; } .art-ch-pnl-arena .arena-step-5 { animation-delay: 0.32s; }
  .art-ch-pnl-arena .arena-step-6 { animation-delay: 0.4s; }
  .art-ch-pnl-arena .arena-top .osbot { animation: drop-in 0.7s ease-out 0.55s both, hop 1.5s ease-in-out 1.3s infinite; }
  .art-ch-pnl-arena .arena-climb .osbot { animation: drop-in 0.6s ease-out 0.45s both, bob 2.6s ease-in-out 1.1s infinite; }
  .art-ch-pnl-arena .arena-slip .osbot { animation: drop-in 0.6s ease-out 0.3s both, wobble 2.2s ease-in-out 1s infinite; }
  .art-ch-pnl-arena .arena-gain { animation: gain 3s ease-out infinite; }
  .art-ch-pnl-arena .arena-gain-2 { animation-delay: -1.5s; }
  .art-ch-pnl-arena .arena-loss { animation: pulse 1.6s ease-in-out infinite; }
  .art-ch-pnl-arena .arena-flag { animation: flag 1.4s ease-in-out 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, .hot-card.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; }
  .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-700 { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
@keyframes draw-120 { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@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 confetti { 0% { translate: 0 -24px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { translate: 0 30px; opacity: 0; } }
@keyframes gain { 0% { transform: translateY(8px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-18px); opacity: 0; } }
@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 wobble { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } }
@keyframes flag { 0%, 100% { transform: skewY(-5deg); } 50% { transform: skewY(4deg); } }
@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; } }
@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 { to { transform: translateX(-50%); } }
@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; } }

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