/*! initialize-plus.css v0.1 | MIT License | https://github.com/nov-jp/initialize-css */

/**
 * [class*="__box__"]:is([style~="--inline-size--:"], [style~="--margin-block--:"], [style~="--margin-inline--:"], [style~="--padding-block--:"], [style~="--padding-inline--:"], [style~="--is-inset:"])?
 */
[class*="__box__"] {
	--inline-size--: 100cqi;
	--margin-inline--: 0px;
	--padding-inline--: 0px;
	--is-inset: -1;
	margin-inline: calc(50% - 50cqi + clamp(var(--margin-inline--), -1e6px * var(--is-inset), max(var(--margin-inline--), var(--inline-size--) / -2 + 50cqi)));
	padding-inline: clamp(var(--padding-inline--), 1e6px * var(--is-inset), max(var(--padding-inline--), var(--inline-size--) / -2 + 50cqi));

	&:not([style~="--inline-size--:"]) {
		&:has(+ &) {
			margin-block-end: 0;
		}
		& + & {
			margin-block-start: 0;
		}
	}
	&:where([style~="--margin-block--:"]) {
		margin-block: var(--margin-block--);
	}
	&:where([style~="--padding-block--:"]) {
		margin-block: var(--padding-block--);
	}
}

/**
 * hr[class*="__hr__"]:is([style~="--border-style--:"], [style~="--border-width--:"], [style~="--border-color--:"], [style~="--inline-size--:"])?
 */
[class*="__hr__"] {
	--border-style--: solid;
	--border-width--: var(--line_xf);
	--border-color--: var(--sheer-text);
	--inline-size--: calc(100% / 3);
	border: var(--border-width--) var(--border-color--);
	border-block-start-style: var(--border-style--);
	inline-size: var(--inline-size--);
}

/**
 * pre[class*="__pre__"]:is([style~="--background--:"], [style~="--border-width--:"], [style~="--border-color--:"], [style~="--border-radius--:"], [style~="--color--:"])?
 * pre.__pre__code
 * > code
 * pre.__pre__samp
 * > samp
 */
[class*="__pre__"] {
	--background--: none;
	--border-width--: var(--line_xf);
	--border-color--: var(--sheerer-text);
	--border-radius--: calc(var(--border-width--) * 2);
	--color--: inherit;
	--leading: 0.25rem;
	background: var(--background--);
	border: solid var(--border-width--) var(--border-color--);
	border-radius: var(--border-radius--);
	color: var(--color--);
	max-block-size: calc(100dvb * 3 / 4);
	overflow: auto;
	padding-block: calc(var(--sp_l) + 0.5em - 0.5lh);
	padding-inline: var(--sp_l);
	white-space: pre;
}
.__pre__code, .__pre__samp {
	--leading: 1rem;
	background: linear-gradient(180deg, transparent 50%, var(--sheerest-gray) 50%) local 0 0 / 2lh 2lh, var(--background--);
	padding-block: 1lh;
}
.__pre__code {
	--background--: var(--dark-light);
	--color--: var(--light-dark);
}

/**
 * blockquote[class*="__blockquote__"]
 */
[class*="__blockquote__"] {
	font-family: var(--font_serif);
	font-size: var(--em_l);
}

/**
 * ol[class*="__ol__"]
 * > li
 */
.__ol__compact {
	display: flex;
	flex-flow: wrap;
	gap: 0 1em;
	list-style-position: inside;

	& > li {
		margin: 0;
	}
}

/**
 * ul[class*="__ul__"][style~="--list-style-type--:"]?
 * > li
 */
.__ul__compact {
	--list-style-type--: "";
	display: flex;
	flex-flow: wrap;
	gap: 0 1em;
	list-style: var(--list-style-type--) inside;

	& > li {
		margin: 0;
	}
}

/**
 * dl[class*="__dl__"]:is([style~="--border-width--:"], [style~="--border-color--:"])?
 * > div > :is(dt, dd)
 */
