add split asteroids

tasks/asteroid-splitting/CLAUDE.md

@@ -0,0 +1,134 @@
+# Asteroid Splitting Task Type
+
+Split an asteroid of weight N into two unequal parts. Each page has 4 horizontal sections separated by decorative dividers. Each section features one asteroid with a number N, and multiple formula rows where the child writes two addends that sum to N.
+
+## Layout
+
+- **Page:** A4 (210mm x 297mm), white background
+- **Header:** Hero splitter image + title "Расщепи Астероид" with subtitle
+- **Footer:** Planet panorama with gradient fade, footer bubble with total counter
+- **Content:** Exactly **4 sections per page**, separated by decorative divider bands
+- **Each section:**
+  - Left: Large asteroid image (~26mm) with number overlay (bold, white, shadowed)
+  - Center/Right: Formula rows centered, with splitter icon + small asteroid + formula
+- **Asteroid icons:** `assets/icons/pack3-asteroids/asteroid{1-16}.png`
+- **Hero images:** `assets/hero-images/splitters/splitter{1-9}.png`
+- **Footer images:** `assets/footers/planet{1-9}.jpeg`
+
+## Number Rules
+
+- N ranges from 1 to 10 (default document range)
+- Each section shows one N value with multiple splitting options
+- **Number of formula rows per section (STRICT):**
+  - N=9..10: **6 rows**
+  - N=7..8: **5 rows**
+  - N=4..6: **3 rows**
+  - N=1..3: **1 row**
+- All splits must be into **unequal** parts (no N/2 + N/2)
+- Formula format: `[splitter img] [asteroid icon with N] = ___ + ___`
+
+## Hint System (Pre-filled Answers)
+
+For N=8,9,10 — two hints per section, progressing with each occurrence in the document:
+
+| Occurrence | Hint 1 | Hint 2 | Description |
+|------------|--------|--------|-------------|
+| 1st | `1 + (N-1)` | `~half + ~half` | One hint always contains 1; other splits roughly in half |
+| 2nd | `A + B` | `B + A` | Symmetric pair, A ≠ 1 |
+| 3rd | `1 + ___` | `___ + X` | Partial hints with one blank; one hint contains 1, other does not |
+| 4th+ | (none) | (none) | No hints |
+
+For N=5,6,7 — two hints per section, **only on first occurrence**, immediately at 3rd-case level:
+
+| Occurrence | Hint 1 | Hint 2 |
+|------------|--------|--------|
+| 1st | `1 + ___` | `___ + X` (X ≠ 1) |
+| 2nd+ | (none) | (none) |
+
+**Hint styling:** black text (`text-indigo-950`) on the same underline blank, `font-semibold`.
+
+## Formula Row Design
+
+Each formula row contains (left to right):
+1. Small splitter image (~10mm wide, same as hero) — "shooting" at the asteroid
+2. Small asteroid icon (~12mm) with number overlaid (text ~1rem, bold white)
+3. `=` sign
+4. Underline blank (~18mm)
+5. `+` sign
+6. Underline blank (~18mm)
+
+Formula rows should be **centered** horizontally with ample spacing from the big asteroid.
+
+## Section Dividers
+
+Decorative bands between sections styled as spaceship/industrial elements. **One style per page, different style per page.** Height ~6-8px with repeating-linear-gradient patterns.
+
+### Divider Style Library (use one per page, rotate through)
+
+1. **Construction tape** — yellow/amber + dark brown diagonal stripes
+   ```css
+   repeating-linear-gradient(-45deg, #f59e0b, #f59e0b 8px, #92400e 8px, #92400e 16px)
+   ```
+2. **Police tape** — blue + light blue diagonal stripes
+   ```css
+   repeating-linear-gradient(-45deg, #3b82f6, #3b82f6 8px, #dbeafe 8px, #dbeafe 16px)
+   ```
+3. **Metal beam** — gray gradient with rivets feel
+   ```css
+   repeating-linear-gradient(-45deg, #9ca3af, #9ca3af 6px, #d1d5db 6px, #d1d5db 8px, #6b7280 8px, #6b7280 14px, #d1d5db 14px, #d1d5db 16px)
+   ```
+4. **Metal truss** — dark gray zigzag pattern
+   ```css
+   repeating-linear-gradient(45deg, #4b5563, #4b5563 6px, #1f2937 6px, #1f2937 12px)
+   ```
+5. **Energy conduit** — purple/indigo glow stripes
+   ```css
+   repeating-linear-gradient(-45deg, #7c3aed, #7c3aed 6px, #c4b5fd 6px, #c4b5fd 10px, #5b21b6 10px, #5b21b6 16px)
+   ```
+6. **Copper pipe** — warm orange/brown tones
+   ```css
+   repeating-linear-gradient(-45deg, #d97706, #d97706 6px, #fbbf24 6px, #fbbf24 10px, #b45309 10px, #b45309 16px)
+   ```
+
+**When adding new pages**, pick the next unused divider style. Track which styles are used in the document `.md` file.
+
+## Color Palette
+
+Matches project-wide indigo theme:
+- Title: `text-indigo-950`
+- Subtitle: `text-indigo-400`
+- Number overlay (large): white, `text-shadow: 2px 2px 4px rgba(0,0,0,0.7)`
+- Number overlay (small): white, ~1rem
+- Formula text: `text-indigo-950`
+- Input blanks: `border-indigo-300` underlines
+
+## Scripts
+
+- `scripts/generate.mjs` — template + data -> output pipeline (standard)
+
+## Editor
+
+`editor.html?file={docId}`
+
+### What the editor does
+
+The editor adjusts the **scale and rotation** of asteroid images in each section. When the user changes the big asteroid (left side), the small asteroid icons in formula rows (right side) follow the same transform proportionally. This is purely visual fine-tuning — making asteroids look more natural (tilted, resized) rather than all uniform.
+
+### Controls
+
+- Click big asteroid → select section
+- `+/-` → scale up/down (Shift = fine 0.01 step)
+- `[/]` → rotate ±5° (Shift = ±1°)
+- `0` → reset to default
+- `Esc` → deselect
+
+### Data flow
+
+- Editor reads `.template.html` (via EditorCore)
+- On load, fetches `.data.json` and applies transforms to DOM (`img.style.transform`)
+- On Save, reads transforms FROM DOM → sync XHR POST → server writes `.data.json`
+- `generate.mjs` reads `.data.json`, applies `style="transform: ..."` to img elements in `.output.html`
+
+### Status: BROKEN
+
+The editor has a reliability problem with the save cycle. The server's save endpoint runs `generate.mjs` asynchronously after writing `data.json`. `generate.mjs` writes `.output.html`, which triggers browser-sync live-reload. The reload can interfere with the save flow, causing data loss or incomplete saves. This needs to be investigated and fixed before the editor can be used reliably.

