/* 2026.7 — a camada editorial.
 *
 * Vem por ÚLTIMO, depois das folhas herdadas da 2026.5 e da 2026.6, e é ela que
 * transforma o lab em documento: coluna lateral fixa, títulos em serifa, ritmo
 * de leitura. O conteúdo das seções não foi tocado — o estilo dele continua nas
 * folhas de origem, e esta só ajusta moldura, tipografia de título e espaçamento.
 *
 * Paleta: a mesma noite azulada do conteúdo herdado (`#07090d`), de propósito.
 * O `panel.css` da 2026.5 tem 252 cores cravadas pensadas para fundo escuro;
 * um fundo claro exigiria reescrever cada uma, e a primeira esquecida viraria
 * texto branco em papel branco. O "editorial" aqui é a estrutura e a serifa,
 * não o papel. */

:root {
  --ed-bg: #07090d;
  --ed-side-bg: #0a0d13;
  --ed-line: #161d28;
  --ed-ink: #eef2f8;
  --ed-ink-2: #a9b4c4;
  --ed-ink-3: #66748a;
  --ed-accent: #6fd6ff;
  --ed-brand: #1539c1;
  --ed-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --ed-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  /* Largura da coluna lateral. 264 px cabe "laboratórios" na serifa de 1,3 rem
     com o número ao lado sem quebrar linha. */
  --ed-side-w: 264px;
}

/* ── Idioma: um por vez, também fora das seções ──────────────────────────────
 * O `lab-flow.css` só cobre `.sec [data-lang]`; a sidebar e o hero também têm
 * pares. O `main.js` remove o inativo do DOM, e esta regra é a rede para o
 * primeiro quadro, antes de o módulo rodar. */
/* `body` e não `:root` à esquerda: módulos herdados gravam `data-lang` no
   PRÓPRIO body, e uma regra que o alcançasse esconderia a página inteira
   (medido em 14/10/2026 — `?lang=es` abriu em branco). */
/* `data-site-lang` e não `lang`: o `lang` é reescrito por módulo herdado
   (ver o script do `<head>`); o atributo próprio, não. */
:root:not([data-site-lang="pt"]) body [data-lang="pt"],
:root:not([data-site-lang="en"]) body [data-lang="en"],
:root:not([data-site-lang="es"]) body [data-lang="es"],
:root:not([data-site-lang="zh"]) body [data-lang="zh"] { display: none !important; }
/* O `lab-flow.css` da 2026.6 esconde todo `[data-lang]` dentro de `.sec` e só
   devolve PT e EN — os blocos em espanhol e mandarim ficavam invisíveis
   (medido em 14/10/2026: o hero em `?lang=es` aparecia sem título). */
:root[data-site-lang="es"] .sec [data-lang="es"],
:root[data-site-lang="zh"] .sec [data-lang="zh"] { display: revert; }

/* Mandarim: a Newsreader e a Inter não têm ideograma, e o navegador cairia na
   fonte CJK padrão — sem serifa nos títulos, que é justamente o que dá a cara
   editorial. Songti SC (macOS/iOS) e Noto Serif SC (Android/Linux) são as
   serifas CJK que o sistema já tem; nada é baixado. A fonte latina vem
   primeiro, então nomes técnicos ("Kubernetes") seguem em Newsreader/Inter. */
:root[data-site-lang="zh"] {
  --ed-serif: "Newsreader", "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
  --font-sans: "Inter", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
/* Ideograma não tem caixa: `letter-spacing` negativo, pensado para latim,
   cola os caracteres. */
:root[data-site-lang="zh"] .ed-h1,
:root[data-site-lang="zh"] .ed-main .sec-h { letter-spacing: 0; }

/* ── O documento ─────────────────────────────────────────────────────────────
 * `lab-stage.css` faz do body um flex em coluna, para o chrome da 2026.6 medir
 * a própria altura. Aqui não há chrome no topo: bloco comum. */
html, body.ed { background: var(--ed-bg); }
body.ed {
  display: block;
  color: var(--ed-ink-2);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.ed-main { margin-left: var(--ed-side-w); min-width: 0; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.ed-side {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--ed-side-w);
  z-index: 40;            /* acima das seções; abaixo dos overlays (70+) */
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px 22px;
  background: var(--ed-side-bg);
  border-right: 1px solid var(--ed-line);
  overflow-y: auto;
}

.ed-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ed-ink);
  text-decoration: none;
}
.ed-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #2a3547;
  color: var(--ed-accent);
  font-size: 15px;
  flex: none;
}
.ed-brand-text { display: flex; flex-direction: column; gap: 3px; }
.ed-name { font-family: var(--ed-serif); font-size: 1.32rem; line-height: 1; letter-spacing: -.01em; }
.ed-role {
  font-family: var(--ed-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}

/* O chip da cidade. A bolinha verde só acende com clima AO VIVO — sem ela o
   chip ainda diz a cidade, mas não finge que a temperatura é de agora. */
.ed-where {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ed-ink-2);
  text-decoration: none;
}
.ed-where::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ed-ink-3);
  flex: none;
}
.ed-where[data-live="1"]::before { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .16); }
.ed-where:hover { color: var(--ed-ink); }

.ed-nav {
  display: flex;
  flex-direction: column;
  margin: auto 0;          /* centraliza o menu na altura livre, como um índice */
  padding: 12px 0;
}
.ed-nav a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  /* Pílula do tamanho do rótulo (não da coluna), com o mesmo recuo em todos
     os itens: o ativo não anda para o lado, só ganha fundo. A margem negativa
     devolve o texto à coluna de antes (14 − 10 = os 4 px de sempre). */
  align-self: flex-start;
  padding: 8px 18px 8px 14px;
  margin: 1px 0 1px -10px;
  border-radius: 999px;
  color: var(--ed-ink-2);
  text-decoration: none;
  font-family: var(--ed-serif);
  font-size: 1.3rem;
  line-height: 1.15;
  transition: color .2s ease, background .2s ease;
}
.ed-nav a i {
  font-style: normal;
  font-family: var(--ed-mono);
  font-size: 10px;
  color: var(--ed-ink-3);
  width: 18px;
  flex: none;
  transition: color .2s ease;
}
.ed-nav a:hover,
.ed-nav a:focus-visible { color: var(--ed-ink); background: rgba(255, 255, 255, .04); }
/* A seção em leitura: pílula escura com a moldura do seletor de idioma
   (pedido do dono, 15/10/2026). Primeiro foi preenchida de branco, como o
   idioma ativo — pesou demais na coluna e o dono pediu para tirar o fundo. */
.ed-nav a[aria-current] { color: var(--ed-ink); background: transparent; box-shadow: inset 0 0 0 1px #2a3547; }
.ed-nav a[aria-current] i { color: var(--ed-accent); }

.ed-side-foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--ed-line);
}
.ed-versions summary {
  cursor: pointer;
  font-family: var(--ed-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  list-style: none;
}
.ed-versions summary::-webkit-details-marker { display: none; }
.ed-versions summary::after { content: " +"; }
.ed-versions[open] summary::after { content: " −"; }
.ed-versions ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ed-versions a { color: var(--ed-ink-2); font-size: 12.5px; text-decoration: none; }
.ed-versions a:hover { color: var(--ed-ink); text-decoration: underline; }

.ed-side-row { display: flex; justify-content: space-between; align-items: center; }
.ed-social { display: flex; gap: 8px; align-items: center; margin: 0; }

/* ── Seletor de idioma: canto superior direito, fixo ─────────────────────────
 * Um controle segmentado de três posições (PT · EN · VEC), grande o bastante
 * para ser achado sem procurar — no rodapé da sidebar ele passava batido. */
.ed-langs {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 45;              /* acima das seções e da sidebar; abaixo dos overlays (70+) */
  display: flex;
  padding: 4px;               /* igual nos quatro lados: a pílula ativa não encosta na moldura */
  gap: 2px;
  background: rgba(10, 13, 19, .86);
  backdrop-filter: blur(8px);
  border: 1px solid #2a3547;
  border-radius: 999px;
}
.ed-langs a,
.ed-langs .ed-vec {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  /* Centro de verdade: `letter-spacing` põe espaço também DEPOIS da última
     letra, e o rótulo parecia empurrado para a esquerda; o padding da direita
     desconta esse espaço (.1em). `line-height: 1` tira a folga desigual de
     cima e de baixo da fonte mono. */
  padding: 7px calc(11px - .1em) 7px 11px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ed-ink-2);
  font: 600 11px/1 var(--ed-mono);
  letter-spacing: .1em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.ed-langs a:hover,
.ed-langs .ed-vec:hover { color: var(--ed-ink); background: rgba(255, 255, 255, .06); }
.ed-langs a.on { background: var(--ed-ink); color: #0b0f16; }
.ed-social a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #2a3547;
  color: var(--ed-ink-2);
  font-family: var(--ed-mono);
  font-size: 11px;
  text-decoration: none;
}
.ed-social a:hover { color: var(--ed-ink); border-color: var(--ed-ink-3); }

/* ── Seções: ritmo de documento ────────────────────────────────────────────
 * Alinhadas à ESQUERDA (não centradas): com a coluna lateral fixa, um bloco
 * centrado no espaço restante parece solto. O recuo acompanha a largura. */
.ed-main > .sec {
  background: transparent;
  border-top: 1px solid var(--ed-line);
  padding: clamp(72px, 11vh, 132px) 0;
}
.ed-main > .sec .wrap {
  width: auto;
  max-width: 1100px;
  margin: 0 clamp(20px, 6vw, 112px);
}

.ed-main .sec-num {
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  margin: 0 0 22px;
}
/* O título vira frase de efeito em serifa — a peça que mais muda a leitura.
   `16ch` quebra as frases em duas linhas parecidas em vez de uma longa e uma
   órfã; `text-wrap: balance` termina o serviço onde o navegador suporta. */
.ed-main .sec-h {
  font-family: var(--ed-serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -.022em;
  color: var(--ed-ink);
  max-width: 16ch;
  margin: 0 0 clamp(28px, 4vh, 48px);
  text-wrap: balance;
}
.ed-main .sec-lede {
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  line-height: 1.6;
  color: var(--ed-ink-2);
  max-width: 60ch;
}

/* ── Hero (é a seção "sobre") ─────────────────────────────────────────────── */
.ed-main > .ed-hero {
  border-top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(56px, 10vh, 120px);
}
.ed-h1 {
  font-family: var(--ed-serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.4vw, 7.2rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--ed-ink);
  max-width: 12ch;
  margin: 0 0 34px;
  text-wrap: balance;
}
.ed-cta { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin: 40px 0 0; }
.ed-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--ed-brand);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease;
}
.ed-btn:hover { background: #2049e0; }
.ed-link { color: var(--ed-ink-2); text-decoration: underline; text-underline-offset: 4px; }
.ed-link:hover { color: var(--ed-ink); }

/* ── Hero em duas colunas: frase à esquerda, diagrama à direita ───────────── */
.ed-main > .ed-hero .ed-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  max-width: 1280px;
}
.ed-hero .ed-h1 { font-size: clamp(2.8rem, 6.2vw, 6.2rem); }

