---
title: "A arquitetura de construção da plataforma: o que decidimos, e em que nos baseamos."
seo_title: "Arquitetura da plataforma: decisões e referências | SazAI"
description: "Como a SazAI é construída: motores cegos a formato, linhagem, decisões versionadas, validação com método e o roteiro."
tags: [marketing]
icon: book
---

> **Conclusão: o acelerador é o domínio do time sobre o substrato; e nenhuma decisão aqui é gosto: a escolha está escrita, com o que foi descartado e por quê.** A pirâmide abaixo é o mapa; o vão fica fora, dito.

<div class="chap">

<div class="ico-col"><span class="ico"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:36px;height:36px"><path d="M24 8l16 8-16 8-16-8z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M8 24l16 8 16-8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M8 32l16 8 16-8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></span></div>

## O que a SazAI é

<h3 class="sub">Motores, componentes e documentação, dominados por quem os construiu</h3>

A SazAI é a plataforma: o substrato de inteligência e prova sobre o qual os produtos são
construídos. Multi-tenancy, autenticação, linhagem, orquestração, camada de agentes, medição
exata e decisões versionadas, feitos uma vez. A SazAI Corpus, o cofre e o design system são os
produtos que já saíram dela, e cada um usa o mesmo motor em vez de reconstruí-lo.

Os painéis descem pela força da âncora, e cada um fecha com as suas referências em um bloco que expande, para quem quiser conferir. As citações seguem a norma ABNT NBR 6023, de 2018.

<figure class="viz" role="group" aria-label="A pirâmide desta página: quatro forças de âncora, da dependência de execução ao posicionamento, e o vão do lado de fora">
<div class="duo" style="grid-template-columns:auto 1fr">
<div class="mid"><svg viewBox="0 0 220 170" aria-hidden="true" style="width:200px">
<polygon points="110,10 150,50 70,50" fill="var(--hue-analysis)" opacity=".85"/>
<polygon points="64,58 156,58 176,92 44,92" fill="var(--hue-output)" opacity=".65"/>
<polygon points="38,100 182,100 198,130 22,130" fill="var(--hue-upload)" opacity=".5"/>
<polygon points="16,138 204,138 214,160 6,160" fill="var(--hue-reprocess)" opacity=".35"/>
<rect x="180" y="8" width="34" height="34" rx="4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="4 3" style="color:var(--gray)"/>
</svg></div>
<div class="side" style="text-align:left">
<b style="color:var(--hue-analysis)">dependência de execução</b><span>o motor não roda sem a norma · degrau 1</span>
<b style="color:var(--hue-output);margin-top:.5rem">norma aplicada e medida</b><span>lei no schema, critério no componente, contraste por token · degraus 2 a 4</span>
<b style="color:var(--hue-upload);margin-top:.5rem">decisão registrada</b><span>escolha escrita, com o descartado e o porquê · degraus 5 e 6</span>
<b style="color:var(--hue-reprocess);margin-top:.5rem">posicionamento</b><span>estudos com ressalva colada · degrau 7</span>
<b style="color:var(--gray);margin-top:.5rem">o vão</b><span>fora da pirâmide, e dito · último painel</span>
</div>
</div>
<figcaption>A força da âncora decide a altura. O que não sustenta nada fica fora do desenho, tracejado, e tem painel próprio.</figcaption>
</figure>

Ela não é plug and play para quem chega de fora. **O acelerador não é o substrato; é o domínio do
time sobre ele.** Quem conhece os motores, os componentes e a documentação faz um produto SaaS
novo partir do que já existe, e o resto desta página é a medida de quanto isso encurta o caminho.

<figure class="viz duo" role="group" aria-label="Motores, componentes e documentação; o domínio do time no meio; os produtos que saem">
<div class="side" style="color:var(--hue-analysis)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:48px;height:48px"><rect x="10" y="10" width="28" height="28" rx="4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="24" cy="24" r="6" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="24" y1="4" x2="24" y2="10" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="24" y1="38" x2="24" y2="44" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="4" y1="24" x2="10" y2="24" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="38" y1="24" x2="44" y2="24" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>o substrato</b>motores, componentes, documentação</div>
<div class="mid" style="color:var(--hue-upload)"><svg viewBox="0 0 120 72" aria-hidden="true"><line x1="6" y1="36" x2="40" y2="36" stroke="currentColor" stroke-width="1.5"/><path d="M34 31l6 5-6 5" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="60" cy="36" r="14" fill="currentColor" opacity=".12" stroke="currentColor" stroke-width="1.5"/><path d="M54 36l4 4 8-8" fill="none" stroke="currentColor" stroke-width="1.5"/><line x1="80" y1="36" x2="114" y2="36" stroke="var(--hue-output)" stroke-width="1.5"/><path d="M108 31l6 5-6 5" fill="none" stroke="var(--hue-output)" stroke-width="1.5"/></svg><b>o domínio do time</b>é o que acelera</div>
<div class="side" style="color:var(--hue-output)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:48px;height:48px"><rect x="8" y="12" width="32" height="24" rx="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="8" y1="20" x2="40" y2="20" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="13" cy="16" r="1.4" fill="currentColor"/><circle cx="18" cy="16" r="1.4" fill="currentColor"/></svg><b>os produtos</b>Corpus, cofre, design system</div>
</figure>

A moldura desta ideia não é nova e não é desta página: é o oitavo dos nove pilares com que a
SazAI se descreve, *plataforma antes do produto*. O que segue é a evidência dele.

</div>

<div class="chap">

<div class="ico-col"><sz-icon style="color:var(--hue-analysis)" name="file" size="36"></sz-icon></div>

## O motor depende das normas de formato para existir

<h3 class="sub">Degrau 1 · dependência de execução, a âncora mais forte que há</h3>

Se a norma estivesse errada no código, o motor não rodava. A referência não é mencionada; é
dependida, e disso sai o determinismo.

**Dados e fatos:**

- Namespace do OOXML no motor: 237 ocorrências em 37 formas distintas (2026-09-01).
- Dublin Core como dependência: 22 namespaces. ISO 8601: a norma mais citada do banco, 60 ocorrências.
- A cadeia conferível: cláusula publicada → comentário da coluna no DDL → mapa de dados → coluna. Paráfrase proibida por regra escrita; DDL e mapa carregam a mesma cláusula, verbatim.

<figure class="viz duo four" role="group" aria-label="A cadeia do determinismo: cláusula publicada, comentário no DDL, camada do mapa, coluna relacional">
<div class="side" style="color:var(--hue-analysis)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:40px;height:40px"><path d="M12 6h18l8 8v28H12z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M30 6v8h8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="18" y1="24" x2="32" y2="24" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>cláusula publicada</b>a norma, por número</div>
<div class="side" style="color:var(--hue-analysis)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:40px;height:40px"><rect x="8" y="10" width="32" height="28" rx="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="14" y1="18" x2="34" y2="18" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="3 2"/><line x1="14" y1="25" x2="30" y2="25" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="14" y1="31" x2="30" y2="31" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>comentário no DDL</b>a mesma cláusula, verbatim</div>
<div class="side" style="color:var(--hue-analysis)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:40px;height:40px"><circle cx="14" cy="14" r="5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="34" cy="18" r="5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="22" cy="34" r="5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="17" y1="17" x2="31" y2="16" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="16" y1="18" x2="20" y2="30" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>camada do mapa</b>sem paráfrase, por regra</div>
<div class="side" style="color:var(--hue-analysis)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:40px;height:40px"><rect x="8" y="8" width="32" height="32" rx="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="20" y1="8" x2="20" y2="40" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="8" y1="20" x2="40" y2="20" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>coluna relacional</b>existe porque a cláusula existe</div>
</figure>


### E o formato seguinte custa menos

O primeiro formato foi o PowerPoint, e ele custou o motor inteiro: ler, medir, traduzir,
escrever de volta, comparar, tudo pela primeira vez. O segundo, o documento Word, custou uma
ordem de grandeza menos. O terceiro, a planilha, mais uma. E o quarto, o PDF, custou o mesmo que
o terceiro: a curva estabilizou. Não é uma lista de conquistas; é uma curva, e a curva é o
argumento.

<figure class="viz curve" role="group" aria-label="Custo de cada formato até o ciclo completo, em escala logarítmica: o primeiro custou o motor, cada seguinte uma ordem de grandeza menos, e o quarto estabiliza no mesmo custo do terceiro">
<div class="row ooxml"><b>PPTX</b><span class="track"><span class="bar" style="width:100%"></span></span><em>o motor inteiro</em></div>
<div class="row ooxml"><b>DOCX</b><span class="track"><span class="bar" style="width:46%"></span></span><em>uma ordem a menos</em></div>
<div class="row ooxml"><b>XLSX</b><span class="track"><span class="bar" style="width:16%"></span></span><em>mais uma</em></div>
<div class="row other"><b>PDF</b><span class="track"><span class="bar" style="width:15%"></span></span><em>estabiliza</em></div>
<figcaption>Escala logarítmica: cada passo é uma ordem de grandeza. O quarto ponto não é só o menor: é de outra natureza, e custou o mesmo que o terceiro.</figcaption>
</figure>

