.container{z-index:10;cursor:move;width:250px;height:250px;position:absolute;touch-action:none;pointer-events:auto;border-radius:9999px;border:1px solid hsla(0,0%,92.2%,.4);box-shadow:0 8px 30px #ebebeb1f;top:50%;left:50%;translate:-50% -50%;user-select:none;-webkit-user-select:none}.container .detect{z-index:-1;inset:-12px;position:absolute;border-radius:9999px;width:calc(100% + 24px);height:calc(100% + 24px);border:8px solid hsla(0,0%,70.8%,.4)}.container .detect:after{z-index:1;content:"";inset:-8px;padding:8px;position:absolute;pointer-events:none;border-radius:inherit;transition:background .15s ease-in-out;background:conic-gradient(from var(--a, 0deg),transparent 83.4%,hsla(0,0%,43.9%,.4) 0,hsla(0,0%,43.9%,.4) 100%)}.container .display{top:50%;left:50%;z-index:3;width:125px;height:125px;display:flex;cursor:default;position:absolute;align-items:center;border-radius:9999px;justify-content:center;background:#ebebeb;transform:translate(-50%,-50%);border:1px solid hsl(0,0%,60%)}.container .display:after{content:"";width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;border-radius:inherit;border:1px solid hsl(0,0%,60%)}.container .display span{font-size:13px;font-weight:400;line-height:28px;color:#a0a0a0}.container .items{width:100%;height:100%;overflow:hidden;position:relative;border-radius:inherit;box-shadow:0 0 0 4px #ebebeb}.container .items li{width:240px;height:240px;background:#b5b5b566;position:absolute;bottom:50%;right:50%;transition:all .25s;transform-origin:100% 100%;box-shadow:0 0 0 1px #999;color:#a0a0a0;font-size:24px;--a: 30deg}.container .items li:nth-of-type(1){transform:rotate(calc(var(--a) * -1)) skew(var(--a))}.container .items li:nth-of-type(1) svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translate(331px) translateY(16px)}.container .items li:nth-of-type(2){transform:rotate(var(--a)) skew(var(--a))}.container .items li:nth-of-type(2) svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translate(340px) translateY(16px) rotate(-90deg)}.container .items li:nth-of-type(3){transform:rotate(calc(var(--a) * 3)) skew(var(--a))}.container .items li:nth-of-type(3) svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translate(334px) translateY(20px) rotate(-120deg)}.container .items li:nth-of-type(4){transform:rotate(calc(var(--a) * 5)) skew(var(--a))}.container .items li:nth-of-type(4) svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translate(334px) translateY(20px)}.container .items li:nth-of-type(5){transform:rotate(calc(var(--a) * 7)) skew(var(--a))}.container .items li:nth-of-type(5) svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translate(334px) translateY(16px) rotate(120deg)}.container .items li:nth-of-type(6){transform:rotate(calc(var(--a) * 9)) skew(var(--a))}.container .items li:nth-of-type(6) svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translate(334px) translateY(16px) rotate(60deg)}.container .items li svg{transition:all .25s}.container .items li[data-active=true]{color:#ededed;background:#999}html.dark .container{border-color:#2e2e2e;box-shadow:0 8px 30px #0000001f}html.dark .container .detect{border-color:#232323}html.dark .container .detect:after{background:conic-gradient(from var(--a, 0deg),transparent 83.4%,hsl(0,0%,43.9%) 0,hsl(0,0%,43.9%) 100%)}html.dark .container .display{background:#1a1a1a;border-color:#2e2e2e}html.dark .container .display:after{border-color:#2e2e2e}html.dark .container .display span{color:#a0a0a0}html.dark .container .items{box-shadow:0 0 0 4px #1a1a1a}html.dark .container .items li{background:#232323;box-shadow:0 0 0 1px #2e2e2e}html.dark .container .items li[data-active=true]{background:#2e2e2e}