:root {
	--dw-color-pink: oklch(50% 0.2 345deg);
	--dw-color-pink-base: 0.05;
	--dw-color-pink-10: oklch(
		from var(--dw-color-pink) 10% calc(var(--dw-color-pink-base) + (sin(1 * pi) * c)) h
	);
	--dw-color-pink-20: oklch(
		from var(--dw-color-pink) 20% calc(var(--dw-color-pink-base) + (sin(0.9 * pi) * c)) h
	);
	--dw-color-pink-30: oklch(
		from var(--dw-color-pink) 30% calc(var(--dw-color-pink-base) + (sin(0.8 * pi) * c)) h
	);
	--dw-color-pink-40: oklch(
		from var(--dw-color-pink) 40% calc(var(--dw-color-pink-base) + (sin(0.7 * pi) * c)) h
	);
	--dw-color-pink-50: oklch(
		from var(--dw-color-pink) 50% calc(var(--dw-color-pink-base) + (sin(0.6 * pi) * c)) h
	);
	--dw-color-pink-60: oklch(
		from var(--dw-color-pink) 60% calc(var(--dw-color-pink-base) + (sin(0.5 * pi) * c)) h
	);
	--dw-color-pink-70: oklch(
		from var(--dw-color-pink) 70% calc(var(--dw-color-pink-base) + (sin(0.4 * pi) * c)) h
	);
	--dw-color-pink-80: oklch(
		from var(--dw-color-pink) 80% calc(var(--dw-color-pink-base) + (sin(0.3 * pi) * c)) h
	);
	--dw-color-pink-90: oklch(
		from var(--dw-color-pink) 90% calc(var(--dw-color-pink-base) + (sin(0.2 * pi) * c)) h
	);
	--dw-color-pink-100: oklch(
		from var(--dw-color-pink) 100% calc(var(--dw-color-pink-base) + (sin(0.1 * pi) * c)) h
	);
	--dw-color-red: oklch(50% 0.2 15deg);
	--dw-color-red-base: 0.05;
	--dw-color-red-10: oklch(from var(--dw-color-red) 10% calc(var(--dw-color-red-base) + (sin(1 * pi) * c)) h);
	--dw-color-red-20: oklch(
		from var(--dw-color-red) 20% calc(var(--dw-color-red-base) + (sin(0.9 * pi) * c)) h
	);
	--dw-color-red-30: oklch(
		from var(--dw-color-red) 30% calc(var(--dw-color-red-base) + (sin(0.8 * pi) * c)) h
	);
	--dw-color-red-40: oklch(
		from var(--dw-color-red) 40% calc(var(--dw-color-red-base) + (sin(0.7 * pi) * c)) h
	);
	--dw-color-red-50: oklch(
		from var(--dw-color-red) 50% calc(var(--dw-color-red-base) + (sin(0.6 * pi) * c)) h
	);
	--dw-color-red-60: oklch(
		from var(--dw-color-red) 60% calc(var(--dw-color-red-base) + (sin(0.5 * pi) * c)) h
	);
	--dw-color-red-70: oklch(
		from var(--dw-color-red) 70% calc(var(--dw-color-red-base) + (sin(0.4 * pi) * c)) h
	);
	--dw-color-red-80: oklch(
		from var(--dw-color-red) 80% calc(var(--dw-color-red-base) + (sin(0.3 * pi) * c)) h
	);
	--dw-color-red-90: oklch(
		from var(--dw-color-red) 90% calc(var(--dw-color-red-base) + (sin(0.2 * pi) * c)) h
	);
	--dw-color-red-100: oklch(
		from var(--dw-color-red) 100% calc(var(--dw-color-red-base) + (sin(0.1 * pi) * c)) h
	);
	--dw-color-orange: oklch(50% 0.2 45deg);
	--dw-color-orange-base: 0.05;
	--dw-color-orange-10: oklch(
		from var(--dw-color-orange) 10% calc(var(--dw-color-orange-base) + (sin(1 * pi) * c)) h
	);
	--dw-color-orange-20: oklch(
		from var(--dw-color-orange) 20% calc(var(--dw-color-orange-base) + (sin(0.9 * pi) * c)) h
	);
	--dw-color-orange-30: oklch(
		from var(--dw-color-orange) 30% calc(var(--dw-color-orange-base) + (sin(0.8 * pi) * c)) h
	);
	--dw-color-orange-40: oklch(
		from var(--dw-color-orange) 40% calc(var(--dw-color-orange-base) + (sin(0.7 * pi) * c)) h
	);
	--dw-color-orange-50: oklch(
		from var(--dw-color-orange) 50% calc(var(--dw-color-orange-base) + (sin(0.6 * pi) * c)) h
	);
	--dw-color-orange-60: oklch(
		from var(--dw-color-orange) 60% calc(var(--dw-color-orange-base) + (sin(0.5 * pi) * c)) h
	);
	--dw-color-orange-70: oklch(
		from var(--dw-color-orange) 70% calc(var(--dw-color-orange-base) + (sin(0.4 * pi) * c)) h
	);
	--dw-color-orange-80: oklch(
		from var(--dw-color-orange) 80% calc(var(--dw-color-orange-base) + (sin(0.3 * pi) * c)) h
	);
	--dw-color-orange-90: oklch(
		from var(--dw-color-orange) 90% calc(var(--dw-color-orange-base) + (sin(0.2 * pi) * c)) h
	);
	--dw-color-orange-100: oklch(
		from var(--dw-color-orange) 100% calc(var(--dw-color-orange-base) + (sin(0.1 * pi) * c)) h
	);
	--dw-color-yellow: oklch(50% 0.2 90deg);
	--dw-color-yellow-base: 0.05;
	--dw-color-yellow-10: oklch(
		from var(--dw-color-yellow) 10% calc(var(--dw-color-yellow-base) + (sin(1 * pi) * c)) h
	);
	--dw-color-yellow-20: oklch(
		from var(--dw-color-yellow) 20% calc(var(--dw-color-yellow-base) + (sin(0.9 * pi) * c)) h
	);
	--dw-color-yellow-30: oklch(
		from var(--dw-color-yellow) 30% calc(var(--dw-color-yellow-base) + (sin(0.8 * pi) * c)) h
	);
	--dw-color-yellow-40: oklch(
		from var(--dw-color-yellow) 40% calc(var(--dw-color-yellow-base) + (sin(0.7 * pi) * c)) h
	);
	--dw-color-yellow-50: oklch(
		from var(--dw-color-yellow) 50% calc(var(--dw-color-yellow-base) + (sin(0.6 * pi) * c)) h
	);
	--dw-color-yellow-60: oklch(
		from var(--dw-color-yellow) 60% calc(var(--dw-color-yellow-base) + (sin(0.5 * pi) * c)) h
	);
	--dw-color-yellow-70: oklch(
		from var(--dw-color-yellow) 70% calc(var(--dw-color-yellow-base) + (sin(0.4 * pi) * c)) h
	);
	--dw-color-yellow-80: oklch(
		from var(--dw-color-yellow) 80% calc(var(--dw-color-yellow-base) + (sin(0.3 * pi) * c)) h
	);
	--dw-color-yellow-90: oklch(
		from var(--dw-color-yellow) 90% calc(var(--dw-color-yellow-base) + (sin(0.2 * pi) * c)) h
	);
	--dw-color-yellow-100: oklch(
		from var(--dw-color-yellow) 100% calc(var(--dw-color-yellow-base) + (sin(0.1 * pi) * c)) h
	);
	--dw-color-green: oklch(50% 0.2 135deg);
	--dw-color-green-base: 0.05;
	--dw-color-green-10: oklch(
		from var(--dw-color-green) 10% calc(var(--dw-color-green-base) + (sin(1 * pi) * c)) h
	);
	--dw-color-green-20: oklch(
		from var(--dw-color-green) 20% calc(var(--dw-color-green-base) + (sin(0.9 * pi) * c)) h
	);
	--dw-color-green-30: oklch(
		from var(--dw-color-green) 30% calc(var(--dw-color-green-base) + (sin(0.8 * pi) * c)) h
	);
	--dw-color-green-40: oklch(
		from var(--dw-color-green) 40% calc(var(--dw-color-green-base) + (sin(0.7 * pi) * c)) h
	);
	--dw-color-green-50: oklch(
		from var(--dw-color-green) 50% calc(var(--dw-color-green-base) + (sin(0.6 * pi) * c)) h
	);
	--dw-color-green-60: oklch(
		from var(--dw-color-green) 60% calc(var(--dw-color-green-base) + (sin(0.5 * pi) * c)) h
	);
	--dw-color-green-70: oklch(
		from var(--dw-color-green) 70% calc(var(--dw-color-green-base) + (sin(0.4 * pi) * c)) h
	);
	--dw-color-green-80: oklch(
		from var(--dw-color-green) 80% calc(var(--dw-color-green-base) + (sin(0.3 * pi) * c)) h
	);
	--dw-color-green-90: oklch(
		from var(--dw-color-green) 90% calc(var(--dw-color-green-base) + (sin(0.2 * pi) * c)) h
	);
	--dw-color-green-100: oklch(
		from var(--dw-color-green) 100% calc(var(--dw-color-green-base) + (sin(0.1 * pi) * c)) h
	);
	--dw-color-teal: oklch(50% 0.2 190deg);
	--dw-color-teal-base: 0.05;
	--dw-color-teal-10: oklch(
		from var(--dw-color-teal) 10% calc(var(--dw-color-teal-base) + (sin(1 * pi) * c)) h
	);
	--dw-color-teal-20: oklch(
		from var(--dw-color-teal) 20% calc(var(--dw-color-teal-base) + (sin(0.9 * pi) * c)) h
	);
	--dw-color-teal-30: oklch(
		from var(--dw-color-teal) 30% calc(var(--dw-color-teal-base) + (sin(0.8 * pi) * c)) h
	);
	--dw-color-teal-40: oklch(
		from var(--dw-color-teal) 40% calc(var(--dw-color-teal-base) + (sin(0.7 * pi) * c)) h
	);
	--dw-color-teal-50: oklch(
		from var(--dw-color-teal) 50% calc(var(--dw-color-teal-base) + (sin(0.6 * pi) * c)) h
	);
	--dw-color-teal-60: oklch(
		from var(--dw-color-teal) 60% calc(var(--dw-color-teal-base) + (sin(0.5 * pi) * c)) h
	);
	--dw-color-teal-70: oklch(
		from var(--dw-color-teal) 70% calc(var(--dw-color-teal-base) + (sin(0.4 * pi) * c)) h
	);
	--dw-color-teal-80: oklch(
		from var(--dw-color-teal) 80% calc(var(--dw-color-teal-base) + (sin(0.3 * pi) * c)) h
	);
	--dw-color-teal-90: oklch(
		from var(--dw-color-teal) 90% calc(var(--dw-color-teal-base) + (sin(0.2 * pi) * c)) h
	);
	--dw-color-teal-100: oklch(
		from var(--dw-color-teal) 100% calc(var(--dw-color-teal-base) + (sin(0.1 * pi) * c)) h
	);
	--dw-color-blue: oklch(50% 0.2 240deg);
	--dw-color-blue-base: 0.05;
	--dw-color-blue-10: oklch(
		from var(--dw-color-blue) 10% calc(var(--dw-color-blue-base) + (sin(1 * pi) * c)) h
	);
	--dw-color-blue-20: oklch(
		from var(--dw-color-blue) 20% calc(var(--dw-color-blue-base) + (sin(0.9 * pi) * c)) h
	);
	--dw-color-blue-30: oklch(
		from var(--dw-color-blue) 30% calc(var(--dw-color-blue-base) + (sin(0.8 * pi) * c)) h
	);
	--dw-color-blue-40: oklch(
		from var(--dw-color-blue) 40% calc(var(--dw-color-blue-base) + (sin(0.7 * pi) * c)) h
	);
	--dw-color-blue-50: oklch(
		from var(--dw-color-blue) 50% calc(var(--dw-color-blue-base) + (sin(0.6 * pi) * c)) h
	);
	--dw-color-blue-60: oklch(
		from var(--dw-color-blue) 60% calc(var(--dw-color-blue-base) + (sin(0.5 * pi) * c)) h
	);
	--dw-color-blue-70: oklch(
		from var(--dw-color-blue) 70% calc(var(--dw-color-blue-base) + (sin(0.4 * pi) * c)) h
	);
	--dw-color-blue-80: oklch(
		from var(--dw-color-blue) 80% calc(var(--dw-color-blue-base) + (sin(0.3 * pi) * c)) h
	);
	--dw-color-blue-90: oklch(
		from var(--dw-color-blue) 90% calc(var(--dw-color-blue-base) + (sin(0.2 * pi) * c)) h
	);
	--dw-color-blue-100: oklch(
		from var(--dw-color-blue) 100% calc(var(--dw-color-blue-base) + (sin(0.1 * pi) * c)) h
	);
	--dw-color-purple: oklch(50% 0.2 285deg);
	--dw-color-purple-base: 0.05;
	--dw-color-purple-10: oklch(
		from var(--dw-color-purple) 10% calc(var(--dw-color-purple-base) + (sin(1 * pi) * c)) h
	);
	--dw-color-purple-15: oklch(
		from var(--dw-color-purple) 15% calc(var(--dw-color-purple-base) + (sin(1 * pi) * c)) h
	);
	--dw-color-purple-20: oklch(
		from var(--dw-color-purple) 20% calc(var(--dw-color-purple-base) + (sin(0.9 * pi) * c)) h
	);
	--dw-color-purple-30: oklch(
		from var(--dw-color-purple) 30% calc(var(--dw-color-purple-base) + (sin(0.8 * pi) * c)) h
	);
	--dw-color-purple-40: oklch(
		from var(--dw-color-purple) 40% calc(var(--dw-color-purple-base) + (sin(0.7 * pi) * c)) h
	);
	--dw-color-purple-50: oklch(
		from var(--dw-color-purple) 50% calc(var(--dw-color-purple-base) + (sin(0.6 * pi) * c)) h
	);
	--dw-color-purple-60: oklch(
		from var(--dw-color-purple) 60% calc(var(--dw-color-purple-base) + (sin(0.5 * pi) * c)) h
	);
	--dw-color-purple-70: oklch(
		from var(--dw-color-purple) 70% calc(var(--dw-color-purple-base) + (sin(0.4 * pi) * c)) h
	);
	--dw-color-purple-80: oklch(
		from var(--dw-color-purple) 80% calc(var(--dw-color-purple-base) + (sin(0.3 * pi) * c)) h
	);
	--dw-color-purple-90: oklch(
		from var(--dw-color-purple) 90% calc(var(--dw-color-purple-base) + (sin(0.2 * pi) * c)) h
	);
	--dw-color-purple-100: oklch(
		from var(--dw-color-purple) 100% calc(var(--dw-color-purple-base) + (sin(0.1 * pi) * c)) h
	);
	--dw-color-magenta: oklch(50% 0.2 330deg);
	--dw-color-magenta-base: 0.05;
	--dw-color-magenta-10: oklch(
		from var(--dw-color-magenta) 10% calc(var(--dw-color-magenta-base) + (sin(1 * pi) * c)) h
	);
	--dw-color-magenta-20: oklch(
		from var(--dw-color-magenta) 20% calc(var(--dw-color-magenta-base) + (sin(0.9 * pi) * c)) h
	);
	--dw-color-magenta-30: oklch(
		from var(--dw-color-magenta) 30% calc(var(--dw-color-magenta-base) + (sin(0.8 * pi) * c)) h
	);
	--dw-color-magenta-40: oklch(
		from var(--dw-color-magenta) 40% calc(var(--dw-color-magenta-base) + (sin(0.7 * pi) * c)) h
	);
	--dw-color-magenta-50: oklch(
		from var(--dw-color-magenta) 50% calc(var(--dw-color-magenta-base) + (sin(0.6 * pi) * c)) h
	);
	--dw-color-magenta-60: oklch(
		from var(--dw-color-magenta) 60% calc(var(--dw-color-magenta-base) + (sin(0.5 * pi) * c)) h
	);
	--dw-color-magenta-70: oklch(
		from var(--dw-color-magenta) 70% calc(var(--dw-color-magenta-base) + (sin(0.4 * pi) * c)) h
	);
	--dw-color-magenta-80: oklch(
		from var(--dw-color-magenta) 80% calc(var(--dw-color-magenta-base) + (sin(0.3 * pi) * c)) h
	);
	--dw-color-magenta-90: oklch(
		from var(--dw-color-magenta) 90% calc(var(--dw-color-magenta-base) + (sin(0.2 * pi) * c)) h
	);
	--dw-color-magenta-100: oklch(
		from var(--dw-color-magenta) 100% calc(var(--dw-color-magenta-base) + (sin(0.1 * pi) * c)) h
	);
	--dw-color-gray: oklch(50% 0 0deg);
	--dw-color-gray-base: 0;
	--dw-color-gray-10: oklch(
		from var(--dw-color-gray) 10% calc(var(--dw-color-gray-base) + (sin(1 * pi) * c)) h
	);
	--dw-color-gray-20: oklch(
		from var(--dw-color-gray) 20% calc(var(--dw-color-gray-base) + (sin(0.9 * pi) * c)) h
	);
	--dw-color-gray-30: oklch(
		from var(--dw-color-gray) 30% calc(var(--dw-color-gray-base) + (sin(0.8 * pi) * c)) h
	);
	--dw-color-gray-40: oklch(
		from var(--dw-color-gray) 40% calc(var(--dw-color-gray-base) + (sin(0.7 * pi) * c)) h
	);
	--dw-color-gray-50: oklch(
		from var(--dw-color-gray) 50% calc(var(--dw-color-gray-base) + (sin(0.6 * pi) * c)) h
	);
	--dw-color-gray-60: oklch(
		from var(--dw-color-gray) 60% calc(var(--dw-color-gray-base) + (sin(0.5 * pi) * c)) h
	);
	--dw-color-gray-70: oklch(
		from var(--dw-color-gray) 70% calc(var(--dw-color-gray-base) + (sin(0.4 * pi) * c)) h
	);
	--dw-color-gray-80: oklch(
		from var(--dw-color-gray) 80% calc(var(--dw-color-gray-base) + (sin(0.3 * pi) * c)) h
	);
	--dw-color-gray-90: oklch(
		from var(--dw-color-gray) 90% calc(var(--dw-color-gray-base) + (sin(0.2 * pi) * c)) h
	);
	--dw-color-gray-100: oklch(
		from var(--dw-color-gray) 100% calc(var(--dw-color-gray-base) + (sin(0.1 * pi) * c)) h
	);
}

