/* sistema.css — o terreno, o traço, o arranjo, as vozes e o movimento.
   Não declara valor: só usa. Porte fiel de design-system/sistema.css. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}

/* o terreno: a mesa não termina — a grade segue para fora nos quatro lados */
.mesa{background-color:var(--mesa);background-image:linear-gradient(var(--grade) 1px,transparent 1px),linear-gradient(90deg,var(--grade) 1px,transparent 1px);background-size:var(--quadro) var(--quadro);color:var(--tinta-cheia);font-family:var(--voz-funcional);font-size:var(--corpo-corpo);line-height:var(--corpo-entrelinha)}

/* o traço: fio de 1px, aresta e não área */
.separador{height:0;margin:0;border:0;border-top:1px solid var(--tinta-traco)}
.guia{height:0;border-top:1px solid var(--tinta-traco)}

/* o arranjo: empilhar e pôr lado a lado, e só */
:root{--colunas:2 /* @kind other */}
.pilha{display:grid;--vao:16px;gap:var(--vao);align-content:start}
.colunas{display:grid;--vao:16px;gap:var(--vao);grid-template-columns:repeat(var(--colunas),1fr);align-items:start}

/* as vozes: cada papel fixa voz, corpo, entrelinha e peso de uma vez */
.rotulo{font-family:var(--voz-sistema);font-size:var(--rotulo-corpo);line-height:var(--rotulo-entrelinha);font-weight:var(--rotulo-peso);letter-spacing:var(--rotulo-espacamento);text-transform:var(--rotulo-caixa);color:var(--tinta-secundaria)}
.metadado{font-family:var(--voz-sistema);font-size:var(--metadado-corpo);line-height:var(--metadado-entrelinha);font-weight:var(--metadado-peso)}
.corpo{font-family:var(--voz-funcional);font-size:var(--corpo-corpo);line-height:var(--corpo-entrelinha);font-weight:var(--corpo-peso)}
.deck{font-family:var(--voz-funcional);font-size:var(--deck-corpo);line-height:var(--deck-entrelinha);font-weight:var(--deck-peso)}
.terminal{font-family:var(--voz-sistema);font-size:var(--terminal-corpo);line-height:var(--terminal-entrelinha);font-weight:var(--terminal-peso)}
.terminal-eco{font-family:var(--voz-sistema);font-size:var(--terminal-eco-corpo);line-height:var(--terminal-eco-entrelinha);font-weight:var(--terminal-eco-peso)}
.titulo{font-family:var(--voz-editorial);font-size:var(--titulo-corpo);line-height:var(--titulo-entrelinha);font-weight:var(--titulo-peso);font-optical-sizing:auto;margin:0}
.manchete{font-family:var(--voz-editorial);font-size:var(--manchete-1280-corpo);line-height:var(--manchete-1280-entrelinha);font-weight:var(--manchete-1280-peso);font-optical-sizing:auto;margin:0}
.corpo,.deck,.titulo,.manchete{font-variant-numeric:tabular-nums}
.secundaria{color:var(--tinta-secundaria)}

/* ─────────────────────────────────────────────── o cursor pisca

   REVISÃO DE 13/08/2026, decisão do ViktorKav. A regra anterior era "o cursor
   é bloco firme: piscar é pulso, e nada oscila". Ela cai para os DOIS cursores
   do sistema — o bloco da janela e o sublinhado do prompt >_ — porque um cursor
   que não pisca não é um cursor: é um retângulo. O piscar aqui não é decoração
   nem chamada de atenção; é a coisa que ele representa.

   O passo é steps(1): liga e desliga, sem transição. Cursor com fade é luz
   pulsando, que continua proibido. O resto do sistema segue sem oscilar. */
@keyframes pisca{0%,49%{opacity:1}50%,100%{opacity:0}}
.pisca{animation:pisca 1060ms steps(1) infinite}
.janela__cursor{animation:pisca 1060ms steps(1) infinite}
@media (prefers-reduced-motion:reduce){.pisca,.janela__cursor{animation:none !important}}

/* o movimento: só geometria e opacidade — traça, pinta, imprime */
@keyframes traca{from{width:0}to{width:100%}}
@keyframes traca-v{from{height:0}to{height:100%}}
@keyframes pinta{from{opacity:0}to{opacity:1}}
@keyframes imprime{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes sai{from{opacity:1}to{opacity:0}}
.traca{transform-origin:left;animation:traca var(--t-pintura) var(--e-tracado) both}
.pinta{animation:pinta var(--t-entrada) var(--e-entrada) both}
.imprime{animation:imprime var(--t-entrada) var(--e-entrada) both}
.traca,.pinta,.imprime{animation-delay:calc(var(--atraso,0) * 1000ms / var(--fps))}

/* a entrada por planta: 24 traça, 12 pinta, 24 imprime — 60 quadros */
:root{--planta-assentada:color-mix(in srgb,var(--planta-tinta,var(--tinta-traco)) 42%,transparent) /* @kind color */}
.planta{position:absolute;inset:0;pointer-events:none;animation:sai calc(var(--entrada-superficie) - var(--entrada-apagamento)) var(--e-entrada) calc(var(--entrada-planta) + var(--entrada-apagamento)) both}
.planta__linha{position:absolute;animation-timing-function:var(--e-tracado);animation-fill-mode:both;animation-delay:calc(var(--inicio) * 1000ms / var(--fps));animation-duration:calc(var(--duracao) * 1000ms / var(--fps))}
.planta__linha--h{left:0;width:0;height:1px;animation-name:traca;background-image:linear-gradient(90deg,var(--planta-assentada) 0,var(--planta-assentada) calc(100% - var(--planta-cabeca)),var(--planta-tinta,var(--tinta-traco)) 100%)}
.planta__linha--v{top:0;width:1px;height:0;animation-name:traca-v;background-image:linear-gradient(180deg,var(--planta-assentada) 0,var(--planta-assentada) calc(100% - var(--planta-cabeca)),var(--planta-tinta,var(--tinta-traco)) 100%)}
.assenta{animation:pinta var(--entrada-sombra) var(--e-entrada) calc(var(--entrada-planta) + var(--entrada-superficie)) both}
.pinta-superficie{animation:pinta var(--entrada-superficie) var(--e-entrada) var(--entrada-planta) both}
.imprime-conteudo{animation:imprime var(--entrada-conteudo) var(--e-entrada) calc(var(--entrada-planta) + var(--entrada-superficie)) both}
.sai{animation:sai var(--t-saida) var(--e-saida) both}

/* a saída de assinatura: o arco fecha ao contrário, em 30 quadros */
@keyframes apaga{from{opacity:1;transform:none}to{opacity:0;transform:translateY(4px)}}
@keyframes recolhe{from{width:100%}to{width:0}}
@keyframes recolhe-v{from{height:100%}to{height:0}}
.desassenta{animation:sai calc(var(--entrada-sombra) / 2) var(--e-saida) both}
.apaga-conteudo{animation:apaga calc(var(--entrada-conteudo) / 2) var(--e-saida) both}
.despinta-superficie{animation:sai calc(var(--entrada-superficie) / 2) var(--e-saida) calc(var(--entrada-conteudo) / 2) both}
.planta--recolhe{animation:pinta calc((var(--entrada-superficie) - var(--entrada-apagamento)) / 2) var(--e-entrada) calc(var(--entrada-conteudo) / 2) both}
.planta--recolhe .planta__linha--h{animation-name:recolhe}
.planta--recolhe .planta__linha--v{animation-name:recolhe-v}

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