:root{--dur: 8s}.hexagon{margin-bottom:1.5em;overflow:hidden;position:relative;width:15em;height:15em}.hexagon__group,.hexagon__sector,.hexagon__sector:before,.hexagon__sector:after{position:absolute}.hexagon__group{width:100%;height:100%}.hexagon__group:nth-child(2) .hexagon__sector,.hexagon__group:nth-child(2) .hexagon__sector:before,.hexagon__group:nth-child(2) .hexagon__sector:after{animation-delay:calc(var(--dur) * -1 / 6)}.hexagon__group:nth-child(3) .hexagon__sector,.hexagon__group:nth-child(3) .hexagon__sector:before,.hexagon__group:nth-child(3) .hexagon__sector:after{animation-delay:calc(var(--dur) * -2 / 6)}.hexagon__group:nth-child(4) .hexagon__sector,.hexagon__group:nth-child(4) .hexagon__sector:before,.hexagon__group:nth-child(4) .hexagon__sector:after{animation-delay:calc(var(--dur) * -3 / 6)}.hexagon__group:nth-child(5) .hexagon__sector,.hexagon__group:nth-child(5) .hexagon__sector:before,.hexagon__group:nth-child(5) .hexagon__sector:after{animation-delay:calc(var(--dur) * -4 / 6)}.hexagon__group:nth-child(6) .hexagon__sector,.hexagon__group:nth-child(6) .hexagon__sector:before,.hexagon__group:nth-child(6) .hexagon__sector:after{animation-delay:calc(var(--dur) * -5 / 6)}.hexagon__group:nth-child(odd){transform:rotate(30deg)}.hexagon__sector,.hexagon__sector:before,.hexagon__sector:after{animation-duration:var(--dur);animation-iteration-count:infinite;animation-timing-function:linear;width:.2em;height:.2em}.hexagon__sector{animation-name:moveOut1;top:calc(50% - .1em);left:calc(50% - .1em)}.hexagon__sector:nth-child(2){animation-name:moveOut2}.hexagon__sector:nth-child(3){animation-name:moveOut3}.hexagon__sector:nth-child(4){animation-name:moveOut4}.hexagon__sector:nth-child(5){animation-name:moveOut5}.hexagon__sector:nth-child(6){animation-name:moveOut6}.hexagon__sector:before,.hexagon__sector:after{animation-name:ripple;background-color:currentColor;border-radius:.1em;content:"";display:block;top:0;left:0;transform-origin:.1em .1em}.hexagon__sector:before{transform:rotate(-30deg)}.hexagon__sector:after{transform:rotate(-150deg)}@media (prefers-color-scheme: dark){:root{--bg: #17181c;--fg: #e3e4e8}}@keyframes moveOut1{0%{transform:translateY(0) scale(0)}3%{transform:translateY(.2em) scale(1)}97%{transform:translateY(7.3em) scale(1)}to{transform:translateY(7.5em) scale(0)}}@keyframes moveOut2{0%{transform:rotate(60deg) translateY(0) scale(0)}3%{transform:rotate(60deg) translateY(.2em) scale(1)}97%{transform:rotate(60deg) translateY(7.3em) scale(1)}to{transform:rotate(60deg) translateY(7.5em) scale(0)}}@keyframes moveOut3{0%{transform:rotate(120deg) translateY(0) scale(0)}3%{transform:rotate(120deg) translateY(.2em) scale(1)}97%{transform:rotate(120deg) translateY(7.3em) scale(1)}to{transform:rotate(120deg) translateY(7.5em) scale(0)}}@keyframes moveOut4{0%{transform:rotate(180deg) translateY(0) scale(0)}3%{transform:rotate(180deg) translateY(.2em) scale(1)}97%{transform:rotate(180deg) translateY(7.3em) scale(1)}to{transform:rotate(180deg) translateY(7.5em) scale(0)}}@keyframes moveOut5{0%{transform:rotate(240deg) translateY(0) scale(0)}3%{transform:rotate(240deg) translateY(.2em) scale(1)}97%{transform:rotate(240deg) translateY(7.3em) scale(1)}to{transform:rotate(240deg) translateY(7.5em) scale(0)}}@keyframes moveOut6{0%{transform:rotate(300deg) translateY(0) scale(0)}3%{transform:rotate(300deg) translateY(.2em) scale(1)}97%{transform:rotate(300deg) translateY(7.3em) scale(1)}to{transform:rotate(300deg) translateY(7.5em) scale(0)}}@keyframes ripple{0%,to{width:.2em}33%{width:2.4em}}