/* ═══════════════════════════════════════════════════════════════════════════
   manual-xdoc-aberto.css — a veste do capítulo ABERTO do X-DOC (pt/en/es)
   Consumidores: manual-xdoc-aberto.html · manual-xdoc-open.html · manual-xdoc-abierto.html
   ⚠️ RECORTE VERBATIM do <style> inline (LOOP 05, 04/09/2026): o <style> era byte-idêntico nas três edições de idioma.
   ⛔ 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 (2026-08-19, Tony viu a faixa acima da capa). `width="0"
   height="0"` zera a caixa, mas o svg é INLINE: ele ainda cria um line box e sobrava uma
   tira de ~20px no topo. O `mnXdDefs` do app resolve com o mesmo `position:absolute` —
   aqui vale igual. ⛔ NÃO tirar o `position`: a faixa volta. */
.xd-defs{position:absolute;width:0;height:0;overflow:hidden}
/* 🔒 A FOLHA DE PERFIL DE UMA OPERAÇÃO. Um só ouro para X-DOC, o MESMO do app:
   oklch(0.62 0.11 78) claro / oklch(0.8 0.11 84) escuro. ⛔ NÃO inventar segundo dourado. */
/* 🥇 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 hero herda o gradiente do manual, mas em OURO: `--accent` trocado só aqui dentro,
   então o kicker doura e os links do corpo seguem no acento do site. */
/* 🖼 A HERO DO X-DOC É SEMPRE ESCURA (2026-08-19, Tony trouxe a arte). A ilustração é
   intrinsecamente preta-e-ouro: no tema claro ela viraria um bloco escuro com texto escuro
   por cima — o problema que a manual.css já documenta e resolveu com véu. Em vez de véu, a
   BANDA inteira fica escura nos dois temas: mesma decisão deliberada do estúdio, que é
   sempre escuro por design (CLAUDE.md §4). Por isso as cores do texto vêm fixas aqui.
   ⛔ NÃO deixar a banda herdar o tema: no claro, texto escuro sobre arte preta. */
/* 🖼 A CAPA DE PERFIL (2026-08-19, Tony no estreito: "a imagem de arte some — preciso que
   apareça completa de ponta a ponta no topo, como se fosse a capa de um perfil"). A arte
   deixou de ser FUNDO do texto e virou FAIXA própria: proporção da própria imagem, largura
   cheia, nada cortado. Sobre ela flutuam o glifo grande e os dizeres; o texto do verbete
   desceu para a banda escura abaixo, onde não disputa leitura com a ilustração.
   ⛔ NÃO voltar a pôr a arte como fundo do bloco de texto: no estreito ela sumia atrás do
   título (foi o print do Tony) e no tema claro exigia véu. */
/* 🖼 O FUNDO DA CAPA É O CÉU→CAMPO DA PRÓPRIA ARTE, não preto (2026-08-20, Tony mandou o
   print do carregamento): enquanto o WebP não chega, o que aparecia era uma caixa preta com
   o `alt` derramado por cima. Alt é obrigação de acessibilidade e SEMPRE renderiza nessa
   janela (e se o arquivo falhar) — então o conserto é o FUNDO virar paisagem, e o texto
   pousar sobre algo. Zero KB: degradê, não imagem.
   ⛔ NÃO tirar o alt para "resolver": some a descrição para leitor de tela e para o Google. */
