.blog-post{--blog-bg:#fff;--blog-surface:#00000005;--blog-surface-hover:#0000000a;--blog-border:#0000000f;--blog-border-hover:#0000001f;--blog-text:#111;--blog-text-secondary:#0000008c;--blog-text-muted:#00000059;--blog-accent:#6c5ce7;--blog-accent-dim:#6c5ce714;--blog-radius:12px;--blog-font:system-ui,-apple-system,"Segoe UI",sans-serif;font-family:var(--blog-font)}@media (prefers-color-scheme:dark){.blog-post{--blog-bg:#09090b;--blog-surface:#ffffff08;--blog-surface-hover:#ffffff0d;--blog-border:#ffffff0f;--blog-border-hover:#ffffff1f;--blog-text:#ffffffeb;--blog-text-secondary:#ffffff8c;--blog-text-muted:#ffffff59;--blog-accent:#a29bfe;--blog-accent-dim:#a29bfe1f}}.dark .blog-post{--blog-bg:#09090b;--blog-surface:#ffffff08;--blog-surface-hover:#ffffff0d;--blog-border:#ffffff0f;--blog-border-hover:#ffffff1f;--blog-text:#ffffffeb;--blog-text-secondary:#ffffff8c;--blog-text-muted:#ffffff59;--blog-accent:#a29bfe;--blog-accent-dim:#a29bfe1f}.blog-post-inner{max-width:720px;margin:0 auto;padding:0 24px;position:relative}.bp-body-wrap{position:relative}.bp-left-col{width:60px;height:100%;position:absolute;top:0;right:calc(100% + 48px)}.bp-center-col{width:100%;min-width:0}.bp-right-col{width:200px;height:100%;position:absolute;top:0;left:calc(100% + 48px)}.bp-header{padding:72px 0 40px}.bp-back{color:var(--blog-text-muted);align-items:center;gap:6px;margin-bottom:32px;font-size:13px;font-weight:450;text-decoration:none;transition:color .2s;display:inline-flex}.bp-back:hover{color:var(--blog-text-secondary)}.bp-back svg{width:14px;height:14px;transition:transform .2s}.bp-back:hover svg{transform:translate(-2px)}.bp-category{text-transform:uppercase;letter-spacing:1.2px;color:var(--blog-accent);margin-bottom:16px;font-size:11px;font-weight:600;display:inline-block}.bp-title{letter-spacing:-1px;color:var(--blog-text);margin:0 0 16px;font-size:38px;font-weight:700;line-height:1.18}.bp-desc{color:var(--blog-text-secondary);max-width:600px;margin:0 0 28px;font-size:17px;font-weight:400;line-height:1.6}.bp-meta{border-bottom:1px solid var(--blog-border);align-items:center;gap:12px;padding-bottom:32px;display:flex}.bp-meta-avatar{width:40px;height:40px;color:var(--blog-text-secondary);background:var(--blog-surface);border:1.5px solid var(--blog-border);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex}.bp-meta-text{flex-direction:column;gap:2px;display:flex}.bp-author-name{color:var(--blog-text);font-size:14px;font-weight:550}.bp-meta-row{color:var(--blog-text-muted);align-items:center;gap:8px;font-size:13px;display:flex}.bp-dot{background:var(--blog-text-muted);opacity:.5;border-radius:50%;width:3px;height:3px}.bp-body{padding-top:40px;padding-bottom:48px}.bp-body h2{letter-spacing:-.4px;color:var(--blog-text);margin:48px 0 16px;font-size:24px;font-weight:600;line-height:1.3}.bp-body h3{letter-spacing:-.2px;color:var(--blog-text);margin:36px 0 12px;font-size:18px;font-weight:600;line-height:1.35}.bp-body p{color:var(--blog-text-secondary);margin:0 0 20px;font-size:16px;font-weight:400;line-height:1.75}.bp-body a{color:var(--blog-accent);text-underline-offset:3px;text-decoration:underline;-webkit-text-decoration-color:var(--blog-accent-dim);text-decoration-color:var(--blog-accent-dim);transition:text-decoration-color .2s}.bp-body a:hover{-webkit-text-decoration-color:var(--blog-accent);text-decoration-color:var(--blog-accent)}.bp-body strong{color:var(--blog-text);font-weight:600}.bp-body ul,.bp-body ol{margin:0 0 20px;padding-left:20px}.bp-body li{color:var(--blog-text-secondary);margin-bottom:6px;font-size:16px;font-weight:400;line-height:1.75}.bp-body li::marker{color:var(--blog-text-muted)}.bp-body blockquote{border-left:2px solid var(--blog-accent);background:0 0;margin:28px 0;padding:4px 0 4px 20px}.bp-body blockquote p{color:var(--blog-text);font-style:italic;font-weight:450}.bp-body code:not(pre code){background:var(--blog-surface);border:1px solid var(--blog-border);color:var(--blog-text);border-radius:5px;padding:2px 7px;font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:14px}.bp-body pre{border:1px solid var(--blog-border);background:var(--blog-surface);border-radius:10px;margin:24px 0;padding:20px;font-size:14px;line-height:1.6;overflow-x:auto}.bp-body pre code{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:14px}.bp-body hr{background:var(--blog-border);border:none;height:1px;margin:40px 0}.bp-body figure{margin:32px 0}.bp-body figure>div{border-radius:var(--blog-radius);border:1px solid var(--blog-border);overflow:hidden}.bp-body figcaption{color:var(--blog-text-muted);text-align:center;margin-top:10px;font-size:13px}.bp-share{flex-direction:column;align-items:center;gap:10px;padding-top:72px;display:flex;position:sticky;top:120px}.bp-share-btn{border:1px solid var(--blog-border);width:42px;height:42px;color:var(--blog-text-muted);cursor:pointer;font-family:var(--blog-font);background:0 0;border-radius:10px;justify-content:center;align-items:center;transition:all .2s;display:flex}.bp-share-btn:hover{border-color:var(--blog-border-hover);color:var(--blog-text-secondary);background:var(--blog-surface-hover)}.bp-share-btn svg{width:18px;height:18px}.bp-writer{flex-direction:column;align-items:flex-start;padding-top:72px;display:flex;position:sticky;top:120px}.bp-writer-avatar{width:52px;height:52px;color:var(--blog-text-secondary);background:var(--blog-surface);border:1.5px solid var(--blog-border);border-radius:50%;justify-content:center;align-items:center;margin-bottom:14px;font-size:18px;font-weight:700;display:flex}.bp-writer-name{color:var(--blog-text);margin-bottom:2px;font-size:15px;font-weight:600}.bp-writer-role{color:var(--blog-accent);margin-bottom:14px;font-size:12px;font-weight:500}.bp-writer-bio{color:var(--blog-text-secondary);margin:0 0 18px;font-size:13px;font-weight:400;line-height:1.6}.bp-writer-links{gap:8px;display:flex}.bp-writer-link{border:1px solid var(--blog-border);width:32px;height:32px;color:var(--blog-text-muted);border-radius:8px;justify-content:center;align-items:center;text-decoration:none;transition:all .2s;display:flex}.bp-writer-link:hover{border-color:var(--blog-border-hover);color:var(--blog-text-secondary);background:var(--blog-surface-hover)}.bp-related{border-top:1px solid var(--blog-border);padding:48px 0 64px}.bp-related-label{text-transform:uppercase;letter-spacing:1px;color:var(--blog-text-muted);margin-bottom:28px;font-size:12px;font-weight:600;display:block}.bp-related-grid{background:var(--blog-border);border-radius:var(--blog-radius);border:1px solid var(--blog-border);grid-template-columns:repeat(3,1fr);gap:1px;display:grid;overflow:hidden}.bp-related-card{background:var(--blog-bg);color:inherit;flex-direction:column;padding:24px;text-decoration:none;transition:background .25s;display:flex}.bp-related-card:hover{background:var(--blog-surface)}.bp-related-cat{text-transform:uppercase;letter-spacing:1px;color:var(--blog-accent);opacity:.7;margin-bottom:10px;font-size:10px;font-weight:600}.bp-related-title{letter-spacing:-.2px;color:var(--blog-text);margin:0 0 8px;font-size:15px;font-weight:550;line-height:1.35}.bp-related-desc{color:var(--blog-text-secondary);-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;flex:1;margin:0 0 16px;font-size:13px;font-weight:400;line-height:1.5;display:-webkit-box;overflow:hidden}.bp-related-foot{align-items:center;gap:8px;margin-top:auto;display:flex}.bp-related-foot-avatar{width:20px;height:20px;color:var(--blog-text-muted);background:var(--blog-surface);border:1px solid var(--blog-border);border-radius:50%;justify-content:center;align-items:center;font-size:9px;font-weight:700;display:flex}.bp-related-author{color:var(--blog-text-muted);font-size:12px}.bp-related-dot{background:var(--blog-text-muted);opacity:.5;border-radius:50%;width:3px;height:3px}.bp-related-date{color:var(--blog-text-muted);font-variant-numeric:tabular-nums;font-size:12px}@media (max-width:1200px){.bp-right-col{display:none}.bp-related-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:900px){.bp-left-col{display:none}}@media (max-width:680px){.blog-post-inner{padding:0 16px}.bp-header{padding:48px 0 32px}.bp-title{font-size:28px}.bp-related-grid{grid-template-columns:1fr}}
