fix: playground mode with HTML & CSS editor, no validation

lessons/99-playground.json

@@ -3,7 +3,7 @@
 	"id": "playground",
 	"title": "Playground",
 	"description": "Free-form HTML & CSS playground",
-	"mode": "html",
+	"mode": "playground",
 	"difficulty": "beginner",
 	"lessons": [
 		{
@@ -12,9 +12,9 @@
 			"description": "",
 			"task": "",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; }",
+			"previewBaseCSS": "",
 			"sandboxCSS": "",
-			"initialCode": "",
+			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
 			"solution": "",
 			"previewContainer": "preview-area",
 			"validations": []

lessons/de/99-playground.json

@@ -3,7 +3,7 @@
 	"id": "playground",
 	"title": "Playground",
 	"description": "Freier HTML & CSS Spielplatz",
-	"mode": "html",
+	"mode": "playground",
 	"difficulty": "beginner",
 	"lessons": [
 		{
@@ -12,9 +12,9 @@
 			"description": "",
 			"task": "",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; }",
+			"previewBaseCSS": "",
 			"sandboxCSS": "",
-			"initialCode": "",
+			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hallo Welt</h1>\n<p>Los geht's!</p>",
 			"solution": "",
 			"previewContainer": "preview-area",
 			"validations": []

src/app.js

@@ -363,6 +363,11 @@ function updateEditorForMode(mode) {
 			placeholder: "Enter your CSS code here...",
 			label: "CSS Editor",
 			cmMode: "css"
+		},
+		playground: {
+			placeholder: "<style>\n  /* CSS here */\n</style>\n\n<!-- HTML here -->",
+			label: "HTML & CSS",
+			cmMode: "html"
 		}
 	};
 
@@ -575,6 +580,8 @@ function resetCode() {
 
 function runCode() {
 	const userCode = codeEditor ? codeEditor.getValue() : "";
+	const engineState = lessonEngine.getCurrentState();
+	const isPlayground = engineState.module?.id === "playground";
 
 	// Rotate the Run button icon
 	const runButtonImg = document.querySelector("#run-btn img");
@@ -586,6 +593,11 @@ function runCode() {
 	// Apply the code to the preview via LessonEngine
 	lessonEngine.applyUserCode(userCode, true);
 
+	// Skip validation for playground mode
+	if (isPlayground) {
+		return;
+	}
+
 	// Validate code using LessonEngine
 	const validationResult = lessonEngine.validateCode();