<style>
@keyframes sg-spin-cw  { to { transform:rotate(360deg); } }
@keyframes sg-spin-ccw { to { transform:rotate(-360deg); } }
@keyframes sg-fade-up  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes sg-pulse    { 0%,100% { opacity:0.3; } 50% { opacity:0.65; } }
@keyframes sg-host-in  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes sg-scan {
  0%   { top:-2px; opacity:0; }
  4%   { opacity:0.7; }
  96%  { opacity:0.2; }
  100% { top:100%; opacity:0; }
}
#sg-diagram .sg-outer-ring {
  position:absolute; border-radius:50%;
  width:260px; height:260px;
  top:50%; left:50%; margin:-130px 0 0 -130px;
  border:1px dashed rgba(0,130,188,0.35);
  animation:sg-spin-cw 36s linear infinite;
}
#sg-diagram .sg-inner-ring {
  position:absolute; border-radius:50%;
  width:174px; height:174px;
  top:50%; left:50%; margin:-87px 0 0 -87px;
  border:1.5px dashed rgba(0,130,188,0.55);
  animation:sg-spin-ccw 22s linear infinite;
}
#sg-diagram .sg-glow {
  position:absolute; border-radius:50%;
  width:110px; height:110px;
  top:50%; left:50%; margin:-55px 0 0 -55px;
  background:radial-gradient(circle, rgba(0,130,188,0.22) 0%, transparent 70%);
  animation:sg-pulse 3.5s ease-in-out infinite;
}
#sg-diagram .sg-layer-grid {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
#sg-diagram .sg-layer-pill {
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:7px; padding:7px 10px;
  display:flex; align-items:center; gap:6px;
  white-space:nowrap;
  animation:sg-fade-up 0.5s ease both;
}
#sg-diagram .sg-ctrl-badge {
  background:rgba(0,130,188,0.12);
  border:1px solid rgba(0,130,188,0.4);
  border-radius:20px; padding:7px 14px;
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
  animation:sg-fade-up 0.5s ease both;
}
#sg-diagram .sg-connector {
  display:block; height:1px; width:28px; flex-shrink:0;
  background:linear-gradient(90deg, transparent, rgba(0,130,188,0.4));
  animation:sg-fade-up 0.5s ease both;
}
#sg-diagram .sg-connector-r {
  background:linear-gradient(90deg, rgba(0,130,188,0.4), transparent);
}
#sg-diagram .sg-host-badge {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; padding:9px 18px;
  text-align:center;
  animation:sg-host-in 0.5s ease both;
}
#sg-diagram .sg-scan-line {
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(0,130,188,0.5) 30%, rgba(0,130,188,0.85) 50%, rgba(0,130,188,0.5) 70%, transparent 100%);
  animation:sg-scan 7s ease-in-out 2s infinite;
  pointer-events:none; z-index:10;
}
</style>