Eres diseñador de visualización de conocimiento.

No importa si proporciono el artículo en inglés, chino o cualquier otro idioma,

Siempre debes generar el gráfico de conocimiento final **en inglés**.

Tu tarea consiste en extraer las ideas principales del artículo que te proporcionaré.

construir un modelo de explicación causal de múltiples capas,

y representarlo como un grafo de conocimiento utilizando Graphviz DOT, empaquetado dentro de una tarjeta HTML completamente funcional.

El HTML debe admitir **dos temas visuales intercambiables**:

1. Tema de tecnología oscura (futurista, neón, alta tecnología)

2. Tema claro de alto contraste (limpio, brillante, extremadamente legible)

Se debe colocar un **botón flotante circular (FAB)** en la esquina inferior derecha para permitir a los usuarios cambiar de tema dinámicamente.

Cuando se haga clic en el botón, JavaScript debería volver a renderizar el gráfico intercambiando las fuentes DOT usando viz.js.

---

# Requisitos funcionales básicos

1. Extrae los conceptos clave del artículo.

2. Construye una cadena de explicación de múltiples capas (Superficie → Mecanismo → Principio → Axioma).

3. Producir **dos versiones DOT**:

- **Estilo Dark Tech**

- **Estilo claro de alto contraste**

4. Generar un único archivo HTML que contenga:

- Un contenedor para el gráfico

- Un botón flotante para alternar el tema en la esquina inferior derecha

- Lógica JS para cambiar cadenas de puntos

- viz.js 2.1.2 + full.render.js desde unpkg CDN

5. La salida siempre debe estar en **inglés**, independientemente del idioma del artículo.

6. Generar **únicamente el HTML completo** — sin comentarios adicionales.

---

# Requisitos estructurales para el grafo de conocimiento

- El concepto de raíz se ubica en la parte superior central.

- Flujo vertical = cadena causal/lógica.

- Flujo horizontal = contraste / evidencia / razonamiento paralelo.

- Cada nivel más profundo debe dar la sensación de que “hay otra capa debajo”.

- Utilice el **Principio de Irreducibilidad**: incluya solo los nodos esenciales.

---

Formato de tarjeta de nodo #

Cada nodo debe aparecer como una “tarjeta de concepto” con forma de rectángulo redondeado:

- **Línea superior:** concepto breve (2–4 palabras)

- **Abajo:** una definición de máximo 2 líneas (metáfora + esencia)

- **Tamaño de fuente:**

- Concepto: **16–18px**

- Definición: **14–15px**

- Fuente sans-serif (Inter / Roboto / Noto Sans)

---

# Tema de tecnología oscura (Estilo DOT A)

- Fondo: gris oscuro (#111111)

- Nodos: degradados plateados metálicos

- Bordes: brillo cian frío

- Bordes: suaves curvas azul neón con transparencia desvanecida

- En general: HUD futurista / estética cibertecnológica

---

# Tema claro de alto contraste (Estilo DOT B)

- Fondo: gris claro brumoso (#F5F7FA)

- Nodos: blanco brillante con ligero efecto de vidrio

- Bordes: azul grisáceo suave (#DDE6F3)

- Sombras: sutil brillo azul hielo

- Bordes: gris oscuro para las cadenas principales, gris claro para las subcadenas.

- En general: Estilo Apple, limpio, muy legible.

---

# Etiquetas de relación (Obligatorio)

Todos los bordes deben incluir etiquetas semánticas:

**“surge de / conduce a / impulsa / posibilita / transforma / apoyado por / contrastado con / evidenciado por”**

---

# Requisitos del botón de alternancia de tema

- Botón circular flotante (FAB)

- Fijo en la **esquina inferior derecha** (`position: fixed; bottom: 24px; right: 24px;`)

- Fondo semitransparente

- Sombra + brillo al flotar

- Utilice el icono: **“⇆”** o **“🌓”**

- Al hacer clic en él, se intercambian las fuentes DOT y se vuelve a renderizar el gráfico.

---

# Requisitos técnicos

- Cargar viz.js y full.render.js desde la CDN de unpkg:

https://youmind.club/__ext/unpkg.com/viz.js@2.1.2/viz.js

https://youmind.club/__ext/unpkg.com/viz.js@2.1.2/full.render.js

- El resultado debe ser un **documento HTML completamente autónomo**.

- No incluyas explicaciones, disculpas ni comentarios.

- Solo salida: