fix: editor

.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

@@ -127,19 +127,102 @@ http://localhost:3300/tasks/{type}/editor.html?file={docId}
 4. Server computes diff → writes `temp/{docId}.diff.json`
 5. Server runs `generate.mjs` → regenerates output.html + screenshots
 
+**Browser-sync reload protection:** Editor pages are not reloaded when `output.html` changes (removed from watch list). The server also deduplicates rapid-fire save requests (browser-sync quirk: may relay POSTs twice).
+
 **Claude reviewing editor changes:**
 ```bash
 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
+### Building a New Editor
 
-`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.
+Reference implementation: `tasks/asteroid-splitting/editor.html` (simplest, cleanest pattern).
+
+**1. HTML scaffold** — copy toolbar/statusbar/container from asteroid-splitting editor:
+- `#toolbar` with btn-prev, btn-next, btn-reset, btn-copy, btn-copy-changes, btn-save
+- `#worksheet-container` (EditorCore fills this)
+- `#statusbar`, `#toast`, `#coord-tooltip`
+- CSS for `.editor-selected`, `.editor-changed`, toolbar, page labels
+
+**2. Load editor-core.js:**
+```html
+<script src="../../src/editor/editor-core.js"></script>
+```
+
+**3. Initialize EditorCore** (wrap everything in IIFE):
+```javascript
+(function() {
+  'use strict';
+  const core = EditorCore.init({
+    taskType: 'your-type-name',
+    serialize: buildConfig,        // required: (changesOnly) => data object
+    onReset: resetCurrentPage,     // optional: (pageNum) => void
+    onReady(pages, mmToPx) {       // setup DOM refs, event handlers
+      findElements(pages);
+      setupClickHandlers();
+      setupKeyboard();
+    },
+    onDataLoaded(data) {           // apply saved data.json to DOM
+      if (data) applyData(data);
+    }
+  });
+  // ... function implementations
+})();
+```
+
+**4. State management pattern:**
+- Store original element state in a `Map` on init (for change detection + reset)
+- Track in-memory references to editable elements in arrays
+- Read current state from DOM when serializing
+- Use `markChanged(el)` to toggle `.editor-changed` class by comparing to original
+
+**5. Serialization:**
+- `buildConfig(changesOnly)` returns `{ pages: [{ page: N, ...task-specific fields }] }`
+- When `changesOnly=true`, skip elements matching original state
+- EditorCore calls this for Save and Copy
+
+**6. Do NOT:**
+- Use synchronous XHR (use EditorCore's async save)
+- Bypass EditorCore's save (no manual fetch to `/api/save-edits`)
+- Add duplicate event listeners for Save/Copy buttons (core wires them)
+- Use `var` (use `const`/`let`)
+- Store state only in DOM without in-memory backup
+
+**7. Element identification in templates:**
+- For complex/reorderable elements: use `data-*` attributes (see space-route `data-node-id`)
+- For simple sequential elements: index-based matching is fine
+- Match the strategy in your `generate.mjs`
+
+**8. Mandatory e2e verification** (use Chrome DevTools MCP):
+1. Open editor → verify worksheet loads and sections are found
+2. Click element → verify selection highlight and status info
+3. Modify via keyboard → verify DOM and info update
+4. Click Save → verify toast "Saved!" and no page reload
+5. Read `data.json` → verify saved values match editor state
+6. Run `generate.mjs` → verify transforms in `output.html`
+7. Reload editor → verify saved state restored via `onDataLoaded`
+
+## Preview Pages Structure
+
+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 +270,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 +280,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.

bs-config.cjs

@@ -2,6 +2,9 @@ const fs = require('fs');
 const path = require('path');
 const { execFile } = require('child_process');
 
+// Deduplicate rapid-fire save requests (browser-sync may relay POSTs twice)
+const _lastSave = {};
+
 module.exports = {
   server: {
     baseDir: "."
@@ -10,7 +13,7 @@ module.exports = {
     "tasks/index.html",
     "tasks/*/index.html",
     "tasks/*/docs/*.template.html",
-    "tasks/*/docs/*.output.html",
+    // output.html excluded: generated by save flow, reload would wipe editor state
     "tasks/*/editor.html",
     "assets/**/*",
     "public/**/*"
@@ -48,6 +51,17 @@ module.exports = {
               return;
             }
 
+            // Deduplicate: skip if same docId saved within 500ms
+            const saveKey = `${taskType}/${docId}`;
+            const now = Date.now();
+            if (_lastSave[saveKey] && now - _lastSave[saveKey].time < 500) {
+              console.log(`[save] dedup skip ${saveKey} (${now - _lastSave[saveKey].time}ms since last)`);
+              res.writeHead(200, { 'Content-Type': 'application/json' });
+              res.end(JSON.stringify({ ok: true, dedup: true }));
+              return;
+            }
+            _lastSave[saveKey] = { time: now, body: body.length };
+
             const docsDir = path.join(__dirname, 'tasks', taskType, 'docs');
             const tempDir = path.join(__dirname, 'tasks', taskType, 'temp');
             fs.mkdirSync(tempDir, { recursive: true });

src/editor/editor-core.js

@@ -59,8 +59,8 @@ window.EditorCore = (function () {
       _wireButton('btn-reset', () => opts.onReset(_currentPage + 1));
     }
 
-    // Load worksheet
+    // Load worksheet, then optionally load data.json
-    _loadWorksheet(_config.filePath, opts.onReady);
+    _loadWorksheet(_config.filePath, opts.onReady, opts.onDataLoaded);
 
     return {
       get pages() { return _pages; },
@@ -72,12 +72,13 @@ window.EditorCore = (function () {
       showTooltip,
       hideTooltip,
       setSerializer: (fn) => { _serializeFn = fn; },
+      loadData: () => _loadDataJson(_config.fileParam),
     };
   }
 
   // ---- Worksheet Loading ----
 
-  function _loadWorksheet(filePath, onReady) {
+  function _loadWorksheet(filePath, onReady, onDataLoaded) {
     fetch(filePath)
       .then(r => { if (!r.ok) throw new Error(r.status); return r.text(); })
       .then(html => {
@@ -111,6 +112,12 @@ window.EditorCore = (function () {
         setTimeout(() => {
           _initPages();
           if (onReady) onReady(_pages, _mmToPx);
+          // Load data.json after onReady so DOM references are set up
+          if (onDataLoaded) {
+            _loadDataJson(_config.fileParam).then(data => {
+              onDataLoaded(data, _pages, _mmToPx);
+            });
+          }
         }, 350);
       })
       .catch(err => {
@@ -119,6 +126,16 @@ window.EditorCore = (function () {
       });
   }
 
+  async function _loadDataJson(docId) {
+    try {
+      const resp = await fetch('docs/' + docId + '.data.json');
+      if (!resp.ok) return null;
+      return await resp.json();
+    } catch (e) {
+      return null;
+    }
+  }
+
   // ---- Pages ----
 
   function _initPages() {

src/scripts/generate-pdf.mjs

@@ -1,9 +1,20 @@
 import puppeteer from 'puppeteer';
-import { resolve, basename } from 'path';
+import { resolve, basename, dirname } from 'path';
 import { existsSync, mkdirSync } from 'fs';
 import { fileURLToPath } from 'url';
+import { createServer } from 'http';
+import { readFile } from 'fs/promises';
+import { extname } from 'path';
 
-const OUTPUT_DIR = resolve(fileURLToPath(import.meta.url), '../../../output/pdf');
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PROJECT_ROOT = resolve(__dirname, '../..');
+const OUTPUT_DIR = resolve(PROJECT_ROOT, 'output/pdf');
+
+const MIME_TYPES = {
+  '.html': 'text/html', '.css': 'text/css', '.js': 'application/javascript',
+  '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
+  '.webp': 'image/webp', '.svg': 'image/svg+xml', '.json': 'application/json',
+};
 
 async function generatePdf(htmlPath) {
   const absolutePath = resolve(htmlPath);
@@ -14,13 +25,33 @@ async function generatePdf(htmlPath) {
 
   mkdirSync(OUTPUT_DIR, { recursive: true });
 
-  const pdfName = basename(absolutePath, '.html') + '.pdf';
+  // Strip .output and .template from PDF filename
+  let pdfName = basename(absolutePath, '.html');
+  pdfName = pdfName.replace(/\.(output|template)$/, '') + '.pdf';
   const pdfPath = resolve(OUTPUT_DIR, pdfName);
 
-  const browser = await puppeteer.launch({ headless: true });
+  // Start temp HTTP server to resolve /assets/ paths correctly
+  const server = createServer(async (req, res) => {
+    const filePath = resolve(PROJECT_ROOT, decodeURIComponent(req.url).replace(/^\//, ''));
+    try {
+      const data = await readFile(filePath);
+      const ext = extname(filePath);
+      res.writeHead(200, { 'Content-Type': MIME_TYPES[ext] || 'application/octet-stream' });
+      res.end(data);
+    } catch {
+      res.writeHead(404);
+      res.end('Not found');
+    }
+  });
+
+  await new Promise(r => server.listen(0, '127.0.0.1', r));
+  const port = server.address().port;
+  const relPath = absolutePath.replace(PROJECT_ROOT + '/', '');
+
+  const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox'] });
   const page = await browser.newPage();
 
-  await page.goto(`file://${absolutePath}`, { waitUntil: 'networkidle0' });
+  await page.goto(`http://127.0.0.1:${port}/${relPath}`, { waitUntil: 'networkidle0', timeout: 30000 });
 
   await page.pdf({
     path: pdfPath,
@@ -31,6 +62,7 @@ async function generatePdf(htmlPath) {
   });
 
   await browser.close();
+  server.close();
   console.log(`PDF generated: ${pdfPath}`);
   return pdfPath;
 }

tasks/asteroid-splitting/CLAUDE.md

@@ -0,0 +1,133 @@
+# 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) and `.data.json` (via `onDataLoaded`)
+- On load, applies saved transforms to DOM (`img.style.transform`)
+- Original transforms stored in Map for change detection and reset
+- On Save, serializes transforms from DOM → async POST via EditorCore → server writes `.data.json`
+- `generate.mjs` reads `.data.json`, applies `style="transform: ..."` to img elements in `.output.html`
+
+This editor serves as the **reference implementation** for building new task-type editors (see root CLAUDE.md "Building a New Editor").

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.2,
+          "rotate": 10
+        },
+        {
+          "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": 2,
+          "rotate": 30
+        },
+        {
+          "index": 2,
+          "scale": 1,
+          "rotate": 0
+        }
+      ]
+    },
+    {
+      "page": 9,
+      "sections": [
+        {
+          "index": 0,
+          "scale": 2,
+          "rotate": 30
+        },
+        {
+          "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,302 @@
+<!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; }
+    #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 { position: relative; }
+    .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-reset">Reset Page</button>
+  <button id="btn-copy" class="primary">Copy JSON</button>
+  <button id="btn-copy-changes" class="primary">Copy Changes</button>
+  <button id="btn-save" class="save">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>
+(function() {
+  'use strict';
+
+  const sectionEls = [];              // [{container, bigImg, smallImgs, pageNum, secIndex}]
+  const originalTransforms = new Map(); // "pageNum-secIndex" → {scale, rotate}
+  let selected = null;
+
+  // --- Transform helpers ---
+
+  function parseTransform(img) {
+    const t = img.style.transform || '';
+    const sm = t.match(/scale\(([\d.]+)\)/);
+    const rm = t.match(/rotate\(([-\d.]+)deg\)/);
+    return {
+      scale: sm ? parseFloat(sm[1]) : 1,
+      rotate: rm ? parseFloat(rm[1]) : 0
+    };
+  }
+
+  function setTransform(img, scale, rotate) {
+    if (scale === 1 && rotate === 0) {
+      img.style.transform = '';
+    } else {
+      img.style.transform = 'scale(' + scale + ') rotate(' + rotate + 'deg)';
+    }
+  }
+
+  function secKey(sec) {
+    return sec.pageNum + '-' + sec.secIndex;
+  }
+
+  // --- Find all sections in loaded pages ---
+
+  function findSections(pages) {
+    sectionEls.length = 0;
+    pages.forEach(function(page, pi) {
+      const glows = page.querySelectorAll('.asteroid-glow');
+      glows.forEach(function(container, si) {
+        const bigImg = container.querySelector('img');
+        // Walk up to find the section row containing formula small imgs
+        let sectionRow = container.parentElement;
+        while (sectionRow && !sectionRow.classList.contains('gap-[8mm]')) {
+          sectionRow = sectionRow.parentElement;
+        }
+        if (!sectionRow) sectionRow = container.parentElement;
+
+        const allImgs = sectionRow.querySelectorAll('img[src*="pack3-asteroids"]');
+        const smallImgs = [];
+        allImgs.forEach(function(img) { if (img !== bigImg) smallImgs.push(img); });
+
+        const sec = { container, bigImg, smallImgs, pageNum: pi + 1, secIndex: si };
+        sectionEls.push(sec);
+
+        // Store original transform (from template, before data.json applied)
+        originalTransforms.set(secKey(sec), { scale: 1, rotate: 0 });
+
+        container.style.cursor = 'pointer';
+        container.addEventListener('click', function(e) {
+          e.stopPropagation();
+          selectSection(sec);
+        });
+      });
+    });
+
+    document.getElementById('status-text').textContent =
+      sectionEls.length + ' sections. Keys: +/- scale \u2022 [/] rotate (Shift=fine) \u2022 0 reset';
+    document.getElementById('selection-info').textContent = 'Click a big asteroid to select';
+  }
+
+  // --- Selection ---
+
+  function selectSection(sec) {
+    deselectAll();
+    selected = sec;
+    sec.container.classList.add('editor-selected');
+    updateInfo();
+  }
+
+  function deselectAll() {
+    if (selected) {
+      selected.container.classList.remove('editor-selected');
+      selected = null;
+    }
+    updateInfo();
+  }
+
+  function updateInfo() {
+    const el = document.getElementById('selection-info');
+    if (!selected) { el.textContent = 'Click a big asteroid to select'; return; }
+    const t = parseTransform(selected.bigImg);
+    el.textContent = 'Page ' + selected.pageNum + ' Sec ' + (selected.secIndex + 1) +
+      ' \u2014 scale: ' + t.scale.toFixed(2) + ' rotate: ' + t.rotate.toFixed(1) + '\u00B0';
+  }
+
+  // --- Apply transform to section (big + small imgs) ---
+
+  function applyToSection(sec, scale, rotate) {
+    setTransform(sec.bigImg, scale, rotate);
+    sec.smallImgs.forEach(function(img) { setTransform(img, scale, rotate); });
+    markChanged(sec);
+    updateInfo();
+  }
+
+  // --- Change tracking ---
+
+  function markChanged(sec) {
+    const orig = originalTransforms.get(secKey(sec));
+    const cur = parseTransform(sec.bigImg);
+    const changed = Math.abs(cur.scale - orig.scale) > 0.001 || Math.abs(cur.rotate - orig.rotate) > 0.1;
+    sec.container.classList.toggle('editor-changed', changed);
+  }
+
+  // --- Apply data.json to DOM (called by EditorCore.onDataLoaded) ---
+
+  function applyData(data) {
+    if (!data || !data.pages) return;
+    let count = 0;
+    data.pages.forEach(function(p) {
+      (p.sections || []).forEach(function(s) {
+        const sec = sectionEls.find(function(el) {
+          return el.pageNum === p.page && el.secIndex === s.index;
+        });
+        if (sec) {
+          const scale = s.scale ?? 1;
+          const rotate = s.rotate ?? 0;
+          applyToSection(sec, scale, rotate);
+          // After applying saved data, update originals so "changed" is relative to saved state
+          originalTransforms.set(secKey(sec), { scale, rotate });
+          sec.container.classList.remove('editor-changed');
+          count++;
+        }
+      });
+    });
+    if (count > 0) core.showToast('Loaded ' + count + ' edits');
+  }
+
+  // --- Serialization ---
+
+  function buildConfig(changesOnly) {
+    const pagesMap = {};
+    sectionEls.forEach(function(sec) {
+      const cur = parseTransform(sec.bigImg);
+      const orig = originalTransforms.get(secKey(sec));
+
+      if (changesOnly) {
+        const changed = Math.abs(cur.scale - orig.scale) > 0.001 || Math.abs(cur.rotate - orig.rotate) > 0.1;
+        if (!changed) return;
+      }
+
+      if (!pagesMap[sec.pageNum]) pagesMap[sec.pageNum] = { page: sec.pageNum, sections: [] };
+      pagesMap[sec.pageNum].sections.push({
+        index: sec.secIndex,
+        scale: +cur.scale.toFixed(3),
+        rotate: +cur.rotate.toFixed(1)
+      });
+    });
+    return { pages: Object.values(pagesMap) };
+  }
+
+  // --- Reset ---
+
+  function resetCurrentPage(pageNum) {
+    sectionEls.forEach(function(sec) {
+      if (sec.pageNum !== pageNum) return;
+      const orig = originalTransforms.get(secKey(sec));
+      applyToSection(sec, orig.scale, orig.rotate);
+      sec.container.classList.remove('editor-changed');
+    });
+    if (selected && selected.pageNum === pageNum) updateInfo();
+  }
+
+  // --- Keyboard ---
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') { deselectAll(); return; }
+    if (!selected) return;
+
+    const t = parseTransform(selected.bigImg);
+    const step = e.shiftKey ? 0.01 : 0.05;
+    const 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).toFixed(1));
+        e.preventDefault(); break;
+      case ']':
+        applyToSection(selected, t.scale, +(t.rotate + rotStep).toFixed(1));
+        e.preventDefault(); break;
+      case '0':
+        applyToSection(selected, 1, 0);
+        e.preventDefault(); break;
+    }
+  });
+
+  document.addEventListener('click', function(e) {
+    if (selected && !e.target.closest('.asteroid-glow')) {
+      deselectAll();
+    }
+  });
+
+  // --- Init via EditorCore ---
+
+  const core = EditorCore.init({
+    taskType: 'asteroid-splitting',
+    serialize: buildConfig,
+    onReset: resetCurrentPage,
+    onReady: function(pages) {
+      findSections(pages);
+    },
+    onDataLoaded: function(data) {
+      if (data) applyData(data);
+    }
+  });
+})();
+</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>