/* ═══════════════════════════════════════════════════════════════════════════
   GUIDES  (`gd-*`)  —  the index and the article template
   ═══════════════════════════════════════════════════════════════════════════

   Same visual language as the landing page and the docs reference: Geist, the
   #070B18 ground, the same ink ramp, one blue for actions. A separate sheet
   because the layouts share nothing — index.html is a composition, docs.html is
   a filtered list, and this is a document meant to be read for ten minutes.

   ⚠️ `gd-*` is GUIDES. `dc-*` is the docs reference and `lp-dc-*` is the landing
   page's Discord chrome. This file has its own `gd-dc-*` / `gd-dm-*` Discord
   vocabulary — it does NOT load landing-v3.css (3,300 lines for a page
   composition), so those rules are not available here and are restated.

   ── The one rule that shapes everything below ────────────────────────────────
   THE ARTICLE BODY IS QUIETER THAN THE MARKETING SITE. A reader is here for ten
   minutes, not ten seconds. So: no gradients on content, no card around every
   paragraph, no hover lift, no glass. Emphasis comes from type and space, and
   the only saturated colour in the reading column is a link.

   No design-system `var()`. Literal values, like docs.css and landing-v3.css —
   the `--r-*` / `--action*` / `--surface-*` families are prose in
   DESIGN_SYSTEM.md §1 and resolve to nothing, which silently squares every
   corner and unpaints every fill.
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ⚠️ `[hidden]` is (0,0,1) and loses to any class that sets `display`. Declared
   once, at the top, like landing-v3.css and message-builder.css. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.gd-body {
    margin: 0;
    background: #070B18;
    color: #b3b8c2;
    font: 400 16px/1.6 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: #9fb0f2; text-decoration: none; }
a:hover { color: #c4cdf8; }
button, input { font-family: inherit; color: inherit; }

/* Focus is declared ONCE, for everything, at one offset — the sidebar's lesson.
   Nothing in this file may set `outline: none`. */
:focus-visible { outline: 2px solid rgba(147, 180, 255, .75); outline-offset: 2px; border-radius: 6px; }

