Create a webpage featuring a puzzle that challenges users to connect 9 dots with 4 straight lines without lifting the mouse.

Instructions:
- Puzzle Layout: Arrange the dots in a 3x3 grid on the webpage.
- User Interaction: Enable users to draw straight lines by clicking and dragging between dots. Ensure lines remain connected as the user draws without lifting.
- Puzzle Rules: Clearly explain the objective — connect all 9 dots using only 4 straight lines. Highlight that lines should be continuous.

Feedback:
- Success Message: When all dots are correctly connected with 4 lines, display a friendly and informal congratulatory message.
- Error Explanation: If the solution is incorrect, provide a friendly explanation as to why it didn't meet the conditions, offering hints or encouragement.

User Experience:
- Design an engaging user experience with clear instructions and interactive feedback. Make it enjoyable for users to try different approaches without frustration.

Considerations:
- Create an intuitive layout where users can easily understand the puzzle rules and interact smoothly. Implement logic to check the correctness of users' solutions and display appropriate feedback. Use best web design practices for accessibility and responsiveness.

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

Q: Как именно должна выглядеть головоломка?
A: Точки в квадрате 3x3.

Q: Какой стиль поздравления или объяснения вас интересует?
A: Неофициальный и дружелюбный.