.diagram-figure{margin:0;background:var(--color-surface);border:1px solid var(--color-hairline-strong);border-radius:0;box-shadow:none;padding:clamp(20px,3vw,32px)}.diagram-canvas{padding-block:8px;max-width:100%;overflow-x:auto;container:diagram/inline-size}.diagram-canvas:focus-visible{outline:2px solid var(--color-red);outline-offset:4px}.diagram-svg{display:block;max-width:none;height:auto;margin:0 auto}.diagram-svg-wide{width:680px}.diagram-svg-stacked{display:none;width:320px}@container diagram (max-width: 679px){.diagram-svg-wide{display:none}.diagram-svg-stacked{display:block}}.diagram-caption{margin:16px 0 0;max-width:62ch;color:var(--color-muted);text-align:left}#main .diagram-caption,.diagram-caption{font-size:var(--home-type-control);line-height:1.6}.diagram-caption .diagram-caption-label{display:flex;margin-bottom:8px}@media (max-width:480px){.diagram-figure{padding:20px 12px}}.diagram-svg .d-box{fill:var(--color-surface);stroke:var(--color-ink);stroke-width:1.4;vector-effect:non-scaling-stroke}.diagram-svg .d-core{stroke:var(--color-red);stroke-width:2}.diagram-svg .d-flow{stroke:var(--color-ink);stroke-width:1.4;fill:none;vector-effect:non-scaling-stroke}.diagram-svg .d-flow-red{stroke:var(--color-red);stroke-width:2.5;stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke}.diagram-svg .d-head{fill:var(--color-ink)}.diagram-svg .d-head-red,.diagram-svg .d-num{fill:var(--color-red)}.diagram-svg .d-numtxt{font-family:var(--font-mono);font-weight:700;fill:var(--color-on-dark)}.diagram-svg .d-t{font-family:var(--font-mono);font-weight:600;fill:var(--color-ink)}.diagram-svg .d-t2{font-family:var(--font-mono);font-weight:500;fill:var(--color-muted)}.diagram-svg .d-red{font-family:var(--font-mono);font-weight:600;fill:var(--color-red)}.diagram-svg .d-dot,.diagram-svg .d-ink{fill:var(--color-ink)}.diagram-svg .d-ring{fill:var(--color-surface);stroke:var(--color-red);stroke-width:2;vector-effect:non-scaling-stroke}.diagram-svg .d-live{stroke:var(--color-red);stroke-width:2.5;stroke-linecap:round}.diagram-svg .d-dash,.diagram-svg .d-live{fill:none;vector-effect:non-scaling-stroke}.diagram-svg .d-dash{stroke:var(--color-red);stroke-width:1.6;stroke-dasharray:3 7;stroke-linecap:round}.diagram-svg .d-check{stroke:var(--color-red);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none;vector-effect:non-scaling-stroke}.diagram-svg .d-line{stroke:var(--color-ink);stroke-width:1.4;fill:none;vector-effect:non-scaling-stroke}.d-play{display:block}.dq-hl>*{fill:none;stroke:var(--color-red);stroke-linecap:round;stroke-linejoin:round;opacity:0}.dq-hl-in,.dq-hl-out{stroke-width:3;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1}.dq-hl-box{stroke-width:2.5}.dq-hl-ring{stroke-width:3;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1}@media (prefers-reduced-motion:no-preference){.d-play[data-play=true] .dq-hl-in{animation:dq-in 2.6s cubic-bezier(.22,1,.36,1) both}.d-play[data-play=true] .dq-hl-box{animation:dq-box 2.6s ease both}.d-play[data-play=true] :is(.dq-hl-out,.dq-hl-ring){animation:dq-out 2.6s cubic-bezier(.22,1,.36,1) both}}@keyframes dq-in{0%{opacity:1;stroke-dashoffset:1}42%{opacity:1;stroke-dashoffset:0}82%{opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:0}}@keyframes dq-box{0%,34%{opacity:0}46%,82%{opacity:1}to{opacity:0}}@keyframes dq-out{0%,56%{opacity:1;stroke-dashoffset:1}84%{opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:0}}