.mgx-item{position:relative;display:inline-flex;align-items:center}
.mgx-item>a{display:inline-flex;align-items:center;gap:7px}
.mgx-item>a::before{content:"";order:2;width:6px;height:6px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.55;transition:transform 180ms ease,opacity 180ms ease,margin 180ms ease}
.mgx-item:hover>a::before,.mgx-item:focus-within>a::before{transform:rotate(225deg);margin-top:2px;opacity:.9}

.mgx-drop{
  position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(-4px);
  padding-top:14px;opacity:0;visibility:hidden;
  transition:opacity 180ms ease,transform 180ms ease,visibility 0s linear 180ms;z-index:120;
}
.mgx-item:hover .mgx-drop,.mgx-item:focus-within .mgx-drop{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  transition:opacity 180ms ease,transform 180ms ease;
}

                             
.mgx-drop-in{
  position:relative;min-width:216px;padding:7px;border-radius:16px;
  background:linear-gradient(180deg,rgba(52,38,84,.58),rgba(24,14,46,.66));
  -webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),          /* the frost catch on the top edge (Authkit) */
    inset 0 0 0 1px rgba(233,220,255,.15),        /* the hairline as an inset stroke, never a border */
    inset 0 0 32px rgba(216,236,248,.05),         /* the inset glow */
    0 18px 44px rgba(4,2,12,.5),0 2px 6px rgba(4,2,12,.35);                           
}
                                                                                                        
.mgx-drop-in::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(120% 60% at 18% -10%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%),
    linear-gradient(165deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 38%);
}
                                                     
.mgx-drop-in::after{
  content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;
  transform:translateX(-50%) rotate(45deg);border-radius:3px 0 0 0;
  background:rgba(52,38,84,.7);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35);
}

                                     
.mgx-drop-in a{
  position:relative;z-index:1;display:block;padding:9px 14px;border-radius:999px;text-align:center;
  font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:13.5px;font-weight:640;letter-spacing:-.004em;
  color:rgba(246,241,230,.86);text-decoration:none;white-space:nowrap;
  transition:background 140ms ease,color 140ms ease,box-shadow 140ms ease;
}
.mgx-drop-in a+a{margin-top:2px}
.mgx-drop-in a:hover,.mgx-drop-in a:focus-visible{
  background:rgba(246,241,230,.12);color:#F6F1E6;
  box-shadow:inset 0 0 0 1px rgba(246,241,230,.18),inset 0 1px 0 rgba(255,255,255,.14);
}
.mgx-drop-in a:focus-visible{outline:none}

@media (max-width:980px){.mgx-item{display:contents}.mgx-drop{display:none}.mgx-item>a::before{display:none}}