.article-container{max-width:800px;margin:0 auto;padding:0 1.5rem}.article-header{background:var(--white);border-bottom:1px solid var(--gray-100);padding:5.5rem 0 2rem}.breadcrumb{color:var(--gray-500);margin-bottom:1.5rem;font-size:.85rem}.breadcrumb a{color:var(--gray-500)}.breadcrumb a:hover{color:var(--accent)}.article-meta{gap:1rem;margin-bottom:1rem;display:flex}.tag{background:var(--accent-light);color:var(--accent);border-radius:100px;padding:.3rem .75rem;font-size:.75rem;font-weight:600}.read-time{color:var(--gray-500);font-size:.85rem}.article-header h1{margin-bottom:1rem;font-size:2rem;font-weight:700;line-height:1.25}.article-intro{color:var(--gray-600);font-size:1.1rem}.article-body{padding:3rem 0}.article-body h2{margin:2.5rem 0 1rem;font-size:1.4rem}.article-body h3{margin:2rem 0 .75rem;font-size:1.15rem}.article-body p{color:var(--gray-700);margin-bottom:1.25rem}.article-body ul,.article-body ol{color:var(--gray-700);margin:1.25rem 0 1.25rem 1.5rem}.article-body li{margin-bottom:.5rem}.article-body strong{color:var(--primary)}.article-body code{background:var(--gray-100);border-radius:4px;padding:.1em .4em;font-size:.9em}.article-body pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:6px;max-width:100%;padding:1rem;font-size:.85rem;line-height:1.6;overflow-x:auto}.tip-box{background:var(--green-light);border-left:4px solid var(--green);border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1.25rem}.tip-box p{color:#065f46;margin:0;font-size:.95rem}.fix-box{background:var(--green-light);border-left:4px solid var(--green);border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1.25rem}.fix-box h4,.fix-box p{color:#065f46;margin:0;font-size:.95rem}.fix-box h4{margin-bottom:.4rem;font-weight:700}.mistake-box{background:var(--red-light);border-left:4px solid var(--red);border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1.25rem}.mistake-box h3,.mistake-box p{color:#991b1b;margin:0;font-size:.95rem}.mistake-box h3{margin-bottom:.4rem;font-weight:700}.warning-box{background:var(--amber-light);border-left:4px solid var(--amber);border-radius:0 8px 8px 0;margin:1.5rem 0;padding:1.25rem}.warning-box p{color:#92400e;margin:0;font-size:.95rem}.key-points{background:var(--accent-light);border-radius:12px;margin:2rem 0;padding:1.5rem}.key-points h3{color:var(--accent);margin-bottom:.75rem;font-size:1rem}.key-points ul{margin:0;padding-left:1.25rem}.key-points li{margin-bottom:.4rem;font-size:.95rem}.cta-box{background:linear-gradient(135deg,var(--accent),var(--accent-2));text-align:center;color:#fff;border-radius:12px;margin:2.5rem 0;padding:2rem}.cta-box h3{margin-bottom:.5rem;font-size:1.25rem}.cta-box p{opacity:.9;color:#fff;margin-bottom:1rem}.cta-btn{color:var(--accent);background:#fff;border-radius:8px;margin:.25rem;padding:.75rem 1.5rem;font-weight:600;display:inline-block}.cta-btn:hover{opacity:.9;text-decoration:none}.example-box{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;margin:1.5rem 0;padding:1.25rem}.example-box h4{color:var(--gray-600);margin-bottom:.75rem;font-size:.85rem;font-weight:700}.example-box pre{background:#fff;border:none;margin:0;padding:.75rem}[data-theme=dark] .example-box pre{background:var(--gray-800)}[data-theme=dark] .tip-box{background:#064e3b}[data-theme=dark] .tip-box p{color:#6ee7b7}[data-theme=dark] .fix-box{background:#064e3b}[data-theme=dark] .fix-box h4,[data-theme=dark] .fix-box p{color:#6ee7b7}[data-theme=dark] .mistake-box{background:#7f1d1d}[data-theme=dark] .mistake-box h3,[data-theme=dark] .mistake-box p{color:#fca5a5}[data-theme=dark] .warning-box{background:#78350f}[data-theme=dark] .warning-box p{color:#fcd34d}[data-theme=dark] .article-body p,[data-theme=dark] .article-body ul,[data-theme=dark] .article-body ol{color:var(--gray-500)}[data-theme=dark] .article-header{background:var(--bg)}@media (max-width:768px){.article-header h1{font-size:1.6rem}.article-header{padding:4.5rem 0 1.5rem}}