.__dl__noindent {
	display: flex;
	flex-flow: column;
	gap: calc(var(--sp) / 2) 0;

	& > div > * {
		margin: 0;
	}
}
[class*="__dl__compact"] {
	display: flex;
	flex-flow: wrap;
	gap: calc(var(--sp) / 2) 2em;

	& > div {
		display: flex;
		flex-flow: wrap;
		gap: 0 1em;

		& > * {
			margin: 0;
		}
	}
}
[class*="__dl__compact-group"] {
	--border-width--: var(--line_xf);
	--border-color--: var(--sheerest-text);
	border-block: solid var(--border-width--) var(--border-color--);
	gap: 0;

	& > div {
		flex: 100%;
		padding-block: calc(0.5lh - 0.5em);

		&:is(* + *) {
			border-block-start: solid var(--border-width--) var(--border-color--);
		}
	}
}
.__dl__compact-group-names > * > dd, .__dl__compact-group-values > * > dt {
	flex: 100%;
}
.__dl__tabular {
	--border-width--: var(--line_xf);
	--border-color--: var(--sheerest-text);
	border-block: solid var(--border-width--) var(--border-color--);
	display: grid;
	grid: auto-flow / repeat(100, minmax(min-content, auto)) minmax(min-content, 100%);
	overflow: auto;

	& > div {
		display: grid;
		grid: repeat(100, auto) / subgrid;
		gap: 0 1em;
		grid-area: auto / 1 / auto / -1;
		padding-block: calc(0.5lh - 0.5em);

		&:is(* + *) {
			border-block-start: solid var(--border-width--) var(--border-color--);
		}
		& > * {
			margin: 0;
		}
		& > dt {
			grid-area: 1 / auto / -1 / auto;
		}
		& > dd {
			grid-area: auto / -2 / auto / -1;
		}
	}
}

/**
 * div[class*="__div-table__"]:is([style~="--border-width--:"], [style~="--border-color--:"], [style~="--border-radius--:"])?
 * > table:is([style~="--inline-size--:"], [style~="--table-layout--:"])?
 *   ( > caption )?
 *   > :is(tbody, thead, tfoot) > tr > :is(td, th)
 */
[class*="__div-table__"] {
	--border-width--: var(--line_xf);
	--border-color--: var(--sheerer-text);
	--border-radius--: calc(var(--border-width--) * 2);
	border: solid var(--border-width--) var(--border-color--);
	border-radius: var(--border-radius--);
	max-block-size: calc(100dvb * 3 / 4);
	overflow: auto;
	scroll-snap-type: both mandatory;

	& > table {
		--inline-size--: auto;
		--table-layout--: auto;
		border: hidden;
		border-collapse: collapse;
		border-spacing: 0;
		inline-size: var(--inline-size--);
		min-inline-size: 100%;
		table-layout: var(--table-layout--);

		& > caption {
			--leading-scale: calc(1 / 2);
			border-block-end: solid calc(var(--border-width--) * 2) var(--border-color--);
			font-weight: inherit;
			padding-block: calc(var(--sp_m) + 0.5em - 0.5lh);
			padding-inline: var(--sp_m);
			scroll-snap-align: start;
		}
		& > tbody {
			border-block: solid calc(var(--border-width--) * 2) var(--border-color--);
		}
		& > * > tr {
			scroll-snap-align: start;

			& > * {
				border: solid var(--border-width--) var(--border-color--);
				padding-block: calc(var(--sp_m) + 0.5em - 0.5lh);
				padding-inline: var(--sp_m);
				scroll-snap-align: start;
			}
		}
	}
}

/**
 * figure[class*="__figure__"]:is([style~="--inline-size--:"], [style~="--margin-inline--:"])?
 * ( > figcaption[style~="--text-align--:"]? )?
 */
[class*="__figure__"] {
	--inline-size--: auto;
	--margin-inline--: auto;
	inline-size: var(--inline-size--);
	margin-inline: var(--margin-inline--);

	&:not(:has(> :is(p, pre, blockquote, ol, ul, dl, figure, div, table))) {
		--inline-size--: fit-content;
	}
	& > figcaption {
		--text-align--: start;
		--leading-scale: calc(1 / 2);
		inline-size: 0;
		min-inline-size: 100%;
		max-inline-size: 100%;
		padding-block: calc(0.5lh - 0.5em);
		text-align: var(--text-align--);
		text-wrap: balance;
		text-wrap: pretty;

		&:not(:has(+*)) {
			--text-align--: end;
		}
	}
}

/**
 * details[class*="__details__"]:is([style~="--border-width--:"], [style~="--border-color--:"], [style~="--border-radius--:"])?
 * > summary
 */
