.nav{
  display:none;
}
@media(max-width:900px){
  .nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    height:68px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:stretch;
    padding:6px 8px max(6px,env(safe-area-inset-bottom));
    background:#0f1116;
    border-top:1px solid #2b3038;
    box-shadow:0 -8px 24px rgba(0,0,0,.28);
  }
  .item{
    appearance:none;
    border:0;
    background:transparent;
    color:#6f7984;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    padding:4px 2px;
    font:600 .58rem/1 var(--font-family-base);
    cursor:pointer;
  }
  .item svg{flex:0 0 auto}
  .item span{
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:center;
  }
  .item.active{
    color:#79e6ef;
  }
  .menu{
    min-width:190px;
    margin-bottom:4px;
  }
}