/* ═══════════════════════════════════════════════════════════════════════════
   manual-xdoc-anonimos.css — a veste do capítulo dos ANÔNIMOS do X-DOC
   Consumidores: manual-xdoc-anonimos.html
   ⚠️ RECORTE VERBATIM do <style> inline (LOOP 05, 04/09/2026): ainda sem edição en/es — a folha nasce cacheável e no mesmo padrão dos irmãos (R9: ⛔ não deixar metade dos manuais inline e metade em folha).
   ⛔ NÃO devolva estas regras para dentro do HTML de uma das páginas: elas eram
      IDÊNTICAS byte a byte nas cópias e é isso que torna a folha legítima. Duas
      cópias divergem no primeiro conserto (R5 desta casa).
   ⚠️ A ORDEM das regras é a original — ⛔ não reordene, ⛔ não "agrupe por tema":
      a cascata desta folha é a cascata que o inline tinha.
   ═══════════════════════════════════════════════════════════════════════════ */

html,body{margin:0;background:var(--bg-base);color:var(--text);font-family:Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:var(--accent)}a:hover{color:var(--accent-strong)}
/* ⚠️ O <defs> NÃO OCUPA LINHA (contrato do lacrado): position:absolute, senão sobra tira no topo. */
.xd-defs{position:absolute;width:0;height:0;overflow:hidden}
/* 🔒 Um só ouro para X-DOC, o MESMO do app. ⛔ NÃO inventar segundo dourado — o anônimo é
   da mesma família e usa o mesmo acento; o que muda é a PALETA DA ARTE da capa. */
/* 🥇 O OURO VALE NO CAPÍTULO INTEIRO (04/09/2026, Tony: "porque a cor está rosa da citação?").
   Antes o `--accent` só era trocado dentro do `.xd-hero`, então TUDO abaixo da banda — a
   `.mp-note`, o kicker `.mp-kk`, os links do corpo e do pé — caía no rosa da sessão X-AVATAR
   que vem do `:root` do tokens.css/styles.css. As quatro folhas do X-DOC tinham o mesmo
   defeito, e foram consertadas JUNTAS: capítulo do X-DOC é dourado de cima a baixo.
   ⛔ NÃO devolver o `--accent` para dentro do `.xd-hero` só nesta folha: as quatro
      divergiriam, e é a divergência que ninguém revisa depois.
   ⚠️ `--accent-bg` sai de `color-mix` sobre o ouro, ⛔ não de um hex novo: assim ele
      funciona nos DOIS temas (o rosa tinha dois valores fixos, um por tema). */
:root{--xd-gold:oklch(0.62 0.11 78);--xd-deep:oklch(0.45 0.1 72)}
.theme-dark{--xd-gold:oklch(0.8 0.11 84);--xd-deep:oklch(0.72 0.1 80)}
/* ⚠️ NO `.mp` (o CORPO do capítulo), ⛔ NÃO no `:root` nem no `body` (04/09/2026): o `@media (prefers-color-scheme:dark)` do
   tokens.css declara o `--accent` em `html:not(.theme-light)`, que tem especificidade (0,1,1)
   e VENCE um `:root` (0,1,0) — em máquina de SO escuro o rosa voltava. Declaração DIRETA no
   descendente vence qualquer valor HERDADO do `html`, em qualquer tema e sem guerra de peso.
   ⚠️ E é o `.mp`, ⛔ não o `body`: a `.mw-bar` ("Carteira PING · Capítulo 03"), o índice
      `.mw-toc` e a pílula de idioma ficam FORA do `.mp` — são o chrome do MANUAL DA CARTEIRA,
      igual nos capítulos 01, 02 e 04, e seguem no rosa da sessão. Douro o que é X-DOC (o teor
      do capítulo), ⛔ não a moldura do manual.
   ⛔ NÃO subir isto para o `body` nem para o `:root`. */
.mp{--accent:var(--xd-gold);--accent-strong:var(--xd-deep);--accent-bg:color-mix(in oklab,var(--xd-gold) 13%,transparent)}
.theme-dark .mp,html.theme-dark .mp{--accent-strong:oklch(0.88 0.1 86);--accent-bg:color-mix(in oklab,var(--xd-gold) 17%,transparent)}
@media(prefers-color-scheme:dark){html:not(.theme-light) .mp{--accent-strong:oklch(0.88 0.1 86);--accent-bg:color-mix(in oklab,var(--xd-gold) 17%,transparent)}}

