:root { color-scheme: light dark; --paper:#f4f6f2; --surface:#fff; --ink:#172c23; --muted:#5b6c62; --accent:#176b50; --line:#dce5dd; --soft:#edf4ee; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.72 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-underline-offset:.2em; overflow-wrap:anywhere; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; border-radius:3px; }
.skip { position:absolute; left:1rem; top:-10rem; background:var(--surface); padding:.6rem 1rem; z-index:2; }
.skip:focus { top:1rem; }
header,main,footer { width:min(100% - 3rem,1080px); margin:auto; }
header { display:flex; justify-content:space-between; align-items:center; padding:30px 0; gap:20px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-size:23px; font-weight:650; letter-spacing:-.7px; }
.mark { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--accent); color:var(--accent); border-radius:12px; font:24px Georgia,serif; }
nav { display:flex; gap:24px; font-size:14px; font-weight:600; }
nav a { color:var(--muted); text-decoration:none; padding:6px 0; }
nav a[aria-current="page"] { color:var(--accent); box-shadow:0 2px 0 var(--accent); }
.hero { max-width:780px; margin:62px auto 34px; }
.eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); font-weight:700; }
h1 { font:clamp(40px,7vw,64px)/1.1 Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.035em; margin:16px 0 22px; }
.dek { max-width:650px; color:var(--muted); font-size:19px; line-height:1.65; margin:0; }
.badge { display:inline-block; margin-top:22px; border:1px solid var(--line); border-radius:99px; color:var(--muted); padding:5px 12px; font-size:12px; }
article { max-width:780px; margin:0 auto 70px; border:1px solid var(--line); border-radius:24px; background:var(--surface); padding:clamp(24px,5vw,52px); }
article > p:first-child { margin-top:0; }
h2 { font-size:23px; font-weight:650; line-height:1.3; letter-spacing:-.025em; margin:40px 0 16px; padding-top:27px; border-top:1px solid var(--line); scroll-margin-top:24px; }
article h2:first-child { margin-top:0; padding-top:0; border-top:0; }
p { margin:0 0 18px; }
ul { padding-left:22px; margin:0 0 23px; }
li { margin:10px 0; padding-left:3px; }
strong { font-weight:650; }
code { font: .85em ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--soft); padding:2px 5px; border-radius:4px; overflow-wrap:anywhere; }
.table-scroll { overflow-x:auto; margin:20px 0 28px; }
table { border-collapse:collapse; width:100%; font-size:14px; line-height:1.6; text-align:left; }
th,td { padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:650; color:var(--accent); background:var(--soft); }
footer { border-top:1px solid var(--line); padding:26px 0 34px; color:var(--muted); display:flex; justify-content:space-between; gap:20px; font-size:13px; }
footer p { margin:0; }
@media(max-width:600px) { body { font-size:16px; } header,main,footer { width:calc(100% - 32px); } header { padding:21px 0; } nav { gap:17px; font-size:13px; } .brand { font-size:21px; gap:8px; } .mark { width:31px; height:31px; border-radius:10px; } .hero { margin:36px auto 26px; } .dek { font-size:17px; } h1 { margin:12px 0 19px; } article { border-radius:18px; padding:24px 20px; margin-bottom:38px; } h2 { font-size:21px; } footer { flex-direction:column; gap:7px; } }
@media(prefers-color-scheme:dark) { :root { --paper:#101b16; --surface:#17251e; --ink:#e7eee8; --muted:#b0c0b4; --accent:#8ed3b0; --line:#304539; --soft:#213a2c; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { :root { --paper:#fff; --surface:#fff; --ink:#000; --muted:#333; --accent:#000; --line:#ccc; --soft:#fff; } header,footer,.badge { display:none; } main { width:100%; } .hero { margin:0 0 24px; } article { border:0; padding:0; max-width:none; } a { color:#000; } }