diff --git a/website/README.md b/website/README.md
index ae758a895..f0da06ca4 100644
--- a/website/README.md
+++ b/website/README.md
@@ -26,7 +26,7 @@ Open . Refresh the browser after editing a file.
## Pages
-- `public/index.html`: compact setup, playable dinosaur reconstruction, manual/agent comparison, Calculator percentage example and case-study overviews.
+- `public/index.html`: compact setup, reverse-engineering definition and purpose, manual/agent comparison, dinosaur and Calculator examples, and case-study overviews.
- `public/examples/dino-lab/index.html`: adjustable-speed mini-game, recovered rule, original-game check and browser analysis steps.
- `public/first-investigation/index.html`: a guided Notes export investigation, from setup to a checked CSV prediction.
- `public/showcase/index.html`: the case-study index.
@@ -98,12 +98,15 @@ their provenance and the scope of the validation claims. The original executable
and complete private Evidence records are not website assets.
The homepage starts with a short installation prompt and the ordinary setup
-command, followed immediately by the playable dinosaur example. Its game
-precedes the prompt and code on small screens. The manual/agent comparison
-then explains the investigation using the same dinosaur speed question.
-Calculator follows as a native example: its excerpt comes from an installed
-model DLL, and Microsoft’s public implementation supplies names and a
-crosscheck. Its controls illustrate the percentage rule with generic inputs.
+command, then explains what reverse engineering is and why someone would use
+it. The manual/agent comparison introduces REA’s role before the examples.
+Dinosaur is the first example; Calculator follows as the native example.
+Both name the goal and the reason to inspect the program before showing the
+demo. A labeled finding explains what REA returned, and the flow distinguishes
+REA’s inspection from the agent’s interpretation and implementation.
+Its game precedes the prompt and code on small screens. Calculator’s excerpt
+comes from an installed model DLL; Microsoft’s public implementation supplies
+names and a crosscheck. Its controls apply the percentage rule to generic inputs.
The dinosaur example connects an inspected running script to a new playable
mini-game. `public/assets/dino-speed.js` owns the recovered speed rule and replay;
diff --git a/website/evidence/calculator-and-dino.md b/website/evidence/calculator-and-dino.md
index e89138d54..b46d2113e 100644
--- a/website/evidence/calculator-and-dino.md
+++ b/website/evidence/calculator-and-dino.md
@@ -1,8 +1,10 @@
# Calculator and dinosaur beginner examples
Evidence collected on 9 October 2026 with the published REA 4.1.0 package.
-The homepage offers compact setup first, then a playable dinosaur reconstruction,
-a manual/agent comparison of that investigation, and the Calculator example.
+The homepage offers compact setup first, then a reverse-engineering definition,
+purpose and manual/agent comparison. Dinosaur is the first worked example;
+Calculator is the second. Each states its goal, why the program is inspected,
+what REA returned and how the agent uses it.
Prompts and replies are examples based on the
findings below. Selected code and generic inputs are public; raw captures stay
outside the website.
@@ -54,7 +56,8 @@ in the installed DLL. The public source commit is a crosscheck; it is not an
identified build commit for that installed package. No PDB symbols were loaded.
The homepage's named C-like rule is an explanatory summary. Its `200 + 10%`
-and `200 × 10%` displays are derived from that rule. Browser checks exercise
+and `200 × 10%` controls compute those cases from that rule using the fixed
+inputs 200 and 10. Browser checks exercise
both percentage illustrations, their results, operator selection and reset.
The Microsoft tests were inspected, not executed. A probe-owned Calculator
window could be inspected, but it was no longer present at the input-check
diff --git a/website/figures.md b/website/figures.md
index a87cf7b19..e02f894ef 100644
--- a/website/figures.md
+++ b/website/figures.md
@@ -49,6 +49,12 @@ HTML. Calculator’s assembly comes from a real installed model DLL; the named
calculation is a readable summary crosschecked against Microsoft’s public source. See
[evidence/calculator-and-dino.md](evidence/calculator-and-dino.md).
+The homepage explains reverse engineering before the worked examples. Each
+example opens with its goal and reason for inspecting the program. A selected
+highlight marks the intended result; the “REA returned” block identifies the
+evidence. The flows label REA’s inspection and the agent’s interpretation or
+reconstruction explicitly. Preserve this context when moving a demo.
+
The dinosaur sequence uses an HTML flow: inspect the loaded script, rebuild the
speed rule, then change and play. Its canvas mini-game and static SVG fallback
are authored code, without generated images or copied game sprites. The game
diff --git a/website/public/assets/home.js b/website/public/assets/home.js
index 61f22231b..448052cc7 100644
--- a/website/public/assets/home.js
+++ b/website/public/assets/home.js
@@ -11,13 +11,15 @@ function initializePercentDemo() {
const render = () => {
const adding = operation === "add";
- const percent = adding ? 20 : 0.1;
- const result = adding ? 220 : 20;
+ const previous = 200;
+ const current = 10;
+ const percent = adding ? (current * previous) / 100 : current / 100;
+ const result = adding ? previous + percent : previous * percent;
const operator = adding ? "+" : "×";
expression.textContent =
stage === "result" ? `200 ${operator} ${percent} =` : `200 ${operator}`;
display.textContent = String(
- stage === "input" ? 10 : stage === "percent" ? percent : result,
+ stage === "input" ? current : stage === "percent" ? percent : result,
);
equals.disabled = stage !== "percent";
status.textContent =
diff --git a/website/public/assets/styles.css b/website/public/assets/styles.css
index 54bf52f67..55b04ee22 100644
--- a/website/public/assets/styles.css
+++ b/website/public/assets/styles.css
@@ -1244,6 +1244,57 @@ pre code {
color: var(--ink);
font-weight: 500;
}
+.home-purpose {
+ max-width: 850px;
+ margin-bottom: 2rem;
+ color: var(--muted);
+}
+.prose-highlight {
+ padding: 0.04em 0.16em;
+ border-radius: 2px;
+ background: #e4ecf5;
+ color: var(--accent);
+ font-weight: 600;
+ box-decoration-break: clone;
+ -webkit-box-decoration-break: clone;
+}
+.case-brief {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
+ gap: 2.5rem;
+ margin: 0 0 2rem;
+ padding-block: 1.2rem;
+ border-top: 1px solid var(--line);
+ border-bottom: 1px solid var(--line);
+}
+.case-brief dt,
+.finding-label {
+ margin-bottom: 0.45rem;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: var(--accent);
+}
+.case-brief dd {
+ margin: 0;
+ color: var(--muted);
+ font-size: 0.95rem;
+}
+.case-brief dd strong {
+ color: var(--ink);
+}
+.rea-finding {
+ margin-bottom: 1.4rem;
+ padding-left: 1rem;
+ border-left: 2px solid var(--accent);
+}
+.rea-finding > :last-child {
+ margin: 0;
+ font-size: 0.95rem;
+ color: var(--muted);
+}
+.rea-finding strong {
+ color: var(--ink);
+}
.home-role-comparison {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -1416,6 +1467,14 @@ pre code {
margin: 0;
font-size: 0.9rem;
}
+.percent-rules dd strong,
+.percent-rules dd code {
+ display: block;
+}
+.percent-rules dd strong {
+ margin-bottom: 0.25rem;
+ font-weight: 500;
+}
.home-evidence-details {
margin-top: 2rem;
padding-block: 1rem;
@@ -1541,6 +1600,10 @@ pre code {
}
}
@media (max-width: 640px) {
+ .case-brief {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 1.2rem;
+ }
.home-hero {
padding-block: 2.8rem;
}
diff --git a/website/public/examples/dino-lab/index.html b/website/public/examples/dino-lab/index.html
index a0578a487..38038c91d 100644
--- a/website/public/examples/dino-lab/index.html
+++ b/website/public/examples/dino-lab/index.html
@@ -57,8 +57,10 @@
Inspect → rebuild → change
Rebuild the dinosaur’s speed rule.
- REA found how the running game increases its speed. This small
- reconstruction lets you keep that rule or choose a new speed and play.
+ To recreate the game’s acceleration, first find the rule that controls
+ its speed. REA returned the running script;
+ we used its rule to build this mini-game with
+ adjustable speed.
+ Finding out how software works by
+ examining the program itself.
+
+
+
+ The goal: understand a feature well enough to
+ explain it,
+ change it or
+ rebuild it.
+
+
+
+
Before REA · You investigate
+
+
+ 01
+
+ Find the relevant code.Locate the loaded script or the binary function.
+
+
+
+ 02
+
+ Work out its rules.Follow the inputs, calls and settings.
+
+
+
+ 03
+
+ Use and check the result.Explain the behavior, rebuild it or make a change.
+
+
+
+
+
+
With REA · You ask your agent
+
+
+ Example question · Dinosaur game
+
+
+
+ ›Use REA to inspect this dinosaur game. Why does it get
+ faster? Show the speed rule.
+
+
+
+ Example explanation from the findings
+
+
+ The game adds a little speed on each update. Its script sets
+ the starting speed, the increment and the stopping
+ point.
+
+
+
+
+
+ REA supplies code and observations from the program.
+ Your agent uses that evidence to explain, rebuild or test a
+ feature.
+
+
+
+
+
Example 01 · Chrome’s dinosaur game
-
Change the dinosaur’s speed.
-
- Inspect the speed rule with REA, rebuild a small version, then
- change the speed and play.
-
+
Why does the dinosaur get faster?
+
+
+
Goal
+
+ Rebuild the game with
+ adjustable speed.
+
+
+
+
Why reverse engineer it?
+
+ To reproduce its acceleration, we need
+ the rule in the running game: how fast it
+ starts, how much it increases and when it stops.
+
+
+
Play the reconstruction
@@ -193,6 +302,14 @@
>
+
+
REA returned
+
+ The script actually running in the page. The
+ agent reads its update function and speed settings, then uses
+ that rule in a new game.
+
+
-
From the running game to a new version
+
What each part does
- 01 · InspectREA returns the loaded script01 · REARead the running game’s scriptThe agent reads the update function and its speed
- settings.Return its actual code and settings to the agent.
- 02 · RebuildUse the recovered rule02 · Your agentRebuild the rule, add a controlStart at 6 and add 0.001 while speed is below 13.Use the recovered acceleration in a small game with a speed
+ slider.
- 03 · Change and playMake speed adjustable03 · YouChange the speed and playKeep the original acceleration, or choose your own
+ >Try the original acceleration, then choose your own
pace.
@@ -322,129 +439,31 @@ SPEED: 6
-
-
-
-
What is reverse engineering?
-
- Finding out how software works by examining the program.
-
-
-
- In the dinosaur example:
- which code makes the game get faster?
-
-
-
-
Before REA · You investigate
-
-
- 01
-
- Find the script behind the game.Which loaded file controls the dinosaur?
-
-
-
- 02
-
- Find the update function.Where does the game change its speed?
-
-
-
- 03
-
- Recover the speed rule.Follow the starting speed, increment and
- threshold.
-
-
-
- 04
-
- Check the result.Replay the rule and compare it with the game.
-
- ›Use REA to inspect this dinosaur game. Why does it get
- faster? Show the speed rule.
-
-
-
- Example explanation from the findings
-
-
- It starts at 6. Each update without a collision adds 0.001
- while speed is below 13.
-
-
- After 4,000 updates, speed is 10.
- You can replay the rule to check it.
-
-
-
-
- Your agent uses REA to locate and read the code, then connects
- the findings to your question.
-
-
-
- You describe the behavior. The agent carries out the investigation
- with REA.
-
-
-
-
-
Example 02 · Windows Calculator
-
What does the % button actually do?
-
- The answer depends on the operator. Compare addition and
- multiplication.
-
+
Why does 200 + 10% give 220?
+
+
+
Goal
+
+ Explain the result and
+ recreate Calculator’s % rule.
+
+
+
+
Why reverse engineer it?
+
+ The same button uses
+ different rules after + and ×. We inspect the
+ installed app to find which number the percentage is applied to.
+
+
+
Try the calculation
@@ -507,11 +526,45 @@ SPEED: 6
-
REA finds the branch. The agent explains it.
+
+
REA returned
+
+ The % handler’s original instructions and decompiled
+ code.
+ The agent reads the two branches and explains which rule each
+ operator uses.
+
+
- The installed app’s calculation code checks for multiplication
- or division before computing the percentage.
+ For this example, previous = 200 and
+ current = 10.
+
+
+ Example prompt · Calculator
+
+
+
+ ›Use REA to inspect Windows Calculator. Why does 200 + 10%
+ give 220? Show the code behind the % button.
+
+
Readable summary of the % handler
@@ -524,44 +577,54 @@ SPEED: 6
-
Addition
-
200 + 10% → 200 + 20 → 220
+
With +
+
+ Take 10% of the first number.10% of 200 = 20 → 200 + 20 = 220
+
-
Multiplication
-
200 × 10% → 200 × 0.1 → 20
+
With ×
+
+ Turn 10% into 0.1.200 × 0.1 = 20
+
-
- See the real code and how the answer was checked
-
+
+
From the installed app to an explanation
+
- 01 · Inspect calc.exeA launcher01 · REA reads calc.exeIt launches the Calculator appREA finds ShellExecuteW opening
- ms-calculator:.The code opens ms-calculator:. The agent then
+ selects the installed app’s library.
- 02 · Inspect the appCalcViewModel.dll02 · REA reads the libraryReturn the % handler’s codeIts % handler checks two operator IDs and uses the constant
+ >The function checks the operator and uses the constant
100.
- 03 · Interpret and checkTwo percentage rules03 · Your agent interprets itExplain and reproduce the rulesMicrosoft’s public implementation and unit tests explain the
- same distinction.Crosscheck the branch with Microsoft’s source, then try + and
+ × above.
+
+
+ See the real code and how the answer was checked
+
@@ -585,30 +648,7 @@ SPEED: 6
0x64 = 100
-
-
- Example prompt · Calculator
-
-
-
- ›Use REA to inspect Windows Calculator. Why does 200 + 10%
- give 220? Show the code behind the % button.
-
-
+
Inspected with REA 4.1.0: Windows Calculator 11.2508.4.0, x64. The
readable summary uses names from Microsoft’s public source to
diff --git a/website/style-guide.md b/website/style-guide.md
index d8afc1c00..e8c5085d4 100644
--- a/website/style-guide.md
+++ b/website/style-guide.md
@@ -65,9 +65,14 @@ requiring the reader to understand either language. Show a simple agent prompt
and the specific facts REA supplies to answer it.
Put compact setup at the beginning of the homepage: a copyable installation
-prompt and the ordinary setup command. Follow it with the beginner examples.
-Put the most immediate result first. An interactive example can precede the
-process explanation; on mobile, show the demo before its supporting code.
+prompt and the ordinary setup command. Then explain what reverse engineering
+means and what it lets someone do, before the worked examples.
+Begin each example with its goal and the reason to inspect that program.
+Name the actual evidence REA returned and what the agent did with it.
+Use short labels, selective bold text and the shared blue highlight to make
+those facts visible when scanning. Keep source, interpretation and new code
+attributed to their respective roles. On mobile, the demo can precede its
+supporting code once its purpose is clear.
Show how the reader's task changes using the same question on both sides of a
manual/agent comparison. Let returned evidence make REA's contribution visible.