#lab-root {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Mono", "Space Grotesk", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-text-bright);
  background: radial-gradient(
      circle at 20% 20%,
      var(--color-night-3) 0%,
      var(--color-night-2) 45%,
      var(--color-night-0) 100%
    );
  overflow: hidden;
  --star-speed-base-1: 95s;
  --star-speed-base-2: 70s;
  --star-speed-base-3: 48s;
  --star-speed-factor: 1;
  --star-opacity-base: 0.55;
  --star-opacity-boost: 0;
}

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

#stars,
#stars::after,
#stars2,
#stars2::after,
#stars3,
#stars3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}

#stars {
  animation: star-scroll calc(var(--star-speed-base-1) / var(--star-speed-factor))
      linear infinite;
  opacity: calc((var(--star-opacity-base) + var(--star-opacity-boost)) * 1.4);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
  transition: opacity 240ms ease;
  box-shadow: 2vw 3vh 0 #fff, 12vw 8vh 0 #d7dfff, 22vw 12vh 0 #c8f7ff,
    32vw 5vh 0 #c4f4ff, 42vw 18vh 0 #dbe7ff, 52vw 1vh 0 #c9e8ff,
    62vw 14vh 0 #fff3ff, 72vw 7vh 0 #f5d9ff, 82vw 17vh 0 #e9f5ff,
    92vw 4vh 0 #f8f9ff, 5vw 20vh 0 #fffcff, 15vw 27vh 0 #d8e5ff,
    25vw 31vh 0 #fff5fb, 35vw 24vh 0 #c8d1ff, 45vw 35vh 0 #fadfff,
    55vw 28vh 0 #e5f0ff, 65vw 32vh 0 #fff7ff, 75vw 21vh 0 #d4f2ff,
    85vw 26vh 0 #ffe5ff, 95vw 30vh 0 #e2efff, 4vw 38vh 0 #fff9ff,
    14vw 43vh 0 #e7dfff, 24vw 50vh 0 #f4faff, 34vw 42vh 0 #d1e6ff,
    44vw 47vh 0 #fff1ff, 54vw 39vh 0 #ddf4ff, 64vw 52vh 0 #f6f9ff,
    74vw 46vh 0 #dce6ff, 84vw 41vh 0 #fad4ff, 94vw 49vh 0 #f4e9ff,
    7vw 57vh 0 #f9e5ff, 17vw 62vh 0 #cbe7ff, 27vw 55vh 0 #fff9ff,
    37vw 58vh 0 #dce1ff, 47vw 60vh 0 #f1d4ff, 57vw 63vh 0 #f9f5ff,
    67vw 54vh 0 #f7d3ff, 77vw 66vh 0 #e6f2ff, 87vw 59vh 0 #cfd4ff,
    97vw 65vh 0 #ffe7ff, 9vw 72vh 0 #ebf1ff, 19vw 75vh 0 #fff0ff,
    29vw 68vh 0 #c9d7ff, 39vw 70vh 0 #ffeaff, 49vw 76vh 0 #f8f6ff,
    59vw 74vh 0 #fbd4ff, 69vw 78vh 0 #d6f0ff, 79vw 80vh 0 #fff2ff,
    89vw 73vh 0 #dae1ff, 99vw 82vh 0 #fdfcff, 11vw 86vh 0 #e7f4ff,
    21vw 91vh 0 #c9e0ff, 31vw 88vh 0 #fff5ff, 41vw 94vh 0 #d2ddff,
    51vw 87vh 0 #fbe9ff, 61vw 90vh 0 #e7f0ff, 71vw 95vh 0 #fdf4ff,
    81vw 98vh 0 #d4efff, 91vw 92vh 0 #ffeaff, 3vw 12vh 0 #d5e9ff,
    13vw 16vh 0 #ffeaff, 23vw 9vh 0 #f7e7ff, 33vw 15vh 0 #cbd7ff,
    43vw 11vh 0 #fff2ff, 53vw 6vh 0 #f3e9ff, 63vw 10vh 0 #d8ecff,
    73vw 16vh 0 #ffe0ff, 83vw 13vh 0 #faf2ff, 93vw 19vh 0 #f6f9ff;
}

