.dg-list{gap:40px;display:grid}.dg{margin:0}.dg__panel{border:1px solid var(--k-line,#d6dbe4);box-shadow:var(--k-shadow,none);background:#fff;border-radius:12px;padding:clamp(8px,2vw,20px)}.dg__panel img{width:100%;height:auto;display:block}.dg figcaption{gap:10px;padding-top:16px;display:grid}.dg__title{margin:0;font-size:1.02rem;line-height:1.5}.dg__desc{color:var(--k-muted,#5b6270);gap:6px;margin:0;padding-left:1.2em;font-size:.98rem;line-height:1.55;display:grid}.dg__open{margin:0;font-size:.95rem}.dg__open a{text-underline-offset:3px;font-weight:600;text-decoration:underline}.dg__open a:after{content:" ↗";text-decoration:none;display:inline-block}.dg__zoom{cursor:zoom-in;display:block}.dg__hint{color:var(--k-muted,#5b6270);margin:0;font-size:.9rem}@media (width>=700px){.dg__hint{display:none}}.a2{--a2-bg:#fff;--a2-node-fill:#fff;--a2-node-stroke:#94a3b8;--a2-text:#0f172a;--a2-muted:#475569;--a2-line:#334155;--a2-async:#b45309;--a2-halo:#fff;--a2-client-f:#e6f1fa;--a2-client-s:#0072b2;--a2-app-f:#f3e8f5;--a2-app-s:#9c4f86;--a2-async-f:#fdf1dc;--a2-async-s:#b97a00;--a2-data-f:#e1f3ec;--a2-data-s:#007a5a;--a2-third-f:#f1f5f9;--a2-third-s:#64748b;--a2-badge-bg:#7a3466;--a2-badge-t:#fff;margin:24px 0 8px}.a2__title{margin:0 0 4px;font-size:1.05rem;line-height:1.35}.a2__note{color:var(--a2-muted,#475569);margin:0 0 14px;font-size:.9rem}.a2__stage{background:var(--a2-bg);border:1px solid color-mix(in srgb, var(--a2-node-stroke) 45%, transparent);border-radius:14px;padding:10px;container:a2/inline-size}.a2__svg{text-rendering:geometricprecision;width:100%;height:auto;font-family:inherit;display:block}.a2__svg--d{display:none}.a2__svg--p{max-width:480px;margin:0 auto}@container a2 (width>=1080px){.a2__svg--d{display:block}.a2__svg--p{display:none}}.a2__zone-box{fill:var(--a2-client-f);stroke:var(--a2-client-s);stroke-width:1.5px}.a2__zone--client .a2__zone-box{fill:var(--a2-client-f);stroke:var(--a2-client-s)}.a2__zone--app .a2__zone-box{fill:var(--a2-app-f);stroke:var(--a2-app-s)}.a2__zone--async .a2__zone-box,.a2__zone-box.a2__zone--async{fill:var(--a2-async-f);stroke:var(--a2-async-s)}.a2__zone--data .a2__zone-box{fill:var(--a2-data-f);stroke:var(--a2-data-s)}.a2__zone--third .a2__zone-box{fill:var(--a2-third-f);stroke:var(--a2-third-s)}.a2__zone-box.is-dashed{stroke-dasharray:6 4}.a2__zone-t{letter-spacing:.06em;text-transform:uppercase;fill:var(--a2-muted);font-size:13px;font-weight:600}.a2__zone-n{fill:var(--a2-muted);font-size:12px}.a2__node-box{fill:var(--a2-node-fill);stroke-width:1.5px}.a2__node--client .a2__node-box{stroke:var(--a2-client-s)}.a2__node--app .a2__node-box{stroke:var(--a2-app-s)}.a2__node--async .a2__node-box{stroke:var(--a2-async-s)}.a2__node--data .a2__node-box{stroke:var(--a2-data-s)}.a2__node--third .a2__node-box{stroke:var(--a2-third-s)}.a2__label{fill:var(--a2-text);font-size:15px;font-weight:600}.a2__sub{fill:var(--a2-muted);font-size:13px}.a2__link path,path.a2__lg{fill:none;stroke-width:2px;stroke-linecap:round}.a2__link--sync path,path.a2__link--sync{stroke:var(--a2-line)}.a2__link--async path,path.a2__link--async{stroke:var(--a2-async);stroke-dasharray:6 4}.a2__ah--sync{fill:var(--a2-line)}.a2__ah--async{fill:var(--a2-async)}.a2__dot{fill:var(--a2-line)}.a2__link--async .a2__dot{fill:var(--a2-async)}.a2__lab{fill:var(--a2-text);paint-order:stroke;stroke:var(--a2-halo);stroke-width:4px;stroke-linejoin:round;font-size:13px;font-weight:500}.a2__badge circle{fill:var(--a2-badge-bg);stroke:var(--a2-bg);stroke-width:2px}.a2__badge text{fill:var(--a2-badge-t);font-size:13px;font-weight:700}.a2__lg-t{fill:var(--a2-text);font-size:13px}.a2__sum{margin:14px 0 6px;font-weight:600}.a2__steps{gap:6px;margin:6px 0 0;padding-left:1.4rem;display:grid}.a2__steps li{line-height:1.55}.a2__steps li::marker{font-weight:700}@media (prefers-reduced-motion:no-preference){.a2__badge circle,.a2__link path,.a2__lab{transition:stroke-width .15s,r .15s}}.a2:has(li[data-n="1"]:hover) .a2__badge[data-step="1"] circle,.a2:has(li[data-n="2"]:hover) .a2__badge[data-step="2"] circle,.a2:has(li[data-n="3"]:hover) .a2__badge[data-step="3"] circle,.a2:has(li[data-n="4"]:hover) .a2__badge[data-step="4"] circle,.a2:has(li[data-n="5"]:hover) .a2__badge[data-step="5"] circle{r:14}.a2:has(li[data-n="2"]:hover) .a2__link[data-step="2"] path,.a2:has(li[data-n="3"]:hover) .a2__link[data-step="3"] path,.a2:has(li[data-n="4"]:hover) .a2__link[data-step="4"] path,.a2:has(li[data-n="5"]:hover) .a2__link[data-step="5"] path{stroke-width:3.6px}.a2__svg--p .a2__label{font-size:16px}.a2__svg--p .a2__sub{font-size:14px}.a2__svg--p .a2__zone-t,.a2__svg--p .a2__zone-n,.a2__svg--p .a2__lab,.a2__svg--p .a2__lg-t{font-size:13.5px}.a2__svg--p .a2__badge text{font-size:14px}