html:has(dialog[open]) {
      overflow: hidden;
    }

    @keyframes scaleDown {
      0% {
        opacity: 1;
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform: scale(0);
      }
    }

    @keyframes slideInUp {
      0% {
        opacity: 0;
        transform: translateY(20%);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    dialog[open]::backdrop {
        background: #080d195a;
        backdrop-filter: blur(10px);
    }

    @media (prefers-reduced-motion: no-preference) {
      dialog {
        opacity: 0;
        transform: scale(0.9);
      }

      dialog.showing {
        animation: slideInUp 0.3s ease-out forwards;
      }

      dialog.closing {
        animation: scaleDown 0.3s ease-in forwards;
      }
    }