#stars::after {
  transform: translateY(-100vh);
  box-shadow: 1vw 7vh 0 #fff6ff, 11vw 3vh 0 #d6eaff, 21vw 9vh 0 #fddfff,
    31vw 2vh 0 #f0f2ff, 41vw 14vh 0 #dbe6ff, 51vw 6vh 0 #fff9ff,
    61vw 12vh 0 #ecd9ff, 71vw 4vh 0 #f9f7ff, 81vw 8vh 0 #d8f0ff,
    91vw 1vh 0 #f7deff, 6vw 18vh 0 #e4edff, 16vw 22vh 0 #fcf7ff,
    26vw 17vh 0 #fbe2ff, 36vw 26vh 0 #e7f1ff, 46vw 19vh 0 #f8f0ff,
    56vw 24vh 0 #fff5ff, 66vw 27vh 0 #e1ebff, 76vw 23vh 0 #fde7ff,
    86vw 29vh 0 #fff1ff, 96vw 25vh 0 #dbe3ff, 8vw 33vh 0 #f1f7ff,
    18vw 37vh 0 #dfebff, 28vw 32vh 0 #ffe6ff, 38vw 36vh 0 #f7f1ff,
    48vw 40vh 0 #cfe0ff, 58vw 34vh 0 #fffaff, 68vw 38vh 0 #e1f2ff,
    78vw 45vh 0 #f8f2ff, 88vw 31vh 0 #ffe9ff, 98vw 37vh 0 #f0dbff,
    10vw 44vh 0 #fbf6ff, 20vw 48vh 0 #e6f1ff, 30vw 41vh 0 #f4e0ff,
    40vw 52vh 0 #fff4ff, 50vw 43vh 0 #dae5ff, 60vw 49vh 0 #f7f4ff,
    70vw 53vh 0 #ffe9ff, 80vw 47vh 0 #e3ecff, 90vw 51vh 0 #fdf6ff,
    100vw 55vh 0 #d7dcff;
}

#stars2 {
  width: 2px;
  height: 2px;
  animation: star-scroll calc(var(--star-speed-base-2) / var(--star-speed-factor))
      linear infinite;
  opacity: calc(((var(--star-opacity-base) * 0.8) + var(--star-opacity-boost)) * 1.3);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
  transition: opacity 240ms ease, filter 240ms ease;
  box-shadow: 4vw 6vh 0 #cdd7ff, 14vw 12vh 0 #ffe7ff, 24vw 7vh 0 #f3f7ff,
    34vw 10vh 0 #f1deff, 44vw 16vh 0 #d9f0ff, 54vw 9vh 0 #fff7ff,
    64vw 14vh 0 #f7dfff, 74vw 4vh 0 #e7f0ff, 84vw 11vh 0 #fff1ff,
    94vw 5vh 0 #dce2ff, 6vw 23vh 0 #f8f2ff, 16vw 19vh 0 #ffe0ff,
    26vw 25vh 0 #f9f6ff, 36vw 21vh 0 #e6edff, 46vw 29vh 0 #ffe9ff,
    56vw 20vh 0 #f2e9ff, 66vw 24vh 0 #dde9ff, 76vw 18vh 0 #ffdfff,
    86vw 26vh 0 #f7f0ff, 96vw 22vh 0 #e7efff, 9vw 32vh 0 #f1f5ff,
    19vw 36vh 0 #ffeaff, 29vw 31vh 0 #d9e5ff, 39vw 28vh 0 #fff3ff,
    49vw 35vh 0 #f4f0ff, 59vw 30vh 0 #ece4ff, 69vw 33vh 0 #fff1ff,
    79vw 27vh 0 #dde7ff, 89vw 34vh 0 #f6efff, 99vw 37vh 0 #ffd8ff,
    12vw 41vh 0 #fdf9ff, 22vw 45vh 0 #e1e8ff, 32vw 40vh 0 #ffe4ff,
    42vw 43vh 0 #f3ecff, 52vw 38vh 0 #d7ddff, 62vw 46vh 0 #fff0ff,
    72vw 42vh 0 #ecdfff, 82vw 48vh 0 #ffeaff, 92vw 44vh 0 #f6fcff,
    2vw 52vh 0 #e6f2ff, 12vw 54vh 0 #fdeeff, 22vw 50vh 0 #dbe4ff,
    32vw 56vh 0 #fff2ff, 42vw 53vh 0 #f1e2ff, 52vw 58vh 0 #e5f3ff,
    62vw 51vh 0 #fce5ff, 72vw 57vh 0 #dbe0ff, 82vw 55vh 0 #fff9ff,
    92vw 59vh 0 #e8f1ff;
}

