:root {
  --sg-font-body: var(--font-body, "Manrope", Arial, sans-serif);
  --sg-background: var(--color-background, #f5f5f5);
  --sg-surface: var(--color-surface, #ffffff);
  --sg-border: var(--color-border, #d6d8e1);
  --sg-text: var(--color-text, #0e1f2f);
  --sg-muted: var(--color-text-muted, #7c809b);
  --sg-accent: var(--color-accent, #d3630d);
  --sg-accent-strong: var(--color-accent-strong, #721121);
  --sg-shadow-soft: 0 20px 40px rgba(14, 31, 47, 0.12);
  --sg-shadow-medium: 0 26px 56px rgba(14, 31, 47, 0.15);
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body.scrape-guard-challenge-page {
  display: block;
  min-height: 100vh;
  background: var(--sg-background);
  color: var(--sg-text);
  font-family: var(--sg-font-body);
}

.scrape-guard-challenge {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
}

.scrape-guard-challenge__panel {
  width: min(34rem, 100%);
  padding: 2rem;
  border: 1px solid var(--sg-border);
  border-radius: 1.4rem;
  background: color-mix(in srgb, var(--sg-surface) 92%, var(--sg-background) 8%);
  box-shadow: var(--sg-shadow-medium);
}

.scrape-guard-challenge__eyebrow,
.scrape-guard-challenge__title {
  margin: 0;
}

.scrape-guard-challenge__eyebrow {
  color: var(--sg-accent);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.scrape-guard-challenge__title {
  margin-top: 0.55rem;
  font-size: clamp(2rem, 8vw, 3.8rem);
  line-height: 0.95;
}

.scrape-guard-challenge__summary,
.scrape-guard-challenge__error {
  margin: 0.9rem 0 0;
  color: var(--sg-muted);
  line-height: 1.65;
}

.scrape-guard-challenge__progress {
  height: 0.52rem;
  margin-top: 1.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sg-muted) 14%, transparent);
  overflow: hidden;
}

.scrape-guard-challenge__progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--sg-accent);
  animation: scrape-guard-progress 1.2s cubic-bezier(.22,1,.36,1) infinite;
}

.scrape-guard-challenge[data-challenge-state="cleared"] .scrape-guard-challenge__progress span {
  width: 100%;
  animation: none;
}

.scrape-guard-challenge[data-challenge-state="error"] .scrape-guard-challenge__progress span {
  background: var(--sg-accent-strong);
  animation: none;
}

.scrape-guard-challenge__turnstile {
  min-height: 1px;
}

@keyframes scrape-guard-progress {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(250%);
  }
}