feat: enhance lesson preview functionality and improve run button interaction; change lesson indicator to percentage; split preview css for better isolation

lessons/00-basic-selectors.json

@@ -37,8 +37,11 @@
 		  "message": "Set the color value to <kbd>blue</kbd>"
 		},
 		{
-					"type": "regex",
+		  "type": "property_value",
-					"value": "color:\\s*blue",
+		  "value": {
+			"property": "color",
+			"expected": "blue"
+		  },
 		  "message": "Use <kbd>color: blue</kbd> to set the text color"
 		},
 		{
@@ -54,7 +57,7 @@
 	{
 	  "id": "type-selectors",
 	  "title": "Type Selectors: Targeting HTML Elements",
-			"description": "Type selectors (also called tag name selectors or element selectors) target HTML elements based on their tag name. For example, 'p' selects all paragraph elements, 'h1' selects all level-one headings, and 'div' selects all division elements. Type selectors are the most fundamental way to select elements, applying styles consistently to all instances of a particular HTML element throughout your document. You can define a variety of CSS properties with type selectors, such as color for text color, background-color for the background, and font-weight for text emphasis. They provide a broad approach for styling your page and are often the starting point for more specific styling using other selector types.",
+	  "description": "Type selectors (also called tag name selectors or element selectors) target HTML elements based on their tag name. For example, <kbd>p</kbd> selects all paragraph elements, <kbd>h1</kbd> selects all level-one headings, and <kbd>div</kbd> selects all division elements. Type selectors are the most fundamental way to select elements, applying styles consistently to all instances of a particular HTML element throughout your document. You can define a variety of CSS properties with type selectors, such as <kbd>color</kbd> for text color, <kbd>background-color</kbd> for the background, and <kbd>font-weight</kbd> for text emphasis. They provide a broad approach for styling your page and are often the starting point for more specific styling using other selector types.",
 	  "task": "Write three separate CSS rules using type selectors to target specific HTML elements: make h2 headings purple, give span elements a yellow background, and make strong elements red.",
 	  "previewHTML": "<h2>Type Selectors Example</h2>\n<p>Regular paragraph text <span>with a highlighted span</span> that should have a yellow background.</p>\n<p>Another paragraph with <strong>strong important text</strong> that should be red.</p>\n<h2>Another Heading</h2>",
 	  "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
@@ -71,20 +74,17 @@
 		  "message": "Include an <kbd>h2 { … }</kbd> selector"
 		},
 		{
-					"type": "regex",
+		  "type": "property_value",
-					"value": "h2\\s*{[^}]*color:\\s*purple",
+		  "value": {
-					"message": "Set the <kbd>color:</kbd> property to <kbd>purple</kbd> for h2 elements",
+			"property": "color",
-					"options": {
+			"expected": "purple"
-						"caseSensitive": false
+		  },
-					}
+		  "message": "Set the <kbd>color</kbd> property to <kbd>purple</kbd> for h2 elements"
 		},
 		{
 		  "type": "regex",
-					"value": "h2\\s*{[^}]*color:\\s*purple[^}]*}",
+		  "value": "h2\\s*{[^}]*}",
-					"message": "… and close the expression with a <kbd>}</kbd>",
+		  "message": "Make sure to close your h2 rule with a closing brace <kbd>}</kbd>"
-					"options": {
-						"caseSensitive": false
-					}
 		},
 		{
 		  "type": "regex",
@@ -92,33 +92,42 @@
 		  "message": "Include a <kbd>span { … }</kbd> selector"
 		},
 		{
-					"type": "regex",
+		  "type": "property_value",
-					"value": "span\\s*{[^}]*background(-color)?:\\s*yellow",
+		  "value": {
-					"message": "Set a yellow background for span elements using <kbd>background-color</kbd> or <kbd>background</kbd>",
+			"property": "background-color",
-					"options": {
+			"expected": "yellow"
-						"caseSensitive": false
-					}
 		  },
-				{
+		  "message": "Set a <kbd>background-color: yellow</kbd> for span elements"
-					"type": "contains",
-					"value": "strong",
-					"message": "Include a strong selector"
 		},
 		{
 		  "type": "regex",
-					"value": "strong\\s*{[^}]*color:\\s*red",
+		  "value": "span\\s*{[^}]*}",
-					"message": "Set the color property to red for strong elements",
+		  "message": "Make sure to close your span rule with a closing brace <kbd>}</kbd>"
-					"options": {
+		},
-						"caseSensitive": false
+		{
-					}
+		  "type": "regex",
+		  "value": "^strong\\s*{",
+		  "message": "Include a <kbd>strong { … }</kbd> selector"
+		},
+		{
+		  "type": "property_value",
+		  "value": {
+			"property": "color",
+			"expected": "red"
+		  },
+		  "message": "Set the <kbd>color: red</kbd> for strong elements"
+		},
+		{
+		  "type": "regex",
+		  "value": "strong\\s*{[^}]*}",
+		  "message": "Make sure to close your strong rule with a closing brace <kbd>}</kbd>"
 		}
 	  ]
 	},
 	{
-			"__comment": "NOTE: Needs rework, consider type property for validation ",
 	  "id": "class-selectors",
 	  "title": "Class Selectors: Styling Element Groups",
-			"description": "Class selectors target elements with a specific class attribute value. They begin with a dot (.) followed by the class name. Classes are powerful because they allow you to apply the same styles to multiple elements regardless of their type. An HTML element can have multiple classes (separated by spaces in the class attribute), and a class can be applied to any number of elements. When using class selectors, you can apply properties like background-color to set the background color of elements, and font-weight to control text thickness, making text bold or normal. This flexibility makes class selectors one of the most commonly used methods for applying styles in CSS, allowing for modular and reusable styling across your website.",
+	  "description": "Class selectors target elements with a specific class attribute value. They begin with a dot (.) followed by the class name. Classes are powerful because they allow you to apply the same styles to multiple elements regardless of their type. An HTML element can have multiple classes (separated by spaces in the class attribute), and a class can be applied to any number of elements. When using class selectors, you can apply properties like <kbd>background-color</kbd> to set the background color of elements, and <kbd>font-weight</kbd> to control text thickness, making text bold or normal. This flexibility makes class selectors one of the most commonly used methods for applying styles in CSS, allowing for modular and reusable styling across your website.",
 	  "task": "Create a CSS rule using a class selector that targets elements with the class 'highlight'. Give these elements a yellow background and bold text.",
 	  "previewHTML": "<h2>Using Class Selectors</h2>\n<p>This is a regular paragraph, but <span class=\"highlight\">this span has the highlight class</span> applied to it.</p>\n<p class=\"highlight\">This entire paragraph has the highlight class.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"highlight\">This list item is highlighted</li>\n</ul>",
 	  "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
@@ -142,40 +151,30 @@
 		  "message": "Include the <kbd>background-color:</kbd> property"
 		},
 		{
-					"type": "contains",
+		  "type": "property_value",
-					"value": "yellow",
+		  "value": {
+			"property": "background-color",
+			"expected": "yellow"
+		  },
 		  "message": "Set the background color to <kbd>yellow</kbd>"
 		},
