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

@font-face {
	font-family: "JetBrains Mono";
	src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

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

:root {
	color-scheme: dark light; /* dark preferred */
	--bg-0: light-dark(#ffffff, #181818);
	--bg-1: light-dark(#ebebeb, #252525);
	--fg-0: light-dark(#474747, #b9b9b9);
	--fg-1: light-dark(#282828, #dedede);
	--dim-0: light-dark(#878787, #777777);
	--red: light-dark(#d6000c, #ed4a46);
	--green: light-dark(#1d9700, #70b433);
	--yellow: light-dark(#c49700, #dbb32d);
	--blue: light-dark(#0064e4, #368aeb);
	--magenta: light-dark(#dd0f9d, #eb6eb7);
}

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

body {
	max-width: 100ch;
	margin-block: 0;
	margin-inline: auto;
	padding-block: clamp(1.5rem, calc((100vw - 60rem) / 2 + 1rem), 2.5rem) 3rem;
	padding-inline: 1rem;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	line-height: 1.5;
	text-wrap: pretty;
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "calt" 0;
	color: var(--fg-0);
	background: var(--bg-0);
}

h1,
h2 {
	line-height: 1.2;
	text-wrap: balance;
}

h1 {
	--accent: var(--red);
	margin-block: 0 1.5rem;
	font-size: 2.25rem;
}

h2 {
	--accent: var(--yellow);
	margin-block: 1.5rem 0.75rem;
	font-size: 1.5rem;
}

a {
	--accent: var(--blue);
	text-decoration: none;
	overflow-wrap: anywhere;
}

h1 > a {
	--accent: var(--dim-0);
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 400;
}

a:hover,
a:focus-visible {
	--accent: var(--magenta);
}

a:hover {
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--magenta);
	outline-offset: 2px;
}

b {
	--accent: var(--fg-1);
}

ul,
p,
pre,
details {
	margin-block: 0.75rem;
}

ul {
	padding-inline-start: clamp(1.5rem, 6%, 2rem);
}

::marker {
	color: color-mix(in srgb, var(--fg-0) 65%, var(--bg-0));
}

code,
pre {
	font: inherit;
	background: var(--bg-1);
}

summary {
	cursor: pointer;
	width: fit-content;
}

code {
	padding: 0.1em 0.4em;
	overflow-wrap: anywhere;
}

pre {
	width: fit-content;
	max-width: 100%;
	padding: 0.75rem 1rem;
	white-space: pre;
	overflow-x: auto;
}

code .cmd {
	--accent: var(--green);
}

code .arg {
	--accent: var(--blue);
}

code .op {
	--accent: var(--yellow);
}

code a {
	--accent: var(--fg-0);
}

:where(h1, h2, a, b, code span) {
	color: var(--accent);
}

::selection {
	color: var(--bg-0);
	background: var(--accent, var(--fg-0));
}