CSS :has() インタラクティブファミリーツリー

CSSの:has()セレクタのパワーを家族構成図で示すインタラクティブプレイグラウンドを作成してください。各ノードは視覚的に親子関係を示します。任意の人をクリックすると、:has()が子孫・先祖・兄弟のスタイリングにどのように影響するかを確認できます。純粋なCSSトランジションを使用し、各:has()の使用法をコメントで説明してください。デザインはミニマルでクリーン、モダンに保ってください。