.xd-cover{position:relative;width:100%;aspect-ratio:1400/600;overflow:hidden;background:linear-gradient(to bottom,#3f8fd4 0%,#8fc0e8 44%,#cfe0c0 58%,#7fa257 74%,#5f8440 100%)}
/* 🌗 A CAPA RESPIRA (2026-08-20, Tony): opacidade oscilando 100% → 80% em 3s. Dá vida a uma
   imagem estática sem competir com o brilho pulsante da porta lacrada mais abaixo — ali é
   ÊNFASE (aponta o assunto), aqui é só respiração.
   ⚠️ Anima `opacity`, que é propriedade de composição: não reflui nem repinta o layout. O
      preto do `.xd-cover` por baixo é o que aparece no vale, então a arte escurece de leve
      em vez de clarear — mesma direção do dégradé do pé.
   ⛔ NÃO animar o `.xd-cover`: levaria o selo e o "Somente leitura" junto, e texto piscando
      é ruim de ler. Só o `<img>`.
   ⚠️ `prefers-reduced-motion` volta a 100% fixo — o movimento aqui é enfeite, nunca informação. */
/* ⚠️ O `alt` NÃO SE PINTA (2026-08-20, Tony mandou o print do carregamento): o texto
   alternativo é desenhado com a COR do próprio <img>, então `color:transparent` o esconde do
   olho sem tirá-lo do documento — leitor de tela continua lendo, buscador e LLM continuam
   indexando. Enquanto a arte chega, a pessoa vê só a paisagem em degradê, que já é o
   placeholder; se a arte falhar de vez, sobra a paisagem — honesta, não parece bug.
   ⛔ NÃO resolver isso encurtando nem apagando o `alt`: ele é acessibilidade primeiro (quem
      não vê a capa depende dele), busca de imagem depois. Esconder ≠ remover. */
.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 (2026-08-19, Tony). A cor de chegada é EXATAMENTE a
   do `.xd-hero` logo abaixo, então não existe emenda — a arte deixa de ter borda inferior e
   passa a virar fundo. ⚠️ `z-index:1`: fica sob o selo (2) e sobre a imagem (0). */
.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: glifo grande + dizeres, à esquerda, onde a arte é preta. Tudo em
   `clamp()` porque a capa é fluida — a faixa encolhe junto com a coluna e o selo acompanha. */
.xd-stamp{position:absolute;left:clamp(18px,4.5vw,54px);top:50%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;gap:clamp(8px,1.5vw,14px);max-width:min(52%,420px)}
/* 🔒 O GLIFO É O DO PRODUTO, levantado verbatim de mnDocIc (2026-08-19, achado pelo
   verificador: a 1ª versão desta folha tinha um cadeado DESENHADO À MÃO, contorno vazado,
   viewBox 0 0 48 48 — nada disso existe no app). Esta página É o perfil daquele ícone:
   a pessoa toca na linha da caixa e tem de cair na MESMA figura, em tamanho grande.
   ⚠️ viewBox "5 0 39 48" — o recorte assimétrico é invariante documentado (o selo estoura
      a caixa da folha à direita). Então a largura é 39/48 da altura, nunca 1:1.
   ⚠️ Os gradientes (#xdK/#xdW/#xdA) vêm de um <defs> inline no topo do <body>: numa página
      estática o mnXdDefs não roda, e sem eles os fills viram transparente.
   ⚠️ LEVANTAR VERBATIM INCLUI A TABELA TAMANHO→TRAÇO — e ela já falhou duas vezes aqui:
      a folha usa sw 1.4 só a partir de 96px, 1.6 entre 64 e 95, 1.9 entre 40 e 63, 2.5 entre
      24 e 39, 3.1 abaixo; o cadeado PEQUENO tem desenho próprio (y 25.4, sw 2.7), não é o
      grande reposicionado. Este selo mede ~64px, logo 1.6; o do kicker ~18px, logo 3.1.
   ⛔ NÃO estimar número do glifo: abre o mnDocIc e copia a ramificação daquele tamanho.
   ⛔ NÃO redesenhar o glifo aqui. Mudou no app? Levanta de novo. */
.xd-glyph{display:block;height:auto}
/* ⛓ A DUPLA (2026-08-20, desenho do Tony): semente + elo + editável, porque a operação são
   DUAS coisas — receber para ler e continuar escrevendo. ⚠️ Cada glifo menor que o selo
   único do lacrado (81 → 62px no teto): dois lado a lado ocupam o dobro, e o selo não pode
   passar de metade da capa — o resto é área de texto (é assim que a arte foi composta). */
.xd-pair{display:flex;align-items:center;gap:clamp(5px,.9vw,9px)}
.xd-pair>.xd-glyph{width:clamp(30px,5.4vw,62px);filter:drop-shadow(0 3px 12px oklch(0.05 0.02 78 / .45))}
/* o elo: dois anéis dourados entrelaçados. ⛔ NÃO trocar por seta — seta é fluxo, elo é
   vínculo, e o que a semente cria é vínculo entre dois livros. */
.xd-link{flex:none;display:block;width:clamp(20px,3.7vw,42px);height:auto;color:oklch(0.72 0.13 82);filter:drop-shadow(0 2px 6px oklch(0.05 0.02 78 / .45))}
.xd-kk-ic .xd-glyph{width:15px}
/* ⚠️ TINTA ESCURA AQUI, ao contrário do lacrado (2026-08-20): a arte é DIURNA e o selo
   pousa sobre céu claro. ⛔ NÃO herdar o tema: a arte é a mesma nos dois, então a tinta
   também se fixa — é a mesma lei da capa do lacrado, com o sinal invertido. */
.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.19 0.02 80);text-shadow:0 0 3px oklch(1 0 0 / .85),0 0 9px oklch(1 0 0 / .7),0 1px 20px oklch(1 0 0 / .5)}
/* ⚠️ CONTRASTE DA LINHA MONO (2026-08-20, Tony: "muito apagada"). Ela é a menor tipografia
   da capa (~10px) sobre céu claro, e ouro a 0.38 de luminosidade não dava: mono fino perde
   massa e o halo de 1px não segurava. Agora tinta quase preta com um toque de terra —
   e o halo cresce em três raios, o mesmo tratamento do título.
   ⛔ NÃO usar o ouro aqui: no lacrado ele funcionava porque a arte é PRETA. Sobre céu, ouro
      claro sobre claro é a receita do apagado. A cor de categoria vive no glifo, não no
      rótulo de 10px. */
