.cn{--cn-active:#1b84ff;--cn-active-angle:0deg;--cn-radius:78px;position:relative;width:190px;height:190px;display:grid;place-items:center;z-index:80}.cn--floating{position:fixed;right:32px;bottom:28px}.cn__orbit{position:absolute;inset:18px;border:1px dashed rgba(83,97,118,.22);border-radius:50%;opacity:0;transform:scale(.5);transition:.28s}.cn[data-open="true"] .cn__orbit{opacity:1;transform:scale(1)}.cn__hub{position:relative;z-index:5;width:58px;height:58px;border:0;border-radius:50%;background:#202c3e;color:#fff;box-shadow:0 12px 26px rgba(20,30,44,.25);cursor:pointer;display:grid;place-items:center}.cn__hub-surface{position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(255,255,255,.09)}.cn__hub-dot{width:7px;height:7px;border-radius:50%;background:var(--cn-active);box-shadow:0 0 11px var(--cn-active)}.cn__indicator{position:absolute;left:50%;top:50%;width:23px;height:3px;border-radius:999px;background:var(--cn-active);transform-origin:0 50%;transform:rotate(var(--cn-active-angle)) translateX(10px);transition:transform .28s cubic-bezier(.2,.8,.2,1),background .2s;box-shadow:0 0 10px var(--cn-active)}.cn__item{position:absolute;z-index:3;left:50%;top:50%;width:42px;height:42px;margin:-21px;border-radius:50%;border:1px solid rgba(255,255,255,.08);background:#202c3e;color:#aeb8c7;display:grid;place-items:center;cursor:pointer;transform:rotate(var(--cn-angle)) translateX(0) rotate(calc(-1 * var(--cn-angle))) scale(.2);opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.18,.85,.3,1.22),opacity .2s,color .2s,box-shadow .2s}.cn[data-open="true"] .cn__item{transform:rotate(var(--cn-angle)) translateX(var(--cn-radius)) rotate(calc(-1 * var(--cn-angle))) scale(1);opacity:1;pointer-events:auto;transition-delay:calc(var(--cn-index) * 30ms)}.cn__item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.cn__item.is-preview,.cn__item:focus-visible,.cn__item:hover{outline:none;color:var(--cn-item-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--cn-item-accent) 13%,transparent),0 8px 18px rgba(0,0,0,.18)}@media(prefers-reduced-motion:reduce){.cn__item,.cn__orbit,.cn__indicator{transition:none!important}}