@layer base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		margin: 0;
		background: var(--page);
		color: var(--ink);
		font-family: var(--font);
		font-size: var(--fs-base);
		line-height: var(--lh-body);
		font-kerning: normal;
		text-rendering: optimizeLegibility;
		min-height: 100vh;
	}

	h1,
	h2,
	h3,
	h4 {
		margin: 0;
		line-height: var(--lh-snug);
		font-weight: 700;
		letter-spacing: -0.015em;
		text-wrap: balance;
	}

	h1 {
		font-size: var(--fs-xl);
		line-height: var(--lh-tight);
		letter-spacing: -0.025em;
	}

	h2 {
		font-size: var(--fs-lg);
	}

	h3 {
		font-size: var(--fs-md);
	}

	p {
		margin: 0;
		text-wrap: pretty;
	}

	a {
		color: var(--link);
		text-underline-offset: 0.18em;
		text-decoration-thickness: 0.08em;
	}

	a:hover {
		text-decoration-thickness: 0.14em;
	}

	img,
	svg {
		display: block;
		max-width: 100%;
	}

	ul,
	ol {
		margin: 0;
		padding: 0;
	}

	hr {
		border: 0;
		border-top: 1px solid var(--rule);
		margin: var(--s-5) 0;
	}

	:focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--focus);
		border-radius: var(--r-control);
	}

	::selection {
		background: var(--accent);
		color: var(--on-accent);
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.skip-link {
		position: absolute;
		left: var(--s-3);
		top: -4rem;
		z-index: 100;
		padding: var(--s-2) var(--s-4);
		background: var(--surface);
		color: var(--ink);
		border-radius: var(--r-control);
		box-shadow: var(--shadow-float);
	}

	.skip-link:focus {
		top: var(--s-3);
	}

	.container {
		width: min(100% - 2 * var(--s-4), var(--container));
		margin-inline: auto;
	}

	.icon {
		width: 1.25em;
		height: 1.25em;
		flex: none;
		stroke: currentColor;
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.icon-sprite {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
	}

	.muted {
		color: var(--ink-muted);
	}

	.num {
		font-variant-numeric: tabular-nums;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.001ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.001ms !important;
			scroll-behavior: auto !important;
		}
	}
}