.navwrap.nav-two-row{
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}


.navwrap.nav-two-row .navrow{
  transition:opacity .22s var(--ease),
             transform .26s var(--ease),
             max-height .3s var(--ease),
             padding .26s var(--ease);
  max-height:200px;
}


.navfold{
  margin-left:10px;
  width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:none;
  border:1px solid var(--brd);
  border-radius:9px;
  color:var(--muted);
  font-size:11px;line-height:1;
  cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--ease);
}
.navfold:hover{
  color:var(--ink);
  background:rgba(255,255,255,.08);
  border-color:var(--brd-2);
  transform:translateY(-1px);
}
.navfold-ic{display:block;transition:transform .26s var(--ease)}


.navwrap.nav-folded .navrow-tabs{
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
  transform:translateY(-4px);
  overflow:hidden;
  pointer-events:none;
}
.navwrap.nav-folded{box-shadow:0 4px 16px -12px rgba(20,10,25,.5)}


.navgrp,.navsolo{
  transition:color .2s var(--ease),background-color .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--ease),
             box-shadow .2s var(--ease);
  will-change:transform;
}
.navgrp:active,.navsolo:active,.navfold:active{transform:translateY(0) scale(.97)}


.navgrp.open{
  box-shadow:0 6px 18px -12px rgba(236,24,102,.9),
             inset 0 1px 0 rgba(255,255,255,.06);
}


.navgrp-n{transition:background-color .2s var(--ease),opacity .2s var(--ease)}


.navwrap.nav-two-row .tab{
  transition:color .18s var(--ease),background-color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease),
             box-shadow .22s var(--ease);
  will-change:transform;
}
.navwrap.nav-two-row .tab:hover{transform:translateY(-1px)}
.navwrap.nav-two-row .tab:active{transform:translateY(0) scale(.98)}


.navwrap.nav-two-row .tab.on{
  box-shadow:0 6px 18px -8px rgba(236,24,102,.75),
             inset 0 1px 0 rgba(255,255,255,.14);
}


.navwrap.nav-two-row .navrow-tabs .tab{
  animation:navTabIn .26s var(--ease) both;
}
@keyframes navTabIn{
  from{opacity:0;transform:translateY(-3px)}
  to{opacity:1;transform:none}
}

.navwrap.nav-two-row .navrow-tabs .tab:nth-child(1){animation-delay:0ms}
.navwrap.nav-two-row .navrow-tabs .tab:nth-child(2){animation-delay:22ms}
.navwrap.nav-two-row .navrow-tabs .tab:nth-child(3){animation-delay:44ms}
.navwrap.nav-two-row .navrow-tabs .tab:nth-child(4){animation-delay:66ms}
.navwrap.nav-two-row .navrow-tabs .tab:nth-child(5){animation-delay:88ms}
.navwrap.nav-two-row .navrow-tabs .tab:nth-child(n+6){animation-delay:104ms}


.cp-back{transition:color .18s var(--ease),background-color .18s var(--ease),
                    border-color .18s var(--ease),transform .18s var(--ease),
                    box-shadow .18s var(--ease)}
.cp-back:hover{transform:translateY(-1px)}
.cp-back:active{transform:translateY(0) scale(.985)}


.navgrp:focus-visible,.navsolo:focus-visible,.navfold:focus-visible,
.navwrap.nav-two-row .tab:focus-visible{
  outline:2px solid #ff6aa6;outline-offset:2px;border-radius:inherit;
}


@media (prefers-reduced-motion:reduce){
  .navwrap.nav-two-row,
  .navwrap.nav-two-row .navrow,
  .navgrp,.navsolo,.navfold,.navfold-ic,.navgrp-n,
  .navwrap.nav-two-row .tab,.cp-back{transition:none}
  .navwrap.nav-two-row .navrow-tabs .tab{animation:none}
  .navgrp:hover,.navsolo:hover,.navfold:hover,
  .navwrap.nav-two-row .tab:hover,.cp-back:hover{transform:none}
}