@property --summer-badge-angle{syntax: "<angle>"; initial-value: 0deg; inherits: true;}.summer-update-badge{position:relative;isolation:isolate;overflow:hidden;animation:summer-badge-spin 3s linear infinite}.summer-update-badge:before,.summer-update-badge:after,.summer-update-badge__bloom{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.summer-update-badge:before{content:"";background:radial-gradient(ellipse 63px 36px at 33% -7%,rgb(255 50 100 / 45%),transparent),radial-gradient(ellipse 54px 32px at 12% -5%,rgb(40 140 255 / 45%),transparent),radial-gradient(ellipse 36px 63px at 2% 68%,rgb(50 200 80 / 45%),transparent),radial-gradient(ellipse 162px 29px at 74% 100%,rgb(100 70 255 / 45%),transparent),radial-gradient(ellipse 77px 23px at 55% 100%,rgb(40 140 255 / 45%),transparent),radial-gradient(ellipse 67px 29px at 94% 0%,rgb(255 120 40 / 45%),transparent),radial-gradient(ellipse 47px 43px at 100% 27%,rgb(180 40 240 / 45%),transparent);box-shadow:inset 0 0 6px #fff3;-webkit-mask-image:conic-gradient(from var(--summer-badge-angle),transparent 0% 30%,rgb(255 255 255 / 10%) 36%,rgb(255 255 255 / 35%) 44%,white 52% 80%,rgb(255 255 255 / 35%) 86%,rgb(255 255 255 / 10%) 92%,transparent 95% 100%),linear-gradient(white,transparent 28px,transparent calc(100% - 28px),white),linear-gradient(to right,white,transparent 28px,transparent calc(100% - 28px),white);-webkit-mask-composite:source-in,source-over;mask-image:conic-gradient(from var(--summer-badge-angle),transparent 0% 30%,rgb(255 255 255 / 10%) 36%,rgb(255 255 255 / 35%) 44%,white 52% 80%,rgb(255 255 255 / 35%) 86%,rgb(255 255 255 / 10%) 92%,transparent 95% 100%),linear-gradient(white,transparent 28px,transparent calc(100% - 28px),white),linear-gradient(to right,white,transparent 28px,transparent calc(100% - 28px),white);-webkit-mask-composite:source-in,source-over,xor;mask-composite:intersect,add;opacity:.42}.summer-update-badge:after{content:"";padding:.5px;background:conic-gradient(from var(--summer-badge-angle),transparent 0% 54%,rgb(255 255 255 / 10%) 57%,rgb(255 255 255 / 30%) 60%,rgb(255 255 255 / 60%) 63%,rgb(255 255 255 / 75%) 66%,rgb(255 255 255 / 60%) 69%,rgb(255 255 255 / 30%) 72%,rgb(255 255 255 / 10%) 75%,transparent 78% 100%),radial-gradient(ellipse 70px 40px at 33% -7%,rgb(255 50 100),transparent),radial-gradient(ellipse 60px 35px at 12% -5%,rgb(40 140 255),transparent),radial-gradient(ellipse 40px 70px at 2% 68%,rgb(50 200 80),transparent),radial-gradient(ellipse 180px 32px at 74% 100%,rgb(100 70 255),transparent),radial-gradient(ellipse 85px 26px at 55% 100%,rgb(40 140 255),transparent),radial-gradient(ellipse 74px 32px at 94% 0%,rgb(255 120 40),transparent),radial-gradient(ellipse 52px 48px at 100% 27%,rgb(180 40 240),transparent);-webkit-mask-composite:source-in,xor;-webkit-mask:conic-gradient(from var(--summer-badge-angle),transparent 0% 30%,rgb(255 255 255 / 10%) 36%,rgb(255 255 255 / 35%) 44%,white 52% 80%,rgb(255 255 255 / 35%) 86%,rgb(255 255 255 / 10%) 92%,transparent 95% 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:conic-gradient(from var(--summer-badge-angle),transparent 0% 30%,rgb(255 255 255 / 10%) 36%,rgb(255 255 255 / 35%) 44%,white 52% 80%,rgb(255 255 255 / 35%) 86%,rgb(255 255 255 / 10%) 92%,transparent 95% 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:source-in,xor,xor;mask-composite:intersect,exclude;opacity:.58}.summer-update-badge__bloom{padding:.5px;background:conic-gradient(from var(--summer-badge-angle),transparent 0% 58%,rgb(255 255 255 / 8%) 65%,rgb(255 255 255 / 85%) 70% 70.5%,rgb(255 255 255 / 8%) 75%,transparent 82%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:blur(8px) brightness(1.3) saturate(1.5);opacity:.35}@keyframes summer-badge-spin{to{--summer-badge-angle: 360deg}}@media(prefers-reduced-motion:reduce){.summer-update-badge{animation:none}}