.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.26 0.03 70);text-shadow:0 0 5px oklch(1 0 0 / .95),0 0 11px oklch(1 0 0 / .8),0 1px 3px oklch(1 0 0 / .9)}
/* ⚠️ No muito estreito a faixa fica baixa e a área preta da esquerda encolhe junto: o selo
   desce para o pé, centrado sobre um véu vertical. ⛔ NÃO deixá-lo deitado ali — cairia
   sobre o cadeado e nenhum dos dois se leria. */
/* 📐 O ESTREITO AQUI É DE CONTÊINER, NÃO DE VIEWPORT (2026-08-19 — descoberto ao testar o
   print do Tony). Esta folha vive DENTRO da gaveta, num painel de ~550px, enquanto o
   viewport é de desktop: `@media(max-width:560px)` NUNCA dispara ali, e a capa ficava com
   o layout largo espremido. `@container` mede a largura real da faixa e vale nos dois
   lugares — dentro da gaveta e no telefone de verdade.
   ⛔ NÃO usar media query para nada que a gaveta exibe em hiperfoco: ela mente sobre o
      espaço disponível. Uma fonte só de verdade: a largura do próprio contêiner. */
.xd-cover-w{container-type:inline-size}
/* ⚠️ No estreito o selo vai para o CANTO ESQUERDO (Tony apontou o vão no print): a arte tem
   um bolsão preto no alto à esquerda — ali ele se lê sem véu, e não cai sobre o cadeado nem
   sobre o documento. ⛔ NÃO centralizar no pé: era a 1ª tentativa e exigia um véu que
   apagava a ilustração justamente onde ela é bonita. */
@container (max-width:620px){.xd-cover{aspect-ratio:4/3}
  .xd-cover>img{object-position:76% center}
  .xd-stamp{left:clamp(16px,5cqw,26px);right:auto;top:clamp(18px,5cqw,30px);bottom:auto;transform:none;max-width:64%;align-items:flex-start;text-align:left}
  .xd-pair>.xd-glyph{width:clamp(26px,8.4cqw,38px)}
  .xd-link{width:clamp(17px,5.6cqw,26px)}
  .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)}
/* 🔤 O CHIP ATIVO DO TROCADOR NÃO HERDA O OURO CRU (2026-08-20): `.mw-lang b` usa
   `background:var(--accent)` com texto branco, e aqui o `--accent` do hero É o ouro —
   no claro dá ~3,4:1 e no escuro (ouro em 0.8 de luminosidade) piora ainda. Então o par
   fundo+tinta se declara por tema, sem sair da paleta da folha.
   ⛔ NÃO trocar por cinza neutro: o chip é o único lugar do hero que fala de idioma, e ele
      pertence à categoria X-DOC como todo o resto desta faixa. */
.xd-hero .mw-lang b{background:var(--xd-deep);color:oklch(0.99 0.005 85)}
.theme-dark .xd-hero .mw-lang b{background:var(--xd-gold);color:oklch(0.17 0.02 80)}
.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))}
/* 🌀 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 do que o lacre garante */
/* ⚠️ 4 CARTÕES PEDEM COLUNA EXPLÍCITA (2026-08-19, Tony no print): com `auto-fit` deu 3
   colunas e o quarto ficou órfão — mesmo defeito da faixa de quadrinhos, mesma cura. 4 ou
   2+2 leem como intenção; 3+1 lê como sobra. O número de garantias é conhecido, então a
   grade se declara. ⛔ NÃO voltar para `auto-fit` aqui.
   ⚠️ Container query, nunca media: dentro da gaveta o viewport mente (CLAUDE.md 5b). */
