/* Original explanatory sequences. Illustrative, never live status. */
.explainer-scene{min-width:0;width:100%;margin:0;align-self:center}.explainer-scene svg{width:100%;height:auto;display:block}.explainer-scene svg text{font-family:'IBM Plex Sans',Arial,sans-serif;stroke:none}.scene-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;color:#52647e;font-size:13px}.motion-toggle{padding:8px 14px;border:1px solid #cad4e2;border-radius:6px;background:white;color:#102449;font:500 14px 'IBM Plex Sans',sans-serif;cursor:pointer}.motion-toggle:hover{border-color:#102449}.motion-toggle:focus-visible{outline:3px solid #ffce45;outline-offset:3px}
.explainer-scene svg g,.server-light{animation-play-state:paused!important}.motion-running svg g,.motion-running .server-light{animation-play-state:running!important}
.transfer-file{animation:transfer 12s infinite;animation-delay:calc(var(--i)*.65s)}.check-copy{animation:checkcopy 12s infinite;transform-origin:529px 176px}.dns-switch{animation:switchdns 12s infinite}.scene-step{animation:step 12s infinite}.step-1{animation-delay:4s}.step-2{animation-delay:8s}.safe-packet{animation:safe 5s linear infinite;animation-delay:calc(var(--i)*-.8s)}.attack-packet{animation:attack 5s linear infinite;animation-delay:calc(var(--i)*-.8s)}.request-packet{animation:request 12s infinite}.response-packet{animation:response 12s infinite}.page-ready{animation:ready 12s infinite}.server-light{animation:activity 1.2s infinite;animation-delay:calc(var(--i)*.3s)}
@keyframes transfer{0%{opacity:0;transform:translateX(0)}5%,24%{opacity:1}33%,100%{opacity:0;transform:translateX(235px)}}
@keyframes checkcopy{0%,34%,70%,100%{opacity:0;transform:scale(.8)}40%,64%{opacity:1;transform:scale(1)}}
@keyframes switchdns{0%,66%,100%{opacity:.15}74%,96%{opacity:1}}
@keyframes step{0%,30%{opacity:1}34%,96%{opacity:.45}100%{opacity:1}}
@keyframes safe{0%{transform:translateX(0);opacity:0}5%,90%{opacity:1}100%{transform:translateX(530px);opacity:0}}
@keyframes attack{0%{transform:translateX(0);opacity:0}5%,35%{opacity:1}47%,100%{transform:translateX(208px);opacity:0}}
@keyframes request{0%{opacity:0;transform:translateX(0)}5%,25%{opacity:1}33%,100%{opacity:0;transform:translateX(225px)}}
@keyframes response{0%,38%{opacity:0;transform:translateX(0)}43%,64%{opacity:1}70%,100%{opacity:0;transform:translateX(-205px)}}
@keyframes ready{0%,67%,100%{opacity:0}74%,96%{opacity:1}}
@keyframes activity{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.explainer-scene svg g,.explainer-scene .server-light{animation:none!important}.transfer-file,.request-packet,.response-packet,.safe-packet,.attack-packet{display:none}.motion-toggle{display:none}}
@media(max-width:600px){.scene-caption{font-size:12px}.explainer-scene{max-width:640px}.motion-toggle{font-size:13px}}
.explainer-scene .scene-caption{background:#fff;border-radius:0 0 10px 10px;padding:10px 12px;color:#425570}