<p class="claim">O <b>PDF é o primeiro substrato que não é Office</b>: um grafo binário de objetos em vez de zip mais XML. Se o motor tivesse apenas ficado bom em PowerPoint, o quarto formato teria custado como o primeiro. Custou como o terceiro. <b>O motor não ficou mais rápido em PowerPoint; ficou agnóstico de formato</b>, e os <a href="documents">quatro formatos</a> rodam hoje na mesma arquitetura, cada um com a sua garantia declarada. É por isso que o quinto vai custar o que custou o quarto, e é isso que esta página chama de aceleração.</p>

<div class="bound">
<p><b>Onde isso está registrado, dito antes de você perguntar.</b> No git, não no diário institucional: a curva repousa em decisões datadas e em commits, que são a fonte certa para um intervalo, e é isso que se confere numa avaliação. Os tempos absolutos de cada formato ficam no documento técnico, com o comando que os deriva ao lado.</p>
</div>
<details class="refs"><summary>Referências e decisões registradas</summary>
<div>
<p><b>O que está escrito, e o que foi descartado</b></p><ul><li>Ler cada formato pela norma, cláusula a cláusula; a heurística foi descartada porque não sobrevive a auditoria.</li><li>Datas em ISO 8601 no sistema inteiro; metadados por Dublin Core.</li><li>PDF aceito como primeiro substrato não-Office, citado pela norma dele.</li></ul><p><b>Referências (ABNT NBR 6023:2018)</b></p><ul><li>ECMA INTERNATIONAL. <b>ECMA-376</b>: Office Open XML File Formats. Disponível em: https://ecma-international.org/publications-and-standards/standards/ecma-376/.</li><li>ISO/IEC. <b>ISO/IEC 29500</b>: Office Open XML File Formats.</li><li>ISO. <b>ISO 32000-1</b>: Portable Document Format. · ISO. <b>ISO 19005</b>: PDF/A.</li><li>ISO. <b>ISO 15836-1</b>: Dublin Core. · ISO. <b>ISO 8601</b>: Date and time.</li><li>IETF. <b>RFC 5646</b>: Tags for Identifying Languages.</li><li>MICROSOFT. <b>MS-PPTX · MS-DOCX · MS-OE376 · MS-ODRAWXML · MS-OFFCRYPTO</b>: implementation notes.</li><li>UNICODE CONSORTIUM. <b>Unicode CMap</b> specifications.</li></ul>
</div>
</details>

</div>

<div class="chap">

<div class="ico-col"><span class="ico"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:36px;height:36px"><circle cx="24" cy="24" r="5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="10" cy="12" r="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="38" cy="10" r="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="12" cy="38" r="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="38" cy="36" r="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="13" y1="14" x2="20" y2="21" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="35" y1="12" x2="28" y2="21" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="14" y1="36" x2="20" y2="27" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="35" y1="34" x2="28" y2="27" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></span></div>

## O corpo de conhecimento

<h3 class="sub">Tudo o que decidimos, medimos e escrevemos, ligado, e navegável pelo time e pelos agentes</h3>

O domínio do time sobre o substrato tem um lugar onde mora: um cofre Obsidian que espelha o
repositório. As decisões, o mapa de dados, os contratos dos agentes, as personas, a estratégia, as
sessões de trabalho: cada nota liga às outras, e os hubs são as portas por onde uma pessoa ou um
agente entra. É o mesmo grafo que o produto entrega ao cliente no cofre dele, usado primeiro em
nós mesmos. Abaixo, o nosso, em movimento; passe sobre um hub para ver o que ele liga, e clique
para abrir inteiro.

<figure class="viz graph" id="vault-graph" role="group" tabindex="0" aria-label="O grafo do cofre da SazAI: os hubs de decisões, agentes, mapa de dados, produto, estratégia, operações, pessoas, pitch e personas, ligados entre si e às suas notas">
<div class="stage"><svg viewBox="0 0 800 520" aria-hidden="true"><g class="edges"></g><g class="nodes"></g></svg><div class="labels" aria-hidden="true"></div></div>
<figcaption>O cofre da SazAI, como o time o vê todo dia. Cada ponto é uma nota; cada linha, um link que alguém escreveu. Os hubs têm nome; o resto é o que eles ligam. Conjunto de nós fotografado em 2026-08-28, à mão; quando a derivação automática do cofre entrar, esta linha sai.</figcaption>
</figure>

<div class="bound">
<p><b>Até onde o mapa alcança, medido, e é a parte que mais vale.</b> O grafo do cofre alcança 55 das 158 tabelas do mapa de dados e um dos cinco mapas de formato; o repositório alcança 158 de 158. Uma figura que mostrasse tudo ligado seria a única alegação desta página sem recibo atrás, numa página cujo assunto é que as nossas alegações têm recibo. O que está validado não é que tudo se conecta: é que sabemos exatamente o que se conecta e o que não. Onde o mapa é mudo, o repositório responde.</p>
</div>

</div>

<div class="chap">

<div class="ico-col"><sz-icon style="color:var(--hue-reprocess)" name="info" size="36"></sz-icon></div>

## A proteção de dados é desenho, e desenho se audita

<h3 class="sub">Degrau 2 · a lei virou schema, e o schema é conferível</h3>

O que a lei pede por escrito, o banco cumpre por estrutura. A verificação não é ler a nossa
política; é auditar o schema.

**Dados e fatos:**

- Armazenamento permanente sem conteúdo de documento; conteúdo em banco separado, sensível e apagável.
- Isolamento por cliente como coluna, não como promessa: recortes nunca cruzam clientes.
- Certificação hoje: nenhuma. Controles desenhados para servir de evidência quando ela for buscada.

<figure class="viz duo" role="group" aria-label="Dois bancos: o permanente sem conteúdo, e o sensível, separado e apagável">
<div class="side" style="color:var(--hue-analysis)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:48px;height:48px"><ellipse cx="24" cy="12" rx="14" ry="5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M10 12v24c0 3 6 5 14 5s14-2 14-5V12" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="16" y1="22" x2="32" y2="22" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="16" y1="29" x2="28" y2="29" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>permanente</b>estrutura, medição, linhagem; conteúdo, nunca</div>
<div class="mid" style="color:var(--gray)"><svg viewBox="0 0 120 72" aria-hidden="true"><line x1="60" y1="10" x2="60" y2="62" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 3"/></svg><b>separados por desenho</b>audite o schema</div>
<div class="side" style="color:var(--hue-reprocess)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:48px;height:48px"><ellipse cx="24" cy="12" rx="14" ry="5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M10 12v24c0 3 6 5 14 5s14-2 14-5V12" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-dasharray="4 3"/><line x1="18" y1="26" x2="30" y2="34" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="30" y1="26" x2="18" y2="34" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>sensível</b>o conteúdo, apagável de verdade</div>
</figure>

<details class="refs"><summary>Referências e decisões registradas</summary>
<div>
<p><b>O que está escrito, e o que foi descartado</b></p><ul><li>Privacidade por desenho e por padrão como arquitetura; a camada de compliance sobre banco comum foi descartada.</li><li>A remoção chama-se <b>retirada</b>, não apagamento: a palavra mais forte foi descartada porque prometia alcance que backups não sustentam.</li></ul><p><b>Referências (ABNT NBR 6023:2018)</b></p><ul><li>UNIÃO EUROPEIA. <b>Regulamento (UE) 2016/679</b> (GDPR), art. 25.</li><li>BRASIL. <b>Lei nº 13.709, de 14 de agosto de 2018</b> (LGPD).</li><li>CAVOUKIAN, Ann. <b>Privacy by Design</b>: the 7 foundational principles. Toronto: IPC, 2009.</li><li>ISO/IEC. <b>ISO/IEC 27001</b>. · OWASP FOUNDATION. Disponível em: https://owasp.org/.</li></ul>
</div>
</details>

</div>

<div class="chap">

<div class="ico-col"><sz-icon style="color:var(--hue-output)" name="eye" size="36"></sz-icon></div>

## A acessibilidade é medida, não declarada

<h3 class="sub">Degrau 3 · norma citada é conformidade; número medido é desenho</h3>

O critério mora no componente, com o número ao lado do código, e o contraste é medido antes de
uma cor entrar no sistema.

**Dados e fatos:**

- WCAG 2.2 AA em 51 arquivos do design system, com critérios citados por número (1.4.1, 3.1) (2026-09-01).
- Contraste medido por token: `--hue-lineage` a 4,00:1 com a nota *guia, nunca texto* escrita dentro do próprio token; `--text-faint` **reprovado** por medir 2,56:1 sobre branco, e a reprovação registrada.
- Daltonismo medido: o roxo avaliado sob deuteranopia, distância de cor ΔE 29,1.
- Zero decisões de arquitetura registram a WCAG; a âncora mais forte de acessibilidade da casa é invisível no registro de decisões, e registrá-la é trabalho por fazer.

