.blog-post-scope{timeline-scope:--blog-read}.blog-post{view-timeline:--blog-read block;padding-bottom:4rem}.blog-post__grid{grid-template-columns:minmax(0,1fr);width:100%;max-width:42rem;margin-inline:auto;display:grid}.blog-post__header{border-bottom:1px solid var(--color-line);margin-bottom:2.5rem;padding-bottom:2.5rem}.blog-post__dek{color:var(--color-text-2);font-family:var(--font-secondary);letter-spacing:-.1px;text-wrap:pretty;margin-top:1rem;font-size:1.125rem;line-height:1.45}.blog-post__dek a:not([class]){color:inherit;text-decoration-line:underline;-webkit-text-decoration-color:var(--color-line);text-decoration-color:var(--color-line);text-underline-offset:4px;transition:text-decoration-color .2s var(--ease-out-quint);text-decoration-thickness:1px}.blog-post__dek a:not([class]):hover{text-decoration-color:currentColor}.blog-post__dek a:not([class]):focus-visible{border-radius:var(--radius-xs);outline:2px solid var(--color-accent-primary);outline-offset:2px}.blog-post__cover{aspect-ratio:16/9;border-radius:var(--radius-2xl);background:var(--color-surface-2);margin-top:2rem;display:none;position:relative;overflow:hidden}.blog-post__toc-mobile{margin-bottom:2.5rem}.blog-post__body{min-width:0}.blog-post__footer{min-width:0;margin-top:4rem}.blog-post__toc{display:none}@media (min-width:48rem){.blog-post__cover{display:block}}@media (min-width:64rem){.blog-post__dek{margin-top:1.25rem;font-size:1.25rem}.blog-post__header{margin-bottom:3rem}}@media (min-width:80rem){.blog-post__grid{grid-template-columns:minmax(0,1fr) minmax(0,42rem) minmax(0,1fr);column-gap:3rem;max-width:none}.blog-post__header,.blog-post__body,.blog-post__footer{grid-column:2}.blog-post__header{grid-row:1}.blog-post__body{grid-row:2}.blog-post__footer{grid-row:3}.blog-post__toc-mobile{display:none}.blog-post__toc{grid-area:2/3;max-width:17rem;display:block}.blog-post__toc>nav{top:calc(var(--nav-offset) + 1.5rem);max-height:calc(100dvh - var(--nav-offset) - 3rem);overscroll-behavior:contain;scrollbar-width:thin;overflow-y:auto}}@media (min-width:90rem){.blog-post__grid{column-gap:4rem}}.blog-read-progress{display:none}@supports (animation-timeline:view()){.blog-read-progress{inset-inline:0;z-index:calc(var(--z-nav) + 1);background:var(--color-accent-primary);transform-origin:0;pointer-events:none;height:3px;animation:linear both blog-read-progress;animation-timeline:--blog-read;animation-range:contain;display:block;position:fixed;top:0;transform:scaleX(0)}}@keyframes blog-read-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}