.v2-nav{
  position:fixed;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:1500;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  margin:0;
  padding:6px 4px;
  color:#fff;
  mix-blend-mode:difference;
  opacity:0;
  transition:opacity .6s cubic-bezier(.16,1,.3,1);
  transition-timing-function:var(--fx-ease,cubic-bezier(.16,1,.3,1));
}
.v2-nav.is-on{opacity:1;}


.v2-nav__item{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:5px 2px;
  border:0;
  background:none;
  color:inherit;
  cursor:pointer;
  font:inherit;
  -webkit-appearance:none;
  appearance:none;
}
.v2-nav__item:focus{outline:none;}
.v2-nav__item:focus-visible .v2-nav__dot{outline:1px solid #fff;outline-offset:3px;}


.v2-nav__dot{
  flex:none;
  width:8px;
  height:8px;
  border:1px solid #fff;
  background:transparent;
  transition:background .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);
  transition-timing-function:var(--fx-ease,cubic-bezier(.16,1,.3,1));
}


.v2-nav__label{
  font-family:var(--fx-mono,"Space Mono",ui-monospace,monospace);
  font-weight:400;
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  transform:translateX(8px);
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);
  transition-timing-function:var(--fx-ease,cubic-bezier(.16,1,.3,1));
  pointer-events:none;
}
.v2-nav:hover .v2-nav__label,
.v2-nav:focus-within .v2-nav__label,
.v2-nav__item.is-active .v2-nav__label{
  opacity:1;
  transform:translateX(0);
}


.v2-nav__item.is-active .v2-nav__dot{background:#fff;}
.v2-nav__item:hover .v2-nav__dot{transform:scale(1.4);}


@media (max-width:899.98px){
  .v2-nav{display:none;}
}


@media (prefers-reduced-motion:reduce){
  .v2-nav,
  .v2-nav__dot,
  .v2-nav__label{transition:none;}
  .v2-nav__item:hover .v2-nav__dot{transform:none;}
}