/* The original right-hand, 4:3 illustration footprint, with two aligned scenes. */
.routing-demo{--route-ink:#8e7d90;--route-video:#ba947e;--route-image:#899486;--route-split:30%;--route-scale:1;--route-zoom:1.0816;position:relative;grid-column:2;grid-row:1/3;min-width:0;width:100%;aspect-ratio:4/3;overflow:visible;isolation:isolate;border:1px solid transparent;border-radius:0;background:transparent;scroll-margin-top:110px}
.routing-canvas{position:absolute;left:0;top:0;width:720px;height:540px;transform:scale(var(--route-scale));transform-origin:0 0}
.routing-stage{position:absolute;left:24px;right:24px;top:50%;display:grid;grid-template-columns:40px minmax(150px,1fr) 190px;height:380px;margin:0;transform:translateY(-50%) scale(var(--route-zoom));transform-origin:center}
.routing-scene{position:absolute;inset:0;pointer-events:none}
.routing-before{z-index:2;clip-path:inset(0 calc(100% - var(--route-split)) 0 0)}
.routing-after{clip-path:inset(0 0 0 var(--route-split))}
.routing-wires{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.routing-wires path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.routing-tangles,.routing-paths{opacity:1}
.routing-tangles path{stroke:#b4a99c;stroke-width:.75;opacity:.52}
.routing-tangles path[data-strand="0"]{stroke-width:.95;opacity:.78}
.routing-line{stroke:var(--route-ink);stroke-width:1.1;opacity:.88}
.routing-line[data-family="video"]{stroke:var(--route-video)}
.routing-line[data-family="image"]{stroke:var(--route-image)}
.routing-packet{color:var(--route-ink);pointer-events:none}
.routing-packet[data-family="video"]{color:var(--route-video)}
.routing-packet[data-family="image"]{color:var(--route-image)}
.routing-packet-tail{stroke:currentColor;stroke-width:1.5;opacity:.24}
.routing-packet-beam{stroke:currentColor;stroke-width:1.9;opacity:.76}
.routing-packet-halo{fill:currentColor;opacity:.18}
.routing-packet-head{fill:currentColor;stroke:#fffdf8;stroke-width:.3}
.routing-packet-spark{fill:#fffdf8;opacity:.95}
.routing-hub-response{fill:none;stroke:#bdaa96;stroke-width:1.2;vector-effect:non-scaling-stroke}
.routing-sources{grid-column:1;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-evenly;padding:8px 0}
.routing-source{position:relative;display:grid;place-items:center;min-height:34px}
.routing-source-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ddd5c9;border-radius:9px;background:#fcfaf5;box-shadow:0 2px 7px #74644906}
.routing-source-icon img{display:block;width:20px;height:20px;object-fit:contain}
.routing-column-label{display:none}
.routing-port{position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:5px;height:5px;border:1px solid #b8aa9d;background:var(--cloud,#fafaf6);border-radius:50%;z-index:2}
.routing-models{position:relative;z-index:1;grid-column:3;display:flex;flex-direction:column;justify-content:space-between;padding:0}
.routing-model-group{display:grid;gap:4px;position:relative}
.routing-group-label{font:11px/1.4 var(--sans,Arial,sans-serif);color:#8e8175;margin:0 0 2px;display:flex;align-items:center;gap:6px}
.routing-group-label:before{content:"";width:3px;height:3px;border-radius:50%;background:var(--route-ink);opacity:.65}
.routing-model-group[data-family="video"] .routing-group-label:before{background:var(--route-video)}
.routing-model-group[data-family="image"] .routing-group-label:before{background:var(--route-image)}
.routing-model{position:relative;display:flex;align-items:center;gap:8px;height:22px;padding:0 10px;border:1px solid #e2dcd2;border-radius:5px;background:#fffdf7e6;color:#48413b}
.routing-model img{display:block;width:17px;height:17px;object-fit:contain;opacity:.9}
.routing-model-name{font:12px/1.4 var(--sans,Arial,sans-serif);white-space:nowrap}
.routing-model .routing-port{left:-3px;right:auto;border-color:var(--route-ink)}
.routing-model[data-family="video"] .routing-port{border-color:var(--route-video)}
.routing-model[data-family="image"] .routing-port{border-color:var(--route-image)}
.routing-hub{position:absolute;left:44%;top:50%;transform:translate(-50%,-50%);width:69px;height:69px;display:grid;place-items:center;z-index:2}
.routing-hub-mark{position:relative;display:grid;place-items:center;width:100%;height:100%;border:1px solid #c9bbab;border-radius:15px;background:#fffcf6;box-shadow:0 4px 13px #73614d10,0 1px 2px #73614d0a}
.routing-wordmark{display:block;padding-left:1.1px;font:600 17px/1 Arial,sans-serif;letter-spacing:1.1px;color:#51443a}
.routing-hub-copy{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;text-align:center}
.routing-hub-copy span{display:block;font:9px/1.4 var(--sans,Arial,sans-serif);color:#9d8b79}
.routing-slider{position:absolute;left:var(--route-split);top:0;bottom:0;width:calc(44px / var(--route-scale) / var(--route-zoom));transform:translateX(-50%);z-index:5;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.routing-divider-line{position:absolute;left:calc(50% - .5px);top:0;bottom:0;width:1px;background:#bdaa96;box-shadow:0 0 0 1px #fffcf640;pointer-events:none}
.routing-grip{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:38px;height:38px;transform:translate(-50%,-50%);border:1px solid #bdaa96;border-radius:50%;background:#fffcf6;box-shadow:0 2px 8px #79614a0b;pointer-events:none}
.routing-grip svg{width:23px;height:23px;stroke:#8a7460;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.routing-slider:focus-visible .routing-grip{outline:2px solid #a38c7b;outline-offset:4px}
.routing-dragging .routing-grip{box-shadow:0 2px 15px #79614a20}
.routing-dragging .routing-stage{user-select:none;-webkit-user-select:none}
.routing-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.routing-demo:not(.routing-traffic-running) .routing-traffic,.routing-demo.routing-still .routing-traffic,body.motion-off .routing-traffic,body.hoya-motion-off .routing-traffic{display:none}
@media(max-width:800px){.routing-demo{grid-column:1;grid-row:1;max-width:640px;margin:0 auto 35px}}
@media(prefers-reduced-motion:reduce){.routing-traffic{display:none}}