html {
  /* Snap to one panel at a time; the snap scroll slides the background in */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

.panel {
  height: 100vh;
  scroll-snap-align: start;
}

.panel.light {
  background: white;
}

.panel.dark {
  background: black;
}

/* Wheel stays fixed while the panels scroll behind it */
.wheel-container {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.color-wheel {
  --padding: 4rem;
  height: min(100vh - 2 * var(--padding), 100vw - 2 * var(--padding));
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: gray;
  /* Cut out the middle so the wheel is a ring */
  mask: radial-gradient(circle, transparent 40%, black calc(40% + 1px));
}

/* Palette sits in the hole of the wheel */
.palette {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: monospace;
  font-size: 1.25rem;
  color: black;
  transition: color 0.3s;
}

body.dark .palette {
  color: white;
}

.swatch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.swatch span {
  width: 2rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

/* background: conic-gradient(
  red 0deg 60deg,
  orange 60deg 120deg,
  yellow 120deg 180deg,
  green 180deg 240deg,
  blue 240deg 300deg,
  purple 300deg 360deg
); */