:where(html) {
	-webkit-text-size-adjust: none;
	accent-color: var(--accent);
	block-size: 100%;
	caret-color: var(--link);
	color-scheme: light;
	font-family: var(--font-sans);
	line-height: var(--font-lineheight-3);
	scrollbar-color: var(--scrollthumb-color) transparent;
}

:where(a[href]) {
	color: var(--link);
	text-underline-position: under;

	&:hover {
		text-decoration-thickness: 0.2em;
	}
}

:where(a[href]):where(:visited) {
	color: var(--link);
}
:focus-visible {
	outline-color: var(--link);
}

*,
:after,
:before {
	box-sizing: border-box;
}
:where(:not(dialog)) {
	margin: 0;
}
:where(:not(fieldset, progress, meter)) {
	background-origin: border-box;
	background-repeat: no-repeat;
	border-style: solid;
	border-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
	:where(html) {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:where(:focus-visible) {
		transition: outline-offset 145ms var(--ease-2);
	}
	:where(:not(:active):focus-visible) {
		transition-duration: 0.25s;
	}
}

:where(:not(:active):focus-visible) {
	outline-offset: 6px;
}

:where(body) {
	min-block-size: 100%;
}

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
	font-weight: var(--font-weight-9);
	line-height: var(--font-lineheight-1);
}

:where(h1) {
	font-size: var(--font-size-8);
	max-inline-size: var(--size-header-1);
}
:where(h2) {
	font-size: var(--font-size-6);
	max-inline-size: var(--size-header-2);
}
:where(h3) {
	font-size: var(--font-size-5);
}
:where(h4) {
	font-size: var(--font-size-4);
}
:where(h5) {
	font-size: var(--font-size-3);
}
:where(h3, h4, h5, h6, dt) {
	max-inline-size: var(--size-header-3);
}
:where(p, ul, ol, dl, h6) {
	font-size: var(--font-size-2);
}
:where(a, u, ins, abbr) {
	text-underline-offset: 1px;
}
@supports (-moz-appearance: none) {
	:where(a, u, ins, abbr) {
		text-underline-offset: 2px;
	}
}

:where(
		a[href],
		area,
		button,
		input:not(
				[type='text'],
				[type='email'],
				[type='number'],
				[type='password'],
				[type=''],
				[type='tel'],
				[type='url']
			),
		label[for],
		select,
		summary,
		[tabindex]:not([tabindex*='-'])
	) {
	cursor: pointer;
}

