:root{
  --bg:#ffffff; --fg:#111318; --muted:#5b6472; --line:#e6e9ef;
  --accent:#1f4ed8; --card:#f7f8fa;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0e1116; --fg:#e9edf3; --muted:#9aa4b2; --line:#222833;
         --accent:#7aa2ff; --card:#151a22; }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 24px}
header{border-bottom:1px solid var(--line)}
nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; flex-wrap:wrap}
.brand{font-weight:650; letter-spacing:-.01em; text-decoration:none; color:var(--fg)}
nav a.link{color:var(--muted); text-decoration:none; margin-left:18px; font-size:15px}
nav a.link:hover{color:var(--accent)}
h1{font-size:clamp(30px,5vw,42px); line-height:1.15; letter-spacing:-.02em; margin:56px 0 14px}
h2{font-size:20px; letter-spacing:-.01em; margin:44px 0 10px}
p{color:var(--fg)}
.lead{font-size:18px; color:var(--muted); max-width:56ch}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-top:14px}
dl{margin:0; display:grid; grid-template-columns:150px 1fr; gap:10px 16px}
dt{color:var(--muted); font-size:14px}
dd{margin:0}
a{color:var(--accent)}
footer{border-top:1px solid var(--line); margin-top:64px; padding:24px 0 48px; color:var(--muted); font-size:14px}
@media (max-width:520px){ dl{grid-template-columns:1fr; gap:2px 0} dt{margin-top:10px} }
ul{color:var(--fg); padding-left:20px}
li{margin:6px 0}