feat: update homepage

.claude/skills/frontend-design

@@ -0,0 +1 @@
+/home/usulpro/.agents/skills/frontend-design

.claude/skills/web-design-guidelines

@@ -0,0 +1 @@
+../../.agents/skills/web-design-guidelines

.gitignore

@@ -1,10 +1,13 @@
 node_modules/
-output/
+output/css/
 .env
 !.claude/settings.local.json
 
-# Generated output HTML (template + data → output)
+# Generated output HTML (template + data -> output)
 tasks/*/docs/*.output.html
 
-# Editor temp files (diffs, transient data)
+# Editor temp files (diffs, screenshots, transient data)
 tasks/*/temp/
+
+# PDFs are committed (available for download)
+# output/pdf/ is NOT gitignored

.goose/skills/web-design-guidelines

@@ -0,0 +1 @@
+../../.agents/skills/web-design-guidelines

.kiro/skills/web-design-guidelines

@@ -0,0 +1 @@
+../../.agents/skills/web-design-guidelines

CLAUDE.md

@@ -101,12 +101,15 @@ When the user asks to create a new document of an existing type:
 ## Generation Pipeline
 
 ```
-.template.html + .data.json (if exists) → scripts/generate.mjs → .output.html
+.template.html + .data.json (if exists) → scripts/generate.mjs → .output.html + screenshots
 ```
 
 - Same pipeline for both Claude-initiated regeneration and editor-save flow
 - If no `.data.json` exists → template.html copied as-is to output.html
-- `generate.mjs` is a per-task-type script, not a global one
+- `generate.mjs` is a per-task-type script; it calls `postGenerate()` from `src/scripts/post-generate.mjs` at the end
+- `postGenerate()` runs `src/scripts/take-screenshots.mjs` which produces per-page PNG screenshots in `tasks/{type}/temp/{docId}-page-{N}.png`
+- Screenshots are automatically regenerated on every generate — old ones are deleted before new ones are written
+- **All new task types must include `postGenerate()` call in their `generate.mjs`** — this is part of the standard pipeline
 
 ## Editor System
 
@@ -122,11 +125,12 @@ http://localhost:3300/tasks/{type}/editor.html?file={docId}
 2. Editor POST `/api/save-edits` with `{ taskType, docId, data }`
 3. Server writes `docs/{docId}.data.json`
 4. Server computes diff → writes `temp/{docId}.diff.json`
-5. Server runs `generate.mjs` to regenerate output.html
+5. Server runs `generate.mjs` → regenerates output.html + screenshots
 
 **Claude reviewing editor changes:**
 ```bash
-cat tasks/{type}/temp/{docId}.diff.json
+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
@@ -135,6 +139,8 @@ cat tasks/{type}/temp/{docId}.diff.json
 
 **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.
+
 ## Script Principles (Orchestrator Pattern)
 
 Claude Code is the central orchestrator. Scripts are tools for Claude, not autonomous actors.
@@ -146,8 +152,9 @@ Claude Code is the central orchestrator. Scripts are tools for Claude, not auton
 - Claude runs a script, reads its output, decides what to do next
 
 **Allowed write exceptions:**
-- `generate.mjs` — writes `.output.html` (template+data→output, deterministic)
+- `generate.mjs` — writes `.output.html` + screenshots via `postGenerate()` (template+data→output, deterministic)
 - `generate-pdf.mjs` — writes PDF (final artifact)
+- `take-screenshots.mjs` — writes page PNGs to `temp/` (called by `postGenerate`, part of generate pipeline)
 - `/api/save-edits` — writes `.data.json` + `.diff.json` + runs `generate.mjs` (user-initiated from editor UI)
 
 **Example of correct flow:**
@@ -166,6 +173,29 @@ During sessions, when the user gives feedback or instructions specific to a task
 If confirmed → write to `tasks/{type}/CLAUDE.md`.
 General rules that apply to all types → root CLAUDE.md (this file).
 
+## Visual Verification
+
+**MANDATORY for:** refactoring, new features, new task types, new documents, any significant changes to templates or generation logic.
+
+### Automatic screenshots (passive)
+
+Every `generate.mjs` run produces per-page screenshots in `tasks/{type}/temp/{docId}-page-{N}.png`. These are always up-to-date — read them with the Read tool to verify results without asking the user.
+
+### Chrome DevTools MCP (interactive)
+
+Use `chrome-devtools-mcp` tools (`navigate_page`, `take_screenshot`) to check pages in the live browser when the dev server is running. This is useful for:
+- Checking editor functionality (drag, keyboard, save)
+- Verifying hover/click states
+- Inspecting specific elements
+
+### When to verify
+
+- **After generating a new document** — read at least page 1 screenshot to confirm images load and layout is correct
+- **After refactoring** — check all affected task types
+- **After editing template.html** — regenerate and check screenshots
+- **After modifying asset paths or server config** — check all types
+- **Do not ask the user to verify** what you can check yourself via screenshots
+
 ## 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

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const { execFile } = require('child_process');
 
 module.exports = {
   server: {
@@ -7,16 +8,29 @@ module.exports = {
   },
   files: [
     "tasks/index.html",
+    "tasks/*/index.html",
     "tasks/*/docs/*.template.html",
     "tasks/*/docs/*.output.html",
     "tasks/*/editor.html",
-    "assets/**/*"
+    "assets/**/*",
+    "public/**/*"
   ],
   port: 3300,
   open: false,
   notify: false,
   ui: false,
   middleware: [
+    {
+      route: "/",
+      handle: function (req, res, next) {
+        if (req.url === '/' || req.url === '') {
+          res.writeHead(302, { 'Location': '/tasks/index.html' });
+          res.end();
+          return;
+        }
+        next();
+      }
+    },
     {
       route: "/api/save-edits",
       handle: function (req, res, next) {
@@ -56,6 +70,15 @@ module.exports = {
             const diff = computeDiff(oldData, data, docId);
             fs.writeFileSync(diffPath, JSON.stringify(diff, null, 2));
 
+            // Run generate.mjs → output.html + screenshots (async, don't block response)
+            const generateScript = path.join(__dirname, 'tasks', taskType, 'scripts', 'generate.mjs');
+            if (fs.existsSync(generateScript)) {
+              execFile('node', [generateScript, docId], { timeout: 60000 }, (err, stdout, stderr) => {
+                if (err) console.error(`[generate] ${taskType}/${docId} failed:`, stderr || err.message);
+                else console.log(`[generate] ${stdout.trim()}`);
+              });
+            }
+
             res.writeHead(200, { 'Content-Type': 'application/json' });
             res.end(JSON.stringify({ ok: true, path: dataPath }));
           } catch (e) {

output/index.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Math Tasks — Документы</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'Nunito', sans-serif;
+      background: #f5f3ff;
+      color: #1e1b4b;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 60px 24px;
+    }
+    h1 {
+      font-size: 2rem;
+      font-weight: 700;
+      margin-bottom: 8px;
+    }
+    .subtitle {
+      color: #6366f1;
+      font-size: 1.05rem;
+      margin-bottom: 48px;
+    }
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 16px;
+      width: 100%;
+      max-width: 720px;
+    }
+    .card {
+      display: block;
+      background: white;
+      border: 1px solid #e0e7ff;
+      border-radius: 12px;
+      padding: 20px 24px;
+      text-decoration: none;
+      color: #1e1b4b;
+      transition: box-shadow 0.15s, border-color 0.15s;
+    }
+    .card:hover {
+      border-color: #a5b4fc;
+      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
+    }
+    .card-title {
+      font-weight: 600;
+      font-size: 1.1rem;
+      margin-bottom: 4px;
+    }
+    .card-path {
+      font-size: 0.82rem;
+      color: #6366f1;
+      opacity: 0.7;
+    }
+  </style>
+</head>
+<body>
+  <h1>Math Tasks</h1>
+  <p class="subtitle">Документы для предпросмотра</p>
+  <div class="cards">
+    <a class="card" href="html/space-demo.html">
+      <div class="card-title">Space Demo</div>
+      <div class="card-path">html/space-demo.html</div>
+    </a>
+    <a class="card" href="html/space-worksheet.html">
+      <div class="card-title">Space Worksheet</div>
+      <div class="card-path">html/space-worksheet.html</div>
+    </a>
+    <a class="card" href="html/space-worksheet2.html">
+      <div class="card-title">Space Worksheet 2</div>
+      <div class="card-path">html/space-worksheet2.html</div>
+    </a>
+    <a class="card" href="html/space-worksheet3.html">
+      <div class="card-title">Space Worksheet 3 (9 pages)</div>
+      <div class="card-path">html/space-worksheet3.html</div>
+    </a>
+    <a class="card" href="html/test.html">
+      <div class="card-title">Test</div>
+      <div class="card-path">html/test.html</div>
+    </a>
+    <a class="card" href="html/collecting-asteroids-1.html">
+      <div class="card-title">Собери Астероиды</div>
+      <div class="card-path">html/collecting-asteroids-1.html</div>
+    </a>
+    <a class="card" href="html/collecting-asteroids-2.html">
+      <div class="card-title">Собери Астероиды v2</div>
+      <div class="card-path">html/collecting-asteroids-2.html</div>
+    </a>
+    <a class="card" href="html/collecting-asteroids-3.html">
+      <div class="card-title">Собери Астероиды v3</div>
+      <div class="card-path">html/collecting-asteroids-3.html</div>
+    </a>
+    <a class="card" href="html/space-route-1.html">
+      <div class="card-title">Проложи Маршрут</div>
+      <div class="card-path">html/space-route-1.html</div>
+    </a>
+    <a class="card" href="html/space-route-editor.html" style="border-color: #6366f1; background: #f5f3ff;">
+      <div class="card-title">Editor: Проложи Маршрут</div>
+      <div class="card-path">Resize, rotate, flip, move objects + route HL</div>
+    </a>
+    <a class="card" href="html/editor.html?file=collecting-asteroids-3.html" style="border-color: #6366f1; background: #f5f3ff;">
+      <div class="card-title">Editor: Собери Астероиды v3</div>
+      <div class="card-path">Drag & drop asteroid positions</div>
+    </a>
+    <a class="card" href="html/editor.html?file=collecting-asteroids-1.html" style="border-color: #6366f1; background: #f5f3ff;">
+      <div class="card-title">Editor: Собери Астероиды</div>
+      <div class="card-path">Drag & drop asteroid positions</div>
+    </a>
+  </div>
+</body>
+</html>

skills-lock.json

@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "skills": {
+    "web-design-guidelines": {
+      "source": "vercel-labs/agent-skills",
+      "sourceType": "github",
+      "computedHash": "f3bc47f890f42a44db1007ab390709ec368e4b8c089baee6b0007182236ac474"
+    }
+  }
+}

src/examples/space-worksheet.html

@@ -1,537 +0,0 @@
-<!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; }
-  </style>
-</head>
-<body class="bg-gray-200 font-nunito">
-
-  <!-- PAGE 1: A + B ± C (A:8-16, B:4-8, C:±1-3) — hero right, spaceship2, planet3 -->
-  <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-[80mm] z-0">
-      <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet3.jpeg" class="w-full h-full object-cover object-top" alt="">
-    </div>
-
-    <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
-      <div style="background: rgba(255,255,255,0.85);" class="rounded-full px-6 py-1.5 border-[1.5px] border-indigo-200 shadow-md">
-        <span class="text-[0.95rem] font-bold text-indigo-950">Итого собрано на планете: <span class="inline-block w-14 border-b-2 border-indigo-400 text-center ml-1">&nbsp;</span></span>
-      </div>
-    </div>
-
-    <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
-
-      <div class="flex items-center gap-4 mb-4 flex-row-reverse">
-        <img src="../../assets/hero-images/spaceship2.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
-        <div class="flex-1 flex flex-col items-center justify-center text-center">
-          <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
-          <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-2 gap-x-3 gap-y-[8px] flex-1 content-start">
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 7 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 5 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants5-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals3-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 4 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals2-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 + 8 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 5 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants6-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">10 + 7 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals3-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 + 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 + 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants6-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 8 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-2-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 5 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants5-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 7 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 + 6 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-2-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 8 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">10 + 5 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 + 7 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 + 4 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 6 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals2-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 8 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </div>
-
-  <!-- PAGE 2: 5 × N ± C (N:1-5, C:-3..+6) — hero left, spaceship4, planet5 -->
-  <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-[80mm] z-0">
-      <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet5.jpeg" class="w-full h-full object-cover object-top" alt="">
-    </div>
-
-    <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
-      <div style="background: rgba(255,255,255,0.85);" class="rounded-full px-6 py-1.5 border-[1.5px] border-indigo-200 shadow-md">
-        <span class="text-[0.95rem] font-bold text-indigo-950">Итого собрано на планете: <span class="inline-block w-14 border-b-2 border-indigo-400 text-center ml-1">&nbsp;</span></span>
-      </div>
-    </div>
-
-    <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
-
-      <div class="flex items-center gap-4 mb-4">
-        <img src="../../assets/hero-images/spaceship4.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
-        <div class="flex-1 flex flex-col items-center justify-center text-center">
-          <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
-          <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-2 gap-x-3 gap-y-[8px] flex-1 content-start">
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals1-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants2-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals6-1-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants2-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals1-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals1-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals6-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants2-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals3-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals2-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </div>
-
-  <!-- PAGE 3: A × B ± C (A,B:1-4, C:-4..+8) — hero right, spaceship6, planet1 -->
-  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
-
-    <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
-      <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet1.jpeg" class="w-full h-full object-cover object-top" alt="">
-    </div>
-
-    <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
-      <div style="background: rgba(255,255,255,0.85);" class="rounded-full px-6 py-1.5 border-[1.5px] border-indigo-200 shadow-md">
-        <span class="text-[0.95rem] font-bold text-indigo-950">Итого собрано на планете: <span class="inline-block w-14 border-b-2 border-indigo-400 text-center ml-1">&nbsp;</span></span>
-      </div>
-    </div>
-
-    <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
-
-      <div class="flex items-center gap-4 mb-4 flex-row-reverse">
-        <img src="../../assets/hero-images/spaceship6.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
-        <div class="flex-1 flex flex-col items-center justify-center text-center">
-          <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
-          <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-2 gap-x-3 gap-y-[8px] flex-1 content-start">
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants6-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 4 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals6-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 4 + 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants6-1-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals2-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 2 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals1-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants5-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 4 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants2-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 3 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-0-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-1-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 2 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 2 + 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 4 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals3-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 1 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals6-0-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants5-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 1 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 4 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-start py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-2-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 3 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-end py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 4 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-        <div class="flex justify-center py-[3px]">
-          <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
-            <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </div>
-
-</body>
-</html>

src/examples/space-worksheet2.html

@@ -1,659 +0,0 @@
-<!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; }
-  </style>
-</head>
-<body class="bg-gray-200 font-nunito">
-
-  <!-- PAGE 1: A + B + C (A:12-24, B:±6-10, C:±2-5, result 0-40) — hero right, spaceship1, planet2 -->
-  <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-[80mm] z-0">
-      <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet2.jpeg" class="w-full h-full object-cover object-top" alt="">
-    </div>
-
-    <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
-      <div style="background: rgba(255,255,255,0.85);" class="rounded-full px-6 py-1.5 border-[1.5px] border-indigo-200 shadow-md">
-        <span class="text-[0.95rem] font-bold text-indigo-950">Итого собрано на планете: <span class="inline-block w-14 border-b-2 border-indigo-400 text-center ml-1">&nbsp;</span></span>
-      </div>
-    </div>
-
-    <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
-
-      <div class="flex items-center gap-4 mb-4 flex-row-reverse">
-        <img src="../../assets/hero-images/spaceship1.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
-        <div class="flex-1 flex flex-col items-center justify-center text-center">
-          <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
-          <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-2 gap-x-3 gap-y-[3px] flex-1 content-start">
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">18 + 7 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 − 9 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">22 + 6 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 − 8 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">20 + 10 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 − 7 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">24 + 8 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 − 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">19 + 9 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 − 10 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">21 + 7 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">17 − 8 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">23 + 6 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 10 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 9 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">20 − 7 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">24 − 6 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">18 + 8 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 10 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 − 9 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </div>
-
-  <!-- PAGE 2: 5+5+5 / 5×N / 5×N±5 — hero left, spaceship3, planet4 -->
-  <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-[80mm] z-0">
-      <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet4.jpeg" class="w-full h-full object-cover object-top" alt="">
-    </div>
-
-    <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
-      <div style="background: rgba(255,255,255,0.85);" class="rounded-full px-6 py-1.5 border-[1.5px] border-indigo-200 shadow-md">
-        <span class="text-[0.95rem] font-bold text-indigo-950">Итого собрано на планете: <span class="inline-block w-14 border-b-2 border-indigo-400 text-center ml-1">&nbsp;</span></span>
-      </div>
-    </div>
-
-    <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
-
-      <div class="flex items-center gap-4 mb-4">
-        <img src="../../assets/hero-images/spaceship3.png" class="w-[48%] shrink-0 object-contain" alt="">
-        <div class="flex-1 flex flex-col items-center justify-center text-center">
-          <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
-          <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
-        </div>
-      </div>
-
-      <div class="font-semibold text-indigo-950 mb-3 text-center" style="font-size: 0.8rem; margin-top: -10px;">Посчитай пятёрками: <span style="font-size: 1rem; word-spacing: 0.25em;">5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60</span> для зарядки расщепителя</div>
-
-      <div class="grid grid-cols-2 gap-x-3 gap-y-[3px] flex-1 content-start">
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 11 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 + 5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 9 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 6 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 8 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 10 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 12 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 7 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 8 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </div>
-
-  <!-- PAGE 3: A×B + C×D (A:2-4, B:1-3, C:2-3, D:1-2) — hero right, spaceship5, planet6 -->
-  <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
-
-    <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
-      <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet6.jpeg" class="w-full h-full object-cover object-top" alt="">
-    </div>
-
-    <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
-      <div style="background: rgba(255,255,255,0.85);" class="rounded-full px-6 py-1.5 border-[1.5px] border-indigo-200 shadow-md">
-        <span class="text-[0.95rem] font-bold text-indigo-950">Итого собрано на планете: <span class="inline-block w-14 border-b-2 border-indigo-400 text-center ml-1">&nbsp;</span></span>
-      </div>
-    </div>
-
-    <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
-
-      <div class="flex items-center gap-4 mb-4 flex-row-reverse">
-        <img src="../../assets/hero-images/spaceship5.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
-        <div class="flex-1 flex flex-col items-center justify-center text-center">
-          <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
-          <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-2 gap-x-3 gap-y-[3px] flex-1 content-start">
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 2 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 1 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 3 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 1 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 1 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 2 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 3 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 1 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 1 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-center">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 1 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 2 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-end">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex justify-start">
-          <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
-            <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
-              <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 2 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </div>
-
-</body>
-</html>

src/scripts/post-generate.mjs

@@ -0,0 +1,47 @@
+/**
+ * Post-generate step: take per-page screenshots of the output HTML.
+ * Called at the end of each generate.mjs.
+ *
+ * Usage: import and call as function, or run standalone.
+ *   import { postGenerate } from '../../src/scripts/post-generate.mjs';
+ *   await postGenerate(outputPath);
+ *
+ * Standalone: node post-generate.mjs <html-file>
+ */
+
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import { execFile } from 'child_process';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SCREENSHOT_SCRIPT = resolve(__dirname, 'take-screenshots.mjs');
+
+export async function postGenerate(htmlPath) {
+  const absPath = resolve(htmlPath);
+  return new Promise((resolve, reject) => {
+    execFile('node', [SCREENSHOT_SCRIPT, absPath], { timeout: 60000 }, (err, stdout, stderr) => {
+      if (err) {
+        console.error('Screenshots failed:', stderr || err.message);
+        // Non-fatal — don't block generation
+        resolve(null);
+        return;
+      }
+      try {
+        const result = JSON.parse(stdout);
+        console.log(`Screenshots: ${result.pages} pages → ${result.screenshots[0].split('/').slice(-2).join('/')}`);
+        resolve(result);
+      } catch {
+        console.log(stdout);
+        resolve(null);
+      }
+    });
+  });
+}
+
+// Standalone mode
+if (process.argv[1] && resolve(process.argv[1]) === resolve(fileURLToPath(import.meta.url))) {
+  const file = process.argv[2];
+  if (!file) { console.error('Usage: node post-generate.mjs <html-file>'); process.exit(1); }
+  postGenerate(file);
+}

src/scripts/take-screenshots.mjs

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+
+/**
+ * Take per-page screenshots of a worksheet HTML file.
+ *
+ * Usage: node take-screenshots.mjs <html-file>
+ * Example: node take-screenshots.mjs tasks/collecting-asteroids/docs/collecting-asteroids-1.output.html
+ *
+ * Output: tasks/{type}/temp/{docId}-page-1.png, ...-page-2.png, etc.
+ * Old screenshots for the same docId are deleted before writing new ones.
+ *
+ * Starts a temporary HTTP server to resolve /assets/ paths correctly.
+ */
+
+import puppeteer from 'puppeteer';
+import { resolve, basename, dirname, join } from 'path';
+import { existsSync, mkdirSync, readdirSync, unlinkSync } from 'fs';
+import { createServer } from 'http';
+import { readFile } from 'fs/promises';
+import { fileURLToPath } from 'url';
+import { extname } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PROJECT_ROOT = resolve(__dirname, '../..');
+
+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 main() {
+  const htmlPath = process.argv[2];
+  if (!htmlPath) {
+    console.error('Usage: node take-screenshots.mjs <html-file>');
+    process.exit(1);
+  }
+
+  const absolutePath = resolve(htmlPath);
+  if (!existsSync(absolutePath)) {
+    console.error(`File not found: ${absolutePath}`);
+    process.exit(1);
+  }
+
+  // Determine output dir: find the temp/ folder for this task type
+  // Path pattern: tasks/{type}/docs/{docId}.something.html
+  const relPath = absolutePath.replace(PROJECT_ROOT + '/', '');
+  const parts = relPath.split('/');
+  // parts: ['tasks', '{type}', 'docs', '{docId}.output.html'] or similar
+  const taskType = parts[1]; // e.g. 'collecting-asteroids'
+  const fileName = parts[parts.length - 1];
+  const docId = fileName.replace(/\.(output|template)\.html$/, '');
+
+  const tempDir = join(PROJECT_ROOT, 'tasks', taskType, 'temp');
+  mkdirSync(tempDir, { recursive: true });
+
+  // Clean old screenshots for this docId
+  const prefix = docId + '-page-';
+  readdirSync(tempDir)
+    .filter(f => f.startsWith(prefix) && f.endsWith('.png'))
+    .forEach(f => unlinkSync(join(tempDir, f)));
+
+  // Start temporary HTTP server
+  const server = createServer(async (req, res) => {
+    let filePath = join(PROJECT_ROOT, decodeURIComponent(req.url));
+    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;
+
+  // Build URL relative to project root
+  const urlPath = '/' + relPath;
+
+  try {
+    const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox'] });
+    const page = await browser.newPage();
+
+    await page.setViewport({ width: 794, height: 1123, deviceScaleFactor: 2 });
+
+    await page.goto(`http://127.0.0.1:${port}${urlPath}`, { waitUntil: 'networkidle0', timeout: 30000 });
+
+    // Find all A4 page elements
+    const pageHandles = await page.$$('.w-\\[210mm\\]');
+
+    if (pageHandles.length === 0) {
+      console.error('No pages found (no .w-[210mm] elements)');
+      await browser.close();
+      server.close();
+      process.exit(1);
+    }
+
+    const screenshots = [];
+    for (let i = 0; i < pageHandles.length; i++) {
+      const screenshotPath = join(tempDir, `${docId}-page-${i + 1}.png`);
+      await pageHandles[i].screenshot({ path: screenshotPath });
+      screenshots.push(screenshotPath);
+    }
+    const pageCount = pageHandles.length;
+
+    await browser.close();
+    console.log(JSON.stringify({ docId, pages: pageCount, screenshots }, null, 2));
+  } finally {
+    server.close();
+  }
+}
+
+main().catch(e => { console.error(e); process.exit(1); });

