:root {
	--bg: #f4ede1;
	--ink: #0e0e0e;
	--dim: #5a5a52;
	--moss: #3d5a36;
	--tomato: #d94e2c;
	--rule: #1a1a1a14;
	--term-bg: #0a0a0a;
	--term-fg: #e5e5e5;
	--term-dim: color-mix(in srgb, var(--term-fg) 70%, var(--term-bg));
	--term-bold: #fff;
	--term-green: #a3cf95;
	--term-red: #f47a59;
	--mono: ui-monospace, Menlo, Consolas, monospace;
	--radius-sm: 2px;
	--radius-md: 4px;
	--ring-width: 2px;
	--ring-offset: 3px;
	--dur-fast: 80ms;
	--dur-base: 120ms;
	--lh-base: 1.55;
	--ls-caps: 0.16em;
	--text-micro: 0.7rem;
	--text-xs: 0.75rem;
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #221d15;
		--ink: #f4ecd9;
		--dim: #c0b8a8;
		--moss: #a3cf95;
		--tomato: #f47a59;
		--rule: #ffffff40;
	}
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: var(--mono);
	font-size: 1rem;
	line-height: var(--lh-base);
	color: var(--ink);
	background: var(--bg);
}
::selection {
	color: var(--bg);
	background: var(--ink);
}
.term ::selection {
	color: var(--term-bg);
	background: var(--tomato);
}
a {
	color: var(--moss);
	text-underline-offset: 0.18em;
}
a:hover {
	color: var(--bg);
	background: var(--moss);
}
a:focus-visible {
	outline: var(--ring-width) solid var(--tomato);
	outline-offset: var(--ring-offset);
}
a:focus-visible:hover {
	color: var(--moss);
	background: transparent;
}
main {
	max-width: 64ch;
	padding: 4rem 1.5rem 6rem;
	margin: 0 auto;
}
.wordmark {
	margin: 0;
	font-size: clamp(3.25rem, 11vw, 6.5rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.045em;
}
.wordmark::after {
	color: var(--tomato);
	content: "_";
}
.tagline {
	max-width: 52ch;
	margin: 1.25rem 0 0;
	font-size: 1.0625rem;
}
.term {
	padding: 1.1rem 1.25rem 1.4rem;
	margin: 0;
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: var(--lh-base);
	color: var(--term-fg);
	white-space: pre;
	background: var(--term-bg);
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
}
.term .prompt::before {
	color: var(--term-dim);
	content: "$ ";
}
.term .dim {
	color: var(--term-dim);
}
@media (max-width: 40rem) {
	main {
		padding: 2.5rem 1.1rem 4rem;
	}
	.term {
		padding: 0.9rem 1rem 1.1rem;
		font-size: 0.78rem;
	}
}
