.anime-box{--border-angle:0deg;border-radius:12px;width:100%;height:100%;display:flex;justify-content:center;align-items:center;box-shadow:0px 2px 4px hsla(0,0%,0%,25%);animation:border-angle-rotate 2s infinite linear;border:.5rem solid transparent;position:relative;&.anime-box-a{background:linear-gradient(white,white) padding-box,conic-gradient(from var(--border-angle),oklch(100% 100% 0deg),oklch(100% 100% 45deg),oklch(100% 100% 90deg),oklch(100% 100% 135deg),oklch(100% 100% 180deg),oklch(100% 100% 225deg),oklch(100% 100% 270deg),oklch(100% 100% 315deg),oklch(100% 100% 360deg)) border-box}&.anime-box-b{background:linear-gradient(white,white) padding-box,conic-gradient(from var(--border-angle),var(--bg) 50%,white) border-box}&.anime-box-c{border-radius:100%;background:radial-gradient(circle,var(--bg) 60%,transparent 60%);&:before,&:after{content:"";display:block;position:absolute;inset:4px;border-radius:100%;animation:border-angle-rotate 2s infinite linear;z-index:-1}&:before{inset:0;background:repeating-conic-gradient(from var(--border-angle),var(--bg),var(--bg) 30deg,oklch(100% 50% 190deg) calc(360deg / 6)) border-box}&:after{background:repeating-conic-gradient(from calc(var(--border-angle) * -1),oklch(100% 40% 50deg),black 60deg) border-box}}}.conic{position:relative;width:100%;flex-shrink:0;border-radius:10px;border-radius:5%;&::before,&::after{content:"";position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);background:#333;border-radius:50%;background-repeat:no-repeat;background-position:0 0;background-image:conic-gradient(transparent,#ff3c41,#ff8a25,#ffe04f,#4fff88,#56ffef,#37b4ff,#c05aff,transparent 20%,transparent 100%);animation:rotate 4s linear infinite;z-index:-1}&::after{background:0 0;background-image:conic-gradient(transparent,#ff3c41,#ff8a25,#ffe04f,#4fff88,#56ffef,#37b4ff,#c05aff,transparent 20%,transparent 100%);filter:blur(10px)}}.all{&::before,&::after{content:"";position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);background:#333;border-radius:50%;background-repeat:no-repeat;background-position:0 0;background-image:conic-gradient(#ff3c41,#ff8a25,#ffe04f,#4fff88,#56ffef,#37b4ff,#c05aff,#ff3c41,#ff8a25,#ffe04f,#4fff88,#56ffef,#37b4ff,#c05aff,#ff3c41,#ff8a25,#ffe04f,#4fff88,#56ffef,#37b4ff,#c05aff);animation:rotate 4s linear infinite;z-index:-1}&::after{background:0 0;background-image:conic-gradient(#ff3c41,#ff8a25,#ffe04f,#4fff88,#56ffef,#37b4ff,#c05aff,#ff3c41,#ff8a25,#ffe04f,#4fff88,#56ffef,#37b4ff,#c05aff,#ff3c41,#ff8a25,#ffe04f,#4fff88,#56ffef,#37b4ff,#c05aff);filter:blur(10px)}}.rect{position:relative;width:100%;flex-shrink:0;overflow:unset;&::before,&::after{content:"";position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);background:#333;background-image:linear-gradient(45deg,#ff3c41,#ff8a25,#ffe04f,#4fff88,#56ffef,#37b4ff,#c05aff,#ff3c41,#ff8a25,#ffe04f,#4fff88,#56ffef,#37b4ff,#c05aff);background-size:500%;animation:position 12s linear infinite alternate;z-index:-1}&::after{filter:blur(10px)}}