/* docs.utilities.best: the documentation (scripts/lib/docs.mjs builds the pages).
   Pages written as bleed's are (Mintlify), in the frame greed's docs use: the pages down the left on
   the page itself, and the page being read in a card with its own bar and its own scroller, "On this
   page" on its right. Poppins, Remix Icon (src/partials/docs-icons.svg) and a dark neutral palette:
   what is lit or chosen is white on a 7% white fill, never coloured; no cyan anywhere (Hector,
   2026-10-25: "clean docs"). Blocks are a faint fill inside a faint 1px edge, 14 to 16px round.
   The dashboard shares these numbers (its design/rules.md, "One spec"); a change to one is a change
   to both. */

/* ---------- fonts. Every font the docs draw waits for its file instead of swapping in a stand-in,
   so no text changes after it's drawn (Hector, 26 Oct: code and "On this page" flickered on reload).
   fonts.css declares them for the main site with swap; these later rules take over here. Poppins,
   Bricolage and JetBrains Mono are preloaded on every page, Inter only on a page with a preview
   (scripts/lib/docs.mjs). Poppins is greed's font and the dashboard's: 400 to 700, Latin. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:block;src:url(/assets/fonts/poppins-400-latin.7d93459d.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:block;src:url(/assets/fonts/poppins-500-latin.cd36de20.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:block;src:url(/assets/fonts/poppins-600-latin.f4e80d9d.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:block;src:url(/assets/fonts/poppins-700-latin.9338e65f.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:block;src:url(/assets/fonts/bricolage-grotesque-500-latin.a79fdb52.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:block;src:url(/assets/fonts/jetbrains-mono-400-latin.83c005d4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:block;src:url(/assets/fonts/inter-400-latin.3100e775.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

body.docs{
  --dc-font:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --dc-discord:"Inter","gg sans","Noto Sans",Helvetica,Arial,sans-serif;   /* Discord previews keep Discord's look */
  --dc-head:#ededed;              /* headings */
  --dc-text:rgba(237,237,237,.7);    /* reading text */
  --dc-soft:rgba(237,237,237,.62);   /* the lead, the sidebar */
  --dc-faint:rgba(237,237,237,.6);   /* labels, meta: the dimmest text may be (CLAUDE.md: 4.5:1 at least) */
  --dc-icon:rgba(255,255,255,.45);   /* an icon at rest; icons aren't text, so they may sit dimmer */
  --dc-icon-on:rgba(255,255,255,.7); /* an icon hovered (a lit row's is white) */
  --dc-edge:rgba(255,255,255,.035);  /* a block's edge: 8 steps above the block, as greed's (the dashboard's --edge) */
  --dc-fill:rgba(255,255,255,.035); /* what a block sits on */
  --dc-fill2:rgba(255,255,255,.07);  /* hovered, chosen */
  --dc-page:#09090a;               /* outside the card, and the sidebar: near black, as greed's (Hector, 26 Oct: "their darker palette makes things look more professional") */
  --dc-card:#0f0f10;               /* the card the page sits in: a complementary dark grey */
  /* motion: the dashboard's three lengths and its one curve, greed's long soft ease-out (one spec for
     both: the dashboard's design/rules.md). A hover answers in 120ms; small UI (a highlight, a tab,
     the copy tick, the search dialog) in 220ms; anything that travels (folds, the phone menu) in
     420ms. docs.js uses the same numbers for what it animates itself. No bounce, ever. */
  --dc-hover:.12s;--dc-ui:.22s;--dc-move:.42s;--dc-ease:cubic-bezier(.22,1,.36,1);
  /* the frame: the card's inset from the window and the height of its bar */
  --dc-inset:9px;--dc-bar:64px;
  background:var(--dc-page);font-family:var(--dc-font);overflow-x:clip;-webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility
}
/* on a phone the page scrolls under a 64px bar; a heading jumped to lands 24px under it (on a
   desktop the card scrolls instead: .dc-scroll) */
