#purple-cosmos-main-figure label{
	color:var(--main-col);
	background: linear-gradient(
		oklch(from var(--accent-inv-col-2) l calc(c - 0.05) h),
		oklch(from var(--accent-inv-col-2) l calc(c - 0.03) h),
		oklch(from var(--accent-inv-col-2) l c h),
		oklch(from var(--accent-inv-col-2) l calc(c - 0.03) h),
		oklch(from var(--accent-inv-col-2) l calc(c - 0.05) h)
	);
	width: 100%;
	display: flex;
	border-bottom: var(--border-width) solid var(--accent-bg-col);
	span.label {
		flex-grow: 0;
		flex-shrink: 0;
		padding: 0 0.5em;
	}
	select {
		flex-grow: 1;
		flex-shrink: 1;
		background: transparent;
		border:none;
		border-left: var(--accent-bg-col) solid var(--border-width);
		&:hover, &:focus, &:focus-within {
			background-color: oklch(from var(--main-col) l c h / 0.15);
		}
	}
}
#purple-cosmos-main-figure:has(select.width-selector [value="max"]:checked) {max-width: 100%;}
#purple-cosmos-main-figure:has(select.width-selector [value="normal"]:checked) {max-width: var(--max-width);}
#purple-cosmos-main-figure:has(select.width-selector [value="wide"]:checked) {max-width: calc(1.5 * var(--max-width));}
#purple-cosmos-main-figure:has(select.width-selector [value="wider"]:checked) {max-width: calc(2 * var(--max-width));}

@property --step {
	syntax: '<number>';
	initial-value: 0;
	inherits: true;
}
@keyframes --frames{
	0%{--step:-1.0;}
	100%{--step:1.0;}
}

figure:has(div[role="img"]) {
	width: 100%;
	div[role="img"] {
		aspect-ratio: 1;
	}
}

#expl1[role="img"] {
	background:
		radial-gradient(circle at 30% 60%, green 0, transparent 5em),
		linear-gradient(black);
}

#expl2[role="img"] {
	animation: --frames 5s linear infinite;
	background:
		radial-gradient(circle at
			calc(30% + 15% * sin(var(--step) * 1turn))
			60%, green 0, transparent 5em),
		linear-gradient(black);
}

#expl3[role="img"] {
	animation: --frames 5s linear infinite;
	background:
		radial-gradient(circle at
			calc(30% + 15% * sin(var(--step) * 1turn))
			calc(60% + 15% * sin(var(--step) * 1turn)),
			green 0, transparent 5em),
		linear-gradient(black);
}

#expl4[role="img"] {
	animation: --frames 5s linear infinite;
	background:
		radial-gradient(circle at
			calc(30% + 15% * sin(var(--step) * 1turn))
			calc(60% + 25% * sin(var(--step) * 1turn + 0.3turn)),
			green 0, transparent 5em),
		linear-gradient(black);
}
#expl5[role="img"] {
	animation: --frames 20s linear infinite;
	background:
		radial-gradient(circle at
			calc(30% + 15% * sin(3 * var(--step) * 1turn))
			calc(60% + 25% * sin(7 * var(--step) * 1turn + 0.3turn)),
			green 0, transparent 5em),
		linear-gradient(black);
}
#expl6[role="img"] {
	animation: --frames 20s linear infinite;
	background:
		radial-gradient(circle at
			calc(
				30%
				+ 15% * sin(3 * var(--step) * 1turn)
				+ 25% * sin(2 * var(--step) * 1turn + 0.25turn)
				+  3% * sin(1 * var(--step) * 1turn + 0.66turn)
			)
			calc(
				60%
				+ 25% * sin(7 * var(--step) * 1turn + 0.3turn)
				+ 15% * sin(5 * var(--step) * 1turn + 0.4turn)
				+ 10% * sin(3 * var(--step) * 1turn + 0.7turn)
			),
			green 0, transparent
			calc(
				5em
				+ 3em * sin(6 * var(--step) * 1turn + 0.1turn)
				+ 2em * sin(4 * var(--step) * 1turn + 0.2turn)
				+ 1%  * sin(10 * var(--step) * 1turn + 0.3turn)
			)),
		linear-gradient(black);
}