[class*="__details__"] {
	--border-width--: var(--line_xf);
	--border-color--: var(--sheerer-text);
	--border-radius--: calc(var(--border-width--) * 2);
	--fr: 1fr;
	--time: calc(1s / 4);
	border: solid var(--border-width--) var(--border-color--);
	border-radius: var(--border-radius--);
	display: grid;
	grid: auto var(--fr) / 1fr;
	align-content: start;
	align-items: start;
	overflow: hidden;
	transition: grid var(--time);

	& > summary {
		padding-block: calc(var(--sp_m) + 0.5em - 0.5lh);
		padding-inline: var(--sp_m);
	}
	&::details-content {
		border-block-start: solid var(--border-width--) var(--border-color--);
		content-visibility: visible;
		overflow: hidden;
		padding-block: calc(var(--sp_l) + 0.5em - 0.5lh);
		padding-inline: var(--sp_l);
		transition: border 0s, padding var(--time), visibility var(--time);
		transition-behavior: allow-discrete;
	}
	&:not([open]) {
		--fr: 0fr;

		&::details-content {
			transition-delay: var(--time), 0s, 0s;
			border-style: none;
			padding-block: 0;
			visibility: hidden;
		}
	}
	&[name] {
		& + & {
			margin-block-start: var(--sp_xxs);
		}
	}
}

/**
 * div[class*="__div-tabs__"]:is([style~="--border-width--:"], [style~="--border-color--:"])?
 * > ul[role="tablist"]
 *   > li[role="presentation"] > label[id="${ TAB }"][role="tab"] > input[type="radio"][name][aria-controls="${ TAB_PANEL }"]( [checked] )?
 * > ul
 *   > li[id="${ TAB_PANEL }"][role="tabpanel"][aria-labelledby="${ TAB }"]
 */
[class*="__div-tabs__"] {
	--border-width--: var(--line_xf);
	--border-color--: var(--sheerer-text);
	display: flex;
	flex-flow: column;
	gap: var(--sp_m);

	& > ul > li:nth-child(n + 9) {
		display: none;
	}
	& > ul:not(* + *) {
		border: var(--border-width--) var(--border-color--);
		border-block-end-style: solid;
		display: flex;
		gap: 0 var(--sp_m);
		justify-content: center;
		margin: 0;

		& > li {
			border: var(--border-width--) transparent;
			border-block-end-style: solid;
			color: var(--sheerer-text);
			display: block;
			margin: 0;
			margin-block-end: calc(var(--border-width--) * -1);

			& > label {
				block-size: 100%;
				display: block;
				font-size: var(--em_s);
				font-weight: bolder;
				padding-block-end: var(--sp_m);

				&:has(:focus-visible) {
					outline: var(--outline-style) var(--outline-width) var(--outline-color);
					outline-offset: var(--outline-offset);
				}
				& > input {
					appearance: none;
					outline: none;
				}
			}
		}
	}
	& > ul:is(* + *) {
		display: grid;
		margin: 0;

		& > li {
			clip-path: inset(50%);
			display: block;
			grid-area: 1 / 1;
			margin: 0;
		}
	}
	&:not(:focus-within) > ul:not(* + *) > li:has(> label > input:checked),
	&:has(> ul > li:focus-within:nth-child(1)) > ul:not(* + *) > li:nth-child(1),
	&:has(> ul > li:focus-within:nth-child(2)) > ul:not(* + *) > li:nth-child(2),
	&:has(> ul > li:focus-within:nth-child(3)) > ul:not(* + *) > li:nth-child(3),
	&:has(> ul > li:focus-within:nth-child(4)) > ul:not(* + *) > li:nth-child(4),
	&:has(> ul > li:focus-within:nth-child(5)) > ul:not(* + *) > li:nth-child(5),
	&:has(> ul > li:focus-within:nth-child(6)) > ul:not(* + *) > li:nth-child(6),
	&:has(> ul > li:focus-within:nth-child(7)) > ul:not(* + *) > li:nth-child(7),
	&:has(> ul > li:focus-within:nth-child(8)) > ul:not(* + *) > li:nth-child(8) {
		border-color: currentcolor;
		color: currentcolor;
	}
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(1) > label > input:checked), :has(> ul > li:focus-within:nth-child(1))) > ul:is(* + *) > li:nth-child(1),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(2) > label > input:checked), :has(> ul > li:focus-within:nth-child(2))) > ul:is(* + *) > li:nth-child(2),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(3) > label > input:checked), :has(> ul > li:focus-within:nth-child(3))) > ul:is(* + *) > li:nth-child(3),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(4) > label > input:checked), :has(> ul > li:focus-within:nth-child(4))) > ul:is(* + *) > li:nth-child(4),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(5) > label > input:checked), :has(> ul > li:focus-within:nth-child(5))) > ul:is(* + *) > li:nth-child(5),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(6) > label > input:checked), :has(> ul > li:focus-within:nth-child(6))) > ul:is(* + *) > li:nth-child(6),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(7) > label > input:checked), :has(> ul > li:focus-within:nth-child(7))) > ul:is(* + *) > li:nth-child(7),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(8) > label > input:checked), :has(> ul > li:focus-within:nth-child(8))) > ul:is(* + *) > li:nth-child(8) {
		clip-path: none;
	}
	&.__div-tabs__vertical {
		flex-flow: row;

		& > ul:not(* + *) {
			border-style: none;
			border-inline-end-style: solid;
			flex-flow: column;
			gap: var(--sp_m) 0;
			justify-content: start;

			& > li {
				border-style: none;
				border-inline-end-style: solid;
				margin: 0;
				margin-inline-end: calc(var(--border-width--) * -1);

				& > label {
					block-size: auto;
					padding: 0;
					padding-inline-end: var(--sp_m);
				}
			}
		}
		& > ul:is(* + *) {
			flex: 1 0 0%;
		}
	}
}

