:root {
  color-scheme: dark;
  --text: #dedfd9;
  --muted: #a5ada3;
  --accent: #c0cfb7;
  font: 16px/1.7 "IBM Plex Sans", system-ui, sans-serif;
  color: var(--text);
  background: #1c1f1d;
}

body {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) 1.5rem 2rem;
}

h1, h2 { font-weight: 500; line-height: 1.2; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -0.04em; }
h2 { margin: 0 0 1rem; color: var(--accent); text-transform: lowercase; }
p { margin: 1rem 0 0; }
header > p:first-of-type { margin-top: 0.5rem; color: var(--muted); }
nav { display: flex; gap: 1.25rem; margin: 0.75rem 0 1.5rem; }
section { margin-top: 2.5rem; }
h2, code, dl { font: 0.875rem/1.8 ui-monospace, Consolas, monospace; }
.console { margin-inline: -1rem; padding: 1rem; background: #161916; border-radius: 4px; }
dl { display: grid; grid-template-columns: 10ch 1fr; gap: 0.5rem 1.5rem; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; word-spacing: 0.35em; }
a { color: var(--accent); text-underline-offset: 0.25em; }
a:hover { color: var(--text); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
footer { margin-top: 3rem; font-size: 0.8125rem; color: var(--muted); }