#stars2::after {
  transform: translateY(-100vh);
  box-shadow: 5vw 61vh 0 #f3e1ff, 15vw 63vh 0 #e2f5ff, 25vw 60vh 0 #ffe6ff,
    35vw 65vh 0 #f9f4ff, 45vw 62vh 0 #dfe6ff, 55vw 68vh 0 #fff0ff,
    65vw 64vh 0 #f5e2ff, 75vw 66vh 0 #dfe9ff, 85vw 69vh 0 #ffeaff,
    95vw 67vh 0 #f4faff, 8vw 73vh 0 #ffe1ff, 18vw 70vh 0 #e0e9ff,
    28vw 75vh 0 #fff6ff, 38vw 71vh 0 #f6ecff, 48vw 77vh 0 #dde4ff,
    58vw 72vh 0 #ffe4ff, 68vw 79vh 0 #f2f7ff, 78vw 74vh 0 #ffdfff,
    88vw 78vh 0 #f7f0ff, 98vw 76vh 0 #e7ecff;
}

#stars3 {
  width: 3px;
  height: 3px;
  animation: star-scroll calc(var(--star-speed-base-3) / var(--star-speed-factor))
      linear infinite;
  opacity: calc(((var(--star-opacity-base) * 0.65) + var(--star-opacity-boost)) * 1.3);
  filter:
    blur(0.08px)
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.3))
    drop-shadow(0 0 14px rgba(102, 179, 255, 0.25));
  box-shadow: 7vw 9vh 0 #f6e0ff, 17vw 13vh 0 #e5f2ff, 27vw 6vh 0 #ffe6ff,
    37vw 15vh 0 #f4f0ff, 47vw 8vh 0 #dbe4ff, 57vw 12vh 0 #fff3ff,
    67vw 5vh 0 #f1f6ff, 77vw 11vh 0 #ffdfff, 87vw 7vh 0 #f6efff,
    97vw 14vh 0 #e0e7ff, 9vw 19vh 0 #fff2ff, 19vw 24vh 0 #f0e5ff,
    29vw 17vh 0 #dbe7ff, 39vw 22vh 0 #ffecff, 49vw 18vh 0 #f6f2ff,
    59vw 26vh 0 #e5ecff, 69vw 20vh 0 #ffdeff, 79vw 25vh 0 #f2f5ff,
    89vw 21vh 0 #dde7ff, 99vw 27vh 0 #ffeaff, 13vw 30vh 0 #f7f0ff,
    23vw 34vh 0 #e1e8ff, 33vw 29vh 0 #fff5ff, 43vw 33vh 0 #f5e4ff,
    53vw 37vh 0 #dde1ff, 63vw 31vh 0 #ffe7ff, 73vw 35vh 0 #f3efff,
    83vw 32vh 0 #e0e5ff, 93vw 38vh 0 #ffdfff;
}

#stars3::after {
  transform: translateY(-100vh);
  box-shadow: 6vw 41vh 0 #fce7ff, 16vw 44vh 0 #dde6ff, 26vw 39vh 0 #ffe4ff,
    36vw 42vh 0 #f4ecff, 46vw 48vh 0 #e5eaff, 56vw 40vh 0 #ffdfff,
    66vw 46vh 0 #f6f1ff, 76vw 43vh 0 #dbe1ff, 86vw 49vh 0 #ffe9ff,
    96vw 45vh 0 #f3f7ff, 10vw 53vh 0 #fff2ff, 20vw 57vh 0 #eee4ff,
    30vw 51vh 0 #dbe9ff, 40vw 55vh 0 #ffedff, 50vw 59vh 0 #f6ecff,
    60vw 52vh 0 #e3eaff, 70vw 58vh 0 #ffdfff, 80vw 54vh 0 #f0f5ff,
    90vw 60vh 0 #dee4ff;
}

@keyframes star-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100vh);
  }
}