.family *{animation-timing-function:ease-in-out;animation-iteration-count:infinite}.family .lid{transform-box:fill-box;transform-origin:center;animation:fam-blink 6s infinite}.family .pB .lid{animation-delay:1.7s}.family .kB .lid{animation-delay:4.4s}@keyframes fam-blink{0%,94%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}.family .kA .armL{transform-box:fill-box;transform-origin:100% 100%;animation:fam-tell 1.4s ease-in-out infinite}.family .kA .armR{transform-box:fill-box;transform-origin:0% 100%;animation:fam-tell 1.4s ease-in-out infinite reverse}@keyframes fam-tell{50%{transform:rotate(-22deg)}}.family .pB .laugh{animation:fam-laugh 7s infinite}@keyframes fam-laugh{0%,14%,37%,to{transform:translateY(0)}17%,23%,29%,35%{transform:translateY(-6px)}20%,26%,32%{transform:translateY(0)}}.family .pB .eyes-laugh{opacity:0;animation:fam-squint 7s infinite}.family .pB .eyes-open{animation:fam-open 7s infinite}@keyframes fam-squint{0%,14%,38%,to{opacity:0}15%,37%{opacity:1}}@keyframes fam-open{0%,14%,38%,to{opacity:1}15%,37%{opacity:0}}.family .pA .cheers{transform-box:fill-box;transform-origin:100% 100%;animation:fam-cheers 6s infinite}@keyframes fam-cheers{0%,30%,60%,to{transform:rotate(0)}40%,50%{transform:rotate(12deg) translateY(-8px)}}.family .kB .bounce{animation:fam-bounce 1.1s infinite}@keyframes fam-bounce{50%{transform:translateY(-8px)}}.family .kB .armL2{transform-box:fill-box;transform-origin:100% 100%;animation:fam-wave 1.1s infinite}.family .kB .armR2{transform-box:fill-box;transform-origin:0% 100%;animation:fam-wave 1.1s infinite reverse}@keyframes fam-wave{50%{transform:rotate(-14deg)}}.family .talk{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:fam-talk 7s infinite}.family .t3{animation-delay:2.2s}.family .t1 .dots circle{animation:fam-dots .9s infinite}.family .t1 .dots circle:nth-child(2){animation-delay:.15s}.family .t1 .dots circle:nth-child(3){animation-delay:.3s}@keyframes fam-dots{0%,60%,to{opacity:.35}30%{opacity:1}}@keyframes fam-talk{0%{opacity:0;transform:scale(.6)}6%,22%{opacity:1;transform:scale(1)}27%,to{opacity:0;transform:scale(.9)}}.family .flame{transform-box:fill-box;transform-origin:50% 100%;animation:fam-flame .9s infinite}@keyframes fam-flame{50%{transform:scale(.85,1.12)}}.family .twinkle circle{animation:fam-twinkle 1.8s infinite}.family .twinkle circle:nth-child(2n){animation-delay:.6s}.family .twinkle circle:nth-child(3n){animation-delay:1.2s}@keyframes fam-twinkle{50%{opacity:.35}}.family .snow circle{animation:fam-snow 4s linear infinite}.family .snow circle:nth-child(2n){animation-delay:-1.5s}.family .snow circle:nth-child(3n){animation-delay:-2.7s}@keyframes fam-snow{0%{transform:translateY(-30px);opacity:0}15%{opacity:1}to{transform:translateY(40px);opacity:0}}.family .glow{animation:fam-glow 6s infinite}@keyframes fam-glow{50%{opacity:.85}}.family-wrap{position:relative;width:100%;height:100%}.family .pea{opacity:0;animation:fam-pea 7s infinite;animation-timing-function:linear}@keyframes fam-pea{0%,58%{opacity:0;transform:translate(0)}60%{opacity:1;transform:translate(0)}63%{transform:translate(-37px,-70px)}66%{transform:translate(-80px,-92px)}69%{transform:translate(-113px,-76px)}72%{transform:translate(-132px,-50px)}72%,86%{opacity:1;transform:translate(-132px,-50px)}90%,to{opacity:0;transform:translate(-132px,-40px)}}.family .kB .armL2{animation:fam-wave 1.1s infinite,fam-fling 7s infinite}@keyframes fam-fling{0%,54%,64%,to{rotate:0deg}58%{rotate:40deg}61%{rotate:-50deg}}.family .plop{opacity:0;animation:fam-plop 7s infinite}@keyframes fam-plop{0%,71%{opacity:0}73%{opacity:1}79%,to{opacity:0}}.family .peabang{opacity:0;transform-box:fill-box;transform-origin:0% 100%;animation:fam-bang 7s infinite}@keyframes fam-bang{0%,72%{opacity:0;transform:scale(.6)}75%,86%{opacity:1;transform:scale(1)}90%,to{opacity:0;transform:scale(.9)}}.family .peaeyes{animation:fam-peaeyes 7s infinite}.family .peasquint{opacity:0;animation:fam-peasquint 7s infinite}@keyframes fam-peaeyes{0%,72%,88%,to{opacity:1}73%,86%{opacity:0}}@keyframes fam-peasquint{0%,72%,88%,to{opacity:0}73%,86%{opacity:1}}@media(prefers-reduced-motion:reduce){.family *{animation:none!important}.family .talk.t3{opacity:1}}.demo{justify-self:center;text-align:center}.demo figcaption{margin-top:18px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}.iphone{width:290px;margin:0 auto;padding:10px;border-radius:48px;background:#05050a;box-shadow:0 40px 90px #1b153040,inset 0 0 0 1.5px #ffffff1f}.iphone video,.iphone img{display:block;width:100%;aspect-ratio:540 / 1170;border-radius:38px;background:var(--paper);object-fit:cover}.iphone .step{position:absolute;z-index:3;left:-44px;top:24%;max-width:200px;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--ink);color:var(--canvas);font-size:.92rem;font-weight:600;line-height:1.25;text-align:left;box-shadow:0 14px 30px #1b153040;rotate:-3deg;transition:opacity .25s ease,translate .25s ease}.iphone .step.out{opacity:0;translate:0 6px}.iphone{position:relative}.tap{position:absolute;width:0;height:0;pointer-events:none}.tap i{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:3px solid var(--coral);opacity:0}.tap b{position:absolute;left:-1.5px;top:-30px;width:3px;height:10px;border-radius:2px;background:var(--coral);opacity:0;transform-origin:1.5px 30px;transform:rotate(calc(var(--r) * 45deg))}.tap.go i{animation:tap-ring .6s ease-out forwards}.tap.go b{animation:tap-ray .55s ease-out forwards}@keyframes tap-ring{0%{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.15)}}@keyframes tap-ray{0%{opacity:0;translate:0 14px}30%{opacity:1}to{opacity:0;translate:0 -4px}}@media(max-width:900px){.iphone{width:250px}}