@layer components{.blog-article-page{--blog-article-gutter:0rem;--blog-article-bleed:1.25rem;--blog-article-measure:41rem;--blog-article-hang:0rem;--blog-article-text:var(--blog-title,var(--color-text-strong));--blog-article-body:var(--color-text-body);--blog-article-quiet:var(--color-text-muted);--blog-article-faint:color-mix(in oklab, var(--color-text-muted) 72%, var(--color-text-subtle));--blog-article-rule:var(--color-line-divider);--blog-article-ease:var(--blog-ease,cubic-bezier(.25, .1, .25, 1));--blog-article-base:var(--blog-base,.36s);--blog-article-slow:var(--blog-slow,.72s);background-image:radial-gradient(130% 100% at 0 -25%,light-dark(#ffffffb3,#ffffff06),#0000 80%);background-repeat:no-repeat;background-size:100% min(110vh,64rem);@media (width>=40rem){--blog-article-gutter:calc(2.5rem - var(--blog-article-bleed));--blog-article-hang:min(2rem, var(--blog-article-bleed))}@media (width>=52.125rem){--blog-article-bleed:1.5rem}@media (width>=64rem){--blog-article-bleed:5rem;--blog-article-gutter:3.5rem}}.blog-article-main{--frame:min(100%, var(--blog-article-measure) + var(--blog-article-bleed) * 2);padding-inline:var(--blog-article-gutter);container:blog-article/inline-size;&>.blog-article-end{max-width:var(--frame);margin-inline-start:max(0px, round(down, (100% - var(--frame)) / 2, 1px))}}.blog-article{grid-template-columns:max(0px, round(down, (100% - var(--frame)) / 2, 1px)) var(--frame) minmax(0, 1fr);display:grid;&>:is(.blog-article-masthead,.blog-article-body){grid-column:2}}.blog-article-body,.blog-article-end{padding-inline:var(--blog-article-bleed)}.blog-article-cover{border-radius:var(--ui-radius-xl);outline:1px solid var(--ui-line-contour);outline-offset:-1px;width:100%;height:auto;margin-top:2rem;display:block}.blog-article-masthead{min-width:0;padding:calc(3.75rem + round(clamp(3rem, 1.5rem + 4vw, 5rem), 1rem)) calc(var(--blog-article-bleed) - var(--blog-article-hang)) round(clamp(2.5rem, 1.75rem + 2vw, 3.5rem), 1rem);grid-row:1;position:relative;@media (width>=48rem) and (height<50rem){padding-top:7.5rem}}@media (width>=64rem){.blog-article-masthead.blog-rails:after{top:4rem;mask-image:linear-gradient(#0000,#000 6rem)}}.blog-article-meta{color:var(--blog-article-quiet);font:var(--ui-weight-medium) var(--ui-text-eyebrow)/1rem var(--font-family-sans);letter-spacing:var(--ui-tracking-eyebrow);text-transform:uppercase;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;margin:0;display:flex}.blog-article-meta>*+:before{color:var(--blog-article-faint);content:"·" / "";margin-right:.75rem}.blog-article-meta time{font-variant-numeric:tabular-nums}.blog-article-title{letter-spacing:-.034em;min-width:0;color:var(--blog-article-text);text-wrap:balance;overflow-wrap:anywhere;margin:1.25rem 0 0;font-size:clamp(1.75rem,1.25rem + 2vw,2.75rem);font-weight:400;line-height:1.12;@media (width<40rem){letter-spacing:-.024em}&:lang(zh){letter-spacing:-.01em;word-break:keep-all;text-spacing-trim:trim-start;text-autospace:normal}}.blog-article-title-line{display:block}.blog-article-dek{max-width:34em;color:var(--blog-article-quiet);text-wrap:balance;margin:1.5rem 0 0;font-size:clamp(1.0625rem,1rem + .25vw,1.125rem);font-style:italic;line-height:1.9;@media (width<40rem){text-wrap:pretty}&:lang(zh){font-style:normal;line-height:1.95}}.blog-article-byline{margin-top:1.75rem}.blog-article-byline-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.blog-article-authors{flex-wrap:wrap;gap:.25rem 1.25rem;margin:0;padding:0;list-style:none;display:flex}.blog-article-author{min-height:2.75rem;color:var(--blog-article-body);transition:color var(--blog-article-base) var(--blog-article-ease);align-items:center;gap:.625rem;font-size:.875rem;text-decoration:none;display:inline-flex;&[href]:hover{color:var(--blog-article-text)}& span{text-underline-offset:.24em;transition:text-decoration-color var(--blog-article-base) var(--blog-article-ease);text-decoration:underline 1px #0000}&[href]:hover span{text-decoration-color:color-mix(in oklab, currentColor 40%, transparent)}&:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:.375rem}}.blog-article-avatar{object-fit:cover;width:1.75rem;height:1.75rem;box-shadow:0 0 0 1px var(--color-line-contour), 0 1px 2px light-dark(oklch(18% 0 none/.08),#00000059);border-radius:50%;margin:0;display:block}@supports (height:calc-size(auto, size)){.blog-article-masthead,.blog-article-body{height:calc-size(auto, round(up, size, 1rem))}}.blog-article-body{grid-row:2;padding-block:round(clamp(2.5rem,1.75rem + 2vw,3.5rem),1rem) round(clamp(3rem,2rem + 3vw,5rem),1rem);@media (width<64rem){border-top:1px solid var(--blog-guide,var(--color-line-subtle))}}.blog-article-prose.ui-prose{--prose-bleed:0rem;min-width:0;@media (width>=40rem){--prose-bleed:var(--blog-article-hang)}&>:first-child{margin-top:0}}.blog-article-contents.ui-toc{display:none}@container blog-article (width>=80rem){.blog-article-contents.ui-toc{--edge:2rem;--air:1.5rem;width:min(17rem, 100% - (var(--edge) - var(--blog-article-gutter)) - 2rem - var(--air));max-height:calc(100dvh - 8.5rem);margin:round(clamp(2.5rem, 1.75rem + 2vw, 3.5rem), 1rem) 0 0 calc(var(--edge) - var(--blog-article-gutter));padding:.5rem 0 var(--ui-space-xl);overscroll-behavior:contain;grid-area:2/1;place-self:start;display:block;position:sticky;top:6.5rem;overflow-y:auto}.blog-article-prose [data-contents-disclosure]{display:none}.blog-article-prose>[data-contents-disclosure]+hr+a[id]:empty+h2,.blog-article-prose>[data-contents-disclosure]+hr+h2,.blog-article-prose>[data-contents-disclosure]+h2{--section-rule:block}}@container blog-article (width<80rem){.blog-article-prose [data-contents-disclosure]{display:block}.blog-article-prose>[data-contents-disclosure]+hr{display:none}}@container blog-article (width>=88rem){.blog-article-contents.ui-toc{--air:2.5rem}}.blog-article-end{padding-top:round(clamp(3rem,2rem + 2.5vw,4.5rem),1rem);padding-bottom:round(clamp(5rem,3rem + 6vw,8rem),1rem);@media (width>=40rem){padding-inline:calc(var(--blog-article-bleed) - var(--blog-article-hang))}@media (width<64rem){border-top:1px solid var(--blog-guide,var(--color-line-subtle))}}@media (width>=64rem){.blog-article-end.blog-rails:after{mask-image:linear-gradient(#000 calc(100% - 7rem),#0000)}}.blog-article-end-title{color:var(--blog-article-quiet);font:var(--ui-weight-medium) var(--ui-text-eyebrow)/1rem var(--font-family-sans);letter-spacing:var(--ui-tracking-eyebrow);text-transform:uppercase;margin:0 0 2.5rem}.blog-article-next{--blog-marks-inset:1rem;width:fit-content;max-width:min(100%,38rem);color:var(--blog-article-text);text-decoration:none;display:grid;&:before{opacity:0;transition:opacity var(--blog-article-slow) var(--blog-article-ease), inset var(--blog-article-base) var(--blog-article-ease)}&:is(:hover,:focus-visible):before{opacity:1;transition-duration:var(--blog-article-base)}&:active{--blog-marks-inset:calc(1rem - 2px)}&:is(:hover,:focus-visible) .blog-article-next-arrow{color:var(--blog-article-text);transition-duration:var(--blog-article-base);translate:4px}&:focus-visible{outline:2px solid #0000;&:before{outline:2px solid var(--blog-article-faint);outline-offset:-2px;background:0 0}}}.blog-article-next-meta{color:var(--blog-article-quiet);font:var(--ui-weight-medium) var(--ui-text-eyebrow)/1rem var(--font-family-sans);letter-spacing:var(--ui-tracking-eyebrow);text-transform:uppercase;flex-wrap:wrap;gap:.25rem .75rem;display:flex}.blog-article-next-meta>*+:before{color:var(--blog-article-faint);content:"·" / "";margin-right:.75rem}.blog-article-next-meta time{font-variant-numeric:tabular-nums}.blog-article-next-title{color:var(--blog-article-text);letter-spacing:-.026em;text-wrap:balance;margin-top:1rem;font-size:clamp(1.5rem,1.25rem + 1vw,2rem);font-weight:400;line-height:1.2;&:lang(zh){letter-spacing:-.01em;word-break:keep-all}}.blog-article-next-title-line:first-child:not(:last-of-type){display:block}.blog-article-next-arrow{vertical-align:-.12em;color:var(--blog-article-faint);transition:translate var(--blog-article-slow) var(--blog-article-ease), color var(--blog-article-slow) var(--blog-article-ease);margin-left:.3em;display:inline-block}.blog-article-next-description{max-width:34em;color:var(--blog-article-quiet);text-wrap:pretty;margin-top:.875rem;font-size:.9375rem;font-style:italic;line-height:1.85;&:lang(zh){font-style:normal;line-height:1.9}}.blog-article-end-links{justify-content:space-between;gap:var(--spacing-sm) var(--spacing-lg);box-shadow:inset 0 1px 0 var(--blog-guide,var(--color-line-subtle));flex-wrap:wrap;margin-top:3.5rem;padding-top:.5rem;display:flex}.blog-article-end-link{align-items:center;gap:var(--spacing-xs);min-width:0;min-height:2.75rem;color:var(--blog-article-quiet);transition:color var(--blog-article-base) var(--blog-article-ease);font-size:.875rem;display:inline-flex;& svg{transition:translate var(--blog-article-base) var(--blog-article-ease);flex:none}&:hover{color:var(--blog-article-text);& svg:first-child{translate:-2px}& svg:last-child:not(:first-child){translate:2px}}&:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:2px}}.blog-article-end-link-label{color:var(--blog-article-quiet);flex:none}.blog-article-end-link-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}@media (prefers-reduced-motion:reduce){.blog-article-page{--blog-article-base:0s;--blog-article-slow:0s}}@media (prefers-contrast:more){.blog-article-page{--blog-article-text:var(--color-text-strong);--blog-article-faint:var(--color-text-body);--blog-article-quiet:var(--color-text-body)}.blog-article-masthead .blog-article-title{-webkit-text-fill-color:currentColor;background-image:none}}@media (forced-colors:active){.blog-article-masthead .blog-article-title{color:canvastext;-webkit-text-fill-color:currentColor;background-image:none}.blog-article-page .blog-article-next:is(:hover,:focus-visible){outline-offset:.75rem;outline:1px solid canvastext}.blog-article-body,.blog-article-end{border-top:1px solid canvastext}}@media print{.blog-article-page{color-scheme:light;background:0 0}.blog-article-contents.ui-toc,.blog-article-end,.blog-article-footer{display:none}.blog-article-main{padding:0}.blog-article{display:block}.blog-article-body{border-top:1px solid #ccc;height:auto;padding:1.5rem 0 0}.blog-article-masthead{height:auto;padding:0 0 1.25rem}.blog-article-masthead .blog-article-title{color:#000;-webkit-text-fill-color:currentColor;background:0 0;margin-right:0;font-size:2rem}.blog-article-byline{margin-top:.75rem}.blog-article-prose{color:#222;& a{color:inherit}}}}@media print{:root:has(.blog-article-page){color-scheme:light}:root:has(.blog-article-page),:root:has(.blog-article-page)>body{background-color:#fff}}@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-5:oklch(96.5% .0011 265);--color-zinc-30:oklch(78% .0025 265);--color-zinc-40:oklch(68.6% .0028 265);--color-zinc-60:oklch(48.6% .003 265);--color-zinc-70:oklch(39.8% .0028 265);--color-zinc-90:oklch(24.6% .0022 265);--color-zinc-95:oklch(19.4% .0019 265);--color-zinc-100:oklch(15% .0016 265);--color-line-divider:light-dark(oklch(0% 0 none/.12),oklch(100% 0 none/.12));--color-line-subtle:light-dark(oklch(0% 0 none/.06),oklch(100% 0 none/.06));--color-text-body:light-dark(var(--color-zinc-70),var(--color-zinc-30));--color-text-strong:light-dark(var(--color-zinc-100),var(--color-white));--color-text-muted:light-dark(var(--color-zinc-60),var(--color-zinc-40));--color-white:oklch(100% 0 none);--font-family-sans:var(--font-sans,ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--spacing-xs:.5rem;--spacing-sm:.75rem;--spacing-lg:1.5rem;--color-text-subtle:var(--ui-text-muted);--color-line-contour:var(--ui-line-contour);--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0),var(--color-zinc-95));--font-sans:"Geist", "Noto Sans TC";--color-focus:light-dark(var(--color-zinc-90),var(--color-zinc-5))}}