math-tasks/promotion/presentation1/fragments/fragment-cargo-full.html

1187 lines
117 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<title>Заполни Трюм</title>
<script>
tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
</script>
<style>
@page { size: A4; margin: 0; }
.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;
grid-template-rows: 1fr 1fr 1fr;
gap: 0;
flex: 1;
}
.task-card {
border-bottom: 1.5px solid #334155;
padding: 0;
display: flex;
flex-direction: column;
position: relative;
overflow: visible;
}
.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(5), .task-card:nth-child(6) { border-bottom: none; }
.card-visual {
position: relative;
flex: 1;
min-height: 0;
}
/* Space asteroid (left, larger) — z-index above arrows */
.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 bay ship (right, large, flipped) */
.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;
}
/* Inner asteroid: outline shape with number */
.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);
}
/* SVG arrows overlay */
.arrows-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 4;
pointer-events: none;
overflow: visible;
}
/* Input box at arrow-to-ship endpoint */
.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 asteroid shape — outline asteroid with blank */
.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;
}
/* Formula section */
.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;
}
/* Handwritten answers for example card */
.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-gray-200 font-nunito">
<!-- Shared SVG defs for arrowheads -->
<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>
<!-- PAGE 1: Easy (A=8,9) — splitter3 right, cabin1 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
<img src="../../../assets/footers/cabin1.jpeg" class="w-full h-full object-cover object-center" alt="">
</div>
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[28mm] flex flex-col">
<!-- Header -->
<div class="flex items-center gap-2 mb-1 flex-row-reverse">
<img src="../../../assets/hero-images/splitters/splitter3.png" class="w-[42%] shrink-0 object-contain" alt="">
<div class="flex-1 flex flex-col items-center justify-center text-center px-1">
<h1 class="text-[1.3rem] font-extrabold leading-tight tracking-tight text-indigo-950">Заполни Трюм</h1>
<p class="text-[0.55rem] font-medium text-indigo-400 mt-0.5 leading-snug">На какие части нужно расщепить астероид, чтобы заполнить свободное место в трюме? Какой кусочек останется в космосе? Каков общий объём?</p>
</div>
</div>
<div class="card-grid">
<!-- Card 1: A=8, B=3 -->
<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: A=9, B=4 -->
<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: A=8, B=5 -->
<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: A=9, B=6 -->
<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>
<!-- Card 5: A=8, B=7 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid">
<img src="../../../assets/icons/pack3-asteroids/asteroid5.png" alt="">
<span class="num">3</span>
</div>
<div class="cargo-ship">
<img src="../../../assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt="">
<div class="badge-10"><span>10</span></div>
<div class="inner-ast">
<img src="../../../assets/items/asteroid-shapes/asteroid5.png" alt="">
<span class="num">8</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/asteroid5.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>8</span><span>+</span><span>3</span><span>=</span>
<div class="brace-group">
<span class="brace-content"><span>(</span><span>8</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 6: A=9, B=8 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid">
<img src="../../../assets/icons/pack3-asteroids/asteroid6.png" alt="">
<span class="num">8</span>
</div>
<div class="cargo-ship">
<img src="../../../assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt="">
<div class="badge-10"><span>10</span></div>
<div class="inner-ast">
<img src="../../../assets/items/asteroid-shapes/asteroid6.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/asteroid6.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>8</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>
</div>
</div>
</div>
<!-- PAGE 2: Medium (A=5,6,7) — splitter6 left, cabin3 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
<img src="../../../assets/footers/cabin3.jpeg" class="w-full h-full object-cover object-center" alt="">
</div>
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[28mm] flex flex-col">
<div class="flex items-center gap-2 mb-1">
<img src="../../../assets/hero-images/splitters/splitter6.png" class="w-[42%] shrink-0 object-contain" alt="">
<div class="flex-1 flex flex-col items-center justify-center text-center px-1">
<h1 class="text-[1.3rem] font-extrabold leading-tight tracking-tight text-indigo-950">Заполни Трюм</h1>
<p class="text-[0.55rem] font-medium text-indigo-400 mt-0.5 leading-snug">На какие части нужно расщепить астероид, чтобы заполнить свободное место в трюме? Какой кусочек останется в космосе? Каков общий объём?</p>
</div>
</div>
<div class="card-grid">
<!-- Card 1: A=7, B=4 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">7</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid7.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/asteroid7.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>7</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 2: A=6, B=5 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid8.png" alt=""><span class="num">9</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid8.png" alt=""><span class="num">8</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/asteroid8.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>8</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</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: A=7, B=6 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid9.png" alt=""><span class="num">4</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid9.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/asteroid9.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>4</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: A=5, B=7 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid10.png" alt=""><span class="num">7</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid10.png" alt=""><span class="num">5</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/asteroid10.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>5</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</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 5: A=6, B=8 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">9</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid11.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/asteroid11.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 6: A=7, B=9 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid12.png" alt=""><span class="num">8</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/asteroid12.png" alt=""><span class="num">3</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/asteroid12.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>3</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>3</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>
</div>
</div>
<!-- PAGE 3: Hard (A=2,3,4) — splitter9 right, cabin5 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
<img src="../../../assets/footers/cabin5.jpeg" class="w-full h-full object-cover object-center" alt="">
</div>
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[28mm] 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-[42%] shrink-0 object-contain" alt="">
<div class="flex-1 flex flex-col items-center justify-center text-center px-1">
<h1 class="text-[1.3rem] font-extrabold leading-tight tracking-tight text-indigo-950">Заполни Трюм</h1>
<p class="text-[0.55rem] font-medium text-indigo-400 mt-0.5 leading-snug">На какие части нужно расщепить астероид, чтобы заполнить свободное место в трюме? Какой кусочек останется в космосе? Каков общий объём?</p>
</div>
</div>
<div class="card-grid">
<!-- Card 1: A=4, B=7 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid13.png" alt=""><span class="num">4</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/asteroid13.png" alt=""><span class="num">8</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/asteroid13.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>8</span><span>+</span><span>4</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</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 2: A=3, B=8 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid14.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/asteroid14.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/asteroid14.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>7</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>
<!-- Card 3: A=4, B=8 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid15.png" alt=""><span class="num">2</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid15.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/asteroid15.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>2</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 4: A=3, B=9 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid16.png" alt=""><span class="num">9</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid16.png" alt=""><span class="num">3</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/asteroid16.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>3</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>3</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 5: A=4, B=9 -->
<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">8</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay4.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">5</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/asteroid1.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>5</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</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 6: A=2, B=9 -->
<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">6</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/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>6</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>
</div>
</div>
</div>
<!-- PAGE 4 — splitter1 left, cabin2 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
<img src="../../../assets/footers/cabin2.jpeg" class="w-full h-full object-cover object-center" alt="">
</div>
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[28mm] flex flex-col">
<div class="flex items-center gap-2 mb-1">
<img src="../../../assets/hero-images/splitters/splitter1.png" class="w-[42%] shrink-0 object-contain" alt="">
<div class="flex-1 flex flex-col items-center justify-center text-center px-1">
<h1 class="text-[1.3rem] font-extrabold leading-tight tracking-tight text-indigo-950">Заполни Трюм</h1>
<p class="text-[0.55rem] font-medium text-indigo-400 mt-0.5 leading-snug">На какие части нужно расщепить астероид, чтобы заполнить свободное место в трюме? Какой кусочек останется в космосе? Каков общий объём?</p>
</div>
</div>
<div class="card-grid">
<!-- Card: A=9, B=2 -->
<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">4</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay2.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">8</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>8</span><span>+</span><span>4</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</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: A=8, B=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">9</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay6.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">2</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>2</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>2</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: A=9, B=3 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid5.png" alt=""><span class="num">7</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid5.png" alt=""><span class="num">5</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/asteroid5.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>5</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</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: A=8, B=6 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid6.png" alt=""><span class="num">6</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/asteroid6.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/asteroid6.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>6</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: A=9, B=5 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">8</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/asteroid7.png" alt=""><span class="num">4</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/asteroid7.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>4</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</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: A=8, B=8 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid8.png" alt=""><span class="num">5</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/asteroid8.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/asteroid8.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>5</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>
</div>
</div>
</div>
<!-- PAGE 5 — splitter4 right, cabin4 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
<img src="../../../assets/footers/cabin4.jpeg" class="w-full h-full object-cover object-center" alt="">
</div>
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[28mm] 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-[42%] shrink-0 object-contain" alt="">
<div class="flex-1 flex flex-col items-center justify-center text-center px-1">
<h1 class="text-[1.3rem] font-extrabold leading-tight tracking-tight text-indigo-950">Заполни Трюм</h1>
<p class="text-[0.55rem] font-medium text-indigo-400 mt-0.5 leading-snug">На какие части нужно расщепить астероид, чтобы заполнить свободное место в трюме? Какой кусочек останется в космосе? Каков общий объём?</p>
</div>
</div>
<div class="card-grid">
<!-- Card: A=7, B=5 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid9.png" alt=""><span class="num">9</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid9.png" alt=""><span class="num">8</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/asteroid9.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>8</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</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: A=6, B=6 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid10.png" alt=""><span class="num">6</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid10.png" alt=""><span class="num">5</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/asteroid10.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>5</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</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: A=5, B=6 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">4</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/asteroid11.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/asteroid11.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>4</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: A=6, B=7 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid12.png" alt=""><span class="num">5</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/asteroid12.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/asteroid12.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>5</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: A=7, B=7 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid13.png" alt=""><span class="num">7</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid13.png" alt=""><span class="num">8</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/asteroid13.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>8</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</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: A=5, B=8 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid14.png" alt=""><span class="num">2</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid14.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/asteroid14.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>2</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>
</div>
</div>
</div>
<!-- PAGE 6 — splitter7 left, cabin6 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
<img src="../../../assets/footers/cabin6.jpeg" class="w-full h-full object-cover object-center" alt="">
</div>
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[28mm] flex flex-col">
<div class="flex items-center gap-2 mb-1">
<img src="../../../assets/hero-images/splitters/splitter7.png" class="w-[42%] shrink-0 object-contain" alt="">
<div class="flex-1 flex flex-col items-center justify-center text-center px-1">
<h1 class="text-[1.3rem] font-extrabold leading-tight tracking-tight text-indigo-950">Заполни Трюм</h1>
<p class="text-[0.55rem] font-medium text-indigo-400 mt-0.5 leading-snug">На какие части нужно расщепить астероид, чтобы заполнить свободное место в трюме? Какой кусочек останется в космосе? Каков общий объём?</p>
</div>
</div>
<div class="card-grid">
<!-- Card: A=9, B=7 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid15.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/asteroid15.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/asteroid15.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>9</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: A=8, B=9 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid16.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/asteroid16.png" alt=""><span class="num">8</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/asteroid16.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>8</span><span>+</span><span>5</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</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: A=9, B=9 -->
<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">6</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay6.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">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/asteroid1.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>6</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: A=7, B=8 -->
<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-bay9.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">5</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>5</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</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: A=6, B=9 -->
<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-bay2.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">4</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>4</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</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: A=5, B=9 -->
<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">5</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">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/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>7</span><span>+</span><span>5</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>
</div>
</div>
</div>
<!-- PAGE 7 — splitter2 right, cabin7 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
<img src="../../../assets/footers/cabin7.jpeg" class="w-full h-full object-cover object-center" alt="">
</div>
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[28mm] 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-[42%] shrink-0 object-contain" alt="">
<div class="flex-1 flex flex-col items-center justify-center text-center px-1">
<h1 class="text-[1.3rem] font-extrabold leading-tight tracking-tight text-indigo-950">Заполни Трюм</h1>
<p class="text-[0.55rem] font-medium text-indigo-400 mt-0.5 leading-snug">На какие части нужно расщепить астероид, чтобы заполнить свободное место в трюме? Какой кусочек останется в космосе? Каков общий объём?</p>
</div>
</div>
<div class="card-grid">
<!-- Card: A=9, B=2 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid5.png" alt=""><span class="num">9</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/asteroid5.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/asteroid5.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>9</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>
<!-- Card: A=8, B=3 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid6.png" alt=""><span class="num">3</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/asteroid6.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/asteroid6.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>3</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: A=9, B=4 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">7</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid7.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/asteroid7.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: A=8, B=5 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid8.png" alt=""><span class="num">8</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid8.png" alt=""><span class="num">8</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/asteroid8.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>8</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</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: A=9, B=6 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid9.png" alt=""><span class="num">6</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid9.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/asteroid9.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>
<!-- Card: A=8, B=7 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid10.png" alt=""><span class="num">7</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/asteroid10.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/asteroid10.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>7</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>
</div>
</div>
</div>
<!-- PAGE 8 — splitter5 left, cabin8 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
<img src="../../../assets/footers/cabin8.jpeg" class="w-full h-full object-cover object-center" alt="">
</div>
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[28mm] flex flex-col">
<div class="flex items-center gap-2 mb-1">
<img src="../../../assets/hero-images/splitters/splitter5.png" class="w-[42%] shrink-0 object-contain" alt="">
<div class="flex-1 flex flex-col items-center justify-center text-center px-1">
<h1 class="text-[1.3rem] font-extrabold leading-tight tracking-tight text-indigo-950">Заполни Трюм</h1>
<p class="text-[0.55rem] font-medium text-indigo-400 mt-0.5 leading-snug">На какие части нужно расщепить астероид, чтобы заполнить свободное место в трюме? Какой кусочек останется в космосе? Каков общий объём?</p>
</div>
</div>
<div class="card-grid">
<!-- Card: A=7, B=4 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">8</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid11.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/asteroid11.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>8</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: A=6, B=5 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid12.png" alt=""><span class="num">9</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid12.png" alt=""><span class="num">4</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/asteroid12.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>4</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</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: A=5, B=7 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid13.png" alt=""><span class="num">5</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/asteroid13.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/asteroid13.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>5</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: A=7, B=6 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid14.png" alt=""><span class="num">7</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid14.png" alt=""><span class="num">8</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/asteroid14.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>8</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</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: A=6, B=8 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid15.png" alt=""><span class="num">4</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/asteroid15.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/asteroid15.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>4</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: A=7, B=9 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid16.png" alt=""><span class="num">8</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid16.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/asteroid16.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>8</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>
</div>
</div>
</div>
<!-- PAGE 9 — splitter8 right, cabin9 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[28mm] z-0">
<img src="../../../assets/footers/cabin9.jpeg" class="w-full h-full object-cover object-center" alt="">
</div>
<div class="relative z-10 w-full h-full px-[8mm] pt-[3mm] pb-[28mm] 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-[42%] shrink-0 object-contain" alt="">
<div class="flex-1 flex flex-col items-center justify-center text-center px-1">
<h1 class="text-[1.3rem] font-extrabold leading-tight tracking-tight text-indigo-950">Заполни Трюм</h1>
<p class="text-[0.55rem] font-medium text-indigo-400 mt-0.5 leading-snug">На какие части нужно расщепить астероид, чтобы заполнить свободное место в трюме? Какой кусочек останется в космосе? Каков общий объём?</p>
</div>
</div>
<div class="card-grid">
<!-- Card: A=4, B=7 -->
<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">7</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay6.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>&nbsp;</span></div><div class="remnant-shape"><div class="shape-container"><img src="../../../assets/items/asteroid-shapes/asteroid1.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>7</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>
<!-- Card: A=3, B=8 -->
<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">6</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay9.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">8</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>8</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</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: A=4, B=9 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid5.png" alt=""><span class="num">9</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/asteroid5.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/asteroid5.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>9</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: A=3, B=9 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">8</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/asteroid7.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/asteroid7.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>8</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>
<!-- Card: A=2, B=9 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid9.png" alt=""><span class="num">3</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/asteroid9.png" alt=""><span class="num">8</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/asteroid9.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>8</span><span>+</span><span>3</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</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: A=4, B=8 -->
<div class="task-card"><div class="card-inner">
<div class="card-visual">
<div class="space-asteroid"><img src="../../../assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">6</span></div>
<div class="cargo-ship"><img src="../../../assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="../../../assets/items/asteroid-shapes/asteroid11.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/asteroid11.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>6</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>
</div>
</div>
</div>
</body>
</html>