/* Shared blog presentation. Content and translations live in DevSDK/blog. */
/* Related guides reuse app artwork and editorial relationships, without extra JavaScript. */
.blog-related{margin-top:64px;padding-top:36px;border-top:1px solid var(--line)}
.blog-related-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.blog-related-heading h2{font-size:30px;font-weight:650;letter-spacing:-.6px;line-height:1.3;margin:0}
.blog-related-heading .blog-card-link{margin:0}
.blog-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.blog-related-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--surface);transition:border-color .18s,box-shadow .18s}
.blog-related-card:hover{border-color:var(--accent);box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 9%,transparent)}
.blog-related-art{display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 50% 40%,var(--accent-soft),var(--canvas))}
.blog-related-art img{display:block;width:112px;height:112px;object-fit:contain}
.blog-related-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:20px 22px 22px;min-width:0}
.blog-related-category{color:var(--blog-accent);font-size:11px;font-weight:600;line-height:1.6}
.blog-related h3{font-size:19px;line-height:1.45;font-weight:650;letter-spacing:-.2px;margin:10px 0 20px;overflow-wrap:anywhere}
.blog-related h3 a:hover{color:var(--blog-accent)}
.blog-related-copy .blog-card-link{margin-top:auto}
@media(max-width:760px){
 .blog-related{margin-top:44px;padding-top:28px}
 .blog-related-heading h2{font-size:25px}
 .blog-related-grid{grid-template-columns:1fr;gap:14px}
 .blog-related-card{display:grid;grid-template-columns:112px minmax(0,1fr)}
 .blog-related-art{padding:8px}
 .blog-related-art img{width:96px;height:96px}
 .blog-related-copy{padding:18px}
 .blog-related h3{font-size:17px;margin:8px 0 14px}
}
@media(max-width:370px){
 .blog-related-card{grid-template-columns:88px minmax(0,1fr)}
 .blog-related-art img{width:72px;height:72px}
 .blog-related-copy{padding:14px}
}
@media print{.blog-related{display:none}}
.blog{--blog-accent:var(--accent-readable,var(--accent));--blog-body:color-mix(in srgb,var(--ink) 85%,var(--muted));width:min(1120px,calc(100% - 64px));margin-inline:auto;padding-bottom:76px}
.blog p,.blog figure{margin:0}.blog a,.blog button,.blog input,.blog select{touch-action:manipulation}.blog a:focus-visible,.blog button:focus-visible{outline-offset:-2px}.blog h1,.blog h2,.blog h3{color:var(--ink)}
.blog-eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:1.8px;color:var(--blog-accent);line-height:1.6}.blog-eyebrow .icon{width:19px;height:19px}.blog-sort>span{white-space:nowrap;flex:none}
.blog-button{display:inline-flex;align-items:center;justify-content:center;gap:19px;min-height:50px;padding:11px 13px 11px 21px;border-radius:12px;font-size:14px;font-weight:650;line-height:1.5;transition:background .18s,transform .18s}.blog-button-primary{color:white;background:var(--accent);box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 16%,transparent)}.blog-button-primary:hover{background:var(--accent-hover,var(--accent));transform:translateY(-1px)}.blog-button-icon{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ffffff24;flex:none}.blog-button-icon .icon{width:17px;height:17px;color:inherit}.blog-arrow-down{transform:rotate(90deg)}[dir=rtl] .blog-arrow-forward{transform:rotate(180deg)}
.blog-breadcrumbs{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;font-size:12px;color:var(--muted)}.blog-breadcrumbs a:hover{color:var(--blog-accent)}.blog-breadcrumbs [aria-current]{color:var(--ink)}
.blog-hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:30px;padding:44px 0 48px}.blog-hero h1{font-size:clamp(48px,5.2vw,70px);letter-spacing:-3px;line-height:1.08;margin:20px 0}.blog-hero h1 span:not(:last-of-type){display:block}.blog-hero h1 i{color:var(--blog-accent);font-style:normal}.blog-hero-lead{font-size:20px;font-weight:600}.blog-hero-description{max-width:425px;margin-top:10px!important;font-size:16px;line-height:1.85;color:var(--blog-body)}.blog-byline{display:flex;align-items:center;flex-wrap:wrap;gap:5px 7px;font-size:12px;color:var(--muted);margin-top:21px!important}.blog-byline a{color:var(--ink);font-weight:600}.blog-byline a:hover{text-decoration:underline}.blog-updated{font-size:11px;color:var(--muted);margin-top:5px!important}.blog-hero-copy>.blog-button{margin-top:27px}
.blog-hero-comparison{padding:30px 20px 22px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(ellipse at 65% 25%,var(--accent-soft),var(--canvas) 80%);min-width:0}.blog-comparison-label{text-align:center;font-size:9px;letter-spacing:1.35px;font-weight:650;color:var(--muted);margin-bottom:28px}.blog-papers{display:flex;justify-content:center;align-items:center;gap:18px}.blog-paper-example{display:flex;align-items:center;flex-direction:column;gap:12px;min-width:0}.blog-paper-label{font-size:10px;font-weight:650;white-space:nowrap;color:var(--blog-body)}.blog-paper{display:block;position:relative;flex:none;overflow:hidden;border-radius:3px;box-shadow:0 9px 25px #172b4920;cursor:zoom-in;background:white}.blog-paper img{display:block;width:100%;height:auto}.blog-paper-before{width:163px}.blog-paper-after{width:205px}.blog-comparison-arrow{width:27px;flex:none;color:var(--blog-accent);margin-top:25px}.blog-crop-outline{position:absolute;inset:17% 40% 66% 10%;border:1.5px solid var(--accent);box-shadow:0 0 0 300px #20325825}.blog-crop-outline i{position:absolute;background:var(--accent);width:5px;height:5px}.blog-crop-outline i:nth-child(1){top:-3px;left:-3px}.blog-crop-outline i:nth-child(2){top:-3px;right:-3px}.blog-crop-outline i:nth-child(3){bottom:-3px;left:-3px}.blog-crop-outline i:nth-child(4){bottom:-3px;right:-3px}.blog-hero-comparison figcaption{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;margin-top:27px;font-size:10px;color:var(--blog-body)}.blog-tiny-crop{width:9px;height:9px;border:1.5px solid var(--blog-accent)}.blog-comparison-scale{flex-basis:100%;text-align:center;font-size:9px;color:var(--muted);margin-top:1px}
.blog-quick-path{display:grid;grid-template-columns:repeat(4,1fr);padding:21px 0;border-block:1px solid var(--line)}.blog-quick-path a{display:flex;gap:12px;align-items:center;padding:8px 20px;border-inline-end:1px solid var(--line);font-size:13px;font-weight:650}.blog-quick-path a:first-child{padding-inline-start:0}.blog-quick-path a:last-child{border:0;padding-inline-end:0}.blog-quick-path a>span{font-size:12px;color:var(--blog-accent);font-variant-numeric:tabular-nums}.blog-quick-path small{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:3px}.blog-quick-path .icon{width:16px;height:16px;margin-inline-start:auto;color:var(--muted)}.blog-quick-path a:hover{color:var(--blog-accent)}
.blog-article-layout{display:grid;grid-template-columns:184px minmax(0,1fr);gap:62px;padding-top:48px}.blog-sidebar-inner{position:sticky;top:30px}.blog-sidebar-label{font-size:10px;font-weight:650;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}.blog-sidebar nav{display:flex;flex-direction:column;margin-top:20px;gap:5px}.blog-sidebar nav a{display:flex;gap:10px;padding:9px 0;color:var(--muted);font-size:12px;line-height:1.5}.blog-sidebar nav a>span{font-size:10px;width:15px;flex:none;padding-top:2px}.blog-sidebar nav a:hover,.blog-sidebar nav a[aria-current]{color:var(--blog-accent)}.blog-sidebar nav a[aria-current]{font-weight:650}.blog-sidebar-note{display:flex;gap:9px;margin-top:26px!important;border-top:1px solid var(--line);padding-top:19px;font-size:11px;line-height:1.7;color:var(--muted)}.blog-sidebar-note .icon{width:15px;height:15px;margin-top:2px}.blog-back-link{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:12px;color:var(--blog-accent)}.blog-back-link .icon{width:16px;height:16px;transform:rotate(180deg)}
.blog-article{min-width:0}.blog-article p{font-size:16px;line-height:1.9;color:var(--blog-body)}.blog-article-intro{max-width:770px}.blog-step{margin-top:54px;scroll-margin-top:30px}.blog-step-heading{display:flex;align-items:center;gap:15px;margin-bottom:18px}.blog-step-number{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);font-size:12px;font-weight:700;color:var(--blog-accent)}.blog-step h2{font-size:26px;line-height:1.3;letter-spacing:-.7px;margin:0;font-weight:650}.blog-step>p+p{margin-top:14px}.blog-text-link,.blog-important-note a{color:var(--blog-accent);text-decoration:underline;text-underline-offset:3px}.blog-article strong{font-weight:650;color:var(--ink)}.blog-inline-tip{display:flex;align-items:flex-start;gap:11px;border-inline-start:2px solid var(--accent);background:var(--canvas);border-radius:0 8px 8px 0;padding:15px 18px;margin-top:22px}.blog-inline-tip>span{color:var(--blog-accent);font-size:20px;line-height:1.4}.blog-inline-tip p{font-size:13px;line-height:1.8}
.blog-scope-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
/* Keep an unmatched decision card balanced in any two-column article group. */
.blog-scope-cards>.blog-scope-option:last-child:nth-child(odd){grid-column:1/-1}
.blog-scope-option{display:flex;gap:13px;padding:23px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.blog-option-symbol{display:grid;place-items:center;flex:none;width:18px;height:18px;margin-top:3px;border-radius:5px;background:var(--accent);color:white;font-size:11px}.blog-option-empty{border:1.5px solid var(--muted);background:transparent}.blog-scope-option h3,.blog-adjustment-tips h3{font-size:14px;line-height:1.5;margin:0 0 7px;font-weight:650}.blog-scope-option p,.blog-adjustment-tips p{font-size:13px;line-height:1.8}
.blog-example-margins{display:grid;grid-template-columns:repeat(4,1fr);margin:23px 0 28px;border:1px solid var(--line);border-radius:14px;padding:20px 0;background:var(--surface)}.blog-example-margins>div{text-align:center;border-inline-end:1px solid var(--line)}.blog-example-margins>div:last-child{border:0}.blog-example-margins dt{font-size:11px;color:var(--muted);margin-bottom:5px}.blog-example-margins dd{font-size:23px;font-weight:650;color:var(--blog-accent);margin:0}.blog-adjustment-tips{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-block:24px}.blog-adjustment-tips>div{display:flex;gap:12px}.blog-tip-index{display:grid;place-items:center;flex:none;width:23px;height:23px;background:var(--canvas);border:1px solid var(--line);border-radius:50%;font-size:10px;color:var(--muted)}
.blog-download-receipt{display:flex;align-items:center;gap:16px;margin:24px 0 18px;padding:20px 22px;border:1px solid #41997530;background:color-mix(in srgb,#3f9672 6%,var(--surface));border-radius:14px}.blog-receipt-check{display:grid;place-items:center;flex:none;width:33px;height:33px;border-radius:50%;background:#378868;color:white}.blog-download-receipt strong{font-size:14px}.blog-download-receipt p{font-size:12px;margin-top:4px}.blog-download-receipt p>span{margin-inline:7px}.blog-article code{font-size:.9em;overflow-wrap:anywhere}.blog-after-note{font-size:13px!important;color:var(--muted)!important}
.blog-important-note{display:flex;gap:17px;margin-top:46px;padding:24px;border:1px solid var(--line);background:var(--canvas);border-radius:14px}.blog-important-note>svg{width:23px;height:23px;color:var(--muted);flex:none}.blog-important-note h2{font-size:16px;line-height:1.5;margin:0 0 8px;font-weight:650;letter-spacing:-.2px}.blog-important-note p{font-size:13px;line-height:1.8}.blog-questions{margin-top:52px;scroll-margin-top:30px}.blog-questions h2{font-size:29px;letter-spacing:-.8px;line-height:1.3;margin:12px 0 23px}.blog-questions details{border-bottom:1px solid var(--line)}.blog-questions summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 0;font-size:15px;font-weight:550;list-style:none}.blog-questions summary::-webkit-details-marker{display:none}.blog-questions summary:after{content:'+';color:var(--blog-accent);font-size:22px;font-weight:400}.blog-questions details[open] summary:after{content:'−'}.blog-questions details p{font-size:14px;padding:0 30px 20px 0}.blog-closing{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:52px;padding-top:36px;border-top:1px solid var(--line)}.blog-closing h2{font-size:27px;line-height:1.3;letter-spacing:-.7px;margin:11px 0}.blog-closing p{font-size:13px;color:var(--muted)}.blog-closing>.blog-button{flex:none}
/* The library is useful with one guide, and grows into a card grid. */
.blog-index-heading{padding:70px 0 55px;text-align:center}.blog-index-heading .blog-eyebrow{justify-content:center}.blog-index-heading h1{font-size:clamp(42px,5vw,62px);line-height:1.12;letter-spacing:-2.6px;margin:22px 0}.blog-index-heading h1 span{display:block}.blog-index-heading h1 span:last-child{color:var(--blog-accent)}.blog-index-heading>p:last-child{max-width:520px;margin-inline:auto;font-size:17px;line-height:1.8;color:var(--muted)}.blog-library-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-bottom:21px}.blog-library-heading h2{font-size:23px;font-weight:650;letter-spacing:-.5px;margin:0}.blog-library-heading>span{font-size:12px;color:var(--muted)}
.blog-finder{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.blog-search{display:flex;align-items:center;gap:11px;padding:0 16px;border:1px solid var(--line);background:var(--surface);border-radius:12px;min-height:54px;flex:1;min-width:200px}.blog-search>.icon{width:20px;height:20px;color:var(--muted)}.blog-search:focus-within{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-2px}.blog-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;padding:15px 0;font-size:14px}.blog-search input::placeholder{color:var(--muted);opacity:1}.blog-search input::-webkit-search-cancel-button{display:none}.blog-search button{padding:5px;margin-inline-end:-7px;line-height:1;border-radius:6px}.blog-search button .icon{width:17px;height:17px;color:var(--muted)}.blog-sort{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:12px;min-height:54px;padding-inline:16px 12px;font-size:12px}.blog-sort>span{color:var(--muted)}.blog-sort select{border:0;background:var(--surface);font-size:13px;padding:8px 5px;max-width:160px}.blog-filters{display:flex;flex-wrap:wrap;gap:9px;flex-basis:100%;padding-top:3px;margin-bottom:12px}.blog-filters button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;background:var(--surface);padding:8px 14px;font-size:12px;min-height:37px}.blog-filters button>span{font-size:10px;min-width:17px;text-align:center;opacity:.75}.blog-filters button[aria-pressed=true]{color:#fff;background:var(--accent);border-color:var(--accent);font-weight:700}.blog-filters button[aria-pressed=true]>span{opacity:1}.blog-filters button:hover{border-color:var(--accent)}.blog-index[data-enhanced] .blog-search-submit{display:none}
.blog-posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.blog-card{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 8px 28px #182b4503}.blog-card-art{display:grid;place-items:center;min-height:270px;padding:24px;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--accent-soft) 65%,var(--surface)),var(--canvas));overflow:hidden}.blog-card-art img{width:min(100%,310px);max-width:310px;margin:0;filter:drop-shadow(0 16px 20px #1736670b);transition:transform .3s}.blog-card-art:hover img{transform:translateY(-4px)}.blog-card-copy{padding:29px 32px 32px}.blog-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:15px;font-size:11px;color:var(--muted)}.blog-card-meta>span:first-child{color:var(--blog-accent);font-weight:650}.blog-card h3{font-size:29px;line-height:1.25;letter-spacing:-.8px;margin:16px 0 13px;font-weight:650}.blog-card h3 a:hover{color:var(--blog-accent)}.blog-card-copy>p{font-size:15px;line-height:1.85;color:var(--muted);max-width:460px}.blog-card-byline{display:flex;flex-wrap:wrap;gap:7px;margin-top:21px;font-size:11px;color:var(--muted)}.blog-card-byline>span:first-child{color:var(--ink);font-weight:550}.blog-card-link{display:inline-flex;align-items:center;gap:12px;color:var(--blog-accent);font-size:13px;font-weight:650;margin-top:26px}.blog-card-link .blog-button-icon{background:var(--accent-soft)}.blog-card-link:hover .blog-button-icon{background:color-mix(in srgb,var(--accent) 15%,var(--surface))}.blog-card:only-child{grid-column:1/-1;display:grid;grid-template-columns:.9fr 1.1fr;min-height:360px}.blog-card:only-child .blog-card-art{padding:27px}.blog-card:only-child img{width:min(100%,335px);max-width:335px}.blog-card:only-child .blog-card-copy{padding:43px 42px}.blog-card:only-child h3{font-size:34px}.blog-empty{padding:56px 20px;text-align:center;border:1px dashed var(--line);border-radius:20px;background:var(--surface)}.blog-empty>.icon{width:29px;height:29px;color:var(--muted)}.blog-empty h3{font-size:23px;margin:18px 0 9px}.blog-empty p{font-size:14px;color:var(--muted)}.blog-empty .blog-button{margin-top:24px;padding-inline:22px}
/* Full-resolution originals load only when a reader opens the image viewer. */
.blog-image-viewer{width:min(1160px,calc(100% - 48px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 24px 100px #0005}.blog-image-viewer::backdrop{background:#131e34bd;backdrop-filter:blur(5px)}.blog-viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 20px;border-bottom:1px solid var(--line)}.blog-viewer-toolbar h2{font-size:14px;font-weight:600;margin:0}.blog-viewer-toolbar>div{display:flex;align-items:center;gap:10px}.blog-viewer-toolbar button{display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:12px;min-height:36px}.blog-viewer-toolbar .icon{width:18px;height:18px;color:inherit}.blog-viewer-stage{overflow:auto;height:min(70dvh,760px);padding:20px;background:var(--canvas)}.blog-viewer-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;object-fit:contain;background:white;box-shadow:0 3px 20px #0001}.blog-viewer-stage[data-zoomed] img{max-width:none;max-height:none;width:auto;height:auto}.blog-image-viewer>p{font-size:12px;color:var(--muted);line-height:1.6;padding:13px 20px}.blog-image-viewer:has(img:not([src])) .blog-viewer-stage{visibility:hidden}
@media(min-width:1240px){.blog-paper-before{width:178px}.blog-paper-after{width:220px}}
@media(max-width:1120px){.blog-papers{gap:12px}.blog-paper-before{width:137px}.blog-paper-after{width:185px}.blog-comparison-arrow{width:20px}.blog-hero-comparison{padding-inline:15px}.blog-article-layout{gap:36px;grid-template-columns:164px minmax(0,1fr)}.blog-quick-path a{padding-inline:12px;gap:9px}.blog-quick-path .icon{display:none}.blog-closing{align-items:flex-start;flex-direction:column;gap:22px}}
@media(max-width:900px){.blog-hero{grid-template-columns:1fr 1fr;gap:25px}.blog-hero h1{font-size:51px}.blog-paper-before{width:110px}.blog-paper-after{width:150px}.blog-papers{gap:10px}.blog-comparison-label{font-size:8px;letter-spacing:1px}.blog-paper-label{font-size:9px}.blog-hero-comparison figcaption{font-size:9px}.blog-article-layout{grid-template-columns:1fr;gap:0}.blog-sidebar{display:none}.blog-card:only-child .blog-card-copy{padding:32px}.blog-card:only-child h3{font-size:30px}}
@media(max-width:760px){.blog-hero{grid-template-columns:1fr;gap:32px;padding-top:32px}.blog-hero h1{font-size:60px}.blog-hero-description{max-width:520px}.blog-hero-comparison{padding:26px 20px;max-width:520px;width:100%;justify-self:center}.blog-papers{gap:22px}.blog-paper-before{width:163px}.blog-paper-after{width:220px}.blog-comparison-label{font-size:9px}.blog-paper-label{font-size:11px}.blog-comparison-arrow{width:25px}.blog-quick-path{grid-template-columns:1fr 1fr;gap:14px 0}.blog-quick-path a:nth-child(2){border:0}.blog-quick-path a:nth-child(3){padding-inline-start:0}.blog-card:only-child .blog-card-copy{padding:28px}.blog-index-heading{padding:52px 0 42px}.blog-sort{gap:6px;padding-inline:12px 8px}.blog-card h3{font-size:25px}.blog-card-copy{padding:25px}}
@media(max-width:600px){.blog{width:calc(100% - 40px);padding-bottom:48px}.blog-breadcrumbs{font-size:10px;margin-top:23px;gap:7px}.blog-hero{padding:29px 0 31px;gap:29px}.blog-eyebrow{font-size:9px;letter-spacing:1.4px}.blog-hero h1{font-size:53px;letter-spacing:-2px;margin:17px 0}.blog-hero-lead{font-size:18px}.blog-hero-description{font-size:15px;line-height:1.8}.blog-byline{font-size:11px;margin-top:18px!important}.blog-hero-copy>.blog-button{margin-top:22px}.blog-button{min-height:48px;font-size:13px}.blog-hero-comparison{padding:23px 13px 19px;border-radius:18px}.blog-comparison-label{margin-bottom:20px;font-size:8px;letter-spacing:1px}.blog-papers{gap:13px}.blog-paper-before{width:108px}.blog-paper-after{width:150px}.blog-paper-label{font-size:9px}.blog-comparison-arrow{width:18px}.blog-hero-comparison figcaption{margin-top:22px;font-size:9px}.blog-quick-path{padding-block:17px;gap:11px 0}.blog-quick-path a{font-size:11px;padding:4px 12px;gap:8px}.blog-quick-path a>span{font-size:10px}.blog-quick-path small{font-size:9px}.blog-article-layout{padding-top:29px}.blog-article p{font-size:15px;line-height:1.85}.blog-step{margin-top:38px}.blog-step-heading{gap:12px;margin-bottom:15px}.blog-step h2{font-size:22px;letter-spacing:-.4px}.blog-step-number{width:30px;height:30px;border-radius:9px;font-size:11px}.blog-inline-tip{padding:14px 15px}.blog-inline-tip p{font-size:13px}.blog-scope-cards{grid-template-columns:1fr;gap:13px;margin-top:20px}.blog-scope-option{padding:19px 17px}.blog-scope-option p,.blog-adjustment-tips p{font-size:13px}.blog-example-margins{padding:17px 0}.blog-example-margins dd{font-size:22px}.blog-adjustment-tips{grid-template-columns:1fr;gap:20px}.blog-download-receipt{padding:18px 15px;gap:12px}.blog-download-receipt strong{font-size:13px}.blog-download-receipt p{font-size:11px}.blog-download-receipt p>span{margin-inline:3px}.blog-important-note{padding:19px 17px;gap:12px;margin-top:34px}.blog-important-note>svg{width:20px;height:20px}.blog-important-note h2{font-size:15px}.blog-important-note p{font-size:12px}.blog-questions{margin-top:36px}.blog-questions h2{font-size:25px;margin-bottom:15px}.blog-questions summary{font-size:14px;gap:15px}.blog-questions details p{font-size:14px;padding-inline-end:17px}.blog-closing{margin-top:36px;padding-top:30px;gap:23px}.blog-closing h2{font-size:25px}.blog-closing p{font-size:13px}.blog-index-heading{padding:42px 0 38px;text-align:start}.blog-index-heading .blog-eyebrow{justify-content:flex-start}.blog-index-heading h1{font-size:42px;letter-spacing:-1.6px;margin:19px 0}.blog-index-heading>p:last-child{font-size:15px}.blog-library-heading{margin-bottom:16px}.blog-library-heading h2{font-size:20px}.blog-finder{gap:12px}.blog-search{flex-basis:100%;min-height:50px}.blog-sort{min-height:45px;margin-inline-start:auto}.blog-sort select{font-size:12px}.blog-filters{gap:7px;padding:0;margin-bottom:7px}.blog-filters button{padding:7px 12px;font-size:11px;min-height:36px}.blog-posts{grid-template-columns:1fr}.blog-card:only-child{display:block;min-height:0}.blog-card-art,.blog-card:only-child .blog-card-art{min-height:0;padding:18px}.blog-card-art img,.blog-card:only-child img{width:240px;max-width:90%}.blog-card:only-child .blog-card-copy,.blog-card-copy{padding:26px}.blog-card:only-child h3,.blog-card h3{font-size:28px}.blog-card-copy>p{font-size:14px}.blog-card-meta{font-size:10px}.blog-card-byline{font-size:10px;gap:5px}.blog-card-link{margin-top:22px}.blog-empty{padding:38px 20px}.blog-viewer-toolbar{padding:10px 12px;gap:8px}.blog-viewer-toolbar h2{font-size:12px}.blog-viewer-toolbar button{font-size:11px;padding:5px 9px}.blog-viewer-stage{padding:9px}.blog-image-viewer>p{font-size:11px}.blog-image-viewer{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}}
@media(max-width:370px){.blog{width:calc(100% - 32px)}.blog-paper-before{width:90px}.blog-paper-after{width:118px}.blog-papers{gap:8px}.blog-comparison-arrow{width:16px}.blog-paper-label{font-size:8px}.blog-index-heading h1{font-size:37px}.blog-hero h1{font-size:48px}.blog-card:only-child .blog-card-copy{padding:22px}.blog-download-receipt p{font-size:10px}.blog-quick-path small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.blog *{scroll-behavior:auto!important;transition:none!important}}
.blog-comparison-pages .blog-paper{width:163px}.blog-comparison-pages figcaption,.blog-comparison-sequence figcaption{text-align:center;line-height:1.8}.blog-comparison-sequence .blog-papers{flex-direction:column;gap:12px}.blog-comparison-sequence .blog-paper{width:calc(350px * var(--blog-sequence-ratio));max-width:100%}.blog-comparison-sequence .blog-paper-example{width:100%;gap:8px}.blog-comparison-sequence .blog-comparison-arrow{transform:rotate(90deg);margin:0;width:22px;height:16px}.blog-comparison-sequence .blog-comparison-label{margin-bottom:18px}.blog-comparison-sequence figcaption{margin-top:18px}
@media(min-width:1240px){.blog-comparison-pages .blog-paper{width:178px}}
@media(max-width:1120px){.blog-comparison-pages .blog-paper{width:137px}}
@media(max-width:900px){.blog-comparison-pages .blog-paper{width:110px}}
@media(max-width:760px){.blog-comparison-pages .blog-paper{width:163px}}
@media(max-width:600px){.blog-comparison-pages .blog-paper{width:108px}.blog-comparison-sequence .blog-paper{width:calc(290px * var(--blog-sequence-ratio))}}
@media(max-width:370px){.blog-comparison-pages .blog-paper{width:90px}}
@media(min-width:761px){.blog-quick-path-many{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}.blog-quick-path-many a:nth-child(3n){border-inline-end:0;padding-inline-end:0}.blog-quick-path-many a:nth-child(3n+1){padding-inline-start:0}}
@media(max-width:760px){.blog-quick-path-many a:nth-child(2n){border-inline-end:0;padding-inline-end:0}.blog-quick-path-many a:nth-child(2n+1){padding-inline-start:0}}
@media print{.blog-page .site-header,.blog-page .site-footer,.blog-sidebar,.blog-button,.blog-image-viewer,.blog-breadcrumbs,.blog-quick-path{display:none!important}.blog{width:100%;padding:0}.blog-hero{padding-top:0;grid-template-columns:1fr 1fr}.blog-hero h1{font-size:44px}.blog-article-layout{display:block}.blog-step,.blog-hero-comparison{break-inside:avoid}.blog-questions details::details-content{content-visibility:visible;height:auto}.blog-questions details p{display:block}.blog-article p{font-size:11pt}.blog-step{margin-top:25px}}
.blog-pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:34px}.blog-pagination[hidden]{display:none}.blog-pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:44px;padding:8px 13px;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:13px;text-decoration:none}.blog-pagination a:hover{color:var(--accent);border-color:currentColor}.blog-pagination a[aria-current]{background:var(--accent);border-color:var(--accent);color:#fff}.blog-pagination a:focus-visible{outline:3px solid var(--accent);outline-offset:-2px}@media(max-width:600px){.blog-pagination{gap:6px}.blog-pagination a{padding:7px 10px;min-width:38px;font-size:12px}}
.blog-example-facts{list-style:none;margin:10px 0 0;padding:9px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:10px;line-height:1.8;text-align:start;max-width:100%}.blog-example-facts li{margin:2px 0;overflow-wrap:anywhere}.blog-example-facts li:first-child{font-weight:700;color:var(--accent)}

/* Copyable source examples remain scrollable inside the article column. */
.blog-source-code{max-width:100%;overflow-x:auto;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--canvas);color:var(--blog-body);font-size:14px;line-height:1.7;text-align:left;unicode-bidi:isolate;white-space:pre}.blog-source-code code{font:inherit}.blog-article{min-width:0}

/* Keyboard input is selectable HTML; only the verified output is an image. */
.blog-code-comparison{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px}
.blog-code-input{display:flex;flex-direction:column;align-items:center;gap:11px;width:100%;min-width:0;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--surface);text-align:center}
.blog-code-input>.blog-paper-label,.blog-output-example>.blog-paper-label{font-size:11px;font-weight:650;color:var(--muted)}
.blog-code-input code{font-family:var(--font-body);font-size:25px;line-height:1.6;color:var(--blog-accent);overflow-wrap:anywhere;unicode-bidi:isolate}
.blog-code-input small{font-size:11px;line-height:1.6;color:var(--muted);max-width:360px}
.blog-code-input ol{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 18px;list-style:none;counter-reset:code-step;margin:0;padding:0}
.blog-code-input li{display:flex;align-items:center;gap:7px;counter-increment:code-step}
.blog-code-input li:before{content:counter(code-step);display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--canvas);color:var(--muted);font-size:10px}
.blog-code-input li code{font-size:22px}
.blog-code-comparison>.blog-comparison-arrow{display:grid;place-items:center;width:24px;height:24px;margin:0;transform:rotate(90deg)}
.blog-code-comparison>.blog-comparison-arrow .icon{width:24px;height:24px}
.blog-output-example{display:flex;flex-direction:column;align-items:center;gap:11px;width:100%;min-width:0}
.blog-output-example .blog-paper{width:min(100%,300px);border:1px solid var(--line);border-radius:11px}
.blog-output-pinyin .blog-paper{width:min(100%,240px)}
.blog-output-cantonese .blog-paper{width:min(100%,152px)}
.blog-output-cangjie .blog-paper{width:min(100%,92px)}
.blog-code-comparison+.blog-comparison-scale{margin-top:15px}
.blog-hero-comparison figcaption{text-align:center;line-height:1.75}
.blog-card-art>img{display:block;height:auto;object-fit:contain}
.blog-card-art>img:hover{transform:translateY(-4px)}
.blog :is(h1,h2,h3){overflow-wrap:break-word}
.blog-hero-copy,.blog-card-copy{min-width:0}
.blog :is(button,input,select,summary){scroll-margin-top:20px}
.blog-viewer-toolbar button{min-width:44px;min-height:44px}
.blog-viewer-toolbar #blog-viewer-close{padding:9px}
@media(max-width:600px){.blog-code-input{padding:17px 12px}.blog-code-input code{font-size:23px}.blog-code-input li code{font-size:20px}.blog-code-input ol{gap:5px 12px}.blog-code-comparison{gap:13px}.blog-hero h1{font-size:clamp(37px,10vw,53px)}.blog-filters button{min-height:44px}.blog-search button{min-width:36px;min-height:36px}.blog-quick-path a{min-height:48px}}
@media(prefers-reduced-motion:reduce){.blog-card-art>img:hover{transform:none}}
.blog-article :is(p,li) a{color:var(--blog-accent);text-decoration:underline;text-underline-offset:3px}
.blog-inline-tip>span{flex:none;display:grid;place-items:center}
.blog-inline-tip>span>.icon{width:20px;height:20px}
.blog-code-input small[lang^="zh"]{font-size:18px;font-weight:600;color:var(--ink);letter-spacing:2px}

/* Keep a Zhuyin syllable together while allowing the reading to wrap. */
.blog-code-input code>span{white-space:nowrap}

.blog-hero-comparison figcaption{display:block}

/* Practice examples use the same clear text feedback as the learning tools. */
.blog-code-input[data-outcome="correct"] code{color:#17683a}
.blog-code-input[data-outcome="incorrect"] code{color:#c52237}
:root[data-appearance="dark"] .blog-code-input[data-outcome="correct"] code{color:#9ce3b5}
:root[data-appearance="dark"] .blog-code-input[data-outcome="incorrect"] code{color:#ff9ca6}

/* Arabic text keeps connected letterforms and native reading order. */
.blog[dir="rtl"] :is(h1,h2,h3,.blog-eyebrow,.blog-comparison-label,.blog-sidebar-label){letter-spacing:0}
.blog[dir="rtl"] .blog-hero h1{font-size:clamp(34px,4vw,52px);line-height:1.65}
.blog[dir="rtl"] .blog-index-heading h1{line-height:1.65}
.blog[dir="rtl"] .blog-hero h1 i{display:none}
.blog[dir="rtl"] .blog-quick-path .icon{transform:rotate(180deg)}
.blog[dir="rtl"] .blog-back-link .icon{transform:none}
.blog[dir="rtl"] .blog-button{padding-inline:21px 13px}
.blog[dir="rtl"] .blog-inline-tip{border-radius:8px 0 0 8px}
.blog[dir="rtl"] .blog-questions details p{padding-inline:0 30px}
.blog[dir="rtl"] .blog-paper-label{white-space:normal;text-align:center;line-height:1.8}
.blog[dir="rtl"] :is(code,kbd,pre,[lang^="zh"],[lang^="yue"]){direction:ltr;unicode-bidi:isolate}
.blog[dir="rtl"] .blog-code-input code{display:inline-block}
.blog[dir="rtl"] .blog-code-input ol{direction:ltr}
.blog[dir="rtl"] :is(.blog-card h3,.blog-related h3,.blog-step h2,.blog-closing h2){line-height:1.75}
@media(max-width:600px){.blog[dir="rtl"] .blog-hero h1{font-size:clamp(30px,8.2vw,43px)}.blog[dir="rtl"] .blog-index-heading h1{font-size:34px}.blog[dir="rtl"] .blog-card h3{font-size:24px}.blog[dir="rtl"] .blog-questions details p{padding-inline-end:17px}}

.blog-native-example{display:inline-block;white-space:nowrap;direction:ltr;unicode-bidi:isolate}

/* Keyboard tutorials use real exported text, with input instructions in HTML. */
.blog-hero h1 { font-size:clamp(36px,4.5vw,55px); line-height:1.12; letter-spacing:-1.5px; }
.blog-typing-comparison .blog-output-example .blog-paper { display:block; width:min(100%,var(--example-width)); background:#fff; }
.blog-typing-comparison .blog-output-example img { display:block; width:100%; height:auto; }
.blog-typing-comparison .blog-code-input ol { gap:8px; align-items:center; }
.blog-typing-comparison kbd { font:550 14px/1.6 var(--font-body); padding:5px 8px; background:var(--canvas); border:1px solid var(--line); border-bottom-width:3px; border-radius:7px; }
.blog-typing-comparison figcaption { display:block; margin-top:18px; font-size:12px; line-height:1.8; color:var(--muted); }
.blog-typing-settings { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 22px; padding:14px 0 0; margin:14px 0 0; border-top:1px solid var(--line); font-size:11px; }
.blog-typing-settings div { text-align:center; }.blog-typing-settings dt { color:var(--muted); }.blog-typing-settings dd { margin:3px 0 0; color:var(--ink); }
.blog-practice-result { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:20px; padding:18px 22px; border:1px solid var(--line); background:var(--canvas); border-radius:14px; }
.blog-practice-result>span { font-size:12px; color:var(--muted); }.blog-practice-result>bdi { font:28px/1.6 Arial,"Nirmala UI","Microsoft JhengHei","Malgun Gothic",sans-serif; overflow-wrap:anywhere; }
.blog-typing-tips { margin-top:42px; }.blog-typing-tips>h2 { font-size:28px; line-height:1.4; margin-bottom:18px; }
.blog .blog-download-receipt .icon { width:19px; height:19px; }
@media(max-width:600px) { .blog-hero h1 { font-size:clamp(34px,9vw,47px); }.blog-typing-tips>h2 { font-size:24px; }.blog-practice-result { padding:16px; } }