.sync-demo{width:100%;height:100%;position:relative}.sync-badge{opacity:0;background:#fff;border:1px solid #0000000f;border-radius:14px;justify-content:center;align-items:center;width:56px;height:56px;animation:.4s ease-out forwards sync-badge-in;display:flex;position:absolute;box-shadow:0 2px 8px #0000000f,0 8px 24px #0000000a}.sync-badge:first-child{top:14%;left:14%}.sync-badge:nth-child(2){top:10%;right:14%}.sync-badge:nth-child(3){bottom:18%;left:18%}.sync-badge:nth-child(4){bottom:14%;right:12%}.sync-badge:nth-child(odd){animation:.4s ease-out forwards sync-badge-in,4s ease-in-out .4s infinite sync-badge-float-a}.sync-badge:nth-child(2n){animation:.4s ease-out forwards sync-badge-in,4.5s ease-in-out .4s infinite sync-badge-float-b}@keyframes sync-badge-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes sync-badge-float-a{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes sync-badge-float-b{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.sync-badge-icon{object-fit:contain;width:32px;height:32px}@media (width<=768px){.sync-badge{width:56px;height:56px}.sync-badge:first-child{top:14%;left:10%}.sync-badge:nth-child(2){top:10%;right:10%}.sync-badge:nth-child(3){bottom:18%;left:32%}.sync-badge:nth-child(4){bottom:30%;right:32%}.sync-badge-icon{width:32px;height:32px}}