.anim-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.acard{background:#FFFFFF;border:1px solid var(--rule);border-radius:18px;overflow:hidden;display:grid;align-content:start}
.acard .scene{background:#EEF3F9;padding:14px 14px 8px;border-bottom:1px solid var(--rule)}
.acard .txt{padding:20px 22px 24px;display:grid;gap:8px}
.acard h3{font-size:20px}
.acard p{color:var(--ink-2)}
.aw-strip{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;background:#FFFFFF;border:1px solid var(--rule);border-radius:18px;padding:24px 28px}
.aw-strip .txt{flex:1 1 320px;min-width:0;display:grid;gap:8px}
.aw-strip .txt h3{font-size:20px}
.aw-strip .txt p{color:var(--ink-2)}
.aw-strip .vis{flex:0 1 380px;min-width:0;width:100%;background:#EEF3F9;border-radius:14px;padding:12px}
/* animations: paused until scrolled into view; paused on hover */
.anim *{animation-play-state:paused}
.anim.play *{animation-play-state:running}
.anim.play:hover *{animation-play-state:paused}
.anim svg *{transform-box:fill-box;animation-fill-mode:backwards}
.a-sweep{transform-box:view-box!important;transform-origin:160px 88px;animation:a-rot 4s linear infinite}
@keyframes a-rot{to{transform:rotate(360deg)}}
.a-unk{transform-origin:center;animation:a-unk 6s ease-in-out infinite}
@keyframes a-unk{0%,40%{opacity:.25}50%{opacity:1;transform:scale(1.15)}60%,100%{opacity:1;transform:none}}
.a-tag{animation:a-fade 6s ease infinite}
@keyframes a-fade{0%,52%{opacity:0;transform:translateY(4px)}62%,100%{opacity:1;transform:none}}
.a-env{animation:a-env 6s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes a-env{0%{opacity:0;transform:translateX(-120px)}12%{opacity:1}42%,100%{opacity:1;transform:none}}
.a-shield{transform-origin:center;animation:a-pop 6s ease infinite}
@keyframes a-pop{0%,40%{transform:none}48%{transform:scale(1.14)}56%,100%{transform:none}}
.a-stamp{transform-origin:center;animation:a-stamp 6s ease infinite}
@keyframes a-stamp{0%,46%{opacity:0;transform:scale(1.4)}54%,100%{opacity:1;transform:none}}
.a-ring{transform-origin:center;animation:a-ring 3s ease-out infinite;opacity:.25;transform:scale(.45)}
.a-ring2{animation-delay:1.5s}
@keyframes a-ring{0%{transform:scale(.06);opacity:.75}100%{transform:scale(1);opacity:0}}
.a-wall{animation:a-wall 3s ease infinite}
@keyframes a-wall{0%,40%{fill:#0B2A55}55%{fill:#1170B8}70%,100%{fill:#0B2A55}}
.a-bar{transform-origin:left center;animation:a-bar 7s ease infinite}
@keyframes a-bar{0%{transform:scaleX(0)}38%,100%{transform:none}}
.a-patched{animation:a-fade2 7s ease infinite}
@keyframes a-fade2{0%,38%{opacity:0}46%,100%{opacity:1}}
.a-file{animation:a-file 7s ease infinite;opacity:.4}
@keyframes a-file{0%,48%{opacity:0;transform:translate(24px,-30px)}60%{opacity:1;transform:none}70%{opacity:1}80%,100%{opacity:.4;transform:none}}
.a-q{transform-origin:left center;animation:a-q 7s ease infinite}
@keyframes a-q{0%,68%{opacity:0;transform:scale(.8)}78%,100%{opacity:1;transform:none}}
.a-dot{animation:a-dot 6s step-end infinite}
@keyframes a-dot{0%{opacity:0}8%,100%{opacity:1}}
.a-btn{transform-origin:center;animation:a-press 6s ease infinite;opacity:0}
@keyframes a-press{0%,44%{opacity:1;transform:none}48%{opacity:1;transform:scale(.95)}52%{opacity:1;transform:none}58%,100%{opacity:0}}
.a-deny{transform-origin:center;animation:a-deny 6s ease infinite}
@keyframes a-deny{0%,52%{opacity:0;transform:translateY(6px)}60%,100%{opacity:1;transform:none}}
.a-lock{transform-origin:center;animation:a-lock 7s ease infinite;opacity:0}
@keyframes a-lock{0%,6%{opacity:0;transform:scale(.6)}14%,55%{opacity:1;transform:none}66%,100%{opacity:0;transform:scale(.6)}}
.a-up{animation:a-up 7s ease infinite;opacity:.9}
@keyframes a-up{0%,50%{opacity:0;transform:translateY(8px)}58%{opacity:1;transform:none}100%{opacity:.9}}
.a-ok{transform-origin:left center;animation:a-ok 7s ease infinite}
@keyframes a-ok{0%,66%{opacity:0;transform:scale(.85)}74%,100%{opacity:1;transform:none}}
.a-cur{animation:a-cur 6s ease-in-out infinite;transform:translate(178px,86px)}
@keyframes a-cur{0%{transform:translate(330px,110px)}40%,100%{transform:translate(178px,86px)}}
.a-rep{transform-origin:center;animation:a-press2 6s ease infinite}
@keyframes a-press2{0%,42%{transform:none}46%{transform:scale(.94)}50%,100%{transform:none}}
.a-toast{animation:a-fade3 6s ease infinite}
@keyframes a-fade3{0%,50%{opacity:0;transform:translateX(-8px)}58%,100%{opacity:1;transform:none}}
/* animated before/after diagram */
.nd-spread{stroke-dasharray:1;stroke-dashoffset:0;animation:nd-draw 6s ease infinite}
@keyframes nd-draw{0%{stroke-dashoffset:1}30%,100%{stroke-dashoffset:0}}
.nd-hot{transform-origin:center;animation:nd-hot 2s ease-in-out infinite}
@keyframes nd-hot{50%{transform:scale(1.07)}}
.nd-try{animation:nd-march 1s linear infinite}
@keyframes nd-march{to{stroke-dashoffset:-10}}
.nd-block{transform-origin:center;animation:nd-block 2s ease infinite}
@keyframes nd-block{0%,60%{transform:none}75%{transform:scale(1.35)}90%,100%{transform:none}}
@media (prefers-reduced-motion:reduce){.anim *{animation:none!important}}