:root{
  --bg:#0e1116; --panel:#161b22; --line:#252c36; --fg:#e6edf3; --dim:#9aa7b4;
  --accent:#4f8cff; --accent2:#2ec4a6; --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.site-head{
  border-bottom:1px solid var(--line); padding:14px 20px;
  position:sticky; top:0; background:rgba(14,17,22,.92); backdrop-filter:blur(8px); z-index:9;
}
.site-head a{color:var(--dim); font-size:14px}
.wrap{max-width:760px; margin:0 auto; padding:28px 20px 64px}
h1{font-size:28px; line-height:1.35; margin:8px 0 14px}
h2{font-size:20px; margin:34px 0 10px; padding-top:6px}
h3{font-size:17px; margin:22px 0 8px}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px; padding-left:22px}
li{margin:6px 0}
.lead{color:var(--dim); font-size:17px; border-left:3px solid var(--accent); padding-left:14px; margin-bottom:24px}
code{background:#1f2630; padding:2px 6px; border-radius:6px; font-size:14px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:0 0 16px}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid .card{margin:0}
.card h3{margin-top:0}
.card .meta{color:var(--dim); font-size:13px}
.tag{display:inline-block; font-size:12px; color:var(--accent2); border:1px solid rgba(46,196,166,.35); border-radius:999px; padding:1px 9px; margin-right:6px}
table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15px; display:block; overflow-x:auto}
th,td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top}
th{background:#1c222b; font-weight:600; white-space:nowrap}
tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
details{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:0 0 10px}
summary{cursor:pointer; font-weight:600}
details p{margin:10px 0 0; color:var(--dim)}
.cta{
  margin:36px 0 8px; padding:22px; border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(79,140,255,.16),rgba(46,196,166,.12));
  border:1px solid rgba(79,140,255,.32);
}
.cta h2{margin:0 0 8px; font-size:19px}
.btn{
  display:inline-block; margin-top:10px; padding:11px 22px; border-radius:999px;
  background:var(--accent); color:#fff; font-weight:600;
}
.btn:hover{text-decoration:none; filter:brightness(1.1)}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--dim); margin-left:10px}
.site-foot{border-top:1px solid var(--line); padding:22px 20px 40px; color:var(--dim); font-size:13px}
.site-foot .wrap{padding-top:0}
.hero{padding:36px 0 8px}
.hero h1{font-size:32px}
.hero p{color:var(--dim); font-size:17px; max-width:620px}
.crumb{color:var(--dim); font-size:13px; margin:0 0 6px}
@media(max-width:520px){h1{font-size:23px}.hero h1{font-size:25px}.wrap{padding:20px 16px 56px}}