:root {
  --vp-header-height: 48px;
  --vp-panel: var(--ui-surface);
  --vp-panel-overlay: var(--ui-surface-overlay);
  --vp-ink: var(--tone-heading);
  --vp-muted: var(--tone-caption);
  --vp-line: var(--ui-border-subtle);
  --vp-accent: var(--tone-text);
  --vp-accent-bg: var(--tone-soft);
}

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora::before,
.aurora::after {
  position: absolute;
  border-radius: 999px;
  filter: blur(54px);
  opacity: 0.42;
  animation: element-float 9s ease-in-out infinite;
  content: '';
}

.aurora::before {
  top: 6%;
  left: 4%;
  width: 18rem;
  height: 18rem;
  background: color-mix(in srgb, var(--tone-solid) 22%, transparent);
}

.aurora::after {
  right: 8%;
  bottom: 7%;
  width: 20rem;
  height: 20rem;
  background: color-mix(in srgb, var(--state-warning) 18%, transparent);
  animation-delay: -3.6s;
}

@keyframes element-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}