tasks/asteroid-splitting/docs/asteroid-splitting-1.data.json

@@ -0,0 +1,244 @@
+{
+  "pages": [
+    {
+      "page": 1,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 1.15,
+          "rotate": 0
+        },
+        {
+          "index": 1,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 2,
+          "scale": 0.9,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 2,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 1,
+          "scale": 1.2,
+          "rotate": 15
+        },
+        {
+          "index": 2,
+          "scale": 0.85,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 3,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 2,
+          "rotate": -25
+        },
+        {
+          "index": 1,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 2,
+          "scale": 1.85,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 4,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 1,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 2,
+          "scale": 1,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 5,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 1,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 2,
+          "scale": 1,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 6,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 1.2,
+          "rotate": 5
+        },
+        {
+          "index": 1,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 2,
+          "scale": 0.75,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 7,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 1,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 2,
+          "scale": 1,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 8,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 1,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 2,
+          "scale": 1,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 9,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 1,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 2,
+          "scale": 1,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 10,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 1,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 2,
+          "scale": 1,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 11,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 1,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 2,
+          "scale": 1,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 12,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 1,
+          "scale": 1,
+          "rotate": 0
+        },
+        {
+          "index": 2,
+          "scale": 1,
+          "rotate": 0
+        }
+      ]
+    }
+  ]
+}

tasks/asteroid-splitting/docs/asteroid-splitting-1.md

@@ -0,0 +1,47 @@
+# Asteroid Splitting — Document 1
+
+## Overview
+
+Four pages of asteroid splitting exercises. Each page has 3 sections with decorative dividers and even vertical spacing. The child splits each number into two unequal parts.
+
+## Page 1
+
+- Hero: splitter3 (right side)
+- Footer: cabin1
+- Divider style: construction tape (yellow/brown)
+- Sections: N=9(6rows, asteroid5), N=7(5rows, asteroid3), N=6(3rows, asteroid1)
+
+## Page 2
+
+- Hero: splitter6 (left side)
+- Footer: cabin3
+- Divider style: police tape (blue/white)
+- Sections: N=8(5rows, asteroid6), N=5(3rows, asteroid2), N=4(3rows, asteroid4)
+
+## Page 3
+
+- Hero: splitter2 (right side)
+- Footer: cabin5
+- Divider style: metal beam (gray gradient)
+- Sections: N=10(6rows, asteroid8), N=8(5rows, asteroid4), N=3(1row, asteroid6)
+
+## Page 4
+
+- Hero: splitter8 (left side)
+- Footer: cabin7
+- Divider style: metal truss (dark gray zigzag)
+- Sections: N=9(6rows, asteroid3), N=7(5rows, asteroid1), N=5(3rows, asteroid2)
+
+## Divider Styles Used
+
+1. construction tape (page 1)
+2. police tape (page 2)
+3. metal beam (page 3)
+4. metal truss (page 4)
+
+## Layout Notes
+
+- 3 sections per page with `justify-evenly` for even vertical distribution
+- Row counts: 9-10→6, 7-8→5, 4-6→3, 1-3→1
+- Splitter icon 36mm wide, pointing right
+- Footers: cabin views (not planets)

tasks/asteroid-splitting/docs/asteroid-splitting-1.template.html

