:root {
  color-scheme: light;
}

:root[data-theme="noir"] {
  color-scheme: dark;
}

body {
  background: #f1f0f4;
}

body.html-app-shell {
  margin: 0;
  overflow-x: hidden;
}

:root[data-theme="noir"] body {
  background: #1d1727;
}

.celestial-boot {
  --cb-brand: #8B7EC8;
  --cb-brand-light: #B8AEE0;
  --cb-brand-dark: #6B5EAE;
  --cb-platinum: #A098C4;
  --cb-text-muted: #9B95AE;
  --cb-bg:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(139, 126, 200, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(184, 174, 224, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 20% 70%, rgba(107, 94, 174, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #F1F0F4 0%, #EDECF1 100%);
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  gap: 18px;
  align-content: center;
  background: var(--cb-bg);
  color: var(--cb-brand-dark);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  transition: opacity 0.35s ease-out;
}

:root[data-theme="noir"] .celestial-boot {
  --cb-brand: oklch(66% 0.13 295);
  --cb-brand-light: oklch(91% 0.038 302);
  --cb-brand-dark: oklch(84% 0.055 303);
  --cb-platinum: oklch(84% 0.055 303);
  --cb-text-muted: oklch(62% 0.044 296);
  --cb-bg:
    radial-gradient(circle at 18% 12%, color-mix(in oklch, var(--cb-brand) 20%, transparent) 0 22%, transparent 46%),
    radial-gradient(circle at 86% 6%, color-mix(in oklch, var(--cb-platinum) 16%, transparent) 0 18%, transparent 42%),
    linear-gradient(180deg, oklch(16% 0.034 292), oklch(12% 0.028 292));
}

.celestial-boot.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.celestial-boot__logo {
  color: var(--cb-brand-dark);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 5px;
}

.celestial-boot__constellation {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  color: var(--cb-brand-dark);
  filter: drop-shadow(0 16px 32px color-mix(in oklch, var(--cb-brand) 22%, transparent));
}

.celestial-boot__constellation::after {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--cb-brand-light) 22%, transparent);
  filter: blur(10px);
  animation: celestialBootCoreGlow 2.4s ease-in-out infinite;
}

.celestial-boot__orbit {
  position: absolute;
  border: 1px solid color-mix(in oklch, var(--cb-brand) 28%, transparent);
  border-radius: 999px;
  pointer-events: none;
}

.celestial-boot__orbit--outer {
  inset: 0;
  border-top-color: color-mix(in oklch, var(--cb-brand-dark) 64%, transparent);
  border-right-color: transparent;
  animation: celestialBootOrbitTurn 4.8s linear infinite;
}

.celestial-boot__orbit--inner {
  inset: 17px;
  border-style: dashed;
  border-color: color-mix(in oklch, var(--cb-platinum) 42%, transparent);
  animation: celestialBootOrbitTurn 6.6s linear infinite reverse;
}

.celestial-boot__stars {
  position: relative;
  z-index: 1;
  display: block;
  width: 74px;
  height: 74px;
  overflow: visible;
  transform-origin: 50% 50%;
  animation: celestialBootConstellationTurn 5.8s linear infinite;
}

.celestial-boot__path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.celestial-boot__path--main {
  stroke-width: 1.7;
  stroke-dasharray: 190;
  animation: celestialBootStarTrace 2.8s ease-in-out infinite;
}

.celestial-boot__path--aux {
  stroke-width: 1.1;
  stroke-dasharray: 4 8;
  opacity: 0.46;
  animation: celestialBootAuxTrace 2.8s ease-in-out infinite;
}

.celestial-boot__stars circle {
  fill: color-mix(in oklch, var(--cb-brand-light) 72%, white 18%);
  stroke: color-mix(in oklch, var(--cb-brand-dark) 44%, transparent);
  stroke-width: 0.8;
  transform-box: fill-box;
  transform-origin: center;
  animation: celestialBootStarPulse 1.8s ease-in-out infinite;
}

.celestial-boot__stars circle:nth-of-type(2) { animation-delay: 0.12s; }
.celestial-boot__stars circle:nth-of-type(3) { animation-delay: 0.26s; }
.celestial-boot__stars circle:nth-of-type(4) { animation-delay: 0.4s; }
.celestial-boot__stars circle:nth-of-type(5) { animation-delay: 0.54s; }
.celestial-boot__stars circle:nth-of-type(6) { animation-delay: 0.68s; }
.celestial-boot__stars circle:nth-of-type(7) {
  fill: color-mix(in oklch, var(--cb-brand-dark) 74%, white 16%);
  animation-delay: 0.82s;
}

.celestial-boot__caption {
  color: var(--cb-text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
}

:root[data-theme="noir"] .celestial-boot__constellation {
  color: color-mix(in oklch, var(--cb-brand-light) 88%, white 8%);
  filter: drop-shadow(0 18px 36px color-mix(in oklch, var(--cb-brand) 30%, transparent));
}

:root[data-theme="noir"] .celestial-boot__stars circle {
  fill: color-mix(in oklch, var(--cb-brand-light) 78%, white 10%);
  stroke: color-mix(in oklch, var(--cb-platinum) 48%, transparent);
}

.html-noscript-fallback {
  box-sizing: border-box;
  width: min(760px, calc(100% - 36px));
  margin: 0 auto;
  padding: 56px 0;
  color: #3b3347;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  line-height: 1.75;
}

:root[data-theme="noir"] .html-noscript-fallback {
  color: #eee7f7;
}

@keyframes celestialBootOrbitTurn {
  to { transform: rotate(360deg); }
}

@keyframes celestialBootConstellationTurn {
  0% { transform: rotate(0deg) scale(0.98); }
  50% { transform: rotate(180deg) scale(1.03); }
  100% { transform: rotate(360deg) scale(0.98); }
}

@keyframes celestialBootStarTrace {
  0% { stroke-dashoffset: 190; opacity: 0.36; }
  46% { stroke-dashoffset: 0; opacity: 0.96; }
  100% { stroke-dashoffset: -190; opacity: 0.44; }
}

@keyframes celestialBootAuxTrace {
  0%, 100% { stroke-dashoffset: 24; opacity: 0.28; }
  50% { stroke-dashoffset: 0; opacity: 0.54; }
}

@keyframes celestialBootStarPulse {
  0%, 100% { transform: scale(0.86); opacity: 0.72; }
  50% { transform: scale(1.18); opacity: 1; }
}

@keyframes celestialBootCoreGlow {
  0%, 100% { opacity: 0.28; transform: scale(0.88); }
  50% { opacity: 0.58; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .celestial-boot__orbit,
  .celestial-boot__stars,
  .celestial-boot__path,
  .celestial-boot__stars circle,
  .celestial-boot__constellation::after {
    animation: none;
  }

  .celestial-boot {
    transition: none;
  }
}