/* NoFluff, site público.
   Direção: editorial sobre preto suave. A identidade de terminal está nos detalhes: prompts em Mono,
   blocos de código, o campo de caracteres atrás da abertura. O limão só onde há ação ou marca.
   Sem dependências externas (CSP estrita). */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("/fonts/jetbrains-mono-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 800; font-display: swap; src: url("/fonts/jetbrains-mono-800.woff2") format("woff2"); }

:root {
	--preto: #121212;
	--grafite: #1a1a1a;
	--fio: #2a2a28;
	--tinta: #ececec;
	--apagado: #9c9c95;
	--limao: #c6ff00;
	--limao-cl: #d9ff5c;
	--risco: #ff6a5e;
	--mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
	--sans: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
	--margem: clamp(20px, 5vw, 72px);
	--largura: 1240px;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--preto); color: var(--tinta); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
h1, h2 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--limao); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color 150ms; }
a:hover { color: var(--limao); }
::selection { background: var(--limao); color: var(--preto); }
:focus-visible { outline: 2px solid var(--limao); outline-offset: 3px; }
code, pre, kbd { font-family: var(--mono); }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 12px; top: 12px; z-index: 10; padding: 8px 12px; background: var(--limao); color: var(--preto); }

/* Logotipo: limão sobre preto; o cursor em bloco é a marca (parado). */
.logo { font: 800 1.3rem/1 var(--mono); letter-spacing: -0.04em; color: var(--limao); text-decoration: none; }
.logo:hover { color: var(--limao); }
.cursor.bloco { display: inline-block; width: 0.717ch; height: 0.73em; margin-left: 0.083ch; background: var(--limao); vertical-align: baseline; }

/* Botão: uma ação por tela, sempre limão, com um brilho contido. */
.botao {
	display: inline-block; padding: 16px 22px; border: 0; border-radius: 6px;
	background: var(--limao); color: var(--preto); font: 700 0.95rem/1 var(--mono); letter-spacing: -0.01em;
	text-decoration: none; cursor: pointer; transition: background 150ms, box-shadow 150ms;
	box-shadow: 0 0 20px rgba(198, 255, 0, 0.14);
}
.botao:hover { background: var(--limao-cl); color: var(--preto); text-decoration: none; box-shadow: 0 0 34px rgba(198, 255, 0, 0.3); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: 0.6; cursor: wait; box-shadow: none; }

/* Topo e rodapé */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 16px;
	max-width: var(--largura); margin: 0 auto; padding: 22px var(--margem); position: relative; }
.topo::before { content: ""; position: absolute; top: 0; left: var(--margem); right: var(--margem); border-top: 1px solid var(--fio); }
.topo-acao, .topo nav a { font: 700 0.85rem var(--mono); color: var(--tinta); }
.topo nav { display: flex; gap: 22px; align-items: center; }
.topo nav a { color: var(--apagado); text-decoration: none; }
.topo nav a:hover { color: var(--tinta); }
.topo-acao { text-decoration: none; }
.topo-acao:hover { color: var(--limao); }
.rodape { position: relative; max-width: var(--largura); margin: 0 auto; padding: 48px var(--margem) 56px;
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px 40px; color: var(--apagado); font-size: 0.9rem; }
.rodape::before { content: ""; position: absolute; top: 0; left: var(--margem); right: var(--margem); border-top: 1px solid var(--fio); }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rodape nav a { color: var(--apagado); text-decoration: none; }
.rodape nav a:hover { color: var(--tinta); }
.rodape p { margin: 0 0 0 auto; }
@media (max-width: 700px) { .rodape p { margin-left: 0; } }

/* Abertura: a proposta em texto; atrás, o campo de caracteres (canvas, ver site.js). */
.abertura { position: relative; overflow: hidden; max-width: var(--largura); margin: 0 auto;
	padding: clamp(56px, 10vh, 120px) var(--margem) 72px; }
#campo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.abertura::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
	background: linear-gradient(transparent, var(--preto)); pointer-events: none; }