/**
 * div[class*="__div-carousel__"]
 * > ul[role="tablist"]
 *   > li[role="presentation"] > label[id="${ TAB }"][role="tab"] > input[type="radio"][name][aria-controls="${ TAB_PANEL }"]( [checked] )?
 * > ul
 *   > li[id="${ TAB_PANEL }"][role="tabpanel"][aria-labelledby="${ TAB }"]
 */
@keyframes carousel_2 {
	0%, 45% {
		opacity: var(--opacity_1, 1);
		transform: var(--transform_1, none);
		z-index: var(--z-index_1, 0);
	}
	50%, 95% {
		opacity: var(--opacity_2, 1);
		transform: var(--transform_2, none);
		z-index: var(--z-index_2, 0);
	}
	100% {
		opacity: var(--opacity_3, 1);
		transform: var(--transform_3, none);
		z-index: var(--z-index_3, 0);
	}
}
@keyframes carousel_3 {
	0%, 63.333333% {
		opacity: var(--opacity_1, 1);
		transform: var(--transform_1, none);
		z-index: var(--z-index_1, 0);
	}
	66.666666%, 96.666666% {
		opacity: var(--opacity_2, 1);
		transform: var(--transform_2, none);
		z-index: var(--z-index_2, 0);
	}
	100% {
		opacity: var(--opacity_3, 1);
		transform: var(--transform_3, none);
		z-index: var(--z-index_3, 0);
	}
}
@keyframes carousel_4 {
	0%, 72.5% {
		opacity: var(--opacity_1, 1);
		transform: var(--transform_1, none);
		z-index: var(--z-index_1, 0);
	}
	75%, 97.5% {
		opacity: var(--opacity_2, 1);
		transform: var(--transform_2, none);
		z-index: var(--z-index_2, 0);
	}
	100% {
		opacity: var(--opacity_3, 1);
		transform: var(--transform_3, none);
		z-index: var(--z-index_3, 0);
	}
}
@keyframes carousel_5 {
	0%, 78% {
		opacity: var(--opacity_1, 1);
		transform: var(--transform_1, none);
		z-index: var(--z-index_1, 0);
	}
	80%, 98% {
		opacity: var(--opacity_2, 1);
		transform: var(--transform_2, none);
		z-index: var(--z-index_2, 0);
	}
	100% {
		opacity: var(--opacity_3, 1);
		transform: var(--transform_3, none);
		z-index: var(--z-index_3, 0);
	}
}
@keyframes carousel_6 {
	0%, 81.666666% {
		opacity: var(--opacity_1, 1);
		transform: var(--transform_1, none);
		z-index: var(--z-index_1, 0);
	}
	83.333333%, 98.333333% {
		opacity: var(--opacity_2, 1);
		transform: var(--transform_2, none);
		z-index: var(--z-index_2, 0);
	}
	100% {
		opacity: var(--opacity_3, 1);
		transform: var(--transform_3, none);
		z-index: var(--z-index_3, 0);
	}
}
@keyframes carousel_7 {
	0%, 84.285714% {
		opacity: var(--opacity_1, 1);
		transform: var(--transform_1, none);
		z-index: var(--z-index_1, 0);
	}
	85.714285%, 98.571428% {
		opacity: var(--opacity_2, 1);
		transform: var(--transform_2, none);
		z-index: var(--z-index_2, 0);
	}
	100% {
		opacity: var(--opacity_3, 1);
		transform: var(--transform_3, none);
		z-index: var(--z-index_3, 0);
	}
}
@keyframes carousel_8 {
	0%, 86.25% {
		opacity: var(--opacity_1, 1);
		transform: var(--transform_1, none);
		z-index: var(--z-index_1, 0);
	}
	87.5%, 98.75% {
		opacity: var(--opacity_2, 1);
		transform: var(--transform_2, none);
		z-index: var(--z-index_2, 0);
	}
	100% {
		opacity: var(--opacity_3, 1);
		transform: var(--transform_3, none);
		z-index: var(--z-index_3, 0);
	}
}
[class*="__div-carousel__"] {
	--easing: ease;
	--has-nth: 1;
	--keyframes: none;
	--time: 4s;
	display: grid;
	grid: auto auto 1fr / 100%;
	overflow: hidden;

	&:has(> ul > li:nth-child(2)) {
		--has-nth: 2;
		--keyframes: carousel_2;
	}
	&:has(> ul > li:nth-child(3)) {
		--has-nth: 3;
		--keyframes: carousel_3;
	}
	&:has(> ul > li:nth-child(4)) {
		--has-nth: 4;
		--keyframes: carousel_4;
	}
	&:has(> ul > li:nth-child(5)) {
		--has-nth: 5;
		--keyframes: carousel_5;
	}
	&:has(> ul > li:nth-child(6)) {
		--has-nth: 6;
		--keyframes: carousel_6;
	}
	&:has(> ul > li:nth-child(7)) {
		--has-nth: 7;
		--keyframes: carousel_7;
	}
	&:has(> ul > li:nth-child(8)) {
		--has-nth: 8;
		--keyframes: carousel_8;
	}
	& > ul > li:nth-child(1) {
		--nth: 1;
	}
	& > ul > li:nth-child(2) {
		--nth: 2;
	}
	& > ul > li:nth-child(3) {
		--nth: 3;
	}
	& > ul > li:nth-child(4) {
		--nth: 4;
	}
	& > ul > li:nth-child(5) {
		--nth: 5;
	}
	& > ul > li:nth-child(6) {
		--nth: 6;
	}
	& > ul > li:nth-child(7) {
		--nth: 7;
	}
	& > ul > li:nth-child(8) {
		--nth: 8;
	}
	& > ul > li:nth-child(n + 9) {
		display: none;
	}
	& > ul:not(* + *) {
		display: flex;
		gap: var(--sp_m);
		justify-content: center;
		grid-area: 2 / 1 / 3 / -1;
		justify-self: center;
		inline-size: fit-content;
		max-inline-size: 100%;
		margin: var(--sp_m);
		z-index: 2;

		& > li {
			--opacity_1: var(--alpha_m);
			--opacity_3: var(--alpha_m);
			display: block;
			margin: 0;
			opacity: var(--alpha_m);

			& > label {
				background: var(--dark-light);
				block-size: 1rem;
				border: solid var(--line_f) var(--light-dark);
				border-radius: 1rem;
				display: block;
				inline-size: 1rem;
				overflow: hidden;
				white-space: nowrap;

				&:has(> input:focus-visible) {
					outline: var(--outline-style) var(--outline-width) var(--outline-color);
					outline-offset: var(--outline-offset);
				}
				& > input {
					appearance: none;
					inline-size: 100%;
					outline: none;
				}
			}
		}
	}
	& > ul:is(* + *) {
		display: grid;
		grid-area: 1 / 1 / 2 / -1;
		margin: 0;
		overflow: hidden;
		z-index: 1;

		& > li {
			display: block;
			grid-area: 1 / 1;
			margin: 0;
			opacity: 0;
			transition: opacity calc(1s / 4);
			z-index: 0;
		}
	}
	&:not(:focus-within) > ul:not(* + *) > li:has(> label > input:checked),
	&:has(> ul > li:focus-within:nth-child(1)) > ul:not(* + *) > li:nth-child(1),
	&:has(> ul > li:focus-within:nth-child(2)) > ul:not(* + *) > li:nth-child(2),
	&:has(> ul > li:focus-within:nth-child(3)) > ul:not(* + *) > li:nth-child(3),
	&:has(> ul > li:focus-within:nth-child(4)) > ul:not(* + *) > li:nth-child(4),
	&:has(> ul > li:focus-within:nth-child(5)) > ul:not(* + *) > li:nth-child(5),
	&:has(> ul > li:focus-within:nth-child(6)) > ul:not(* + *) > li:nth-child(6),
	&:has(> ul > li:focus-within:nth-child(7)) > ul:not(* + *) > li:nth-child(7),
	&:has(> ul > li:focus-within:nth-child(8)) > ul:not(* + *) > li:nth-child(8) {
		opacity: 1;
	}
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(1) > label > input:checked), :has(> ul > li:focus-within:nth-child(1))) > ul:is(* + *) > li:nth-child(1),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(2) > label > input:checked), :has(> ul > li:focus-within:nth-child(2))) > ul:is(* + *) > li:nth-child(2),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(3) > label > input:checked), :has(> ul > li:focus-within:nth-child(3))) > ul:is(* + *) > li:nth-child(3),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(4) > label > input:checked), :has(> ul > li:focus-within:nth-child(4))) > ul:is(* + *) > li:nth-child(4),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(5) > label > input:checked), :has(> ul > li:focus-within:nth-child(5))) > ul:is(* + *) > li:nth-child(5),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(6) > label > input:checked), :has(> ul > li:focus-within:nth-child(6))) > ul:is(* + *) > li:nth-child(6),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(7) > label > input:checked), :has(> ul > li:focus-within:nth-child(7))) > ul:is(* + *) > li:nth-child(7),
	&:is(:not(:focus-within):has(> ul:not(* + *) > li:nth-child(8) > label > input:checked), :has(> ul > li:focus-within:nth-child(8))) > ul:is(* + *) > li:nth-child(8) {
		opacity: 1;
		z-index: 1;
	}
	&:not([class*="__div-carousel__transition-move-"]) > ul:is(* + *) > li {
		--opacity_1: 0;
		--opacity_3: 0;
		--z-index_2: 1;
	}
	&.__div-carousel__transition-rotate-x > ul:is(* + *) > li {
		--transform_1: rotateX(-180deg);
		--transform_2: rotateX(0deg);
		--transform_3: rotateX(180deg);
	}
	&.__div-carousel__transition-rotate-y > ul:is(* + *) > li {
		--transform_1: rotateY(-180deg);
		--transform_2: rotateY(0deg);
		--transform_3: rotateY(180deg);
	}
	&.__div-carousel__transition-skew-x > ul:is(* + *) > li {
		--transform_1: skewX(180deg);
		--transform_2: skewX(0deg);
		--transform_3: skewX(-180deg);
	}
	&.__div-carousel__transition-skew-y > ul:is(* + *) > li {
		--transform_1: skewY(-180deg);
		--transform_2: skewY(0deg);
		--transform_3: skewY(180deg);
	}
	&.__div-carousel__transition-zoom-out > ul:is(* + *) > li {
		--transform_1: scale(2);
		--transform_2: scale(1);
		--transform_3: scale(0);
	}
	&.__div-carousel__transition-zoom-in > ul:is(* + *) > li {
		--transform_1: scale(0);
		--transform_2: scale(1);
		--transform_3: scale(2);
	}
	&.__div-carousel__transition-move-rl > ul:is(* + *) > li {
		--transform_1: translateX(100%);
		--transform_2: translateX(0%);
		--transform_3: translateX(-100%);
	}
	&.__div-carousel__transition-move-lr > ul:is(* + *) > li {
		--transform_1: translateX(-100%);
		--transform_2: translateX(0%);
		--transform_3: translateX(100%);
	}
	&.__div-carousel__transition-move-bt > ul:is(* + *) > li {
		--transform_1: translateY(100%);
		--transform_2: translateY(0%);
		--transform_3: translateY(-100%);
	}
	&.__div-carousel__transition-move-tb > ul:is(* + *) > li {
		--transform_1: translateY(-100%);
		--transform_2: translateY(0%);
		--transform_3: translateY(100%);
	}
	&.__div-carousel__stacked-ctrls > ul:is(* + *) {
		grid-row: 1 / 3;
	}
	@media (prefers-reduced-motion: no-preference) {
		&:not(:focus-within) > ul > li {
			animation: var(--keyframes) calc(var(--time) * var(--has-nth)) calc(var(--time) * var(--nth) - var(--time) * (var(--has-nth) + 0.1)) var(--easing) infinite both;
		}
	}
}