tasks/collecting-asteroids/docs/collecting-asteroids-1.template.html

@@ -27,33 +27,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin1.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin1.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter1.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter1.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
 
-        <div class="absolute" style="left: 67mm; top: 1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 67mm; top: 1mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 111mm; top: 15mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 111mm; top: 15mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 146mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 146mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 22mm; top: 55mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 22mm; top: 55mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 57mm; top: 43mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 57mm; top: 43mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 93mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 93mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 80mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 80mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 33mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 33mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 115mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 115mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 45mm; top: 125mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 45mm; top: 125mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 79mm; top: 141mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 79mm; top: 141mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 132mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 132mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
       </div>
     </div>
   </div>
@@ -62,34 +62,34 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin2.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin2.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter2.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter2.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
 
-        <div class="absolute" style="left: 15mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 15mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 42mm; top: 37mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 42mm; top: 37mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 96mm; top: 2mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 96mm; top: 2mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 86mm; top: 46mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 86mm; top: 46mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 44mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 44mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 140mm; top: 77mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 140mm; top: 77mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 96mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 96mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 56mm; top: 73mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 56mm; top: 73mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 8mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 8mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 6mm; top: 39mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 6mm; top: 39mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 70mm; top: 106mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 70mm; top: 106mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 31mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 31mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 83mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 83mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
       </div>
     </div>
   </div>
@@ -98,33 +98,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin3.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin3.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter3.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter3.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
 
-        <div class="absolute" style="left: 80mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 80mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 118mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 118mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 158mm; top: 22mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 158mm; top: 22mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 11mm; top: 73mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 11mm; top: 73mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 72mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 72mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 103mm; top: 37mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 103mm; top: 37mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 47mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 47mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 82mm; top: 99mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 82mm; top: 99mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 117mm; top: 127mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 117mm; top: 127mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 52mm; top: 134mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 52mm; top: 134mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 69mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 69mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 162mm; top: 144mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 162mm; top: 144mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
       </div>
     </div>
   </div>
@@ -133,33 +133,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin4.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin4.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter4.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter4.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
 
-        <div class="absolute" style="left: -2mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: -2mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 36mm; top: 22mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 36mm; top: 22mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 77mm; top: 25mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 77mm; top: 25mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 75mm; top: 60mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 75mm; top: 60mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 112mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 112mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 110mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 110mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 40mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 40mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 55mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 55mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 82mm; top: 107mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 82mm; top: 107mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 14mm; top: 122mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 14mm; top: 122mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 139mm; top: 76mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 139mm; top: 76mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 74mm; top: 145mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 74mm; top: 145mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
       </div>
     </div>
   </div>
@@ -168,32 +168,32 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin5.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin5.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter5.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter5.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">4</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">4</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">4</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">4</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">4</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">4</span></div></div></div>
 
-        <div class="absolute" style="left: 50mm; top: 0mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 50mm; top: 0mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 119mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 119mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 162mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 162mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: -3mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: -3mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 54mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 54mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 90mm; top: 29mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 90mm; top: 29mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 46mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 46mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 85mm; top: 90mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 85mm; top: 90mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 149mm; top: 126mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 149mm; top: 126mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 68mm; top: 129mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 68mm; top: 129mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 101mm; top: 148mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 101mm; top: 148mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
       </div>
     </div>
   </div>
@@ -202,35 +202,35 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin6.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin6.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter6.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter6.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
 
-        <div class="absolute" style="left: -3mm; top: 22mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: -3mm; top: 22mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 48mm; top: 8mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 48mm; top: 8mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 97mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 97mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 31mm; top: 40mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 31mm; top: 40mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 77mm; top: 34mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 77mm; top: 34mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 102mm; top: 66mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 102mm; top: 66mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 154mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 154mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 68mm; top: 84mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 68mm; top: 84mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 57mm; top: 114mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 57mm; top: 114mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 122mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 122mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 1mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 1mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 34mm; top: 133mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 34mm; top: 133mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 89mm; top: 122mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 89mm; top: 122mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 82mm; top: 145mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 82mm; top: 145mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
       </div>
     </div>
   </div>
@@ -239,33 +239,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin7.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin7.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter7.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter7.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">9</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">9</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
 
-        <div class="absolute" style="left: 59mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 59mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 116mm; top: 12mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 116mm; top: 12mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 151mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 151mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 8mm; top: 74mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 8mm; top: 74mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 55mm; top: 45mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 55mm; top: 45mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 90mm; top: 44mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 90mm; top: 44mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 64mm; top: 79mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 64mm; top: 79mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 94mm; top: 99mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 94mm; top: 99mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 147mm; top: 133mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 147mm; top: 133mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 35mm; top: 96mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 35mm; top: 96mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 71mm; top: 127mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 71mm; top: 127mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 112mm; top: 148mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 112mm; top: 148mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
       </div>
     </div>
   </div>
@@ -274,34 +274,34 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin8.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin8.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter8.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter8.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
 
-        <div class="absolute" style="left: -6mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: -6mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 8mm; top: 30mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 8mm; top: 30mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 49mm; top: 11mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 49mm; top: 11mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 63mm; top: 44mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 63mm; top: 44mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 101mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 101mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 168mm; top: 68mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 168mm; top: 68mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 119mm; top: 79mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 119mm; top: 79mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 59mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 59mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 90mm; top: 98mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 90mm; top: 98mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 70mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 70mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: -2mm; top: 130mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: -2mm; top: 130mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 32mm; top: 144mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 32mm; top: 144mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 88mm; top: 158mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 88mm; top: 158mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
       </div>
     </div>
   </div>
@@ -310,36 +310,36 @@
   <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
     <div class="absolute bottom-0 left-0 right-0 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin9.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin9.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter9.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter9.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">15</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">15</span></div></div></div>
 
-        <div class="absolute" style="left: 31mm; top: -2mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 31mm; top: -2mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 132mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 132mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 162mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 162mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 89mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 89mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 39mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 39mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 68mm; top: 39mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 68mm; top: 39mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 115mm; top: 35mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 115mm; top: 35mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 1mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 1mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 77mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 77mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 85mm; top: 114mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 85mm; top: 114mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 131mm; top: 129mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 131mm; top: 129mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 52mm; top: 110mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 52mm; top: 110mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 63mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 63mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 103mm; top: 143mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 103mm; top: 143mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 146mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 146mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
       </div>
     </div>
   </div>

tasks/collecting-asteroids/docs/collecting-asteroids-2.template.html

@@ -27,33 +27,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin7.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin7.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter5.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter5.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
 
-        <div class="absolute" style="left: 4mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(33deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 4mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(33deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 91mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.68);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 91mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.68);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 65mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(23deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 65mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(23deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 14mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 14mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 58mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 58mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 160mm; top: 74mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 160mm; top: 74mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 53mm; top: 107mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.57);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 53mm; top: 107mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.57);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 101mm; top: 76mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 101mm; top: 76mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 62mm; top: 134mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(0deg) scale(1.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 62mm; top: 134mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(0deg) scale(1.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 24mm; top: 117mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 24mm; top: 117mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 40mm; top: 156mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-80deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 40mm; top: 156mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-80deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 3mm; top: 129mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(7deg) scale(2.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 3mm; top: 129mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(7deg) scale(2.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
       </div>
     </div>
   </div>
