:root { --bg:#fff; --fg:#1a1a1a; --accent:#0066ff; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg);
  font: 17px/1.65 Georgia, "Times New Roman", serif; }
main { max-width: 680px; margin: 6vh auto; padding: 0 24px; }
h1 { font-size: clamp(32px, 5vw, 48px); margin: 0 0 12px; color: var(--accent); }
h2 { margin-top: 32px; }
.meta { opacity: .6; font-size: 14px; margin: 4px 0 24px; font-family: system-ui, sans-serif; }
article { padding: 24px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
code { background:#f0f0f0; padding:2px 6px; border-radius:4px; font-size: 0.9em; }
.cta { display:inline-block; margin-top:24px; padding:10px 18px;
  background:var(--accent); color:#fff; text-decoration:none; border-radius:6px;
  font-family: system-ui, sans-serif; font-weight:600; }
.cta:hover { filter: brightness(1.1); }