/**
 * form[class*="__form__"]
 */
.__form__validate :is(input, select, textarea):is([min], [max], [step], [minlength], [maxlength], [pattern], :required):not(:focus-visible) {
	outline: solid var(--line_xf) transparent;
	outline-offset: var(--line_xf);

	&:valid {
		outline-color: var(--green);
	}
	&:invalid {
		outline-color: var(--red);
	}
}

/**
 * [class*="__button__"]:is(input, button, a):is([style~="--background--:"], [style~="--border-width--:"], [style~="--border-color--:"], [style~="--border-radius--:"], [style~="--color--:"], [style~="--inline-size--:"], [style~="--padding-block--:"], [style~="--padding-inline--:"])?
 */
[class*="__button__"] {
	--background--: none;
	--border-width--: var(--line_xf);
	--border-color--: currentcolor;
	--border-radius--: calc(var(--border-width--) * 2);
	--color--: inherit;
	--padding-block--: calc(0.5lh - 0.5em);
	--padding-inline--: calc(2lh - 2em);
	appearance: none;
	backdrop-filter: blur(2px);
	background: var(--background--);
	border: solid var(--border-width--) var(--border-color--);
	border-radius: var(--border-radius--);
	color: var(--color--);
	display: inline-block;
	font-weight: bolder;
	max-inline-size: 100%;
	isolation: isolate;
	margin-block: calc(0.5lh - 0.5em);
	padding-block: var(--padding-block--);
	padding-inline: var(--padding-inline--);
	text-align: center;
	text-decoration: none;
	text-wrap: balance;
	text-wrap: pretty;
	vertical-align: middle;

	&[style~="--background--:"] {
		border-color: transparent;
	}
	&:not(:active, :disabled) {
		transition: box-shadow calc(1s / 4);

		&:hover {
			box-shadow: var(--elev_m) var(--dark-light);
			z-index: 1;
		}
	}
	&:disabled {
		opacity: var(--alpha_m);
	}
}

