.blog-index{padding:20px 0}.blog-index h1{margin-bottom:8px;font-size:36px}.blog-index .subtitle{color:var(--text-secondary);margin-bottom:32px;font-size:18px}.blog-list{flex-direction:column;gap:16px;display:flex}.blog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--transition),box-shadow var(--transition);padding:24px;text-decoration:none;display:block}.blog-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.blog-card-tag{text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:8px;font-size:12px;font-weight:600;display:inline-block}.blog-card h2{color:var(--text);margin-bottom:8px;font-size:20px}.blog-card p{color:var(--text-secondary);margin:0;font-size:15px;line-height:1.6}.blog-card-meta{color:var(--text-muted);margin-top:12px;font-size:13px}.article{padding:20px 0}.article-header{margin-bottom:32px}.article-tag{text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:12px;font-size:12px;font-weight:600;display:inline-block}.article h1{margin-bottom:12px;font-size:32px;line-height:1.15}.article-subtitle{color:var(--text-secondary);margin-bottom:8px;font-size:18px;line-height:1.5}.article-subtitle a{color:var(--accent);text-underline-offset:2px;text-decoration:underline}.article-subtitle a:hover{color:var(--accent)}.article-meta{color:var(--text-muted);font-size:13px}.article-body h2{color:var(--text);margin-top:36px;margin-bottom:12px;font-size:22px}.article-body h3{color:var(--text);margin-top:28px;margin-bottom:8px;font-size:18px}.article-body p{color:var(--text-secondary);margin-bottom:16px;font-size:16px;line-height:1.75}.article-body strong{color:var(--text);font-weight:600}.article-body a:not(.btn){color:var(--accent);text-underline-offset:2px;text-decoration:underline}.article-body a:not(.btn):hover{color:var(--accent-hover)}.article-body ul,.article-body ol{margin-bottom:16px;padding-left:24px}.article-body li{color:var(--text-secondary);margin-bottom:6px;font-size:16px;line-height:1.75}.article-body li strong{color:var(--text)}.diagram{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin:28px 0;padding:24px;overflow-x:auto}.diagram-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:16px;font-size:14px;font-weight:600}.diagram-flow{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.diagram-step{background:var(--accent-light);border-radius:var(--radius-sm);text-align:center;flex-direction:column;align-items:center;gap:6px;min-width:100px;padding:12px 16px;display:flex}.diagram-step-icon{font-size:20px;line-height:1}.diagram-step-label{color:var(--text);font-size:13px;font-weight:600;line-height:1.3}.diagram-step-desc{color:var(--text-secondary);font-size:11px;line-height:1.3}.diagram-arrow{color:var(--accent);flex-shrink:0;font-size:18px;font-weight:700}.diagram-step-danger{background:#fef2f2}.diagram-step-danger .diagram-step-label{color:var(--danger)}.diagram-step-success{background:#f0fdf4}.diagram-step-success .diagram-step-label{color:var(--success)}.comparison-table{border-collapse:collapse;width:100%;margin:24px 0;font-size:14px}.comparison-table th{font-family:var(--font-display);text-align:left;background:var(--bg);border-bottom:2px solid var(--border);color:var(--text);padding:12px 14px;font-size:14px;font-weight:700}.comparison-table td{border-bottom:1px solid var(--border);color:var(--text-secondary);padding:10px 14px;line-height:1.5}.comparison-table tr:last-child td{border-bottom:none}.comparison-table .check{color:var(--success);font-weight:700}.comparison-table .cross{color:var(--danger);font-weight:700}.comparison-table .partial{color:var(--warning);font-weight:700}.callout{border-radius:var(--radius);margin:24px 0;padding:16px 20px;font-size:15px;line-height:1.6}.callout-tip{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0}.callout-warning{color:#92400e;background:#fffbeb;border:1px solid #fde68a}.callout-icon{margin-right:6px;font-size:16px}.callout p{color:inherit;font-size:inherit;margin:0}.article-cta{background:var(--accent-light);border-radius:var(--radius);text-align:center;border:1px solid #ea580c26;margin:40px 0 24px;padding:28px}.article-cta-icon{margin-bottom:8px;font-size:28px}.article-cta h3{color:var(--text);margin-bottom:8px;font-size:20px}.article-cta p{color:var(--text-secondary);margin-bottom:16px;font-size:15px;line-height:1.5}.related-articles{border-top:1px solid var(--border);margin-top:40px;padding-top:28px}.related-articles h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:16px;font-size:15px;font-weight:600}.related-articles-grid{flex-direction:column;gap:12px;display:flex}.related-article-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);transition:border-color var(--transition),box-shadow var(--transition);flex-direction:column;gap:4px;padding:14px 16px;text-decoration:none;display:flex}.related-article-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.related-article-card span:first-child{color:var(--accent);font-size:15px;font-weight:600}.related-article-card span:last-child{color:var(--text-secondary);font-size:14px;line-height:1.4}.article-body code{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-family:SF Mono,Fira Code,Fira Mono,monospace;font-size:.875em}.code-block{border-radius:var(--radius);background:#1e1e1e;margin:20px 0;position:relative;overflow:hidden}.code-block-copy{color:#666;cursor:pointer;background:0 0;border:none;padding:4px;font-size:16px;line-height:1;position:absolute;top:8px;right:8px}.code-block-copy:hover{color:#aaa}.code-block pre{margin:0;padding:16px;overflow-x:auto}.code-block code{color:#d4d4d4;background:0 0;border:none;padding:0;font-family:SF Mono,Fira Code,Fira Mono,monospace;font-size:14px;line-height:1.6}@media (max-width:480px){.article h1{font-size:26px}.diagram-flow{flex-direction:column}.diagram-arrow{transform:rotate(90deg)}.comparison-table{font-size:13px}.comparison-table th,.comparison-table td{padding:8px 10px}}