.rack{flex-wrap:wrap;gap:12px;margin:0 0 24px;display:flex}.ball-group{--size:30px;display:inline-flex}.ball-group.big{--size:44px}.ball{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;width:var(--size);height:var(--size);background:var(--c);transform:rotate(calc(var(--i,0) * -150deg));transition:margin .3s var(--ease) calc(min(var(--i,0), 5) * 30ms), transform .3s var(--ease) calc(min(var(--i,0), 5) * 30ms);border:0;border-radius:50%;flex:none;place-items:center;padding:0;display:grid;position:relative}.ball:after{content:"";inset:calc((var(--size) - 40px) / 2);border-radius:50%;position:absolute}.ball+.ball{margin-left:calc(var(--size) * -1)}.ball i{width:58%;height:58%;font:700 calc(var(--size) * .5)/1 "Helvetica Neue", Helvetica, Arial, sans-serif;color:#0000;background:#fff;border-radius:50%;place-items:center;font-style:normal;transition:color .15s .1s,background .15s;display:grid}:is(.ball-group.open,.ball-group:focus-within) .ball{transform:none}:is(.ball-group.open,.ball-group:focus-within) .ball+.ball{margin-left:4px}:is(.ball-group.open,.ball-group:focus-within) .ball i{color:var(--ink)}.ball:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media (hover:hover) and (pointer:fine){.ball-group:hover .ball{transform:none}.ball-group:hover .ball+.ball{margin-left:4px}.ball-group:hover .ball i{color:var(--ink)}.rack .ball-group:hover .ball:hover{transform:scale(1.14)rotate(-20deg)}}