/**
 * label[class*="__label-text__"] > [class*="__text__"]:is(input, textarea)
 * label[class*="__label-file__"] > input[type="file"][class*="__file__"]
 * label[class*="__label-select__"] > select[class*="__select__"]
 */
[class*="__text__"], [class*="__file__"], [class*="__select__"] {
	appearance: none;
	background: none;
	border: solid var(--line_xf) var(--sheer-text);
	border-radius: var(--radius_xs);
	color: inherit;
	margin-block: calc(0.5lh - 0.5em);
	padding-block: calc(0.5lh - 0.5em);
	padding-inline: calc(1lh - 1em);

	&:disabled {
		opacity: var(--alpha_m);
	}
}
[class*="__text__"]:not([cols], [size]), [class*="__file__"], [class*="__select__"]:is([multiple], [size]) {
	inline-size: 100%;
}
[class*="__file__"]::file-selector-button {
	display: none;
}
[class*="__select__"]:is(:not([multiple], [size]), [size="1"]) {
	* {
		background: Field;
		color: FieldText;
	}
	:disabled {
		color: GrayText;
	}
}

/**
 * label[class*="__label-range__"] > input[type="range"][class*="__range__"]
 */
@supports selector(::-webkit-slider-thumb) or selector(::-moz-range-thumb) {
	[class*="__range__"] {
		--border: solid var(--line_xf);
		--border-radius: 1e6px;
		--is-rtl: -1;
		--box-shadow: calc((1e6px + var(--line_xf) + var(--size)) * var(--is-rtl)) 0 0 1e6px var(--blue), calc((1e6px + var(--line_xf) + var(--size)) * var(--is-rtl) * -1) 0 0 1e6px var(--sheerer-text);
		--x: calc(var(--line_m) / 2);
		--clip-path: polygon(0% calc(var(--x) * -1), 100% calc(var(--x) * -1), 100% calc(50% - var(--x)), calc(100% + 1e6px) calc(50% - var(--x)), calc(100% + 1e6px) calc(50% + var(--x)), 100% calc(50% + var(--x)), 100% calc(100% + var(--x)), 0% calc(100% + var(--x)), 0% calc(50% - var(--x)), calc(0% - 1e6px) calc(50% - var(--x)), calc(0% - 1e6px) calc(50% + var(--x)), 0% calc(50% + var(--x)));
		--size: 1rem;
		appearance: none;
		background: none;
		block-size: var(--size);
		color: inherit;
		inline-size: 100%;
		overflow: hidden;

		&::-webkit-slider-thumb {
			appearance: none;
			block-size: var(--size);
			border: var(--border);
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			clip-path: var(--clip-path);
			inline-size: var(--size);
		}
		&::-moz-range-thumb {
			background: none;
			block-size: var(--size);
			border: var(--border);
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			box-sizing: border-box;
			clip-path: var(--clip-path);
			color: inherit;
			inline-size: var(--size);
		}
		&:disabled {
			opacity: var(--alpha_m);
		}
		&:dir(rtl) {
			--is-rtl: 1;
		}
	}
}