/* 🖼 A CAPA DE PERFIL (mesmo contrato das outras três): arte em faixa própria, largura cheia.
   ⚠️ A ARTE CHEGOU (04/09/2026, Tony): `img/xdoc-anonimos-hero.webp` — multidão de costas,
   ninguém de frente, cada pessoa erguendo o MESMO documento selado. 1400×600 nativo, 221 KB.
   ⛔ NÃO voltar ao degradê de neblina que morava aqui: ele tinha uma BANDA CLARA no meio
      (#8b9099 a 68%) e a arte respira até 80% de opacidade — a cor de baixo aparece no vale,
      então uma banda clara CLAREARIA a arte numa faixa horizontal, ao contrário do contrato
      do lacrado ("a arte escurece de leve em vez de clarear"). A cor de carregamento tem de
      ser mais ESCURA que a arte. Este azul-quase-preto é o próprio céu do topo da
      ilustração, na mesma família do `--xd-pan` dos painéis desta folha.
   ⛔ NÃO pôr a arte como fundo do bloco de texto (foi o print do Tony no lacrado). */
.xd-cover{position:relative;width:100%;aspect-ratio:1400/600;overflow:hidden;background:oklch(0.145 0.012 260)}
.xd-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;color:transparent;pointer-events:none;user-select:none;animation:xdCoverBreath 3s ease-in-out infinite}
@keyframes xdCoverBreath{0%,100%{opacity:1}50%{opacity:.8}}
@media(prefers-reduced-motion:reduce){.xd-cover>img{animation:none;opacity:1}}
/* 🌑 o pé da capa se dissolve na banda (a paleta já termina em calçada escura — fade curto) */
.xd-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14%;background:linear-gradient(to bottom,transparent 0%,color-mix(in oklab,var(--bg-base) 55%,transparent) 56%,var(--bg-base) 100%);z-index:1;pointer-events:none}
/* 🏅 O SELO FLUTUANTE NO ALTO-ESQUERDO (como no assinado): nesta paleta o bolsão calmo é o
   céu quase preto do topo — a meia-altura é a banda de neblina, clara, onde a tinta clara
   perderia contraste. */
.xd-stamp{position:absolute;left:clamp(18px,4.5vw,54px);top:clamp(14px,3.8vw,42px);z-index:2;display:flex;flex-direction:column;gap:clamp(7px,1.3vw,12px);max-width:min(52%,420px)}
/* 🔒 O GLIFO É O DO PRODUTO, levantado verbatim de mnDocIc — ramo `anon && big` (folha preta
   url(#xdK), contorno #fffdf9 sw 1.6; disco preto r 10 sw 1.4 com o VULTO branco dentro:
   cabeça r 3 em cy 34.2 + ombros M26.6 43.4a6.4 6.4 0 0 1 12.8 0z).
   ⛔ NÃO redesenhar glifo: mudou no app, levanta de novo. */
.xd-glyph{display:block;height:auto}
.xd-stamp-row{display:flex;align-items:center;gap:clamp(5px,.9vw,9px)}
.xd-stamp-row>.xd-glyph{width:clamp(28px,5vw,56px)}
.xd-stamp-row>.xd-glyph{filter:drop-shadow(0 1px 2px oklch(0.1 0.02 260/.9)) drop-shadow(0 2px 6px oklch(0.1 0.02 260/.7)) drop-shadow(0 0 16px oklch(0.1 0.02 260/.5))}
/* 🔤 CONTORNO PRETO, não só halo (lição de 2026-08-23 no mobile): sobre a neblina a
   luminância do fundo varia de céu quase preto a cinza claro — sombra difusa não segura nas
   partes claras. `paint-order:stroke` desenha o contorno POR FORA do glifo. */
.xd-stamp b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(1.1rem,3vw,2rem);line-height:1.1;letter-spacing:-.01em;color:oklch(0.99 0.005 85);paint-order:stroke fill;-webkit-text-stroke:1.4px oklch(0.12 0.025 260/.75);text-shadow:0 1px 2px oklch(0.1 0.02 260/.95),0 2px 6px oklch(0.1 0.02 260/.75),0 0 18px oklch(0.1 0.02 260/.55)}
.xd-stamp em{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:clamp(.53rem,1.15vw,.65rem);font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:oklch(0.93 0.02 250);paint-order:stroke fill;-webkit-text-stroke:1px oklch(0.12 0.025 260/.75);text-shadow:0 1px 2px oklch(0.1 0.02 260/.95),0 1px 5px oklch(0.1 0.02 260/.75),0 0 9px oklch(0.1 0.02 260/.55)}
/* 📐 estreito é de CONTÊINER, nunca de viewport (CLAUDE.md 5b) */
.xd-cover-w{container-type:inline-size}
@container (max-width:620px){.xd-cover{aspect-ratio:3/2}
  .xd-cover>img{object-position:50% center}
  .xd-stamp{left:clamp(16px,5cqw,26px);top:clamp(14px,4.6cqw,26px);max-width:64%}
  .xd-stamp-row>.xd-glyph{width:clamp(24px,7cqw,34px)}
  .xd-stamp b{font-size:clamp(1.15rem,5.6cqw,1.6rem)}
  .xd-stamp em{font-size:clamp(.48rem,2.1cqw,.56rem);letter-spacing:.13em}}
