:root { color-scheme: light dark; --fg: #111; --bg: #fff; --muted: #5b6470; --line: #e4e7eb; --accent: #2f6f4f; }
@media (prefers-color-scheme: dark) { :root { --fg: #f2f4f6; --bg: #14171a; --muted: #a3acb6; --line: #2a2f35; --accent: #7fd1a6; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 46rem; margin: 0 auto; padding: 4.5rem 1.5rem 2rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: var(--muted); margin: 0 0 1rem; }
h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; margin: 0 0 1rem; letter-spacing: -.02em; }
.lede { color: var(--muted); margin: 0 0 2rem; }
.stages { list-style: none; padding: 0; margin: 0 0 2rem; counter-reset: stage; }
.stages li { counter-increment: stage; border-top: 1px solid var(--line); padding: .9rem 0 .9rem 2.5rem; position: relative; }
.stages li::before { content: counter(stage); position: absolute; left: 0; top: .95rem; width: 1.6rem; height: 1.6rem; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: .75rem; color: var(--accent); }
.stages strong { color: var(--accent); }
.meta { font-size: .85rem; color: var(--muted); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: color-mix(in srgb, var(--line) 45%, transparent); padding: .1em .35em; border-radius: .25rem; }
footer { max-width: 46rem; margin: 0 auto; padding: 1.5rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }