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

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

   Two themes, one token set. `:root` is the dark canvas (#050505, solid
   #0a0a0a surfaces, 1px white-alpha hairlines). `[data-theme="light"]` is the
   paper canvas the docs use: white page, #f7f7f8 wells, slate hairlines and
   near-black ink. `theme.js` decides which one is active from the Auto / Light
   / Dark switch, before first paint.

   Because every component reads these tokens, a component must never hard-code
   an rgba(255,255,255,…) fill: it uses --hover, --active or --scrim instead, so
   it stays legible in both themes. Depth comes from hairlines and whites, never
   from blur or translucent glass.

   --accent is a *hairline* accent (focus rings, active nav, links, 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);

    /* ── interaction fills (theme-scoped, never hard-coded in a component) ── */
    --hover: rgba(255, 255, 255, .055);
    --active: rgba(255, 255, 255, .10);
    --ghost: rgba(255, 255, 255, .03);
    --ghost-ink: rgba(255, 255, 255, .7);
    --scrim: rgba(0, 0, 0, .72);
    --scroll: #333333;

    /* ── 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 — 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);
    --embed-bg: #2b2d31;
    --embed-well: #313338;
    color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Light theme — the docs paper. Same structure, inverted ink, slate hairlines.
   Applied by theme.js as <html data-theme="light">.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    --bg: #ffffff;
    --bg-1: #fbfbfc;
    --bg-2: #f4f5f7;

    --surface: #ffffff;
    --surface-2: #f7f7f8;
    --surface-3: #ededf0;
    --well: #f8f8f9;

    --line: rgba(15, 23, 42, .10);
    --line-2: rgba(15, 23, 42, .16);
    --line-3: rgba(15, 23, 42, .28);

    --text: #0f172a;
    --muted: #475569;
    --dim: #6b7280;

    --hover: rgba(15, 23, 42, .05);
    --active: rgba(15, 23, 42, .08);
    --ghost: rgba(15, 23, 42, .03);
    --ghost-ink: #334155;
    --scrim: rgba(15, 23, 42, .35);
    --scroll: #cbd5e1;

    --primary: #111113;
    --primary-hover: #000000;
    --on-primary: #ffffff;

    --accent: #7c3aed;
    --accent-rgb: 124, 58, 237;
    --accent-2: #6d28d9;
    --accent-3: #6d28d9;
    --accent-soft: rgba(124, 58, 237, .08);
    --accent-line: rgba(124, 58, 237, .26);
    --on-accent: #ffffff;

    --green: #16a34a;
    --green-soft: rgba(22, 163, 74, .10);
    --green-ink: #15803d;
    --amber: #d97706;
    --amber-soft: rgba(217, 119, 6, .10);
    --amber-ink: #b45309;
    --blue: #4f46e5;
    --blue-soft: rgba(79, 70, 229, .10);
    --blue-ink: #4338ca;
    --danger: #e11d48;
    --danger-soft: rgba(225, 29, 72, .08);
    --danger-line: rgba(225, 29, 72, .32);
    --danger-ink: #be123c;

    --shadow: 0 24px 60px rgba(15, 23, 42, .10);
    --shadow-sm: 0 10px 24px rgba(15, 23, 42, .08);
    --glow: 0 14px 30px -12px rgba(15, 23, 42, .35);

    --ring: 0 0 0 3px rgba(15, 23, 42, .12);
    --embed-bg: #f2f3f5;
    --embed-well: #e9eaec;
    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%;
    /* A short page and a long page must not differ by a scrollbar's width, or
       the whole frame jumps as the view transition reveals the next page. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll) 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); }

/*
 * Cross-document view transitions: the header and the rail are the same on
 * every page, so they keep their pixels while the content underneath changes.
 * Browsers without support simply navigate as before.
 */
@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }
.side-nav { view-transition-name: side-nav; }
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: .22s; }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/*
 * 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: var(--active); }

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

.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: var(--ghost); border-color: var(--line); color: var(--ghost-ink); }
.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); }

/*
 * The feature grid is deliberately not `.grid.k3`: seven cards in an auto-fit
 * 4-column grid left 4 + 3 and a ragged second row. A fixed 4-up layout with the
 * first card spanning two columns fills both rows exactly (2 + 1 + 1, then 4),
 * and the cards share a height with their action pinned to the bottom.
 */
.feature-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feature-grid .feature-card {
    position: relative;
    display: flex; flex-direction: column;
    min-height: 266px;
}
.feature-grid .feature-card p { flex: 1 1 auto; }
.feature-grid .feature-card .card-action { margin-top: auto; padding-top: 16px; }
.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;
    flex: none;
}
.feature-card .ico svg { width: 21px; height: 21px; }
/* The badge sits in the card's top-right corner instead of the flow, so a
   labelled card is exactly as tall as its neighbours. */
