:root{
  /* 黄金比基准：正文 1rem = 16px，标题按 1.618 递进；间距同源 */
  --s1:.618rem; --s2:1rem; --s3:1.618rem; --s4:2.618rem; --s5:4.236rem;
  --fg:#14161a; --fg-dim:#4a5058; --bg:#ffffff; --card:#f7f8fa;
  --accent:#14507a; --line:#e2e5ea;
}
@media (prefers-color-scheme: dark){
  :root{ --fg:#eceff3; --fg-dim:#a8b0ba; --bg:#0f1115; --card:#171a20; --accent:#8ec6f0; --line:#262b33; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.618 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
.wrap{max-width:min(61.8rem,92vw); margin:0 auto; padding:var(--s4) var(--s3) var(--s5)}
header.site{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:var(--s2); margin-bottom:var(--s4)}
header.site .brand{font-size:1.618rem; font-weight:700; letter-spacing:.01em; color:var(--fg); text-decoration:none}
header.site nav a{color:var(--fg-dim); text-decoration:none; margin-right:var(--s3)}
header.site nav a:hover{color:var(--accent); text-decoration:underline}
h1{font-size:1.618rem; line-height:1.236; margin:0 0 var(--s3)}
h2{font-size:1.236rem; line-height:1.382; margin:var(--s4) 0 var(--s2)}
h3{font-size:1rem; margin:var(--s3) 0 var(--s1)}
p,ul,ol{margin:0 0 var(--s2)}
a{color:var(--accent)}
code{background:var(--card); padding:.1em .35em; border-radius:4px; font-size:.9em}
hr{border:0; border-top:1px solid var(--line); margin:var(--s4) 0}
.hero{padding:var(--s4) 0}
.hero .lead{font-size:1.236rem; color:var(--fg-dim); max-width:38.2rem}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:var(--s3); margin:var(--s4) 0}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:var(--s3)}
.card h3{margin-top:0}
.card p{margin-bottom:var(--s1); color:var(--fg-dim)}
.doc{max-width:38.2rem}
footer.site{border-top:1px solid var(--line); margin-top:var(--s5); padding-top:var(--s2); color:var(--fg-dim); font-size:.875rem}
footer.site a{color:var(--fg-dim)}
.btn{display:inline-block; background:var(--accent); color:#fff; text-decoration:none; padding:.618rem 1rem; border-radius:8px; font-weight:600}
@media (prefers-color-scheme: dark){ .btn{color:#0f1115} }