.article-progress-bar{z-index:9999;border-radius:0 2px 2px 0;height:3px;transition:width .1s linear;position:fixed;top:0;left:0}.article-page{background:var(--bg-main,#faf8ff);min-height:100vh}.article-hero{align-items:flex-end;height:clamp(320px,50vh,500px);display:flex;position:relative;overflow:hidden}.article-hero-img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.article-hero-fallback{position:absolute;inset:0}.article-hero-overlay{z-index:1;position:absolute;inset:0}.article-hero-content{z-index:2;width:100%;max-width:900px;margin:0 auto;padding:0 24px 36px;position:relative}.article-breadcrumb{align-items:center;gap:8px;margin-bottom:12px;font-size:.82rem;display:flex}.article-breadcrumb a{color:#fffc;text-decoration:none;transition:color .2s}.article-breadcrumb a:hover{color:#fff}.article-breadcrumb span{color:#ffffff80}.article-bc-cat{font-weight:600}.article-hero-title{font-family:var(--font-secondary);color:#fff;text-shadow:0 2px 20px #0006;margin:0 0 16px;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;line-height:1.2}.article-hero-meta{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.article-cat-badge{color:#fff;letter-spacing:.04em;border-radius:50px;padding:4px 14px;font-size:.72rem;font-weight:600;display:inline-block}.article-meta-item{color:#fffc;align-items:center;gap:5px;font-size:.8rem;display:inline-flex}.article-body{grid-template-columns:240px 1fr;align-items:start;gap:40px;max-width:1100px;margin:0 auto;padding:48px 24px 80px;display:grid}.article-toc{background:var(--white,#fff);border-radius:var(--radius-xl,20px);border:1px solid #b571de1a;padding:22px 20px;position:sticky;top:96px;box-shadow:0 4px 24px #b571de12}.article-toc-title{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0 0 14px;font-size:.72rem;font-weight:700}.article-toc-list{counter-reset:toc-counter;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.article-toc-list li{counter-increment:toc-counter}.article-toc-link{color:var(--text-muted);border-left:2px solid #0000;border-radius:0 6px 6px 0;padding:6px 10px 6px 12px;font-size:.8rem;line-height:1.4;text-decoration:none;transition:color .2s,border-color .2s,background .2s;display:block}.article-toc-link:hover{color:var(--purple);background:#b571de0d}.article-toc-link.active{background:#b571de0f;font-weight:600}.article-toc-back{color:var(--text-muted);border-top:1px solid #b571de1a;align-items:center;gap:6px;margin-top:20px;padding-top:16px;font-size:.78rem;font-weight:500;text-decoration:none;transition:color .2s;display:inline-flex}.article-toc-back:hover{color:var(--purple)}.article-content{min-width:0}.article-section{margin-bottom:48px;animation:.5s both sectionFadeIn}@keyframes sectionFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.article-section-title{font-family:var(--font-secondary);color:var(--text-color);border-bottom:2px solid var(--section-color,var(--purple));border-image:linear-gradient(90deg, var(--section-color,var(--purple)), transparent) 1;margin:0 0 20px;padding-bottom:12px;font-size:clamp(1.3rem,2.5vw,1.7rem);font-weight:700}.article-prose{color:var(--text-color);font-size:.95rem;line-height:1.8}.article-prose p{margin:0 0 1.2em}.article-prose ul,.article-prose ol{margin:0 0 1.2em;padding-left:1.4em}.article-prose li{margin-bottom:.5em}.article-prose strong{color:var(--text-color);font-weight:600}.article-prose a{color:var(--purple);text-underline-offset:3px;text-decoration:underline}.article-prose a:hover{color:var(--purple-hover)}.article-prose .underline{text-underline-offset:3px;text-decoration:underline}.article-prose em{font-style:italic}.article-tags{border-top:1px solid #b571de1a;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px;padding:24px 0;display:flex}.article-tags-label{color:var(--text-muted);font-size:.78rem;font-weight:600}.article-tag{color:var(--purple);background:#b571de14;border:1px solid #b571de26;border-radius:50px;padding:4px 12px;font-size:.75rem;font-weight:500}.article-cta{border-radius:var(--radius-xl,20px);background:linear-gradient(135deg,#b571de12 0%,#80cacd0f 100%);border:1px solid #b571de24;flex-wrap:wrap;align-items:center;gap:20px;margin-top:40px;padding:24px 28px;display:flex}.article-cta-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex;box-shadow:0 4px 16px #b571de4d}.article-cta-title{color:var(--text-color);margin:0 0 4px;font-size:1rem;font-weight:700}.article-cta-text{color:var(--text-muted);margin:0;font-size:.83rem;line-height:1.5}.article-cta-btn{font-size:.85rem;font-family:var(--font-primary);color:#fff;white-space:nowrap;border:none;border-radius:50px;margin-left:auto;padding:11px 24px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px #b571de59}.article-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #b571de73}.article-nav-footer{max-width:1100px;margin:0 auto;padding:0 24px 60px}.article-nav-back{color:var(--text-muted);align-items:center;gap:6px;font-size:.85rem;font-weight:500;text-decoration:none;transition:color .2s;display:inline-flex}.article-nav-back:hover{color:var(--purple)}@media (max-width:900px){.article-body{grid-template-columns:1fr;gap:24px;padding:32px 20px 60px}.article-toc{order:-1;position:static}.article-toc-list{flex-flow:wrap;gap:6px}.article-toc-link{border-bottom:2px solid #0000;border-left:none;border-radius:4px 4px 0 0;padding:4px 10px;font-size:.75rem}.article-toc-back{margin-top:12px}}@media (max-width:600px){.article-hero-content{padding:0 16px 28px}.article-hero-title{font-size:1.5rem}.article-body{padding:24px 16px 48px}.article-cta{text-align:center;flex-direction:column}.article-cta-btn{text-align:center;width:100%;margin-left:0}}