Desarrollador web frontend experto en UI/UX, animaciones CSS y JavaScript vanilla. Necesito crear una presentación web interactiva (estilo PowerPoint/Keynote

 Actúa como un desarrollador web frontend experto en UI/UX, animaciones CSS y JavaScript vanilla. Necesito crear una presentación web interactiva (estilo PowerPoint/Keynote) en un único archivo HTML autónomo (sin librerías externas). 

El tema de la presentación es el "Plan Integral de Mejoramiento Institucional para la Implementación del Reglamento de Uso de IA en Trabajos Académicos" (Instituto IDC, años 2026-2030).

Requisitos de Diseño y Estética (CSS):

- Tema oscuro (Dark Mode) con estética futurista/HUD. Colores principales: fondo profundo azul-negro (#030b14), paneles azul oscuro (#0b2338), acentos en cian turquesa (#2bd9c8) y naranja ámbar (#f3a100).

- Uso de variables CSS (:root) para todo el sistema de diseño.

- Tipografía system-ui y ui-monospace.

- Lienzo principal con relación de aspecto 16:9, centrado, con bordes redondeados, sombras profundas y marcas de esquina (corners) estilo HUD.

- Fondo del lienzo con retícula animada (drift) y efecto de barrido de luz (scan).

- Transiciones entre diapositivas: cambios de opacidad, escala, desenfoque (blur) y desplazamiento direccional (translateX).

- Entrada de texto escalonada: usar un atributo `data-anim` con variables CSS `--d` (delay) para animar la entrada de elementos (efecto "rise" o "clipin").

Requisitos de Estructura (HTML):

- Una barra superior (HUD) con: Logo, botones de navegación (siguiente/anterior), reloj/cronómetro, anillo de progreso SVG, botón de auto-play, botón de notas, y pantalla completa.

- Una barra de pestañas (tabs) inferior que permita navegar a cualquier lámina.

- 17 láminas (diapositivas) cubriendo: Portada, Contexto, Diagnóstico, Objetivo, Componentes, Liderazgo (Organigrama SVG), Innovación, Sostenibilidad, Equidad, Gestión del Cambio, Colaboración, Participación (Mapa SVG), Casos, Indicadores (Gráfico de barras), Presupuesto, Evaluación y Cierre.

Requisitos de Funcionalidad (JavaScript Vanilla):

- Motor de navegación: funciones para avanzar, retroceder y saltar a láminas específicas. Actualizar el estado activo de las pestañas y el anillo de progreso.

- Control por teclado: Flechas direccionales (izquierda/derecha) y barra espaciadora para navegar. Teclas F (fullscreen), N (notas), C (cronómetro), A (autoplay).

- Contadores animados: Función que busque elementos con `data-count` y anime los números de 0 al valor final usando `requestAnimationFrame`.

- Gráfico de barras animado: En la lámina de Indicadores, renderizar dinámicamente desde JS unas barras de progreso comparando "Línea base" vs "Meta" con transiciones CSS de ancho (width).

- Panel de Notas: Un panel lateral deslizable que muestre el guion/notas del orador según la lámina actual.

- Cronómetro y Auto-play: Funciones para iniciar/detener un cronómetro de ensayo y un modo de avance automático (12 segundos por lámina).

Restricciones:

- TODO el código (HTML, CSS, JS) debe estar en un solo archivo.

- No usar frameworks (React, Vue) ni librerías (jQuery, Bootstrap). Solo HTML5, CSS3 puro y JavaScript puro.

- El diseño debe ser responsivo y verse bien en proyectores (16:9) y pantallas de laptop.

- Incluir soporte para `prefers-reduced-motion`.

Genera el código completo de este archivo HTML listo para ser guardado y ejecutado en un navegador.