.blog-card{max-width:860px;margin:0 auto;padding:8px 16px 48px}.article-list{display:flex;flex-direction:column;gap:20px}.article-preview{display:flex;gap:20px;background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:box-shadow .2s,transform .15s;border:1px solid var(--gray-300)}.article-preview:hover{box-shadow:var(--shadow);transform:translateY(-1px);border-color:var(--teal)}.article-preview-img{flex-shrink:0;width:180px;height:120px;border-radius:8px;object-fit:cover;background:var(--navy)}.article-preview-body{flex:1;min-width:0}.article-preview-body h3{font-size:1.2rem;font-weight:600;color:var(--navy);margin:0 0 6px;line-height:1.3}.article-preview-body .article-meta{font-size:.82rem;color:var(--gray-500);margin:0 0 8px}.article-preview-body .article-excerpt{font-size:.92rem;color:var(--charcoal);line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.article-full{max-width:780px;margin:0 auto}.article-header{margin-bottom:32px}.article-header .article-meta{font-size:.85rem;color:var(--gray-500);margin-bottom:8px}.article-header h1{font-size:2rem;font-weight:700;color:var(--navy);line-height:1.25;margin:0 0 8px}.article-header .article-tags{display:flex;gap:8px;flex-wrap:wrap}.article-tag{display:inline-block;font-size:.72rem;padding:3px 10px;border-radius:var(--radius-full);background:#00d4aa1f;color:var(--teal-dark);font-weight:500}.article-hero-img{width:100%;border-radius:var(--radius);margin-bottom:32px;background:var(--navy)}.article-body{font-size:1.05rem;line-height:1.75;color:var(--charcoal)}.article-body h2{font-size:1.45rem;font-weight:600;color:var(--navy);margin:40px 0 14px;padding-bottom:6px;border-bottom:2px solid var(--teal)}.article-body h3{font-size:1.15rem;font-weight:600;color:var(--navy-light);margin:28px 0 10px}.article-body p{margin:0 0 16px}.article-body strong{color:var(--navy)}.article-body ul,.article-body ol{margin:0 0 20px;padding-left:24px}.article-body li{margin-bottom:8px}.article-body blockquote{margin:24px 0;padding:16px 20px;background:#00d4aa0f;border-left:4px solid var(--teal);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--navy-light)}.article-body blockquote p{margin:0}.infographic-box{margin:32px 0;padding:8px;background:var(--navy);border-radius:var(--radius);text-align:center;overflow:hidden}.infographic-box img{max-width:100%;height:auto;display:block;border-radius:calc(var(--radius) - 4px)}.infographic-box figcaption{font-size:.82rem;color:#ffffffb3;padding:10px 16px 6px;text-align:center}.article-body pre{background:#0f1f33;color:#e2e8f0;padding:16px 20px;border-radius:var(--radius-sm);overflow-x:auto;font-family:JetBrains Mono,monospace;font-size:.88rem;line-height:1.55;margin:16px 0}.article-body code{font-family:JetBrains Mono,monospace;background:#1e3a5f14;padding:2px 6px;border-radius:4px;font-size:.88em}.article-body pre code{background:none;padding:0;border-radius:0}.callout{margin:24px 0;padding:16px 20px;border-radius:var(--radius-sm);border-left:4px solid}.callout-tip{background:#00d4aa14;border-color:var(--teal)}.callout-warning{background:#f59e0b14;border-color:var(--amber)}.callout strong{display:block;margin-bottom:4px}.related-tools{margin-top:48px;padding:24px;background:#1e3a5f0a;border-radius:var(--radius);border:1px solid var(--gray-300)}.related-tools h3{font-size:1rem;font-weight:600;color:var(--navy);margin:0 0 12px}.related-tools .tool-links{display:flex;gap:12px;flex-wrap:wrap}.related-tools a{display:inline-block;padding:8px 16px;background:var(--navy);color:#fff;border-radius:var(--radius-sm);text-decoration:none;font-size:.85rem;transition:background .2s}.related-tools a:hover{background:var(--teal-dark)}@media (max-width: 700px){.article-preview{flex-direction:column}.article-preview-img{width:100%;height:160px}.article-header h1{font-size:1.5rem}.article-body{font-size:.98rem}.article-body h2{font-size:1.25rem}}.blog-section-heading{text-align:center;margin-bottom:32px}.blog-section-heading h2{font-size:1.6rem;color:var(--navy);font-weight:700;margin:0 0 6px}.blog-section-heading p{font-size:.95rem;color:var(--gray-500);margin:0}.lang-badge{display:inline-block;font-size:.65rem;font-weight:700;padding:1px 5px;border-radius:3px;margin-right:4px;vertical-align:middle;background:var(--navy);color:#fff;letter-spacing:.3px}