body:has(#bootstrap-recovery, #bootstrap-noscript) {
  margin: 0;
  background: #f7f8fb;
}

#root:has(> #bootstrap-recovery, > noscript > #bootstrap-noscript) {
  display: flow-root;
  min-height: 100vh;
  background: #f7f8fb;
}

#bootstrap-recovery, #bootstrap-noscript {
  box-sizing: border-box;
  max-width: 34rem;
  margin: 12vh auto;
  padding: 2rem;
  font: 1rem/1.6 system-ui, sans-serif;
  color: #202531;
  background: #f7f8fb;
  border: 1px solid #d8dce7;
  border-radius: 1rem;
}

#bootstrap-recovery h1, #bootstrap-noscript h1 { margin-top: 0; font-size: 1.5rem; }
#bootstrap-recovery button {
  padding: 0.5em 0.8em;
  font: inherit;
  color: #3730a3;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0.4rem;
  cursor: pointer;
}
#bootstrap-recovery button:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

@media (prefers-color-scheme: dark) {
  body:has(#bootstrap-recovery, #bootstrap-noscript), #root:has(> #bootstrap-recovery, > noscript > #bootstrap-noscript) { background: #07080b; }
  #bootstrap-recovery, #bootstrap-noscript { color: #e9ecf5; background: #10131b; border-color: #353b4d; }
  #bootstrap-recovery button { color: #b8b4ff; }
}

/* Successful startup replaces this before the delayed recovery becomes visible. */
#bootstrap-recovery {
  visibility: hidden;
  animation: bootstrap-reveal 0s 12s forwards;
}

#bootstrap-recovery.bootstrap-failed {
  visibility: visible;
  animation: none;
}

#root:has(#bootstrap-noscript) > #bootstrap-recovery { display: none; }

@keyframes bootstrap-reveal { to { visibility: visible; } }