.blog-header{text-align:center;padding:var(--space-16) 0 var(--space-12);position:relative}.blog-header:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:300px;height:300px;background:radial-gradient(circle,hsla(185 100% 50% / .1) 0%,transparent 70%);pointer-events:none}.blog-title{font-size:var(--text-4xl);font-weight:800;margin-bottom:var(--space-4);position:relative}.blog-subtitle{font-size:var(--text-lg);color:var(--text-secondary);max-width:600px;margin:0 auto}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);padding:var(--space-8) 0}@media(max-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}.blog-card{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-normal);display:flex;flex-direction:column}.blog-card:hover{transform:translateY(-8px);border-color:var(--accent-cyan);box-shadow:var(--shadow-glow)}.blog-card-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}.blog-card-image{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-tertiary)}.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.blog-card:hover .blog-card-image img{transform:scale(1.05)}.blog-card-content{padding:var(--space-6);display:flex;flex-direction:column;flex:1}.blog-card-meta{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-3)}.blog-card-meta time{display:flex;align-items:center;gap:var(--space-1)}.reading-time{display:flex;align-items:center;gap:var(--space-1)}.reading-time:before{content:"•";margin-right:var(--space-2)}.blog-card-title{font-size:var(--text-xl);font-weight:700;line-height:1.3;margin-bottom:var(--space-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.blog-card-excerpt{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:var(--space-4)}.blog-card-cta{font-size:var(--text-sm);font-weight:600;color:var(--accent-cyan);transition:color var(--transition-fast)}.blog-card:hover .blog-card-cta{color:var(--accent-purple)}.featured-badge{position:absolute;top:var(--space-4);left:var(--space-4);padding:var(--space-1) var(--space-3);background:var(--gradient-accent);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#fff;z-index:1}.blog-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}.blog-tag{padding:var(--space-1) var(--space-2);background:#00eaff1a;border:1px solid hsla(185 100% 50% / .2);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--accent-cyan)}.article-container{max-width:800px;margin:0 auto;padding:var(--space-16) var(--space-6)}.back-to-blog{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-8);transition:color var(--transition-fast)}.back-to-blog:hover{color:var(--accent-cyan)}.article-header{margin-bottom:var(--space-8)}.article-meta{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-4)}.article-title{font-size:var(--text-4xl);font-weight:800;line-height:1.2;margin-bottom:var(--space-6)}.article-cover{margin:0 calc(-1 * var(--space-6)) var(--space-8);border-radius:var(--radius-xl);overflow:hidden}.article-cover img{width:100%;height:auto;display:block}.article-content{font-size:var(--text-base);line-height:1.8;color:var(--text-secondary)}.article-content h2{font-size:var(--text-2xl);font-weight:700;color:var(--text-primary);margin:var(--space-10) 0 var(--space-4)}.article-content h3{font-size:var(--text-xl);font-weight:600;color:var(--text-primary);margin:var(--space-8) 0 var(--space-3)}.article-content p{margin-bottom:var(--space-4)}.article-content a{color:var(--accent-cyan);text-decoration:underline;text-underline-offset:2px}.article-content a:hover{color:var(--accent-purple)}.article-content ul,.article-content ol{margin:var(--space-4) 0;padding-left:var(--space-6)}.article-content li{margin-bottom:var(--space-2)}.article-content blockquote{margin:var(--space-6) 0;padding:var(--space-4) var(--space-6);border-left:3px solid var(--accent-cyan);background:var(--bg-glass);border-radius:0 var(--radius-lg) var(--radius-lg) 0;font-style:italic}.article-content code{font-family:var(--font-mono);font-size:.9em;padding:.2em .4em;background:var(--bg-tertiary);border-radius:var(--radius-sm)}.article-content pre{margin:var(--space-6) 0;padding:var(--space-4);background:var(--bg-tertiary);border-radius:var(--radius-lg);overflow-x:auto}.article-content pre code{padding:0;background:none}.article-content table{width:100%;margin:var(--space-6) 0;border-collapse:collapse}.article-content th,.article-content td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--border-glass)}.article-content th{font-weight:600;color:var(--text-primary);background:var(--bg-glass)}.article-content strong{color:var(--text-primary);font-weight:600}.article-content hr{margin:var(--space-10) 0;border:none;height:1px;background:var(--border-glass)}.article-footer{margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--border-glass)}.share-section h3{font-size:var(--text-lg);margin-bottom:var(--space-4)}.share-buttons{display:flex;gap:var(--space-3)}.share-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-lg);font-size:1.25rem;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.share-btn:hover{background:var(--bg-glass-hover);color:var(--accent-cyan);border-color:var(--accent-cyan)}.no-articles{text-align:center;padding:var(--space-16);color:var(--text-muted);font-size:var(--text-lg)}.blog-loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-12);color:var(--text-muted)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-glass);border-top-color:var(--accent-cyan);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.diagram-section{margin:var(--space-10) 0;padding:var(--space-6);background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-xl);transition:border-color var(--transition-normal)}.diagram-section:hover{border-color:#00eaff4d}.diagram-section h3{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-4);text-align:center}.diagram-section .mermaid{display:flex;justify-content:center;padding:var(--space-4);overflow-x:auto}.diagram-section .mermaid svg{max-width:100%;height:auto}