labsite: Update contents to align with Next button (1/2)

We have removed verbose Headings for `<details>` section to fit on button.
This way details summary and next button are visually aligned.

We've also added to each section revealed by a Next button click a Heading.

As per usual I've reworded the content a little to make it more consistent with
how the labs have evolved. Hints are a little more elaborate now.

Commit-group: 1/2

frontend/lab/samples/ifs/alpha.md

@@ -1,17 +1,29 @@
 # 🌈 Transparent Colors
 
-⭐ **Read** and **Run** the code. Does it make sense to you?
+## ⭐ Intro
 
-⭐ **Complete it** to create the following drawing:
+**Read** the code. What do you think will happen when you run it?
+
+**Run** the code. Was it what you expected?
+
+[Next]
+
+## ⭐ Add a Yellow Rectangle
+
+Complete the code to create the following drawing:
 
 ![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares.svg)
 
-⭐ **Modify the Alpha** parameter to the [`hsl`] function to make the bottom
-quadrant grey, like so:
+[Next]
+
+## ⭐ Tweak the Alpha
+
+Tweak the Alpha parameter to the [`hsl`] function, its fourth parameter, to make
+the bottom left quadrant grey:
 
 ![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares-alpha.svg)
 
-## [>] Understanding Alpha 📖
+## [>] Docs
 
 In the interactive [`hsl`] function [color explorer](#hsl) we learned how hsl
 takes three values: hue, saturation, lightness values to create a color.

frontend/lab/samples/ifs/bounce.md

@@ -5,6 +5,8 @@
 Check out the [bouncing ball page 🏓📺](#bounce-show) or observe the
 animation below.
 
+## Demo
+
 <details>
   <summary>Animation demo</summary>
   <p><img src="samples/ifs/img/bounce.gif" alt="small centered circle" /></p>
@@ -27,7 +29,7 @@ animation below.
 ⭐ Finally, to change direction at the edges use the reversible increment trick
 from the [Pulse challenge](#pulse).
 
-### [>] Code hint 🧚
+### [>] Hint
 
 Inside the loop body add:
 

frontend/lab/samples/ifs/chat.evy

@@ -1,4 +1,5 @@
-print "Do you like cookies?"
+question := "Do you like cookies?"
+print question
 answer := read
 
 if answer == "yes"

frontend/lab/samples/ifs/chat.md

@@ -1,14 +1,21 @@
 # 💬 Let's Chat
 
-⭐ **Before you run the code:** Can you predict what will happen?
+## ⭐ Intro
 
-Now, hit **Run** and see if you were right!
+**Read** the code. What do you think will happen when you run it?
 
-⭐ **Think about it:** What's the purpose of the `:=` operator?
+**Run** the code. Was it what you expected?
 
-## [>] `:=` Declaration with type inference 📖
+[Next]
+
+## ⭐ Type Inference
+
+Note the new `:=` operator. Have a guess how it works.
+
+## [>] Docs
 
 In Evy, you can declare a variable and assign it a value in one step using `:=`.
+This is called **Declaration with Type Inference**.
 
 Instead of
 
@@ -23,12 +30,14 @@ you can use the shortcut
 s := "banana"
 ```
 
----
+[Next]
+
+## ⭐ Add `else if`
 
-⭐ **Challenge:** Can you add a different response if the answer is "no"? Use
-`else if` to create an alternative message.
+Can you add a different response to the program if the answer is `"no"`? Use `else
+if` to create an alternative message.
 
-### [>] Code hint 🧚
+### [>] Hint
 
 ```evy
 if answer == "yes"
@@ -40,18 +49,22 @@ else
 end
 ```
 
----
+[Next]
+
+## ⭐ Your Turn
+
+Can you create your own chat bot?
+
+### Some ideas
 
-⭐ **Your turn:** Can you create your own chat bot?
+🍦 Ask about their favorite ice cream flavor instead of cookies.
 
-### [>] Some ideas
+🎁 Ask if they want to open a surprise.
 
-- 🍦 Ask about their favorite ice cream flavor instead of cookies.
-- 🎁 Ask if they want to open a surprise.
-  - If they say `"yes"`, reveal the surprise (let your imagination run wild 🐉).
-  - If they say `"no"`, respond with something like "And so it remains my secret
-    🔒".
-  - If they say anything else, respond with "I don't understand."
+- If they say `"yes"`, reveal the surprise (let your imagination run wild 🐉).
+- If they say `"no"`, respond with something like `"And so it remains my secret
+🔒"`.
+- If they say anything else, respond with `"I don't understand."`
 
 You could also ask about their favorite color, band, or football team and
 respond accordingly!

frontend/lab/samples/ifs/pi.md

@@ -1,26 +1,38 @@
 # 🥧 Monte Carlo 💕 π
 
-This lab shows how to estimate the mathematical constant π (pi) using a Monte
-Carlo algorithm.
+## ⭐ Introduction
 
-- ⭐ What do you know about **π**?
-- ⭐ Do you know the **area** of a circle with radius `1`?
+This lab shows how to estimate the mathematical constant **π** (pi) using
+a **Monte Carlo algorithm**.
 
-## Quarter circle
+- What do you know about **π**?
+- Do you know the **area** of a circle with radius `1`?
+
+## [>] Docs
+
+A **Monte Carlo algorithm** is a computer program that simulates the behavior of
+other systems. It's not a method that gives you a perfectly precise answer, but
+rather an approximate one, often relying on **randomness** and **statistics**
+to reach a result. The more times you run it, the closer you get to the true
+answer.
+
+[Next]
+
+## ⭐ Quarter circle
 
 ![quarter circle](samples/ifs/img/quarter-circle.svg)
 
-⭐ What's the **area** of the red **quarter-circle** if the radius is `1`? Can
+What's the **area** of the red **quarter-circle** if the radius is `1`? Can
 you estimate it to the nearest tenth?
 
-⭐ What's the total **area** of the **square** (including both the red and black
+What's the total **area** of the **square** (including both the red and black
 areas)?
 
-⭐ If we place a dot **randomly** within the square, what's the **probability**
+If we place a dot **randomly** within the square, what's the **probability**
 it will land inside the red quarter-circle? Does your answer make sense
 visually?
 
-### [>] Math hint 🧮
+### [>] Hint
 
 - **Square Area:** If the width of the square is `1`, its area is `1 * 1 = 1`.
 
@@ -32,7 +44,7 @@ visually?
 
 - **Probability:** The probability of a random point landing inside the red
   quarter-circle is the ratio of the quarter-circle's area to the square's
-  area: `(π / 4) / 1 = π / 4`. This is about 0.8, which seems visually
+  area: `(π / 4) / 1 = π / 4`. This is about `0.8`, which seems visually
   reasonable.
 
 - **Estimating π:** This means if we randomly place many dots within the square,
@@ -41,18 +53,18 @@ visually?
   more dots we place, the more precise our estimate of π should become. Let's
   put this theory to the test!
 
-## Let's get coding
+[Next]
+
+## ⭐ Draw a Red Quarter Circle
 
-⭐ **Your Task:** Modify the code on the right to draw `"red"` dots for points
-inside the quarter-circle, just like in the image above.
+Modify the code on the right to draw `"red"` dots for points inside the
+quarter-circle, just like in the image above.
 
 Use the [`sqrt`] function to calculate the distance from each dot to the
 circle's center at `0 0`.
 
 [`sqrt`]: /docs/builtins.html#sqrt
 
-### [>] Math hint 🧮
-
 The distance from the circle's center at `0 0` to any point `x y` is calculated
 using the Pythagorean theorem `a² + b² = c²`:
 
@@ -66,7 +78,7 @@ If this distance is less than or equal to `1`, the point lies within the
 quarter-circle and should be colored red. (Remember, we're scaling `x` and `y`
 by 100 when positioning the dots, as the Evy canvas is 100 by 100.)
 
-### [>] Code hint 🧚
+### [>] Hint
 
 Add the following code inside the loop after declaring `x` and `y` and before
 drawing the circle.
@@ -80,19 +92,17 @@ else
 end
 ```
 
----
-
-## Estimate π
+[Next]
 
-⭐ Can you calculate π by tallying up red dots and black dots?
+## ⭐ Estimate π
 
-### [>] Math hint 🧮
+Can you calculate π by tallying up red dots and black dots?
 
 We know the total number of points is `i`. Let's count the `"red"` dots in the
 variable `reds`. We'll then calculate the ratio of `reds / i` and multiply by
 `4` to get an estimate of π.
 
-### [>] Code hint 🧚
+### [>] Hint
 
 At the top of your code, add:
 
@@ -114,16 +124,8 @@ And at the bottom of the loop, add:
 ```evy
 while // ...
   // ...
-  pi := reds / total * 4
+  pi := reds / i * 4
   cls // clears the text output
   print "PI: " pi
 end
 ```
-
-## [>] Monte Carlo Algorithm 📖
-
-A **Monte Carlo algorithm** is a computer program that simulates the behavior of
-other systems. It's not a method that gives you a perfectly precise answer, but
-rather an approximate one, often relying on **randomness** and **statistics**
-to reach a result. The more times you run it, the closer you get to the true
-answer.