.recovery-screen {
  --recovery-paper: #e6e6e3;
  --recovery-ink: #252523;
  --recovery-text: #4b4b45;
  --recovery-line: #a9a9a1;
  --recovery-surface: #f1f1ee;
  box-sizing: border-box;
  min-height: 100dvh;
  padding: clamp(1.25rem, 5vw, 4rem);
  background: var(--paper, var(--recovery-paper));
  color: var(--text, var(--recovery-text));
  font-family: var(--font-sans, Geomanist, system-ui, sans-serif);
  line-height: 1.6;
}
:root[data-theme="dark"] .recovery-screen {
  --recovery-paper: #141413;
  --recovery-ink: #f5f5ee;
  --recovery-text: #deded4;
  --recovery-line: #7d7d72;
  --recovery-surface: #2d2d2a;
}
body:has(#startup-recovery) { margin: 0; }
.recovery-brand { display: inline-flex; padding: 1rem 1.25rem; background: #252524; border-radius: 8px; }
.recovery-brand img { display: block; max-width: 100%; height: auto; }
.recovery { max-width: 44rem; padding-block: clamp(2.5rem, 8vh, 6rem); margin-inline: auto; overflow-wrap: anywhere; }
.recovery-screen .recovery { margin-block-start: 3vh; }
.recovery__title { margin: 0; color: var(--ink, var(--recovery-ink)); font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; max-width: 24ch; }
.recovery__title:focus { outline: none; }
.recovery__message { font-size: 1rem; line-height: 1.7; margin: 1.25rem 0 0; max-width: 58ch; }
.recovery__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 2rem; }
.recovery__actions[hidden] { display: none; }
.recovery__actions form { margin: 0; }
.recovery__button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .7rem 1.1rem; border: 1px solid var(--ink, var(--recovery-ink)); border-radius: 8px; font: inherit; font-size: .9375rem; font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer; background: var(--ink, var(--recovery-ink)); color: var(--paper, var(--recovery-paper)); }
.recovery__button--quiet { background: var(--surface, var(--recovery-surface)); color: var(--ink, var(--recovery-ink)); border-color: var(--line-strong, var(--recovery-line)); }
.recovery__button:hover { filter: brightness(.9); }
.recovery__button:focus-visible, .recovery__details summary:focus-visible, .recovery-brand:focus-visible { outline: 2px solid var(--focus, var(--recovery-ink)); outline-offset: 4px; }
.recovery__note { font-size: .875rem; color: var(--muted, var(--recovery-text)); margin: 1rem 0 0; max-width: 60ch; }
.recovery__details { margin-block-start: 2.5rem; border-top: 1px solid var(--line, var(--recovery-line)); padding-block-start: 1rem; font-size: .875rem; color: var(--muted, var(--recovery-text)); }
.recovery__details summary { cursor: pointer; color: var(--ink, var(--recovery-ink)); width: fit-content; padding-block: .5rem; }
.recovery__details p { margin: .75rem 0 1rem; }
.recovery__details dl { margin: 0; display: grid; gap: .5rem; }
.recovery__details dl > div { display: flex; gap: .5rem 1.5rem; flex-wrap: wrap; }
.recovery__details dt { min-width: 9rem; }
.recovery__details dd { margin: 0; color: var(--ink, var(--recovery-ink)); }
.read-error { display: grid; gap: .75rem; }
.read-error .recovery__actions { margin-block-start: .25rem; }
.read-error .recovery__details { margin-block-start: .25rem; }
@media (max-width: 38rem) { .recovery { padding-block: 2.5rem; } .recovery__actions { align-items: stretch; } }