@media screen{
  #app>nav>button{background:none;border:1px solid transparent;box-shadow:none;color:#5a424e;transition:background .18s,border-color .18s,box-shadow .18s}
  #app>nav>button:after{content:none}
  #app>nav>button:hover:not(.active){background:#f5d4e0;border-color:transparent;box-shadow:none;color:#3f2b35}
  #app>nav>button.active{background:linear-gradient(121deg,transparent 0 47%,#ffffff21 47.4% 59%,transparent 59.4%),linear-gradient(180deg,#42383b,#292529 78%);color:#ffebbd;border-color:#bda16b;box-shadow:inset 0 1px 0 #f5dfa28c,inset 0 -1px 0 #9e7b4a55,0 0 8px #e2bd7147,0 3px 8px #46303918}
  #app>nav>button.active:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(95deg,transparent 15%,#fff6c9b3 50%,transparent 85%) top/100% 1px no-repeat}
  #app>nav>button.active:before{background:#f7d990;box-shadow:0 0 5px #ffe2a680}
  #app>nav{background:#fff;border-color:#d6acbc;box-shadow:0 3px 15px #65324b0a}
}
@media(prefers-reduced-motion:reduce){#app>nav>button{transition:none}}