.article-container{max-width:820px;margin:0 auto;padding:4rem 2rem}.article-header{margin-bottom:4rem;padding-bottom:3rem;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:1.5rem}.article-category{background:linear-gradient(135deg,hsl(var(--accent)),hsl(var(--accent) / .8));color:#fff;padding:.35rem 1rem;border-radius:9999px;font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.5px}.article-reading-time{display:flex;align-items:center;gap:.25rem}.article-title{font-size:clamp(2.25rem,5vw,3rem);font-weight:700;line-height:1.25;margin-bottom:1.5rem;color:hsl(var(--foreground))}.article-lead{font-size:1.25rem;line-height:1.7;color:hsl(var(--muted-foreground));margin-bottom:1.5rem}.article-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}.article-tags .tag{font-size:.75rem;background:hsl(var(--muted));color:hsl(var(--muted-foreground));padding:.35rem .75rem;border-radius:var(--radius-sm);transition:all .2s}.article-tags .tag:hover{background:hsl(var(--accent) / .1);color:hsl(var(--accent))}.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));text-decoration:underline}.article-content,.prose{font-size:1.125rem;line-height:1.85;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:1.65rem;font-weight:700;margin-top:5rem;margin-bottom:2rem;color:hsl(var(--foreground));scroll-margin-top:2rem;padding:1.5rem 1.75rem;background:linear-gradient(135deg,hsl(var(--accent) / .08),hsl(var(--accent) / .03));border-radius:var(--radius-lg);border-left:5px solid hsl(var(--accent));position:relative}.prose :global(h2):before,.article-content h2:before{content:"📌";margin-right:.75rem;font-size:1.25rem}.prose :global(h3),.article-content h3{font-size:1.3rem;font-weight:600;margin-top:3.5rem;margin-bottom:1.5rem;color:hsl(var(--foreground));padding-bottom:.75rem;border-bottom:2px dashed hsl(var(--accent) / .3);display:flex;align-items:center;gap:.5rem}.prose :global(h3):before,.article-content h3:before{content:"▸";color:hsl(var(--accent));font-weight:700;font-size:1.1rem}.prose :global(h4),.article-content h4{font-size:1.1rem;font-weight:600;margin-top:2.5rem;margin-bottom:1rem;color:hsl(var(--accent))}.prose :global(p),.article-content p{margin-bottom:1.75rem;line-height:1.9}.prose :global(strong),.article-content strong{font-weight:700;color:hsl(var(--foreground));background:hsl(var(--accent) / .1);padding:.1rem .3rem;border-radius:3px}.prose :global(em),.article-content em{font-style:italic}.prose :global(ul),.prose :global(ol),.article-content ul,.article-content ol{margin:2rem 0;padding:1.5rem 1.5rem 1.5rem 2.5rem;background:linear-gradient(135deg,hsl(var(--muted) / .25),hsl(var(--muted) / .1));border-radius:var(--radius-lg);border:1px solid hsl(var(--border) / .5)}.prose :global(li),.article-content li{margin-bottom:1rem;line-height:1.7;padding-left:.5rem}.prose :global(li):last-child,.article-content li:last-child{margin-bottom:0}.prose :global(li)::marker,.article-content li::marker{color:hsl(var(--accent));font-weight:700}.prose :global(hr),.article-content hr{margin:5rem auto;border:none;width:100%;height:auto;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.prose :global(hr):before,.article-content hr:before{content:"✦  ✦  ✦";font-size:1rem;color:hsl(var(--accent) / .6);letter-spacing:.5rem;background:hsl(var(--background));padding:0 1.5rem}.prose :global(hr):after,.article-content hr:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,hsl(var(--accent) / .3) 20%,hsl(var(--accent) / .3) 80%,transparent);z-index:-1}.prose :global(a),.article-content a{color:hsl(var(--accent));text-decoration:none;border-bottom:1px solid hsl(var(--accent) / .3);transition:all .2s;padding-bottom:1px}.prose :global(a:hover),.article-content a:hover{color:hsl(var(--accent));border-bottom-color:hsl(var(--accent));background:hsl(var(--accent) / .05)}.prose :global(code),.article-content code{background:hsl(var(--muted));padding:.2rem .5rem;border-radius:var(--radius-sm);font-size:.9em;font-family:Courier New,monospace;color:hsl(var(--accent))}.prose :global(pre),.article-content pre{background:hsl(var(--muted));padding:1.5rem;border-radius:var(--radius-md);overflow-x:auto;margin:2.5rem 0;border:1px solid hsl(var(--border))}.prose :global(pre code),.article-content pre code{background:none;padding:0;color:hsl(var(--foreground))}.prose :global(blockquote),.article-content blockquote{border-left:4px solid hsl(var(--accent));padding:1.5rem 2rem;font-style:italic;color:hsl(var(--muted-foreground));margin:2.5rem 0;background:hsl(var(--muted) / .2);border-radius:0 var(--radius-md) var(--radius-md) 0}.prose :global(blockquote p),.article-content blockquote p{margin-bottom:0}.prose :global(img),.article-content img{max-width:100%;height:auto;border-radius:var(--radius-lg);margin:2.5rem 0;box-shadow:0 4px 20px hsl(var(--foreground) / .1)}.prose :global(table),.article-content table{width:100%;border-collapse:separate;border-spacing:0;margin:2.5rem 0;font-size:.95rem;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 20px hsl(var(--foreground) / .08);border:1px solid hsl(var(--border))}.prose :global(thead),.article-content thead{background:linear-gradient(135deg,hsl(var(--accent)),hsl(var(--accent) / .85))}.prose :global(th),.article-content th{color:#fff;font-weight:600;padding:1.25rem 1.5rem;text-align:left;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.prose :global(th):first-child,.article-content th:first-child{border-top-left-radius:var(--radius-lg)}.prose :global(th):last-child,.article-content th:last-child{border-top-right-radius:var(--radius-lg)}.prose :global(td),.article-content td{padding:1.25rem 1.5rem;border-bottom:1px solid hsl(var(--border) / .5);color:hsl(var(--foreground));background:hsl(var(--card))}.prose :global(tbody tr:nth-child(2n) td),.article-content tbody tr:nth-child(2n) td{background:hsl(var(--muted) / .3)}.prose :global(tbody tr:hover td),.article-content tbody tr:hover td{background:hsl(var(--accent) / .08)}.prose :global(tbody tr:last-child td),.article-content tbody tr:last-child td{border-bottom:none}.prose :global(tbody tr:last-child td:first-child),.article-content tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-lg)}.prose :global(tbody tr:last-child td:last-child),.article-content tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-lg)}.prose :global(td):first-child,.article-content td:first-child{font-weight:600;color:hsl(var(--accent))}.highlight-box{background:linear-gradient(135deg,hsl(var(--accent) / .1),hsl(var(--accent) / .05));border-left:4px solid hsl(var(--accent));padding:2rem;margin:2.5rem 0;border-radius:var(--radius-lg)}.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:5rem;padding:2rem;background:linear-gradient(135deg,hsl(var(--muted) / .4),hsl(var(--muted) / .2));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;border:3px solid hsl(var(--accent) / .3)}.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:5rem}.article-cta{background:linear-gradient(135deg,hsl(var(--accent) / .15),hsl(var(--accent) / .05));border:2px solid hsl(var(--accent) / .3);padding:2.5rem;border-radius:var(--radius-lg);margin-bottom:2rem;text-align:center}.article-cta h3{margin-bottom:.75rem;font-size:1.5rem;color:hsl(var(--foreground))}.article-cta p{margin-bottom:1.5rem;color:hsl(var(--muted-foreground))}.article-nav{text-align:center;padding-top:2rem}.article-related{margin-top:5rem;padding-top:3rem;border-top:2px solid hsl(var(--border))}.article-related h2{font-size:1.75rem;margin-bottom:2rem}.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 1.25rem}.article-title{font-size:1.75rem}.article-content,.prose{font-size:1rem}.prose :global(h2),.article-content h2{font-size:1.35rem;margin-top:3.5rem;padding:1.25rem}.prose :global(h2):before,.article-content h2:before{font-size:1rem}.prose :global(h3),.article-content h3{font-size:1.15rem;margin-top:2.5rem}.prose :global(ul),.prose :global(ol),.article-content ul,.article-content ol{padding:1.25rem 1.25rem 1.25rem 2rem}.prose :global(th),.article-content th,.prose :global(td),.article-content td{padding:.875rem 1rem;font-size:.85rem}.article-author{flex-direction:column;align-items:center;text-align:center}.article-cta{padding:1.75rem}.prose :global(hr),.article-content hr{margin:3.5rem auto}}@media(max-width:480px){.article-meta{flex-direction:column;gap:.5rem}.article-toc{padding:1rem}.highlight-box{padding:1.25rem}.prose :global(table),.article-content table{font-size:.8rem}.prose :global(th),.article-content th,.prose :global(td),.article-content td{padding:.75rem .5rem}}
