body:has([data-recovery]) {
  margin: 0;
}
[data-recovery] {
  --recovery-bg: #f4f6f3;
  --recovery-ink: #10221d;
  --recovery-muted: #45554f;
  --recovery-accent: #0c604f;
  box-sizing: border-box;
  min-height: 100svh;
  padding: max(32px, 14svh) 24px 48px;
  background: var(--recovery-bg);
  color: var(--recovery-ink);
  font:
    17px/1.6 system-ui,
    sans-serif;
}
[data-recovery] > * {
  display: block;
  max-width: 420px;
  margin-inline: auto;
}
[data-recovery] h1 {
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-block: 24px 12px;
}
[data-recovery] p {
  color: var(--recovery-muted);
}
[data-recovery] a {
  box-sizing: border-box;
  margin-top: 24px;
  padding: 12px 18px;
  border: 2px solid currentColor;
  border-radius: 8px;
  color: var(--recovery-accent);
  font-weight: 600;
}
[data-recovery] a:focus-visible {
  outline: 3px solid var(--recovery-accent);
  outline-offset: 4px;
}
@media (prefers-color-scheme: dark) {
  [data-recovery] {
    --recovery-bg: #0b1311;
    --recovery-ink: #e9f0ec;
    --recovery-muted: #b1c0b9;
    --recovery-accent: #74d6ae;
  }
}