:where(
		a[href],
		area,
		button,
		input,
		label[for],
		select,
		summary,
		textarea,
		[tabindex]:not([tabindex*='-'])
	) {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

:where(a):where([href]) {
	text-decoration-color: inherit;
}

:where(a):where([href]):where(:visited) {
	text-decoration-color: inherit;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
	display: block;
}

:where(img, svg, video) {
	block-size: auto;
	max-inline-size: 100%;
}

:where(input, button, textarea, select),
:where(input[type='file'])::-webkit-file-upload-button {
	color: inherit;
	font: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}
::placeholder {
	color: var(--gray-7);
	opacity: 0.75;
}
:where(input:not([type='range']), textarea) {
	padding-block: var(--size-1);
	padding-inline: var(--size-2);
}
:where(select) {
	padding-block: 0.75ch;
	padding-inline: var(--size-relative-4) 0;
}
:where(textarea, select, input:not([type='button'], [type='submit'], [type='reset'])) {
	background-color: var(--surface-2);
	border-radius: var(--radius-2);
}
:where(textarea) {
	resize: block;
}
:where(input[type='checkbox'], input[type='radio']) {
	block-size: var(--size-3);
	inline-size: var(--size-3);
}
:where(svg:not([width])) {
	inline-size: var(--size-10);
}
:where(code, kbd, samp, pre) {
	font-family: var(--font-mono);
}
:where(:not(pre) > code, kbd) {
	white-space: nowrap;
}
:where(pre) {
	direction: ltr;
	max-inline-size: max-content;
	min-inline-size: 0;
	white-space: pre;
	writing-mode: lr;
}
:where(:not(pre) > code) {
	background: var(--surface-3);
	border-radius: var(--radius-2);
	padding: var(--size-1) var(--size-2);
	writing-mode: lr;
}
:where(kbd, var) {
	border-color: var(--surface-4);
	border-radius: var(--radius-2);
	border-width: var(--border-size-1);
	padding: var(--size-1) var(--size-2);
}
:where(mark) {
	border-radius: var(--radius-2);
	padding-inline: var(--size-1);
}
:where(ol, ul) {
	padding-inline-start: var(--size-8);
}
:where(li) {
	padding-inline-start: var(--size-2);
}
:where(li, dd, figcaption) {
	max-inline-size: var(--size-content-2);
}
:where(p) {
	text-wrap: pretty;
	max-inline-size: var(--size-content-3);
}
:where(dt, summary) {
	font-weight: var(--font-weight-7);
}
:where(dt:not(:first-of-type)) {
	margin-block-start: var(--size-5);
}
:where(small) {
	font-size: max(0.5em, var(--font-size-0));
	max-inline-size: var(--size-content-1);
}
:where(hr) {
	background-color: var(--surface-3);
	height: var(--border-size-2);
	margin-block: var(--size-fluid-5);
}
:where(figure) {
	display: grid;
	gap: var(--size-2);
	place-items: center;
}
:where(figure) > :where(figcaption) {
	text-wrap: balance;
	font-size: var(--font-size-1);
}
:where(blockquote, :not(blockquote) > cite) {
	border-inline-start-width: var(--border-size-3);
}
:where(blockquote) {
	display: grid;
	gap: var(--size-3);
	max-inline-size: var(--size-content-2);
	padding-block: var(--size-3);
	padding-inline: var(--size-4);
}
:where(:not(blockquote) > cite) {
	padding-inline-start: var(--size-2);
}
:where(summary) {
	background: var(--surface-3);
	border-radius: var(--radius-2);
	margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
	padding: var(--size-2) var(--size-3);
}
:where(details) {
	background: var(--surface-2);
	border-radius: var(--radius-2);
	padding-block: var(--size-2);
	padding-inline: var(--size-3);
}
:where(details[open] > summary) {
	border-end-end-radius: 0;
	border-end-start-radius: 0;
	margin-bottom: var(--size-2);
}
:where(fieldset) {
	border: var(--border-size-1) solid var(--surface-4);
	border-radius: var(--radius-2);
}
:where(del) {
	background: var(--red-9);
	color: var(--red-2);
}
:where(ins) {
	background: var(--green-9);
	color: var(--green-1);
}
:where(abbr) {
	text-decoration-color: var(--blue-5);
}
:where(dialog) {
	background-color: var(--surface-1);
	border-radius: var(--radius-3);
	box-shadow: var(--shadow-6);
	color: inherit;
}
:where(dialog)::backdrop {
	backdrop-filter: blur(25px);
}
:where(html[\:has\(dialog\[open\]\)]) {
	overflow: hidden;
}
:where(html:has(dialog[open])) {
	overflow: hidden;
}
:where(menu) {
	display: flex;
	gap: var(--size-3);
	padding-inline-start: 0;
}
:where(sup) {
	font-size: 0.5em;
}
:where(table) {
	--nice-inner-radius: calc(var(--radius-3) - 2px);
	background: var(--surface-2);
	border: 1px solid var(--surface-2);
	border-radius: var(--radius-3);
	width: fit-content;
}
:where(table[\:not-has\(tfoot\)] tr:last-child td:first-child) {
	border-end-start-radius: var(--nice-inner-radius);
}
:where(table:not(:has(tfoot)) tr:last-child td:first-child) {
	border-end-start-radius: var(--nice-inner-radius);
}
:where(table[\:not-has\(tfoot\)] tr:last-child td:last-child) {
	border-end-end-radius: var(--nice-inner-radius);
}
:where(table:not(:has(tfoot)) tr:last-child td:last-child) {
	border-end-end-radius: var(--nice-inner-radius);
}
:where(table thead tr:first-child th:first-child) {
	border-start-start-radius: var(--nice-inner-radius);
}
:where(table thead tr:first-child th:last-child) {
	border-start-end-radius: var(--nice-inner-radius);
}
:where(tfoot tr:last-child :is(th, td):first-of-type) {
	border-end-start-radius: var(--nice-inner-radius);
}
:where(tfoot tr:last-child :is(th, td):last-of-type) {
	border-end-end-radius: var(--nice-inner-radius);
}
:where(th) {
	background-color: var(--surface-2);
	color: var(--text-1);
}
:where(table :is(a, button, [contenteditable]):is(:focus-visible)) {
	outline-offset: -2px;
}
:where(td) {
	text-wrap: pretty;
	background: var(--surface-1);
	max-inline-size: var(--size-content-2);
}
:where(td, th) {
	padding: var(--size-2);
	text-align: left;
}
:where(:is(td, th):not([align])) {
	text-align: center;
}
:where(thead) {
	border-collapse: collapse;
}
:where(table tr:hover td),
:where(tbody tr:nth-child(2n):hover td) {
	background-color: var(--gray-10);
}
@media (prefers-color-scheme: light) {
	:where(table tr:hover td),
	:where(tbody tr:nth-child(2n):hover td) {
		background-color: #fff;
	}
}
:where(table > caption) {
	margin: var(--size-3);
}
:where(tfoot button) {
	padding-block: var(--size-1);
	padding-inline: var(--size-3);
}
@media (prefers-color-scheme: dark) {
	:where(textarea, select, input:not([type='button'], [type='submit'], [type='reset'])) {
		background-color: #171a1c;
	}
	:where(dialog) {
		background-color: var(--surface-2);
	}
	::placeholder {
		color: var(--gray-6);
	}
}
