:root { --bg: #F3F6F5; --fg: #12201C; --muted: #4A5A55; --accent: #0B7A5A; --code: #E4ECE9; }
@media (prefers-color-scheme: dark) { :root { --bg: #0C1311; --fg: #E4ECE9; --muted: #9DB0AA; --accent: #3FCF9B; --code: #1A2521; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; background: var(--bg); color: var(--fg);
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; line-height: 1.5; padding: 0 20px; }
main { max-width: 40rem; margin: auto; padding: 48px 0; display: grid; gap: 16px; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--accent); font-weight: 700; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.1; }
.lead { margin: 0; font-size: 1.2rem; color: var(--muted); }
.steps { margin: 8px 0 0; padding-left: 1.2rem; display: grid; gap: 8px; }
code { background: var(--code); padding: 2px 6px; border-radius: 4px; font-size: .95em; }
.steps span { color: var(--muted); margin-left: 6px; }
.hint { color: var(--muted); font-size: .95rem; }
footer { text-align: center; padding: 20px 0; color: var(--muted); font-size: .9rem; }
footer a { color: var(--accent); }