:root {
  color-scheme: light dark;
  --canvas: #f5f5f7;
  --surface: rgba(255,255,255,.86);
  --surface-strong: #fff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(29,29,31,.12);
  --accent: #1677ff;
  --accent-soft: rgba(22,119,255,.11);
  --max: 920px;
}
@media (prefers-color-scheme: dark) {
  :root { --canvas:#111214; --surface:rgba(29,30,33,.92); --surface-strong:#1d1e21; --ink:#f5f5f7; --muted:#a1a1a6; --line:rgba(255,255,255,.14); --accent:#5b9dff; --accent-soft:rgba(91,157,255,.18); }
}
* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin:0; color:var(--ink); background:var(--canvas); font: 16px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.shell { width:min(var(--max), calc(100% - 40px)); margin:0 auto; }
.site-nav { padding: 22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:-.02em; }
.brand-logo { display:inline-block; width:30px; height:30px; margin-right:9px; border-radius:8px; vertical-align:-9px; box-shadow:0 3px 12px rgba(0,0,0,.18); }
.nav-links { display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:14px; }
.nav-links a:hover, .nav-links a:focus-visible { color:var(--accent); }
.hero { padding: 68px 0 44px; max-width:760px; }
.eyebrow { color:var(--accent); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px; }
h1 { margin:12px 0 16px; font-size:clamp(38px, 7vw, 64px); line-height:1.02; letter-spacing:-.055em; }
h2 { margin:42px 0 10px; font-size:25px; line-height:1.15; letter-spacing:-.03em; }
h3 { margin:24px 0 6px; font-size:18px; line-height:1.25; }
p { margin:0 0 16px; }
.lede { color:var(--muted); font-size:20px; line-height:1.45; max-width:650px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.card { padding:24px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:0 12px 40px rgba(0,0,0,.05); }
.card h2 { margin:0 0 8px; font-size:21px; }
.card p { color:var(--muted); margin:0; }
main { padding-bottom:72px; }
.article { padding:34px; border:1px solid var(--line); border-radius:28px; background:var(--surface); box-shadow:0 18px 55px rgba(0,0,0,.06); }
.article .meta { color:var(--muted); font-size:14px; margin-bottom:26px; }
.article ul { padding-left:22px; }
.article li { margin:8px 0; }
a { color:var(--accent); }
.callout { margin:24px 0; padding:18px 20px; border-radius:16px; background:var(--accent-soft); }
.callout p:last-child { margin-bottom:0; }
footer { border-top:1px solid var(--line); padding:24px 0 42px; color:var(--muted); font-size:13px; }
footer a { color:inherit; }
@media (max-width:640px) { .shell{width:min(var(--max),calc(100% - 28px));} .site-nav{align-items:flex-start; flex-direction:column;} .nav-links{justify-content:flex-start;} .hero{padding:42px 0 28px;} .grid{grid-template-columns:1fr;} .article{padding:22px; border-radius:20px;} }