/* Shared reading experience: outer articles, code articles and the component kit. */
@font-face{font-family:'Maxto Reader';src:url('/blog/fonts/vazirmatn.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:light;--paper:#fff;--sheet:#fff;--ink:#203330;--subtle:#596d66;--border:#d9e3dc;--teal:#11695e;--orange:#bb4e29;--wash:#e7f1e9;--warm:#fff0df;--lavender:#efebf7;--shadow:0 12px 35px #24382b08;--reader-size:18px;--bg:var(--paper);--panel:var(--sheet);--text:var(--ink);--muted:var(--subtle);--line:var(--border);--accent:var(--teal);--cyan:var(--teal)}
:root[data-reader-theme=dark]{color-scheme:dark;--paper:#16221f;--sheet:#1d2e29;--ink:#e7eee6;--subtle:#b0c4b8;--border:#3e544a;--teal:#8bdfc5;--orange:#ffbb8a;--wash:#253d32;--warm:#3d3025;--lavender:#333044;--shadow:0 12px 35px #0002}
html,body{background:var(--paper);color:var(--ink)}
body.article-ui,body:is(.article-flow,.article-preview),body:has(.mt-article){font-family:'Maxto Reader',Tahoma,sans-serif!important}
body.article-ui *,body:is(.article-flow,.article-preview) *,body:has(.mt-article) *{font-family:inherit!important}
body.article-ui :is(h1,h2,h3,h4),body:is(.article-flow,.article-preview) :is(h1,h2,h3,h4),body:has(.mt-article) :is(h1,h2,h3,h4){font-family:'Maxto Reader',Tahoma,sans-serif!important;letter-spacing:-.03em}
body :is(pre,code,kbd,samp),body :is(pre,code,kbd,samp) *{font-family:ui-monospace,Consolas,monospace!important;letter-spacing:normal}
::selection{background:#f5ce8c;color:#203330}a{color:var(--teal)}a:hover{color:var(--orange)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
/* Compact editorial masthead and controls. */
.article-ui .site-head{background:color-mix(in srgb,var(--paper) 94%,transparent);border-color:var(--border);backdrop-filter:blur(16px)}
.article-ui .head-inner{height:72px;max-width:1280px;gap:45px}.article-ui .brand{color:var(--ink)}.article-ui .brand-symbol{color:var(--teal);background:var(--wash);border-color:var(--border);box-shadow:none}.article-ui .brand-dot{color:var(--orange)}
.article-ui .site-head nav a{color:var(--subtle)}.article-ui .site-head nav a:hover,.article-ui .site-head nav a[aria-current]{color:var(--teal)}.article-ui .site-head nav a[aria-current]:after{background:var(--orange)}
.article-ui .head-action{background:var(--sheet);border-color:var(--border);color:var(--ink)}.article-ui .reading-progress>span{background:linear-gradient(90deg,#db7547,#187b68);box-shadow:none}
.article-ui .article-shell{width:min(1180px,calc(100% - 64px))}.article-ui .breadcrumb{color:var(--subtle);font-size:12px;padding-bottom:12px}.article-ui .breadcrumb a{color:var(--subtle)}
.reader-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0 20px;border-bottom:1px solid var(--border);margin-bottom:20px}
.reader-edition{display:flex;align-items:center;gap:12px}.reader-edition>span{font-size:26px;line-height:1;color:var(--orange)}.reader-edition strong{display:block;font-size:13px;font-weight:700}.reader-edition small{display:block;font-size:10px;color:var(--subtle);margin-top:3px;letter-spacing:.5px}
.reader-controls{display:flex;align-items:center;gap:8px}.reader-controls button{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);border-radius:50%;background:var(--sheet);color:var(--ink);font-size:16px;box-shadow:0 2px 0 var(--border)}.reader-controls button:hover{border-color:var(--teal);color:var(--teal)}.reader-controls button:disabled{opacity:.4;cursor:default}.reader-controls output{font-size:11px;color:var(--subtle);min-width:30px;text-align:center}.reader-controls #reader-theme{border-radius:22px;padding:0 14px;font-size:12px;margin-inline-end:4px}
.article-ui .code-context{border:0;padding-bottom:22px;margin-bottom:0}.article-ui .context-author strong,.article-ui .article-author strong{color:var(--ink)}.article-ui .context-author div>span,.article-ui .article-meta,.article-ui .article-author small{color:var(--subtle)}.article-ui .author-avatar,.article-ui .comment-avatar{background:var(--wash);color:var(--teal);border-color:var(--border);box-shadow:none}.article-ui .context-discussion{color:var(--teal)}.article-ui .context-discussion>span{background:var(--wash);border-color:var(--border)}
.article-ui .article-hero{background:radial-gradient(ellipse at 0 0,var(--wash),transparent 60%),var(--paper);padding:28px 0 48px;border-bottom:1px solid var(--border)}.article-ui .article-hero h1{font-size:clamp(30px,3.4vw,45px);line-height:1.65;color:var(--ink)}.article-ui .category{background:var(--wash);color:var(--teal);border-color:var(--border)}.article-ui .excerpt{color:var(--subtle);font-size:18px;line-height:2.1}.article-ui .featured{box-shadow:8px 10px 0 var(--wash);border-color:var(--border)}
.article-ui .article-body-grid{grid-template-columns:minmax(0,790px) 270px;gap:60px;padding-top:45px}.article-ui .article-content{font-family:'Maxto Reader',Tahoma,sans-serif!important;font-size:var(--reader-size);line-height:2.2;color:var(--ink)}.article-ui .article-content p{margin-bottom:24px}.article-ui .article-content h2{font-size:28px;line-height:1.7;margin:48px 0 22px;color:var(--ink)}.article-ui .article-content h3{font-size:22px;color:var(--teal)}.article-ui .article-content blockquote{background:var(--warm);border-color:var(--orange);color:var(--ink);border-radius:0 16px 16px 0}.article-ui .article-content :is(th,td){border-color:var(--border)}.article-ui .article-content figcaption{font-size:13px;color:var(--subtle)}
.article-ui .toc-box{background:var(--sheet);border-color:var(--border);box-shadow:var(--shadow)}.article-ui .toc-box :is(h2,.eyebrow){color:var(--teal)}.article-ui .toc-box nav a{color:var(--subtle);border-color:var(--border)}.article-ui .toc-box nav a:hover{color:var(--orange);border-color:var(--orange)}
/* The canvas includes authored code; semantic overrides keep every article legible. */
:is(.article-flow,.article-preview)>:is(article,main,section,div):first-child{--mt-bg:var(--paper);--mt-panel:var(--sheet);--mt-panel-light:var(--wash);--mt-ink:var(--ink);--mt-text:var(--ink);--mt-muted:var(--subtle);--mt-line:var(--border);--mt-accent:var(--teal);--mt-violet:var(--orange);--mt-gold:var(--orange);color:var(--ink);background:var(--paper);font-size:var(--reader-size);line-height:2.15}
:is(.article-flow,.article-preview) :is(.mt-seo-article,.mt-article),body>.mt-article{--mt-bg:var(--paper);--mt-panel:var(--sheet);--mt-panel-light:var(--wash);--mt-text:var(--ink);--mt-ink:var(--ink);--mt-muted:var(--subtle);--mt-line:var(--border);--mt-accent:var(--teal);--mt-violet:var(--orange);--mt-gold:var(--orange);padding:0 max(24px,calc((100% - 1180px)/2)) 55px!important;background:var(--paper)!important;color:var(--ink)!important;font-size:var(--reader-size)!important;line-height:2.15}
:is(.article-flow,.article-preview) :is(p,li){line-height:2.2}:is(.article-flow,.article-preview) :is(h1,h2,h3,h4){color:var(--ink)}
:is(.article-flow,.article-preview) :is(.mt-seo-hero,.mt-hero){position:relative;border:1px solid var(--border);border-radius:28px;background:radial-gradient(ellipse at 5% 30%,var(--wash),transparent 58%),linear-gradient(120deg,var(--sheet),var(--paper));padding:clamp(26px,4vw,50px);gap:35px;box-shadow:0 5px 0 var(--wash),var(--shadow);margin:0 0 30px;overflow:hidden}
:is(.article-flow,.article-preview) :is(.mt-seo-hero,.mt-hero):before{content:'';position:absolute;top:0;right:0;left:0;height:4px;background:linear-gradient(90deg,#edbc73,#d66d44,#168474);pointer-events:none}
:is(.article-flow,.article-preview) :is(.mt-seo-hero h1,.mt-hero h1){font-size:clamp(29px,3.1vw,42px)!important;line-height:1.75!important;font-weight:850;color:var(--ink)!important;margin:16px 0 24px}
:is(.article-flow,.article-preview) :is(.mt-seo-lead,.mt-lead){font-size:calc(var(--reader-size) + 1px)!important;line-height:2.1!important;color:var(--subtle)!important;max-width:720px}
:is(.article-flow,.article-preview) :is(.mt-seo-kicker,.mt-eyebrow,.mt-seo-section-index){font-size:12px!important;letter-spacing:.5px!important;color:var(--orange)!important;line-height:1.8!important;opacity:1;font-weight:700}
:is(.article-flow,.article-preview) :is(.mt-seo-meta,.mt-meta){font-size:12px!important;color:var(--subtle)!important;gap:15px}:is(.article-flow,.article-preview) .mt-seo-meta{margin:24px 0}:is(.article-flow,.article-preview) :is(.mt-seo-button,.mt-seo-btn){background:var(--teal)!important;color:var(--paper)!important;border:0!important;border-radius:13px;box-shadow:0 4px 0 color-mix(in srgb,var(--teal),#000 20%);font-size:14px!important;padding:12px 20px!important}
:is(.article-flow,.article-preview) .mt-seo-toc{border:1px solid var(--border);background:var(--sheet);padding:18px 24px;border-radius:16px;font-size:13px!important;line-height:2;box-shadow:var(--shadow);margin:28px 0 40px}:is(.article-flow,.article-preview) .mt-seo-toc a{color:var(--teal);border-color:var(--border);background:var(--wash);border-radius:20px;padding:5px 13px}:is(.article-flow,.article-preview) .mt-seo-toc span{color:var(--subtle)}
:is(.article-flow,.article-preview) :is(.mt-seo-layout,.mt-layout){grid-template-columns:minmax(0,1fr) 260px;gap:55px;max-width:1180px;margin:auto;align-items:start}:is(.article-flow,.article-preview) .mt-seo-content{min-width:0}:is(.article-flow,.article-preview) .mt-seo-section{padding:0 0 38px;border-bottom:1px solid var(--border);margin-bottom:36px}:is(.article-flow,.article-preview) .mt-seo-content>.mt-seo-section+.mt-seo-section{margin-top:0}
:is(.article-flow,.article-preview) :is(.mt-seo-section h2,.mt-section h2){font-size:clamp(24px,2.2vw,30px)!important;line-height:1.8!important;color:var(--ink)!important;margin:13px 0 22px}:is(.article-flow,.article-preview) :is(.mt-seo-section p,.mt-seo-list,.mt-seo-section li){font-size:var(--reader-size)!important;line-height:2.2!important;color:var(--ink)}:is(.article-flow,.article-preview) .mt-seo-section p{margin-bottom:23px}:is(.article-flow,.article-preview) :is(.mt-seo-section h3,.mt-section h3){font-size:21px!important;line-height:1.8;color:var(--teal)!important}
:is(.article-flow,.article-preview) :is(.mt-seo-callout,.mt-callout){background:var(--warm)!important;border:1px solid var(--border)!important;border-inline-start:4px solid var(--orange)!important;border-radius:16px;padding:24px!important;color:var(--ink)!important}:is(.article-flow,.article-preview) :is(.mt-seo-callout,.mt-callout) p{margin:0}:is(.article-flow,.article-preview) :is(.mt-seo-callout,.mt-callout) strong{color:var(--orange)}
:is(.article-flow,.article-preview) :is(.mt-seo-card,.mt-card){background:var(--wash)!important;border:1px solid var(--border)!important;border-radius:18px;box-shadow:0 4px 0 var(--border),0 12px 20px #263c2e06!important;padding:24px!important}:is(.article-flow,.article-preview) :is(.mt-seo-card,.mt-card):nth-child(3n+2){background:var(--warm)!important}:is(.article-flow,.article-preview) :is(.mt-seo-card,.mt-card):nth-child(3n){background:var(--lavender)!important}:is(.article-flow,.article-preview) :is(.mt-seo-card h3,.mt-card h3){color:var(--ink)!important;font-size:18px!important;margin:14px 0}:is(.article-flow,.article-preview) :is(.mt-seo-card p,.mt-card p){font-size:16px!important;line-height:2!important;color:var(--subtle)!important}:is(.article-flow,.article-preview) :is(.mt-seo-card-number,.mt-card-number){font-size:13px!important;color:var(--orange)!important;background:var(--sheet);display:inline-grid;place-items:center;min-width:36px;height:36px;border-radius:50%;letter-spacing:1px}
:is(.article-flow,.article-preview) .mt-seo-metric{background:var(--sheet)!important;border-color:var(--border)!important;box-shadow:0 4px 0 var(--wash)}:is(.article-flow,.article-preview) .mt-seo-metric strong{color:var(--teal)!important}:is(.article-flow,.article-preview) .mt-seo-metric span{font-size:14px!important;color:var(--ink)!important}:is(.article-flow,.article-preview) .mt-seo-metric small{font-size:12px!important;color:var(--subtle)!important}
:is(.article-flow,.article-preview) .mt-seo-sources{background:var(--wash)!important;border-color:var(--border)!important;border-radius:20px;padding:28px!important}:is(.article-flow,.article-preview) .mt-seo-sources ul{font-size:15px!important;line-height:2.1!important}:is(.article-flow,.article-preview) .mt-seo-disclaimer{font-size:13px!important;color:var(--subtle)!important;line-height:2!important}
:is(.article-flow,.article-preview) .mt-seo-sidecard{background:var(--wash)!important;border:1px solid var(--border)!important;box-shadow:none!important;padding:24px!important}:is(.article-flow,.article-preview) .mt-seo-sidecard h2{color:var(--teal)!important;font-size:20px!important;line-height:1.9}:is(.article-flow,.article-preview) .mt-seo-sidecard p{font-size:14px!important;color:var(--subtle)!important;line-height:2.15!important}:is(.article-flow,.article-preview) .mt-seo-sidecard a{font-size:13px!important;color:var(--teal)!important}:is(.article-flow,.article-preview) .mt-seo-side-kicker{font-size:10px!important;color:var(--teal)!important;letter-spacing:1px!important}
/* Keep the original dimensional illustration, give its materials color and contrast. */
:is(.article-flow,.article-preview) .mt-seo-visual{filter:none}:is(.article-flow,.article-preview) :is(.mt-seo-core,.mt-seo-layer){background:linear-gradient(145deg,#f4bd7d,#d47443)!important;border-color:#aa5838!important;box-shadow:10px 15px 0 #b56f3e18,0 20px 40px #a36a2d15!important}:is(.article-flow,.article-preview) :is(.mt-seo-core-label,.mt-seo-core-caption){color:#3f392f!important;font-size:13px!important}:is(.article-flow,.article-preview) :is(.mt-seo-orbit,.mt-seo-ring){border-color:#237b6880!important}:is(.article-flow,.article-preview) .mt-seo-badge{background:var(--sheet)!important;color:var(--teal)!important;border-color:var(--border)!important}:is(.article-flow,.article-preview) .mt-seo-spark{color:#11695e!important}
/* Shared kit components receive the same palette, including future articles. */
.mt-article :is(.mt-toc,details){background:var(--sheet);border-color:var(--border)}.mt-article :is(.mt-toc a,summary){color:var(--ink)}.mt-article details>div{color:var(--subtle)}.mt-article .mt-tab-list [aria-selected=true]{background:var(--wash);color:var(--teal);border-color:var(--teal)}.mt-article button{background:var(--sheet);color:var(--ink);border-color:var(--border)}.mt-article blockquote{color:var(--ink);background:var(--lavender);border-color:var(--orange)}.mt-article :is(th,caption){background:var(--wash);color:var(--ink)}.mt-article tbody tr:nth-child(even){background:var(--sheet)}.mt-article :is(.mt-card p,.mt-muted,.mt-lead){color:var(--subtle)}.mt-article .mt-dimension-core>i{background:linear-gradient(145deg,#93cbb0e6,#1e826bdf);border-color:#197962;color:#fff;box-shadow:inset 0 0 25px #b2ffcc33}.mt-article .mt-dimension-core>i:nth-child(4){background:linear-gradient(145deg,#ffd08c,#d66e3d);border-color:#a85830;color:#492f21}.mt-article .mt-dimension:before{background:radial-gradient(ellipse,#b9d6c7aa,transparent 70%);border-color:#55856c66;box-shadow:none}.mt-article .mt-dimension-caption{color:var(--subtle)}
/* Related articles stay in the requested rail, with readable rather than miniature text. */
.maxto-related,:is(.article-flow,.article-preview) .maxto-related{background:var(--sheet);color:var(--ink);border-color:var(--border);box-shadow:0 5px 0 var(--wash),var(--shadow)}.maxto-related .related-heading{border-color:var(--border)}.maxto-related .related-heading h2{color:var(--ink)!important;font-size:17px!important}.maxto-related .related-symbol{background:var(--warm);color:var(--orange);border-color:var(--border);box-shadow:none}.maxto-related :is(.related-kicker,.related-card-meta){font-size:11px!important;color:var(--subtle)}.maxto-related .related-count{background:var(--wash);border-color:var(--border);color:var(--teal)}.maxto-related .related-card{background:var(--paper);border-color:var(--border);box-shadow:0 3px 0 var(--border)}.maxto-related .related-card:hover{border-color:var(--teal);box-shadow:0 6px 0 var(--wash)}.maxto-related .related-card h3{font-size:14px!important;color:var(--ink)!important;line-height:1.9!important}.maxto-related .related-category{font-size:11px!important;color:var(--teal)}.maxto-related .related-cover{background:linear-gradient(135deg,#b9d8c3,#f3c492)}.maxto-related .related-cover:after{background:linear-gradient(transparent,#20463a22)}.maxto-related .related-mini-cube>*{background:linear-gradient(135deg,#efbd7e,#ce7645);border-color:#8b503a}.maxto-related .related-mini-cube>b{background:#995330}.maxto-related .related-mini-cube>em{background:#ffdaa2}.maxto-related .related-read{color:var(--teal)}.maxto-related .related-all{color:var(--teal)!important;border-color:var(--border);font-size:12px!important}.maxto-related .related-all>span{background:var(--wash);border-color:var(--border)}.maxto-related .related-empty h3{color:var(--ink)!important;font-size:13px!important}.maxto-related .related-empty p{font-size:12px!important;color:var(--subtle)!important}.maxto-related .related-empty-art>i,.maxto-related .related-empty-art>b{background:linear-gradient(135deg,#ebbe86,#d67c4a);border-color:#9e5e3c;box-shadow:4px 5px 0 #b77f4d22}.maxto-related .related-empty-art>em{color:#fff1cd;text-shadow:none}
/* Conversation and the article ending feel part of the same publication. */
.article-ui .article-end{padding-top:40px}.article-ui .article-tags a{background:var(--wash);color:var(--teal);border-color:var(--border)}.article-ui .article-share{background:var(--wash);border-color:var(--border);padding:26px 30px}.article-ui .article-share :is(strong,a){color:var(--ink)}.article-ui .article-share>div>span{color:var(--subtle)}.article-ui .article-share button{background:var(--sheet);color:var(--teal);border-color:var(--border)}
.article-ui .discussion{padding-top:25px}.article-ui .discussion-heading{border-top:2px solid var(--ink);padding-top:28px}.article-ui .discussion-heading h2{font-size:30px}.article-ui :is(.section-kicker,.discussion-heading p,.form-intro p,.comment-submit-row p,.thread-heading>span,.privacy-note){color:var(--subtle)}.article-ui .comment-total{color:var(--teal);background:var(--wash);border-color:var(--border)}.article-ui :is(.comment-form,.public-comment){background:var(--sheet);border-color:var(--border);box-shadow:var(--shadow)}.article-ui .form-symbol{background:var(--warm);color:var(--orange);border-color:var(--border)}.article-ui .comment-fields label{color:var(--ink)}.article-ui .comment-fields label>span{color:var(--orange)}.article-ui .comment-fields :is(input,textarea){background:var(--paper);border-color:var(--border);color:var(--ink);font-size:16px}.article-ui .comment-fields :is(input,textarea)::placeholder{color:var(--subtle)}.article-ui .comment-submit-row button{background:var(--teal);border-color:var(--teal);color:var(--paper);box-shadow:0 3px 0 color-mix(in srgb,var(--teal),#000 25%)}.article-ui .discussion-note{background:var(--warm);border-color:var(--border)}.article-ui .discussion-note :is(p,ul){color:var(--subtle)}.article-ui .note-orb{background:linear-gradient(145deg,#fac383,#cf6b40);color:#fff4de;box-shadow:inset -4px -6px 10px #75401b22,0 8px 15px #ad6d261c}.article-ui .comments-empty{background:var(--wash);border-color:var(--border)}.article-ui .comments-empty :is(strong,p,span),.article-ui .public-comment p{color:var(--subtle)}.article-ui .public-comment time{color:var(--subtle)}.article-ui .comment-approved{background:var(--wash);color:var(--teal)}.article-ui .site-foot,.article-ui .site-foot>a:last-child{color:var(--subtle);border-color:var(--border)}
.article-ui .archive-card{background:var(--sheet);border-color:var(--border)}.article-ui .archive-card :is(p,span){color:var(--subtle)}
@media(min-width:1100px){:is(.article-flow,.article-preview) .mt-seo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){:is(.article-flow,.article-preview) :is(.mt-seo-layout,.mt-layout){gap:30px;grid-template-columns:minmax(0,1fr) 235px}.article-ui .article-body-grid{gap:30px;grid-template-columns:minmax(0,1fr) 235px}}
@media(max-width:820px){:is(.article-flow,.article-preview) :is(.mt-seo-layout,.mt-layout){grid-template-columns:1fr}:is(.article-flow,.article-preview) :is(.mt-seo-hero,.mt-hero){grid-template-columns:1fr;padding:28px;gap:12px}:is(.article-flow,.article-preview) .mt-seo-visual{height:230px;max-width:350px;margin:auto;width:100%}:is(.article-flow,.article-preview) .mt-seo-toc{margin-bottom:30px}.article-ui .article-body-grid{display:flex;flex-direction:column}.article-ui .reading-aside{order:1;width:100%}}
@media(max-width:600px){:root{--reader-size:17px}.article-ui .head-inner{height:64px;width:calc(100% - 36px);gap:20px}.article-ui .article-shell{width:calc(100% - 36px)}.reader-bar{align-items:center;gap:12px;padding:10px 0 16px;margin-bottom:16px;flex-wrap:wrap}.reader-edition strong{font-size:12px}.reader-edition small{font-size:9px}.reader-controls{gap:6px;margin-inline-start:auto}.reader-controls button{min-width:36px;min-height:36px;font-size:15px}.reader-controls #reader-theme{font-size:11px;padding:0 10px}.reader-controls output{min-width:25px}:is(.article-flow,.article-preview) :is(.mt-seo-article,.mt-article),body>.mt-article{padding-inline:18px!important}:is(.article-flow,.article-preview) :is(.mt-seo-hero,.mt-hero){padding:25px 21px;border-radius:22px}:is(.article-flow,.article-preview) :is(.mt-seo-hero h1,.mt-hero h1){font-size:28px!important;line-height:1.8!important}:is(.article-flow,.article-preview) :is(.mt-seo-lead,.mt-lead){font-size:var(--reader-size)!important}:is(.article-flow,.article-preview) .mt-seo-visual{height:200px}:is(.article-flow,.article-preview) .mt-seo-toc{padding:16px;font-size:12px!important;gap:9px}:is(.article-flow,.article-preview) :is(.mt-seo-section h2,.mt-section h2){font-size:24px!important}:is(.article-flow,.article-preview) :is(.mt-seo-section,.mt-section){padding-bottom:25px;margin-bottom:26px}:is(.article-flow,.article-preview) :is(.mt-seo-grid,.mt-grid,.mt-grid-3){grid-template-columns:1fr}:is(.article-flow,.article-preview) .mt-seo-metric{padding:16px}:is(.article-flow,.article-preview) :is(.mt-seo-callout,.mt-callout){padding:20px!important}.article-ui .discussion-heading h2{font-size:25px}.article-ui .article-content h2{font-size:25px}.article-ui .article-share{padding:22px}.article-ui .excerpt{font-size:17px}}
:is(.article-flow,.article-preview) .mt-seo-article{--mt-cyan:var(--teal);--mt-purple:var(--orange)}
:is(.article-flow,.article-preview) .mt-seo-article a{color:var(--teal)}:is(.article-flow,.article-preview) .mt-seo-article a:hover{color:var(--orange)}
:is(.article-flow,.article-preview) .mt-seo-cta{background:var(--teal)!important;color:var(--paper)!important;border:1px solid var(--teal);border-radius:12px;padding:11px 19px;font-size:14px;box-shadow:0 3px 0 color-mix(in srgb,var(--teal),#000 20%)}
:is(.article-flow,.article-preview) .mt-seo-float{background:var(--sheet);color:var(--teal);border-color:var(--border);font-size:12px;box-shadow:3px 4px 0 var(--border)}
:is(.article-flow,.article-preview) .mt-seo-core-symbol{color:#235e4d;text-shadow:0 2px 0 #ffdda5}
:is(.article-flow,.article-preview) .mt-seo-note{background:var(--lavender);color:var(--ink);border-color:var(--orange);padding:24px;border-radius:16px}
:is(.article-flow,.article-preview) .mt-seo-note strong{color:var(--orange)}
:is(.article-flow,.article-preview) .mt-seo-checklist{background:var(--wash);border-color:var(--border);padding:28px!important;border-radius:20px}
:is(.article-flow,.article-preview) .mt-seo-metric b{color:var(--teal);font-size:25px}
:is(.article-flow,.article-preview) .mt-seo-card-icon{color:var(--orange);font-size:13px;background:var(--sheet);display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:50%}
:is(.article-flow,.article-preview) .mt-seo-progress{display:none}
:is(.article-flow,.article-preview) .mt-seo-sources h2{color:var(--ink);font-size:23px;line-height:1.8}
body.article-ui .article-content,body.article-ui .article-content :is(h1,h2,h3,h4,h5,h6),body.article-ui .article-hero h1{font-family:'Maxto Reader',Tahoma,sans-serif!important}
.mt-article .mt-hero{border:1px solid var(--border);border-radius:24px;padding:35px;background:linear-gradient(120deg,var(--sheet),var(--wash));color:var(--ink);margin-bottom:35px}
.mt-article .mt-card{background:var(--wash);border-color:var(--border);box-shadow:0 4px 0 var(--border);color:var(--ink)}.mt-article .mt-card:nth-child(3n+2){background:var(--warm)}.mt-article .mt-card:nth-child(3n){background:var(--lavender)}
.mt-article .mt-callout{background:var(--warm);border-color:var(--border);border-inline-start-color:var(--orange);color:var(--ink)}.mt-article .mt-callout[data-tone=success]{background:var(--wash);border-inline-start-color:var(--teal)}
.mt-article code{color:var(--teal);background:var(--wash)}.mt-article pre code{color:inherit;background:none}.mt-article .mt-meta>span{border-color:var(--border)}
.article-ui .interactive-stage{overflow-anchor:none;background:var(--paper);border-color:var(--border)}
.article-ui .code-frame{background:var(--paper)}
.article-ui .interactive-stage{position:relative}
.mt-native-rail-column .mt-hosted-rail{display:none!important;transform:none!important}
.mt-native-rail-column :is(.mt-seo-layout,.mt-layout,.mt-journal-layout){grid-template-columns:minmax(0,1fr)!important;gap:0!important}
.article-ui .code-body-grid{width:min(1180px,calc(100% - 64px));margin:auto;padding-top:0;border:0;display:block}
.article-ui .code-body-grid[data-native-rail=active]{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:32px;align-items:stretch}
.article-ui .code-reading-aside{position:relative;align-self:stretch;min-width:0}
.article-ui .code-reading-aside[hidden]{display:none!important}
.article-ui .code-reading-aside .code-reading-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;max-height:calc(100dvh - 112px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;scrollbar-gutter:auto;pointer-events:auto;padding:0 1px 6px;box-sizing:border-box;overflow-anchor:none;transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.article-ui .code-reading-rail>*{flex-shrink:0}
.article-ui .code-reading-rail .reading-note{padding:17px 18px 15px;box-shadow:none}
.article-ui .code-reading-rail .reading-note h2{font-size:16px;line-height:1.8;margin:0 0 9px}
.article-ui .code-reading-rail .reading-note p{font-size:12.5px;line-height:1.95;margin:0 0 10px;color:var(--subtle)}
.code-note-items{list-style:none;padding:0;margin:10px 0}
.code-note-items li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:11.5px;line-height:1.85}
.code-note-items li:last-child{border-bottom:0}
.code-note-items strong,.code-note-items span{display:block}.code-note-items span{color:var(--subtle)}
.code-note-action{display:block;background:transparent;border:0;border-top:1px solid var(--border);padding:10px 0 0;margin-top:10px;width:100%;text-align:right;color:var(--teal);font-family:inherit;font-size:12px;line-height:1.9;cursor:pointer}
.article-ui .code-reading-rail .maxto-related{padding:14px 15px 12px;box-shadow:none;margin:0}
.article-ui .code-reading-rail .related-heading{margin-bottom:12px!important;padding-bottom:10px;gap:8px}
.article-ui .code-reading-rail .related-heading h2{font-size:16px!important}
.article-ui .code-reading-rail .related-cover{height:86px}
.article-ui .code-reading-rail .related-card-body{padding:10px 11px}
.article-ui .code-reading-rail .related-card h3{font-size:13px!important;line-height:1.85!important;margin:5px 0 8px!important}
.article-ui .code-reading-rail .related-card-meta{font-size:10px!important;padding-top:7px}
.article-ui .code-reading-rail .related-all{font-size:11px!important;margin-top:11px!important;padding-top:9px!important}
.article-ui .code-reading-rail .related-list{gap:12px!important}
@media(max-height:850px){.article-ui .code-reading-rail .related-card{display:grid!important;grid-template-columns:76px minmax(0,1fr);align-items:stretch}.article-ui .code-reading-rail .related-cover{height:100%;min-height:126px}.article-ui .code-reading-rail .related-card-meta{flex-wrap:wrap;gap:3px}.article-ui .code-reading-rail .related-card-body{padding:9px}.article-ui .code-reading-rail .related-card h3{font-size:12px!important}.article-ui .code-reading-rail .related-cover>img{object-position:center}}
@media(max-height:680px){.article-ui .code-reading-rail .reading-note{padding:13px 15px}.article-ui .code-reading-rail .reading-note h2{font-size:15px}.article-ui .code-reading-rail .related-cover{height:66px}.article-ui .code-reading-rail .related-kicker{display:none}.code-note-items li{padding:4px 0}}
@media(max-width:820px){.article-ui .code-reading-aside{display:none!important}}
@media(max-width:1000px){.article-ui .code-body-grid[data-native-rail=active]{grid-template-columns:minmax(0,1fr) 235px;gap:24px}}
@media(max-width:820px){.article-ui .code-body-grid{width:100%}.article-ui .code-body-grid[data-native-rail=active]{display:block}}
@media(max-width:600px){:is(.article-flow,.article-preview) .mt-seo-card-grid{grid-template-columns:1fr}:is(.article-flow,.article-preview) .mt-seo-scene{min-height:220px}:is(.article-flow,.article-preview) .mt-seo-metric-row{grid-template-columns:1fr}:is(.article-flow,.article-preview) .mt-seo-metric{min-height:90px;grid-template-columns:70px 1fr;align-items:center;text-align:right;gap:5px 15px}:is(.article-flow,.article-preview) .mt-seo-metric b{grid-row:1/3;text-align:center}:is(.article-flow,.article-preview) .mt-seo-metric small{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){:is(.article-flow,.article-preview) *,body.article-ui *{scroll-behavior:auto!important}.reader-controls button{transition:none}}

/* Uploaded covers also belong to articles authored as HTML/CSS/JS. */
.article-ui .code-article-cover{margin:6px auto 28px;min-width:0}.article-ui .code-article-cover img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--border)}.article-ui .code-article-cover figcaption{font-size:13px;line-height:2;color:var(--subtle);padding:10px 2px;overflow-wrap:anywhere}

/* Keep the complete reading rail visible while the reader moves through an article. */
.article-ui .article-body-grid{align-items:start}
.article-ui .reading-aside{align-self:stretch;min-width:0}
.article-ui .reading-rail{position:sticky;top:96px;max-height:calc(100vh - 112px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.article-ui .reading-rail .toc-box{position:static}
@media(max-width:820px){.article-ui .reading-rail{position:static;top:auto;max-height:none;overflow:visible;overscroll-behavior:auto}.article-ui .reading-aside{align-self:auto}}
/* Code-authored articles live in a tall sandboxed iframe; the bridge moves its rail with the parent scroll. */
:is(.article-flow,.article-preview) :is(.mt-seo-layout,.mt-layout)>:is(aside,.maxto-reading-rail){align-self:start;min-height:0;transform:translateY(var(--mt-rail-shift,0px));will-change:auto}
@media(max-width:820px){:is(.article-flow,.article-preview) :is(.mt-seo-layout,.mt-layout)>:is(aside,.maxto-reading-rail){transform:none;will-change:auto}}

/* MaxTo Learning Journal: one calm editorial system for block and code-authored posts. */
.article-ui .article-body-grid{grid-template-columns:minmax(0,790px) minmax(235px,270px);gap:clamp(30px,5vw,60px);align-items:start}
.article-ui .article-content{font-size:var(--reader-size);line-height:2.12;letter-spacing:0}
.article-ui .article-content p{max-width:78ch;margin:0 0 24px}
.article-ui .article-content h2{position:relative;padding-bottom:13px;margin:58px 0 22px;border-bottom:1px solid var(--border);font-size:clamp(24px,2.15vw,29px);line-height:1.8}
.article-ui .article-content h2:after{content:"";position:absolute;right:0;bottom:-1px;width:54px;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--orange),var(--teal))}
.article-ui .article-content h3{font-size:clamp(19px,1.75vw,23px);line-height:1.85;margin:32px 0 14px;color:var(--teal)}
.article-ui .article-content :is(ul,ol){padding-right:1.45em;margin:0 0 26px}
.article-ui .article-content li{padding-inline-start:4px;margin:9px 0}
.article-ui .article-content li::marker{color:var(--teal)}
.article-ui .article-content a{color:var(--teal);text-decoration:underline;text-decoration-color:#11695e55;text-decoration-thickness:1px;text-underline-offset:4px}
.article-ui .article-content a:hover{color:var(--orange);text-decoration-color:currentColor}
.article-ui .article-content blockquote{padding:20px 24px;border:1px solid var(--border);border-right:3px solid var(--orange);border-radius:14px;background:var(--warm);color:var(--ink);line-height:2.1}
.article-ui .article-content table{width:100%;min-width:560px;font-size:15px;line-height:1.95}
.article-ui .article-content :is(th,td){padding:13px 15px;border-color:var(--border)}
.article-ui .article-content th{background:var(--wash);color:var(--ink);font-weight:700}
.article-ui .article-content tbody tr:nth-child(even){background:color-mix(in srgb,var(--wash) 42%,var(--sheet))}
.article-ui .article-content figcaption{font-size:13px;line-height:1.9}
.article-ui .reading-rail{display:grid;gap:16px;scrollbar-gutter:stable}
.article-ui .reading-note{padding:21px 21px 19px;border:1px solid #d2e2d6;border-radius:18px;background:linear-gradient(145deg,#edf4ee,#e2efe6);box-shadow:0 5px 0 #d9e6dc,0 14px 28px #24382b0a}
.article-ui .reading-note-kicker{margin:0 0 13px;font:10px/1.7 monospace;letter-spacing:1.6px;color:var(--teal)}
.article-ui .reading-note h2{font-size:17px;line-height:1.9;color:#126b5f;margin:0 0 10px}
.article-ui .reading-note>p:last-child{font-size:13px;line-height:2.05;color:#536c62;margin:0}
.article-ui .toc-box{position:static;padding:20px 19px;border-radius:18px}
.article-ui .toc-box .eyebrow{font:10px/1.8 monospace;letter-spacing:1.4px;margin-bottom:5px}
.article-ui .toc-box h2{font-size:16px;margin:0 0 13px}
.article-ui .toc-box nav{gap:8px;font-size:13px;line-height:1.9}
.article-ui .toc-box nav a{border-right:2px solid var(--border);border-radius:4px;padding:5px 11px;color:var(--subtle);transition:background .18s ease,color .18s ease,border-color .18s ease}
.article-ui .toc-box nav a:hover,.article-ui .toc-box nav a:focus-visible{background:var(--wash);color:var(--teal);border-color:var(--teal)}
.article-ui .reading-rail-progress{height:4px;overflow:hidden;border-radius:4px;background:var(--wash);margin:0 0 14px}
.article-ui .reading-rail-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--orange),var(--teal));transition:width .18s linear}
.article-ui .reading-rail .maxto-related{margin:0}
:is(.article-flow,.article-preview) .mt-journal-layout{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:clamp(28px,4.7vw,58px);align-items:start;margin-top:clamp(30px,4vw,52px)}
:is(.article-flow,.article-preview) .mt-journal-main{min-width:0}
:is(.article-flow,.article-preview) .mt-journal-rail{min-width:0;align-self:start;transform:translateY(var(--mt-rail-shift,0px));will-change:auto}
:is(.article-flow,.article-preview) .mt-journal-note{padding:19px 19px 17px;border:1px solid #d2e2d6;border-radius:18px;background:linear-gradient(145deg,#edf4ee,#e2efe6);box-shadow:0 5px 0 #d9e6dc,0 14px 28px #24382b0a;color:#203330}
:is(.article-flow,.article-preview) .mt-journal-note>span,:is(.article-flow,.article-preview) .mt-journal-toc-head>span{display:block;margin-bottom:9px;font:10px/1.7 monospace!important;letter-spacing:1.3px;color:#11695e}
:is(.article-flow,.article-preview) .mt-journal-note h2,:is(.article-flow,.article-preview) .mt-journal-toc-head h2{font-size:16px;line-height:1.9;margin:0 0 8px;color:#203330}
:is(.article-flow,.article-preview) .mt-journal-note p{font-size:13px!important;line-height:2;color:#536c62!important;margin:0}
:is(.article-flow,.article-preview) .mt-journal-toc-box{padding:18px;border:1px solid var(--border);border-radius:17px;background:var(--sheet);box-shadow:var(--shadow)}
:is(.article-flow,.article-preview) .mt-journal-toc-head{margin-bottom:12px}
:is(.article-flow,.article-preview) .mt-journal-progress{height:4px;overflow:hidden;border-radius:4px;background:var(--wash);margin:0 0 13px}
:is(.article-flow,.article-preview) .mt-journal-progress>span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--orange),var(--teal));transition:width .18s linear}
:is(.article-flow,.article-preview) .mt-journal-toc-box .mt-toc{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;margin:0!important}
:is(.article-flow,.article-preview) .mt-journal-toc-box .mt-toc a{font-size:13px;line-height:1.9;padding:6px 10px;border:0;border-right:2px solid var(--border);color:var(--subtle);border-radius:4px}
:is(.article-flow,.article-preview) .mt-journal-toc-box .mt-toc a:hover{background:var(--wash);color:var(--teal);border-color:var(--teal)}
:is(.article-flow,.article-preview) .mt-journal-rail .maxto-related-fallback{margin:0}
:is(.article-flow,.article-preview) .mt-journal-rail .maxto-related{margin:0}
:root[data-reader-theme=dark] .article-ui .reading-note,:root[data-reader-theme=dark] :is(.article-flow,.article-preview) .mt-journal-note{background:linear-gradient(145deg,#253d32,#1d332a);border-color:var(--border);box-shadow:0 5px 0 #172820,0 14px 28px #0002;color:var(--ink)}
:root[data-reader-theme=dark] .article-ui .reading-note h2,:root[data-reader-theme=dark] :is(.article-flow,.article-preview) .mt-journal-toc-head h2{color:var(--ink)}
:root[data-reader-theme=dark] .article-ui .reading-note>p:last-child,:root[data-reader-theme=dark] :is(.article-flow,.article-preview) .mt-journal-note p{color:var(--subtle)!important}
@container(max-width:900px){:is(.article-flow,.article-preview) .mt-journal-layout{grid-template-columns:minmax(0,1fr) 235px;gap:24px}}
@container(max-width:780px){:is(.article-flow,.article-preview) .mt-journal-layout{grid-template-columns:1fr;gap:22px}:is(.article-flow,.article-preview) .mt-journal-rail{order:2;transform:none!important;will-change:auto}}
@media(max-width:820px){:is(.article-flow,.article-preview) .mt-journal-layout{grid-template-columns:1fr;gap:22px}:is(.article-flow,.article-preview) .mt-journal-rail{order:2;transform:none!important;will-change:auto}}
@media(max-width:1000px){.article-ui .article-body-grid{grid-template-columns:minmax(0,1fr) 235px;gap:30px}}
@media(max-width:820px){.article-ui .article-body-grid{display:flex;flex-direction:column}.article-ui .reading-aside{order:1;width:100%}.article-ui .reading-rail{width:100%;max-height:none;overflow:visible}.article-ui .reading-note{padding:18px 19px}.article-ui .article-content h2{margin-top:43px}}
@media(max-width:600px){.article-ui .article-content{font-size:var(--reader-size);line-height:2.15}.article-ui .article-content h2{font-size:24px}.article-ui .article-content table{min-width:480px}.article-ui .reading-rail{gap:13px}.article-ui .reading-note h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.article-ui .reading-rail-progress span,:is(.article-flow,.article-preview) .mt-journal-progress>span{transition:none}.article-ui .toc-box nav a{transition:none}}