.nav-toggle{display:none}
@media(max-width:767px){
  .pill-nav{left:auto;right:16px;top:16px;display:flex;align-items:flex-end;flex-direction:column;gap:10px}
  .pill-nav:not(.is-open){mix-blend-mode:difference}
  .nav-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;color:#fff;border:0;border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-toggle>span:first-child{display:none}
  .pill-nav.is-open .nav-toggle{color:#777}
  .nav-toggle-icon{display:grid;gap:4px;width:24px}
  .nav-toggle-icon i{display:block;width:24px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon i:first-child{transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon i:last-child{transform:translateY(-6px) rotate(-45deg)}
  .pill-nav .pill-nav-items{display:none;width:min(260px,calc(100vw - 32px));max-width:none;height:auto;padding:8px;border-radius:24px;background:#111;box-shadow:0 12px 32px #0002}
  .pill-nav.is-open .pill-nav-items{display:block}
  .pill-nav .pill-list{display:flex;flex-direction:column;gap:6px;padding:0;height:auto}
  .pill-nav .pill-list>li{display:block;flex:none;height:auto}
  .pill-nav .pill{justify-content:flex-start;min-height:48px;padding:0 20px;font-size:15px}
  .pill-nav .pill.active::after{left:auto;right:18px;bottom:19px;width:8px;height:8px;transform:none}
  .nav-toggle:focus-visible,.pill-nav .pill:focus-visible{outline:3px solid #699bda;outline-offset:3px}
}