.article-main{font-family:var(--font-family,var(--font-inter,"Inter", -apple-system, sans-serif));color:#0f172a;background:#fff;min-height:100vh;position:relative}.article-progress-bar{z-index:1001;background:#f1f5f9;height:3px;position:fixed;top:0;left:0;right:0}.article-progress-fill{background:#047857;height:100%;transition:width 75ms}.article-container{max-width:1240px;margin:0 auto;padding:24px 18px 80px}.article-breadcrumbs{color:#64748b;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:24px;font-size:13px;display:flex}.article-breadcrumbs a{color:#64748b;text-decoration:none;transition:color .2s}.article-breadcrumbs a:hover{color:#047857}.article-breadcrumbs-text{color:#0f172a;white-space:nowrap;text-overflow:ellipsis;max-width:360px;font-weight:600;overflow:hidden}.article-layout{grid-template-columns:1fr 300px;align-items:start;gap:36px;display:grid}.article-content-wrapper{width:100%;min-width:0;max-width:860px}.article-meta-top{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;display:flex}.article-category-badge{color:#047857;text-transform:uppercase;letter-spacing:.04em;background:#10b98114;border:1px solid #10b98133;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700}.article-meta-item{color:#64748b;align-items:center;gap:5px;font-size:12.5px;display:flex}.article-title{letter-spacing:-.03em;color:#0f172a;margin-bottom:14px;font-size:clamp(26px,3.8vw,38px);font-weight:800;line-height:1.2}.article-lead-desc{color:#475569;margin-bottom:24px;font-size:16px;line-height:1.6}.article-byline-bar{border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px;padding:14px 0;display:flex}.article-byline-author{align-items:center;gap:10px;display:flex}.article-byline-avatar{color:#fff;background:#0f172a;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:13px;font-weight:700;display:flex}.article-byline-name{color:#0f172a;font-size:13.5px;font-weight:700;display:block}.article-byline-role{color:#64748b;font-size:12px;display:block}.article-share-btns{align-items:center;gap:8px;display:flex}.article-share-label{color:#64748b;font-size:12px;font-weight:700}.article-share-btn{color:#475569;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.article-share-btn:hover{color:#fff;background:#0f172a;border-color:#0f172a}.article-hero-image-wrapper{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;margin-bottom:36px;overflow:hidden}.article-hero-image{object-fit:cover;width:100%;height:auto;max-height:420px;display:block}.article-body-content{color:#334155;word-break:break-word;font-size:16px;line-height:1.75}.article-body-content h2{letter-spacing:-.025em;color:#0f172a;border-bottom:1px solid #e2e8f0;margin-top:44px;margin-bottom:16px;padding-bottom:8px;font-size:clamp(22px,3vw,26px);font-weight:800;line-height:1.3}.article-body-content h3{letter-spacing:-.02em;color:#0f172a;margin-top:32px;margin-bottom:12px;font-size:clamp(18px,2.5vw,21px);font-weight:700;line-height:1.35}.article-body-content h4{color:#0f172a;margin-top:24px;margin-bottom:8px;font-size:16px;font-weight:700}.article-body-content p{color:#334155;margin-bottom:20px;line-height:1.75}.article-body-content strong{color:#0f172a;font-weight:700}.article-body-content a{color:#047857;text-underline-offset:3px;font-weight:600;text-decoration:underline;transition:color .15s}.article-body-content a:hover{color:#065f46}.article-body-content ul,.article-body-content ol{color:#334155;margin-bottom:24px;padding-left:24px}.article-body-content li{margin-bottom:8px;line-height:1.7}.article-body-content hr{border:none;border-top:1px solid #e2e8f0;margin:36px 0}.article-inline-code,.article-body-content code:not(pre code){white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono,monospace)!important;color:#047857!important;background:#f0fdf4!important;border:1px solid #10b98147!important;border-radius:6px!important;padding:2px 7px!important;font-size:13px!important;font-weight:600!important}.article-pre-wrapper{background:#0f172a;border:1px solid #1e293b;border-radius:12px;max-width:100%;margin:24px 0;padding:16px 20px;overflow-x:auto}.article-pre-wrapper pre{font-family:var(--font-mono,monospace);color:#e2e8f0;background:0 0;margin:0;font-size:13px;line-height:1.6}.article-body-content table{border-collapse:collapse;border:1px solid #e2e8f0;border-radius:12px;width:100%;margin:28px 0;font-size:14px;display:block;overflow:auto hidden}.article-body-content th{color:#0f172a;text-align:left;white-space:nowrap;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:12px 16px;font-weight:700}.article-body-content td{color:#334155;border-bottom:1px solid #f1f5f9;padding:12px 16px;line-height:1.6}.article-body-content tr:last-child td{border-bottom:none}.article-body-content blockquote{color:#065f46;background:#f0fdf4;border:1px solid #10b98126;border-left:4px solid #10b981;border-radius:0 10px 10px 0;margin:28px 0;padding:16px 20px;font-style:normal}.article-body-content blockquote p{color:#065f46;margin:0}.article-quiz-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;margin-top:40px;padding:24px}.article-quiz-header{color:#047857;text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;font-weight:800;display:flex}.article-quiz-q{color:#0f172a;margin-bottom:14px;font-size:15px;font-weight:700}.article-quiz-options{flex-direction:column;gap:8px;display:flex}.article-quiz-opt{color:#334155;cursor:pointer;text-align:left;background:#fff;border:1px solid #cbd5e1;border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;font-size:13.5px;font-weight:500;transition:all .2s;display:flex}.article-quiz-opt:hover{background:#f1f5f9;border-color:#10b981}.article-quiz-opt.opt--correct{font-weight:700;color:#166534!important;background:#dcfce7!important;border-color:#10b981!important}.article-quiz-opt.opt--wrong{color:#991b1b!important;background:#fee2e2!important;border-color:#ef4444!important}.article-quiz-feedback{color:#0f172a;background:#fff;border-left:3px solid #10b981;border-radius:6px;margin-top:14px;padding:10px 14px;font-size:13px}.article-feedback-bar{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:32px;padding:14px 20px;display:flex}.article-feedback-btns{gap:8px;display:flex}.feedback-btn{cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:6px 14px;font-size:12.5px;font-weight:600;transition:all .2s}.feedback-btn:hover{color:#0f172a;background:#f1f5f9}.article-sidebar{flex-direction:column;gap:20px;display:flex;position:sticky;top:80px}.article-sidebar-sandbox-card{background:linear-gradient(135deg,#10b98114,#6366f10a);border:1px solid #10b98138;border-radius:14px;padding:20px}.sidebar-sandbox-header{color:#047857;align-items:center;gap:6px;margin-bottom:8px;font-size:12.5px;font-weight:800;display:flex}.sidebar-sandbox-desc{color:#475569;margin-bottom:14px;font-size:13px;line-height:1.5}.sidebar-sandbox-btn{color:#fff;background:#0f172a;border-radius:9px;align-items:center;gap:6px;padding:9px 16px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.sidebar-sandbox-btn:hover{background:#1e293b}.article-sidebar-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;box-shadow:0 1px 3px #0f172a05}.article-sidebar-title{color:#64748b;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;font-size:11px;font-weight:800}.article-toc-card{background:#fff}.article-toc-list{flex-direction:column;gap:4px;display:flex;margin:0!important;padding:0!important;list-style:none!important}.article-toc-item{margin:0!important;padding:0!important;list-style:none!important}.article-toc-link{border-radius:8px;align-items:flex-start;gap:8px;padding:6px 10px;transition:all .15s;color:#475569!important;font-size:13px!important;line-height:1.45!important;text-decoration:none!important;display:flex!important}.article-toc-link:hover{background:#f1f5f9;color:#0f172a!important}.article-toc-link.active{background:#ecfdf5;font-weight:600;color:#047857!important}.article-toc-number{color:#94a3b8;flex-shrink:0;margin-top:2px;font-size:11px;font-weight:700}.article-toc-link.active .article-toc-number{color:#10b981}.article-toc-text{flex:1}.sidebar-related-list{flex-direction:column;gap:10px;display:flex}.sidebar-related-item{border-bottom:1px solid #f1f5f9;padding:8px 0;text-decoration:none}.sidebar-related-item:last-child{border-bottom:none}.sidebar-related-item h4{color:#0f172a;margin:0 0 4px;font-size:13px;font-weight:600;line-height:1.4;transition:color .2s}.sidebar-related-item:hover h4{color:#047857}.sidebar-related-item span{color:#94a3b8;font-size:11.5px}@media (max-width:960px){.article-container{padding:16px 16px 48px}.article-layout{grid-template-columns:1fr;gap:32px}.article-sidebar{position:static}.article-title{letter-spacing:-.02em;font-size:clamp(24px,6vw,32px)}.article-lead-desc{font-size:15px}.article-byline-bar{flex-direction:column;align-items:flex-start;gap:12px}.article-hero-image-wrapper{margin-bottom:24px}}