:root {
	--dw-page-gutter: 1.5rem;
	--dw-max-content-width: 50rem;
	--dw-max-line-length: 72ch;
}

:root {
	--dw-font-family-display:
		'Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed,
		sans-serif;
	--dw-font-family-sans: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
	--dw-font-family-serif: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
	--dw-font-family-mono:
		'FontWithASyntaxHighlighter', ui-monospace, 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas',
		'DejaVu Sans Mono', monospace;
	--dw-font-size-display-lg: 7.25rem;
	--dw-font-size-display-md: 5.5rem;
	--dw-font-size-display-sm: 4rem;
	--dw-font-size-heading-xxl: 3rem;
	--dw-font-size-heading-xl: 2.25rem;
	--dw-font-size-heading-lg: 1.75rem;
	--dw-font-size-heading-md: 1.25rem;
	--dw-font-size-heading-sm: 1rem;
	--dw-font-size-heading-xs: 0.875rem;
	--dw-font-size-body-lg: 1.5rem;
	--dw-font-size-body-md: 1.25rem;
	--dw-font-size-body-sm: 1rem;
}

:root,
[data-theme] {
	/* neutral colors */
	--dw-neutral-text-color-light: var(--dw-color-gray-30);
	--dw-neutral-text-color-dark: var(--dw-color-gray-90);
	--dw-neutral-background-color-light: var(--dw-color-purple-100);
	--dw-neutral-background-color-dark: var(--dw-color-purple-15);
	--dw-neutral-shadow-color-light: var(--dw-color-gray-50);
	--dw-neutral-shadow-color-dark: var(--dw-color-gray-10);

	/* primary, secondary, accent, and code colors */
	--dw-primary-text-color-light: var(--dw-color-blue-50);
	--dw-primary-text-color-dark: var(--dw-color-blue-90);
	--dw-secondary-text-color-light: var(--dw-color-purple-50);
	--dw-secondary-text-color-dark: var(--dw-color-purple-80);
	--dw-accent-text-color-light: var(--dw-color-purple-50);
	--dw-accent-text-color-dark: var(--dw-color-purple-90);
	--dw-accent-border-color-light: var(--dw-color-pink-30);
	--dw-accent-border-color-dark: var(--dw-color-pink-90);
	--dw-code-text-color-light: var(--dw-color-gray-90);
	--dw-code-text-color-dark: var(--dw-color-gray-90);
	--dw-code-background-color-light: var(--dw-color-gray-30);
	--dw-code-background-color-dark: var(--dw-color-gray-10);

	/* light mode color definitions */
	--dw-neutral-text-color: var(--dw-neutral-text-color-light);
	--dw-neutral-background-color: var(--dw-neutral-background-color-light);
	--dw-neutral-shadow-color: var(--dw-neutral-shadow-color-light);
	--dw-primary-text-color: var(--dw-primary-text-color-light);
	--dw-secondary-text-color: var(--dw-secondary-text-color-light);
	--dw-accent-text-color: var(--dw-accent-text-color-light);
	--dw-accent-border-color: var(--dw-accent-border-color-light);
	--dw-code-text-color: var(--dw-code-text-color-light);
	--dw-code-background-color: var(--dw-code-background-color-light);

	/* semantic definitions */
	--dw-color: var(--dw-neutral-text-color);
	--dw-background-color: var(--dw-neutral-background-color);
	--dw-link-color: var(--dw-primary-text-color);
	--dw-link-color-hover: var(--dw-accent-text-color);
	--dw-link-color-visited: var(--dw-secondary-text-color);
	--dw-shadow-neutral:
		0.3px 0.5px 0.7px oklch(from var(--dw-neutral-shadow-color) l c h / 36%),
		0.8px 1.6px 2px -0.8px oklch(from var(--dw-neutral-shadow-color) l c h / 36%),
		2.1px 4.1px 5.2px -1.7px oklch(from var(--dw-neutral-shadow-color) l c h / 36%),
		5px 10px 12.6px -2.5px oklch(from var(--dw-neutral-shadow-color) l c h / 36%);

	@media (prefers-color-scheme: dark) {
		/* dark mode color definitions */
		--dw-neutral-text-color: var(--dw-neutral-text-color-dark);
		--dw-neutral-background-color: var(--dw-neutral-background-color-dark);
		--dw-neutral-shadow-color: var(--dw-neutral-shadow-color-dark);
		--dw-primary-text-color: var(--dw-primary-text-color-dark);
		--dw-secondary-text-color: var(--dw-secondary-text-color-dark);
		--dw-accent-text-color: var(--dw-accent-text-color-dark);
		--dw-accent-border-color: var(--dw-accent-border-color-dark);
		--dw-code-text-color: var(--dw-code-text-color-dark);
		--dw-code-background-color: var(--dw-code-background-color-dark);
	}
}

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

