Create a webpage with a puzzle where users connect 9 dots using 4 straight lines without lifting the mouse button. The lines can extend beyond the dots' grid. Include rules for solving and provide an interactive solution using mouse clicks and drags. Display a congratulatory message when solved correctly or explain why the solution is incorrect. Provide enough space to solve the puzzle with lines extending beyond the grid.

Project Overview
Design a puzzle page featuring the 'Connect 9 Dots with 4 Lines' challenge.

UI/UX Design and Flow
- Display 9 dots arranged in a 3x3 grid.
- Allow users to draw lines by clicking and dragging with the mouse.
- Ensure that the drawn lines can extend outside the grid area.

Core Functionality and Logic
- Implement line-drawing functionality where users click and drag to draw.
- Automatically check the solution's correctness when lines are drawn.
- Provide immediate feedback: display 'Поздравляем, вы решили головоломку!' if solved correctly or a clear explanation if incorrect.

Best Practices
- Ensure the interface is responsive and user-friendly.
- Validate the solution dynamically without need for page refresh.
- Use meaningful error messages to guide users towards the correct solution.

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

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

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

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