/* Site Mapper Idea: a história contada pela rolagem.
 * O palco fica parado; os passos rolam ao lado dele (ou por cima, no celular) e dizem ao palco qual cena mostrar.
 * Nada no palco tem rolagem própria: o que não cabe é cortado com esmaecimento, para a rolagem ser sempre a da página.
 * Cores: mesa quase-preta, papel branco, tinta azul da marca; o ciano só marca o que acabou de mudar. */

:root {
  --azul: #0074fb;
  --azul-fundo: #0c4aba;
  --azul-escuro: #0a63d8;
  --ciano: #36c6ff;
  --quase-preto: #13131b;
  --cinza: #b9baba;
  --cinza-claro: #e8e8e8;
  --branco: #ffffff;
  --mesa: var(--quase-preto);
  --mesa-alta: #1c1c27;
  --mesa-funda: #0d0d14;
  --mesa-borda: rgba(185, 186, 186, 0.22);
  --texto-mesa: var(--cinza-claro);
  --texto-mesa-2: var(--cinza);
  --azul-na-mesa: #5aa4ff;
  --papel: var(--branco);
  --papel-borda: #d6d7dc;
  --texto-papel: var(--quase-preto);
  --texto-papel-2: #4a4b57;
  --tinta: var(--azul-fundo);
  --tinta-comentario: #5c6488;
  --segunda: rgba(54, 198, 255, 0.3);
  --ic-b: var(--azul-fundo);
  --ic-d: #2a64d6;
  --ic-r: #3b3c4a;
  --ic-o: #3b3c4a;
  --ic-m: #3b3c4a;
  --ic-e: #6c6d78;
  --ic-v: #8a8b94;
  --ic-g: #6c6d78;
  --ic-at: #8a8b94;
  --ic-p: #6c6d78;

  --fonte: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --topo: 64px;
  --sombra-folha: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 32px -12px rgba(0, 0, 0, 0.55);
  --saida: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: var(--topo); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mesa);
  color: var(--texto-mesa);
  font-family: var(--fonte);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  scrollbar-color: #3a3b48 var(--mesa);
}
::selection { background: var(--azul); color: var(--branco); }
:focus-visible { outline: 2px solid var(--azul-na-mesa); outline-offset: 3px; border-radius: 4px; }
h1, h2 { margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--azul-na-mesa); text-underline-offset: 3px; }
code, pre { font-family: var(--mono); }
code { font-size: 0.86em; }
img { display: block; max-width: 100%; }
pre { margin: 0; }

.pular { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--azul-fundo); color: var(--branco); padding: 8px 14px; border-radius: 6px; }
.pular:focus { top: 12px; }

/* ---------- topo: logotipo, capítulo atual e progresso da história ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--topo);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gutter);
  background: rgba(19, 19, 27, 0.94);
  border-bottom: 1px solid var(--mesa-borda);
}
.logo { flex: none; }
.logo img { height: 36px; width: auto; }
.topo-capitulo {
  margin-left: auto; font: 600 0.9rem var(--mono); color: var(--texto-mesa-2);
  opacity: 0; transition: opacity 0.3s;
}
.topo-capitulo.visivel { opacity: 1; }
.topo-acao {
  color: var(--branco); background: var(--azul); text-decoration: none; font-weight: 800; font-size: 1.1875rem;
  padding: 6px 18px; border-radius: 999px; white-space: nowrap; flex: none;
}
.topo-capitulo:not(.visivel) + .topo-acao { margin-left: auto; }
.topo-acao:hover { background: var(--azul-escuro); }
.topo-progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.topo-progresso i { display: block; height: 100%; width: 100%; background: var(--azul); transform-origin: left; transform: scaleX(var(--prog, 0)); }

/* ---------- abertura ---------- */
.abertura {
  min-height: 100svh; padding: calc(var(--topo) + 6vh) var(--gutter) 8vh;
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
}
.abertura h1 {
  font-size: clamp(2.6rem, 6.6vw, 6.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.96;
  color: var(--branco); max-width: 15ch;
}
.abertura h1 span { display: block; color: var(--azul); }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--texto-mesa-2); max-width: 52ch; }
.rolar { display: flex; align-items: center; gap: 14px; margin-top: 4vh; font: 600 0.92rem var(--mono); color: var(--texto-mesa-2); }
.rolar i { position: relative; width: 2px; height: 46px; background: var(--mesa-borda); overflow: hidden; }
.rolar i::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: var(--azul); animation: descer 1.8s var(--saida) infinite; }
@keyframes descer { to { top: 100%; } }