.feature-grid .feature-card .card-badge {
    position: absolute; top: 18px; right: 18px; margin: 0;
}

@media (min-width: 1280px) {
    .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Security leads, so it gets the wide slot; the other six then fill the
       remaining cell and the whole second row. */
    .feature-grid > .feature-card:first-child {
        grid-column: span 2;
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        column-gap: 18px;
        align-content: start;
        padding: 26px;
    }
    .feature-grid > .feature-card:first-child .ico { grid-column: 1; grid-row: 1 / 4; margin: 0; }
    .feature-grid > .feature-card:first-child h3 { grid-column: 2; grid-row: 1; margin-top: 3px; }
    .feature-grid > .feature-card:first-child p { grid-column: 2; grid-row: 2; max-width: 46ch; }
    .feature-grid > .feature-card:first-child .card-action { grid-column: 2; grid-row: 3; margin-top: 0; padding-top: 16px; }
}

/* 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: var(--ghost); }

/* ── 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: var(--active); 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: var(--active); 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: 980px) {
    /* Home and Support live in the mobile menu at this width; the invite stays
       in the bar until the phone breakpoint, where the menu carries it too. */
    .head-home, .head-support { display: none; }
}

@media (max-width: 560px) {
    .head-tools > .btn.primary { display: none; }
    .theme-switch { padding: 2px; }
    .theme-btn { padding: 5px 8px; font-size: 11.5px; }
    .theme-btn[data-theme-set="system"] { display: none; }
}

@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);
        max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    }
    .mobile-nav.open { display: flex; }
    .mobile-nav a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-pill); color: var(--muted); font-weight: 600; font-size: 15px; }
    .mobile-nav a .ico { width: 18px; height: 18px; color: var(--dim); flex: none; }
    .mobile-nav a.active, .mobile-nav a:hover { background: var(--active); color: var(--text); }
    .mobile-nav a.active .ico, .mobile-nav a:hover .ico { 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 ── */
/* The rail carries three things the top bar cannot: a search affordance, a
   grouped map of the site, and the one action every page wants (add the bot).
   Rows are icon + label, with a hairline accent bar marking the current page. */
.side-nav {
    position: fixed; top: var(--header-h); left: 0; bottom: 0; width: 248px;
    padding: 16px 14px 16px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 16px;
    background: var(--bg); border-right: 1px solid var(--line); z-index: 30;
}

.side-search {
    display: flex; align-items: center; gap: 9px; flex: none;
    padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: var(--dim);
    font-size: 12.5px; font-weight: 600;
    transition: background .16s, color .16s, border-color .16s;
}
.side-search svg { width: 15px; height: 15px; flex: none; }
.side-search span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-search kbd { margin-left: auto; font-size: 10px; padding: 1px 5px; flex: none; }
.side-search:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--text); }

.side-links { display: flex; flex-direction: column; gap: 18px; }
.side-group { display: flex; flex-direction: column; gap: 1px; }
.side-label {
    margin: 0 0 6px; padding: 0 10px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--dim);
}
.side-links a {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--r-md);
    color: var(--muted); font-size: 13.5px; font-weight: 650;
    transition: background .16s, color .16s;
}
.side-links a .ico { width: 17px; height: 17px; flex: none; color: var(--dim); transition: color .16s; }
.side-links a:hover { background: var(--surface-2); color: var(--text); }
.side-links a:hover .ico { color: var(--text); }
.side-links a.active { background: var(--surface-2); color: var(--text); }
.side-links a.active .ico { color: var(--accent-2); }
/* The marker hangs in the rail's padding, so the row keeps its full width. */
.side-links a.active::before {
    content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 2px;
    border-radius: 2px; background: var(--accent);
}

.side-cta {
    margin-top: auto; flex: none;
    display: flex; flex-direction: column; gap: 9px;
    padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface);
}
.side-cta p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.side-cta .btn { width: 100%; }
.side-support {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--muted);
}
.side-support .ico { width: 13px; height: 13px; }
.side-support:hover { color: var(--text); }

main, .site-foot { margin-left: 248px; }
@media (max-width: 820px) {
    .side-nav { display: none; }
    main, .site-foot { margin-left: 0; }
}

/* ── theme switch: Auto / Light / Dark in the header ─────────────────────── */
.theme-switch {
    display: inline-flex; padding: 3px; gap: 2px;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
}
.theme-btn {
    border: 0; background: transparent; color: var(--dim); cursor: pointer;
    padding: 6px 11px; border-radius: var(--r-pill); font: inherit; font-size: 12px; font-weight: 700;
    transition: background .16s, color .16s;
}
.theme-btn:hover { color: var(--text); }
.theme-btn[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
.theme-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* ═══════════════════════════════════════════════════════════════════════════
   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(--accent-2); }
