.cylinder{width:100%;height:100%;transform-style:preserve-3d;--pi:3.14159;--cylinder-height:300px;--item-deg:calc(360 / var(--segments));--item-offset:calc(var(--cylinder-height) / calc(var(--pi) / 2));transform:rotateX(calc(var(--item-deg) * var(--index) * 1deg)) translateZ(calc(var(--item-offset) - 6px));position:absolute}.segment{width:100%;transform:rotateX(calc(var(--item-deg) * var(--index) * 1deg)) translateZ(calc(var(--item-offset) - 6px));opacity:1;justify-content:center;align-items:center;height:60px;display:flex;position:absolute;top:38%;right:-150px}.overlay-mask{background:linear-gradient(0deg, transparent 90%, var(--background)), linear-gradient(90deg, transparent 90%, var(--background)), linear-gradient(180deg, transparent 90%, var(--background))}
.cylinder-container{transform-style:preserve-3d;height:100%;position:relative;overflow:hidden}.cylinder{width:100%;height:100%;transform-style:preserve-3d;--pi:3.14159;--cylinder-height:300px;--segment-deg:calc(360 / var(--segments));--segment-shift:calc(var(--cylinder-height) / calc(var(--pi) / 2));position:absolute}.segment{width:100%;transform:rotateX(calc(var(--segment-deg) * var(--index) * 1deg)) translateZ(calc(var(--segment-shift) - 6px));opacity:1;backface-visibility:hidden;justify-content:center;align-items:center;height:60px;display:flex;position:absolute;top:50%;right:-150px}
.shield-container{--easing:cubic-bezier(1, 0, 0, 1)}.shield-outline,.shield{color:#2f2e2e}.shield-outline path:nth-child(2){color:#a3a3a3;z-index:1;opacity:0;transition:all .5s;position:relative}.shield-outline{filter:blur();transition-duration:.75s;transition-delay:.5s}.shield-outline path:first-child{opacity:0}.shield path{transition:stroke .5s;transition-delay:0}.shield{transition:opacity .5s}.shield,.shield-inner,.shield-outline{-webkit-mask-image:linear-gradient(304deg,#0000 10%,#000000bf 70%);mask-image:linear-gradient(304deg,#0000 10%,#000000bf 70%)}.shield-dots{color:#2f2e2e;-webkit-mask-image:radial-gradient(#0000 40%,#000 70%);mask-image:radial-gradient(#0000 40%,#000 70%)}.shield-inner{opacity:1;transition:all .5s}.shield-container:hover .shield-inner{opacity:1;transition:opacity .5s ease-in-out .25s}.shield-container:hover .shield-outline path:nth-child(2){stroke-dashoffset:0;opacity:1;transition:opacity .25s,stroke-dashoffset 1.5s cubic-bezier(1,0,0,1)}.shield-container:hover .shield-outline{filter:blur(6px);opacity:0;transition:all .75s ease-in-out .75s}.shield-container:hover .shield path{stroke:#a3a3a3}.shield-container:hover .shield path:first-child{transition:stroke .25s ease-in-out .25s}.shield-container:hover .shield path:nth-child(2){transition:stroke .25s ease-in-out .5s}.shield-container:hover .shield path:nth-child(3){transition:stroke .25s ease-in-out .75s}.switchboard{-webkit-mask-image:radial-gradient(#0000 50%,#000 70%);mask-image:radial-gradient(#0000 50%,#000 70%)}.shield-container:not(:hover) .light:before,.shield-container:not(:hover) .light:after{box-shadow:none;background:#707070}.switchboard-canvas{z-index:0;opacity:.5;height:calc(100% + 30px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-image:radial-gradient(circle,#0000 30%,#000 50%);mask-image:radial-gradient(circle,#0000 30%,#000 50%)}
.circle-pulse{opacity:.7;animation:ping 6s cubic-bezier(0, 0, .2, 1) var(--pulse-delay) infinite;pointer-events:none}.mid{animation:6s cubic-bezier(0,0,.2,1) infinite pingmid}@keyframes pingmid{0%{transform:scale(.9)}10%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes ping{33%{opacity:0;transform:scale(1.5)}to{opacity:0;transform:scale(1.5)}}.pulse-container{--factor:8;--width:300;--height:300;--n-mouse-x:clamp(calc(var(--width) * -1), var(--mouse-x), var(--width) * 2);--n-mouse-y:clamp(calc(var(--height) * -1), var(--mouse-y), var(--height) * 2);width:calc(var(--width) * 1px);height:calc(var(--height) * 1px);transform:perspective(var(--width)) rotateX(0deg) rotateY(0deg) translateZ(-30px);z-index:1;-webkit-tap-highlight-color:transparent;pointer-events:initial;--rotate-x:calc(var(--factor) / 2 - var(--n-mouse-x) / var(--width) * var(--factor));--rotate-y:calc(var(--n-mouse-y) / var(--width) * var(--factor) - var(--factor) / 2);transform:perspective(calc(var(--width) * 1px)) rotateX(calc(var(--rotate-y) * -1deg)) rotateY(calc(var(--rotate-x) * -1deg)) translateZ(30px);padding:4px;transition:all .2s;-webkit-mask-image:radial-gradient(circle,#000 50%,#0000 70%);mask-image:radial-gradient(circle,#000 50%,#0000 70%)}
.item:not(:last-child):after{opacity:.25;content:"/";font-weight:200;font-size:inherit;display:block;position:absolute;right:-2rem}.carousel-shadow{background:linear-gradient(90deg, var(--background-base) 10%, transparent 40%), linear-gradient(90deg, transparent 60%, var(--background-base))}
.glow-outline{--width-px:calc(var(--width) * 1px);--radius-px:calc(var(--radius) * 1px);pointer-events:none;inset:calc(var(--width-px) * -1);clip-path:inset(0 0 0 0 round var(--radius-px));border-radius:var(--radius-px);position:absolute;overflow:hidden}@keyframes glow-outline{0%{opacity:0;offset-distance:var(--start)}50%{opacity:1;offset-distance:calc(var(--start) + 25%)}to{opacity:0;offset-distance:calc(var(--start) + 45%)}}.glow-outline:before,.glow-outline:after{content:"";height:var(--width-px);offset-path:border-box;offset-anchor:100% 50%;background:radial-gradient(circle at right, #fff3, transparent 50%), radial-gradient(circle at right, var(--primary) 50%, transparent);width:200px;animation:calc(var(--speed) * 1s) 1 ease-in-out forwards glow-outline;box-shadow:0 0 6px 1px color-mix(in oklab, var(--primary) 25%, transparent);display:inline-block;position:absolute}.glow-outline:before{--start:5%}.glow-outline:after{--start:55%}