/* Variant: Radar — a sweeping radar screen with the services as blips. Dark blue. */
:root {
  --bg: #060d1a; --surface: #0e1728; --muted: #0a1222; --ink: #eaf2ff; --ink-2: #8ea0bf; --line: #1c2a44;
  --accent: #38b6ff; --accent-ink: #04101c; --accent-soft: #0f2a44; --green-soft: #0f1d33; --amber-soft: #2a2416;
  --night: #0e1728; --night-2: #152036; --night-line: rgba(255, 255, 255, 0.08); --night-ink: #eaf2ff; --night-ink-2: #8ea0bf;
  --ui-bg: #13203a; --ui-line: #1f2e4c; --ui-fill: #2a3c60; --ui-fill-2: #182642; --ui-strong: #eaf2ff; --ui-accent: #38b6ff; --ui-img: #0f2a44;
  --ui-tint-a: #133a5e; --ui-tint-b: #2a2a5a; --ui-tint-c: #3a3218;
  color-scheme: dark;
}
.rd { justify-self: center; width: min(100%, 32rem); }
.rd-scope { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: radial-gradient(circle, #0b2140, #04101f 70%); box-shadow: 0 0 0 10px #0e1728, 0 0 0 11px #1f2e4c, 0 0 80px rgba(56, 182, 255, 0.2), inset 0 0 40px rgba(56, 182, 255, 0.15); font-size: clamp(0.6875rem, 1vw, 0.875rem); }
.rd-ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border: 1px solid rgba(56, 182, 255, 0.25); border-radius: 50%; }
.rd-ring--1 { width: 33%; aspect-ratio: 1; } .rd-ring--2 { width: 66%; aspect-ratio: 1; } .rd-ring--3 { width: 96%; aspect-ratio: 1; }
.rd-cross { position: absolute; inset: 0; background: linear-gradient(rgba(56, 182, 255, 0.2), rgba(56, 182, 255, 0.2)) center / 1px 100% no-repeat, linear-gradient(rgba(56, 182, 255, 0.2), rgba(56, 182, 255, 0.2)) center / 100% 1px no-repeat; }
.rd-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(56, 182, 255, 0.45), rgba(56, 182, 255, 0) 70deg, transparent 360deg); }
@media (prefers-reduced-motion: no-preference) { .rd-sweep { animation: rd-spin 5s linear infinite; } @keyframes rd-spin { to { rotate: 360deg; } } }
.rd-b { position: absolute; display: flex; align-items: center; gap: 0.4rem; color: #cfe8ff; font-weight: 600; white-space: nowrap; }
.rd-b i { width: 10px; height: 10px; border-radius: 50%; background: #38b6ff; box-shadow: 0 0 12px #38b6ff; }
.rd-b--1 { left: 58%; top: 22%; } .rd-b--2 { left: 18%; top: 34%; } .rd-b--3 { left: 62%; top: 62%; } .rd-b--4 { left: 22%; top: 66%; } .rd-b--5 { left: 40%; top: 84%; }
@media (prefers-reduced-motion: no-preference) { .rd-b i { animation: rd-blip 2.5s ease-out infinite; } .rd-b--2 i { animation-delay: -0.6s; } .rd-b--3 i { animation-delay: -1.2s; } .rd-b--4 i { animation-delay: -1.8s; } .rd-b--5 i { animation-delay: -2.2s; } @keyframes rd-blip { 0% { opacity: 1; } 70% { opacity: 0.35; } 100% { opacity: 1; } } }
.rd-target { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 0.35rem 0.75rem; border: 1px solid #38b6ff; border-radius: 999px; background: rgba(4, 16, 31, 0.85); color: #ffffff; font-weight: 700; white-space: nowrap; }
.tile--dark { background: linear-gradient(160deg, #0f2a44, #0e1728 70%); }