.liquid-nav {
  --gx: 50%;
  --gy: 50%;
  --ga: 0;
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 50;
  width: min(1580px, calc(100vw - 12px));
  height: 76px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 28px;
  display: block;
  overflow: visible;
  transform: translateX(-50%);
  background: rgba(255,255,255,.025);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}

.liquid-nav.engaged { transform: translateX(-50%) scale(1.012); }

.liquid-nav-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 9px 10px 9px 20px;
  border: 1px solid rgba(255,255,255,.105);
  border-radius: inherit;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(15,15,17,.17);
  box-shadow: inset 0 1px rgba(255,255,255,.18), inset 0 -1px rgba(255,255,255,.025), 0 14px 38px rgba(0,0,0,.22);
}

.liquid-nav .lg-layer { border-radius: inherit; }

.liquid-nav .nav-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(280px 150px at var(--gx) var(--gy),rgba(210,228,255,var(--ga)),rgba(210,228,255,0) 74%);
  pointer-events: none;
}

.liquid-nav .brand,.liquid-nav .nav-center,.liquid-nav .nav-actions { position: absolute; z-index: 3; }
.liquid-nav-inner > .brand { left:20px; top:50%; width:max-content; display:flex!important; visibility:visible; color:#f4f4f5; transform:translateY(-50%); }
.liquid-nav .brand::before { display:none; }
.liquid-nav .brand img { width:32px; height:32px; object-fit:contain; }

.liquid-nav .nav-center {
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  height: 58px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0,0,0,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

.liquid-nav .nav-topic {
  position: relative;
  z-index: 4;
  height: 46px;
  padding: 0 20px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a0a0a5;
  font-size: 12px;
  font-weight: 620;
  touch-action: none;
  transition: color .2s ease;
}

.liquid-nav .nav-topic:hover,.liquid-nav .nav-topic.active { color:#fff; }

.liquid-nav .nav-lens {
  position: absolute;
  z-index: 3;
  top: 6px;
  left: 6px;
  width: 92px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 15px;
  pointer-events: none;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px rgba(255,255,255,.32), 8px 10px 24px rgba(0,0,0,.22);
  transform-origin: center;
  will-change: left,width,transform;
  transition: left .26s cubic-bezier(.2,.9,.22,1),width .26s cubic-bezier(.2,.9,.22,1),transform .25s ease,background .25s ease;
}

.liquid-nav .nav-lens.interacting { z-index: 5; transform: scale(1.18); background:rgba(255,255,255,.045); }
.liquid-nav .nav-center.dragging .nav-lens { transition: transform .2s ease,background .2s ease; }

.liquid-nav .nav-actions { top:9px; right:10px; display:flex; gap:8px; }
.liquid-nav .nav-github,.liquid-nav .nav-download {
  position:relative;
  z-index:3;
  top: 9px;
  height: 56px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 19px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px rgba(255,255,255,.3), 8px 10px 24px rgba(0,0,0,.14);
}
.liquid-nav .nav-actions .nav-github,.liquid-nav .nav-actions .nav-download { top:0; }
.liquid-nav .nav-github { width:56px; padding:0; border-radius:50%; justify-content:center; }
.liquid-nav .nav-github svg { position:relative; z-index:2; width:20px; height:20px; }
.liquid-nav .nav-download { padding:0 19px; }

@media (max-width:820px) {
  .liquid-nav { width:calc(100vw - 8px); height:64px; border-radius:22px; }
  .liquid-nav-inner { padding:7px 8px 7px 15px; }
  .liquid-nav .brand { left:15px; }
  .liquid-nav .nav-actions { top:7px; right:8px; }
  .liquid-nav .nav-github { width:48px; height:48px; }
  .liquid-nav .nav-center { display:none; }
  .liquid-nav .nav-download { height:48px; border-radius:16px; }
}

@media (prefers-reduced-motion:reduce) {
  .liquid-nav,.liquid-nav .nav-lens { transition:none; }
}