.xb-page [data-category]{--cat: var(--lav)}.xb-page [data-category=tutorial]{--cat: var(--cyan)}.xb-page [data-category=announcement]{--cat: var(--peach)}.xb-page [data-category=case-study]{--cat: var(--tile)}.xb-page .blog-intro{padding-bottom:40px}.xb-page .blog-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}.xb-page .blog-meta p{font-size:12px;color:var(--ink-2)}.xb-page .blog-meta a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;color:var(--ink-2);text-decoration:none}.xb-page .blog-meta a:hover{color:var(--ink)}.xb-page .blog-meta a span{color:var(--lav)}.xb-page .blog-empty{padding:56px 24px;border:1px solid var(--line);border-radius:var(--radius-md);font-size:14px;color:var(--ink-2);text-align:center}.xb-page .post-list{container:posts / inline-size;border-top:1px solid var(--line)}.xb-page .post-list>li{border-bottom:1px solid var(--line)}.xb-page .post-row{position:relative;display:grid;align-items:baseline;column-gap:24px;grid-template-columns:132px minmax(0,1fr) 124px 88px 16px;grid-template-areas:"date info category read arrow";padding:26px 18px 26px 17px;text-decoration:none;transition:background-color .18s ease}.xb-page .post-row:hover{background:var(--surface)}.xb-page .post-row:focus-visible{outline:2px solid var(--lav);outline-offset:-2px;background:var(--surface)}.xb-page .post-row__date{grid-area:date;display:flex;flex-direction:column;gap:6px;font:12px/1.6 var(--font-mono);color:var(--ink-3)}.xb-page .post-row__featured{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lav)}.xb-page .post-row__info{grid-area:info;min-width:0}.xb-page .post-row__title{font-size:19px;line-height:1.35;letter-spacing:-.02em;font-weight:500;color:var(--ink);text-wrap:pretty}.xb-page .post-row__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-width:68ch;margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink-2)}.xb-page .post-row__category{grid-area:category;display:inline-flex;align-items:baseline;gap:8px;font:11px/1.6 var(--font-mono);color:var(--cat)}.xb-page .post-row__category:before,.xb-page .post-kicker__category:before{content:"";flex:none;width:6px;height:6px;border-radius:1.5px;background:currentColor}.xb-page .post-row__category:before{transform:translateY(-1px)}.xb-page .post-row__read{grid-area:read;font:12px/1.6 var(--font-mono);color:var(--ink-2);white-space:nowrap}.xb-page .post-row__arrow{grid-area:arrow;justify-self:end;font-size:17px;line-height:1;color:var(--ink-3);transition:color .18s ease,transform .18s ease}.xb-page .post-row:hover .post-row__arrow{color:var(--lav);transform:translate(2px)}@container posts (max-width: 1000px){.xb-page .post-row{grid-template-columns:112px minmax(0,1fr) 108px 80px 12px;column-gap:18px}}@container posts (max-width: 760px){.xb-page .post-row{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"date category" "info info" "read read";column-gap:16px;row-gap:10px;padding:21px 40px 20px 14px}.xb-page .post-row__date{flex-direction:row;gap:12px}.xb-page .post-row__title{font-size:18px}.xb-page .post-row__desc{-webkit-line-clamp:3;line-clamp:3;font-size:13.5px}.xb-page .post-row__read{font-size:11px;color:var(--ink-3)}.xb-page .post-row__arrow{position:absolute;right:14px;top:24px}}.xb-page .post-main{padding-top:98px;padding-bottom:96px}.xb-page .post-column{max-width:720px;margin-inline:auto}.xb-page .post-column>.back-link{min-height:36px;font-size:13px}.xb-page .post-intro{margin-top:28px;padding-bottom:34px;border-bottom:1px solid var(--line)}.xb-page .post-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:8px 13px}.xb-page .post-kicker__category{display:inline-flex;align-items:center;gap:8px;font:11px var(--font-mono);color:var(--cat)}.xb-page .post-kicker time{padding-left:13px;border-left:1px solid var(--line);font-size:12px;color:var(--ink-3)}.xb-page .post-title{margin-top:20px;font-size:clamp(36px,4.4vw,54px);font-weight:500;line-height:1.08;letter-spacing:-.045em;text-wrap:balance}.xb-page .post-lead{margin-top:20px;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--ink-2);text-wrap:pretty}.xb-page .post-byline{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:24px;font-size:14px;color:var(--ink)}.xb-page .post-byline img{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;object-fit:cover}.xb-page .post-byline__read{padding-left:12px;border-left:1px solid var(--line);font:12px var(--font-mono);color:var(--ink-3)}.xb-page .post-hero{margin-top:36px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}.xb-page .post-hero img{width:100%;height:auto}.xb-page .post-body{padding-top:40px;font-size:17px;line-height:1.75;color:var(--ink-2);overflow-wrap:break-word}.xb-page .post-body>*+*{margin-top:22px}.xb-page .post-body h2{margin-top:60px;font-size:clamp(24px,2.3vw,29px);line-height:1.2;letter-spacing:-.03em;font-weight:500;color:var(--ink);text-wrap:balance}.xb-page .post-body h3{margin-top:40px;font-size:20px;line-height:1.3;letter-spacing:-.02em;font-weight:500;color:var(--ink);text-wrap:balance}.xb-page .post-body h4{margin-top:32px;font-size:17px;line-height:1.4;font-weight:600;color:var(--ink)}.xb-page .post-body :is(h2,h3,h4)+*{margin-top:14px}.xb-page .post-body strong{font-weight:600;color:var(--ink)}.xb-page .post-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--control);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s var(--ease-out),text-decoration-color .2s var(--ease-out)}.xb-page .post-body a:hover{color:var(--lav);text-decoration-color:currentColor}.xb-page .post-body :is(ul,ol){padding-left:1.35em}.xb-page .post-body ul{list-style:disc}.xb-page .post-body ul ul{list-style:circle}.xb-page .post-body ol{list-style:decimal}.xb-page .post-body li+li,.xb-page .post-body li>*+*{margin-top:8px}.xb-page .post-body li::marker{color:var(--ink-3)}.xb-page .post-body blockquote{padding-left:20px;border-left:1px solid var(--line-dot)}.xb-page .post-body blockquote>*+*{margin-top:12px}.xb-page .post-body hr{height:0;margin-block:48px;border:0;border-top:1px solid var(--line)}.xb-page .post-body img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius-md)}.xb-page .post-body :not(pre)>code{padding:.12em .4em;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font-size:.86em;color:var(--ink)}.xb-page .post-body pre{overflow-x:auto;padding:18px 20px 20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);font:13.5px/1.7 var(--font-mono);color:var(--ink);tab-size:4;scrollbar-width:thin;scrollbar-color:var(--line-dot) transparent}.xb-page .post-body pre code{font:inherit}.xb-page .post-body table{display:block;width:max-content;max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.6;scrollbar-width:thin;scrollbar-color:var(--line-dot) transparent}.xb-page .post-body th{padding:11px 16px;background:var(--surface);font-size:12px;font-weight:500;color:var(--ink-2);text-align:left;vertical-align:bottom;white-space:nowrap}.xb-page .post-body td{padding:12px 16px;border-top:1px solid var(--line);color:var(--ink-2);vertical-align:top}.xb-page .post-body td:first-child{color:var(--ink)}.xb-page .post-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 24px;margin-top:64px;padding-top:24px;border-top:1px solid var(--line)}.xb-page .post-tags{display:flex;flex-wrap:wrap;gap:6px}.xb-page .post-tags li{padding:4px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);font:11px/1.5 var(--font-mono);color:var(--ink-3)}.xb-page .share{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.xb-page .share__label{margin-right:6px;font:500 11px/16px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}.xb-page .share__link{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-pill);background:transparent;font-size:13px;color:var(--ink-2);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}.xb-page .share__link:hover{border-color:var(--control);color:var(--ink)}.xb-page .share__labels{display:grid;justify-items:center}.xb-page .share__labels>span{grid-area:1 / 1;visibility:hidden}.xb-page .share__labels>.is-on{visibility:visible}.xb-page .post-related{margin-top:80px}.xb-page .post-related__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}.xb-page .post-related__head h2{font-size:23px;font-weight:400;line-height:1.3;letter-spacing:-.027em}.xb-page .post-related__head a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:13px;color:var(--ink-2);text-decoration:none}.xb-page .post-related__head a:hover{color:var(--ink)}.xb-page .post-related__head a span{color:var(--lav)}@media(max-width:759.98px){.xb-page .blog-intro{padding-bottom:29px}.xb-page .blog-intro .page-intro__title{max-width:14ch}.xb-page .post-main{padding-top:87px;padding-bottom:64px}.xb-page .post-column>.back-link{font-size:12px}.xb-page .post-intro{margin-top:20px;padding-bottom:28px}.xb-page .post-title{font-size:clamp(32px,8.4vw,44px)}.xb-page .post-body{padding-top:32px;font-size:16px;line-height:1.7}.xb-page .post-body h2{margin-top:48px;font-size:23px}.xb-page .post-body h3{margin-top:32px;font-size:18px}.xb-page .post-body pre{padding:16px;font-size:12.5px}.xb-page .post-body table{font-size:13px}.xb-page .post-foot{margin-top:48px}.xb-page .post-related{margin-top:56px}}