.zoom-demo{--zoom-height:clamp(260px,54svh,460px);--zoom-inset:88px;margin:30px 0 36px;max-width:100%}
.zoom-toolbar,.zoom-downloads{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
.zoom-toolbar{border-top:1px solid #cfd3d2;padding:18px 0 8px}
.zoom-toolbar .eyebrow{flex:1 1 230px}
.zoom-toolbar button,.zoom-toolbar a,.zoom-downloads a{font-size:13px;min-height:44px;display:inline-flex;align-items:center}
.article-section .zoom-mode{font-size:13px;line-height:1.6;color:#46524b;margin:0 0 18px}
.zoom-track{position:relative;height:var(--zoom-height)}
.zoom-animated .zoom-track{height:calc(var(--zoom-height) + 110svh)}
.zoom-stage{position:relative;top:0;height:var(--zoom-height);overflow:hidden;isolation:isolate;background:#75ddf1;border-radius:3px}
.zoom-animated .zoom-stage{position:sticky;top:var(--zoom-inset)}
.zoom-world,.zoom-mask{position:absolute;inset:0;transform-origin:50% 50%;pointer-events:none}
.zoom-world svg,.zoom-mask svg{display:block;width:100%;height:100%}
.zoom-mask{display:none}
.zoom-animated .zoom-mask{display:block}
.zoom-overlay{position:absolute;inset:20px 22px auto;display:flex;justify-content:space-between;gap:12px;z-index:2;font:700 10px/1.5 Manrope,Arial,sans-serif;letter-spacing:.12em;color:#fff;mix-blend-mode:difference}
.zoom-demo figcaption{font-size:13px;line-height:1.7;color:#46524b;padding-top:18px;scroll-margin-top:135px}
.zoom-downloads{margin-top:15px}
.zoom-storyboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0}
.zoom-storyboard>div{padding:17px 14px;background:#e9f1ed;border-top:4px solid #005957}
.zoom-storyboard strong{font-size:20px;display:block;margin-bottom:10px}
.zoom-storyboard p{font-size:13px!important;line-height:1.6!important}
.article-code{max-width:100%;min-width:0;background:#101817;color:#e6f1eb;margin:24px 0;border-radius:3px}
.code-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid #41564c;flex-wrap:wrap;font-size:12px}
.code-toolbar button{padding:9px 12px;background:#d6f52e;border:0;color:#101111;border-radius:2px;min-height:44px}
.code-toolbar [role=status]{font-size:12px}
.article-code pre{margin:0;padding:22px;max-width:100%;overflow:auto;tab-size:2;font:13px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace}
.article-code code{font:inherit;white-space:pre}
.article-code details>summary{padding:15px 18px;cursor:pointer;font-size:14px}
.reading-layout:has(.zoom-demo) .article-aside{max-height:calc(100svh - 135px);overflow-y:auto;padding-right:10px;scrollbar-width:thin}
@media(max-width:760px){.zoom-demo{--zoom-inset:126px;--zoom-height:clamp(240px,48svh,380px)}.zoom-animated .zoom-track{height:calc(var(--zoom-height) + 75svh)}.zoom-storyboard{gap:7px}.zoom-storyboard>div{padding:12px 10px}.zoom-storyboard strong{font-size:17px}.article-code pre{padding:16px;font-size:12px}}
@media(max-width:420px){.zoom-storyboard{grid-template-columns:1fr}.zoom-storyboard>div{display:grid;grid-template-columns:55px 1fr;gap:12px}.zoom-storyboard strong{margin:0}}
@media(prefers-reduced-motion:reduce){.zoom-animated .zoom-track{height:var(--zoom-height)}.zoom-animated .zoom-stage{position:relative;top:0}.zoom-animated .zoom-mask{display:none}.zoom-world{transform:none!important}}