/* docs.utilities.best: the documentation (scripts/lib/docs.mjs builds the pages).
   Built off bleed's docs (Mintlify), which Hector holds up as the bar: a bar across the top, the
   pages down the left, the page in the middle and "On this page" on the right. Inter for reading,
   Phosphor outline icons (the main site's set, unfilled), the site's black and its one cyan accent. Blocks are a faint fill inside a
   faint 1px edge, 16px round, as bleed's are; nothing white and filled, no motion beyond a colour. */

body.docs{
  --dc-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --dc-head:#e4e5e6;              /* headings: bleed's off-white, softer than pure white */
  --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,.45);  /* labels, meta */
  --dc-edge:rgba(255,255,255,.1);    /* a block's edge */
  --dc-fill:rgba(255,255,255,.04);   /* what a block sits on */
  --dc-fill2:rgba(255,255,255,.07);  /* hovered, chosen */
  --dc-page:#0f0f10;               /* the page: a soft charcoal, as bleed's and greed's are, not pitch black */
  background:var(--dc-page);font-family:var(--dc-font);overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility
}
/* the bar is 64px tall; a heading jumped to lands 24px under it */
html{scroll-padding-top:88px;background:#0f0f10}

/* ---------- the bar across the top */
.dc-head{position:sticky;top:0;z-index:20;height:64px;background:rgba(15,15,16,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
/* held to the page's width, like the columns under it: brand | search in the middle | links */
.dc-head__in{display:grid;grid-template-columns:1fr minmax(0,460px) 1fr;align-items:center;gap:24px;max-width:1440px;height:100%;margin:0 auto;padding:0 32px}
.dc-brand{display:flex;align-items:center;gap:9px;justify-self:start;font:600 17px/1 var(--display);letter-spacing:-.01em;color:#fff}
.dc-brand__gear{width:22px;height:22px;fill:#fff}
.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:12px;border:1px solid var(--dc-edge);background:var(--dc-fill);color:var(--dc-faint);font-size:14px;text-align:left;transition:background-color .15s ease,color .15s 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;justify-self:end;font-size:14px;font-weight:500;color:var(--dc-soft);white-space:nowrap}
.dc-head__links a{transition:color .15s 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(166,228,245,.16);color:#d9f4fb;font-weight:600;transition:background-color .15s ease,color .15s ease}
@media (hover:hover){.dc-head__links .dc-head__home:hover{background:rgba(166,228,245,.26);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}

/* ---------- the pages down the left */
.dc{display:flex;max-width:1440px;margin:0 auto}
.dc-side{position:sticky;top:64px;flex:none;width:268px;height:calc(100vh - 64px);height:calc(100dvh - 64px);padding:28px 12px 40px 20px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.dc-side__top{display:none}
.dc-nav__group+.dc-nav__group{margin-top:28px}
.dc-nav__h{margin:0 10px 8px;color:var(--dc-head);font-size:14px;font-weight:600;line-height:20px}
.dc-nav__a{display:flex;align-items:center;gap:11px;min-height:34px;padding:0 10px;border-radius:10px;color:var(--dc-soft);font-size:14px;font-weight:400;transition:color .15s ease,background-color .15s ease}
.dc-nav__a>svg{width:16px;height:16px;flex:none}
.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:var(--acc);background:rgba(166,228,245,.08);font-weight:500}
/* a page with sub-pages shows them under it while you're on it or one of them */
.dc-nav .dc-nav__chev{width:13px;height:13px;margin-left:2px;opacity:.6}
.dc-nav__tree.is-open .dc-nav__chev{transform:rotate(90deg)}
.dc-nav__sub{display:none;margin:2px 0 4px 12px}
.dc-nav__tree.is-open>.dc-nav__sub{display:block}

/* ---------- the page */
.dc-main{flex:1;min-width:0}
.dc-body{display:flex;justify-content:center;gap:64px;padding:40px 48px 96px}
.dc-doc{width:100%;max-width:700px;min-width:0}
.dc-eyebrow{color:var(--acc);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:18px;line-height:1.55}

/* ---------- what a page is written in */
.dc-prose{margin-top:32px;color:var(--dc-text);font-size:16px;line-height:1.75}
.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}
.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:var(--acc);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease}
@media (hover:hover){.dc-prose a:not(.dc-card):not(.dc-anchor):hover{color:var(--acc)}}
/* 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: who needs what, on the grey note's own card, with a shield where the note has its info icon */
.dc-req{display:flex;gap:12px;padding:14px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06)}
.dc-req>svg{flex:none;width:18px;height:18px;margin-top:5px;color:var(--dc-soft)}
.dc-req__rows{display:grid;gap:8px;min-width:0}
.dc-req__row{display:flex;align-items:center;gap:12px}
.dc-req__k{flex:none;width:112px;color:rgba(237,237,237,.82);font-size:15px}
.dc-req__v{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.dc-req__where{color:var(--dc-faint);font-size:14px}
@media (max-width:560px){.dc-req__row{flex-direction:column;align-items:flex-start;gap:6px}.dc-req__k{width:auto}.dc-req__k:empty{display:none}}

/* 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 .15s ease,background-color .15s 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}
/* 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}}
.dc-try__bar{display:flex;align-items:center;height:34px;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 .15s ease}
@media (hover:hover){.dc-try__bar [role=tab]:hover{color:#fff}}
.dc-try__bar [role=tab][aria-selected="true"]{color:var(--acc)}
.dc-try__bar [role=tab][aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:1px;background:var(--acc)}
.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}

/* callouts: tinted, with an edge of their own colour */
.dc-note{display:flex;gap:12px;padding:14px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);color:rgba(237,237,237,.82);font-size:15px;line-height:1.65}
.dc-note>svg,.dc-note>img{flex:none;width:18px;height:18px;margin-top:3px;color:var(--dc-soft)}
.dc-note>div{min-width:0}
.dc-note>div>*+*{margin-top:8px}
.dc-note--tip{border-color:#22603d;background:#0f2a1b;color:#8be4b0}
.dc-note--tip>svg{color:#57d38c}
.dc-note--warn{border-color:#6e5016;background:#30250b;color:#f7cd6a}
.dc-note--warn>svg{color:#f0b232}
.dc-note--tip strong,.dc-note--warn strong,.dc-note--tip b,.dc-note--warn b,.dc-note--tip a,.dc-note--warn a{color:inherit}
.dc-prose .dc-note--tip code,.dc-prose .dc-note--warn code,.dc-prose .dc-note--t1 code,.dc-prose .dc-note--t2 code{color:inherit;background:rgba(0,0,0,.28)}
.dc-note--t1 strong,.dc-note--t2 strong{color:#fff}

/* a tier note wears the bot's tier emoji, in that tier's colour: Tier 1 gold, Tier 2 sky */
.dc-note--t1{border-color:rgba(241,196,15,.32);background:rgba(241,196,15,.06);color:rgba(237,237,237,.82)}
.dc-note--t1 .dc-note__t{color:#f1c40f}
.dc-note--t2{border-color:rgba(125,211,252,.32);background:rgba(125,211,252,.06);color:rgba(237,237,237,.82)}
.dc-note--t2 .dc-note__t{color:#7dd3fc}
.dc-note>.dc-note__tier{width:20px;height:20px;margin-top:2px}
.dc-note__t{display:block;color:#fff;font-weight:600}

/* 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 .15s 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)}
.dc-fold[open]>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(--line);scrollbar-width:none}
.dc-tabs__bar [role=tab]{position:relative;flex:none;padding:10px 0 12px;color:var(--dc-head);font-size:15px;font-weight:600;white-space:nowrap;transition:color .15s ease}
@media (hover:hover){.dc-tabs__bar [role=tab]:hover{color:var(--acc)}}
.dc-tabs__bar [role=tab][aria-selected="true"]{color:var(--acc)}
.dc-tabs__bar [role=tab][aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--acc)}
.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 .15s ease}
@media (hover:hover){.dc-card:hover{border-color:rgba(166,228,245,.4)}}
.dc-card__ic svg{display:block;width:24px;height:24px;color:var(--acc)}
.dc-card__t{margin-top:16px;color:#fff;font-size:16px;font-weight:600;line-height:1.4}
.dc-card__go{display:none}
.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-font);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(--line)}
.dc-table tbody tr:last-child>*{border-bottom:1px solid var(--line)}
/* 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 .15s ease}
@media (hover:hover){.dc-pager__a:hover{color:var(--acc)}}
.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 */
.dc-toc{position:sticky;top:104px;flex:none;width:240px;align-self:flex-start;max-height:calc(100vh - 128px);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;margin-top:10px}
.dc-toc__l{padding:5px 0;color:var(--dc-soft);font-size:14px;line-height:20px;transition:color .15s ease}
.dc-toc__l--sub{padding-left:14px}
@media (hover:hover){.dc-toc__l:hover{color:#fff}}
.dc-toc__l.is-on{color:var(--acc);font-weight:500}

/* ---------- an address that is not a page */
.dc-gone{padding-top:40px}
.dc-gone__go{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:28px;font-weight:600}
.dc-gone__go a{color:var(--acc)}
.dc-gone__go button{color:var(--dc-soft)}
@media (hover:hover){.dc-gone__go button:hover{color:#fff}}

/* ---------- search */
.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,.6)}
.dc-find[hidden]{display:none}
.dc-find__box{width:100%;max-width:600px;border-radius:16px;border:1px solid var(--dc-edge);background:#111214;box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden}
.dc-find__field{display:flex;align-items:center;gap:12px;height:54px;padding:0 16px;border-bottom:1px solid var(--dc-edge)}
.dc-find__field svg{width:16px;height:16px;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)}
.dc-find__field input::placeholder{color:var(--dc-faint)}
.dc-find__field input::-webkit-search-cancel-button{display:none}
.dc-find__results{max-height:min(420px,60vh);overflow-y:auto;padding:8px}
.dc-find__empty{padding:28px 12px;color:var(--dc-faint);text-align:center;font-size:14px}
.dc-find__item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;color:var(--dc-soft)}
.dc-find__item b{color:#fff;font-weight:600;font-size:14.5px}
.dc-find__item span{color:var(--dc-faint);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-find__item.is-on{background:var(--dc-fill2)}
.dc-find__item mark{background:none;color:var(--acc)}

/* ---------- smaller screens */
@media (max-width:1280px){.dc-toc{display:none}.dc-body{padding:40px 40px 96px}}
@media (max-width:1100px){.dc-head__in{gap:16px;padding:0 20px}.dc-head__links{gap:18px}.dc-head__links a:first-child{display:none}}
@media (max-width:880px){
  .dc-head__in{display:flex;gap:6px;padding:0 10px}
  .dc-head__menu,.dc-head__find{display:flex}
  .dc-head .dc-search,.dc-head__links{display:none}
  .dc-head__find{margin-left:auto}
  .dc-side{position:fixed;left:0;top:0;bottom:0;z-index:40;width:min(300px,86vw);height:auto;padding:0 12px 32px 14px;background:var(--dc-page);border-right:1px solid var(--line);visibility:hidden;transform:translateX(-100%)}
  .dc.is-open .dc-side{visibility:visible;transform:none}
  .dc-side__top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;height:60px;margin-bottom:8px;padding:0 0 0 10px;background:var(--dc-page);color:var(--dc-faint);font-size:13px;font-weight:600}
  .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:19px;height:19px}
  .dc-scrim{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.6)}
  .dc-body{padding:28px 20px 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]{display:none}}
