.writing-heading{margin-bottom:42px}.writing-heading>p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted-foreground);margin-top:8px}.writing-index-bar{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--muted-foreground);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;padding-bottom:16px;display:flex}.writing-index-bar a{align-items:center;gap:7px;display:inline-flex}.writing-empty{border-bottom:1px solid var(--border);padding:42px 0 46px}.writing-empty h2{font-size:var(--fs-title);line-height:var(--lh-title);font-variation-settings:var(--site-weight-semibold);font-weight:550}.writing-empty p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted-foreground);max-width:var(--site-text-width);margin-top:12px}.writing-empty a{text-underline-offset:4px;text-decoration:underline;text-decoration-color:var(--border)}.writing-list{padding:0;list-style:none}.writing-list>li{border-bottom:1px solid var(--border)}.writing-entry{padding:28px 0 30px;display:block}.writing-entry-with-image{grid-template-columns:minmax(0,1fr) 160px;align-items:center;gap:32px;display:grid}.writing-entry-cover{object-fit:cover;border-radius:10px;width:160px;height:108px}.writing-entry-meta{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--muted-foreground);flex-wrap:wrap;gap:14px;display:flex}.writing-entry h2{font-size:var(--fs-title);line-height:var(--lh-title);font-variation-settings:var(--site-weight-semibold);margin-top:10px;font-weight:550}.writing-entry p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted-foreground);margin-top:9px}.writing-entry:hover h2{text-underline-offset:5px;text-decoration:underline;text-decoration-color:var(--border)}.writing-entry:focus-visible,.writing-page a:focus-visible{outline-offset:5px;border-radius:3px;outline:2px solid #9298ff}.writing-drafts{margin-top:38px}.writing-drafts>h2{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--muted-foreground);font-variation-settings:var(--site-weight-semibold);font-weight:550}.writing-drafts .writing-entry{padding-block:20px}.writing-back{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--muted-foreground);margin-bottom:30px;display:inline-block}.writing-standfirst{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted-foreground);margin-top:8px}.writing-byline{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--muted-foreground);flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:28px;display:flex}.writing-byline a{color:var(--foreground)}.writing-byline img{border-radius:50%}.writing-updated{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--muted-foreground);margin-top:12px}.writing-tags{font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--muted-foreground);flex-wrap:wrap;gap:8px;margin-top:20px;display:flex}.writing-tags span{font-size:var(--fs-micro);line-height:var(--lh-micro);border:1px solid var(--border);border-radius:5px;padding:3px 7px}.writing-draft-notice{font-size:var(--fs-caption);line-height:var(--lh-caption);border:1px dashed var(--border);color:var(--muted-foreground);border-radius:8px;margin-bottom:28px;padding:14px 16px}.writing-contents{font-size:var(--fs-caption);line-height:var(--lh-caption);overscroll-behavior:contain;scrollbar-width:thin;max-height:240px;margin-top:34px;padding:4px;overflow-y:auto}.writing-contents>p{font-variation-settings:var(--site-weight-semibold);font-weight:550}.writing-contents ol{flex-direction:column;gap:5px;margin-top:10px;padding:0;list-style:none;display:flex}.writing-contents a{color:var(--muted-foreground);transition:color var(--motion-fast) ease-out, background-color var(--motion-fast) ease-out;border-radius:6px;padding:6px 10px;display:block}.writing-contents a:hover,.writing-contents a[aria-current=location]{color:var(--foreground);background:var(--muted);text-decoration:none}.writing-contents a:active{background:var(--accent)}.writing-contents>p{padding-inline:10px}.writing-reading-column{width:100%;max-width:var(--site-text-width)}.writing-article .writing-reading-column{min-width:0;max-width:100%}.writing-article-body{flex-direction:column;display:flex;position:relative}@media (width>=1240px){.writing-article-body{grid-template-columns:minmax(0,1fr) 200px;align-items:start;column-gap:32px;width:calc(100% + 232px);display:grid}.writing-article-body>.writing-reading-column{grid-area:1/1}.writing-article-body>.writing-contents{grid-area:1/2;max-height:calc(100dvh - 128px);margin-top:36px;position:sticky;top:96px}}@media (prefers-reduced-motion:reduce){.writing-contents a{transition:none}}.writing-reading-progress{background:var(--brand);transform-origin:0;z-index:40;pointer-events:none;width:100%;height:2px;position:fixed;top:0;left:0;transform:scaleX(0)}.writing-cover{margin:38px 0}.writing-cover img{border-radius:14px;width:100%;height:auto;display:block}.writing-cover figcaption,.article-figure figcaption{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--muted-foreground);max-width:var(--site-text-width);margin-top:12px}.writing-prose{border-top:1px solid var(--border);overflow-wrap:anywhere;margin-top:36px;padding-top:30px}.writing-prose :where(h2,h3,h4):not(:where(.not-typeset,.not-typeset *)){scroll-margin-top:100px}.writing-prose pre:not(:where(.not-typeset,.not-typeset *)){max-width:100%}.writing-prose img:not(:where(.not-typeset,.not-typeset *)){border-radius:10px;max-width:100%;height:auto;margin-inline:auto;display:block}.writing-prose table:not(:where(.not-typeset,.not-typeset *)){display:block;overflow-x:auto}.article-figure{margin-block:32px}.article-figure img{width:100%;height:auto}.article-callout{font-size:var(--fs-body);line-height:var(--lh-body);border-left:2px solid var(--brand);background:color-mix(in srgb, var(--muted) 55%, var(--background));border-radius:0 10px 10px 0;padding:18px 22px}.article-callout-title{font-size:var(--fs-subtitle);line-height:var(--lh-subtitle);font-variation-settings:var(--site-weight-semibold);margin-bottom:7px;font-weight:550}.article-callout>div>p{color:var(--muted-foreground);margin:0}.article-demo{margin-block:32px}.article-react-example{justify-content:center;align-items:center;line-height:1;display:flex}.writing-article-footer{font-size:var(--fs-caption);line-height:var(--lh-caption);border-top:1px solid var(--border);color:var(--muted-foreground);justify-content:space-between;align-items:center;gap:20px;margin-top:44px;padding-top:24px;display:flex}.writing-article-footer a:hover,.writing-back:hover,.writing-index-bar a:hover{color:var(--foreground)}@media (width>=800px){.article-figure-wide,.article-demo-wide{width:var(--site-wide-width);margin-inline:0}}@media (width<=540px){.writing-entry-with-image{grid-template-columns:minmax(0,1fr) 96px;gap:16px}.writing-entry-cover{width:96px;height:88px}}