:root{
  --bg:#0f1115; --bg-soft:#151922; --line:#232a36;
  --fg:#e6e9ef; --fg-dim:#9aa4b2; --accent:#7aa2f7;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono); font-size:.92em; background:var(--bg-soft); padding:.1em .35em; border-radius:4px; border:1px solid var(--line)}
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:760px; margin:0 auto; padding:22px 20px; border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--fg); font-weight:600; letter-spacing:.2px}
.brand:hover{text-decoration:none; color:var(--accent)}
.site-header nav{display:flex; gap:18px; font-size:14px}
.site-header nav a{color:var(--fg-dim)}
.site-header nav a.active,.site-header nav a:hover{color:var(--fg)}
main{max-width:760px; margin:0 auto; padding:36px 20px 8px}
.hero h1{font-size:30px; line-height:1.35; margin:0 0 12px; letter-spacing:-.3px}
.hero p{color:var(--fg-dim); margin:0 0 6px}
.meta{color:#77808f; font-size:13px; font-family:var(--mono)}
.posts h2{font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:#77808f; margin:44px 0 8px; font-weight:600}
.posts article{padding:18px 0; border-bottom:1px solid var(--line)}
.posts article:last-child{border-bottom:0}
.posts h3{font-size:18px; margin:0 0 6px; font-weight:600}
.posts h3 a{color:var(--fg)}
.posts h3 a:hover{color:var(--accent); text-decoration:none}
.posts p{margin:0 0 6px; color:var(--fg-dim); font-size:15px}
.site-footer{max-width:760px; margin:40px auto 0; padding:22px 20px 40px; border-top:1px solid var(--line); color:#77808f; font-size:13px}
.site-footer a{color:#9aa4b2}
.archive-list{list-style:none; padding:0; margin:0}
.archive-list li{display:flex; gap:16px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:15px}
.archive-list time{color:#77808f; font-family:var(--mono); font-size:13px; min-width:92px}
.about p{color:var(--fg-dim)}
@media (max-width:520px){
  .site-header{flex-wrap:wrap}
  .hero h1{font-size:24px}
}