.mobile-nav-toggle{display:none}
@media(max-width:820px){
  .mobile-nav-toggle{display:grid;place-content:center;gap:4px;width:38px;height:38px;margin-left:auto;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
  .mobile-nav-toggle span{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .18s,opacity .18s}
  .mobile-nav-open .mobile-nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mobile-nav-open .mobile-nav-toggle span:nth-child(2){opacity:0}
  .mobile-nav-open .mobile-nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .top nav{position:absolute;top:64px;left:12px;right:12px;display:none;flex-direction:column;gap:2px;padding:8px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 18px 50px rgba(20,50,34,.13);z-index:20}
  .mobile-nav-open nav{display:flex}
  .top nav a{min-height:44px;padding:0 12px;display:flex;align-items:center;border-radius:10px}
  .top nav a:hover{background:var(--paper)}
}