.blog-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);position:relative;z-index:1}@media (min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}.post-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow);overflow-wrap:break-word;transition:transform .3s ease-out,border-color .3s ease-out,box-shadow .3s ease-out}.post-card:hover{transform:translateY(-2px);border-color:rgba(27,92,255,.4);box-shadow:0 4px 14px rgba(11,15,23,.07)}.post-card:focus-within{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:3px}.post-cover{position:relative;aspect-ratio:16/9;width:100%;background:var(--surface-2);border-bottom:1px solid var(--line);overflow:hidden}.post-cover img{display:block;width:100%;height:100%;min-width:0;-o-object-fit:cover;object-fit:cover}.post-cover.is-placeholder{background:var(--surface);background-image:repeating-linear-gradient(to bottom,var(--grid-line) 0 1px,transparent 1px 28px),repeating-linear-gradient(to right,var(--grid-line) 0 1px,transparent 1px 28px);display:flex;align-items:center;justify-content:center}.post-cover .initial{font-family:var(--font-display);font-weight:var(--w-num);font-size:64px;line-height:1;letter-spacing:var(--num-ls);color:var(--ink)}.post-body{display:flex;flex:1;flex-direction:column;gap:8px;padding:18px;min-width:0}.post-meta{font-size:13px;line-height:1.4;color:var(--ink-faint);font-weight:500}.post-title{font-family:var(--font-display);font-size:20px;font-weight:var(--w-head);line-height:1.15;letter-spacing:var(--head-ls);color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.post-title a{text-decoration:none;color:inherit}.post-title a:after{content:"";position:absolute;inset:0}.post-card:hover .post-title{color:var(--accent-hover)}.post-title a:focus-visible{outline:none}.post-desc{font-size:14px;line-height:1.55;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.blog-empty{color:var(--ink-soft);font-size:16px;line-height:1.6}.blog-empty,.blog-pager{position:relative;z-index:1}.blog-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:40px 0 26px}.blog-pager a,.blog-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 12px;border-radius:var(--btn-radius);border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;transition:border-color .3s ease-out,color .3s ease-out}.blog-pager a:hover{border-color:var(--accent);color:var(--accent-hover)}.blog-pager a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.blog-pager .is-current{background:var(--accent);border-color:var(--accent);color:#fff}.blog-pager .is-disabled,.blog-pager .is-gap{border-color:transparent;background:transparent;color:var(--ink-faint);opacity:.5}@media (max-width:430px){.blog-pager .pager-word{display:none}}.article-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;position:relative;z-index:1}@media (min-width:1280px){.article-layout{grid-template-columns:minmax(0,1fr) 320px}}.article-main{min-width:0}.article-col{max-width:676px;margin-inline:auto;min-width:0}.crumbs{margin:14px 0 12px;font-size:13px;color:var(--ink-faint)}.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none}.crumbs a{color:var(--ink-soft);text-decoration:none}.crumbs a:hover{color:var(--accent);text-decoration:underline;text-underline-position:from-font}.crumbs a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.crumbs .sep{color:var(--ink-faint)}.article-cover{aspect-ratio:16/9;width:100%;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface-2);margin-bottom:var(--gap)}.article-cover img{display:block;width:100%;height:100%;min-width:0;-o-object-fit:cover;object-fit:cover}.article-head{position:relative;border-bottom:2px solid var(--line-strong);padding-bottom:14px;margin-bottom:var(--gap)}.article-title{font-size:44px;font-weight:var(--w-display);letter-spacing:var(--display-ls);line-height:1.02;position:relative;z-index:1}@media (max-width:760px){.article-title{font-size:30px}}.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;font-size:13px;position:relative;z-index:1}.article-meta,.article-meta .dot{color:var(--ink-faint)}.article-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;position:relative;z-index:1}.mini-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--btn-radius);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-family:inherit;font-size:14px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;transition:background-color .3s ease-out}.mini-btn:hover{background:var(--surface-2)}.mini-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.mini-btn svg{flex:none}@media (max-width:760px){.article-actions{flex-wrap:nowrap;align-items:stretch}.article-actions>*{flex:1 1 0;min-width:0;justify-content:center;text-align:center;padding:8px 10px;line-height:1.25;white-space:normal}}.article-body{position:relative;z-index:1}.article-body h2,.article-body h3{scroll-margin-top:24px}.head-anchor{margin-left:8px;color:var(--ink-faint);text-decoration:none;font-weight:400;opacity:0;transition:opacity .3s ease-out}.article-body h2:hover .head-anchor,.article-body h3:hover .head-anchor,.head-anchor:focus-visible{opacity:1}.head-anchor:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.article-body pre{position:relative;padding-top:44px}.code-copy-host{position:absolute;top:8px;right:8px}.code-copy{min-height:28px;padding:0 10px;font-size:12px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--font-body);font-weight:500;line-height:1;cursor:pointer}.code-copy:hover{background:var(--surface-2)}.code-copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sub-cta{display:flex;flex-direction:column;gap:12px;margin:40px 0;padding:var(--pad);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow);position:relative;z-index:1}@media (max-width:760px){.sub-cta{padding:18px}}.sub-cta .who{display:flex;align-items:center;gap:10px}.sub-cta .ava{position:relative;flex:none;width:40px;height:40px}.sub-cta .ava img{display:block;width:100%;height:100%;border-radius:999px;-o-object-fit:cover;object-fit:cover}.sub-cta .ava .badge{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:999px;background:var(--accent);color:#fff;border:2px solid var(--surface);display:flex;align-items:center;justify-content:center}.sub-cta .name{font-family:var(--font-display);font-size:20px;font-weight:var(--w-head);letter-spacing:var(--head-ls);line-height:1.1;color:var(--ink)}.sub-cta .pitch{font-size:15px;line-height:1.55;color:var(--ink-soft)}.article-side{display:none}@media (min-width:1280px){.article-side{display:block}}.toc{position:sticky;top:24px;max-height:calc(100vh - 6rem);overflow-y:auto}.toc h2{font-size:15px;font-weight:var(--w-head);letter-spacing:var(--micro-ls);text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}.toc ul:before{content:"";position:absolute;left:0;width:2px;top:var(--toc-top,0);height:var(--toc-h,0);opacity:var(--toc-o,0);background:var(--accent)}@media (prefers-reduced-motion:no-preference){.toc ul:before{transition:top .25s var(--ease-poster),height .25s var(--ease-poster),opacity .25s ease-out}}.toc a[data-active=true],.toc-sheet a[data-active=true]{color:var(--accent)}.toc a{display:block;border-left:2px solid var(--line);padding:6px 0 6px 12px;font-size:14px;line-height:1.45;color:var(--ink-soft);text-decoration:none;transition:color .3s ease-out,border-color .3s ease-out}.toc a:hover{color:var(--ink);border-left-color:var(--line-strong)}.toc a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.toc .lvl-3 a{padding-left:24px;font-size:13px}.toc-fab{position:fixed;right:24px;bottom:72px;z-index:40;width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:0 4px 14px rgba(11,15,23,.07);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none}.toc-fab[data-visible=true]{opacity:1;transform:none;pointer-events:auto}.toc-fab:hover{border-color:var(--accent)}.toc-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media (prefers-reduced-motion:no-preference){.toc-fab{transition:opacity .3s ease-out,transform .3s ease-out,border-color .2s ease-out}.toc-fab:active{transform:scale(.97)}}@media (min-width:1280px){.toc-fab{display:none}}.toc-overlay{inset:0;z-index:50;background:rgba(11,15,23,.5);opacity:0;transition:opacity .3s ease-out,visibility 0s linear .3s}.toc-overlay,.toc-sheet{position:fixed;visibility:hidden}.toc-sheet{left:0;right:0;bottom:0;z-index:51;max-height:70vh;overflow-y:auto;padding:18px 16px 28px;background:var(--surface);border-top:2px solid var(--line-strong);border-radius:var(--radius-m) var(--radius-m) 0 0;transform:translateY(100%);transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s linear .5s}.toc-open .toc-overlay{opacity:1;visibility:visible;transition:opacity .3s ease-out,visibility 0s linear 0s}.toc-open .toc-sheet{transform:translateY(0);visibility:visible;transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s linear 0s}.toc-sheet .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.toc-sheet .sheet-title{font-family:var(--font-display);font-size:15px;font-weight:var(--w-head);letter-spacing:var(--micro-ls);text-transform:uppercase;color:var(--ink-faint)}.toc-sheet ul{list-style:none;margin:0;padding:0}.toc-sheet a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4;color:var(--ink);text-decoration:none}.toc-sheet .lvl-3 a{padding-left:16px;font-size:14px;color:var(--ink-soft)}.toc-sheet a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media (prefers-reduced-motion:reduce){.head-anchor,.post-card,.toc-overlay,.toc-sheet{transition:none}.post-card:hover,.toc-sheet{transform:none}.toc-sheet{opacity:0}.toc-open .toc-sheet{opacity:1}}.related{margin-top:48px;padding-top:26px;border-top:2px solid var(--line-strong);position:relative;z-index:1}.related-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:var(--gap)}.related-head h2{font-size:34px;font-weight:var(--w-head);line-height:1.1}@media (max-width:760px){.related-head h2{font-size:24px}}@media (prefers-reduced-motion:no-preference){.cp-label{display:inline-block}.code-copy[data-copied=true] .cp-label,.mini-btn[data-copied=true] .cp-label{animation:copied-in .2s var(--ease-poster) both}}@keyframes copied-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}.read-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--accent);transform:scaleX(0);transform-origin:left center;pointer-events:none}