@layer reset, theme;

@layer reset {
	:root {
		color-scheme: dark;
		overflow-y: scroll;
		scroll-behavior: smooth;
		scrollbar-width: thin;
		scrollbar-color: dark;
		font: normal normal normal 62.5% / 1.35 system-ui;
		interpolate-size: allow-keywords;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
	}

	body {
		font-size: 2rem;
	}

	input,
	select,
	textarea,
	button {
		font: inherit;
	}

	:is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, table, form, details):not(:where(:last-child)) {
		margin-block-end: 2rem;
	}

	:is(p, ul, ol, blockquote, pre, table, form, details):has(+ :is(h1, h2, h3, h4, h5, h6)) {
		margin-block-end: 4rem;
	}

	a {
		text-decoration: none;
		color: currentColor;
	}

	ul,
	ol {
		padding-inline-start: 3rem;

		&[role="list"] {
			list-style: none;
			padding: 0;

			li {
				margin: 0;
			}
		}
	}

	img,
	picture,
	figure,
	iframe,
	video,
	svg {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
	}

	svg * {
		transform-box: fill-box;
		transform-origin: center;
	}

	[popover] {
		margin: auto;
	}

	@media (prefers-reduced-motion: no-preference) {
		@view-transition {
			navigation: auto;
		}
	}
}

@layer theme {
}