.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)}}
/* 🧭 ÍCONE POR PROPRIEDADE (2026-08-19, Tony). Quatro garantias abstratas — hash, hora,
   autor, corrente — e só texto não dá onde o olho segurar. Mesmo registro dos painéis de
   "Quando usar": traço de peso único em ouro, chapado, sem preenchimento.
   ⚠️ Um conceito por ícone, e nenhum repete verbo do app: ⬜=⬜ comparar · ○ relógio ·
      ○ pessoa · ·—·—· corrente de versões.
   ⛔ NÃO usar ✓ (é assinatura, ESC do vocabulário) nem o elo 🔗 (é "aceitar conexão"). */
.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 do envio */
.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)}
/* exemplos de uso */
.xd-ex{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.xd-ex li{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:20px;padding:14px 0;border-top:1px solid var(--border-soft)}
.xd-ex li:last-child{border-bottom:1px solid var(--border-soft)}
/* 🎞 A FAIXA DE QUADRINHOS (2026-08-19, Tony: "quando usar tipo história em quadrinho").
   Cada caso vira PAINEL + título + uma linha — a leitura de quadro, não de tabela.
   ⚠️ Os painéis são GRAVURA DE LINHA (ouro sobre preto, chapado, sem brilho): registro de
      DIAGRAMA, de propósito diferente da capa, que é cinema. Um só elemento sólido por
      painel — o selo. ⛔ NÃO pôr texto dentro da arte: não traduz, e vamos ter 3 idiomas.
   ⚠️ O painel tem fundo preto FIXO nos dois temas (a arte é preta-e-ouro), com a mesma
      lei da capa. Fora dele, o cartão herda o tema.
   ⚠️ Container query, nunca media: dentro da gaveta o viewport mente (CLAUDE.md 5b). */
.xd-strip-w{container-type:inline-size;margin:26px 0 0}
/* ⚠️ 5 PAINÉIS PEDEM COLUNA EXPLÍCITA (2026-08-19): com `auto-fit` deu 4 colunas e o quinto
   ficou órfão numa fileira sozinha — quebra a leitura de faixa. 5 ou 3+2 leem como
   intenção; 4+1 lê como sobra. ⛔ NÃO voltar para `auto-fit` aqui: o número de casos é
   conhecido, então a grade se declara. */
/* ⚠️ 6 CASOS PEDEM COLUNA EXPLÍCITA (2026-08-19): com `auto-fit` dava 4+2 e o resto órfão.
   3+3 lê como faixa; 5+1 lia como sobra — foi por isso que o 6º caso entrou (o buraco
   incomodava, Tony mandou o print). ⛔ NÃO voltar para `auto-fit`: o número de casos é
   conhecido, então a grade se declara. ⛔ NÃO passar de 3 colunas: com 6 cartões, qualquer
   número que não divida 6 deixa órfão. */
.xd-strip{display:grid;grid-template-columns:1fr;gap:14px}
@container (min-width:430px){.xd-strip{grid-template-columns:repeat(2,1fr)}}
/* 🎨 O CARTÃO INTEIRO É O QUADRO (2026-08-19, Tony: "como se o texto fizesse parte da
   ilustração"). O corpo herda o MESMO preto da arte, então não existe mais costura entre
   imagem e legenda: é um quadrinho com a fala dentro dele, não uma foto com rótulo embaixo.
   ⚠️ Preto FIXO nos dois temas, como a capa e como a arte — então o TEXTO também se fixa
      claro aqui (`--text`/`--text-mute` viram com o tema e no claro sumiriam). É a mesma
      decisão deliberada do estúdio, que é sempre escuro. */
/* ✨ O GLOW É CURTO E MORA NA BORDA, NUNCA NA ARTE (2026-08-19, Tony: "mais premium?" —
      sim, com uma condição). Brilho dentro do desenho é privilégio da CAPA: se a gravura
      brilhar, os cinco painéis viram cinco capas competindo. Na borda ele diz outra coisa —
      "objeto aceso", elevação — e não toca no registro de diagrama.
   ⚠️ Só no tema ESCURO. No claro o cartão já é um objeto preto sobre fundo claro (destaca
      sozinho), e ouro difuso sobre branco suja em vez de elevar — ali a sombra é neutra.
   ⛔ NÃO alongar o raio: passando de ~26px cinco cartões acendem juntos e a faixa vira
      árvore de natal. Curto = premium; longo = neon. */
.xd-p{--xd-pan:oklch(0.145 0.012 78);display:flex;flex-direction:column;border:1px solid oklch(0.28 0.02 78);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 80 / .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}
/* O degradê continua, agora só para dissolver a última linha da gravura no corpo — mesma
   cor dos dois lados, então ele apaga a borda em vez de trocar de tom. */
.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, em mono, no traço
   do próprio guilloché. ⛔ NÃO deixar sem legenda: vazio sem motivo lê como bug. */
.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 78) 7px 14px)}
.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.62 0.05 80);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 80)}
.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 82);text-wrap:pretty}
/* 📱 NO ESTREITO, UM BANNER POR VEZ (2026-08-19, Tony mandou o print): a versão lado-a-lado
   espremia a arte para ~110px e a gravura de linha fina virava borrão — ela precisa de
   largura para o traço existir. Empilhado, cada caso é um QUADRO cheio, que é a leitura
   de quadrinho que a seção queria desde o começo.
   ⛔ NÃO voltar para `flex-direction:row` aqui: painel-miniatura não lê. */
