feat: complete reference coverage and UX improvements

Reference pages:
- Add min-width, min-height, border-collapse to Box Model
- Add blockquote to Text Content
- Add new Semantic Inline section (time, mark, small, abbr, kbd, sub, sup, ins, del)

UX improvements:
- Rename "Free Coding" to "HTML & CSS Editor" in Playground
- Keep Welcome and Playground modules always expanded in sidebar

🤖 Generated with [Claude Code](https://claude.com/claude-code)

lessons/98-playground.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "playground",
-	"title": "HTML & CSS Editor",
+	"title": "Playground",
 	"description": "Experiment freely with HTML and CSS",
 	"mode": "playground",
 	"difficulty": "beginner",
@@ -9,7 +9,7 @@
 	"lessons": [
 		{
 			"id": "sandbox",
-			"title": "Editor",
+			"title": "HTML & CSS Editor",
 			"mode": "playground",
 			"description": "",
 			"task": "",

src/app.js

@@ -1345,11 +1345,14 @@ const referenceContent = {
 				<tbody>
 					<tr><td><code>width</code></td><td>length, %, auto, fit-content</td><td><code>width: 100%;</code></td></tr>
 					<tr><td><code>height</code></td><td>length, %, auto</td><td><code>height: 200px;</code></td></tr>
+					<tr><td><code>min-width</code></td><td>length, %, auto</td><td><code>min-width: 200px;</code></td></tr>
+					<tr><td><code>min-height</code></td><td>length, %, auto</td><td><code>min-height: 100vh;</code></td></tr>
 					<tr><td><code>max-width</code></td><td>length, %, none</td><td><code>max-width: 600px;</code></td></tr>
 					<tr><td><code>padding</code></td><td>length (1-4 values)</td><td><code>padding: 1rem 2rem;</code></td></tr>
 					<tr><td><code>margin</code></td><td>length, auto (1-4 values)</td><td><code>margin: 0 auto;</code></td></tr>
 					<tr><td><code>border</code></td><td>width style color</td><td><code>border: 1px solid gray;</code></td></tr>
 					<tr><td><code>border-radius</code></td><td>length (1-4 values)</td><td><code>border-radius: 8px;</code></td></tr>
+					<tr><td><code>border-collapse</code></td><td>separate, collapse</td><td><code>border-collapse: collapse;</code></td></tr>
 					<tr><td><code>box-sizing</code></td><td>content-box, border-box</td><td><code>box-sizing: border-box;</code></td></tr>
 				</tbody>
 			</table>
@@ -1705,6 +1708,7 @@ const referenceContent = {
 					<tr><td><code>&lt;em&gt;</code></td><td>Emphasized text (italic)</td><td><code>&lt;em&gt;really&lt;/em&gt;</code></td></tr>
 					<tr><td><code>&lt;code&gt;</code></td><td>Inline code</td><td><code>&lt;code&gt;const x&lt;/code&gt;</code></td></tr>
 					<tr><td><code>&lt;pre&gt;</code></td><td>Preformatted text</td><td>Code blocks</td></tr>
+					<tr><td><code>&lt;blockquote&gt;</code></td><td>Block quotation</td><td><code>&lt;blockquote cite="src"&gt;</code></td></tr>
 					<tr><td><code>&lt;span&gt;</code></td><td>Generic inline container</td><td>Styling inline text</td></tr>
 					<tr><td><code>&lt;br&gt;</code></td><td>Line break</td><td>Address, poem lines</td></tr>
 					<tr><td><code>&lt;hr&gt;</code></td><td>Thematic break</td><td>Scene change, topic shift</td></tr>
@@ -1712,6 +1716,24 @@ const referenceContent = {
 			</table>
 		</section>
 
+		<section class="ref-section">
+			<h2>Semantic Inline</h2>
+			<table class="ref-table">
+				<thead><tr><th>Element</th><th>Purpose</th><th>Example</th></tr></thead>
+				<tbody>
+					<tr><td><code>&lt;time&gt;</code></td><td>Date/time</td><td><code>&lt;time datetime="2024-01-15"&gt;</code></td></tr>
+					<tr><td><code>&lt;mark&gt;</code></td><td>Highlighted text</td><td><code>&lt;mark&gt;important&lt;/mark&gt;</code></td></tr>
+					<tr><td><code>&lt;small&gt;</code></td><td>Fine print</td><td>Legal text, copyright</td></tr>
+					<tr><td><code>&lt;abbr&gt;</code></td><td>Abbreviation</td><td><code>&lt;abbr title="HyperText"&gt;HTML&lt;/abbr&gt;</code></td></tr>
+					<tr><td><code>&lt;kbd&gt;</code></td><td>Keyboard input</td><td><code>&lt;kbd&gt;Ctrl+C&lt;/kbd&gt;</code></td></tr>
+					<tr><td><code>&lt;sub&gt;</code></td><td>Subscript</td><td>H<sub>2</sub>O</td></tr>
+					<tr><td><code>&lt;sup&gt;</code></td><td>Superscript</td><td>x<sup>2</sup></td></tr>
+					<tr><td><code>&lt;ins&gt;</code></td><td>Inserted text</td><td>Shows additions</td></tr>
+					<tr><td><code>&lt;del&gt;</code></td><td>Deleted text</td><td>Shows removals</td></tr>
+				</tbody>
+			</table>
+		</section>
+
 		<section class="ref-section">
 			<h2>Lists</h2>
 			<table class="ref-table">

src/helpers/renderer.js

@@ -37,6 +37,11 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
 		moduleContainer.classList.add("module-container");
 		moduleContainer.dataset.moduleId = module.id;
 
+		// Keep welcome and playground modules always expanded
+		if (module.id === "welcome" || module.id === "playground") {
+			moduleContainer.open = true;
+		}
+
 		// Create module header using <summary>
 		const moduleHeader = document.createElement("summary");
 		moduleHeader.classList.add("module-list-item", "module-header");