/* ---------- progress ---------- */

.prog {
  display: none;
  gap: 8px;
  flex-direction: column;
  margin: 16px 0 0;
}
.prog.on { display: flex; }

.prog-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--faint);
}
.prog-step::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  flex: 0 0 auto;
}
.prog-step.done { color: var(--ink-2); }
.prog-step.done::before { background: var(--brand); }
.prog-step.active { color: var(--brand-strong); font-weight: 600; }
.prog-step.active::before {
  background: var(--brand);
  animation: pulse 1.1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--brand-ring); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  body { font-size: 14.5px; }

  .wrap {
    border-radius: 20px;
    margin: 10px 10px 34px;
    padding: 0 18px 56px;
  }

  .poc-bar, header.site { padding-left: 18px; padding-right: 18px; }
  header.site .inner { flex-wrap: wrap; gap: 10px; }
  .search { min-width: 0; flex: 1 1 140px; }

  .index-hero { padding: 34px 0 22px; }
  .index-hero h1 { font-size: 28px; }
  h1 { font-size: 26px; }
  h2 { font-size: 18px; margin-top: 28px; }

  .dbar { flex-wrap: wrap; gap: 10px; }
  .ddesc { display: none; }
  .gh-link { font-size: 19px; }

  .dl-hero { padding: 20px 18px; border-radius: 16px; }
  .btn-dl { width: 100%; justify-content: center; padding: 15px 20px; }

  .repo-desc { display: none; }
  .steps li { padding-left: 30px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn-dl:hover { transform: none; }
}