.xd-ex b{font-size:.9rem;font-weight:600;letter-spacing:-.005em}
.xd-ex span{font-size:.85rem;line-height:1.58;color:var(--text-mute);text-wrap:pretty}
@media(max-width:700px){.xd-ex li{grid-template-columns:1fr;gap:4px}}
/* 📬 A LINHA DO MENSAGEIRO, RECRIADA (2026-08-20, Tony: "um pedaço do layout no meio do
   parágrafo, com a luz vermelha piscando"). É a única ilustração desta folha que NÃO é
   gravura: as outras explicam CONCEITO, esta mostra a COISA — a pessoa vai procurar
   exatamente esta linha na carteira, então ela aparece como é.
   ⚠️ HTML/CSS, nunca captura de tela: a luz PISCA de verdade (é o que o parágrafo afirma),
      o texto traduz junto com a folha, e não desatualiza quando a lista mudar de cara.
   ⚠️ Réplica com o vocabulário da casa — disco vermelho de 20px com o miolo furado, o
      MESMO da lista de conversas (o furo é o dígito que não existe ali).
   ⛔ NÃO inventar número na luz: nas caixas de documento ela nunca conta, só avisa. */
.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}
/* ⚠️ A HORA VEM DO TOKEN, NÃO DE ESTIMATIVA (2026-08-20, verificador): eu tinha fixado um
   azul `oklch(0.55 0.09 220)` que não existe em lugar nenhum — nem no `.ft-when` real
   (styles.css: `color: var(--text-dim)`, sem override em nenhum estado) nem no print. Numa
   réplica que existe para a pessoa RECONHECER a linha, cor chutada é o pior tipo de erro:
   ela ensina a procurar algo que não está lá. ⛔ NÃO recolorir "de memória" — ler a fonte. */
.xd-shot-s i{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:.68rem;color:var(--text-dim)}
/* a luz: disco + miolo furado, piscando — mesma leitura do badge das conversas */
.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}}
/* a legenda embaixo, dentro da mesma moldura: diz que é a carteira, não esta folha */
.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)}
/* 🚪 AS TRÊS PORTAS, RECRIADAS (2026-08-20, Tony: "vale mostrar o caminho aqui também?").
   O passo-a-passo já NARRA a sequência em palavras; o que palavra não faz é mostrar as três
   portas LADO A LADO — que é onde a escolha acontece, e é a tela que a pessoa vai reconhecer
   ao tocar no +. Por isso a figura mostra UM frame, o decisivo, não a jornada inteira.
   ⛔ NÃO transformar em animação em laço: seria a segunda coisa em movimento na folha (a luz
      da caixa já se move — e se move porque a coisa real se move), competiria com a leitura e
      não se pausa. Diagrama que se lê no próprio ritmo vence loop de 5 passos.
   ⚠️ Rótulos VERBATIM do produto (FT_STR.pt: attT/attDoc/attDocD/attDocO/attDocOD/attDocS/
      attDocSD) — ⛔ NÃO reescrever aqui: a figura existe para bater com a tela, e texto
      "melhorado" na ilustração vira duas versões da mesma frase. */
.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)}
/* 🎯 a porta desta folha vem MARCADA: a figura serve a um capítulo, e apontar qual linha é a
   dele é a única informação que a réplica acrescenta ao print. Véu dourado do X-DOC. */
/* ✨ E O BRILHO PULSA (2026-08-20, Tony): a figura ensina qual das três portas é o assunto
   desta página, e destaque estático se lê como hover — parece que o cursor está ali.
   ⚠️ Pulsa o ANEL, não o fundo: fundo piscando faz a linha inteira latejar e o texto fica
      difícil de ler. E `box-shadow` não reflui nada — o halo cresce para FORA sem empurrar
      o ladrilho vizinho (mesmo motivo pelo qual o produto não anima `content`).
   ⚠️ O filete de 2px da esquerda é o MESMO shadow, então ele entra no keyframe junto — se
      ficasse numa regra separada, o inset seria sobrescrito e o marcador sumiria.
   ⛔ NÃO usar o vermelho da pendência aqui: isto não cobra nada de ninguém, só aponta. Ouro.
   ⚠️ `prefers-reduced-motion` mantém véu, filete e anel: o destaque não DEPENDE do
      movimento — o movimento só acrescenta ênfase. */