/* ---------- a história: palco parado, passos rolando ---------- */
.historia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); position: relative; }
.passos { grid-column: 1; grid-row: 1; padding: 0 clamp(20px, 3vw, 48px) 0 var(--gutter); }
.palco {
  grid-column: 2; grid-row: 1; align-self: start;
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
}
.capitulo { padding-bottom: 6vh; }
.passo {
  min-height: 92vh; padding: 36vh 0 6vh; max-width: 32rem;
  opacity: 0.28; transition: opacity 0.4s;
}
.passo.longo { min-height: 150vh; }
/* no passo longo o texto fica parado enquanto o palco anda */
.passo.longo .texto { position: sticky; top: 36vh; }
.passo.curto { min-height: 55vh; padding-top: 20vh; }
.passo.ativo { opacity: 1; }
.passo .num { font: 700 0.95rem var(--mono); color: var(--azul-na-mesa); margin-bottom: 10px; }
.passo h2 { font-size: clamp(2rem, 3.3vw, 3.1rem); font-weight: 800; letter-spacing: -0.03em; color: var(--branco); margin-bottom: 18px; }
.passo p:not(.num):not(.entrega) { font-size: clamp(1.15rem, 1.45vw, 1.4rem); line-height: 1.5; color: var(--texto-mesa); }
.passo code { color: var(--branco); }
.entrega {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 22px;
  padding: 8px 14px; border-left: 3px solid var(--azul); background: var(--mesa-alta);
  font-size: 1rem; color: var(--texto-mesa);
}
.entrega b { font: 700 0.8rem var(--mono); color: var(--azul-na-mesa); }
.entrega.custo { border-left-color: var(--cinza); }
.entrega.custo b { color: var(--cinza); }

/* cenas: todas no mesmo lugar; a ativa aparece */
.cena > * { min-width: 0; }
.cena {
  position: absolute; inset: calc(var(--topo) + 28px) var(--gutter) 28px 0;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity 0.5s var(--saida), transform 0.6s var(--saida), visibility 0s 0.5s;
}
.cena.ativa { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s var(--saida), transform 0.6s var(--saida); }
/* peças que entram com o estado: escondidas até a cena chegar ao estado indicado */
.entra { opacity: 0; transform: translateY(12px); transition: opacity 0.45s var(--saida), transform 0.55s var(--saida); }
.mostra { opacity: 1; transform: none; }

/* papel */
.papel { background: var(--papel); color: var(--texto-papel); border-radius: 8px; box-shadow: var(--sombra-folha); }

