dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  width: min(700px, 90vw);

  max-height: min(80vh, 800px);
  overflow: hidden;       

  /* start hidden */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}

dialog .dialog-inner {
  padding: 32px;
  max-height: inherit;
  overflow: auto;             /* scrolling happens here */
  border-radius: inherit;     /* optional; helps with clipping */
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: background 200ms ease;
}

/* "visible" state */
dialog.is-open {
  opacity: 1;
  transform: translateY(0);
}

dialog.is-open::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* closing state */
dialog.is-closing {
  opacity: 0;
  transform: translateY(8px);
}

dialog.is-closing::backdrop {
  background: rgba(0, 0, 0, 0);
}