@@ -62,33 +62,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin4.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin4.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter2.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter2.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
 
-        <div class="absolute" style="left: 60mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 60mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 105mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 105mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 150mm; top: 19mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.73);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 150mm; top: 19mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.73);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 22mm; top: 0mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-63deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 22mm; top: 0mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-63deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 85mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.67);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 85mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.67);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 80mm; top: 50mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 80mm; top: 50mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 161mm; top: 124mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(95deg) scale(1.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 161mm; top: 124mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(95deg) scale(1.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 44mm; top: 75mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 44mm; top: 75mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: -5mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: -5mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 101mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 101mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 73mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.42);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 73mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.42);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 140mm; top: 150mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 140mm; top: 150mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
       </div>
     </div>
   </div>
@@ -97,33 +97,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin1.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin1.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter8.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter8.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
 
-        <div class="absolute" style="left: 37mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.83);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 37mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.83);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 78mm; top: 12mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 78mm; top: 12mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 109mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.47);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 109mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.47);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 0mm; top: 31mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.97);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 0mm; top: 31mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.97);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 60mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.40);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 60mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.40);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 102mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 102mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 132mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 132mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 2mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 2mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.02);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 67mm; top: 98mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 67mm; top: 98mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 81mm; top: 147mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 81mm; top: 147mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 36mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 36mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 109mm; top: 85mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.77);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 109mm; top: 85mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.77);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
       </div>
     </div>
   </div>
@@ -132,33 +132,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin9.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin9.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter3.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter3.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
 
-        <div class="absolute" style="left: 71mm; top: 3mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 71mm; top: 3mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 66mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 66mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 160mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 160mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: -10mm; top: 72mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.72);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: -10mm; top: 72mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.72);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 63mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.82);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 63mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.82);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 76mm; top: 73mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.40);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 76mm; top: 73mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.40);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 149mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 149mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 22mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 22mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 125mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.40);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 125mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.40);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 103mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.57);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 103mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.57);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 67mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.47);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 67mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.47);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 103mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 103mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
       </div>
     </div>
   </div>
@@ -167,32 +167,32 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin2.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin2.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter9.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter9.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">8</span></div></div></div>
 
-        <div class="absolute" style="left: 45mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 45mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 83mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.53);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 83mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.53);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 27mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(37deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 27mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(37deg) scale(1.12);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: -1mm; top: 30mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: -1mm; top: 30mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 66mm; top: 51mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.58);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 66mm; top: 51mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.58);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 108mm; top: 65mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 108mm; top: 65mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 7mm; top: 126mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(75deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 7mm; top: 126mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(75deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 73mm; top: 102mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.72);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 73mm; top: 102mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.72);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 140mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 140mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 0mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 0mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 83mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 83mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
       </div>
     </div>
   </div>
@@ -201,35 +201,35 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin6.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin6.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter1.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter1.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">16</span></div></div></div>
 
-        <div class="absolute" style="left: 79mm; top: 24mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(65deg) scale(0.67);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 79mm; top: 24mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(65deg) scale(0.67);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 66mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 66mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 148mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(73deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 148mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(73deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 99mm; top: 135mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-42deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 99mm; top: 135mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-42deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 47mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 47mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 84mm; top: 48mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(40deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 84mm; top: 48mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(40deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 114mm; top: 21mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(53deg) scale(1.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 114mm; top: 21mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(53deg) scale(1.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 16mm; top: 74mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 16mm; top: 74mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 65mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 65mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 84mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.17);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 84mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.17);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 146mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.82);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 146mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.82);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 60mm; top: 108mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 60mm; top: 108mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 81mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.68);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 81mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.68);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 80mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.78);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 80mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.78);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
       </div>
     </div>
   </div>
@@ -238,33 +238,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin3.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin3.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter6.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter6.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">24</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">24</span></div></div></div>
 
-        <div class="absolute" style="left: 37mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 37mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 78mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(17deg) scale(0.68);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 78mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(17deg) scale(0.68);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 112mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(50deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 112mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(50deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 2mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 2mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 68mm; top: 58mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 68mm; top: 58mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 99mm; top: 45mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 99mm; top: 45mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 66mm; top: 98mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-55deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 66mm; top: 98mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-55deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 88mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.87);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 88mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.87);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 123mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 123mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: -10mm; top: 136mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: -10mm; top: 136mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 50mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 50mm; top: 128mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 84mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-118deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 84mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-118deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
       </div>
     </div>
   </div>
@@ -273,34 +273,34 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin8.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin8.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter4.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter4.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">28</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">28</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">32</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">32</span></div></div></div>
 
-        <div class="absolute" style="left: 72mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-13deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 72mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-13deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 166mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.83);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 166mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.83);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 47mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-43deg) scale(1.67);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 47mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-43deg) scale(1.67);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 101mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(1.15);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 101mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(1.15);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 42mm; top: 52mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.48);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 42mm; top: 52mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.48);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 79mm; top: 60mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.87);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 79mm; top: 60mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.87);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 91mm; top: 43mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 91mm; top: 43mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 6mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 6mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 68mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(0deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 68mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(0deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 93mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(2.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 93mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(2.00);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 137mm; top: 133mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 137mm; top: 133mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.62);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 74mm; top: 125mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(1.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 74mm; top: 125mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(1.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 95mm; top: 146mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-7deg) scale(1.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 95mm; top: 146mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-7deg) scale(1.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
       </div>
     </div>
   </div>
@@ -309,36 +309,36 @@
   <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
     <div class="absolute bottom-0 left-0 right-0 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin5.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin5.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter7.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter7.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">20</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">30</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">30</span></div></div></div>
 
-        <div class="absolute" style="left: 53mm; top: 1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 53mm; top: 1mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 97mm; top: 9mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 97mm; top: 9mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 129mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.47);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 129mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.47);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 3mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 3mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.92);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 74mm; top: 36mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 74mm; top: 36mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.08);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 41mm; top: 40mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 41mm; top: 40mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 130mm; top: 56mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 130mm; top: 56mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(0.95);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 61mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.72);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 61mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.72);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 93mm; top: 63mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 93mm; top: 63mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 164mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.15);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 164mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.15);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: -5mm; top: 123mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: -5mm; top: 123mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 71mm; top: 138mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.42);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 71mm; top: 138mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.42);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 114mm; top: 96mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 114mm; top: 96mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 19mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 19mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 112mm; top: 158mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 112mm; top: 158mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.88);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
       </div>
     </div>
   </div>

tasks/collecting-asteroids/docs/collecting-asteroids-3.template.html

@@ -27,33 +27,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin3.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin3.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter4.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter4.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 54%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 54%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 72%; top: 44%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">11</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 72%; top: 44%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">11</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 26%; top: 46%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 26%; top: 46%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
 
-        <div class="absolute" style="left: 149mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(33deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 149mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(33deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 81mm; top: 26mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 81mm; top: 26mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 64mm; top: 52mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(23deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 64mm; top: 52mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(23deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 14mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 14mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 50mm; top: 9mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 50mm; top: 9mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 87mm; top: -2mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 87mm; top: -2mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 82mm; top: 105mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 82mm; top: 105mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 93mm; top: 60mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 93mm; top: 60mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 66mm; top: 142mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(0deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 66mm; top: 142mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(0deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 129mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 129mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 45mm; top: 117mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-80deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 45mm; top: 117mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-80deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 6mm; top: 123mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(7deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 6mm; top: 123mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid3.png" class="w-full h-full object-contain" style="transform: rotate(7deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
       </div>
     </div>
   </div>
@@ -62,33 +62,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin6.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin6.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter7.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter7.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 62%; top: 40%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 62%; top: 40%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 39%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 39%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">12</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 73%; top: 51%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 73%; top: 51%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
 
-        <div class="absolute" style="left: 72mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 72mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 105mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 105mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 150mm; top: 19mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 150mm; top: 19mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 52mm; top: 30mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-63deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 52mm; top: 30mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-63deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 85mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 85mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 86mm; top: 51mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
+        <div class="absolute" style="left: 86mm; top: 51mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
-        <div class="absolute" style="left: 164mm; top: 127mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(95deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 164mm; top: 127mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(95deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 44mm; top: 75mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 44mm; top: 75mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: -5mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: -5mm; top: 87mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 108mm; top: 152mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 108mm; top: 152mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 73mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 73mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid13.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 136mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 136mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
       </div>
     </div>
   </div>
@@ -97,33 +97,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin9.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin9.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter1.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter1.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 34%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 34%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">7</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 75%; top: 47%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 75%; top: 47%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">5</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 22%; top: 39%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 22%; top: 39%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">6</span></div></div></div>
 
-        <div class="absolute" style="left: 38mm; top: 8mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-13deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 38mm; top: 8mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-13deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 76mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 76mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 109mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 109mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: -4mm; top: 25mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">9</span></div></div></div>
+        <div class="absolute" style="left: -4mm; top: 25mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">9</span></div></div></div>
-        <div class="absolute" style="left: 64mm; top: 56mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 64mm; top: 56mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 97mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 97mm; top: 49mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 175mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(2.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 175mm; top: 78mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(2.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: -10mm; top: 124mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: -10mm; top: 124mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 48mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 48mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 65mm; top: 151mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 65mm; top: 151mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 18mm; top: 144mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(17deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 18mm; top: 144mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid8.png" class="w-full h-full object-contain" style="transform: rotate(17deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 106mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(13deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 106mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" style="transform: rotate(13deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
       </div>
     </div>
   </div>
@@ -132,33 +132,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin2.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin2.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter6.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter6.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 71%; top: 55%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">15</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 71%; top: 55%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">15</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 43%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 28%; top: 43%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">10</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 76%; top: 49%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">25</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 76%; top: 49%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">25</span></div></div></div>
 
-        <div class="absolute" style="left: 64mm; top: 2mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-68deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 64mm; top: 2mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-68deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 58mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 58mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 160mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 160mm; top: 28mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: -10mm; top: 76mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: -10mm; top: 76mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 63mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 63mm; top: 42mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 82mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 82mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 149mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 149mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 22mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 22mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 121mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 121mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 103mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 103mm; top: 120mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 62mm; top: 130mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 62mm; top: 130mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid15.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 103mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 103mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid12.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
       </div>
     </div>
   </div>
@@ -167,32 +167,32 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin5.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin5.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter2.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter2.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 37%; top: 38%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">13</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 37%; top: 38%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">13</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 71%; top: 41%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">11</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 71%; top: 41%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">11</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 23%; top: 47%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">15</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 23%; top: 47%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">15</span></div></div></div>
 
-        <div class="absolute" style="left: 45mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 45mm; top: 5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 64mm; top: 62mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 64mm; top: 62mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(0.85);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 27mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(37deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 27mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(37deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: -1mm; top: 32mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: -1mm; top: 32mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 82mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.15);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 82mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.15);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 108mm; top: 65mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 108mm; top: 65mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 7mm; top: 126mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(75deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 7mm; top: 126mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(75deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 71mm; top: 104mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 71mm; top: 104mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid9.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 145mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 145mm; top: 86mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 3mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 3mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 80mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 80mm; top: 154mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
       </div>
     </div>
   </div>
@@ -201,35 +201,35 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin7.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin7.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter8.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter8.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">14</span></div></div></div>
 
-        <div class="absolute" style="left: 79mm; top: 24mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(65deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 79mm; top: 24mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(65deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 65mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
+        <div class="absolute" style="left: 65mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
-        <div class="absolute" style="left: 148mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(73deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 148mm; top: 18mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(73deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 99mm; top: 135mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-42deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 99mm; top: 135mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-42deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 47mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
+        <div class="absolute" style="left: 47mm; top: 59mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(0.45);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">1</span></div></div></div>
-        <div class="absolute" style="left: 84mm; top: 48mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(40deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 84mm; top: 48mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(40deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 114mm; top: 21mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(53deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 114mm; top: 21mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(53deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 7mm; top: 80mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 7mm; top: 80mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 65mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 65mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 84mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 84mm; top: 82mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 146mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 146mm; top: 157mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid16.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 60mm; top: 108mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 60mm; top: 108mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 81mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 81mm; top: 113mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 80mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 80mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid5.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
       </div>
     </div>
   </div>
@@ -238,33 +238,33 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin4.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin4.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter9.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter9.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 29%; top: 51%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">25</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 29%; top: 51%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">25</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 71%; top: 45%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">21</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 71%; top: 45%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">21</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 23%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">32</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 23%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">32</span></div></div></div>
 
-        <div class="absolute" style="left: 37mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: 37mm; top: 4mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-10deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 78mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(17deg) scale(2.30);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 78mm; top: -3mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(17deg) scale(2.30);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 112mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(50deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 112mm; top: -1mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(50deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 2mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 2mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 65mm; top: 34mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(2.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">11</span></div></div></div>
+        <div class="absolute" style="left: 65mm; top: 34mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(2.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">11</span></div></div></div>
-        <div class="absolute" style="left: 99mm; top: 45mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 99mm; top: 45mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 72mm; top: 107mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-55deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
+        <div class="absolute" style="left: 72mm; top: 107mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-55deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
-        <div class="absolute" style="left: 78mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(2.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 78mm; top: 71mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(2.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 132mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 132mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: -10mm; top: 140mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: -10mm; top: 140mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 38mm; top: 130mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(3.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">13</span></div></div></div>
+        <div class="absolute" style="left: 38mm; top: 130mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid7.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(3.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">13</span></div></div></div>
-        <div class="absolute" style="left: 88mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-118deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 88mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid11.png" class="w-full h-full object-contain" style="transform: rotate(-118deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
       </div>
     </div>
   </div>
@@ -273,34 +273,34 @@
   <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 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin1.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin1.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1 flex-row-reverse">
-        <img src="../../assets/hero-images/splitters/splitter5.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
+        <img src="/assets/hero-images/splitters/splitter5.png" class="w-[66%] shrink-0 object-contain" style="transform: scaleX(-1);" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 35%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">26</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 35%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">26</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 29%; top: 39%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">28</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 29%; top: 39%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">28</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 74%; top: 51%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">30</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 74%; top: 51%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">30</span></div></div></div>
 
-        <div class="absolute" style="left: 70mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-13deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 70mm; top: 13mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-13deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 172mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-38deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 172mm; top: 7mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-38deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 36mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-43deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
+        <div class="absolute" style="left: 36mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-43deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
-        <div class="absolute" style="left: 108mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 108mm; top: 10mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 41mm; top: 50mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 41mm; top: 50mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: 78mm; top: 63mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 78mm; top: 63mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 97mm; top: 41mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-30deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 97mm; top: 41mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-30deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: -5mm; top: 83mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: -5mm; top: 83mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(-25deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 56mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-35deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 56mm; top: 88mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-35deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 102mm; top: 100mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
+        <div class="absolute" style="left: 102mm; top: 100mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(3deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
-        <div class="absolute" style="left: 147mm; top: 142mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
+        <div class="absolute" style="left: 147mm; top: 142mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid4.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(1.80);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">10</span></div></div></div>
-        <div class="absolute" style="left: 59mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
+        <div class="absolute" style="left: 59mm; top: 132mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(5deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
-        <div class="absolute" style="left: 95mm; top: 146mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-7deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 95mm; top: 146mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid14.png" class="w-full h-full object-contain" style="transform: rotate(-7deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
       </div>
     </div>
   </div>
@@ -309,36 +309,36 @@
   <div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
     <div class="absolute bottom-0 left-0 right-0 z-0">
       <div class="absolute top-0 left-0 right-0 z-10" style="height: 10%; background: linear-gradient(to bottom, white, transparent);"></div>