<figure class="viz" role="group" aria-label="Três medições de cor: um token aprovado como guia, um reprovado, e o roxo medido sob deuteranopia">
<div class="duo" style="grid-template-columns:1fr 1fr 1fr">
<div class="side"><div class="ev proof" style="margin:0"><span class="n">4,00:1</span><span class="t"><b>aprovado como guia</b>com a nota <i>guia, nunca texto</i> escrita dentro do próprio token</span></div></div>
<div class="side"><div class="ev open" style="margin:0"><span class="n">2,56:1</span><span class="t"><b>reprovado</b>medido sobre branco, e a reprovação registrada</span></div></div>
<div class="side"><div class="ev proof" style="margin:0"><span class="n">ΔE 29,1</span><span class="t"><b>deuteranopia</b>o roxo medido sob a deficiência de cor mais comum</span></div></div>
</div>
<figcaption>Norma citada é conformidade; número medido é desenho. Os três números moram nos tokens, não numa política.</figcaption>
</figure>

### O design system é produto, construído sobre padrão aberto

<h3 class="sub">Degrau 4 · o acelerador das outras superfícies, em norma do W3C</h3>

O design system é produto da SazAI por ratificação (2026-08-26), com a função de acelerar os
outros: os componentes que servem o marketing, o cofre e o showcase são os mesmos, e são padrão
aberto, não framework proprietário.

**Dados e fatos:**

- Componentes sobre W3C Custom Elements e CSS Custom Properties; sem dependência de framework.
- Uma biblioteca, três superfícies servidas; temas claro e escuro e skins white label pelo mesmo mecanismo de tokens.
- Os tokens carregam as próprias medições e notas de uso (degrau 3), então a regra viaja com a cor.

<figure class="viz duo" role="group" aria-label="Uma biblioteca de componentes servindo três superfícies">
<div class="side" style="color:var(--verb-see)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:48px;height:48px"><rect x="8" y="8" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><rect x="26" y="8" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><rect x="8" y="26" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><rect x="26" y="26" width="14" height="14" rx="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>uma biblioteca</b>componentes, tokens, skins</div>
<div class="mid" style="color:var(--gray)"><svg viewBox="0 0 120 72" aria-hidden="true"><line x1="10" y1="36" x2="55" y2="36" stroke="currentColor" stroke-width="1.5"/><line x1="55" y1="36" x2="105" y2="14" stroke="currentColor" stroke-width="1.5"/><line x1="55" y1="36" x2="105" y2="36" stroke="currentColor" stroke-width="1.5"/><line x1="55" y1="36" x2="105" y2="58" stroke="currentColor" stroke-width="1.5"/></svg><b>o mesmo mecanismo</b>temas e white label por token</div>
<div class="side" style="color:var(--hue-output)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:48px;height:48px"><rect x="6" y="8" width="36" height="10" rx="2" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><rect x="6" y="22" width="36" height="10" rx="2" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><rect x="6" y="36" width="36" height="6" rx="2" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>três superfícies</b>marketing, cofre, showcase</div>
</figure>


<details class="refs"><summary>Referências e decisões registradas</summary>
<div><p><b>O que está escrito, e o que foi descartado</b></p><ul><li>Critério por número no componente que o cumpre; a página de política central foi descartada.</li><li>Palavra fora de desenho: texto em HTML, geometria em SVG.</li></ul><p><b>Referências (ABNT NBR 6023:2018)</b></p><ul><li>W3C. <b>WCAG 2.2</b>: Web Content Accessibility Guidelines, nível AA. Recommendation, 2023. Disponível em: https://www.w3.org/TR/WCAG22/.</li></ul><p><b>O que está escrito, e o que foi descartado</b></p><ul><li>Web Components padrão; o framework proprietário foi descartado para o white label não depender de licença nossa.</li><li>Held ao mesmo padrão de qualquer superfície: suíte que roda, guardas que recusam em build.</li></ul><p><b>Referências (ABNT NBR 6023:2018)</b></p><ul><li>W3C. <b>Custom Elements</b> (HTML Living Standard). · W3C. <b>CSS Custom Properties for Cascading Variables</b>.</li></ul></div>
</details>

</div>

<div class="chap">

<div class="ico-col"><sz-icon style="color:var(--hue-analysis)" name="globe" size="36"></sz-icon></div>

## Os canais são capability: API e MCP mudam o que o produto pode ser

<h3 class="sub">Degrau 5 · padrões abertos na porta, e o que eles habilitam</h3>

API aberta e MCP não são encanamento: são o que permite construir outras interfaces e conexões
sobre o mesmo substrato, sem a gente na sala. Um agente de terceiros, um painel seu, uma
integração de fluxo: o produto passa a poder ser essas coisas porque os canais existem.

**Dados e fatos:**

- O canal do agente é um resource server OAuth padrão: 401 sem credencial, descoberta publicada.
- Paridade como contrato: **MCP ⊆ OpenAPI**, tudo o que o MCP expõe existe na API aberta. Um substrato, vários leitores.
- Orquestração por ferramenta de execução durável de workflows, adotada pelo que garante, e o garantido é medido: trabalho morto não deixa estado parcial; sobrecarga degrada em fila, não quebra; nada falha em silêncio.

<figure class="viz duo" role="group" aria-label="Um substrato, dois canais, e as interfaces que eles habilitam">
<div class="side" style="color:var(--hue-analysis)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:48px;height:48px"><rect x="10" y="10" width="28" height="28" rx="4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="24" cy="24" r="6" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>um substrato</b>o motor e o cofre</div>
<div class="mid" style="color:var(--hue-upload)"><svg viewBox="0 0 120 72" aria-hidden="true"><rect x="38" y="14" width="44" height="18" rx="9" stroke="currentColor" stroke-width="1.5" fill="currentColor" opacity=".12"/><rect x="38" y="40" width="44" height="18" rx="9" stroke="currentColor" stroke-width="1.5" fill="none"/><line x1="10" y1="36" x2="38" y2="24" stroke="currentColor" stroke-width="1.5"/><line x1="10" y1="36" x2="38" y2="48" stroke="currentColor" stroke-width="1.5"/><line x1="82" y1="24" x2="110" y2="16" stroke="var(--hue-output)" stroke-width="1.5"/><line x1="82" y1="48" x2="110" y2="40" stroke="var(--hue-output)" stroke-width="1.5"/><line x1="82" y1="36" x2="110" y2="60" stroke="var(--hue-output)" stroke-width="1.5"/></svg><b>API e MCP</b>MCP ⊆ OpenAPI, por contrato</div>
<div class="side" style="color:var(--hue-output)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:48px;height:48px"><path d="M24 6l4 12 12 4-12 4-4 12-4-12-12-4 12-4z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>o que pode ser</b>agentes seus, painéis seus, fluxos seus</div>
</figure>

<details class="refs"><summary>Referências e decisões registradas</summary>
<div>
<p><b>O que está escrito, e o que foi descartado</b></p><ul><li>Autenticação e descoberta pelas RFCs; a convenção própria foi descartada.</li><li>Canal novo não inventa superfície nova: a regra de paridade impede o MCP de virar uma segunda API.</li></ul><p><b>Referências (ABNT NBR 6023:2018)</b></p><ul><li>IETF. <b>RFC 8414</b>: OAuth 2.0 Authorization Server Metadata. 2018.</li><li>IETF. <b>RFC 9728</b>: OAuth 2.0 Protected Resource Metadata. 2025.</li><li>IETF. <b>RFC 8707</b>: Resource Indicators for OAuth 2.0. 2020.</li><li>OPENAPI INITIATIVE. <b>OpenAPI Specification</b>. Disponível em: https://spec.openapis.org/.</li><li>ANTHROPIC. <b>Model Context Protocol</b> (MCP). Disponível em: https://modelcontextprotocol.io/.</li></ul>
</div>
</details>

</div>

<div class="chap">

<div class="ico-col"><span class="ico"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:36px;height:36px"><path d="M24 6l14 5v12c0 9-6 15-14 19-8-4-14-10-14-19V11z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M17 24l5 5 9-10" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></span></div>

## Como a gente valida

<h3 class="sub">Testes que recusam, auditoria com método, e os defeitos publicados ao lado dos acertos</h3>

A validação tem quatro camadas, e a ordem importa. **Testes:** 505 arquivos de teste no repositório,
com a suíte do design system rodando a cada build. **Guardas:** verificações que recusam em tempo
de build em vez de só reportar; um build que viola uma regra não sai. **Carga:** o teste de
2026-07-20, numa réplica fiel de produção, com 50 leituras concorrentes respondidas em 0,77 s, um
job pesado com pico de 4,71 GiB contra um teto de 5, e ondas de cinco e dez jobs com zero falha,
zero estouro de memória, zero corrupção. Sob sobrecarga o sistema entra em fila; ele não quebra.
**Auditoria interna:** relatórios datados de estresse, destruição e segurança, com veredito por
item.

