.cch-article-page { color: #334155; background: #fff; }
.cch-article-page [hidden] { display: none !important; }
.article-container { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.article-navigation { border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.article-navigation-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px; }
.article-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; font-size:13px; }
.article-breadcrumb a:hover { color:#0284c7; }
.article-search { display:flex; width:280px; max-width:100%; border:1px solid #cbd5e1; border-radius:10px; background:white; }
.article-search input { width:100%; min-width:0; border:0; background:transparent; padding:9px 12px; font-size:13px; border-radius:10px; }
.article-search button { width:44px; flex-shrink:0; color:#0284c7; }
.article-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:48px; padding-block:56px; }
.article-hero-without-image { grid-template-columns:minmax(0,860px); }
.article-category { display:inline-flex; padding:8px 15px; border-radius:24px; background:#e0f2fe; color:#0369a1; font-weight:700; font-size:13px; }
.cch-public-content .article-hero h1 { font-size:clamp(30px,3.3vw,46px) !important; line-height:1.22 !important; letter-spacing:-.035em; color:#0f2942; margin:20px 0; font-weight:750; }
.article-introduction { font-size:16px; line-height:1.8; color:#64748b; margin-bottom:24px; }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; font-size:13px; }
.article-meta > span { display:flex; align-items:center; gap:7px; }
.article-author-chip { display:inline-flex; align-items:center; gap:9px; color:#0f2942; font-weight:600; }
.article-author-initial { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; background:#e0f2fe; color:#0369a1; border:1px solid #bae6fd; border-radius:50%; font-weight:700; }
.article-updated { margin-top:14px; font-size:12px; color:#64748b; }
.article-guide-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.article-guide-meta span { background:#f1f5f9; border-radius:6px; padding:5px 10px; font-size:12px; }
.article-sharing { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:26px; }
.article-sharing > span:first-child { font-size:12px; font-weight:600; margin-right:4px; }
.article-sharing :is(a,button) { display:grid; place-items:center; width:42px; height:42px; border:1px solid #cbd5e1; border-radius:50%; background:white; transition:background .2s; }
.article-sharing :is(a,button):hover { background:#e0f2fe; color:#0369a1; }
.article-copy-status { font-size:12px; color:#0369a1; }
.article-featured-image { min-width:0; margin:0; border:1px solid #e2e8f0; border-radius:20px; background:#f8fafc; overflow:hidden; }
.article-featured-image img { display:block; width:100%; height:auto; object-fit:contain; }
.article-image-fallback { min-height:280px; display:flex; flex-direction:column; justify-content:center; gap:16px; padding:36px; background:linear-gradient(135deg,#eff6ff,#e0f2fe); }
.article-image-fallback i { font-size:32px; color:#0284c7; }
.article-image-fallback span { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#0369a1; }
.article-image-fallback p { font-size:22px; font-weight:700; line-height:1.4; color:#0f2942; }
.article-reading-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:48px; align-items:start; padding-block:16px 56px; }
.article-sidebar { position:sticky; top:110px; }
.article-sidebar-inner { min-width:0; }
.article-sidebar-extra { display:grid; gap:20px; margin-top:20px; }
.article-toc { border:1px solid #e2e8f0; border-radius:14px; padding:20px; background:white; }
.article-toc summary { cursor:pointer; font-size:16px; font-weight:700; color:#0f2942; }
.article-toc ol { list-style:none; margin:16px 0 0; padding:0; max-height:calc(100dvh - 250px); overflow-y:auto; overscroll-behavior:contain; }
.article-toc li + li { margin-top:4px; }
.article-toc a { display:block; padding:8px 10px; border-left:2px solid transparent; font-size:13px; line-height:1.55; color:#64748b; }
.article-toc a:hover, .article-toc a.is-active { color:#0369a1; background:#f0f9ff; border-left-color:#0ea5e9; }
.article-toc .article-toc-nested { padding-left:12px; }
.article-support-card { border-radius:14px; background:#0f2942; padding:24px; color:white; }
.article-support-card > span { text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:#7dd3fc; font-weight:700; }
.cch-public-content .article-support-card h2 { font-size:21px !important; line-height:1.4 !important; margin:12px 0; color:white; font-weight:700; }
.article-support-card p { font-size:13px; line-height:1.8; color:#cbd5e1; }
.article-support-card a { display:inline-flex; align-items:center; gap:10px; margin-top:20px; background:#0284c7; color:white; padding:12px 16px; border-radius:8px; font-size:13px; font-weight:700; }
.article-reading-column { min-width:0; max-width:820px; }
.article-body { font-size:17px; line-height:1.85; color:#334155; overflow-wrap:anywhere; }
.article-body p { margin:0 0 1.4em; }
.cch-public-content .article-body :is(h2,h3,h4) { color:#0f2942; font-weight:700; line-height:1.35 !important; scroll-margin-top:120px; }
.cch-public-content .article-body h2 { font-size:28px !important; margin:1.6em 0 .7em; letter-spacing:-.02em; }
.cch-public-content .article-body h3 { font-size:22px !important; margin:1.4em 0 .6em; }
.article-body h4 { font-size:19px; margin:1.2em 0 .5em; }
.article-body > :first-child { margin-top:0; }
.article-body :is(ul,ol) { padding-left:1.5em; margin:0 0 1.5em; }
.article-body ul { list-style:disc; } .article-body ol { list-style:decimal; }
.article-body li { margin-block:.45em; }
.article-body a { color:#0369a1; text-decoration:underline; text-underline-offset:3px; }
.article-body img { display:block; max-width:100%; height:auto !important; object-fit:contain !important; margin:28px auto; border-radius:12px; }
.article-body iframe { max-width:100%; }
.article-body blockquote { margin:24px 0; padding:20px 24px; border-left:4px solid #0ea5e9; background:#f0f9ff; border-radius:0 10px 10px 0; }
.article-body pre { max-width:100%; overflow-x:auto; padding:20px; background:#0f172a; color:#e2e8f0; border-radius:10px; font-size:14px; line-height:1.7; margin:24px 0; }
.article-body code { font-size:.85em; } .article-body :not(pre) > code { background:#f1f5f9; padding:2px 5px; border-radius:4px; }
.article-table-scroll { max-width:100%; overflow-x:auto; margin:24px 0; border:1px solid #e2e8f0; border-radius:10px; }
.article-body table { border-collapse:collapse; width:100%; font-size:14px; }
.article-body :is(th,td) { padding:12px 16px; border:1px solid #e2e8f0; text-align:left; min-width:120px; }
.article-body th { background:#f1f5f9; color:#0f2942; }
.article-callout { padding:24px; border-left:4px solid #0ea5e9; border-radius:0 12px 12px 0; background:#f0f9ff; margin-bottom:28px; }
.article-callout strong { color:#0369a1; } .article-callout p { margin-top:10px; font-size:15px; line-height:1.8; }
.article-prerequisites { background:#fffbeb; border-color:#f59e0b; white-space:pre-line; }
.article-prerequisites strong { color:#92400e; }
.article-reading-column > aside[data-promotion], .article-inline-promotion { margin-block:28px; }
.article-tags { display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid #e2e8f0; margin-top:40px; padding-top:24px; }
.article-tags a { font-size:12px; color:#0369a1; background:#f0f9ff; border-radius:20px; padding:7px 12px; }
.article-author-card { display:flex; gap:20px; margin-top:40px; padding:28px; border-radius:16px; background:#f8fafc; scroll-margin-top:120px; }
.article-author-card > .article-author-initial { width:54px; height:54px; font-size:22px; }
.article-eyebrow { color:#0284c7; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.cch-public-content .article-author-card h2 { font-size:19px !important; font-weight:700; margin:6px 0; color:#0f2942; }
.article-author-card p:last-child { font-size:14px; line-height:1.8; }
.article-feedback { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; border-block:1px solid #e2e8f0; padding:28px 0; margin-top:32px; }
.cch-public-content .article-feedback h2 { font-size:19px !important; font-weight:700; color:#0f2942; }
.article-feedback p { font-size:13px; margin-top:8px; }
.article-feedback-buttons { display:flex; gap:10px; }
.article-feedback-buttons button { border:1px solid #cbd5e1; border-radius:8px; padding:11px 18px; font-size:14px; }
.article-feedback-buttons button:hover { border-color:#0284c7; color:#0369a1; }
.article-feedback-buttons button:disabled { opacity:.5; cursor:default; }
.article-feedback [data-feedback-message] { flex-basis:100%; color:#0369a1; }
.article-bottom { padding-bottom:64px; }
.article-related { border-top:1px solid #e2e8f0; padding-top:36px; margin-bottom:40px; }
.article-related-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:28px; }
.cch-public-content .article-related-heading h2 { font-size:28px !important; margin-top:8px; font-weight:700; color:#0f2942; }
.article-related-heading > a { font-size:14px; color:#0369a1; font-weight:600; }
.cch-article-page :is(a,button,summary):focus-visible { outline:2px solid #0284c7; outline-offset:4px; }
@media(min-width:1024px) { .article-toc summary { list-style:none; } }
@media(max-width:1023px) {
 .article-container { width:calc(100% - 40px); }
 .article-hero { gap:28px; padding-block:36px; }
 .article-reading-layout { grid-template-columns:minmax(0,1fr); gap:28px; }
 .article-sidebar { position:static; }
 .article-sidebar-extra { display:none; }
 .article-reading-column { max-width:none; }
 .article-toc ol { max-height:320px; }
}
@media(max-width:767px) {
 .article-navigation-inner { flex-direction:column; align-items:stretch; gap:12px; }
 .article-search { width:100%; }
 .article-hero { grid-template-columns:minmax(0,1fr); padding-block:28px; gap:24px; }
 .cch-public-content .article-hero h1 { font-size:30px !important; line-height:1.25 !important; }
 .article-introduction { font-size:15px; line-height:1.75; }
 .article-featured-image { border-radius:12px; }
 .article-image-fallback { min-height:200px; padding:24px; }
 .article-image-fallback p { font-size:18px; }
 .article-sharing { gap:8px; }
 .article-body { font-size:16px; line-height:1.85; }
 .cch-public-content .article-body h2 { font-size:24px !important; }
 .cch-public-content .article-body h3 { font-size:20px !important; }
 .article-author-card { padding:20px; gap:14px; }
 .article-author-card > .article-author-initial { width:40px; height:40px; font-size:18px; }
 .article-callout { padding:20px; }
 .article-bottom { padding-bottom:40px; }
}