#orbs{position:fixed; inset:0; pointer-events:none; z-index:50}
#orbs .o{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--r)) rotate(calc(-1*var(--a)));
  --r:min(26vmin,220px); width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(12,20,26,.40); border:1px solid rgba(160,225,219,.55); color:#dff; font:600 18px/1 system-ui;
  pointer-events:auto; box-shadow:0 0 12px rgba(94,214,204,.45)}
#orbs .o[data-i="0"]{--a:210deg} #orbs .o[data-i="1"]{--a:330deg}
#orbs .o[data-i="2"]{--a: 30deg} #orbs .o[data-i="3"]{--a:150deg}