.dux-article{color:#18262d}.design-site .dux-article .article-header{padding:32px 0;background:#f5f4ef;border-bottom:1px solid #dce1df}.dux-article .ui-article-hero{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:32px;max-width:1120px}.dux-article .ui-article-heading{min-width:0}.design-site .dux-article .article-header h1{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.4;letter-spacing:0;overflow-wrap:anywhere;margin:16px 0}.dux-article .article-outcome{font-size:1.1rem;line-height:1.8;max-width:68ch;margin:16px 0}.dux-article .article-entry{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:20px 0}.dux-article .article-entry a{min-height:44px;display:inline-flex;align-items:center;max-width:100%;overflow-wrap:anywhere}.dux-article .ui-article-cover{margin:0;align-self:center}.dux-article .ui-article-cover img{width:100%;height:auto;max-height:220px;object-fit:contain;border-radius:8px}.dux-article .series-position,.dux-article .meta{font-size:.8rem;line-height:1.7;overflow-wrap:anywhere}.design-site .dux-article .reading-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(180px,240px);gap:48px;max-width:1120px;margin:32px auto}.design-site .dux-article .article-body{font-size:1.05rem;line-height:1.9;min-width:0;max-width:100%;padding:0}.dux-article .article-body h2{font-size:1.5rem;line-height:1.5;border-bottom:1px solid #dce1df;padding-bottom:12px;margin:2.5rem 0 1.2rem}.dux-article .article-body h3{font-size:1.2rem;line-height:1.6}.dux-article .reader-guide,.dux-article .article-toc{padding:16px 20px;background:#f5f4ef;border:1px solid #dce1df;border-radius:8px;margin:0 0 24px}.dux-article summary{cursor:pointer;min-height:44px;overflow-wrap:anywhere}.dux-article .reader-guide summary{font-weight:700}.dux-article .reader-guide p{font-size:1rem;margin:12px 0}.dux-article .toc-sidebar{display:block;min-width:0;align-self:start;position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding:0 8px 8px;font-size:.85rem}.dux-article .toc-sidebar a{display:block;padding:8px 0;line-height:1.6;overflow-wrap:anywhere}.dux-article .toc-sidebar [aria-current]{border-left:3px solid #2459d3;padding-left:8px;font-weight:700}.dux-article :is(#article-main,#browser-experiment,h2[id],h3[id]){scroll-margin-top:96px}.dux-article #browser-experiment{padding:20px;border:1px solid #72808a;border-radius:12px;background:#fff;margin:0 0 24px}.dux-article #browser-experiment h2{margin:0 0 12px}.dux-article #browser-experiment iframe{max-width:100%;border:1px solid #dce1df;border-radius:8px}.dux-article :is(pre,.table-wrap,.math-block,.diagram-viewport){max-width:100%;overflow:auto;overscroll-behavior-x:contain}.dux-article pre{font-size:.9rem;line-height:1.7}.dux-article :is(th,td){padding:12px;font-size:.9rem;line-height:1.6}.dux-article blockquote{margin:24px 0;padding:12px 20px;border-left:4px solid #72808a;background:#f5f4ef;color:#18262d}.dux-article :is(figcaption,.diagram-caption,.footnote){font-size:.9rem;line-height:1.8;color:#52616a}.dux-article .reading-diagram{border:1px solid #dce1df;border-radius:8px;padding:12px}.dux-article .diagram-fit{min-height:44px}.dux-article .diagram-viewport>img{max-width:none;width:max(100%,var(--diagram-width));height:auto}.dux-article .is-fitted .diagram-viewport>img{width:100%;max-width:100%}.dux-article :is(a,button,summary,[tabindex]):focus-visible{outline:3px solid #b45309;outline-offset:4px}.dux-article :is(.artifact-download,.next-reading){border:1px solid #dce1df;border-radius:8px;padding:20px;margin-block:32px}.dux-article [hidden]{display:none!important}
@media(max-width:1000px){.design-site .dux-article .reading-layout{display:block;max-width:760px;width:calc(100% - 40px)}.dux-article .toc-sidebar{display:none}.dux-article .ui-article-hero{grid-template-columns:minmax(0,1fr)}.dux-article .ui-article-cover{max-width:360px}.dux-article-lab .ui-article-cover{display:none}}
@media(max-width:600px){.design-site .dux-article .article-header{padding:24px 0}.dux-article .ui-article-hero{width:calc(100% - 40px);gap:20px}.dux-article .article-outcome{font-size:1rem}.dux-article :is(.reader-guide,.article-toc,#browser-experiment,.reading-diagram){padding:12px}.dux-article .article-entry .ui-button{font-size:1rem;white-space:normal}.dux-article .toc-sidebar{display:none}}
@media print{.dux-shell,.dux-bottom-nav,.site-footer,.dux-article .article-entry,.dux-article .toc-sidebar,.dux-article .article-toc,.dux-article button,.dux-article iframe,.dux-article .feedback-bar,.dux-article .comment-section{display:none!important}.design-site .dux-article .reading-layout{display:block;width:100%;max-width:none;margin:0}.design-site .dux-article .article-header{background:white;padding:0}.dux-article .ui-article-hero{display:block;width:100%}.dux-article .ui-article-cover{display:none}.dux-article :is(pre,.table-wrap,.math-block,.diagram-viewport){max-height:none;overflow:visible}.dux-article pre code{white-space:pre-wrap;overflow-wrap:anywhere}.dux-article table{min-width:0!important;width:100%;font-size:9pt}.dux-article :is(th,td){overflow-wrap:anywhere;white-space:normal;font-size:9pt;padding:4px}.dux-article .diagram-viewport>:is(img,svg){width:100%!important;min-width:0!important;max-width:100%!important}.dux-article h2,.dux-article h3{break-after:avoid}.dux-article blockquote{background:white}.dux-article a{color:inherit}}

@media(max-width:1000px){.dux-article .reading-layout .article-toc{display:block}}

@media(min-width:1001px){.dux-article .reading-layout .article-toc{display:none}}

/* Shared action token keeps text contrast consistent across the entire button. */
.dux-article .ui-button:not(.secondary) { background:var(--dux-action); border-color:var(--dux-action); }

/* Use the shared action color so white launch text has consistent contrast. */
.design-site .dux-article .article-entry .ui-button{background:var(--dux-action,#2459d3);color:var(--dux-action-ink,#fff)}