.dna-strands{position:absolute;top:0;left:20px;width:var(--strand-width);pointer-events:none}@media(min-width: 768px){.dna-strands{left:50%;transform:translateX(-50%)}}.dna-strands>div{position:relative;width:100%;height:var(--strand-height)}.dna-strands>div:nth-child(3n){--strand-color: var(--strand-color-alt)}.dna-strands>div:before,.dna-strands>div:after{content:"";position:absolute;background:var(--strand-color);animation-duration:var(--strand-animation-duration);animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate;animation-delay:calc(var(--s)*var(--strand-animation-delay));animation-play-state:paused;will-change:transform}.dna-strands>div:before{left:calc(var(--strand-ball)/2);top:calc((var(--strand-height) - var(--strand-line))/2);width:calc(var(--strand-width) - var(--strand-ball));height:var(--strand-line);animation-name:dna-line}.dna-strands>div:after{top:calc((var(--strand-height) - var(--strand-ball))/2);width:var(--strand-ball);height:var(--strand-ball);border-radius:50%;box-shadow:calc(var(--strand-width) - var(--strand-ball)) 0 0 var(--strand-color);will-change:transform,box-shadow;animation-name:dna-ball}.dna-strands>div.active:before,.dna-strands>div.active:after{animation-play-state:running}@keyframes dna-line{to{transform:scaleX(0)}}@keyframes dna-ball{to{transform:translate3d(calc((var(--strand-width) - var(--strand-ball)) / 2), 0, 0);box-shadow:0 0 0 var(--strand-color)}}