@layer base {
  body {
    display: grid;
    grid-template-rows: auto 1fr;
  }

  #main {
    inline-size: 100%;
    min-inline-size: 0;
    margin-inline: auto;
    padding-block-end: calc(var(--block-space-double) + var(--safe-inset-bottom));
    padding-inline:
      calc(var(--main-padding) + var(--safe-inset-left))
      calc(var(--main-padding) + var(--safe-inset-right));
    text-align: center;

    /* Scrolls the end of the page clear of the bar, including its round button */
    body:has(.bar) & {
      padding-block-end: calc(var(--bar-height) + var(--bar-add-size) / 2 + var(--block-space-double) + var(--safe-inset-bottom));
    }
  }
}