html{scroll-padding-top:88px;background:#09090a}
/* the site keeps room for a page scrollbar (site.css); on a desktop the docs' window never scrolls,
   and that empty room made the card's right inset 24px against its 9px elsewhere */
html:has(body.docs){scrollbar-gutter:auto}
/* neutral, never the browser's blue: focus rings and selected text */
body.docs :focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
body.docs ::selection{background:rgba(255,255,255,.2);color:#fff}

/* ---------- the frame: the pages down the left, on the page itself, and the page being read in a
   card beside them with its own bar and its own scrollbar, as greed's docs are (Hector, 26 Oct).
   The card is a step lighter than the page, inside a faint 1px edge, 18px round, 9px in from the
   window's edges. Only the card scrolls; the sidebar and the bar never move. */
.dc{display:flex;height:100vh;height:100dvh;overflow:hidden}
.dc-panel{flex:1;min-width:0;display:flex;flex-direction:column;margin:var(--dc-inset) var(--dc-inset) var(--dc-inset) 0;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:var(--dc-card);overflow:hidden}

/* the card's bar: where you are on the left, the way out on the right */
.dc-head{flex:none;display:flex;align-items:center;gap:16px;height:var(--dc-bar);padding:0 18px 0 28px}
.dc-head .dc-brand{display:none}
.dc-crumb{display:flex;align-items:center;gap:8px;flex:1;min-width:0;overflow:hidden;white-space:nowrap;color:var(--dc-faint);font-size:14px;font-weight:500}
.dc-crumb a{transition:color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-crumb a:hover{color:var(--dc-soft)}}
.dc-crumb__sep{width:12px;height:12px;flex:none;opacity:.6}
.dc-crumb__here{display:inline-flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--dc-head)}
.dc-crumb__here svg{width:15px;height:15px;flex:none;color:var(--dc-faint)}

/* the wordmark is the one place that isn't Poppins: Bricolage 700, tracked tight, as greed sets its
   own name (Hector, 26 Oct). The file is variable, so 700 is drawn, not faked */
.dc-brand{display:flex;align-items:center;gap:9px;font:700 19px/1 "Bricolage Grotesque",var(--dc-font);letter-spacing:-.035em;color:#fff}
.dc-brand__gear{width:22px;height:22px;fill:#fff}
/* Bricolage draws its letters 1px above the middle of its line box (measured: 2.25px of gear above
   the word, 4.25px below), so the word sits high beside the gear; this centres its ink on the gear's */
.dc-brand__gear+span{position:relative;top:1px}
.dc-brand .dc-badge{position:relative;top:.5px}
body.docs :is(h1,h2,h3,h4,h5,h6){font-family:var(--dc-font)}
.dc-badge{padding:4px 7px;border-radius:6px;background:var(--dc-fill2);color:var(--dc-soft);font:600 11px/1 var(--dc-font);letter-spacing:.01em}
.dc-search{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--dc-edge);background:var(--dc-fill);color:var(--dc-faint);font-size:14px;line-height:21px;text-align:left;transition:background-color var(--dc-hover) var(--dc-ease),color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-search:hover{background:var(--dc-fill2);color:var(--dc-soft)}}
.dc-search svg{width:16px;height:16px;flex:none}
.dc-search span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dc-kbd{flex:none;color:var(--dc-faint);font:600 11px/1 var(--dc-font)}
.dc-head__links{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:14px;font-weight:500;color:var(--dc-soft);white-space:nowrap}
.dc-head__links a{transition:color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-head__links a:hover{color:#fff}}
/* the one filled button: back to the main site */
.dc-head__links .dc-head__home{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px 0 14px;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-weight:600;transition:background-color var(--dc-hover) var(--dc-ease),color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-head__links .dc-head__home:hover{background:rgba(255,255,255,.15);color:#fff}}
.dc-head__home svg{width:16px;height:16px}
.dc-head__menu,.dc-head__find{display:none;width:38px;height:38px;flex:none;align-items:center;justify-content:center;border-radius:10px;color:var(--dc-soft)}
.dc-head__menu svg,.dc-head__find svg{width:20px;height:20px}

/* what scrolls in the card: a heading jumped to lands 24px under the card's bar. Its scrollbar is a
   thin rounded pill inside the card, as greed's is, in room that's always kept (a short page has no
   bar, and the column moved 10px between it and a long one). --sb is that room, measured by docs.js
   (none where scrollbars float over the page). It takes the focus after a page is picked with the
   mouse, so the arrow keys scroll it; that's not something to ring. */
.dc-scroll{--sb:10px;flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable;scroll-padding-top:24px}
body.docs .dc-scroll:focus-visible,body.docs .dc-main:focus-visible{outline:none}
.dc-scroll::-webkit-scrollbar{width:10px}
.dc-scroll::-webkit-scrollbar-track,.dc-scroll::-webkit-scrollbar-corner{background:transparent}
.dc-scroll::-webkit-scrollbar-button{display:none;height:0}
.dc-scroll::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:10px;background-color:rgba(255,255,255,.14);background-clip:padding-box}
@media (hover:hover){.dc-scroll::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.24)}}
@supports not selector(::-webkit-scrollbar){.dc-scroll{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}}

/* ---------- the pages down the left: the wordmark at the top (its middle level with the card's
   bar), search under it, then the list, which is the only part that scrolls */
.dc-side{flex:none;width:272px;height:100%;overflow:hidden;transition:width var(--dc-move) var(--dc-ease)}
.dc-side__in{display:flex;flex-direction:column;width:272px;height:100%;padding:0 4px 0 14px;transition:opacity var(--dc-ui) var(--dc-ease)}
/* Hidden with the button in the card's bar, like greed's sidebar (Hector, 26 Oct: "super smooth"):
   the sidebar's width slides to nothing while what's in it keeps its width and fades, so no text
   rewraps as it goes, and the card takes the room with the same 9px inset it has on the other
   sides. It stays hidden while you move between pages (which never reload); docs.js makes it inert
   meanwhile, so Tab can't reach into it either. */
.dc.is-folded .dc-side{width:0}
.dc.is-folded .dc-side__in{opacity:0;pointer-events:none}
.dc-panel{transition:margin-left var(--dc-move) var(--dc-ease)}
.dc.is-folded .dc-panel{margin-left:var(--dc-inset)}
.dc-head__fold{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;margin-left:-8px;border-radius:8px;color:var(--dc-faint);transition:color var(--dc-hover) var(--dc-ease),background-color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-head__fold:hover{color:#fff;background:var(--dc-fill2)}}
.dc-head__fold svg{width:18px;height:18px}
.dc-head__fold-show,.dc.is-folded .dc-head__fold-hide{display:none}
.dc.is-folded .dc-head__fold-show{display:block}
.dc-head__bar{width:1px;height:16px;flex:none;margin-right:2px;background:var(--dc-edge)}
/* level with the card's bar: the card's inset and its 1px edge above it */
.dc-side__top{flex:none;display:flex;align-items:center;justify-content:space-between;height:var(--dc-bar);margin-top:calc(var(--dc-inset) + 1px);padding:0 0 0 10px}
.dc-side__close{display:none}
.dc-side__in>.dc-search{flex:none;width:auto;margin:0 14px 12px 0}
/* a scroll that reaches the list's end stops there, rather than moving the page behind the phone menu */
.dc-nav{flex:1;min-height:0;overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;scrollbar-gutter:stable;padding:4px 6px 40px 0}
/* The list's scrollbar is Discord's: a thin rounded pill, no arrows, shown only while the pointer
   is over the sidebar, in a gutter that's always kept so nothing shifts. docs.js puts .is-hover on
   the list: Chrome never repaints a custom thumb when only :hover changes, but it does for a class. */
.dc-nav::-webkit-scrollbar{width:8px}
.dc-nav::-webkit-scrollbar-track,.dc-nav::-webkit-scrollbar-corner{background:transparent}
.dc-nav::-webkit-scrollbar-button{display:none;height:0}
.dc-nav::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:8px;background-color:transparent;background-clip:padding-box}
.dc-nav.is-hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.16)}
@media (hover:hover){.dc-nav.is-hover::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.26)}}
@supports not selector(::-webkit-scrollbar){
  .dc-nav{scrollbar-width:thin;scrollbar-color:transparent transparent}
  @media (hover:hover){.dc-side:hover .dc-nav{scrollbar-color:rgba(255,255,255,.16) transparent}}
}
.dc-nav__group+.dc-nav__group{margin-top:22px}
.dc-nav__h{margin:0 10px 6px;color:var(--dc-faint);font-size:12.5px;font-weight:500;line-height:18px}
.dc-nav__a{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;border-radius:10px;color:var(--dc-soft);font-size:14px;font-weight:400;transition:color var(--dc-hover) var(--dc-ease),background-color var(--dc-hover) var(--dc-ease)}
.dc-nav.is-still .dc-nav__a,.dc-nav.is-still .dc-nav__a>svg{transition:none}
.dc-nav__a>svg{width:16px;height:16px;flex:none;color:var(--dc-icon);transition:color var(--dc-hover) var(--dc-ease)}
.dc-nav__a span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (hover:hover){.dc-nav__a:hover{color:#fff;background:rgba(255,255,255,.05)}}
.dc-nav__a.is-on{color:#fff;background:var(--dc-fill2);font-weight:500}
@media (hover:hover){.dc-nav__a:hover>svg{color:var(--dc-icon-on)}}
.dc-nav__a.is-on>svg{color:#fff}
/* a section folded away while one of its pages is open: its own row is lit instead, so the list
   still shows where you are (the dashboard does the same) */
.dc-nav__tree:not(.is-open):has(.dc-nav__sub .is-on)>.dc-nav__row>.dc-nav__a{color:#fff;background:var(--dc-fill2);font-weight:500}
.dc-nav__tree:not(.is-open):has(.dc-nav__sub .is-on)>.dc-nav__row>.dc-nav__a>svg{color:#fff}
/* a page with sub-pages: its arrow, at the row's right end, shows or hides them without leaving the
   page; they hang from a faint line under the page's icon */
.dc-nav__row{position:relative}
.dc-nav__row>.dc-nav__a{padding-right:38px}
.dc-nav__fold{position:absolute;top:3px;right:4px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;color:var(--dc-faint);transition:color var(--dc-hover) var(--dc-ease),background-color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-nav__fold:hover{color:#fff;background:rgba(255,255,255,.06)}}
.dc-nav__fold svg{width:13px;height:13px;transition:transform var(--dc-move) var(--dc-ease)}
.dc-nav__tree.is-open .dc-nav__fold svg{transform:rotate(90deg)}
.dc-nav__sub{display:none;margin:2px 0 4px 18px;padding-left:8px;border-left:1px solid rgba(255,255,255,.1)}
.dc-nav__tree.is-open>.dc-nav__sub{display:block}

/* ---------- the page */
.dc-main{flex:1;min-width:0;container-type:inline-size}
/* The reading column is centred in the card, and "On this page" sits in the room to its right.
   Centring the two as a pair left the right side looking emptier, since the list is short (Hector,
   26 Oct). When the card is too narrow for both, the column moves left only as far as it must.
   It's worked out from the card's own width (cqw), so it glides as the sidebar slides. */
/* Centred to the card's own edges, as the dashboard is: the scrollbar's room (--sb, on .dc-scroll)
   sits inside its right edge, so the room measured to the edges is shared out, not the room left of
   the bar. --toc is the room "On this page" takes: its 240px in the flow and the 64px gap. */
.dc-body{--pad:48px;--toc:304px;display:flex;gap:64px;padding:40px var(--pad) 96px}
.dc-body:not(:has(.dc-toc)){--toc:0px}
.dc-doc{flex:0 1 700px;min-width:0;margin-left:clamp(0px,(100cqw + var(--sb) - 2 * var(--pad) - 700px) / 2,100cqw - 2 * var(--pad) - 700px - var(--toc))}
@container (max-width:1000px){.dc-toc{display:none}.dc-body{--pad:40px;--toc:0px}}
.dc-eyebrow{color:var(--dc-faint);font-size:14px;font-weight:500;line-height:20px}
.dc-title{margin-top:6px;font:600 34px/1.2 var(--dc-font);letter-spacing:-.022em;color:var(--dc-head);text-wrap:balance}
.dc-lead{margin-top:8px;color:var(--dc-soft);font-size:17px;line-height:1.6}

/* ---------- what a page is written in */
.dc-prose{margin-top:32px;color:var(--dc-text);font-size:15px;line-height:1.7}
.dc-prose>*+*{margin-top:20px}
.dc-prose>:first-child{margin-top:0}
.dc-prose h2{position:relative;margin-top:44px;font:600 24px/1.35 var(--dc-font);letter-spacing:-.018em;color:var(--dc-head)}
.dc-prose h3{position:relative;margin-top:32px;font:600 18px/1.45 var(--dc-font);letter-spacing:-.01em;color:var(--dc-head)}
.dc-prose h2+h3{margin-top:18px}
.dc-prose h2+*:not(h3){margin-top:12px}
.dc-prose h3+*{margin-top:8px}
.dc-anchor{position:absolute;left:-1em;width:1em;color:var(--dc-faint);opacity:0;transition:opacity var(--dc-hover) var(--dc-ease)}
.dc-anchor:focus-visible{opacity:1}@media (hover:hover){.dc-prose h2:hover .dc-anchor,.dc-prose h3:hover .dc-anchor{opacity:1}}
.dc-prose strong,.dc-prose b{color:#fff;font-weight:600}
.dc-prose a:not(.dc-card):not(.dc-anchor){color:#fff;font-weight:500;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-prose a:not(.dc-card):not(.dc-anchor):hover{text-decoration-color:#fff}}
/* the site makes links unselectable (they are buttons there); in the docs a link is part of a sentence */
.dc-prose a:not(.dc-card),.dc-lead a{-webkit-user-select:text;user-select:text}
.dc-prose ul,.dc-prose ol{padding-left:20px}
.dc-prose ul{list-style:disc}
.dc-prose ol{list-style:decimal}
.dc-prose li+li{margin-top:6px}
.dc-prose li::marker{color:var(--dc-faint)}
.dc-prose code{padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07);color:#e4e5e6;font:500 .875em/1.5 var(--mono);white-space:nowrap}
.dc-prose code.dc-long{white-space:normal;overflow-wrap:anywhere}
/* a Discord permission, drawn as a chip so a list of them reads at a glance: <span class="dc-perm">View Channel</span>;
   several in a row go in <div class="dc-perms"> */
.dc-perm{display:inline-flex;align-items:center;padding:1px 8px;border-radius:7px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:#e4e5e6;font-size:.875em;font-weight:500;line-height:1.65;white-space:nowrap}
.dc-perms{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* @perms: what a feature needs, as the bot says it when one is missing: "Requires:" and
   "BOT Requires:" in its warning yellow (#ffd54e), each followed by its permissions as chips, on the
   docs' one note block */
.dc-req{display:grid;gap:10px;padding:14px 16px;border-radius:14px;border:1px solid var(--dc-edge);background:var(--dc-fill)}
.dc-req__row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:start}
.dc-prose .dc-req__k{color:#ffd54e;font-size:15px;font-weight:600;line-height:26px}
.dc-req__chips{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;align-items:center}
@media (max-width:560px){.dc-req__row{grid-template-columns:1fr;gap:6px}}

/* steps: a number on a line that joins them, the step's title on its own line */
.dc-prose ol.dc-steps{list-style:none;padding:0;counter-reset:step}
.dc-steps>li{position:relative;padding:0 0 24px 44px;counter-increment:step}
.dc-steps>li:last-child{padding-bottom:0}
.dc-steps>li::before{content:counter(step);position:absolute;left:0;top:2px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--dc-edge);background:var(--dc-fill2);color:#fff;font:600 12.5px/1 var(--dc-font)}
.dc-steps>li:not(:last-child)::after{content:"";position:absolute;left:13px;top:36px;bottom:6px;width:1px;background:var(--dc-edge)}
.dc-prose .dc-steps>li+li{margin-top:0}
.dc-step__t{color:#fff;font-weight:600;line-height:30px}
.dc-steps .dc-step__t+p{margin-top:2px}

/* a block of commands to type, and one command's Syntax and Example: a faint edge, a darker inside */
.dc-code,.dc-try{position:relative;padding:2px;border-radius:16px;border:1px solid var(--dc-edge);background:var(--dc-fill)}
.dc-code pre,.dc-try pre{margin:0;padding:12px 16px;border-radius:14px;background:#0c0c0d;overflow-x:auto;font:400 14px/24px var(--mono);color:#d4d4d4;white-space:pre}
.dc-code{display:flex}
.dc-code>pre{flex:1;min-width:0;padding-right:8px;border-radius:14px 0 0 14px}
/* a long line keeps room after its end when it scrolls (a scroll box drops the padding there) */
.dc-code pre::after,.dc-try pre::after{content:"";display:inline-block;width:16px}
.dc-copy{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;color:var(--dc-faint);transition:color var(--dc-hover) var(--dc-ease),background-color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-copy:hover{color:#fff;background:var(--dc-fill2)}}
.dc-copy svg{width:16px;height:16px}
.dc-copy.is-done{color:#57d38c;transition-duration:var(--dc-ui)}
.dc-copy__done,.dc-copy.is-done .dc-copy__copy{display:none}
.dc-copy.is-done .dc-copy__done{display:block}
/* the block's own colour behind it, so a long line scrolls under it instead of through it */
.dc-code>.dc-copy{align-self:stretch;place-items:start center;width:44px;height:auto;padding-top:12px;border-radius:0 14px 14px 0;background:#0c0c0d}
@media (hover:hover){.dc-code>.dc-copy:hover{background:#0c0c0d}}
/* the tabs' bar: 38px, so the chosen tab's underline sits 4px clear of the code under it (Hector,
   26 Oct: it touched the block) */
.dc-try__bar{display:flex;align-items:center;height:38px;padding:0 6px 0 12px}
.dc-try__bar [role=tablist]{display:flex;align-self:stretch;gap:16px}
.dc-try__bar [role=tab]{position:relative;color:var(--dc-faint);font-size:12.5px;font-weight:500;transition:color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-try__bar [role=tab]:hover{color:#fff}}
.dc-try__bar [role=tab][aria-selected="true"]{color:#fff}
.dc-try__bar [role=tab][aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;border-radius:1px;background:#fff}
.dc-try__bar .dc-copy{margin-left:auto}
/* a command in the colours bleed uses */
.dc-kp,.dc-kv{color:#d4d4d4}
.dc-k1,.dc-ka{color:#9cdcfe}
.dc-k2{color:#dcdcaa}

/* notes: one neutral block for every kind (Hector, 26 Oct: the tinted boxes and the tier emoji read
   as four different styles). A kind shows in its icon and its title alone; a plain note has no icon.
   The build draws the icon from the note's kind (NOTE_ICON in scripts/lib/docs.mjs). */
.dc-note{display:flex;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid var(--dc-edge);background:var(--dc-fill);color:var(--dc-text);font-size:15px;line-height:1.65}
.dc-note>svg{flex:none;width:16px;height:16px;margin-top:4px;color:var(--dc-faint)}
.dc-note>div{min-width:0}
.dc-note>div>*+*{margin-top:8px}
.dc-note__t{display:block;color:var(--dc-head);font-size:14.5px;font-weight:600}
.dc-note--tip>svg{color:#57d38c}
.dc-note--warn>svg{color:#f0b232}
.dc-note--t1>svg,.dc-note--t1 .dc-note__t{color:#f1c40f}
.dc-note--t2>svg,.dc-note--t2 .dc-note__t{color:#7dd3fc}

/* sections that fold away: <div class="dc-folds"><details class="dc-fold"><summary>…</summary><div>…</div></details></div> */
.dc-folds{border-radius:16px;border:1px solid var(--dc-edge);overflow:hidden}
.dc-fold+.dc-fold{border-top:1px solid var(--dc-edge)}
.dc-fold>summary{display:flex;align-items:center;gap:14px;padding:13px 20px;color:#ededed;font-size:15.5px;font-weight:500;cursor:pointer;list-style:none;transition:background-color var(--dc-hover) var(--dc-ease)}
.dc-fold>summary::-webkit-details-marker{display:none}
.dc-fold>summary::before{content:"";flex:none;border-style:solid;border-width:4.5px 0 4.5px 7px;border-color:transparent transparent transparent var(--dc-soft);transition:transform var(--dc-move) var(--dc-ease)}
.dc-fold[open]:not(.is-shut)>summary::before{transform:rotate(90deg)}
@media (hover:hover){.dc-fold>summary:hover{background:rgba(255,255,255,.025)}}
.dc-fold>div{padding:4px 20px 20px 41px}
.dc-fold>div>*+*{margin-top:14px}

/* tabs: <div class="dc-tabs"><section data-tab="Server">…</section>…</div> */
.dc-tabs__bar{display:flex;gap:24px;overflow-x:auto;border-bottom:1px solid var(--dc-edge);scrollbar-width:none}
.dc-tabs__bar [role=tab]{position:relative;flex:none;padding:10px 0 12px;color:var(--dc-soft);font-size:15px;font-weight:600;white-space:nowrap;transition:color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-tabs__bar [role=tab]:hover{color:#fff}}
.dc-tabs__bar [role=tab][aria-selected="true"]{color:#fff}
.dc-tabs__bar [role=tab][aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:#fff}
.dc-tabs__pane{padding-top:12px}
.dc-tabs__pane>*+*{margin-top:16px}

/* cards to other pages */
.dc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dc-cards:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.dc-cards>:last-child:nth-child(odd):not(:nth-child(3)){grid-column:span 2}
.dc-card{display:flex;flex-direction:column;padding:20px 22px 22px;border-radius:16px;border:1px solid var(--dc-edge);transition:border-color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-card:hover{border-color:rgba(255,255,255,.22)}}
.dc-card__ic svg{display:block;width:24px;height:24px;color:var(--dc-head)}
.dc-card__t{margin-top:16px;color:#fff;font-size:16px;font-weight:600;line-height:1.4}
.dc-card__d{margin-top:4px;color:var(--dc-soft);font-size:15px;line-height:1.55}

/* a conversation in Discord: somebody types a command and the bot answers, as bleed shows each one */
.dc-chat{user-select:none;-webkit-user-select:none;display:flex;justify-content:center;padding:28px 20px;border-radius:16px;border:1px solid var(--dc-edge);background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/24px 24px,#0d0d0e}
.dc-chat__win{display:grid;gap:16px;width:max-content;max-width:100%;padding:16px 18px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.07);background:#000;font:400 16px/1.375 var(--dc-discord);color:#dbdee1;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.dc-msg{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start}
.dc-msg__av{width:40px;height:40px;border-radius:50%;object-fit:cover}
.dc-chat img{-webkit-user-drag:none;pointer-events:none}
.dc-msg__b{min-width:0}
.dc-msg__hd{display:flex;align-items:center;gap:6px;line-height:22px}
.dc-msg__hd b{color:#f2f3f5;font-weight:500;font-size:16px}
.dc-msg__hd time{margin-left:2px;color:#949ba4;font-size:12px}
.dc-app{display:inline-flex;align-items:center;gap:2px;height:15px;padding:0 4px 0 3px;border-radius:3px;background:#5865f2;color:#fff;font-size:10px;font-weight:600;line-height:15px;text-transform:uppercase}
.dc-app svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dc-msg__t{margin-top:1px;overflow-wrap:anywhere}
.dc-box{position:relative;width:max-content;max-width:100%;margin-top:4px;padding:9px 14px 9px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#111214;overflow-wrap:anywhere}
.dc-box::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;border-radius:8px 0 0 8px;background:var(--bar,transparent)}
.dc-chat b{color:#fff;font-weight:600}
.dc-chat code{padding:0 3px;border-radius:4px;background:#2b2d31;color:#dbdee1;font:400 .85em/1.4 var(--mono)}
.dc-chat small{display:inline-block;color:#949ba4;font-size:12px}
.dc-ping{padding:0 2px;border-radius:3px;background:rgba(88,101,242,.3);color:#c9cdfb;font-weight:500}
.dc-emoji{display:inline-block;width:18px;height:18px;margin:0 1px;vertical-align:-4px}

/* every command of a feature, folded at the end of its page */
.dc-fold__n{margin-left:auto;padding:1px 8px;border-radius:999px;background:var(--dc-fill2);color:var(--dc-soft);font-size:12.5px;font-weight:500}
.dc-folds--cmds .dc-fold>div{padding:0}
.dc-cmds{border-top:1px solid var(--dc-edge)}
.dc-cmd{position:relative;padding:12px 18px}
.dc-cmd+.dc-cmd{border-top:1px solid var(--dc-edge)}
.dc-cmd__top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px}
.dc-prose .dc-cmd__syntax{padding:0;border:0;background:none;color:#fff;font:500 14px/1.5 var(--mono);white-space:normal}
.dc-cmd__arg{color:#9cdcfe;font-weight:400}
.dc-cmd__perms{margin-left:auto;color:var(--dc-faint);font-size:13px}
.dc-prose .dc-cmd__desc,.dc-prose .dc-cmd__alias{margin-top:2px;font-size:14.5px;line-height:1.55}
.dc-cmd__desc{color:var(--dc-soft)}
.dc-cmd__alias{color:var(--dc-faint)}
.dc-prose .dc-cmd__alias code{font-size:.85em}

/* tables */
.dc-table{overflow-x:auto}
.dc-table table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.dc-table th,.dc-table td{padding:8px 16px 8px 0;text-align:left;vertical-align:top}
.dc-table th:last-child,.dc-table td:last-child{padding-right:0}
.dc-table thead th{color:var(--dc-head);font-size:14px;font-weight:600;border-bottom:1px solid var(--dc-edge);white-space:nowrap}
.dc-table tbody th{color:var(--dc-head);font-weight:500}
.dc-table tbody td{color:var(--dc-text);font-variant-numeric:tabular-nums}
.dc-table tbody tr+tr>*{border-top:1px solid var(--dc-edge)}
.dc-table tbody tr:last-child>*{border-bottom:1px solid var(--dc-edge)}
/* code in a table: bleed's 12px pill, and it wraps rather than running into the next column on a phone */
.dc-prose .dc-table code{padding:2px 6px;font-size:12px;line-height:18px;white-space:normal;overflow-wrap:anywhere}
/* a two-column table lines its second column up with the next table's */
.dc-table table:has(thead th:nth-child(2):last-child){table-layout:fixed}
.dc-table table:has(thead th:nth-child(2):last-child) th:first-child{width:40%}

/* previous and next */
.dc-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.dc-pager__a{display:inline-flex;align-items:center;gap:8px;justify-self:start;color:#fff;font-size:15px;font-weight:600;transition:color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-pager__a:hover svg{color:#fff}}
.dc-pager__a svg{width:16px;height:16px;color:var(--dc-soft);transform:scaleX(-1)}
.dc-pager__a--next{justify-self:end;grid-column:2}
.dc-pager__a--next svg{transform:none}

/* ---------- on this page */
/* a box that scrolls clips sideways too, so the lit row's fill (which reaches 10px left of the
   text, to line the text up with the heading) needs that 10px inside the box: padded and pulled
   back out, it lines up as before and isn't cut. It's held 40px under the card's bar, and is never
   taller than what's left of the card below that (with 24px to spare). */
.dc-toc{position:sticky;top:40px;flex:none;width:250px;margin-left:-10px;padding-left:10px;align-self:flex-start;max-height:calc(100dvh - 2 * var(--dc-inset) - var(--dc-bar) - 64px);overflow-y:auto;scrollbar-width:none}
.dc-toc__h{display:flex;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:500;line-height:20px}
.dc-toc__h svg{width:16px;height:16px;color:var(--dc-soft)}
.dc-toc nav{display:flex;flex-direction:column;gap:1px;margin:10px 0 0 -10px}
.dc-toc__l{padding:5px 10px;border-radius:8px;color:var(--dc-soft);font-size:14px;line-height:20px;transition:color var(--dc-ui) var(--dc-ease),background-color var(--dc-ui) var(--dc-ease)}
.dc-toc nav.is-still .dc-toc__l{transition:none}
.dc-toc__l--sub{padding-left:24px}
@media (hover:hover){.dc-toc__l:hover{color:#fff}}
.dc-toc__l.is-on{color:#fff;background:var(--dc-fill2);font-weight:500}

/* ---------- an address that is not a page: the page's own column, centred both ways in the card
   (a little above the middle, as the body's padding is deeper below), and three ways on. The
   Introduction is the one filled button, the bar's Home; search and the support server are the
   sidebar's search box, Ctrl K and all. */
.dc-body--gone{min-height:calc(100dvh - 2 * var(--dc-inset) - 2px - var(--dc-bar));align-items:center}
.dc-gone{text-align:center}
.dc-gone__go{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
.dc-gone__a{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--dc-edge);background:var(--dc-fill);color:var(--dc-soft);font-size:14px;font-weight:500;white-space:nowrap;transition:background-color var(--dc-hover) var(--dc-ease),color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.dc-gone__a:hover{background:var(--dc-fill2);color:#fff}}
.dc-gone__a--main{gap:4px;padding:0 10px 0 14px;border-color:transparent;background:rgba(255,255,255,.1);color:#fff;font-weight:600}
@media (hover:hover){.dc-gone__a--main:hover{background:rgba(255,255,255,.15)}}
.dc-gone__a svg{width:16px;height:16px;flex:none}
@media (max-width:880px){
  .dc-body--gone{min-height:calc(100dvh - var(--dc-bar) - 1px)}
  .dc-gone__go{flex-direction:column;align-items:stretch;max-width:320px;margin:28px auto 0}
}

/* ---------- search */
/* The dialog, in the card's colours: the page dims and softens behind it, the box rises 8px into
   place. A field with the lens, then a list of a fixed height (so the box never changes size while
   you type), then the keys. Each result is the page's own icon in a small tile, where it sits in
   grey above its name, and an arrow on the chosen one. The field has no ring: the caret is where
   you are, and a ring there was cut off by the box's round top (Hector, 26 Oct). */
.dc-find{position:fixed;inset:0;z-index:50;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.dc-find[hidden]{display:none}
.dc-find__box{display:flex;flex-direction:column;width:100%;max-width:640px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:#151516;box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden}
.dc-find__field{flex:none;display:flex;align-items:center;gap:12px;height:58px;padding:0 14px 0 18px;border-bottom:1px solid rgba(255,255,255,.07);cursor:text}
.dc-find__field>svg{width:18px;height:18px;flex:none;color:var(--dc-faint)}
.dc-find__field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:#fff;font:400 16px var(--dc-font)}
body.docs .dc-find__field input:focus-visible{outline:0}
.dc-find__field input::placeholder{color:var(--dc-faint)}
.dc-find__field input::-webkit-search-cancel-button{display:none}
/* a key, as the dialog draws one: Esc, the arrows, enter */
.dc-key{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);color:var(--dc-soft);font:600 11px/1 var(--dc-font)}
.dc-key svg{width:12px;height:12px}
/* its scrollbar shows only while the pointer is over the list, as the sidebar's does */
.dc-find__results{height:min(360px,52vh);overflow-y:auto;padding:6px 8px 8px;scrollbar-width:thin;scrollbar-color:transparent transparent}
@media (hover:hover){.dc-find__results:hover{scrollbar-color:rgba(255,255,255,.14) transparent}}
.dc-find__label{padding:8px 10px 6px;color:var(--dc-faint);font-size:12.5px;font-weight:600}
.dc-find__empty{padding:40px 12px;color:var(--dc-faint);text-align:center;font-size:14px}
.dc-find__item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;color:var(--dc-soft)}
.dc-find__ic{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.dc-find__ic svg{width:16px;height:16px;color:var(--dc-faint)}
.dc-find__tx{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.dc-find__path{display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;color:var(--dc-faint);font-size:12.5px;line-height:18px}
.dc-find__sep{width:9px;height:9px;flex:none;opacity:.7}
.dc-find__item b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#e4e5e6;font-size:14.5px;font-weight:600;line-height:21px}
.dc-find__item mark{background:none;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.dc-find__go{width:14px;height:14px;flex:none;color:var(--dc-soft);opacity:0}
.dc-find__item.is-on{background:rgba(255,255,255,.07)}
.dc-find__item.is-on .dc-find__ic svg{color:#fff}
.dc-find__item.is-on .dc-find__go{opacity:1}
.dc-find__foot{flex:none;display:flex;align-items:center;gap:18px;height:44px;padding:0 16px;border-top:1px solid rgba(255,255,255,.07);color:var(--dc-faint);font-size:12.5px}
.dc-find__foot span{display:inline-flex;align-items:center;gap:4px}
.dc-find__foot span .dc-key:last-of-type{margin-right:4px}

/* ---------- smaller screens */
@media (max-width:1100px){.dc-head__links{gap:18px}.dc-head__links a:first-child{display:none}}
/* a phone: no card. The page scrolls under a bar with the menu, the wordmark and search, and the
   pages slide in from the left */
@media (max-width:880px){
  /* a sideways swipe is the menu's (docs.js), and a code block's own scroll: never the browser's
     "swipe back", which took the page away mid-gesture */
  html,.dc-code pre,.dc-try pre,.dc-table,.dc-tabs__bar{overscroll-behavior-x:none}
  .dc{display:block;height:auto;overflow:visible}
  .dc-panel{display:block;margin:0;border:0;border-radius:0;background:none;overflow:visible}
  .dc-scroll{overflow:visible}
  .dc-head{position:sticky;top:0;z-index:20;gap:6px;padding:0 10px;background:rgba(9,9,10,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--dc-edge)}
  .dc-head .dc-brand{display:flex}
  .dc-crumb,.dc-head__links,.dc-head__fold,.dc-head__bar{display:none}
  .dc-side__in{width:auto;opacity:1}
  .dc.is-folded .dc-side{width:min(300px,86vw)}
  .dc.is-folded .dc-side__in{opacity:1;pointer-events:auto}
  .dc.is-folded .dc-panel{margin-left:0}
  .dc-head__menu,.dc-head__find{display:flex}
  .dc-head__find{margin-left:auto}
  /* a height of its own, not one implied by top and bottom: Safari reads the list's height:100% as
     auto without it, so the list grew to its full length, was cut off and never scrolled (Hector,
     27 Oct: "the sidebar got stuck") */
  .dc-side{position:fixed;left:0;top:0;z-index:40;width:min(300px,86vw);height:100vh;height:100dvh;background:var(--dc-page);border-right:1px solid var(--dc-edge);visibility:hidden;transform:translateX(-100%)}
  .dc-side{transition:transform var(--dc-move) var(--dc-ease),visibility 0s linear var(--dc-move)}
  .dc.is-open .dc-side{visibility:visible;transform:none;transition:transform var(--dc-move) var(--dc-ease),visibility 0s}
  .dc-side__top{height:60px;margin:0 8px 0 0}
  .dc-side__close{display:flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:9px;color:var(--dc-soft)}
  .dc-side__close svg{width:16px;height:16px}
  .dc-scrim{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.6)}
  .dc-body{--pad:20px;--sb:0px;padding:28px var(--pad) 72px}
  .dc-title{font-size:30px}
  .dc-lead{font-size:16.5px}
  .dc-prose{margin-top:28px}
  .dc-cards,.dc-cards:has(>:nth-child(3):last-child){grid-template-columns:1fr}
  .dc-cards>:last-child:nth-child(odd):not(:nth-child(3)){grid-column:auto}
  .dc-cmd__perms{margin-left:0;flex-basis:100%}
  .dc-chat{padding:16px 10px}
  .dc-chat__win{padding:12px;font-size:14px}
  .dc-msg{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .dc-msg__av{width:34px;height:34px}
}
@media (hover:none){.dc-kbd[data-kbd],.dc-find__foot,.dc-find__field .dc-key{display:none}}

/* ---------- the account at the foot of the sidebar (account.js), as the dashboard's: a white-5%
   card 46px tall, radius 12, the 40px round avatar over its left edge, the name with a chevron
   and @username under it; its menu opens upward. Signed out, a white Login button. */
.dc-acct{flex:none;position:relative;margin:8px 14px 10px 0}   /* the dashboard's .side__foot: 8px above, 14px from the right, and the sidebar's 10px below */
.acct-login{display:flex;align-items:center;justify-content:center;height:40px;border-radius:10px;background:#fff;color:#0a0a0a;font:500 14px/1 var(--dc-font);transition:background-color var(--dc-hover) var(--dc-ease)}
@media (hover:hover){.acct-login:hover{background:#e4e4e7}}
.acct-who{position:relative;display:flex;align-items:center;gap:8px;width:calc(100% - 16px);height:46px;margin-left:16px;padding:0 10px 0 34px;border-radius:12px;background:rgba(255,255,255,.05);text-align:left;font-family:var(--dc-font);transition:background-color 120ms cubic-bezier(.22,1,.36,1)}
.acct-who:active{background:rgba(255,255,255,.07)}@media (hover:hover){.acct-who:hover{background:rgba(255,255,255,.07)}}
.acct-who__av{position:absolute;left:-16px;top:3px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08)}
.acct-who__n{flex:1;min-width:0;display:grid;gap:1px}
.acct-who__n b{display:flex;align-items:center;gap:4px;min-width:0;color:#ededed;font-size:13.5px;font-weight:600;line-height:18px}
.acct-who__n b>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-who__n b>svg{width:12px;height:12px;flex:none;color:rgba(255,255,255,.45)}
.acct-who__n>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(237,237,237,.62);font-size:11px;line-height:14px}

.dc-acct .acct-name,.dc-acct .acct-user{font-family:var(--dc-font),"Segoe UI","Segoe UI Symbol","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Noto Sans Math","Cambria Math","Noto Sans Arabic",sans-serif}