.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)}}
/* ⚠️ DISCO CIRCULAR COM ANEL DOURADO, verbatim do `.ft-att-ic` (2026-08-20, Tony mandou o
   print: "no frame você tem que ser coerente e usar a mesma identidade visual"). Eu tinha
   posto quadrado cinza com glifos desenhados por mim — inventei uma identidade paralela na
   ilustração que existe justamente para bater com a tela.
   ⚠️ A fonte é styles.css `.ft-att-ic` (38px, `border-radius:50%`, anel de 1.5px no ouro do
      X-DOC, fundo do MESMO ouro a 13%) e `.ft-att-ic.sig` (mesmo anel, preenchimento 13% de
      `#d9a13a` — é o metal). ⛔ NÃO dar cor de anel própria à medalha: pareceria uma quarta
      natureza de anexo.
   ⚠️ Os glifos também são os do produto: o cadeado e a medalha copiados verbatim; o lápis é
      o mesmo `mnDocIc("aberto")`. ⛔ NÃO redesenhar ícone para a figura. */
.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.sig{background:color-mix(in oklab,#d9a13a 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-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)}
/* 📖 HIPERFOCO: dentro da gaveta o único caminho é VOLTAR. Fora da barra de topo, os dois
   links que vazariam são a migalha ("O X-DOC") e o pé do capítulo — ambos somem, e a
   migalha vira texto. ⛔ NÃO deixar link para outra folha do manual aqui. */
/* 📄 EM HIPERFOCO A LINHA DE METADADOS SAI (2026-08-19, Tony: irrelevante para o perfil do
   X-DOC aberto). Ela é gesto de ENCICLOPÉDIA — migalha, posição no conjunto, data de
   revisão, idioma —, útil em página solta e no Google; dentro da gaveta compete com a única
   coisa que importa ali, que é a operação. ⚠️ Só em html.hf: na página pública a linha FICA,
   como em todos os capítulos.
   ⚠️ ESTA REGRA JÁ FALHOU PELA METADE: gravada com escapes literais, o \n virou parte do
   primeiro seletor (nhtml.hf .mw-bar) — que é válido, só não casa com nada. Os outros três
   da lista funcionavam, então a barra aparecia e o resto sumia. ⛔ Lista de seletores é
   silenciosa: um compound quebrado não derruba a regra, só deixa de valer. */
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}
/* 🔗 CAMADA 2 · O SELETOR QUE NÃO SE PODE ESQUECER (2026-08-19). A lista nominal de chrome
   acima cobre o que EU lembrei de listar; esta regra cobre o resto para sempre: em hiperfoco,
   todo link que sai desta folha deixa de ser link. Âncora da mesma página continua viva.
   ⚠️ DEGRADA PARA TEXTO, não some: uma frase nunca perde uma palavra no meio. Por isso
      `pointer-events:none` + cor herdada, e não `display:none`.
   ⛔ NÃO voltar a depender só da lista nominal: link novo em prosa passaria batido. */
html.hf a[href]:not([href^="#"]){pointer-events:none;color:inherit;text-decoration:none;cursor:default}
/* ⚠️ Sem a linha de metadados, o respiro de página solta virou vão (Tony: "o espaço ficou
   muito grande entre o texto e o banner"). Na gaveta o verbete começa logo abaixo da capa. */
html.hf .xd-hero .mw-hero-in{padding-top:20px}
/* 🖱 barra de rolagem da casa (os dois dialetos descrevem a MESMA barra) */
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}
/* ══ 🌳 A LINHAGEM EM VERSÃO COMPACTA (2026-08-20, desenho do Tony: Bob → Alice → Jack) ══
   A página "Árvore de Linhagem" explica o mesmo com cartões largos, e não cabe aqui: a folha
   vive num painel de ~550px dentro da gaveta. Então o mesmo fato em miniatura — chip de
   versão, elo de corrente e a seta da semente.
   ⚠️ AS COLUNAS COMPARTILHAM AS LINHAS DA GRADE: é isso que faz a seta da semente nascer na
      ALTURA EXATA do elo que a gerou, sem SVG e sem medir nada em JS. O V1 da Alice está na
      mesma linha do V3 do Bob porque foi dele que veio.
   ⚠️ A semente OCUPA o V1 (ESC-105, correção de 18/08): receber não é escrever, mas o
      traslado é elo selado e conta como primeiro do livro. ⛔ NÃO desenhar como "V0".
   ⚠️ Os ∞ nunca se encontram — cada livro segue vivo. É o coração da doutrina: ninguém para
      de escrever porque o outro começou. ⛔ NÃO fechar corrente nenhuma nesta figura.
   ⚠️ Zero KB e zero imagem: chips e degradês. Traduz junto com a folha, e não desatualiza. */