<figure class="viz duo four" role="group" aria-label="Quatro camadas de validação: testes, guardas que recusam, auditoria com método, defeitos publicados">
<div class="side" style="color:var(--hue-output)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:44px;height:44px"><rect x="8" y="8" width="32" height="32" rx="3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M15 24l6 6 12-12" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>505 testes</b>a suíte roda a cada build</div>
<div class="side" style="color:var(--hue-output)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:44px;height:44px"><path d="M8 12h32v10H8z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M8 26h32v10H8z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="30" y1="14" x2="36" y2="20" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="36" y1="14" x2="30" y2="20" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M28 31l3 3 5-6" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>guardas que recusam</b>o build não sai violado</div>
<div class="side" style="color:var(--hue-output)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:44px;height:44px"><circle cx="21" cy="21" r="11" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="29" y1="29" x2="40" y2="40" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="16" y1="19" x2="26" y2="19" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="16" y1="24" x2="23" y2="24" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>auditoria com método</b>estresse, destruição, segurança</div>
<div class="side" style="color:var(--hue-output)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:44px;height:44px"><path d="M12 6h18l8 8v28H12z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M30 6v8h8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="24" cy="28" r="6" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="24" y1="25" x2="24" y2="29" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="24" cy="31.5" r=".9" fill="currentColor"/></svg><b>defeitos publicados</b>ao lado do que passou</div>
</figure>

<p class="claim">Não somos certificados SOC2 nem ISO. O que temos é <b>auditoria interna documentada, com método declarado e com os defeitos que ela encontrou publicados ao lado dos que ela passou</b>. Um relatório nosso carrega, como seções próprias, <i>defeitos encontrados</i>, <i>um falso positivo que eu quase publiquei</i> e <i>o que eu não consegui estabelecer</i>. Um selo é a palavra de um terceiro; um método declarado, o leitor técnico julga sozinho. E as decisões escritas são projetadas para servir de evidência de controle quando a certificação for buscada.</p>

<div class="bound">
<p><b>O que esta página cita e o que ela não cita.</b> Aqui está a existência dos relatórios e o método deles. Os vereditos item a item ficam no documento técnico que acompanha uma avaliação, porque publicar a lista de sondas com resultado no topo do funil entrega um mapa a quem não deveria ter um. A frase que a carga <i>não</i> autoriza: <i>cinquenta simultâneos</i>. São cinquenta assentos e um job pesado por vez; confundir os dois é o erro que esta página existe para não cometer.</p>
</div>

<details class="refs"><summary>Referências e decisões registradas</summary>
<div><p><b>Metodologia externa declarada para o eixo de testes: nenhuma.</b> Prática forte, guardas que recusam em build, relatórios datados; a fonte de método é interna, e dizer isso é parte do método.</p></div>
</details>

</div>

<div class="chap">

<div class="ico-col"><span class="ico"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:36px;height:36px"><path d="M12 6h18l8 8v28H12z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M30 6v8h8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="18" y1="22" x2="32" y2="22" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="18" y1="28" x2="32" y2="28" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="18" y1="34" x2="26" y2="34" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="15" y1="25" x2="35" y2="25" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="2"/></svg></span></div>

## Como a gente decide

<h3 class="sub">Decisões escritas e datadas, e uma supersessão que risca duas frases e mais nada</h3>

Toda decisão de arquitetura da SazAI é um documento datado, com o contexto, a alternativa
rejeitada e o motivo. São 61 na data desta página, e o número entra datado porque cresce; o comando que o deriva está nas referências deste painel. O que torna isso um recibo e não um arquivo morto é a
supersessão: quando uma decisão nova contradiz uma antiga, ela diz exatamente qual frase da antiga
deixa de valer, e a antiga recebe a marca no próprio corpo, na frase, e não no título.

O exemplo mais recente é de ontem. A decisão 023 fixava, entre outras coisas, o vocabulário com
que o usuário nomeia as capacidades do produto. A decisão 061 superou **duas frases** dela, as duas
sobre vocabulário, e deixou intacto tudo o que é sobre o motor, incluindo a cláusula que se
acreditava violada e não estava. Três leitores competentes tinham lido essa cláusula do mesmo jeito
errado, e a decisão registra os três nomes, porque uma decisão que guarda só a conclusão perde o
motivo de três pessoas terem errado juntas.

<figure class="viz duo" role="group" aria-label="Uma decisão antiga com duas frases riscadas e o resto intacto, ligada à decisão nova">
<div class="side" style="color:var(--hue-reprocess)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:52px;height:52px"><path d="M12 6h18l8 8v28H12z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M30 6v8h8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="18" y1="22" x2="32" y2="22" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="18" y1="28" x2="32" y2="28" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="18" y1="34" x2="26" y2="34" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="15" y1="25" x2="35" y2="25" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="2"/></svg><b>a decisão antiga</b>duas frases riscadas, o resto intacto</div>
<div class="mid" style="color:var(--hue-reprocess)"><svg viewBox="0 0 120 72" aria-hidden="true"><line x1="10" y1="36" x2="106" y2="36" stroke="currentColor" stroke-width="1.5"/><path d="M100 31l6 5-6 5" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="42" y="26" width="36" height="20" rx="10" fill="currentColor" opacity=".12" stroke="currentColor" stroke-width="1.5"/></svg><b>supersede</b>nomeia a frase, e só ela</div>
<div class="side" style="color:var(--hue-output)"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:52px;height:52px"><path d="M12 6h18l8 8v28H12z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M30 6v8h8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M18 28l4 4 8-8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><b>a decisão nova</b>com os três nomes que erraram juntos</div>
</figure>

<div class="bound">
<p><b>Um número que esta página não publica.</b> Quantas dessas decisões estão <i>aceitas</i> depende de quais palavras o contador admite no campo de estado, e cinco contadores competentes chegaram a cinco números diferentes esta semana. Ninguém errou: o campo nunca declarou o vocabulário dele. Publicamos a contagem datada, com o comando ao lado; a de aceitas só vai a público quando vier com o comando que a produz ao lado, do jeito que as 158 tabelas já vão.</p>
</div>

### E como escrevemos: um contrato interno, um degrau abaixo por honestidade

<h3 class="sub">Degrau 6 · coerência interna registrada, um degrau abaixo de norma externa</h3>

O estilo de escrita, a nomenclatura e as convenções da casa estão num contrato versionado que os
agentes citam. A âncora dele é coerência interna com decisão registrada, não norma externa
numerada; isso é um degrau abaixo dos anteriores, e descer prova que a hierarquia desta página se
aplica mesmo quando custa.

**Dados e fatos:**

- Um único padrão de escrita, versionado por revisão, citado por decisões e por agentes como contrato.
- Nomenclatura e convenções de nomes uniformes no sistema inteiro; norma citada nunca é parafraseada.
- Formatação, lint e varredura de segredos automatizados, declarados no padrão com fonte ao lado.

<figure class="viz" role="group" aria-label="Coerência interna registrada: um degrau abaixo de norma externa, desenhado tracejado de propósito">
<div class="ev open"><span class="n">coerência interna</span><span class="t"><b>Um degrau abaixo, e desenhado assim</b>A âncora deste painel é decisão registrada, não norma numerada. A moldura tracejada é a mesma que a casa usa para tudo que não é recibo, e um painel que desce prova que a hierarquia se aplica mesmo quando custa.</span></div>
</figure>


<details class="refs"><summary>Referências e decisões registradas</summary>
<div>
<p><b>O que está escrito, e o que foi descartado</b></p><ul>
<li>A contagem: <code>ls docs/corpus/pptx/tech_specs/ADR | grep -c '^ADR-'</code> devolve 61 em 2026-09-01. O número cresce; o comando não.</li><li>As alternativas de nomenclatura foram rejeitadas por convergência entre três superfícies, e a rejeição está registrada com o motivo.</li></ul><p><b>Referências</b></p><p>o contrato interno (`code_standards`, versionado) nomeia as suas fontes; esta
página não o parafraseia.</p><p>O contrato interno (<i>code_standards</i>, versionado) nomeia as suas fontes; esta página não o parafraseia.</p>
</div>
</details>

</div>

<div class="chap">

<div class="ico-col"><sz-icon style="color:var(--hue-output)" name="check" size="36"></sz-icon></div>

## O que é recibo, e o que ainda é prática

<h3 class="sub">Quatro capacidades com evidência; três declaradas, sem verbo no presente</h3>