* {
	margin: 0;
}

html,
body {
	min-height: 100dvh;
}

html {
	text-size-adjust: none;
}

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

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

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

body > footer {
	position: sticky;
	top: 100vh;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, figure, blockquote) {
	line-height: calc(1em + 0.5rem);

	&:not(:first-child) {
		margin-block-start: 1em;
	}
}

:focus {
	outline: 0.125em solid currentcolor;
	outline-offset: 0.25em;
}

:focus:not(:focus-visible) {
	outline-color: transparent;
}

* {
	max-inline-size: var(--dw-max-line-length);
}

:is(html, body, div, header, nav, main, section, footer) {
	max-inline-size: none;
}

:where(h1, h2, h3, h4, h5, h6),
:is(.heading-xxl, .heading-xl, .heading-lg, .heading-md, .heading-sm, .heading-xs) {
	font-family: var(--dw-font-family-serif);
	font-weight: 700;
}

:where(h1),
.heading-xxl {
	font-size: var(--dw-font-size-heading-xxl);
}

:where(h2),
.heading-xl {
	font-size: var(--dw-font-size-heading-xl);
}

:where(h3),
.heading-lg {
	font-size: var(--dw-font-size-heading-lg);
}

:where(h4),
.heading-md {
	font-size: var(--dw-font-size-heading-md);
}