.xd-lin{--xd-pan:oklch(0.145 0.012 78);margin:22px 0 0;padding:18px 16px 14px;border:1px solid oklch(0.28 0.02 78);border-radius:14px;background:var(--xd-pan);overflow-x:auto;box-shadow:0 2px 10px -4px rgba(0,0,0,.45)}
.theme-dark .xd-lin{box-shadow:0 0 0 1px oklch(0.34 0.05 80 / .5),0 4px 22px -10px oklch(0.62 0.11 78 / .3)}
.xd-lin-g{display:grid;grid-template-columns:repeat(3,minmax(86px,1fr));grid-auto-rows:auto;column-gap:clamp(18px,5vw,44px);row-gap:0;min-width:290px;max-width:460px;margin-inline:auto}
/* o rótulo do livro: quem escreve, e de onde o livro nasceu */
.xd-lin-lb{display:flex;flex-direction:row;align-items:flex-end;gap:7px;align-self:end;padding:0 0 7px;line-height:1.25}
.xd-lin-lb-i{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px}
.xd-lin-lb-m{display:flex;flex-direction:column;gap:0;min-width:0}
.xd-lin-fc{flex:none;display:block;width:21px;height:21px;border-radius:999px;overflow:hidden;background:oklch(0.3 0.02 80)}
.xd-lin-fc img{width:100%;height:100%;object-fit:cover;display:block;color:transparent}
.xd-lin-wl{flex:none;display:block;width:11px;height:15px;color:color-mix(in oklab,var(--xd-gold) 82%,transparent)}
.xd-lin-lb b{font-size:.84rem;font-weight:600;letter-spacing:-.005em;color:oklch(0.94 0.008 80)}
.xd-lin-lb em{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;color:oklch(0.66 0.03 82)}
/* o chip de versão */
.xd-lin-v{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:40px;margin:0 0 15px;padding:0 8px;border:1px solid oklch(0.32 0.02 80);border-radius:7px;background:oklch(0.2 0.014 80)}
.xd-lin-ic{flex:none;width:22px;height:27px;display:block}
.xd-lin-v em{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:.84rem;font-weight:500;letter-spacing:.03em;color:oklch(0.93 0.008 80);white-space:nowrap}
/* ⛓ o elo, no vão de 15px que o chip de cima deixou */
.xd-lin-v.up::before{content:"";position:absolute;left:calc(50% - 4px);top:-16px;width:8px;height:16px;background-image:radial-gradient(ellipse 4px 2.7px at 50% 50%,transparent 0 30%,var(--xd-gold) 36% 68%,transparent 74%);background-size:8px 5.6px;background-repeat:repeat-y;background-position:50% 0}
/* ⛓ e o elo IMAGINÁRIO, até a próxima versão: mesma corrente, ainda não lavrada */
.xd-lin-inf.up::before{content:"";position:absolute;left:calc(50% - 4px);top:-16px;width:8px;height:16px;background-image:radial-gradient(ellipse 4px 2.7px at 50% 50%,transparent 0 30%,color-mix(in oklab,var(--xd-gold) 45%,transparent) 36% 68%,transparent 74%);background-size:8px 7.6px;background-repeat:repeat-y;background-position:50% 0}
/* 🌱 o chip que É a semente: dourado, e a seta entra nele pela esquerda */
.xd-lin-v.seed{border-color:color-mix(in oklab,var(--xd-gold) 58%,transparent);background:color-mix(in oklab,var(--xd-gold) 15%,oklch(0.2 0.014 80))}
.xd-lin-v.seed em{color:oklch(0.86 0.1 84);font-weight:600}
.xd-lin-v.seed::after{content:"";position:absolute;left:-1px;top:50%;width:clamp(18px,5vw,44px);height:2px;transform:translate(-100%,-50%);background:var(--xd-gold)}
.xd-lin-v.seed::before{content:"";position:absolute;left:-3px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-left:6px solid var(--xd-gold)}
/* o elo que SAI: marca o chip de onde a semente partiu, para o olho achar a origem */
.xd-lin-v.out{border-color:color-mix(in oklab,var(--xd-gold) 42%,transparent)}
/* ⚠️ O ∞ vira LINHA (glifo + símbolo), não célula centrada: com o lápis na frente ele passa
   a dizer O QUE continua — a próxima versão. Alinha à esquerda como os chips, senão o par
   flutuaria fora do prumo da coluna. */
