/* Generated by scripts/build-site.js - do not edit by hand. */

/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — the single source of truth for every colour, space and radius.

   The look is "flat black": one theme, #050505 canvas, solid #0a0a0a surfaces,
   1px white-alpha hairlines, no blur and no translucent panes anywhere. Depth
   comes from those hairlines and from whites, not from material or gradients.

   There is deliberately no light theme and no theme toggle — the site is dark
   only, like the reference it follows. `scripts/check-site.js` fails the build
   if a light block, a backdrop-filter or any of the old glass tokens return.

   --accent is a *hairline* accent now (focus rings, active nav, status dots,
   inline code), not a theme. It is fixed here and never derived from the bot.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── canvas ──────────────────────────────────────────────────────── */
    --bg: #050505;
    --bg-1: #0a0a0a;
    --bg-2: #111111;

    /* ── surfaces — solid, never translucent ─────────────────────────── */
    --surface: #0a0a0a;
    --surface-2: #141414;
    --surface-3: #1e1e1e;
    --well: #0d0d0d;

    /* ── hairlines ───────────────────────────────────────────────────── */
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .14);
    --line-3: rgba(255, 255, 255, .22);

    /* ── ink ─────────────────────────────────────────────────────────── */
    --text: #f5f5f5;
    --muted: rgba(245, 245, 245, .66);
    --dim: rgba(245, 245, 245, .44);

    /* ── primary action — inverted white on black ────────────────────── */
    --primary: #f5f5f5;
    --primary-hover: #ffffff;
    --on-primary: #050505;

    /* ── accent — hairline only ──────────────────────────────────────── */
    --accent: #8b5cf6;
    --accent-rgb: 139, 92, 246;
    --accent-2: #a855f7;
    --accent-3: #c084fc;
    --accent-soft: rgba(139, 92, 246, .12);
    --accent-line: rgba(139, 92, 246, .34);
    --on-accent: #fff;

    /* ── status ──────────────────────────────────────────────────────── */
    --green: #22c55e;
    --green-soft: rgba(34, 197, 94, .13);
    --green-ink: #7fe0a3;
    --amber: #f5a524;
    --amber-soft: rgba(245, 165, 36, .13);
    --amber-ink: #ffca7a;
    --blue: #5865f2;
    --blue-soft: rgba(88, 101, 242, .14);
    --blue-ink: #aab2ff;
    --danger: #f43f5e;
    --danger-soft: rgba(244, 63, 94, .14);
    --danger-line: rgba(244, 63, 94, .42);
    --danger-ink: #ffc9d3;

    /* ── geometry — breed.rip's 8/16/24 scale ────────────────────────── */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 24px;
    --r-pill: 999px;

    --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --shadow: 0 26px 70px rgba(0, 0, 0, .7);
    --shadow-sm: 0 10px 26px rgba(0, 0, 0, .5);
    /* The one piece of "light" left: the soft white bloom under a primary button. */
    --glow: 0 18px 40px -10px rgba(255, 255, 255, .2);

    /* Strong ease-out: the first frame moves, so every interaction feels answered.
       `--ease-in-out` is for things that travel across the screen. */
    --ease: cubic-bezier(.23, 1, .32, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --wrap: 1180px;
    --header-h: 62px;

    --ring: 0 0 0 3px rgba(255, 255, 255, .2);
    color-scheme: dark;
}

/* Light theme. Same solid surfaces and hairlines, inverted ink. Chosen by the
   theme switch in the header (web/js/theme.js); dark stays the default. */
:root[data-theme="light"] {
    --bg: #f7f7f5;
    --bg-1: #ffffff;
    --bg-2: #efefec;
    --surface: #ffffff;
    --surface-2: #f2f2ef;
    --surface-3: #e8e8e4;
    --well: #f4f4f1;
    --line: rgba(0, 0, 0, .08);
    --line-2: rgba(0, 0, 0, .14);
    --line-3: rgba(0, 0, 0, .22);
    --text: #111111;
    --muted: rgba(17, 17, 17, .7);
    --dim: rgba(17, 17, 17, .5);
    --primary: #111111;
    --primary-hover: #000000;
    --on-primary: #ffffff;
    --shadow: 0 22px 60px rgba(0, 0, 0, .12);
    --shadow-sm: 0 8px 22px rgba(0, 0, 0, .08);
    --glow: 0 18px 40px -12px rgba(0, 0, 0, .25);
    --ring: 0 0 0 3px rgba(0, 0, 0, .18);
    color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════════════
   base.css — reset, page canvas, typography and layout primitives.

   The canvas is a single flat black sheet: no aurora, no grid, no overlays. The
   page is black, surfaces are solid #0a0a0a, and every edge is a 1px hairline.

   Rule kept from the previous skin: never give a positioned decoration negative
   left/right insets. A bloom wider than the viewport let mobile browsers pan
   sideways by 25px at 420px wide.
   ═══════════════════════════════════════════════════════════════════════════ */

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

* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
    -webkit-text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.62 var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

code, kbd, samp, .mono { font-family: var(--mono); }

::selection { background: rgba(var(--accent-rgb), .32); color: var(--text); }

:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

h1, h2, h3, h4 { letter-spacing: -.028em; line-height: 1.12; font-weight: 800; }
/* The reference's headline: oversized, maximum weight, very tight tracking. */
h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 900; line-height: 1.02; letter-spacing: -.05em; }
h2 { font-size: clamp(23px, 3.2vw, 34px); }
h3 { font-size: 18px; }