.hero .lead { max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── the centred hero ───────────────────────────────────────────────────── */
/* One headline, two buttons, the live proof line, then the wall. Nothing else
   competes above the fold — the reference's shape, with our own type. */
.hero-center { text-align: center; padding: clamp(52px, 8vw, 96px) 0 34px; overflow: hidden; }
.hero-title { max-width: 980px; margin: 0 auto 20px; font-size: clamp(38px, 6.4vw, 76px); line-height: 1.03; letter-spacing: -.045em; }
.hero-title .accent { color: var(--accent-2); }
.hero-name { display: inline-flex; align-items: center; gap: .22em; font-style: italic; letter-spacing: -.05em; vertical-align: baseline; }
.hero-name img { width: .78em; height: .78em; border-radius: .18em; border: 1px solid var(--line); }
.hero-lead { max-width: 64ch; margin: 0 auto; font-size: clamp(15px, 1.7vw, 17.5px); }
.hero-cta.center { justify-content: center; margin-top: 30px; }
.hero-proof { justify-content: center; }

/* 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: var(--scrim); }
.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 ────────────────────────────────────────────────────────── */
/* The docs have their own shell: the primary rail is the documentation tree,
   not the marketing nav. Search sits at the top of that tree, and the article
   is flanked by an "On this page" rail on wide screens. */
.docs-page .side-nav { display: none; }
.docs-page main, .docs-page .site-foot { margin-left: 0; }
.docs-page .wrap { max-width: 1380px; }

.docs-layout {
    display: grid; grid-template-columns: 272px minmax(0, 1fr) 208px;
    gap: 0 clamp(26px, 4vw, 60px);
    padding: 22px 0 clamp(40px, 6vw, 72px);
    align-items: start;
}
.docs-side {
    position: sticky; top: calc(var(--header-h) + 6px); align-self: start;
    max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto;
    padding: 10px 18px 24px 0;
    border-right: 1px solid var(--line);
    background: var(--bg);
}
.docs-search { position: sticky; top: 0; z-index: 2; padding: 4px 0 10px; background: var(--bg); }
.docs-search .search-box svg { left: 13px; width: 15px; height: 15px; }
.docs-search .search-box input { padding: 9px 52px 9px 38px; font-size: 13.5px; border-radius: var(--r-md); background: var(--surface); }
.docs-kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 10.5px; padding: 1px 5px; pointer-events: none; }
.docs-results {
    position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 20;
    background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-lg);
    box-shadow: var(--shadow); padding: 6px; display: grid; gap: 1px; max-height: 60vh; overflow-y: auto;
}
.docs-results[hidden] { display: none; }
.docs-hit { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm); }
.docs-hit:hover, .docs-hit.on { background: var(--hover); }
.docs-hit .hit-t { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-hit .hit-g { margin-left: auto; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); white-space: nowrap; }
.docs-empty { padding: 14px 12px; font-size: 13px; color: var(--dim); }

.docs-side .group {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim);
    margin: 18px 0 7px; padding-left: 10px; font-weight: 700;
}
.docs-side .group:first-of-type { margin-top: 6px; }
.docs-side .group svg.grp { width: 13px; height: 13px; }
.docs-side nav a { display: block; padding: 6px 11px; border-radius: var(--r-md); color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.docs-side nav a:hover { background: var(--hover); color: var(--text); }
.docs-side nav a.active { color: var(--accent-2); background: var(--accent-soft); font-weight: 600; }
.docs-side-foot { margin-top: 20px; padding: 12px 10px 0; border-top: 1px solid var(--line); }
.docs-side-foot .btn { font-size: 12px; padding: 8px 12px; }

.docs-main { min-width: 0; padding-top: 4px; }
.docs-head { margin: 2px 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.docs-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--dim); margin-bottom: 8px; }
.docs-head h1 { font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -.035em; margin-bottom: 8px; }
.docs-sub { font-size: 15.5px; color: var(--muted); max-width: 70ch; }
.prose { max-width: 78ch; }
/* The page header already carries the title; the markdown's own h1 would repeat
   it. Headings from h2 down still structure the article (and the TOC). */
.docs-main .prose > h1:first-child { display: none; }
.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; }
/* A short list does not get a second copy: repeating four servers so a lap can
   loop reads as the same card twice on screen. The rows simply start at the
   rail's edge and wrap as one centred block. */
