@property --ay{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@property --az{syntax: "<angle>"; initial-value: 0deg; inherits: false;}body[data-v-7c8635cb],div[data-v-7c8635cb],html[data-v-7c8635cb]{display:grid}body[data-v-7c8635cb],div[data-v-7c8635cb]{place-items:center}[data-v-7c8635cb]:after,[data-v-7c8635cb]:before,div[data-v-7c8635cb]{grid-area:1/1;aspect-ratio:1}.system[data-v-7c8635cb]{transform-style:preserve-3d;rotate:-22.5deg}.system[data-v-7c8635cb]:after,.system[data-v-7c8635cb]:before{--p: 0;width:33.3%;border-radius:calc(var(--p)*50%);transform:rotatey(calc(var(--ay)*-1)) translate(275%) rotatey(var(--ay)) rotate(calc(var(--az) - 45deg));background:hsl(113,calc(var(--p)*81%),calc((1 - var(--p)/3)*100%));animation:ay-7c8635cb 6s ease-in-out infinite,az-7c8635cb 3s ease-in-out infinite;animation-delay:calc(var(--p)*-1*3s);content:""}.system[data-v-7c8635cb]:after{--p: 1 }@keyframes ay-7c8635cb{50%{--ay: .5turn }to{--ay: 1turn }}@keyframes az-7c8635cb{to{--az: 1turn }}.glass[data-v-7c8635cb]{width:min(10em,50vmin);border-radius:50%;box-shadow:inset 0 3px 2px currentcolor;background:currentcolor;color:#fff3;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}