Cada capacidade desta plataforma foi submetida a três perguntas: existe uma decisão escrita que
a governa? existe uma medição? ou só funciona, sem que ninguém tenha escrito por quê? O que passa
nas duas primeiras chamamos <dfn data-hint="Uma capacidade com decisão escrita e medição que qualquer pessoa reproduz: não uma promessa, um registro.">recibo</dfn>. O resto é prática, e fica declarado como
direção, do mesmo jeito que o [roteiro](#roadmap) abaixo declara o que ainda não existe. Uma
página que apresenta sete capacidades onde três são recibo é mais fraca do que uma que apresenta
quatro.

<figure class="viz ledger" role="group" aria-label="Quatro recibos com sua evidência e três práticas declaradas como direção">
<div class="col receipts">
<h4>Recibo</h4>
<div class="item"><b>Plug and play</b><span>4 ADRs e a receita · a curva de quatro pontos · a partição de 158 tabelas, re-derivável</span></div>
<div class="item"><b>Controle de filas</b><span>5 ADRs · load test com zero falha, zero OOM, zero corrupção</span></div>
<div class="item"><b>Arquitetura · linhagem · tenancy</b><span>com a borda do provedor declarada como buraco nomeado</span></div>
<div class="item"><b>Versionamento de decisão</b><span>decisões datadas, supersessão cirúrgica</span></div>
</div>
<div class="col practices">
<h4>Prática declarada</h4>
<div class="item"><b>Versionamento de schema</b><span>direção declarada</span></div>
<div class="item"><b>Versionamento de artefato</b><span>direção declarada</span></div>
<div class="item"><b>Comunicação entre agentes</b><span>direção declarada, com modos de falha medidos</span></div>
</div>
</figure>
<p class="claim">Os quatro à esquerda têm de onde ser conferidos, e os capítulos seguintes dizem onde. Os três à direita são para onde a plataforma vai, e nenhum verbo deles está no presente.</p>

### E o mercado: estudos com as ressalvas coladas

<h3 class="sub">Degrau 7 · ancora onde jogamos, não como construímos</h3>

Este degrau sustenta posições, não engenharia, e por isso é o último: a âncora é a mais fraca da
página e está rotulada como tal.

**Dados e fatos:**

- Sete casas: Gartner, BCG, McKinsey, Deloitte, Menlo Ventures, MIT NANDA, Stanford HAI.
- Ressalvas embutidas nas próprias entradas: preliminar dito preliminar (MIT NANDA, n=52); republicado dito republicado (Stanford/McKinsey); recorte regional dito regional (Deloitte, EMEA).
- O 79% da BCG prova o obstáculo, dado não estruturado sem governança; não prova a ponte.
- Pesquisa executiva é percepção, não financeiro auditado.


<details class="refs"><summary>Referências e decisões registradas</summary>
<div>
<p><b>O que está escrito, e o que foi descartado</b></p><ul><li>Plataforma antes de produto; comprar antes de construir.</li><li>Sobre Shadow AI, só a forma citável: redução por caminho corporativo governado. "A SazAI resolve Shadow AI" foi descartada por não ter medição que a sustente.</li></ul><p><b>Referências</b></p><p>as entradas completas em ABNT NBR 6023:2018 estão nos blocos desta página; das 25 do
inventário, as consultadas online trazem <i>Acesso em</i>, como a norma exige, e as demais não, como a
norma permite.</p>
</div>
</details>

</div>

<div class="chap">

<div class="ico-col"><span class="ico"><svg viewBox="0 0 48 48" aria-hidden="true" style="width:36px;height:36px"><circle cx="24" cy="24" r="16" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M31 17l-4 10-10 4 4-10z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></span></div>

<a id="roadmap"></a>

## Roteiro: o que estamos construindo

O roteiro guarda as direções grandes, aquelas para onde a plataforma aponta e que ainda não foram construídas. Quando uma peça sai daqui, ela some desta lista e aparece na página da capacidade correspondente, com a data. Um roteiro que se move é a única prova de ritmo que não dá para escrever com adjetivo. Nada abaixo está entregue, e nenhum item deve pesar na sua decisão de hoje.
Nada nesta página está entregue. Nenhum item daqui deve pesar na sua decisão de hoje, e nenhuma pessoa do nosso time deve apresentar qualquer um deles no presente do indicativo. O que está entregue está no [walk do produto](/), com o que ele garante, e os limites do que existe estão em [confie](trust).

## Inteligência de redlines e negociação

Comparar uma minuta com as revisões das partes, mostrar o que cada lado mudou, para onde o risco se deslocou e qual intenção o texto revela. O motor de comparação que sustenta isso já existe e roda hoje sobre versões de documentos. O que falta é a camada jurídica: entender que uma cláusula alterada não é apenas um parágrafo diferente.

**Por que está no roteiro e não na estrada:** é a direção com maior potencial de criar categoria própria, e é justamente por isso que ela é a mais fácil de vender cedo demais. Ela não existe.

## Agentes especializados sobre o seu corpus

Agentes com escopo próprio, construídos sobre o conhecimento que já está no seu cofre: um tutor que ensina a partir do material real da sua empresa, um acompanhante de adoção para um processo novo, um avaliador que verifica competência citando a fonte que usou.

**O que já está de pé por baixo:** o corpus, a linhagem, o agente conversacional e a citação de fonte. **O que falta:** a especialização por tarefa, com limites e regras próprias por agente.

## Substrato para uma frota de agentes governados

O passo seguinte do anterior, e o de maior alcance. Cada área da empresa alimenta o cofre com os seus documentos, e os agentes que essa área já usa consultam esse cofre em tempo de execução, por arquivo ou por protocolo, para qualquer pergunta sobre a empresa. Uma fonte governada debaixo de uma frota inteira, em vez de ferramentas de IA soltas que ninguém audita.

**Por que isso é roteiro e não promessa vaga:** o mecanismo de adoção é concreto e já existe em parte, porque o cofre é portátil e consumível por fora. O que falta é a governança da frota, e ela não está construída.

## Coisas que existem e que a gente ainda não consegue te mostrar

Estas são lacunas de evidência, não funcionalidades ausentes. A capacidade está lá; a prova pública não está, e enquanto não estiver a gente prefere listar a lacuna a contorná-la.

- **Exportação do cofre demonstrada.** O cofre existe e é texto simples com links; o que falta é uma demonstração publicada que qualquer pessoa reproduza sem falar com a gente. Até lá, é conversa de diligência e não item de página.
- **Suficiência do histórico para auditoria formal.** O registro existe e serve como evidência de controle. Se ele fecha um requisito específico de auditoria do seu setor é uma pergunta que a gente responde caso a caso, não uma afirmação de página.
- **Escala acima do que medimos.** Volumes na casa de centenas de milhares ou milhões de documentos não foram exercitados. É projeto de dimensionamento antes de ser compra.

## Coisas que ainda não existem

Estas são funcionalidades ausentes, e arquivá-las em qualquer lugar mais macio diria a você que elas estão lá e que a gente só não consegue mostrar. Elas não estão lá.

- **Verificação visual fiel.** O sistema mede estrutura e conta elementos; ele não olha a página final. Um verificador visual dentro do produto não existe.
- **Exclusão que alcança as cópias de segurança.** Hoje a exclusão é completa nos sistemas vivos e não alcança backups dentro da janela de retenção. O caminho técnico está definido e ainda não construído. O escopo exato está em [privacidade e soberania](privacy).
- **Remover o conteúdo e desativar a conta, numa ação pela interface.** Hoje a exclusão de documentos existe e leva os derivados junto; fazer isso de uma vez para tudo não está construído, e o encerramento é feito a pedido. O nome é proposital: apaga o conteúdo e desativa a conta, porque o rastro de quem acessou o sistema permanece.

## Como esta página é mantida

Um item sai daqui quando ele existe e foi medido, não quando ele está quase pronto. Quando sai, ele entra na página da capacidade com o que garante e onde para. Se você acompanha o SazAI por algum tempo, esta página é onde o ritmo aparece.

## Onde a borda passa

<h3 class="sub">Três limites que um leitor técnico testa primeiro, ditos antes do teste</h3>

**A borda do provedor.** A linhagem acompanha cada trecho de texto até ele sair para o modelo de
linguagem e recomeça quando ele volta. Nenhuma tabela nossa registra o que aconteceu do outro
lado; quem pergunta *prove o que fizeram com o meu texto dentro do modelo* recebe os termos de
retenção do provedor que contratou, e numa instalação sua o provedor é escolha sua. A página de
[soberania](privacy) diz onde isso para.

**A exclusão de licenças copyleft.** Nenhuma biblioteca AGPL entra no motor, e isso está escrito
no arquivo de dependências como decisão de projeto documentada. É um comentário, não um portão:
nada quebra o build se alguém a ignorar. Dizer isso é mais forte do que fingir que é portão, porque
quem abre o arquivo vê em dez segundos.

**Os agentes.** Este sistema é construído por uma equipe de agentes com escopo declarado e uma
cadeia de revisão, e a comunicação entre eles é prática, não recibo: não há decisão escrita que
governe o canal, e os modos de falha dele foram medidos por nós esta semana. Está no lado direito
do livro-razão, e é para lá que ele vai.

Tudo o que esta página afirma tem um comando ou um documento atrás, e o que não tem está dito
como direção. Se algo aqui não puder ser reproduzido numa avaliação sua, isso é um defeito nosso e
queremos saber antes de você. O produto que saiu primeiro desta plataforma é o que [você vê quando
um documento entra](see).


### O que esta pirâmide não sustenta

Uma pirâmide honesta diz o que fica de fora dela.

**Dados e fatos:**

- Cinco referências da doutrina em zero artefatos de engenharia: W3C **PROV** · ZAHARIA et al., **compound AI systems** (BAIR, 2024) · XU et al., **GraphRAG** (SIGIR, 2024) · literatura de **model routing** · **CommonMark/GFM**. Moldaram o pensamento; nenhuma decisão registrada saiu delas.
- Testes: prática forte, guardas que recusam em build, relatórios datados; metodologia externa declarada: nenhuma. Dito nessas palavras, sem vizinho plausível.
- E o achado que sustenta a conclusão inteira, medido nas decisões com alternativa em cabeçalho: em onze de onze, quem decidiu foi um princípio de engenharia, não uma referência externa. A norma sustenta; a escolha é nossa, e está escrita.


</div>

*Números medidos em 2026-09-01 sobre conjuntos que crescem: quem repetir a medição amanhã deve esperar números maiores, não iguais.*

<script type="module">
// IF THE #stars CANVAS EVER MORPHS INTO THIS GRAPH (Dev UX / Dev CO), REMOVE THIS FIGURE: two
// objects doing one job on one page is how a surface rots, quietly, because both look right.
// THE VAULT GRAPH, BORN AS STARS. Geometry in SVG, words in HTML. The layout is seeded, so the
// same picture renders every time; hubs are the real hubs of sazai.vault; satellites are counted
// per section, not drawn one to one. First reveal on intersection: points scatter like the
// starfield, then settle into the graph and the labels fade in. Hover lights a hub's edges;
// click (or Enter) opens the same scene full-screen; Escape closes. Reduced motion: no drift.
const fig=document.getElementById('vault-graph'); if(fig){
const svg=fig.querySelector('svg'),E=fig.querySelector('.edges'),N=fig.querySelector('.nodes'),L=fig.querySelector('.labels');
// no namespace literal: the house serves zero external references, and insertAdjacentHTML inside the <svg> inherits the SVG namespace on its own
const el=(t,a,parent)=>{parent.insertAdjacentHTML('beforeend','<'+t+' '+Object.entries(a).map(([k,v])=>k+'="'+v+'"').join(' ')+'/>');return parent.lastElementChild};
let seed=20260828; const rnd=()=>{seed=(seed*1664525+1013904223)%4294967296;return seed/4294967296};
const H=[ // real hubs of sazai.vault; n = satellites drawn, proportional, not exact
 {id:'index',l:'00-INDEX',x:400,y:250,c:'var(--dark)',r:9,n:6},
 {id:'adrs',l:'ADRs Hub',x:300,y:120,c:'var(--hue-reprocess)',r:8,n:59},
 {id:'agents',l:'Agents Hub',x:250,y:330,c:'var(--hue-analysis)',r:8,n:30},
 {id:'km',l:'Knowledge Map',x:560,y:130,c:'var(--hue-output)',r:7,n:18},
 {id:'product',l:'MOC-Product',x:600,y:300,c:'var(--hue-output)',r:7,n:26},
 {id:'strategy',l:'MOC-Strategy',x:520,y:410,c:'var(--hue-upload)',r:7,n:28},
 {id:'ops',l:'MOC-Operations',x:130,y:200,c:'var(--gray)',r:6,n:14},
 {id:'people',l:'MOC-People',x:150,y:440,c:'var(--hue-analysis)',r:6,n:10},
 {id:'pitch',l:'MOC-Pitch',x:690,y:440,c:'var(--hue-upload)',r:6,n:12},
 {id:'personas',l:'Personas',x:410,y:470,c:'var(--hue-reprocess)',r:6,n:7},
 {id:'sessions',l:'Sessions',x:700,y:200,c:'var(--gray)',r:5,n:9},
];
const X=[['index','adrs'],['index','agents'],['index','km'],['index','product'],['index','strategy'],['index','ops'],['index','people'],['index','pitch'],['index','personas'],['index','sessions'],['adrs','km'],['adrs','agents'],['agents','ops'],['agents','people'],['product','km'],['product','strategy'],['strategy','pitch'],['strategy','personas'],['pitch','personas'],['sessions','agents'],['sessions','adrs']];
const nodes=[],edges=[];
for(const h of H){const hub={...h,hub:true,sx:h.x,sy:h.y,ph:rnd()*6.28};nodes.push(hub);
  for(let i=0;i<h.n;i++){const a=rnd()*6.28,d=34+rnd()*(h.n>20?110:70);const s={id:h.id+i,x:h.x+Math.cos(a)*d,y:h.y+Math.sin(a)*d,c:h.c,r:1.6+rnd()*1.6,hub:false,of:hub,ph:rnd()*6.28};s.sx=s.x;s.sy=s.y;nodes.push(s);edges.push([hub,s]);
    if(rnd()<.12){const o=nodes[Math.floor(rnd()*nodes.length)];if(o&&o!==s)edges.push([s,o]);}}}
const byId=Object.fromEntries(nodes.filter(n=>n.hub).map(n=>[n.id,n]));
for(const [a,b] of X)edges.push([byId[a],byId[b]]);
for(const n of nodes){n.el=el('circle',{r:n.r,fill:n.c,opacity:n.hub?1:.75},N);n.el.style.color=n.c;
  n.rx=rnd()*800;n.ry=rnd()*520;n.t=0; // scatter origin, for the reveal
  if(n.hub){const sp=document.createElement('span');sp.textContent=n.l;sp.dataset.hub=n.id;L.appendChild(sp);n.lab=sp;
    n.el.classList.add('hub');n.el.dataset.hub=n.id;}}
for(const e of edges){e.el=el('line',{stroke:'var(--lightgray)','stroke-width':e[0].hub&&e[1].hub?1:.6,opacity:.55},E);}
const reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
let t0=null,revealed=false,lit=null;
function place(){const now=performance.now();for(const n of nodes){
  const k=reduce?1:Math.min(1,(now-(t0||now))/1600),ease=1-Math.pow(1-k,3);
  const dx=reduce?0:Math.sin(now/1900+n.ph)*(n.hub?2.2:3.6),dy=reduce?0:Math.cos(now/2300+n.ph)*(n.hub?2.2:3.6);
  n.x=n.rx+(n.sx-n.rx)*ease+dx;n.y=n.ry+(n.sy-n.ry)*ease+dy;
  n.el.setAttribute('cx',n.x);n.el.setAttribute('cy',n.y);
  if(n.hub){const pulse=reduce?1:1+Math.sin(now/1400+n.ph)*.08;n.el.setAttribute('r',n.r*pulse*ease+ .5);
    n.lab.style.left=(n.x/800*100)+'%';n.lab.style.top=(n.y/520*100)+'%';}else n.el.setAttribute('r',n.r*(.4+.6*ease));}
  for(const e of edges){e.el.setAttribute('x1',e[0].x);e.el.setAttribute('y1',e[0].y);e.el.setAttribute('x2',e[1].x);e.el.setAttribute('y2',e[1].y);}
  if(!revealed&&(reduce||now-t0>1500)){revealed=true;fig.classList.add('ready');}
  if(!reduce||!revealed)requestAnimationFrame(place);}
function light(id){lit=id;fig.classList.toggle('lit',!!id);
  for(const e of edges){const on=id&&(e[0].id===id||e[1].id===id||(e[0].of&&e[0].of.id===id&&e[1].hub===false&&e[1].of===e[0].of));
    e.el.setAttribute('opacity',id?(on?1:.12):.55);e.el.setAttribute('stroke',on?byId[id].c:'var(--lightgray)');}
  for(const n of nodes){const on=!id||n.id===id||(n.of&&n.of.id===id);n.el.setAttribute('opacity',on?(n.hub?1:.85):.18);}}
fig.addEventListener('mouseover',e=>{const h=e.target.closest('[data-hub]');if(h)light(h.dataset.hub)});
fig.addEventListener('mouseout',e=>{if(e.target.closest('[data-hub]'))light(null)});
// THE EXPANDED SCENE IS A MODAL (ADR-047 A10.4 #15): the figure moves into an sz-modal beside it, inside the same
// chapter so the .chap .graph.full rules still match, and comes back on close. The dialog brings the top layer, the
// blurred page behind (A10.2) and Esc; moved BEFORE open, the figure is inside the modal, so no hole is cut for it.
const ph=document.createElement('div');let modal=null;
const restore=()=>{if(!fig.classList.contains('full'))return;fig.classList.remove('full');ph.replaceWith(fig);document.body.style.overflow='';fig.focus({preventScroll:true})};
const expand=()=>{if(!modal){modal=document.createElement('sz-modal');modal.setAttribute('size','full');modal.setAttribute('bare','');modal.setAttribute('label',fig.getAttribute('aria-label')||'');modal.addEventListener('sz-close',restore)}
  ph.style.height=fig.offsetHeight+'px';fig.replaceWith(ph);ph.after(modal);modal.appendChild(fig);fig.classList.add('full');document.body.style.overflow='hidden';modal.open();fig.focus({preventScroll:true})};
const toggle=()=>{if(fig.classList.contains('full')){modal.close();return}customElements.whenDefined('sz-modal').then(expand)};
fig.addEventListener('click',e=>{if(!e.target.closest('[data-hub]')||fig.classList.contains('full'))toggle()});
fig.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();toggle()}});
// START ON SIGHT. IntersectionObserver is the primary trigger; a geometry check on load and on the
// first scroll is the fallback, so a viewport that never reports intersection (measured: an
// automated background tab delivers neither IO nor rAF) still gets the reveal on the next paint.
let started=false;const start=()=>{if(started)return;started=true;t0=performance.now();requestAnimationFrame(place)};
const inView=()=>{const r=fig.getBoundingClientRect();return r.top<innerHeight*.8&&r.bottom>innerHeight*.2};
const io=new IntersectionObserver((en)=>{if(en.some(x=>x.isIntersecting)){start();io.disconnect()}},{threshold:.35});io.observe(fig);
if(inView())start();else addEventListener('scroll',()=>{if(inView())start()},{passive:true});
}
</script>


