:root {
  color-scheme: light dark;
  --boot-bg: #e3e8ee;
  --boot-text: #11161d;
  --boot-text-muted: rgba(17, 22, 29, 0.66);
  --boot-font-sans: "Inter", system-ui, sans-serif;
  --boot-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --boot-bg: #000000;
    --boot-text: #e3e8ee;
    --boot-text-muted: rgba(227, 232, 238, 0.68);
  }
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--boot-bg);
  color: var(--boot-text);
  font-family: var(--boot-font-sans);
}

html:not(.site-ready) .page-shell {
  opacity: 0;
  visibility: hidden;
  animation: boot-shell-reveal 0s linear 5s forwards;
}

html.site-ready .page-shell {
  opacity: 1;
  visibility: visible;
}

.page-shell {
  min-height: 100vh;
  transition: opacity 0.18s ease;
}

html:not(.site-ready)[data-color-scheme="light"],
html:not(.site-ready)[data-color-scheme="light"] body,
html:not(.site-ready)[data-color-scheme="adopt"],
html:not(.site-ready)[data-color-scheme="adopt"] body {
  background: #e3e8ee;
}

html:not(.site-ready)[data-color-scheme="dark"],
html:not(.site-ready)[data-color-scheme="dark"] body {
  background: #000000;
}

@media (prefers-color-scheme: dark) {
  html:not(.site-ready)[data-color-scheme="adopt"],
  html:not(.site-ready)[data-color-scheme="adopt"] body {
    background: #000000;
  }
}

@keyframes boot-shell-reveal {
  to {
    opacity: 1;
    visibility: visible;
  }
}