:root{--green:#21e879;--white:#f2fbf6}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:transparent}
html{background:#06100c}html.embedded{background:transparent}
body{display:grid;place-items:center;font-family:"Avenir Next","Segoe UI",Arial,sans-serif}
.radar{width:min(100%,920px)}
.stage{position:relative;width:min(100%,calc(100vh - 54px));margin:auto;aspect-ratio:1;isolation:isolate}
.grid{position:absolute;width:100%;height:100%;inset:0;overflow:visible}
.grid circle{stroke:#98c7ad;stroke-opacity:.105;stroke-width:1;vector-effect:non-scaling-stroke}
.grid .outer{stroke-opacity:.26}
.crosshair{stroke:#98c7ad;stroke-opacity:.07;stroke-width:1;vector-effect:non-scaling-stroke}
.cardinals{stroke:#a6dbc0;stroke-opacity:.4;stroke-width:1;vector-effect:non-scaling-stroke}
.sweep{position:absolute;inset:0;transform:rotate(-100deg);transform-origin:50% 50%;will-change:transform;z-index:1}
.sector{position:absolute;inset:1.25%;border-radius:50%;background:conic-gradient(from 90deg,transparent 0deg 320deg,rgba(33,232,121,.005) 320deg,rgba(33,232,121,.045) 350deg,rgba(33,232,121,.1) 359.6deg,transparent 360deg)}
.beam{position:absolute;left:50%;top:50%;width:48.75%;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(152,249,196,.5),rgba(33,232,121,.72) 30%,rgba(33,232,121,.12));box-shadow:0 0 8px rgba(33,232,121,.16)}
.word{position:absolute;left:46.746%;top:45.461%;width:50%;height:auto;aspect-ratio:1399/270;z-index:3;overflow:visible}
.word .ai{opacity:0;transition:opacity .6s ease}
.discovered .word .ai{opacity:1}
.origin{position:absolute;left:50%;top:50%;width:.75%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:#98f9c4;box-shadow:0 0 10px rgba(33,232,121,.28);z-index:4}
.signal{position:absolute;width:clamp(10px,2.4%,20px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:2;background:#0b1b13;border:1px solid #496b57;border-radius:24%;padding:.65%;color:#bfd4c6;opacity:0;transition:background .25s,color .25s,border-color .25s}
.signal svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.signal-one{left:34.2%;top:24.7%}.signal-two{left:29%;top:76.6%}
.signal span,.discovery::before{content:"";position:absolute;inset:-8px;border:1px solid rgba(33,232,121,.6);border-radius:50%;opacity:0}
.signal.hit{background:#123724;color:#98f9c4;border-color:var(--green)}
.signal.ping span{animation:echo .75s ease-out}
.discovery{position:absolute;left:88.098%;top:48.499%;width:.9%;aspect-ratio:1;border-radius:50%;z-index:2}
.discovery.hit::before{animation:echo 1.2s ease-out}
@keyframes echo{from{transform:scale(.3);opacity:.55}to{transform:scale(2.4);opacity:0}}
.radar-caption{display:flex;align-items:center;justify-content:center;gap:20px;padding:0 16px 10px;color:#9aafa2;font-size:10px;letter-spacing:.055em;min-height:42px}
.radar-caption i{font-style:normal;color:#50695a;margin:0 6px}
button{font:inherit;letter-spacing:0;color:#c7d9ce;background:transparent;border:1px solid #41574a;border-radius:999px;padding:7px 12px;cursor:pointer;white-space:nowrap}
button:hover{background:rgba(33,232,121,.06)}button:focus-visible{outline:2px solid #98f9c4;outline-offset:4px}
[hidden]{display:none!important}
.static .sweep{transform:rotate(-32deg)!important;opacity:.4;will-change:auto}
.static .signal{color:#98f9c4;border-color:#407455}
.static .word .ai{transition:none}
@media(max-width:400px){.stage{width:min(100%,calc(100vh - 72px))}.radar-caption{gap:10px;font-size:9px;flex-wrap:wrap;padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){.sweep{transform:rotate(-32deg)!important;opacity:.4;will-change:auto}.word .ai{opacity:1;transition:none}.signal{color:#98f9c4;border-color:#407455}.signal span,.discovery::before{animation:none!important}}
/* Discovery emphasis stays behind the lettering without outlining the i dot. */
.discovery::before{border:0;background:radial-gradient(circle,rgba(33,232,121,.12),transparent 70%)}

/* Preserve the approved C artwork while giving the origin mark more presence. */
.letter-c{position:absolute;left:40.876%;top:42.117%;width:18%;height:auto;aspect-ratio:290/270;z-index:3;overflow:hidden}
.signal-three{left:69%;top:23%}.signal-four{left:18%;top:54%}
.signal-five{left:63%;top:78%}.signal-six{left:23%;top:34%}
.signal.danger.hit{background:#351917;color:#ff8b80;border-color:#ff6558}
.signal.danger span{border-color:#ff6558}
.static .signal.danger{color:#ff8b80;border-color:#a45148}
.discovery::before{border:1px solid rgba(152,249,196,.75);background:none;inset:-5px}
.discovery.hit::before{animation:dot-ping .6s ease-out}
@keyframes dot-ping{from{opacity:.85;transform:scale(.35)}to{opacity:0;transform:scale(1.8)}}
@media(prefers-reduced-motion:reduce){.signal.danger{color:#ff8b80;border-color:#a45148}.discovery::before{animation:none!important;opacity:0}}

/* The frozen view keeps illustrative app/risk symbols readable. */
.static .signal{opacity:.8!important}
@media(prefers-reduced-motion:reduce){.signal{opacity:.8!important}}

/* Risk color stays on the app artwork and square throughout its slow fade. */
.signal.danger{border-color:#ff6558;background:#351917;color:#ff8b80}
.signal.danger svg image{filter:brightness(0) saturate(100%) invert(55%) sepia(60%) saturate(1437%) hue-rotate(321deg) brightness(104%) contrast(101%)}

/* True vector silhouettes: no tile, frame, image background, or boxed echo. */
.signal,.signal.hit,.signal.danger,.signal.danger.hit,.static .signal,.static .signal.danger{background:transparent;border:0;border-radius:0;padding:0;color:var(--green)}
.signal.danger,.signal.danger.hit,.static .signal.danger{color:#ff6558}
.signal svg{fill:currentColor;stroke:none;filter:none}
.signal span{display:none}

/* A short circular radar echo appears only as the beam finds an app. */
.signal span{display:block;inset:-4px;border-color:rgba(33,232,121,.5);pointer-events:none}
.signal.danger span{border-color:rgba(33,232,121,.5)}
.signal.ping span{animation:app-ping .85s ease-out}
@keyframes app-ping{from{transform:scale(.55);opacity:.4}to{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.signal span{animation:none!important;opacity:0}}

/* Rotating sweep bounds stay inside the canvas, never a nested scroll area. */
html,body{overflow:clip}
.stage{overflow:clip}