<style>

/* CHAPTER NUMERALS, EDITORIAL. The number is the chapter's mark, not a KPI: it enters large,
   in the domain hue, beside an uppercase kicker that says what it counts. The house h2 follows
   untouched. These rules move to marketing.css (and the connectome port) when the page lands;
   they live in the body for the refine loop. */
/* ICON COLUMN (Ramés, 2026-08-28): the chapter icon sits left of the title AND its subtitle; the
   subtitle takes the old kicker voice: small, uppercase, quiet. */
/* THE ICON IS A SIBLING OF THE H2, NEVER INSIDE IT, AND THAT IS AN ANCHOR DECISION RATHER THAN
   A STYLE ONE. Quartz slugs a heading from its TEXT CONTENT, and any inline element in the
   heading contributes an empty token. Measured on a probe page, all six forms: `<sz-icon>`
   before the words gives `id="-forma-a-inline-antes"`, a `<span>` behaves identically, the icon
   AFTER the words gives a TRAILING hyphen, and the `{#explicit-id}` syntax is NOT supported
   here: it is slugged as literal text. Only a heading with no markup at all comes out clean.
   AN ANCHOR IS A URL AND A WRONG URL IS PERMANENT, so the icon leaves the heading. The visual
   is unchanged: `.ch` is zero-height and the icon is absolutely placed into the padding column
   the h2 already reserves. */
