Let me read the existing files to understand the current state before building the new feature:

Now I'll build the 4th dimension explainer. This is a completely different project from the Block Blast game, so I'll replace the page content and create new components. I'll use Canvas for the interactive tesseract visualization with 4D rotation.

Now let me update the globals.css font variables:

Now let me create the interactive tesseract (4D hypercube) component:

Now let me create the main page that ties everything together:

4次元を解説するインタラクティブなプログラムが完成しました。主な構成は以下の通りです:

• ステップバイステップの解説: 0次元（点）から1次元（線）、2次元（面）、3次元（立体）、そして4次元（超立体）へと段階的に次元を上げていく構成で、各ステップにSVGビジュアルと分かりやすいアナロジーを表示します。
• インタラクティブなテセラクト: 4Dステップでは、16頂点32辺のテセラクト（超立方体）を4D回転させながら3D→2Dに投影したCanvas描画が表示され、マウスドラッグで自由に回転操作でき、再生/一時停止や速度調整も可能です。
• 比較テーブルと核心の解説: 次元ごとの頂点・辺・面・セル数の比較表と、「新しい方向」「影で理解する」「数学で記述できる」という3つの核心コンセプトをカードで紹介しています。