:root{--blog-bg:#0a0a0f;--blog-bg-secondary:#12121a;--blog-text:#fff;--blog-text-secondary:#b8b8c0;--blog-text-muted:#6b6b75;--blog-accent:#3b82f6;--blog-border:#ffffff1a;--color-primary-dark:#020617}[data-theme=light]{--blog-bg:#fff;--blog-bg-secondary:#f8f9fa;--blog-text:#1a1a2e;--blog-text-secondary:#4a4a5a;--blog-text-muted:#6b6b75;--blog-accent:#3b82f6;--blog-border:#0000001a}.blog-article-wrapper{background:var(--blog-bg);min-height:100vh}.blog-hero-section{background-color:var(--color-primary-dark);text-align:center;border-bottom:1px solid var(--blog-border);color:#fff;justify-content:center;align-items:center;height:85vh;min-height:600px;margin-bottom:0;display:flex;position:relative;overflow:hidden}.hero-grid-bg{z-index:1;background-image:linear-gradient(90deg,#ffffff08 1px,#0000 1px),linear-gradient(#ffffff08 1px,#0000 1px);background-size:50px 50px;position:absolute;inset:0;mask-image:radial-gradient(#000 40%,#0000 80%)}.overlay-gradient{background:radial-gradient(circle at center, transparent 0%, var(--color-primary-dark) 90%);z-index:2;position:absolute;inset:0}#blogHeroParticles{pointer-events:none;z-index:3;width:100%;height:100%;position:absolute;top:0;left:0}.blog-hero-content{z-index:10;max-width:900px;margin:0 auto;padding:0 20px;position:relative}.article-category{color:var(--blog-accent);backdrop-filter:blur(4px);background:#3b82f61a;border:1px solid #3b82f633;border-radius:99px;margin-bottom:24px;padding:6px 16px;font-size:14px;font-weight:600;text-decoration:none;display:inline-block}.article-title{color:#fff;letter-spacing:-.03em;text-shadow:0 4px 20px #00000080;margin-bottom:24px;font-size:4.5rem;font-weight:800;line-height:1.1}.article-meta{color:#ffffffb3;justify-content:center;gap:24px;font-size:1.1rem;display:flex}.theme-toggle{background:var(--blog-accent);color:#fff;cursor:pointer;z-index:1000;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:24px;transition:transform .2s,box-shadow .2s;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 4px 20px #3b82f666}.theme-toggle:hover{transform:scale(1.1);box-shadow:0 6px 30px #3b82f680}.article-wrapper{max-width:800px;margin:0 auto;padding:0 20px}.article-image{z-index:20;background:var(--blog-bg);border:4px solid #ffffff0d;border-radius:16px;max-width:1000px;margin:-100px auto 40px;padding:0 20px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000004d}.article-image img{border-radius:12px;width:100%;height:auto;display:block}.article-content{color:var(--blog-text-secondary);padding-top:40px;font-size:18px;line-height:1.8}.article-content h2{color:var(--blog-text);margin:48px 0 24px;font-size:30px;font-weight:700}.article-content h3{color:var(--blog-text);margin:32px 0 16px;font-size:24px;font-weight:600}.article-content p{margin-bottom:24px}.article-content ul,.article-content ol{margin:24px 0 24px 24px}.article-content li{margin-bottom:12px}.article-content a{color:var(--blog-accent);border-bottom:1px solid #3b82f64d;text-decoration:none;transition:border-color .2s}.article-content a:hover{border-bottom-color:var(--blog-accent)}.article-content blockquote{border-left:4px solid var(--blog-accent);color:var(--blog-text);margin:32px 0;padding-left:24px;font-size:20px;font-style:italic}.article-content img{border-radius:8px;max-width:100%;height:auto;margin:32px 0}.article-content pre{background:var(--blog-bg-secondary);border:1px solid var(--blog-border);border-radius:8px;margin:32px 0;padding:20px;overflow-x:auto}.article-content code{font-family:Fira Code,monospace;font-size:14px;background:0 0!important}.article-tags{border-top:1px solid var(--blog-border);margin-top:60px;padding-top:30px}.tag{background:var(--blog-bg-secondary);color:var(--blog-text-secondary);border:1px solid var(--blog-border);border-radius:20px;margin:4px;padding:8px 16px;font-size:14px;text-decoration:none;display:inline-block}.tag:hover{background:var(--blog-accent);color:#fff;border-color:var(--blog-accent)}.share-buttons{justify-content:center;gap:12px;margin:60px 0;display:flex}.share-btn{background:var(--blog-bg-secondary);color:var(--blog-text-secondary);border:1px solid var(--blog-border);border-radius:8px;padding:12px 24px;font-size:14px;text-decoration:none;transition:all .2s}.share-btn:hover{background:var(--blog-accent);color:#fff;border-color:var(--blog-accent)}.related-posts{border-top:1px solid var(--blog-border);background:var(--blog-bg-secondary);padding:80px 0}.related-posts h3{text-align:center;color:var(--blog-text);margin-bottom:40px;font-size:28px}.related-grid{grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:0 auto;padding:0 20px;display:grid}@media (width<=900px){.related-grid{grid-template-columns:1fr}.article-title{font-size:3rem}.blog-hero-section{height:auto;min-height:auto;padding:120px 0 80px}}.related-card{background:var(--blog-bg);border:1px solid var(--blog-border);border-radius:12px;transition:transform .2s;overflow:hidden}.related-card:hover{transform:translateY(-4px)}.related-card img{aspect-ratio:16/9;object-fit:cover;width:100%}.related-card-content{padding:20px}.related-card h4{margin-bottom:8px;font-size:16px;line-height:1.4}.related-card h4 a{color:var(--blog-text);text-decoration:none}.related-card h4 a:hover{color:var(--blog-accent)}.comments-section{background:var(--blog-bg);padding:40px 0}