doc: presentation

promotion/presentation1/BRIEF.md

@@ -0,0 +1,259 @@
+# Presentation Brief: FunSheet Studio — Free Worksheets Pitch
+
+## Assignment
+
+Create a visually compelling presentation that "sells" the idea of free, beautifully designed, themed educational worksheets for children aged 6-10. The presentation is a concentrated pitch for parents — the primary target audience.
+
+**Important constraints:**
+- This is a DATA AND CONTENT brief only — visual design, layout, slide order, and composition are to be decided by the designer
+- Focus on free materials only (paid custom service is NOT part of this presentation)
+- Mention the possibility of personalized worksheets and new themes as a teaser, not a sales pitch
+- Language: prepare content in both Russian and English (the designer chooses which version to build first)
+
+---
+
+## Core Narrative Arc
+
+The presentation should tell this story:
+
+1. **The Problem** — Traditional worksheets are boring. Children resist them. Practice becomes a battle.
+2. **The Insight** — Children engage when learning connects to their passions and feels like a game.
+3. **The Solution** — Beautifully themed, skill-targeted worksheets that children actually want to do.
+4. **The Proof** — Real examples showing the quality and variety of tasks.
+5. **The Approach** — This is not mass-produced filler. It's made by a parent for his child, with professional care.
+6. **The Offer** — Free to download, print, and use. New worksheets regularly.
+7. **What's Coming** — More themes, more skills, personalization.
+
+---
+
+## Key Messages (Content Blocks)
+
+### Block 1: The Problem
+
+**Headline ideas:**
+- "Your child hates math worksheets? Maybe it's not the math."
+- "Rows of numbers, blank stares, tears. Sound familiar?"
+- "The worksheet problem nobody talks about."
+
+**Supporting data:**
+- IXL, the most popular math practice platform, has **1.5 out of 5 stars** on Common Sense Media — parents report it causes math anxiety
+- ASCD research found that most materials on Teachers Pay Teachers (the largest worksheet marketplace) are **"mediocre" or "probably not worth using"**
+- Most free worksheets online are black-and-white text with generic clipart — zero engagement mechanism
+- Children's attention span for unengaging tasks: **2-5 minutes** before resistance begins
+
+**Visual suggestion:** Side-by-side comparison — a boring plain worksheet vs. one of ours
+
+---
+
+### Block 2: The Insight — Why Engagement Matters
+
+**Headline ideas:**
+- "When learning feels like play, children practice 3x longer"
+- "The secret: match the worksheet to the child, not the other way around"
+
+**Supporting data:**
+- Personalized content makes learning **50% more engaging** (NIH study)
+- Personalized learning showed **+8 points in math, +9 in reading** in a RAND study of 11,000 students
+- Colorful, themed materials **increase memory retention** compared to plain materials (Teacher Treasury research)
+- Children have **strongly positive emotional reactions to bright colors** and themed content, negative reactions to gray/plain (ResearchGate)
+- BUT: excessive visual noise distracts ages 5-8 — our approach balances beauty with clarity (PMC study)
+
+**Key principle:** The visual theme isn't decoration — it's the motivation mechanism. A child who loves space will eagerly split "asteroids" into number parts. The same math as plain text becomes a chore.
+
+---
+
+### Block 3: What We Offer (The Solution)
+
+**Headline ideas:**
+- "Worksheets your kids actually want to do"
+- "Beautiful practice, real skills"
+- "Where adventure meets arithmetic"
+
+**What makes our worksheets different (4 pillars):**
+
+#### Pillar 1: Themed Visual Worlds
+- Every worksheet is set in an immersive visual universe (currently: space exploration)
+- Professional-quality AI-generated illustrations: spaceships, asteroids, planets, alien flora
+- Not clipart — custom artwork created specifically for each worksheet
+- More themes coming: underwater adventures, dinosaur expeditions, fairy tales, and more
+
+#### Pillar 2: Skill-Targeted, Not Random
+- Each worksheet type focuses on ONE specific mathematical skill
+- Not "100 random math problems" — precision exercises targeting known learning milestones:
+  - **Number decomposition** — understanding that numbers are made of parts
+  - **Addition through 10** — the #1 bottleneck skill in 1st grade math
+  - **Multi-addend sums** — building working memory through constraint puzzles
+  - **Pattern recognition** — fundamental mathematical thinking
+  - **Spatial reasoning** — graph navigation with mathematical constraints
+- Progressive difficulty within each set: starts easy with hints, increases gradually
+
+#### Pillar 3: Game-Like Experience
+- Tasks are framed as missions, not exercises:
+  - "Split the asteroid into two parts" (number decomposition)
+  - "Fill the cargo bay to exactly 10" (addition through 10)
+  - "Collect asteroids to match ship capacity" (multi-addend sums)
+  - "Plot the enemy route through the star map" (constrained pathfinding)
+- Children solve real math but experience it as play
+- Each problem has a visual component — drawing lines, filling cargo, navigating maps
+
+#### Pillar 4: Professional Quality
+- Print-optimized A4 PDF — looks great on paper, not just on screen
+- Consistent design language across all worksheets
+- Every puzzle is mathematically verified for solvability
+- Difficulty calibrated based on educational research
+
+---
+
+### Block 4: Examples (Visual Proof)
+
+**Use these screenshots and assets to show real worksheet sections:**
+
+#### Example 1: "Explore the Planet" (Space Exploration)
+- **Screenshot:** `screenshots/screenshot-exploration.png`
+- **What it shows:** Math problems paired with unique alien flora/mineral icons in elegant pill-shaped cards
+- **Skill:** A + B ± C (three-operand arithmetic)
+- **Note:** Each icon is unique — children "collect" alien specimens by solving problems
+
+#### Example 2: "Split the Asteroid" (Asteroid Splitting)
+- **Screenshot:** `screenshots/screenshot-splitting.png`
+- **What it shows:** Large asteroid with number → splitter weapon → formula rows to fill
+- **Skill:** Number decomposition (splitting N into two unequal parts)
+- **Note:** First rows have hints (pre-filled answers), then gradually remove scaffolding
+
+#### Example 3: "Collect Asteroids" (Collecting Asteroids)
+- **Screenshot:** `screenshots/screenshot-collecting.png`
+- **What it shows:** Full page with cargo ships and scattered asteroids. Child draws lines connecting asteroids to ships so values match capacity
+- **Skill:** Multi-addend sums with constraint satisfaction
+- **Note:** Game-like puzzle format. Every page is verified to have a valid solution
+
+#### Example 4: "Fill the Cargo Bay" (Cargo Filling)
+- **Screenshot:** `screenshots/screenshot-cargo.png`
+- **What it shows:** Cards with asteroid → ship → formula. Child splits asteroid to fill cargo bay to exactly 10
+- **Skill:** Addition crossing the tens boundary (the critical 1st-grade milestone)
+- **Note:** SVG arrows, braces, and visual layout make the abstract concept concrete
+
+#### Additional visual assets (in `assets/` folder):
+- **Spaceships:** `spaceship1.jpeg`, `spaceship4.jpeg`, `spaceship-teal.jpeg` — hero images used in worksheets
+- **Planets:** `planet1.jpeg`, `planet5.jpeg`, `planet8.jpeg` — footer panoramas (terraformed worlds, crystal formations, aurora mountains)
+- **Ship interiors:** `cabin3.jpeg`, `cabin7.jpeg`, `cabin9.jpeg` — cockpit views showing stunning sci-fi environments
+- **Asteroids:** `asteroid1.png`, `asteroid5-purple.png`, `asteroid12-cluster.png`, `asteroid16-spiky.png` — 3D rendered asteroid models with transparent backgrounds
+- **Cargo ships:** `freighter1.png`, `freighter3.png`, `freighter10.png`, `freighter12.png` — detailed space freighter illustrations
+- **Asteroid icons:** `icon-asteroid2.png`, `icon-asteroid8.png`, `icon-asteroid12.png`, `icon-asteroid16.png` — small colored asteroid icons used in exercises
+
+---
+
+### Block 5: The Story Behind (Authenticity)
+
+**Headline ideas:**
+- "Made by a parent, for his child"
+- "This isn't a product. It's a father's project."
+- "The quality only personal motivation can deliver"
+
+**The story:**
+This project started because I (Oleg, a software engineer and father) couldn't find worksheets that my 7-year-old son actually wanted to do. Everything was either boring or educationally shallow. So I built a system to create exactly what was needed:
+
+- **Themed to his interests** — my son loves space, so the worksheets are set in a space universe
+- **Targeted to his learning gaps** — when he struggled with number decomposition, I created a specific task type for it
+- **Beautiful enough to be exciting** — he gets genuinely excited when a new worksheet comes out
+- **Progressively challenging** — starts easy with hints, builds confidence before increasing difficulty
+
+This is not mass-produced filler from a content mill. Every worksheet is designed with the care and attention that only a parent making something for their own child would invest. The motivation is simple: if my son engages with it and learns, then it works.
+
+**Key emotional message:** When you download these worksheets, you're getting materials made with the same love and thoroughness as if you made them yourself — but with professional tools and expertise behind them.
+
+---
+
+### Block 6: The Offer
+
+**Headline ideas:**
+- "Free to download. Free to print. Free to learn."
+- "No subscriptions. No paywalls. Just worksheets."
+
+**What's included:**
+- 5 task types, 26+ pages of print-ready worksheets
+- A4 PDF format — optimized for home and school printing
+- Progressive difficulty — easy → medium → hard within each set
+- New worksheets added regularly
+- No registration required
+- No watermarks
+- No "3 free then pay" limits
+
+**How to get them:**
+- Download directly from [website URL — TBD]
+- Follow our Telegram channel for new releases [TBD]
+
+---
+
+### Block 7: What's Coming (Teaser)
+
+**Headline ideas:**
+- "This is just the beginning"
+- "New themes. New skills. Your child's favorites."
+
+**Upcoming:**
+- 🌊 Underwater Adventures — ocean exploration theme
+- 🦕 Dinosaur Lab — prehistoric discovery theme
+- ❄️ Frost Kingdom — ice magic theme
+- 🏎️ Turbo Run — racing/speed theme
+- 🧚 Enchanted Forest — fairy tale theme
+- More math skills: skip counting, place value, subtraction, fractions
+- **Personalized worksheets** — worksheets tailored to YOUR child's interests and skill level (coming soon)
+
+**Visual suggestion:** Grid of theme icons/previews (can be concept art or mood boards)
+
+---
+
+## Tone & Voice Guidelines
+
+- **Speak to parents, not children** — warm, practical, no baby talk
+- **Confident but not salesy** — the quality speaks for itself
+- **Acknowledge the real pain** — "we know the struggle" without being dramatic
+- **Don't mention AI** — parents distrust it for education. Say "carefully designed" not "AI-generated"
+- **Don't use education jargon** — say "number splitting" not "additive decomposition"
+- **Be specific** — name exact skills, show exact examples, quote exact research
+
+## Key Statistics for Slides
+
+| Stat | Source |
+|------|--------|
+| IXL: 1.5/5 stars from parents | Common Sense Media |
+| Personalization = 50% more engagement | NIH (PMC6715310) |
+| +8 math / +9 reading with personalized learning | RAND study, 11,000 students |
+| 4M children homeschooled in US (5.4%, 2x pre-pandemic) | JHU Institute for Education Policy |
+| Homeschooling growing 4.9%/year | Verified Market Reports |
+| Most TPT materials rated "mediocre" | ASCD research via EdSurge |
+| Colorful materials improve memory retention | Teacher Treasury / ResearchGate |
+| 5 task types, 26+ pages available now | Our product |
+
+## Files Included in This Package
+
+```
+promotion/presentation1/
+├── BRIEF.md                              ← this document
+├── take-screenshots.mjs                  ← script to regenerate screenshots
+├── assets/                               ← selected best visual assets
+│   ├── asteroid1.png, asteroid5-purple.png, asteroid12-cluster.png, asteroid16-spiky.png
+│   ├── freighter1.png, freighter3.png, freighter10.png, freighter12.png
+│   ├── spaceship1.jpeg, spaceship4.jpeg, spaceship-teal.jpeg
+│   ├── planet1.jpeg, planet5.jpeg, planet8.jpeg
+│   ├── cabin3.jpeg, cabin7.jpeg, cabin9.jpeg
+│   └── icon-asteroid2.png, icon-asteroid8.png, icon-asteroid12.png, icon-asteroid16.png
+├── screenshots/                          ← rendered task excerpts
+│   ├── screenshot-exploration.png        ← math problems with icons
+│   ├── screenshot-splitting.png          ← asteroid splitting exercise
+│   ├── screenshot-collecting.png         ← full page: ships + scattered asteroids
+│   └── screenshot-cargo.png             ← cargo filling cards with formulas
+└── fragments/                            ← HTML source for screenshots
+    ├── fragment-exploration.html
+    ├── fragment-splitting.html
+    ├── fragment-collecting.html
+    └── fragment-cargo.html
+```
+
+## Notes for the Designer
+
+1. All screenshots can be regenerated at higher resolution by editing `take-screenshots.mjs` viewport sizes
+2. Assets in `assets/` are the best picks from a much larger library (340+ icons total)
+3. The fragments in `fragments/` can be opened in a browser (requires `pnpm preview` running for proper asset loading via localhost, OR adjust paths)
+4. Full worksheets with complete pages are available in `tasks/*/docs/*.template.html` if more context is needed
+5. The current visual style of worksheets (indigo color palette) is the template design, NOT the brand identity — brand visual design is to be created from scratch