:where(h5),
.heading-sm {
	font-size: var(--dw-font-size-heading-sm);
}

:where(h6),
.heading-xs {
	font-size: var(--dw-font-size-heading-xs);
}

:is(.display-lg, .display-md, .display-sm) {
	font-family: var(--dw-font-family-display);
	font-weight: 900;
	overflow-wrap: break-word;
	hyphens: auto;
}

.display-lg {
	font-size: var(--dw-font-size-display-lg);
}

.display-md {
	font-size: var(--dw-font-size-display-md);
}

.display-sm {
	font-size: var(--dw-font-size-display-sm);
}

:is(.body-lg, .body-md, .body-sm, blockquote) {
	font-family: var(--dw-font-family-sans);
	font-weight: 400;
}

:where(blockquote),
.body-lg {
	font-size: var(--dw-font-size-body-lg);
}

:where(p, ul, ol, dl),
.body-md {
	font-size: var(--dw-font-size-body-md);
}

:where(small, sub, sup),
.body-sm {
	font-size: var(--dw-font-size-body-sm);
}

:where(caption, figcaption) {
	font-style: italic;
}

:where(img, picture) + figcaption {
	text-align: center;
}

:where(blockquote) {
	position: relative;

	&::before {
		content: open-quote;
		position: absolute;
		right: 100%;
	}

	& > :last-child::after {
		content: close-quote;
	}

	& + figcaption {
		font-style: normal;
		margin-block-start: 0.25lh;

		cite {
			font-style: italic;
		}
	}
}