.abertura > *:not(#campo) { position: relative; z-index: 1; }
.selo { font: 700 0.78rem var(--mono); color: var(--limao); letter-spacing: 0.02em; margin: 0 0 24px; }
.abertura h1 { margin: 0 0 20px; font: 600 clamp(2.2rem, 5vw, 3.6rem)/1.15 var(--sans); letter-spacing: -0.03em; max-width: 24ch; }
.resumo { margin: 0 0 32px; color: var(--apagado); max-width: 38rem; font-size: 1.15rem; }
.abertura-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 0; }
.nota { font: 400 0.8rem var(--mono); color: var(--apagado); }

/* Amostra: um pedido, a recusa dos outros, a resposta daqui. */
.amostra { max-width: 46rem; margin: 48px 0 0; padding: 24px 26px; background: var(--grafite);
	border: 1px solid var(--fio); border-radius: 10px; }
.amostra-pergunta { font: 400 0.9rem/1.5 var(--mono); color: var(--apagado); margin: 0 0 14px; }
.amostra-pergunta::before { content: "> "; color: var(--limao); }
.amostra-outros { margin: 0 0 10px; font-size: 0.95rem; color: var(--apagado); }
.amostra-outros s { text-decoration-color: var(--risco); text-decoration-thickness: 1.5px; }
.amostra-resposta { margin: 0; font: 500 1.1rem/1.45 var(--sans); color: var(--tinta); }

/* Cena do chat: demonstração estática do produto, sem revelar modelos. */
.cena-chat { margin: 32px 0 0; max-width: 46rem; border: 1px solid var(--fio); border-radius: 10px;
	background: var(--grafite); overflow: hidden; }
.cena-barra { display: flex; align-items: center; justify-content: space-between;
	padding: 12px 18px; border-bottom: 1px solid var(--fio); }
.cena-barra .logo { font-size: 1.05rem; }
.cena-status { font: 400 0.72rem var(--mono); color: var(--apagado); }
.cena-corpo { padding: 20px 18px; display: grid; gap: 16px; }
.cena-usuario { margin: 0; font: 400 0.92rem/1.6 var(--mono); color: var(--apagado); }
.cena-usuario::before { content: "> "; color: var(--limao); font-weight: 700; }
.cena-resposta p { margin: 0 0 10px; color: var(--tinta); }
.cena-resposta code { background: rgba(236, 236, 236, 0.08); border-radius: 4px; padding: 1px 5px; font-size: 0.9em; }
.cena-modelo { display: block; margin-bottom: 6px; font: 400 0.72rem var(--mono); color: var(--apagado); }
.cena-codigo { margin: 0; padding: 12px 14px; overflow-x: auto; background: var(--preto);
	border-radius: 8px; font-size: 0.86rem; line-height: 1.7; color: var(--tinta); }
.cena-codigo code { background: none; padding: 0; font-size: 1em; }
.cena-entrada { margin: 0; padding: 12px 14px; border: 1px solid var(--fio); border-radius: 10px;
	font: 400 0.9rem var(--mono); color: #6a6a64; }
.cena-entrada .cursor.bloco { margin-left: 0.4ch; }

/* Turnos da conversa: pergunta na margem, resposta ao lado. */
.turno { max-width: var(--largura); margin: 0 auto; padding: clamp(56px, 9vw, 104px) var(--margem);
	display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 16px clamp(28px, 5vw, 80px);
	position: relative; }
.turno::before { content: ""; position: absolute; top: 0; left: var(--margem); right: var(--margem); border-top: 1px solid var(--fio); }
.pergunta, .rotulo { font: 700 0.85rem/1.5 var(--mono); color: var(--apagado); margin: 0 0 22px; }
.pergunta::before { content: "> "; color: var(--limao); }
.turno .pergunta { position: sticky; top: 28px; align-self: start; }
.resposta-turno { max-width: 46rem; }
.resposta-turno > p { color: var(--apagado); }
.resposta-turno > p.fala { color: var(--tinta); font: 500 clamp(1.25rem, 2.2vw, 1.6rem)/1.4 var(--sans); letter-spacing: -0.018em; margin-bottom: 1.1em; }
@media (max-width: 820px) { .turno { grid-template-columns: minmax(0, 1fr); } .turno .pergunta { position: static; margin-bottom: 4px; } }

/* Modelos: listagem simples */
.modelos { margin: 8px 0 0; }
.modelos > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 6px 28px; padding: 22px 0; border-top: 1px solid var(--fio); }
.modelos dt { font: 800 1.3rem/1.2 var(--mono); letter-spacing: -0.03em; color: var(--tinta); }
.modelos dt span { display: block; margin-top: 8px; font: 700 0.75rem var(--mono); letter-spacing: 0; color: var(--limao); }
.modelos dd { margin: 0; color: var(--apagado); }
@media (max-width: 600px) { .modelos > div { grid-template-columns: 1fr; } }

