@layer base {
	:root {
		/* Brand */

		--color-Brand--light: hsl(244deg 55% 41%);
		--color-Brand--dark: hsl(230deg 94% 82%);
		--color-Brand: light-dark(var(--color-Brand--light), var(--color-Brand--dark));

		/* Site text */

		--color-SiteText--light: hsl(221deg 39% 11%);
		--color-SiteText--dark: hsl(210deg 20% 98%);
		--color-SiteText: light-dark(
			var(--color-SiteText--light),
			var(--color-SiteText--dark)
		);

		/* Site background */

		--color-SiteBackground--light: hsl(0deg 0% 100%);
		--color-SiteBackground--dark: hsl(0deg 0% 0%);
		--color-SiteBackground: light-dark(
			var(--color-SiteBackground--light),
			var(--color-SiteBackground--dark)
		);

		/* Highlight background */

		--color-HighlightBackground--light: hsl(244deg 20% 41% / 8%);
		--color-HighlightBackground--dark: hsl(230deg 80% 82% / 18%);
		--color-HighlightBackground: light-dark(
			var(--color-HighlightBackground--light),
			var(--color-HighlightBackground--dark)
		);

		/* Code */

		--color-Code-comment--light: hsl(120deg 100% 25%);
		--color-Code-comment--dark: hsl(101deg 29% 47%);
		--color-Code-comment: light-dark(
			var(--color-Code-comment--light),
			var(--color-Code-comment--dark)
		);

		--color-Code-property--light: hsl(0deg 100% 45%);
		--color-Code-property--dark: hsl(201deg 98% 80%);
		--color-Code-property: light-dark(
			var(--color-Code-property--light),
			var(--color-Code-property--dark)
		);

		--color-Code-attrName--light: hsl(0deg 100% 45%);
		--color-Code-attrName--dark: hsl(201deg 98% 80%);
		--color-Code-attrName: light-dark(
			var(--color-Code-attrName--light),
			var(--color-Code-attrName--dark)
		);

		--color-Code-attrValue--light: hsl(240deg 100% 50%);
		--color-Code-attrValue--dark: hsl(17deg 47% 64%);
		--color-Code-attrValue: light-dark(
			var(--color-Code-attrValue--light),
			var(--color-Code-attrValue--dark)
		);

		--color-Code-key--light: hsl(0deg 100% 25%);
		--color-Code-key--dark: hsl(207deg 61% 59%);
		--color-Code-key: light-dark(
			var(--color-Code-key--light),
			var(--color-Code-key--dark)
		);

		--color-Code-selector--light: hsl(0deg 100% 25%);
		--color-Code-selector--dark: hsl(41deg 53% 67%);
		--color-Code-selector: light-dark(
			var(--color-Code-selector--light),
			var(--color-Code-selector--dark)
		);

		--color-Code-tag--light: hsl(0deg 100% 25%);
		--color-Code-tag--dark: hsl(207deg 61% 59%);
		--color-Code-tag: light-dark(
			var(--color-Code-tag--light),
			var(--color-Code-tag--dark)
		);

		--color-Code-keyword--light: hsl(240deg 100% 50%);
		--color-Code-keyword--dark: hsl(17deg 47% 64%);
		--color-Code-keyword: light-dark(
			var(--color-Code-keyword--light),
			var(--color-Code-keyword--dark)
		);

		--color-Code-important--light: hsl(240deg 100% 50%);
		--color-Code-important--dark: hsl(207deg 61% 59%);
		--color-Code-important: light-dark(
			var(--color-Code-important--light),
			var(--color-Code-important--dark)
		);

		--color-Code-punctuation--light: hsl(0deg 0% 23%);
		--color-Code-punctuation--dark: hsl(0deg 0% 80%);
		--color-Code-punctuation: light-dark(
			var(--color-Code-punctuation--light),
			var(--color-Code-punctuation--dark)
		);

		--color-Code-interpolation--light: hsl(21deg 72% 28%);
		--color-Code-interpolation--dark: hsl(205deg 100% 55%);
		--color-Code-interpolation: light-dark(
			var(--color-Code-interpolation--light),
			var(--color-Code-interpolation--dark)
		);

		--color-Code-string--light: hsl(0deg 77% 36%);
		--color-Code-string--dark: hsl(17deg 47% 64%);
		--color-Code-string: light-dark(
			var(--color-Code-string--light),
			var(--color-Code-string--dark)
		);

		--color-Code-number--light: hsl(158deg 87% 28%);
		--color-Code-number--dark: hsl(99deg 28% 73%);
		--color-Code-number: light-dark(
			var(--color-Code-number--light),
			var(--color-Code-number--dark)
		);

		--color-Code-function--light: hsl(40deg 52% 31%);
		--color-Code-function--dark: hsl(60deg 42% 76%);
		--color-Code-function: light-dark(
			var(--color-Code-function--light),
			var(--color-Code-function--dark)
		);

		--color-Code-parameter--light: hsl(233deg 100% 25%);
		--color-Code-parameter--dark: hsl(201deg 98% 80%);
		--color-Code-parameter: light-dark(
			var(--color-Code-parameter--light),
			var(--color-Code-parameter--dark)
		);

		--color-Code-rule--light: hsl(288deg 100% 43%);
		--color-Code-rule--dark: hsl(305deg 35% 65%);
		--color-Code-rule: light-dark(
			var(--color-Code-rule--light),
			var(--color-Code-rule--dark)
		);
	}
}
@layer base {
	:root {
		/* Border width */

		--size-border-width-divider: 0.125rem;
	}
}
@layer base {
	:root {
		/* Default */
		--typo-Default-font-family:
			"Work Sans", "Work Sans Fallback: Roboto", "Work Sans Fallback: Noto Sans",
			"Work Sans Fallback: Arial", sans-serif;
		--typo-Default-line-height: 1.4;

		/* Heading */
		--typo-Heading-font-family:
			"Teko", "Teko Fallback: Roboto", "Teko Fallback: Noto Sans",
			"Teko Fallback: Arial", sans-serif;
		--typo-Heading-font-weight: 600;
		--typo-Heading-line-height: 1;

		/* Rich text */
		--typo-RichText-font-size: 1.125rem;
		--typo-RichText-line-height: 1.6;

		/* Code */
		--typo-Code-font-family: "JetBrains Mono", monospace;
		--typo-Code-font-size: calc(16 / 18 * 1em);
	}
}
@layer base {
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	html {
		background: var(--color-SiteBackground);
		color: var(--color-SiteText);
		color-scheme: light dark;
		font-family: var(--typo-Default-font-family);
		font-synthesis: none;
		hyphens: auto;
		line-height: var(--typo-Default-line-height);
		scroll-padding-block-start: 4rem;
	}

	body {
		display: grid;
		grid-template-rows: min-content 1fr min-content;
		min-block-size: 100svh;
	}

	img,
	svg,
	iframe {
		block-size: auto;
		max-inline-size: 100%;
		vertical-align: middle;
	}

	iframe {
		background: var(--color-HighlightBackground);
		border: var(--size-border-width-divider) solid currentcolor;
	}

	a {
		color: var(--color-Brand);
		text-underline-offset: 0.15em;
	}

	sup {
		line-height: 1;

		a {
			text-decoration: none;
		}
	}

	kbd {
		background: var(--color-HighlightBackground);
		box-shadow: 0.1em 0.1em currentcolor;
		font-family: var(--typo-Code-font-family);
		font-size: var(--typo-Code-font-size);
		padding-inline: 0.2em;

		@media (forced-colors) {
			border: 0.0625rem solid;
		}
	}

	::marker {
		color: var(--color-Brand);
	}

	:focus-visible {
		outline: 0.125rem solid var(--color-Brand);
		outline-offset: 0.2em;
	}
}
@layer base {
	/* Teko */

	@font-face {
		font-display: swap;
		font-family: Teko;
		font-style: normal;
		font-weight: 600;
		src: url("/fonts/teko-latin-600-normal.woff2") format("woff2");
	}

	/* Work Sans */

	@font-face {
		font-display: swap;
		font-family: "Work Sans";
		font-style: normal;
		font-weight: 100 900;
		src: url("/fonts/work-sans-latin-wght-normal.woff2") format("woff2-variations");
	}

	@font-face {
		font-display: swap;
		font-family: "Work Sans";
		font-style: italic;
		font-weight: 100 900;
		src: url("/fonts/work-sans-latin-wght-italic.woff2") format("woff2-variations");
	}

	/* JetBrains Mono */

	@font-face {
		font-display: swap;
		font-family: "JetBrains Mono";
		font-style: normal;
		font-weight: 400;
		src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
	}
}
@layer base {
	@font-face {
		ascent-override: 129.9193%;
		descent-override: 64.4172%;
		font-family: "Teko Fallback: Roboto Condensed";
		size-adjust: 73.7381%;
		src: local("Roboto Condensed Regular"), local("RobotoCondensed-Regular");
	}

	@font-face {
		ascent-override: 155.511%;
		descent-override: 77.1062%;
		font-family: "Teko Fallback: Noto Sans";
		size-adjust: 61.6034%;
		src: local("Noto Sans Regular"), local("NotoSans-Regular");
	}

	@font-face {
		ascent-override: 146.2593%;
		descent-override: 72.519%;
		font-family: "Teko Fallback: Arial";
		line-gap-override: 0%;
		size-adjust: 65.5001%;
		src: local("Arial"), local("ArialMT");
	}

	@font-face {
		ascent-override: 82.9031%;
		descent-override: 21.6618%;
		font-family: "Work Sans Fallback: Roboto";
		size-adjust: 112.1791%;
		src: local("Roboto Regular"), local("Roboto-Regular");
	}

	@font-face {
		ascent-override: 88.3407%;
		descent-override: 23.0826%;
		font-family: "Work Sans Fallback: Noto Sans";
		size-adjust: 105.2743%;
		src: local("Noto Sans Regular"), local("NotoSans-Regular");
	}

	@font-face {
		ascent-override: 83.0851%;
		descent-override: 21.7093%;
		font-family: "Work Sans Fallback: Arial";
		line-gap-override: 0%;
		size-adjust: 111.9334%;
		src: local("Arial"), local("ArialMT");
	}
}
@layer base {
	:not(pre) > code,
	pre {
		background: var(--color-HighlightBackground);
		font-family: var(--typo-Code-font-family);
		font-size: var(--typo-Code-font-size);
		tab-size: 2;

		@media (forced-colors) {
			border: 0.0625rem solid;
		}
	}

	:not(pre) > code {
		padding-block: 0.1em 0.2em;
		padding-inline: 0.4em;
	}

	pre > code {
		display: inline-block;
		padding: 1em;
	}

	/* Language label */

	pre::before {
		background: var(--color-HighlightBackground);
		content: attr(data-language);
		display: block;
		inset-inline-start: 0;
		padding-block: 0.2em;
		padding-inline: 1em;
		position: sticky;
	}

	@media (forced-colors) {
		pre::before {
			border-block-end: 0.0625rem solid;
		}
	}

	/* Syntax highlighting */

	pre {
		overflow-x: auto;

		.comment {
			color: var(--color-Code-comment);
		}

		.punctuation {
			color: var(--color-Code-punctuation);
		}

		.interpolation-punctuation {
			color: var(--color-Code-interpolation);
		}

		.keyword {
			color: var(--color-Code-keyword);
		}

		.tag,
		.tag > .punctuation:is(:first-child, :last-child) {
			color: var(--color-Code-tag);
		}

		.attr-name {
			color: var(--color-Code-attrName);
		}

		.attr-value {
			color: var(--color-Code-attrValue);
		}

		.rule {
			color: var(--color-Code-rule);
		}

		.selector {
			color: var(--color-Code-selector);
		}

		.property {
			color: var(--color-Code-property);
		}

		.key {
			color: var(--color-Code-key);
		}

		.important {
			color: var(--color-Code-important);
		}

		.function {
			color: var(--color-Code-function);
		}

		.parameter {
			color: var(--color-Code-parameter);
		}

		.string {
			color: var(--color-Code-string);
		}

		.number {
			color: var(--color-Code-number);
		}
	}
}
@layer base {
	.Note {
		background: var(--color-HighlightBackground);
		padding-block: 0.75em;
		padding-inline: 1em;

		> :first-child {
			margin-block-start: 0;
		}

		@media (forced-colors) {
			border: 0.0625rem solid;
		}
	}
}
@layer base {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--typo-Heading-font-family);
		font-weight: var(--typo-Heading-font-weight);
		line-height: var(--typo-Heading-line-height);
	}

	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-block-start: 1.5em;
	}

	h1 {
		font-size: clamp(2.5rem, 5.4vw, 3.5rem);
	}

	h2 {
		font-size: clamp(1.75rem, 3.1vw, 2rem);
	}

	h3 {
		font-size: clamp(1.25rem, 2.32vw, 1.5rem);
	}

	h4 {
		font-size: clamp(1rem, 1.95vw, 1.25rem);
	}

	h5 {
		font-size: 1rem;
	}

	h6 {
		font-size: 1rem;
	}
}
@layer base {
	table {
		border-collapse: collapse;
		font-variant-numeric: tabular-nums;
	}

	th,
	td {
		border: 0.0625rem solid currentcolor;
		padding-block: 0.25em;
		padding-inline: 0.5em;
	}

	th {
		text-align: start;
	}

	/* Workaround for markdown tables not supporting <th> in <tbody> */
	th,
	td:has(> strong:only-child) {
		background: var(--color-HighlightBackground);
		font-size: 0.9em;
	}

	th,
	td > strong:only-child {
		font-weight: 600;
	}

	thead th[colspan] {
		text-align: center;
	}

	.Table {
		overflow-x: auto;
	}
}
@layer utilities {
	.u-container {
		inline-size: 100%;
		margin-inline: auto;
		max-inline-size: 64rem;
		min-inline-size: 0;
		padding-inline: 1rem;
	}
}
@layer utilities {
	.u-listUnstyled {
		list-style: none;
		margin-inline-start: 0;
	}
}