:where(code) {
	font-family: var(--dw-font-family-mono);
	font-size: var(--dw-font-size-body-sm);
}

:root {
	color-scheme: light dark;
	font-family: var(--dw-font-family-sans);
	color: var(--dw-color);
	background-color: var(--dw-background-color);
}

@media (prefers-color-scheme: dark) {
	:root {
		-webkit-font-smoothing: antialiased;
	}
}

a {
	color: var(--dw-link-color);

	&:visited {
		color: var(--dw-link-color-visited);
	}

	&:is(:hover, :active) {
		color: var(--dw-link-color-hover);
		text-decoration: none;
	}

	&:focus-visible {
		text-decoration: none;
	}
}

.lyt-container {
	box-sizing: content-box;
	max-inline-size: var(--dw-max-content-width);
	padding-inline: var(--dw-page-gutter);
	margin-inline: auto;
	padding-block: 1rem;
}

.lyt-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rem;
  padding-block: 2rem;

  img {
    box-shadow: var(--dw-shadow-neutral);
  }
}

.cmp-navigation {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	gap: 1rem 2rem;
	padding-block: 1rem;
	padding-inline: 0;
	font-size: var(--dw-font-size-body-md);

	li {
		margin-block-start: 0;
	}

	a {
		color: var(--dw-link-color);
		text-decoration: none;

		&:hover {
			color: var(--dw-link-color-hover);
			text-decoration: underline;
		}

		&[aria-current] {
			color: var(--dw-link-color-hover);
		}
	}
}

.cmp-skip-to-content {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	z-index: 1;

	&::before {
		content: '';
		position: absolute;
		z-index: -1;
		inset: -0.25em;
		background-color: var(--dw-background-color);
	}
}

.util-visually-hidden:not(:focus) {
	position: absolute;
	height: 1px;
	width: 1px;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}