@layer components{.blog-post-header_layout{gap:var(--space-4)}.blog-post-header_back{--link-text:var(--text-2);--link-border:var(--text-2);--link-text-hover:var(--text);align-self:start}.blog-post-header_category{background-color:var(--text);color:var(--background);border-radius:var(--radius-round);padding:.3125rem .75rem;font-size:.75rem;font-weight:600}.blog-post-header_title{letter-spacing:-.03em}.blog-post-header_meta{align-items:center;gap:var(--space-2);display:flex}.blog-post-header_avatar{background-color:var(--text);width:2rem;height:2rem;color:var(--brand-500);border-radius:var(--radius-round);justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:flex}.blog-post-header_author{color:var(--text);font-size:.875rem;font-weight:600}.blog-post-header_dot,.blog-post-header_text{font-size:.875rem;font-weight:var(--primary-medium);color:var(--text-2)}.blog-post-header_visual{aspect-ratio:2.7;width:100%;min-height:0;margin-top:var(--space-2);border-radius:var(--radius-main);overflow:clip}.blog-post-header_visual>.image{object-fit:cover;width:100%;height:100%}.blog-post-content_row{justify-content:center;align-items:start;gap:var(--space-8);flex-direction:row;width:100%;display:flex}.blog-post-content_main{flex:1 1 0;min-width:0}.blog-post-content_main img{border-radius:var(--radius-main);max-width:100%;height:auto;display:block}.rich-text.blog-post-content_main :is(h2,h3,h4,h5,h6){margin-top:var(--space-6);margin-bottom:var(--space-3);font-family:var(--h4-font-family);font-weight:var(--h4-font-weight);letter-spacing:var(--h4-letter-spacing);text-wrap:var(--h4-text-wrap);scroll-margin-top:6rem}.rich-text.blog-post-content_main h2{font-size:var(--h4);line-height:var(--h4-line-height)}.rich-text.blog-post-content_main h3{font-size:var(--h5);line-height:var(--h5-line-height)}.rich-text.blog-post-content_main :is(h4,h5,h6){font-size:var(--h6);line-height:var(--h6-line-height)}.rich-text.blog-post-content_main>:first-child{margin-top:0}.blog-post-content_main pre{padding:var(--space-3) var(--space-4);border-radius:var(--radius-main);font-size:.875rem;line-height:1.6;overflow-x:auto}.blog-post-content_main :not(pre)>code{background-color:var(--background-3);border-radius:.25em;padding:.1em .35em;font-size:.9em}.blog-post-content_sidebar{gap:var(--space-4);flex-direction:column;flex:none;width:17.5rem;display:flex}.blog-post-content_toc{gap:var(--space-2);padding:var(--space-4);background-color:var(--white);border:var(--border-width) solid var(--border);border-radius:var(--radius-main);flex-direction:column;display:flex}.blog-post-content_toc-heading{color:var(--text);font-size:.8125rem;font-weight:700}.blog-post-content_toc-list{gap:var(--space-2);flex-direction:column;display:flex}.blog-post-content_toc-link{font-size:.8125rem;font-weight:var(--primary-medium);color:var(--text-2);transition:color var(--hover-duration) var(--hover-ease);align-items:center;gap:.625rem;text-decoration:none;display:flex}@media (hover:hover){.blog-post-content_toc-link:hover{color:var(--text)}}.blog-post-content_toc-dot{background-color:var(--border);border-radius:var(--radius-round);flex:none;width:.3125rem;height:.3125rem}.blog-post-content_share{justify-content:space-between;align-items:center;gap:var(--space-4);width:100%;max-width:68ch;padding-top:var(--space-6);border-top:var(--border-width) solid var(--border);flex-wrap:wrap;margin-inline:auto;display:flex}.blog-post-content_wrap:not(:has(~.section)) .blog-post-content_share{padding-bottom:var(--section-space-medium)}.blog-post-content_share-heading{color:var(--text);font-size:.8125rem;font-weight:700}.blog-post-content_share-icons{gap:var(--space-2);display:flex}.blog-post-content_share-icon{width:2.25rem;height:2.25rem;color:var(--text);border:var(--border-width) solid var(--text);border-radius:var(--radius-round);transition:background-color var(--hover-duration) var(--hover-ease), color var(--hover-duration) var(--hover-ease);background-color:#0000;justify-content:center;align-items:center;font-size:.875rem;display:flex}@media (hover:hover){.blog-post-content_share-icon:hover{background-color:var(--text);color:var(--background)}}.blog-post-content_share-icon.copied{background-color:var(--text);color:var(--background)}@media not (min-width:64rem){.blog-post-content_row{flex-direction:column}.blog-post-content_sidebar{width:100%}}.related-posts_title{letter-spacing:-.03em}.related-posts_row{columns:3 14rem;column-gap:var(--space-4)}}