@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"), 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;
}

}

@layer elements {

	.Icon {
		block-size: 1em;
		fill: currentcolor;
		inline-size: 1em;
	}

}

@layer elements {

	.Nav-list {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
		list-style: none;
	}

	.Nav-link {
		color: inherit;
		display: block;
		font-weight: 600;
		text-decoration: none;

		&:hover,
		&.is-active {
			color: var(--color-Brand);
			text-decoration: underline;
			text-decoration-thickness: var(--size-border-width-divider);
			text-underline-offset: 0.375rem;
		}
	}

	.Nav-icon {
		display: block;
		font-size: 1.375em;
	}

}

@layer page {

	.Header {
		animation-fill-mode: both;
		animation-name: header-border;
		animation-range: 1rem 2rem;
		animation-timeline: scroll(root);
		background: var(--color-SiteBackground);
		border-block-end: var(--size-border-width-divider) solid transparent;
		inset-block-start: 0;
		padding-block: 0.75rem;
		position: sticky;
		z-index: 1;
	}

	.Header-container {
		display: flex;
		justify-content: space-between;
	}

	@media (width < 29rem) {
		.Header-social {
			display: none;
		}
	}

	@keyframes header-border {
		to {
			border-block-end-color: currentcolor;
		}
	}

}

@layer page {

	.Hero {
		display: grid;
		gap: 0.5rem;
	}

	.Hero-media {
		inline-size: 100%;
	}

	.Hero-caption {
		font-style: italic;
	}

}

@layer elements {

	.RichText {
		font-size: var(--typo-RichText-font-size);
		line-height: var(--typo-RichText-line-height);

		/* Inline size */

		> :not(pre, .Table) {
			max-inline-size: 40rem;
		}

		iframe {
			inline-size: 100%;
			max-inline-size: 100%;
		}

		/* Margin block */

		> :not(h2, h3, h4, h5, h6) {
			margin-block-start: 1em;
		}

		li,
		li > :is(ul, ol) {
			margin-block-start: 0.3em;
		}

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

		/* Margin inline start */

		ul,
		ol,
		dd {
			margin-inline-start: 1em;
		}

		/* Customizations */

		li > p:only-child {
			margin-block-start: 0;
		}

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

		blockquote {
			border-inline-start: var(--size-border-width-divider) solid currentcolor;
			padding-inline-start: calc(1em - var(--size-border-width-divider));
		}
	}

}

@layer page {

	.Footer {
		border-block-start: var(--size-border-width-divider) solid currentcolor;
		padding-block: 0.75rem;
	}

	.Footer-container {
		column-gap: 2rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		row-gap: 1rem;
	}

}

@layer page {

	.Page-skipLink {
		background: var(--color-SiteBackground);
		inset-block-start: -2rem;
		justify-self: center;
		padding-block: 0.25rem;
		padding-inline: 0.5rem;
		position: fixed;
		z-index: 2;

		&:focus {
			inset-block-start: 0.5rem;
		}
	}

	.Page-main {
		margin-block-end: 3rem;
		margin-block-start: 2rem;
	}

	.Page-title {
		margin-block-end: clamp(2rem, 4.7vw, 3rem);
	}

	.Page-hero {
		margin-block-end: 2rem;
	}
}