:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --bg: #f7f6f2; --surface: #ffffff; --ink: #161a23; --muted: #4f5564; --line: #e2dfd6;
  --accent: #1f4fd1; --accent-ink: #ffffff; --warm: #a3420f; --code: #f1efe8;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #12141a; --surface: #1b1e26; --ink: #eceef3; --muted: #aab0bd; --line: #2c303b; --accent: #7aa0ff; --accent-ink: #0d1020; --warm: #f0915a; --code: #232733; }
}
* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 17px; }
a { color: var(--accent); }
/* inline links get a 24px tall hit area */
p a, li a, footer a { display: inline-block; line-height: 24px; min-height: 24px; }
.shell { max-width: 1040px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); }
.stack > * + * { margin-top: var(--space-5); }
nav.top { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
nav.top .brand { font-weight: 700; color: var(--ink); text-decoration: none; margin-right: auto; }
nav.top a { text-decoration: none; font-weight: 500; padding: var(--space-3) 0; }
nav.top a[aria-current] { color: var(--ink); border-bottom: 2px solid var(--warm); }
h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.15; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 18px; }
.lead { font-size: 19px; color: var(--muted); }
.muted { color: var(--muted); }
.eyebrow { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--warm); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: var(--space-5); }
.card > * + * { margin-top: var(--space-2); }
a.card { display: block; color: var(--ink); text-decoration: none; }
a.card:hover { border-color: var(--accent); }
.card .go { color: var(--accent); font-weight: 600; }
section > * + * { margin-top: var(--space-3); }
ol, ul { padding-left: var(--space-5); }
li + li { margin-top: var(--space-2); }
.step { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); }
.step .n { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; }
.step > div > * + * { margin-top: var(--space-2); }
.copybox { position: relative; background: var(--code); border: 1px solid var(--line); border-radius: 10px; }
.copybox pre { white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; padding: var(--space-4); padding-top: 60px; }
.copybox button { position: absolute; top: var(--space-2); right: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.time { display: inline-block; font-size: 14px; font-weight: 600; color: var(--muted); background: var(--code); border-radius: 6px; padding: 0 var(--space-2); }
.homework { border-left: 4px solid var(--warm); }
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; padding: var(--space-3) var(--space-5); border-radius: 10px; }
footer { border-top: 1px solid var(--line); padding-top: var(--space-4); color: var(--muted); font-size: 15px; }
@media (max-width: 560px) { nav.top .brand { flex-basis: 100%; } }