/*
     * 保持 [open]（仍在 top layer）的同时强制关闭态视觉，
     * 与 DaisyUI 默认 200ms opacity/scale 过渡对齐。
     */
    .dy-modal[open].is-closing.svelte-p5vw9i {
        opacity: 0;
        pointer-events: none;
    }

    .dy-modal[open].is-closing.svelte-p5vw9i .dy-modal-box:where(.svelte-p5vw9i) {
        --tw-scale-x: 0.9;
        --tw-scale-y: 0.9;
        transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
            rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0))
            scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }

    .dy-modal.svelte-p5vw9i::backdrop {
        opacity: 1;
        transition: opacity 200ms cubic-bezier(0, 0, 0.2, 1);
    }

    .dy-modal[open].is-closing.svelte-p5vw9i::backdrop {
        opacity: 0;
    }

    /*
     * 图标尺寸写死，不跟随 #container 或阅读正文字号。
     * 手机热区略大，方便点按；平板与桌面保持同一套尺寸。
     */
    .modal-close-btn.svelte-p5vw9i {
        font-size: 0;
        line-height: 1;
        color: inherit;
    }

    .modal-close-btn.svelte-p5vw9i svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    @media (min-width: 640px) {
        .modal-close-btn.svelte-p5vw9i svg {
            width: 18px;
            height: 18px;
        }
    }

    @media (hover: hover) {
        .modal-close-btn.svelte-p5vw9i:hover {
            background-color: var(--close-hover);
        }
    }