:root{
  --bg:#0b0f14;
  --card:#121922;
  --text:#e8eef5;
  --muted:#9bb0c3;
  --line:#233041;
  --accent:#7cc4ff;
  --accent2:#9effd5;
  --max:860px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:28px 20px 64px}
header.site{padding:22px 0 10px;border-bottom:1px solid var(--line);margin-bottom:28px}
.brand{font-size:1.8rem;font-weight:700;color:var(--text)}
.tagline{color:var(--muted);margin-top:6px}
nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px}
nav a{color:var(--muted)}
nav a:hover{color:var(--text)}
.hero{padding:26px 0 10px}
.hero h1{font-size:2.3rem;line-height:1.15;margin:0 0 12px}
.hero p{font-size:1.08rem;color:var(--muted);max-width:720px}
.cards{display:grid;gap:16px;margin-top:26px}
.card{
  display:block;padding:18px 18px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;color:var(--text)
}
.card h2,.card h3{margin:0 0 8px;line-height:1.25}
.meta{font-size:.95rem;color:var(--muted);margin-bottom:10px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:.82rem;color:var(--muted)}
article.post h1{font-size:2.35rem;line-height:1.15;margin:0 0 10px}
article.post .content{margin-top:28px}
article.post .content h2,article.post .content h3,article.post .content h4{margin-top:30px;line-height:1.25}
article.post .content p,article.post .content ul,article.post .content ol,article.post .content blockquote{margin:16px 0}
article.post .content blockquote{
  margin-left:0;padding:14px 16px;border-left:4px solid var(--accent);background:#0f151d;color:#c9d6e3
}
footer.site{border-top:1px solid var(--line);margin-top:40px;padding-top:16px;color:var(--muted);font-size:.95rem}
.note{margin-top:18px;padding:14px 16px;background:#0f151d;border:1px solid var(--line);border-radius:12px;color:var(--muted)}
hr{border:none;border-top:1px solid var(--line);margin:32px 0}
code{background:#0f151d;padding:2px 6px;border-radius:6px}
@media (max-width:640px){
  .hero h1{font-size:1.9rem}
  article.post h1{font-size:1.9rem}
}
.post-image {
  margin: 24px 0;
}

.post-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.post-image figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.95rem;
}