*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000;color:#fff;font-family:Roboto,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:560px;margin:0 auto;padding:12px 10px 40px}
.step{font-size:15px;margin-bottom:4px}
.bar{height:30px;background:#eee;border-radius:3px;overflow:hidden}
.bar span{display:flex;align-items:center;justify-content:flex-end;height:100%;background:#008a1d;color:#fff;font-size:11px;font-weight:700;padding-right:12px}
h1{font-size:21px;line-height:1.2;font-weight:700;text-align:center;margin:20px 6px 16px}
.img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;box-shadow:0 0 16px rgba(255,255,255,.35)}
h2{font-size:26px;line-height:1.2;font-weight:700;text-align:center;margin:24px 6px 22px}
.btns{display:flex;flex-direction:column;align-items:center;gap:20px}
.b{display:inline-block;min-width:88px;padding:12px 24px;border-radius:3px;font-size:18px;font-weight:700;color:#fff;text-decoration:none;text-align:center}
.sim{background:#007f15}.nao{background:#878d89}
/* tela "parabéns" (q4) */
html:has(body.ok),body.ok{background:#f8f8f8;color:#000}
.ok .top{background:#007f15;color:#fff;font-size:23px;font-weight:700;text-align:center;line-height:1.2;padding:10px 12px}
.ok h2{font-size:25px;margin:22px 14px}
.ok .b{display:block;margin:0 10px;font-size:21px;font-weight:600;line-height:1.25;padding:12px;border-radius:3px;background:#007f15}