-      <img src="../../assets/footers/cabin8.jpeg" class="w-full" alt="">
+      <img src="/assets/footers/cabin8.jpeg" class="w-full" alt="">
     </div>
     <div class="relative z-10 w-full h-full px-[12mm] pt-[1mm] pb-[65mm] flex flex-col">
       <div class="flex items-center gap-2 mb-1">
-        <img src="../../assets/hero-images/splitters/splitter3.png" class="w-[66%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/splitters/splitter3.png" class="w-[66%] shrink-0 object-contain" alt="">
         <div class="w-[34%] shrink-0 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Собери Астероиды</h1>
           <p class="text-sm font-medium text-indigo-400 mt-0.5">Загрузи трюмы кораблей!</p>
         </div>
       </div>
       <div class="relative flex-1">
-        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 27%; top: 33%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">26</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 2%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 27%; top: 33%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">26</span></div></div></div>
-        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
+        <div class="absolute" style="left: -82mm; top: 30%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="w-[500px] object-contain" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 65%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">18</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="../../assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">34</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 58%;"><div class="relative"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="w-[500px] min-w-[500px] object-contain" style="transform: scaleX(-1);" alt=""><div class="absolute w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center border-2 border-indigo-300 shadow-lg" style="left: 35%; top: 50%; transform: translate(-50%, -50%);"><span class="text-white font-extrabold text-xl">34</span></div></div></div>
 
-        <div class="absolute" style="left: 45mm; top: 1mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 45mm; top: 1mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-20deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 95mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 95mm; top: 6mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(15deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 125mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 125mm; top: -5mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-8deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: -10mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
+        <div class="absolute" style="left: -10mm; top: 16mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(22deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
-        <div class="absolute" style="left: 72mm; top: 35mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
+        <div class="absolute" style="left: 72mm; top: 35mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-15deg) scale(1.35);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">7</span></div></div></div>
-        <div class="absolute" style="left: 27mm; top: 38mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 27mm; top: 38mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(10deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 120mm; top: 67mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 120mm; top: 67mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(25deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
-        <div class="absolute" style="left: 57mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">9</span></div></div></div>
+        <div class="absolute" style="left: 57mm; top: 91mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(-12deg) scale(1.65);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">9</span></div></div></div>
-        <div class="absolute" style="left: 91mm; top: 63mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
+        <div class="absolute" style="left: 91mm; top: 63mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(18deg) scale(0.60);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">2</span></div></div></div>
-        <div class="absolute" style="left: 175mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
+        <div class="absolute" style="left: 175mm; top: 81mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-5deg) scale(1.50);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">8</span></div></div></div>
-        <div class="absolute" style="left: -5mm; top: 123mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
+        <div class="absolute" style="left: -5mm; top: 123mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid6.png" class="w-full h-full object-contain" style="transform: rotate(12deg) scale(0.90);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">4</span></div></div></div>
-        <div class="absolute" style="left: 67mm; top: 139mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
+        <div class="absolute" style="left: 67mm; top: 139mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-22deg) scale(1.20);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">6</span></div></div></div>
-        <div class="absolute" style="left: 108mm; top: 95mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
+        <div class="absolute" style="left: 108mm; top: 95mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(8deg) scale(0.75);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">3</span></div></div></div>
-        <div class="absolute" style="left: 15mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(2.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
+        <div class="absolute" style="left: 15mm; top: 155mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(20deg) scale(2.10);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">12</span></div></div></div>
-        <div class="absolute" style="left: 99mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="../../assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
+        <div class="absolute" style="left: 99mm; top: 160mm;"><div class="relative w-[88px] h-[88px]"><img src="/assets/icons/pack3-asteroids/asteroid10.png" class="w-full h-full object-contain" style="transform: rotate(-18deg) scale(1.05);" alt=""><div class="absolute inset-0 flex items-center justify-center"><span class="text-white font-extrabold text-2xl" style="text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.7);">5</span></div></div></div>
       </div>
     </div>
   </div>

tasks/collecting-asteroids/index.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Collect the Asteroids &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-orange), var(--accent-pink));
+      -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(249,115,22,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-orange), 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(249,115,22,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(249,115,22,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(249,115,22,0.1); color: #c2410c; border: 1px solid rgba(249,115,22,0.2); }
+    .doc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+    .doc-actions a, .doc-actions button {
+      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-orange); }
+
+    @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="/public/previews/categories/collecting-asteroids.png" alt="">
+      <h1>Collect the Asteroids</h1>
+    </div>
+    <p class="header-desc">Match asteroid weights to cargo ship capacities. Each page has 3 ships and ~12 asteroids scattered across space. Draw lines connecting asteroids to ships so their values add up to the ship's capacity.</p>
+
+    <div class="docs">
+
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/collecting-asteroids-1.png" alt="Preview"></div>
+        <div class="doc-info">
+          <h3>Collecting Asteroids 1</h3>
+          <div class="doc-details">
+            <span class="tag tag-pages">9 pages</span>
+            <span class="tag tag-diff">Beginner &rarr; Medium</span><br>
+            Ship capacities: 4&ndash;16 &bull; Asteroid values: 1&ndash;6
+          </div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/collecting-asteroids/docs/collecting-asteroids-1.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/collecting-asteroids-1.template.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/collecting-asteroids/editor.html?file=collecting-asteroids-1">Editor</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/collecting-asteroids-2.png" alt="Preview"></div>
+        <div class="doc-info">
+          <h3>Collecting Asteroids 2</h3>
+          <div class="doc-details">
+            <span class="tag tag-pages">9 pages</span>
+            <span class="tag tag-diff">Medium &rarr; Hard</span><br>
+            Ship capacities: 10&ndash;20 &bull; Asteroid values: 2&ndash;8
+          </div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/collecting-asteroids/docs/collecting-asteroids-2.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/collecting-asteroids-2.template.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/collecting-asteroids/editor.html?file=collecting-asteroids-2">Editor</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/collecting-asteroids-3.png" alt="Preview"></div>
+        <div class="doc-info">
+          <h3>Collecting Asteroids 3</h3>
+          <div class="doc-details">
+            <span class="tag tag-pages">9 pages</span>
+            <span class="tag tag-diff">Easy &rarr; Hard</span><br>
+            Ship capacities: 5&ndash;34 &bull; Asteroid values: 1&ndash;13
+          </div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/collecting-asteroids/docs/collecting-asteroids-3.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/collecting-asteroids-3.template.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/collecting-asteroids/editor.html?file=collecting-asteroids-3">Editor</a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<div class="site-footer">
+  <div class="planet-footer">
+    <img src="/public/decor/planet-footer2.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/collecting-asteroids/scripts/generate.mjs

@@ -24,6 +24,7 @@
 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');
@@ -53,6 +54,7 @@ if (existsSync(dataPath)) {
 
 writeFileSync(outputPath, html);
 console.log(`Generated: ${outputPath}`);
+await postGenerate(outputPath);
 
 function applyData(html, data) {
   if (!data.pages) return html;

tasks/index.html

@@ -1,127 +1,239 @@
 <!DOCTYPE html>
-<html lang="ru">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Math Tasks — Документы</title>
+  <title>Space Math Adventures</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+  <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: #f5f3ff;
+      background: linear-gradient(170deg, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
-      color: #1e1b4b;
+      color: var(--text-body); min-height: 100vh; overflow-x: hidden;
-      min-height: 100vh;
+      display: flex; flex-direction: column;
+    }
+    .page-content { flex: 1; }
+
+    /* Floating asteroids — z-index above cards */
+    .floating-asteroid { position: fixed; z-index: 100; pointer-events: none; }
+    .floating-asteroid img { width: 100%; height: 100%; object-fit: contain; }
+    .fa-1 { width: 80px; top: 12%; left: 5%; animation: fSpin1 18s linear infinite, fDrift1 12s ease-in-out infinite; }
+    .fa-2 { width: 55px; top: 35%; right: 4%; animation: fSpin2 22s linear infinite, fDrift2 10s ease-in-out infinite; }
+    .fa-3 { width: 100px; top: 55%; left: 8%; animation: fSpin1 25s linear infinite reverse, fDrift4 16s ease-in-out infinite; }
+    .fa-4 { width: 45px; top: 75%; right: 10%; animation: fSpin2 15s linear infinite, fDrift5 11s ease-in-out infinite; }
+    .fa-5 { width: 65px; top: 5%; right: 15%; animation: fSpin1 20s linear infinite, fDrift2 11s ease-in-out infinite; }
+    @keyframes fSpin1 { to { transform: rotate(360deg); } }
+    @keyframes fSpin2 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
+    @keyframes fDrift1 { 0%,100%{translate:0 0} 25%{translate:15px -20px} 50%{translate:-10px -35px} 75%{translate:20px -15px} }
+    @keyframes fDrift2 { 0%,100%{translate:0 0} 33%{translate:-20px 15px} 66%{translate:12px -18px} }
+    @keyframes fDrift4 { 0%,100%{translate:0 0} 20%{translate:30px 15px} 40%{translate:-15px 40px} 60%{translate:25px -10px} 80%{translate:-20px 25px} }
+    @keyframes fDrift5 { 0%,100%{translate:0 0} 25%{translate:-25px -30px} 50%{translate:20px 15px} 75%{translate:-10px -20px} }
+
+    .container { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 0 24px; }
+
+    /* Hero */
+    .hero { text-align: center; padding: 60px 0 20px; }
+    .hero-ship {
+      width: 220px; margin: 0 auto 20px; display: block;
+      filter: drop-shadow(0 8px 24px rgba(124,58,237,0.25));
+      animation: heroFloat 4s ease-in-out infinite;
+    }
+    @keyframes heroFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
+    .hero h1 {
+      font-family: 'Fredoka', sans-serif; font-size: 3rem; font-weight: 700;
+      background: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-pink) 35%, var(--accent-orange) 70%, var(--accent-teal) 100%);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+      margin-bottom: 10px; letter-spacing: -0.5px;
+    }
+    .hero p { font-size: 1.1rem; color: var(--text-body); max-width: 460px; margin: 0 auto; line-height: 1.6; font-weight: 600; }
+
+    /* Categories */
+    .categories { display: flex; flex-direction: column; gap: 24px; padding: 40px 0 60px; }
+    .cat-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: 24px; overflow: hidden;
+      text-decoration: none; color: inherit;
+      transition: transform 0.25s, box-shadow 0.25s;
+      backdrop-filter: blur(8px); position: relative;
+    }
+    .cat-card::before {
+      content: ''; position: absolute; inset: -2px; border-radius: 26px;
+      background: linear-gradient(135deg, var(--accent-violet), var(--accent-orange), var(--accent-teal));
+      z-index: -1; opacity: 0.4; transition: opacity 0.25s;
+    }
+    .cat-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 16px 48px rgba(124,58,237,0.18), 0 4px 16px rgba(249,115,22,0.1); }
+    .cat-card:hover::before { opacity: 0.7; }
+    .cat-image {
+      width: 260px; min-height: 200px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center; padding: 20px;
+      background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(14,165,233,0.06));
+    }
+    .cat-image img {
+      max-width: 100%; max-height: 170px; object-fit: contain;
+      filter: drop-shadow(0 6px 16px rgba(0,0,0,0.15));
+      transition: transform 0.3s;
+    }
+    .cat-card:hover .cat-image img { transform: scale(1.08) rotate(-2deg); }
+    .cat-info { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; flex: 1; }
+    .cat-info h2 { font-family: 'Fredoka', sans-serif; font-size: 1.55rem; font-weight: 600; color: var(--text-deep); margin-bottom: 8px; }
+    .cat-info .cat-desc { font-size: 0.92rem; color: var(--text-body); line-height: 1.55; margin-bottom: 16px; }
+    .cat-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; }
+    .cat-meta .tag-violet { background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(124,58,237,0.06)); color: var(--accent-violet); padding: 4px 14px; border-radius: 20px; border: 1px solid rgba(124,58,237,0.2); font-weight: 700; }
+    .cat-meta .tag-orange { background: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(249,115,22,0.06)); color: #c2410c; padding: 4px 14px; border-radius: 20px; border: 1px solid rgba(249,115,22,0.2); font-weight: 700; }
+    .cat-meta .tag-teal { background: linear-gradient(135deg, rgba(13,148,136,0.12), rgba(13,148,136,0.06)); color: var(--accent-teal); padding: 4px 14px; border-radius: 20px; border: 1px solid rgba(13,148,136,0.2); font-weight: 700; }
+
+    /* Ship parade footer — flush to bottom */
+    .site-footer {
+      position: relative; z-index: 1;
+      background: linear-gradient(to bottom, transparent, rgba(124,58,237,0.04));
+    }
+    .ship-parade {
+      height: 260px;
+      overflow: hidden;
+    }
+    .ship-parade-track {
       display: flex;
-      flex-direction: column;
       align-items: center;
-      padding: 60px 24px;
+      gap: 80px;
+      height: 100%;
+      animation: shipScroll 160s linear infinite;
+      width: max-content;
     }
