:root {
  --fundo: #f5f5f7; --cartao: #ffffff; --texto: #1d1d1f; --suave: #6e6e73; --linha: #d2d2d7;
  --ok: #1f8a4c; --erro: #c9302c; --botao: #1d1d1f; --botao-texto: #f5f5f7;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #000000; --cartao: #1c1c1e; --texto: #f5f5f7; --suave: #a1a1a6; --linha: #38383a;
    --ok: #34c759; --erro: #ff453a; --botao: #f5f5f7; --botao-texto: #1d1d1f;
  }
}
:root[data-theme="dark"] {
  --fundo: #000000; --cartao: #1c1c1e; --texto: #f5f5f7; --suave: #a1a1a6; --linha: #38383a;
  --ok: #34c759; --erro: #ff453a; --botao: #f5f5f7; --botao-texto: #1d1d1f;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 560px; margin: 0 auto; padding: 28px 16px 64px; }
h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 6px; }
h2 { font-size: 19px; margin: 28px 0 10px; letter-spacing: -.01em; }
p { margin: 0 0 12px; }
.suave { color: var(--suave); font-size: 15px; }
.cartao {
  background: var(--cartao); border-radius: 18px; padding: 16px; margin: 0 0 12px;
  animation: entra .7s var(--spring) both;
}
@keyframes entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.var { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.var b { font-size: 17px; }
.var span { grid-column: 1 / -1; color: var(--suave); font-size: 14px; margin-top: -4px; }
button, .botao {
  appearance: none; border: 0; border-radius: 980px; background: var(--botao); color: var(--botao-texto);
  font: 600 15px/1 inherit; font-family: inherit; padding: 11px 16px; cursor: pointer; text-decoration: none;
  display: inline-block; transition: transform .2s var(--spring);
}
button:active { transform: scale(.95); }
button.leve { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); }
button:disabled { opacity: .4; }
.grande { width: 100%; padding: 18px; font-size: 18px; margin: 8px 0; }
.video {
  aspect-ratio: 9 / 12; border-radius: 18px; background: linear-gradient(160deg, #2c2c2e, #1d1d1f);
  color: #f5f5f7; display: grid; place-items: center; text-align: center; padding: 20px; margin: 12px 0;
}
.passo { font-size: 20px; font-weight: 600; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { color: var(--suave); font-weight: 500; }
.ok { color: var(--ok); font-weight: 600; }
.erro { color: var(--erro); font-weight: 600; }
#log { font: 13px/1.5 ui-monospace, Menlo, monospace; color: var(--suave); padding-left: 18px; }
details summary { cursor: pointer; color: var(--suave); font-size: 13px; }
details pre { white-space: pre-wrap; font-size: 12px; color: var(--suave); margin: 6px 0 0; }