:root{
  --ink:#1a1a1a; --ink-2:#555; --ink-3:#8a8a8a;
  --line:#e6e6e6; --bg:#ffffff; --bg-soft:#fafafa;
  --accent:#0f62fe; --accent-soft:#eef4ff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.75; font-size:16px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}

.top{border-bottom:1px solid var(--line);background:var(--bg)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-weight:700;font-size:17px;color:var(--ink)}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:22px;font-size:14px}
.nav a{color:var(--ink-2)}
.nav a:hover{color:var(--ink);text-decoration:none}

.hero{padding:56px 0 40px;border-bottom:1px solid var(--line)}
.hero h1{font-size:26px;font-weight:700;letter-spacing:.5px}
.hero p.tag{margin-top:10px;color:var(--ink-2);font-size:15px}
.hero .meta{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.chip{font-size:12px;color:var(--ink-2);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:3px 12px}

.posts{padding:8px 0 20px}
.posts h2.sec{font-size:14px;font-weight:600;color:var(--ink-3);letter-spacing:2px;margin:28px 0 6px}
article.post{padding:22px 0;border-bottom:1px solid var(--line)}
article.post:last-child{border-bottom:none}
.post .date{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.post h3{font-size:17px;font-weight:600;margin:4px 0 6px}
.post h3 a{color:var(--ink)}
.post h3 a:hover{color:var(--accent);text-decoration:none}
.post p.sum{font-size:14px;color:var(--ink-2)}
.post .tags{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12px;color:var(--ink-3)}
.tag::before{content:"# "}

/* 文章详情页 */
.article{padding:44px 0 30px}
.article h1{font-size:24px;font-weight:700;line-height:1.4}
.article .date{display:block;margin-top:8px;font-size:12px;color:var(--ink-3)}
.article .body{margin-top:26px;font-size:16px}
.article .body h2{font-size:19px;font-weight:700;margin:30px 0 10px}
.article .body h3{font-size:16px;font-weight:600;margin:22px 0 8px}
.article .body p{margin:0 0 14px}
.article .body ul,.article .body ol{margin:0 0 14px 22px}
.article .body li{margin:4px 0}
.article .body pre{background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:14px 16px;overflow-x:auto;font-size:13px;line-height:1.6;margin:0 0 16px}
.article .body code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;background:var(--bg-soft);padding:1px 5px;border-radius:4px}
.article .body pre code{background:none;padding:0}
.article .body blockquote{border-left:3px solid var(--line);padding:4px 0 4px 14px;color:var(--ink-2);margin:0 0 16px}
.article .body table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:14px}
.article .body th,.article .body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.article .body th{background:var(--bg-soft)}
.backlink{display:inline-block;margin-top:10px;font-size:14px}

footer{border-top:1px solid var(--line);margin-top:40px;padding:28px 0 40px;background:var(--bg-soft)}
footer .wrap{font-size:13px;color:var(--ink-3)}
footer p+p{margin-top:6px}
footer a{color:var(--ink-3)}
.beian .gongan-icon{width:14px;height:14px;vertical-align:-2px;margin-right:3px}

@media (max-width:560px){
  .top .wrap{height:auto;flex-direction:column;gap:8px;padding:12px 20px}
  .hero{padding:36px 0 28px}
}