마우스 버튼을 떼지 않고 4개의 직선으로 9개의 점을 연결하는 퍼즐이 포함된 웹페이지를 만드세요. 선은 점 그리드를 벗어나 확장될 수 있습니다. 해결 규칙을 포함하고, 마우스 클릭과 드래그를 사용한 인터랙티브한 솔루션을 제공하세요. 정답일 경우 'Поздравляем, вы решили головоломку!'라는 축하 메시지를 표시하고, 틀린 경우 왜 틀렸는지 설명하세요. 그리드 외부로 선이 확장될 수 있도록 충분한 공간을 제공합니다.

프로젝트 개요
'4개의 선으로 9개의 점 연결하기' 도전 과제를 특징으로 하는 퍼즐 페이지를 디자인하세요.

UI/UX 디자인 및 흐름
- 3x3 그리드에 배열된 9개의 점을 표시하세요.
- 사용자가 마우스 클릭 및 드래그로 선을 그릴 수 있도록 하세요.
- 그리드 영역 외부로 선이 확장될 수 있도록 하세요.

핵심 기능 및 로직
- 마우스 클릭 및 드래그로 선을 그리는 기능을 구현하세요.
- 선이 그려지면 자동으로 정답 여부를 확인하세요.
- 정답일 경우 'Поздравляем, вы решили головоломку!' 메시지를, 오답일 경우 명확한 설명을 즉시 제공하세요.

모범 사례
- 반응형이며 사용자 친화적인 인터페이스를 제공하세요.
- 페이지 새로고침 없이 동적으로 정답을 검증하세요.
- 올바른 솔루션을 안내하기 위해 의미 있는 오류 메시지를 사용하세요.

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

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

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

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