/* ✍️ A CÁPSULA É BOTÃO (2026-08-20): tocar nela lavra a próxima versão. A borda tracejada já
   dizia "ainda não existe"; o cursor e o realce dizem "e pode existir agora".
   ⚠️ `.cheio` = teto de 4 atingido: perde a affordance em vez de ignorar o toque calado. */
.xd-lin-inf{cursor:pointer;transition:border-color .16s,background .16s;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;margin:0 0 15px;padding:0 8px;border:1px dashed color-mix(in oklab,var(--xd-gold) 42%,transparent);border-radius:7px;background:none}
.xd-lin-inf i{font-style:normal;font-family:"Geist Mono",ui-monospace,monospace;font-size:1rem;line-height:1;color:oklch(0.82 0.1 82)}

/* 🔗 A TRILHA ATÉ A ORIGEM (2026-08-20, Tony): tocar num elo acende ELE e todos os
   ancestrais, até o V1 de Bob, e apaga o resto. É a prova visual da tese da folha —
   qualquer versão da rede tem caminho até a semente original, atravessando livros.
   ⚠️ A trilha se DERIVA do `data-p` de cada chip (só o pai), nunca de lista escrita à
      mão: 17 listas divergiriam no primeiro conserto, e aqui divergir é afirmar uma
      linhagem falsa numa folha que explica linhagem.
   ⚠️ O elo e a seta são pseudo-elementos DO CHIP, então acendem e apagam com ele — não
      existe estado separado para manter em sincronia.
   ⚠️ Realce é ENFEITE, não o único caminho: o texto e a legenda já afirmam a linhagem.
      Por isso não há tabindex nos 17 nós (seriam 17 paradas de tabulação numa figura). */
.xd-lin-g .xd-lin-v,.xd-lin-g .xd-lin-inf{transition:opacity .16s ease,border-color .16s ease,box-shadow .16s ease}
.xd-lin-g.trail .xd-lin-v:not(.on),.xd-lin-g.trail .xd-lin-inf:not(.on),.xd-lin-g.trail .xd-lin-lb{opacity:.2}
.xd-lin-g.trail .xd-lin-v.on{border-color:color-mix(in oklab,var(--xd-gold) 78%,transparent);box-shadow:0 0 0 1px color-mix(in oklab,var(--xd-gold) 34%,transparent),0 0 14px -2px color-mix(in oklab,var(--xd-gold) 42%,transparent)}
.xd-lin-g.trail .xd-lin-inf.on{border-color:color-mix(in oklab,var(--xd-gold) 60%,transparent)}
@media(prefers-reduced-motion:reduce){.xd-lin-g .xd-lin-v,.xd-lin-g .xd-lin-inf{transition:none}}
/* a dica de uso: some quando a trilha está acesa — já cumpriu o papel */
.xd-lin-g.trail~.xd-lin-inf:hover,.xd-lin-inf:focus-visible{border-color:color-mix(in oklab,var(--xd-gold) 70%,transparent);background:color-mix(in oklab,var(--xd-gold) 10%,transparent);outline:none}
.xd-lin-inf.cheio{cursor:default;opacity:.55}
.xd-lin-inf.cheio:hover{border-color:color-mix(in oklab,var(--xd-gold) 38%,transparent);background:none}
/* o elo lavrado agora: acende por 1,2s para o olho achar o que acabou de nascer */
@keyframes xdNova{0%{border-color:var(--xd-gold);background:color-mix(in oklab,var(--xd-gold) 22%,transparent)}100%{border-color:oklch(0.32 0.02 80);background:oklch(0.185 0.014 78)}}
.xd-lin-v.nova{animation:xdNova 1.2s ease-out}
@media(prefers-reduced-motion:reduce){.xd-lin-v.nova{animation:none}}
.xd-lin figcaption{margin:14px 0 0;padding-top:11px;border-top:1px solid oklch(0.28 0.02 78);font-family:"Geist Mono",ui-monospace,monospace;font-size:.6rem;line-height:1.6;letter-spacing:.02em;text-transform:none;color:var(--text-mute);text-wrap:pretty}