.gd-skip {
    position: fixed; left: 12px; top: -60px; z-index: 90;
    padding: 10px 16px; border-radius: 9px;
    background: #12151f; border: 1px solid rgba(255, 255, 255, .16);
    color: #f2f3f5; font: 600 13px 'Geist', system-ui;
    transition: top .16s cubic-bezier(.4, 0, .2, 1);
}
.gd-skip:focus { top: 12px; color: #f2f3f5; }

/* ── Chrome ──────────────────────────────────────────────────────────────── */

.gd-nav {
    position: sticky; top: 0; z-index: 20;
    height: 68px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    background: rgba(7, 11, 24, .86);
    backdrop-filter: blur(12px);
}
.gd-nav-in {
    height: 100%; max-width: 1360px; margin: 0 auto; padding: 0 40px;
    display: flex; align-items: center; gap: 34px;
}
.gd-nav-links { display: flex; align-items: center; gap: 26px; white-space: nowrap; font: 400 13.5px 'Geist', system-ui; }
.gd-nav-links a { color: #8b8f97; }
.gd-nav-links a:hover { color: #e6e8ea; }
.gd-nav-links a[aria-current="page"] { color: #f2f3f5; }
.gd-nav-spacer { flex: 1; }

.gd-cta {
    display: inline-flex; align-items: center; gap: 9px;
    height: 36px; padding: 0 16px; border-radius: 9px;
    background: #3b82f6; color: #fff; font: 600 13px 'Geist', system-ui;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 14px -6px rgba(59, 130, 246, .5),
                inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: background-color .16s cubic-bezier(.4, 0, .2, 1);
}
.gd-cta:hover { background: #2563eb; color: #fff; }
.gd-cta img { display: block; flex: none; }

.gd-main { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX
   ═══════════════════════════════════════════════════════════════════════════ */

.gd-idx-hero {
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    background:
        radial-gradient(closest-side at 74% -20%, rgba(124, 140, 236, .15), rgba(124, 140, 236, 0)),
        linear-gradient(180deg, #0A0F26, #070B18);
}
.gd-idx-hero-in { max-width: 1360px; margin: 0 auto; padding: 74px 40px 54px; }
.gd-idx-hero h1 {
    margin: 0; max-width: 16ch;
    font: 600 clamp(34px, 4.4vw, 54px)/1.06 'Geist', system-ui;
    letter-spacing: -.043em; color: #f2f3f5; text-wrap: balance;
}
.gd-idx-hero > .gd-idx-hero-in > p {
    margin: 20px 0 0; max-width: 56ch;
    font: 400 16.5px/1.62 'Geist', system-ui; color: #b3b8c2; text-wrap: pretty;
}

.gd-search-wrap {
    margin-top: 30px; max-width: 520px;
    display: flex; align-items: center; gap: 11px;
    height: 52px; padding: 0 16px; border-radius: 13px;
    background: rgba(10, 12, 16, .6); border: 1px solid rgba(255, 255, 255, .09);
    color: #6b7078;
    transition: border-color .16s cubic-bezier(.4, 0, .2, 1);
}
.gd-search-wrap:focus-within { border-color: rgba(255, 255, 255, .2); }
.gd-search-wrap svg { flex: none; }
.gd-search-wrap input {
    flex: 1; min-width: 0; background: none; border: none; outline: none;
    color: #f2f3f5; font: 400 14.5px 'Geist', system-ui;
}
.gd-search-wrap input::placeholder { color: #6b7078; }
.gd-search-wrap input::-webkit-search-cancel-button { filter: invert(.5); }
.gd-search-wrap kbd {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .09);
    font: 400 11px 'Geist Mono', ui-monospace, monospace; color: #5b5f67;
}
.gd-search-note { margin: 12px 0 0; font: 400 13px 'Geist', system-ui; color: #6b7078; }

.gd-idx { max-width: 1360px; margin: 0 auto; padding: 54px 40px 96px; }

.gd-sec-h {
    margin: 0 0 22px;
    font: 500 12px/1 'Geist', system-ui; letter-spacing: .1em; text-transform: uppercase;
    color: #6b7078;
}

/* ── The one featured guide ────────────────────────────────────────────────
   ONE hero, not a row of three equal ones. A page that features everything
   features nothing, and the whole job of this slot is to answer "where do I
   start" for somebody who has never been here. */

.gd-hero-card {
    display: flex; align-items: center; gap: 32px;
    padding: 34px 36px; margin-bottom: 64px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: linear-gradient(140deg, rgba(124, 140, 236, .10), rgba(124, 140, 236, .015) 46%),
                #0c1020;
    color: inherit;
    transition: border-color .18s cubic-bezier(.4, 0, .2, 1);
}
.gd-hero-card:hover { border-color: rgba(255, 255, 255, .17); color: inherit; }
.gd-hero-card-body { flex: 1; min-width: 0; }
.gd-hero-cap {
    display: block; margin-bottom: 12px;
    font: 500 11.5px/1 'Geist', system-ui; letter-spacing: .09em; text-transform: uppercase;
    color: #8b93f2;
}
.gd-hero-card h2 {
    margin: 0; font: 600 clamp(24px, 2.6vw, 33px)/1.14 'Geist', system-ui;
    letter-spacing: -.032em; color: #f2f3f5; text-wrap: balance;
}
.gd-hero-card p {
    margin: 13px 0 0; max-width: 58ch;
    font: 400 15.5px/1.6 'Geist', system-ui; color: #b3b8c2; text-wrap: pretty;
}
.gd-hero-go {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
    font: 500 14px 'Geist', system-ui; color: #9fb0f2;
}
.gd-hero-card:hover .gd-hero-go { color: #c4cdf8; }
.gd-hero-go svg { transition: transform .18s cubic-bezier(.4, 0, .2, 1); }
.gd-hero-card:hover .gd-hero-go svg { transform: translateX(3px); }

/* Nibi's authored portrait — a static image, so it does not follow the
   companion preference. This is the author's face beside the author's work,
   not the live sprite. (§2.38's head-crop rule is about slicing the SHEET.) */
.gd-hero-card-art { flex: none; }
.gd-hero-card-art img { display: block; width: 96px; height: 96px; opacity: .96; }

@media (max-width: 760px) {
    .gd-hero-card { flex-direction: column-reverse; align-items: flex-start; gap: 20px; padding: 26px 22px; }
    .gd-hero-card-art img { width: 64px; height: 64px; }
}

/* ── Curated paths ─────────────────────────────────────────────────────────
   A collection is an ORDER, so it renders as a numbered route rather than
   three more cards. Somebody at the start does not need more choices. */

.gd-paths { margin-bottom: 72px; }
.gd-paths-grid {
    display: grid; gap: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gd-path {
    padding: 24px 24px 12px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: #0a0d1a;
}
.gd-path h3 {
    margin: 0; font: 600 17px/1.25 'Geist', system-ui; letter-spacing: -.02em; color: #f2f3f5;
}
.gd-path > p {
    margin: 9px 0 18px; font: 400 14px/1.55 'Geist', system-ui; color: #8b8f97; text-wrap: pretty;
}
.gd-path-rows { display: flex; flex-direction: column; }
.gd-path-row {
    display: flex; align-items: baseline; gap: 13px;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, .055);
    color: inherit;
}
.gd-path-n {
    flex: none; width: 17px;
    font: 400 12px/1 'Geist Mono', ui-monospace, monospace; color: #5b5f67;
    font-variant-numeric: tabular-nums;
}
.gd-path-title { flex: 1; min-width: 0; font: 400 14.5px/1.45 'Geist', system-ui; color: #d4d7dd; }
.gd-path-row:hover .gd-path-title { color: #f2f3f5; }
.gd-path-min { flex: none; font: 400 12px 'Geist', system-ui; color: #5b5f67; white-space: nowrap; }

@media (max-width: 1080px) { .gd-paths-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .gd-paths-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Topics + cards ───────────────────────────────────────────────────────── */

.gd-topic { margin-bottom: 54px; }
.gd-topic-head { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.gd-topic-head h3 {
    margin: 0; font: 600 20px/1.2 'Geist', system-ui; letter-spacing: -.024em; color: #f2f3f5;
}
.gd-topic-head p { margin: 7px 0 0; max-width: 64ch; font: 400 14.5px/1.55 'Geist', system-ui; color: #8b8f97; }

/* ⚠️ Fixed column count, never `auto-fill`/`auto-fit` — the same rule
   dashboard-layout.css states for the app. auto-fit collapses to one wide
   column at odd widths and the cards stop looking like a set. */
.gd-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gd-card {
    display: flex; flex-direction: column;
    padding: 20px 20px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: #0a0d1a;
    color: inherit;
    transition: border-color .16s cubic-bezier(.4, 0, .2, 1), background-color .16s cubic-bezier(.4, 0, .2, 1);
}
.gd-card:hover { border-color: rgba(255, 255, 255, .15); background: #0c1020; color: inherit; }
.gd-card-topic {
    font: 500 11px/1 'Geist', system-ui; letter-spacing: .085em; text-transform: uppercase;
    color: #6b7078; margin-bottom: 11px;
}
.gd-card-title {
    font: 600 16.5px/1.32 'Geist', system-ui; letter-spacing: -.021em; color: #f2f3f5;
    text-wrap: balance;
}
.gd-card-desc {
    margin-top: 9px; flex: 1;
    font: 400 14px/1.55 'Geist', system-ui; color: #8b8f97; text-wrap: pretty;
}
.gd-card-meta { margin-top: 15px; font: 400 12px 'Geist', system-ui; color: #5b5f67; }

@media (max-width: 1080px) { .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .gd-grid { grid-template-columns: minmax(0, 1fr); } }

.gd-empty { margin: 40px 0 0; font: 400 15px 'Geist', system-ui; color: #8b8f97; }

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE
   ═══════════════════════════════════════════════════════════════════════════ */

.gd-art-wrap { max-width: 1360px; margin: 0 auto; padding: 0 40px; }

.gd-crumb {
    display: flex; align-items: center; gap: 9px;
    padding: 26px 0 0;
    font: 400 13px 'Geist', system-ui; color: #6b7078;
}
.gd-crumb a { color: #8b8f97; }
.gd-crumb a:hover { color: #d4d7dd; }
.gd-crumb svg { flex: none; color: #4a4e57; }

.gd-art-head { padding: 26px 0 34px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.gd-art-head h1 {
    margin: 0; max-width: 20ch;
    font: 600 clamp(32px, 4.2vw, 50px)/1.07 'Geist', system-ui;
    letter-spacing: -.042em; color: #f2f3f5; text-wrap: balance;
}
.gd-art-meta {
    margin: 20px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font: 400 13.5px 'Geist', system-ui; color: #6b7078;
}
.gd-art-meta span[aria-hidden] { color: #3f434b; }

/* ── The two columns ───────────────────────────────────────────────────────
   Rail on the left, reading column beside it. The rail is a fixed 210px and
   the article a fixed max — a fluid reading column is how a 1440px screen
   ends up with 120-character lines. */

.gd-art-cols {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    padding: 44px 0 0;
}

.gd-toc { position: sticky; top: 92px; }
.gd-toc-in { max-height: calc(100vh - 130px); overflow-y: auto; padding-right: 8px; }
.gd-toc-cap {
    display: block; margin-bottom: 13px;
    font: 500 11px/1 'Geist', system-ui; letter-spacing: .09em; text-transform: uppercase;
    color: #5b5f67;
}
.gd-toc ul { list-style: none; margin: 0; padding: 0; }
.gd-toc ul ul { margin: 3px 0 3px 13px; }
.gd-toc li { margin: 0; }
.gd-toc a {
    display: block; padding: 5px 0 5px 12px;
    border-left: 1.5px solid rgba(255, 255, 255, .07);
    font: 400 13.2px/1.45 'Geist', system-ui; color: #7c818b;
    transition: color .14s cubic-bezier(.4, 0, .2, 1), border-color .14s cubic-bezier(.4, 0, .2, 1);
}
.gd-toc a:hover { color: #d4d7dd; border-left-color: rgba(255, 255, 255, .2); }
.gd-toc a.is-here { color: #f2f3f5; border-left-color: #7c8cec; }
.gd-toc ul ul a { font-size: 12.6px; color: #6b7078; }

/* ── The reading column ────────────────────────────────────────────────────
   68ch is the constraint everything else answers to. Full-bleed elements (the
   Discord preview, the tables) are allowed to exceed it slightly, because a
   drawing is scanned rather than read. */

.gd-art { max-width: 68ch; }

.gd-art > p {
    margin: 0 0 20px;
    font: 400 16.6px/1.72 'Geist', system-ui; color: #b7bcc6; text-wrap: pretty;
}
.gd-art strong { color: #e6e8ea; font-weight: 600; }
.gd-art em { color: #cfd3da; font-style: italic; }
.gd-art a { text-decoration: underline; text-decoration-color: rgba(159, 176, 242, .32); text-underline-offset: 3px; }
.gd-art a:hover { text-decoration-color: rgba(196, 205, 248, .7); }

.gd-lede {
    font: 400 19.5px/1.62 'Geist', system-ui !important;
    color: #d4d7dd !important;
    margin-bottom: 26px !important;
    letter-spacing: -.012em;
}

.gd-art h2 {
    margin: 52px 0 18px; scroll-margin-top: 92px;
    font: 600 27px/1.2 'Geist', system-ui; letter-spacing: -.032em; color: #f2f3f5;
    text-wrap: balance;
}
.gd-art h3 {
    margin: 38px 0 14px; scroll-margin-top: 92px;
    font: 600 19.5px/1.28 'Geist', system-ui; letter-spacing: -.024em; color: #e6e8ea;
    text-wrap: balance;
}

.gd-art ul, .gd-art ol { margin: 0 0 22px; padding-left: 22px; }
.gd-art li {
    margin: 0 0 10px;
    font: 400 16.2px/1.68 'Geist', system-ui; color: #b7bcc6; text-wrap: pretty;
}
.gd-art li::marker { color: #5b5f67; }
.gd-art ul ul, .gd-art ol ol { margin: 10px 0 0; }

.gd-art code {
    padding: 2px 6px; border-radius: 5px;
    background: rgba(255, 255, 255, .06);
    font: 400 .875em/1 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
    color: #d8dbe1;
}

.gd-rule { margin: 46px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .06); }

/* ── Keyline — the sentence to leave with ──────────────────────────────────
   NOT a card and NOT a blockquote with a coloured bar. Bigger type, more air,
   one hairline above and below. Emphasis by space, which is the whole
   editorial rule at the top of this file. */
.gd-key {
    margin: 34px 0 !important;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font: 400 21px/1.5 'Geist', system-ui !important;
    letter-spacing: -.018em; color: #dfe2e7 !important; text-wrap: pretty;
}
.gd-key strong { color: #f2f3f5; font-weight: 500; }

/* ── Callouts ──────────────────────────────────────────────────────────────
   Three, and the colour is on the ICON only — a filled amber panel means
   "act on this", which is not what a tip is. Same rule the Settings overlay
   arrived at. */
.gd-note {
    display: flex; gap: 13px;
    margin: 26px 0; padding: 16px 18px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .017);
}
.gd-note > div { flex: 1; min-width: 0; font: 400 15.2px/1.62 'Geist', system-ui; color: #a9aeb8; }
.gd-note strong { color: #e6e8ea; font-weight: 600; }
.gd-note-ico { flex: none; margin-top: 1px; }
.gd-note-tip .gd-note-ico { color: #7c8cec; }
.gd-note-warn .gd-note-ico { color: #e0a63c; }
.gd-note-note .gd-note-ico { color: #6b7078; }

/* ── Steps ─────────────────────────────────────────────────────────────────
   A real procedure. The number is drawn, so it survives a copy-paste of the
   list and reads as a sequence rather than as bullets that happen to count. */
.gd-steps { list-style: none; margin: 26px 0 !important; padding: 0 !important; counter-reset: gdstep; }
.gd-steps > li {
    position: relative; margin: 0 0 4px !important; padding: 0 0 22px 44px;
    counter-increment: gdstep;
}
.gd-steps > li::before {
    content: counter(gdstep);
    position: absolute; left: 0; top: 1px;
    display: flex; align-items: center; justify-content: center;
    width: 27px; height: 27px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #0d111f;
    font: 500 12.5px/1 'Geist Mono', ui-monospace, monospace; color: #9fb0f2;
}
/* The rail joining the steps. Stops at the last one — a line trailing off the
   end of a list reads as a step that is missing. */
.gd-steps > li:not(:last-child)::after {
    content: ''; position: absolute; left: 13px; top: 34px; bottom: 4px;
    width: 1px; background: rgba(255, 255, 255, .08);
}
.gd-steps h4 {
    margin: 3px 0 6px;
    font: 600 16.4px/1.35 'Geist', system-ui; letter-spacing: -.017em; color: #e6e8ea;
}
.gd-steps p { margin: 0; font: 400 15.4px/1.65 'Geist', system-ui; color: #a9aeb8; text-wrap: pretty; }

/* ── Tables ───────────────────────────────────────────────────────────────
   ⚠️ The wrapper scrolls, the page never does. A comparison table is the
   commonest source of horizontal page overflow on a phone. */
.gd-table-wrap { margin: 30px 0; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gd-table { width: 100%; min-width: 520px; border-collapse: collapse; font: 400 14.6px/1.55 'Geist', system-ui; }
.gd-table th, .gd-table td {
    padding: 12px 16px 12px 0; text-align: left; vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}
.gd-table thead th {
    padding-bottom: 10px;
    border-bottom-color: rgba(255, 255, 255, .13);
    font: 500 12px/1.4 'Geist', system-ui; letter-spacing: .06em; text-transform: uppercase;
    color: #6b7078; white-space: nowrap;
}
.gd-table tbody th { font-weight: 600; color: #e6e8ea; padding-right: 22px; }
.gd-table td { color: #a9aeb8; }
.gd-table tbody tr:last-child th, .gd-table tbody tr:last-child td { border-bottom: 0; }
.gd-table-wrap figcaption, .gd-fig figcaption, .gd-dc figcaption, .gd-ch figcaption {
    margin-top: 11px; font: 400 13.2px/1.55 'Geist', system-ui; color: #6b7078;
}

/* ── Before / after ───────────────────────────────────────────────────────── */
.gd-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 28px 0; }
.gd-cmp-col { padding: 18px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .07); background: #0a0d1a; }
.gd-cmp-cap {
    display: block; margin-bottom: 12px;
    font: 500 11.5px/1 'Geist', system-ui; letter-spacing: .07em; text-transform: uppercase;
}
.gd-cmp-bad .gd-cmp-cap { color: #b98a8a; }
.gd-cmp-good .gd-cmp-cap { color: #7fb08d; }
.gd-cmp-col ul { margin: 0 !important; padding: 0 !important; list-style: none; }
.gd-cmp-col li {
    position: relative; margin: 0 0 9px !important; padding-left: 19px;
    font: 400 14.6px/1.55 'Geist', system-ui !important; color: #a9aeb8 !important;
}
.gd-cmp-col li:last-child { margin-bottom: 0 !important; }
.gd-cmp-col li::before { position: absolute; left: 0; top: -1px; font-size: 14px; }
.gd-cmp-bad li::before { content: '\00d7'; color: #b98a8a; }
.gd-cmp-good li::before { content: '\2713'; color: #7fb08d; font-size: 12px; top: 0; }
@media (max-width: 660px) { .gd-cmp { grid-template-columns: minmax(0, 1fr); } }

/* ── Copyable template ───────────────────────────────────────────────────── */
.gd-tpl {
    margin: 28px 0; border-radius: 12px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    background: #0a0d1a;
}
.gd-tpl-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px 11px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .022);
    font: 500 12.4px/1 'Geist', system-ui; letter-spacing: .04em; text-transform: uppercase; color: #8b8f97;
}
.gd-copy {
    display: inline-flex; align-items: center; gap: 6px;
    height: 27px; padding: 0 10px; border-radius: 7px; flex: none;
    border: 1px solid rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .03);
    color: #b3b8c2; font: 500 11.5px 'Geist', system-ui; letter-spacing: .02em; text-transform: none;
    cursor: pointer;
    transition: border-color .14s cubic-bezier(.4, 0, .2, 1), color .14s cubic-bezier(.4, 0, .2, 1);
}
.gd-copy:hover { border-color: rgba(255, 255, 255, .22); color: #f2f3f5; }
.gd-copy.is-done { color: #7fb08d; border-color: rgba(127, 176, 141, .4); }
.gd-tpl-body {
    margin: 0; padding: 17px 18px; overflow-x: auto;
    font: 400 14px/1.72 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
    color: #c9ced7; white-space: pre-wrap; word-break: break-word;
}
.gd-tpl-note {
    margin: 0 !important; padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font: 400 13.4px/1.6 'Geist', system-ui !important; color: #6b7078 !important;
}

/* ── Discord preview ──────────────────────────────────────────────────────
   ⚠️ A drawing of Discord is read as a screenshot whatever the caption says,
   so it may only show output NeoBot really produces. Colours are Discord's
   own (#313338 ground, #dbdee1 ink) — deliberately NOT the site palette,
   because the point is that this is a picture of somewhere else. */
.gd-dc {
    margin: 28px 0; border-radius: 12px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    background: #313338;
}
.gd-dc-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, .22);
    background: #2b2d31;
    font: 600 14px 'Geist', system-ui; color: #f2f3f5;
}
.gd-dc-head svg { color: #80848e; stroke-width: 2; }
.gd-dc-body { padding: 15px 16px; display: flex; flex-direction: column; gap: 14px; }
.gd-dm { display: flex; gap: 13px; }
.gd-dm-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: block; }
.gd-dm-main { flex: 1; min-width: 0; }
.gd-dm-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.gd-dm-name { font: 600 14.6px 'Geist', system-ui; color: #f2f3f5; }
.gd-dm-app {
    display: inline-flex; align-items: center; gap: 3px;
    height: 15px; padding: 0 4px; border-radius: 3px; background: #5865f2;
    font: 500 9.5px/1 'Geist', system-ui; color: #fff; letter-spacing: .02em;
}
.gd-dm-time { font: 400 11.5px 'Geist', system-ui; color: #949ba4; }
.gd-dm-text { margin-top: 2px; font: 400 14.6px/1.42 'Geist', system-ui; color: #dbdee1; }
.gd-dm-text strong { color: #fff; font-weight: 600; }
.gd-dm-list { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }
.gd-dm-list span { font: 400 14.2px/1.45 'Geist', system-ui; color: #dbdee1; }
.gd-dm-list b { color: #fff; font-weight: 600; }
.gd-mention {
    padding: 0 2px; border-radius: 3px;
    background: rgba(88, 101, 242, .22); color: #c9cdfb; font-weight: 500;
}
.gd-chan-ref {
    padding: 0 2px; border-radius: 3px;
    background: rgba(88, 101, 242, .22); color: #c9cdfb; font-weight: 500;
}
.gd-dm-text code, .gd-dm-list code {
    padding: 1px 4px; border-radius: 4px; background: #1e1f22; color: #dbdee1;
    font: 400 .85em 'Geist Mono', ui-monospace, monospace;
}
.gd-embed {
    margin-top: 7px; display: flex; max-width: 440px;
    border-radius: 4px; overflow: hidden; background: #2b2d31;
}
.gd-embed-bar { flex: none; width: 4px; background: #7c8cec; }
.gd-embed-in { flex: 1; min-width: 0; padding: 11px 14px 13px; }
.gd-embed-title { font: 600 14.4px/1.35 'Geist', system-ui; color: #f2f3f5; }
.gd-embed-text { margin-top: 5px; font: 400 13.8px/1.45 'Geist', system-ui; color: #dbdee1; }
.gd-embed-foot { margin-top: 9px; font: 400 11.8px/1.4 'Geist', system-ui; color: #949ba4; }
.gd-dc-btns { margin-top: 9px; display: flex; gap: 8px; flex-wrap: wrap; }
.gd-dc-btn {
    display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
    border-radius: 4px; background: #4e5058;
    font: 500 13.2px 'Geist', system-ui; color: #fff;
}
.gd-dc-btn-primary { background: #5865f2; }
.gd-dc-btn-danger { background: #da373c; }

/* ── Channel-list drawing ─────────────────────────────────────────────────── */
.gd-ch {
    margin: 28px 0; padding: 20px 22px;
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, .075); background: #0a0d1a;
}
.gd-ch-group + .gd-ch-group { margin-top: 20px; }
.gd-ch-cap {
    display: block; margin-bottom: 8px;
    font: 600 11px/1 'Geist', system-ui; letter-spacing: .085em; color: #6b7078;
}
.gd-ch-list { list-style: none; margin: 0 !important; padding: 0 !important; }
.gd-ch-row {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    margin: 0 !important; padding: 5px 0 5px 8px;
    font: 400 15px/1.5 'Geist', system-ui !important;
}
.gd-ch-name { display: inline-flex; align-items: center; gap: 6px; flex: none; color: #d4d7dd; }
.gd-ch-name svg { color: #6b7078; flex: none; }
.gd-ch-row.is-locked .gd-ch-name { color: #8b8f97; }
.gd-ch-lock { display: inline-flex; color: #5b5f67; }
.gd-ch-note { flex: 1; min-width: 180px; font-size: 13.6px; color: #7c818b; }

/* ── The product connection ────────────────────────────────────────────────
   ⚠️ This is the ONLY element in the reading column allowed a tint, and it is
   the quietest one that still reads as "this bit is us". It has to be
   visually separable from the prose — an unmarked paragraph that starts
   selling is worse than a marked one — without becoming an ad break. */
.gd-prod {
    margin: 30px 0; padding: 18px 20px 16px;
    border-radius: 12px;
    border: 1px solid rgba(124, 140, 236, .17);
    background: linear-gradient(180deg, rgba(124, 140, 236, .055), rgba(124, 140, 236, .015));
}
.gd-prod-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.gd-prod-mark { display: block; flex: none; opacity: .9; }
.gd-prod-cap {
    font: 500 10.8px/1 'Geist', system-ui; letter-spacing: .1em; text-transform: uppercase; color: #8b93f2;
}
.gd-prod-name { font: 600 14.4px/1 'Geist', system-ui; color: #f2f3f5; }
.gd-prod-tier {
    margin-left: auto; flex: none;
    padding: 3px 8px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    font: 500 10.5px/1 'Geist', system-ui; letter-spacing: .04em; color: #8b8f97;
}
.gd-prod-tier.gd-prod-free { color: #7fb08d; border-color: rgba(127, 176, 141, .3); }
.gd-prod p {
    margin: 0 !important;
    font: 400 15.2px/1.62 'Geist', system-ui !important; color: #a9aeb8 !important; text-wrap: pretty;
}
.gd-prod-where {
    margin-top: 11px !important;
    font: 400 12.8px/1.4 'Geist Mono', ui-monospace, monospace !important; color: #6b7078 !important;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.gd-faq { margin: 26px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.gd-faq-item { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.gd-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 2px; cursor: pointer; list-style: none;
    font: 500 16px/1.45 'Geist', system-ui; color: #dfe2e7;
}
.gd-faq-item summary::-webkit-details-marker { display: none; }
.gd-faq-item summary:hover { color: #f2f3f5; }
.gd-faq-chev { flex: none; color: #6b7078; transition: transform .18s cubic-bezier(.4, 0, .2, 1); }
.gd-faq-item[open] .gd-faq-chev { transform: rotate(180deg); }
.gd-faq-a { padding: 0 2px 18px; }
.gd-faq-a p { margin: 0 !important; font: 400 15.4px/1.68 'Geist', system-ui !important; color: #a9aeb8 !important; }

/* ── Custom figures ───────────────────────────────────────────────────────── */
.gd-fig { margin: 30px 0; }
.gd-fig svg { display: block; width: 100%; height: auto; }

/* ── Related + the end ────────────────────────────────────────────────────── */

.gd-related { margin: 76px 0 0; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .06); }
.gd-related h2 {
    margin: 0 0 20px;
    font: 500 12px/1 'Geist', system-ui; letter-spacing: .1em; text-transform: uppercase; color: #6b7078;
}
.gd-related-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .gd-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .gd-related-grid { grid-template-columns: minmax(0, 1fr); } }

.gd-end { margin: 46px 0 96px; }
.gd-end-in {
    padding: 34px 36px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(140deg, rgba(124, 140, 236, .09), rgba(124, 140, 236, .012) 52%), #0a0d1a;
}
.gd-end h2 { margin: 0; font: 600 23px/1.2 'Geist', system-ui; letter-spacing: -.028em; color: #f2f3f5; }
.gd-end p { margin: 12px 0 0; max-width: 62ch; font: 400 15.4px/1.62 'Geist', system-ui; color: #a9aeb8; text-wrap: pretty; }
.gd-end-btns { margin-top: 22px; display: flex; gap: 11px; flex-wrap: wrap; }
.gd-btn {
    display: inline-flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 18px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    font: 600 13.5px 'Geist', system-ui; color: #d4d7dd;
    transition: border-color .16s cubic-bezier(.4, 0, .2, 1), color .16s cubic-bezier(.4, 0, .2, 1);
}
.gd-btn:hover { border-color: rgba(255, 255, 255, .25); color: #f2f3f5; }
.gd-btn img { display: block; flex: none; }
/* ONE filled button per page. Blue is the action colour; brand purple stays in
   chrome and never becomes a button. */
.gd-btn-go {
    background: #3b82f6; border-color: transparent; color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 14px -6px rgba(59, 130, 246, .5),
                inset 0 1px 0 rgba(255, 255, 255, .18);
}
.gd-btn-go:hover { background: #2563eb; border-color: transparent; color: #fff; }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.gd-foot { border-top: 1px solid rgba(255, 255, 255, .055); background: #060911; }
.gd-foot-in {
    max-width: 1360px; margin: 0 auto; padding: 30px 40px;
    display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.gd-foot nav { display: flex; gap: 22px; flex-wrap: wrap; font: 400 13.2px 'Geist', system-ui; }
.gd-foot nav a { color: #8b8f97; }
.gd-foot nav a:hover { color: #e6e8ea; }
.gd-foot-note { margin-left: auto; font: 400 12.4px 'Geist', system-ui; color: #4a4e57; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════
   Mobile reading quality is the point of the page, not an afterthought. The
   rail is the only thing that leaves; everything else re-flows. */

@media (max-width: 1180px) {
    .gd-art-cols { grid-template-columns: 190px minmax(0, 1fr); gap: 44px; }
}

@media (max-width: 1000px) {
    /* ⚠️ The TOC becomes a collapsed <details> ABOVE the article rather than
       disappearing. On a phone a long guide is the case where a table of
       contents matters most, and a sticky rail has nowhere to live. */
    .gd-art-cols { display: block; padding-top: 30px; }
    .gd-toc {
        position: static; margin: 0 0 30px; padding: 16px 18px;
        border-radius: 12px; border: 1px solid rgba(255, 255, 255, .07); background: #0a0d1a;
    }
    .gd-toc-in { max-height: none; overflow: visible; padding-right: 0; }
    .gd-art { max-width: none; }
    /* Measured at 375px: the desktop rail's 5px padding gives a 29px row, which
       is a comfortable mouse target and a tight thumb one. On this layout the
       TOC is a box somebody taps, so the rows get real height. */
    .gd-toc a { padding-top: 9px; padding-bottom: 9px; }
}

@media (max-width: 860px) {
    .gd-nav-in, .gd-idx-hero-in, .gd-idx, .gd-art-wrap, .gd-foot-in { padding-left: 22px; padding-right: 22px; }
    /* The nav links go; the brand and the one action stay. A wrapped nav row
       costs more height than it returns in navigation. */
    .gd-nav-links { display: none; }
}

@media (max-width: 620px) {
    .gd-body { font-size: 15.5px; }
    .gd-idx-hero-in { padding-top: 48px; padding-bottom: 40px; }
    .gd-idx { padding-top: 40px; padding-bottom: 64px; }
    .gd-art-head { padding-bottom: 26px; }
    .gd-art > p { font-size: 16.2px; line-height: 1.7; }
    .gd-art h2 { margin-top: 42px; font-size: 23.5px; }
    .gd-art h3 { font-size: 18px; }
    .gd-lede { font-size: 18px !important; }
    .gd-key { font-size: 18.5px !important; padding: 20px 0; }
    .gd-steps > li { padding-left: 38px; }
    .gd-steps > li::before { width: 24px; height: 24px; font-size: 11.5px; }
    .gd-steps > li:not(:last-child)::after { left: 11.5px; top: 31px; }
    .gd-hero-card h2 { font-size: 24px; }
    .gd-end-in { padding: 26px 22px; }
    .gd-end h2 { font-size: 20px; }
    .gd-foot-in { padding-top: 24px; padding-bottom: 24px; gap: 18px; }
    .gd-foot-note { margin-left: 0; }
    /* A drawn channel row wraps its note underneath rather than squeezing it. */
    .gd-ch-note { min-width: 100%; }
    .gd-dc-body { padding: 13px 13px; }
    .gd-tpl-body { font-size: 13px; padding: 14px 15px; }
}

/* Motion is arrival-only and there is very little of it. Anything that moves
   here is a hover response, so reduced motion removes all of it. */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Print ────────────────────────────────────────────────────────────────
   People print and PDF long guides. Cheap to support, and a guide that
   prints as a dark rectangle is a guide nobody keeps. */
@media print {
    .gd-nav, .gd-toc, .gd-end, .gd-related, .gd-skip, .gd-foot nav, .gd-copy { display: none !important; }
    .gd-body { background: #fff; color: #222; }
    .gd-art, .gd-art-wrap { max-width: none; }
    .gd-art h2, .gd-art h3, .gd-art strong, .gd-art-head h1 { color: #000; }
    .gd-art > p, .gd-art li { color: #222; }
    .gd-prod, .gd-note, .gd-tpl, .gd-ch { border-color: #ccc; background: #f7f7f8; }
    .gd-art h2, .gd-art h3 { break-after: avoid; }
    .gd-note, .gd-tpl, .gd-dc, .gd-table-wrap, .gd-steps > li { break-inside: avoid; }
}