promotion/presentation1/fragments/fragment-cargo.html

@@ -0,0 +1,264 @@
+<!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=Caveat:wght@500;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
+  <script>
+    tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
+  </script>
+  <style>
+    .number-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 12px rgba(99, 102, 241, 0.5); }
+    .number-shadow-sm { text-shadow: 1px 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(99, 102, 241, 0.4); }
+    .card-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0;
+    }
+    .task-card {
+      border-bottom: 1.5px solid #334155;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      overflow: visible;
+      height: 160px;
+    }
+    .card-inner {
+      margin: 1.5mm;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      position: relative;
+    }
+    .task-card:nth-child(odd) { border-right: 1.5px solid #334155; }
+    .task-card:nth-child(3), .task-card:nth-child(4) { border-bottom: none; }
+    .card-visual { position: relative; flex: 1; min-height: 0; }
+    .space-asteroid {
+      position: absolute; left: -7.5mm; top: 18.5mm;
+      width: 28mm; height: 28mm;
+      filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.3));
+      z-index: 6;
+    }
+    .space-asteroid img { width: 100%; height: 100%; object-fit: contain; }
+    .space-asteroid .num {
+      position: absolute; inset: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.8rem; font-weight: 900; color: white;
+      text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 10px rgba(99,102,241,0.5);
+    }
+    .cargo-ship {
+      position: absolute; right: -12.5mm; top: -5mm;
+      width: 90mm; height: 42mm; z-index: 1;
+    }
+    .cargo-ship .ship-img { width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
+    .cargo-ship .badge-10 {
+      position: absolute; left: 40%; top: 39%; transform: translate(-50%, -50%);
+      width: 22px; height: 22px; border-radius: 50%;
+      background: #4f46e5; border: 2px solid #a5b4fc;
+      display: flex; align-items: center; justify-content: center;
+      box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: 3;
+    }
+    .cargo-ship .badge-10 span { color: white; font-weight: 800; font-size: 0.6rem; }
+    .cargo-ship .inner-ast {
+      position: absolute; left: 58%; top: 73%; transform: translate(-50%, -50%);
+      width: 14mm; height: 14mm; z-index: 2;
+    }
+    .cargo-ship .inner-ast img { width: 100%; height: 100%; object-fit: contain; opacity: 0.7; }
+    .cargo-ship .inner-ast .num {
+      position: absolute; inset: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.1rem; font-weight: 900; color: white;
+      text-shadow: 1px 1px 3px rgba(0,0,0,0.6), 0 0 6px rgba(99,102,241,0.4);
+    }
+    .arrows-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
+    .arrow-input-box {
+      position: absolute; left: calc(52% - 2mm); top: calc(45.5% - 1mm); transform: translateY(-100%);
+      width: 10mm; height: 8mm; background: white;
+      border: 1px solid #c7d2fe; border-radius: 1.5mm;
+      display: flex; align-items: center; justify-content: center; z-index: 7;
+    }
+    .arrow-input-box span { display: inline-block; width: 7mm; border-bottom: 1.5px solid #a5b4fc; }
+    .remnant-shape {
+      position: absolute; left: 61%; bottom: 7mm; z-index: 5;
+      display: flex; align-items: center; gap: 0.5mm;
+    }
+    .remnant-shape .shape-container { position: relative; width: 16mm; height: 16mm; flex-shrink: 0; }
+    .remnant-shape .shape-container img { width: 100%; height: 100%; object-fit: contain; opacity: 0.5; }
+    .remnant-shape .shape-container .shape-blank { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
+    .remnant-shape .shape-container .shape-blank span { display: inline-block; width: 7mm; border-bottom: 1.5px solid #6366f1; }
+    .remnant-shape .shape-question { font-size: 1.4rem; font-weight: 900; color: #a5b4fc; line-height: 1; }
+    .card-formula { flex-shrink: 0; text-align: center; padding: 0 1mm 2mm; margin-top: -2mm; }
+    .formula-label { font-size: 0.45rem; font-weight: 600; color: #818cf8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3.5mm; }
+    .formula-row { display: flex; align-items: baseline; justify-content: center; gap: 1mm; font-size: 0.85rem; font-weight: 700; color: #1e1b4b; line-height: 1; }
+    .formula-row .blank { display: inline-block; width: 8mm; border-bottom: 1.5px solid #a5b4fc; }
+    .brace-group { display: inline-flex; flex-direction: column; align-items: center; }
+    .answer { font-family: 'Caveat', cursive; font-weight: 700; color: #4338ca; }
+    .brace-group .brace-content { display: flex; align-items: baseline; gap: 0.5mm; white-space: nowrap; }
+    .brace-group .brace-svg { width: 90%; height: 3mm; margin-top: 2.5mm; display: block; }
+    .brace-group .brace-val { font-size: 0.6rem; font-weight: 800; color: #6366f1; line-height: 1; margin-top: 0.3mm; }
+  </style>
+</head>
+<body class="bg-white font-nunito p-4">
+
+<svg style="position:absolute;width:0;height:0" aria-hidden="true">
+  <defs>
+    <marker id="ah" markerWidth="6" markerHeight="4" refX="5" refY="2" orient="auto">
+      <polygon points="0 0, 6 2, 0 4" fill="#6366f1"/>
+    </marker>
+  </defs>
+</svg>
+
+<div class="card-grid" style="max-width: 700px;">
+
+  <!-- Card 1 (example with answers) -->
+  <div class="task-card"><div class="card-inner">
+    <div class="card-visual">
+      <div class="space-asteroid">
+        <img src="../../../assets/icons/pack3-asteroids/asteroid1.png" alt="">
+        <span class="num">5</span>
+      </div>
+      <div class="cargo-ship">
+        <img src="../../../assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt="">
+        <div class="badge-10"><span>10</span></div>
+        <div class="inner-ast">
+          <img src="../../../assets/items/asteroid-shapes/asteroid1.png" alt="">
+          <span class="num">6</span>
+        </div>
+      </div>
+      <svg class="arrows-svg" viewBox="0 0 100 55">
+        <path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
+        <path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
+      </svg>
+      <div class="arrow-input-box"><span class="answer" style="font-size:1.1rem">4</span></div>
+      <div class="remnant-shape"><div class="shape-container"><img src="../../../assets/items/asteroid-shapes/asteroid1.png" alt=""><div class="shape-blank"><span class="answer" style="font-size:1.3rem">1</span></div></div><span class="shape-question">?</span></div>
+    </div>
+    <div class="card-formula">
+      <div class="formula-label" style="color:#4338ca">пример</div>
+      <div class="formula-row">
+        <span>6</span><span>+</span><span>5</span><span>=</span>
+        <div class="brace-group">
+          <span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"><span class="answer" style="font-size:1.1rem">4</span></span><span>)</span></span>
+          <svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
+          <span class="brace-val">10</span>
+        </div>
+        <span>+</span><span class="blank"><span class="answer" style="font-size:1.1rem">1</span></span><span>=</span><span class="blank"><span class="answer" style="font-size:1.1rem">11</span></span>
+      </div>
+    </div>
+  </div></div>
+
+  <!-- Card 2 -->
+  <div class="task-card"><div class="card-inner">
+    <div class="card-visual">
+      <div class="space-asteroid">
+        <img src="../../../assets/icons/pack3-asteroids/asteroid2.png" alt="">
+        <span class="num">9</span>
+      </div>
+      <div class="cargo-ship">
+        <img src="../../../assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt="">
+        <div class="badge-10"><span>10</span></div>
+        <div class="inner-ast">
+          <img src="../../../assets/items/asteroid-shapes/asteroid2.png" alt="">
+          <span class="num">9</span>
+        </div>
+      </div>
+      <svg class="arrows-svg" viewBox="0 0 100 55">
+        <path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
+        <path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
+      </svg>
+      <div class="arrow-input-box"><span>&nbsp;</span></div>
+      <div class="remnant-shape"><div class="shape-container"><img src="../../../assets/items/asteroid-shapes/asteroid2.png" alt=""><div class="shape-blank"><span>&nbsp;</span></div></div><span class="shape-question">?</span></div>
+    </div>
+    <div class="card-formula">
+      <div class="formula-label">запиши формулу для пилота</div>
+      <div class="formula-row">
+        <span>9</span><span>+</span><span>9</span><span>=</span>
+        <div class="brace-group">
+          <span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank">&nbsp;</span><span>)</span></span>
+          <svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
+          <span class="brace-val">10</span>
+        </div>
+        <span>+</span><span class="blank">&nbsp;</span><span>=</span><span class="blank">&nbsp;</span>
+      </div>
+    </div>
+  </div></div>
+
+  <!-- Card 3 -->
+  <div class="task-card"><div class="card-inner">
+    <div class="card-visual">
+      <div class="space-asteroid">
+        <img src="../../../assets/icons/pack3-asteroids/asteroid3.png" alt="">
+        <span class="num">7</span>
+      </div>
+      <div class="cargo-ship">
+        <img src="../../../assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt="">
+        <div class="badge-10"><span>10</span></div>
+        <div class="inner-ast">
+          <img src="../../../assets/items/asteroid-shapes/asteroid3.png" alt="">
+          <span class="num">7</span>
+        </div>
+      </div>
+      <svg class="arrows-svg" viewBox="0 0 100 55">
+        <path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
+        <path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
+      </svg>
+      <div class="arrow-input-box"><span>&nbsp;</span></div>
+      <div class="remnant-shape"><div class="shape-container"><img src="../../../assets/items/asteroid-shapes/asteroid3.png" alt=""><div class="shape-blank"><span>&nbsp;</span></div></div><span class="shape-question">?</span></div>
+    </div>
+    <div class="card-formula">
+      <div class="formula-label">запиши формулу для пилота</div>
+      <div class="formula-row">
+        <span>7</span><span>+</span><span>7</span><span>=</span>
+        <div class="brace-group">
+          <span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank">&nbsp;</span><span>)</span></span>
+          <svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
+          <span class="brace-val">10</span>
+        </div>
+        <span>+</span><span class="blank">&nbsp;</span><span>=</span><span class="blank">&nbsp;</span>
+      </div>
+    </div>
+  </div></div>
+
+  <!-- Card 4 -->
+  <div class="task-card"><div class="card-inner">
+    <div class="card-visual">
+      <div class="space-asteroid">
+        <img src="../../../assets/icons/pack3-asteroids/asteroid4.png" alt="">
+        <span class="num">6</span>
+      </div>
+      <div class="cargo-ship">
+        <img src="../../../assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt="">
+        <div class="badge-10"><span>10</span></div>
+        <div class="inner-ast">
+          <img src="../../../assets/items/asteroid-shapes/asteroid4.png" alt="">
+          <span class="num">6</span>
+        </div>
+      </div>
+      <svg class="arrows-svg" viewBox="0 0 100 55">
+        <path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
+        <path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
+      </svg>
+      <div class="arrow-input-box"><span>&nbsp;</span></div>
+      <div class="remnant-shape"><div class="shape-container"><img src="../../../assets/items/asteroid-shapes/asteroid4.png" alt=""><div class="shape-blank"><span>&nbsp;</span></div></div><span class="shape-question">?</span></div>
+    </div>
+    <div class="card-formula">
+      <div class="formula-label">запиши формулу для пилота</div>
+      <div class="formula-row">
+        <span>6</span><span>+</span><span>6</span><span>=</span>
+        <div class="brace-group">
+          <span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank">&nbsp;</span><span>)</span></span>
+          <svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
+          <span class="brace-val">10</span>
+        </div>
+        <span>+</span><span class="blank">&nbsp;</span><span>=</span><span class="blank">&nbsp;</span>
+      </div>
+    </div>
+  </div></div>
+
+</div>
+</body>
+</html>

promotion/presentation1/fragments/fragment-collecting.html

@@ -0,0 +1,52 @@
+<!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">
+  <script>
+    tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
+  </script>
+</head>
+<body class="bg-white font-nunito">
+  <!-- Full page collecting asteroids -->
+  <div style="width: 210mm; height: 297mm;" class="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/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/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">
+        <!-- 3 Ships -->
+        <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: -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>
+
+        <!-- Asteroids -->
+        <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: 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: 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: 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: 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: 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>
+    </div>
+  </div>
+</body>
+</html>

promotion/presentation1/fragments/fragment-exploration.html

@@ -0,0 +1,73 @@
+<!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">
+  <script>
+    tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
+  </script>
+</head>
+<body class="bg-white font-nunito p-6">
+  <div class="grid grid-cols-2 gap-x-3 gap-y-[6px]" style="max-width: 700px;">
+
+    <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="">
+        <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>
+      </div>
+    </div>
+
+    <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="">
+        <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>
+      </div>
+    </div>
+
+    <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="">
+        <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-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="">
+        <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>
+      </div>
+    </div>
+
+    <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="">
+        <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>
+      </div>
+    </div>
+
+    <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="">
+        <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>
+      </div>
+    </div>
+
+  </div>
+</body>
+</html>

promotion/presentation1/fragments/fragment-splitting.html

@@ -0,0 +1,59 @@
+<!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">
+  <script>
+    tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
+  </script>
+  <style>
+    .asteroid-glow { filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3)); }
+    .number-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 12px rgba(99, 102, 241, 0.5); }
+    .number-shadow-sm { text-shadow: 1px 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(99, 102, 241, 0.4); }
+    .divider-construction { height: 7px; background: repeating-linear-gradient(-45deg, #f59e0b, #f59e0b 8px, #92400e 8px, #92400e 16px); border-radius: 2px; opacity: 0.7; }
+    .splitter-icon { width: 36mm; object-fit: contain; flex-shrink: 0; }
+  </style>
+</head>
+<body class="bg-white font-nunito p-6">
+  <div class="flex flex-col gap-6" style="max-width: 700px;">
+
+    <!-- Section: N=10 -->
+    <div class="flex items-center gap-[8mm]">
+      <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+        <img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt="">
+        <span class="absolute text-[2.2rem] font-black text-white number-shadow">10</span>
+      </div>
+      <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+        <div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">9</span></div>
+        <div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">4</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">6</span></div>
+        <div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+        <div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+        <div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+        <div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+      </div>
+    </div>
+
+    <div class="divider-construction"></div>
+
+    <!-- Section: N=7 -->
+    <div class="flex items-center gap-[8mm]">
+      <div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
+        <img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt="">
+        <span class="absolute text-[2.2rem] font-black text-white number-shadow">7</span>
+      </div>
+      <div class="flex-1 flex flex-col gap-[1.5mm] items-center">
+        <div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+        <div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">4</span></div>
+        <div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+        <div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+        <div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300">&nbsp;</span></div>
+      </div>
+    </div>
+
+  </div>
+</body>
+</html>

promotion/presentation1/take-screenshots.mjs

@@ -0,0 +1,70 @@
+import puppeteer from 'puppeteer';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const fragments = [
+  {
+    file: 'fragments/fragment-exploration.html',
+    output: 'screenshots/screenshot-exploration.png',
+    viewport: { width: 780, height: 460 },
+    clip: null
+  },
+  {
+    file: 'fragments/fragment-splitting.html',
+    output: 'screenshots/screenshot-splitting.png',
+    viewport: { width: 780, height: 600 },
+    clip: null
+  },
+  {
+    file: 'fragments/fragment-collecting.html',
+    output: 'screenshots/screenshot-collecting.png',
+    viewport: { width: 794, height: 1123 }, // A4 at 96dpi
+    clip: null
+  },
+  {
+    // Full A4 page, clip to top 4 cards (skip header, take cards area)
+    file: 'fragments/fragment-cargo-full.html',
+    output: 'screenshots/screenshot-cargo.png',
+    viewport: { width: 794, height: 1123 }, // A4 at 96dpi
+    clip: { x: 0, y: 95, width: 794, height: 610 } // cards area below header
+  }
+];
+
+async function main() {
+  const browser = await puppeteer.launch({ headless: 'new', args: ['--no-sandbox'] });
+
+  for (const frag of fragments) {
+    const page = await browser.newPage();
+    await page.setViewport(frag.viewport);
+
+    const filePath = path.resolve(__dirname, frag.file);
+    await page.goto(`file://${filePath}`, { waitUntil: 'networkidle0', timeout: 30000 });
+
+    // Wait for Tailwind to process
+    await new Promise(r => setTimeout(r, 2000));
+
+    const outputPath = path.resolve(__dirname, frag.output);
+
+    if (frag.clip) {
+      await page.screenshot({ path: outputPath, clip: frag.clip });
+    } else {
+      // Capture just the content (not grey background)
+      const bodyHandle = await page.$('body > div, body > .card-grid, body > .grid');
+      if (bodyHandle) {
+        await bodyHandle.screenshot({ path: outputPath });
+      } else {
+        await page.screenshot({ path: outputPath, fullPage: false });
+      }
+    }
+
+    console.log(`✓ ${frag.output}`);
+    await page.close();
+  }
+
+  await browser.close();
+  console.log('Done!');
+}
+
+main().catch(console.error);