@layer blog{.blog-index-hero{grid-template-columns:minmax(0,1.05fr) minmax(26rem,.95fr);align-items:center;gap:clamp(3rem,8vw,8rem);min-height:43rem;padding-block:9rem 5.5rem;display:grid}.blog-index-copy h1{letter-spacing:-.067em;max-width:47rem;margin-top:1.75rem;font-size:clamp(3.4rem,7vw,6.6rem);font-weight:750;line-height:1.04}.blog-index-copy h1 span,.blog-index-copy h1 em{display:block}.blog-index-copy h1 em{color:var(--color-accent);font-style:normal}:lang(zh-HK) .blog-index-copy h1 span,:lang(zh-HK) .blog-index-copy h1 em{white-space:nowrap}.blog-index-copy>p:last-child{max-width:39rem;color:var(--color-ink-soft);text-wrap:pretty;margin-top:2.25rem;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.75}.blog-index-diagram{width:100%;overflow:visible}.blog-index-diagram .diagram-grid{fill:none;stroke:var(--site-hairline);stroke-width:1px}.blog-index-diagram .diagram-route{fill:none;stroke:var(--color-accent);stroke-dasharray:1 0;stroke-linecap:round;stroke-width:1.5px}.blog-index-diagram circle{fill:var(--color-canvas);stroke:var(--color-accent);stroke-width:1.5px}.blog-index-diagram .diagram-ticks{fill:none;stroke:var(--color-accent);stroke-width:1px}.blog-featured,.blog-topics,.article-related{border-top:.0625rem solid var(--site-hairline);padding-block:clamp(5.5rem,9vw,8.5rem)}.blog-topic-nav{border-top:.0625rem solid var(--site-hairline-strong);border-bottom:.0625rem solid var(--site-hairline-strong)}.blog-topic-nav ul{grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;display:grid}.blog-topic-nav li+li{border-left:.0625rem solid var(--site-hairline)}.blog-topic-nav a{min-height:10rem;transition:background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);flex-direction:column;padding:1.35rem 1.4rem 1.25rem;display:flex;position:relative;overflow:clip}.blog-topic-nav a:before{background:var(--color-accent);content:"";transform-origin:bottom;width:.125rem;transition:transform var(--duration-base) var(--ease-out);position:absolute;inset:0 auto 0 0;transform:scaleY(0)}.blog-topic-nav a:hover{background:var(--color-surface-subtle)}.blog-topic-nav a:hover:before,.blog-topic-nav a:focus-visible:before{transform-origin:top;transform:scaleY(1)}.blog-topic-number{color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;font-weight:500}.blog-topic-nav strong{letter-spacing:-.025em;text-wrap:balance;transition:color var(--duration-fast) var(--ease-out);margin-block:1.65rem auto;font-size:clamp(1.02rem,1.4vw,1.22rem);font-weight:690;line-height:1.28}.blog-topic-nav a:hover strong,.blog-topic-nav a:focus-visible strong{color:var(--color-accent)}.blog-topic-meta{justify-content:space-between;align-items:center;gap:1rem;display:flex}.blog-topic-meta small{color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em}.blog-topic-arrow{border:.0625rem solid var(--site-hairline-strong);width:1.75rem;height:1.75rem;color:var(--color-accent);transition:border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);border-radius:50%;place-items:center;font-size:.85rem;display:grid}.blog-topic-nav a:hover .blog-topic-arrow,.blog-topic-nav a:focus-visible .blog-topic-arrow{border-color:var(--color-accent);transform:translateY(.2rem)}.blog-topic-groups{border-top:.0625rem solid var(--site-hairline-strong);margin-top:clamp(4.5rem,8vw,7rem)}.blog-topic-group{border-bottom:.0625rem solid var(--site-hairline-strong);grid-template-columns:minmax(10rem,.26fr) minmax(0,.74fr);gap:clamp(2rem,6vw,6rem);padding-block:clamp(3rem,6vw,5rem);scroll-margin-top:6.5rem;display:grid}.blog-topic-group>header{align-self:start}.blog-topic-group>header p{color:var(--color-accent);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em}.blog-topic-group>header h3{letter-spacing:-.045em;text-wrap:balance;margin-top:1rem;font-size:clamp(1.65rem,3vw,2.55rem);font-weight:720;line-height:1.16}.blog-topic-group .blog-list{border-top:0}.blog-topic-group .blog-list .blog-card:first-child{padding-top:0}.blog-section-head{grid-template-columns:minmax(10rem,.38fr) minmax(0,1fr);align-items:end;gap:2rem;margin-bottom:clamp(2.75rem,5vw,4.5rem);display:grid}.blog-section-head h2{letter-spacing:-.055em;scroll-margin-top:7rem;font-size:clamp(2.5rem,4.8vw,4.3rem);font-weight:730;line-height:1.1}.blog-featured-grid{grid-template-columns:minmax(0,1.34fr) minmax(18rem,.66fr);gap:0 2rem;display:grid}.blog-featured-grid .blog-card:first-child{border-right:.0625rem solid var(--site-hairline);grid-row:span 2;padding-right:2rem}.blog-featured-grid .blog-card:nth-child(2){padding-bottom:2rem}.blog-featured-grid .blog-card:nth-child(3){border-top:.0625rem solid var(--site-hairline);padding-top:2rem}.blog-card{min-width:0}.blog-card-image{aspect-ratio:16/9;border:.0625rem solid var(--site-hairline);background:var(--color-surface-subtle);border-radius:.9rem;display:block;position:relative;overflow:clip}.blog-card-image:after{border-radius:inherit;content:"";transition:border-color var(--duration-base) var(--ease-out);border:.0625rem solid #0000;position:absolute;inset:0}.blog-card-image img{object-fit:cover;filter:saturate(.74)contrast(.97);width:100%;height:100%;transition:filter .45s var(--ease-out), transform .65s var(--ease-out)}.blog-card-image>span{z-index:2;width:2.25rem;height:2.25rem;color:var(--color-ink);backdrop-filter:blur(.5rem);transition:background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);background:#fefefedb;border:.0625rem solid #ffffff8a;border-radius:50%;place-items:center;display:grid;position:absolute;top:.8rem;right:.8rem}.blog-card:hover .blog-card-image img{filter:saturate(.96)contrast();transform:scale(1.018)}.blog-card:hover .blog-card-image:after{border-color:#6002db5c}.blog-card:hover .blog-card-image>span{background:var(--color-accent);color:#fff;transform:rotate(8deg)}.blog-card-copy{padding-top:1.3rem}.blog-card-meta{color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.055em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:1rem;display:flex}.blog-card-meta span{color:var(--color-accent)}.blog-card :is(h2,h3,h4){letter-spacing:-.035em;text-wrap:balance;margin-top:.8rem;font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:700;line-height:1.32}.blog-card :is(h2,h3,h4) a{transition:color var(--duration-fast) var(--ease-out)}.blog-card :is(h2,h3,h4) a:hover{color:var(--color-accent)}.blog-card-copy>p:not(.blog-card-meta){color:var(--color-muted);text-wrap:pretty;margin-top:.8rem;font-size:.98rem;line-height:1.7}.blog-card-link{border-bottom:.0625rem solid var(--site-hairline-strong);font-size:var(--text-sm);align-items:center;gap:.65rem;margin-top:1.1rem;padding-bottom:.25rem;font-weight:650;display:inline-flex}.blog-card-link span{color:var(--color-accent);transition:transform var(--duration-fast) var(--ease-out)}.blog-card-link:hover span{transform:translate(.25rem)}.blog-card-large :is(h2,h3,h4){max-width:45rem;font-size:clamp(2rem,3.35vw,3.25rem);line-height:1.17}.blog-list{border-top:.0625rem solid var(--site-hairline-strong)}.blog-list .blog-card{border-bottom:.0625rem solid var(--site-hairline);grid-template-columns:minmax(15rem,.72fr) minmax(0,1.28fr);gap:clamp(1.5rem,4vw,4rem);padding-block:2rem;display:grid}.blog-list .blog-card-image{aspect-ratio:16/8.5}.blog-list .blog-card-copy{flex-direction:column;padding-top:0;display:flex}.blog-list .blog-card :is(h2,h3,h4){max-width:52rem;font-size:clamp(1.65rem,3vw,2.65rem)}.blog-list .blog-card-link{align-self:flex-start;margin-top:auto;padding-top:1.25rem}.article-page{padding-top:8.5rem}.article-header{padding-bottom:clamp(4.5rem,8vw,7rem)}.article-back{color:var(--color-muted);font-size:var(--text-sm);align-items:center;gap:.65rem;font-weight:650;display:inline-flex}.article-back span{color:var(--color-accent);transition:transform var(--duration-fast) var(--ease-out)}.article-back:hover span{transform:translate(-.25rem)}.article-heading{text-align:center;justify-items:center;max-width:63rem;margin:clamp(3rem,7vw,6.25rem) auto 0;display:grid}.article-kicker,.article-byline{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.075em;text-transform:uppercase}.article-kicker{color:var(--color-accent)}.article-heading h1{letter-spacing:-.06em;text-wrap:balance;margin-top:1.5rem;font-size:clamp(2.8rem,6vw,5.75rem);font-weight:750;line-height:1.09}.article-deck{max-width:48rem;color:var(--color-ink-soft);text-wrap:pretty;margin-top:1.75rem;font-size:clamp(1.05rem,1.55vw,1.25rem);line-height:1.75}.article-byline{color:var(--color-muted);align-items:center;gap:.75rem;margin-top:1.75rem;display:flex}.article-byline strong{color:var(--color-ink)}.article-byline span{background:var(--color-accent);width:1.5rem;height:.0625rem}.article-cover{aspect-ratio:16/8.6;border:.0625rem solid var(--site-hairline);background:var(--color-surface-subtle);border-radius:1.1rem;margin-top:clamp(3.5rem,7vw,6rem);position:relative;overflow:clip}.article-cover img{object-fit:cover;filter:saturate(.8)contrast(.98);width:100%;height:100%}.article-cover>span{border-top:.0625rem solid var(--color-accent);border-left:.0625rem solid var(--color-accent);width:8rem;height:2rem;position:absolute;top:-.0625rem;left:clamp(2rem,9vw,8rem)}.article-layout{border-top:.0625rem solid var(--site-hairline);grid-template-columns:minmax(13rem,.34fr) minmax(0,.66fr);align-items:start;gap:clamp(3rem,8vw,8rem);padding-block:clamp(5rem,9vw,8rem);display:grid}.article-toc{padding-top:.2rem;position:sticky;top:6.75rem}.article-toc>p{color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:650}.article-toc ol{border-top:.0625rem solid var(--site-hairline-strong);margin-top:1rem;list-style:none}.article-toc li{border-bottom:.0625rem solid var(--site-hairline)}.article-toc ol a{color:var(--color-muted);transition:color var(--duration-fast) var(--ease-out);grid-template-columns:1.5rem minmax(0,1fr);gap:.75rem;padding-block:.85rem;font-size:.82rem;line-height:1.45;display:grid}.article-toc ol a span{color:var(--color-accent);font-family:var(--font-mono);font-size:var(--text-xs)}.article-toc ol a:hover{color:var(--color-ink)}.article-toc-card{border:.0625rem solid var(--site-hairline-strong);background:var(--color-surface-subtle);border-radius:.85rem;gap:.7rem;margin-top:1.5rem;padding:1.15rem;display:grid}.article-toc-card small{color:var(--color-accent);font-family:var(--font-mono);letter-spacing:.07em;font-size:.68rem;font-weight:650}.article-toc-card strong{color:var(--color-ink);text-wrap:balance;font-size:.92rem;font-weight:700;line-height:1.38}.article-toc-card .button{justify-content:center;width:100%;margin-top:.2rem}.article-toc-sublink{color:var(--color-muted);transition:color var(--duration-fast) var(--ease-out);font-size:.78rem;font-weight:600;line-height:1.4}.article-toc-sublink:hover{color:var(--color-accent)}.article-spotlight{border:.0625rem solid var(--site-hairline-strong);border-left:.2rem solid var(--color-accent);background:var(--color-surface-subtle);border-radius:.85rem;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.5rem;margin-bottom:2.5rem;padding:1.35rem 1.5rem;display:grid}.article-spotlight-copy{gap:.35rem;display:grid}.article-spotlight-copy small{color:var(--color-accent);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;font-weight:650}.article-spotlight-copy strong{color:var(--color-ink);font-size:1.06rem;font-weight:720;line-height:1.35}.article-spotlight-copy p{color:var(--color-ink-soft);margin:0;font-size:.92rem;line-height:1.6}.article-spotlight-actions{flex-direction:column;align-items:stretch;gap:.55rem;min-width:11.5rem;display:flex}.article-spotlight-actions .button{white-space:nowrap;justify-content:center}.article-spotlight a.article-spotlight-link{text-align:center;color:var(--color-accent);font-size:.82rem;font-weight:650;text-decoration:none}.article-spotlight a.article-spotlight-link:hover{text-decoration:underline}@media (width<=44rem){.article-spotlight{grid-template-columns:1fr;padding:1.2rem}.article-spotlight-actions{min-width:0}}.article-prose{width:min(100%,47rem);min-width:0}.article-prose>:first-child{margin-top:0}.article-prose :where(p,li){color:var(--color-ink-soft);font-size:clamp(1.02rem,1.3vw,1.1rem);line-height:1.86}.article-prose p+p{margin-top:1.15rem}.article-prose :where(h2,h3){text-wrap:balance;scroll-margin-top:7rem}.article-prose h2{border-top:.0625rem solid var(--site-hairline-strong);letter-spacing:-.045em;margin-top:clamp(3.75rem,8vw,6rem);padding-top:1.2rem;font-size:clamp(1.85rem,3.2vw,2.75rem);font-weight:720;line-height:1.28}.article-prose h2:before{background:var(--color-accent);content:"";width:2.75rem;height:.125rem;margin-top:-1.3rem;margin-bottom:1.3rem;display:block}.article-prose h3{letter-spacing:-.025em;margin-top:2.5rem;font-size:clamp(1.3rem,2vw,1.65rem);font-weight:700;line-height:1.42}.article-prose :where(h2,h3)+p,.article-prose p+:where(ul,ol),.article-prose :where(ul,ol)+p,.article-prose :where(h2,h3)+:where(ul,ol){margin-top:1rem}.article-prose :where(ul,ol){gap:.55rem;margin-left:1.35rem;display:grid}.article-prose li{padding-left:.25rem}.article-prose li::marker{color:var(--color-accent);font-family:var(--font-mono)}.article-prose strong{color:var(--color-ink);font-weight:700}.article-prose em{font-style:italic}.article-prose a:not(.button){color:var(--color-accent);text-underline-offset:.2em;text-decoration:underline .0625rem #6002db47}.article-prose a:not(.button):hover{text-decoration-color:currentColor}.article-prose blockquote{border-left:.125rem solid var(--color-accent);margin-top:1.5rem;padding:.7rem 0 .7rem 1.5rem}.article-prose blockquote p{color:var(--color-ink);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:600;line-height:1.55}.article-prose table{border-collapse:collapse;width:100%;margin-top:1.5rem;font-size:.93rem;line-height:1.6;display:table}.article-prose th,.article-prose td{border-bottom:.0625rem solid var(--site-hairline);text-align:left;vertical-align:top;padding:.8rem .75rem}.article-prose th{border-top:.0625rem solid var(--site-hairline-strong);color:var(--color-ink);font-size:.82rem;font-weight:700}.article-prose td{color:var(--color-ink-soft)}.article-demo{background:var(--color-dark);color:var(--color-on-dark);border-radius:1rem;margin-top:clamp(4.5rem,9vw,7rem);padding:clamp(2rem,5vw,3.5rem)}.article-demo>p{color:#ffffff8a;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em}.article-demo h2{color:#fff;border:0;margin-top:1.3rem;padding:0;font-size:clamp(1.8rem,3.5vw,2.75rem)}.article-demo h2:before{display:none}.article-demo>div{border-top:.0625rem solid #ffffff29;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2rem;margin-top:2.5rem;padding-top:1.5rem;display:grid}.article-demo>div>span{color:#ffffffad;font-size:.95rem;line-height:1.7}.article-demo .button{white-space:nowrap}.article-demo .button b{font-weight:400}.article-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,5rem);display:grid}@media (prefers-reduced-motion:no-preference){.blog-index-diagram .diagram-route{stroke-dasharray:7 9;animation:18s linear infinite blog-route}.blog-index-diagram circle{transform-box:fill-box;transform-origin:50%;animation:3.5s ease-in-out infinite blog-node}.blog-index-diagram circle:nth-of-type(2){animation-delay:-1.2s}.blog-index-diagram circle:nth-of-type(3){animation-delay:-2.4s}}@keyframes blog-route{to{stroke-dashoffset:-160px}}@keyframes blog-node{50%{opacity:.55;transform:scale(1.4)}}@media (width<=68rem){.blog-index-hero{grid-template-columns:1fr 22rem;gap:3rem;min-height:auto;padding-block:10rem 5rem}.blog-featured-grid{grid-template-columns:1fr .8fr}.article-layout{grid-template-columns:12rem minmax(0,1fr);gap:3rem}.blog-topic-nav ul{grid-template-columns:repeat(3,minmax(0,1fr))}.blog-topic-nav li:nth-child(4){border-left:0}.blog-topic-nav li:nth-child(n+4){border-top:.0625rem solid var(--site-hairline)}}@media (width<=52rem){.blog-index-hero{grid-template-columns:1fr}.blog-index-diagram{width:min(34rem,100%);margin-inline:auto}.blog-featured-grid{grid-template-columns:1fr 1fr}.blog-featured-grid .blog-card:first-child{border-right:0;border-bottom:.0625rem solid var(--site-hairline);grid-area:auto/1/auto/-1;margin-bottom:2rem;padding-bottom:2rem;padding-right:0}.blog-featured-grid .blog-card:nth-child(2){border-right:.0625rem solid var(--site-hairline);padding-right:1.5rem}.blog-featured-grid .blog-card:nth-child(3){border-top:0;padding-top:0;padding-left:1.5rem}.article-layout,.blog-topic-group{grid-template-columns:1fr}.article-toc{display:none}.article-prose{width:min(100%,45rem);margin-inline:auto}}@media (width<=42rem){.blog-index-hero{gap:2.5rem;padding-block:8.75rem 4rem}.blog-index-copy h1{font-size:clamp(3rem,14vw,4.6rem)}:lang(zh-HK) .blog-index-copy h1 span,:lang(zh-HK) .blog-index-copy h1 em{white-space:nowrap}.blog-topic-nav{overscroll-behavior-inline:contain;scroll-snap-type:inline proximity;scrollbar-width:thin;overflow-x:auto}.blog-topic-nav ul{grid-template-columns:repeat(5,10.75rem);width:max-content}.blog-topic-nav li,.blog-topic-nav li:nth-child(4),.blog-topic-nav li:nth-child(n+4){border-top:0;border-left:.0625rem solid var(--site-hairline);scroll-snap-align:start}.blog-topic-nav li:first-child{border-left:0}.blog-topic-nav a{min-height:9.25rem}.blog-topic-groups{margin-top:3.25rem}.blog-section-head{grid-template-columns:1fr;gap:1rem}.blog-featured-grid{display:block}.blog-featured-grid .blog-card{border-bottom:.0625rem solid var(--site-hairline);border-right:0!important;margin:0!important;padding:0 0 2rem!important}.blog-featured-grid .blog-card+.blog-card{padding-top:2rem!important}.blog-list .blog-card{grid-template-columns:1fr;gap:1.2rem}.blog-list .blog-card-link{margin-top:.3rem;padding-top:.5rem}.article-page{padding-top:7.5rem}.article-heading{text-align:left;justify-items:start}.article-heading h1{font-size:clamp(2.65rem,12.5vw,4.1rem)}.article-byline{flex-wrap:wrap}.article-cover{aspect-ratio:4/3}.article-layout{padding-top:4rem}.article-prose table{overscroll-behavior-inline:contain;max-width:100%;display:block;overflow-x:auto}.article-demo>div{grid-template-columns:1fr}.article-demo .button{width:100%}.article-related-grid{grid-template-columns:1fr}}}