Standardize docs site to tailspin template

Align HTML/CSS/JS structure with the tailspin-toys-workshop docs template:
- Use shared external styles.css, light-theme.css, theme-toggle.js
- Standardize step.html with consistent sidebar, header nav, markdown rendering
- Use .markdown class naming, colored GitHub alerts, image path resolution
- Add theme toggle in header, confetti on last step, keyboard navigation

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: brunoborges

docs/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mona Mayhem Workshop</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="light-theme.css">
     <script src="theme-toggle.js"></script>