:where(html) {
	--gray-0-hsl: 210 17% 98%;
	--gray-1-hsl: 210 17% 95%;
	--gray-2-hsl: 210 16% 93%;
	--gray-3-hsl: 210 14% 89%;
	--gray-4-hsl: 210 14% 83%;
	--gray-5-hsl: 210 11% 71%;
	--gray-6-hsl: 210 7% 56%;
	--gray-7-hsl: 210 9% 31%;
	--gray-8-hsl: 210 10% 23%;
	--gray-9-hsl: 210 11% 15%;
	--gray-10-hsl: 214 14% 10%;
	--gray-11-hsl: 216 16% 6%;
	--gray-12-hsl: 210 40% 2%
}

:where(.btn, button, input:is([type=button], [type=submit], [type=reset])),
:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
	--_accent: initial;
	--_text: initial;
	--_size: initial;
	--_bg-light: #fff;
	--_bg-dark: var(--surface-3);
	--_bg: var(--_bg-light);
	--_border: var(--surface-3);
	--_highlight-size: 0;
	--_highlight-light: hsl(var(--gray-5-hsl)/25%);
	--_highlight-dark: hsl(var(--gray-12-hsl)/25%);
	--_highlight: var(--_highlight-light);
	--_ink-shadow-light: 0 1px 0 var(--gray-3);
	--_ink-shadow-dark: 0 1px 0 var(--surface-1);
	--_ink-shadow: var(--_ink-shadow-light);
	--_icon-size: var(--size-relative-7);
	--_icon-color: var(--_accent, var(--link));
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	align-items: center;
	background: var(--_bg);
	border: var(--border-size-1) solid var(--_border);
	border-radius: 0;
	box-shadow: var(--shadow-1), 0 1px var(--surface-3), 0 0 0 var(--_highlight-size) var(--_highlight);
	color: var(--_text);
	display: inline-flex;
	font-size: var(--_size);
	font-weight: var(--font-weight-7);
	gap: var(--size-2);
	justify-content: center;
	padding-block: .75ch;
	padding-inline: var(--size-relative-6);
	text-align: center;
	text-shadow: var(--_ink-shadow);
	transition: border-color .5s var(--ease-3);
	user-select: none
}

@media (prefers-color-scheme:dark) {
	:where(.btn, button, input:is([type=button], [type=submit], [type=reset])),
	:where(input[type=file])::-webkit-file-upload-button,
	:where(input[type=file])::file-selector-button {
		--_highlight: var(--_highlight-dark);
		--_bg: var(--_bg-dark);
		--_ink-shadow: var(--_ink-shadow-dark)
	}
}

@media (prefers-reduced-motion:no-preference) {
	:where(.btn, button, input:is([type=button], [type=submit], [type=reset])),
	:where(input[type=file])::-webkit-file-upload-button,
	:where(input[type=file])::file-selector-button {
		transition: border-color .5s var(--ease-3), box-shadow 145ms var(--ease-4), outline-offset 145ms var(--ease-4)
	}
}

:where(.btn, button, input:is([type=button], [type=submit], [type=reset]))[disabled] {
	--_bg: none;
	--_text: var(--gray-6);
	box-shadow: var(--shadow-1);
	cursor: not-allowed
}

@media (prefers-color-scheme:dark) {
	:where(.btn, button, input:is([type=button], [type=submit], [type=reset]))[disabled] {
		--_text: var(--gray-5)
	}
}

:where(.btn, button, input:is([type=button], [type=submit], [type=reset])):where(:not(:active):hover) {
	--_highlight-size: var(--size-2);
	transition-duration: .25s
}

:where(.btn, button, input:is([type=button], [type=submit], [type=reset]))>:where(svg) {
	block-size: var(--_icon-size);
	filter: drop-shadow(var(--_ink-shadow));
	flex-shrink: 0;
	inline-size: var(--_icon-size)
}

:where(.btn, button, input:is([type=button], [type=submit], [type=reset]))>:where(svg>*) {
	stroke: var(--_icon-color);
	stroke-width: var(--border-size-2)
}

:where([type=submit], form button:not([type], [disabled])) {
	--_text: var(--_accent, var(--link))
}

:where([type=reset]) {
	--_text: var(--red-6);
	--_border: var(--red-3)
}

:where([type=reset]):focus-visible {
	outline-color: var(--red-6)
}

@media (prefers-color-scheme:dark) {
	:where([type=reset]) {
		--_text: var(--red-2);
		--_border: var(--surface-3)
	}
}

:where([type=submit], [type=reset], form button:not([type])):is(:hover, :focus-visible):not([disabled]) {
	--_border: currentColor
}

:where(input[type=file]) {
	align-self: flex-start;
	border: var(--border-size-1) solid var(--surface-2);
	border-radius: var(--radius-2);
	box-shadow: var(--inner-shadow-4);
	color: var(--text-2);
	cursor: auto;
	max-inline-size: 100%;
	padding: 0
}

:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
	cursor: pointer;
	margin-inline-end: var(--size-relative-6)
}

@media (prefers-color-scheme:dark) {
	:where([disabled]),
	:where([type=reset]),
	:where([type=submit]),
	:where(form button:not([type=button])) {
		--_bg: var(--surface-1)
	}
}