@layer components{.radar{--bg-dots:#010;--bg-lines:#030;--bg-screen:#000100;--bg-light:#b3c7dd;--bg-dark:#6c7a88;--dot-opacity:.5;--line-opacity:.25;--radial-opacity:.25;--trail-length:90deg;--blend:color-dodge;--speed:10s;aspect-ratio:1;border:.1vmin solid var(--grey-1);border-radius:50%;flex:0 0 40%;box-shadow:.2vmin .2vmin 0 .1vmin #0000004d}.radar__inner{background:linear-gradient(to bottom, var(--grey-4), var(--grey-5));z-index:2;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.radar__inner:before,.radar__inner:after{content:"";aspect-ratio:1;width:96%;transition:background .32s var(--transition-easing);border-radius:50%;position:absolute;top:2%;left:2%}.radar__inner:before{z-index:-1;background-color:var(--bg-screen);background-image:linear-gradient(to bottom, transparent calc(50%), hsl(from var(--bg-lines) h s l / var(--line-opacity)), transparent calc(50% + .1vmin)), linear-gradient(to right, transparent calc(50%), hsl(from var(--bg-lines) h s l / var(--line-opacity)), transparent calc(50% + .1vmin)), linear-gradient(45deg, transparent calc(50%), hsl(from var(--bg-lines) h s l / var(--line-opacity)), transparent calc(50% + .1vmin)), linear-gradient(-45deg, transparent calc(50%), hsl(from var(--bg-lines) h s l / var(--line-opacity)), transparent calc(50% + .1vmin)), repeating-radial-gradient(hsl(from var(--bg-lines) h s l / var(--radial-opacity)) 0, transparent .1vmin .5vmin, hsl(from var(--bg-lines) h s l / var(--radial-opacity)) calc(.5vmin + .1vmin))}.radar__inner:after{background-image:conic-gradient(#000 var(--trail-length), var(--glowing-green) 360deg);mix-blend-mode:color-dodge;animation:radar-rotation var(--speed) linear infinite}.radar__targets{background:radial-gradient(circle at 65% 15%, var(--bg-dots), transparent .2vmin), radial-gradient(circle at 67% 19%, var(--bg-dots), transparent .1vmin), radial-gradient(circle at 68% 16%, var(--bg-dots), transparent .2vmin), radial-gradient(circle at 59% 63%, var(--bg-dots), transparent .15vmin), radial-gradient(circle at 55% 62%, var(--bg-dots), transparent .3vmin), radial-gradient(circle at 15% 36%, var(--bg-dots), transparent .2vmin), radial-gradient(circle at 19% 39%, var(--bg-dots), transparent .1vmin), radial-gradient(circle at 32% 70%, var(--bg-dots), transparent .2vmin), radial-gradient(circle at 28% 53%, var(--bg-dots), transparent .25vmin), radial-gradient(circle at 45% 92%, var(--bg-dots), transparent .3vmin), radial-gradient(circle at 85% 36%, var(--bg-dots), transparent .2vmin), radial-gradient(circle at 89% 45%, var(--bg-dots) .2vmin, transparent .15vmin), radial-gradient(circle at 78% 70%, var(--bg-dots) .1vmin, transparent .2vmin), radial-gradient(circle at 33% 85%, var(--bg-dots) .3vmin, transparent .5vmin);background-position:0 0;border-radius:50%;width:90%;height:90%;position:relative;overflow:hidden}.radar__targets:after,.radar__targets:before{content:"";position:absolute;inset:0}.radar__targets:after{background:radial-gradient(circle at 10% 50%, var(--bg-dots), transparent .15vmin), radial-gradient(circle at 90% 50%, var(--bg-dots), transparent .15vmin), radial-gradient(circle at 60% 10%, var(--bg-dots), transparent .3vmin), radial-gradient(circle at 70% 90%, var(--bg-dots), transparent .15vmin);animation:200s linear infinite radar-rotation}.radar__targets:before{background:radial-gradient(circle at 45% 50%, var(--bg-dots), transparent .1vmin), radial-gradient(circle at 49% 55%, var(--bg-dots), transparent .15vmin), radial-gradient(circle at 35% 35%, var(--bg-dots), transparent .2vmin), radial-gradient(circle at 45% 15%, var(--bg-dots), transparent .25vmin), radial-gradient(circle at 25% 35%, var(--bg-dots), transparent .3vmin);animation:600s linear infinite radar-rotation}@keyframes radar-rotation{to{transform:rotate(1turn)}}}