/*
  The server globe band. Lives on the dark band, because the wireframe needs a
  dark ground to read and the dark band is already where this site puts proof.

  Author: Ethan Lowery | Randcore Development Pty Ltd
*/
.gb{display:grid;gap:28px;align-items:center}

.globe{position:relative;width:100%;max-width:460px;aspect-ratio:1/1;margin:0 auto;
       touch-action:pan-y}
.globe canvas{display:block;width:100%;height:100%;cursor:grab}
.globe.is-grabbing canvas{cursor:grabbing}
/* clip: the labels are placed per animation frame from a canvas projection and
   are white-space:nowrap, so at 360px the South Africa node pushed 2px past the
   viewport. Containing them here is cheaper than clamping every frame. */
.globe__labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.globe__lab{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:1px;
            margin:12px 0 0 14px;padding:7px 11px;border-radius:11px;white-space:nowrap;
            background:rgba(1,18,30,.76);border:1px solid rgba(255,255,255,.11);
            -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
            transition:opacity .3s ease}
.globe__lab.is-home{border-color:rgba(33,201,208,.42);background:rgba(1,18,30,.86)}
.globe__lab b{font-size:13px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.2}
.globe__lab i{font-style:normal;font-family:'Geist Mono',monospace;font-size:9.5px;
              letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}

/* the same four nodes as a list, because a globe is not a data table and
   somebody on a phone should still be able to read where the servers are */
.nodes{display:grid;gap:2px;margin-top:26px}
.nodes li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
          padding:15px 0;border-top:1px solid rgba(255,255,255,.12)}
.nodes li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.nodes .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);
            box-shadow:0 0 0 4px rgba(33,201,208,.16)}
.nodes .dot.is-home{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.nodes b{font-size:15.5px;color:#fff;letter-spacing:-.01em}
.nodes b span{display:block;margin-top:3px;font-size:13px;font-weight:400;color:#a9c0d0;
              letter-spacing:0}
.nodes em{font-style:normal;font-family:'Geist Mono',monospace;font-size:10.5px;
          letter-spacing:.1em;text-transform:uppercase;color:var(--teal);text-align:right}

.gb-ctl{display:inline-flex;align-items:center;gap:9px;margin-top:22px;min-height:44px;
        padding:10px 18px;border-radius:var(--r-pill);border:1.6px solid rgba(255,255,255,.26);
        font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;
        text-transform:uppercase;color:#cfe0ea}
.gb-ctl:hover{border-color:#fff;color:#fff}
.gb-ctl svg{width:13px;height:13px}

@media (prefers-reduced-motion:reduce){.gb-ctl{display:none}}
@media (min-width:960px){
  .gb{grid-template-columns:1fr 1.05fr;gap:56px}
  .globe{max-width:520px;margin:0}
}