add split asteroids

.claude/settings.local.json

@@ -46,7 +46,8 @@
       "Bash(mv freighter-mining1.png freighter11.png)",
       "Bash(mv freighter-science1.png freighter12.png)",
       "Bash(sort -t'\\(' -k2 -n)",
-      "Bash(grep -o 'scale\\(3.50\\).\\\\{0,200\\\\}')"
+      "Bash(grep -o 'scale\\(3.50\\).\\\\{0,200\\\\}')",
+      "Bash(python3 -c ':*)"
     ]
   }
 }

CLAUDE.md

@@ -133,13 +133,26 @@ cat tasks/{type}/temp/{docId}.diff.json           # see what changed
 # Read screenshot PNGs from tasks/{type}/temp/{docId}-page-{N}.png to verify visually
 ```
 
-## Index Page
+## Preview Pages Structure
 
-`tasks/index.html` — Claude updates manually when creating new documents. Each document has View and Edit links. Different task types can have different card styles.
+Three-level navigation hierarchy, maintained manually by Claude:
+
+```
+tasks/index.html                    — main index (all categories)
+  → tasks/{type}/index.html         — category page (all documents of this type)
+    → tasks/{type}/docs/{docId}.*   — individual document files
+```
+
+**Main index** (`tasks/index.html`) — lists all task types as cards. Each card links to the category page (`/tasks/{type}/`).
+
+**Category page** (`tasks/{type}/index.html`) — lists all documents within this type. Contains View/PDF/Editor links per document. Back link to main index. Has "editor mode" toggle for dev-only features.
+
+**When creating a new task type:** create both the main index card AND the category `index.html`.
+**When creating a new document:** add a doc-card to the category `index.html`.
 
 **Preview:** `http://localhost:3300/tasks/index.html`
 
-The `frontend-design` skill is installed but applies **only to `tasks/index.html`** and other UI/navigation pages. Worksheet documents (`*.template.html`) are print/PDF layouts, not web pages — web design principles do not apply to them.
+The `frontend-design` skill is installed but applies **only to `tasks/index.html`**, category pages, and other UI/navigation pages. Worksheet documents (`*.template.html`) are print/PDF layouts, not web pages — web design principles do not apply to them.
 
 ## Script Principles (Orchestrator Pattern)
 
@@ -187,6 +200,7 @@ Use `chrome-devtools-mcp` tools (`navigate_page`, `take_screenshot`) to check pa
 - Checking editor functionality (drag, keyboard, save)
 - Verifying hover/click states
 - Inspecting specific elements
+- **Verifying all links and navigation** after creating new task types or documents
 
 ### When to verify
 
@@ -196,6 +210,36 @@ Use `chrome-devtools-mcp` tools (`navigate_page`, `take_screenshot`) to check pa
 - **After modifying asset paths or server config** — check all types
 - **Do not ask the user to verify** what you can check yourself via screenshots
 
+### Post-creation link verification (MANDATORY)
+
+After creating a new task type or new document, use chrome-devtools MCP to verify the full navigation chain:
+
+1. Navigate to the main index (`/tasks/index.html`) — verify the new card renders and its link works
+2. Click through to the category page (`/tasks/{type}/`) — verify it loads and lists all documents
+3. Click through to each document link — verify View/Editor links work
+4. If any link is broken or page fails to load — fix the issue immediately and re-verify in Chrome that the fix works
+
+**Do not consider the task complete until all links are verified in the live browser.**
+
+### Editor end-to-end verification (MANDATORY)
+
+**After creating or modifying any editor**, verify the FULL save cycle in Chrome DevTools before telling the user it works:
+
+1. Open the editor in the browser (`editor.html?file=...`)
+2. Make a real change (click element, press keyboard shortcut)
+3. Click Save (or call save programmatically)
+4. **Wait for save to complete** (check server response)
+5. **Read the saved `data.json` file** — verify it contains the changed values (NOT defaults)
+6. **Run `generate.mjs`** and verify transforms appear in `output.html`
+7. **Reload the editor page** — verify saved state is restored from `data.json`
+
+If ANY step fails, the editor is broken — fix it before presenting to the user. Never tell the user "editor works" based on visual-only checks without verifying the saved data file.
+
+**Common editor pitfalls:**
+- Live-reload can reset editor state after save (fix: load data.json on init to restore)
+- ES module imports may not work with `window`-exported globals (fix: use `<script src>` not `import`)
+- Serializer must read actual modified state, not initial defaults
+
 ## HTML Generation Guidelines
 
 - **OUTPUT MUST BE STATIC HTML.** Template files must contain only static markup — no embedded `<script>` that computes, generates, or modifies content at runtime. Tailwind CDN `<script>` tag is the only exception.

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>