/* glass pill menu button (js/notemenu.js) */
.menu-btn.wvm{width:auto;height:44px;padding:0;border-radius:999px}
.menu-btn.wvm>span{display:none}
.menu-btn.wvm::after{content:none!important}
button.menu-btn.wvm{padding:0}
.wv-pill{position:relative;display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 11px;border-radius:999px;font-style:normal;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 20px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  transition:transform .35s cubic-bezier(.2,1.4,.3,1),background .3s,border-color .3s}
.wv-pill canvas{width:36px;height:22px;display:block}
.wv-pill b{font-size:13px;font-weight:600;line-height:1;letter-spacing:-.01em;color:var(--plat);min-width:36px}
.menu-btn.wvm:active .wv-pill{transform:scale(.92)}
.menu-btn.wvm:focus-visible{outline:none}
.menu-btn.wvm:focus-visible .wv-pill{outline:2px solid var(--cyan);outline-offset:2px}
.menu-open .wv-pill{background:linear-gradient(180deg,rgba(0,242,254,.22),rgba(79,172,254,.08));border-color:rgba(0,242,254,.45)}
@media (hover:hover){.menu-btn.wvm:hover .wv-pill{border-color:rgba(0,242,254,.4)}}
/* the menu itself: deeper glass, and its own entrance comes from the script */
.wvm-on .mnav{background:rgba(10,12,16,.74);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%)}
.wvm-on.menu-open .mnav{animation:none}
.wvm-on .mnav a,.wvm-on .mnav .mgroup{position:relative;z-index:1}
.wv-ring{position:fixed;z-index:120;border-radius:999px;border:1.5px solid rgba(0,242,254,.8);box-shadow:0 0 24px rgba(0,242,254,.6);pointer-events:none}
.wv-trace{position:absolute;left:0;top:0;width:100%;height:80px;z-index:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.wvm-on.menu-open .mnav{animation:none}}
@media (max-width:339px){.wv-pill{padding:0 10px}.wv-pill b{display:none}}

/* computers: the same button, menu opens as a side panel (pages with class "gmenu-all") */
@media (min-width:1180px){
  .gmenu-all .nav{display:none}
  .gmenu-all .menu-btn{display:inline-flex}
  .gmenu-all .mnav{left:auto;width:420px;border-left:1px solid var(--glass-b);box-shadow:-30px 0 60px rgba(0,0,0,.4)}
  .gmenu-all.menu-open{overflow:auto}
  .gmenu-all .mnav a:hover{color:var(--cyan)}
}

/* Signature Notes variant (js/notemenu.js) */
.wv-pill.nm canvas{width:40px;height:24px}
.nm-layer{position:fixed;inset:0;z-index:121;pointer-events:none;overflow:hidden}
.nm-note{position:absolute;left:0;top:0;display:block;will-change:transform,opacity}
.nm-note svg{display:block;width:100%;height:100%;fill:#00F2FE;filter:drop-shadow(0 0 4px rgba(0,242,254,.9)) drop-shadow(0 0 10px rgba(79,172,254,.5))}
.nm-note:nth-child(2n) svg{fill:#7ad8ff}
@media (max-width:374px){.wv-pill{padding:0 11px 0 9px;gap:6px}}