:root {
  color-scheme: dark;
  background: #0d0c0a;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0d0c0a;
}

.observatory-frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0d0c0a;
}

.shell-loader {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(219, 142, 115, 0.08), transparent 24%),
    #0d0c0a;
  animation: shell-loader-out 420ms 2.4s ease forwards;
}

.shell-loader-mark {
  color: #f0ede6;
  font: 300 42px/1 Georgia, serif;
}

.shell-loader-mark span { color: #db8e73; }

.shell-loader-label {
  color: #96917f;
  font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.shell-loader-line {
  width: min(190px, 52vw);
  height: 1px;
  overflow: hidden;
  background: rgba(240, 237, 230, 0.12);
}

.shell-loader-line::after {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  background: #db8e73;
  animation: shell-loader-line 1.35s ease-in-out infinite;
}

@keyframes shell-loader-line {
  from { transform: translateX(-110%); }
  to { transform: translateX(340%); }
}

@keyframes shell-loader-out {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .shell-loader-line::after { animation: none; width: 100%; opacity: 0.45; }
  .shell-loader { animation-duration: 1ms; }
}

.fallback {
  box-sizing: border-box;
  min-height: 100%;
  display: grid;
  place-content: center;
  gap: 1rem;
  padding: 2rem;
  color: #f0ede6;
  font: 16px/1.5 system-ui, sans-serif;
  text-align: center;
}

.fallback h1,
.fallback p {
  margin: 0;
}

.fallback a {
  color: #db8e73;
}