#expl7{
	animation: --frames 20s linear infinite;
	--x0: 50%;
	--y0: 50%;
	--rx1: 10%;
	--ry1: 15%;
	--x1: calc(var(--x0) + var(--rx1) * sin(3turn * var(--step) + 0.3turn));
	--y1: calc(var(--y0) + var(--ry1) * cos(3turn * var(--step) + 0.3turn));
	--rx2: 20%;
	--ry2: 10%;
	--x2: calc(var(--x1) + var(--rx2) * sin(4turn * var(--step) + 0.3turn));
	--y2: calc(var(--y1) + var(--ry2) * cos(4turn * var(--step) + 0.3turn));
	--rx3: 7%;
	--ry3: 27%;
	--x3: calc(var(--x2) + var(--rx3) * sin(2turn * var(--step) + 0.7turn));
	--y3: calc(var(--y2) + var(--ry3) * cos(2turn * var(--step) + 0.7turn));
	--rx4: 11%;
	--ry4: 2%;
	--x4: calc(var(--x3) + var(--rx4) * sin(7turn * var(--step) + 0.5turn));
	--y4: calc(var(--y3) + var(--ry4) * cos(7turn * var(--step) + 0.5turn));
	.m, .x, .y {
		r: .75%;
		&.c4 { r: 1.5%; }
	}
	.x { cy: 1.5%; }
	.y { cx: 1.5%; }
	.c {stroke-width: 0.2%; fill: none; transform-origin: center;}
	.c.c1 {rx: var(--rx1); ry: var(--ry1);}
	.c.c2 {rx: var(--rx2); ry: var(--ry2);}
	.c.c3 {rx: var(--rx3); ry: var(--ry3);}
	.c.c4 {rx: var(--rx4); ry: var(--ry4);}
	.c.c1, .m.c0 {cx: var(--x0); cy: var(--y0);}
	.m.c1, .x.c1, .c.c2 { cx: var(--x1); }
	.m.c1, .y.c1, .c.c2 { cy: var(--y1); }
	.m.c2, .x.c2, .c.c3 { cx: var(--x2); }
	.m.c2, .y.c2, .c.c3 { cy: var(--y2); }
	.m.c3, .x.c3, .c.c4 { cx: var(--x3); }
	.m.c3, .y.c3, .c.c4 { cy: var(--y3); }
	.m.c4, .x.c4, .c.c5 { cx: var(--x4); }
	.m.c4, .y.c4, .c.c5 { cy: var(--y4); }
	background: black;
}

