:root {
	--bg: #181b1c; --bg-alt: #1f2627; --surface: #2f3d3e; --dim: #6c8a8a; --fg: #d5dcd2;
	--red: #c08a86; --orange: #b8b08e; --yellow: #cdbf8a; --green: #8fae92; --teal: #86aaa4; --blue: #86a2ac; --magenta: #abc3b4;
}
html { background: var(--bg); color: var(--fg); font: 14px/1.7 ui-monospace, "JetBrains Mono", "SF Mono", Menlo, "DejaVu Sans Mono", monospace; }
body { display: grid; grid-template-columns: 26ch minmax(0, 80ch); gap: 4ch; justify-content: center; margin: 0; padding: 3rem 1.25rem 6rem; }
::selection { background: var(--surface); color: var(--fg); }
a { color: inherit; text-decoration-color: var(--surface); text-underline-offset: .25em; }
a:hover { color: var(--yellow); text-decoration-color: var(--yellow); }
p { margin: 0 0 1em; }

nav {
	position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 2ch; padding: 0 1ch;
	background: var(--bg); border-top: 1px solid var(--surface); white-space: nowrap; overflow: hidden;
	z-index: 1;
}
nav span:first-child { color: var(--green); }
nav a { color: var(--dim); text-decoration: none; }
nav a:hover, nav [aria-current] { color: var(--fg); }
nav span:last-child { margin-left: auto; color: var(--dim); }

aside > p, #cursor { margin: 0 0 .75rem; }
aside > p::before, #cursor::before { content: "$ "; color: var(--green); }
#cursor { margin-top: 2.75rem; }
#cursor::after { content: "█"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
aside ul { margin: 0; padding: 0; list-style: none; }
aside li { white-space: pre; overflow: hidden; text-overflow: ellipsis; color: var(--surface); }
aside a { color: var(--blue); text-decoration: none; }
aside b { color: var(--fg); }
aside [aria-current] b { color: var(--yellow); }

main h1 { font-size: 1.4em; line-height: 1.3; margin: 0 0 1.5rem; }
main h2, main h3 { font-size: 1em; margin: 2.25rem 0 .5rem; }
main h2::before { content: "## "; color: var(--dim); }
main h3::before { content: "### "; color: var(--dim); }
main ul, main ol { margin: 0 0 1em; padding-left: 2ch; }
main ul { list-style: "- "; }
code { background: var(--bg-alt); padding: .05em .35em; border-radius: 3px; }
pre { background: var(--bg-alt); padding: .9rem 1rem; overflow-x: auto; border-radius: 4px; tab-size: 4; border-left: 2px solid var(--surface); }
pre code { padding: 0; }
blockquote { margin: 1.5rem 0; padding-left: 2ch; border-left: 2px solid var(--yellow); color: var(--dim); }
blockquote p { margin: 0; }
table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 1em; }
th, td { padding: .1rem 1ch; border: 1px solid var(--surface); text-align: left; }
img { max-width: 100%; height: auto; }

@media (max-width: 44rem) {
	body { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}