dialog {
  /* Reset UA styles */
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;

  /* Position as bottom sheet */
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-height: 90dvh;

  /* Closed state — where it animates from/to */
  translate: 0 100%;
  opacity: 0;

  /* Transitions — Vaul-inspired easing */
  transition:
    translate 0.5s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    display 0.5s cubic-bezier(0.32, 0.72, 0, 1) allow-discrete,
    overlay 0.5s cubic-bezier(0.32, 0.72, 0, 1) allow-discrete;
}

/* Open state */
dialog[open] {
  translate: 0 0;
  opacity: 1;
}

/* Entry animation starting point */
@starting-style {
  dialog[open] {
    translate: 0 100%;
    opacity: 0;
  }
}

/* Backdrop */
dialog::backdrop {
  background: rgb(0 0 0 / 0);
  transition:
    background-color 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    display 0.5s cubic-bezier(0.32, 0.72, 0, 1) allow-discrete,
    overlay 0.5s cubic-bezier(0.32, 0.72, 0, 1) allow-discrete;
}

dialog[open]::backdrop {
  background: rgb(0 0 0 / 0.4);
}

@starting-style {
  dialog[open]::backdrop {
    background: rgb(0 0 0 / 0);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  dialog,
  dialog::backdrop {
    transition: none;
  }
}