@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: "Nudica", sans-serif;
		--typo-Default-line-height: 1.4;

		/* Heading */
		--typo-Heading-font-family: "Teko", 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.7;

		/* Code */
		--typo-Code-font-family: "Nudica 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;

		&.translated-rtl {
			direction: rtl;
		}
	}

	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;
	}

	figcaption {
		background: var(--color-HighlightBackground);
		font-size: 1rem;
		padding-block: 0.75em;
		padding-inline: 1em;

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

	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-600-normal.woff2") format("woff2");
	}

	/* Nudica */

	@font-face {
		font-display: swap;
		font-family: Nudica;
		font-style: normal;
		font-weight: 400;
		src: url("/fonts/nudica-400-normal.woff2") format("woff2");
	}

	@font-face {
		font-display: swap;
		font-family: Nudica;
		font-style: italic;
		font-weight: 400;
		src: url("/fonts/nudica-400-italic.woff2") format("woff2");
	}

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

	@font-face {
		font-display: swap;
		font-family: Nudica;
		font-style: italic;
		font-weight: 600;
		src: url("/fonts/nudica-600-italic.woff2") format("woff2");
	}

	/* Nudica Mono */

	@font-face {
		font-display: swap;
		font-family: "Nudica Mono";
		font-style: normal;
		font-weight: 400;
		src: url("/fonts/nudica-mono-400-normal.woff2") format("woff2");
	}

	@font-face {
		font-display: swap;
		font-family: "Nudica Mono";
		font-style: italic;
		font-weight: 400;
		src: url("/fonts/nudica-mono-400-italic.woff2") format("woff2");
	}
}
@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 {
		hyphens: manual;
		padding-block: 0.1em 0.2em;
		padding-inline: 0.4em;
	}

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

	/* Language label */

	pre:not(.language-plain)::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);
		hyphens: none;
		line-height: var(--typo-Heading-line-height);
		text-wrap: balance;
	}

	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: var(--typo-Heading-font-weight);
	}

	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;
	}
}