.container {
  position: relative;
  display: block grid;
  grid: auto 1fr / 5em 1fr;
  grid-template-areas:
    "top top"
    "nav content";
  inline-size: 100%;
  block-size: 100%;
  z-index: 0;
  overflow: clip;
  container-type: inline-size;
  background-color: var(--surface-1);
  contain: layout style paint;

  &::after {
    content: '';
    grid-area: content;
    display: block;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: var(--radius-4);
    block-size: var(--radius-4);
    background: radial-gradient(circle at bottom right, transparent var(--radius-4), var(--surface-1) var(--radius-4));
    pointer-events: none;
  }
}

.body {
  grid-area: 2 / 1 / 3 / 3;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(180deg,
      transparent,
      transparent 90vh,
      var(--surface-500) 90vh,
      var(--surface-500));
  overflow: clip auto;
  padding-inline-start: 5em;
  transition: filter var(--duration-moderate-1) var(--ease-3);
  contain: layout style paint;
  container-type: size;

  & > div {
    background-color: var(--surface-2);
    container-type: inline-size;
    contain: layout style paint;
    inline-size: 100%;
    block-size: fit-content;
    min-block-size: 100%;
  }
}