/* Estilo comum das páginas dos spikes B e C (o spike A tem o seu inline). */
:root { --fundo: #ffffff; --texto: #1c1c1e; --suave: #6b6b70; --linha: #d4d4d8; --campo: #f4f4f5; --acento: #2457d6; --acento-texto: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root { --fundo: #121214; --texto: #f2f2f4; --suave: #a0a0a8; --linha: #3a3a40; --campo: #1e1e22; --acento: #6f9bff; --acento-texto: #0b0b0d; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.4 -apple-system, system-ui, "Segoe UI", sans-serif;
       padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
main { max-width: 640px; margin: 0 auto; }
h1 { font-size: 1.25rem; margin: 0 0 8px; }
h2 { font-size: 1rem; margin: 20px 0 4px; }
p { margin: 8px 0; }
a { color: var(--acento); }
nav { margin: 0 0 12px; font-size: 0.9rem; }
.botoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }
button { min-height: 48px; padding: 8px; font-size: 16px; font-weight: 600; color: var(--acento-texto); background: var(--acento); border: 0; border-radius: 10px; }
button.secundario { color: var(--texto); background: var(--campo); border: 1px solid var(--linha); }
button:disabled { opacity: 0.5; }
#estado { min-height: 1.4em; color: var(--suave); }
pre { margin: 8px 0; padding: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; font: 13px/1.45 ui-monospace, Menlo, monospace; background: var(--campo); border: 1px solid var(--linha); border-radius: 10px; min-height: 4em; }