skills/ga2-quem-faz-o-que/assets/template-artefato.html

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{TITULO}}</title>
  <style>
    :root { color-scheme: light dark; --paper:#fafaf8; --panel:#fff; --ink:#1f2937;
      --muted:#576270; --line:#dfe3e8; --brand:#3d9b9d; --risk:#c2560a; --open:#6b7280; }
    @media (prefers-color-scheme:dark) { :root { --paper:#111827; --panel:#1f2937;
      --ink:#f3f4f6; --muted:#c7ceda; --line:#3b4757; --brand:#52c7cb;
      --risk:#fb923c; --open:#a6aebb; } }
    * { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink);
      font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
    main { width:min(1040px,calc(100% - 32px)); margin:auto; padding:56px 0 80px; }
    header,section { padding:28px 0; border-bottom:1px solid var(--line); }
    h1 { max-width:19ch; font-size:clamp(2rem,6vw,3.4rem); line-height:1.05; }
    h2 { font-size:1.35rem; } p,li { max-width:68ch; } .lead { color:var(--muted);
      font-size:1.18rem; } .visual { margin-top:20px; padding:20px; background:var(--panel);
      border:1px solid var(--line); border-radius:12px; overflow:auto; }
    table { width:100%; border-collapse:collapse; } th,td { padding:10px 12px;
      text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
    .seal { display:inline-block; padding:2px 7px; border:1px solid currentColor;
      border-radius:99px; font-size:.75rem; } .measured { color:var(--brand); }
    .estimated { color:var(--risk); } .open { color:var(--open); }
    code,pre { white-space:pre-wrap; overflow-wrap:anywhere; }
  </style>
</head>
<body>
<main>
  <header><h1>{{PERGUNTA}}</h1><p class="lead">{{LEITURA_DIRETA}}</p></header>
  <section><h2>Visual</h2><div class="visual">{{VISUAL_PRINCIPAL}}</div></section>
  <section><h2>Prova</h2>{{PROVAS_E_FONTES}}</section>
  <section><h2>Decisão ou próximo passo</h2>{{PROXIMO_PASSO}}</section>
</main>
</body>
</html>