/**
 * label[class*="__label-color__"] > input[type="color"][class*="__color__"]
 */
@supports selector(::-webkit-color-swatch) or selector(::-moz-color-swatch) {
	[class*="__color__"] {
		appearance: none;
		background: none;
		block-size: 1lh;
		border: solid var(--line_xf);
		border-radius: 1e6px;
		color: inherit;
		inline-size: 1lh;
		padding: 0.125rem;

		&::-webkit-color-swatch-wrapper {
			border-radius: inherit;
			padding: 0;
		}
		&::-webkit-color-swatch {
			border: none;
			border-radius: inherit;
		}
		&::-moz-color-swatch {
			border: none;
			border-radius: inherit;
			min-block-size: 0;
			min-inline-size: 0;
		}
		&:disabled {
			opacity: var(--alpha_m);
		}
	}
}

/**
 * span[class*="__span-checkbox__"]
 * > label[class*="__label-checkbox__"]
 *   > input[type="checkbox"][class*="__checkbox__"]
 *   ( > span )?
 * span[class*="__span-radio__"]
 * > label[class*="__label-radio__"]
 *   > input[type="radio"][class*="__radio__"]
 *   ( > span )?
 */
[class*="__checkbox__"], [class*="__radio__"] {
	appearance: none;
	background: none;
	block-size: 1rem;
	border: solid var(--line_xf);
	color: inherit;
	inline-size: 1rem;
	margin-block: max(0px, 0.5lh - 0.5em);
	vertical-align: top;

	&:checked::before {
		block-size: 100%;
		box-shadow: 0 0 0 1rem currentcolor inset;
		content: "";
		display: block;
	}
	&:disabled {
		opacity: var(--alpha_m);
	}
	&+span::before {
		content: "\20";
	}
}
[class*="__checkbox__"] {
	border-radius: var(--radius_xs);
	padding: 0.0625rem;

	&:checked::before {
		clip-path: polygon(0 37.5%, 31.25% 68.75%, 100% 0, 100% 31.25%, 31.25% 100%, 0 68.75%);
	}
}
[class*="__radio__"] {
	border-radius: 1e6px;
	padding: 0.125rem;

	&:checked::before {
		border-radius: inherit;
	}
}
[class*="__span-checkbox__"], [class*="__span-radio__"] {
	--column-width: 100%;
	border: solid var(--line_xf) var(--sheer-text);
	border-radius: var(--radius_xs);
	display: inline-grid;
	grid: auto-flow / repeat(auto-fill, minmax(min(var(--column-width), 100%), 1fr));
	gap: 0 1em;
	inline-size: 100%;
	margin-block: calc(0.5lh - 0.5em);
	padding-block: calc(0.5lh - 0.5em);
	padding-inline: calc(1lh - 1em);

	&:not(:has(:enabled)) {
		opacity: var(--alpha_m);

		:disabled {
			opacity: 1;
		}
	}
}