.wheel.wheel-static .wheel-row { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.wheel.wheel-static .wheel-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
/* 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; gap: 20px; }
    .docs-side { position: static; max-height: none; padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--line); }
    .docs-search { position: relative; }
    .docs-page .wrap { max-width: 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: var(--active); 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) + 26px); align-self: start; font-size: 13px; padding-top: 6px; }
.docs-toc[hidden] { display: none; }
.toc-title { display: flex; align-items: center; gap: 7px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text); font-weight: 700; margin-bottom: 10px; }
.toc-title svg { width: 14px; height: 14px; color: var(--dim); }
.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 (max-width: 1199px) {
    .docs-layout { grid-template-columns: 252px minmax(0, 1fr); }
    .docs-toc { display: none; }
}
@media (max-width: 900px) {
    .docs-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .docs-side { max-height: 340px; }
}

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

/* ── embed designer: /embeds ────────────────────────────────────────────── */
/* The form and the live Discord message sit side by side. The preview is a
   Discord surface on purpose: it keeps Discord's own dark palette in both site
   themes, because that is the thing being designed. */
.embed-hero { padding: clamp(34px, 5vw, 58px) 0 24px; }
.embed-studio { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 20px; align-items: start; }
.embed-form { padding: 24px; }
.studio-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.studio-head h2 { font-size: 16px; letter-spacing: -.02em; }
.studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.color-row { display: flex; gap: 8px; align-items: center; }
.color-row input[type="color"] {
    width: 46px; height: 42px; flex: none; padding: 3px; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--well);
}
.embed-fields { display: grid; gap: 10px; }
.embed-field { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: 12px; }
.embed-field .field { margin-bottom: 0; }
.ef-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ef-n { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); }
.ef-inline { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ef-inline input { accent-color: var(--accent); }
.ef-remove {
    width: 26px; height: 26px; display: grid; place-items: center; color: var(--dim);
    border: 1px solid var(--line); border-radius: 50%; font-size: 12px;
}
.ef-remove:hover { color: var(--danger); border-color: var(--danger-line); }

.embed-out { display: grid; gap: 14px; position: sticky; top: calc(var(--header-h) + 16px); }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preview-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); }
.preview-tag svg { width: 13px; height: 13px; }

.discord {
    position: relative; min-height: 220px; padding: 16px 16px 20px;
    background: #313338; color: #dbdee1; font-size: 14px; line-height: 1.45;
    border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--r-lg);
}
.discord-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.discord-av {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #5865f2; color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: 15px;
}
.discord-av img { width: 100%; height: 100%; object-fit: cover; }
.discord-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.discord-meta b { color: #f2f3f5; font-weight: 600; }
.discord-meta .app-badge { background: #5865f2; color: #fff; }
.discord-meta .time { font-size: 11px; color: #949ba4; }
.discord-content { color: #dbdee1; margin: 2px 0 6px; overflow-wrap: anywhere; }
.discord-content code, .de-desc code, .de-value code { background: #1e1f22; border: 0; color: #dbdee1; border-radius: 3px; padding: 0 3px; }
.discord-embed {
    display: grid; gap: 8px; max-width: 520px; padding: 12px 14px 14px;
    background: #2b2d31; border-left: 4px solid #8b5cf6; border-radius: 4px;
}
.discord-embed[hidden] { display: none; }
.de-author { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #f2f3f5; }
.de-author img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.de-author[hidden] { display: none; }
.de-title { font-size: 15px; font-weight: 700; color: #f2f3f5; overflow-wrap: anywhere; }
.de-title[hidden], .de-desc[hidden], .de-fields[hidden] { display: none; }
.de-desc { font-size: 13.5px; color: #dbdee1; overflow-wrap: anywhere; }
.de-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.de-field.inline { grid-column: span 1; }
.de-field:not(.inline) { grid-column: 1 / -1; }
.de-name { font-size: 12.5px; font-weight: 700; color: #f2f3f5; }
.de-value { font-size: 12.5px; color: #dbdee1; }
.de-image { width: 100%; max-height: 260px; object-fit: cover; border-radius: 4px; }
.de-foot { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #949ba4; margin-top: 2px; }
.de-foot[hidden] { display: none; }
.de-foot img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.de-thumb { position: absolute; top: 64px; right: 26px; width: 62px; height: 62px; border-radius: 6px; object-fit: cover; }
.discord-hint { margin-top: 10px; font-size: 12px; color: #949ba4; }
.discord-hint[hidden] { display: none; }

.script-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 15px 17px; }
.script-card .spread { margin-bottom: 10px; }
.embed-script {
    border-radius: var(--r-md); font-size: 12px; line-height: 1.65; margin: 0;
    max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
    border-color: var(--accent-line); background: var(--accent-soft); color: var(--text);
}
.script-card .hint { margin-top: 10px; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
    .embed-studio { grid-template-columns: 1fr; }
    .embed-out { position: static; }
}
@media (max-width: 560px) {
    .studio-grid { grid-template-columns: 1fr; }
    .embed-form { padding: 18px; }
    .de-fields { grid-template-columns: 1fr; }
}