-				{
-					"type": "regex",
-					"value": "background(-color)?:\\s*yellow",
-					"message": "Use <kbd>background-color: yellow</kbd> to set the background color",
-					"options": {
-						"caseSensitive": true
-					}
-				},
-				{
-					"type": "regex",
-					"value": "background(-color)?:\\s*yellow[^}]*}",
-					"message": "… and close the expression with <kbd>}</kbd>",
-					"options": {
-						"caseSensitive": false
-					}
-				},
 		{
 		  "type": "contains",
 		  "value": "font-weight:",
 		  "message": "Include the <kbd>font-weight:</kbd> property"
 		},
 		{
-					"type": "contains",
+		  "type": "property_value",
-					"value": "bold",
+		  "value": {
+			"property": "font-weight",
+			"expected": "bold"
+		  },
 		  "message": "Set the font-weight to <kbd>bold</kbd>"
 		},
 		{
 		  "type": "regex",
-					"value": "font-weight:\\s*bold",
+		  "value": "\\.highlight\\s*{[^}]*}",
-					"message": "Use <kbd>font-weight: bold</kbd> to make the text bold",
+		  "message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -185,7 +184,7 @@
 	{
 	  "id": "multiple-classes",
 	  "title": "Working with Multiple Classes",
-			"description": "HTML elements can have multiple classes applied simultaneously, allowing for composable and modular CSS designs. When an element has multiple classes, it will receive styles from all matching class selectors. This approach enables you to build a library of reusable CSS classes that can be combined in different ways. You can also target elements that have a specific combination of classes by chaining class selectors together without spaces (e.g., '.class1.class2'). When styling these elements, you might use properties like border-color to change the color of element borders, and background-color to set the background color of elements. This technique lets you create conditional styles that only apply when certain classes appear together.",
+	  "description": "HTML elements can have multiple classes applied simultaneously, allowing for composable and modular CSS designs. When an element has multiple classes, it will receive styles from all matching class selectors. This approach enables you to build a library of reusable CSS classes that can be combined in different ways. You can also target elements that have a specific combination of classes by chaining class selectors together without spaces (e.g., <kbd>.class1.class2</kbd>). When styling these elements, you might use properties like <kbd>border-color</kbd> to change the color of element borders, and <kbd>background-color</kbd> to set the background color of elements. This technique lets you create conditional styles that only apply when certain classes appear together.",
 	  "task": "Complete the CSS rule that targets elements with both 'card' and 'featured' classes by chaining the selectors. Set the border-color to gold and the background-color to lemonchiffon to make featured cards stand out.",
 	  "previewHTML": "<h2>Multiple Class Combinations</h2>\n<div class=\"card\">Regular Card</div>\n<div class=\"card featured\">Featured Card</div>\n<div class=\"featured\">Just Featured (not a card)</div>",
 	  "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .card { border: 2px solid gray; padding: 15px; margin-bottom: 10px; border-radius: 5px; }",
@@ -198,7 +197,7 @@
 		{
 		  "type": "regex",
 		  "value": "^\\.card\\.featured\\s*{",
-					"message": "Chain the selectors as '.card.featured' (no space between them)",
+		  "message": "Chain the selectors as <kbd>.card.featured</kbd> (no space between them)",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -209,32 +208,30 @@
 		  "message": "Include the <kbd>border-color</kbd> property"
 		},
 		{
-					"type": "contains",
+		  "type": "property_value",
-					"value": "gold",
+		  "value": {
-					"message": "Set the border color to <kbd>gold</kbd>"
+			"property": "border-color",
+			"expected": "gold"
 		  },
-				{
+		  "message": "Set the border color to <kbd>gold</kbd>"
-					"type": "regex",
-					"value": "border-color:\\s*gold",
-					"message": "Use 'border-color: gold' to style the border",
-					"options": {
-						"caseSensitive": true
-					}
 		},
 		{
 		  "type": "contains",
 		  "value": "background-color:",
-					"message": "Include the 'background-color' property"
+		  "message": "Include the <kbd>background-color</kbd> property"
 		},
 		{
-					"type": "contains",
+		  "type": "property_value",
-					"value": "lemonchiffon",
+		  "value": {
-					"message": "Set the background color to 'lemonchiffon'"
+			"property": "background-color",
+			"expected": "lemonchiffon"
+		  },
+		  "message": "Set the background color to <kbd>lemonchiffon</kbd>"
 		},
 		{
 		  "type": "regex",
-					"value": "background-color:\\s*lemonchiffon",
+		  "value": "\\.card\\.featured\\s*{[^}]*}",
-					"message": "Use 'background-color: lemonchiffon' for the background",
+		  "message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -244,7 +241,7 @@
 	{
 	  "id": "class-with-type",
 	  "title": "Combining Type and Class Selectors",
-			"description": "You can combine type selectors with class selectors to target specific HTML elements that have a certain class. This creates a more specific selector that only matches when both conditions are true: the element is of the specified type AND it has the specified class. For example, 'p.note' would select paragraph elements with the class 'note', but would not select divs or spans with that same class. You can style these combined selections using properties like background-color to set a colored background for your elements. This approach allows you to apply different styles to the same class when it appears on different element types.",
+	  "description": "You can combine type selectors with class selectors to target specific HTML elements that have a certain class. This creates a more specific selector that only matches when both conditions are true: the element is of the specified type AND it has the specified class. For example, <kbd>p.note</kbd> would select paragraph elements with the class 'note', but would not select divs or spans with that same class. You can style these combined selections using properties like <kbd>background-color</kbd> to set a colored background for your elements. This approach allows you to apply different styles to the same class when it appears on different element types.",
 	  "task": "Create a CSS rule that specifically targets <span> elements with the class 'highlight'. Make those elements have an orange background, while other elements with the highlight class remain untouched.",
 	  "previewHTML": "<h2>Type and Class Combinations</h2>\n<p>This paragraph has a <span class=\"highlight\">highlighted span</span> that should have an orange background.</p>\n<p class=\"highlight\">This paragraph has the highlight class but should NOT have an orange background.</p>",
 	  "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } .highlight { font-weight: bold; }",
@@ -257,7 +254,7 @@
 		{
 		  "type": "regex",
 		  "value": "^span\\.highlight\\s*{",
-					"message": "Use <kbd>span.highlight<kbd> selector (no space between element and class)",
+		  "message": "Use <kbd>span.highlight</kbd> selector (no space between element and class)",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -265,25 +262,20 @@
 		{
 		  "type": "contains",
 		  "value": "background-color:",
-					"message": "Include the 'background-color' property"
+		  "message": "Include the <kbd>background-color</kbd> property"
 		},
 		{
-					"type": "contains",
+		  "type": "property_value",
-					"value": "orange",
+		  "value": {
-					"message": "Set the background color to 'orange'"
+			"property": "background-color",
+			"expected": "orange"
 		  },
-				{
+		  "message": "Set the background color to <kbd>orange</kbd>"
-					"type": "regex",
-					"value": "background(-color)?:\\s*orange",
-					"message": "Use 'background-color: orange' to set the background color",
-					"options": {
-						"caseSensitive": true
-					}
 		},
 		{
 		  "type": "regex",
 		  "value": "span\\.highlight\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace '}'",
+		  "message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -293,7 +285,7 @@
 	{
 	  "id": "id-selectors",
 	  "title": "ID Selectors: Targeting Unique Elements",
-			"description": "ID selectors target elements with a specific id attribute. They begin with a hash/pound sign (#) followed by the ID name. Unlike classes, IDs must be unique within a document—each ID value should be used only once per page. ID selectors have higher specificity than class or element selectors, meaning they override those selectors when conflicts arise. When styling with ID selectors, you can use properties like color to define text color, and text-decoration to control the appearance of text, such as adding underlines to elements. Because of their uniqueness requirement, IDs are best used for one-of-a-kind elements like page headers, main navigation, or specific unique components that appear only once on a page.",
+	  "description": "ID selectors target elements with a specific id attribute. They begin with a hash/pound sign (#) followed by the ID name. Unlike classes, IDs must be unique within a document—each ID value should be used only once per page. ID selectors have higher specificity than class or element selectors, meaning they override those selectors when conflicts arise. When styling with ID selectors, you can use properties like <kbd>color</kbd> to define text color, and <kbd>text-decoration</kbd> to control the appearance of text, such as adding underlines to elements. Because of their uniqueness requirement, IDs are best used for one-of-a-kind elements like page headers, main navigation, or specific unique components that appear only once on a page.",
 	  "task": "Create a CSS rule with an ID selector that targets the element with the ID 'main-title'. Set its color to purple and add an underline with text-decoration: underline.",
 	  "previewHTML": "<h1 id=\"main-title\">Main Page Title</h1>\n<p>Regular paragraph content.</p>\n<h2>Secondary Heading</h2>\n<p id=\"intro\">Introduction paragraph (different ID).</p>",
 	  "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
@@ -306,7 +298,7 @@
 		{
 		  "type": "regex",
 		  "value": "^#main-title\\s*{",
-					"message": "Start your rule with '#main-title' to create an ID selector",
+		  "message": "Start your rule with <kbd>#main-title</kbd> to create an ID selector",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -314,35 +306,33 @@
 		{
 		  "type": "contains",
 		  "value": "color:",
-					"message": "Include the 'color' property"
+		  "message": "Include the <kbd>color</kbd> property"
 		},
 		{
-					"type": "contains",
+		  "type": "property_value",
-					"value": "purple",
+		  "value": {
-					"message": "Set the color to 'purple'"
+			"property": "color",
+			"expected": "purple"
 		  },
-				{
+		  "message": "Set the color to <kbd>purple</kbd>"
-					"type": "regex",
-					"value": "color:\\s*purple",
-					"message": "Use 'color: purple' to set the text color",
-					"options": {
-						"caseSensitive": true
-					}
 		},
 		{
 		  "type": "contains",
 		  "value": "text-decoration:",
-					"message": "Include the 'text-decoration' property"
+		  "message": "Include the <kbd>text-decoration</kbd> property"
 		},
 		{
-					"type": "contains",
+		  "type": "property_value",
-					"value": "underline",
+		  "value": {
-					"message": "Set the text-decoration to 'underline'"
+			"property": "text-decoration",
+			"expected": "underline"
+		  },
+		  "message": "Set the text-decoration to <kbd>underline</kbd>"
 		},
 		{
 		  "type": "regex",
-					"value": "text-decoration:\\s*underline",
+		  "value": "#main-title\\s*{[^}]*}",
-					"message": "Use 'text-decoration: underline' to add an underline",
+		  "message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -352,7 +342,7 @@
 	{
 	  "id": "id-with-type",
 	  "title": "Combining Type and ID Selectors",
-			"description": "Similar to how you can combine type and class selectors, you can also combine type selectors with ID selectors. For example, 'h1#title' targets an h1 element with the ID 'title'. When using this combined approach, you can apply CSS properties like font-style to control the slant of the text, making it italic or normal. While this selector combination is more specific than using just the ID selector, it's often unnecessary since IDs should already be unique in a document. However, this technique can be useful for improving code readability or when you want to emphasize that a particular ID should only appear on a specific element type.",
+	  "description": "Similar to how you can combine type and class selectors, you can also combine type selectors with ID selectors. For example, <kbd>h1#title</kbd> targets an h1 element with the ID 'title'. When using this combined approach, you can apply CSS properties like <kbd>font-style</kbd> to control the slant of the text, making it italic or normal. While this selector combination is more specific than using just the ID selector, it's often unnecessary since IDs should already be unique in a document. However, this technique can be useful for improving code readability or when you want to emphasize that a particular ID should only appear on a specific element type.",
 	  "task": "Create a CSS rule that combines a type selector with an ID selector to target specifically a paragraph element with the ID 'special'. Set its font style to italic.",
 	  "previewHTML": "<h2 id=\"special\">Heading with ID \"special\" (should NOT be affected)</h2>\n<p id=\"special\">Paragraph with ID \"special\" (should become italic)</p>",
 	  "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
@@ -365,7 +355,7 @@
 		{
 		  "type": "regex",
 		  "value": "^p#special\\s*{",
-					"message": "Use 'p#special' to target paragraphs with ID 'special'",
+		  "message": "Use <kbd>p#special</kbd> to target paragraphs with ID 'special'",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -373,25 +363,20 @@
 		{
 		  "type": "contains",
 		  "value": "font-style:",
-					"message": "Include the 'font-style' property"
+		  "message": "Include the <kbd>font-style</kbd> property"
 		},
 		{
-					"type": "contains",
+		  "type": "property_value",
-					"value": "italic",
+		  "value": {
-					"message": "Set the font-style to 'italic'"
+			"property": "font-style",
+			"expected": "italic"
 		  },
-				{
+		  "message": "Set the font-style to <kbd>italic</kbd>"
-					"type": "regex",
-					"value": "font-style:\\s*italic",
-					"message": "Use 'font-style: italic' to make the text italic",
-					"options": {
-						"caseSensitive": true
-					}
 		},
 		{
 		  "type": "regex",
 		  "value": "p#special\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace '}'",
+		  "message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -401,7 +386,7 @@
 	{
 	  "id": "selector-lists",
 	  "title": "Selector Lists: Applying the Same Rules to Multiple Selectors",
-			"description": "When multiple elements need the same styling, you can group them together using a selector list (also known as grouping selectors). Selector lists are created by separating individual selectors with commas. This approach reduces repetition in your CSS, making it more maintainable and efficient. For example, 'h1, h2, h3 { color: blue; }' applies the same blue color to all three heading levels. When styling multiple selectors at once, you can apply properties like background-color to set the background, border-left to create a left border with a specific thickness, style, and color, and padding-left to create space between the content and the left border. Whitespace around commas is optional, and each selector in the list can be any valid selector type-elements, classes, IDs, or even more complex selectors.",
+	  "description": "When multiple elements need the same styling, you can group them together using a selector list (also known as grouping selectors). Selector lists are created by separating individual selectors with commas. This approach reduces repetition in your CSS, making it more maintainable and efficient. For example, <kbd>h1, h2, h3 { color: blue; }</kbd> applies the same blue color to all three heading levels. When styling multiple selectors at once, you can apply properties like <kbd>background-color</kbd> to set the background, <kbd>border-left</kbd> to create a left border with a specific thickness, style, and color, and <kbd>padding-left</kbd> to create space between the content and the left border. Whitespace around commas is optional, and each selector in the list can be any valid selector type-elements, classes, IDs, or even more complex selectors.",
 	  "task": "Create a selector list that applies the same styles to three different elements: paragraphs with class 'note', list items with class 'important', and the element with ID 'summary'. Give them a lightyellow background, a gold left border, and some left padding.",
 	  "previewHTML": "<p class=\"note\">This is a note paragraph.</p>\n<ul>\n  <li>Regular list item</li>\n  <li class=\"important\">Important list item</li>\n</ul>\n<div id=\"summary\">Summary section</div>",
 	  "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
@@ -414,7 +399,7 @@
 		{
 		  "type": "contains",
 		  "value": "p.note",
-					"message": "Include 'p.note' in your selector list",
+		  "message": "Include <kbd>p.note</kbd> in your selector list",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -422,7 +407,7 @@
 		{
 		  "type": "contains",
 		  "value": "li.important",
-					"message": "Include 'li.important' in your selector list",
+		  "message": "Include <kbd>li.important</kbd> in your selector list",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -430,7 +415,7 @@
 		{
 		  "type": "contains",
 		  "value": "#summary",
-					"message": "Include '#summary' in your selector list",
+		  "message": "Include <kbd>#summary</kbd> in your selector list",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -446,53 +431,48 @@
 		{
 		  "type": "contains",
 		  "value": "background-color:",
-					"message": "Include the 'background-color' property"
+		  "message": "Include the <kbd>background-color</kbd> property"
 		},
 		{
-					"type": "contains",
+		  "type": "property_value",
-					"value": "lightyellow",
+		  "value": {
-					"message": "Set the background color to 'lightyellow'"
+			"property": "background-color",
+			"expected": "lightyellow"
 		  },
-				{
+		  "message": "Set the background color to <kbd>lightyellow</kbd>"
-					"type": "regex",
-					"value": "background-color:\\s*lightyellow",
-					"message": "Use 'background-color: lightyellow' to set the background color",
-					"options": {
-						"caseSensitive": true
-					}
 		},
 		{
 		  "type": "contains",
 		  "value": "border-left:",
-					"message": "Include the 'border-left' property"
+		  "message": "Include the <kbd>border-left</kbd> property"
 		},
 		{
-					"type": "regex",
+		  "type": "property_value",
-					"value": "border-left:\\s*3px\\s+solid\\s+gold",
+		  "value": {
-					"message": "Use 'border-left: 3px solid gold' to create a left border",
+			"property": "border-left",
-					"options": {
+			"expected": "3px solid gold"
-						"caseSensitive": true
+		  },
-					}
+		  "message": "Use <kbd>border-left: 3px solid gold</kbd> to create a left border"
 		},
 		{
 		  "type": "contains",
 		  "value": "padding-left:",
-					"message": "Include the 'padding-left' property"
+		  "message": "Include the <kbd>padding-left</kbd> property"
 		},
 		{
-					"type": "regex",
+		  "type": "property_value",
-					"value": "padding-left:\\s*10px",
+		  "value": {
-					"message": "Use 'padding-left: 10px' to add left padding",
+			"property": "padding-left",
-					"options": {
+			"expected": "10px"
-						"caseSensitive": true
+		  },
-					}
+		  "message": "Use <kbd>padding-left: 10px</kbd> to add left padding"
 		}
 	  ]
 	},
 	{
 	  "id": "universal-selector",
 	  "title": "The Universal Selector: Targeting Everything",
-			"description": "The universal selector is denoted by an asterisk (*) and matches any element of any type. It selects everything in the document or, when combined with other selectors, everything within a specific context. For example, '* { margin: 0; }' removes margins from all elements, while 'article *' selects all elements inside article elements. When using the universal selector in combination with other selectors, you can apply properties like margin to control the spacing around elements. The universal selector is powerful but should be used carefully due to its broad impact. It's commonly used in CSS resets, to override default browser styling, or to target all children of a particular element.",
+	  "description": "The universal selector is denoted by an asterisk (*) and matches any element of any type. It selects everything in the document or, when combined with other selectors, everything within a specific context. For example, <kbd>* { margin: 0; }</kbd> removes margins from all elements, while <kbd>article *</kbd> selects all elements inside article elements. When using the universal selector in combination with other selectors, you can apply properties like <kbd>margin</kbd> to control the spacing around elements. The universal selector is powerful but should be used carefully due to its broad impact. It's commonly used in CSS resets, to override default browser styling, or to target all children of a particular element.",
 	  "task": "Use the universal selector to remove margins from all elements inside the container div. Create a rule using 'div.container *' as the selector and set margin: 0.",
 	  "previewHTML": "<div class=\"container\">\n  <h2>Inside Container</h2>\n  <p>This paragraph is inside the container.</p>\n  <ul>\n    <li>List item inside container</li>\n  </ul>\n</div>\n<p>This paragraph is outside the container and should not be affected.</p>",
 	  "previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; } div.container { border: 2px solid navy; padding: 15px; background-color: lavender; } h2, p, ul, li { margin: 15px 0; }",
@@ -505,7 +485,7 @@
 		{
 		  "type": "regex",
 		  "value": "^div\\.container\\s+\\*\\s*{",
-					"message": "Use 'div.container *' selector (with a space between container and *)",
+		  "message": "Use <kbd>div.container *</kbd> selector (with a space between container and *)",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -513,25 +493,20 @@
 		{
 		  "type": "contains",
 		  "value": "margin:",
-					"message": "Include the 'margin' property"
+		  "message": "Include the <kbd>margin</kbd> property"
 		},
 		{
-					"type": "contains",
+		  "type": "property_value",
-					"value": "margin: 0",
+		  "value": {
-					"message": "Set margin to '0'"
+			"property": "margin",
+			"expected": "0"
 		  },
-				{
+		  "message": "Set margin to <kbd>0</kbd>"
-					"type": "regex",
-					"value": "margin:\\s*0",
-					"message": "Use 'margin: 0' to remove margins",
-					"options": {
-						"caseSensitive": true
-					}
 		},
 		{
 		  "type": "regex",
 		  "value": "div\\.container\\s+\\*\\s*{[^}]*}",
-					"message": "Make sure to close your CSS rule with a closing brace '}'",
+		  "message": "Make sure to close your CSS rule with a closing brace <kbd>}</kbd>",
 		  "options": {
 			"caseSensitive": true
 		  }
@@ -541,7 +516,7 @@
 	{
 	  "id": "specificity-basics",
 	  "title": "Understanding Selector Specificity",
-			"description": "CSS specificity determines which styles take precedence when multiple conflicting rules target the same element. Specificity follows a hierarchical system: inline styles have the highest specificity, followed by ID selectors, then class/attribute/pseudo-class selectors, and finally element/pseudo-element selectors. This can be conceptualized as a four-part score (inline, ID, class, element). When creating multiple rules that may target the same elements, you can use the color property to set text colors, and specificity will determine which color is actually applied. Understanding specificity is crucial for predictable styling and debugging CSS conflicts. When two selectors have equal specificity, the one that comes last in the stylesheet wins.",
+	  "description": "CSS specificity determines which styles take precedence when multiple conflicting rules target the same element. Specificity follows a hierarchical system: inline styles have the highest specificity, followed by ID selectors, then class/attribute/pseudo-class selectors, and finally element/pseudo-element selectors. This can be conceptualized as a four-part score (inline, ID, class, element). When creating multiple rules that may target the same elements, you can use the <kbd>color</kbd> property to set text colors, and specificity will determine which color is actually applied. Understanding specificity is crucial for predictable styling and debugging CSS conflicts. When two selectors have equal specificity, the one that comes last in the stylesheet wins.",
 	  "task": "Examine the existing CSS rules and add a new rule with higher specificity to override the text color of the paragraph. Create a rule using '.content p' as the selector and set color: green.",
 	  "previewHTML": "<div class=\"content\">\n  <p>What color will this paragraph be? Look at the CSS rules and their specificity.</p>\n</div>",
 			"previewBaseCSS": "body { font-family: sans-serif; line-height: 1.5; padding: 20px; }",
@@ -554,7 +529,7 @@
 				{
 					"type": "regex",
 					"value": "^\\.content\\s+p\\s*{",
-					"message": "Use '.content p' as your selector (note the space between)",
+					"message": "Use <kbd>.content p</kbd> as your selector (note the space between)",
 					"options": {
 						"caseSensitive": true
 					}
@@ -562,7 +537,7 @@
 				{
 					"type": "contains",
 					"value": "color:",
-					"message": "Include the 'color' property"
+					"message": "Include the <kbd>color</kbd> property"
 				},
 				{
 					"type": "contains",

public/gear.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" version="1.1" id="Capa_1" width="800px" height="800px"
+<svg xmlns="http://www.w3.org/2000/svg" fill="white" version="1.1" id="Capa_1" width="800px" height="800px"
      viewBox="0 0 45.973 45.973" xml:space="preserve">
-	<path stroke="currentColor" fill="white"
+	<path stroke="transparent" fill="white"
           d="M43.454,18.443h-2.437c-0.453-1.766-1.16-3.42-2.082-4.933l1.752-1.756c0.473-0.473,0.733-1.104,0.733-1.774    c0-0.669-0.262-1.301-0.733-1.773l-2.92-2.917c-0.947-0.948-2.602-0.947-3.545-0.001l-1.826,1.815    C30.9,6.232,29.296,5.56,27.529,5.128V2.52c0-1.383-1.105-2.52-2.488-2.52h-4.128c-1.383,0-2.471,1.137-2.471,2.52v2.607    c-1.766,0.431-3.38,1.104-4.878,1.977l-1.825-1.815c-0.946-0.948-2.602-0.947-3.551-0.001L5.27,8.205    C4.802,8.672,4.535,9.318,4.535,9.978c0,0.669,0.259,1.299,0.733,1.772l1.752,1.76c-0.921,1.513-1.629,3.167-2.081,4.933H2.501    C1.117,18.443,0,19.555,0,20.935v4.125c0,1.384,1.117,2.471,2.501,2.471h2.438c0.452,1.766,1.159,3.43,2.079,4.943l-1.752,1.763    c-0.474,0.473-0.734,1.106-0.734,1.776s0.261,1.303,0.734,1.776l2.92,2.919c0.474,0.473,1.103,0.733,1.772,0.733    s1.299-0.261,1.773-0.733l1.833-1.816c1.498,0.873,3.112,1.545,4.878,1.978v2.604c0,1.383,1.088,2.498,2.471,2.498h4.128    c1.383,0,2.488-1.115,2.488-2.498v-2.605c1.767-0.432,3.371-1.104,4.869-1.977l1.817,1.812c0.474,0.475,1.104,0.735,1.775,0.735    c0.67,0,1.301-0.261,1.774-0.733l2.92-2.917c0.473-0.472,0.732-1.103,0.734-1.772c0-0.67-0.262-1.299-0.734-1.773l-1.75-1.77    c0.92-1.514,1.627-3.179,2.08-4.943h2.438c1.383,0,2.52-1.087,2.52-2.471v-4.125C45.973,19.555,44.837,18.443,43.454,18.443z     M22.976,30.85c-4.378,0-7.928-3.517-7.928-7.852c0-4.338,3.55-7.85,7.928-7.85c4.379,0,7.931,3.512,7.931,7.85    C30.906,27.334,27.355,30.85,22.976,30.85z"/>
 </svg>

src/app.js

@@ -315,6 +315,11 @@ function runCode() {
 	const userCode = elements.codeInput.value;
 	const lesson = state.currentModule.lessons[state.currentLessonIndex];
 
+	// Rotate the Run button icon
+	const runButtonImg = document.querySelector("#run-btn img");
+	const runButtonRotationDegree = Number(runButtonImg.style.transform.match(/\d+/)?.pop() ?? 0);
+	document.querySelector("#run-btn img").style.transform = `rotate(${runButtonRotationDegree + 180}deg)`;
+
 	// Always apply the code to the preview, regardless of validation result
 	lessonEngine.applyUserCode(userCode, true);
 
@@ -329,7 +334,7 @@ function runCode() {
 					? validationResult.validCases.length
 					: 1;
 
-		elements.validationIndicators.innerHTML = `${validationResult.validCases} / ${validationResult.totalCases}`;
+		elements.validationIndicators.innerHTML = `${Math.round((validationResult.validCases / validationResult.totalCases) * 100)}%`;
 	}
 
 	if (validationResult.isValid) {

src/impl/LessonEngine.js

@@ -130,18 +130,6 @@ export class LessonEngine {
 		// Get the complete CSS by combining all parts
 		const userCssWithWrapper = this.getCompleteCss();
 
-		// Create the complete CSS by combining base CSS with user code and sandbox CSS
-		const combinedCSS = `
-			/* Base CSS */
-			${previewBaseCSS || ""}
-			
-			/* User Code */
-			${userCssWithWrapper || ""}
-			
-			/* Sandbox CSS (for visualizing the exercise) */
-			${sandboxCSS || ""}
-		`;
-
 		// Write the content to the iframe
 		const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
 		iframeDoc.open();
@@ -149,7 +137,9 @@ export class LessonEngine {
 			<!DOCTYPE html>
 			<html>
 				<head>
-					<style>${combinedCSS}</style>
+					<style>${previewBaseCSS}</style>
+					<style>${userCssWithWrapper}</style>
+					<style>${sandboxCSS}</style>
 				</head>
 				<body>
 					${previewHTML || "<div>No preview available</div>"}

src/main.css

@@ -615,6 +615,10 @@ code {
 }
 
 /* Update run button styling when in re-run state */
+#run-btn img {
+	transition: transform 420ms ease;
+}
+
 #run-btn.re-run {
 	background-color: var(--success-color);
 	border-color: var(--success-color);