.blog-detail-page{--bp-bg:var(--bg,#070912);--bp-soft:var(--bg-soft,#0b0f1b);--bp-surface:var(--surface,#0f1422);--bp-surface2:var(--surface-2,#151b2b);--bp-text:var(--text,#f7f9ff);--bp-copy:var(--text-soft,#c8d0e2);--bp-muted:var(--muted,#9aa6bd);--bp-line:var(--line,rgba(173,188,219,.16));--bp-line2:var(--line-strong,rgba(173,188,219,.28));--bp-blue:var(--signal,#7797ff);--bp-blue2:var(--signal-strong,#9eb2ff);--bp-gold:var(--trace,#f0b64d);--bp-gold2:var(--trace-soft,#ffd88d);--bp-green:var(--status,#66e7b4);--bp-display:var(--display,"Space Grotesk",sans-serif);--bp-body:var(--body,"Inter",sans-serif);--bp-mono:var(--mono,"JetBrains Mono",monospace);color:var(--bp-text);background:var(--bp-bg);font-family:var(--bp-body)}.blog-detail-page *{box-sizing:border-box}.blog-container{width:min(calc(100% - 40px),1180px);margin:auto}.blog-progress{position:fixed;top:var(--nav-height,78px);left:0;z-index:90;width:0;height:2px;background:linear-gradient(90deg,var(--bp-blue),var(--bp-gold));box-shadow:0 0 12px rgba(119,151,255,.45)}.blog-hero{position:relative;padding:86px 0 72px;overflow:hidden;border-bottom:1px solid var(--bp-line)}.blog-hero:before{position:absolute;inset:0;content:"";opacity:.28;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle at 35% 15%,#000,transparent 76%)}.blog-breadcrumb{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:46px;color:var(--bp-muted);font:.69rem var(--bp-mono)}.blog-breadcrumb a:hover{color:var(--bp-blue2)}.blog-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:58px;align-items:center}.blog-category{display:inline-flex;margin-bottom:20px;padding:7px 11px;border:1px solid rgba(102,231,180,.26);border-radius:999px;color:#b8f7dc;background:rgba(102,231,180,.07);font:.69rem var(--bp-mono);text-transform:uppercase}.blog-hero h1{margin:0;max-width:850px;font:700 clamp(3rem,6.7vw,6.6rem)/.96 var(--bp-display);letter-spacing:-.065em}.blog-excerpt{max-width:760px;margin:28px 0 0;color:var(--bp-copy);font-size:clamp(1rem,1.75vw,1.17rem)}.blog-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;margin-top:38px;padding-top:24px;border-top:1px solid var(--bp-line)}.blog-author{display:flex;align-items:center;gap:13px}.blog-author>span,.blog-author-large{display:grid;width:46px;height:46px;place-items:center;border:1px solid rgba(119,151,255,.42);border-radius:13px;background:rgba(119,151,255,.09);font:700 .95rem var(--bp-display)}.blog-author strong{display:block;font-family:var(--bp-display)}.blog-author small{display:block;color:var(--bp-muted);font:.62rem var(--bp-mono)}.blog-meta-info{display:flex;flex-wrap:wrap;gap:10px 20px;color:var(--bp-muted);font:.66rem var(--bp-mono)}.blog-map{min-height:390px;overflow:hidden;border:1px solid var(--bp-line);border-radius:24px;background:linear-gradient(145deg,rgba(119,151,255,.13),transparent 42%),linear-gradient(330deg,rgba(240,182,77,.08),transparent 38%),var(--bp-surface);box-shadow:0 26px 70px rgba(0,0,0,.34)}.blog-map-top{display:flex;align-items:center;gap:6px;padding:18px 20px;border-bottom:1px solid var(--bp-line);color:var(--bp-muted);font:.64rem var(--bp-mono)}.blog-map-top span{margin-right:auto}.blog-map-top i{width:6px;height:6px;border-radius:50%;background:var(--bp-muted)}.blog-map-top i:first-of-type{background:var(--bp-blue)}.blog-map-top i:last-of-type{background:var(--bp-gold)}.blog-map-body{position:relative;min-height:330px;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px}.blog-map-body svg{position:absolute;inset:40px 20px 20px;width:calc(100% - 40px);height:calc(100% - 60px)}.blog-map-body path{fill:none;stroke:rgba(158,178,255,.45);stroke-width:1.3;stroke-dasharray:7 9}.blog-map-body circle{fill:var(--bp-blue)}.blog-map-body>span{position:absolute;z-index:2;padding:7px 10px;border:1px solid var(--bp-line2);border-radius:999px;background:rgba(7,9,18,.85);color:var(--bp-copy);font:.6rem var(--bp-mono)}.map-main{top:46%;left:50%;transform:translate(-50%,-50%)}.map-a{top:30px;left:20px}.map-b{top:36px;right:20px}.map-c{right:20px;bottom:28px}.blog-cover-section{padding:54px 0 0}.blog-cover{margin:0;overflow:hidden;border:1px solid var(--bp-line);border-radius:24px;background:var(--bp-surface);box-shadow:0 24px 70px rgba(0,0,0,.25)}.blog-cover img{display:block;width:100%;max-height:680px;object-fit:cover}.blog-content-section{padding:80px 0 108px}.blog-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:70px;justify-content:center;align-items:start}.blog-sidebar{position:sticky;top:calc(var(--nav-height,78px) + 34px);display:grid;gap:28px}.blog-toc,.blog-share{display:grid;gap:11px;padding:20px;border:1px solid var(--bp-line);border-radius:15px;background:rgba(255,255,255,.018)}.blog-toc b,.blog-share b{color:var(--bp-gold2);font:.63rem var(--bp-mono)}.blog-toc a,.blog-share a,.blog-share button{padding:0;border:0;color:var(--bp-muted);background:none;font:.66rem var(--bp-mono);text-align:left;cursor:pointer}.blog-toc a:hover,.blog-share a:hover,.blog-share button:hover{color:var(--bp-blue2)}.blog-article{min-width:0;color:var(--bp-copy);font-size:1.04rem;line-height:1.85}.blog-article>*:first-child{margin-top:0}.blog-article h2{margin:62px 0 20px;color:var(--bp-text);font:700 clamp(2rem,4vw,3.15rem)/1.08 var(--bp-display);letter-spacing:-.045em;scroll-margin-top:calc(var(--nav-height,78px) + 30px)}.blog-article h3{margin:42px 0 15px;color:var(--bp-text);font:700 1.55rem/1.2 var(--bp-display);letter-spacing:-.03em;scroll-margin-top:calc(var(--nav-height,78px) + 30px)}.blog-article p{margin:0 0 24px}.blog-article strong{color:var(--bp-text)}.blog-article a{color:var(--bp-blue2);border-bottom:1px solid rgba(158,178,255,.35)}.blog-article ul,.blog-article ol{display:grid;gap:10px;margin:0 0 26px;padding-left:24px}.blog-article li::marker{color:var(--bp-gold)}.blog-article blockquote{margin:34px 0;padding:23px 25px;border:1px solid rgba(119,151,255,.28);border-left:4px solid var(--bp-blue);border-radius:0 14px 14px 0;color:var(--bp-text);background:linear-gradient(90deg,rgba(119,151,255,.1),transparent)}.blog-article img{display:block;width:100%;height:auto;margin:34px 0;border:1px solid var(--bp-line);border-radius:16px}.blog-article pre{position:relative;margin:32px 0;padding:52px 22px 22px;overflow-x:auto;border:1px solid var(--bp-line);border-radius:16px;color:#dfe6ff;background:#080b13;font:.82rem/1.7 var(--bp-mono)}.blog-article pre:before{position:absolute;top:17px;left:18px;content:"CODE";color:var(--bp-gold2);font:.6rem var(--bp-mono)}.blog-code-copy{position:absolute;top:11px;right:12px;padding:6px 9px;border:1px solid var(--bp-line2);border-radius:7px;color:var(--bp-muted);background:var(--bp-surface);font:.6rem var(--bp-mono);cursor:pointer}.blog-article code:not(pre code){padding:3px 6px;border:1px solid var(--bp-line);border-radius:6px;color:var(--bp-gold2);background:rgba(255,255,255,.035);font:.86em var(--bp-mono)}.blog-article table{width:100%;margin:32px 0;border-collapse:collapse;border:1px solid var(--bp-line);font-size:.9rem}.blog-article th,.blog-article td{padding:13px 14px;border-bottom:1px solid var(--bp-line);text-align:left}.blog-article th{color:var(--bp-text);background:var(--bp-surface2);font:.66rem var(--bp-mono);text-transform:uppercase}.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:52px;padding-top:26px;border-top:1px solid var(--bp-line)}.blog-tags span{padding:6px 9px;border:1px solid var(--bp-line);border-radius:8px;color:var(--bp-muted);font:.65rem var(--bp-mono)}.blog-author-card{display:grid;grid-template-columns:auto 1fr;gap:20px;margin-top:52px;padding:28px;border:1px solid var(--bp-line);border-radius:18px;background:linear-gradient(145deg,rgba(119,151,255,.08),transparent 40%),var(--bp-surface)}.blog-author-large{width:64px;height:64px;border-radius:18px;font-size:1.15rem}.blog-author-card>b,.blog-author-card div>b{color:var(--bp-gold2);font:.61rem var(--bp-mono)}.blog-author-card h2{margin:6px 0 8px;font-size:1.5rem}.blog-author-card p{margin:0;font-size:.9rem}.blog-author-card div>div{display:flex;gap:16px;margin-top:14px}.blog-related-section{padding:96px 0;border-block:1px solid var(--bp-line);background:var(--bp-soft)}.blog-related-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:38px}.blog-related-head span{color:var(--bp-blue2);font:.7rem var(--bp-mono)}.blog-related-head h2{margin:12px 0 0;font:700 clamp(2.2rem,4.6vw,4rem)/1 var(--bp-display);letter-spacing:-.05em}.blog-related-head>a{color:var(--bp-blue2);font:.69rem var(--bp-mono)}.blog-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.blog-related-grid article{overflow:hidden;border:1px solid var(--bp-line);border-radius:18px;background:var(--bp-surface);transition:.2s}.blog-related-grid article:hover{transform:translateY(-5px);border-color:rgba(119,151,255,.4)}.related-visual{min-height:150px;display:flex;align-items:end;padding:18px;background:radial-gradient(circle at 20% 20%,rgba(119,151,255,.3),transparent 28%),radial-gradient(circle at 85% 80%,rgba(240,182,77,.17),transparent 27%),var(--bp-surface2)}.related-visual span{padding:5px 8px;border:1px solid rgba(102,231,180,.3);border-radius:999px;color:#b8f7dc;font:.59rem var(--bp-mono)}.related-body{padding:21px}.related-body h3{margin:0;font:700 1.25rem/1.25 var(--bp-display)}.related-body p{color:var(--bp-copy);font-size:.85rem}.related-body>a{color:var(--bp-blue2);font:.66rem var(--bp-mono)}.blog-contact-section{padding:96px 0}.blog-contact{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end;padding:48px;border:1px solid rgba(158,178,255,.26);border-radius:24px;background:radial-gradient(circle at 10% 0%,rgba(119,151,255,.17),transparent 34%),radial-gradient(circle at 100% 100%,rgba(240,182,77,.1),transparent 30%),var(--bp-surface)}.blog-contact span{color:var(--bp-blue2);font:.7rem var(--bp-mono)}.blog-contact h2{margin:12px 0 0;font:700 clamp(2.2rem,5vw,4.5rem)/1 var(--bp-display);letter-spacing:-.055em}.blog-contact p{color:var(--bp-copy)}.blog-contact>a{display:inline-flex;min-height:48px;align-items:center;padding:12px 17px;border-radius:13px;color:#071019;background:linear-gradient(135deg,var(--bp-blue2),#7a97f8);font:600 .72rem var(--bp-mono);white-space:nowrap}@media(max-width:980px){.blog-hero-grid{grid-template-columns:1fr}.blog-map{min-height:330px}.blog-layout{grid-template-columns:1fr;gap:34px}.blog-sidebar{position:static;grid-template-columns:repeat(2,1fr)}.blog-related-grid{grid-template-columns:repeat(2,1fr)}.blog-related-grid article:last-child{grid-column:1/-1}.blog-contact{grid-template-columns:1fr}.blog-contact>a{justify-self:start}}@media(max-width:720px){.blog-container{width:min(calc(100% - 28px),1180px)}.blog-hero{padding:60px 0 54px}.blog-hero h1{font-size:clamp(2.8rem,13vw,5rem)}.blog-meta{align-items:flex-start;flex-direction:column}.blog-sidebar{grid-template-columns:1fr}.blog-content-section{padding:60px 0 80px}.blog-article table{display:block;overflow-x:auto}.blog-related-head{align-items:flex-start;flex-direction:column}.blog-related-grid{grid-template-columns:1fr}.blog-related-grid article:last-child{grid-column:auto}.blog-contact{padding:34px 25px}}@media(max-width:480px){.blog-map{min-height:300px}.blog-map-body{min-height:245px}.blog-author-card{grid-template-columns:1fr}.blog-contact{padding:30px 21px}.blog-contact>a{width:100%;justify-content:center}}@media print{.blog-progress,.blog-map,.blog-sidebar,.blog-related-section,.blog-contact-section{display:none!important}.blog-detail-page{color:#111;background:#fff}.blog-hero{padding:25px 0}.blog-hero-grid,.blog-layout{display:block}.blog-hero h1,.blog-article h2,.blog-article h3{color:#111}.blog-excerpt,.blog-article{color:#333}.blog-article pre{color:#111;background:#f4f4f4;white-space:pre-wrap}}
.blog-cover-image { min-height: 330px; height: 100%; overflow: hidden; }
.blog-cover-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-author img, .blog-author-large img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.article-image { margin: 30px 0; }
.article-image img { width: 100%; border-radius: 18px; border: 1px solid rgba(173,188,219,.16); }
.article-image figcaption, .article-gallery figcaption { margin-top: 8px; color: #9aa6bd; font-size: .8rem; }
.article-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 30px 0; }
.article-gallery figure { margin: 0; }
.article-gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; border: 1px solid rgba(173,188,219,.16); }
.article-callout { margin: 26px 0; padding: 18px 20px; border: 1px solid rgba(119,151,255,.25); border-left: 3px solid #7797ff; border-radius: 14px; background: rgba(119,151,255,.06); }
.article-callout strong { display: block; margin-bottom: 6px; color: #9eb2ff; font: 700 .72rem/1 "JetBrains Mono", monospace; text-transform: uppercase; }
.article-callout.warning { border-color: rgba(240,182,77,.35); border-left-color: #f0b64d; background: rgba(240,182,77,.06); }
.article-callout.error { border-color: rgba(255,141,156,.35); border-left-color: #ff8d9c; background: rgba(255,141,156,.06); }
.article-table { overflow-x: auto; margin: 28px 0; }
.article-table table { width: 100%; border-collapse: collapse; }
.article-table th, .article-table td { padding: 10px 12px; border: 1px solid rgba(173,188,219,.16); text-align: left; }
.article-divider { margin: 38px 0; border: 0; border-top: 1px solid rgba(173,188,219,.16); }
.article-embed-link a { color: #9eb2ff; }
.code-file-name { margin: 28px 0 -22px; color: #9aa6bd; font: 600 .7rem/1 "JetBrains Mono", monospace; }
@media (max-width: 720px) { .article-gallery { grid-template-columns: 1fr; } }
.blog-map-body{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px;padding:32px}
.blog-map-body>span{position:static}
.blog-author>img{width:46px;height:46px;flex:0 0 46px;border:1px solid rgba(119,151,255,.42);border-radius:13px;object-fit:cover}
