.diagram{margin:var(--space-6) 0;border-radius:var(--radius);background:var(--paper-2);padding:clamp(1rem,3vw,1.75rem)}.diagram figcaption{margin-top:var(--space-4);font-size:var(--small);color:var(--muted);text-align:center}.diagram svg{filter:drop-shadow(0 10px 18px #232a3d12);width:100%;height:auto;display:block;overflow:visible}.diagram-annotated{gap:var(--space-5);align-items:center;display:grid}@media (width>=768px){.diagram-annotated{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.diagram-annotated figcaption{grid-column:1/-1}}.prose .diagram-legend{gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.prose .diagram-legend li{gap:var(--space-3);font-size:var(--ui);color:var(--ink-2);grid-template-columns:1.75rem 1fr;margin:0;line-height:1.5;display:grid}.diagram-num{color:#fff;width:1.75rem;height:1.75rem;font-size:var(--micro);font-weight:var(--fw-semibold);background:#3b82f6;border-radius:50%;place-items:center;display:grid}.diagram-pair-grid{gap:var(--space-5);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:end;display:grid}.diagram-pair-item p{margin-top:var(--space-3);font-size:var(--ui);text-align:center;line-height:1.5}@media (width<=479px){.diagram-pair-grid{grid-template-columns:1fr}.diagram-pair-item svg{max-width:16rem;margin-inline:auto}}.dns-flow{gap:var(--space-5);align-items:center;display:grid}@media (width>=768px){.dns-flow{grid-template-columns:minmax(0,.9fr) 3.5rem minmax(0,1.4fr);gap:0}}.dns-card{gap:var(--space-1);padding:var(--space-4) var(--space-5);border-radius:var(--radius-m);background:var(--surface);box-shadow:inset 0 0 0 1.5px #232a3d, var(--shadow-card);font-size:var(--small);color:var(--ink-2);line-height:1.45;display:grid}.dns-card strong{font-size:var(--body);color:var(--ink)}.dns-icon{width:2.4rem;height:2.4rem;margin-bottom:var(--space-2);background:var(--paper-2);border-radius:50%;place-items:center;display:grid}.dns-icon.is-blue{background:#3b82f6}.dns-icon svg{fill:none;stroke:#232a3d;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;filter:none;width:1.3rem;height:1.3rem}.dns-icon.is-blue svg{stroke:#fff}.dns-branches{gap:var(--space-4);display:grid;position:relative}.dns-branch{gap:var(--space-2);padding-left:var(--space-6);display:grid;position:relative}.dns-branch:before{content:"";border-bottom:2.5px dashed #9fb6ee;border-left:2.5px dashed #9fb6ee;border-bottom-left-radius:10px;width:1.1rem;position:absolute;top:0;bottom:50%;left:.5rem}.dns-branch.is-keep:before{border-color:#c3c8d4}.dns-tag{border-radius:var(--radius-pill);font-size:var(--micro);font-weight:var(--fw-semibold);letter-spacing:.02em;justify-self:start;padding:.2rem .7rem}.is-change .dns-tag{color:#fff;background:#3b82f6}.is-keep .dns-tag{background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}.is-keep .dns-card{box-shadow:inset 0 0 0 1.5px #c3c8d4}.diagram .dns-fork{display:none}@media (width>=768px){.diagram .dns-fork{filter:none;width:100%;height:100%;display:block}.dns-fork path{fill:none;stroke-width:2.5px;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}.dns-fork .is-change{stroke:#9fb6ee}.dns-fork .is-keep{stroke:#c3c8d4}.dns-branch{padding-left:0}.dns-branch:before{display:none}}