diff --git a/frontend/textbooks/geometry_8_ch1.html b/frontend/textbooks/geometry_8_ch1.html
index a86be4a..05ec324 100644
--- a/frontend/textbooks/geometry_8_ch1.html
+++ b/frontend/textbooks/geometry_8_ch1.html
@@ -2826,11 +2826,11 @@ function buildP7(){
     <div style="display:flex;justify-content:center;margin-top:12px"><svg viewBox="0 0 280 155" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
       <!-- Rectangle ABCD with right angle marks at all corners -->
       <rect x="44" y="32" width="192" height="108" fill="rgba(124,58,237,.10)" stroke="#7c3aed" stroke-width="2"/>
-      <!-- right angle marks -->
-      <path d="M44,140 L44,132 L52,132" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
-      <path d="M44,32 L44,40 L52,40" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
-      <path d="M236,32 L228,32 L228,40" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
-      <path d="M236,140 L228,140 L228,132" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
+      <!-- right angle marks — L-shape pointing INSIDE the rectangle -->
+      <polyline points="53,140 53,131 44,131" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
+      <polyline points="53,32 53,41 44,41" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
+      <polyline points="227,32 227,41 236,41" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
+      <polyline points="227,140 227,131 236,131" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
       <!-- 90° labels -->
       <text x="60" y="130" font-size="9" fill="#7c3aed" font-weight="700" font-family="JetBrains Mono,monospace">90°</text>
       <text x="60" y="52" font-size="9" fill="#7c3aed" font-weight="700" font-family="JetBrains Mono,monospace">90°</text>
@@ -2858,6 +2858,11 @@ function buildP7(){
     <div style="display:flex;justify-content:center;margin-top:12px"><svg viewBox="0 0 280 155" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
       <!-- Rectangle with both diagonals shown as equal -->
       <rect x="44" y="32" width="192" height="108" fill="rgba(124,58,237,.08)" stroke="#7c3aed" stroke-width="2"/>
+      <!-- right angle marks — L-shape pointing INSIDE the rectangle -->
+      <polyline points="53,140 53,131 44,131" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
+      <polyline points="53,32 53,41 44,41" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
+      <polyline points="227,32 227,41 236,41" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
+      <polyline points="227,140 227,131 236,131" fill="none" stroke="#7c3aed" stroke-width="1.5"/>
       <!-- diagonals AC and BD -->
       <line x1="44" y1="140" x2="236" y2="32" stroke="#10b981" stroke-width="2" stroke-dasharray="6 3"/>
       <line x1="236" y1="140" x2="44" y2="32" stroke="#d97706" stroke-width="2" stroke-dasharray="6 3"/>
@@ -2970,10 +2975,18 @@ function buildP7(){
       s+='<rect x="'+Math.min(Ra.x,Rb.x)+'" y="'+Math.min(Ra.y,Rc.y)+'" width="'+Math.abs(Rb.x-Ra.x)+'" height="'+Math.abs(Rc.y-Ra.y)+'" fill="rgba(124,58,237,.10)" stroke="#7c3aed" stroke-width="2.5"/>';
       s+='<line x1="'+Ra.x+'" y1="'+Ra.y+'" x2="'+Rc.x+'" y2="'+Rc.y+'" stroke="#7c3aed" stroke-width="1" stroke-dasharray="5 3" opacity=".6"/>';
       s+='<line x1="'+Rb.x+'" y1="'+Rb.y+'" x2="'+Rd.x+'" y2="'+Rd.y+'" stroke="#7c3aed" stroke-width="1" stroke-dasharray="5 3" opacity=".6"/>';
-      // right-angle marks
-      const sq=8;
-      s+='<rect x="'+Ra.x+'" y="'+(Ra.y-sq)+'" width="'+sq+'" height="'+sq+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".7"/>';
-      s+='<rect x="'+(Rb.x-sq)+'" y="'+(Rb.y-sq)+'" width="'+sq+'" height="'+sq+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".7"/>';
+      // right-angle marks — proper L-shape at all 4 corners pointing INSIDE the rectangle
+      const sq=9;
+      const xl=Math.min(Ra.x,Rb.x), xr=Math.max(Ra.x,Rb.x);
+      const yt=Math.min(Ra.y,Rc.y), yb=Math.max(Ra.y,Rc.y);
+      // bottom-left corner
+      s+='<polyline points="'+(xl+sq)+','+yb+' '+(xl+sq)+','+(yb-sq)+' '+xl+','+(yb-sq)+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".8"/>';
+      // bottom-right corner
+      s+='<polyline points="'+(xr-sq)+','+yb+' '+(xr-sq)+','+(yb-sq)+' '+xr+','+(yb-sq)+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".8"/>';
+      // top-right corner
+      s+='<polyline points="'+(xr-sq)+','+yt+' '+(xr-sq)+','+(yt+sq)+' '+xr+','+(yt+sq)+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".8"/>';
+      // top-left corner
+      s+='<polyline points="'+(xl+sq)+','+yt+' '+(xl+sq)+','+(yt+sq)+' '+xl+','+(yt+sq)+'" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity=".8"/>';
       const labels=['A','B','C','D']; const pts=[Ra,Rb,Rc,Rd];
       pts.forEach((v,i)=>{
         const m=(i===2);
@@ -3697,11 +3710,11 @@ function buildP10(){
     <div style="display:flex;justify-content:center;margin-top:12px"><svg viewBox="0 0 280 158" style="max-width:300px;background:#fafafa;border:1px solid var(--border);border-radius:10px">
       <!-- Square with equal-side ticks, right angle marks, both diagonals -->
       <rect x="60" y="26" width="108" height="108" fill="rgba(234,179,8,.12)" stroke="#d97706" stroke-width="2.5"/>
-      <!-- right angle marks -->
-      <path d="M60,134 L60,126 L68,126" fill="none" stroke="#d97706" stroke-width="1.5"/>
-      <path d="M168,134 L160,134 L160,126" fill="none" stroke="#d97706" stroke-width="1.5"/>
-      <path d="M168,26 L160,26 L160,34" fill="none" stroke="#d97706" stroke-width="1.5"/>
-      <path d="M60,26 L60,34 L68,34" fill="none" stroke="#d97706" stroke-width="1.5"/>
+      <!-- right angle marks — L-shape pointing INSIDE the square -->
+      <polyline points="69,134 69,125 60,125" fill="none" stroke="#d97706" stroke-width="1.5"/>
+      <polyline points="159,134 159,125 168,125" fill="none" stroke="#d97706" stroke-width="1.5"/>
+      <polyline points="159,26 159,35 168,35" fill="none" stroke="#d97706" stroke-width="1.5"/>
+      <polyline points="69,26 69,35 60,35" fill="none" stroke="#d97706" stroke-width="1.5"/>
       <!-- equal side ticks (all 4 sides) -->
       <line x1="107" y1="24" x2="121" y2="24" stroke="#d97706" stroke-width="2"/>
       <line x1="107" y1="136" x2="121" y2="136" stroke="#d97706" stroke-width="2"/>
@@ -3751,11 +3764,11 @@ function buildP10(){
       <text x="52" y="76" text-anchor="middle" font-size="12" fill="#b45309" font-weight="700" font-family="JetBrains Mono,monospace">a</text>
       <!-- diagonal label -->
       <text x="102" y="64" font-size="10" fill="#6d28d9" font-weight="700" font-family="JetBrains Mono,monospace">a√2</text>
-      <!-- right angle marks at all 4 corners -->
-      <path d="M68,124 L68,116 L76,116" fill="none" stroke="#d97706" stroke-width="1.5"/>
-      <path d="M168,124 L160,124 L160,116" fill="none" stroke="#d97706" stroke-width="1.5"/>
-      <path d="M68,24 L68,32 L76,32" fill="none" stroke="#d97706" stroke-width="1.5"/>
-      <path d="M168,24 L160,24 L160,32" fill="none" stroke="#d97706" stroke-width="1.5"/>
+      <!-- right angle marks at all 4 corners — L-shape pointing INSIDE the square -->
+      <polyline points="77,124 77,115 68,115" fill="none" stroke="#d97706" stroke-width="1.5"/>
+      <polyline points="159,124 159,115 168,115" fill="none" stroke="#d97706" stroke-width="1.5"/>
+      <polyline points="77,24 77,33 68,33" fill="none" stroke="#d97706" stroke-width="1.5"/>
+      <polyline points="159,24 159,33 168,33" fill="none" stroke="#d97706" stroke-width="1.5"/>
       <!-- formula box at right -->
       <rect x="188" y="38" width="78" height="74" rx="6" fill="rgba(234,179,8,.10)" stroke="#d97706" stroke-width="1"/>
       <text x="227" y="58" text-anchor="middle" font-size="10" fill="#b45309" font-weight="700" font-family="JetBrains Mono,monospace">P = 4a</text>
@@ -3785,6 +3798,21 @@ function buildP10(){
       <line x1="20" y1="120" x2="60" y2="80" stroke="#10b981" stroke-width="1" stroke-dasharray="4 2" opacity=".7"/>
       <line x1="90" y1="118" x2="150" y2="58" stroke="#0891b2" stroke-width="1" stroke-dasharray="4 2" opacity=".7"/>
       <line x1="178" y1="112" x2="260" y2="30" stroke="#d97706" stroke-width="1" stroke-dasharray="4 2" opacity=".7"/>
+      <!-- right angle marks — square 1 (green, 40×40 at 20,80) -->
+      <polyline points="26,120 26,114 20,114" fill="none" stroke="#10b981" stroke-width="1.2"/>
+      <polyline points="54,120 54,114 60,114" fill="none" stroke="#10b981" stroke-width="1.2"/>
+      <polyline points="54,80 54,86 60,86" fill="none" stroke="#10b981" stroke-width="1.2"/>
+      <polyline points="26,80 26,86 20,86" fill="none" stroke="#10b981" stroke-width="1.2"/>
+      <!-- right angle marks — square 2 (blue, 60×60 at 90,58) -->
+      <polyline points="96,118 96,112 90,112" fill="none" stroke="#0891b2" stroke-width="1.2"/>
+      <polyline points="144,118 144,112 150,112" fill="none" stroke="#0891b2" stroke-width="1.2"/>
+      <polyline points="144,58 144,64 150,64" fill="none" stroke="#0891b2" stroke-width="1.2"/>
+      <polyline points="96,58 96,64 90,64" fill="none" stroke="#0891b2" stroke-width="1.2"/>
+      <!-- right angle marks — square 3 (orange, 82×82 at 178,30) -->
+      <polyline points="185,112 185,105 178,105" fill="none" stroke="#d97706" stroke-width="1.2"/>
+      <polyline points="253,112 253,105 260,105" fill="none" stroke="#d97706" stroke-width="1.2"/>
+      <polyline points="253,30 253,37 260,37" fill="none" stroke="#d97706" stroke-width="1.2"/>
+      <polyline points="185,30 185,37 178,37" fill="none" stroke="#d97706" stroke-width="1.2"/>
     </svg></div>`);
 
   /* --- INTERACTIVE 1: SVG-квадрат со слайдером --- */
@@ -3882,11 +3910,19 @@ function buildP10(){
       // diagonals
       s+='<line x1="'+A.x+'" y1="'+A.y+'" x2="'+C.x+'" y2="'+C.y+'" stroke="#059669" stroke-width="1.5" stroke-dasharray="5 3" opacity=".7"/>';
       s+='<line x1="'+B.x+'" y1="'+B.y+'" x2="'+D.x+'" y2="'+D.y+'" stroke="#059669" stroke-width="1.5" stroke-dasharray="5 3" opacity=".7"/>';
-      // right-angle at O
+      // right-angle at diagonal intersection O
       const sq=7;
       s+='<polyline points="'+(cx+sq)+','+cy+' '+(cx+sq)+','+(cy-sq)+' '+cx+','+(cy-sq)+'" fill="none" stroke="#059669" stroke-width="1.5" opacity=".8"/>';
-      // right-angle marks at corners
-      s+='<rect x="'+(A.x)+'" y="'+(A.y-sq)+'" width="'+sq+'" height="'+sq+'" fill="none" stroke="#059669" stroke-width="1.2" opacity=".6"/>';
+      // right-angle marks at all 4 corners — proper L-shape pointing INSIDE the square
+      const m=8;
+      // A = bottom-left (cx-half, cy+half)
+      s+='<polyline points="'+(A.x+m)+','+A.y+' '+(A.x+m)+','+(A.y-m)+' '+A.x+','+(A.y-m)+'" fill="none" stroke="#059669" stroke-width="1.5" opacity=".8"/>';
+      // B = bottom-right (cx+half, cy+half)
+      s+='<polyline points="'+(B.x-m)+','+B.y+' '+(B.x-m)+','+(B.y-m)+' '+B.x+','+(B.y-m)+'" fill="none" stroke="#059669" stroke-width="1.5" opacity=".8"/>';
+      // C = top-right (cx+half, cy-half)
+      s+='<polyline points="'+(C.x-m)+','+C.y+' '+(C.x-m)+','+(C.y+m)+' '+C.x+','+(C.y+m)+'" fill="none" stroke="#059669" stroke-width="1.5" opacity=".8"/>';
+      // D = top-left (cx-half, cy-half)
+      s+='<polyline points="'+(D.x+m)+','+D.y+' '+(D.x+m)+','+(D.y+m)+' '+D.x+','+(D.y+m)+'" fill="none" stroke="#059669" stroke-width="1.5" opacity=".8"/>';
       // center dot
       s+='<circle cx="'+cx+'" cy="'+cy+'" r="4" fill="#f59e0b" stroke="#fff" stroke-width="1.5"/>';
       // side labels