@property --_thumb-spin {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes thumb-spin {
  from { --_thumb-spin: 0deg; }
  to { --_thumb-spin: 1turn; }
}

:where(.ui-hue-wheel) {
	--hue-wheel-hue-gap: 1cqi;
	--hue-wheel-hue-w: 10cqi;
	--hue-wheel-harmonies-gap: 1cqi;
	--hue-wheel-harmonies-w: 5cqi;
	--hue-wheel-tints-gap: 1cqi;
	--hue-wheel-tints-w: 10cqi;
	--hue-wheel-sz: 100cqi;
	--hue-wheel-thumb-gap: 1cqi;
	aspect-ratio: 1;
	container-type: inline-size;
	display: grid;
	place-items: center;
	pointer-events: auto;
	touch-action: none;

	& input[type="range"] {
		all: unset;
		appearance: none;
		background: radial-gradient(
				circle closest-side,
				oklch(0.7 0.15 var(--_angle, 0deg))
					calc(100% - var(--hue-wheel-tints-w) - var(--hue-wheel-tints-gap)),
				Canvas calc(100% - var(--hue-wheel-tints-w) - var(--hue-wheel-tints-gap)),
				Canvas calc(100% - var(--hue-wheel-tints-w)),
				#0000 calc(100% - var(--hue-wheel-tints-w))
			),
			conic-gradient(
				oklch(0.2 0.15 var(--_angle, 0deg)) 5%,
				oklch(0.25 0.15 var(--_angle, 0deg)) 5% 10%,
				oklch(0.3 0.15 var(--_angle, 0deg)) 10% 15%,
				oklch(0.35 0.15 var(--_angle, 0deg)) 15% 20%,
				oklch(0.4 0.15 var(--_angle, 0deg)) 20% 25%,
				oklch(0.45 0.15 var(--_angle, 0deg)) 25% 30%,
				oklch(0.5 0.15 var(--_angle, 0deg)) 30% 35%,
				oklch(0.55 0.15 var(--_angle, 0deg)) 35% 40%,
				oklch(0.6 0.15 var(--_angle, 0deg)) 40% 45%,
				oklch(0.65 0.15 var(--_angle, 0deg)) 45% 50%,
				oklch(0.75 0.15 var(--_angle, 0deg)) 50% 55%,
				oklch(0.78 0.15 var(--_angle, 0deg)) 55% 60%,
				oklch(0.81 0.15 var(--_angle, 0deg)) 60% 65%,
				oklch(0.84 0.15 var(--_angle, 0deg)) 65% 70%,
				oklch(0.87 0.15 var(--_angle, 0deg)) 70% 75%,
				oklch(0.9 0.15 var(--_angle, 0deg)) 75% 80%,
				oklch(0.93 0.15 var(--_angle, 0deg)) 80% 85%,
				oklch(0.96 0.15 var(--_angle, 0deg)) 85% 90%,
				oklch(0.98 0.15 var(--_angle, 0deg)) 90% 95%,
				oklch(1 0.15 var(--_angle, 0deg)) 95% 100%
			),
			radial-gradient(
				circle closest-side,
				Canvas calc(100% - var(--hue-wheel-harmonies-w)),
				#0000 calc(100% - var(--hue-wheel-harmonies-w))
			),
			conic-gradient(
				oklch(0.7 0.15 calc(var(--_angle, 0deg) + 30deg)) 14.28%,
				oklch(0.7 0.15 calc(var(--_angle, 0deg) + 120deg)) 14.28% 28.57%,
				oklch(0.7 0.15 calc(var(--_angle, 0deg) + 150deg)) 28.57% 42.86%,
				oklch(0.7 0.15 calc(var(--_angle, 0deg) + 180deg)) 42.86% 57.14%,
				oklch(0.7 0.15 calc(var(--_angle, 0deg) + 210deg)) 57.14% 71.43%,
				oklch(0.7 0.15 calc(var(--_angle, 0deg) + 240deg)) 71.43% 85.71%,
				oklch(0.7 0.15 calc(var(--_angle, 0deg) + 330deg)) 85.71% 100%
			),
			radial-gradient(
				circle closest-side,
				Canvas calc(100% - var(--hue-wheel-hue-w)),
				#0000 calc(100% - var(--hue-wheel-hue-w))
			),
			conic-gradient(in oklch longer hue, oklch(0.7 0.15 0), oklch(0.7 0.15 0));
		background-clip: content-box, content-box, padding-box, padding-box,
			border-box, border-box;
		background-origin: content-box, content-box, padding-box, padding-box,
			border-box, border-box;
		border: calc(var(--hue-wheel-hue-w) + var(--hue-wheel-hue-gap)) solid
			transparent;
		border-radius: 50%;
		box-sizing: border-box;
		grid-area: 1 / -1;
		height: var(--hue-wheel-sz);
		padding: calc(var(--hue-wheel-harmonies-w) + var(--hue-wheel-harmonies-gap));
		pointer-events: none;
		width: var(--hue-wheel-sz);
		&::-webkit-slider-thumb {
			all: unset;
			appearance: none;
		}
		&::-moz-range-thumb {
			all: unset;
			appearance: none;
		}
	}

	&::before {
		background: radial-gradient(
			circle calc(var(--hue-wheel-hue-w) / 2 - var(--hue-wheel-thumb-gap)) at
				center calc(var(--hue-wheel-hue-w) / 2),
			#fff8 100%,
			#0000 100%
		);
		content: "";
		grid-area: 1 / -1;
		height: var(--hue-wheel-sz);
		pointer-events: auto;
		rotate: calc(var(--_angle, 0deg) + var(--_thumb-spin));
		touch-action: none;
		width: var(--hue-wheel-hue-w);
	}

	&:has(input:focus-visible)::before {
		background: radial-gradient(
			circle calc(var(--hue-wheel-hue-w) / 2 - var(--hue-wheel-thumb-gap)) at
				center calc(var(--hue-wheel-hue-w) / 2),
			#fffc 100%,
			#0000 100%
		);
		filter: drop-shadow(0 0 4px #fff);
	}

	&::after { content: none; }
}

/* For this demo */
.ui-hue-wheel {
	margin: 0 auto;
	max-inline-size: 800px;
	width: min(800px, 100vw, 100vh);
	/* wheel stays static; only thumb moves */
}

.ui-hue-wheel::before {
	animation: thumb-spin 60s linear infinite;
}

.ui-hue-wheel:has(input:active)::before {
	animation-play-state: paused;
}

/* Page background and centering */
body {
    background-color: transparent; /* remove page background */
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
}

/* Center overlay for status + IP */
.ui-hue-wheel .center {
	grid-area: 1 / -1;
	display: grid;
	place-items: center;
	gap: 0.6cqi; /* small spacing between lines */
	text-align: center;
	color: #fff8;
	pointer-events: none;
	font-family: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
		"Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
}
.ui-hue-wheel .center-status {
	font-size: 4.5cqi;
	font-weight: 500;
	line-height: 1.1;
}
.ui-hue-wheel .center-ip {
	font-size: 4.5cqi;
	font-weight: 800; /* bold IP */
	line-height: 1.1;
}