#expl8[role="img"] {
	animation: --frames 2000s linear infinite;
	background:
		oklch(
			calc(0.5657 /* lightness */ 
				+ 0.0828 * sin(181turn * var(--step) + 0.7463turn)
				+ 0.0404 * sin(4turn * var(--step) + 0.4524turn)
				+ 0.0210 * sin(489turn * var(--step) + 0.9993turn)
				+ 0.0131 * sin(108turn * var(--step) + 0.2732turn)
			)
			calc(0.2146 /* chroma */
				+ 0.0072 * sin(440turn * var(--step) + 0.3932turn)
				+ 0.0430 * sin(318turn * var(--step) + 0.6632turn)
				+ 0.0140 * sin(371turn * var(--step) + 0.7723turn)
				+ 0.0135 * sin(459turn * var(--step) + 0.6165turn)
			)
			calc(323.29 /* hue */
				+ 17.7444 * sin(76turn * var(--step) + 0.3170turn)
				+ 5.1156 * sin(386turn * var(--step) + 0.9415turn)
				+ 5.1822 * sin(81turn * var(--step) + 0.1472turn)
				+ 0.7097 * sin(152turn * var(--step) + 0.9751turn)
			)
			/
			calc(0.4361 /* transparency */
				+ 0.0359 * sin(240turn * var(--step) + 0.1182turn)
				+ 0.1328 * sin(331turn * var(--step) + 0.1266turn)
				+ 0.0928 * sin(275turn * var(--step) + 0.0878turn)
				+ 0.0601 * sin(337turn * var(--step) + 0.7590turn)
			)
		);
}
#expl9[role="img"] {
	animation: --frames 10000s linear infinite;
		background: repeat
			radial-gradient(circle at calc(42.75103326345193%
					+ 6.333548068030857% * sin(674turn * var(--step) + 0.5630448790170792turn)
					+ 3.960065286385456% * sin(222turn * var(--step) + 0.47866417748107615turn)
					+ 2.0922877115817484% * sin(498turn * var(--step) + 0.6571123754380062turn)
					+ 1.7384324058699923% * sin(984turn * var(--step) + 0.14542563462662705turn)
					+ 1.019097925315298% * sin(549turn * var(--step) + 0.2542504422150368turn)
					+ 0.7209053957275368% * sin(624turn * var(--step) + 0.5898098131530617turn)
					+ 0.7734945004464631% * sin(97turn * var(--step) + 0.4455330011253156turn)
					+ 0.27922837208596035% * sin(876turn * var(--step) + 0.5694131899481079turn)
					+ 0.32903341767828903% * sin(760turn * var(--step) + 0.3346798010764367turn)
					+ 0.428681034191624% * sin(520turn * var(--step) + 0.9101202826065431turn)
				)
				calc(32.157853730836734%
					+ 3.310468076523022% * sin(403turn * var(--step) + 0.02315577433395999turn)
					+ 2.7585626351264976% * sin(960turn * var(--step) + 0.5769415685975573turn)
					+ 1.884243456010488% * sin(312turn * var(--step) + 0.5679470983547803turn)
					+ 0.8907105483708453% * sin(6turn * var(--step) + 0.6069441024560049turn)
					+ 0.7952422391477516% * sin(250turn * var(--step) + 0.012594707523515658turn)
					+ 0.4075733170367528% * sin(18turn * var(--step) + 0.2038346355536671turn)
					+ 0.6958983606626911% * sin(550turn * var(--step) + 0.7002451576081569turn)
					+ 0.5110493692166269% * sin(721turn * var(--step) + 0.6843961628983911turn)
					+ 0.1980997294846363% * sin(479turn * var(--step) + 0.41827237463884903turn)
					+ 0.5598230903676014% * sin(742turn * var(--step) + 0.6183785145101294turn)
				),
				oklch(calc(0.5657
					+ 0.0389313799716634 * sin(598turn * var(--step) + 0.20381351930532576turn)
					+ 0.03460688431358107 * sin(63turn * var(--step) + 0.9822407543851197turn)
					+ 0.019933295088939623 * sin(352turn * var(--step) + 0.7891545325678033turn)
					+ 0.005215180949081588 * sin(839turn * var(--step) + 0.027660494666813973turn)
				)
					calc(0.2146
					+ 0.06510968576658022 * sin(567turn * var(--step) + 0.00302190467239849turn)
					+ 0.02052180355656937 * sin(766turn * var(--step) + 0.647934277327469turn)
					+ 0.02319284306224317 * sin(743turn * var(--step) + 0.5755984953259234turn)
					+ 0.02419714855518543 * sin(230turn * var(--step) + 0.9640649856262274turn)
				)
					calc(323.29
					+ 14.32668277558097 * sin(768turn * var(--step) + 0.33365352411667903turn)
					+ 0.932983634943062 * sin(147turn * var(--step) + 0.4109163964785737turn)
					+ 1.7543110586023818 * sin(982turn * var(--step) + 0.45926963423778855turn)
					+ 2.559476921966262 * sin(760turn * var(--step) + 0.7050787538982074turn)
				)
					/ calc(0.328865390907233
					+ 0.2244241264293079 * sin(935turn * var(--step) + 0.3842721599418537turn)
					+ 0.14014883214744003 * sin(796turn * var(--step) + 0.7612435180995604turn)
					+ 0.09001255588879759 * sin(843turn * var(--step) + 0.9523694276558075turn)
					+ 0.053825624032027335 * sin(348turn * var(--step) + 0.452193633178387turn)
				))
				0, transparent calc(11.795627877147785%
					+ 5.841000023711475% * sin(826turn * var(--step) + 0.671934255528448turn)
					+ 2.856462605732548% * sin(254turn * var(--step) + 0.9336268847396764turn)
					+ 1.6131085987264502% * sin(11turn * var(--step) + 0.8152344247262183turn)
					+ 1.0640937123447114% * sin(598turn * var(--step) + 0.34518374496910365turn)
				)),
			linear-gradient(black, color-mix(in oklab, black 30%, purple 70%));
}