@property --channel {
  syntax: "*";
  inherits: false;
  initial-value: clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255);
}

.result {
	--a11y-color: rgb(from var(--color)
		var(--channel)
		var(--channel)
		var(--channel)
	);
	background: var(--color);
	color: var(--a11y-color);

	aspect-ratio: 1;
	border: 1px solid lightgrey;
	border-radius: .25em;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: bolder;
	font-size: 1.5em;
	padding: 1em;
}

.result input {
	position: absolute;
	appearance: none;
	cursor: pointer;
	width: 100%;
	height: 100%;
	opacity: 0;
}