*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a0a;--fg:#e5e5e5;--muted:#737373;--accent:#22c55e;--accent2:#3b82f6;--surface:#171717;--border:#262626;--code-bg:#1c1c1c}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--fg);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Top bar */
.topbar{position:fixed;top:0;left:0;right:0;height:56px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:100}
.topbar .logo{display:flex;align-items:center;gap:10px;color:var(--fg);font-weight:700;font-size:1rem}
.topbar .logo img{width:28px;height:28px}
.topbar .logo:hover{text-decoration:none}
.topbar nav{display:flex;gap:16px;align-items:center}
.topbar nav a{color:var(--muted);font-size:0.85rem}
.topbar nav a:hover{color:var(--fg);text-decoration:none}

/* Blog listing */
.blog-list{max-width:720px;margin:0 auto;padding:80px 24px 60px}
.blog-list h1{font-size:2rem;font-weight:700;letter-spacing:-0.03em;margin-bottom:8px}
.blog-list .subtitle{color:var(--muted);font-size:1rem;margin-bottom:40px}
.blog-card{display:block;border:1px solid var(--border);border-radius:8px;background:var(--surface);margin-bottom:16px;transition:border-color 0.15s;overflow:hidden}
.blog-card:hover{border-color:var(--accent);text-decoration:none}
.blog-card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;object-position:top left}
.blog-card .card-body{padding:20px 24px 24px}
.blog-card h3{font-size:1.1rem;font-weight:600;color:var(--fg);margin-bottom:6px}
.blog-card p{font-size:0.88rem;color:var(--muted);margin-bottom:8px;line-height:1.5}
.blog-card .meta{font-size:0.75rem;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.blog-card .meta .tag{padding:2px 8px;border:1px solid var(--border);border-radius:4px;font-size:0.7rem}
.blog-card .meta .date{color:var(--muted);opacity:0.7}

/* Article page */
.article{max-width:720px;margin:0 auto;padding:80px 24px 60px}
.article .back{display:inline-block;color:var(--muted);font-size:0.85rem;margin-bottom:24px}
.article .back:hover{color:var(--accent)}
.article h1{font-size:2rem;font-weight:700;letter-spacing:-0.03em;margin-bottom:8px;line-height:1.2}
.article .article-meta{color:var(--muted);font-size:0.85rem;margin-bottom:32px;display:flex;gap:16px;flex-wrap:wrap}
.article .article-meta .tag{padding:2px 8px;border:1px solid var(--border);border-radius:4px;font-size:0.7rem}
.article h2{font-size:1.35rem;font-weight:700;letter-spacing:-0.02em;margin-top:48px;margin-bottom:16px;padding-top:24px;border-top:1px solid var(--border)}
.article h2:first-of-type{border-top:none;margin-top:32px;padding-top:0}
.article h3{font-size:1.05rem;font-weight:600;margin-top:32px;margin-bottom:12px;color:var(--accent)}
.article p{color:var(--muted);margin-bottom:16px;max-width:680px}
.article ul,.article ol{color:var(--muted);margin-bottom:16px;padding-left:24px;max-width:680px}
.article li{margin-bottom:6px}
.article li code{color:var(--accent);font-size:0.85em}
.article strong{color:var(--fg)}
.article blockquote{border-left:3px solid var(--accent);padding:12px 20px;margin-bottom:16px;background:var(--surface);border-radius:0 6px 6px 0}
.article blockquote p{margin-bottom:0}
.article img{max-width:100%;border-radius:8px;margin-bottom:16px}

/* Inline code */
code{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:0.88em}
p code,li code,td code{background:var(--code-bg);padding:2px 6px;border-radius:4px;color:var(--accent);font-size:0.84em}

/* Code blocks */
pre{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:16px 20px;overflow-x:auto;font-size:0.84rem;line-height:1.7;margin-bottom:16px;position:relative;max-width:720px}
pre code{color:var(--fg);background:none;padding:0;font-size:inherit}
.comment{color:var(--muted)}
.cmd{color:var(--accent)}

/* Tables */
table{width:100%;max-width:720px;border-collapse:collapse;font-size:0.85rem;margin-bottom:24px}
th{text-align:left;padding:8px 12px;border-bottom:2px solid var(--border);color:var(--muted);font-weight:600;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em}
td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--muted)}
td:first-child{font-family:'SF Mono',Menlo,monospace;color:var(--accent);font-size:0.84rem;white-space:nowrap}

/* Callout */
.callout{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:6px;padding:16px 20px;margin-bottom:24px;max-width:720px}
.callout p{margin-bottom:0}
.callout strong{color:var(--accent)}

/* CTA */
.cta{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:32px;margin-top:48px;text-align:center}
.cta h3{font-size:1.1rem;font-weight:600;color:var(--fg);margin-bottom:8px}
.cta p{color:var(--muted);font-size:0.9rem;margin-bottom:16px;max-width:none}
.cta a{display:inline-block;padding:8px 20px;border-radius:6px;background:var(--accent);color:#000;font-weight:600;font-size:0.9rem}
.cta a:hover{opacity:0.9;text-decoration:none}

/* Footer */
.blog-footer{max-width:720px;margin:0 auto;padding:24px;border-top:1px solid var(--border);color:var(--muted);font-size:0.8rem;text-align:center}
.blog-footer a{color:var(--muted)}
.blog-footer a:hover{color:var(--fg)}

/* Responsive */
@media(max-width:768px){
  .article{padding:72px 20px 40px}
  .blog-list{padding:72px 20px 40px}
}