/* ── O diagrama da pilha ──────────────────────────────────────────────────────
 * Tudo anima por `transform` e `opacity`, que o compositor faz sozinho — nada
 * de animar `y` ou `cy`, que custaria layout a cada quadro. */
.ed-stack { margin: 0; width: 100%; max-width: 520px; justify-self: end; }
.ed-stack svg { width: 100%; height: auto; display: block; overflow: visible; }

.ed-stack-rail { stroke: #1d2735; stroke-width: 1; stroke-dasharray: 3 6; }
}

.ed-layer rect:first-child { fill: #0c1119; stroke: #24314a; stroke-width: 1; }
.ed-layer-base rect:first-child { stroke: #2e4466; }
.ed-layer-n { font: 500 10px var(--ed-mono); fill: var(--ed-ink-3); }
.ed-layer-t { font: 400 22px var(--ed-serif); fill: var(--ed-ink); }
.ed-layer-c { font: 400 10.5px var(--ed-mono); fill: #7f8ea4; letter-spacing: .02em; }
/* A linha que varre a base de cada camada: "esta camada está trabalhando".
   Defasada por camada (`--i`), para a pilha parecer processar em sequência. */
.ed-layer-scan {
  fill: url(#ed-stack-glow);
  transform-box: fill-box;
  transform-origin: left center;
  animation: ed-scan 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.9s);
}
/* Preenche da esquerda para a direita e apaga — sem `translate`: deslocar a
   linha a levava para FORA da camada (medido na tela em 14/10/2026, riscos
   soltos ao lado das caixas). `scaleX` a partir da origem esquerda nunca
   ultrapassa a largura do retângulo. */
@keyframes ed-scan {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Entrada: as camadas acendem da base para o topo — a pilha se monta na ordem
   em que é construída de verdade (infra primeiro, produto por último).
   🛑 Só OPACIDADE: a posição de cada `<g>` está no atributo `transform`, e uma
   animação CSS de `transform` no mesmo elemento o substituiria — as quatro
   camadas cairiam empilhadas na origem. */
.ed-layer {
  animation: ed-fade-in .7s ease both;
  animation-delay: calc(.15s + var(--i) * .16s);
}
@keyframes ed-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ed-side-rail rect { fill: #0a0f16; stroke: #1d2735; }
.ed-side-rail text { font: 500 9.5px var(--ed-mono); fill: var(--ed-ink-3); letter-spacing: .14em; text-transform: uppercase; }

.ed-stack-cap {
  margin-top: 10px;
  text-align: center;
  font: 500 10px var(--ed-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}

/* ── Open source: menos texto ────────────────────────────────────────────────
 * Pedido do dono (14/10/2026): "muito texto … ninguém lê". O cartão fica com
 * nome, número grande, uma frase e as tags; o parágrafo longo continua no HTML
 * (buscador e leitor de tela leem), e o cartão inteiro já é o link do projeto. */
.ed-main #opensource .p-title,
.ed-main #opensource .p-lead,
.ed-main #opensource .p-card > p:not(.p-hook) { display: none; }
.ed-main #opensource .p-metric b { font-family: var(--ed-serif); font-weight: 400; }

/* ── 07 · timeline: um controle, não três lentes ─────────────────────────────
 * Com o `timeline.js` de pé, as três lentes herdadas saem da tela (continuam
 * no documento). Sem JS a classe não existe, e o texto aparece como antes. */
.ed-tl-on .career { display: none; }

.ed-tl { display: grid; gap: clamp(28px, 4vh, 44px); }
.ed-tl-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  min-height: 9.5rem;      /* o cargo muda de tamanho a cada ano; sem piso a régua pularia */
}
.ed-tl-year {
  font: 400 clamp(4.2rem, 10vw, 8.5rem) / .9 var(--ed-serif);
  letter-spacing: -.04em;
  color: var(--ed-ink);
  font-variant-numeric: tabular-nums;   /* 1999 → 2000 sem a largura dançar */
}
.ed-tl-now { display: grid; gap: 6px; min-width: 0; }
.ed-tl-role { margin: 0; font: 400 clamp(1.3rem, 2.4vw, 1.9rem) / 1.15 var(--ed-serif); color: var(--ed-ink); }
.ed-tl-org { margin: 0; font: 500 12px var(--ed-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ed-accent); }
.ed-tl-era { margin: 6px 0 0; font: 400 12px var(--ed-mono); color: var(--ed-ink-3); }
.ed-tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-tl-chips > span {
  padding: 3px 9px;
  border: 1px solid #24314a;
  border-radius: 999px;
  font: 400 11px var(--ed-mono);
  color: var(--ed-ink-2);
  animation: ed-fade-in .35s ease;
}

/* A pilha: dez pílulas, apagadas até o ano delas. Acender é a animação que
   carrega a mensagem — então ela é a mais visível da seção. */
.ed-tl-stack { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.ed-tl-count { display: grid; justify-items: start; }
.ed-tl-count b { font: 400 3rem/1 var(--ed-serif); color: var(--ed-ink); font-variant-numeric: tabular-nums; }
.ed-tl-count > span { font: 400 11px var(--ed-mono); color: var(--ed-ink-3); max-width: 9ch; }
.ed-tl-layers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ed-tl-layers li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #1a2230;
  background: #0b1018;
  color: #3b4658;
  font-size: 13px;
  transition: color .35s ease, border-color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease;
}
.ed-tl-layers li i { font: normal 400 10px var(--ed-mono); color: inherit; opacity: .8; }
.ed-tl-layers li.on {
  color: var(--ed-ink);
  border-color: rgba(111, 214, 255, .5);
  background: rgba(42, 92, 255, .12);
  box-shadow: 0 0 0 1px rgba(111, 214, 255, .08), 0 6px 18px -8px rgba(111, 214, 255, .45);
  transform: translateY(-2px);
}

/* A régua: faixas dos cargos, o preenchimento até o ano, o input por cima
   (invisível, mas é ele que recebe arrasto, teclado e toque). */
.ed-tl-rail { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.ed-tl-play {
  padding: 9px 14px;
  background: var(--ed-ink);
  color: #0b0f16;
  border: 0;
  border-radius: 999px;
  font: 600 11px var(--ed-mono);
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  min-width: 9.5em;        /* "pausar" e "tocar" com a mesma largura: a régua não dança */
}
.ed-tl-track { position: relative; height: 58px; }
/* 🛑 Faixas e input NÃO podem se sobrepor: o input fica por cima e engolia o
   clique na faixa, virando "o ano onde o mouse estava" — medido em 14/10/2026,
   clicar no Bradesco (2015) abria a eManage (2017). Faixas de 0 a 12 px, input
   de 16 a 36 px. */
.ed-tl-roles { position: absolute; inset: 0 0 auto 0; height: 12px; z-index: 1; }
.ed-tl-band {
  position: absolute;
  top: 0;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #1d2a40;
  cursor: pointer;
}
.ed-tl-band[data-alt="1"] { background: #26354f; }
.ed-tl-band:hover { background: #3a5a8c; }
.ed-tl-fill {
  position: absolute;
  left: 0;
  top: 25px;
  height: 3px;
  background: linear-gradient(90deg, #2a5cff, var(--ed-accent));
  border-radius: 2px;
  pointer-events: none;
  transition: width .2s linear;
}
.ed-tl-track::before {
  content: "";
  position: absolute;
  inset: 25px 0 auto 0;
  height: 3px;
  background: #161e2b;
  border-radius: 2px;
}
.ed-tl-input {
  position: absolute;
  inset: 16px 0 auto 0;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
}
.ed-tl-input:active { cursor: grabbing; }
.ed-tl-input::-webkit-slider-runnable-track { background: transparent; height: 20px; }
.ed-tl-input::-moz-range-track { background: transparent; }
.ed-tl-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ed-ink);
  box-shadow: 0 0 0 4px rgba(111, 214, 255, .35);
}
.ed-tl-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--ed-ink);
  box-shadow: 0 0 0 4px rgba(111, 214, 255, .35);
}
.ed-tl-input:focus-visible { outline: 1px dashed var(--ed-accent); outline-offset: 4px; }
.ed-tl-ticks { position: absolute; inset: 40px 0 auto 0; height: 14px; }
.ed-tl-ticks > span {
  position: absolute;
  transform: translateX(-50%);
  font: 400 10px var(--ed-mono);
  color: var(--ed-ink-3);
}
.ed-tl-ticks > span:first-child { transform: none; }
.ed-tl-ticks > span:last-child { transform: translateX(-100%); }

/* ── 05 · skills ─────────────────────────────────────────────────────────────
 * Cartões lidos do catálogo publicado. Nome e categoria primeiro, resumo em
 * duas linhas no máximo, e uma barra de "peso" (linhas da skill relativas à
 * maior) — o tamanho se lê de relance, sem número para interpretar. */
.ed-skills-bar { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-chips button,
.ed-diag-tabs button {
  padding: 7px 13px;
  background: transparent;
  border: 1px solid #2a3547;
  border-radius: 999px;
  color: var(--ed-ink-2);
  font: 500 11px var(--ed-mono);
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ed-chips button:hover,
.ed-diag-tabs button:hover { color: var(--ed-ink); border-color: var(--ed-ink-3); }
.ed-chips button[aria-selected="true"],
/* Selecionado sem fundo branco, como o item ativo do menu (dono, 15/10/2026):
   sem fundo — só texto e moldura no azul do site. */
.ed-diag-tabs button[aria-selected="true"] { background: transparent; color: var(--ed-accent); border-color: rgba(111, 214, 255, .45); }
.ed-install {
  font: 400 11px var(--ed-mono);
  color: var(--ed-ink-3);
  padding: 7px 10px;
  border: 1px dashed #24314a;
  border-radius: 4px;
  overflow-x: auto;
  max-width: 100%;
  white-space: nowrap;
}

.ed-skill-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.ed-skill {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: #0c1119;
  border: 1px solid #1d2735;
  border-radius: 8px;
  transition: border-color .2s ease, background-color .2s ease;
}
/* Hover SÓ de cor: nada que mude tamanho ou posição. Destravar a descrição e
   subir 2 px fazia o cartão crescer, a linha da grade crescer junto e o mouse
   cair no cartão de baixo, que crescia também — o efeito "repicava" (dono,
   15/10/2026). A descrição inteira fica no `title` (charts.js). */
.ed-skill:hover { border-color: #2e4466; background-color: #0f1622; }
.ed-skill[hidden] { display: none; }
/* Cascata de entrada: cada cartão 60 ms depois do anterior, só quando a grade
   aparece na tela (classe `is-in`, posta pelo `charts.js`). */
.ed-skills.is-ready .ed-skill { opacity: 0; transform: translateY(10px); }
.ed-skills.is-in .ed-skill {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease, border-color .2s ease, background-color .2s ease;
  transition-delay: calc(var(--n) * 60ms), calc(var(--n) * 60ms), 0s, 0s;
}
.ed-skill-cat { font: 500 9.5px var(--ed-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ed-accent); }
.ed-skill h3 { margin: 0; font: 500 1.05rem var(--ed-mono); color: var(--ed-ink); }
.ed-skill p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ed-ink-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ed-skill-size { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.ed-skill-size i {
  flex: 1;
  height: 4px;
  background: #151d2a;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.ed-skill-size i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--w) * 100%);
  background: linear-gradient(90deg, #2a5cff, var(--ed-accent));
}
.ed-skill-size b { font: 500 10px var(--ed-mono); color: var(--ed-ink-3); white-space: nowrap; }
.ed-skill-copy {
  align-self: flex-start;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid #24314a;
  border-radius: 4px;
  color: var(--ed-ink-2);
  font: 500 10.5px var(--ed-mono);
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
}
.ed-skill-copy:hover { color: var(--ed-ink); border-color: var(--ed-ink-3); }
.ed-skills-more { margin: 22px 0 0; }

/* ── 06 · harness ────────────────────────────────────────────────────────────
 * Diagrama das duas camadas ao lado da regra de bolso; depois o diagnóstico
 * clicável, a escada de escopo e a faixa de prova. */
.ed-harness {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.ed-layers { margin: 0; }
.ed-layers svg { width: 100%; height: auto; display: block; }
.ed-h-frame { fill: #0a0f16; stroke: #2e4466; stroke-width: 1.2; stroke-dasharray: 5 5; }
.ed-h-tag { font: 600 12px var(--ed-mono); letter-spacing: .2em; fill: #d8a566; }
.ed-h-tagsub { font: 400 11px var(--ed-mono); fill: var(--ed-ink-3); }
.ed-h-tools rect { fill: #121a26; stroke: #d8a566; stroke-opacity: .45; }
.ed-h-tools text { font: 500 11px var(--ed-mono); fill: #e7c79a; text-anchor: middle; }
.ed-h-ring { fill: none; stroke: #2a5cff; stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 2 6; }
.ed-h-steps circle { fill: #0c1119; stroke: var(--ed-accent); stroke-width: 1.5; }
/* Sem `text-anchor` aqui: no SVG a propriedade CSS vence o ATRIBUTO, e o
   alinhamento de cada rótulo (centro em cima/embaixo, início à direita, fim
   à esquerda) mora no atributo de cada `<text>` — medido em 14/10/2026,
   "verificar" e "agir" caíam em cima dos marcadores. */
.ed-h-steps text { font: 500 11px var(--ed-mono); fill: var(--ed-ink-2); }
.ed-h-loop { font: 600 11px var(--ed-mono); letter-spacing: .2em; fill: var(--ed-accent); text-anchor: middle; }
.ed-h-core { fill: #111a28; stroke: var(--ed-ink-3); }
.ed-h-model { font: 400 17px var(--ed-serif); fill: var(--ed-ink); text-anchor: middle; }
/* O ponto que percorre o loop. O grupo NÃO tem atributo `transform` (ao
   contrário das camadas do hero), então girá-lo por CSS é seguro. O centro do
   giro é o centro do anel, em coordenadas do SVG (230, 196). */
.ed-h-orbit {
  transform-origin: 230px 196px;
  animation: ed-orbit 6s linear infinite;
}
.ed-h-orbit circle { fill: var(--ed-accent); filter: drop-shadow(0 0 6px rgba(111, 214, 255, .9)); }
@keyframes ed-orbit { to { transform: rotate(360deg); } }

.ed-rule { display: grid; gap: 12px; }
.ed-rule-k {
  margin: 0 0 4px;
  font: 500 10.5px var(--ed-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
}
.ed-rule-cell {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ed-ink-2);
}
.ed-rule-cell b { font: 400 1.5rem var(--ed-serif); color: var(--ed-ink); }
.ed-rule-cell.is-loop { border-color: rgba(111, 214, 255, .35); background: rgba(42, 92, 255, .07); }
.ed-rule-cell.is-harness { border-color: rgba(216, 165, 102, .4); background: rgba(216, 165, 102, .06); }

.ed-diag { margin-top: clamp(48px, 7vh, 80px); }
.ed-diag-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.ed-diag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ed-diag-list li { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ed-diag-list h3 { grid-column: 1 / -1; margin: 0; font: 400 1.25rem var(--ed-serif); color: var(--ed-ink); }
.ed-diag-list p { margin: 0; padding: 14px 16px; border-radius: 8px; border: 1px solid; font-size: 14px; line-height: 1.5; color: var(--ed-ink-2); }
.ed-diag-list p::before { display: block; font: 600 10px var(--ed-mono); letter-spacing: .16em; margin-bottom: 6px; }
.ed-diag-list p.is-loop { border-color: rgba(111, 214, 255, .3); }
.ed-diag-list p.is-loop::before { content: "LOOP"; color: var(--ed-accent); }
.ed-diag-list p.is-harness { border-color: rgba(216, 165, 102, .35); }
.ed-diag-list p.is-harness::before { content: "HARNESS"; color: #d8a566; }
/* Em mandarim os dois termos se traduzem (智能体框架 / 循环); nos outros
   idiomas eles são o jargão em uso e ficam como estão. */
:root[data-site-lang="zh"] .ed-diag-list p.is-loop::before { content: "循环"; letter-spacing: .04em; }
:root[data-site-lang="zh"] .ed-diag-list p.is-harness::before { content: "智能体框架"; letter-spacing: .04em; }
/* Com JS: um sintoma por vez (o título já está no botão, então some). */
.ed-diag.is-live .ed-diag-list li { display: none; }
.ed-diag.is-live .ed-diag-list li.is-on { display: grid; animation: ed-fade-in .35s ease; }
.ed-diag.is-live .ed-diag-list h3 { display: none; }

/* A escada: caixas aninhadas, cada uma com um tom a mais de profundidade. */
.ed-ladder { margin-top: clamp(48px, 7vh, 80px); max-width: 760px; }
.ed-step {
  display: grid;
  gap: 2px;
  padding: 14px 16px 16px;
  border-radius: 10px;
  border: 1px solid #24314a;
  background: rgba(255, 255, 255, .015);
}
.ed-step > .ed-step { margin-top: 12px; }
.ed-step b { font: 400 1.2rem var(--ed-serif); color: var(--ed-ink); }
.ed-step > span { font: 400 11px var(--ed-mono); color: var(--ed-ink-3); }
.ed-step.s4 { border-color: rgba(216, 165, 102, .45); }
.ed-step.s3 { border-color: rgba(111, 214, 255, .45); }
.ed-step.s1 { background: rgba(111, 214, 255, .06); }

.ed-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  margin-top: clamp(40px, 6vh, 64px);
  padding: 20px 24px;
  border: 1px solid #1d2735;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .2s ease;
}
.ed-proof:hover { border-color: #2e4466; }
.ed-proof-name { font: 500 1rem var(--ed-mono); color: var(--ed-accent); }
.ed-proof-n { display: grid; }
.ed-proof-n b { font: 400 1.9rem var(--ed-serif); color: var(--ed-ink); line-height: 1; }
.ed-proof-n i { font-style: normal; font: 400 11px var(--ed-mono); color: var(--ed-ink-3); }
.ed-credit { margin: 16px 0 0; font-size: 12px; color: var(--ed-ink-3); }
.ed-credit a { color: var(--ed-ink-2); margin-left: 8px; }

@media (max-width: 1100px) {
  .ed-harness { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ed-diag-list li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-h-orbit { animation: none; }
  .ed-skills.is-ready .ed-skill { opacity: 1; transform: none; }
}

/* ── Modo VEC: o site como embedding (simulação) ─────────────────────────────
 * O botão mora ao lado de PT/EN, com a mesma tipografia: é o "terceiro
 * idioma". Ligado, cada palavra vira um número com cor pelo sinal (azul
 * negativo, âmbar positivo) e opacidade pela magnitude — `--v` vem do JS. */
/* Vetores selecionado tem o MESMO estilo de um idioma selecionado, e o idioma
   por baixo deixa de aparecer marcado: o seletor mostra uma escolha só. */
.ed-langs .ed-vec[aria-pressed="true"] { background: var(--ed-ink); color: #0b0f16; }
.ed-langs:has(.ed-vec[aria-pressed="true"]) a.on { background: none; color: var(--ed-ink-2); }

.ed-vec-tok { transition: color .25s ease; }
.ed-vec-tok.is-hot { color: var(--ed-accent); font-family: var(--ed-mono); }
.ed-vec-tok.is-num {
  font-family: var(--ed-mono);
  font-size: .86em;
  letter-spacing: -.02em;
  /* Sinal decide o tom; magnitude decide a força. `max(...)` deixa o número
     perto de zero legível em vez de sumir. */
  color: hsl(calc(var(--v) * 60 + 210) 80% 70% / max(.45, calc(var(--v) * var(--v) + .35)));
}
/* Numa serifa grande, o número fica enorme e quebra a página em três linhas:
   no título ele encolhe e ganha os colchetes de vetor. */
.vec .ed-main .sec-h .ed-vec-tok,
.vec .ed-h1 .ed-vec-tok { font-size: .5em; letter-spacing: 0; }
.vec .ed-main .sec-h::before,
.vec .ed-h1::before { content: "["; color: var(--ed-ink-3); font-family: var(--ed-mono); font-size: .5em; margin-right: .2em; }
.vec .ed-main .sec-h::after,
.vec .ed-h1::after { content: " … ] ∈ ℝ¹⁰²⁴"; color: var(--ed-ink-3); font-family: var(--ed-mono); font-size: .32em; white-space: nowrap; }

/* O selo: o que está acontecendo, quantos tokens, e que é simulação. */
.ed-vec-hud {
  position: fixed;
  top: 54px;                /* logo abaixo do seletor, que é quem liga o modo */
  right: 18px;
  z-index: 35;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(10, 13, 19, .88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(111, 214, 255, .35);
  border-radius: 6px;
  font: 500 11px var(--ed-mono);
  color: var(--ed-ink-2);
  animation: ed-fade-in .3s ease;
}
.ed-vec-hud b { color: var(--ed-accent); letter-spacing: .14em; }
.ed-vec-n { color: var(--ed-ink); font-variant-numeric: tabular-nums; }
.ed-vec-hud i { font-style: normal; color: var(--ed-ink-3); }
.ed-vec-hud[hidden] { display: none; }

/* ── O mascote ────────────────────────────────────────────────────────────── */
.ed-mascot {
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 30;            /* abaixo da sidebar e dos overlays */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;   /* decorativo: nunca rouba clique do conteúdo */
}
.ed-bot { width: 156px; height: 156px; }
/* O contêiner ignora o ponteiro (nunca rouba clique do conteúdo), mas o robô
   em si é clicável: clicar nele dispara uma reação. Só no modo 3D — a imagem
   parada não tem reação para oferecer. */
.ed-mascot[data-mode="live"] .ed-bot { pointer-events: auto; cursor: pointer; }
.ed-bot canvas, .ed-bot-still { width: 100% !important; height: 100% !important; display: block; }
.ed-bot-still { object-fit: contain; }

/* ── Modo jogo (`game.js`) ───────────────────────────────────────────────────
 * O robô sai do canto: a posição vem do JS em `transform`, a partir do canto
 * superior esquerdo. Acima da sidebar (40), para andar pelos itens do menu sem
 * sumir atrás dela; abaixo do seletor de idioma (45). */
.ed-mascot.is-game {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: 44;
  will-change: transform;
}
/* ── Mascote no SLAM (`mascot.js` + `slam-trial.js`) ────────────────────────
 * Mesmo esquema do modo jogo: posição em `transform` a partir do canto
 * superior esquerdo, agora com escala (origem no canto, para o cálculo dos
 * pés no JS valer). `is-slam-hop` liga a transição só no salto de ida e de
 * volta; seguindo o robô a cada quadro, transição faria o boneco atrasar. */
.ed-mascot.is-slam {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: 35;
  transform-origin: 0 0;
  will-change: transform;
}
.ed-mascot.is-slam-hop { transition: transform .9s cubic-bezier(.3, 1.25, .5, 1); }
@media (prefers-reduced-motion: reduce) {
  .ed-mascot.is-slam-hop { transition: none; }
}
.ed-game-hint {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 44;
  transform: translateX(-50%);
  padding: 7px 14px;
  background: rgba(10, 13, 19, .88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(111, 214, 255, .35);
  border-radius: 999px;
  font: 500 11px var(--ed-mono);
  letter-spacing: .06em;
  color: var(--ed-ink-2);
  pointer-events: none;
  animation: ed-fade-in .3s ease;
}
.ed-game-hint[hidden] { display: none; }
/* A corda do laço: um traço com folga e o laço na ponta, por cima de tudo
   menos dos controles (mesmo plano do robô). */
.ed-rope {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 43;
  pointer-events: none;
  overflow: visible;
}
.ed-rope[hidden] { display: none; }
/* Corda trançada: um núcleo marrom-escuro e, por cima, fios claros em
   tracejado curto — de longe lê como torção de sisal, sem imagem nenhuma. */
.ed-rope-core { fill: none; stroke: #6b4a26; stroke-width: 4; stroke-linecap: round; }
.ed-rope-braid { fill: none; stroke: #e2b977; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 3.5; }
.ed-rope-loop { fill: none; stroke: #e2b977; stroke-width: 2.6; filter: drop-shadow(0 0 0 #6b4a26) drop-shadow(0 1px 0 #6b4a26); }
.ed-rope-knot { fill: #6b4a26; stroke: #e2b977; stroke-width: 1.2; }
.ed-rope { transition: opacity .38s ease; }
.ed-rope.is-fading { opacity: 0; }

/* ── Botão de menu (só em tela estreita) ─────────────────────────────────── */
.ed-burger { display: none; }

@media (max-width: 900px) {
  .ed-main { margin-left: 0; }
  .ed-side {
    width: min(300px, 86vw);
    transform: translateX(-100%);
    transition: transform .28s ease;
    box-shadow: none;
  }
  body.ed-side-open .ed-side { transform: none; box-shadow: 24px 0 60px rgba(0, 0, 0, .55); }
  .ed-burger {
    display: block;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 45;
    padding: 9px 14px;
    background: rgba(10, 13, 19, .86);
    backdrop-filter: blur(8px);
    border: 1px solid #2a3547;
    color: var(--ed-ink);
    font-family: var(--ed-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
  }
  body.ed-side-open .ed-burger { left: calc(min(300px, 86vw) + 12px); }
  .ed-main > .ed-hero { min-height: 92svh; padding-top: 72px; }
  /* No telefone o robô encolhe: a coluna de texto é a tela inteira, e um
     mascote de 132 px cobriria o fim de cada parágrafo. */
  .ed-bot { width: 104px; height: 104px; }
}

/* Hero em coluna única antes de o diagrama ficar espremido: abaixo de 1100 px
   (já descontada a sidebar) as camadas teriam menos de 300 px e o texto
   mono delas ficaria ilegível. */
@media (max-width: 1100px) {
  .ed-main > .ed-hero .ed-hero-grid { grid-template-columns: 1fr; }
  .ed-stack { justify-self: start; max-width: 460px; }
}

@media (max-width: 640px) {
  .ed-tl-head { grid-template-columns: 1fr; gap: 10px; min-height: 13rem; }
  .ed-tl-stack { grid-template-columns: 1fr; }
  .ed-tl-rail { grid-template-columns: 1fr; }
  .ed-tl-play { justify-self: start; }
  /* No telefone as marcas de era se atropelam: fica só a primeira e a última. */
  .ed-tl-ticks > span:not(:first-child):not(:last-child) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-side, .ed-nav a { transition: none; }
  /* Diagrama parado: as camadas aparecem prontas e as requisições somem —
     ponto parado no meio do trilho pareceria defeito, não pausa. */
  .ed-layer, .ed-layer-scan { animation: none; opacity: 1; }
  .ed-layer-scan { display: none; }
  .ed-tl-layers li, .ed-tl-fill { transition: none; }
  .ed-tl-layers li.on { transform: none; }
}

/* ── O banner do hero (js/hero-banner.js) ──────────────────────────────────
   O hero inteiro troca: cada slide é frase + visual. Os dois ocupam a MESMA
   célula de grade, então a altura é a do maior e a troca não pula a página.
   O inativo fica invisível e `inert` (sem foco nem clique). As abas ficam
   numa faixa própria, com folga — o dono pediu "mais espaço" ao ver as abas
   coladas no topo do diagrama. */
.ed-banner { width: 100%; max-width: 1280px; display: grid; gap: clamp(36px, 6vh, 64px); }
/* As abas: um grupo segmentado no mesmo desenho do seletor de idioma (pílula
   com borda, item ativo preenchido), com a borda DIREITA batendo com a dos
   idiomas (pedido do dono, 14/10/2026). O seletor é fixo a 18 px da janela e
   a coluna é centralizada, então a diferença varia com a largura: o
   hero-banner.js mede e grava em `--tabs-shift`, e a margem negativa empurra
   as abas até lá. */
.ed-banner-tabs {
  display: inline-flex; justify-self: end; margin-right: calc(-1 * var(--tabs-shift, 0px));
  gap: 2px; padding: 4px; max-width: 100%; overflow: visible;
  /* A moldura em pílula em volta do grupo, no mesmo desenho do seletor de
     idioma. Saiu e voltou a pedido do dono na mesma noite (14/10/2026). */
  border: 1px solid #2a3547; border-radius: 999px; background: rgba(10, 13, 19, .86);
}
.ed-banner-tabs button {
  position: relative; white-space: nowrap; font: 600 11px/1 var(--ed-mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ed-ink-2); background: transparent;
  /* Mesmo centro do seletor de idioma: padding da direita desconta o
     espaçamento que o `letter-spacing` põe depois da última letra. */
  border: 0; border-radius: 999px; padding: 8px calc(14px - .06em) 8px 14px; cursor: pointer; transition: background .2s, color .2s;
}
.ed-banner-tabs button:hover { color: var(--ed-ink); }
.ed-banner-tabs button[aria-selected="true"] { color: #0b0f16; background: var(--ed-ink); }
/* O relógio do slide: barra que enche no tempo que falta para trocar. Some
   quando o banner está pausado (mouse em cima, foco dentro, pessoa no LLM). */
.ed-banner-tabs button i {
  /* FORA da pílula, logo abaixo dela: dentro, o traço ciano sumia contra o
     fundo branco da aba ativa (pedido do dono, 14/10/2026: "coloque o loading
     abaixo do fundo quando selecionado"). Recuado das pontas arredondadas. */
  position: absolute; left: 14px; right: 14px; bottom: -12px; height: 3px; border-radius: 2px;
  background: var(--ed-accent); transform: scaleX(0); transform-origin: left;
}
.ed-banner-tabs button.is-timing i { animation: ed-banner-clock var(--dur, 9s) linear forwards; }
.ed-banner.is-paused .ed-banner-tabs button i { animation-play-state: paused; }
@keyframes ed-banner-clock { to { transform: scaleX(1); } }
.ed-banner-stage { display: grid; }
.ed-banner-slide {
  grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: translateX(16px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s .5s;
}
.ed-banner-slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease; }

/* ── O LLM, dentro do banner (js/llm.js) ───────────────────────────────────
   O dono achou a 1ª versão "bem espremida": a frase do slide ficou numa
   coluna estreita e o app ganhou o resto, em duas colunas — à esquerda a
   pergunta, as etapas explicadas e a temperatura; à direita os tokens, a
   vista da etapa (trechos ou atenção, no mesmo lugar) e a resposta. */
.ed-main > .ed-hero .ed-llm-slide { grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); gap: clamp(28px, 4vw, 64px); }
.ed-llm-slide .ed-h1 { font-size: clamp(2.2rem, 3.8vw, 4rem); max-width: 10ch; }
.ed-llm-slide .ed-llm-note { margin-top: 28px; max-width: 40ch; font: 11px/1.6 var(--ed-mono); color: var(--ed-ink-3); }
/* Os dois contêineres do HTML somem da grade (`display: contents`) e os
   filhos se encaixam direto nela: a pergunta e os chips em largura cheia,
   depois etapas ao lado de tokens + vista, e temperatura ao lado da resposta.
   Em duas colunas fixas, o formulário não cabia na da esquerda e o botão
   invadia os tokens (medido na tela, 14/10/2026). */
.ed-llm-app {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px 24px; width: 100%;
  grid-template-areas:
    "form  form"
    "chips chips"
    "steps tokens"
    "steps view"
    "temp  out"
    "hint  hint";
  align-items: start;
}
.ed-llm-ask, .ed-llm-stage { display: contents; }
.ed-llm-form { grid-area: form; }
.ed-llm-chips { grid-area: chips; }
.ed-llm-steps { grid-area: steps; }
.ed-llm-temp { grid-area: temp; }
.ed-llm-tokens { grid-area: tokens; }
.ed-llm-view { grid-area: view; }
.ed-llm-out-wrap { grid-area: out; }
.ed-llm-hint { grid-area: hint; }

.ed-llm-form { display: flex; gap: 8px; }
.ed-llm-input {
  flex: 1; min-width: 0; font: 15px/1.4 var(--ed-mono); color: var(--ed-ink);
  background: var(--ed-side-bg); border: 1px solid var(--ed-line); border-radius: 10px; padding: 13px 14px;
}
.ed-llm-input:focus { outline: none; border-color: var(--ed-accent); }
.ed-llm-form button {
  font: 600 14px var(--ed-mono); color: var(--ed-bg); background: var(--ed-accent);
  border: 0; border-radius: 10px; padding: 0 18px; cursor: pointer;
}
.ed-llm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-llm-chips button {
  font: 11.5px/1.3 var(--ed-mono); color: var(--ed-ink-2); background: transparent;
  border: 1px solid var(--ed-line); border-radius: 999px; padding: 6px 11px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.ed-llm-chips button:hover, .ed-llm-chips button:focus-visible { color: var(--ed-ink); border-color: var(--ed-accent); }

/* As etapas, em pé: número, nome e a explicação de uma linha. A em curso
   acende; as já feitas ficam clicáveis (voltam à vista delas). */
.ed-llm-steps { list-style: none; display: grid; gap: 4px; padding: 0; margin: 0; counter-reset: none; }
.ed-llm-steps li {
  display: grid; grid-template-columns: 22px 1fr; gap: 0 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px; border: 1px solid transparent;
  font: 12px var(--ed-mono); color: var(--ed-ink-3); transition: background .25s, border-color .25s, color .25s;
}
.ed-llm-steps li b { font-weight: 600; color: inherit; }
.ed-llm-steps li small {
  grid-column: 2; font: 11px/1.45 var(--ed-mono); color: var(--ed-ink-3);
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .35s ease;
}
.ed-llm-steps li.is-done { color: var(--ed-ink-2); cursor: pointer; }
.ed-llm-steps li.is-done:hover { border-color: var(--ed-line); }
.ed-llm-steps li.is-on { color: var(--ed-ink); background: rgba(111, 214, 255, .08); border-color: rgba(111, 214, 255, .35); }
.ed-llm-steps li.is-on b { color: var(--ed-accent); }
.ed-llm-steps li.is-on small { max-height: 7em; opacity: 1; margin-top: 4px; }

/* Temperatura: o controle que decide se o "modelo" se atém ao site. */
.ed-llm-temp { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font: 11px var(--ed-mono); color: var(--ed-ink-2); }
.ed-llm-temp input { accent-color: var(--ed-accent); width: 100%; }
.ed-llm-temp output { color: var(--ed-ink); min-width: 3.5ch; text-align: right; }

/* Tokens: palavra, id e o vetor de doze barras (altura = |v|, rosa = negativo
   — a direção do número importa tanto quanto o tamanho). */
.ed-llm-tokens { display: flex; flex-wrap: wrap; gap: 6px; min-height: 76px; align-content: flex-start; }
.ed-llm-tok {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px; cursor: default;
  border: 1px solid var(--ed-line); border-radius: 8px; padding: 7px 9px; background: var(--ed-side-bg);
  animation: ed-llm-in .25s ease-out both; transition: border-color .2s, transform .2s;
}
.ed-llm-tok.is-lit { border-color: var(--ed-accent); transform: translateY(-2px); }
.ed-llm-tok b { font: 500 14px var(--ed-mono); color: var(--ed-ink); }
.ed-llm-tok i { font: 10px var(--ed-mono); color: var(--ed-ink-3); font-style: normal; }
.ed-llm-tok em { display: flex; align-items: center; gap: 1px; height: 22px; }
.ed-llm-tok em span {
  width: 3px; height: calc(2px + 20px * max(var(--v), calc(var(--v) * -1)));
  background: var(--ed-accent); border-radius: 1px; animation: ed-llm-grow .35s ease-out both;
}
.ed-llm-tok em span[style*="--v: -"] { background: #f472b6; }
@keyframes ed-llm-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ed-llm-grow { from { transform: scaleY(0); } to { transform: none; } }

/* A vista: trechos e atenção na MESMA célula, um de cada vez; altura fixa
   para a resposta embaixo não pular quando a vista troca. */
.ed-llm-view { display: grid; height: 236px; }
.ed-llm-hits, .ed-llm-attn {
  grid-area: 1 / 1; width: 100%; height: 100%; box-sizing: border-box; display: block; margin: 0;
  background: var(--ed-side-bg); border: 1px solid var(--ed-line); border-radius: 12px;
}
.ed-llm-attn { visibility: hidden; }
.ed-llm-app[data-step="3"] .ed-llm-attn { visibility: visible; }
.ed-llm-app[data-step="3"] .ed-llm-hits { visibility: hidden; }

/* Trecho achado: seção, nota, o texto com os termos marcados, e a barra
   da nota relativa ao 1º. Clicável — vira o contexto da resposta. */
.ed-llm-hits { list-style: none; padding: 8px; display: grid; gap: 4px; align-content: start; overflow: hidden; }
.ed-llm-hit {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 8px 10px; border-radius: 8px;
  font: 11px/1.4 var(--ed-mono); color: var(--ed-ink-3); cursor: pointer; border: 1px solid transparent;
  animation: ed-llm-in .3s ease-out both; transition: background .2s, border-color .2s;
}
.ed-llm-hit:hover { background: rgba(255, 255, 255, .03); border-color: var(--ed-line); }
.ed-llm-hit.is-top { border-color: rgba(111, 214, 255, .35); }
.ed-llm-hit-sec { text-transform: lowercase; color: var(--ed-ink-2); }
.ed-llm-hit b { font-weight: 400; }
.ed-llm-hit-text {
  grid-column: 1 / -1; color: var(--ed-ink-2); font: 14px/1.4 var(--ed-serif);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ed-llm-hit.is-top .ed-llm-hit-text { color: var(--ed-ink); }
.ed-llm-hit mark { background: rgba(52, 211, 153, .14); color: inherit; border-radius: 3px; padding: 0 2px; transition: background .2s; }
.ed-llm-hit mark.is-lit { background: rgba(52, 211, 153, .5); }
.ed-llm-hit i { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--ed-line); position: relative; overflow: hidden; }
.ed-llm-hit i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--s) * 100%); background: var(--ed-ink-3); }
.ed-llm-hit.is-top i::after { background: var(--ed-accent); }

.ed-llm-attn-q, .ed-llm-attn-k { font: 11px var(--ed-mono); fill: var(--ed-ink-2); text-anchor: middle; }
/* Peso da atenção em `--w` (0–1): mais grosso e mais opaco quanto maior. Com
   o mouse num token, só as linhas dele ficam — o resto apaga. */
.ed-llm-attn-line { stroke: var(--ed-accent); stroke-width: calc(.4px + 2.4px * var(--w)); opacity: var(--w); transition: opacity .2s; }
.ed-llm-attn-line.is-match { stroke: #34d399; }
.ed-llm-app.is-tracing .ed-llm-attn-line { opacity: .04; }
.ed-llm-app.is-tracing .ed-llm-attn-line.is-lit { opacity: calc(.35 + var(--w)); }

/* A resposta e, ao lado, o sorteio do passo (o da palavra sob o mouse). */
.ed-llm-out-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 16px; align-items: start; }
.ed-llm-answer { margin: 0; min-height: 4.5em; font: 18px/1.5 var(--ed-serif); color: var(--ed-ink); }
.ed-llm-out { animation: ed-llm-in .2s ease-out both; border-radius: 3px; }
.ed-llm-out:hover { background: rgba(111, 214, 255, .12); }
.ed-llm-out.is-invented { color: #f472b6; text-decoration: line-through; text-decoration-color: rgba(244, 114, 182, .6); }
.ed-llm-side { display: grid; gap: 8px; }
.ed-llm-probs { display: grid; gap: 5px; min-height: 52px; }
.ed-llm-prob { display: grid; grid-template-columns: 62px 1fr 32px; gap: 6px; align-items: center; font: 10px var(--ed-mono); color: var(--ed-ink-3); }
.ed-llm-prob span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-llm-prob i { height: 6px; border-radius: 3px; background: var(--ed-line); position: relative; overflow: hidden; }
.ed-llm-prob i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--ed-ink-3); transition: width .2s; }
.ed-llm-prob.is-pick { color: var(--ed-ink); }
.ed-llm-prob.is-pick i::after { background: var(--ed-accent); }
.ed-llm-faith { margin: 0; font: 10.5px/1.45 var(--ed-mono); color: #34d399; }
.ed-llm-faith.is-bad { color: #f472b6; }
.ed-llm-source { font: 12px var(--ed-mono); color: var(--ed-accent); text-decoration: none; }
.ed-llm-source:hover { text-decoration: underline; }
.ed-llm-hint { margin: 0; font: 10.5px var(--ed-mono); color: var(--ed-ink-3); }

@media (max-width: 1180px) {
  .ed-main > .ed-hero .ed-llm-slide { grid-template-columns: 1fr; }
  .ed-llm-slide .ed-h1 { max-width: none; }
}
@media (max-width: 900px) {
  .ed-banner-tabs { justify-self: start; }
}
/* Celular: as quatro abas somam ~600 px sem quebra e alargavam a página
   inteira (rolagem lateral, medida em 15/10/2026 a 400 px). Quebram em duas
   linhas; rolagem horizontal cortaria o relógio que fica abaixo da pílula. */
@media (max-width: 640px) {
  .ed-banner { grid-template-columns: minmax(0, 1fr); }
  .ed-banner-tabs { flex-wrap: wrap; border-radius: 18px; }
}
@media (max-width: 720px) {
  .ed-llm-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "form" "chips" "tokens" "view" "out" "temp" "steps" "hint";
  }
  .ed-llm-out-wrap { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-banner-slide, .ed-banner-slide.is-on { transition: none; transform: none; }
  .ed-llm-tok em span { animation: none; }
}

/* ── O SLAM, 3º slide do banner (js/slam-trial.js) ─────────────────────────
   Mesma proporção do LLM: frase estreita à esquerda, o mapa grande à
   direita. O canvas tem a proporção da planta (50 × 26 células); a altura sai
   do JS, que mede a largura exibida. Embaixo: controles, placar, cômodos
   achados e a legenda das quatro peças. */
.ed-main > .ed-hero .ed-slam-slide { grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); gap: clamp(28px, 4vw, 64px); }
.ed-slam-slide .ed-h1 { font-size: clamp(2rem, 3.1vw, 3.3rem); max-width: 12ch; margin-bottom: 8px; }
/* O impacto do slide: a cobertura do mapa em número gigante, ao vivo. Dígitos
   tabulares para o número não "dançar" de largura enquanto sobe. */
.ed-slam-big {
  /* Altura de linha 1 + respiro em cima: com .9 e o gradiente recortado no
     texto, o topo dos algarismos saía da caixa e invadia o título. */
  margin: 22px 0 0; padding-top: .06em; font: 400 clamp(5.5rem, 11vw, 10.5rem)/1 var(--ed-serif); letter-spacing: -.04em;
  color: var(--ed-ink); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #eef2f8 30%, #6fd6ff); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ed-slam-big small { font-size: .38em; margin-left: .06em; }
.ed-slam-big-cap { margin: 10px 0 0; font: 13px/1.5 var(--ed-mono); color: var(--ed-ink-2); max-width: 30ch; }
.ed-slam-tech { margin: 36px 0 0; font: 11px var(--ed-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ed-ink-3); }
/* Os slides dividem uma célula de grade, então todos têm a altura do maior
   (o SLAM). Sem alinhar pelo topo, a pilha descia e ficava com um vão em
   cima a cada volta do banner (medido na tela, 14/10/2026). */
.ed-banner-slide.ed-hero-grid { align-self: start; }
/* Nos slides com demonstração, as colunas alinham pelo TOPO: a coluna do app
   cresce enquanto a animação roda (tokens, trechos, resposta) e, centrada, a
   frase da esquerda descia junto — o dono apontou na tela (14/10/2026). */
.ed-main > .ed-hero .ed-llm-slide, .ed-main > .ed-hero .ed-slam-slide { align-items: start; }
.ed-slam-slide .ed-llm-note { margin-top: 28px; max-width: 40ch; font: 11px/1.6 var(--ed-mono); color: var(--ed-ink-3); }
.ed-slam { display: grid; gap: 14px; width: 100%; min-width: 0; }
.ed-slam-canvas {
  display: block; width: 100%; aspect-ratio: 50 / 26; cursor: crosshair;
  border: 1px solid var(--ed-line); border-radius: 12px; background: #07090d;
}
.ed-slam-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.ed-slam-controls button {
  font: 12px var(--ed-mono); color: var(--ed-ink); background: transparent;
  border: 1px solid var(--ed-line); border-radius: 999px; padding: 7px 14px; cursor: pointer;
  transition: border-color .2s;
}
.ed-slam-controls button[data-act="explore"] { color: var(--ed-bg); background: var(--ed-accent); border-color: var(--ed-accent); font-weight: 600; }
.ed-slam-controls button:hover { border-color: var(--ed-accent); }
.ed-slam-controls label { display: inline-flex; gap: 6px; align-items: center; font: 11.5px var(--ed-mono); color: var(--ed-ink-2); cursor: pointer; }
.ed-slam-controls input { accent-color: var(--ed-accent); }
/* Placar: quatro números grandes, o rótulo pequeno embaixo. */
.ed-slam-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ed-slam-stats div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 12px; border: 1px solid var(--ed-line); border-radius: 10px; }
.ed-slam-stats dt { font: 10.5px var(--ed-mono); color: var(--ed-ink-3); }
.ed-slam-stats dd { margin: 0; font: 22px/1 var(--ed-serif); color: var(--ed-ink); font-variant-numeric: tabular-nums; }
/* Cômodos achados: etiqueta com a cor do cômodo à esquerda, na ordem em que
   o robô os descobriu. */
.ed-slam-rooms { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.ed-slam-rooms li {
  font: 11px var(--ed-mono); color: var(--ed-ink); padding: 4px 9px; border-radius: 6px;
  border: 1px solid var(--ed-line); border-left: 3px solid var(--c); animation: ed-llm-in .3s ease-out both;
}
.ed-slam-legend { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.ed-slam-legend li { display: grid; gap: 2px; font: 11px/1.45 var(--ed-mono); color: var(--ed-ink-3); }
.ed-slam-legend b { color: var(--ed-ink); font-weight: 600; }
.ed-slam-hint { margin: 0; font: 10.5px var(--ed-mono); color: var(--ed-ink-3); }

@media (max-width: 1180px) {
  .ed-main > .ed-hero .ed-slam-slide { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ed-slam-stats, .ed-slam-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 02 / sobre — as três frentes ───────────────────────────────────────────
   Três colunas iguais, cada uma: número, nome grande em serifa, a tese numa
   linha, a stack em etiquetas, a PROVA (um número medido) destacada por uma
   régua de cor, e o link para a seção que mostra o trabalho. Pouco texto de
   propósito — o dono cortou o excesso no slide do SLAM ("muito texto"). */
.ed-pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px;
}
.ed-pillar {
  --tone: var(--ed-accent);
  display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 22px;
  border: 1px solid var(--ed-line); border-radius: 14px; background: var(--ed-side-bg);
  position: relative; overflow: hidden; transition: border-color .25s, transform .25s;
}
.ed-pillar:nth-child(2) { --tone: #34d399; }
.ed-pillar:nth-child(3) { --tone: #f472b6; }
/* Faixa de cor no topo do cartão: a identidade de cada frente. */
.ed-pillar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tone); }
.ed-pillar:hover { border-color: var(--tone); transform: translateY(-3px); }
.ed-pillar-k { margin: 0; font: 11px var(--ed-mono); letter-spacing: .14em; color: var(--tone); }
.ed-pillar h3 { margin: 0; font: 400 clamp(1.9rem, 2.6vw, 2.6rem)/1.05 var(--ed-serif); color: var(--ed-ink); letter-spacing: -.02em; }
.ed-pillar-thesis { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ed-ink-2); }
.ed-pillar-stack { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ed-pillar-stack li {
  font: 11px var(--ed-mono); color: var(--ed-ink-2); padding: 4px 9px;
  border: 1px solid var(--ed-line); border-radius: 999px;
}
.ed-pillar-proof {
  margin: auto 0 0; padding: 12px 0 0 14px; border-left: 2px solid var(--tone);
  font: 14px/1.5 var(--ed-serif); color: var(--ed-ink);
}
.ed-pillar-proof b { font-weight: 500; color: var(--tone); }
.ed-pillar-go { font: 12px var(--ed-mono); color: var(--ed-ink-2); text-decoration: none; }
.ed-pillar-go:hover { color: var(--tone); }
@media (max-width: 1100px) {
  .ed-pillars { grid-template-columns: 1fr; }
}

/* ── Codificação com IA: o Claude Code simulado (js/code-sim.js) ───────────
   Um terminal escuro com o vocabulário visual do Claude Code: laranja
   (#d97757) na caixa de boas-vindas e no spinner, ● nas mensagens, ⎿ nos
   resultados, diff com fundo verde/vermelho e a pergunta de aprovação numa
   caixa própria. A tela tem altura fixa e rola sozinha até o último bloco,
   como um terminal. */
.ed-main > .ed-hero .ed-cc-slide { grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); gap: clamp(28px, 4vw, 64px); }
.ed-cc-slide .ed-h1 { font-size: clamp(2rem, 3.1vw, 3.3rem); max-width: 13ch; margin-bottom: 18px; }
.ed-cc-slide .ed-llm-note { margin-top: 28px; max-width: 40ch; font: 11px/1.6 var(--ed-mono); color: var(--ed-ink-3); }
.ed-cc { --cc-orange: #d97757; display: grid; gap: 12px; min-width: 0; }
.ed-cc-win {
  display: grid; grid-template-rows: auto 1fr auto auto; min-width: 0;
  border: 1px solid #2a2a2a; border-radius: 12px; background: #141414; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  font: 13px/1.55 var(--ed-mono); color: #e6e6e6;
}
/* Barra do topo: só texto — sem os três pontinhos de janela. */
.ed-cc-bar {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px;
  border-bottom: 1px solid #262626; background: #1b1b1b; color: #8a8a8a; font-size: 11px;
}
.ed-cc-screen { height: clamp(300px, 46vh, 430px); overflow-y: auto; padding: 14px 16px 6px; scroll-behavior: smooth; }
.ed-cc-screen p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ed-cc-welcome { border: 1px solid var(--cc-orange); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; display: grid; gap: 4px; }
.ed-cc-wtitle { color: #e6e6e6; }
.ed-cc-wtitle::first-letter { color: var(--cc-orange); }
.ed-cc-wsub { color: #8a8a8a; font-size: 12px; }
.ed-cc-user { color: #9a9a9a; margin: 4px 0 12px !important; }
.ed-cc-say { margin: 2px 0 12px !important; }
.ed-cc-say.is-final { color: #ffffff; }
.ed-cc-spin { color: var(--cc-orange); margin: 2px 0 12px !important; }
.ed-cc-block { margin: 2px 0 12px; animation: ed-llm-in .2s ease-out both; }
.ed-cc-head { font-weight: 600; }
/* O ● das chamadas de ferramenta fica verde quando ela já respondeu. */
.ed-cc-block.is-tool .ed-cc-head::first-letter { color: #4ec98b; }
.ed-cc-out { color: #a0a0a0; padding-left: 2ch; }
.ed-cc-out.is-done { color: #6f6f6f; }
.ed-cc-strike { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); }
.ed-cc-out.is-ok { color: #4ec98b; }
.ed-cc-out.is-bad { color: #ef6b73; }
/* Diff: número da linha, sinal e código; fundo inteiro da linha colorido. */
.ed-cc-diff { margin: 6px 0 0 2ch; border: 1px solid #2a2a2a; border-radius: 6px; overflow: hidden; font-size: 12px; }
.ed-cc-dl { display: grid; grid-template-columns: 4ch 2ch 1fr; padding: 0 8px; }
.ed-cc-dl.is-add { background: rgba(46, 160, 67, .22); }
.ed-cc-dl.is-del { background: rgba(248, 81, 73, .22); }
.ed-cc-ln { color: #6f6f6f; text-align: right; padding-right: 1ch; }
.ed-cc-dl.is-add .ed-cc-sign { color: #4ec98b; }
.ed-cc-dl.is-del .ed-cc-sign { color: #ef6b73; }
.ed-cc-code { white-space: pre; overflow-x: auto; }
/* A pergunta de aprovação: caixa com borda, opções numeradas, ❯ na marcada. */
.ed-cc-ask { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid #5b5b5b; border-radius: 8px; display: grid; gap: 2px; }
.ed-cc-askq { margin-bottom: 6px !important; }
.ed-cc-opt {
  text-align: left; font: inherit; color: #a0a0a0; background: none; border: 0; padding: 1px 0; cursor: pointer; white-space: pre-wrap;
}
.ed-cc-opt:hover:not(:disabled), .ed-cc-opt.is-on { color: var(--cc-orange); }
.ed-cc-opt:disabled { cursor: default; }
/* O prompt: a caixa arredondada com ">", como a do Claude Code. */
.ed-cc-prompt { display: flex; align-items: center; gap: 10px; margin: 6px 14px 4px; padding: 9px 12px; border: 1px solid #5b5b5b; border-radius: 8px; }
.ed-cc-caret { color: #9a9a9a; }
.ed-cc-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font: inherit; color: #e6e6e6; }
.ed-cc-input::placeholder { color: #6f6f6f; }
.ed-cc-foot { display: flex; justify-content: space-between; gap: 10px; padding: 2px 16px 10px; color: #6f6f6f; font-size: 11px; }
.ed-cc-mode { color: var(--cc-orange); }
.ed-cc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-cc-chip {
  font: 11.5px/1.3 var(--ed-mono); color: var(--ed-ink-2); background: transparent; cursor: pointer;
  border: 1px solid var(--ed-line); border-radius: 999px; padding: 6px 11px; transition: color .2s, border-color .2s;
}
.ed-cc-chip:hover, .ed-cc-chip:focus-visible { color: var(--ed-ink); border-color: #d97757; }
/* O plan mode, em azul como no Claude Code. */
.ed-cc-mode-line { color: #5fb3f9; font-size: 12px; margin: 0 0 10px !important; }
/* O link que leva do slide à seção 05 (o mesmo fluxo, passo a passo). */
.ed-cc-more {
  display: inline-flex; margin-top: 22px; padding: 9px 16px; border-radius: 999px; text-decoration: none;
  font: 600 12.5px var(--ed-mono); color: #0b0f16; background: #d97757; transition: filter .2s;
}
.ed-cc-more:hover { filter: brightness(1.1); }
@media (max-width: 1180px) {
  .ed-main > .ed-hero .ed-cc-slide { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ed-cc-win { font-size: 12px; }
  .ed-cc-bar span:last-child { display: none; }
}

/* ── 05 / codificação com IA: o passo a passo (js/ai-coding.js) ────────────
   À esquerda as oito etapas (a explicação só aparece na etapa aberta, para
   não virar parede de texto); à direita o terminal do Claude Code, no mesmo
   visual do slide 2 (`.ed-cc-*`), e os controles. */
.ed-aic { --ok: #4ec98b; --bad: #ef6b73; }
.ed-sp { margin-top: 36px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.ed-sp-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ed-sp-steps li { border-radius: 10px; border: 1px solid transparent; transition: background .3s, border-color .3s; }
.ed-sp-step {
  width: 100%; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; text-align: left;
  padding: 11px 14px; background: none; border: 0; cursor: pointer; color: var(--ed-ink-3); font: inherit;
}
.ed-sp-step i { font: 11px var(--ed-mono); font-style: normal; }
.ed-sp-step b { font: 400 18px/1.25 var(--ed-serif); color: inherit; }
.ed-sp-step:hover { color: var(--ed-ink-2); }
.ed-sp-why {
  margin: 0; padding: 0 14px 0 52px; max-height: 0; overflow: hidden; opacity: 0;
  font-size: 14.5px; line-height: 1.55; color: var(--ed-ink-2); transition: max-height .4s ease, opacity .4s ease, padding .4s ease;
}
.ed-sp-steps li.is-done .ed-sp-step { color: var(--ed-ink-2); }
.ed-sp-steps li.is-done .ed-sp-step i { color: var(--ok); }
.ed-sp-steps li.is-on { background: rgba(217, 119, 87, .07); border-color: rgba(217, 119, 87, .4); }
.ed-sp-steps li.is-on .ed-sp-step { color: var(--ed-ink); }
.ed-sp-steps li.is-on .ed-sp-step i { color: #d97757; }
.ed-sp-steps li.is-on .ed-sp-why { max-height: 9em; opacity: 1; padding-bottom: 14px; }
.ed-sp-right { display: grid; gap: 12px; min-width: 0; }
.ed-sp-win { grid-template-rows: auto 1fr auto; }
.ed-sp-screen { height: clamp(320px, 52vh, 440px); }
.ed-sp-screen p { margin: 0 0 3px; }
/* Tipos de linha próprios do passo a passo (os demais vêm do slide 2). */
.ed-sp-file { color: #8a8a8a; font-size: 11px; border-bottom: 1px solid #2a2a2a; padding-bottom: 6px; margin-bottom: 8px !important; }
.ed-sp-mode { color: #5fb3f9; font-size: 12px; margin-bottom: 8px !important; }
.ed-sp-add { background: rgba(46, 160, 67, .22); padding: 0 8px; margin: 0 0 0 2ch !important; }
.ed-sp-del { background: rgba(248, 81, 73, .22); padding: 0 8px; margin: 0 0 0 2ch !important; }
.ed-sp-ask { margin: 8px 0 2px !important; padding-top: 6px; border-top: 1px dashed #3a3a3a; }
.ed-sp-pick { color: #d97757; }
.ed-sp-opt { color: #8a8a8a; }
.ed-cc-head { margin-top: 6px !important; }
.ed-sp-ctrl { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-sp-ctrl button {
  font: 600 12.5px var(--ed-mono); padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ed-line); background: transparent; color: var(--ed-ink); transition: border-color .2s, color .2s, background .2s;
}
.ed-sp-ctrl button:disabled { opacity: .35; cursor: default; }
.ed-sp-ctrl .ed-sp-next { background: #d97757; border-color: #d97757; color: #0b0f16; }
.ed-sp-plant:hover, .ed-sp-plant.is-on { border-color: var(--bad) !important; color: var(--bad) !important; }
.ed-sp-plant[hidden] { display: none; }
@media (max-width: 1000px) {
  .ed-sp { grid-template-columns: 1fr; }
}

/* ── 05 / infra (js/infra.js) ───────────────────────────────────────────────
   Um rack só: a internet em cima, o cluster embaixo, e cada etapa acende uma
   parte dele (classes no #ed-infra: has-edge, is-joined, has-plat, is-airgap,
   is-deployed, is-play, is-degraded). Ao lado, a frase e o comando da etapa.
   No playground, cada servidor é um botão que derruba e religa. */
/* As cores moram no rack, não na seção: o mesmo rack também vive no banner. */
.ed-rk { --ok: #34d399; --bad: #f472b6; --cp: #a78bfa; }
.ed-rk { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.ed-rk-stage { display: grid; justify-items: center; gap: 0; padding: 22px; border: 1px solid var(--ed-line); border-radius: 16px; background: var(--ed-side-bg); }
.ed-rk-net { font: 12px var(--ed-mono); color: var(--ed-ink-2); padding: 7px 16px; border: 1px solid var(--ed-line); border-radius: 999px; transition: color .4s, border-color .4s; }
/* O fio entre a internet e o cluster: corta (tracejado rosa) no air-gap. */
.ed-rk-wire { width: 2px; height: 26px; background: var(--ed-ink-3); position: relative; transition: background .4s; }
.ed-rk.is-airgap .ed-rk-net { color: var(--bad); border-color: var(--bad); text-decoration: line-through; }
.ed-rk.is-airgap .ed-rk-wire { background: repeating-linear-gradient(var(--bad) 0 4px, transparent 4px 8px); }
.ed-rk.is-airgap .ed-rk-wire::after { content: "✕"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 13px var(--ed-mono); color: var(--bad); background: var(--ed-side-bg); padding: 0 3px; }
/* ALTURA FIXA: tudo que surge numa etapa (DNS/túnel, rótulo do cluster,
   chips da plataforma) ocupa o lugar desde o começo e só muda a opacidade.
   Crescendo em altura, o rack empurrava o resto — no banner, o título ao lado
   (centralizado na vertical) subia e descia a cada etapa (dono, 15/10/2026). */
/* O que o Terraform cria: aparece na etapa 2 e fica. */
.ed-rk-edge { display: flex; gap: 6px; height: 28px; margin-bottom: 10px; opacity: 0; transition: opacity .4s; }
.ed-rk-edge span { font: 11px var(--ed-mono); color: var(--ed-accent); padding: 4px 10px; border: 1px solid rgba(111, 214, 255, .45); border-radius: 6px; }
.ed-rk.has-edge .ed-rk-edge { opacity: 1; }
/* O cluster: tracejado enquanto são só servidores soltos, contínuo depois do join. */
.ed-rk-cluster { width: 100%; display: grid; gap: 12px; padding: 16px; border: 1px dashed var(--ed-line); border-radius: 14px; transition: border-color .4s, background .4s; }
.ed-rk.is-joined .ed-rk-cluster { border-style: solid; border-color: rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .04); }
.ed-rk.is-degraded .ed-rk-cluster { border-color: var(--bad); background: rgba(244, 114, 182, .06); }
.ed-rk-clabel { margin: 0; font: 11px var(--ed-mono); letter-spacing: .08em; color: var(--ok); opacity: 0; transition: opacity .4s; text-align: center; }
.ed-rk.is-joined .ed-rk-clabel { opacity: 1; }
.ed-rk-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.ed-rk-node {
  display: grid; gap: 4px; justify-items: center; padding: 12px 6px; cursor: pointer;
  border: 1px solid var(--ed-line); border-radius: 10px; background: transparent; color: var(--ed-ink-3);
  transition: border-color .35s, color .35s, opacity .35s, transform .2s, background .35s;
}
.ed-rk-node i { width: 9px; height: 9px; border-radius: 50%; background: var(--ed-line); transition: background .35s, box-shadow .35s; }
.ed-rk-node b { font: 600 11.5px var(--ed-mono); color: inherit; }
.ed-rk-app { font: 10px/12px var(--ed-mono); height: 12px; color: var(--ed-ink-3); }
.ed-rk-node.is-lit { color: var(--ed-ink); border-color: var(--ed-ink-3); }
.ed-rk-node.is-lit i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.ed-rk-node.is-cp.is-lit { border-color: rgba(167, 139, 250, .6); }
.ed-rk-node.is-cp.is-lit b { color: var(--cp); }
.ed-rk.is-deployed .ed-rk-node.is-lit .ed-rk-app { color: var(--ok); }
.ed-rk-node.is-down { opacity: .55; border-color: var(--bad); color: var(--bad); background: rgba(244, 114, 182, .08); }
.ed-rk-node.is-down i { background: var(--bad); box-shadow: none; }
.ed-rk-node.is-down b { text-decoration: line-through; }
.ed-rk-node.is-down .ed-rk-app { visibility: hidden; }
.ed-rk.is-play .ed-rk-node:hover { transform: translateY(-3px); border-color: var(--ed-accent); }
/* A plataforma que o Flux sobe: chips entre control-planes e workers. */
.ed-rk-plat { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; opacity: 0; transition: opacity .5s; }
.ed-rk-plat span { font: 10.5px var(--ed-mono); color: var(--ed-ink); padding: 3px 8px; border: 1px solid var(--ed-line); border-radius: 999px; }
.ed-rk.has-plat .ed-rk-plat { opacity: 1; }
.ed-rk.is-airgap .ed-rk-plat span:first-child { border-color: var(--ed-accent); color: var(--ed-accent); }
.ed-rk-health { margin: 12px 0 0; min-height: 1.4em; font: 600 12px var(--ed-mono); color: var(--ed-ink-3); }
.ed-rk-health .is-ok { color: var(--ok); }
.ed-rk-health .is-bad { color: var(--bad); }
/* A história: frase grande, comando e os controles. */
.ed-rk-story { display: grid; gap: 18px; align-content: start; }
.ed-rk-cap { margin: 0; min-height: 3.2em; font: 400 clamp(1.3rem, 2vw, 1.7rem)/1.35 var(--ed-serif); color: var(--ed-ink); }
.ed-rk-cap.is-bad { color: var(--bad); }
/* Três linhas de 1.65em + padding + borda: o comando mais longo tem três;
   menos que isso, o terminal crescia 12 px na 3ª linha e o rack pulava. */
.ed-rk-term { margin: 0; min-height: calc(3 * 1.65em + 34px); padding: 16px 18px; border: 1px solid var(--ed-line); border-radius: 12px; background: #07090d; font: 12.5px/1.65 var(--ed-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ed-ink-2); }
.ed-rk-term .is-cmd { color: var(--ed-ink); }
.ed-rk-term .is-ok { color: var(--ok); }
.ed-rk-term .is-bad { color: var(--bad); }
.ed-rk-term .is-out { color: var(--ed-ink-3); }
.ed-rk-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ed-rk-ctrl button { font: 12.5px var(--ed-mono); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ed-line); background: transparent; color: var(--ed-ink); cursor: pointer; }
.ed-rk-ctrl button:disabled { opacity: .35; cursor: default; }
.ed-rk-ctrl .ed-rk-next { background: var(--ed-accent); border-color: var(--ed-accent); color: #0b0f16; }
.ed-rk-count { margin-left: auto; font: 11px var(--ed-mono); color: var(--ed-ink-3); }
@media (max-width: 1000px) {
  .ed-rk { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ed-rk-stage { padding: 14px; }
  .ed-rk-cluster { padding: 10px; }
  .ed-rk-row { gap: 5px; }
  .ed-rk-node { padding: 10px 2px; }
  .ed-rk-node b { font-size: 9.5px; }
}

/* O mesmo rack no 2º slide do banner do hero (#ed-rk-hero): uma coluna só
   (o texto do slide já ocupa a outra), frase e terminal menores para caber
   na altura do hero sem empurrar o slide. */
.ed-rk-hero.ed-rk { margin-top: 0; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ed-rk-hero .ed-rk-stage { padding: 16px; }
.ed-rk-hero .ed-rk-cap { min-height: 4.1em; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.ed-rk-hero .ed-rk-term { min-height: calc(3 * 1.65em + 26px); padding: 12px 14px; font-size: 11.5px; }
.ed-rk-hero .ed-rk-story { gap: 12px; }
.ed-rk-hero .ed-rk-node { padding: 9px 4px; }
.ed-rk-hero .ed-rk-cluster { gap: 9px; padding: 12px; }
/* No banner quem avança é o relógio da aba; os botões ficariam abaixo da dobra. */
.ed-rk-hero .ed-rk-ctrl { display: none; }
.ed-rk-slide .ed-cc-more + .ed-llm-note { margin-top: 14px; }