.article-resources{border-top:1px solid var(--line);margin-top:48px;padding-top:28px}.article-resources .article-resources-title{color:var(--ink);margin:0 0 12px;font-size:28px;line-height:1.4}.article-resources .article-resources-intro{color:var(--muted);line-height:1.8}.article-resources .article-resources-list{gap:16px;margin:20px 0 0;padding:0;list-style:none;display:grid}.article-resources .article-resources-item{border:1px solid var(--line);border-radius:16px;padding:22px}.article-resources .article-resources-name{overflow-wrap:anywhere;margin:0;font-size:18px}.article-resources .article-resources-meta{color:var(--muted);font-size:14px;line-height:1.8}.article-resources .article-resources-actions{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.article-resources .article-resources-download{background:var(--blue);color:var(--paper);border-radius:10px;padding:10px 16px;font-weight:700;text-decoration:none}.article-resources .article-resources-source{color:var(--blue);font-size:14px}.article-resources .article-resources-code{color:var(--ink);font-size:14px}.article-resources .article-resources-download:focus-visible,.article-resources .article-resources-source:focus-visible{outline:2px solid var(--coral);outline-offset:4px}@media (width<=640px){.article-resources .article-resources-item{padding:18px}}.article-toc{min-width:0;color:var(--muted)}.article-toc .toc-desktop{display:none}.article-toc .toc-mobile{border:1px solid var(--line);border-radius:14px}.article-toc .toc-summary{color:var(--ink);cursor:pointer;align-items:center;gap:12px;padding:16px 18px;font-size:14px;font-weight:700;list-style:none;display:flex}.article-toc .toc-summary::-webkit-details-marker{display:none}.article-toc .toc-count{color:var(--muted);font-size:12px;font-weight:400}.article-toc .toc-chevron{margin-left:auto;font-size:18px;transition:transform .2s}.article-toc .toc-mobile[open] .toc-chevron{transform:rotate(180deg)}.article-toc .toc-list{overscroll-behavior:contain;max-height:min(440px,60vh);margin:0;padding:0 16px 16px;list-style:none;overflow-y:auto}.article-toc .toc-item+.toc-item{margin-top:4px}.article-toc .toc-link{border-left:2px solid var(--line);color:var(--muted);overflow-wrap:anywhere;padding:9px 12px;font-size:14px;line-height:1.6;text-decoration:none;display:block}.article-toc .toc-link:hover{color:var(--blue)}.article-toc .toc-link[aria-current=location]{color:var(--blue);border-left-color:var(--blue);font-weight:600}.article-toc .toc-link:focus-visible,.article-toc .toc-summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}@media (width>=1320px){.article-toc .toc-desktop{display:block}.article-toc .toc-mobile{display:none}.article-toc .toc-title{color:var(--ink);flex-wrap:wrap;gap:8px;margin:0 0 16px;font-size:14px;font-weight:700;display:flex}.article-toc .toc-list{max-height:calc(100dvh - 180px);padding:0 4px 4px 0}}@media (prefers-reduced-motion:reduce){.article-toc .toc-chevron{transition:none}}.article-body{width:min(760px,100% - 32px);margin:0 auto;padding:72px 0 100px}.article-body.has-toc{grid-template-columns:minmax(0,1fr);display:grid}.article-body .article-intro{min-width:0}.article-body .article-content h2[id],.article-body .article-resources-title{scroll-margin-top:112px}.article-body .meta{color:var(--coral);margin:56px 0 18px;font-size:14px;font-weight:700}.article-body h1{letter-spacing:-.07em;margin:0;font-size:clamp(40px,7vw,68px);line-height:1.15}.article-body .summary{color:var(--muted);font-size:18px;line-height:1.8}.article-body .cover{object-fit:cover;mix-blend-mode:multiply;border-radius:22px;width:100%;height:360px;margin:28px 0 58px}.article-body article{color:#53617a;font-size:17px;line-height:2}.article-body article h2{color:var(--ink);margin:48px 0 14px;font-size:28px;line-height:1.4}.article-body article blockquote{border-left:4px solid var(--mint);color:#365e5a;background:#eaf7f4;margin:28px 0;padding:18px 22px}.article-body article img{object-fit:contain;border-radius:16px;width:100%;max-width:100%;height:auto;margin:32px auto 14px;display:block}.article-body article p:has(>img){margin:32px 0}@media (width>=1320px){.article-body.has-toc{grid-template-columns:220px minmax(0,760px) 220px;column-gap:32px;width:1264px}.article-body.has-toc>:not(.article-toc){grid-column:2}.article-body.has-toc .article-toc{grid-area:2/3/span 4;align-self:start;position:sticky;top:112px}}@media (width<=640px){.article-body{padding-top:48px}.article-body .cover{height:220px;margin-bottom:38px}.article-body article{font-size:15px}}@media (width<=900px){.article-body .article-content h2[id],.article-body .article-resources-title{scroll-margin-top:96px}}