Flujo básico: escribe en las pestañas index.html, styles.css, app.js. Pulsa Ejecutar o activa la previsualización en vivo.

• Botón Carpeta: crear/renombrar/borrar/abrir archivos del proyecto (localStorage).
• Botón Ojo: Live ON/OFF. Si está ON, la vista previa se actualiza al teclear.
• Botón Marcador: Autosave ON/OFF. Guarda cada N segundos.
• Botón Engrane: preferencias de fondo, color y tamaño de fuente del editor. Persisten.
• Aritmética HTML: todo lo que esté entre % ... % se expande con reglas tipo Emmet.
  Ejemplo: %main>section*2>p+a*2% produce la estructura de dos secciones con p y enlaces anidados.

Consejo mnemotécnico: piensa Ruta de carpintería → > es entrar (anidar), + es sumar piezas a la misma altura (hermanos), *n es multiplicar piezas (repetir).