/**
 * progress[class*="__progress__"]
 */
@supports selector(::-webkit-progress-value) or selector(::-moz-progress-bar) {
	[class*="__progress__"] {
		appearance: none;
		background: none;
		block-size: 1rem;
		border: solid var(--line_xf) var(--sheer-text);
		border-radius: 1e6px;
		color: inherit;
		inline-size: 100%;
		padding: 0.125rem;

		&::-webkit-progress-inner-element,
		&::-webkit-progress-bar,
		&::-webkit-progress-value {
			background: none;
			border-radius: inherit;
		}
		&::-moz-progress-bar {
			background: none;
			border-radius: inherit;
		}
		&:where([value]){
			&::-webkit-progress-value {
				background: var(--blue);
			}
			&::-moz-progress-bar {
				background: var(--blue);
			}
		}
	}
}

/**
 * meter[class*="__meter__"]
 */
@supports (selector(::-webkit-meter-bar) and selector(::-webkit-meter-optimum-value) and selector(::-webkit-meter-suboptimum-value) and selector(::-webkit-meter-even-less-good-value)) or (selector(::-moz-meter-bar) and selector(:-moz-meter-optimum) and selector(:-moz-meter-sub-optimum) and selector(:-moz-meter-sub-sub-optimum)) {
	[class*="__meter__"] {
		appearance: none;
		background: none;
		block-size: 1rem;
		border: solid var(--line_xf) var(--sheer-text);
		border-radius: 1e6px;
		color: inherit;
		inline-size: 100%;
		padding: 0.125rem;

		&::-webkit-meter-inner-element {
			border-radius: inherit;
			display: block;
		}
		&::-webkit-meter-bar {
			background: none;
			border-radius: inherit;
			position: static;
		}
		&::-webkit-meter-optimum-value {
			background: var(--green);
			border-radius: inherit;
		}
		&::-webkit-meter-suboptimum-value {
			background: var(--yellow);
			border-radius: inherit;
		}
		&::-webkit-meter-even-less-good-value {
			background: var(--red);
			border-radius: inherit;
		}
		&::-moz-meter-bar {
			border-radius: inherit;
		}
		&:-moz-meter-optimum::-moz-meter-bar {
			background: var(--green);
		}
		&:-moz-meter-sub-optimum::-moz-meter-bar {
			background: var(--yellow);
		}
		&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
			background: var(--red);
		}
	}
}