Implementation Plan

Phases

• Shell: design tokens, fonts, header with wordmark and dim toggle, footer, 404 and error states.
• Data: content types, six series and twenty-eight chapters, playground starters, diffs and comment seeds.
• Library: series cards, progress rings, topic filters and live search.
• Chapter and playground: markup renderer, callouts, code blocks, CodeMirror editor, worker sandbox with the simulated mx SDK and watchdog.
• Progress and comments: external store over localStorage, 80% auto-complete, celebration, chime and toast; threaded comments with likes.
• Graph: prerequisite map with ancestor tracing, keyboard access and completion bars.
• Docs: these six documents.
• Deploy: publish, attach the custom domain, verify metadata per route.

Verification

Each phase was checked in a real browser: routes render server-side, playgrounds produce output, completion persists across reloads, and dim mode applies before paint.