fix(geom8 ch4): прямые углы в §7 + LaTeX в §8 и §11 slider

§7 Card 7.1 (общая внешняя касательная теория): добавлены 4 правильных
маркера прямого угла (L-формы) во всех 4 точках касания + радиусы
от O₁/O₂ к каждой точке касания.

§7 Card 7.2 (доказательство формулы): переделан рисунок — добавлена
точка K (основание перпендикуляра из O₂ на O₁T₁) с подписью,
правильные L-маркеры в T₁, T₂, K; подписи R₁, R₂, R₁−R₂, d.

§7 Интерактив 1 (live внешняя касательная): добавлены 4 маркера
прямого угла во всех точках касания, вычисляемых через единичные
векторы радиуса и касательной + красные точки на T₃,T₄ + 4 пунктирных
радиуса от центров.

§8 LaTeX: \alpha, \smile, \ell, \dfrac, \cdot, \pi
в card 8.1 (центральный угол) и 8.3 (длина дуги).
§8 Интерактив 1 help: \angle ABC.

§11 Интерактив 1 help: \angle ACB.

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

frontend/textbooks/geometry_8_ch4.html

@@ -2812,14 +2812,21 @@ function buildP7(){
         <circle cx="65" cy="90" r="2.5" fill="#0f766e"/>
         <circle cx="215" cy="90" r="2.5" fill="#0f766e"/>
         <line x1="65" y1="90" x2="215" y2="90" stroke="#64748b" stroke-width="1.3" stroke-dasharray="4,3"/>
+        <line x1="65" y1="90" x2="65" y2="50" stroke="#0d9488" stroke-width="1.4" stroke-dasharray="3,2"/>
+        <line x1="215" y1="90" x2="215" y2="65" stroke="#0d9488" stroke-width="1.4" stroke-dasharray="3,2"/>
+        <line x1="65" y1="90" x2="65" y2="130" stroke="#0d9488" stroke-width="1.4" stroke-dasharray="3,2"/>
+        <line x1="215" y1="90" x2="215" y2="115" stroke="#0d9488" stroke-width="1.4" stroke-dasharray="3,2"/>
         <line x1="65" y1="50" x2="215" y2="65" stroke="#0d9488" stroke-width="2.2"/>
         <line x1="65" y1="130" x2="215" y2="115" stroke="#0d9488" stroke-width="2.2"/>
         <circle cx="65" cy="50" r="3.5" fill="#dc2626"/>
         <circle cx="215" cy="65" r="3.5" fill="#dc2626"/>
         <circle cx="65" cy="130" r="3.5" fill="#dc2626"/>
         <circle cx="215" cy="115" r="3.5" fill="#dc2626"/>
-        <polyline points="65,50 65,59 74,59" fill="none" stroke="#0f766e" stroke-width="1.5"/>
-        <polyline points="215,65 215,74 206,74" fill="none" stroke="#0f766e" stroke-width="1.5"/>
+        <!-- right-angle markers: proper L inside angle between radius (down to O) and tangent (toward other circle) -->
+        <polyline points="65,59 74,59 74,50" fill="none" stroke="#0f766e" stroke-width="1.6"/>
+        <polyline points="215,74 206,74 206,65" fill="none" stroke="#0f766e" stroke-width="1.6"/>
+        <polyline points="65,121 74,121 74,130" fill="none" stroke="#0f766e" stroke-width="1.6"/>
+        <polyline points="215,106 206,106 206,115" fill="none" stroke="#0f766e" stroke-width="1.6"/>
         <text x="60" y="88" font-size="10" font-weight="700" fill="#0f766e">O₁</text>
         <text x="218" y="88" font-size="10" font-weight="700" fill="#0f766e">O₂</text>
         <text x="130" y="50" text-anchor="middle" font-size="9" fill="#dc2626" font-weight="700">ℓ (внешняя)</text>
@@ -2836,24 +2843,39 @@ function buildP7(){
       <li>$d^2 = (R_1-R_2)^2 + \\ell^2$, откуда $\\ell = \\sqrt{d^2-(R_1-R_2)^2}$. <b>ч.т.д.</b></li>
     </ol>
     <div style="display:flex;justify-content:center;margin-top:10px">
-      <svg viewBox="0 0 260 130" style="max-width:275px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
-        <circle cx="60" cy="80" r="45" fill="rgba(13,148,136,.08)" stroke="#0d9488" stroke-width="2"/>
-        <circle cx="200" cy="80" r="28" fill="rgba(13,148,136,.08)" stroke="#0d9488" stroke-width="2"/>
-        <line x1="60" y1="35" x2="200" y2="52" stroke="#dc2626" stroke-width="2.2"/>
-        <line x1="60" y1="35" x2="60" y2="80" stroke="#0d9488" stroke-width="1.8"/>
-        <line x1="200" y1="52" x2="200" y2="80" stroke="#0d9488" stroke-width="1.8"/>
-        <line x1="60" y1="80" x2="200" y2="80" stroke="#64748b" stroke-width="1.3" stroke-dasharray="3,2"/>
-        <line x1="200" y1="52" x2="200" y2="80" stroke="#64748b" stroke-width="1.3" stroke-dasharray="2,2"/>
-        <rect x="60" y="52" width="140" height="28" fill="rgba(13,148,136,.07)" stroke="#0d9488" stroke-width="1" stroke-dasharray="3,2"/>
-        <polyline points="60,35 69,35 69,44 60,44" fill="none" stroke="#0f766e" stroke-width="1.5"/>
-        <polyline points="200,52 200,61 191,61" fill="none" stroke="#0f766e" stroke-width="1.5"/>
-        <text x="55" y="78" font-size="10" font-weight="700" fill="#0f766e">O₁</text>
-        <text x="202" y="78" font-size="10" font-weight="700" fill="#0f766e">O₂</text>
-        <text x="55" y="32" font-size="9" fill="#dc2626">T₁</text>
-        <text x="202" y="50" font-size="9" fill="#dc2626">T₂</text>
-        <text x="120" y="46" text-anchor="middle" font-size="9" fill="#dc2626" font-weight="700">ℓ</text>
-        <text x="195" y="97" font-size="8" fill="#64748b">R₁−R₂</text>
-        <text x="120" y="94" text-anchor="middle" font-size="8" fill="#64748b">d</text>
+      <svg viewBox="0 0 280 140" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
+        <circle cx="60" cy="85" r="45" fill="rgba(13,148,136,.08)" stroke="#0d9488" stroke-width="2"/>
+        <circle cx="210" cy="85" r="28" fill="rgba(13,148,136,.08)" stroke="#0d9488" stroke-width="2"/>
+        <!-- tangent line T₁T₂ -->
+        <line x1="60" y1="40" x2="210" y2="57" stroke="#dc2626" stroke-width="2.2"/>
+        <!-- radii to T₁ and T₂ (vertical) -->
+        <line x1="60" y1="85" x2="60" y2="40" stroke="#0d9488" stroke-width="1.8"/>
+        <line x1="210" y1="85" x2="210" y2="57" stroke="#0d9488" stroke-width="1.8"/>
+        <!-- O₁O₂ line + auxiliary point K (foot of perp from O₂ on O₁T₁) -->
+        <line x1="60" y1="85" x2="210" y2="85" stroke="#64748b" stroke-width="1.3" stroke-dasharray="3,2"/>
+        <line x1="60" y1="57" x2="210" y2="57" stroke="#64748b" stroke-width="1.2" stroke-dasharray="2,2"/>
+        <circle cx="60" cy="57" r="2.5" fill="#0d9488"/>
+        <text x="46" y="60" font-size="10" font-weight="700" fill="#0f766e">K</text>
+        <!-- vertex dots -->
+        <circle cx="60" cy="85" r="2.5" fill="#0f766e"/>
+        <circle cx="210" cy="85" r="2.5" fill="#0f766e"/>
+        <circle cx="60" cy="40" r="3.5" fill="#dc2626"/>
+        <circle cx="210" cy="57" r="3.5" fill="#dc2626"/>
+        <!-- right-angle markers at T₁ (between OT and tangent toward T₂): u_OT=down, u_t≈(0.993,0.113) -->
+        <polyline points="60,49 69,49 69,40" fill="none" stroke="#0f766e" stroke-width="1.6"/>
+        <!-- at T₂: u_OT=down, u_t toward T₁≈(-0.993,-0.113) -->
+        <polyline points="210,66 201,66 201,57" fill="none" stroke="#0f766e" stroke-width="1.6"/>
+        <!-- right angle at K (between KO₁=down and KO₂=right) -->
+        <polyline points="60,66 69,66 69,57" fill="none" stroke="#0f766e" stroke-width="1.4"/>
+        <text x="48" y="83" font-size="10" font-weight="700" fill="#0f766e">O₁</text>
+        <text x="214" y="83" font-size="10" font-weight="700" fill="#0f766e">O₂</text>
+        <text x="48" y="36" font-size="11" font-weight="700" fill="#dc2626">T₁</text>
+        <text x="214" y="54" font-size="11" font-weight="700" fill="#dc2626">T₂</text>
+        <text x="125" y="42" text-anchor="middle" font-size="11" fill="#dc2626" font-weight="700">ℓ</text>
+        <text x="40" y="78" font-size="9" fill="#0d9488" font-weight="700">R₁</text>
+        <text x="215" y="76" font-size="9" fill="#0d9488" font-weight="700">R₂</text>
+        <text x="125" y="99" text-anchor="middle" font-size="10" fill="#64748b" font-weight="700">d = |O₁O₂|</text>
+        <text x="120" y="71" text-anchor="middle" font-size="9" fill="#0d9488" font-weight="700">R₁−R₂</text>
       </svg>
     </div>`);
 
@@ -2968,18 +2990,52 @@ function buildP7(){
       const T2X=cx2+R2*sinA, T2Y=CY-R2*cosA;
       const T3X=cx1+R1*sinA, T3Y=CY+R1*cosA;
       const T4X=cx2+R2*sinA, T4Y=CY+R2*cosA;
+      /* right-angle markers at T1 (upper-left tangent point) and T2 (upper-right) */
+      const s=8;
+      const u1x=(T1X-cx1)/R1, u1y=(T1Y-CY)/R1; // outward radial unit at T1
+      const t1x=(T2X-T1X), t1y=(T2Y-T1Y), t1len=Math.hypot(t1x,t1y);
+      const v1x=t1x/t1len, v1y=t1y/t1len; // along tangent toward T2
+      // marker: arms inside (toward O1 and along tangent)
+      const m1p1x=T1X-u1x*s, m1p1y=T1Y-u1y*s;
+      const m1cx=m1p1x+v1x*s, m1cy=m1p1y+v1y*s;
+      const m1p2x=T1X+v1x*s, m1p2y=T1Y+v1y*s;
+      const u2x=(T2X-cx2)/R2, u2y=(T2Y-CY)/R2;
+      const v2x=-v1x, v2y=-v1y; // toward T1
+      const m2p1x=T2X-u2x*s, m2p1y=T2Y-u2y*s;
+      const m2cx=m2p1x+v2x*s, m2cy=m2p1y+v2y*s;
+      const m2p2x=T2X+v2x*s, m2p2y=T2Y+v2y*s;
+      /* lower tangent T3-T4 markers */
+      const u3x=(T3X-cx1)/R1, u3y=(T3Y-CY)/R1;
+      const t3x=(T4X-T3X), t3y=(T4Y-T3Y), t3len=Math.hypot(t3x,t3y);
+      const v3x=t3x/t3len, v3y=t3y/t3len;
+      const m3p1x=T3X-u3x*s, m3p1y=T3Y-u3y*s;
+      const m3cx=m3p1x+v3x*s, m3cy=m3p1y+v3y*s;
+      const m3p2x=T3X+v3x*s, m3p2y=T3Y+v3y*s;
+      const u4x=(T4X-cx2)/R2, u4y=(T4Y-CY)/R2;
+      const v4x=-v3x, v4y=-v3y;
+      const m4p1x=T4X-u4x*s, m4p1y=T4Y-u4y*s;
+      const m4cx=m4p1x+v4x*s, m4cy=m4p1y+v4y*s;
+      const m4p2x=T4X+v4x*s, m4p2y=T4Y+v4y*s;
       svgWrap.innerHTML=`<svg viewBox="0 0 ${W} ${H}" style="max-width:${W}px;width:100%;background:#fafafa;border:1px solid var(--border);border-radius:10px">
         <circle cx="${cx1}" cy="${CY}" r="${R1}" fill="rgba(13,148,136,.08)" stroke="#0d9488" stroke-width="2"/>
         <circle cx="${cx2}" cy="${CY}" r="${R2}" fill="rgba(13,148,136,.08)" stroke="#0d9488" stroke-width="2"/>
         <circle cx="${cx1}" cy="${CY}" r="2.5" fill="#0f766e"/>
         <circle cx="${cx2}" cy="${CY}" r="2.5" fill="#0f766e"/>
         <line x1="${cx1}" y1="${CY}" x2="${cx2}" y2="${CY}" stroke="#64748b" stroke-width="1.2" stroke-dasharray="3,2"/>
+        <line x1="${cx1}" y1="${CY}" x2="${T1X.toFixed(1)}" y2="${T1Y.toFixed(1)}" stroke="#0d9488" stroke-width="1.3" stroke-dasharray="3,2"/>
+        <line x1="${cx2}" y1="${CY}" x2="${T2X.toFixed(1)}" y2="${T2Y.toFixed(1)}" stroke="#0d9488" stroke-width="1.3" stroke-dasharray="3,2"/>
+        <line x1="${cx1}" y1="${CY}" x2="${T3X.toFixed(1)}" y2="${T3Y.toFixed(1)}" stroke="#0d9488" stroke-width="1.3" stroke-dasharray="3,2"/>
+        <line x1="${cx2}" y1="${CY}" x2="${T4X.toFixed(1)}" y2="${T4Y.toFixed(1)}" stroke="#0d9488" stroke-width="1.3" stroke-dasharray="3,2"/>
         <line x1="${T1X}" y1="${T1Y}" x2="${T2X}" y2="${T2Y}" stroke="#dc2626" stroke-width="2.2"/>
         <line x1="${T3X}" y1="${T3Y}" x2="${T4X}" y2="${T4Y}" stroke="#dc2626" stroke-width="2.2"/>
         <circle cx="${T1X}" cy="${T1Y}" r="3.5" fill="#dc2626"/>
         <circle cx="${T2X}" cy="${T2Y}" r="3.5" fill="#dc2626"/>
-        <line x1="${cx1}" y1="${CY}" x2="${T1X}" y2="${T1Y}" stroke="#64748b" stroke-width="1.3" stroke-dasharray="2,2"/>
-        <line x1="${cx2}" y1="${CY}" x2="${T2X}" y2="${T2Y}" stroke="#64748b" stroke-width="1.3" stroke-dasharray="2,2"/>
+        <circle cx="${T3X}" cy="${T3Y}" r="3.5" fill="#dc2626"/>
+        <circle cx="${T4X}" cy="${T4Y}" r="3.5" fill="#dc2626"/>
+        <polyline points="${m1p1x.toFixed(1)},${m1p1y.toFixed(1)} ${m1cx.toFixed(1)},${m1cy.toFixed(1)} ${m1p2x.toFixed(1)},${m1p2y.toFixed(1)}" fill="none" stroke="#0f766e" stroke-width="1.6"/>
+        <polyline points="${m2p1x.toFixed(1)},${m2p1y.toFixed(1)} ${m2cx.toFixed(1)},${m2cy.toFixed(1)} ${m2p2x.toFixed(1)},${m2p2y.toFixed(1)}" fill="none" stroke="#0f766e" stroke-width="1.6"/>
+        <polyline points="${m3p1x.toFixed(1)},${m3p1y.toFixed(1)} ${m3cx.toFixed(1)},${m3cy.toFixed(1)} ${m3p2x.toFixed(1)},${m3p2y.toFixed(1)}" fill="none" stroke="#0f766e" stroke-width="1.6"/>
+        <polyline points="${m4p1x.toFixed(1)},${m4p1y.toFixed(1)} ${m4cx.toFixed(1)},${m4cy.toFixed(1)} ${m4p2x.toFixed(1)},${m4p2y.toFixed(1)}" fill="none" stroke="#0f766e" stroke-width="1.6"/>
         <text x="${cx1}" y="${CY+14}" text-anchor="middle" font-size="9" font-weight="700" fill="#0f766e">O₁</text>
         <text x="${cx2}" y="${CY+14}" text-anchor="middle" font-size="9" font-weight="700" fill="#0f766e">O₂</text>
         <text x="${(T1X+T2X)/2}" y="${Math.min(T1Y,T2Y)-6}" text-anchor="middle" font-size="9" fill="#dc2626" font-weight="700">ℓ=${L.toFixed(1)}</text>
@@ -3190,7 +3246,7 @@ function buildP8(){
     <ul style="margin-left:18px;margin-top:6px;line-height:1.9">
       <li>Полная окружность содержит <b>360°</b>.</li>
       <li>Полуокружность (диаметр делит окружность) — <b>180°</b>.</li>
-      <li>Если центральный угол $\alpha$, то дуга $\smile AC = \alpha°$.</li>
+      <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">
@@ -3231,9 +3287,9 @@ function buildP8(){
     </div>`);
 
   html+=makeCard('rule','Формула длины дуги','8.3',`
-    <p><b>Длина дуги</b> через центральный угол $\alpha$ (в градусах) и радиус $R$:</p>
-    $$\ell = \dfrac{\alpha}{360°} \cdot 2\pi R$$
-    <p style="margin-top:8px">Примеры: при $\alpha=90°$ дуга $= \dfrac{\pi R}{2}$; при $\alpha=180°$ дуга $= \pi R$.</p>
+    <p><b>Длина дуги</b> через центральный угол $\\alpha$ (в градусах) и радиус $R$:</p>
+    $$\\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"/>
@@ -3267,7 +3323,7 @@ function buildP8(){
   /* ИНТЕРАКТИВ 2 — слайдер положения вершины вписанного угла */
   html+=`<div class="wg" id="p8-ins-wg">
     <div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">Вписанный угол: вершина на окружности</div></div>
-    <div class="wg-help">Двигай слайдер — смотри, как меняется положение вершины $B$ вписанного угла $\angle ABC$.</div>
+    <div class="wg-help">Двигай слайдер — смотри, как меняется положение вершины $B$ вписанного угла $\\angle ABC$.</div>
     <div class="sliders">
       <label>Положение $B$ (угол от оси) = <b id="p8-ins-val">210</b>°
         <input type="range" min="181" max="359" value="210" id="p8-ins-sl">
@@ -4363,7 +4419,7 @@ function buildP11(){
   /* ИНТЕРАКТИВ 1 — слайдер положения C */
   html+=`<div class="wg" id="p11-diam-wg">
     <div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 1</span><div class="wg-title">Вписанный угол на диаметре всегда 90°</div></div>
-    <div class="wg-help">Двигай слайдер — перемещай точку $C$ по окружности. Угол $\angle ACB$ всегда остаётся прямым!</div>
+    <div class="wg-help">Двигай слайдер — перемещай точку $C$ по окружности. Угол $\\angle ACB$ всегда остаётся прямым!</div>
     <div class="sliders">
       <label>Положение $C$ = <b id="p11-c-val">100</b>°
         <input type="range" min="10" max="170" value="100" id="p11-c-sl">