/* Connection styling for the V2 illustration only. */
.h2-system[data-connections="v2"] .h2-system-svg {
    margin-left:0;
}
@media (min-width:1001px) {
    .h2-system[data-connections="v2"] .h2-system-svg {
        transform:translateY(-30px);
        /* The decorative SVG must not intercept the unchanged pause control above it. */
        pointer-events:none;
    }
}
.h2-system[data-connections="v2"] .h2-wire {
    stroke-width:1.5;
    stroke-dasharray:none;
    stroke-linecap:butt;
    stroke-linejoin:miter;
    opacity:.8;
    filter:none;
}
.h2-system[data-connections="v2"] .h2-wire-return {
    stroke-width:1.65;
    opacity:.95;
}
.h2-system[data-connections="v2"] .h2-flow-packet {
    stroke-width:1.5;
    stroke-linecap:butt;
}
/* Keep the animation hooks; only the connection lines and moving pulses are visible. */
.h2-system[data-connections="v2"] .h2-route-arrow {
    display:none;
}
/* Replace Web panels in sequence: 100 ms out, then 100 ms in, without cross-fading. */
.h2-system[data-connections="v2"] :is(.h2-web-login,.h2-web-menu,.h2-web-response-primary,.h2-web-dashboard) {
    transition:opacity 100ms ease;
}
.h2-system[data-connections="v2"] .h2-web-login,
.h2-system[data-connections="v2"]:is([data-web-page=profile],[data-web-page=menu],[data-web-page=dashboard]) .h2-web-menu,
.h2-system[data-connections="v2"]:is([data-web-page=profile],[data-web-page=menu]) .h2-web-response-primary,
.h2-system[data-connections="v2"][data-web-page=dashboard] .h2-web-dashboard {
    transition-delay:100ms;
}
.h2-system[data-connections="v2"]:is([data-web-page=profile],[data-web-page=menu],[data-web-page=dashboard]) .h2-web-login {
    transition-delay:0ms;
}