.days-ahead {
  background:
    radial-gradient(circle at 50% 50%, rgba(43, 91, 145, 0.14), transparent 48rem),
    #020712;
}

.days-ahead .day-sky {
  z-index: 0;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  will-change: clip-path, filter, mask-image;
}

.days-ahead .starfield {
  z-index: 1;
  mix-blend-mode: screen;
  will-change: opacity;
}

.days-ahead-copy {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100svh;
  place-content: center;
  padding: 2rem;
  text-align: center;
  pointer-events: none;
}

.days-ahead-copy h1 {
  margin: 0.8rem 0 1rem;
  font-size: clamp(1.7rem, 5vw, 3.5rem);
  letter-spacing: 0.34em;
}

.days-ahead-copy p {
  color: rgba(234, 247, 255, 0.68);
}

.days-ahead-kicker {
  font: 400 0.64rem/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
}

.cycle-instrument {
  position: fixed;
  z-index: 3;
  top: 1.35rem;
  right: 1.35rem;
  display: grid;
  width: min(12rem, calc(100vw - 2.7rem));
  gap: 0.45rem;
  color: rgba(233, 247, 255, 0.58);
  font: 400 0.62rem/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: lowercase;
}

.cycle-track {
  display: block;
  height: 1px;
  overflow: hidden;
  background: rgba(225, 244, 255, 0.16);
  transform-origin: left;
}

.cycle-track span {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(225, 244, 255, 0.72);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.cycle-controls {
  position: fixed;
  z-index: 4;
  top: 1.25rem;
  left: 1.25rem;
  display: grid;
  gap: 0.5rem;
  width: 9.5rem;
  opacity: 0.16;
  transition: opacity 180ms ease;
}

.cycle-controls:hover,
.cycle-controls:focus-within {
  opacity: 0.72;
}

.cycle-controls label {
  display: grid;
  grid-template-columns: 2.7rem 1fr 2.6rem;
  gap: 0.4rem;
  align-items: center;
  color: rgba(233, 247, 255, 0.82);
  font: 400 0.55rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.cycle-controls output {
  text-align: right;
  white-space: nowrap;
}

.cycle-controls input[type="range"] {
  width: 100%;
  height: 0.75rem;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.cycle-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(231, 247, 255, 0.65);
}

.cycle-controls input[type="range"]::-webkit-slider-thumb {
  width: 6px;
  height: 6px;
  margin-top: -2.5px;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: rgba(241, 251, 255, 0.92);
}

.cycle-controls input[type="range"]::-moz-range-track {
  height: 1px;
  background: rgba(231, 247, 255, 0.65);
}

.cycle-controls input[type="range"]::-moz-range-thumb {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: rgba(241, 251, 255, 0.92);
}

.days-ahead-footer {
  z-index: 3;
}

@media (max-width: 560px) {
  .days-ahead-copy h1 {
    letter-spacing: 0.24em;
  }

  .cycle-instrument {
    right: 50%;
    transform: translateX(50%);
    text-align: center;
  }

  .cycle-controls {
    top: auto;
    bottom: 3.6rem;
    left: 50%;
    transform: translateX(-50%);
  }
}