:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1d212b;
  --fg:#e8eaf0; --muted:#9aa3b2; --line:#2a2f3a;
  --accent:#5b8cff; --accent2:#8b5bff; --ok:#3ecf8e;
  --maxw:960px; --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.75; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
header.site{
  position:sticky; top:0; z-index:10; backdrop-filter:blur(10px);
  background:rgba(15,17,21,.8); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-weight:700; font-size:18px; letter-spacing:.5px; color:var(--fg)}
.brand .dot{color:var(--accent)}
.nav-links{display:flex; gap:22px}
.nav-links a{color:var(--muted); font-size:15px}
.nav-links a:hover,.nav-links a.active{color:var(--fg); text-decoration:none}
.hero{padding:72px 0 40px}
.hero h1{font-size:40px; line-height:1.2; margin:0 0 14px; letter-spacing:.5px}
.hero h1 .grad{background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.sub{color:var(--muted); font-size:18px; max-width:640px; margin:0}
.badge{display:inline-block; padding:5px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:13px; margin-bottom:20px}
section{padding:34px 0}
h2.sec{font-size:24px; margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; transition:.18s}
.card:hover{transform:translateY(-3px); border-color:#3a4150}
.card .tag{font-size:12px; color:var(--accent); margin-bottom:8px; display:block}
.card h3{margin:0 0 8px; font-size:17px}
.card p{margin:0; color:var(--muted); font-size:14px}
.card .meta{margin-top:14px; font-size:12px; color:var(--muted)}
.prose{color:#cdd3de}
.prose h2{font-size:22px; margin:26px 0 12px}
.prose h3{font-size:18px; margin:20px 0 10px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px; padding-left:22px}
.prose code{background:var(--panel2); padding:2px 6px; border-radius:6px; font-size:14px; color:#c9d4ff}
.prose pre{background:#0b0d12; border:1px solid var(--line); border-radius:10px; padding:14px 16px; overflow:auto}
.prose pre code{background:none; padding:0; color:#cdd3de}
.about-box{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.kv{display:grid; grid-template-columns:120px 1fr; gap:8px 16px; margin-top:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
footer.site{border-top:1px solid var(--line); margin-top:40px; padding:26px 0; color:var(--muted); font-size:14px}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between}
.verify{font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--ok); font-size:12px; word-break:break-all}
.crumbs{color:var(--muted); font-size:14px; margin:26px 0 6px}
.crumbs a{color:var(--muted)}
.back{display:inline-block; margin:10px 0 0; font-size:14px}
@media(max-width:640px){
  .hero h1{font-size:30px}
  .nav-links{gap:14px}
  .kv{grid-template-columns:1fr}
}