@layer components{.cubes{align-items:flex-end;gap:1px;height:20px;display:flex}.cubes__cube{--size:12px;flex:0 0 var(--size);width:var(--size);height:var(--size);background-color:var(--grey-000);border-bottom:2px solid var(--grey-200);transition:.16s var(--transition-easing);transition-property:height,background-color,border-bottom-width}.cubes__cube:nth-child(6n){--hover-color:var(--red);animation:cube-pop-in 6s var(--transition-easing)-6s infinite}.cubes__cube:nth-child(6n+1){--hover-color:var(--green)}.cubes__cube:nth-child(6n+2){--hover-color:var(--yellow);animation:cube-pop-in 5s var(--transition-easing)-2s infinite}.cubes__cube:nth-child(6n+3){--hover-color:var(--orange)}.cubes__cube:nth-child(6n+4){--hover-color:var(--blue);animation:cube-pop-in 4s var(--transition-easing)-4s infinite}.cubes__cube:nth-child(6n+5){--hover-color:var(--magenta)}.cubes__cube:is(:hover,:focus){height:calc(var(--size)*1.2);background-color:var(--hover-color);cursor:pointer;border-bottom-width:4px}.cubes__cube:focus{height:calc(var(--size)*1.4);border-bottom-width:6px}@keyframes cube-pop-in{0%,75%{height:var(--size);background-color:var(--grey-000);border-bottom:2px solid var(--grey-200)}20%,50%{height:calc(var(--size)*1.2);background-color:var(--hover-color);border-bottom-width:4px}}}
