Update styling (#1335)

closes #1324

## Changes for CCP editor projects
### Heading
- **_Editor-ui_**: The blue box and squiggly line for heading are used
only for projects site editor projects. So it is safe to remove.
- In the past, projects site heading was styled using a css class. Going
forward, it will be pure markdown h2.
- There was a blanket removal of margin from h2 in `instructions.scss`
which made the markdown h2 look strange.
- **_Editor-ui_**: This was replaced with different margin. This doesn't
affect CEfE instructions.
- Task fencing (--- task ---) no longer needed so removed from .md file.
- Need to keep`.c-project-task` css class for existing projects that
contain the task fencing.

### Steps
- Used markdown h3 in .md file.
- With that, they get `id = step-1` etc. probably by kramdown during
project build
- **_Editor-ui_**: Added CCP styling for the steps ids

### 'Now run your code`
- Used markdown h3 in .md file
- With that, it gets `id = now-run-your-code`
- **_Editor-ui_**: Added styling for the id

### Callouts
- No changes in the editor-ui.
- Instead of using html, used kramdown syntax to set classes in .md file
-> worked!

## Screenshots
Before - After (with existing .md format) - After (with new .md format)
<img width="931" alt="Screenshot 2026-02-23 at 11 09 35"
src="https://github.com/user-attachments/assets/52c549c5-d825-4aea-ad40-6a9eb7fa7688"
/>


## Impact on CEfE instructions panel?
CEfE instructions panel does use the `.project-instructions` class with
markdowns; however, the markdown headings don't get ids when used to
populate the instruction panel. So there won't be any impact on CEfE.

---------

Co-authored-by: create-issue-branch[bot] <53036503+create-issue-branch[bot]@users.noreply.github.com>
Co-authored-by: cocomarine <hj.kang@raspberrypi.org>
Co-authored-by: HJ <cocomarine@users.noreply.github.com>

Author: create-issue-branch[bot]

src/assets/play_filled.svg

@@ -9,7 +9,7 @@
 
   h2 {
     @include typography.style-1-5(bold);
-    margin: 0;
+    margin-block-start: $space-0-5;
   }
 
   p {
@@ -67,6 +67,43 @@
     }
   }
 
+  // Steps in CCP style
+  [id^="step-"]{
+    @include typography.style-1(bold);
+
+    background: #ECF8EE;
+    border-radius: $space-0-5;
+    color: #276D32;
+    display: inline-block;
+    margin: $space-1-5 0 0 0;
+    padding: $space-0-25 $space-0-5;
+  }
+
+  // "Now run your code" in CCP style
+  #now-run-your-code {
+    @include typography.style-1(bold);
+
+    padding-inline-start: $space-2-5;
+    margin-block-start: $space-2;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset-inline-start: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      block-size: $space-2;
+      inline-size: $space-2;
+      border-radius: $space-0-5;
+      background-color: #ECF8EE;
+      background-image: url("../play_filled.svg");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: $space-1-5 $space-1-5;
+    }
+  }
+
   .c-project-code {
     background-color: $rpf-grey-700;
     border-radius: 8px;
@@ -202,31 +239,8 @@
     }
   }
 
-  .c-project-heading--task {
-    @extend .rpf-squiggle-heading;
-    --rpf-squiggle-color: var(--rpf-blue-800);
-    background-color: $rpf-blue-100;
-    padding: $space-1;
-    inline-size: 100%;
-    box-sizing: border-box;
-    border-start-start-radius: 8px;
-    border-start-end-radius: 8px;
-
-    &::after {
-      margin-inline: $space-1;
-      margin-block-start: $space-0-25;
-    }
-  }
-
   .c-project-task {
-    background-color: $rpf-blue-100;
-    padding: $space-1;
-    display: flex;
-    flex-direction: column;
-    gap: $space-1;
-    border-end-start-radius: 8px;
-    border-end-end-radius: 8px;
-    margin-block-end: $space-1-5;
+    margin-block-end: $space-2-5;
 
     p {
       margin: 0;