:root { --bg:#f7f7f5; --fg:#222; --muted:#777; --card:#fff; --line:#e6e2dc; --accent:#5d6b82; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans SC",Arial,sans-serif; background:var(--bg); color:var(--fg); line-height:1.75; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.site-header { max-width: 960px; margin:0 auto; padding:24px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { font-size:22px; font-weight:700; color:var(--fg); }
nav { display:flex; gap:16px; flex-wrap:wrap; }
.container { max-width: 900px; margin:0 auto; padding: 20px; }
.hero { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:36px; margin-bottom:28px; }
.hero h1 { margin:0 0 8px; font-size:36px; }
.hero p { color:var(--muted); margin:0; }
.post-list { display:grid; gap:18px; }
.post-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; }
.post-card h2, .post-card h3 { margin:0 0 8px; }
.post-card time, .article time { color:var(--muted); font-size:14px; }
.post-card img { width:100%; max-height:360px; object-fit:cover; border-radius:12px; margin-bottom:12px; }
.article { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px; }
.article h1 { margin-top:0; }
.cover { width:100%; max-height:420px; object-fit:cover; border-radius:14px; margin:20px 0; }
.content img { max-width:100%; border-radius:10px; }
.content pre { overflow:auto; background:#282c34; color:#eee; padding:16px; border-radius:10px; }
.site-footer { max-width: 960px; margin: 30px auto; padding: 20px; color:var(--muted); text-align:center; }
@media (max-width: 640px) { .site-header { align-items:flex-start; flex-direction:column; } .hero h1 { font-size:30px; } }