-    h1 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
+    .ship-parade-track img {
-    .subtitle { color: #6366f1; font-size: 1.05rem; margin-bottom: 48px; }
+      object-fit: contain;
-    h2 {
+      filter: drop-shadow(0 6px 16px rgba(0,0,0,0.12));
-      font-size: 1.3rem; font-weight: 700;
+      flex-shrink: 0;
-      margin: 32px 0 12px; width: 100%; max-width: 720px;
-      border-bottom: 2px solid #e0e7ff; padding-bottom: 6px;
     }
-    .cards {
+    .ship-parade-track img.freighter { height: 240px; }
-      display: grid;
+    .ship-parade-track img.pod { height: 80px; animation: podBob 3s ease-in-out infinite; }
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    .ship-parade-track img.pod-d1 { animation-delay: 0s; }
-      gap: 16px;
+    .ship-parade-track img.pod-d2 { animation-delay: -1s; }
-      width: 100%; max-width: 720px;
+    .ship-parade-track img.pod-d3 { animation-delay: -2s; }
+    @keyframes shipScroll {
+      from { transform: translateX(0); }
+      to { transform: translateX(-50%); }
     }
-    .card {
+    @keyframes podBob {
-      background: white;
+      0%, 100% { transform: translateY(0); }
-      border: 1px solid #e0e7ff;
+      50% { transform: translateY(-14px); }
-      border-radius: 12px;
-      padding: 20px 24px;
-      color: #1e1b4b;
     }
-    .card-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 8px; }
+    .footer-bar {
-    .card-links { display: flex; gap: 12px; }
+      text-align: center; padding: 8px 0;
-    .card-links a {
-      font-size: 0.88rem; font-weight: 600;
-      text-decoration: none; color: #6366f1;
-      padding: 4px 12px; border-radius: 6px;
-      border: 1px solid #e0e7ff;
-      transition: background 0.15s, border-color 0.15s;
     }
-    .card-links a:hover {
+    .footer-text {
-      background: #f5f3ff; border-color: #a5b4fc;
+      font-family: 'Fredoka', sans-serif; font-size: 0.85rem;
+      color: var(--accent-violet); opacity: 0.5; font-weight: 500;
     }
-    .card-links a.edit {
+
-      color: #059669; border-color: #d1fae5;
+    @media (max-width: 640px) {
-    }
+      .cat-card { flex-direction: column; }
-    .card-links a.edit:hover {
+      .cat-image { width: 100%; min-height: 140px; }
-      background: #ecfdf5; border-color: #6ee7b7;
+      .hero h1 { font-size: 2.2rem; }
+      .hero-ship { width: 160px; }
+      .ship-parade { height: 100px; }
+      .ship-parade-track img.freighter { height: 80px; }
+      .ship-parade-track img.pod { height: 45px; }
     }
   </style>
 </head>
 <body>
-  <h1>Math Tasks</h1>
-  <p class="subtitle">Документы для предпросмотра</p>
 
-  <!-- Space Exploration -->
+<!-- Floating asteroids -->
-  <h2>Исследуй Планету</h2>
+<div class="floating-asteroid fa-1"><img src="/public/decor/asteroid1.png" alt=""></div>
-  <div class="cards">
+<div class="floating-asteroid fa-2"><img src="/public/decor/asteroid2.png" alt=""></div>
-    <div class="card">
+<div class="floating-asteroid fa-3"><img src="/public/decor/asteroid3.png" alt=""></div>
-      <div class="card-title">Space Exploration 1 (3 pages)</div>
+<div class="floating-asteroid fa-4"><img src="/public/decor/asteroid4.png" alt=""></div>
-      <div class="card-links">
+<div class="floating-asteroid fa-5"><img src="/public/decor/asteroid5.png" alt=""></div>
-        <a href="/tasks/space-exploration/docs/space-exploration-1.template.html">View</a>
+
-      </div>
+<div class="page-content">
+  <div class="container">
+    <div class="hero">
+      <img class="hero-ship" src="/public/decor/ship-header.png" alt="">
+      <h1>Space Math Adventures</h1>
+      <p>Printable math worksheets for kids. Explore planets, collect asteroids, navigate space routes!</p>
     </div>
-    <div class="card">
+
-      <div class="card-title">Space Worksheet 2 (3 pages)</div>
+    <div class="categories">
-      <div class="card-links">
+      <a class="cat-card" href="/tasks/space-exploration/">
-        <a href="/tasks/space-exploration/docs/space-worksheet2.template.html">View</a>
+        <div class="cat-image">
-      </div>
+          <img src="/public/previews/categories/space-exploration.png" alt="Space Exploration">
-    </div>
+        </div>
-    <div class="card">
+        <div class="cat-info">
-      <div class="card-title">Space Worksheet 3 (9 pages)</div>
+          <h2>Explore the Planet</h2>
-      <div class="card-links">
+          <p class="cat-desc">Solve math problems to collect space resources! Addition, subtraction, multiplication &mdash; all wrapped in a cosmic adventure with unique alien flora icons.</p>
-        <a href="/tasks/space-exploration/docs/space-worksheet3.template.html">View</a>
+          <div class="cat-meta">
-      </div>
+            <span class="tag-violet">3 worksheets</span>
+            <span class="tag-orange">Addition &amp; Multiplication</span>
+          </div>
+        </div>
+      </a>
+
+      <a class="cat-card" href="/tasks/collecting-asteroids/">
+        <div class="cat-image">
+          <img src="/public/previews/categories/collecting-asteroids.png" alt="Collecting Asteroids">
+        </div>
+        <div class="cat-info">
+          <h2>Collect the Asteroids</h2>
+          <p class="cat-desc">Match asteroid weights to cargo ship capacities! A puzzle-style worksheet where kids practice addition by filling cargo bays with the right combination of asteroids.</p>
+          <div class="cat-meta">
+            <span class="tag-violet">3 worksheets</span>
+            <span class="tag-teal">Addition &amp; Matching</span>
+          </div>
+        </div>
+      </a>
+
+      <a class="cat-card" href="/tasks/space-route/">
+        <div class="cat-image">
+          <img src="/public/previews/categories/space-route.png" alt="Space Route">
+        </div>
+        <div class="cat-info">
+          <h2>Plot the Route</h2>
+          <p class="cat-desc">Navigate through a hex grid of space nodes! Follow mathematical patterns between connected nodes to find the enemy pirate&rsquo;s path through the cosmos.</p>
+          <div class="cat-meta">
+            <span class="tag-violet">1 worksheet</span>
+            <span class="tag-orange">Number Patterns</span>
+          </div>
+        </div>
+      </a>
     </div>
   </div>
+</div>
 
-  <!-- Collecting Asteroids -->
+<div class="site-footer">
-  <h2>Собери Астероиды</h2>
+  <div class="ship-parade">
-  <div class="cards">
+    <div class="ship-parade-track">
-    <div class="card">
+      <img class="freighter" src="/public/decor/freighters/freighter1.png" alt="">
-      <div class="card-title">Collecting Asteroids 1</div>
+      <img class="pod pod-d1" src="/public/decor/freighters/pod2.png" alt="">
-      <div class="card-links">
+      <img class="freighter" src="/public/decor/freighters/freighter5.png" alt="">
-        <a href="/tasks/collecting-asteroids/docs/collecting-asteroids-1.template.html">View</a>
+      <img class="pod pod-d2" src="/public/decor/freighters/pod6.png" alt="">
-        <a class="edit" href="/tasks/collecting-asteroids/editor.html?file=collecting-asteroids-1">Edit</a>
+      <img class="freighter" src="/public/decor/freighters/freighter3.png" alt="">
-      </div>
+      <img class="pod pod-d3" src="/public/decor/freighters/pod11.png" alt="">
-    </div>
+      <img class="freighter" src="/public/decor/freighters/freighter7.png" alt="">
-    <div class="card">
+      <img class="freighter" src="/public/decor/freighters/freighter9.png" alt="">
-      <div class="card-title">Collecting Asteroids 2</div>
+      <!-- Duplicate for seamless loop -->
-      <div class="card-links">
+      <img class="freighter" src="/public/decor/freighters/freighter1.png" alt="">
-        <a href="/tasks/collecting-asteroids/docs/collecting-asteroids-2.template.html">View</a>
+      <img class="pod pod-d1" src="/public/decor/freighters/pod2.png" alt="">
-        <a class="edit" href="/tasks/collecting-asteroids/editor.html?file=collecting-asteroids-2">Edit</a>
+      <img class="freighter" src="/public/decor/freighters/freighter5.png" alt="">
-      </div>
+      <img class="pod pod-d2" src="/public/decor/freighters/pod6.png" alt="">
-    </div>
+      <img class="freighter" src="/public/decor/freighters/freighter3.png" alt="">
-    <div class="card">
+      <img class="pod pod-d3" src="/public/decor/freighters/pod11.png" alt="">
-      <div class="card-title">Collecting Asteroids 3</div>
+      <img class="freighter" src="/public/decor/freighters/freighter7.png" alt="">
-      <div class="card-links">
+      <img class="freighter" src="/public/decor/freighters/freighter9.png" alt="">
-        <a href="/tasks/collecting-asteroids/docs/collecting-asteroids-3.template.html">View</a>
-        <a class="edit" href="/tasks/collecting-asteroids/editor.html?file=collecting-asteroids-3">Edit</a>
-      </div>
     </div>
   </div>
-
+  <div class="footer-bar">
-  <!-- Space Route -->
+    <span class="footer-text">Space Math Adventures &bull; Print &amp; Play</span>
-  <h2>Проложи Маршрут</h2>
-  <div class="cards">
-    <div class="card">
-      <div class="card-title">Space Route 1</div>
-      <div class="card-links">
-        <a href="/tasks/space-route/docs/space-route-1.template.html">View</a>
-        <a class="edit" href="/tasks/space-route/editor.html?file=space-route-1">Edit</a>
-      </div>
-    </div>
   </div>
+</div>
 
 </body>
 </html>

tasks/space-exploration/docs/space-demo.html

@@ -31,7 +31,7 @@
 
     <div class="absolute bottom-0 left-0 right-0 h-[80mm] overflow-hidden z-0">
       <div class="absolute top-0 left-0 right-0 h-[40%] bg-gradient-to-b from-white to-transparent z-10"></div>
-      <img src="../../assets/footers/planet1.jpeg" class="w-full h-full object-cover object-top" alt="">
+      <img src="/assets/footers/planet1.jpeg" class="w-full h-full object-cover object-top" alt="">
     </div>
 
     <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
@@ -43,7 +43,7 @@
     <div class="relative z-10 w-full h-full px-[12mm] pt-[8mm] pb-[65mm] flex flex-col">
 
       <div class="page-header flex items-center gap-4 mb-4">
-        <img src="../../assets/hero-images/spaceship1.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/spaceship1.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
         <div class="flex-1 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
           <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
@@ -54,140 +54,140 @@
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals1-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals1-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/plants1-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">7 × 4 − 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals3-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals3-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 6 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/plants2-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants2-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals2-0-1.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals2-0-1.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 5 − 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals5-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">6 × 3 + 9 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/plants1-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 × 2 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals4-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">7 × 3 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/plants3-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 8 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals6-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals6-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals1-2-1.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals1-2-1.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 7 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/plants1-3-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-3-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 × 3 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals1-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals1-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 6 + 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/plants2-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants2-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 × 3 − 9 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals2-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals2-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">6 × 4 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/plants3-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">7 × 2 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals3-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals3-0-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 9 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals5-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/plants1-2-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-2-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 8 − 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[3px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit">
-            <img src="../../assets/icons/pack1/minerals4-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-1-0.png" class="w-11 h-11 shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 7 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>

tasks/space-exploration/docs/space-exploration-1-example.html

@@ -28,7 +28,7 @@
 
     <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
       <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet3.jpeg" class="w-full h-full object-cover object-top" alt="">
+      <img src="/assets/footers/planet3.jpeg" class="w-full h-full object-cover object-top" alt="">
     </div>
 
     <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
@@ -40,7 +40,7 @@
     <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
 
       <div class="flex items-center gap-4 mb-4 flex-row-reverse">
-        <img src="../../assets/hero-images/spaceship2.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/spaceship2.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
         <div class="flex-1 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
           <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
@@ -51,140 +51,140 @@
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 7 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 5 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants5-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants5-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals3-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals3-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 4 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals2-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals2-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 + 8 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 5 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants6-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants6-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">10 + 7 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals3-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals3-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 + 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 + 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants6-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants6-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 8 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-2-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-2-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 5 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants5-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants5-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 7 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 + 6 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-2-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-2-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 8 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">10 + 5 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 + 7 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 + 4 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 6 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals2-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals2-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 8 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
@@ -198,7 +198,7 @@
 
     <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
       <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet5.jpeg" class="w-full h-full object-cover object-top" alt="">
+      <img src="/assets/footers/planet5.jpeg" class="w-full h-full object-cover object-top" alt="">
     </div>
 
     <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
@@ -210,7 +210,7 @@
     <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
 
       <div class="flex items-center gap-4 mb-4">
-        <img src="../../assets/hero-images/spaceship4.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/spaceship4.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
         <div class="flex-1 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
           <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
@@ -221,140 +221,140 @@
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals1-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals1-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants2-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants2-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals6-1-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals6-1-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants2-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants2-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals1-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals1-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-1-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals1-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals1-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-3-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals6-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals6-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-0-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants2-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants2-3-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals3-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals3-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals2-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals2-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
@@ -368,7 +368,7 @@
 
     <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
       <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet1.jpeg" class="w-full h-full object-cover object-top" alt="">
+      <img src="/assets/footers/planet1.jpeg" class="w-full h-full object-cover object-top" alt="">
     </div>
 
     <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
@@ -380,7 +380,7 @@
     <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
 
       <div class="flex items-center gap-4 mb-4 flex-row-reverse">
-        <img src="../../assets/hero-images/spaceship6.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/spaceship6.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
         <div class="flex-1 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
           <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
@@ -391,140 +391,140 @@
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants6-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants6-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 4 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals6-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals6-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 4 + 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants6-1-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants6-1-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals2-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals2-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 2 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals1-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals1-3-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants5-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants5-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 4 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants2-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants2-2-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 3 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-0-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-0-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals4-1-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-1-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 2 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-1-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 2 + 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-0-1.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 4 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals3-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals3-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 1 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals6-0-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals6-0-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants5-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants5-1-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 1 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants1-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-3-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 4 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-start py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants4-2-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-2-2.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 3 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-end py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/minerals5-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-2-0.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 4 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>
 
         <div class="flex justify-center py-[3px]">
           <div class="flex items-center gap-1.5 pl-0.5 pr-4 py-[1px] border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30 w-fit overflow-hidden">
-            <img src="../../assets/icons/pack1/plants3-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-0-3.png" class="w-[39px] h-[39px] shrink-0 object-contain" alt="">
             <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
           </div>
         </div>

tasks/space-exploration/docs/space-exploration-1.template.html

@@ -28,7 +28,7 @@
 
     <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
       <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet3.jpeg" class="w-full h-full object-cover object-top" alt="">
+      <img src="/assets/footers/planet3.jpeg" class="w-full h-full object-cover object-top" alt="">
     </div>
 
     <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
@@ -40,7 +40,7 @@
     <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
 
       <div class="flex items-center gap-4 mb-4 flex-row-reverse">
-        <img src="../../assets/hero-images/spaceship2.png" class="w-[48%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/spaceship2.png" class="w-[48%] shrink-0 object-contain" alt="">
         <div class="flex-1 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
           <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
@@ -51,7 +51,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants1-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 7 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -60,7 +60,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals4-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 5 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -69,7 +69,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants5-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants5-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -78,7 +78,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals3-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals3-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 4 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -87,7 +87,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals2-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals2-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 + 8 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -96,7 +96,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants3-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 5 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -105,7 +105,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants6-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants6-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">10 + 7 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -114,7 +114,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals3-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals3-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 + 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -123,7 +123,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants1-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 + 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -132,7 +132,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants6-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants6-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 8 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -141,7 +141,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals5-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 5 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -150,7 +150,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants5-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants5-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 7 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -159,7 +159,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants3-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">8 + 6 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -168,7 +168,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants3-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -177,7 +177,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants1-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 8 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -186,7 +186,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants3-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">10 + 5 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -195,7 +195,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants4-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 + 7 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -204,7 +204,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants3-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 + 4 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -213,7 +213,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants1-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">9 + 6 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -222,7 +222,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals2-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals2-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">11 + 8 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -238,7 +238,7 @@
 
     <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
       <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet5.jpeg" class="w-full h-full object-cover object-top" alt="">
+      <img src="/assets/footers/planet5.jpeg" class="w-full h-full object-cover object-top" alt="">
     </div>
 
     <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
@@ -250,7 +250,7 @@
     <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
 
       <div class="flex items-center gap-4 mb-4">
-        <img src="../../assets/hero-images/spaceship4.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/spaceship4.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
         <div class="flex-1 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
           <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
@@ -261,7 +261,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals4-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -270,7 +270,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals1-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals1-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -279,7 +279,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals5-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -288,7 +288,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants2-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants2-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -297,7 +297,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals6-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals6-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -306,7 +306,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals5-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -315,7 +315,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants2-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants2-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -324,7 +324,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals5-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -333,7 +333,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals1-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals1-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -342,7 +342,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals4-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -351,7 +351,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals1-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals1-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -360,7 +360,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants4-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -369,7 +369,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants4-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -378,7 +378,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants4-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -387,7 +387,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals6-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals6-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -396,7 +396,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals4-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -405,7 +405,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals4-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -414,7 +414,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants2-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants2-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -423,7 +423,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals3-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals3-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -432,7 +432,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals2-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals2-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -448,7 +448,7 @@
 
     <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
       <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet1.jpeg" class="w-full h-full object-cover object-top" alt="">
+      <img src="/assets/footers/planet1.jpeg" class="w-full h-full object-cover object-top" alt="">
     </div>
 
     <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
@@ -460,7 +460,7 @@
     <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
 
       <div class="flex items-center gap-4 mb-4 flex-row-reverse">
-        <img src="../../assets/hero-images/spaceship6.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/spaceship6.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
         <div class="flex-1 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
           <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
@@ -471,7 +471,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants6-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants6-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 4 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -480,7 +480,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals6-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals6-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -489,7 +489,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals4-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 4 + 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -498,7 +498,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants6-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants6-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -507,7 +507,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals2-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals2-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 2 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -516,7 +516,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants1-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -525,7 +525,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals1-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals1-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 4 − 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -534,7 +534,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants5-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants5-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 4 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -543,7 +543,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants2-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants2-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 3 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -552,7 +552,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants4-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -561,7 +561,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals4-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals4-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 2 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -570,7 +570,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals5-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 2 + 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -579,7 +579,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants4-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 4 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -588,7 +588,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals3-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals3-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 1 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -597,7 +597,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals6-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals6-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 + 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -606,7 +606,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants5-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants5-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 1 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -615,7 +615,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants1-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants1-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 4 + 8 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -624,7 +624,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants4-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants4-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">1 × 3 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -633,7 +633,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/minerals5-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/minerals5-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 4 + 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -642,7 +642,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack1/plants3-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack1/plants3-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>

tasks/space-exploration/docs/space-worksheet2-example.html

@@ -28,7 +28,7 @@
 
     <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
       <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet2.jpeg" class="w-full h-full object-cover object-top" alt="">
+      <img src="/assets/footers/planet2.jpeg" class="w-full h-full object-cover object-top" alt="">
     </div>
 
     <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
@@ -40,7 +40,7 @@
     <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
 
       <div class="flex items-center gap-4 mb-4 flex-row-reverse">
-        <img src="../../assets/hero-images/spaceship1.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/spaceship1.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
         <div class="flex-1 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
           <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
@@ -51,7 +51,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">18 + 7 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -60,7 +60,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 − 9 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -69,7 +69,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">22 + 6 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -78,7 +78,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 − 8 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -87,7 +87,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">20 + 10 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -96,7 +96,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 − 7 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -105,7 +105,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">24 + 8 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -114,7 +114,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 − 6 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -123,7 +123,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">19 + 9 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -132,7 +132,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">13 − 10 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -141,7 +141,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">21 + 7 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -150,7 +150,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">17 − 8 − 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -159,7 +159,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">23 + 6 − 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -168,7 +168,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">12 + 10 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -177,7 +177,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">15 + 9 + 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -186,7 +186,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">20 − 7 + 3 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -195,7 +195,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">24 − 6 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -204,7 +204,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">18 + 8 − 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -213,7 +213,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">14 + 10 + 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -222,7 +222,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">16 − 9 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -238,7 +238,7 @@
 
     <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
       <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet4.jpeg" class="w-full h-full object-cover object-top" alt="">
+      <img src="/assets/footers/planet4.jpeg" class="w-full h-full object-cover object-top" alt="">
     </div>
 
     <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
@@ -250,7 +250,7 @@
     <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
 
       <div class="flex items-center gap-4 mb-4">
-        <img src="../../assets/hero-images/spaceship3.png" class="w-[48%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/spaceship3.png" class="w-[48%] shrink-0 object-contain" alt="">
         <div class="flex-1 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
           <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
@@ -263,7 +263,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -272,7 +272,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 7 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -281,7 +281,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -290,7 +290,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -299,7 +299,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 11 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -308,7 +308,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 5 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -317,7 +317,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 + 5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -326,7 +326,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-3-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 9 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -335,7 +335,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 6 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -344,7 +344,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -353,7 +353,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 8 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -362,7 +362,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 4 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -371,7 +371,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 10 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -380,7 +380,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 + 5 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -389,7 +389,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 12 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -398,7 +398,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 3 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -407,7 +407,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-0-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -416,7 +416,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 7 − 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -425,7 +425,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 8 + 5 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -434,7 +434,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">5 × 6 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -450,7 +450,7 @@
 
     <div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0">
       <div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
-      <img src="../../assets/footers/planet6.jpeg" class="w-full h-full object-cover object-top" alt="">
+      <img src="/assets/footers/planet6.jpeg" class="w-full h-full object-cover object-top" alt="">
     </div>
 
     <div class="absolute bottom-[12mm] left-0 right-0 z-20 flex justify-center">
@@ -462,7 +462,7 @@
     <div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
 
       <div class="flex items-center gap-4 mb-4 flex-row-reverse">
-        <img src="../../assets/hero-images/spaceship5.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
+        <img src="/assets/hero-images/spaceship5.jpeg" class="w-[48%] shrink-0 object-contain" alt="">
         <div class="flex-1 flex flex-col items-center justify-center text-center">
           <h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Исследуй Планету</h1>
           <p class="text-sm font-medium text-indigo-400 mt-1">Собери ресурсы, решая примеры!</p>
@@ -473,7 +473,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-1-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 2 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -482,7 +482,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -491,7 +491,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-2-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 1 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -500,7 +500,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -509,7 +509,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-2-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 3 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -518,7 +518,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem4-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem4-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -527,7 +527,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-0-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 1 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -536,7 +536,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-3-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 1 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -545,7 +545,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-0-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -554,7 +554,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 2 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -563,7 +563,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-1-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 3 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -572,7 +572,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-0-0.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 1 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -581,7 +581,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-3-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 3 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -590,7 +590,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-2-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -599,7 +599,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-3-1.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 1 + 2 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -608,7 +608,7 @@
 
         <div class="flex justify-center">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem3-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem3-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 3 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -617,7 +617,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 1 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -626,7 +626,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-2-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">3 × 2 + 3 × 2 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -635,7 +635,7 @@
 
         <div class="flex justify-end">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem2-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem2-1-2.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">4 × 2 + 2 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>
@@ -644,7 +644,7 @@
 
         <div class="flex justify-start">
           <div class="flex items-center gap-1">
-            <img src="../../assets/icons/pack2/elem1-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
+            <img src="/assets/icons/pack2/elem1-1-3.png" class="w-[58px] h-[58px] shrink-0 object-contain" alt="">
             <div class="pl-3 pr-4 py-1 border-[1.5px] border-indigo-100 rounded-full bg-gradient-to-br from-white to-indigo-50/40 shadow-sm shadow-indigo-100/30">
               <span class="text-[1.2rem] font-semibold text-indigo-950 whitespace-nowrap">2 × 2 + 3 × 1 = <span class="inline-block w-16 border-b-[2px] border-indigo-300">&nbsp;</span></span>
             </div>

tasks/space-exploration/index.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Explore the Planet &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:100px;filter:drop-shadow(0 4px 12px rgba(124,58,237,0.2));animation:bob 3s ease-in-out infinite; }
+    @keyframes bob { 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-pink));-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.1);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-orange));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(14,165,233,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-type { background:rgba(249,115,22,0.1);color:#c2410c;border:1px solid rgba(249,115,22,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; }
+    .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:60px} .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="/public/previews/categories/space-exploration.png" alt="">
+      <h1>Explore the Planet</h1>
+    </div>
+    <p class="header-desc">Solve math problems to collect space resources. Each worksheet has 20 problems per page with unique alien flora icons. Problems include addition, subtraction, and multiplication.</p>
+    <div class="docs">
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/space-exploration-1.png" alt=""></div>
+        <div class="doc-info">
+          <h3>Space Exploration 1</h3>
+          <div class="doc-details"><span class="tag tag-pages">3 pages</span><span class="tag tag-type">pack1 icons</span><br>Page 1: A + B &plusmn; C &bull; Page 2: 5 &times; N &plusmn; C &bull; Page 3: A &times; B &plusmn; C</div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/space-exploration/docs/space-exploration-1.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/space-exploration-1.template.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>
+          </div>
+        </div>
+      </div>
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/space-worksheet2.png" alt=""></div>
+        <div class="doc-info">
+          <h3>Space Worksheet 2</h3>
+          <div class="doc-details"><span class="tag tag-pages">3 pages</span><span class="tag tag-type">pack2 icons</span><br>Page 1: A + B + C (0&ndash;40) &bull; Page 2: fives &amp; 5&times;N &bull; Page 3: A&times;B + C&times;D</div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/space-exploration/docs/space-worksheet2.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/space-worksheet2.template.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>
+          </div>
+        </div>
+      </div>
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/space-worksheet3.png" alt=""></div>
+        <div class="doc-info">
+          <h3>Space Worksheet 3</h3>
+          <div class="doc-details"><span class="tag tag-pages">9 pages</span><span class="tag tag-type">pack1 + pack2</span><br>Combined patterns &bull; Pages 1&ndash;3 &amp; 7&ndash;9: basic ops &bull; Pages 4&ndash;6: compound</div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/space-exploration/docs/space-worksheet3.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/space-worksheet3.template.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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="site-footer">
+  <div class="planet-footer"><img src="/public/decor/planet-footer1.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/space-exploration/scripts/generate.mjs

@@ -14,6 +14,7 @@
 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');
@@ -43,3 +44,4 @@ if (existsSync(dataPath)) {
 
 writeFileSync(outputPath, html);
 console.log(`Generated: ${outputPath}`);
+await postGenerate(outputPath);

tasks/space-route/editor.html

@@ -45,7 +45,6 @@
     }
 
     .obj-draggable { cursor: grab; user-select: none; z-index: 20 !important; position: absolute; }
-    /* In node mode, objects become click-through */
     body.node-mode .obj-draggable { pointer-events: none !important; z-index: 4 !important; }
     body.node-mode .node-draggable { z-index: 20 !important; cursor: grab; }
     .obj-draggable:hover { outline: 2px solid rgba(99, 102, 241, 0.6); outline-offset: 2px; }
@@ -55,7 +54,6 @@
       width: 8px; height: 8px; background: #f59e0b; border-radius: 50%;
       border: 1px solid #1e1e2e; z-index: 100;
     }
-    /* Node dragging (Shift+click) */
     .node-draggable { cursor: grab; user-select: none; }
     .node-draggable:hover { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.4) !important; }
     .node-selected { box-shadow: 0 0 0 3px #f59e0b !important; }
@@ -79,7 +77,6 @@
       background: rgba(0,0,0,0.6); color: white; padding: 2px 8px;
       border-radius: 4px; font-size: 12px; pointer-events: none;
     }
