:root { color-scheme: dark; --bg:#071018; --surface:#0d1b27; --surface-2:#122536; --text:#eef7ff; --muted:#a8bdcd; --accent:#74ae90; --line:rgba(255,255,255,.12); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:radial-gradient(circle at 15% 0%,rgba(116,174,144,.18),transparent 32rem),radial-gradient(circle at 90% 20%,rgba(155,140,255,.12),transparent 28rem),var(--bg); color:var(--text); font:16px/1.7 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--accent); }
.shell { width:min(920px,calc(100% - 32px)); margin:0 auto; }
header { padding:64px 0 32px; }
.eyebrow { color:var(--accent); font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:760px; margin:12px 0; font:clamp(2.4rem,8vw,5.3rem)/.98 Georgia,serif; letter-spacing:-.055em; }
h2 { margin-top:0; font-size:1.55rem; }
h3 { margin-top:28px; }
.lede { max-width:700px; color:var(--muted); font-size:1.12rem; }
nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
nav a { padding:8px 13px; border:1px solid var(--line); border-radius:999px; text-decoration:none; }
main { display:grid; gap:18px; padding:16px 0 72px; }
section { padding:clamp(22px,5vw,42px); background:rgba(13,27,39,.88); border:1px solid var(--line); border-radius:24px; box-shadow:0 24px 70px rgba(0,0,0,.2); }
section:target { border-color:rgba(116,174,144,.58); }
ul,ol { padding-left:22px; }
.callout { margin:22px 0; padding:16px 18px; border-left:3px solid var(--accent); background:var(--surface-2); border-radius:4px 14px 14px 4px; }
.meta,footer { color:var(--muted); }
footer { padding:0 0 48px; text-align:center; }
@media (max-width:560px) { header { padding-top:42px; } section { border-radius:18px; } }