:root{--c1: #6eccee;--c2: #ffdc99;--c3: #e3a4d0;--c4: #d455ff;--border: .6vmin;--glow: drop-shadow(0 0 6vmin oklch(1 0 0 / 19%));--radius: 18vmin;--item-offset: 15deg ;--circle-y: 20%;--animation-duration: 4s}main.svelte-xydv4k{background:#696969;min-height:100vh;display:flex;justify-content:center;flex-direction:column;align-items:center}.container.svelte-xydv4k{--angle: 0deg;width:40vmin;aspect-ratio:1 / 1.2;position:relative;transform-style:preserve-3d;transform:rotateX(-45deg) rotateY(45deg);animation:svelte-xydv4k-angle var(--animation-duration) linear infinite}.mix-blend-mode.svelte-xydv4k{position:absolute;top:0;right:0;bottom:0;left:0;background:#1f2233;mix-blend-mode:plus-lighter;z-index:10}.ball-container.svelte-xydv4k{display:grid;place-items:center;position:absolute;top:0;right:0;bottom:0;left:0;transform:translateZ(-40vmin);animation:svelte-xydv4k-ball-container var(--animation-duration) linear infinite}.ball.svelte-xydv4k{--diameter: 30vmin;--radius: calc(var(--diameter) / 2);--border: 1vmin;width:var(--diameter);aspect-ratio:1;border-radius:50%;box-shadow:0 0 10vmin #ffffff02;filter:var(--glow);background:radial-gradient(var(--radius) var(--radius) at center,black calc(var(--radius) - var(--border)),transparent calc(var(--radius) - var(--border))),conic-gradient(var(--c1),var(--c3),var(--c2),var(--c4),var(--c3),var(--c1),var(--c2),var(--c1));transform:rotateX(45deg) rotateY(45deg) translateY(-20vmin)}.item.svelte-xydv4k{--gap: 10vmin;--gap-offset: calc(var(--i) - 3);position:absolute;top:0;right:0;bottom:0;left:0;transform:translateZ(calc(var(--gap) * var(--gap-offset)));filter:var(--glow)}.surface.svelte-xydv4k{--angle-offset: calc(var(--i) * var(--item-offset));--diameter: calc(cos(calc(var(--angle) + var(--angle-offset))) * var(--radius));position:absolute;top:0;right:0;bottom:0;left:0;mask:radial-gradient(circle at 50% var(--circle-y),transparent var(--diameter),black var(--diameter));background:radial-gradient(circle at 50% var(--circle-y),var(--c4) calc(var(--diameter) + var(--border)),var(--c4) calc(var(--diameter) + var(--border)),transparent var(--diameter)),linear-gradient(#000,#000) no-repeat,linear-gradient(45deg,var(--c1),var(--c2),var(--c3),var(--c1),var(--c4),var(--c3),var(--c2));background-size:calc(100% - var(--border) * 2) calc(100% - var(--border) * 2);background-position:var(--border) var(--border),0 0}.surface.svelte-xydv4k:nth-child(2){translate:4vmin 5.7vmin}.top.svelte-xydv4k{--angle-offset: calc(var(--i) * var(--item-offset));--diameter: calc(cos(calc(var(--angle) + var(--angle-offset))) * var(--radius));mask:radial-gradient(calc(var(--diameter) * .86) at 50% calc(60%/cos(calc(var(--angle) + var(--angle-offset)))),transparent var(--diameter),black var(--diameter));height:6vmin;position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(#000,#000) no-repeat,linear-gradient(to right,var(--c1),var(--c3),var(--c2),var(--c1));background-size:calc(100% - var(--border) * 2) calc(100% - var(--border) * 2);background-position:var(--border) var(--border),0 0;transform:skew(36deg) translate(2vmin)}.left.svelte-xydv4k{width:4.5vmin;position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(#000,#000) no-repeat,linear-gradient(to top,var(--c1),var(--c3),var(--c2),var(--c1));background-size:calc(100% - var(--border) * 2) calc(100% - var(--border) * 2);background-position:var(--border) var(--border),0 0;transform:skewY(55deg) translateY(2.9vmin)}@property --angle{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@keyframes svelte-xydv4k-angle{0%{--angle: 360deg}to{--angle: 0deg}}@keyframes svelte-xydv4k-ball-container{0%{transform:translateZ(-40vmin);opacity:0}10%{opacity:1}50%{opacity:1}60%{transform:translateZ(40vmin);opacity:0}to{opacity:0}}