.ReRenderExample_container__pyyEL{display:grid;grid-template-columns:1;justify-items:center;margin:3em 0;font-size:1.25rem;--intro-duration:400ms;--intro-delay:700ms;--loop-duration:4000ms}.ReRenderExample_container__pyyEL svg{max-width:calc(600px * 1.11)}.ReRenderExample_flash__eBzEi,.ReRenderExample_greetingBonjour__HPs_B,.ReRenderExample_greetingHola__6KeVL,.ReRenderExample_snapshotNew__2GPyn,.ReRenderExample_snapshotUImove__SzGie,.ReRenderExample_stateContainer__dCyMx,.ReRenderExample_stateOne__S8g2_,.ReRenderExample_stateTwo__A_G0q,.ReRenderExample_textHandleClick__fRPnV{opacity:0}.ReRenderExample_snapshotExtra__p99LT{opacity:.3}.ReRenderExample_snapshotExtra__p99LT,.ReRenderExample_snapshotNew__2GPyn>rect,.ReRenderExample_snapshot__yIw_W>rect,.ReRenderExample_stateContainer__dCyMx>rect{vector-effect:non-scaling-stroke}.ReRenderExample_snapshotNew__2GPyn{transform-box:fill-box;transform-origin:top center}.ReRenderExample_greeting__BVhuR,.ReRenderExample_number__Gs7Xa,.ReRenderExample_stateContainer__dCyMx{transform-box:fill-box;transform-origin:center center}.ReRenderExample_greetingHello__uW7qn{transform:translateY(-.77em)}.ReRenderExample_intro__gSA1g .ReRenderExample_stateContainer__dCyMx,.ReRenderExample_intro__gSA1g .ReRenderExample_textHandleClick__fRPnV{animation:var(--intro-duration) linear forwards}.ReRenderExample_intro__gSA1g .ReRenderExample_stateContainer__dCyMx{animation-name:ReRenderExample_introStateContainer__uZjwP}.ReRenderExample_intro__gSA1g .ReRenderExample_textHandleClick__fRPnV{animation-name:ReRenderExample_introTextHandleClick__T6_0Q}.ReRenderExample_intro__gSA1g .ReRenderExample_snapshotExtra__p99LT{animation:var(--loop-duration) linear forwards;animation-name:ReRenderExample_introSnapshotExtra__yUnZT}.ReRenderExample_hello__SA5PH.ReRenderExample_intro__gSA1g .ReRenderExample_stateZero__IC914{animation:linear forwards;animation-name:ReRenderExample_introStateSquare__MC8xx,ReRenderExample_stateOut__Onhjn;animation-duration:var(--intro-duration),var(--loop-duration);animation-delay:0ms,var(--intro-delay)}.ReRenderExample_intro__gSA1g .ReRenderExample_flash__eBzEi,.ReRenderExample_intro__gSA1g .ReRenderExample_greetingHello__uW7qn,.ReRenderExample_intro__gSA1g .ReRenderExample_greetingHola__6KeVL,.ReRenderExample_intro__gSA1g .ReRenderExample_greetingName__w8Kkv,.ReRenderExample_intro__gSA1g .ReRenderExample_snapshotExtra__p99LT,.ReRenderExample_intro__gSA1g .ReRenderExample_snapshotNew__2GPyn,.ReRenderExample_intro__gSA1g .ReRenderExample_snapshotUImove__SzGie,.ReRenderExample_intro__gSA1g .ReRenderExample_snapshot__yIw_W,.ReRenderExample_intro__gSA1g .ReRenderExample_stateOne__S8g2_{animation-delay:var(--intro-delay)}.ReRenderExample_flash__eBzEi,.ReRenderExample_greetingBonjour__HPs_B,.ReRenderExample_greetingHello__uW7qn,.ReRenderExample_greetingHola__6KeVL,.ReRenderExample_greetingName__w8Kkv,.ReRenderExample_snapshotNew__2GPyn,.ReRenderExample_snapshotUImove__SzGie,.ReRenderExample_snapshot__yIw_W,.ReRenderExample_stateOne__S8g2_,.ReRenderExample_stateTwo__A_G0q,.ReRenderExample_stateZero__IC914{animation:var(--loop-duration) linear forwards}.ReRenderExample_loop__oNxdO .ReRenderExample_snapshotExtra__p99LT{transform:translate(-.3em)}.ReRenderExample_loop__oNxdO .ReRenderExample_greetingHello__uW7qn,.ReRenderExample_loop__oNxdO .ReRenderExample_stateZero__IC914{opacity:0}.ReRenderExample_loop__oNxdO :is(.ReRenderExample_textHandleClick__fRPnV,.ReRenderExample_stateContainer__dCyMx){opacity:1}:is(.ReRenderExample_hello__SA5PH,.ReRenderExample_hola__oWABr,.ReRenderExample_bonjour__9oBLv) .ReRenderExample_flash__eBzEi{animation-name:ReRenderExample_flash__eBzEi}:is(.ReRenderExample_hello__SA5PH,.ReRenderExample_hola__oWABr,.ReRenderExample_bonjour__9oBLv) .ReRenderExample_snapshotNew__2GPyn{animation-name:ReRenderExample_snapshotNew__2GPyn}:is(.ReRenderExample_hello__SA5PH,.ReRenderExample_hola__oWABr,.ReRenderExample_bonjour__9oBLv) .ReRenderExample_snapshot__yIw_W{animation-name:ReRenderExample_snapshot__yIw_W}:is(.ReRenderExample_hello__SA5PH,.ReRenderExample_hola__oWABr,.ReRenderExample_bonjour__9oBLv) .ReRenderExample_snapshotUImove__SzGie{animation-name:ReRenderExample_snapshotUImove__SzGie}.ReRenderExample_hello__SA5PH .ReRenderExample_stateZero__IC914{animation-name:ReRenderExample_stateOut__Onhjn}.ReRenderExample_hello__SA5PH .ReRenderExample_stateOne__S8g2_{animation-name:ReRenderExample_stateIn____r_y}.ReRenderExample_hello__SA5PH .ReRenderExample_greetingHello__uW7qn{opacity:1;animation-name:ReRenderExample_greetingOut__EAr_C}.ReRenderExample_hello__SA5PH .ReRenderExample_greetingHola__6KeVL{animation-name:ReRenderExample_greetingIn__KsjKo}.ReRenderExample_hello__SA5PH .ReRenderExample_greetingName__w8Kkv{animation-name:ReRenderExample_greetingNameHola__1nQIy}.ReRenderExample_hola__oWABr .ReRenderExample_stateOne__S8g2_{animation-name:ReRenderExample_stateOut__Onhjn}.ReRenderExample_hola__oWABr .ReRenderExample_stateTwo__A_G0q{animation-name:ReRenderExample_stateIn____r_y}.ReRenderExample_hola__oWABr .ReRenderExample_greetingHola__6KeVL{opacity:1;animation-name:ReRenderExample_greetingOut__EAr_C}.ReRenderExample_hola__oWABr .ReRenderExample_greetingBonjour__HPs_B{animation-name:ReRenderExample_greetingIn__KsjKo}.ReRenderExample_hola__oWABr .ReRenderExample_greetingName__w8Kkv{animation-name:ReRenderExample_greetingNameBonjour__LSZvK}.ReRenderExample_bonjour__9oBLv .ReRenderExample_stateTwo__A_G0q{animation-name:ReRenderExample_stateOut__Onhjn}.ReRenderExample_bonjour__9oBLv .ReRenderExample_stateZero__IC914{animation-name:ReRenderExample_stateIn____r_y}.ReRenderExample_bonjour__9oBLv .ReRenderExample_greetingBonjour__HPs_B{opacity:1;animation-name:ReRenderExample_greetingOut__EAr_C}.ReRenderExample_bonjour__9oBLv .ReRenderExample_greetingHello__uW7qn{animation-name:ReRenderExample_greetingIn__KsjKo}.ReRenderExample_bonjour__9oBLv .ReRenderExample_greetingName__w8Kkv{animation-name:ReRenderExample_greetingNameHello__DLMso}@keyframes ReRenderExample_introStateContainer__uZjwP{0%{opacity:0;transform:translate(-.55em,-4.3em) scale(.06)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes ReRenderExample_introTextHandleClick__T6_0Q{0%,20%{opacity:0}to{opacity:1}}@keyframes ReRenderExample_introStateSquare__MC8xx{0%,50%{opacity:0}to{opacity:1}}@keyframes ReRenderExample_introSnapshotExtra__yUnZT{0%,25%{transform:translate(0)}28%,to{transform:translate(-.3em)}}@keyframes ReRenderExample_stateOut__Onhjn{0%{opacity:1;transform:rotate(0deg)}5%,to{opacity:0;transform:rotate(100deg)}}@keyframes ReRenderExample_stateIn____r_y{0%,4%{opacity:0;transform:rotate(-100deg)}7%,to{opacity:1;transform:rotate(0deg)}}@keyframes ReRenderExample_flash__eBzEi{0%,12%{opacity:0}15%,16%{opacity:1}29%,to{opacity:0}}@keyframes ReRenderExample_snapshotNew__2GPyn{0%,15%{opacity:0}16%,to{opacity:1}0%,19%{transform:translate(0) scale(1)}26%,to{transform:translate(10.25em) scale(.498)}}@keyframes ReRenderExample_snapshot__yIw_W{0%,25%{opacity:1;transform:translate(0)}28%,to{opacity:0;transform:translate(-.3em)}}@keyframes ReRenderExample_snapshotUImove__SzGie{0%,35%{opacity:0}0%,36%{transform:translate(-.05em)}36%,to{opacity:.8}62%,to{transform:translate(10em)}}@keyframes ReRenderExample_greetingOut__EAr_C{0%,55%{opacity:1;transform:translateY(-.77em)}60%,to{opacity:0;transform:translateY(-1.2em)}}@keyframes ReRenderExample_greetingIn__KsjKo{0%,59%{opacity:0;transform:translate(0)}63%,to{opacity:1;transform:translateY(-.77em)}}@keyframes ReRenderExample_greetingNameHola__1nQIy{0%,59%{transform:translate(0)}63%,to{transform:translate(-.32em)}}@keyframes ReRenderExample_greetingNameBonjour__LSZvK{0%,55%{transform:translate(-.32em)}63%,to{transform:translate(1.35em)}}@keyframes ReRenderExample_greetingNameHello__DLMso{0%,59%{transform:translate(1.35em)}63%,to{transform:translate(0)}}