docs(website): make the analysis guides easier to start

- Each guide opens with a short "Before you start" box: difficulty,
  what you need, a link to the step-by-step setup and a one-line
  explanation of Electron or native programs.
- The browser guide gives commands to open Chrome on Mac and Windows
  Command Prompt, not only Linux, and its prompt includes the
  debugging address.
- Multi-line terminal commands note that Windows Command Prompt needs
  them on one line without the backslashes.
- The guide hub lists guides from easiest to hardest, with what each
  one needs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

website/public/assets/styles.css

@@ -1443,6 +1443,32 @@ pre code {
   border-radius: 3px;
   color: #414b55;
 }
+.guide-entry .guide-needs {
+  margin-bottom: 0.9rem;
+  color: var(--ink);
+  font-size: 0.9rem;
+}
+.before-start {
+  margin-bottom: 2.5rem;
+  padding: 1.2rem 1.4rem;
+  border: 1px solid #ced9e5;
+  border-left: 3px solid var(--accent);
+  border-radius: 5px;
+  background: #fafbfc;
+}
+.before-start-title {
+  margin-bottom: 0.6rem;
+  font-weight: 650;
+}
+.before-start ul {
+  margin: 0;
+}
+.before-start li + li {
+  margin-top: 0.45rem;
+}
+.before-start .caption {
+  margin: 0.8rem 0 0;
+}
 .example-files {
   display: flex;
   flex-wrap: wrap;

website/public/guides/browser/index.html

@@ -157,6 +157,27 @@
           </ul>
         </nav>
         <article class="article" aria-label="Browser observation">
+          <aside class="before-start" aria-labelledby="browser-before">
+            <p class="before-start-title" id="browser-before">
+              Before you start
+            </p>
+            <ul>
+              <li>
+                <strong>About 10 minutes.</strong> You paste one command to open
+                Chrome, then click a button.
+              </li>
+              <li>
+                <strong>You need</strong> REA connected to an AI app and Google
+                Chrome. New to this?
+                <a href="../setup/">Set up REA step by step</a>.
+              </li>
+              <li>
+                <strong>Your normal browsing stays separate.</strong> The
+                command opens Chrome with an empty profile, without your tabs,
+                logins or history.
+              </li>
+            </ul>
+          </aside>
           <section class="article-section" id="example">
             <h2>What happens when you click Export?</h2>
             <p>
@@ -207,16 +228,48 @@
             <h2>Open Chrome with remote debugging</h2>
             <p>
               Open the hosted Notes example with a separate browser profile and
-              a local debugging port. On Linux:
+              a local debugging port. Copy the command for your computer into
+              the terminal and press <kbd>Enter</kbd>.
             </p>
             <div class="code-block">
               <div class="code-header">
-                <span>Start the example browser</span
+                <span>Start the example browser · Mac</span
+                ><button
+                  class="copy-button"
+                  type="button"
+                  data-copy="browser-start-mac"
+                  aria-label="Copy start the example browser on a Mac"
+                >
+                  Copy
+                </button>
+              </div>
+              <pre><code id="browser-start-mac">open -na "Google Chrome" --args \
+  --remote-debugging-port=9222 \
+  --user-data-dir=/tmp/rea-notes-browser \
+  https://rea.tools/examples/notes-web/</code></pre>
+            </div>
+            <div class="code-block">
+              <div class="code-header">
+                <span>Start the example browser · Windows Command Prompt</span
+                ><button
+                  class="copy-button"
+                  type="button"
+                  data-copy="browser-start-windows"
+                  aria-label="Copy start the example browser on Windows"
+                >
+                  Copy
+                </button>
+              </div>
+              <pre><code id="browser-start-windows">start chrome --remote-debugging-port=9222 --user-data-dir="%TEMP%\rea-notes-browser" https://rea.tools/examples/notes-web/</code></pre>
+            </div>
+            <div class="code-block">
+              <div class="code-header">
+                <span>Start the example browser · Linux</span
                 ><button
                   class="copy-button"
                   type="button"
                   data-copy="browser-start"
-                  aria-label="Copy start the example browser"
+                  aria-label="Copy start the example browser on Linux"
                 >
                   Copy
                 </button>
@@ -227,9 +280,8 @@
   https://rea.tools/examples/notes-web/</code></pre>
             </div>
             <p>
-              Use your installed browser's executable path on macOS or Windows.
+              A new Chrome window opens on the Notes example. You can replace
-              You can replace the page URL with another page you want to
+              the page URL with another page you want to inspect.
-              inspect.
             </p>
             <p>
               REA connects to this existing browser. You keep control of the
@@ -256,15 +308,16 @@
               <p class="terminal-prompt">
                 <span class="prompt-symbol" aria-hidden="true">›</span
                 ><span id="browser-prompt"
-                  >Use REA to inspect this page while I click Export notes. What
+                  >Use REA with the browser at http://127.0.0.1:9222 to inspect
+                  the Notes example page while I click Export notes. What
                   request does it make, and how is the CSV built?</span
                 ><span class="terminal-cursor" aria-hidden="true"></span>
               </p>
             </div>
             <p class="caption">
-              Example prompt. Give your agent the debugging endpoint,
+              Example prompt. <code>http://127.0.0.1:9222</code> is the
-              <code>http://127.0.0.1:9222</code>, and the page URL. Let it start
+              debugging address from the command above. Keep that Chrome window
-              the capture before you click.
+              open, and let your agent start the capture before you click.
             </p>
             <p>
               Your agent discovers the page target, starts an observation
@@ -290,6 +343,10 @@
               <pre><code id="browser-targets">npx -y rea-agents@latest list-browser-targets \
   http://127.0.0.1:9222 --json</code></pre>
             </div>
+            <p class="caption">
+              In Windows Command Prompt, put the command on one line and leave
+              out the <code>\</code> characters.
+            </p>
             <p>
               Choose the target with the Notes example URL. Replace
               <code>TARGET_ID</code> below with its ID, then run:

website/public/guides/index.html

@@ -6,7 +6,7 @@
     <title>Reverse Engineering Guides — REA</title>
     <meta
       name="description"
-      content="Learn REA through short worked examples: a native calculation, an Electron CSV export and a browser request."
+      content="Learn REA through short worked examples: an Electron CSV export, a browser request and a native calculation."
     />
     <!-- website:sharing:start -->
     <!-- prettier-ignore -->
@@ -18,7 +18,7 @@
     <!-- prettier-ignore -->
     <meta property="og:title" content="Reverse Engineering Guides — REA" />
     <!-- prettier-ignore -->
-    <meta property="og:description" content="Learn REA through short worked examples: a native calculation, an Electron CSV export and a browser request." />
+    <meta property="og:description" content="Learn REA through short worked examples: an Electron CSV export, a browser request and a native calculation." />
     <!-- prettier-ignore -->
     <meta property="og:url" content="https://rea.tools/guides/" />
     <!-- prettier-ignore -->
@@ -39,7 +39,7 @@
     <!-- prettier-ignore -->
     <meta name="twitter:title" content="Reverse Engineering Guides — REA" />
     <!-- prettier-ignore -->
-    <meta name="twitter:description" content="Learn REA through short worked examples: a native calculation, an Electron CSV export and a browser request." />
+    <meta name="twitter:description" content="Learn REA through short worked examples: an Electron CSV export, a browser request and a native calculation." />
     <!-- prettier-ignore -->
     <meta name="twitter:image" content="https://rea.tools/assets/social-card.png" />
     <!-- prettier-ignore -->
@@ -138,8 +138,8 @@
         <p class="breadcrumb"><a href="../">Home</a> / Guides</p>
         <h1>REA guides.</h1>
         <p class="lede">
-          Analyze a native function, an Electron export or a browser request.
+          Follow an Electron export, observe a browser request or analyze a
-          Each guide includes a prompt, code and results.
+          native function. Each guide includes a prompt, code and results.
         </p>
       </div>
       <div class="guide-index">
@@ -165,23 +165,6 @@
             </p>
           </div>
         </section>
-        <section class="guide-entry">
-          <p class="eyebrow">Native binaries</p>
-          <div>
-            <h2>Recover a sound-pan calculation</h2>
-            <p>
-              Start with a Windows game executable. Inspect instructions, follow
-              a caller, read numeric constants and check the recovered C.
-            </p>
-            <div class="guide-route">
-              <span>Instructions</span> <b aria-hidden="true">→</b>
-              <span>Caller</span> <b aria-hidden="true">→</b>
-              <span>Constants</span> <b aria-hidden="true">→</b>
-              <span>C function</span>
-            </div>
-            <a class="text-link" href="native/">Native analysis guide</a>
-          </div>
-        </section>
         <section class="guide-entry">
           <p class="eyebrow">JavaScript &amp; Electron</p>
           <div>
@@ -196,6 +179,9 @@
               <span>Preload API</span> <b aria-hidden="true">→</b>
               <span>IPC</span> <b aria-hidden="true">→</b> <span>CSV file</span>
             </div>
+            <p class="guide-needs">
+              <strong>Good first guide.</strong> Needs only REA setup.
+            </p>
             <a class="text-link" href="javascript/"
               >JavaScript &amp; Electron guide</a
             >
@@ -218,9 +204,31 @@
               <span>Captured request</span> <b aria-hidden="true">→</b>
               <span>Export script</span>
             </div>
+            <p class="guide-needs">Needs REA setup and Google Chrome.</p>
             <a class="text-link" href="browser/">Browser observation guide</a>
           </div>
         </section>
+        <section class="guide-entry">
+          <p class="eyebrow">Native binaries</p>
+          <div>
+            <h2>Recover a sound-pan calculation</h2>
+            <p>
+              Start with a Windows game executable. Inspect instructions, follow
+              a caller, read numeric constants and check the recovered C.
+            </p>
+            <div class="guide-route">
+              <span>Instructions</span> <b aria-hidden="true">→</b>
+              <span>Caller</span> <b aria-hidden="true">→</b>
+              <span>Constants</span> <b aria-hidden="true">→</b>
+              <span>C function</span>
+            </div>
+            <p class="guide-needs">
+              <strong>Advanced.</strong> Needs REA setup and Ghidra, Hopper or
+              IDA.
+            </p>
+            <a class="text-link" href="native/">Native analysis guide</a>
+          </div>
+        </section>
       </div>
     </main>
     <!-- website:footer:start -->

website/public/guides/javascript/index.html

@@ -157,6 +157,29 @@
           </ul>
         </nav>
         <article class="article" aria-label="JavaScript &amp; Electron">
+          <aside class="before-start" aria-labelledby="javascript-before">
+            <p class="before-start-title" id="javascript-before">
+              Before you start
+            </p>
+            <ul>
+              <li>
+                <strong>Good first guide.</strong> About 10 minutes, no coding
+                experience needed.
+              </li>
+              <li>
+                <strong>You need</strong> REA connected to an AI app. New to
+                this? <a href="../setup/">Set up REA step by step</a>.
+              </li>
+              <li>
+                <strong>You don't need</strong> Electron or the app running. REA
+                reads the app's files.
+              </li>
+            </ul>
+            <p class="caption">
+              An Electron app is a desktop app built with web technology, like
+              VS Code, Discord or Notion.
+            </p>
+          </aside>
           <section class="article-section" id="example">
             <h2>Where does “Export notes” go?</h2>
             <p>
@@ -236,8 +259,9 @@
               </p>
             </div>
             <p class="caption">
-              Example prompt. Include the absolute path to the application
+              Example prompt. Add the full path to the application folder or
-              folder or <code>app.asar</code>.
+              <code>app.asar</code> at the end;
+              <a href="../setup/#ask">here's how to copy a path</a>.
             </p>
             <p>
               REA reads the application files and builds a map of entrypoints,
@@ -371,6 +395,10 @@
               <pre><code id="javascript-command">npx -y rea-agents@latest analyze-javascript-application \
   /absolute/path/to/notes-example --json</code></pre>
             </div>
+            <p class="caption">
+              In Windows Command Prompt, put the command on one line and leave
+              out the <code>\</code> characters.
+            </p>
             <p>
               Replace the path with the folder you unzipped. You should find one
               IPC channel and one matching handler in

website/public/guides/native/index.html

@@ -156,6 +156,35 @@
           </ul>
         </nav>
         <article class="article" aria-label="Native analysis">
+          <aside class="before-start" aria-labelledby="native-before">
+            <p class="before-start-title" id="native-before">
+              Before you start
+            </p>
+            <ul>
+              <li>
+                <strong>Advanced guide.</strong> New to REA? Start with the
+                <a href="../javascript/">JavaScript guide</a>; it needs no extra
+                tools.
+              </li>
+              <li>
+                <strong>You need</strong> REA connected to an AI app (<a
+                  href="../setup/"
+                  >step-by-step setup</a
+                >) and a native analysis tool: Ghidra, Hopper or IDA, connected
+                as in
+                <a href="../../get-started/#native">Set up native analysis</a>.
+              </li>
+              <li>
+                <strong>To follow along,</strong> use your own copy of the
+                Windows game DX-Ball 1.07, or any other program you want to
+                study.
+              </li>
+            </ul>
+            <p class="caption">
+              A native program is compiled to machine code, such as a Windows
+              <code>.exe</code> file. Its original source code isn't included.
+            </p>
+          </aside>
           <section class="article-section" id="example">
             <h2>Calculate left/right sound panning</h2>
             <p>
@@ -343,6 +372,10 @@ return (DxBallInt)pan;</code></pre>
               <pre><code id="native-command">npx -y rea-agents@latest function /absolute/path/to/program main \
   --provider ghidra --json</code></pre>
             </div>
+            <p class="caption">
+              In Windows Command Prompt, put the command on one line and leave
+              out the <code>\</code> characters.
+            </p>
             <p>
               Replace the target path and <code>main</code> with your own
               function name or address. Each CLI invocation imports and analyzes