マウスを離さずに4本の直線で9つの点を結ぶパズルを特徴とするウェブページを作成してください。

指示：
- パズルの配置：ウェブページ上に3×3のグリッド状に点を配置します。
- ユーザーの操作：ユーザーが点と点をクリック＆ドラッグして直線を描けるようにし、マウスを離さずに線が途切れないようにします。
- パズルのルール：4本の直線のみを使用してすべての9つの点を結ぶ目標を明確に説明してください。線が連続している必要があることを強調します。

フィードバック：
- 成功メッセージ：4本の線で全ての点が正しく結ばれた時、親しみやすくカジュアルな祝福のメッセージを表示します。
- エラー説明：解答が正しくない場合は、条件が満たされなかった理由を親しみやすい口調で説明し、ヒントや励ましを提供します。

ユーザー体験：
- 分かりやすい指示とインタラクティブなフィードバックを備えた、楽しく試行錯誤できる体験を設計してください。

注意事項：
- ユーザーがパズルのルールを容易に理解し、スムーズに操作できる直感的なレイアウトを作成します。解答の正否を確認し、適切なフィードバックを表示するロジックを実装してください。ウェブデザインのベストプラクティスに則り、アクセシビリティとレスポンシブデザインも考慮してください。

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

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

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