:root { --ink:#1a1d23; --muted:#5b6470; --line:#e4e7ec; --accent:#0b6bcb; --bg:#ffffff; --card:#f7f8fa; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.7; font-size:17px; }
.wrap { max-width:760px; margin:0 auto; padding:0 20px; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.site-header { border-bottom:1px solid var(--line); padding:14px 0; margin-bottom:32px; }
.site-header .wrap { display:flex; justify-content:space-between; align-items:center; }
.logo { font-weight:700; font-size:19px; color:var(--ink); }
.site-header nav a { margin-left:18px; color:var(--muted); font-size:15px; }

.hero h1 { font-size:30px; margin:0 0 8px; }
.hero p { color:var(--muted); margin:0 0 36px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 22px; margin-bottom:16px; }
.card h2 { margin:0 0 6px; font-size:20px; }
.card h2 a { color:var(--ink); }
.meta { color:var(--muted); font-size:14px; margin:4px 0 10px; }

.post h1 { font-size:32px; line-height:1.25; margin-bottom:6px; }
.post h2 { font-size:23px; margin:36px 0 10px; padding-top:8px; border-top:1px solid var(--line); }
.post h3 { font-size:18px; margin:26px 0 8px; }
.post img { max-width:100%; height:auto; border-radius:8px; }
.post table { border-collapse:collapse; width:100%; margin:18px 0; font-size:15px; display:block; overflow-x:auto; }
.post th, .post td { border:1px solid var(--line); padding:9px 12px; text-align:left; }
.post th { background:var(--card); }
.post code { background:var(--card); padding:2px 6px; border-radius:4px; font-size:15px; }
.post blockquote { border-left:3px solid var(--accent); margin:18px 0; padding:4px 18px; color:var(--muted); }
.post ul, .post ol { padding-left:24px; }
.post li { margin-bottom:6px; }

.note { background:#fff8e6; border:1px solid #f0dfae; border-radius:8px; padding:12px 18px; font-size:15px; margin:18px 0; }

.site-footer { border-top:1px solid var(--line); margin-top:56px; padding:26px 0 40px; color:var(--muted); font-size:14px; }
.site-footer .fine { font-size:13px; }

@media (max-width:600px) {
  .post h1 { font-size:26px; }
  .hero h1 { font-size:25px; }
}