Align marginalia palette with site design tokens

The marginalia grammar had drifted onto its own slate/coral palette
(#2b3441 / #c85a4a / #ececea), unrelated to the site's warm browns
and brand orange (#521000 / #FF4801 / #F5F1EB). Every prototype and
the gestalt page inherited the drift. Fixed by remapping the grammar's
four palette constants onto site tokens, and removing every stray
neutral rgba from the prototype scaffolds.

Mapping:
  INK        #2b3441 → #521000              (--text)
  INK_SOFT   #6e7888 → rgba(82, 16, 0, .7)  (--muted)
  EMPHASIS   #c85a4a → #FF4801              (--accent)
  SOFT_FILL  rgba(0,0,0,.06) → rgba(255, 72, 1, .08)  (--accent-soft)

Other touches:
- gestalt page CSS now mirrors site palette (--paper #F5F1EB, --rule
  #EBD5C1) and uses var(--rule) for section dividers instead of a
  hardcoded grey
- prototype banner background swapped from rgba(0,0,0,.04) to
  var(--accent-soft) so it pulls from the same theme
- operators-polish-comparison drops the bespoke --bad/--good colours
  in favour of a single accent paint, distinguishing before from
  after by hollow ring vs filled dot rather than by hue. Caption text
  ("red dots" / "green dots") updated accordingly

Audit: grep over public/prototyping/**/*.html now finds only
#521000, #EBD5C1, #F5F1EB, #FF4801, rgba(255, 72, 1, 0.08), and
rgba(82, 16, 0, 0.7). Six values, all site tokens.

https://claude.ai/code/session_01MazwoRWAihW6dwso3fMCHE

Author: claude

public/prototyping/index.html

@@ -8,7 +8,7 @@
   .prototype-banner {
     margin: 0 0 var(--space-4);
     padding: var(--space-2) var(--space-3);
-    background: rgba(0, 0, 0, 0.04);
+    background: var(--accent-soft);
     border: 1px dashed var(--hairline);
     border-radius: .5rem;
     color: var(--muted);

public/prototyping/journey-spread.html

@@ -8,7 +8,7 @@
   .prototype-banner {
     margin: 0 0 var(--space-4);
     padding: var(--space-2) var(--space-3);
-    background: rgba(0, 0, 0, 0.04);
+    background: var(--accent-soft);
     border: 1px dashed var(--hairline);
     border-radius: .5rem;
     color: var(--muted);
@@ -34,7 +34,7 @@ <h1>Mutability</h1>
     <p class="meta">Some objects change in place, while others return new values.</p>
   </section>
 
-  <section class="literate-program" aria-label="Annotated code walkthrough"><section class="lesson-step lp-cell"><div class="lp-prose"><figure class="cell-figure"><svg viewBox="0 0 220 175" xmlns="http://www.w3.org/2000/svg"><text x="0" y="12" font-family="-apple-system, 'Source Sans Pro', sans-serif" font-size="8" fill="#6e7888" text-anchor="start" letter-spacing="0.5">BEFORE</text><rect x="0" y="18" width="60" height="24" fill="none" stroke="#2b3441" stroke-width="1.0"/><text x="30.0" y="34.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#2b3441" text-anchor="middle" font-style="italic">first</text><rect x="0" y="48" width="60" height="24" fill="none" stroke="#2b3441" stroke-width="1.0"/><text x="30.0" y="64.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#2b3441" text-anchor="middle" font-style="italic">second</text><line x1="60" y1="30" x2="80.03839178306819" y2="42.331318020349656" stroke="#2b3441" stroke-width="1.0"/><polygon points="86,46 78.57091899120806,44.71596130712238 81.50586457492832,39.946674733576934" fill="#2b3441"/><line x1="60" y1="60" x2="79.83670230054477" y2="49.31869876124512" stroke="#2b3441" stroke-width="1.0"/><polygon points="86,46 81.16418180504282,51.784017841027215 78.50922279604673,46.85337968146303" fill="#2b3441"/><rect x="88" y="32" width="88" height="28" fill="rgba(0,0,0,0.06)" stroke="#2b3441" stroke-width="1.0"/><text x="132.0" y="50.0" font-family="'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace" font-size="10" fill="#2b3441" text-anchor="middle">["python"]</text><text x="0" y="100" font-family="-apple-system, 'Source Sans Pro', sans-serif" font-size="8" fill="#6e7888" text-anchor="start" letter-spacing="0.5">AFTER APPEND</text><rect x="0" y="108" width="60" height="24" fill="none" stroke="#2b3441" stroke-width="1.0"/><text x="30.0" y="124.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#2b3441" text-anchor="middle" font-style="italic">first</text><rect x="0" y="138" width="60" height="24" fill="none" stroke="#2b3441" stroke-width="1.0"/><text x="30.0" y="154.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#2b3441" text-anchor="middle" font-style="italic">second</text><line x1="60" y1="120" x2="80.03839178306819" y2="132.33131802034967" stroke="#2b3441" stroke-width="1.0"/><polygon points="86,136 78.57091899120806,134.7159613071224 81.50586457492832,129.94667473357694" fill="#2b3441"/><line x1="60" y1="150" x2="79.83670230054477" y2="139.31869876124512" stroke="#2b3441" stroke-width="1.0"/><polygon points="86,136 81.16418180504282,141.7840178410272 78.50922279604673,136.85337968146303" fill="#2b3441"/><rect x="88" y="122" width="130" height="28" fill="rgba(0,0,0,0.06)" stroke="#2b3441" stroke-width="1.0"/><text x="153.0" y="140.0" font-family="'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace" font-size="10" fill="#2b3441" text-anchor="middle">["python","workers"]</text></svg><figcaption>Two names share one mutable list — appending through one name changes the object visible through both.</figcaption></figure><p>Mutable objects can change in place. <code class="syntax-inline">first</code> and <code class="syntax-inline">second</code> point to the same list, so appending through one name changes the object seen through both names.</p></div><div class="cell-code-stack"><div class="cell-source"><p class="cell-label">Source</p><pre><code class="language-python">first = [&quot;python&quot;]
+  <section class="literate-program" aria-label="Annotated code walkthrough"><section class="lesson-step lp-cell"><div class="lp-prose"><figure class="cell-figure"><svg viewBox="0 0 220 175" xmlns="http://www.w3.org/2000/svg"><text x="0" y="12" font-family="-apple-system, 'Source Sans Pro', sans-serif" font-size="8" fill="rgba(82, 16, 0, 0.7)" text-anchor="start" letter-spacing="0.5">BEFORE</text><rect x="0" y="18" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="34.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">first</text><rect x="0" y="48" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="64.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">second</text><line x1="60" y1="30" x2="80.03839178306819" y2="42.331318020349656" stroke="#521000" stroke-width="1.0"/><polygon points="86,46 78.57091899120806,44.71596130712238 81.50586457492832,39.946674733576934" fill="#521000"/><line x1="60" y1="60" x2="79.83670230054477" y2="49.31869876124512" stroke="#521000" stroke-width="1.0"/><polygon points="86,46 81.16418180504282,51.784017841027215 78.50922279604673,46.85337968146303" fill="#521000"/><rect x="88" y="32" width="88" height="28" fill="rgba(255, 72, 1, 0.08)" stroke="#521000" stroke-width="1.0"/><text x="132.0" y="50.0" font-family="'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace" font-size="10" fill="#521000" text-anchor="middle">["python"]</text><text x="0" y="100" font-family="-apple-system, 'Source Sans Pro', sans-serif" font-size="8" fill="rgba(82, 16, 0, 0.7)" text-anchor="start" letter-spacing="0.5">AFTER APPEND</text><rect x="0" y="108" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="124.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">first</text><rect x="0" y="138" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="154.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">second</text><line x1="60" y1="120" x2="80.03839178306819" y2="132.33131802034967" stroke="#521000" stroke-width="1.0"/><polygon points="86,136 78.57091899120806,134.7159613071224 81.50586457492832,129.94667473357694" fill="#521000"/><line x1="60" y1="150" x2="79.83670230054477" y2="139.31869876124512" stroke="#521000" stroke-width="1.0"/><polygon points="86,136 81.16418180504282,141.7840178410272 78.50922279604673,136.85337968146303" fill="#521000"/><rect x="88" y="122" width="130" height="28" fill="rgba(255, 72, 1, 0.08)" stroke="#521000" stroke-width="1.0"/><text x="153.0" y="140.0" font-family="'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace" font-size="10" fill="#521000" text-anchor="middle">["python","workers"]</text></svg><figcaption>Two names share one mutable list — appending through one name changes the object visible through both.</figcaption></figure><p>Mutable objects can change in place. <code class="syntax-inline">first</code> and <code class="syntax-inline">second</code> point to the same list, so appending through one name changes the object seen through both names.</p></div><div class="cell-code-stack"><div class="cell-source"><p class="cell-label">Source</p><pre><code class="language-python">first = [&quot;python&quot;]
 second = first
 second.append(&quot;workers&quot;)
 print(first)

public/prototyping/layout-inline-above.html

@@ -8,7 +8,7 @@
   .prototype-banner {
     margin: 0 0 var(--space-4);
     padding: var(--space-2) var(--space-3);
-    background: rgba(0, 0, 0, 0.04);
+    background: var(--accent-soft);
     border: 1px dashed var(--hairline);
     border-radius: .5rem;
     color: var(--muted);
@@ -39,7 +39,7 @@ <h1>Mutability</h1>
     <p class="meta">Some objects change in place, while others return new values.</p>
   </section>
 
-  <section class="literate-program" aria-label="Annotated code walkthrough"><section class="lesson-step lp-cell"><div class="lp-prose"><p>Mutable objects can change in place. <code class="syntax-inline">first</code> and <code class="syntax-inline">second</code> point to the same list, so appending through one name changes the object seen through both names.</p></div><figure class="cell-figure"><svg viewBox="0 0 220 175" xmlns="http://www.w3.org/2000/svg"><text x="0" y="12" font-family="-apple-system, 'Source Sans Pro', sans-serif" font-size="8" fill="#6e7888" text-anchor="start" letter-spacing="0.5">BEFORE</text><rect x="0" y="18" width="60" height="24" fill="none" stroke="#2b3441" stroke-width="1.0"/><text x="30.0" y="34.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#2b3441" text-anchor="middle" font-style="italic">first</text><rect x="0" y="48" width="60" height="24" fill="none" stroke="#2b3441" stroke-width="1.0"/><text x="30.0" y="64.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#2b3441" text-anchor="middle" font-style="italic">second</text><line x1="60" y1="30" x2="80.03839178306819" y2="42.331318020349656" stroke="#2b3441" stroke-width="1.0"/><polygon points="86,46 78.57091899120806,44.71596130712238 81.50586457492832,39.946674733576934" fill="#2b3441"/><line x1="60" y1="60" x2="79.83670230054477" y2="49.31869876124512" stroke="#2b3441" stroke-width="1.0"/><polygon points="86,46 81.16418180504282,51.784017841027215 78.50922279604673,46.85337968146303" fill="#2b3441"/><rect x="88" y="32" width="88" height="28" fill="rgba(0,0,0,0.06)" stroke="#2b3441" stroke-width="1.0"/><text x="132.0" y="50.0" font-family="'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace" font-size="10" fill="#2b3441" text-anchor="middle">["python"]</text><text x="0" y="100" font-family="-apple-system, 'Source Sans Pro', sans-serif" font-size="8" fill="#6e7888" text-anchor="start" letter-spacing="0.5">AFTER APPEND</text><rect x="0" y="108" width="60" height="24" fill="none" stroke="#2b3441" stroke-width="1.0"/><text x="30.0" y="124.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#2b3441" text-anchor="middle" font-style="italic">first</text><rect x="0" y="138" width="60" height="24" fill="none" stroke="#2b3441" stroke-width="1.0"/><text x="30.0" y="154.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#2b3441" text-anchor="middle" font-style="italic">second</text><line x1="60" y1="120" x2="80.03839178306819" y2="132.33131802034967" stroke="#2b3441" stroke-width="1.0"/><polygon points="86,136 78.57091899120806,134.7159613071224 81.50586457492832,129.94667473357694" fill="#2b3441"/><line x1="60" y1="150" x2="79.83670230054477" y2="139.31869876124512" stroke="#2b3441" stroke-width="1.0"/><polygon points="86,136 81.16418180504282,141.7840178410272 78.50922279604673,136.85337968146303" fill="#2b3441"/><rect x="88" y="122" width="130" height="28" fill="rgba(0,0,0,0.06)" stroke="#2b3441" stroke-width="1.0"/><text x="153.0" y="140.0" font-family="'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace" font-size="10" fill="#2b3441" text-anchor="middle">["python","workers"]</text></svg><figcaption>Two names share one mutable list — appending through one name changes the object visible through both.</figcaption></figure><div class="cell-code-stack"><div class="cell-source"><p class="cell-label">Source</p><pre><code class="language-python">first = [&quot;python&quot;]
+  <section class="literate-program" aria-label="Annotated code walkthrough"><section class="lesson-step lp-cell"><div class="lp-prose"><p>Mutable objects can change in place. <code class="syntax-inline">first</code> and <code class="syntax-inline">second</code> point to the same list, so appending through one name changes the object seen through both names.</p></div><figure class="cell-figure"><svg viewBox="0 0 220 175" xmlns="http://www.w3.org/2000/svg"><text x="0" y="12" font-family="-apple-system, 'Source Sans Pro', sans-serif" font-size="8" fill="rgba(82, 16, 0, 0.7)" text-anchor="start" letter-spacing="0.5">BEFORE</text><rect x="0" y="18" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="34.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">first</text><rect x="0" y="48" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="64.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">second</text><line x1="60" y1="30" x2="80.03839178306819" y2="42.331318020349656" stroke="#521000" stroke-width="1.0"/><polygon points="86,46 78.57091899120806,44.71596130712238 81.50586457492832,39.946674733576934" fill="#521000"/><line x1="60" y1="60" x2="79.83670230054477" y2="49.31869876124512" stroke="#521000" stroke-width="1.0"/><polygon points="86,46 81.16418180504282,51.784017841027215 78.50922279604673,46.85337968146303" fill="#521000"/><rect x="88" y="32" width="88" height="28" fill="rgba(255, 72, 1, 0.08)" stroke="#521000" stroke-width="1.0"/><text x="132.0" y="50.0" font-family="'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace" font-size="10" fill="#521000" text-anchor="middle">["python"]</text><text x="0" y="100" font-family="-apple-system, 'Source Sans Pro', sans-serif" font-size="8" fill="rgba(82, 16, 0, 0.7)" text-anchor="start" letter-spacing="0.5">AFTER APPEND</text><rect x="0" y="108" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="124.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">first</text><rect x="0" y="138" width="60" height="24" fill="none" stroke="#521000" stroke-width="1.0"/><text x="30.0" y="154.0" font-family="'Iowan Old Style', Charter, Georgia, serif" font-size="11" fill="#521000" text-anchor="middle" font-style="italic">second</text><line x1="60" y1="120" x2="80.03839178306819" y2="132.33131802034967" stroke="#521000" stroke-width="1.0"/><polygon points="86,136 78.57091899120806,134.7159613071224 81.50586457492832,129.94667473357694" fill="#521000"/><line x1="60" y1="150" x2="79.83670230054477" y2="139.31869876124512" stroke="#521000" stroke-width="1.0"/><polygon points="86,136 81.16418180504282,141.7840178410272 78.50922279604673,136.85337968146303" fill="#521000"/><rect x="88" y="122" width="130" height="28" fill="rgba(255, 72, 1, 0.08)" stroke="#521000" stroke-width="1.0"/><text x="153.0" y="140.0" font-family="'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace" font-size="10" fill="#521000" text-anchor="middle">["python","workers"]</text></svg><figcaption>Two names share one mutable list — appending through one name changes the object visible through both.</figcaption></figure><div class="cell-code-stack"><div class="cell-source"><p class="cell-label">Source</p><pre><code class="language-python">first = [&quot;python&quot;]
 second = first
 second.append(&quot;workers&quot;)
 print(first)