.modal {
    &::backdrop { background: hsl(0 0% 0% / 0.5) }

    &[open] {
        inline-size: min(90vw, 600px);
        padding: clamp(1.25rem, 4vw, 2rem);
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.25);
        display: grid;
        gap: 1rem;
        color: var(--ink-primary);
        --ground: white;
        background: white;

        h2 { font-weight: var(--weight-answer) }
        p { margin: 0 }

        img {
            max-inline-size: 100%;
            block-size: auto;
        }

        form {
            display: grid;
            gap: 1rem;
        }

        label {
            display: grid;
            gap: 0.25rem;
        }

        input {
            block-size: 2.75rem;
            padding-inline: 0.75em;
            border: 1px solid var(--operator-border);
            border-radius: var(--operator-radius);

            &:focus-visible { outline: 2px solid var(--operator-accent) }
        }

        menu {
            flex-wrap: wrap;
            justify-content: end;
        }
    }
}