p { color: var(--muted); }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 clamp(18px, 4vw, 28px);
    position: relative;
    z-index: 1;
}

main { flex: 1 0 auto; position: relative; z-index: 1; }

.section { padding: clamp(46px, 7vw, 88px) 0; }
.section + .section { border-top: 1px solid var(--line); }

/*
 * One base size for every inline sprite. An <svg> with no width or height falls
 * back to its 300x150 default, so a single unsized icon (`icon()` emits
 * `<svg class="ico">`) blows the whole block apart - which is exactly what
 * happened to every eyebrow when the theme was rewritten.
 */
svg.ico { width: 16px; height: 16px; flex: none; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
}
.eyebrow svg.ico { width: 13px; height: 13px; }

.head { max-width: 720px; margin-bottom: 30px; }
.head h2 { margin: 12px 0 10px; }
.head p { font-size: 16px; }

.lead { font-size: clamp(15px, 1.8vw, 18px); color: var(--muted); }

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: 12px;
    top: -70px;
    z-index: 60;
    background: var(--primary);
    color: var(--on-primary);
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-weight: 700;
    transition: top .16s var(--ease);
}
.skip:focus { top: 12px; }

.stack { display: grid; gap: 14px; }
.grid { display: grid; gap: 16px; }
.grid.k2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.k3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.k4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.muted { color: var(--muted); }
.dim { color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   components.css — reusable UI: header, buttons, cards, tables, drawer, footer.

   Everything is a solid black pane: `--surface` fill, a 1px white-alpha border,
   a generous radius and nothing else. There is no blur, no translucency and no
   gradient anywhere in this file — depth is the hairline.

   Buttons are fully rounded (pill) by default; the big page CTAs use `--r-lg`.
   The primary action is inverted white-on-black, exactly like the reference.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.site-head .wrap { display: flex; align-items: center; gap: 18px; width: 100%; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.03em; font-size: 16.5px; }
.brand img, .brand .logo {
    width: 32px; height: 32px; border-radius: var(--r-sm);
    border: 1px solid var(--line); object-fit: cover;
    background: var(--bg-2);
}

.nav-links { display: flex; align-items: center; gap: 3px; margin-left: 6px; }
.nav-links a {
    padding: 8px 14px; border-radius: var(--r-pill); color: var(--dim);
    font-size: 13px; font-weight: 700; transition: background .16s, color .16s;
}
.nav-links a:hover { background: var(--surface-2); color: var(--text); }
.nav-links a.active { color: var(--text); background: rgba(255, 255, 255, .1); }

.head-tools { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* ── theme switch: a segmented pill, solid surfaces only ─────────────────── */
.theme-switch {
    display: inline-flex; padding: 3px; gap: 2px;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
}
.theme-btn {
    padding: 6px 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700;
    color: var(--dim); transition: background .16s, color .16s;
}
.theme-btn:hover { color: var(--text); }
.theme-btn[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
@media (max-width: 520px) { .theme-switch { display: none; } }

.icon-btn {
    display: grid; place-items: center; width: 38px; height: 38px;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--surface); color: var(--muted);
    transition: background .16s, color .16s, border-color .16s, transform .16s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 17px; height: 17px; }

.nav-toggle { display: none; }
.nav-toggle span { width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.mobile-nav { display: none; }

/* ── buttons — fully rounded, flat ──────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: var(--r-pill); padding: 11px 21px; font-size: 14px; font-weight: 700;
    color: var(--text); background: var(--surface); border: 1px solid var(--line);
    white-space: nowrap; cursor: pointer;
    transition: transform .16s var(--ease), background .16s, border-color .16s, box-shadow .2s, color .16s;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-2); }
/* Press feedback everywhere: the control answers the finger or click at once. */
.btn:active { transform: scale(.97); }
.btn svg { width: 16px; height: 16px; }
.btn.primary {
    color: var(--on-primary); background: var(--primary); border-color: transparent;
    font-weight: 900; box-shadow: var(--glow);
}
.btn.primary:hover { background: var(--primary-hover); border-color: transparent; }
.btn.ghost { background: rgba(255, 255, 255, .03); border-color: var(--line); color: rgba(255, 255, 255, .7); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }
/* Discord keeps its glyph, not its blurple: the theme is monochrome, so this is
   the same white-on-black as `.btn.primary` with a touch more height. */
.btn.discord { background: var(--primary); border-color: transparent; color: var(--on-primary); font-weight: 900; padding: 13px 24px; }
.btn.discord:hover { background: var(--primary-hover); border-color: transparent; }
.btn.danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.btn.danger:hover { background: rgba(244, 63, 94, .2); border-color: var(--danger); color: #fff; }
.btn.sm { padding: 7px 15px; font-size: 13px; }
/* The one oversized CTA in the reference: 16px radius, 20/40 padding, black on white. */
.btn.xl { border-radius: var(--r-lg); padding: 20px 40px; font-size: 16px; font-weight: 900; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* A request in flight: the label stays put (no layout jump) and a ring spins
   beside it. Set `aria-busy="true"` and the button is inert while it runs. */
.btn[aria-busy="true"] { pointer-events: none; color: transparent; position: relative; }
.btn[aria-busy="true"] > * { visibility: hidden; }
.btn[aria-busy="true"]::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; color: var(--text);
    animation: spin .7s linear infinite;
}
.btn.primary[aria-busy="true"]::after { color: var(--on-primary); }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-link { color: var(--accent-3); font-weight: 600; }
.btn-link:hover { text-decoration: underline; }

/* ── pills / badges ─────────────────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line); background: var(--surface);
    border-radius: var(--r-pill); padding: 5px 13px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.pill.green .dot { background: var(--green); }
.pill.amber .dot { background: var(--amber); }
.pill.plain .dot { display: none; }
/* The highlight pill from the reference: solid white on black, weight 900. The
   accent is a hairline only, so a badge never tints a surface violet. */
.pill.accent { border-color: transparent; background: var(--primary); color: var(--on-primary); font-weight: 900; }
.pill.accent .dot { background: var(--on-primary); }
.pill.on { border-color: rgba(34, 197, 94, .4); background: var(--green-soft); color: var(--green-ink); }
.pill.off { color: var(--dim); }
.pill.warn { border-color: rgba(245, 165, 36, .4); background: var(--amber-soft); color: var(--amber-ink); }
.pill.blue { border-color: rgba(88, 101, 242, .45); background: var(--blue-soft); color: var(--blue-ink); }

.tag { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

/* ── cards ──────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: 22px;
}
.card.pad-lg { padding: 28px; }
.card h3 { margin-bottom: 6px; }
.card p { font-size: 14px; }
a.card { transition: border-color .18s, transform .22s var(--ease), background .18s; }
a.card:active { transform: scale(.985); }
a.card:hover { border-color: var(--line-3); background: var(--surface-2); }

.feature-card .ico {
    width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line); color: var(--text);
    margin-bottom: 14px;
}
.feature-card .ico svg { width: 21px; height: 21px; }

/* The reference's "most popular feature" flag: a badge that labels the card
   without tinting it — solid surface, hairline, uppercase micro-type. */
.card-badge {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line-2); background: var(--surface-2);
    border-radius: var(--r-pill); padding: 4px 11px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 13px;
}
.card-badge svg.ico { width: 12px; height: 12px; color: var(--accent-3); }
a.card.featured { border-color: var(--line-3); background: var(--surface-2); }

/* Every feature card makes the same promise, so the action is quiet type that
   slides on hover rather than a second button competing with the card itself. */
.card-action {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 15px; font-size: 13px; font-weight: 750; color: var(--text);
}
.card-action svg.arw { width: 15px; height: 15px; transition: transform .18s var(--ease); }
a.card:hover .card-action svg.arw { transform: translateX(4px); }

.stat {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface);
    padding: 17px;
}
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
.stat .v.small { font-size: 17px; }

/* ── code ───────────────────────────────────────────────────────────────── */
pre, .code {
    font-family: var(--mono); font-size: 13px; line-height: 1.6;
    background: var(--well); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 15px 17px; overflow-x: auto;
}
code:not(pre code) {
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    color: var(--accent-3);
    border-radius: var(--r-sm); padding: 1px 7px; font-size: .88em;
}
kbd {
    font-family: var(--mono); font-size: 11.5px; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--line);
    border-bottom-width: 2px; border-radius: var(--r-sm); padding: 1px 7px;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }
.cmd-text { color: var(--accent-3); }

/* ── tables ─────────────────────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface);
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--dim); padding: 11px 14px; border-bottom: 1px solid var(--line-2); font-weight: 700;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255, 255, 255, .03); }

/* ── chips / tabs ───────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill);
    padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
    transition: background .16s, color .16s, border-color .16s, transform .16s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-2); background: var(--surface-2); }
.chip:active { transform: scale(.96); }
.chip.on { background: rgba(255, 255, 255, .1); border-color: var(--line-3); color: var(--text); }
.chip .n { color: var(--dim); font-family: var(--mono); font-size: 11px; }

.tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs button {
    border: 1px solid var(--line); background: var(--surface); color: var(--muted);
    border-radius: var(--r-pill); padding: 7px 15px; font-size: 13px; font-weight: 600;
    transition: background .16s, color .16s, border-color .16s;
}
.tabs button:hover { color: var(--text); border-color: var(--line-2); background: var(--surface-2); }
.tabs button.on { background: rgba(255, 255, 255, .1); border-color: var(--line-3); color: var(--text); }

/* ── forms ──────────────────────────────────────────────────────────────── */
input[type="text"], input[type="search"], input[type="number"], input[type="url"], select, textarea {
    width: 100%; background: var(--well); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 11px 14px; font-size: 14px; outline: none;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-2); }
input:focus, select:focus, textarea:focus { border-color: var(--line-3); box-shadow: var(--ring); }
textarea { min-height: 110px; resize: vertical; font-family: var(--mono); font-size: 13px; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.field .sub { color: var(--dim); font-size: 11.5px; font-weight: 400; }

.search-box { position: relative; flex: 1; min-width: 240px; }
.search-box svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--dim); }
.search-box input { padding-left: 42px; border-radius: var(--r-pill); }

