:root {
  color-scheme: light;
  font-family: Arial, "Noto Sans Georgian", sans-serif;
  color: #171717;
  background: #fff;
}

* { box-sizing: border-box; }

body { margin: 0; background: #fff; }

main { width: min(100% - 32px, 820px); margin: 0 auto; padding: 48px 0 80px; }

h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.25; margin: 0 0 12px; }
h2 { font-size: 1.15rem; line-height: 1.4; margin: 0; }
p { line-height: 1.55; }

.actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 28px; }
.button { appearance: none; border: 1px solid #202020; border-radius: 4px; padding: 11px 19px; background: #202020; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.button:hover { background: #444; }
.button:focus-visible, input:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.button-secondary { background: #fff; color: #202020; }
.button-secondary:hover { background: #f3f3f3; }
.progress { margin: 0; color: #555; }

.stage { border-top: 1px solid #ddd; padding: 16px 0; }
.stage:last-child { border-bottom: 1px solid #ddd; }
.stage-header { display: flex; align-items: flex-start; gap: 16px; }
.stage-header h2 { flex: 1; }
.stage-header h2 label { display: flex; align-items: flex-start; gap: 13px; cursor: pointer; }
.stage-header h2 input { width: 20px; height: 20px; flex: 0 0 auto; margin: 2px 0 0; accent-color: #202020; cursor: pointer; }
.details-button { border: 0; background: none; padding: 3px 0; color: #333; font: inherit; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.details-button:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.checklist { list-style: none; margin: 10px 0 0; padding: 0; }
.item { border-top: 1px solid #eee; }
.item label { display: flex; gap: 13px; align-items: flex-start; padding: 13px 3px; cursor: pointer; line-height: 1.5; }
.item input { width: 19px; height: 19px; flex: 0 0 auto; margin: 2px 0 0; accent-color: #202020; cursor: pointer; }
.item input:checked + span { color: #666; text-decoration: line-through; }

[hidden] { display: none !important; }

@media (max-width: 480px) {
  main { padding-top: 30px; }
  .actions { align-items: stretch; }
  .actions .button { width: 100%; }
}