* { box-sizing: border-box; }
:root { color-scheme: light; }
body { margin: 0; background: #edf5ef; color: #20362f;
  font: 18px/1.55 "Segoe UI", sans-serif; }
main { width: min(100% - 32px, 560px); margin: 40px auto;
  background: #fff; padding: 30px; border-top: 6px solid #20362f; }
h1 { font: 700 42px/1.1 Georgia, serif; margin: 0 0 12px; }
.intro { color: #52645d; margin: 0 0 24px; }
.progress { margin: 0 0 20px; font-size: 24px; font-weight: 700; }
fieldset { padding: 0; border: 0; margin: 0 0 24px; min-width: 0; }
legend { font-weight: 600; margin-bottom: 8px; }
.task { display: flex; align-items: center; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid #ccd8d1; cursor: pointer; }
input { width: 24px; height: 24px; flex-shrink: 0; accent-color: #174f87; }
input:checked + span { text-decoration: line-through; color: #52645d; }
input:focus-visible, button:focus-visible {
  outline: 3px solid #174f87; outline-offset: 4px;
}
button { border: 0; background: #174f87; color: white;
  font: 600 17px/1.4 "Segoe UI", sans-serif; padding: 13px 18px;
  min-height: 48px; cursor: pointer; }
button:hover { background: #113e6a; }
.note, .status { font-size: 15px; color: #52645d; }
.status { padding-top: 12px; border-top: 1px solid #ccd8d1; }
.warning { color: #813813; }
@media (max-width: 420px) {
  main { margin: 16px auto; padding: 22px; }
  h1 { font-size: 36px; }
}