.modal[open] {
    inline-size: min(100%, 24rem);
    border: none;
    border-radius: 0.5rem;
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    color: var(--text-on-field);
    background: var(--surface-raised);

    > :is(div, form) { display: contents }

    footer {
        display: grid;
        gap: 0.75rem;
    }
}

.modal::backdrop { background: color-mix(in oklab, var(--surface-backdrop) 60%, transparent) }