.c-pie{--pie-radius:9999px;border-radius:var(--pie-radius);z-index:990;opacity:0;width:250px;height:250px;transition:opacity .4s ease-out;position:absolute;transform:translate(-50%,-50%)}.c-pie--open{opacity:1;transition:opacity linear}.c-pie--closed{pointer-events:none}.c-pie--touch{position:inherit;top:125px;left:125px}.c-pie__wrapper{border-radius:inherit;clip-path:url(#pie-mask);width:100%;height:100%;padding:0;position:relative;overflow:hidden;transform:rotate(30deg)}.c-pie li:first-of-type{transform:rotate(calc(var(--a) * -1)) skew(var(--a))}.c-pie li svg{transform-origin:top;position:absolute;top:0;left:0}.c-pie li:first-of-type svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translate(337px) translateY(11px) rotate(-30deg)}.c-pie li:nth-of-type(2){transform:rotate(calc(var(--a))) skew(var(--a))}.c-pie li:nth-of-type(2) svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translateX(327px) translateY(28px) rotate(-90deg)}.c-pie li:nth-of-type(3){transform:rotate(calc(var(--a) * 3)) skew(var(--a))}.c-pie li:nth-of-type(3) svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translate(337px) translateY(45px) rotate(-150deg)}.c-pie li:nth-of-type(4){transform:rotate(calc(var(--a) * 5)) skew(var(--a))}.c-pie li:nth-of-type(4) svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translateX(356px) translateY(45px) rotate(150deg)}.c-pie li:nth-of-type(5){transform:rotate(calc(var(--a) * 7)) skew(var(--a))}.c-pie li:nth-of-type(5) svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translate(366px) translateY(33px) rotate(90deg)}.c-pie li:nth-of-type(6){transform:rotate(calc(var(--a) * 9)) skew(var(--a))}.c-pie li:nth-of-type(6) svg{transform:skew(calc(var(--a) * -1)) rotate(var(--a)) translate(353px) translateY(16px) rotate(30deg)}.c-pie li{--a:30deg;transform-origin:calc(100% + 1px) calc(100% + 1px);color:#fff;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#00000080;width:240px;height:240px;transition:background .25s;position:absolute;bottom:50%;right:50%;overflow:hidden}.c-pie li:hover{background-color:#000c}.c-pie__content{z-index:3;color:#fff;border-radius:9999px;justify-content:center;align-items:center;width:90px;height:90px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.c-pie__content span:not(:empty){white-space:nowrap;background-color:#00000080;border-radius:12px;padding:3px 8px}.c-pie__hole{z-index:-111;position:absolute;top:0;left:0}.c-pie__cursor{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}