@layer components{.blog{--ink:#1f1d1a;--ink-soft:#57534c;--ink-muted:#7d786f;--ink-body:#2e2b27;--line:#3c2d1424;--line-strong:#3c2d143d;--line-soft:#e3dfe3;--accent:#9672ff;--accent-deep:#6336d6;--tint:#f5f3ff;--tint-strong:#ece6ff;--wash:#f5f3ffa6;--wash-mid:#f5f3ff40;--warn-bg:#fffbeb;--warn-border:#fcd34d;--warn-text:#78350f;--focus:#3b82f6;--card:#fff;--shadow-card:0 0 0 1px #2000241c, 0 2px 2px #2000240d;--shadow-card-hover:0 0 0 1px #2000242a, 0 6px 16px -4px #20002418;--code-bg:#1c1b22;--radius:1rem;--radius-lg:.5rem;--radius-xl:.75rem;--measure:42rem;isolation:isolate;color:var(--ink);position:relative}@supports (color:lab(0% 0 0)){.blog{--wash:lab(96.2576% 2.2971 -5.53688/.65);--wash-mid:lab(96.2576% 2.2971 -5.53687/.25)}}.blog ::selection{background:var(--tint-strong);color:var(--ink)}.blog-wash{inset-inline:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom, var(--wash) 0%, var(--wash-mid) 60%, transparent 100%);height:28rem;position:absolute;top:0}.blog-wrap{padding-inline:clamp(1.25rem,4vw,2.5rem);max-width:72rem;margin-inline:auto;padding-top:clamp(7.5rem,14vw,9.5rem)}.blog-wrap-narrow{max-width:64rem;padding-inline:1rem}.blog-eyebrow{font-variation-settings:"wght" 500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);margin:0;font-size:.6875rem}.blog-sep{color:var(--line-strong)}.blog-desc{max-width:60ch;color:var(--ink-soft);text-wrap:pretty;font-size:.9375rem;line-height:1.55}.blog-surface{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-card)}a.blog-surface{transition:box-shadow .16s}.blog-surface:has(a){transition:box-shadow .16s}a.blog-surface:hover{box-shadow:var(--shadow-card-hover)}.blog-surface:has(a):hover{box-shadow:var(--shadow-card-hover)}.blog-surface:has(a:focus-visible){outline:2px solid var(--focus);outline-offset:2px}.blog-badge-warn{border:1px solid var(--warn-border);background:var(--warn-bg);color:var(--warn-text);font-variation-settings:"wght" 600;letter-spacing:0;text-transform:none;border-radius:999px;align-items:center;gap:.375rem;padding:.125rem .5rem;font-size:.6875rem;line-height:1.5;display:inline-flex}.blog-btn{border-radius:var(--radius-lg);font-variation-settings:"wght" 500;white-space:nowrap;justify-content:center;align-items:center;gap:.375rem;height:2.25rem;padding:0 .875rem;font-size:.8125rem;line-height:1;text-decoration:none;transition:background-color .14s,box-shadow .14s;display:inline-flex}.blog-btn-primary{background:var(--ink);color:#fff;font-variation-settings:"wght" 600;box-shadow:inset 0 1px #ffffff26,0 1px 2px #0000000d}.blog-btn-primary:hover{background:#36332f}.blog-btn-secondary{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line), 0 1px 2px #0000000d}.blog-btn-secondary:hover{box-shadow:0 0 0 1px var(--line-strong), 0 1px 2px #0000000d}.blog-btn-sm{height:1.875rem;padding:0 .75rem;font-size:.75rem}.blog-field{display:block;position:relative}.blog-field>svg{pointer-events:none;width:1rem;height:1rem;color:var(--ink-muted);position:absolute;top:.625rem;left:.625rem}.blog-field>input{appearance:none;border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);border-radius:var(--radius-lg);background:var(--card);width:100%;color:var(--ink);outline:none;margin:0;padding:calc(.375rem - 1px) calc(.75rem - 1px) calc(.375rem - 1px) 2rem;font-size:.875rem;line-height:1.5rem;transition:border-color .14s;display:block;box-shadow:0 1px 2px #0000000d}.blog-field>input:hover{border-color:color-mix(in srgb, var(--ink) 20%, transparent)}.blog-field>input:focus{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}.blog-field>input::placeholder{color:var(--ink-muted)}.blog-field>input::-webkit-search-decoration{appearance:none}.blog-field>input::-webkit-search-cancel-button{appearance:none}.blog-table{border-collapse:collapse;width:100%;font-size:.875rem}.blog-table th{border-bottom:1px solid var(--line-soft);text-align:left;font-variation-settings:"wght" 600;color:var(--ink);white-space:nowrap;padding:.75rem}.blog-table td{border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:middle;padding:.75rem}.blog-table th:first-child,.blog-table td:first-child{padding-left:0}.blog-table th:last-child,.blog-table td:last-child{padding-right:0}.blog-table .num{text-align:right;white-space:nowrap}.blog-table tbody tr{transition:background-color .14s;position:relative}.blog-table tbody tr:hover{background:#ffffffb3}.blog-table tbody tr:has(a:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}.blog-table a:focus-visible{outline:none}.blog-empty{border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--card);text-align:center;padding:4rem 1.5rem}.blog-post-grid{grid-template-columns:minmax(0,1fr);display:grid}.blog-post-grid>article,.blog-post-nav-bottom{width:100%;max-width:var(--measure);min-width:0;margin-inline:auto}.blog-rail{display:none}.blog-post-nav-bottom{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:1.5rem;display:grid}@media (min-width:78rem){.blog-post-grid{grid-template-columns:1fr min(var(--measure), 100%) 1fr;column-gap:clamp(2rem,4vw,4rem)}.blog-post-grid>article{grid-column:2}.blog-rail{padding-top:2.6rem;display:flex}.blog-rail-author{flex-direction:column;grid-area:1/1;align-self:start;gap:1.75rem;position:sticky;top:6rem}.blog-rail-nav{flex-direction:column;grid-area:1/3;gap:1.5rem}.blog-post-nav-bottom{display:none}.blog-cover{--bleed:clamp(0rem, (100vw - 78rem) / 8, 3.5rem);width:calc(100% + var(--bleed) * 2);margin-inline:calc(var(--bleed) * -1);max-width:none}}.blog-prose{margin-top:2.5rem}.blog-prose p,.blog-prose li{font-variation-settings:"wght" 420;color:var(--ink-body);text-wrap:pretty;font-size:1.0625rem;line-height:1.7}.blog-prose p{margin:0 0 1.5rem}.blog-prose ul,.blog-prose ol{margin:0 0 1.5rem;padding-left:1.5rem}.blog-prose ul{list-style:outside}.blog-prose ol{list-style:decimal}.blog-prose li{margin-bottom:.5rem;padding-left:.25rem}.blog-prose li::marker{color:var(--ink-soft)}.blog-prose li>p{margin-bottom:.5rem}.blog-prose :is(h2,h3,h4,h5,h6){font-variation-settings:"wght" 650;letter-spacing:-.02em;color:var(--ink);text-wrap:pretty;scroll-margin-top:6rem;line-height:1.2}.blog-prose h2{letter-spacing:-.025em;margin:3.5rem 0 1rem;font-size:1.875rem}.blog-prose h3{margin:2.75rem 0 .85rem;font-size:1.4375rem}.blog-prose h4{letter-spacing:-.01em;margin:2.25rem 0 .7rem;font-size:1.1875rem}.blog-prose :is(h5,h6){letter-spacing:0;margin:1.75rem 0 .6rem;font-size:1rem}.blog-prose :is(h2,h3,h4,h5,h6)+:is(h2,h3,h4,h5,h6){margin-top:.5rem}.blog-prose strong{font-variation-settings:"wght" 650;color:var(--ink)}.blog-prose a{color:var(--ink);text-underline-offset:4px;text-decoration:underline;text-decoration-thickness:1px;-webkit-text-decoration-color:color-mix(in srgb, var(--ink) 35%, transparent);text-decoration-color:color-mix(in srgb, var(--ink) 35%, transparent)}.blog-prose a:hover{text-decoration-color:currentColor}.blog-prose blockquote{border-left:3px solid var(--accent);color:var(--ink-soft);margin:2rem 0;padding-left:1.25rem;font-style:italic}.blog-prose blockquote p{color:inherit}.blog-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.86em}.blog-prose :not(pre)>code{background:color-mix(in srgb, var(--ink) 7%, transparent);color:var(--ink);border-radius:.375rem;padding:.12em .4em}.blog-prose pre{border-radius:var(--radius-xl);background:var(--code-bg);color:#e8e6f0;margin:2rem 0;padding:1.25rem 1.5rem;font-size:.875rem;line-height:1.6;overflow-x:auto}.blog-prose hr{border:0;border-top:1px solid var(--line-soft);margin:3rem 0}.blog-prose img{border-radius:var(--radius-xl);max-width:100%;height:auto;box-shadow:var(--shadow-card);margin:2rem 0}.blog-prose table{border-collapse:collapse;width:100%;margin:2rem 0;font-size:.875rem}.blog-prose th{border-bottom:1px solid var(--line-soft);text-align:left;font-variation-settings:"wght" 600;color:var(--ink);padding:.75rem}.blog-prose td{border-bottom:1px solid var(--line-soft);color:var(--ink-soft);padding:.75rem}.blog-prose :is(th,td):first-child{padding-left:0}.blog-prose :is(th,td):last-child{padding-right:0}}