@@ -0,0 +1,786 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
+  <title>Расщепи Астероид</title>
+  <script>
+    tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
+  </script>
+  <style>
+    @page { size: A4; margin: 0; }
+    .asteroid-glow { filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3)); }
+    .number-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 12px rgba(99, 102, 241, 0.5); }
+    .number-shadow-sm { text-shadow: 1px 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(99, 102, 241, 0.4); }
+    .divider-construction { height: 7px; background: repeating-linear-gradient(-45deg, #f59e0b, #f59e0b 8px, #92400e 8px, #92400e 16px); border-radius: 2px; opacity: 0.7; }
+    .divider-police { height: 7px; background: repeating-linear-gradient(-45deg, #3b82f6, #3b82f6 8px, #dbeafe 8px, #dbeafe 16px); border-radius: 2px; opacity: 0.7; }
+    .divider-metal { height: 7px; background: repeating-linear-gradient(-45deg, #9ca3af, #9ca3af 6px, #d1d5db 6px, #d1d5db 8px, #6b7280 8px, #6b7280 14px, #d1d5db 14px, #d1d5db 16px); border-radius: 2px; opacity: 0.7; }
+    .divider-truss { height: 7px; background: repeating-linear-gradient(45deg, #4b5563, #4b5563 6px, #1f2937 6px, #1f2937 12px); border-radius: 2px; opacity: 0.7; }
+    .divider-energy { height: 7px; background: repeating-linear-gradient(-45deg, #7c3aed, #7c3aed 6px, #c4b5fd 6px, #c4b5fd 10px, #5b21b6 10px, #5b21b6 16px); border-radius: 2px; opacity: 0.7; }
+    .divider-copper { height: 7px; background: repeating-linear-gradient(-45deg, #d97706, #d97706 6px, #fbbf24 6px, #fbbf24 10px, #b45309 10px, #b45309 16px); border-radius: 2px; opacity: 0.7; }
+    .splitter-icon { width: 36mm; object-fit: contain; flex-shrink: 0; }
+  </style>
+</head>
+<body class="bg-gray-200 font-nunito">
+  <!-- PAGE 1: N=10,7,5 — splitter3 right, cabin1 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin1.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2 flex-row-reverse">
+        <img src="/assets/hero-images/splitters/splitter3.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=10, asteroid1, 6 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">10</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">9</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">4</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">6</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-construction"></div>
+
+        <!-- Section: N=7, asteroid2, 5 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">7</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">4</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-construction"></div>
+
+        <!-- Section: N=5, asteroid3, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">5</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">3</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <!-- PAGE 2: N=9,6,3 — splitter6 left, cabin3 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin3.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2">
+        <img src="/assets/hero-images/splitters/splitter6.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=9, asteroid4, 6 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">9</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">8</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">4</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">5</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-police"></div>
+
+        <!-- Section: N=6, asteroid5, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">6</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">4</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-police"></div>
+
+        <!-- Section: N=3, asteroid6, 1 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">3</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">3</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <!-- PAGE 3: N=8,4,2 — splitter2 right, cabin5 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin5.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2 flex-row-reverse">
+        <img src="/assets/hero-images/splitters/splitter2.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=8, asteroid7, 5 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">8</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">7</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">3</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">5</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-metal"></div>
+
+        <!-- Section: N=4, asteroid8, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">4</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-metal"></div>
+
+        <!-- Section: N=2, asteroid9, 1 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">2</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">2</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <!-- PAGE 4: N=10,7,6 — splitter8 left, cabin7 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin7.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2">
+        <img src="/assets/hero-images/splitters/splitter8.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=10, asteroid10, 6 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">10</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">3</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">7</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">7</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">3</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-truss"></div>
+
+        <!-- Section: N=7, asteroid11, 5 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">7</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-truss"></div>
+
+        <!-- Section: N=6, asteroid12, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">6</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter8.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <!-- PAGE 5: N=9,4,3 — splitter4 right, cabin2 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin2.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2 flex-row-reverse">
+        <img src="/assets/hero-images/splitters/splitter4.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=9, asteroid13, 6 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">9</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter4.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">3</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">6</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter4.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">6</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">3</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter4.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter4.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter4.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter4.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-energy"></div>
+
+        <!-- Section: N=4, asteroid14, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">4</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter4.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter4.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter4.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-energy"></div>
+
+        <!-- Section: N=3, asteroid15, 1 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">3</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter4.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">3</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <!-- PAGE 6: N=8,5,2 — splitter1 left, cabin4 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin4.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2">
+        <img src="/assets/hero-images/splitters/splitter1.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=8, asteroid16, 5 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">8</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter1.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">2</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">6</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter1.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">6</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">2</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter1.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter1.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter1.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-copper"></div>
+
+        <!-- Section: N=5, asteroid1, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">5</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter1.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter1.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter1.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-copper"></div>
+
+        <!-- Section: N=2, asteroid2, 1 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">2</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter1.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">2</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <!-- PAGE 7: N=10,6,3 — splitter5 right, cabin6 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin6.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2 flex-row-reverse">
+        <img src="/assets/hero-images/splitters/splitter5.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=10, asteroid3, 6 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">10</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter5.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter5.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">6</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter5.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter5.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter5.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter5.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-construction"></div>
+
+        <!-- Section: N=6, asteroid4, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">6</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter5.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter5.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter5.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-construction"></div>
+
+        <!-- Section: N=3, asteroid5, 1 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">3</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter5.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">3</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <!-- PAGE 8: N=9,7,2 — splitter7 left, cabin8 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin8.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2">
+        <img src="/assets/hero-images/splitters/splitter7.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=9, asteroid6, 6 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">9</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">5</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-police"></div>
+
+        <!-- Section: N=7, asteroid7, 5 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">7</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-police"></div>
+
+        <!-- Section: N=2, asteroid8, 1 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">2</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter7.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">2</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <!-- PAGE 9: N=8,5,4 — splitter9 right, cabin9 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin9.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2 flex-row-reverse">
+        <img src="/assets/hero-images/splitters/splitter9.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=8, asteroid9, 5 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">8</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter9.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter9.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">5</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter9.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter9.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter9.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-metal"></div>
+
+        <!-- Section: N=5, asteroid10, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">5</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter9.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter9.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter9.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-metal"></div>
+
+        <!-- Section: N=4, asteroid11, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">4</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter9.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter9.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter9.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <!-- PAGE 10: N=10,8,4 — splitter3 left, cabin2 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin2.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2">
+        <img src="/assets/hero-images/splitters/splitter3.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=10, asteroid12, 6 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">10</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-truss"></div>
+
+        <!-- Section: N=8, asteroid13, 5 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">8</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">8</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-truss"></div>
+
+        <!-- Section: N=4, asteroid14, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">4</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">4</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <!-- PAGE 11: N=9,7,5 — splitter6 right, cabin4 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin4.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2 flex-row-reverse">
+        <img src="/assets/hero-images/splitters/splitter6.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=9, asteroid15, 6 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">9</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">9</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-energy"></div>
+
+        <!-- Section: N=7, asteroid16, 5 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">7</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-energy"></div>
+
+        <!-- Section: N=5, asteroid1, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">5</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter6.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">5</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <!-- PAGE 12: N=6,3,2 — splitter2 left, cabin6 -->
+  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
+    <div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
+      <img src="/assets/footers/cabin6.jpeg" class="w-full h-full object-cover object-center" alt="">
+    </div>
+    <div class="relative z-10 w-full h-full px-[10mm] pt-[4mm] pb-[28mm] flex flex-col">
+      <div class="flex items-center gap-3 mb-2">
+        <img src="/assets/hero-images/splitters/splitter2.png" class="w-[42%] shrink-0 object-contain" alt="">
+        <div class="flex-1 flex flex-col items-center justify-center text-center">
+          <h1 class="text-[1.5rem] font-extrabold leading-tight tracking-tight text-indigo-950">Расщепи Астероид</h1>
+          <p class="text-[0.8rem] font-medium text-indigo-400 mt-1">Раздели каждый астероид на две неравные части!</p>
+        </div>
+      </div>
+      <div class="flex flex-col justify-evenly flex-1">
+
+        <!-- Section: N=6, asteroid2, 3 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">6</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">6</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-copper"></div>
+
+        <!-- Section: N=3, asteroid3, 1 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">3</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">3</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+        <div class="divider-copper"></div>
+
+        <!-- Section: N=2, asteroid4, 1 rows -->
+        <div class="flex items-center gap-[8mm]">
+          <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+            <img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt="">
+            <span class="absolute text-[2.2rem] font-black text-white number-shadow">2</span>
+          </div>
+          <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+            <div class="flex items-center gap-[2mm]"><img src="/assets/hero-images/splitters/splitter2.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">2</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</body>
+</html>

tasks/asteroid-splitting/editor.html

@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Asteroid Splitting Editor</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { background: #1a1a2e; color: #e0e0e0; font-family: 'Segoe UI', system-ui, sans-serif; }
+    #toolbar {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
+      background: #16213e; border-bottom: 1px solid #0f3460;
+      display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 14px;
+    }
+    #toolbar button {
+      padding: 6px 14px; border: 1px solid #0f3460; border-radius: 6px;
+      background: #1a1a2e; color: #e0e0e0; cursor: pointer; font-size: 13px;
+    }
+    #toolbar button:hover { background: #0f3460; }
+    #toolbar button.primary { background: #533483; border-color: #7b2d8e; }
+    #toolbar button.save { background: #1b8a5a; border-color: #239b6e; }
+    #toolbar button[disabled] { opacity: 0.4; cursor: not-allowed; }
+    #page-indicator { color: #a0a0c0; font-weight: 600; min-width: 100px; text-align: center; }
+    .spacer { flex: 1; }
+    #statusbar {
+      position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
+      background: #16213e; border-top: 1px solid #0f3460;
+      padding: 6px 16px; font-size: 12px; color: #a0a0c0;
+    }
+    #worksheet-container {
+      margin-top: 52px; margin-bottom: 32px;
+      display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px;
+    }
+    .page-label {
+      position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
+      background: #533483; color: white; font-size: 11px; font-weight: 700;
+      padding: 2px 12px; border-radius: 4px;
+    }
+    .editor-selected { outline: 3px solid #7c3aed !important; outline-offset: 4px; }
+    .editor-changed::after {
+      content: ''; position: absolute; top: -2px; right: -2px;
+      width: 8px; height: 8px; background: #f97316; border-radius: 50%; z-index: 10;
+    }
+    #toast {
+      position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%);
+      background: #533483; color: white; padding: 8px 20px; border-radius: 8px;
+      font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.3s;
+      z-index: 2000; pointer-events: none;
+    }
+    #toast.show { opacity: 1; }
+    #coord-tooltip {
+      position: fixed; display: none; background: rgba(0,0,0,0.8); color: #e0e0e0;
+      padding: 3px 8px; border-radius: 4px; font-size: 11px; z-index: 2000;
+      pointer-events: none; white-space: nowrap;
+    }
+  </style>
+</head>
+<body>
+<div id="toolbar">
+  <button id="btn-prev">&larr; Prev</button>
+  <span id="page-indicator">Page 1 / ?</span>
+  <button id="btn-next">Next &rarr;</button>
+  <div class="spacer"></div>
+  <span id="selection-info" style="color: #c4b5fd; font-size: 12px;">Loading...</span>
+  <div class="spacer"></div>
+  <button id="btn-copy" class="primary">Copy JSON</button>
+  <button id="btn-save" class="save" disabled>Save</button>
+</div>
+<div id="worksheet-container"></div>
+<div id="statusbar">
+  <span id="status-text">Keys: +/- scale &bull; [/] rotate &bull; 0 reset</span>
+</div>
+<div id="toast"></div>
+<div id="coord-tooltip"></div>
+
+<script src="../../src/editor/editor-core.js"></script>
+<script>
+  // ============================================================
+  //  Simple approach: ALL state lives in the DOM (img.style.transform).
+  //  No in-memory state. buildConfig reads from DOM.
+  //  Like collecting-asteroids editor pattern.
+  // ============================================================
+
+  var sectionEls = []; // [{container, bigImg, smallImgs, pageNum, secIndex}]
+  var selected = null; // currently selected section
+  var ready = false;
+
+  // --- Parse transform string from DOM ---
+  function parseTransform(img) {
+    var t = img.style.transform || '';
+    var sm = t.match(/scale\(([\d.]+)\)/);
+    var rm = t.match(/rotate\(([-\d.]+)deg\)/);
+    return {
+      scale: sm ? parseFloat(sm[1]) : 1,
+      rotate: rm ? parseFloat(rm[1]) : 0
+    };
+  }
+
+  function setTransform(img, scale, rotate) {
+    img.style.transform = 'scale(' + scale + ') rotate(' + rotate + 'deg)';
+  }
+
+  // --- Find all sections in loaded pages ---
+  function findSections(pages) {
+    sectionEls = [];
+    pages.forEach(function(page, pi) {
+      var glows = page.querySelectorAll('.asteroid-glow');
+      glows.forEach(function(container, si) {
+        var bigImg = container.querySelector('img');
+        var sectionRow = container.parentElement;
+        while (sectionRow && !sectionRow.classList.contains('gap-[8mm]')) {
+          sectionRow = sectionRow.parentElement;
+        }
+        if (!sectionRow) sectionRow = container.parentElement;
+
+        var allImgs = sectionRow.querySelectorAll('img[src*="pack3-asteroids"]');
+        var smallImgs = [];
+        allImgs.forEach(function(img) { if (img !== bigImg) smallImgs.push(img); });
+
+        var sec = { container: container, bigImg: bigImg, smallImgs: smallImgs, pageNum: pi + 1, secIndex: si };
+        sectionEls.push(sec);
+
+        container.style.cursor = 'pointer';
+        container.addEventListener('click', function(e) {
+          e.stopPropagation();
+          selectSection(sec);
+        });
+      });
+    });
+  }
+
+  function selectSection(sec) {
+    if (selected) selected.container.classList.remove('editor-selected');
+    selected = sec;
+    sec.container.classList.add('editor-selected');
+    showInfo();
+  }
+
+  function showInfo() {
+    var el = document.getElementById('selection-info');
+    if (!selected) { el.textContent = 'Click a big asteroid to select'; return; }
+    var t = parseTransform(selected.bigImg);
+    el.textContent = 'Page ' + selected.pageNum + ' Sec ' + (selected.secIndex + 1) +
+      ' \u2014 scale: ' + t.scale.toFixed(2) + ' rotate: ' + t.rotate + '\u00B0';
+  }
+
+  // --- Apply scale/rotate to big + all small imgs ---
+  function applyToSection(sec, scale, rotate) {
+    setTransform(sec.bigImg, scale, rotate);
+    sec.smallImgs.forEach(function(img) { setTransform(img, scale, rotate); });
+    sec.container.classList.toggle('editor-changed', scale !== 1 || rotate !== 0);
+    showInfo();
+  }
+
+  // --- Load data.json and apply transforms to DOM ---
+  function loadData(docId, cb) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', 'docs/' + docId + '.data.json', true);
+    xhr.onload = function() {
+      if (xhr.status === 200) {
+        try {
+          var data = JSON.parse(xhr.responseText);
+          var n = 0;
+          (data.pages || []).forEach(function(p) {
+            (p.sections || []).forEach(function(s) {
+              if (s.scale === 1 && s.rotate === 0) return;
+              var sec = sectionEls.find(function(el) {
+                return el.pageNum === p.page && el.secIndex === s.index;
+              });
+              if (sec) { applyToSection(sec, s.scale, s.rotate); n++; }
+            });
+          });
+          if (n > 0) core.showToast('Loaded ' + n + ' edits');
+        } catch(e) {}
+      }
+      if (cb) cb();
+    };
+    xhr.onerror = function() { if (cb) cb(); };
+    xhr.send();
+  }
+
+  // --- Serialize: read ALL transforms from DOM ---
+  function buildConfig() {
+    var pagesMap = {};
+    sectionEls.forEach(function(sec) {
+      var t = parseTransform(sec.bigImg);
+      if (!pagesMap[sec.pageNum]) pagesMap[sec.pageNum] = { page: sec.pageNum, sections: [] };
+      pagesMap[sec.pageNum].sections.push({
+        index: sec.secIndex,
+        scale: +t.scale.toFixed(3),
+        rotate: +t.rotate.toFixed(1)
+      });
+    });
+    return { pages: Object.values(pagesMap) };
+  }
+
+  // --- Save: sync XHR, read from DOM ---
+  function saveToServer() {
+    if (!ready) return;
+    var data = buildConfig();
+    try {
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', '/api/save-edits', false);
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.send(JSON.stringify({ taskType: 'asteroid-splitting', docId: core.docId, data: data }));
+      core.showToast(xhr.status === 200 ? 'Saved!' : 'Error: ' + xhr.statusText);
+    } catch(e) {
+      core.showToast('Save failed: ' + e.message);
+    }
+  }
+
+  // --- Keyboard ---
+  document.addEventListener('keydown', function(e) {
+    if (!selected) return;
+    var t = parseTransform(selected.bigImg);
+    var step = e.shiftKey ? 0.01 : 0.05;
+    var rotStep = e.shiftKey ? 1 : 5;
+    switch (e.key) {
+      case '+': case '=':
+        applyToSection(selected, Math.min(2, +(t.scale + step).toFixed(3)), t.rotate);
+        e.preventDefault(); break;
+      case '-': case '_':
+        applyToSection(selected, Math.max(0.3, +(t.scale - step).toFixed(3)), t.rotate);
+        e.preventDefault(); break;
+      case '[':
+        applyToSection(selected, t.scale, t.rotate - rotStep);
+        e.preventDefault(); break;
+      case ']':
+        applyToSection(selected, t.scale, t.rotate + rotStep);
+        e.preventDefault(); break;
+      case '0':
+        applyToSection(selected, 1, 0);
+        e.preventDefault(); break;
+      case 'Escape':
+        if (selected) { selected.container.classList.remove('editor-selected'); selected = null; showInfo(); }
+        break;
+    }
+  });
+
+  document.addEventListener('click', function(e) {
+    if (selected && !e.target.closest('.asteroid-glow')) {
+      selected.container.classList.remove('editor-selected');
+      selected = null; showInfo();
+    }
+  });
+
+  // --- Init ---
+  // NOTE: do NOT pass serialize to EditorCore — we handle Save ourselves
+  // to avoid double-handler (EditorCore's async + ours sync) race condition
+  var core = EditorCore.init({
+    taskType: 'asteroid-splitting',
+    onReady: function(pages) {
+      findSections(pages);
+      document.getElementById('status-text').textContent =
+        sectionEls.length + ' sections. Keys: +/- scale \u2022 [/] rotate (Shift=fine) \u2022 0 reset';
+      // Load saved data, then enable Save
+      loadData(core.docId, function() {
+        ready = true;
+        document.getElementById('btn-save').disabled = false;
+        document.getElementById('selection-info').textContent = 'Click a big asteroid to select';
+      });
+      // Wire Save button directly (EditorCore won't touch it without serialize)
+      document.getElementById('btn-save').addEventListener('click', function(e) {
+        saveToServer();
+      });
+      // Wire Copy JSON
+      document.getElementById('btn-copy').addEventListener('click', function(e) {
+        var json = JSON.stringify(buildConfig(), null, 2);
+        navigator.clipboard.writeText(json).then(function() { core.showToast('Copied!'); });
+      });
+    }
+  });
+</script>
+</body>
+</html>

tasks/asteroid-splitting/index.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Split the Asteroid &mdash; Space Math Adventures</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg-start: #eef0ff; --bg-mid: #fef3e2; --bg-end: #e8faf3;
+      --text-deep: #2d1b69; --text-body: #3d2d6b;
+      --accent-violet: #7c3aed; --accent-orange: #f97316; --accent-teal: #0d9488; --accent-pink: #ec4899;
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'Nunito', sans-serif;
+      background: linear-gradient(170deg, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
+      color: var(--text-body); min-height: 100vh; overflow-x: hidden;
+      display: flex; flex-direction: column;
+    }
+    .page-content { flex: 1; }
+    .container { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 0 24px; }
+    .back-link {
+      display: inline-flex; align-items: center; gap: 6px;
+      color: var(--accent-violet); text-decoration: none; font-size: 0.9rem; font-weight: 700;
+      padding-top: 40px; transition: color 0.15s;
+    }
+    .back-link:hover { color: var(--accent-pink); }
+    .page-header { display: flex; align-items: center; gap: 24px; padding: 20px 0 12px; }
+    .page-header img {
+      width: 110px; filter: drop-shadow(0 4px 12px rgba(124,58,237,0.2));
+      animation: headerBob 3s ease-in-out infinite;
+    }
+    @keyframes headerBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
+    .page-header h1 {
+      font-family: 'Fredoka', sans-serif; font-size: 2rem; font-weight: 700;
+      background: linear-gradient(135deg, var(--accent-violet), var(--accent-teal));
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    }
+    .header-desc {
+      color: var(--text-body); font-size: 0.95rem; line-height: 1.6; font-weight: 600;
+      padding-bottom: 28px; border-bottom: 2px solid rgba(124,58,237,0.12); margin-bottom: 28px;
+    }
+    .docs { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; }
+
+    .doc-card {
+      display: flex;
+      background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,248,240,0.8));
+      border: 2px solid transparent; border-radius: 20px;
+      overflow: hidden; position: relative;
+      transition: transform 0.2s, box-shadow 0.2s;
+      backdrop-filter: blur(8px);
+    }
+    .doc-card::before {
+      content: ''; position: absolute; inset: -2px; border-radius: 22px;
+      background: linear-gradient(135deg, var(--accent-violet), var(--accent-teal));
+      z-index: -1; opacity: 0.25; transition: opacity 0.2s;
+    }
+    .doc-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(124,58,237,0.14); }
+    .doc-card:hover::before { opacity: 0.5; }
+
+    .doc-preview {
+      width: 170px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center;
+      padding: 12px; background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(13,148,136,0.04));
+    }
+    .doc-preview img { width: 100%; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
+    .doc-info { padding: 20px 24px; flex: 1; }
+    .doc-info h3 {
+      font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 600;
+      color: var(--text-deep); margin-bottom: 6px;
+    }
+    .doc-details { font-size: 0.83rem; color: var(--text-body); line-height: 1.6; margin-bottom: 14px; }
+    .tag {
+      display: inline-block; padding: 2px 10px; border-radius: 12px;
+      font-size: 0.75rem; font-weight: 700; margin-right: 4px; margin-bottom: 4px;
+    }
+    .tag-pages { background: rgba(124,58,237,0.1); color: var(--accent-violet); border: 1px solid rgba(124,58,237,0.2); }
+    .tag-diff { background: rgba(13,148,136,0.1); color: var(--accent-teal); border: 1px solid rgba(13,148,136,0.2); }
+    .doc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+    .doc-actions a {
+      font-size: 0.72rem; font-weight: 700; text-decoration: none;
+      padding: 4px 12px; border-radius: 8px; transition: all 0.15s;
+      display: inline-flex; align-items: center; gap: 4px;
+    }
+    .btn-preview {
+      color: var(--accent-violet); border: 2px solid rgba(124,58,237,0.25);
+      background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(124,58,237,0.02));
+    }
+    .btn-preview:hover { background: rgba(124,58,237,0.12); border-color: var(--accent-violet); }
+    .btn-pdf {
+      color: var(--accent-teal); border: 1.5px solid rgba(13,148,136,0.3);
+      background: linear-gradient(135deg, rgba(13,148,136,0.06), rgba(13,148,136,0.02));
+    }
+    .btn-pdf:hover { background: rgba(13,148,136,0.15); border-color: var(--accent-teal); }
+    .btn-pdf svg { width: 12px; height: 12px; }
+    .btn-edit {
+      color: var(--accent-orange); border: 1.5px solid rgba(249,115,22,0.3);
+      background: linear-gradient(135deg, rgba(249,115,22,0.06), rgba(249,115,22,0.02));
+      display: none;
+    }
+    .btn-edit:hover { background: rgba(249,115,22,0.15); border-color: var(--accent-orange); }
+    body.editor-mode .btn-edit { display: inline-flex; }
+
+    /* Footer */
+    .site-footer { position: relative; }
+    .planet-footer { height: 140px; overflow: hidden; }
+    .planet-footer img {
+      width: 100%; height: 100%; object-fit: cover;
+      mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
+      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
+    }
+    .footer-bar {
+      position: absolute; bottom: 8px; left: 0; right: 0;
+      text-align: center; z-index: 2;
+    }
+    .editor-toggle {
+      cursor: pointer; user-select: none;
+      color: rgba(255,255,255,0.4); font-size: 0.72rem; font-weight: 600;
+      display: inline-flex; align-items: center; gap: 6px;
+      transition: color 0.2s;
+    }
+    .editor-toggle:hover { color: rgba(255,255,255,0.7); }
+    .editor-toggle input { accent-color: var(--accent-violet); }
+
+    @media (max-width: 640px) {
+      .doc-card { flex-direction: column; }
+      .doc-preview { width: 100%; max-height: 160px; }
+      .page-header img { width: 70px; }
+      .page-header h1 { font-size: 1.5rem; }
+    }
+  </style>
+</head>
+<body>
+
+<div class="page-content">
+  <div class="container">
+    <a class="back-link" href="/tasks/index.html">&larr; All Categories</a>
+
+    <div class="page-header">
+      <img src="/assets/icons/pack3-asteroids/asteroid5.png" alt="">
+      <h1>Split the Asteroid</h1>
+    </div>
+    <p class="header-desc">Break apart asteroids into two unequal pieces! Each section shows an asteroid with a number, and the child must find different ways to split it into two addends. Great for practicing number decomposition.</p>
+
+    <div class="docs">
+
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/tasks/asteroid-splitting/temp/asteroid-splitting-1-page-1.png" alt="Preview"></div>
+        <div class="doc-info">
+          <h3>Asteroid Splitting 1</h3>
+          <div class="doc-details">
+            <span class="tag tag-pages">12 pages</span>
+            <span class="tag tag-diff">Numbers 2&ndash;10</span><br>
+            Split each number into two unequal parts &bull; 3 sections per page &bull; progressive hints
+          </div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/asteroid-splitting/docs/asteroid-splitting-1.output.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/asteroid-splitting-1.pdf" download><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>PDF</a>
+            <a class="btn-edit" href="/tasks/asteroid-splitting/editor.html?file=asteroid-splitting-1">Editor</a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<div class="site-footer">
+  <div class="planet-footer">
+    <img src="/assets/footers/planet5.jpeg" alt="">
+  </div>
+  <div class="footer-bar">
+    <label class="editor-toggle">
+      <input type="checkbox" onchange="document.body.classList.toggle('editor-mode', this.checked)">
+      Unlock editor (local dev only)
+    </label>
+  </div>
+</div>
+
+</body>
+</html>

tasks/asteroid-splitting/scripts/generate.mjs

@@ -0,0 +1,145 @@
+#!/usr/bin/env node
+
+/**
+ * Generate output HTML from template + data for asteroid-splitting documents.
+ *
+ * Usage: node generate.mjs <docId>
+ * Example: node generate.mjs asteroid-splitting-1
+ *
+ * Reads:  docs/<docId>.template.html
+ * Reads:  docs/<docId>.data.json (optional)
+ * Writes: docs/<docId>.output.html
+ *
+ * data.json format:
+ * {
+ *   pages: [{
+ *     page: 1,
+ *     sections: [{ index: 0, scale: 1.2, rotate: 15 }]
+ *   }]
+ * }
+ *
+ * Applies transform to big asteroid img (w-[26mm] container)
+ * and proportionally to small asteroid imgs (w-[12mm] containers) in formula rows.
+ */
+
+import { readFileSync, writeFileSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { postGenerate } from '../../../src/scripts/post-generate.mjs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const docsDir = join(__dirname, '..', 'docs');
+
+const docId = process.argv[2];
+if (!docId) {
+  console.error('Usage: node generate.mjs <docId>');
+  process.exit(1);
+}
+
+const templatePath = join(docsDir, `${docId}.template.html`);
+const dataPath = join(docsDir, `${docId}.data.json`);
+const outputPath = join(docsDir, `${docId}.output.html`);
+
+if (!existsSync(templatePath)) {
+  console.error(`Template not found: ${templatePath}`);
+  process.exit(1);
+}
+
+let html = readFileSync(templatePath, 'utf-8');
+
+if (existsSync(dataPath)) {
+  const data = JSON.parse(readFileSync(dataPath, 'utf-8'));
+  html = applyData(html, data);
+  console.log(`Applied data from ${data.pages?.length || 0} pages`);
+}
+
+writeFileSync(outputPath, html);
+console.log(`Generated: ${outputPath}`);
+await postGenerate(outputPath);
+
+function applyData(html, data) {
+  if (!data.pages) return html;
+
+  // Split HTML into pages by w-[210mm] divs
+  const pageRegex = /<div class="w-\[210mm\] h-\[297mm\]/g;
+  const starts = [];
+  let match;
+  while ((match = pageRegex.exec(html)) !== null) {
+    starts.push(match.index);
+  }
+  if (starts.length === 0) return html;
+
+  // Process pages in reverse to preserve indices
+  for (let i = data.pages.length - 1; i >= 0; i--) {
+    const pageData = data.pages[i];
+    const pageNum = pageData.page || (i + 1);
+    const pageIdx = pageNum - 1;
+    if (pageIdx >= starts.length) continue;
+
+    const pageStart = starts[pageIdx];
+    const pageEnd = pageIdx + 1 < starts.length ? starts[pageIdx + 1] : html.length;
+    let pageHtml = html.slice(pageStart, pageEnd);
+
+    if (pageData.sections) {
+      pageHtml = applySections(pageHtml, pageData.sections);
+    }
+
+    html = html.slice(0, pageStart) + pageHtml + html.slice(pageEnd);
+  }
+
+  return html;
+}
+
+function applySections(pageHtml, sections) {
+  // Find section containers: <!-- Section: N=... -->
+  // Each section has a big asteroid img in .asteroid-glow and small imgs in formula rows
+
+  // Find all asteroid-glow containers (one per section)
+  const sectionBlocks = [];
+  const sectionRegex = /<!-- Section: N=\d+/g;
+  let match;
+  while ((match = sectionRegex.exec(pageHtml)) !== null) {
+    sectionBlocks.push(match.index);
+  }
+
+  // Process sections in reverse
+  for (let i = sections.length - 1; i >= 0; i--) {
+    const secData = sections[i];
+    const secIdx = secData.index;
+    if (secIdx >= sectionBlocks.length) continue;
+
+    const secStart = sectionBlocks[secIdx];
+    const secEnd = secIdx + 1 < sectionBlocks.length
+      ? sectionBlocks[secIdx + 1]
+      : pageHtml.length;
+
+    let secHtml = pageHtml.slice(secStart, secEnd);
+
+    const scale = secData.scale ?? 1;
+    const rotate = secData.rotate ?? 0;
+
+    if (scale !== 1 || rotate !== 0) {
+      const transform = `transform: scale(${scale}) rotate(${rotate}deg);`;
+
+      // Apply to big asteroid img (inside asteroid-glow container)
+      // The img has class="w-full h-full object-contain"
+      // Add style to the img inside asteroid-glow
+      secHtml = secHtml.replace(
+        /(class="w-full h-full object-contain" alt="")(>)(\s*<span class="absolute text-\[2\.2rem\])/,
+        `$1 style="${transform}"$2$3`
+      );
+
+      // Apply to all small asteroid imgs (inside w-[12mm] containers)
+      // These imgs also have class="w-full h-full object-contain"
+      // but are inside relative w-[12mm] divs
+      secHtml = secHtml.replace(
+        /(<div class="relative w-\[12mm\] h-\[12mm\] shrink-0"><img src="[^"]*pack3-asteroids[^"]*" class="w-full h-full object-contain" alt="")>/g,
+        `$1 style="${transform}">`
+      );
+    }
+
+    pageHtml = pageHtml.slice(0, secStart) + secHtml + pageHtml.slice(secEnd);
+  }
+
+  return pageHtml;
+}

tasks/index.html

@@ -204,6 +204,19 @@
           </div>
         </div>
       </a>
+      <a class="cat-card" href="/tasks/asteroid-splitting/">
+        <div class="cat-image">
+          <img src="/assets/icons/pack3-asteroids/asteroid5.png" alt="Asteroid Splitting">
+        </div>
+        <div class="cat-info">
+          <h2>Split the Asteroid</h2>
+          <p class="cat-desc">Break apart asteroids into two unequal pieces! Practice number decomposition by splitting each asteroid's weight into different pairs of addends.</p>
+          <div class="cat-meta">
+            <span class="tag-violet">1 worksheet</span>
+            <span class="tag-teal">Number Splitting</span>
+          </div>
+        </div>
+      </a>
     </div>
   </div>
 </div>