:root{
  --roxo:#7C3AED; --roxo-escuro:#5B21B6; --ink:#1F2233; --cinza:#6B7280;
  --fundo:#F7F7FB; --card:#FFFFFF; --borda:#E5E7EB; --ok:#059669; --alerta:#B45309;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--fundo);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--roxo);text-decoration:none}
a:hover{text-decoration:underline}
.topo{background:linear-gradient(135deg,var(--roxo-escuro),var(--roxo));color:#fff;padding:16px 20px}
.topo .marca{font-weight:800;font-size:1.05rem;letter-spacing:.3px}
.topo .marca a{color:#fff;text-decoration:none}
.hero{background:linear-gradient(135deg,var(--roxo-escuro),var(--roxo));color:#fff;padding:36px 20px 44px;text-align:center}
.hero h1{font-size:1.6rem;font-weight:800;margin-bottom:8px}
.hero p{opacity:.92;max-width:560px;margin:0 auto}
.busca{max-width:560px;margin:20px auto 0;position:relative}
.busca input{width:100%;padding:14px 18px;border-radius:12px;border:0;font-size:1rem;outline:none;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.busca .resultados{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.22);text-align:left;overflow:hidden;z-index:20}
.busca .resultados a{display:block;padding:12px 16px;color:var(--ink);border-bottom:1px solid var(--borda)}
.busca .resultados a:last-child{border-bottom:0}
.busca .resultados a:hover{background:#F3F0FF;text-decoration:none}
.busca .resultados small{display:block;color:var(--cinza)}
main{max-width:860px;margin:0 auto;padding:24px 20px 60px}
.grade{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
@media(min-width:640px){.grade{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grade{grid-template-columns:1fr 1fr 1fr}}
.cartao{background:var(--card);border:1px solid var(--borda);border-radius:14px;padding:18px;display:block;color:var(--ink);transition:box-shadow .15s, transform .15s}
.cartao:hover{box-shadow:0 8px 22px rgba(124,58,237,.14);transform:translateY(-2px);text-decoration:none}
.cartao .emoji{font-size:1.6rem}
.cartao h3{margin:8px 0 4px;font-size:1.02rem}
.cartao p{color:var(--cinza);font-size:.9rem}
article h1{font-size:1.45rem;margin:10px 0 6px}
article .sub{color:var(--cinza);margin-bottom:18px}
article h2{font-size:1.15rem;margin:26px 0 10px;padding-top:8px}
article ol,article ul{padding-left:22px;margin:10px 0}
article li{margin:6px 0}
.caixa{background:var(--card);border:1px solid var(--borda);border-radius:14px;padding:18px 20px;margin:14px 0}
.caixa.dica{border-left:4px solid var(--ok)}
.caixa.atencao{border-left:4px solid var(--alerta)}
.codigo{display:inline-block;background:#F3F0FF;border:1px solid #DDD0FF;color:var(--roxo-escuro);font-weight:700;padding:2px 10px;border-radius:8px;font-family:ui-monospace,Consolas,monospace}
.tabela{width:100%;border-collapse:collapse;margin:12px 0;font-size:.92rem;background:var(--card);border-radius:12px;overflow:hidden}
.tabela th,.tabela td{border:1px solid var(--borda);padding:10px 12px;text-align:left;vertical-align:top}
.tabela th{background:#F3F0FF}
.migalha{font-size:.85rem;color:var(--cinza);margin:14px 0 4px}
.botao{display:inline-block;background:var(--roxo);color:#fff;font-weight:700;padding:14px 26px;border-radius:12px;font-size:1.05rem}
.botao:hover{background:var(--roxo-escuro);text-decoration:none;color:#fff}
.hash{word-break:break-all;font-family:ui-monospace,Consolas,monospace;font-size:.8rem;background:#F3F4F6;border:1px solid var(--borda);border-radius:8px;padding:10px 12px;display:block;margin:8px 0}
footer{border-top:1px solid var(--borda);padding:26px 20px;text-align:center;color:var(--cinza);font-size:.88rem}
footer a{color:var(--roxo)}
.voltar{display:inline-block;margin-top:26px}