fix(geom8 ch4): §8.1 и §8.3 — переделаны рисунки крупнее и нагляднее

Card 8.1 (центральный угол): viewBox 260×160 → 280×200. Добавлена
заливка сектора (pie slice) пастельно-жёлтого, дуга AC выделена
КРАСНОЙ толстой линией (stroke 3.5), угол α у центра — большая
оранжевая дуга радиуса 22. Точки на окружности с подписями A,C
крупными Unbounded. Подпись '⌣AC = α°' справа от дуги, не
накладывается. Подзаголовок 'центральный угол ∠AOC' в углу.

Card 8.3 (длина дуги): viewBox 260×150 → 280×190. Радиусы теперь
СПЛОШНЫЕ синие (раньше были пунктирные серые — невидимые). Подпись
R на радиусе OA крупная JetBrains Mono. Дуга ℓ выделена красной
толстой линией (4px). Угол α у центра — большая дуга радиуса 28.
Формула 'ℓ = (α/360°)·2πR' внизу как референс.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/textbooks/geometry_8_ch4.html

@@ -3249,18 +3249,31 @@ function buildP8(){
       <li>Если центральный угол $\\alpha$, то дуга $\\smile AC = \\alpha°$.</li>
     </ul>
     <div style="display:flex;justify-content:center;margin-top:14px">
-      <svg viewBox="0 0 260 160" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
-        <circle cx="110" cy="85" r="60" fill="rgba(8,145,178,.07)" stroke="#0891b2" stroke-width="2"/>
-        <circle cx="110" cy="85" r="3" fill="#0e7490"/>
-        <line x1="110" y1="85" x2="152" y2="33" stroke="#0891b2" stroke-width="2"/>
-        <line x1="110" y1="85" x2="161" y2="122" stroke="#0891b2" stroke-width="2"/>
-        <path d="M 152,33 A 60,60 0 0,1 161,122" fill="rgba(8,145,178,.18)" stroke="#0891b2" stroke-width="2.5"/>
-        <path d="M 118,76 A 12,12 0 0,1 124,96" fill="none" stroke="#f59e0b" stroke-width="2"/>
-        <text x="92" y="82" font-size="10" font-weight="700" fill="#0e7490">O</text>
-        <text x="156" y="27" font-size="11" font-weight="700" fill="#0284c7">A</text>
-        <text x="165" y="130" font-size="11" font-weight="700" fill="#0284c7">C</text>
-        <text x="128" y="88" font-size="10" fill="#b45309" font-weight="700">α</text>
-        <text x="170" y="75" font-size="10" fill="#0891b2" font-style="italic">дуга AC = α°</text>
+      <svg viewBox="0 0 280 200" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
+        <!-- Circle O=(120,100), R=70. A at angle -60° (top-right), C at angle 60° (bottom-right).
+             A=(120+70·cos(-60°), 100+70·sin(-60°))=(155, 39.4); C=(155, 160.6). -->
+        <!-- Sector fill (pie slice OAC, the 120° wedge facing right) -->
+        <path d="M 120,100 L 155,39 A 70,70 0 0,1 155,161 Z" fill="rgba(245,158,11,.20)" stroke="none"/>
+        <!-- Highlighted arc AC (the small arc, 120°) -->
+        <path d="M 155,39 A 70,70 0 0,1 155,161" fill="none" stroke="#ef4444" stroke-width="3.5"/>
+        <!-- Full circle outline -->
+        <circle cx="120" cy="100" r="70" fill="none" stroke="#0891b2" stroke-width="2"/>
+        <!-- Radii OA and OC -->
+        <line x1="120" y1="100" x2="155" y2="39" stroke="#0891b2" stroke-width="2"/>
+        <line x1="120" y1="100" x2="155" y2="161" stroke="#0891b2" stroke-width="2"/>
+        <!-- Angle marker α at center O (arc of radius 22, between OA and OC) -->
+        <path d="M 142,81 A 22,22 0 0,1 142,119" fill="none" stroke="#f59e0b" stroke-width="2.2"/>
+        <!-- Center dot and vertex dots -->
+        <circle cx="120" cy="100" r="3.5" fill="#0e7490"/>
+        <circle cx="155" cy="39" r="4" fill="#0284c7"/>
+        <circle cx="155" cy="161" r="4" fill="#0284c7"/>
+        <!-- Labels -->
+        <text x="103" y="105" font-size="13" font-weight="800" fill="#0e7490" font-family="Unbounded,sans-serif">O</text>
+        <text x="160" y="34" font-size="13" font-weight="800" fill="#0284c7" font-family="Unbounded,sans-serif">A</text>
+        <text x="160" y="174" font-size="13" font-weight="800" fill="#0284c7" font-family="Unbounded,sans-serif">C</text>
+        <text x="148" y="105" font-size="13" font-weight="800" fill="#b45309" font-family="JetBrains Mono,monospace">α</text>
+        <text x="200" y="100" font-size="12" font-weight="800" fill="#dc2626" font-family="JetBrains Mono,monospace">⌣AC = α°</text>
+        <text x="20" y="22" font-size="10" font-weight="700" fill="#0891b2">центральный угол ∠AOC</text>
       </svg>
     </div>`);
 
@@ -3291,19 +3304,34 @@ function buildP8(){
     $$\\ell = \\dfrac{\\alpha}{360°} \\cdot 2\\pi R$$
     <p style="margin-top:8px">Примеры: при $\\alpha=90°$ дуга $= \\dfrac{\\pi R}{2}$; при $\\alpha=180°$ дуга $= \\pi R$.</p>
     <div style="display:flex;justify-content:center;margin-top:14px">
-      <svg viewBox="0 0 260 150" style="max-width:280px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
-        <circle cx="100" cy="82" r="58" fill="rgba(8,145,178,.07)" stroke="#0891b2" stroke-width="1.8"/>
-        <circle cx="100" cy="82" r="3" fill="#0e7490"/>
-        <line x1="100" y1="82" x2="100" y2="24" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4,3"/>
-        <line x1="100" y1="82" x2="151" y2="104" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4,3"/>
-        <path d="M 100,24 A 58,58 0 0,1 151,104" fill="rgba(239,68,68,.18)" stroke="#ef4444" stroke-width="3"/>
-        <path d="M 100,57 A 25,25 0 0,1 120,73" fill="none" stroke="#f59e0b" stroke-width="2"/>
-        <text x="88" y="79" font-size="10" font-weight="700" fill="#0e7490">O</text>
-        <text x="96" y="19" font-size="11" font-weight="700" fill="#0284c7">A</text>
-        <text x="154" y="107" font-size="11" font-weight="700" fill="#0284c7">C</text>
-        <text x="117" y="70" font-size="10" fill="#b45309" font-weight="700">α</text>
-        <text x="155" y="58" font-size="9" fill="#dc2626" font-weight="700">ℓ = α/360·2πR</text>
-        <text x="28" y="82" font-size="9" fill="#64748b">R</text>
+      <svg viewBox="0 0 280 190" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
+        <!-- O=(110,100) R=70. A at top (angle -90°)=(110,30). C at angle 30°: (110+70·cos30°, 100+70·sin30°)=(170.6, 135). -->
+        <!-- Sector fill -->
+        <path d="M 110,100 L 110,30 A 70,70 0 0,1 171,135 Z" fill="rgba(245,158,11,.15)" stroke="none"/>
+        <!-- Highlighted arc ℓ -->
+        <path d="M 110,30 A 70,70 0 0,1 171,135" fill="none" stroke="#ef4444" stroke-width="4"/>
+        <!-- Circle outline -->
+        <circle cx="110" cy="100" r="70" fill="none" stroke="#0891b2" stroke-width="2"/>
+        <!-- Radii (solid for visibility, with labels) -->
+        <line x1="110" y1="100" x2="110" y2="30" stroke="#0891b2" stroke-width="2"/>
+        <line x1="110" y1="100" x2="171" y2="135" stroke="#0891b2" stroke-width="2"/>
+        <!-- Angle α arc at center -->
+        <path d="M 110,72 A 28,28 0 0,1 134,114" fill="none" stroke="#f59e0b" stroke-width="2.4"/>
+        <!-- Center dot and vertex dots -->
+        <circle cx="110" cy="100" r="3.5" fill="#0e7490"/>
+        <circle cx="110" cy="30" r="4" fill="#0284c7"/>
+        <circle cx="171" cy="135" r="4" fill="#0284c7"/>
+        <!-- R label on radius OA -->
+        <text x="92" y="68" font-size="13" font-weight="800" fill="#0284c7" font-family="JetBrains Mono,monospace">R</text>
+        <!-- Labels -->
+        <text x="93" y="105" font-size="13" font-weight="800" fill="#0e7490" font-family="Unbounded,sans-serif">O</text>
+        <text x="104" y="22" font-size="13" font-weight="800" fill="#0284c7" font-family="Unbounded,sans-serif">A</text>
+        <text x="176" y="143" font-size="13" font-weight="800" fill="#0284c7" font-family="Unbounded,sans-serif">C</text>
+        <text x="124" y="103" font-size="14" font-weight="800" fill="#b45309" font-family="JetBrains Mono,monospace">α</text>
+        <!-- ℓ formula label, off the arc -->
+        <text x="182" y="78" font-size="11" fill="#dc2626" font-weight="800" font-family="JetBrains Mono,monospace">ℓ</text>
+        <text x="20" y="22" font-size="10" font-weight="700" fill="#dc2626">красная дуга AC = ℓ</text>
+        <text x="20" y="182" font-size="11" font-weight="800" fill="#0369a1" font-family="JetBrains Mono,monospace">ℓ = (α/360°)·2πR</text>
       </svg>
     </div>`);