Fix correctness, security, and architecture issues

[phjlljp]

Summary

Comprehensive fixes for bugs, security issues, and documentation inaccuracies identified via multi-reviewer code audit.

CSS (3 fixes):

• Fix chat animation engine: .chat-message and .chat-typing now default to display: none so JS can reveal messages sequentially (was display: flex, making the entire chat animation non-functional)
• Fix dvh/vh fallback order on .module — 100vh first, 100dvh second (was reversed, making the modern unit dead code)

JavaScript — Security (4 fixes):

• Replace innerHTML with textContent in quiz feedback and bug-challenge feedback to close XSS vectors
• Add CSS.escape() to quiz and drag-and-drop selector interpolation to prevent crashes on special characters
• Wrap flow animation JSON.parse in try/catch so one malformed data-steps attribute doesn't break all subsequent interactive elements

JavaScript — Correctness (9 fixes):

• Fix chat showNext() reentrancy with busy guard (rapid clicks no longer skip messages)
• Fix chat showAll() overlapping intervals (multiple clicks no longer spawn duplicate timers)
• Guard typing avatar lookup against null .chat-typing element
• Scope flow animatePacket lookups to container (was document-global, broke with multiple flow animations)
• Scope flow highlight fallback to container
• Center flow packet on actors (subtract 8px for the 16x16 packet dimensions)
• Scope layer toggle showLayer lookup to .layer-demo container (was global)
• Add toggle-off behavior to architecture diagram clicks
• Fix DnD: clear previous zone when re-placing a chip; highlight unanswered zones on check
• Fix progress bar: show 100% when all content fits viewport

Build script:

• Add file existence validation and module directory check before assembly
• Set LC_ALL=C for deterministic glob ordering across locales
• Use set -euo pipefail

Documentation:

• Fix 3 broken HTML templates in interactive-elements.md: architecture diagram (remove nonexistent showArchDesc onclick), drag-and-drop (add container ID to check/reset calls), layer toggle (add this arg to showLayer)
• Add security guidance to SKILL.md: sensitive file exclusion list, secret redaction, prompt injection defense, HTML encoding rules for code snippets and data attributes
• Fix README.md: correct output format (directory, not single file), list all 10 reference files

Test plan

• Open an existing generated course — verify chat animations play sequentially (messages hidden by default, revealed on click)
• Generate a new course from a small codebase — verify all interactive elements function (quiz, DnD, chat, flow, architecture diagram, layer toggle)
• Run build.sh from an empty modules directory — verify it errors cleanly
• Run build.sh normally — verify index.html assembles correctly
• Verify node --check references/main.js passes (confirmed pre-commit)
• Test quiz with special characters in answer values
• Test flow animation with intentionally malformed data-steps JSON — verify graceful degradation

🤖 Generated with Claude Code