.xd-hero{--accent:var(--xd-gold);background:var(--bg-base);border-bottom-color:color-mix(in oklab,var(--xd-gold) 26%,transparent)}
.xd-hero .mw-hero-in{z-index:2;text-shadow:none;max-width:900px}
@media(min-width:820px){.xd-hero .mw-hero-in{padding-top:26px;padding-bottom:42px}}
.xd-hero .mw-meta a:hover{color:var(--xd-gold)}
.xd-kk-ic{color:var(--xd-gold)}
.xd-kk-ic svg{display:block;filter:drop-shadow(0 1.5px 2px oklch(0.2 0.02 80 / .26))}
.theme-dark .xd-kk-ic svg{filter:drop-shadow(0 1px 3px oklch(0.62 0.11 78 / .3))}
.xd-kk-ic .xd-glyph{width:15px}
/* 🌀 OS ANÉIS DO SUMÁRIO SAÍRAM DAQUI (04/09/2026): a arte era idêntica nas quatro folhas de
   X-DOC e agora vive em UMA cópia, no `manual.css`, escopada em `.xd-toc-w`. O comentário com
   a conta do degradê (closest-side, os 2px de folga, o porquê do `[open]`) foi com ela.
   ⛔ NÃO trazer de volta para cá: cinco cópias da mesma arte foi o que causou o conserto. */
/* cartões — 4 pede coluna explícita (contrato do lacrado); .tri vence por especificidade. */
.xd-g-w{container-type:inline-size;margin:24px 0 0}
.xd-g{display:grid;grid-template-columns:1fr;gap:13px}
@container (min-width:430px){.xd-g{grid-template-columns:repeat(2,1fr)}}
@container (min-width:790px){.xd-g{grid-template-columns:repeat(4,1fr)}}
@container (min-width:640px){.xd-g.tri{grid-template-columns:repeat(3,1fr)}}
.xd-c-ic{color:var(--xd-gold);margin:0 0 2px}
.xd-c-ic svg{display:block;width:23px;height:23px}
.xd-c{display:flex;flex-direction:column;gap:6px;padding:16px 17px 17px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev)}
.xd-c em{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--xd-deep)}
.xd-c b{font-size:.95rem;font-weight:600;letter-spacing:-.005em}
.xd-c p{margin:0;font-size:.83rem;line-height:1.58;color:var(--text-mute);text-wrap:pretty}
/* duas colunas: pode / não pode */
.xd-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 0}
@media(max-width:760px){.xd-two{grid-template-columns:1fr}}
.xd-col{padding:17px 18px 18px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev)}
.xd-col>b{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;font-family:"Geist Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.xd-col.yes>b{color:oklch(0.5 0.12 155)}
.xd-col.no>b{color:oklch(0.53 0.19 26)}
.theme-dark .xd-col.yes>b{color:oklch(0.76 0.13 158)}
.theme-dark .xd-col.no>b{color:oklch(0.72 0.16 28)}
.xd-col ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.xd-col li{font-size:.86rem;line-height:1.55;color:var(--text-mute);text-wrap:pretty}
.xd-col li b{color:var(--text);font-weight:600}
/* passos */
.xd-steps{margin:24px 0 0;padding:0;list-style:none;counter-reset:xs;display:flex;flex-direction:column;gap:14px}
.xd-steps li{counter-increment:xs;display:grid;grid-template-columns:26px minmax(0,1fr);gap:13px;align-items:start}
.xd-steps li::before{content:counter(xs,decimal-leading-zero);font-family:"Geist Mono",ui-monospace,monospace;font-size:.62rem;font-weight:600;letter-spacing:.04em;color:var(--xd-deep);padding-top:3px}
.xd-steps p{margin:0;font-size:.88rem;line-height:1.6;color:var(--text-mute);text-wrap:pretty}
.xd-steps p b{color:var(--text)}
/* a faixa de quadrinhos — 4 casos → 2+2 (coluna declarada, contrato do lacrado) */
.xd-strip-w{container-type:inline-size;margin:26px 0 0}
.xd-strip{display:grid;grid-template-columns:1fr;gap:14px}
@container (min-width:430px){.xd-strip{grid-template-columns:repeat(2,1fr)}}
.xd-p{--xd-pan:oklch(0.145 0.012 260);display:flex;flex-direction:column;border:1px solid oklch(0.28 0.02 260);border-radius:14px;background:var(--xd-pan);overflow:hidden;box-shadow:0 2px 10px -4px rgba(0,0,0,.45)}
.theme-dark .xd-p{box-shadow:0 0 0 1px oklch(0.34 0.05 260 / .5),0 4px 22px -10px oklch(0.62 0.11 78 / .3)}
.xd-p-art{position:relative;aspect-ratio:4/3;background:var(--xd-pan);overflow:hidden}
.xd-p-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11%;background:linear-gradient(to bottom,transparent,var(--xd-pan));pointer-events:none}
.xd-p-art>img{width:100%;height:100%;object-fit:cover;display:block}
/* 🧩 painel ainda sem arte: nunca uma caixa vazia — diz o que vai ali (contrato do aberto).
   ⚠️ `.soon` existe no CSS das folhas desde o aberto e nenhuma o usava; esta é a primeira.
   ⛔ NÃO trocar por caixa vazia nem por texto "em breve" solto: o <em> diz O QUE vai ali. */
