:root{
  --bk-bg:#0f0f12;
  --bk-surface:#14161d;
  --bk-text:#e8eaf0;
  --bk-muted:#9aa3b2;
  --bk-accent:#7c5cff;
  --bk-accent-2:#22d3ee;
}
html{scroll-behavior:smooth}
.bk-blog{color:var(--bk-text);background:var(--bk-bg)}
.bk-article{max-width:960px;margin:0 auto}
.bk-content img,.bk-content video{max-width:100%;height:auto;display:block;border-radius:12px}

.bk-hero{position:relative;isolation:isolate;border-radius:16px;overflow:hidden;margin:16px 12px}
.bk-hero-media img{width:100%;height:380px;object-fit:cover;display:block}
.bk-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.55) 100%)}
.bk-hero-inner{position:absolute;left:24px;right:24px;bottom:20px}
.bk-cat{display:inline-block;background:color-mix(in oklab, var(--bk-accent) 24%, transparent);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;text-decoration:none}
.bk-title{margin:10px 0 6px;font-size:clamp(28px,3.4vw,44px);line-height:1.1}
.bk-meta{color:var(--bk-muted);gap:8px;display:flex;align-items:center;font-size:14px}

.bk-content{background:var(--bk-surface);padding:28px;border-radius:16px;margin:18px 12px}
.bk-intro{color:var(--bk-muted);margin:4px 0 14px;font-size:15px}
.bk-toc{background:#0c0e13;border:1px solid #1f2430;padding:16px;border-radius:12px;margin:0 0 18px}
.bk-toc-title{font-weight:600;margin-bottom:8px;color:var(--bk-accent)}
.bk-toc ol{margin:0;padding-left:20px;display:grid;gap:6px}
.bk-toc a{color:var(--bk-text);text-decoration:none}
.bk-toc a:hover{color:var(--bk-accent)}
.bk-content h2{scroll-margin-top:90px;font-size:clamp(22px,2.2vw,30px);margin:28px 0 10px}
.bk-content h3{font-size:clamp(18px,1.8vw,24px);margin:22px 0 8px}
.bk-content p{line-height:1.75;margin:12px 0}
.bk-content a{color:var(--bk-accent);text-decoration:underline}
.bk-content blockquote{border-left:4px solid var(--bk-accent);margin:18px 0;padding:10px 16px;color:var(--bk-muted);background:#0c0e13;border-radius:8px}
.bk-content pre,.bk-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.bk-content pre{background:#0c0e13;padding:16px;border-radius:12px;overflow:auto}
.bk-content ul,.bk-content ol{padding-left:22px;margin:12px 0}
.bk-content figure{margin:18px 0;text-align:center}
.bk-content figcaption{color:var(--bk-muted);font-size:13px;margin-top:6px}

.bk-footer{margin:22px 12px 40px}
.bk-tags a{display:inline-block;margin:0 8px 8px 0;padding:6px 10px;border-radius:999px;background:#0c0e13;color:var(--bk-text);text-decoration:none;font-size:12px}
.bk-author{display:flex;gap:12px;align-items:flex-start;margin:22px 0}
.bk-author img{border-radius:50%}
.bk-author-name{font-weight:600}
.bk-author-bio{color:var(--bk-muted);font-size:14px}
.bk-nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.bk-nav a{color:#fff;background:linear-gradient(90deg,var(--bk-accent),var(--bk-accent-2));padding:10px 14px;border-radius:10px;text-decoration:none;white-space:nowrap;}

@media (max-width:768px){
  .bk-hero-media img{height:260px}
  .bk-content{padding:20px}
}