@layer components{.code__head{height:36px;font:500 11px var(--ff-mono);color:#8e8e96;letter-spacing:.04em;border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;padding:0 8px 0 14px;display:flex}.code__copy{color:#a1a1aa;height:26px;font:500 11px var(--ff-mono);border-radius:6px;align-items:center;gap:6px;padding:0 8px;display:inline-flex}.code__copy:hover{color:#fff;background:#ffffff12}.code__copy svg{width:13px;height:13px}.longer__icon{background:var(--accent-soft);width:38px;height:38px;color:var(--accent-text);border-radius:11px;flex:none;place-items:center;display:grid}.longer__go{color:var(--muted);transition:transform var(--t) var(--ease-out);margin-left:auto}.longer:hover .longer__go{color:var(--fg);transform:translate(3px)}.post-row{transition:background var(--t);border-radius:18px;grid-template-columns:148px minmax(0,1fr);align-items:center;gap:18px;margin-inline:-12px;padding:12px;display:grid}.post-row:hover{background:var(--surface-hover)}.post-row:hover .post-row__thumb .stamp__cover-inner{transform:scale(1.06)rotate(-1deg)}.post-row__title{font:600 16px/1.35 var(--ff-sans);letter-spacing:-.015em}.post-row__excerpt{color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:4px;font-size:14px;line-height:1.5;display:-webkit-box;overflow:hidden}.post-row__meta{font:500 11px var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:8px;display:flex}.post-row__meta i{background:currentColor;border-radius:50%;width:3px;height:3px}.reactions__label{font:18px/1 var(--ff-hand);color:var(--muted);margin-right:6px}.browser__screen--contain{aspect-ratio:16/9;background:#fff}.browser__screen--contain img{object-fit:contain;object-position:center;padding:4% 6% 0}@media (max-width:720px){.post-row{grid-template-columns:112px minmax(0,1fr);align-items:start;gap:14px}.post-row__excerpt{-webkit-line-clamp:2;font-size:13.5px}}.blog-head .lede{max-width:58ch}.post-row__meta i{background:currentColor;border-radius:50%;flex:none;width:3px;height:3px}.blog-stats__rss{color:var(--accent-text);border-radius:4px;align-items:center;gap:5px;display:inline-flex}.blog-stats__rss:hover{text-underline-offset:3px;text-decoration:underline}.blog-stats__rss svg{width:13px;height:13px}.blog-topics .chips{flex-wrap:wrap;gap:8px;margin-top:0}@media (max-width:480px){.blog-topics .chips{overscroll-behavior-x:contain;scrollbar-width:none;padding:4px var(--gutter,16px);scroll-padding-inline:var(--gutter,16px);flex-wrap:nowrap;margin-block:-4px;overflow-x:auto}.blog-topics .chips[data-fade=end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000)}.blog-topics .chips[data-fade=start]{-webkit-mask-image:linear-gradient(90deg,#0000,#000 28px);mask-image:linear-gradient(90deg,#0000,#000 28px)}.blog-topics .chips[data-fade=both]{-webkit-mask-image:linear-gradient(90deg,#0000,#000 28px calc(100% - 28px),#0000);mask-image:linear-gradient(90deg,#0000,#000 28px calc(100% - 28px),#0000)}.blog-topics .chips::-webkit-scrollbar{display:none}.blog-topics .chip{flex:none}}.blog-topics .chip:active{transform:scale(.96)}@media (pointer:coarse){.blog-topics .chip{height:40px}}.blog-toolbar .count:empty{margin-left:-10px}@media (max-width:720px){.blog-toolbar .count{pointer-events:none;position:absolute;top:22px;right:14px;transform:translateY(-50%)}.blog-toolbar:has(.count:not(:empty)) .search .input{padding-right:116px}.blog-toolbar:has(.count:not(:empty)) .search .kbd{display:none}}.blog-year .year{margin-bottom:8px}.blog-year:first-of-type .year{margin-top:28px}.blog-year .year+.blog-list{margin-top:0}.blog-year:not([hidden])~.blog-year .year[hidden]+.blog-list{margin-top:2px}.blog-row .post-row__title{text-wrap:pretty;font-size:16.5px}.blog-row:hover .post-row__title{color:var(--fg)}.blog-row:has(.blog-row__link:focus-visible) .post-row__title{color:var(--fg)}.blog-row:has(.blog-row__link:focus-visible) .post-row__thumb .stamp__cover-inner{transform:scale(1.06)rotate(-1deg)}.blog-row .post-row__excerpt{margin-top:5px}.blog-row .post-row__meta{font-size:11px}.blog-stats__short{display:none}.post-by .avatar{flex:none}.share__btn{gap:7px;height:34px;padding:0 12px;font-size:13px}.share__btn svg{width:14px;height:14px}.share__title{font:500 10.5px var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);padding:6px 10px}.share__item{width:100%;height:40px;color:var(--fg-2);text-align:left;border-radius:9px;align-items:center;gap:10px;padding:0 10px;font-size:14px;display:flex}.share__item:hover,.share__item:focus-visible{background:var(--surface-hover);color:var(--fg)}.share__item svg{flex:none;width:16px;height:16px}.post-hero .stage--post .browser{width:80%}.post-hero--stamp .stamp-hero{transition:transform .5s var(--ease-lift)}@media (hover:hover) and (pointer:fine){.post-hero--stamp:hover .stamp-hero{transform:rotate(0)translateY(-6px)}}.post-code .code__head>span{text-transform:lowercase}.post-code:has(.code__more:not([hidden])) pre[data-clamp]{overflow-y:hidden}.code__more{border-top:1px solid #ffffff12;justify-content:center;padding:8px;display:flex;position:relative}.code__more:not([data-open]):before{content:"";pointer-events:none;inset-inline:0;background:linear-gradient(#11111300,#111113);height:64px;position:absolute;bottom:calc(100% + 1px)}.code__more-btn{height:32px;font:500 12px var(--ff-mono);color:#d4d4d8;transition:background var(--t-fast);background:#ffffff0f;border-radius:999px;padding:0 14px}.code__more-btn:hover{color:#fff;background:#ffffff1f}.rich>.post-figure+*{margin-top:1.4em}.post-figure .figure__cap{justify-content:center}.post-author .avatar{flex:none}.post-author__links .arrow-link{font-size:13.5px}.post-pn__thumb .post-row__thumb{zoom:.554;width:148px;display:block}.post-pn__card:hover .stamp__cover-inner{transform:scale(1.06)rotate(-1deg)}@media (max-width:720px){.post-hero__stage.stage--stamp,.post-hero__stage.stage--post{aspect-ratio:auto}.post-hero__stage.stage--stamp{height:min(200px,52vw)}.post-hero--stamp .stamp-hero{width:min(64%,300px)}.post-hero--stamp .stamp-hero .stamp__cover-inner{padding:30px 20px 18px}.post-hero .stage--post .browser{width:86%}}@media (max-width:520px){.blog-stats__feed,.blog-stats__long{display:none}.blog-stats__short{display:inline}.blog-row .post-row__meta{white-space:nowrap;letter-spacing:.04em;flex-wrap:nowrap;gap:6px}.post-by .share__label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.post-by .share__btn{justify-content:center;width:36px;padding:0}}@media (max-width:380px){.blog:not(:has(.blog-year .year[hidden])) .blog-row__year{display:none}.blog-row .post-row__meta{overflow:hidden}}@media (max-width:350px){.blog-row .post-row__meta{white-space:normal;flex-wrap:wrap}}@media (prefers-reduced-motion:reduce){.post-duo__card,.post-hero--stamp .stamp-hero,.post-pn__card,.clap__fill{transition:none}}.post-list{gap:2px;margin-top:18px;display:grid}.post-head__cover{margin-top:28px}.post-head__cover img{object-fit:cover;object-position:center 35%;width:100%;max-height:420px}.post-head__tags{flex-wrap:wrap;gap:6px;margin-bottom:14px;display:flex}.post-head__by{color:var(--muted);align-items:center;gap:10px;margin-top:20px;font-size:13.5px;display:flex}.post-head__by b{color:var(--fg);font-weight:600}.blog-topics{margin-top:14px}@media (max-width:480px){.blog-topics{margin-inline:calc(var(--gutter,16px) * -1)}}.blog-topic__dot{background:var(--stamp);border-radius:50%;flex:none;width:8px;height:8px;box-shadow:inset 0 0 0 1px #0000001f}.blog-toolbar{position:relative}.blog-list{padding:0;list-style:none}.blog-list>li[hidden]{display:none}.blog-row{position:relative}.blog-row__text{min-width:0}.blog-row__link:after{content:"";border-radius:18px;position:absolute;inset:0}.blog-row__link:focus-visible{outline:none}.blog-row:has(.blog-row__link:focus-visible){background:var(--surface-hover);outline:2px solid var(--accent-text);outline-offset:2px}mark.hl{background:var(--accent-soft);color:inherit;box-shadow:0 0 0 1px var(--accent-line);border-radius:3px;padding:0 1px}.blog-empty{margin-top:18px}.blog-empty__try{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:10px;display:flex}.blog-empty__clear{margin:14px auto 0;display:flex}.blog-longer>span>span{margin-top:2px;line-height:1.5;display:block}.blog-rss{margin-top:22px}.post-head__tags{padding:0;list-style:none}.post-tag{transition:background var(--t-fast), box-shadow var(--t-fast)}.post-tag:hover{box-shadow:inset 0 0 0 1px var(--accent-line)}.post-title{text-wrap:balance}.post-lede{margin-top:14px}.post-by{flex-wrap:wrap}.post-by__text{flex:1;min-width:0}.post-by__share{margin-left:auto}.post-by__meta>*,.post-by__text time{white-space:nowrap}.post-by__short{display:none}.post-hero{margin-top:28px}.post-hero__screen{aspect-ratio:16/9}.post-hero__screen img{padding:0}.post-duo{aspect-ratio:16/10;justify-content:center;align-items:center;padding:5% 6%;display:flex}.post-duo__card{height:84%;box-shadow:var(--sh-3);transition:transform .5s var(--ease-lift), z-index 0s;background:#fff;border-radius:16px;padding:6px;position:relative}.post-duo__card--0{z-index:1;transform:rotate(-3deg)translateY(-2%)}.post-duo__card--1{margin-left:-6%;transform:rotate(2.5deg)translateY(5%)}@media (hover:hover) and (pointer:fine){.post-duo__card:hover{z-index:2;transform:rotate(0)translateY(-4px)}}.post-duo__img{background:#f4f4f5;border-radius:11px;height:100%;position:relative;overflow:hidden}.post-duo__img img{object-fit:cover;object-position:top}.post-body{overflow-wrap:break-word;margin-top:36px}.post-body :not(pre)>code{overflow-wrap:anywhere}.post-body :is(h2,h3,h4) strong{font-weight:inherit;color:inherit}.post-body h4{font:600 16px/1.4 var(--ff-sans);color:var(--fg);margin-top:1.5em;scroll-margin-top:96px}.post-body :is(h2,h3){scroll-margin-top:96px}.post-body .heading-anchor{color:inherit;text-decoration:none}.post-body .heading-anchor:after{content:"#";font:400 .7em var(--ff-mono);color:var(--accent-text);opacity:0;transition:opacity var(--t-fast);margin-left:.3em}.post-body .heading-anchor:hover:after,.post-body .heading-anchor:focus-visible:after{opacity:.8}.post-body [data-rehype-pretty-code-figure]{margin:1.2em 0 0}.post-body [data-rehype-pretty-code-figure] .post-code,.post-body li .post-code{margin-top:0}.post-body li>[data-rehype-pretty-code-figure]{margin-block:.7em}:root[data-theme=light] .post-code{background:#111113}.post-code pre{tab-size:2;background:0 0!important}.post-code pre:focus-visible{outline-offset:-2px;outline:2px solid #a991ff}.post-code pre[data-overflow=more]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),#0000)}.post-code pre[data-overflow=more]:focus-visible{-webkit-mask-image:none;mask-image:none}.post-code code{font:inherit;color:inherit;background:0 0;min-width:max-content;padding:0;display:grid}.post-code code span{color:var(--shiki-dark,inherit)}.post-code :focus-visible{--ring:#a991ff}.post-code pre[data-clamp]{max-height:calc(36.3em + 14px);overflow-y:auto}.post-figure{margin-block:1.8em}.zoom{position:relative}.zoom img{width:100%;height:auto;display:block}.zoom__btn{cursor:zoom-in;border-radius:var(--r);position:absolute;inset:0}.zoom__hint{color:#fff;opacity:0;width:32px;height:32px;transition:opacity var(--t-fast), transform var(--t-fast) var(--ease-spring);background:#141416b8;border-radius:50%;place-items:center;display:grid;position:absolute;top:10px;right:10px;transform:scale(.9)}.zoom__hint svg{width:15px;height:15px}.zoom__btn:hover .zoom__hint,.zoom__btn:focus-visible .zoom__hint{opacity:1;transform:none}.post-note{background:var(--surface);border-left:3px solid var(--accent);color:var(--fg-2);border-radius:4px 12px 12px 4px;gap:12px;margin-block:0 1.6em;padding:14px 16px;font-size:15px;line-height:1.6;display:flex}.post-note__icon{width:18px;height:18px;color:var(--accent-text);flex:none;margin-top:3px}.post-note__body>*+*{margin-top:.6em}.post-reactions{gap:12px}.post-reactions__share{margin-left:auto}.clap{align-items:center;gap:10px;display:inline-flex}.clap__btn{background:var(--surface);width:48px;height:48px;transition:background var(--t-fast), transform var(--t-fast) var(--ease-spring);border-radius:50%;place-items:center;font-size:21px;display:grid;position:relative}.clap__btn:hover{background:var(--surface-2)}.clap__btn:active:not([aria-disabled=true]){transform:scale(.92)}.clap.is-full .clap__btn{background:var(--accent-soft);cursor:default}.clap.is-off .clap__btn{opacity:.5;cursor:not-allowed}.clap__ring{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg)}.clap__ring circle{fill:none;stroke-width:2px}.clap__track{stroke:#0000}.clap.is-live .clap__track{stroke:var(--line)}.clap__fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .24s var(--ease-toggle)}.clap:not(.is-live) .clap__fill{stroke:#0000}.clap__glyph{animation:blog-clap .18s var(--ease-spring);line-height:1;display:inline-block}.clap__pop{font:600 12px var(--ff-mono);color:var(--accent-text);pointer-events:none;animation:blog-plus .6s var(--ease-out) forwards;position:absolute;top:-4px;left:50%}.clap__count{min-width:4ch;font:500 12.5px var(--ff-mono);color:var(--muted)}.post-author{align-items:flex-start}.post-author__links{flex-wrap:wrap;gap:6px 18px;margin-top:10px;display:flex}.post-pn{grid-template-columns:1fr 1fr;gap:12px;margin-top:40px;display:grid}.post-pn__card{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-elev);transition:border-color var(--t-fast), transform var(--t) var(--ease-lift);align-items:flex-start;gap:14px;padding:12px;display:flex}.post-pn__card:hover{border-color:var(--line-strong);transform:translateY(-2px)}.post-pn__card--newer{text-align:right;flex-direction:row-reverse}.post-pn__thumb{flex:none;width:82px}.post-pn__text{gap:4px;min-width:0;display:grid}.post-pn__text small{color:var(--subtle);align-items:center;gap:4px;font-size:12px;display:inline-flex}.post-pn__card--newer small{justify-content:flex-end}.post-pn__text small svg{width:13px;height:13px}.post-pn__text b{font-size:14.5px;font-weight:600;line-height:1.35}@supports (animation-timeline:view()){@media (min-width:1200px) and (max-width:1339px){:root:has(.post-body){timeline-scope:--post-body;scroll-padding-bottom:0}.post-body{view-timeline:--post-body block;view-timeline-inset:96px 0px}}}@media (max-width:720px){.post-by{flex-wrap:nowrap}.post-by__text b{line-height:1.35;display:block}.post-by__sep,.post-by__long{display:none}.post-by__short{display:inline}.post-by__meta{font-size:13px;line-height:1.45;display:block}.post-duo{aspect-ratio:auto;gap:4%;padding:18px 14px}.post-duo__card{border-radius:12px;width:46%;height:auto;margin:0;padding:4px;transform:none}.post-duo__img{border-radius:9px;width:100%;height:auto;max-height:300px}.post-pn{grid-template-columns:1fr}.post-pn>span:empty{display:none}.post-pn__card--newer{text-align:left;flex-direction:row}.post-pn__card--newer small{justify-content:flex-start}.post-reactions__share{margin-left:0}}@media (max-width:520px){.blog-row__read,.blog-row .blog-row__views{display:none}}@media (max-width:380px){.blog-row .blog-row__tag{text-overflow:ellipsis;min-width:0;overflow:hidden}}.post-avatar img{background:var(--surface-2)}@media (max-width:480px){.blog-topics .chips[data-wrap]{padding:0 var(--gutter,16px);flex-wrap:wrap;gap:6px;margin-block:0;overflow-x:visible;-webkit-mask-image:none;mask-image:none}.blog-topics .chips[data-wrap] .chip{gap:5px;padding-inline:9px}}.blog-year:first-of-type .year[hidden]+.blog-list{margin-top:16px}@media (max-width:720px){.post-reactions .post-reactions__share{margin-left:auto}}.post-body :not(pre)>code{-webkit-box-decoration-break:clone;box-decoration-break:clone}.post-body :not(pre)>code.code--nowrap{white-space:nowrap}@media (max-width:380px){.post-body :not(pre)>code.code--nowrap{white-space:normal;overflow-wrap:anywhere}}:root[data-theme=light] .post-hero__stage{background:radial-gradient(120% 90% at 50% 0%, var(--t0), var(--t0) 55%, var(--t0))}@supports (color:color-mix(in lab, red, red)){:root[data-theme=light] .post-hero__stage{background:radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--t0) 70%, #fff 30%), var(--t0) 55%, color-mix(in oklab, var(--t0) 84%, var(--tint,#8764ff) 16%))}}@media (max-width:1339px),(max-height:699px){.post-ad{display:none}}}