/* generated by anim.py */
.anim-stack .stack{padding-top:64px}
.anim-stack{overflow:hidden;position:relative}
.doc{position:absolute;right:16%;top:-30px;width:30px;height:38px;border-radius:4px;background:#fff;border:1px solid #D5E2F2;box-shadow:0 6px 14px -6px rgba(20,36,59,.4);opacity:0;pointer-events:none;z-index:2}
.doc::before{content:'';position:absolute;left:6px;right:6px;top:8px;height:16px;background:repeating-linear-gradient(#BCD5F1 0 2px,transparent 2px 6px)}
.layer{will-change:transform}
.play .l1{animation:fold-l1 12s ease-in-out infinite}
@keyframes fold-l1{0%,4%{opacity:0;transform:translateY(-56px)}7%{opacity:1;transform:translateY(-56px)}13%{opacity:1;transform:translateY(-56px)}17%{opacity:1;transform:translateY(0)}88%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(0)}}
.play .l1 .doc{animation:doc-l1 12s ease-out infinite}
@keyframes doc-l1{0%,6%{opacity:0;transform:translate(180px,-10px) rotate(14deg)}7%{opacity:1;transform:translate(170px,-10px) rotate(14deg)}11%{opacity:1;transform:translate(0,0) rotate(0)}13%{opacity:0;transform:translate(0,18px) scale(.9,.5)}100%{opacity:0;transform:translate(0,18px)}}
.play .l2{animation:fold-l2 12s ease-in-out infinite}
@keyframes fold-l2{0%,18%{opacity:0;transform:translateY(-56px)}21%{opacity:1;transform:translateY(-56px)}27%{opacity:1;transform:translateY(-56px)}31%{opacity:1;transform:translateY(0)}88%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(0)}}
.play .l2 .doc{animation:doc-l2 12s ease-out infinite}
@keyframes doc-l2{0%,20%{opacity:0;transform:translate(180px,-10px) rotate(14deg)}21%{opacity:1;transform:translate(170px,-10px) rotate(14deg)}25%{opacity:1;transform:translate(0,0) rotate(0)}27%{opacity:0;transform:translate(0,18px) scale(.9,.5)}100%{opacity:0;transform:translate(0,18px)}}
.play .l3{animation:fold-l3 12s ease-in-out infinite}
@keyframes fold-l3{0%,32%{opacity:0;transform:translateY(-56px)}35%{opacity:1;transform:translateY(-56px)}41%{opacity:1;transform:translateY(-56px)}45%{opacity:1;transform:translateY(0)}88%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(0)}}
.play .l3 .doc{animation:doc-l3 12s ease-out infinite}
@keyframes doc-l3{0%,34%{opacity:0;transform:translate(180px,-10px) rotate(14deg)}35%{opacity:1;transform:translate(170px,-10px) rotate(14deg)}39%{opacity:1;transform:translate(0,0) rotate(0)}41%{opacity:0;transform:translate(0,18px) scale(.9,.5)}100%{opacity:0;transform:translate(0,18px)}}
.play .l4{animation:fold-l4 12s ease-in-out infinite}
@keyframes fold-l4{0%,46%{opacity:0;transform:translateY(-56px)}49%{opacity:1;transform:translateY(-56px)}55%{opacity:1;transform:translateY(-56px)}59%{opacity:1;transform:translateY(0)}88%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(0)}}
.play .l4 .doc{animation:doc-l4 12s ease-out infinite}
@keyframes doc-l4{0%,48%{opacity:0;transform:translate(180px,-10px) rotate(14deg)}49%{opacity:1;transform:translate(170px,-10px) rotate(14deg)}53%{opacity:1;transform:translate(0,0) rotate(0)}55%{opacity:0;transform:translate(0,18px) scale(.9,.5)}100%{opacity:0;transform:translate(0,18px)}}
.play .l5{animation:fold-l5 12s ease-in-out infinite}
@keyframes fold-l5{0%,60%{opacity:0;transform:translateY(-56px)}63%{opacity:1;transform:translateY(-56px)}69%{opacity:1;transform:translateY(-56px)}73%{opacity:1;transform:translateY(0)}88%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(0)}}
.play .l5 .doc{animation:doc-l5 12s ease-out infinite}
@keyframes doc-l5{0%,62%{opacity:0;transform:translate(180px,-10px) rotate(14deg)}63%{opacity:1;transform:translate(170px,-10px) rotate(14deg)}67%{opacity:1;transform:translate(0,0) rotate(0)}69%{opacity:0;transform:translate(0,18px) scale(.9,.5)}100%{opacity:0;transform:translate(0,18px)}}
.builder{position:relative;width:100%;max-width:100%;aspect-ratio:16/10;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 70px -36px rgba(20,36,59,.45);overflow:hidden}
.builder .chrome{position:absolute;left:0;right:0;top:0;height:8%;background:var(--mist);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding-left:2.4%}
.builder .chrome i{width:1.4%;aspect-ratio:1;border-radius:50%;background:var(--light)}
.builder .chrome span{margin-left:3%;height:44%;width:40%;border-radius:999px;background:#fff;border:1px solid var(--line)}
.bx{position:absolute;border-radius:10px;box-sizing:border-box}
.bx.solid{background:var(--mist)}
.bx.nav{left:4%;top:12%;width:66%;height:6%;background:var(--navy);border-radius:8px}
.bx.bxhero{left:4%;top:22%;width:66%;height:22%;background:linear-gradient(120deg,#E7F0FB,#BCD5F1)}
.bx.bxhero::before{content:'';position:absolute;left:6%;top:24%;width:46%;height:16%;border-radius:6px;background:var(--navy)}
.bx.bxhero::after{content:'';position:absolute;left:6%;top:56%;width:20%;height:16%;border-radius:999px;background:var(--navy);opacity:.85}
.slot{border:2px dashed var(--light);background:transparent}
.slotA{left:4%;top:48%;width:66%;height:20%}
.slotB{left:4%;top:72%;width:66%;height:16%}
.palette{position:absolute;left:74%;top:12%;width:22%;bottom:6%;border-left:1px solid var(--line);padding-left:3%}
.palette b{position:absolute;left:12%;top:0;font-size:clamp(8px,1.2vw,12px);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.src{border:1.5px solid var(--line);background:#fff}
.srcA{left:76%;top:20%;width:20%;height:10%}
.srcB{left:76%;top:34%;width:20%;height:10%}
.srcC{left:76%;top:48%;width:20%;height:10%}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;padding:5%}
.cards3 em{background:#fff;border:1px solid var(--line);border-radius:6px}
.src.cards3 em{background:var(--mist)}
.strip2{background:var(--navy)}
.strip2::after{content:'';position:absolute;right:6%;top:30%;height:40%;width:22%;border-radius:999px;background:#fff}
.src.strip2{background:var(--navy)}
.src.c3{background:#fff}
.src.c3::before{content:'';position:absolute;left:10%;top:30%;width:60%;height:14%;border-radius:4px;background:var(--light)}
.src.c3::after{content:'';position:absolute;left:10%;top:56%;width:40%;height:14%;border-radius:4px;background:var(--light)}
.dragA{left:4%;top:48%;width:66%;height:20%;background:var(--mist);z-index:3}
.dragB{left:4%;top:72%;width:66%;height:16%;z-index:3}
.cursor{position:absolute;left:37%;top:58%;width:4.2%;opacity:0;z-index:5;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(20,36,59,.35))}
.play .dragA{animation:dragA 12s ease-in-out infinite}
.play .dragB{animation:dragB 12s ease-in-out infinite}
.play .slotA{animation:slotA 12s linear infinite}
.play .slotB{animation:slotB 12s linear infinite}
.play .cursor{animation:cur 12s ease-in-out infinite}
@keyframes dragA{0%,10%{left:76%;top:20%;width:20%;height:10%;box-shadow:none;opacity:1}13%{left:75%;top:19%;width:20%;height:10%;box-shadow:0 18px 30px -12px rgba(20,36,59,.45)}34%{left:6%;top:47%;width:62%;height:20%;box-shadow:0 18px 30px -12px rgba(20,36,59,.45)}38%,90%{left:4%;top:48%;width:66%;height:20%;box-shadow:none;opacity:1}95%{left:4%;top:48%;width:66%;height:20%;opacity:0}96%,100%{left:76%;top:20%;width:20%;height:10%;opacity:0}}
@keyframes dragB{0%,46%{left:76%;top:34%;width:20%;height:10%;box-shadow:none;opacity:1}49%{left:75%;top:33%;width:20%;height:10%;box-shadow:0 18px 30px -12px rgba(20,36,59,.45)}68%{left:6%;top:71%;width:62%;height:16%;box-shadow:0 18px 30px -12px rgba(20,36,59,.45)}72%,90%{left:4%;top:72%;width:66%;height:16%;box-shadow:none;opacity:1}95%{left:4%;top:72%;width:66%;height:16%;opacity:0}96%,100%{left:76%;top:34%;width:20%;height:10%;opacity:0}}
@keyframes slotA{0%,36%{opacity:1}39%,94%{opacity:0}97%,100%{opacity:1}}
@keyframes slotB{0%,70%{opacity:1}73%,94%{opacity:0}97%,100%{opacity:1}}
@keyframes cur{0%{opacity:0;left:60%;top:85%}4%{opacity:1;left:60%;top:85%}10%{left:85%;top:24%;transform:scale(1)}12%{transform:scale(.85)}34%{left:36%;top:56%;transform:scale(.85)}37%{left:37%;top:57%;transform:scale(1)}44%{left:85%;top:38%}48%{transform:scale(.85)}68%{left:36%;top:78%;transform:scale(.85)}71%{left:37%;top:79%;transform:scale(1)}80%{opacity:1;left:50%;top:92%}86%,100%{opacity:0;left:50%;top:92%}}
@media (prefers-reduced-motion:reduce){.play .layer,.play .doc,.play .dragA,.play .dragB,.play .slotA,.play .slotB,.play .cursor{animation:none!important}}