/* drawings: build in steps, then float */
.ill{position:relative;margin:0}
.ill svg{width:100%;height:auto;display:block;overflow:visible}
.ill *{transform-box:fill-box}
.ill .b{opacity:0;transform-origin:center}
.ill.on .b{animation:irise .7s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--d)}
.ill.on .b.pop{animation-name:pop;animation-timing-function:cubic-bezier(.2,.8,.3,1.25)}
.ill.on .b.fade{animation-name:fade;animation-duration:.6s}
.ill.on .b.drop{animation-name:drop;animation-duration:.9s;animation-timing-function:cubic-bezier(.3,1.35,.5,1)}
.ill.on .b.fly{animation-name:fly;animation-duration:.75s;animation-timing-function:cubic-bezier(.2,.8,.25,1.05)}
@keyframes irise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes drop{from{opacity:0;transform:translateY(-170px)}25%{opacity:1}to{opacity:1;transform:none}}
@keyframes fly{from{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.35)}30%{opacity:1}to{opacity:1;transform:none}}
.ill.on .fl{animation:float var(--fd) ease-in-out infinite;animation-delay:var(--fp)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--fa) * -1))}}
.ill .dr{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.ill.on .dr{animation:draw .7s ease-out forwards;animation-delay:var(--d)}
@keyframes draw{to{stroke-dashoffset:0}}
.ill .pk,.ill .pks{opacity:0}
.ill.on .pk{animation:pk var(--pd) cubic-bezier(.45,0,.55,1) infinite;animation-delay:var(--d)}
@keyframes pk{0%{opacity:0;transform:none}12%{opacity:1}55%{transform:translate(var(--dx),0)}88%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.ill.on .pks{animation:pks 2.2s infinite 1.8s}
@keyframes pks{0%,78%{opacity:0;transform:none}82%{opacity:1;transform:none}92%{transform:translate(var(--dx),0)}99%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.ill .sb{opacity:0}
.ill.on .sa{animation:sa 4.4s infinite 1.8s}
.ill.on .sb{animation:sb 4.4s infinite 1.8s}
@keyframes sa{0%,44%{opacity:1}48%,96%{opacity:0}100%{opacity:1}}
@keyframes sb{0%,44%{opacity:0}48%,96%{opacity:1}100%{opacity:0}}
.ill.on .key{animation:key 2.2s infinite 1.8s}
@keyframes key{0%,74%,86%,100%{transform:none}78%,82%{transform:translateY(3px)}}
.ill .pulse{transform-origin:center;opacity:0}
.ill.on .pulse{animation:pulse 2.2s infinite 1.8s}
@keyframes pulse{0%,78%{opacity:0;transform:scale(.6)}82%{opacity:.45;transform:scale(.7)}100%{opacity:0;transform:scale(3.2)}}
.ill.on .blink{animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.ill .caret{animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ill.on .car{animation:car 6s infinite 1.2s}
@keyframes car{0%,25%{transform:none}33%,58%{transform:translateX(-120px)}66%,91%{transform:translateX(-240px)}100%{transform:none}}
.ill .dots circle{fill:#34313D}
.ill.on .dots circle{animation:dot 6s infinite 1.2s}
.ill.on .dots circle:nth-child(2){animation-delay:3.2s}.ill.on .dots circle:nth-child(3){animation-delay:5.2s}
@keyframes dot{0%,30%{fill:#ECEAF1}34%,100%{fill:#34313D}}
.ill .swipe{opacity:0}
.ill.on .swipe{animation:swipe 2s infinite 1.6s}
@keyframes swipe{0%{opacity:0;transform:none}15%{opacity:.5}55%{opacity:.5;transform:translateX(-56px)}70%,100%{opacity:0;transform:translateX(-56px)}}
.ill.on .spin{transform-origin:center;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ill .sharp .bars rect{transform-origin:bottom;transform:scaleY(0)}
.ill.on .sharp .bars rect{animation:grow .7s cubic-bezier(.2,.8,.3,1) forwards .9s}
.ill.on .sharp .bars rect:nth-child(2){animation-delay:1s}.ill.on .sharp .bars rect:nth-child(3){animation-delay:1.1s}.ill.on .sharp .bars rect:nth-child(4){animation-delay:1.2s}.ill.on .sharp .bars rect:nth-child(5){animation-delay:1.3s}
@keyframes grow{to{transform:none}}
.ill .cursor{transform:translate(200px,150px)}
.ill.on .cursor{animation:cur 5s infinite 1.6s}
@keyframes cur{0%{transform:translate(200px,150px)}40%,48%{transform:translate(409px,235px)}44%{transform:translate(409px,235px) scale(.85)}100%{transform:translate(200px,150px)}}
.ill.on .nb{animation:nb 5s infinite 1.6s}
@keyframes nb{0%,42%,52%,100%{fill:#34313D}44%,48%{fill:#7B4DFF}}
.ill[data-k="this"].on .sa,.ill[data-k="this"].on .sb{animation-duration:5s;animation-delay:1.6s}
.ill.on .gone{animation:gone .35s forwards;animation-delay:var(--g)}
@keyframes gone{to{opacity:0}}
.ill .fillx{transform-origin:left;transform:scaleX(0)}
.ill.on .fillx{animation:fillx 1.2s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d)}
@keyframes fillx{to{transform:none}}
.ill.on .wrong{animation:wrongfix 1.6s forwards 1.2s}
@keyframes wrongfix{0%,40%{fill:#C2412E}100%{fill:#5B5CFF}}
.ill .scan{opacity:0}
.ill.on .scan{animation:scan 1.1s ease-in-out 1s forwards}
@keyframes scan{0%{opacity:.0;transform:translateX(0)}10%{opacity:.7}90%{opacity:.7}100%{opacity:0;transform:translateX(270px)}}
@media (prefers-reduced-motion:reduce){.ill *{animation:none!important}.ill .b{opacity:1}.ill .dr{stroke-dashoffset:0}.ill .sharp .bars rect{transform:none}.ill .pk,.ill .pks,.ill .swipe{display:none}}