/* janelas (editor, chat, terminal) */
.janela { background: var(--mesa-funda); border: 1px solid var(--mesa-borda); border-radius: 10px; overflow: hidden; }
.janela-barra { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--mesa-borda); }
.janela-barra i { width: 9px; height: 9px; border-radius: 50%; background: #3a3b48; }
.janela-barra b { margin-left: 10px; font: 600 0.78rem var(--mono); color: var(--texto-mesa-2); }
.editor-corpo { padding: 12px 16px; font-size: 0.78rem; line-height: 1.6; color: var(--texto-mesa); white-space: pre; overflow: hidden; }
.editor-corpo .c { color: #9a9caa; font-style: italic; }
.editor-corpo .k { color: var(--azul-na-mesa); font-weight: 700; }
.editor-corpo .m { color: #a9cbff; }
.cursor { display: inline-block; width: 0.55em; height: 1.1em; vertical-align: -0.2em; background: var(--azul-na-mesa); }

/* corte com esmaecimento no lugar de rolagem interna */
.corta { overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }

/* placar de números */
.placar { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 0; }
.placar dt { font-size: 0.9rem; color: var(--texto-mesa-2); }
.placar dd { margin: 0; font: 800 clamp(1.6rem, 2.6vw, 2.4rem) var(--mono); color: var(--branco); line-height: 1.1; }

/* gaveteiro: os 37 arquivos */
.gaveteiro { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 3px; }
.gaveta {
  height: 26px; padding: 0 7px; display: flex; align-items: center; border-radius: 4px;
  background: var(--mesa-alta); border: 1px solid var(--mesa-borda);
  font: 500 0.58rem/1.18 var(--mono); color: var(--texto-mesa-2); overflow: hidden;
  opacity: 0.14; transition: opacity 0.25s, background-color 0.3s, color 0.3s, border-color 0.3s;
}
.gaveta.feita { opacity: 1; color: var(--texto-mesa); }
.gaveta.acesa { background: var(--azul-fundo); border-color: var(--azul-fundo); color: var(--branco); opacity: 1; }
.gaveta.fraca { opacity: 0.32; }

/* carimbo */
.carimbo {
  align-self: flex-start; padding: 6px 14px; border: 2px solid var(--cinza); border-radius: 4px;
  font: 700 0.95rem var(--mono); color: var(--cinza); transform: rotate(-3deg) scale(1.1); opacity: 0;
  transition: opacity 0.3s, transform 0.4s var(--saida);
}
.carimbo.mostra { opacity: 1; transform: rotate(-3deg); }
.carimbo.forte { border-color: var(--branco); color: var(--branco); font-size: 1.15rem; }

/* 1. livro */
.livro { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 720px); margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5)); }
.pagina { background: #fbfbfd; color: var(--texto-papel); padding: clamp(18px, 3vw, 36px); min-height: clamp(300px, 46vh, 440px); }
.pagina.esquerda { border-radius: 10px 2px 2px 10px; box-shadow: inset -14px 0 18px -14px rgba(0, 0, 0, 0.3); }
.pagina.direita { border-radius: 2px 10px 10px 2px; box-shadow: inset 14px 0 18px -14px rgba(0, 0, 0, 0.3); }
.livro-cap { font: 700 0.75rem var(--mono); color: var(--azul-fundo); }
.livro-titulo { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 800; margin: 6px 0 12px; line-height: 1.1; }
.livro-texto { font-size: 0.92rem; color: var(--texto-papel-2); margin-bottom: 14px; }
.livro-codigo { font-size: clamp(0.66rem, 1vw, 0.8rem); line-height: 1.6; color: var(--tinta); background: #eef0f6; padding: 12px; border-radius: 6px; overflow: hidden; }
.livro-codigo .k { font-weight: 800; }
.livro-legenda { font-size: 0.78rem; color: var(--texto-papel-2); margin: 8px 0 12px; }
.barra { display: block; height: 7px; width: var(--w); background: #e2e3ea; border-radius: 4px; margin: 10px 0; }
.marcador {
  position: absolute; top: -8px; right: 34px; padding: 18px 8px 10px; background: var(--azul);
  font: 700 0.75rem var(--mono); color: var(--branco); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  transform: translateY(-30px); opacity: 0; transition: transform 0.5s var(--saida), opacity 0.3s;
}
.cena.e1 .marcador { transform: none; opacity: 1; }

/* 2. história de usuário */
.cartao-historia {
  width: min(100%, 580px); margin: 0 auto; padding: clamp(20px, 3vw, 34px);
  background: var(--papel); color: var(--texto-papel); border-radius: 6px; box-shadow: var(--sombra-folha);
  transform: rotate(-1.2deg);
}
.cartao-historia header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 0.85rem; color: var(--texto-papel-2); }
.cartao-historia header b { font: 700 0.8rem var(--mono); color: var(--azul-fundo); }
.cartao-historia p { font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.45; font-weight: 600; }
.cartao-historia footer { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--papel-borda); font-size: 0.92rem; color: var(--texto-papel-2); }
.cartao-historia mark {
  background: linear-gradient(var(--azul), var(--azul)) left bottom / 0% 3px no-repeat; color: inherit;
  transition: background-size 0.5s var(--saida) calc(var(--i, 0) * 0.12s), color 0.3s;
}
.cena.e1 .cartao-historia mark, .cartao-historia.mini mark { background-size: 100% 3px; color: var(--azul-fundo); }

/* 3. à mão */
.cena[data-nome="mao"] .editor { height: clamp(150px, 30vh, 280px); flex: none; }

/* 4. campinho */
.balao {
  align-self: flex-start; max-width: 460px; padding: 14px 18px; border-radius: 16px 16px 16px 4px;
  background: var(--papel); color: var(--texto-papel); font-size: 1.1rem; font-weight: 600; box-shadow: var(--sombra-folha);
}
.balao b { display: block; font: 700 0.75rem var(--mono); color: var(--azul-fundo); margin-bottom: 2px; }

/* 5. IA */
.chat-corpo { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 0.98rem; }
.msg.voce { align-self: flex-end; background: var(--azul-fundo); color: var(--branco); border-bottom-right-radius: 4px; }
.msg.ia { align-self: flex-start; background: var(--mesa-alta); border: 1px solid var(--mesa-borda); border-bottom-left-radius: 4px; }

/* 6. medidor de tokens */
.medidor-titulo { font-weight: 700; color: var(--branco); margin-bottom: 10px; }
.medidor-trilho { position: relative; height: 64px; background: var(--mesa-alta); border: 1px solid var(--mesa-borda); border-radius: 6px; margin-top: 30px; }
.bloco {
  position: absolute; top: 6px; bottom: 6px; left: calc(var(--k) * var(--w) + 4px); width: calc(var(--w) - 4px);
  background: var(--azul); border-radius: 3px; display: flex; align-items: center; justify-content: center;
  font: 700 0.72rem var(--mono); color: var(--branco);
  opacity: 0; transform: scaleX(0.4); transform-origin: left; transition: opacity 0.25s, transform 0.35s var(--saida);
}
.bloco.mostra { opacity: 1; transform: none; }
.bloco.alem { background: repeating-linear-gradient(135deg, var(--azul) 0 6px, var(--azul-fundo) 6px 12px); }
.medidor-limite { position: absolute; top: -28px; bottom: -8px; left: 80%; border-left: 2px dashed var(--branco); z-index: 2; }
.medidor-limite b { position: absolute; top: 0; left: 8px; white-space: nowrap; font: 700 0.8rem var(--mono); color: var(--branco); }
.medidor-legenda { margin-top: 12px; font: 700 1.05rem var(--mono); color: var(--branco); min-height: 1.6em; }
.medidor-nota { margin-top: 6px; font-size: 0.85rem; color: var(--texto-mesa-2); max-width: 60ch; }
.apagado .editor-corpo { color: #6c6e7c; height: clamp(110px, 20vh, 190px); }
.apagado .editor-corpo span { color: inherit !important; font-weight: inherit; }

/* mapa mental em papel */
.folha-mapa { background: var(--papel); border-radius: 8px; box-shadow: var(--sombra-folha); padding: 14px; overflow: hidden; }
.folha-mapa svg { display: block; width: 100%; height: auto; max-height: 58vh; }
.aresta { fill: none; stroke: #b7bac6; stroke-width: 1.5; }
.caixa-no { fill: var(--papel); stroke: #c9cbd4; }
.raiz .caixa-no { stroke: var(--azul); stroke-width: 2; }
.sublinhado .caixa-no { stroke: var(--azul); stroke-width: 2; }
.novo .caixa-no { fill: #c8eeff; stroke: var(--ciano); stroke-width: 2; }
.rotulo-no { font: 500 12px var(--mono); fill: var(--texto-papel); }
.tipo-no { fill: var(--texto-papel-2); }
.raiz .rotulo-no { font-weight: 700; }
.no-entra { opacity: 0; transition: opacity 0.4s calc(var(--i) * 0.05s); }
.cena.ativa .no-entra { opacity: 1; }

.arquivo-mi { background: var(--mesa-funda); border: 1px solid var(--mesa-borda); border-radius: 8px; overflow: hidden; }
.arquivo-mi header, .codigo-comum header, .saida-painel header, .folha-codigo header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 14px; border-bottom: 1px solid var(--mesa-borda);
}
.arquivo-mi header b, .codigo-comum header b, .saida-painel header b, .folha-codigo header b { font: 700 0.8rem var(--mono); color: var(--branco); }
.arquivo-mi header span, .codigo-comum header span, .saida-painel header span, .folha-codigo header span { font-size: 0.82rem; color: var(--texto-mesa-2); }
.arquivo-mi pre, .saida-painel pre { padding: 12px 14px; font-size: 0.76rem; line-height: 1.55; color: var(--texto-mesa); white-space: pre; }
.arquivo-mi pre .k, .saida-painel pre .k { color: var(--azul-na-mesa); font-weight: 700; }
.arquivo-mi pre .m, .saida-painel pre .m { color: #a9cbff; }
.arquivo-mi pre .c, .saida-painel pre .c { color: #9a9caa; font-style: italic; }

/* cena com duas colunas e peças trocando no mesmo lugar */
.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.troca { display: grid; grid-template-columns: minmax(0, 1fr); }
.troca > * { grid-area: 1 / 1; }
.cena[data-nome="mapa"] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-content: center; gap: 20px; }
.cena[data-nome="mapa"] .cartao-historia.mini { grid-area: 1 / 1; transform: rotate(-1.2deg); align-self: center; padding: 18px; }
.cena[data-nome="mapa"] .cartao-historia.mini p { font-size: 1rem; }
.cena[data-nome="mapa"] .arquivo-mi { grid-area: 1 / 1; align-self: stretch; max-height: 62vh; }
.cena[data-nome="mapa"] .folha-mapa { grid-area: 1 / 2; }
.cena[data-nome="mapa"] .cartao-historia.mini, .cena[data-nome="mapa"] .arquivo-mi { transition: opacity 0.45s, transform 0.5s var(--saida); }
.cena[data-nome="mapa"].e1 .cartao-historia.mini { opacity: 0; transform: rotate(-1.2deg) translateY(-14px); }
.cena[data-nome="mapa"]:not(.e1) .arquivo-mi { opacity: 0; transform: translateY(14px); }

/* 8. geradores */
.trilho { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: t; }
.trilho li {
  counter-increment: t; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: var(--mesa-alta); border: 1px solid var(--mesa-borda); font-weight: 700; font-size: 0.95rem; color: var(--texto-mesa-2);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.trilho li::before { content: counter(t); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mesa-funda); font: 700 0.72rem var(--mono); }
.trilho li.ativo { background: var(--azul-fundo); border-color: var(--azul-fundo); color: var(--branco); }
.trilho li.feito { color: var(--texto-mesa); }
.estacoes { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-height: 0; }
.estacao { grid-area: 1 / 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; opacity: 0; transform: translateY(14px); transition: opacity 0.45s, transform 0.5s var(--saida); }
.estacao.mostra { opacity: 1; transform: none; }
.gerador { max-height: 60vh; }
.pilha { position: relative; height: min(52vh, 440px); }
.pilha .folha-codigo {
  position: absolute; left: calc(var(--j) * 6%); top: calc(var(--j) * 34px); width: 70%;
  transform: rotate(var(--rot)) translateY(-40px); opacity: 0;
  transition: transform 0.55s var(--saida) calc(var(--j) * 0.09s), opacity 0.3s calc(var(--j) * 0.09s);
}
.estacao.mostra .pilha .folha-codigo { transform: rotate(var(--rot)); opacity: 1; }
.estacao-conta { font-size: 1.1rem; color: var(--texto-mesa-2); }
.estacao-conta b { font: 800 2rem var(--mono); color: var(--branco); margin-right: 6px; }

/* folha de código em papel */
.folha-codigo { background: var(--papel); color: var(--texto-papel); border-radius: 6px; box-shadow: var(--sombra-folha); overflow: hidden; }
.folha-codigo header { border-bottom-color: var(--papel-borda); }
.folha-codigo header b { color: var(--texto-papel); }
.folha-codigo header span { color: var(--texto-papel-2); }
.folha-codigo pre { padding: 8px 0; font-size: 0.72rem; line-height: 1.6; color: var(--tinta); white-space: pre; overflow: hidden; }
.linha { display: block; padding: 0 12px 0 0; }
.linha .n { display: inline-block; width: 3.6em; padding-right: 0.9em; text-align: right; color: #8a8b94; }
.linha.campo { background: #eef2fb; }
.linha.segunda { background: var(--segunda); color: var(--texto-papel); font-weight: 700; }
.linha.segunda .n { color: var(--texto-papel); }
.folha-codigo .c, .codigo-comum .c { color: var(--tinta-comentario); font-style: italic; }
.folha-codigo .k, .codigo-comum .k { font-weight: 800; }
.folha-codigo .m, .codigo-comum .m { color: var(--texto-papel); font-weight: 700; }

/* o navegador com a tela gerada: moldura de janela e legenda acima, para ninguém confundir com o site */
.navegador { margin: 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.navegador figcaption { order: -1; font-size: 0.95rem; color: var(--texto-mesa); }
.navegador figcaption::before { content: "▸ "; color: var(--azul-na-mesa); }
.navegador-barra { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: var(--cinza-claro); border-radius: 10px 10px 0 0; }
.navegador-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--cinza); }
.navegador-barra span { margin-left: 12px; flex: 1; padding: 3px 12px; border-radius: 999px; background: var(--papel); font: 500 0.78rem var(--mono); color: var(--texto-papel-2); }
.navegador-tela {
  position: relative; background: var(--papel); border-radius: 0 0 10px 10px; overflow: hidden; height: min(48vh, 420px);
  box-shadow: 0 0 0 1px var(--cinza-claro), var(--sombra-folha);
}
.navegador-tela::after { content: ""; position: absolute; inset: auto 0 0; height: 60px; background: linear-gradient(transparent, var(--papel)); }
.tela-escala { width: 760px; padding: 24px 28px; transform-origin: 0 0; transform: scale(var(--k, 1)); color: var(--texto-papel); }

.mi-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; }
.mi-form-title { grid-column: 1 / -1; margin: 0; font-size: 1.5rem; font-weight: 800; }
.mi-form-desc { grid-column: 1 / -1; margin: -6px 0 4px; color: var(--texto-papel-2); font-size: 0.98rem; }
.mi-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; font-weight: 700; }
.mi-field input, .mi-field select, .mi-field textarea {
  font: 500 1rem var(--fonte); color: var(--texto-papel); background: var(--papel);
  border: 1px solid #b9bbc6; border-radius: 6px; padding: 9px 10px; min-height: 44px; width: 100%;
}
.mi-field input:disabled { background: var(--cinza-claro); }
.mi-field input::placeholder { color: #6b6d7a; }
.mi-req { color: var(--azul-fundo); }
.mi-wide { grid-column: 1 / -1; }
.mi-check { flex-direction: row; align-items: center; gap: 10px; }
.mi-check input { width: 18px; min-height: 18px; accent-color: var(--azul); }
.mi-list { border: 1px solid var(--papel-borda); border-radius: 6px; padding: 10px 12px; }
.mi-list table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.mi-list th { text-align: left; border-bottom: 1px solid var(--papel-borda); padding: 6px 4px; color: var(--texto-papel-2); }
.mi-list button, .mi-actions button {
  font: 700 0.95rem var(--fonte); border-radius: 999px; padding: 9px 16px; margin-top: 8px;
  border: 1px solid #b9bbc6; background: var(--papel); color: var(--texto-papel);
}
.mi-actions { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; }
.mi-actions button[type="submit"] { background: var(--azul-fundo); border-color: var(--azul-fundo); color: var(--branco); }

/* 9. o campinho no mapa */
/* 11. as regras do negócio no mapa */
.cena[data-nome="regras"] { display: flex; align-items: center; justify-content: center; }
.regras-figura { margin: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.regras-figura figcaption { font-size: 0.95rem; color: var(--texto-mesa); }
.regras-figura figcaption::before { content: "▸ "; color: var(--azul-na-mesa); }
.regras-figura .folha-mapa svg { max-height: 60vh; }
.logica .caixa-no { fill: #f3f5fa; stroke: #d6d9e3; }
.logica .rotulo-no { fill: var(--azul-fundo); }

/* 8. o gerador lendo o mapa */
.cena[data-nome="gerar"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; gap: 18px; }
.gerar-esq { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gerar-gerador pre { white-space: pre-wrap; word-break: break-word; height: 22em; overflow: hidden; font-size: 0.7rem; }
.gerar-codigo pre { white-space: pre; overflow: hidden; height: 13.5em; font-size: 0.7rem; }
.gerar-codigo .linha { padding: 0 6px; margin: 0 -6px; }
.ger-rotulo { display: table; margin: 0 0 4px; padding: 1px 8px; border-radius: 4px; background: rgba(54, 198, 255, 0.14); color: var(--ciano); font: 600 0.72rem var(--fonte); letter-spacing: 0.02em; }
.ger-rotulo.escrevo { background: rgba(0, 116, 251, 0.2); color: #8fc1ff; margin-top: 6px; }
.gerar-codigo .linha.agora { background: rgba(54, 198, 255, 0.16); color: var(--branco); box-shadow: inset 3px 0 0 var(--ciano); }
.cena[data-nome="gerar"] .folha-mapa { align-self: center; }
#mapa-gerar g .caixa-no { transition: fill 0.3s, stroke 0.3s; }
#mapa-gerar g.lido .caixa-no { stroke: var(--azul); stroke-width: 1.5; }
#mapa-gerar g.atual .caixa-no { fill: #c8eeff; stroke: var(--ciano); stroke-width: 2.5; }

.cena[data-nome="campinho2"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; gap: 20px; }
.cena[data-nome="campinho2"] .folha-mapa { grid-area: 1 / 1; align-self: center; }
.cena[data-nome="campinho2"] .refeitos, .cena[data-nome="campinho2"] .comparar, .cena[data-nome="campinho2"] .digitando { grid-area: 1 / 2; align-self: center; }
.digitando pre { max-height: 60vh; overflow: hidden; }
.digitando .linha.segunda { background: rgba(54, 198, 255, 0.16); color: var(--branco); box-shadow: inset 3px 0 0 var(--ciano); }
.refeitos { display: flex; flex-direction: column; gap: 12px; }
.lista-refeitos { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0; padding: 0; }
.lista-refeitos li {
  padding: 3px 9px; border-radius: 4px; background: var(--mesa-alta); border: 1px solid var(--mesa-borda);
  font: 500 0.68rem var(--mono); color: var(--texto-mesa-2); transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.lista-refeitos li.ok { border-color: var(--ciano); color: var(--branco); }
.lista-refeitos li.ok::before { content: "✓ "; color: var(--ciano); }
.refeitos .folha-codigo pre { max-height: 40vh; }
.nota-simulado { font-size: 0.82rem; color: var(--texto-mesa-2); }
.cena[data-nome="campinho2"] .refeitos, .cena[data-nome="campinho2"] .comparar, .cena[data-nome="campinho2"] .digitando { transition: opacity 0.45s, transform 0.5s var(--saida); }
.cena[data-nome="campinho2"]:not(.e1) .refeitos { opacity: 0; transform: translateY(14px); }
.cena[data-nome="campinho2"].e1 .digitando { opacity: 0; transform: translateY(-14px); }
.cena[data-nome="campinho2"].e2 .refeitos { opacity: 0; transform: translateY(-14px); }
.cena[data-nome="campinho2"]:not(.e2) .comparar { opacity: 0; transform: translateY(14px); }

.comparar { background: var(--papel); color: var(--texto-papel); border-radius: 8px; box-shadow: var(--sombra-folha); padding: 20px 22px; }
.comparar .medidor-nota { color: var(--texto-papel-2); }
.par + .par { margin-top: 18px; }
.par-titulo { font-weight: 800; font-size: 1.1rem; margin-bottom: 6px; }
.barra-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 8px 0; }
.barra-h span { flex-basis: 100%; font-size: 0.85rem; color: var(--texto-papel-2); }
.barra-h::before {
  content: ""; order: 1; height: 22px; min-width: 4px; width: calc(var(--v, 0) * (100% - 96px));
  border-radius: 0 4px 4px 0; background: var(--quase-preto); transition: width 0.8s var(--saida);
}
.barra-h.mapa::before { background: var(--azul); }
.barra-h b { order: 2; font: 800 0.95rem var(--mono); }
.cena:not(.ativa) .barra-h::before { width: 4px; }

/* 10. à mão ou com IA */
.cena[data-nome="escolha"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; gap: 16px 18px; }
.lado { display: flex; flex-direction: column; gap: 8px; transition: opacity 0.4s; }
.lado-titulo { font-weight: 800; color: var(--branco); }
.cena[data-nome="escolha"]:not(.e1) .lado[data-l="ia"] { opacity: 0.25; }
.cena[data-nome="escolha"].e1:not(.e2) .lado[data-l="mao"] { opacity: 0.45; }
.freemapper { background: #f4f5f8; border-color: var(--cinza-claro); }
.freemapper .janela-barra { background: var(--cinza-claro); border-color: #d0d1d8; }
.freemapper .janela-barra b { color: var(--texto-papel-2); }
.fm-corpo { padding: 10px; }
.fm-corpo svg { display: block; width: 100%; height: auto; max-height: 34vh; }
.terminal-corpo { padding: 12px 14px; font-size: 0.74rem; line-height: 1.7; color: var(--texto-mesa); white-space: pre; overflow: hidden; }
.terminal-corpo b { color: var(--azul-na-mesa); }
.terminal-corpo .eu { color: var(--branco); font-weight: 700; }
.terminal-corpo .fraco { color: #8b8d9a; }
.codigo-comum { grid-column: 1 / -1; background: var(--papel); color: var(--texto-papel); border-radius: 8px; box-shadow: var(--sombra-folha); overflow: hidden; transition: opacity 0.45s, transform 0.5s var(--saida); }
.codigo-comum header { border-bottom-color: var(--papel-borda); }
.codigo-comum header b { color: var(--texto-papel); }
.codigo-comum header span { color: var(--texto-papel-2); }
.codigo-comum pre { padding: 8px 0; font-size: 0.72rem; line-height: 1.6; color: var(--tinta); white-space: pre; overflow: hidden; max-height: 24vh; }
.cena[data-nome="escolha"]:not(.e2) .codigo-comum { opacity: 0; transform: translateY(14px); }

/* 11. outra tecnologia */
.raiz-tec { align-self: flex-start; display: flex; flex-direction: column; padding: 10px 16px; border-radius: 8px; background: var(--papel); color: var(--texto-papel); box-shadow: var(--sombra-folha); }
.raiz-tec b { font: 700 0.9rem var(--mono); }
.raiz-tec span { font-size: 0.85rem; color: var(--texto-papel-2); }
.saidas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; position: relative; }
.saidas li {
  padding: 10px 12px; border-radius: 6px; background: var(--mesa-alta); border: 1px solid var(--mesa-borda);
  font-weight: 800; color: var(--texto-mesa-2); transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.saidas li small { display: block; font: 500 0.68rem var(--mono); color: inherit; opacity: 0.85; }
.saidas li.ativo { background: var(--azul-fundo); border-color: var(--azul-fundo); color: var(--branco); }
.saidas li.feito { color: var(--texto-mesa); border-color: var(--azul-fundo); }
.saida-painel { background: var(--mesa-funda); border: 1px solid var(--mesa-borda); border-radius: 8px; overflow: hidden; }
.saida-painel pre { height: clamp(200px, 40vh, 380px); }

/* 12. a conta */
.folha-conta { background: var(--papel); color: var(--texto-papel); border-radius: 8px; box-shadow: var(--sombra-folha); padding: clamp(20px, 3vw, 34px); }
.conta-titulo { font-weight: 800; font-size: 1.15rem; margin-bottom: 8px; }
.conta-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--papel-borda); }
.conta-numeros dt { font-size: 0.9rem; color: var(--texto-papel-2); }
.conta-numeros dd { margin: 0; font: 800 clamp(1.6rem, 2.8vw, 2.4rem) var(--mono); color: var(--texto-papel); }
.conta-numeros dd small { font: 600 0.9rem var(--fonte); color: var(--texto-papel-2); }
.cena[data-nome="conta"]:not(.e1) .conta-numeros div:nth-child(n+2) { opacity: 0.3; }
.conta-numeros div { transition: opacity 0.4s; }

/* ---------- fecho e rodapé ---------- */
.fecho {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center;
  padding: clamp(80px, 14vh, 160px) var(--gutter); border-top: 1px solid var(--mesa-borda);
}
.fecho-simbolo { width: clamp(110px, 15vw, 220px); height: auto; }
.fecho h2 { font-size: clamp(2.8rem, 6vw, 5.8rem); font-weight: 800; letter-spacing: -0.04em; color: var(--branco); }
.fecho p { margin-top: 14px; color: var(--texto-mesa-2); font-size: 1.2rem; max-width: 52ch; }
.fecho-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fecho-email { font: 600 1.15rem var(--mono) !important; }
.fecho-email a { color: var(--azul-na-mesa); }
.botao {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--azul); background: var(--azul); color: var(--branco); text-decoration: none; font-weight: 800; font-size: 1.1875rem;
}
.botao:hover { background: var(--azul-escuro); }
.botao.secundario { font-weight: 700; font-size: 1.0625rem; background: transparent; color: var(--texto-mesa); border-color: var(--mesa-borda); }
.botao.secundario:hover { border-color: var(--texto-mesa-2); }
.rodape { display: flex; gap: 28px; align-items: center; padding: 28px var(--gutter) 40px; border-top: 1px solid var(--mesa-borda); color: var(--texto-mesa-2); font-size: 0.92rem; }
.rodape img { height: 28px; width: auto; flex: none; }

/* ---------- celular e tablet: o palco ocupa a parte de cima, os passos passam por baixo dele ---------- */
@media (max-width: 960px) {
  :root { --topo: 56px; }
  .logo img { height: 30px; }
  .topo { gap: 14px; }
  .topo-capitulo { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topo-acao { font-size: 1rem; padding: 5px 14px; }
  .historia { display: block; }
  .palco { height: 100svh; z-index: 1; }
  .cena { inset: calc(var(--topo) + 12px) 16px 41svh; gap: 10px; }
  .passos { position: relative; z-index: 2; margin-top: -100svh; padding: 0 16px; pointer-events: none; }
  .passo { min-height: 100svh; padding: 61svh 0 6svh; max-width: none; opacity: 1; }
  .passo.longo { min-height: 150svh; }
  .passo.longo .texto { top: 61svh; }
  .passo.curto { min-height: 70svh; padding-top: 61svh; }
  .passo .texto { pointer-events: auto; background: rgba(28, 28, 39, 0.97); border: 1px solid var(--mesa-borda); border-radius: 10px; padding: 16px 18px 18px; }
  .passo h2 { font-size: 1.75rem; margin-bottom: 10px; }
  .passo .num { margin-bottom: 4px; }
  .passo p:not(.num):not(.entrega) { font-size: 1.12rem; }
  .entrega { margin-top: 14px; }

  .gaveteiro { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
  .gaveta { height: 18px; font-size: 0; padding: 0; }
  .placar dd { font-size: 1.5rem; }
  .placar dt { font-size: 0.8rem; }
  .cena[data-nome="mao"] .editor { height: 16svh; }
  .editor-corpo { font-size: 0.66rem; }
  .livro { width: 100%; }
  .pagina { min-height: 0; padding: 14px; }
  .livro-texto, .barra:nth-of-type(n+3) { display: none; }
  .cartao-historia p { font-size: 1.1rem; }
  .cartao-historia footer { display: none; }
  .balao { font-size: 0.98rem; }
  .medidor-trilho { height: 48px; }
  .bloco { font-size: 0; }
  .medidor-nota { display: none; }
  .medidor-titulo { font-size: 0.95rem; margin-bottom: 0; }
  .medidor-limite b { left: auto; right: 8px; font-size: 0.72rem; }
  .medidor-legenda { font-size: 0.9rem; }
  .carimbo.forte { font-size: 1rem; }
  .apagado .editor-corpo { height: 9svh; }

  .cena[data-nome="mapa"], .cena[data-nome="campinho2"], .cena[data-nome="escolha"] { grid-template-columns: minmax(0, 1fr); }
  .cena[data-nome="gerar"] { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; }
  .cena[data-nome="gerar"] .folha-mapa { order: -1; padding: 6px; }
  .cena[data-nome="gerar"] .folha-mapa svg { max-height: 13svh; }
  .gerar-esq { gap: 6px; }
  .gerar-esq header { padding: 5px 10px; }
  .gerar-esq header span { display: none; }
  .gerar-gerador pre { height: 8.6em; font-size: 0.56rem; padding: 6px 10px; }
  .gerar-codigo pre { height: 5.4em; font-size: 0.56rem; padding: 6px 10px; }
  .cena[data-nome="mapa"] .cartao-historia.mini { display: none; }
  .cena[data-nome="mapa"] .folha-mapa, .cena[data-nome="mapa"] .arquivo-mi { grid-area: 1 / 1; max-height: 48svh; }
  .cena[data-nome="mapa"] .folha-mapa svg { max-height: 44svh; }
  .cena[data-nome="mapa"].e1 .folha-mapa { opacity: 0; }
  .cena[data-nome="mapa"] .folha-mapa { transition: opacity 0.45s; }

  .cena[data-nome="campinho2"] { grid-template-rows: auto auto; }
  .cena[data-nome="campinho2"] .folha-mapa { grid-area: 1 / 1; padding: 8px; }
  .cena[data-nome="campinho2"] .digitando { grid-area: 2 / 1; }
  .cena[data-nome="campinho2"] .refeitos, .cena[data-nome="campinho2"] .comparar { grid-area: 1 / 1 / 3 / 2; }
  .cena[data-nome="campinho2"] .folha-mapa svg { max-height: 19svh; }
  .digitando pre { max-height: 19svh; font-size: 0.62rem; line-height: 1.45; }
  .cena[data-nome="campinho2"].e1 .folha-mapa { opacity: 0; }
  .cena[data-nome="campinho2"] .folha-mapa { transition: opacity 0.45s; }
  .refeitos .folha-codigo pre { max-height: 24svh; font-size: 0.64rem; }
  .comparar { padding: 14px 16px; }
  .par-titulo { font-size: 1rem; }
  .barra-h { margin: 4px 0; }

  .cena[data-nome="escolha"] .lado, .cena[data-nome="escolha"] .codigo-comum { grid-area: 1 / 1; }
  .cena[data-nome="escolha"] .lado { transition: opacity 0.45s; }
  .cena[data-nome="escolha"]:not(.e1) .lado[data-l="ia"], .cena[data-nome="escolha"].e1 .lado[data-l="mao"], .cena[data-nome="escolha"].e2 .lado[data-l="ia"] { opacity: 0 !important; }
  .cena[data-nome="escolha"].e1:not(.e2) .lado[data-l="ia"] { opacity: 1; }
  .codigo-comum pre { max-height: 34svh; }
  .terminal-corpo { font-size: 0.6rem; }

  .trilho li { font-size: 0.8rem; padding: 4px 10px 4px 6px; }
  .pilha { height: 34svh; }
  .pilha .folha-codigo { width: 82%; top: calc(var(--j) * 22px); }
  .navegador-tela { height: 30svh; }
  .gerador { max-height: 40svh; }
  .estacao-conta b { font-size: 1.5rem; }

  .saidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saidas li { padding: 6px 10px; font-size: 0.9rem; }
  .saida-painel pre { height: 17svh; font-size: 0.64rem; }
  .saidas li small, .raiz-tec span { display: none; }
  .pilha .folha-codigo pre { max-height: 17svh; }
  .pilha { height: 30svh; }
  .raiz-tec { padding: 6px 12px; }

  .folha-conta { padding: 16px; }
  .conta-numeros { gap: 10px 16px; margin-top: 12px; padding-top: 12px; }
  .conta-numeros dd { font-size: 1.35rem; }
  .conta-titulo { font-size: 1rem; }

  .fecho { grid-template-columns: 1fr; }
  .rodape { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}