.xd-p-art.soon{display:grid;place-items:center;padding:14px;background:repeating-linear-gradient(135deg,var(--xd-pan) 0 7px,oklch(0.175 0.014 260) 7px 14px)}
.xd-p-art.soon::after{display:none}
.xd-p-art.soon em{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:.52rem;letter-spacing:.13em;text-transform:uppercase;color:oklch(0.66 0.03 258);text-align:center;line-height:1.5}
.xd-p-m{display:flex;flex-direction:column;gap:5px;padding:13px 14px 15px;color:oklch(0.94 0.008 260)}
.xd-p-m b{font-size:.86rem;font-weight:600;letter-spacing:-.005em}
.xd-p-m span{font-size:.79rem;line-height:1.55;color:oklch(0.72 0.014 258);text-wrap:pretty}
/* 📬 a linha do balde, recriada (HTML/CSS, nunca captura — contrato do aberto) */
.xd-shot{margin:20px 0 22px;padding:0;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev);overflow:hidden;box-shadow:0 2px 10px -6px rgba(0,0,0,.3)}
.xd-shot-r{display:flex;align-items:center;gap:12px;padding:13px 15px}
.xd-shot-ic{flex:none;display:grid;place-items:center;width:44px;height:44px}
.xd-shot-ic svg{width:34px;height:auto;filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.28))}
.xd-shot-m{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.xd-shot-m b{font-size:.92rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.xd-shot-m span{display:flex;align-items:center;gap:6px;font-family:"Geist Mono",ui-monospace,monospace;font-size:.72rem;color:var(--text-mute)}
.xd-shot-m span svg{flex:none;opacity:.75}
.xd-shot-s{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.xd-shot-s i{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:.68rem;color:var(--text-dim)}
.xd-shot-led{display:grid;place-items:center;width:20px;height:20px;border-radius:999px;background:oklch(0.60 0.21 25);color:#fff;animation:xdLed 1.15s ease-in-out infinite}
.xd-shot-led::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor}
@keyframes xdLed{0%,100%{opacity:1}50%{opacity:.42}}
@media (prefers-reduced-motion: reduce){.xd-shot-led{animation:none}}
.xd-shot-c{display:block;padding:9px 15px 11px;border-top:1px solid var(--border-soft);background:color-mix(in oklab,var(--text) 3%,transparent);font-family:"Geist Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}
/* ✍️ O SELETOR DE AUTORIA, recriado — as irmãs mostram as três portas do `+`, mas o X-DOC
   anônimo NÃO TEM porta no `+` (decisão do Tony, 03/09). No lugar, as duas figuras do balde:
   onde ele nasce (este seletor) e como ele viaja (o diálogo de encaminhar, abaixo).
   ⚠️ Rótulos VERBATIM de MN_STR (`auT`/`auMe`/`auAnonT`/`auAnonD`) — ⛔ nada reescrito aqui. */
.xd-menu{margin:20px 0 22px;border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-elev);overflow:hidden;box-shadow:0 2px 10px -6px rgba(0,0,0,.3)}
.xd-menu-t{margin:0;padding:11px 15px 9px;font-family:"Geist Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.xd-menu-r{display:flex;align-items:center;gap:11px;padding:11px 15px;border-top:1px solid var(--border-soft)}
.xd-menu-r.on{background:color-mix(in oklab,oklch(0.62 0.11 78) 9%,transparent);animation:xdOnPulse 2.4s ease-in-out infinite}
@keyframes xdOnPulse{0%,100%{box-shadow:inset 2px 0 0 oklch(0.62 0.11 78),inset 0 0 0 1px color-mix(in oklab,oklch(0.62 0.11 78) 20%,transparent),0 0 0 0 color-mix(in oklab,oklch(0.62 0.11 78) 24%,transparent)}
  50%{box-shadow:inset 2px 0 0 oklch(0.62 0.11 78),inset 0 0 0 1px color-mix(in oklab,oklch(0.62 0.11 78) 50%,transparent),0 0 15px 2px color-mix(in oklab,oklch(0.62 0.11 78) 20%,transparent)}}
@media(prefers-reduced-motion:reduce){.xd-menu-r.on{animation:none;box-shadow:inset 2px 0 0 oklch(0.62 0.11 78),inset 0 0 0 1px color-mix(in oklab,oklch(0.62 0.11 78) 38%,transparent)}}
.xd-menu-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid oklch(0.62 0.11 78);color:oklch(0.62 0.11 78);background:color-mix(in oklab,oklch(0.62 0.11 78) 13%,transparent)}
.xd-menu-ic svg{width:20px;height:auto}
.xd-menu-m{display:flex;flex-direction:column;gap:1px;min-width:0}
.xd-menu-m strong{font-size:.86rem;font-weight:600;letter-spacing:-.005em;color:var(--text)}
.xd-menu-m em{font-style:normal;font-size:.74rem;line-height:1.45;color:var(--text-mute)}
.xd-menu-ck{margin-left:auto;flex:none;font-size:.9rem;color:oklch(0.62 0.11 78)}
.theme-dark .xd-menu-ck{color:var(--xd-gold)}
.xd-menu-c{display:block;padding:9px 15px 11px;border-top:1px solid var(--border-soft);background:color-mix(in oklab,var(--text) 3%,transparent);font-family:"Geist Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}
/* 📤 o diálogo de encaminhar, recriado (rótulos VERBATIM: `fwdT`/`fwdD`/`fwdGo`) */
.xd-fwd-hd{display:flex;flex-direction:column;gap:5px;padding:13px 15px 12px}
.xd-fwd-hd b{font-size:.9rem;font-weight:600;letter-spacing:-.005em;color:var(--text)}
.xd-fwd-hd em{font-style:normal;font-size:.79rem;line-height:1.5;color:var(--text-mute);text-wrap:pretty}
.xd-fwd-r{display:flex;align-items:center;gap:11px;padding:10px 15px;border-top:1px solid var(--border-soft)}
.xd-fwd-f{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-family:"Geist Mono",ui-monospace,monospace;font-size:.66rem;font-weight:600;letter-spacing:.02em;color:#fff;background:oklch(0.56 0.13 var(--h,255))}
.xd-fwd-n{display:flex;flex-direction:column;gap:0;min-width:0}
.xd-fwd-n b{font-size:.84rem;font-weight:600;color:var(--text)}
.xd-fwd-n i{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:.68rem;color:var(--text-dim)}
.xd-fwd-k{margin-left:auto;flex:none;display:grid;place-items:center;width:19px;height:19px;border-radius:5px;border:1.5px solid var(--border-soft);color:transparent}
.xd-fwd-r.on .xd-fwd-k{border-color:oklch(0.62 0.11 78);background:oklch(0.62 0.11 78);color:#fff}
.xd-fwd-b{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 15px;border-top:1px solid var(--border-soft)}
.xd-fwd-b i{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:.7rem;color:var(--text-dim)}
.xd-fwd-b b{padding:8px 15px;border-radius:999px;background:oklch(0.62 0.11 78);color:#1b1a17;font-size:.79rem;font-weight:600;letter-spacing:-.005em}
/* 📖 hiperfoco: as três camadas do CLAUDE.md 5b — lista nominal + seletor cego */
html.hf .mw-bar,html.hf .mw-next,html.hf .xd-crumb,html.hf .xd-hero .mw-meta{display:none}
html:not(.hf) .xd-crumb-hf{display:none}
html.hf a[href]:not([href^="#"]){pointer-events:none;color:inherit;text-decoration:none;cursor:default}
html.hf .xd-hero .mw-hero-in{padding-top:20px}
/* 🖱 barra de rolagem da casa */
html{scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--text) 26%,transparent) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--text) 22%,transparent);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in oklab,var(--text) 38%,transparent);background-clip:content-box}
::-webkit-scrollbar-button{display:none}