:root { --fg:#222; --bg:#fffff8; --muted:#666; --accent:#a33; --box:#f3f1e7; }
@media (prefers-color-scheme: dark) { :root { --fg:#ddd; --bg:#1b1b1b; --muted:#999; --accent:#e77; --box:#2a2a2a; } }
body { font: 18px/1.6 Georgia, serif; color:var(--fg); background:var(--bg); max-width:44rem; margin:2rem auto; padding:0 16px; }
h1, h2 { font-weight:normal; } h2 { margin-top:2.5rem; border-bottom:1px solid var(--muted); }
code, pre { font: 15px/1.5 ui-monospace, monospace; } pre { background:var(--box); padding:1rem; overflow-x:auto; }
.aside { color:var(--muted); font-size:.9em; }
.steppers { display:flex; flex-wrap:wrap; gap:1rem; }
.stepper { flex:1 1 18rem; background:var(--box); padding:1rem; }
.stepper .count { color:var(--accent); font-weight:bold; }
.stepper button { font:inherit; margin-right:.5rem; }
@media print { .stepper button { display:none; } }