.switch {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface);
}
.switch .label { font-size: 13.5px; font-weight: 600; }
.switch .label small { display: block; color: var(--dim); font-size: 11.5px; font-weight: 400; }

/* Progress bar for the Mass DM panel. The dashboard bundle does not include
   pages.css, so this is its own rule rather than a reuse of `.progress` there. */
.meter { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--primary); transition: width .4s ease; }
.switch input { appearance: none; width: 44px; height: 24px; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--line); position: relative; cursor: pointer; flex: none; transition: background .16s; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--dim); transition: transform .16s, background .16s; }
.switch input:checked { background: var(--primary); border-color: transparent; }
.switch input:checked::after { transform: translateX(20px); background: var(--on-primary); }

/* ── hint text ──────────────────────────────────────────────────────────── */
/* Shared by the public pages and the dashboard: small print under a stat or
   control. `.warn` marks a value that came from the build snapshot rather than
   the live bot, so stale numbers are visible at a glance. */
.hint { color: var(--dim); font-size: 12.5px; }
.hint.warn { color: var(--amber-ink); }

/* ── empty / skeleton ───────────────────────────────────────────────────── */
.empty { border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 32px; text-align: center; color: var(--dim); font-size: 14px; }
/* A flat placeholder that breathes in opacity - no gradient, so the page stays
   flat black even while it loads. */
.skeleton { border-radius: var(--r-sm); background: var(--surface-3); animation: sk 1.4s ease-in-out infinite; height: 14px; margin: 8px 0; }
@keyframes sk { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Lift-on-hover only where a mouse can hover: a tap on a touch screen fires a
   sticky :hover, which would leave every card floating after it was tapped. */
@media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-1px); }
    .icon-btn:hover { transform: translateY(-1px); }
    .chip:hover { transform: translateY(-1px); }
    a.card:hover { transform: translateY(-3px); }
}

/* ── scroll reveal ──────────────────────────────────────────────────────── */
/* Only when scripts can run: a no-JS visitor (and a crawler) always sees every
   element. `site.js` adds `.is-in` as each block enters the viewport, and
   `--i` staggers a row of siblings by 60ms each. */
@media (scripting: enabled) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .55s var(--ease), transform .55s var(--ease);
        transition-delay: calc(var(--i, 0) * 60ms);
    }
    [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ── callout ────────────────────────────────────────────────────────────── */
.callout {
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    background: var(--surface); border-radius: var(--r-md); padding: 15px 17px; font-size: 14px; color: var(--muted);
}
.callout.green { border-left-color: var(--green); }
.callout.amber { border-left-color: var(--amber); }
.callout.danger { border-left-color: var(--danger); }

/* ── breadcrumbs ────────────────────────────────────────────────────────── */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); margin-bottom: 16px; }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { opacity: .5; }

/* ── accordion ──────────────────────────────────────────────────────────── */
details.acc {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); margin-bottom: 10px;
}
details.acc summary { cursor: pointer; padding: 16px 19px; font-weight: 650; font-size: 14.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; color: var(--dim); font-size: 18px; }
details.acc[open] summary::after { content: "–"; }
details.acc[open] { border-color: var(--line-3); }
details.acc .body { padding: 0 19px 17px; color: var(--muted); font-size: 14px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot {
    border-top: 1px solid var(--line); margin-top: auto; position: relative; z-index: 1;
    background: var(--bg);
}
.site-foot .wrap { padding-top: 46px; padding-bottom: 34px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; }
.foot-brand p { font-size: 13.5px; margin-top: 12px; max-width: 34ch; }
.foot-col h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--dim); margin-bottom: 12px; font-weight: 700; }
.foot-col a { display: block; color: var(--muted); font-size: 13.5px; padding: 4px 0; }
.foot-col a:hover { color: var(--text); }
.foot-bottom { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 20px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); }

@media (max-width: 820px) {
    .nav-links { display: none; }
    .nav-toggle { display: grid; }
    .mobile-nav {
        position: fixed; inset: var(--header-h) 0 auto 0; z-index: 39;
        background: var(--bg-1);
        border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r-xl) var(--r-xl);
        padding: 12px clamp(18px, 4vw, 28px) 20px; display: none;
        flex-direction: column; gap: 2px; box-shadow: var(--shadow);
    }
    .mobile-nav.open { display: flex; }
    .mobile-nav a { padding: 12px 14px; border-radius: var(--r-pill); color: var(--muted); font-weight: 600; font-size: 15px; }
    .mobile-nav a.active, .mobile-nav a:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
    .mobile-nav .btn { margin-top: 8px; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .foot-grid { grid-template-columns: 1fr; }
}

