マウスを離さずに4本の線を使い、グリッドを超えて伸びる線で『９ドット連結』パズルを含むウェブページを作成してください。ルールを説明し、マウスで解けるようにインタラクティブにしてください。正解の場合はユーザーにお祝いのメッセージを表示し、不正解の場合は間違いを説明してください。

プロジェクト概要
- 『９ドット連結』パズル用のウェブページを作成する。
- ゲームのルールやガイドラインを実装して説明する。

UI/UXデザインとフロー
- クラシックな解法が可能なように、点の周りに十分なスペースを設けたミニマリストデザイン。
- マウスを使って点を線でつなぐインタラクティブなエリア。
- チャレンジ用のタイマーを実装する。

コア機能とロジック
- JavaScript/CSSを使用してインタラクティブな線の描画を実現する。
- パズルの解答を検証し、正解ならお祝いメッセージを、不正解ならミスの説明を行う。
- タイマーがパズル解答にかかった時間をカウントする。

ベストプラクティス
- デスクトップとモバイルブラウザの両方に最適化する。
- クライアント側のロジックは安全かつ効率的にする。
- 線の描画と完了通知に対して明確な視覚的フィードバックを提供する。

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

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

Q: Какой стиль или визуальное оформление вы предпочитаете для головоломки?
A: Например, минималистичный, яркий и игривый.

Q: Хотите ли вы добавить таймер или счетчик попыток для решения головоломки?
A: Да, хочу таймер.