Crie uma página web com um quebra-cabeça onde os usuários conectam 9 pontos usando 4 linhas retas sem soltar o botão do mouse. As linhas podem se estender além da grade de pontos. Inclua regras para resolver e forneça uma solução interativa usando cliques e arrastos do mouse. Exiba uma mensagem de parabéns ('Поздравляем, вы решили головоломку!') se a solução estiver correta ou explique por que ela está incorreta. Forneça espaço suficiente para resolver o quebra-cabeça, permitindo que as linhas se estendam além da grade.

Visão Geral do Projeto
Desenhe uma página de quebra-cabeça apresentando o desafio 'Conecte 9 Pontos com 4 Linhas'.

Design UI/UX e Fluxo
- Exiba 9 pontos dispostos em uma grade 3x3.
- Permita que os usuários desenhem linhas clicando e arrastando o mouse.
- Garanta que as linhas desenhadas possam se estender fora da área da grade.

Funcionalidade e Lógica Principal
- Implemente a funcionalidade de desenho de linhas através de cliques e arrastos.
- Verifique automaticamente a correção da solução assim que as linhas forem desenhadas.
- Forneça feedback imediato: exiba 'Поздравляем, вы решили головоломку!' se a solução estiver correta ou uma explicação clara se estiver incorreta.

Melhores Práticas
- Garanta uma interface responsiva e amigável.
- Valide a solução de forma dinâmica sem necessidade de recarregar a página.
- Utilize mensagens de erro significativas para orientar os usuários rumo à solução correta.

Создай страницу с головоломкой соедини 9 точек 4-мя линиями не отпуская левой кнопки мыши, линии могут выходить за пределы поля точек.
опиши правила и сделай чтобы можно было ее решить мышкой.
Обязательно выводи поздравление если задача решена,  или объяснение почему задача решена неверно.

Оставь достаточно места, для того чтобы решить задачу и выйти за пределы как в классическом решении

Q: Как должны выглядеть 9 точек на странице?
A: Например, сетка 3x3.

Q: Какое сообщение вывести при правильном решении?
A: Например, 'Поздравляем, вы решили головоломку!'.