:root { --bg:#f2f8f8; --text:#173135; --muted:#5c7579; --accent:#0f7c80; --line:#d5e6e7; --card:#ffffff; }
@media (prefers-color-scheme: dark) { :root { --bg:#0e1a1c; --text:#dcecec; --muted:#93adb0; --accent:#4cc3c7; --line:#20393c; --card:#132427; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--text); font:16.5px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color:var(--accent); text-underline-offset:3px; }
.wrap { max-width:920px; margin:0 auto; padding:0 20px; }
header.site { padding:28px 0 18px; border-bottom:0; }
header.site .wrap { display:flex; flex-wrap:wrap; gap:10px 24px; align-items:baseline; justify-content:space-between; }
.brand { font:700 26px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--text); text-decoration:none; letter-spacing:0;  }
.brand b { color:var(--accent); font-weight:inherit; }
.tag { display:block; font:14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--muted); margin-top:4px; letter-spacing:0; text-transform:none; }
nav a { margin-right:18px; font:15px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--muted); text-decoration:none;  }
nav a:hover, nav a[aria-current="page"] { color:var(--accent); }
main { padding:34px 0 54px; }
h1, h2, h3 { font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height:1.25; }
.meta { font:13.5px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--muted); }
article h1 { font-size:33px; margin:6px 0 22px; }
article h2 { font-size:23px; margin:34px 0 10px; }
article p, article li { margin:0 0 15px; }
article ul, article ol { padding-left:24px; }
.box { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px 20px; margin:22px 0; }
.box h3 { margin:0 0 8px; font-size:18px; }
.box ul { margin:0; } .box li { margin-bottom:5px; }
blockquote { margin:22px 0; padding:2px 0 2px 16px; border-left:3px solid var(--accent); color:var(--muted); }
.back { display:inline-block; margin-top:26px; font:15px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
footer.site { border-top:1px solid var(--line); padding:20px 0 32px; color:var(--muted); font:13.5px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.intro { color:var(--muted); margin:0 0 30px; }

.posts { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.posts li { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 18px 20px; }
.posts h2 { margin:6px 0 8px; font-size:20px; }
.posts h2 a { color:var(--text); text-decoration:none; } .posts h2 a:hover { color:var(--accent); }
.posts p { margin:0; color:var(--muted); font-size:15.5px; }
.chip { display:inline-block; font:12px/1 system-ui, sans-serif; padding:5px 8px; border-radius:20px; background:var(--accent); color:var(--bg); }

@media (max-width: 520px) { body { font-size: 16.5px; } article h1 { font-size: 27px; } nav a { margin-right: 14px; } }