.mobile-tabbar, .mobile-backdrop { display: none; }
@media (max-width:850px) {
  main { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .mobile-tabbar { position: fixed; inset: auto 0 0; z-index: 18; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: calc(66px + env(safe-area-inset-bottom, 0px)); padding: 5px max(4px, env(safe-area-inset-left, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-right, 0px)); border-top: 1px solid #d6d0c5; background: #faf8f3f5; backdrop-filter: blur(12px); box-shadow: 0 -4px 18px #1d241d12; }
  .mobile-tabbar button { display: grid; place-content: center; justify-items: center; gap: 2px; min-width: 0; min-height: 50px; padding: 4px 1px; border: 0; border-radius: 8px; background: transparent; color: #697168; font: 500 10px var(--sans); }
  .mobile-tabbar button[aria-current="page"] { color: #334c3d; background: #e7ecdf; }
  .mobile-tabbar button span { font-size: 21px; line-height: 1; }
  .mobile-tabbar button small { font: inherit; white-space: nowrap; }
  .mobile-tabbar button:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
  .mobile-backdrop:not([hidden]) { display: block; position: fixed; inset: 0 0 0 min(280px, 82vw); z-index: 19; width: auto; height: 100%; padding: 0; border: 0; background: #18201873; }
}
@media (max-width: 380px) { .mobile-tabbar button { font-size: 9px; } .mobile-tabbar button span { font-size: 19px; } }