.article-container{max-width:1350px;margin:0 auto;padding:2rem}.article-header{text-align:center;margin-bottom:3rem;padding:4rem 2rem;background:linear-gradient(135deg,var(--light-purple),#ffac8a);border-radius:20px}.article-header h1{font-family:Poppins,sans-serif;font-size:2.6rem;font-weight:700;line-height:1.2;color:#1a1a2e;max-width:850px;margin:0 auto 1.5rem}.article-metadata{color:#555;font-size:.95rem;font-family:Inter,sans-serif;margin:0}.article-layout{display:flex;gap:2.5rem;align-items:flex-start}.article-toc{flex:0 0 22%;min-width:0;position:sticky;top:100px;max-height:calc(100vh - 120px);overflow-y:auto}.article-toc nav{background:#fff7f3;border-radius:16px;padding:1.5rem;border:1px solid #fde0d2}.toc-title{font-family:Poppins,sans-serif;font-size:1rem;font-weight:600;color:var(--dark-blue);margin:0 0 1rem;padding-bottom:.75rem;border-bottom:2px solid #fde0d2;text-transform:uppercase;letter-spacing:.5px}.toc-list{list-style:none;padding:0;margin:0;counter-reset:toc-counter}.toc-list li{counter-increment:toc-counter;margin-bottom:.25rem}.toc-list li a{display:block;padding:.5rem .75rem;font-size:.88rem;font-family:Inter,sans-serif;color:#555;text-decoration:none;border-radius:8px;border-left:3px solid transparent;transition:all .2s ease;line-height:1.4}.toc-list li a:before{content:counter(toc-counter) ". ";font-weight:600;color:var(--dark-blue);opacity:.6}.toc-list li a:hover{background:#fde0d2;color:#333;border-left-color:var(--dark-blue)}.toc-list li a.active{background:#fde0d2;color:var(--dark-blue);font-weight:500;border-left-color:var(--dark-blue)}.toc-list li a.active:before{opacity:1}.article-content{flex:1 1 0%;min-width:0;max-width:100%;line-height:1.85;color:#333;font-family:Inter,sans-serif;font-size:1.05rem}.article-content h2{font-family:Poppins,sans-serif;font-size:1.75rem;font-weight:700;color:#1a1a2e;margin:3rem 0 1.25rem;padding-bottom:.5rem;border-bottom:2px solid #fde0d2;line-height:1.3;scroll-margin-top:90px}.article-content h3{font-family:Poppins,sans-serif;font-size:1.3rem;font-weight:600;color:#333;margin:2rem 0 1rem;line-height:1.35}.article-content h4{font-family:Poppins,sans-serif;font-size:1.1rem;font-weight:600;color:#444;margin:1.5rem 0 .75rem}.article-content p{margin-bottom:1.5rem}.article-content a{color:var(--dark-blue);text-decoration:underline;text-underline-offset:3px;transition:color .2s}.article-content a:hover{color:#e0692e}.article-content ul,.article-content ol{margin-bottom:1.5rem;padding-left:1.5rem}.article-content li{margin-bottom:.5rem}.article-content strong{color:#1a1a2e}.article-content blockquote{border-left:4px solid var(--dark-blue);background:#fff7f3;padding:1.25rem 1.5rem;margin:2rem 0;border-radius:0 12px 12px 0;font-style:italic;color:#555}.article-image,.main-image{border-radius:16px;width:100%;max-width:100%;margin-inline:auto;overflow:hidden;margin-block:2rem}.main-image{aspect-ratio:16 / 9}.main-image img,.article-image img{width:100%;border-radius:16px}.cta-container{background:linear-gradient(135deg,var(--dark-blue),#e0692e);padding:2rem;border-radius:16px;text-align:center;margin:3rem 0;color:#fff}.cta-container h3{margin-bottom:1rem;color:#fff;border-bottom:none}.expert-quote{background-color:#fff7f3;padding:1.25rem 1.5rem;border-radius:12px;margin:2rem 0;border-left:4px solid var(--dark-blue)}.expert-quote p{font-size:1.05rem;font-style:italic;margin-bottom:.5rem}.expert-quote cite{font-size:.9rem;color:#666}.comparison-table table{width:100%;border-collapse:collapse;margin:2rem 0;border-radius:12px;overflow:hidden}.comparison-table th,.comparison-table td{padding:1rem;border:1px solid #fde0d2;text-align:left}.comparison-table th{background-color:#fff7f3;font-weight:600;color:#1a1a2e}.stats-box,.example-box,.compatibility-list{background-color:#fff7f3;padding:1.5rem;border-radius:12px;margin:1.5rem 0;border:1px solid #fde0d2}.stats-box h4,.example-box h4,.compatibility-list h4{color:#1a1a2e;margin-bottom:1rem}.code-snippet{background:#1a1a2e;color:#e0e0e0;padding:1.5rem;border-radius:12px;overflow-x:auto;margin:1.5rem 0}.code-snippet pre{margin:0}.code-snippet code{font-family:JetBrains Mono,Fira Code,monospace;font-size:.9rem}.platform-integration{margin:2rem 0;padding:1.5rem;background:#fff7f3;border-radius:12px;border:1px solid #fde0d2}@media (max-width: 1024px){.article-layout{flex-direction:column}.article-toc{flex:none;position:relative;top:auto;max-height:none;width:100%;margin-bottom:2rem}.article-toc nav{padding:1.25rem}.toc-list{display:flex;flex-wrap:wrap;gap:.25rem}.toc-list li{margin-bottom:0}.toc-list li a{font-size:.82rem;padding:.4rem .6rem;border-left:none;border-bottom:2px solid transparent}.toc-list li a:hover,.toc-list li a.active{border-left:none;border-bottom-color:var(--dark-blue)}.article-content{flex:none;max-width:100%}}@media (max-width: 768px){.article-container{padding:1rem}.article-header{padding:2.5rem 1.25rem;margin-bottom:2rem;border-radius:14px}.article-header h1{font-size:1.7rem}.article-content{font-size:1rem}.article-content h2{font-size:1.4rem;margin:2.5rem 0 1rem}.article-content h3{font-size:1.15rem}.toc-list{flex-direction:column}.toc-list li a{border-left:3px solid transparent;border-bottom:none}.toc-list li a:hover,.toc-list li a.active{border-left-color:var(--dark-blue);border-bottom:none}}