:root{
  --radius:12px;
  --brand:#6f4af2;
  --brand-600:#6141d8;
  --text:#1a1a1a;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#ffffff;
  --border:#e5e7eb;
}

:root.dark{
  --text:#e7e7e7;
  --muted:#a1a1aa;
  --bg:#0b0b0f;
  --card:#111214;
  --border:#22232a;
}

html, body{background:var(--bg); color:var(--text); font-family: "Cairo","Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
p{line-height:1.85; margin: 0 0 1rem;}
h1,h2,h3,h4{font-weight:700; letter-spacing:.1px;}
h1{font-size: clamp(28px, 4vw, 40px);}
h2{font-size: clamp(22px, 2.5vw, 28px);}
h3{font-size: clamp(18px, 2vw, 22px);}
small, .small{color:var(--muted);}

.navbar, header, footer, section{background:var(--card);}
.border-top, .border-bottom{border-color:var(--border)!important;}

.logo-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#9b8af9);display:inline-block}

a{color:var(--brand); text-decoration:none;}
a:hover{color:var(--brand-600);}

.card-soft{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0,0,0,.04);
}

.article-title a{text-decoration:none;color:inherit}
.article-title a:hover{color:var(--brand)}

.prose img{max-width:100%; height:auto; border-radius:12px; border:1px solid var(--border)}
.prose blockquote{border-inline-start:4px solid var(--brand); padding: .5rem 1rem; background: color-mix(in srgb, var(--brand) 6%, var(--card) 94%); border-radius:8px}
.prose code{background:rgba(148,163,184,.18); padding:.2rem .4rem; border-radius:6px}

.reading-meta{color:var(--muted); font-size:.9rem}
.badge-tag{border:1px solid var(--border); border-radius:999px; padding:.25rem .6rem; font-size:.8rem; color:var(--muted)}
.badge-tag:hover{border-color:var(--brand); color:var(--brand)}

.toc{position:sticky; top:90px}
.toc a{display:block; padding:.25rem 0; color:var(--muted)}
.toc a.active, .toc a:hover{color:var(--brand)}

kbd{border:1px solid var(--border); border-bottom-width:2px; padding:.15rem .35rem; border-radius:6px; background:var(--card)}

.hljs{background:var(--card)!important;}

.prose p{max-width:70ch}