-    /* Route highlight */
     line.route-highlight {
       stroke: #f87171 !important; stroke-width: 2.5 !important;
       opacity: 0.8 !important; stroke-dasharray: none !important;
@@ -117,100 +114,61 @@
 <div id="coord-tooltip"></div>
 <div id="toast"></div>
 
+<script src="/src/editor/editor-core.js"></script>
 <script>
 (function() {
-  const params = new URLSearchParams(location.search);
-  const fileParam = params.get('file') || 'space-route-1';
-  const file = 'docs/' + fileParam + '.template.html';
-  const docId = fileParam;
 
-  let pages = [];
+  // === Space-route specific state ===
-  let objects = [];       // draggable objects (images with data-node-id)
+  let objects = [];
-  let nodeEls = [];       // all node divs
+  let nodeEls = [];
-  let originalState = new Map();   // obj originals
+  let originalState = new Map();
-  let nodeOrigState = new Map();   // node originals
+  let nodeOrigState = new Map();
-  let selectedObj = null;          // selected object OR node
+  let selectedObj = null;
-  let selectedType = null;         // 'obj' or 'node'
+  let selectedType = null; // 'obj' or 'node'
   let dragging = null;
   let dragStart = null;
-  let mmToPx = 1;
-  let currentPage = 0;
   let routeHighlight = false;
-  let editMode = 'objects'; // 'objects' or 'nodes'
+  let editMode = 'objects';
 
-  fetch(file)
+  // === Init via EditorCore ===
-    .then(r => { if (!r.ok) throw new Error(r.status); return r.text(); })
+  const core = EditorCore.init({
-    .then(html => {
+    taskType: 'space-route',
-      const parser = new DOMParser();
+    serialize: buildConfig,
-      const doc = parser.parseFromString(html, 'text/html');
+    onReset: resetCurrentPage,
-      const container = document.getElementById('worksheet-container');
+    onReady: function(pages, mmToPx) {
+      setupObjects();
+      setupNodes();
+      setupGlobalEvents();
 
-      const tw = document.createElement('script');
+      document.getElementById('btn-flip').addEventListener('click', flipSelected);
-      tw.src = 'https://cdn.tailwindcss.com';
+      document.getElementById('btn-mode').addEventListener('click', toggleMode);
-      document.head.appendChild(tw);
+      document.getElementById('btn-route').addEventListener('click', toggleRouteHL);
 
-      doc.querySelectorAll('head script:not([src])').forEach(s => {
+      window.getConfig = () => buildConfig(false);
-        const ns = document.createElement('script');
+      window.getChanges = () => buildConfig(true);
-        ns.textContent = s.textContent;
-        document.head.appendChild(ns);
-      });
-      doc.querySelectorAll('head style').forEach(s => {
-        const ns = document.createElement('style');
-        ns.textContent = s.textContent;
-        document.head.appendChild(ns);
-      });
-      doc.querySelectorAll('head link').forEach(l => {
-        document.head.appendChild(l.cloneNode(true));
-      });
-
-      container.innerHTML = doc.body.innerHTML;
-      setTimeout(() => initEditor(), 400);
-    })
-    .catch(err => {
-      document.getElementById('worksheet-container').innerHTML =
-        `<p style="padding:80px 20px;color:#f38ba8;">Failed to load ${file}: ${err.message}</p>`;
-    });
-
-  function initEditor() {
-    pages = Array.from(document.querySelectorAll('.w-\\[210mm\\]'));
-    pages.forEach((p, i) => {
-      p.dataset.page = i + 1;
-      p.style.position = 'relative';
-      const label = document.createElement('div');
-      label.className = 'page-label';
-      label.textContent = `Page ${i + 1}`;
-      p.appendChild(label);
-    });
-
-    document.getElementById('page-indicator').textContent = `Page 1 / ${pages.length}`;
-
-    if (pages.length > 0) {
-      mmToPx = pages[0].getBoundingClientRect().width / 210;
     }
+  });
 
-    // Find all space objects (images with data-node-id)
+  if (!core) return;
+
+  // === Setup objects ===
+  function setupObjects() {
     document.querySelectorAll('img.space-obj').forEach((img, idx) => {
       const page = img.closest('[data-page]');
       const pageNum = page ? parseInt(page.dataset.page) : 0;
       const nodeId = img.dataset.nodeId;
-
-      // Wrap in a container div for positioning if not already
-      // Objects are already absolutely positioned images
       const left = parseFloat(img.style.left) || 0;
       const top = parseFloat(img.style.top) || 0;
       const w = parseFloat(img.style.width) || 24;
       const h = parseFloat(img.style.height) || 24;
 
-      // Parse transform
       let rotate = 0, scaleX = 1, scaleY = 1;
       if (img.style.transform) {
         const rotM = img.style.transform.match(/rotate\(([-\d.]+)deg\)/);
         const scxM = img.style.transform.match(/scaleX\(([-\d.]+)\)/);
-        const scyM = img.style.transform.match(/scaleY\(([-\d.]+)\)/);
         const scM = img.style.transform.match(/scale\(([-\d.]+)\)/);
         if (rotM) rotate = parseFloat(rotM[1]);
         if (scxM) scaleX = parseFloat(scxM[1]);
-        if (scyM) scaleY = parseFloat(scyM[1]);
         if (scM) scaleX = scaleY = parseFloat(scM[1]);
       }
 
@@ -220,27 +178,23 @@
       img.style.position = 'absolute';
 
       originalState.set(id, { left, top, w, h, rotate, scaleX, scaleY });
-
       img.classList.add('obj-draggable');
       img.draggable = false;
 
-      objects.push({
+      objects.push({ el: img, id, pageNum, nodeId, type: img.dataset.type, src: img.src.split('/').pop() });
-        el: img, id, pageNum, nodeId,
-        type: img.dataset.type,
-        src: img.src.split('/').pop()
-      });
 
       img.addEventListener('mousedown', (e) => {
-        e.preventDefault();
+        e.preventDefault(); e.stopPropagation();
-        e.stopPropagation();
         selectObj(img, id);
         startDrag(img, e);
       });
     });
+  }
 
-    // Init nodes (Shift+click to select)
+  // === Setup nodes ===
+  function setupNodes() {
     document.querySelectorAll('[data-node-id]').forEach(nodeDiv => {
-      if (nodeDiv.tagName === 'IMG') return; // skip objects, only div nodes
+      if (nodeDiv.tagName === 'IMG') return;
       const page = nodeDiv.closest('[data-page]');
       const pageNum = page ? parseInt(page.dataset.page) : 0;
       const nodeId = nodeDiv.dataset.nodeId;
@@ -252,95 +206,54 @@
 
       nodeOrigState.set(nid, { left, top });
       nodeDiv.classList.add('node-draggable');
-
       nodeEls.push({ el: nodeDiv, nid, pageNum, nodeId });
 
       nodeDiv.addEventListener('mousedown', (e) => {
         if (editMode !== 'nodes') return;
-        e.preventDefault();
+        e.preventDefault(); e.stopPropagation();
-        e.stopPropagation();
         selectNode(nodeDiv, nid);
         startDrag(nodeDiv, e);
       });
     });
+  }
 
-    // Page scroll tracking
+  // === Global events ===
-    const observer = new IntersectionObserver((entries) => {
+  function setupGlobalEvents() {
-      entries.forEach(entry => {
-        if (entry.isIntersecting && entry.intersectionRatio > 0.3) {
-          currentPage = parseInt(entry.target.dataset.page) - 1;
-          document.getElementById('page-indicator').textContent =
-            `Page ${currentPage + 1} / ${pages.length}`;
-        }
-      });
-    }, { threshold: [0.3] });
-    pages.forEach(p => observer.observe(p));
-
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
+    document.addEventListener('keydown', onKeyDown);
 
     document.getElementById('worksheet-container').addEventListener('mousedown', (e) => {
       if (!e.target.closest('.obj-draggable')) deselectAll();
     });
-
-    document.addEventListener('keydown', onKeyDown);
-
-    document.getElementById('btn-prev').addEventListener('click', () => scrollToPage(currentPage - 1));
-    document.getElementById('btn-next').addEventListener('click', () => scrollToPage(currentPage + 1));
-    document.getElementById('btn-copy').addEventListener('click', () => copyConfig(false));
-    document.getElementById('btn-copy-changes').addEventListener('click', () => copyConfig(true));
-    document.getElementById('btn-reset').addEventListener('click', resetCurrentPage);
-    document.getElementById('btn-flip').addEventListener('click', flipSelected);
-    document.getElementById('btn-mode').addEventListener('click', toggleMode);
-    document.getElementById('btn-route').addEventListener('click', toggleRouteHL);
-    document.getElementById('btn-save').addEventListener('click', saveToServer);
-
-    window.getConfig = () => buildConfig(false);
-    window.getChanges = () => buildConfig(true);
-
-    window.addEventListener('resize', () => {
-      if (pages.length > 0) mmToPx = pages[0].getBoundingClientRect().width / 210;
-    });
   }
 
+  // === Selection ===
   function selectObj(el, id) {
     deselectAll();
     el.classList.add('obj-selected');
-    selectedObj = el;
+    selectedObj = el; selectedType = 'obj';
-    selectedType = 'obj';
+    updateObjStatus(el, id);
-    updateStatus(el, id);
   }
 
   function selectNode(el, nid) {
     deselectAll();
     el.classList.add('node-selected');
-    selectedObj = el;
+    selectedObj = el; selectedType = 'node';
-    selectedType = 'node';
-    const left = parseFloat(el.style.left).toFixed(1);
-    const top = parseFloat(el.style.top).toFixed(1);
     const val = el.querySelector('span')?.textContent || '?';
-    document.getElementById('status-info').textContent =
+    document.getElementById('status-info').textContent = `NODE | Page ${el.dataset.pageNum} | id:${el.dataset.nodeId} | value:${val}`;
-      `NODE | Page ${el.dataset.pageNum} | id:${el.dataset.nodeId} | value:${val}`;
+    document.getElementById('status-pos').textContent = `pos: ${parseFloat(el.style.left).toFixed(1)}, ${parseFloat(el.style.top).toFixed(1)}mm`;
-    document.getElementById('status-pos').textContent = `pos: ${left}, ${top}mm`;
   }
 
   function deselectAll() {
-    document.querySelectorAll('.obj-selected').forEach(el => el.classList.remove('obj-selected'));
+    document.querySelectorAll('.obj-selected, .node-selected').forEach(el => el.classList.remove('obj-selected', 'node-selected'));
-    document.querySelectorAll('.node-selected').forEach(el => el.classList.remove('node-selected'));
+    selectedObj = null; selectedType = null;
-    selectedObj = null;
+    document.getElementById('status-info').textContent = editMode === 'objects' ? 'Click an object to select' : 'Click a node to select';
-    selectedType = null;
-    document.getElementById('status-info').textContent = 'Click object / Shift+click node';
     document.getElementById('status-pos').textContent = '';
   }
 
-  function updateStatus(el, id) {
+  function updateObjStatus(el, id) {
-    const left = parseFloat(el.style.left).toFixed(1);
-    const top = parseFloat(el.style.top).toFixed(1);
-    const w = parseFloat(el.style.width).toFixed(0);
-    const h = parseFloat(el.style.height).toFixed(0);
     const obj = objects.find(o => o.id === id);
-    const page = el.dataset.pageNum || '?';
-
     let rotStr = '0', flipStr = '';
     if (el.style.transform) {
       const rotM = el.style.transform.match(/rotate\(([-\d.]+)deg\)/);
@@ -348,93 +261,49 @@
       if (rotM) rotStr = Math.round(parseFloat(rotM[1]));
       if (scxM && parseFloat(scxM[1]) < 0) flipStr = ' FLIP';
     }
-
+    document.getElementById('status-info').textContent = `Page ${el.dataset.pageNum} | node:${obj?.nodeId} | ${obj?.src || ''}`;
-    document.getElementById('status-info').textContent =
+    document.getElementById('status-pos').textContent = `pos: ${parseFloat(el.style.left).toFixed(1)}, ${parseFloat(el.style.top).toFixed(1)}mm | size: ${parseFloat(el.style.width).toFixed(0)}×${parseFloat(el.style.height).toFixed(0)}mm | rot: ${rotStr}°${flipStr}`;
-      `Page ${page} | node:${obj?.nodeId} | ${obj?.src || ''}`;
-    document.getElementById('status-pos').textContent =
-      `pos: ${left}, ${top}mm | size: ${w}×${h}mm | rot: ${rotStr}°${flipStr}`;
   }
 
-  // Move the corresponding node and connected edges when an object moves
+  // === Graph helpers ===
   function moveNodeAndEdges(el, newLeft, newTop) {
     const nodeId = el.dataset.nodeId;
     if (!nodeId) return;
-
     const page = el.closest('[data-page]');
     if (!page) return;
-
-    // Find the node div
     const nodeDiv = page.querySelector(`[data-node-id="${nodeId}"]`);
-    if (nodeDiv) {
+    if (nodeDiv) { nodeDiv.style.left = newLeft.toFixed(1) + 'mm'; nodeDiv.style.top = newTop.toFixed(1) + 'mm'; }
-      nodeDiv.style.left = newLeft.toFixed(1) + 'mm';
+    _updateEdges(page, nodeId, newLeft, newTop);
-      nodeDiv.style.top = newTop.toFixed(1) + 'mm';
-    }
-
-    // Update all edges connected to this node
-    const svg = page.querySelector('svg');
-    if (!svg) return;
-
-    svg.querySelectorAll(`line[data-edge]`).forEach(line => {
-      const [a, b] = line.dataset.edge.split('-');
-      if (a === nodeId) {
-        line.setAttribute('x1', newLeft.toFixed(1) + 'mm');
-        line.setAttribute('y1', newTop.toFixed(1) + 'mm');
-      }
-      if (b === nodeId) {
-        line.setAttribute('x2', newLeft.toFixed(1) + 'mm');
-        line.setAttribute('y2', newTop.toFixed(1) + 'mm');
-      }
-    });
   }
 
-  // Move only edges for a node (without moving the node itself — used when dragging node directly)
   function moveEdgesForNode(nodeDiv, newLeft, newTop) {
-    const nodeId = nodeDiv.dataset.nodeId;
     const page = nodeDiv.closest('[data-page]');
     if (!page) return;
+    _updateEdges(page, nodeDiv.dataset.nodeId, newLeft, newTop);
+  }
+
+  function _updateEdges(page, nodeId, left, top) {
     const svg = page.querySelector('svg');
     if (!svg) return;
     svg.querySelectorAll('line[data-edge]').forEach(line => {
       const [a, b] = line.dataset.edge.split('-');
-      if (a === nodeId) {
+      if (a === nodeId) { line.setAttribute('x1', left.toFixed(1) + 'mm'); line.setAttribute('y1', top.toFixed(1) + 'mm'); }
-        line.setAttribute('x1', newLeft.toFixed(1) + 'mm');
+      if (b === nodeId) { line.setAttribute('x2', left.toFixed(1) + 'mm'); line.setAttribute('y2', top.toFixed(1) + 'mm'); }
-        line.setAttribute('y1', newTop.toFixed(1) + 'mm');
-      }
-      if (b === nodeId) {
-        line.setAttribute('x2', newLeft.toFixed(1) + 'mm');
-        line.setAttribute('y2', newTop.toFixed(1) + 'mm');
-      }
     });
   }
 
-  function markNodeChanged(nodeDiv) {
+  // === Dragging ===
-    const nid = nodeDiv.dataset.nid;
-    const orig = nodeOrigState.get(nid);
-    if (!orig) return;
-    const curLeft = parseFloat(nodeDiv.style.left);
-    const curTop = parseFloat(nodeDiv.style.top);
-    const changed = Math.abs(orig.left - curLeft) > 0.3 || Math.abs(orig.top - curTop) > 0.3;
-    nodeDiv.classList.toggle('node-changed', changed);
-  }
-
   function startDrag(el, e) {
     dragging = el;
-    dragStart = {
+    dragStart = { mouseX: e.clientX, mouseY: e.clientY, left: parseFloat(el.style.left) || 0, top: parseFloat(el.style.top) || 0 };
-      mouseX: e.clientX, mouseY: e.clientY,
-      left: parseFloat(el.style.left) || 0,
-      top: parseFloat(el.style.top) || 0
-    };
     document.body.classList.add('dragging');
-    document.getElementById('coord-tooltip').style.display = 'block';
   }
 
   function onMouseMove(e) {
     if (!dragging) return;
     e.preventDefault();
-
+    const dx = (e.clientX - dragStart.mouseX) / core.mmToPx;
-    const dx = (e.clientX - dragStart.mouseX) / mmToPx;
+    const dy = (e.clientY - dragStart.mouseY) / core.mmToPx;
-    const dy = (e.clientY - dragStart.mouseY) / mmToPx;
-
     const newLeft = Math.round((dragStart.left + dx) * 2) / 2;
     const newTop = Math.round((dragStart.top + dy) * 2) / 2;
 
@@ -442,60 +311,48 @@
     dragging.style.top = newTop.toFixed(1) + 'mm';
 
     if (selectedType === 'obj') {
-      // Update margin to keep object centered
       const w = parseFloat(dragging.style.width) || 24;
       const h = parseFloat(dragging.style.height) || 24;
       dragging.style.marginLeft = (-w / 2) + 'mm';
       dragging.style.marginTop = (-h / 2) + 'mm';
-      updateStatus(dragging, dragging.dataset.objId);
+      updateObjStatus(dragging, dragging.dataset.objId);
-      markChanged(dragging);
+      markObjChanged(dragging);
     } else if (selectedType === 'node') {
-      // Update margin for node centering
       const size = parseFloat(dragging.style.width) || 10;
       dragging.style.marginLeft = (-size / 2) + 'mm';
       dragging.style.marginTop = (-size / 2) + 'mm';
-      // Move connected edges
       moveEdgesForNode(dragging, newLeft, newTop);
       markNodeChanged(dragging);
-      // Update status
-      const val = dragging.querySelector('span')?.textContent || '?';
-      document.getElementById('status-info').textContent =
-        `NODE | Page ${dragging.dataset.pageNum} | id:${dragging.dataset.nodeId} | value:${val}`;
       document.getElementById('status-pos').textContent = `pos: ${newLeft.toFixed(1)}, ${newTop.toFixed(1)}mm`;
     }
 
-    const tooltip = document.getElementById('coord-tooltip');
+    core.showTooltip(e, `${newLeft.toFixed(1)}, ${newTop.toFixed(1)}mm`);
-    tooltip.textContent = `${newLeft.toFixed(1)}, ${newTop.toFixed(1)}mm`;
-    tooltip.style.left = (e.clientX + 15) + 'px';
-    tooltip.style.top = (e.clientY - 10) + 'px';
   }
 
   function onMouseUp() {
     if (!dragging) return;
     document.body.classList.remove('dragging');
-    document.getElementById('coord-tooltip').style.display = 'none';
+    core.hideTooltip();
-    dragging = null;
+    dragging = null; dragStart = null;
-    dragStart = null;
   }
 
+  // === Keyboard ===
   function onKeyDown(e) {
     if (e.key === 'm' || e.key === 'M') { toggleMode(); return; }
     if (e.key === 'r' || e.key === 'R') { toggleRouteHL(); return; }
     if (e.key === 'h' || e.key === 'H') { if (selectedType === 'obj') flipSelected(); return; }
     if (e.key === 'Escape') { deselectAll(); return; }
-
     if (!selectedObj) return;
 
-    // Node mode: only arrows
     if (selectedType === 'node') {
       const step = e.shiftKey ? 5 : 1;
       let left = parseFloat(selectedObj.style.left) || 0;
       let top = parseFloat(selectedObj.style.top) || 0;
       switch (e.key) {
-        case 'ArrowLeft':  left -= step; break;
+        case 'ArrowLeft': left -= step; break;
         case 'ArrowRight': left += step; break;
-        case 'ArrowUp':    top -= step; break;
+        case 'ArrowUp': top -= step; break;
-        case 'ArrowDown':  top += step; break;
+        case 'ArrowDown': top += step; break;
         default: return;
       }
       e.preventDefault();
@@ -506,12 +363,11 @@
       selectedObj.style.marginTop = (-size / 2) + 'mm';
       moveEdgesForNode(selectedObj, left, top);
       markNodeChanged(selectedObj);
-      const val = selectedObj.querySelector('span')?.textContent || '?';
       document.getElementById('status-pos').textContent = `pos: ${left.toFixed(1)}, ${top.toFixed(1)}mm`;
       return;
     }
 
-    // Object mode: arrows + rotate + resize
+    // Object mode
     const step = e.shiftKey ? 5 : 1;
     let left = parseFloat(selectedObj.style.left) || 0;
     let top = parseFloat(selectedObj.style.top) || 0;
@@ -521,69 +377,53 @@
     const rotStep = e.shiftKey ? 1 : 5;
 
     switch (e.key) {
-      case 'ArrowLeft':  left -= step; break;
+      case 'ArrowLeft': left -= step; break;
       case 'ArrowRight': left += step; break;
-      case 'ArrowUp':    top -= step; break;
+      case 'ArrowUp': top -= step; break;
-      case 'ArrowDown':  top += step; break;
+      case 'ArrowDown': top += step; break;
       case '[': applyRotate(selectedObj, -rotStep); break;
       case ']': applyRotate(selectedObj, rotStep); break;
       case '-': case '_':
-        w = Math.max(8, w - sizeStep);
+        w = Math.max(8, w - sizeStep); h = Math.max(8, h - sizeStep * (h / w));
-        h = Math.max(8, h - sizeStep * (h / w));
+        selectedObj.style.width = w + 'mm'; selectedObj.style.height = h + 'mm';
-        selectedObj.style.width = w + 'mm';
+        selectedObj.style.marginLeft = (-w / 2) + 'mm'; selectedObj.style.marginTop = (-h / 2) + 'mm';
-        selectedObj.style.height = h + 'mm';
-        selectedObj.style.marginLeft = (-w / 2) + 'mm';
-        selectedObj.style.marginTop = (-h / 2) + 'mm';
         break;
       case '=': case '+':
-        w = Math.min(60, w + sizeStep);
+        w = Math.min(60, w + sizeStep); h = Math.min(60, h + sizeStep * (h / w));
-        h = Math.min(60, h + sizeStep * (h / w));
+        selectedObj.style.width = w + 'mm'; selectedObj.style.height = h + 'mm';
-        selectedObj.style.width = w + 'mm';
+        selectedObj.style.marginLeft = (-w / 2) + 'mm'; selectedObj.style.marginTop = (-h / 2) + 'mm';
-        selectedObj.style.height = h + 'mm';
-        selectedObj.style.marginLeft = (-w / 2) + 'mm';
-        selectedObj.style.marginTop = (-h / 2) + 'mm';
         break;
       default: return;
     }
-
     e.preventDefault();
     selectedObj.style.left = left.toFixed(1) + 'mm';
     selectedObj.style.top = top.toFixed(1) + 'mm';
     selectedObj.style.marginLeft = (-parseFloat(selectedObj.style.width) / 2) + 'mm';
     selectedObj.style.marginTop = (-parseFloat(selectedObj.style.height) / 2) + 'mm';
-
+    updateObjStatus(selectedObj, selectedObj.dataset.objId);
-    updateStatus(selectedObj, selectedObj.dataset.objId);
+    markObjChanged(selectedObj);
-    markChanged(selectedObj);
   }
 
+  // === Transform helpers ===
   function applyRotate(el, delta) {
     let transform = el.style.transform || '';
     const rotM = transform.match(/rotate\(([-\d.]+)deg\)/);
     let rot = rotM ? parseFloat(rotM[1]) : 0;
     rot += delta;
-    if (rotM) {
+    transform = rotM ? transform.replace(/rotate\([-\d.]+deg\)/, `rotate(${rot}deg)`) : transform + ` rotate(${rot}deg)`;
-      transform = transform.replace(/rotate\([-\d.]+deg\)/, `rotate(${rot}deg)`);
-    } else {
-      transform += ` rotate(${rot}deg)`;
-    }
     el.style.transform = transform.trim();
-    markChanged(el);
+    markObjChanged(el);
   }
 
   function flipSelected() {
     if (!selectedObj) return;
     let transform = selectedObj.style.transform || '';
     const scxM = transform.match(/scaleX\(([-\d.]+)\)/);
-    let scx = scxM ? parseFloat(scxM[1]) : 1;
+    let scx = scxM ? (parseFloat(scxM[1]) < 0 ? 1 : -1) : -1;
-    scx = scx < 0 ? 1 : -1;
+    transform = scxM ? transform.replace(/scaleX\([-\d.]+\)/, `scaleX(${scx})`) : transform + ` scaleX(${scx})`;
-    if (scxM) {
-      transform = transform.replace(/scaleX\([-\d.]+\)/, `scaleX(${scx})`);
-    } else {
-      transform += ` scaleX(${scx})`;
-    }
     selectedObj.style.transform = transform.trim();
-    updateStatus(selectedObj, selectedObj.dataset.objId);
+    updateObjStatus(selectedObj, selectedObj.dataset.objId);
-    markChanged(selectedObj);
+    markObjChanged(selectedObj);
   }
 
   function toggleMode() {
@@ -593,55 +433,30 @@
     const btn = document.getElementById('btn-mode');
     btn.textContent = editMode === 'objects' ? 'Mode: Objects' : 'Mode: Nodes';
     btn.classList.toggle('active', editMode === 'nodes');
-    document.getElementById('status-info').textContent =
-      editMode === 'objects' ? 'Click an object to select' : 'Click a node to select';
   }
 
   function toggleRouteHL() {
     routeHighlight = !routeHighlight;
-    const btn = document.getElementById('btn-route');
+    document.getElementById('btn-route').classList.toggle('active', routeHighlight);
-    btn.classList.toggle('active', routeHighlight);
+    core.pages.forEach(pageEl => {
-
-    pages.forEach(pageEl => {
       const routeStr = pageEl.dataset.enemyRoute;
       if (!routeStr) return;
       const route = routeStr.split(',');
-
-      // Build set of edge keys on the route
       const routeEdges = new Set();
       for (let i = 0; i < route.length - 1; i++) {
         const a = parseInt(route[i]), b = parseInt(route[i + 1]);
         routeEdges.add(`${Math.min(a, b)}-${Math.max(a, b)}`);
       }
-
       pageEl.querySelectorAll('line[data-edge]').forEach(line => {
         const [ea, eb] = line.dataset.edge.split('-').map(Number);
-        const key = `${Math.min(ea, eb)}-${Math.max(ea, eb)}`;
+        if (routeEdges.has(`${Math.min(ea, eb)}-${Math.max(ea, eb)}`)) {
-        if (routeEdges.has(key)) {
           line.classList.toggle('route-highlight', routeHighlight);
         }
       });
     });
   }
 
-  function markChanged(el) {
+  // === Change tracking ===
-    const id = el.dataset.objId;
-    const orig = originalState.get(id);
-    if (!orig) return;
-    const curLeft = parseFloat(el.style.left);
-    const curTop = parseFloat(el.style.top);
-    const curW = parseFloat(el.style.width);
-    const curH = parseFloat(el.style.height);
-    const changed = (
-      Math.abs(orig.left - curLeft) > 0.3 ||
-      Math.abs(orig.top - curTop) > 0.3 ||
-      Math.abs(orig.w - curW) > 0.3 ||
-      Math.abs(orig.h - curH) > 0.3 ||
-      (el.style.transform || '') !== buildOrigTransform(orig)
-    );
-    el.classList.toggle('obj-changed', changed);
-  }
-
   function buildOrigTransform(orig) {
     let t = '';
     if (orig.scaleX < 0) t += `scaleX(${orig.scaleX})`;
@@ -649,25 +464,37 @@
     return t.trim();
   }
 
-  function scrollToPage(index) {
+  function markObjChanged(el) {
-    if (index < 0 || index >= pages.length) return;
+    const id = el.dataset.objId;
-    pages[index].scrollIntoView({ behavior: 'smooth', block: 'start' });
+    const orig = originalState.get(id);
+    if (!orig) return;
+    const changed = Math.abs(orig.left - parseFloat(el.style.left)) > 0.3 ||
+                    Math.abs(orig.top - parseFloat(el.style.top)) > 0.3 ||
+                    Math.abs(orig.w - parseFloat(el.style.width)) > 0.3 ||
+                    Math.abs(orig.h - parseFloat(el.style.height)) > 0.3 ||
+                    (el.style.transform || '') !== buildOrigTransform(orig);
+    el.classList.toggle('obj-changed', changed);
   }
 
-  function buildConfig(changesOnly) {
+  function markNodeChanged(nodeDiv) {
-    const result = { file, pages: [] };
+    const nid = nodeDiv.dataset.nid;
+    const orig = nodeOrigState.get(nid);
+    if (!orig) return;
+    const changed = Math.abs(orig.left - parseFloat(nodeDiv.style.left)) > 0.3 || Math.abs(orig.top - parseFloat(nodeDiv.style.top)) > 0.3;
+    nodeDiv.classList.toggle('node-changed', changed);
+  }
 
-    pages.forEach((pageEl, pageIndex) => {
+  // === Serialization ===
+  function buildConfig(changesOnly) {
+    const result = { file: core.docId, pages: [] };
+
+    core.pages.forEach((pageEl, pageIndex) => {
       const pageObjs = objects.filter(o => o.pageNum === pageIndex + 1);
       const items = [];
-
       pageObjs.forEach(obj => {
         const el = obj.el;
-        const left = parseFloat(el.style.left);
+        const left = parseFloat(el.style.left), top = parseFloat(el.style.top);
-        const top = parseFloat(el.style.top);
+        const w = parseFloat(el.style.width), h = parseFloat(el.style.height);
-        const w = parseFloat(el.style.width);
-        const h = parseFloat(el.style.height);
-
         let rotate = 0, flipH = false;
         if (el.style.transform) {
           const rotM = el.style.transform.match(/rotate\(([-\d.]+)deg\)/);
@@ -675,44 +502,23 @@
           if (rotM) rotate = Math.round(parseFloat(rotM[1]));
           if (scxM && parseFloat(scxM[1]) < 0) flipH = true;
         }
-
         const orig = originalState.get(obj.id);
         if (changesOnly && orig) {
-          const origTransform = buildOrigTransform(orig);
+          const same = Math.abs(orig.left - left) < 0.3 && Math.abs(orig.top - top) < 0.3 &&
-          const same = Math.abs(orig.left - left) < 0.3 &&
+                       Math.abs(orig.w - w) < 0.3 && Math.abs(orig.h - h) < 0.3 &&
-                       Math.abs(orig.top - top) < 0.3 &&
+                       (el.style.transform || '') === buildOrigTransform(orig);
-                       Math.abs(orig.w - w) < 0.3 &&
-                       Math.abs(orig.h - h) < 0.3 &&
-                       (el.style.transform || '') === origTransform;
           if (same) return;
         }
-
+        items.push({ nodeId: parseInt(obj.nodeId), type: obj.type, src: obj.src, left: left.toFixed(1) + 'mm', top: top.toFixed(1) + 'mm', w: w.toFixed(0) + 'mm', h: h.toFixed(0) + 'mm', rotate, flipH });
-        items.push({
-          nodeId: parseInt(obj.nodeId),
-          type: obj.type,
-          src: obj.src,
-          left: left.toFixed(1) + 'mm',
-          top: top.toFixed(1) + 'mm',
-          w: w.toFixed(0) + 'mm',
-          h: h.toFixed(0) + 'mm',
-          rotate, flipH
-        });
       });
 
-      // Collect changed nodes for this page
       const pageNodes = nodeEls.filter(n => n.pageNum === pageIndex + 1);
       const movedNodes = [];
       pageNodes.forEach(nd => {
-        const el = nd.el;
+        const left = parseFloat(nd.el.style.left), top = parseFloat(nd.el.style.top);
-        const left = parseFloat(el.style.left);
-        const top = parseFloat(el.style.top);
         const orig = nodeOrigState.get(nd.nid);
         if (changesOnly && orig && Math.abs(orig.left - left) < 0.3 && Math.abs(orig.top - top) < 0.3) return;
-        movedNodes.push({
+        movedNodes.push({ nodeId: parseInt(nd.nodeId), left: left.toFixed(1) + 'mm', top: top.toFixed(1) + 'mm' });
-          nodeId: parseInt(nd.nodeId),
-          left: left.toFixed(1) + 'mm',
-          top: top.toFixed(1) + 'mm'
-        });
       });
 
       if (items.length > 0 || movedNodes.length > 0) {
@@ -722,70 +528,24 @@
         result.pages.push(pageData);
       }
     });
-
     return result;
   }
 
-  function copyConfig(changesOnly) {
+  // === Reset ===
-    const config = buildConfig(changesOnly);
+  function resetCurrentPage(pageNum) {
-    const json = JSON.stringify(config, null, 2);
-    navigator.clipboard.writeText(json).then(() => {
-      showToast(changesOnly ? 'Changes copied!' : 'Full config copied!');
-    }).catch(() => {
-      console.log(json);
-      showToast('Copied to console (clipboard blocked)');
-    });
-  }
-
-  function resetCurrentPage() {
-    const pageNum = currentPage + 1;
     objects.filter(o => o.pageNum === pageNum).forEach(obj => {
       const orig = originalState.get(obj.id);
       if (!orig) return;
-      obj.el.style.left = orig.left + 'mm';
+      obj.el.style.left = orig.left + 'mm'; obj.el.style.top = orig.top + 'mm';
-      obj.el.style.top = orig.top + 'mm';
+      obj.el.style.width = orig.w + 'mm'; obj.el.style.height = orig.h + 'mm';
-      obj.el.style.width = orig.w + 'mm';
+      obj.el.style.marginLeft = (-orig.w / 2) + 'mm'; obj.el.style.marginTop = (-orig.h / 2) + 'mm';
-      obj.el.style.height = orig.h + 'mm';
-      obj.el.style.marginLeft = (-orig.w / 2) + 'mm';
-      obj.el.style.marginTop = (-orig.h / 2) + 'mm';
       obj.el.style.transform = buildOrigTransform(orig);
       obj.el.classList.remove('obj-changed');
-
-      // Reset node and edges too
       moveNodeAndEdges(obj.el, orig.left, orig.top);
     });
-    showToast(`Page ${pageNum} reset`);
+    core.showToast(`Page ${pageNum} reset`);
   }
 
-  async function saveToServer() {
-    const config = buildConfig(false);
-    try {
-      const resp = await fetch('/api/save-edits', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          taskType: 'space-route',
-          docId: docId,
-          data: config
-        })
-      });
-      const result = await resp.json();
-      if (result.ok) {
-        showToast('Saved!');
-      } else {
-        showToast('Error: ' + result.error);
-      }
-    } catch (e) {
-      showToast('Save failed: ' + e.message);
-    }
-  }
-
-  function showToast(msg) {
-    const toast = document.getElementById('toast');
-    toast.textContent = msg;
-    toast.classList.add('show');
-    setTimeout(() => toast.classList.remove('show'), 1500);
-  }
 })();
 </script>
 </body>

tasks/space-route/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Plot the Route &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(13,148,136,0.25));animation:bob 3s ease-in-out infinite; }
+    @keyframes bob { 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-teal),var(--accent-violet));-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(13,148,136,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-teal),var(--accent-violet));z-index:-1;opacity:0.25;transition:opacity 0.2s; }
+    .doc-card:hover { transform:translateY(-3px);box-shadow:0 12px 36px rgba(13,148,136,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(13,148,136,0.06),rgba(124,58,237,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; }
+    .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-teal); }
+    @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="/public/previews/categories/space-route.png" alt="">
+      <h1>Plot the Route</h1>
+    </div>
+    <p class="header-desc">Navigate through a hex grid of space nodes. The enemy pirate ship follows a hidden path &mdash; trace it by applying the mathematical operations shown on the route card.</p>
+    <div class="docs">
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/space-route-1.png" alt=""></div>
+        <div class="doc-info">
+          <h3>Space Route 1</h3>
+          <div class="doc-details"><span class="tag tag-pages">9 pages</span><span class="tag tag-diff">Progressive difficulty</span><br>Node values: 3&ndash;13 &bull; Neighbor spread: 1&ndash;5<br>Route: 7&ndash;9 steps &bull; Asteroids, crystals, freighters</div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/space-route/docs/space-route-1.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/space-route-1.template.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/space-route/editor.html?file=space-route-1">Editor</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="site-footer">
+  <div class="planet-footer"><img src="/public/decor/planet-footer3.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/space-route/scripts/generate.mjs

@@ -23,6 +23,7 @@
 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');
@@ -52,6 +53,7 @@ if (existsSync(dataPath)) {
 
 writeFileSync(outputPath, html);
 console.log(`Generated: ${outputPath}`);
+await postGenerate(outputPath);
 
 function applyData(html, data) {
   if (!data.pages) return html;