Files
math-tasks/tasks/crystal-battery/docs/crystal-battery-1.template.html
2026-05-01 12:42:37 +07:00

659 lines
36 KiB
HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<script type="module" src="/assets/themes/sonic/loader.mjs"></script>
<title>Кристальная Батарея</title>
<script>
tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
</script>
<style>
@page { size: A4; margin: 0; }
.battery-wrap {
position: relative;
width: 92.5mm;
height: 32mm;
}
.battery-section {
display: flex;
align-items: center;
gap: 2mm;
height: 32mm;
padding: 0 1mm;
}
.hero-col {
width: 26mm;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hero-col img {
height: 28mm;
object-fit: contain;
}
.battery-col {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.section-divider {
border: none;
border-top: 1px solid #e2e8f0;
margin: 0;
}
.header-conduit {
position: relative;
height: 36mm;
}
.input-box {
width: 14mm;
height: 10mm;
border: 1.5px solid #c7d2fe;
border-radius: 2mm;
background: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transform: translateY(6mm);
}
.input-box span {
display: inline-block;
width: 10mm;
border-bottom: 1.5px solid #c7d2fe;
}
</style>
</head>
<body class="bg-gray-200 font-nunito">
<!-- ==================== PAGE 1 — Easy ==================== -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0" style="background: black;">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="/assets/themes/sonic/environments/ancient-ruins.png" class="w-full h-full object-cover object-top" alt="">
</div>
<div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4">
<img src="/assets/themes/sonic/sketches/protagonists/sonic/sonic-lvl1.png" class="h-[36mm] shrink-0 object-contain" alt="Sonic">
<div class="flex-1 flex flex-col items-center justify-center text-center">
<h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Кристальный Накопитель</h1>
<p class="text-[0.675rem] leading-[1.05rem] font-medium text-indigo-400 mt-1 text-left">Соник и Шэдоу нашли заброшенный Накопитель и решили зарядить его кристаллами. В Накопителе ровно <strong class="text-black font-extrabold">10</strong> слотов. Герои поспорили, кто вставит больше, и начали заполнять слоты по очереди. Посчитай, сколько кристаллов уже вставил один герой, и прикинь в уме, сколько нужно добавить другому. Запиши, сколько кристаллов у Соника и Шэдоу, и проверь, что в сумме получается <strong class="text-black font-extrabold">10</strong>.</p>
</div>
</div>
<div class="flex flex-col flex-1 justify-start">
<!-- Section 1: Sonic fills 9 (slots 1-9) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-01.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="14.37" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="22.90" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="31.06" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="39.21" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="55.72" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="63.52" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="71.50" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="79.65" y="21.46" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-01.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 2: Shadow fills 8 (slots 3-10) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-02.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="red" x="22.90" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="31.06" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="39.21" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="55.72" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="63.52" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="71.50" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="79.65" y="21.46" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="87.65" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-02.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 3: Sonic fills 9 (slots 1-9) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-03.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="14.37" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="22.90" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="31.06" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="39.21" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="55.72" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="63.52" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="71.50" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="79.65" y="21.46" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-03.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 4: Shadow fills 7 (slots 4-10) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-04.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="red" x="31.06" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="39.21" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="55.72" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="63.52" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="71.50" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="79.65" y="21.46" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="87.65" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-04.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 5: Sonic fills 8 (slots 1-8) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-05.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="14.37" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="22.90" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="31.06" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="39.21" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="55.72" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="63.52" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="71.50" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-05.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
</div>
</div>
</div>
<!-- ==================== PAGE 2 — Medium ==================== -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0" style="background: black;">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="/assets/themes/sonic/environments/ancient-ruins.png" class="w-full h-full object-cover object-top" alt="">
</div>
<div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4">
<img src="/assets/themes/sonic/sketches/protagonists/shadow/shadow-lvl1.png" class="h-[36mm] shrink-0 object-contain" alt="Shadow">
<div class="flex-1 flex flex-col items-center justify-center text-center">
<h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Кристальный Накопитель</h1>
<p class="text-[0.675rem] leading-[1.05rem] font-medium text-indigo-400 mt-1 text-left">Соник и Шэдоу нашли заброшенный Накопитель и решили зарядить его кристаллами. В Накопителе ровно <strong class="text-black font-extrabold">10</strong> слотов. Герои поспорили, кто вставит больше, и начали заполнять слоты по очереди. Посчитай, сколько кристаллов уже вставил один герой, и прикинь в уме, сколько нужно добавить другому. Запиши, сколько кристаллов у Соника и Шэдоу, и проверь, что в сумме получается <strong class="text-black font-extrabold">10</strong>.</p>
</div>
</div>
<div class="flex flex-col flex-1 justify-start">
<!-- Section 1: Sonic fills 6 (slots 1-6) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-06.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="14.37" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="22.90" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="31.06" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="39.21" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="55.72" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-06.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 2: Shadow fills 5 (slots 6-10) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-07.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="red" x="55.72" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="63.52" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="71.50" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="79.65" y="21.46" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="87.65" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-07.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 3: Sonic fills 4 (slots 1-4) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-08.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="14.37" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="22.90" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="31.06" y="21.83" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-08.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 4: Shadow fills 6 (slots 5-10) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-09.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="red" x="39.21" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="55.72" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="63.52" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="71.50" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="79.65" y="21.46" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="87.65" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-09.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 5: Sonic fills 5 (slots 1-5) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-10.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="14.37" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="22.90" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="31.06" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="39.21" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-10.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
</div>
</div>
</div>
<!-- ==================== PAGE 3 — Hard ==================== -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white" style="break-after: page;">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0" style="background: black;">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="/assets/themes/sonic/environments/ancient-ruins.png" class="w-full h-full object-cover object-top" alt="">
</div>
<div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4">
<img src="/assets/themes/sonic/sketches/protagonists/sonic/sonic-lvl1.png" class="h-[36mm] shrink-0 object-contain" alt="Sonic">
<div class="flex-1 flex flex-col items-center justify-center text-center">
<h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Кристальный Накопитель</h1>
<p class="text-[0.675rem] leading-[1.05rem] font-medium text-indigo-400 mt-1 text-left">Соник и Шэдоу нашли заброшенный Накопитель и решили зарядить его кристаллами. В Накопителе ровно <strong class="text-black font-extrabold">10</strong> слотов. Герои поспорили, кто вставит больше, и начали заполнять слоты по очереди. Посчитай, сколько кристаллов уже вставил один герой, и прикинь в уме, сколько нужно добавить другому. Запиши, сколько кристаллов у Соника и Шэдоу, и проверь, что в сумме получается <strong class="text-black font-extrabold">10</strong>.</p>
</div>
</div>
<div class="flex flex-col flex-1 justify-start">
<!-- Section 1: Sonic fills 3 (slots 1-3) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-01.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="14.37" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="22.90" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-01.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 2: Shadow fills 2 (slots 9-10) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-02.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="red" x="79.65" y="21.46" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="87.65" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-02.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 3: Sonic fills 1 (slot 1) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-03.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-03.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 4: Shadow fills 3 (slots 8-10) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-04.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="red" x="71.50" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="79.65" y="21.46" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="87.65" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-04.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 5: Sonic fills 2 (slots 1-2) -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-05.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="14.37" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-05.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
</div>
</div>
</div>
<!-- ==================== PAGE 4 — Mix (bonus) ==================== -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white">
<div class="absolute bottom-0 left-0 right-0 h-[80mm] z-0" style="background: black;">
<div class="absolute top-0 left-0 right-0 h-full z-10" style="background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0.6) 25%, transparent 50%);"></div>
<img src="/assets/themes/sonic/environments/ancient-ruins.png" class="w-full h-full object-cover object-top" alt="">
</div>
<div class="relative z-10 w-full h-full px-[12mm] pt-[4mm] pb-[65mm] flex flex-col">
<div class="flex items-center gap-4 mb-4">
<img src="/assets/themes/sonic/sketches/protagonists/shadow/shadow-lvl1.png" class="h-[36mm] shrink-0 object-contain" alt="Shadow">
<div class="flex-1 flex flex-col items-center justify-center text-center">
<h1 class="text-2xl font-extrabold leading-tight tracking-tight text-indigo-950">Кристальный Накопитель</h1>
<p class="text-[0.675rem] leading-[1.05rem] font-medium text-indigo-400 mt-1 text-left">Соник и Шэдоу нашли заброшенный Накопитель и решили зарядить его кристаллами. В Накопителе ровно <strong class="text-black font-extrabold">10</strong> слотов. Герои поспорили, кто вставит больше, и начали заполнять слоты по очереди. Посчитай, сколько кристаллов уже вставил один герой, и прикинь в уме, сколько нужно добавить другому. Запиши, сколько кристаллов у Соника и Шэдоу, и проверь, что в сумме получается <strong class="text-black font-extrabold">10</strong>.</p>
</div>
</div>
<div class="flex flex-col flex-1 justify-start">
<!-- Section 1: Sonic fills 9 (slots 1-9) — bonus -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-06.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="14.37" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="22.90" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="31.06" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="39.21" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="55.72" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="63.52" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="71.50" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="79.65" y="21.46" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-06.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 2: Shadow fills 6 (slots 5-10) — bonus -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-07.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="red" x="39.21" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="55.72" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="63.52" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="71.50" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="79.65" y="21.46" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="87.65" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-07.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 3: Sonic fills 4 (slots 1-4) — bonus -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-08.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="14.37" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="22.90" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="green" x="31.06" y="21.83" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-08.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 4: Shadow fills 7 (slots 4-10) — bonus -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-09.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="red" x="31.06" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="39.21" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="55.72" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="63.52" y="21.83" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="71.50" y="21.65" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="79.65" y="21.46" scale="0.6"></sonic-diamond>
<sonic-diamond shape="round" color="red" x="87.65" y="21.65" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-09.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
<hr class="section-divider">
<!-- Section 5: Sonic fills 1 (slot 1) — bonus -->
<div class="battery-section">
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-10.png" alt="Sonic">
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="battery-col">
<div class="battery-wrap">
<sonic-conduit type="lvl1" state="off" x="46.25" y="31.265" scale="1.85"></sonic-conduit>
<sonic-diamond shape="round" color="green" x="6.21" y="21.83" scale="0.6"></sonic-diamond>
</div>
</div>
<div class="input-box"><span>&nbsp;</span></div>
<div class="hero-col">
<img src="/assets/themes/sonic/heroes/sonic-shadow-push/shadow-push-10.png" alt="Shadow" style="transform: scaleX(-1);">
</div>
</div>
</div>
</div>
</div>
</body>
</html>