:root {
  --fundo: #f6f5f2; --superficie: #ffffff; --borda: #e2dfd8; --texto: #1d1c1a; --suave: #6b675f;
  --destaque: #d9570f; --destaque-texto: #ffffff; --destaque-fundo: #fdebe0;
  --aviso: #7a4f00; --aviso-fundo: #fff3d6; --erro: #b3261e; --raio: 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #141413; --superficie: #1f1e1c; --borda: #34322e; --texto: #f2f0eb; --suave: #a29d94;
    --destaque: #ff8a3d; --destaque-texto: #1a0f07; --destaque-fundo: #3a2416;
    --aviso: #ffd27a; --aviso-fundo: #3a2e12; --erro: #ff8a80;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); padding-inline: 16px; }
.topo, .grade, .rodape { max-width: 1100px; margin-inline: auto; }
.topo { padding-block: 28px 12px; }
.topo h1 { margin: 0 0 6px; font-size: 1.8rem; }
.topo p { margin: 0; color: var(--suave); }
.topo .privacidade { margin-top: 6px; font-size: .85rem; }
.grade { display: grid; gap: 16px; padding-bottom: 180px; }
@media (min-width: 900px) {
  .grade { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; padding-bottom: 32px; }
  .lateral { position: sticky; top: 16px; }
}
.passos, .lateral { display: grid; gap: 16px; min-width: 0; }
.passo, .painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
h2 span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--destaque); color: var(--destaque-texto); font-size: .8rem; }
.soltar { position: relative; display: grid; gap: 4px; place-items: center; text-align: center; padding: 28px 12px; border: 2px dashed var(--borda); border-radius: var(--raio); cursor: pointer; }
.soltar:hover, .soltar.ativo { border-color: var(--destaque); background: var(--destaque-fundo); }
.soltar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.soltar span, .dica { color: var(--suave); font-size: .9rem; }
.info { margin: 12px 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.opcoes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.opcao { text-align: left; font: inherit; color: inherit; background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; gap: 4px; align-content: start; }
.marca { grid-column: 1 / -1; margin: 8px 0 0; font-size: .85rem; color: var(--suave); }
.opcao small { color: var(--suave); font-size: .8rem; line-height: 1.3; }
.opcao[aria-pressed="true"] { border-color: var(--destaque); background: var(--destaque-fundo); box-shadow: inset 0 0 0 1px var(--destaque); }
.opcao:disabled { opacity: .45; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
td { padding: 6px 0; border-bottom: 1px solid var(--borda); vertical-align: top; }
td:last-child { text-align: right; padding-left: 8px; }
.antes { color: var(--suave); }
.avisos { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.avisos li { background: var(--aviso-fundo); color: var(--aviso); border-radius: 8px; padding: 8px 10px; font-size: .88rem; }
#gerar { width: 100%; font: inherit; font-weight: 600; padding: 12px; border: 0; border-radius: 10px; background: var(--destaque); color: var(--destaque-texto); cursor: pointer; }
#gerar:disabled { opacity: .45; cursor: not-allowed; }
.pronto { color: var(--suave); font-size: .88rem; margin: 8px 0 0; }
.erro { color: var(--erro); font-size: .9rem; margin: 8px 0 0; }
.gerar .dica { margin: 8px 0 0; }
.rodape { padding-block: 16px 32px; font-size: .85rem; }
.rodape a { color: var(--suave); }
@media (max-width: 899px) {
  .gerar { position: fixed; left: 16px; right: 16px; bottom: 12px; z-index: 5; box-shadow: 0 -6px 18px rgb(0 0 0 / .15); }
}