@layer modules {
  .public-body {
    --public-nav-height: 64px;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .public-nav {
    position: relative;
    z-index: 10000;
    border-block-end: 1px solid var(--rs-color-border-neutral-faded);
    background: var(--rs-color-background-page);
  }

  .public-nav__inner {
    inline-size: min(1120px, calc(100% - 32px));
    min-block-size: var(--public-nav-height);
    margin-inline: auto;
    display: flex;
    align-items: center;
  }

  .public-nav__brand {
    font-family: var(--rs-font-family-title);
    font-size: var(--rs-font-size-body-1);
    font-weight: var(--rs-font-weight-semibold);
    line-height: var(--rs-line-height-body-1);
    letter-spacing: 0;
  }

  .public-main {
    flex: 1;
    min-block-size: 100dvh;
    padding: var(--rs-unit-x4);
  }

  .public-body--with-nav .public-main {
    min-block-size: auto;
  }

  .public-body--with-nav > #connect-ui {
    top: var(--public-nav-height) !important;
    block-size: calc(100dvh - var(--public-nav-height)) !important;
    height: calc(100dvh - var(--public-nav-height)) !important;
  }
}