:root{--radius:9999px}.c-pie{width:250px;height:250px;position:absolute;border-radius:var(--radius);transform:translate(-50%,-50%);z-index:990;opacity:0;transition:opacity .4s ease-out}.c-pie--open{opacity:1;transition:opacity 0s linear}.c-pie--closed{pointer-events:none}.c-pie--touch{position:inherit;top:125px;left:125px}.c-pie__wrapper{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;padding:0;-webkit-clip-path:url(#pie-mask);clip-path:url(#pie-mask);transform:rotate(30deg)}.c-pie li:first-of-type{transform:rotate(calc(var(--a) * -1)) skew(var(--a))}.c-pie li svg{position:absolute;transform-origin:top center;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;position:absolute;bottom:50%;right:50%;width:240px;height:240px;transform-origin:calc(100% + 1px) calc(100% + 1px);overflow:hidden;background-color:rgba(0,0,0,.5);color:#fff;transition:background .25s ease 0s;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.c-pie li:hover{background-color:rgba(0,0,0,.8)}.c-pie__content{width:90px;height:90px;position:absolute;top:50%;left:50%;z-index:3;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);color:#fff;border-radius:var(--radius)}.c-pie__content span:not(:empty){background-color:rgba(0,0,0,.5);border-radius:12px;padding:3px 8px;white-space:nowrap}.c-pie__hole{position:absolute;left:0;top:0;z-index:-111}.c-pie__cursor{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}