:root{
  --bg:#0b0c10; --card:#13151a; --text:#e8eaed; --muted:#9aa3b2; --border:#232633; --accent:#4f46e5;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --card:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb; --accent:#4f46e5; }
}
html,body{background:var(--bg); color:var(--text);}
.container{max-width:1100px}
.blog-title{font-weight:800;font-size:clamp(1.5rem,1rem+2vw,2.2rem)}
.row.g-4{--bs-gutter-x:1.2rem; --bs-gutter-y:1.2rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.12);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;overflow:hidden}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.18);border-color:color-mix(in oklab, var(--border) 75%, var(--accent))}
.card-img-top{aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--border)}
.card-body{padding:16px 16px 18px}
.card-title{font-weight:700;font-size:clamp(1.05rem,.98rem + .4vw,1.2rem);margin-bottom:.35rem}
.card-text{color:var(--muted);font-size:.98rem;line-height:1.55;min-height:3.1em}
.btn-read{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:12px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:600;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease}
.btn-read:hover{transform:translateY(-1px);text-decoration:none;box-shadow:0 8px 20px rgba(79,70,229,.35)}
.btn-read svg{width:18px;height:18px}
.article{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:clamp(16px,2vw,26px);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.article h1{font-weight:800;font-size:clamp(1.35rem,1rem + 1.6vw,2rem);margin:.2rem 0 .6rem}
.post-meta{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.post-figure img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}
.post-figure figcaption{color:var(--muted);font-size:.9rem;margin-top:.4rem}
.article h2{font-size:clamp(1.15rem,1rem + .8vw,1.5rem);margin-top:1.2rem}
.article p{margin:.85rem 0}
.article ul, .article ol{margin:.5rem 0 .5rem 1.2rem}
.article pre{background:#0e1116;border:1px solid var(--border);border-radius:12px;padding:12px;overflow:auto}
.article .callout{background:#0f172a;border:1px solid #1f2937;padding:12px;border-radius:12px;margin-top:1rem}
@media (min-width:768px){ .card-col{flex:0 0 50%; max-width:50%} }
@media (min-width:1200px){ .card-col{flex:0 0 33.3333%; max-width:33.3333%} }