/* ============================================================================
   THE CHAPTER IS A PANEL, AND THAT ALSO RETIRES THREE MAGIC NUMBERS.

   THE DIAGNOSIS WAS AN INVERTED HIERARCHY, not a missing divider. Rendered, the page read
   heading / floating prose / CONTAINED FIGURE / floating prose: the figure carried a border,
   a fill and a blur while the chapter that owns it carried nothing, so the strongest container
   on the page was a child of the section rather than the section. Prose did not read loose so
   much as OUT-RANKED.

   Now each chapter is a real element, which fixes the ranking AND the alignment at once:

   1. THE CHAPTER IS THE SURFACE. Soft ground, hairline border, radius, generous padding.
   2. THE FIGURE GIVES BACK ITS FILL and keeps only its outline, so it reads as an object
      INSIDE the panel instead of a competing surface. The blur goes with the fill: a backdrop
      filter over a transparent box is cost with no picture.
   3. THE ICON SITS IN ITS OWN GRID COLUMN, vertically centred on the title block by the
      layout rather than by an offset. Everything before this was a magic number chasing a
      MARGIN COLLAPSE: `.ch` was a zero-height div and the h2's top margin collapsed through
      it, so the icon's 18px raise was EMERGENT, and every spacing change moved it. Measured,
      three times: padding opened a 2.4rem gap; a margin dropped it 19px; a margin on the
      previous paragraph did the same. The wrapper removes the collapse from the problem.
   ============================================================================ */
article .chap{position:relative;display:grid;grid-template-columns:3.4rem 1fr;
  gap:0 0;align-items:start;
  border:1px solid color-mix(in srgb,var(--lightgray) 85%,transparent);border-radius:14px;
  background:transparent;
  padding:1.7rem 1.9rem 1.5rem;margin:1.6rem 0}
/* THE GLASS IS A VEIL, NOT A FILTER ON THE PANEL, AND THAT IS A MEASURED CORRECTION.
   `blur(4px)` is the house's own value, read off the served page from `div.search-container`
   and `div.global-graph-outer`, the only two elements that already carry a backdrop filter.
   PUT IT ON `.chap` DIRECTLY AND THE COMPARE MODAL BREAKS: `backdrop-filter` makes the element
   a containing block for `position:fixed` DESCENDANTS, and the modal lives inside this panel.
   Measured before and after: the scrim went from the viewport (1440x757) to the panel's own box
   (788x569). So the veil goes on a pseudo-element at `z-index:-1`, which blurs what is behind
   the panel while leaving `.chap` an ordinary containing block. IT IS THE HOUSE'S OWN ANSWER
   TOO: `sz-search-field` solves the identical problem with a `.veil` behind its pill. */
article .chap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  /* `--surface` AND NOT `--light`, MEASURED RATHER THAN CHOSEN BY NAME. In the dark theme
     `--light` resolves to #09090b, which is EXACTLY the body background: a 40% mix of the
     background over the background is the background, and the panel measured invisible on the
     rendered pixels (inside 9,9,10 against outside 9,9,11: a delta of zero). Blur cannot
     rescue it either, because a backdrop filter over a flat surface has nothing to blur: THE
     FILL IS WHAT MAKES A PANEL EXIST and the blur is only its texture. `--surface` is #18181b,
     the house's own raised colour, the one `sz-search-field` puts behind its pill. */
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:none}
article .chap .ico-col{grid-column:1;grid-row:1 / span 2;align-self:center;
  display:flex;align-items:center;justify-content:flex-start;padding-top:.15rem}
article .chap .ico-col sz-icon,article .chap .ico-col .ico{display:inline-flex}
article .chap .ico-col .ico svg{width:36px;height:36px}
article .chap > h2{grid-column:2;grid-row:1;padding-left:0;margin:0}
article .chap > h3.sub{grid-column:2;grid-row:2;padding-left:0;margin:2px 0 0;line-height:1.15}
/* THE ANCHOR ICON WAS INFLATING THE LINE BOX, AND MY OWN CHANGE PUT IT THERE. Promoting the
   subtitle from `<p>` to `<h3>` for the SEO reading also gave it the `a[role=anchor]` Quartz
   adds to every heading: 15px tall, inline, on the baseline. Measured, the h3 box went to 26px
   for a 16px line, and that surplus is what read as too much air between title and subtitle.
   Capping the anchor to the text's own em takes the inflation out without removing the anchor,
   so the heading keeps the link it earned by being a heading. */
article .chap h2 a[role=anchor],article .chap h3.sub a[role=anchor]{
  display:inline-flex;align-items:center;height:1em;line-height:1;vertical-align:middle}
article .chap > *:not(.ico-col):not(h2):not(h3.sub){grid-column:1 / -1}
/* THE SPACE BELONGS TO THE FIRST PROSE PARAGRAPH, AND `:first-of-type` GAVE IT TO THE SUBTITLE.
   The first `<p>` inside a panel is `p.sub`, so this rule matched the subtitle instead of the
   prose: same specificity as the `.sub` rule and later in the block, so it won, and the
   subtitle inherited a 16px top margin nobody wrote for it. @rames spotted it on the rendered
   page before any probe did. Targeting the paragraph that FOLLOWS the subtitle says what was
   meant and cannot drift onto a sibling again. */
article .chap > h3.sub + p{margin-top:1rem}
article .chap > *:last-child{margin-bottom:0}
/* the figure is an object inside the panel, never a second surface */
article .chap .viz{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-color:color-mix(in srgb,var(--lightgray) 65%,transparent)}
/* ============================================================================
   HINT TEXT ON A TERM, AND THE RULE IT KEEPS: THE HOVER IS NEVER THE ONLY COPY.

   @copy-chief's rule applied literally: the explanation lives in the SENTENCE, where all three
   readers reach it (the person, the buyer's research agent, our agent reading the .md). The
   attribute is the SHORT FORM of that same sentence, so the hover adds convenience and never
   carries meaning the prose lacks. His measured reason is this page's own defect: the
   aria-label versus <text> divergence came from two copies of the same words in two encodings,
   and only one of them ever got translated.

   NO SCRIPT. Hover, keyboard focus and tap all resolve through :hover and :focus-visible, so
   there is nothing to upgrade, nothing that can trap focus, and it works before any module
   loads. `tabindex=0` makes the term reachable by keyboard and gives a tap somewhere to land.
   The term is marked as a TERM and not as a link: dotted underline, body colour, no pointer,
   because the page carries four real links and a fifth affordance that looked the same
   would lie.
   ============================================================================ */
article dfn[data-hint]{font-style:italic;position:relative;border-bottom:1px dotted var(--gray);
  cursor:help;outline:none}
article dfn[data-hint]::after{content:attr(data-hint);position:absolute;left:0;top:calc(100% + .5rem);
  z-index:30;width:min(30rem,72vw);padding:.7rem .85rem;border:1px solid var(--lightgray);
  border-radius:10px;background:var(--light);color:var(--darkgray);
  font-style:normal;font-size:var(--fs-xs,.76rem);line-height:1.45;letter-spacing:0;
  box-shadow:0 8px 24px rgb(0 0 0 / .28);opacity:0;visibility:hidden;transition:opacity .12s ease}
