.article-layout{display:grid;grid-template-columns:1fr;gap:var(--space-8);max-width:1100px;margin:0 auto;padding:0 var(--space-4)}@media(min-width:1024px){.article-layout{grid-template-columns:1fr 240px}}.article-hero-img{width:100%;max-height:400px;object-fit:cover;border-radius:16px;margin-bottom:var(--space-8)}.article-step-img{width:100%;max-height:480px;object-fit:contain;border-radius:12px;margin:var(--space-4) 0 var(--space-6);box-shadow:0 4px 16px #0000004d;background:#0003}.article-video{margin:var(--space-6) 0}.article-video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;box-shadow:0 4px 20px #0000004d;background:#0000004d}.article-video-wrap iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:none;border-radius:12px}.article-video-caption{font-size:var(--text-xs);opacity:.5;margin-top:6px;text-align:center}.article-video-caption a{color:var(--accent-400);text-decoration:none}.article-video-caption a:hover{text-decoration:underline}.article-body{max-width:680px;width:100%;min-width:0;overflow-wrap:break-word;word-break:break-word}.article-body h2{margin-top:var(--space-10);padding-top:var(--space-4);font-size:var(--text-xl);scroll-margin-top:100px}.article-body h3{margin-top:var(--space-6);scroll-margin-top:100px}.article-body p{line-height:1.9;margin-bottom:var(--space-4);color:var(--text-secondary);font-size:1.05rem}.article-body ul,.article-body ol{margin-bottom:var(--space-5);padding-left:var(--space-6)}.article-body li{line-height:1.8;margin-bottom:var(--space-2);color:var(--text-secondary)}.article-body strong{color:var(--text-primary)}.article-body a{color:var(--accent-400);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}.article-body a:hover{border-bottom-color:var(--accent-400)}.article-body table{width:100%;border-collapse:collapse;margin:var(--space-6) 0;font-size:.95rem}.article-body th,.article-body td{padding:var(--space-3) var(--space-4);border-bottom:1px solid rgba(255,255,255,.06);text-align:left}.article-body th{font-weight:600;color:var(--text-primary);background:#ffffff08}.article-callout{padding:var(--space-5);border-radius:10px;margin:var(--space-6) 0;border-left:3px solid}.article-callout p{margin:0}.article-callout.warning{background:#f59e0b14;border-left-color:#f59f0a}.article-callout.success{background:#10b98114;border-left-color:#12d393}.article-callout.info{background:#6366f114;border-left-color:#5b5df1}.article-meta{display:flex;gap:var(--space-4);font-size:var(--text-sm);opacity:.6;margin-bottom:var(--space-6);flex-wrap:wrap}.article-cta{background:linear-gradient(135deg,#6366f11f,#3b82f61f);border:1px solid rgba(99,102,241,.15);border-radius:16px;padding:var(--space-8);text-align:center;margin-top:var(--space-10);position:relative;overflow:hidden}.article-cta:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,hsla(210,70%,50%,.06),transparent,hsla(38,80%,55%,.04),transparent);animation:cta-rotate 8s linear infinite;pointer-events:none}@keyframes cta-rotate{to{transform:rotate(360deg)}}.article-hero-img{animation:hero-img-reveal 1s var(--ease-out) both;transition:transform .5s var(--ease-out)}.article-hero-img:hover{transform:scale(1.015)}@keyframes hero-img-reveal{0%{opacity:0;transform:scale(1.04);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:blur(0)}}.article-toc-sidebar{display:none}@media(min-width:1024px){.article-toc-sidebar{display:block;position:sticky;top:100px;max-height:calc(100vh - 140px);overflow-y:auto;align-self:start}}.toc-inner{background:#ffffff05;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:var(--space-5)}.toc-progress{height:6px;background:#ffffff0f;border-radius:3px;margin-bottom:var(--space-4);overflow:visible;position:relative}.toc-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent-400),var(--accent-500, hsl(210, 70%, 60%)));border-radius:3px;transition:width .15s ease-out;position:relative}.toc-progress-fill:after{content:"🚂";position:absolute;right:-10px;top:50%;transform:translateY(-50%) scaleX(-1);font-size:14px;line-height:1;transition:filter .3s}.toc-progress-fill.complete:after{filter:drop-shadow(0 0 6px rgba(99,102,241,.6));animation:train-arrive .5s ease}@keyframes train-arrive{0%{transform:translateY(-50%) scaleX(-1) scale(1)}50%{transform:translateY(-50%) scaleX(-1) scale(1.3)}to{transform:translateY(-50%) scaleX(-1) scale(1)}}.toc-title{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:var(--space-3);font-weight:600}.toc-list{list-style:none;padding:0;margin:0}.toc-list li{margin-bottom:2px}.toc-list a{display:block;padding:6px 10px;font-size:.82rem;color:var(--text-tertiary);text-decoration:none;border-radius:6px;border-left:2px solid transparent;transition:all .2s ease;line-height:1.4}.toc-list a:hover{color:var(--text-secondary);background:#ffffff08}.toc-list a.active{color:var(--accent-400);background:#6366f114;border-left-color:var(--accent-400);font-weight:500}.toc-progress-text{font-size:.75rem;color:var(--text-tertiary);text-align:right;margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid rgba(255,255,255,.04)}.toc-progress-text span{color:var(--accent-400);font-weight:600}.article-toc-inline{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:var(--space-5);margin-bottom:var(--space-8)}@media(min-width:1024px){.article-toc-inline{display:none}}.article-toc-inline h4{font-size:var(--text-sm);margin-bottom:var(--space-3)}.article-toc-inline ol{padding-left:var(--space-6);margin:0}.article-toc-inline li{margin-bottom:var(--space-1)}.article-toc-inline a{color:var(--accent-400);text-decoration:none;font-size:.9rem}.layout-card{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:var(--space-6);margin:var(--space-6) 0}.layout-card h3{margin-bottom:var(--space-4);font-size:var(--text-lg)}.layout-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-3);margin:var(--space-4) 0}.layout-spec{background:#ffffff08;padding:var(--space-3);border-radius:8px;text-align:center}.layout-spec-label{font-size:var(--text-xs);opacity:.6}.layout-spec-value{font-size:var(--text-base);font-weight:700}.vs-table td:nth-child(2),.vs-table td:nth-child(3){text-align:center}.vs-table th:nth-child(2){color:#5ea6ed}.vs-table th:nth-child(3){color:#e46767}.winner{font-weight:700}[data-theme=light] .article-cta{background:linear-gradient(135deg,#3c8cdd14,#5c99d614);border-color:#3c8cdd26}[data-theme=light] .article-body a{color:var(--primary-500)}[data-theme=light] .article-body a:hover{border-bottom-color:var(--primary-500)}[data-theme=light] .toc-inner{background:#f3f4f6cc;border-color:#d3d7de80}[data-theme=light] .toc-progress{background:#dcdfe5cc}[data-theme=light] .toc-progress-fill{background:linear-gradient(90deg,var(--primary-400),var(--primary-500))}[data-theme=light] .toc-list a:hover{background:#e2e4e980}[data-theme=light] .toc-list a.active{color:var(--primary-500);background:#3c8cdd14;border-left-color:var(--primary-500)}[data-theme=light] .toc-progress-text{border-top-color:#dcdfe599}[data-theme=light] .toc-progress-text span{color:var(--primary-500)}[data-theme=light] .article-toc-inline{background:#f3f4f699;border-color:#d3d7de80}[data-theme=light] .article-toc-inline a{color:var(--primary-500)}[data-theme=light] .article-body th{background:#edeff2cc}[data-theme=light] .article-body td{border-bottom-color:#dcdfe580}[data-theme=light] .article-callout.warning{background:#f59e0b0f}[data-theme=light] .article-callout.success{background:#10b9810f}[data-theme=light] .article-callout.info{background:#6366f10f}[data-theme=light] .layout-card{background:#ffffffb3;border-color:#d3d7de80;box-shadow:var(--shadow-sm)}[data-theme=light] .layout-spec{background:#f3f4f699}[data-theme=light] .blog-card{background:var(--bg-card);border-color:#d3d7de80;box-shadow:var(--shadow-sm)}[data-theme=light] .blog-card:hover{box-shadow:var(--shadow-lg)}[data-theme=light] .vs-table th:nth-child(2){color:#2273c3}[data-theme=light] .vs-table th:nth-child(3){color:#b82e2e}.related-articles{margin-top:var(--space-10);padding-top:var(--space-8);border-top:1px solid rgba(255,255,255,.06)}.related-articles h3{margin-bottom:var(--space-6);font-size:var(--text-lg)}.related-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media(min-width:640px){.related-grid{grid-template-columns:repeat(3,1fr)}}.related-card{display:block;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.related-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px #00000040;border-color:#6366f140}.related-card img{width:100%;height:120px;object-fit:cover}.related-card-body{padding:var(--space-4)}.related-card-body h4{font-size:.9rem;margin-bottom:var(--space-2);color:var(--text-primary);line-height:1.4}.related-card-body p{font-size:var(--text-xs);color:var(--text-tertiary);line-height:1.5;margin:0}.related-tools{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-6);padding:var(--space-4);background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:10px}.related-tools-label{font-size:var(--text-xs);font-weight:600;opacity:.6;white-space:nowrap}.related-tool-link{display:inline-block;font-size:var(--text-xs);color:var(--accent-400);text-decoration:none;padding:4px 12px;border:1px solid rgba(99,102,241,.2);border-radius:20px;transition:background .2s,border-color .2s;white-space:nowrap}.related-tool-link:hover{background:#6366f11a;border-color:#6366f166}[data-theme=light] .related-articles{border-top-color:#dcdfe599}[data-theme=light] .related-card{background:var(--bg-card);border-color:#d3d7de80;box-shadow:var(--shadow-sm)}[data-theme=light] .related-card:hover{box-shadow:var(--shadow-lg);border-color:#3c8cdd4d}[data-theme=light] .related-tools{background:#f3f4f680;border-color:#d3d7de80}[data-theme=light] .related-tool-link{color:var(--primary-500);border-color:#3c8cdd40}[data-theme=light] .related-tool-link:hover{background:#3c8cdd14;border-color:#3c8cdd66}