/* Orbit of chips around the blue dot. Pair with assets/js/orbit.js */
.orb{position:relative;height:800px;--k:1}
.orb .ring{position:absolute;border-radius:50%;border:1px dashed rgb(11 12 14/.12)}
.orb__center{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px var(--line),0 20px 60px -20px rgb(50 130 255/.5);transform:scale(var(--k))}
.orb__center i{width:46px;height:35px;border-radius:32%/40%;background:var(--dot);animation:orbFloat 5s ease-in-out infinite}
@keyframes orbFloat{50%{transform:translateY(-8px) rotate(-4deg)}}
.orb__origin{position:absolute;left:50%;top:50%;width:0;height:0}
.ochip{position:absolute;left:0;top:0;white-space:nowrap;translate:-50% -50%;height:38px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;
  background:#fff;box-shadow:0 0 0 1px var(--line),0 6px 18px -10px rgb(11 12 14/.25);font:500 .875rem/1 var(--sans);color:var(--ink);will-change:transform;transition:box-shadow .2s,color .2s}
.ochip:hover{box-shadow:0 0 0 1.5px var(--dot),0 10px 24px -10px rgb(50 130 255/.6);color:var(--navy);z-index:2}
.ochip--hot{background:var(--ink);color:#fff;height:44px;padding:0 20px}
.ochip--hot:hover{color:#fff;background:var(--dot)}
.orb.flat{height:auto;padding:8px 0 0}
.orb.flat .ring,.orb.flat .orb__center{display:none}
.orb.flat .orb__origin{position:static;width:auto;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.orb.flat .ochip{position:static;translate:none;height:40px;font-size:.8125rem;padding:0 14px}
.orb.flat .ochip--hot{order:-1;height:44px}