:root{
  --bg:#0f172a; --muted:#111827; --card:#0b1222; --text:#e5e7eb; --soft:#9ca3af;
  --accent:#60a5fa; --accent-2:#34d399; --border:#1f2937; --max:900px; --radius:16px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f8fafc; --muted:#f1f5f9; --card:#ffffff; --text:#0f172a; --soft:#475569; --border:#e5e7eb; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans;
     background:linear-gradient(180deg,var(--bg),#0000), var(--bg); color:var(--text); line-height:1.7}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:32px 20px}
.site-header{position:sticky; top:0; backdrop-filter:blur(6px); background:color-mix(in srgb, var(--bg), transparent 30%);
             border-bottom:1px solid var(--border); z-index:10}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}
.brand .dot{width:10px; height:10px; background:var(--accent); border-radius:50%}
.grid{display:grid; gap:20px}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:0 10px 30px #00000020}
.post-title{font-size:clamp(28px,4vw,40px); margin:0 0 6px}
.meta{color:var(--soft); font-size:14px; margin-bottom:18px}
.post img{max-width:100%; height:auto; border-radius:12px; display:block; margin:18px auto}
.post h2{margin-top:28px; font-size:1.5rem}
.post h3{margin-top:22px; font-size:1.1rem}
.post p{margin:12px 0}
blockquote{border-left:4px solid var(--accent); padding-left:14px; color:var(--soft)}
pre{background:var(--muted); padding:14px; border-radius:10px; overflow:auto}
code{font-family:ui-monospace,Menlo,Consolas,monospace}
hr{border:0; border-top:1px solid var(--border); margin:26px 0}
.footer{border-top:1px solid var(--border); margin-top:36px; padding:24px 0; color:var(--soft); font-size:14px}
.toc{background:var(--muted); padding:14px; border-radius:12px; border:1px solid var(--border)}
.list .item{display:block; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; transition:transform .08s ease}
.list .item:hover{transform:translateY(-2px)}
.excerpt{color:var(--soft); margin-top:6px}