/* Registro: pedido, o que os outros respondem (riscado) e o que o NoFluff responde.
   A resposta do NoFluff leva um filete de limão (eco do cursor); a linha acende no hover. */
.registro { list-style: none; margin: 8px 0 0; padding: 0; }
.registro li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px 32px; padding: 24px 0; border-top: 1px solid var(--fio); position: relative; }
.registro li::after { content: ""; position: absolute; top: 0; bottom: 0; left: -18px; right: -18px; background: transparent; transition: background 150ms; z-index: -1; }
.registro li:hover::after { background: #171715; }
.registro p { margin: 0; font-size: 0.97rem; }
.registro-pedido { font: 400 0.85rem/1.55 var(--mono) !important; color: var(--tinta); }
.registro-outros { color: var(--apagado); }
.registro-outros s { text-decoration-color: var(--risco); text-decoration-thickness: 1.5px; }
.registro-nofluff { color: var(--tinta); border-left: 2px solid var(--limao); padding-left: 16px; }
.registro li:first-child p::before, .registro p::before { display: block; margin-bottom: 8px; font: 400 0.72rem var(--mono); color: var(--apagado); }
.registro li:first-child .registro-pedido::before { content: "pedido"; }
.registro li:first-child .registro-outros::before { content: "outros assistentes"; }
.registro li:first-child .registro-nofluff::before { content: "nofluff"; color: var(--limao); }
@media (max-width: 860px) {
	.registro li { grid-template-columns: 1fr; }
	.registro .registro-outros::before { content: "outros assistentes"; }
	.registro .registro-nofluff::before { content: "nofluff"; color: var(--limao); }
}

/* Diff: as duas linhas que mudam */
.diff { margin: 4px 0 1.4em; padding: 18px 0; overflow-x: auto; background: var(--grafite); border-radius: 8px; font-size: 0.88rem; line-height: 1.75; color: var(--tinta); }
.diff code { display: block; min-width: max-content; }
.diff span { display: block; padding: 0 20px; white-space: pre; }
.diff .ctx { color: var(--apagado); }
.diff .sai { color: #ff9a90; background: rgba(255, 90, 78, 0.09); }
.diff .entra { color: #d9ff5c; background: rgba(198, 255, 0, 0.07); }

/* Regras */
.regras { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; margin: 6px 0 1.4em; }
.regras h3 { margin: 0 0 8px; font: 700 0.8rem var(--mono); color: var(--limao); letter-spacing: 0; }
.regras .proibido h3 { color: var(--risco); }
.regras p { margin: 0; color: var(--tinta); }
@media (max-width: 600px) { .regras { grid-template-columns: 1fr; } }

/* Formulário da lista */
.formulario { display: grid; gap: 30px; margin-top: 10px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.campo > label, .campo > legend { display: block; margin: 0 0 10px; padding: 0; font: 700 0.82rem var(--mono); color: var(--tinta); }
.opcional { font-weight: 400; color: var(--apagado); margin-left: 6px; }
input[type="email"], textarea {
	width: 100%; padding: 14px 16px; border: 1px solid var(--fio); border-radius: 6px;
	background: var(--grafite); color: var(--tinta); font: 400 1rem var(--sans); caret-color: var(--limao);
	transition: border-color 150ms, box-shadow 150ms;
}
textarea { resize: vertical; min-height: 92px; }
input[type="email"]:focus, textarea:focus { outline: none; border-color: var(--limao); box-shadow: 0 0 0 3px rgba(198, 255, 0, 0.18); }
input::placeholder, textarea::placeholder { color: #6a6a64; }
.opcoes { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--fio); border-radius: 6px; overflow: hidden; background: var(--grafite); }
.opcoes label { margin: 0; }
.opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes span { display: block; padding: 12px 18px; border-right: 1px solid var(--fio); font: 400 0.9rem var(--mono); color: var(--apagado); cursor: pointer; transition: background 150ms, color 150ms; }
.opcoes label:last-child span { border-right: 0; }
.opcoes label:hover span { color: var(--tinta); background: #222220; }
.opcoes input:checked + span { background: var(--limao); color: var(--preto); font-weight: 700; }
.opcoes input:focus-visible + span { outline: 2px solid var(--limao); outline-offset: -4px; }
@media (max-width: 560px) { .opcoes { display: grid; grid-template-columns: 1fr 1fr; } .opcoes span { border-bottom: 1px solid var(--fio); } }
.consentimento { display: flex; gap: 12px; align-items: flex-start; font: 400 0.9rem/1.55 var(--sans) !important; color: var(--apagado) !important; }
.consentimento input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--limao); }
.erro-campo { display: block; margin-top: 8px; color: var(--risco); font-size: 0.85rem; }
.erro-campo:empty { display: none; }
.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enviar { margin: 0; }
.aviso { margin: 0; font: 400 0.95rem var(--mono); }
.aviso:empty { display: none; }
.aviso.ok { color: var(--limao); }
.aviso.ok::before { content: "> "; }
.aviso.falha { color: var(--risco); }

/* Índice das perguntas da home. */
.indice { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 48px 0 0; padding-top: 20px;
	border-top: 1px solid var(--fio); max-width: 46rem; }
.indice a { font: 700 0.78rem var(--mono); color: var(--apagado); text-decoration: none; }
.indice a:hover { color: var(--limao); }

/* Copiar código: o bloco ganha uma caixa para o botão ficar fixo no canto. */
.bloco-codigo { position: relative; }
.copiar { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border: 1px solid transparent;
	border-radius: 6px; background: var(--grafite); color: var(--apagado); font: 700 0.72rem var(--mono);
	cursor: pointer; transition: color 150ms, border-color 150ms; }
.copiar:hover { color: var(--limao); border-color: var(--fio); }
.copiar.ok { color: var(--limao); }

/* Páginas de texto (regras, api, termos, privacidade) */
.pagina { max-width: var(--largura); margin: 0 auto; padding: clamp(40px, 8vw, 96px) var(--margem) 96px; }
.estreito { max-width: 46rem; }
.pagina-doc { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 46rem);
	gap: 16px clamp(28px, 5vw, 72px); }
.sumario { position: sticky; top: 28px; align-self: start; display: grid; gap: 12px; }
.sumario a { font: 400 0.8rem var(--mono); color: var(--apagado); text-decoration: none; }
.sumario a:hover { color: var(--limao); }
@media (max-width: 900px) {
	.pagina-doc { grid-template-columns: minmax(0, 1fr); }
	.sumario { position: static; display: flex; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 16px;
		border-bottom: 1px solid var(--fio); margin-bottom: 24px; }
}
.rotulo { color: var(--limao); font-size: 0.78rem; display: block; }
.pagina h1 { margin: 0 0 24px; font: 600 clamp(2rem, 4.5vw, 3.2rem)/1.1 var(--sans); letter-spacing: -0.03em; }
.pagina h2 { margin: 2.2em 0 0.6em; font: 700 1.05rem var(--mono); letter-spacing: -0.01em; color: var(--tinta); }
.pagina p, .pagina li { color: var(--apagado); }
.pagina p:first-of-type { color: var(--tinta); font-size: 1.15rem; }
.pagina ul { padding-left: 1.1em; }
.pagina li { margin-bottom: 6px; }
.pagina strong { color: var(--tinta); font-weight: 600; }
.pagina pre { margin: 0 0 1.2em; padding: 18px 20px; overflow-x: auto; background: var(--grafite); color: var(--tinta); border-radius: 8px; font-size: 0.86rem; line-height: 1.7; }
.pagina code { font-size: 0.9em; color: var(--tinta); background: rgba(236, 236, 236, 0.08); border-radius: 4px; padding: 1px 5px; }
.pagina pre code { background: none; padding: 0; }
.pagina table { width: 100%; margin: 1em 0 1.4em; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.pagina th, .pagina td { padding: 11px 12px 11px 0; border-top: 1px solid var(--fio); text-align: left; vertical-align: top; }
.pagina th { font: 700 0.85rem var(--mono); color: var(--tinta); }
.pagina td { color: var(--apagado); }
.miudo { font: 400 0.8rem var(--mono) !important; color: var(--apagado) !important; }

/* Página de status: um quadrado (eco do cursor) indica o estado. */
.estados { margin: 24px 0 8px; }
.estados > div { display: flex; justify-content: space-between; align-items: center; gap: 24px;
	padding: 18px 0; border-top: 1px solid var(--fio); }
.estados dt { margin: 0; font: 700 0.85rem var(--mono); color: var(--tinta); }
.estado { margin: 0; font: 400 0.85rem var(--mono); color: var(--apagado);
	display: flex; align-items: center; gap: 10px; }
.estado::before { content: ""; width: 0.62em; height: 0.62em; background: currentColor; flex: none; }
.estado.operacional { color: var(--limao); }
.estado.degradado { color: var(--tinta); }
.estado.fora { color: var(--risco); }

/* Fatura da recarga: o botão do pagamento e o estado, abaixo do formulário. */
.fatura { margin: 8px 0 0; }
.fatura p { margin: 0 0 10px; }

/* Página simples (resultado do formulário sem JavaScript, gerada pelo site-api) */
.pagina-simples { min-height: 100vh; display: grid; place-items: center; padding: 40px var(--margem); }
.pagina-simples .logo { display: inline-block; margin-bottom: 40px; }
.pagina-simples h1 { margin: 0 0 18px; font: 600 clamp(1.8rem, 5vw, 2.8rem)/1.1 var(--sans); letter-spacing: -0.03em; }
.pagina-simples ul { color: var(--risco); padding-left: 1.1em; }
.pagina-simples p { color: var(--apagado); }

/* Alto contraste pedido pelo sistema. */
@media (prefers-contrast: more) {
	:root { --apagado: #cfcfc7; --fio: #4a4a44; --risco: #ff8579; }
}

/* Alto contraste do Windows (forced colors): o sistema pinta; só garantimos contornos. */
@media (forced-colors: active) {
	.botao, .copiar, .opcoes span, input[type="email"], textarea { border: 1px solid ButtonText; }
	:focus-visible { outline: 2px solid Highlight; }
}

/* Impressão: termos, privacidade e páginas de apoio saem limpos, em preto no branco. */
@media print {
	body { background: #ffffff; color: #000000; }
	.topo, .rodape, .pular, #campo, .copiar, .cena-chat, .indice { display: none !important; }
	.abertura, .turno, .pagina { max-width: none; margin: 0; padding: 0 0 28px; }
	.abertura::after, .turno::before, .topo::before, .rodape::before { display: none !important; }
	.turno { display: block; }
	.turno .pergunta { position: static; margin: 0 0 10px; }
	h1, h2, p, li, dd, dt, .fala, .resumo, .selo, .amostra-resposta, .registro-nofluff,
	.registro-pedido, .pagina strong, .modelos dd { color: #000 !important; }
	.logo { color: #000 !important; }
	.cursor.bloco { background: #000; }
	.amostra, .regras > div { background: #ffffff; border: 1px solid #999; }
	.pagina pre, .diff { background: #f4f4f4; color: #000; overflow: visible; }
	.pagina code { background: none; color: #000; }
	.diff .sai { color: #990000; background: none; }
	.diff .entra { color: #006600; background: none; }
	.diff .ctx { color: #444; }
	a { color: #000000; text-decoration-color: #000000; }
}