article dfn[data-hint]:hover::after,article dfn[data-hint]:focus-visible::after{opacity:1;visibility:visible}
article dfn[data-hint]:focus-visible{border-bottom-color:var(--secondary)}
/* THE SUBTITLE IS AN h3 AND ITS LOOK IS UNCHANGED. @sophia's SEO reading: the H2s lost their
   keywords when they became short labels, and the sentences that carry them became a styled
   paragraph with no heading weight. Promoting the element gives the weight back without moving
   a pixel: every typographic value below is the one the `<p>` already had. */
article h3.sub{font-size:var(--fs-xs,.74rem);font-weight:var(--fw-normal,400);letter-spacing:.08em;text-transform:uppercase;color:var(--gray);line-height:1.15}
/* COMPARE, in the vault's vocabulary: original, the declared relation, the edition; the button opens the component. */
article .duo .act{grid-column:1/-1;text-align:center;margin-top:.4rem}
article .duo sz-compare{display:block;height:0;overflow:hidden}
/* THE SAME BLUR THE SEARCH OVERLAY USES (Quartz .search-container: backdrop-filter blur(4px)),
   applied to the content boxes over a translucent ground so the starfield lifts them. Moves to
   marketing.css .viz when the page lands. */
article .duo.four{grid-template-columns:repeat(4,1fr)}
article .duo.strip{grid-template-columns:auto auto 1fr}
article .duo .out4{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
article .duo .out4 span{display:block}
article .duo .out4 svg{width:40px;height:40px;margin:0 auto .3rem}
article .duo.four .side svg{width:44px;color:var(--hue-analysis)}
article .duo.xray .side svg{color:var(--hue-upload)}
@media (max-width:640px){article .duo.four{grid-template-columns:1fr 1fr}}
/* THE MODAL MUST BE ABOVE THE PAGE CHROME, AND THE HOUSE HAS NO LAYER SCALE TO SAY SO. Measured
   on the served page: the compare scrim is z-index 50 (sz-compare), the consent notice 60
   (sz-consent), the search field host 10000 (chrome CSS). A dialog the reader opened that
   renders UNDER the search bar is a defect; this lifts it through the part the component
   exposes for exactly that. 10001 is a magic number chasing another one, declared as such:
   the durable fix is NOT a z-scale: sz-modal already solved this in-house by building on the
   native <dialog> and its top layer, which no z-index can sit above. sz-compare following it
   onto <dialog> retires this rule; that is a component change, not a page style. */
article sz-compare::part(modal){z-index:10001}
@media (max-width:640px){article .duo.strip{grid-template-columns:1fr}article .duo .out4{grid-template-columns:1fr 1fr}}
/* THE CLOSE MIRRORS THE OPEN: one vault in the middle, two readers on the sides. Geometry only;
   every word is HTML. */
article .duo{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;text-align:center;font-size:var(--fs-xs,.74rem);color:var(--gray)}
article .duo svg{display:block;height:auto;margin:0 auto .3rem}
article .duo .side svg{width:56px}
article .duo .mid svg{width:96px}
article .duo b{display:block;color:var(--dark);font-size:var(--fs-sm,.86rem)}
@media (max-width:640px){article .duo{grid-template-columns:1fr}}

/* ============================================================================
   TWO OBJECTS THIS PAGE NEEDED AND `see` DID NOT.

   1. THE CURVE, ON A LOG SCALE, BECAUSE A LINEAR ONE HIDES THE ARGUMENT. The claim is one
      order of magnitude per format: 3600h, 48h, 4h, one session. Drawn linearly the last
      three bars are invisible and the fourth point, THE ONE CARRYING THE STRONGEST PROOF,
      reads as merely small. Log widths make the collapse legible, and the caption says the
      scale out loud so nobody reads it as linear.

      AND THE FOURTH ROW BREAKS THE VISUAL FAMILY ON PURPOSE. The three OOXML formats share a
      hue and a solid bar; PDF gets a different hue and an outlined bar. **THE BREAK IS THE
      ARGUMENT**: the engine did not get faster at PowerPoint, it became format-agnostic, and
      a fourth bar in the same family would have said the opposite.

   2. RECEIPT AND PRACTICE MUST NOT LOOK ALIKE, and that is a composition rule rather than a
      label. A receipt is a thing already true and carries its evidence on the same line, so
      it is solid, filled, and reads as closed. A practice is declared direction with no
      present-tense verb, so it is outlined, muted, and reads as open. A reader who never
      gets to the words should still be able to see which column is which.

   3. THE BOUNDS ARE IN THE FLOW, NOT IN SMALL PRINT. `see` had none of these. A bound that
      has to be read as a footnote is a bound that gets skipped, and both of this page's
      bounds are the kind a competent reader tests FIRST. So they sit inside the chapter, at
      the same measure as the prose, in a treatment that is quieter than the claim but not
      smaller than it.
   ============================================================================ */
article .curve{display:flex;flex-direction:column;gap:.55rem}
article .curve .row{display:grid;grid-template-columns:4.2rem 1fr 7.5rem;align-items:center;gap:.8rem}
article .curve .row b{font-size:var(--fs-sm,.86rem);color:var(--text)}
article .curve .track{display:block;height:10px;border-radius:5px;background:color-mix(in srgb,var(--lightgray) 45%,transparent)}
article .curve .bar{display:block;height:100%;border-radius:5px}
article .curve .ooxml .bar{background:var(--hue-analysis)}
article .curve .other .bar{background:transparent;border:1.5px solid var(--hue-output)}
article .curve .other b{color:var(--hue-output)}
article .curve em{font-style:normal;font-size:var(--fs-xs,.76rem);color:var(--gray);text-align:right}
article .curve .other em{color:var(--hue-output)}
article .ledger{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
article .ledger h4{margin:0 0 .6rem;font-size:var(--fs-xs,.74rem);letter-spacing:.08em;text-transform:uppercase;font-weight:var(--fw-normal,400);color:var(--gray)}
article .ledger .item{margin-bottom:.7rem}
article .ledger .item b{display:block;font-size:var(--fs-sm,.88rem)}
article .ledger .item span{display:block;font-size:var(--fs-xs,.76rem);color:var(--gray);line-height:1.4;margin-top:.1rem}
article .ledger .receipts .item{border-left:2px solid var(--hue-output);padding-left:.7rem}
article .ledger .practices .item{border-left:2px dashed color-mix(in srgb,var(--gray) 55%,transparent);padding-left:.7rem}
article .ledger .practices .item b{color:var(--gray);font-weight:var(--fw-normal,400)}
article p.claim{margin:1rem 0 0;color:var(--text);font-size:var(--fs-sm,.95rem);line-height:1.55}
article .bound{margin:1.1rem 0 0;padding:.85rem 1rem;border-left:2px solid color-mix(in srgb,var(--gray) 40%,transparent);
  background:color-mix(in srgb,var(--surface) 45%,transparent);border-radius:0 8px 8px 0}
article .bound p{margin:0 0 .5rem;font-size:var(--fs-xs,.82rem);line-height:1.5;color:var(--gray)}
article .bound p:last-child{margin-bottom:0}
@media (max-width:640px){article .ledger{grid-template-columns:1fr}article .curve .row{grid-template-columns:3.4rem 1fr}article .curve em{grid-column:1/-1;text-align:left}}

/* THE VAULT GRAPH: born as stars, settles into the map. Geometry in SVG, words in HTML spans over
   it; `.stage` binds the two so labels track the drawing in both modes. Placed LAST so it wins
   over the panel's `.chap .viz` reset, and scoped to `.chap` so its specificity matches hers. */
article .chap .graph{position:relative;padding:.6rem;cursor:zoom-in;outline:none}
article .chap .graph .stage{position:relative;width:100%;aspect-ratio:800/520}
article .chap .graph .stage svg{display:block;width:100%;height:100%}
article .chap .graph .labels{position:absolute;inset:0;pointer-events:none}
article .chap .graph .labels span{position:absolute;transform:translate(-50%,10px);font-size:var(--fs-xs,.72rem);color:var(--dark);white-space:nowrap;opacity:0;transition:opacity .7s ease;text-shadow:0 0 6px var(--light),0 0 2px var(--light);pointer-events:auto}
article .chap .graph.ready .labels span{opacity:1}
article .chap .graph .nodes .hub{cursor:pointer;transition:opacity .25s}
article .chap .graph .edges line{transition:opacity .25s,stroke .25s}
article .chap .graph figcaption{margin-top:.4rem}
article .chap .graph:focus-visible{box-shadow:0 0 0 2px var(--secondary)}
article .chap .graph.full{flex:1;min-width:0;margin:0;border:0;border-radius:0;padding:3vh 4vw;background:transparent;cursor:zoom-out;display:flex;flex-direction:column;align-items:center;justify-content:center}
article .chap .graph.full .stage{width:min(92vw,calc(84vh * 800 / 520))}
article .chap .graph.full .labels span{font-size:1rem}
article .chap .graph.full figcaption{text-align:center;margin-top:1rem;max-width:70ch}
</style>