body {
  margin: unset;
  max-width: unset;


  display: flex;
  flex-direction: row;
  gap: 0.5rem;

  width: 100vw;
  height: 100vh;

  section {
    /* border: var(--border); */
    margin-bottom: unset;
    padding: 0.5rem;
  }

  #list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;

    #top {
      display: flex;

      #title {
        padding-left: 0.5rem;
        flex-grow: 1;
      }
    }

    .list-item {

      display: flex;

      .item-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
      }
    }
  }

  #upload {
    width: 0;
    padding: 0;
    overflow: hidden;
    border-left: 1px solid var(--border);
    transition:
      width 280ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 280ms cubic-bezier(0.22, 1, 0.36, 1);

    > * {
      opacity: 0;
      transform: translateX(8px);
      transition:
        opacity 200ms ease 80ms,
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
    }

    &[open] {
      width: min(360px, 30%);
      padding: 0.5rem;

      > * {
        opacity: 1;
        transform: none;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #upload, #upload > * { transition: none; }
  }
}