/* ── sidebar nav: the desktop navigation lives in a left rail, not the top bar ── */
.side-nav {
    position: fixed; top: var(--header-h); left: 0; bottom: 0; width: 212px;
    padding: 22px 14px; overflow-y: auto;
    background: var(--bg); border-right: 1px solid var(--line); z-index: 30;
}
.side-links { display: flex; flex-direction: column; gap: 2px; }
.side-links a {
    display: block; padding: 9px 12px; border-radius: var(--r-md);
    color: var(--dim); font-size: 14px; font-weight: 600; transition: background .16s, color .16s;
}
.side-links a:hover { background: var(--surface-2); color: var(--text); }
.side-links a.active { color: var(--text); background: var(--surface-3); }
main, .site-foot { margin-left: 212px; }
@media (max-width: 820px) {
    .side-nav { display: none; }
    main, .site-foot { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   pages.css — layout for individual pages: hero, explorer, docs, status, config,
   and the /servers marquee.

   Same rules as components.css: solid surfaces, hairlines, no blur, no gradient.
   The hero is flat black with a single hairline underneath — no bloom layer, and
   never a positioned decoration with negative side insets (that caused 25px of
   horizontal overflow at 420px wide).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero {
    padding: clamp(56px, 9vw, 112px) 0 clamp(40px, 6vw, 72px);
    position: relative;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.hero h1 { margin: 18px 0 16px; }
.hero h1 .accent { color: var(--text); }
.hero .lead { max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; font-size: 13px; color: var(--dim); }
.hero-meta b { color: var(--text); font-weight: 700; }

/* The live-count line under the hero CTAs. Quiet on purpose: the numbers are the
   message, so the chrome around them is one dot and one hairline of colour. */
.hero-proof { display: flex; align-items: center; gap: 9px; margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.hero-proof[hidden] { display: none; }
.hero-proof b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
    70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* A counting number must not reflow its box, so the live figures are tabular. */
.stat .v, .spread .hint b { font-variant-numeric: tabular-nums; }
.spread .hint b { color: var(--text); }

/* The social-proof band: the wall is the argument, so the heading sits closer. */
.proof .head { margin-bottom: 26px; }

.terminal {
    position: relative;
    border: 1px solid var(--line); border-radius: var(--r-xl);
    background: var(--bg-1);
    overflow: hidden;
}
.terminal-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.terminal-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-3); }
.terminal-bar i:nth-child(1) { background: #ff5f57; }
.terminal-bar i:nth-child(2) { background: #febc2e; }
.terminal-bar i:nth-child(3) { background: var(--accent-2); }
.terminal-bar span { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.terminal-body {
    padding: 18px; font-family: var(--mono); font-size: 13px; line-height: 1.9; min-height: 260px;
    background: var(--well);
}
.terminal-body .line { display: flex; gap: 8px; }
.terminal-body .in { color: var(--accent-3); }
.terminal-body .out { color: var(--muted); }
.terminal-body .ok { color: var(--green); }
.cursor {
    display: inline-block; width: 9px; height: 15px; background: var(--text);
    border-radius: 2px; vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── live stats strip ───────────────────────────────────────────────────── */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat-note { margin-top: 12px; font-size: 12px; color: var(--dim); }

/* ── explorer (commands) ────────────────────────────────────────────────── */
.explorer-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cmd {
    border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
    padding: 15px; cursor: pointer; text-align: left; width: 100%;
    transition: border-color .18s, background .18s, transform .18s var(--ease);
}
.cmd:hover { border-color: var(--line-3); background: var(--surface-2); transform: translateY(-2px); }
.cmd .top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.cmd .name { font-family: var(--mono); font-weight: 600; font-size: 13.5px; color: var(--text); }
.cmd .cat { margin-left: auto; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.cmd .desc { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmd .aliases { margin-top: 8px; font-size: 11px; color: var(--dim); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.load-more { text-align: center; margin-top: 22px; }

/* ── drawer ─────────────────────────────────────────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.drawer-panel {
    position: absolute; top: 0; right: 0; height: 100%; width: min(560px, 100%);
    background: var(--bg-1);
    border-left: 1px solid var(--line); border-radius: var(--r-2xl) 0 0 var(--r-2xl);
    box-shadow: var(--shadow);
    display: flex; flex-direction: column;
    animation: slide-in .22s var(--ease);
}
@keyframes slide-in { from { transform: translateX(24px); opacity: .4; } }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 19px 21px; border-bottom: 1px solid var(--line); }
.drawer-head .idx { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.drawer-close { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--muted); }
.drawer-close:hover { color: var(--text); background: var(--surface-2); border-color: var(--line-2); }
.drawer-body { padding: 21px; overflow-y: auto; }
.drawer-title { font-family: var(--mono); font-size: 20px; margin-bottom: 14px; }
.drawer-body .kv { margin: 16px 0; }
.drawer-body .kv .k { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); margin-bottom: 6px; }

/* ── features index ─────────────────────────────────────────────────────── */
.feature-hero { padding: clamp(40px, 6vw, 70px) 0 20px; }
.bullets { display: grid; gap: 12px; }
.bullets li { list-style: none; display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--muted); }
.bullets li svg { width: 18px; height: 18px; color: var(--dim); flex: none; margin-top: 3px; }
.bullets li b { color: var(--text); font-weight: 650; }

/* ── docs layout ────────────────────────────────────────────────────────── */
.docs-layout { display: grid; grid-template-columns: 258px 1fr; gap: clamp(24px, 4vw, 48px); padding: clamp(30px, 5vw, 56px) 0; align-items: start; }
.docs-side {
    position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto;
    padding: 14px; border: 1px solid var(--line); border-radius: var(--r-xl);
    background: var(--surface);
}
.docs-side .group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin: 16px 0 8px; padding-left: 4px; font-weight: 700; }
.docs-side .group:first-child { margin-top: 2px; }
.docs-side a { display: block; padding: 7px 12px; border-radius: var(--r-pill); color: var(--muted); font-size: 13.5px; }
.docs-side a:hover { background: var(--surface-2); color: var(--text); }
.docs-side a.active { color: var(--text); background: rgba(255, 255, 255, .1); }
.docs-main { min-width: 0; }
.prose { max-width: 78ch; }
.prose h1 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 16px; }
.prose h2 { font-size: 24px; margin: 34px 0 12px; padding-top: 8px; }
.prose h3 { font-size: 18px; margin: 26px 0 10px; }
.prose p { margin: 12px 0; font-size: 15px; }
.prose ul, .prose ol { margin: 12px 0 12px 22px; color: var(--muted); }
.prose li { margin: 6px 0; }
.prose a { color: var(--accent-3); }
.prose a:hover { text-decoration: underline; }
.prose pre { margin: 16px 0; }
.prose table { margin: 18px 0; }
.prose .table-wrap, .prose table { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.prose blockquote { border-left: 3px solid var(--line-3); padding-left: 16px; color: var(--dim); margin: 16px 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }

/* ── status ─────────────────────────────────────────────────────────────── */
.status-hero { text-align: center; padding: clamp(40px, 6vw, 70px) 0 10px; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dim); display: inline-block; }
.status-dot.up { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.status-dot.down { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
/* Answered from the build snapshot: neither up nor down, and labelled as such. */
.status-dot.snapshot { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }

/* ── config reference ───────────────────────────────────────────────────── */
.cfg-cat { margin-bottom: 30px; }
.cfg-cat h3 { margin-bottom: 14px; }
.cfg-row { display: grid; grid-template-columns: 260px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.cfg-row:first-of-type { border-top: 0; }
.cfg-row .key { font-family: var(--mono); font-size: 13px; color: var(--text); }
.cfg-row .key .type { display: block; font-family: var(--sans); font-size: 11px; color: var(--dim); margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }
.cfg-row .val { font-size: 13.5px; color: var(--muted); }

/* ── pagination ─────────────────────────────────────────────────────────── */
.pager { display: flex; justify-content: space-between; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.pager a {
    flex: 1; min-width: 200px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface);
    padding: 15px 17px; transition: border-color .18s, background .18s, transform .18s var(--ease);
}
.pager a:hover { border-color: var(--line-3); background: var(--surface-2); transform: translateY(-2px); }
.pager .k { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); }
.pager .t { font-weight: 650; margin-top: 4px; }
.pager .next { text-align: right; }

/* ── servers: the wall, and the marquee it becomes ──────────────────────── */
/* `#srv-grid` is what is rendered on the server (crawlable, works without JS).
   JavaScript fetches the live list and swaps in `#srv-wheel`; under reduced
   motion the grid stays and the marquee is never shown. */
.srv-hero { text-align: center; padding: clamp(40px, 6vw, 70px) 0 24px; }
.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
#srv-wheel { display: none; }

#srv-view.wheel-on #srv-wheel { display: block; }
#srv-view.wheel-on #srv-grid { display: none; }
#srv-view.wheel-on .srv-empty { display: none; }

.wheel { display: grid; gap: 12px; }
.wheel-row {
    overflow: hidden;
    padding: 2px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.wheel-track { display: flex; gap: 12px; width: max-content; animation: wheel-left 20s linear infinite; }
.wheel-row[data-dir="right"] .wheel-track { animation-name: wheel-right; animation-duration: 25s; }
.wheel:hover .wheel-track, .wheel:focus-within .wheel-track { animation-play-state: paused; }
/* The track holds two copies of the list, so -50% is exactly one lap. */
@keyframes wheel-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wheel-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.srv-card {
    display: flex; align-items: center; gap: 10px; flex: none;
    width: 210px; height: 66px; padding: 0 13px;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: inherit;
    transition: border-color .18s, background .18s;
}
a.srv-card:hover { border-color: var(--line-3); background: var(--surface-2); }
.srv-card img, .srv-card .fallback {
    width: 40px; height: 40px; border-radius: 10px; flex: none; object-fit: cover;
    border: 1px solid var(--line); background: var(--bg-2);
}
.srv-card .fallback { display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.srv-card .txt { min-width: 0; }
.srv-card .n { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-card .m { display: block; font-size: 11px; color: var(--dim); }

.wheel-teaser { display: none; }
.wheel-teaser.wheel-on { display: grid; }
.wheel-teaser .wheel { gap: 10px; }

@media (prefers-reduced-motion: reduce) {
    .wheel-track { animation: none; }
    #srv-view.wheel-on #srv-wheel { display: none; }
    #srv-view.wheel-on #srv-grid { display: grid; }
    .wheel-teaser.wheel-on { display: none; }
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .docs-layout { grid-template-columns: 1fr; }
    .docs-side { position: static; max-height: none; }
    .cfg-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ── transcripts: what using the bot looks like in chat ─────────────────── */
.chat {
    display: grid; gap: 15px; padding: 18px;
    border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1);
}
.msg { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; }
.chat .av {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--line); background: var(--surface-2);
    font-weight: 800; font-size: 14px; color: var(--muted);
}
img.av { object-fit: cover; }
.msg .body { display: grid; gap: 7px; min-width: 0; }
.msg .meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.msg .meta b { font-weight: 700; }
.msg .meta .time { font-size: 11px; color: var(--dim); }
.app-badge {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    background: var(--primary); color: var(--on-primary); border-radius: 4px; padding: 1px 4px;
}
.msg .line { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.msg.bot .line { color: var(--muted); }
.fields { display: grid; gap: 6px; border-left: 2px solid var(--line-2); padding-left: 11px; }
.field { display: flex; gap: 10px; font-size: 12.5px; }
.field .k { min-width: 96px; color: var(--dim); }
.field .v { color: var(--text); }
.mini-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mini {
    border: 1px solid var(--line-2); background: var(--surface-2); border-radius: var(--r-sm);
    padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--muted);
}

/* the Now Playing embed, as the bot posts it */
.embed {
    display: grid; gap: 11px; max-width: 390px; padding: 13px;
    border: 1px solid var(--line); border-left: 2px solid var(--line-3);
    border-radius: var(--r-md); background: var(--bg-2);
}
.embed-top { display: flex; align-items: center; gap: 11px; }
.art {
    width: 46px; height: 46px; border-radius: 9px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--line); background: var(--surface-3);
}
.art .ico { width: 20px; height: 20px; color: var(--text); }
.embed-txt { display: grid; gap: 2px; min-width: 0; }
.embed-kicker { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.embed-title { font-size: 15px; font-weight: 800; }
.embed-sub { font-size: 12.5px; color: var(--dim); }
.src {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px 9px; color: var(--muted);
}
.embed-top .src { margin-left: auto; }
.progress { height: 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--primary); }
.embed-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 11px; color: var(--dim); }
.embed-foot .src { padding: 1px 8px; font-size: 10px; }

/* ── music band + the examples band ────────────────────────────────────── */
.music-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: start; }
.music-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.music-card { padding: 16px; }
.music-card h3 { font-size: 15px; margin-bottom: 6px; }
.music-card p { font-size: 13px; color: var(--muted); }
.music-cards .row { grid-column: 1 / -1; }
.chat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.chat-col { display: grid; gap: 9px; }
.chat-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.chat-single { max-width: 640px; }

/* The two-column bands collapse last: this block sits after the rules above, so
   it overrides them rather than the other way round. */
@media (max-width: 1000px) {
    .music-split, .chat-grid, .music-cards { grid-template-columns: 1fr; }
    .music-cards .row { grid-column: auto; }
}

/* ── one page per command: /commands/<category>/<name> ──────────────────── */
/* The page a chat link, a search result or a card lands on. It reads top to
   bottom as: what it is, what it needs, what it answers with — so the syntax is
   reachable without scrolling past the hero on a phone. */
.cmd-hero { padding-bottom: clamp(22px, 4vw, 38px); border-bottom: 1px solid var(--line); }
.cmd-hero-name { margin: 14px 0 12px; }
.cmd-hero-name code {
    font-family: var(--mono); font-size: clamp(24px, 4.6vw, 40px); font-weight: 700;
    letter-spacing: -.03em; color: var(--text);
}
.cmd-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cmd-flags .pill { display: inline-flex; align-items: center; gap: 6px; }
.cmd-flags .pill .ico { width: 12px; height: 12px; }
.cmd-do { margin-top: 18px; }
.cmd-do .ico { width: 15px; height: 15px; }

.cmd-stats { margin-bottom: 20px; }
.cmd-stats .stat { animation: cmd-rise .5s var(--ease) both; }
.cmd-stats .stat:nth-child(1) { animation-delay: .02s; }
.cmd-stats .stat:nth-child(2) { animation-delay: .07s; }
.cmd-stats .stat:nth-child(3) { animation-delay: .12s; }
.cmd-stats .stat:nth-child(4) { animation-delay: .17s; }

/* The reading column and its sidebar. `minmax(0, …)` on both, so a long usage
   line or a code block scrolls inside its card instead of widening the grid. */
.cmd-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .9fr); gap: 18px; align-items: start; }
.cmd-main, .cmd-side { display: grid; gap: 18px; min-width: 0; }
.cmd-block { transition: border-color .18s var(--ease), transform .18s var(--ease); }
.cmd-block:hover { border-color: var(--line-2); }
.cmd-block h3 { margin-bottom: 6px; }
.cmd-anim { animation: cmd-rise .55s var(--ease) both; }

.cmd-syntax { display: grid; gap: 7px; margin-top: 16px; }
.cmd-syntax .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.cmd-code {
    display: block; font-family: var(--mono); font-size: 13px; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 9px 12px; overflow-x: auto; white-space: pre;
}
.cmd-code.big { font-size: 15px; padding: 12px 14px; }
.cmd-code-stack { display: grid; gap: 7px; }

.cmd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmd-table th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--dim); font-weight: 700; padding: 0 12px 9px 0;
}
.cmd-table td { padding: 11px 12px 11px 0; border-top: 1px solid var(--line); vertical-align: top; }
.cmd-table tr:first-child td { border-top: 1px solid var(--line); }
.cmd-table code { font-size: 12.5px; }
.cmd-table .toks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.cmd-table .tok {
    font-family: var(--mono); font-size: 11px; border: 1px solid var(--line-2);
    border-radius: var(--r-pill); padding: 2px 8px; color: var(--muted);
}
.cmd-table .dpages { margin-top: 7px; display: grid; gap: 4px; }

.cmd-kv { display: grid; gap: 13px; margin-top: 6px; }
.cmd-kv dt { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); margin-bottom: 4px; }
.cmd-kv dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }

.cmd-links { list-style: none; display: grid; gap: 10px; margin-top: 8px; }
.cmd-links a { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.cmd-links a:hover { color: var(--text); }
.cmd-links .ico { width: 15px; height: 15px; color: var(--accent-3); flex: none; }
.mock-cmd { max-width: 620px; margin-top: 14px; }

/* The command page's own entrance. One 9px rise, staggered down the page - the
   same motion the rest of the site uses, never a fade on every element. */
@keyframes cmd-rise { from { opacity: 0; transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) {
    .cmd-stats .stat, .cmd-anim { animation: none; }
}
@media (max-width: 1000px) {
    .cmd-cols { grid-template-columns: 1fr; }
    .cmd-side { order: 2; }
}

/* ── live ticker: most-used commands scrolling past ─────────────────────── */
/* Hidden until `site.js` has live numbers to show. The mask fades both ends, so
   a chip slides in and out of view instead of being cut off at the edge. */
.ticker-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0 0; }
.ticker-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ticker-tag {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.ticker {
    overflow: hidden; padding-bottom: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker[hidden] { display: none; }
.ticker-track { display: flex; gap: 10px; width: max-content; animation: ticker 52s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.tick {
    display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
    padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--surface); font-size: 13px;
}
.tick code:not(pre code) { background: none; border: 0; padding: 0; color: var(--text); font-weight: 600; }
.tick .dim { font-variant-numeric: tabular-nums; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── ranked usage: the same feed as a list, bars scaled to the leader ───── */
.usage-panel { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); padding: 22px; }
.usage-list { list-style: none; display: grid; gap: 11px; }
.usage-list[hidden] { display: none; }
.usage-row { display: grid; grid-template-columns: minmax(170px, 230px) 1fr 70px; gap: 16px; align-items: center; font-size: 13.5px; }
.usage-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.usage-name code:not(pre code) { background: none; border: 0; padding: 0; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-cat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); white-space: nowrap; }
.usage-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.usage-bar span { display: block; height: 100%; width: 100%; background: var(--primary); transform-origin: left center; transition: transform .7s var(--ease); }
.usage-count { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
    .usage-row { grid-template-columns: 1fr auto; }
    .usage-bar { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .ticker-track { animation: none; }
    .usage-bar span { transition: none; }
}

/* ── hero terminal: the transcript types itself in, one line after another ─ */
.terminal-body .line { animation: line-in .5s var(--ease) both; }
.terminal-body .line:nth-child(1) { animation-delay: .25s; }
.terminal-body .line:nth-child(2) { animation-delay: .6s; }
.terminal-body .line:nth-child(3) { animation-delay: .85s; }
.terminal-body .line:nth-child(4) { animation-delay: 1.1s; }
.terminal-body .line:nth-child(5) { animation-delay: 1.35s; }
.terminal-body .line:nth-child(6) { animation-delay: 1.7s; }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .terminal-body .line { animation: none; } }

/* ── docs: on-this-page rail, copy buttons, reading progress ─────────────── */
.prose h2, .prose h3 { scroll-margin-top: calc(var(--header-h) + 22px); }
.docs-toc { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; font-size: 13px; }
.docs-toc[hidden] { display: none; }
.toc-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 700; margin-bottom: 10px; }
.toc-list { list-style: none; display: grid; border-left: 1px solid var(--line); }
.toc-list a {
    display: block; padding: 5px 0 5px 14px; margin-left: -1px;
    border-left: 2px solid transparent; color: var(--dim); line-height: 1.4;
    transition: color .16s var(--ease), border-color .16s var(--ease);
}
.toc-list a:hover { color: var(--text); }
.toc-list a.on { color: var(--text); border-left-color: var(--text); }
@media (min-width: 1200px) {
    .docs-layout.has-toc { grid-template-columns: 240px minmax(0, 1fr) 190px; }
}
@media (max-width: 1199px) {
    .docs-toc { display: none; }
}

.prose pre { position: relative; }
.code-copy {
    position: absolute; top: 10px; right: 10px;
    font: 700 11.5px/1 var(--sans); padding: 6px 11px; border-radius: var(--r-pill);
    border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted);
    opacity: 0; transition: opacity .16s var(--ease), color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.code-copy:hover { color: var(--text); background: var(--surface-3); }
.code-copy:active { transform: scale(.95); }
.code-copy.done { color: var(--green-ink); border-color: rgba(34, 197, 94, .4); }
.prose pre:hover .code-copy, .prose pre:focus-within .code-copy, .code-copy:focus-visible { opacity: 1; }
@media (hover: none) { .code-copy { opacity: 1; } }

.read-progress { position: fixed; left: 0; right: 0; top: var(--header-h); height: 2px; z-index: 41; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--text); transform-origin: left center; transform: scaleX(0); }