@layer color-wheel {
  @property --color-wheel-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0turn;
  }

  @keyframes color-wheel-rotation {
    to {
      --color-wheel-angle: 1turn;
    }
  }

  .color-wheel {
    background-image: conic-gradient(from var(--color-wheel-angle) at center in oklch longer hue, oklch(0.7 0.3 0 / 0.4), oklch(0.7 0.3 0 / 0.4));
  }

  .color-wheel.color-wheel-rotating {
    animation: var(--color-wheel-duration, 60s) linear infinite color-wheel-rotation;
  }
}