.article-container{max-width:800px;margin:0 auto;padding:4rem 1.5rem}.article-header{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid hsl(var(--border))}.article-breadcrumb{font-size:.875rem;color:hsl(var(--muted-foreground));margin-bottom:2rem}.article-breadcrumb a{color:hsl(var(--accent));text-decoration:none;transition:color .2s}.article-breadcrumb a:hover{text-decoration:underline}.article-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.875rem;color:hsl(var(--muted-foreground));margin-bottom:1rem}.article-category{background:hsl(var(--accent) / .1);color:hsl(var(--accent));padding:.25rem .75rem;border-radius:var(--radius-sm);font-weight:600;text-transform:capitalize}.article-reading-time{display:flex;align-items:center;gap:.25rem}.article-title{font-size:clamp(2rem,5vw,3rem);font-weight:700;line-height:1.2;margin-bottom:1rem;color:hsl(var(--foreground))}.article-lead{font-size:1.25rem;line-height:1.6;color:hsl(var(--muted-foreground));margin-bottom:1rem}.article-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.article-tags .tag{font-size:.75rem;background:hsl(var(--muted));color:hsl(var(--muted-foreground));padding:.25rem .5rem;border-radius:var(--radius-sm)}.article-toc{background:hsl(var(--muted) / .3);padding:1.5rem;border-radius:var(--radius-md);margin-bottom:3rem;border-left:4px solid hsl(var(--accent))}.article-toc h2{font-size:1.125rem;margin-bottom:1rem;color:hsl(var(--foreground))}.article-toc ol{list-style:decimal;padding-left:1.5rem}.article-toc li{margin-bottom:.5rem}.article-toc a{color:hsl(var(--accent));text-decoration:none;transition:color .2s}.article-toc a:hover{color:hsl(var(--accent-foreground));text-decoration:underline}.article-content,.prose{font-size:1.125rem;line-height:1.75;color:hsl(var(--foreground))}.prose :global(h1),.prose :global(h2),.prose :global(h3),.prose :global(h4),.article-content h1,.article-content h2,.article-content h3,.article-content h4{font-weight:700;color:hsl(var(--foreground))}.prose :global(h2),.article-content h2{font-size:2rem;font-weight:700;margin-top:3rem;margin-bottom:1.5rem;color:hsl(var(--foreground));scroll-margin-top:2rem}.prose :global(h3),.article-content h3{font-size:1.5rem;font-weight:600;margin-top:2rem;margin-bottom:1rem;color:hsl(var(--foreground))}.prose :global(h4),.article-content h4{font-size:1.25rem;font-weight:600;margin-top:1.5rem;margin-bottom:.75rem}.prose :global(p),.article-content p{margin-bottom:1.5rem}.prose :global(ul),.prose :global(ol),.article-content ul,.article-content ol{margin-bottom:1.5rem;padding-left:1.5rem}.prose :global(li),.article-content li{margin-bottom:.5rem}.prose :global(strong),.article-content strong{font-weight:600;color:hsl(var(--accent))}.prose :global(em),.article-content em{font-style:italic}.prose :global(hr),.article-content hr{margin:3rem 0;border:none;border-top:2px solid hsl(var(--border))}.prose :global(a),.article-content a{color:hsl(var(--accent));text-decoration:underline;transition:color .2s}.prose :global(a:hover),.article-content a:hover{color:hsl(var(--accent-foreground))}.prose :global(code),.article-content code{background:hsl(var(--muted));padding:.2rem .4rem;border-radius:var(--radius-sm);font-size:.9em;font-family:Courier New,monospace}.prose :global(pre),.article-content pre{background:hsl(var(--muted));padding:1.5rem;border-radius:var(--radius-md);overflow-x:auto;margin:2rem 0}.prose :global(pre code),.article-content pre code{background:none;padding:0}.prose :global(blockquote),.article-content blockquote{border-left:4px solid hsl(var(--accent));padding-left:1.5rem;font-style:italic;color:hsl(var(--muted-foreground));margin:2rem 0}.prose :global(img),.article-content img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:2rem 0}.highlight-box{background:hsl(var(--accent) / .1);border-left:4px solid hsl(var(--accent));padding:1.5rem;margin:2rem 0;border-radius:var(--radius-md)}.highlight-box h4{margin-top:0;color:hsl(var(--accent))}.highlight-box strong{color:hsl(var(--foreground))}.comparison-table{overflow-x:auto;margin:2rem 0}.comparison-table table{width:100%;border-collapse:collapse;font-size:1rem}.comparison-table th,.comparison-table td{padding:1rem;text-align:left;border-bottom:1px solid hsl(var(--border))}.comparison-table th{background:hsl(var(--muted) / .5);font-weight:600;color:hsl(var(--foreground))}.comparison-table td{color:hsl(var(--foreground))}.comparison-table tbody tr:hover{background:hsl(var(--muted) / .2)}.article-author{display:flex;gap:1.5rem;margin-top:4rem;padding:2rem;background:hsl(var(--muted) / .3);border-radius:var(--radius-lg);border:1px solid hsl(var(--border))}.article-author .author-avatar{border-radius:50%;width:80px;height:80px;flex-shrink:0;-o-object-fit:cover;object-fit:cover}.article-author .author-info h3{font-size:1.25rem;margin-bottom:.5rem;color:hsl(var(--foreground))}.article-author .author-info p{margin-bottom:1rem;color:hsl(var(--muted-foreground));font-size:.875rem}.article-footer{margin-top:4rem}.article-cta{background:hsl(var(--accent) / .1);border-left:4px solid hsl(var(--accent));padding:2rem;border-radius:var(--radius-lg);margin-bottom:2rem}.article-cta h3{margin-bottom:.5rem;font-size:1.5rem}.article-cta p{margin-bottom:1rem;color:hsl(var(--muted-foreground))}.article-nav{text-align:center;padding-top:2rem}.article-related{margin-top:4rem;padding-top:2rem;border-top:2px solid hsl(var(--border))}.article-related h2{font-size:1.75rem;margin-bottom:1.5rem}.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.related-card{padding:1.5rem;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-md);text-decoration:none;transition:all .2s;display:block}.related-card:hover{border-color:hsl(var(--accent));box-shadow:var(--shadow-lg);transform:translateY(-2px)}.related-card h3{color:hsl(var(--foreground));margin-bottom:.5rem;font-size:1.125rem}.related-card p{color:hsl(var(--muted-foreground));font-size:.875rem;margin:0}@media(max-width:768px){.article-container{padding:2rem 1rem}.article-title{font-size:2rem}.article-content{font-size:1rem}.prose :global(h1),.prose :global(h2),.prose :global(h3),.prose :global(h4),.article-content h1,.article-content h2,.article-content h3,.article-content h4{font-weight:700;color:hsl(var(--foreground))}.prose :global(h2),.article-content h2{font-size:1.5rem}.article-content h3{font-size:1.25rem}.article-author{flex-direction:column;align-items:center;text-align:center}.comparison-table{font-size:.875rem}.comparison-table th,.comparison-table td{padding:.75rem .5rem}}@media(max-width:480px){.article-meta{flex-direction:column;gap:.5rem}.article-toc,.highlight-box{padding:1rem}}