@layer native {
  :root {
    --native-tab-bar-block-size: 3.25rem;
  }

  body[data-platform="native"] .nav {
    display: none;
  }

  body[data-platform="native"] main {
    padding-block-end: calc(var(--native-tab-bar-block-size) + env(safe-area-inset-bottom));
  }

  /* #footer_frames is sticky to the *viewport* bottom, which sits behind the native tab bar —
     it needs to know the tab bar's height to lift itself above it. */
  body[data-platform="native"] #footer_frames {
    bottom: calc(var(--native-tab-bar-block-size) + env(safe-area-inset-bottom));
  }
}