[data-role="checklist"] { padding: 0; list-style: none; margin: 0 0 24px; }
[data-role="checklist"] li { position: relative; padding: 24px 0 24px 40px; border-top: 1px solid var(--line); }
[data-role="checklist"] li::before { content: ""; position: absolute; top: 30px; left: 0; width: 20px; height: 20px; border: 2px solid var(--blue); border-radius: 2px; }
[data-role="checklist"] h3 { margin-bottom: 16px; max-width: 36ch; }
[data-role="checklist"] p { max-width: 64ch; }
@media (max-width: 800px) {
  [data-role="checklist"] li { padding-left: 32px; }
  [data-role="checklist"] h3 { max-width: 30ch; }
}
@media (forced-colors: active) {
  [data-role="checklist"] li::before { border-color: CanvasText; }
}