feat(curriculum): add interactive examples to css variables (#65373)

Co-authored-by: Jeevankumar-S <jeevenkumar2003@email.com>
Co-authored-by: zaira <zairahira@gmail.com>

curriculum/challenges/english/blocks/review-css-variables/671a98fbaabfba994e3d9a7c.md

@@ -5,7 +5,7 @@ challengeType: 31
 dashedName: review-css-variables
 ---
 
-# --description--
+# --interactive--
 
 ## CSS Custom Properties (CSS Variables)
 
@@ -46,7 +46,11 @@ body {
 - **`initial-value`**: This sets the default value of the property.
 - **Gradient Example Using the `@property` Rule**: This example creates a gradient that smoothly animates when the element is hovered over.
 
+:::interactive_editor
+
 ```html
+<link rel="stylesheet" href="styles.css">
+
 <div class="gradient-box"></div>
 ```
 
@@ -69,6 +73,8 @@ body {
 }
 ```
 
+:::
+
 - **Fallbacks**: When using the custom property, you can provide a fallback value using the `var()` function, just as you would with standard custom properties:
 
 ```css