diff --git a/public/theme.css b/public/theme.css
index dfaa877f4e1ff3f8305723eacbcf94a86f9fc90e..91720ceba2c63b8f2d9301ee7a919d204e2d280f 100644
--- a/public/theme.css
+++ b/public/theme.css
@@ -20,7 +20,7 @@ body {
   counter-reset: h2counter;
   scroll-behavior: smooth;
 }
-.blocks2 {
+.blocks {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
   grid-gap: 2px;
@@ -29,7 +29,7 @@ body {
   align-items: start;
   padding: 2px;
 }
-.block2 {
+.block {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: column;
@@ -46,16 +46,13 @@ body {
 #reg022lines {
   margin-bottom: 5px;
 }
-.block2.text{
+.block.text{
   padding-left: 2px;
   padding-right: 2px;
 }
 .flex-j-center {
   justify-content: center;
 }
-.blocks2 .block {
-  display: inline;
-}
 .figcaption {
   text-align: center;
   color:#333;
@@ -99,18 +96,6 @@ body {
   max-width: 100%;
 }
 
-.blocks {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
-  align-items:baseline;
-  grid-gap: 4px;
-  grid-auto-columns: 60px;
-  flex-wrap: wrap;
-  padding:2px;
-}
-.reg02euclid, .reg02elem,.reg02pythagthm{
-  /* grid-row: 1/3; */
-}
 .reg02eucgeo {
   display: inline-flex;
   flex-direction: column;
@@ -497,9 +482,22 @@ img.reg02elements {
 .elevquarter{
   margin-top: 0em;
 }
+.mt01{
+  margin-top: 0px;
+}
 @media only screen and (max-width: 600px) {
   h1{font-size: 1.4em;}
   h2{font-size: 1.3em;}
   h3{font-size: 1.2em;}
   h4{font-size: 1.1em;}
+}
+@media print {
+  body{
+    overflow: auto;
+    
+  }
+  .content{
+    overflow: visible;
+  }
+  pre, blockquote, .block {page-break-inside: avoid;}
 }
\ No newline at end of file
diff --git a/public/tsbb06.html b/public/tsbb06.html
index e25148bb97b32fab09f879659f87dfcfc9c180bb..8ca4f7434a6454913ad592ee9b395dc5937ca5fe 100644
--- a/public/tsbb06.html
+++ b/public/tsbb06.html
@@ -2,9 +2,9 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link type="text/css" href="reboot.css" rel="stylesheet">
     <link rel="stylesheet" href="katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
-    <link type="text/css" href="mirim.css" rel="stylesheet">
     <link type="text/css" href="theme.css" rel="stylesheet">
     <script src="katex.min.js"></script>
     <script src="tsbb06.js"></script>
@@ -63,121 +63,121 @@
       <div>
         <div id="reg01"></div><h2>Background and Overview</h2>
         <h3 class="hidden">Euclidean Geometry</h3>
-        <div class="blocks2 hidden">
-          <div class="block2 reg01euclid row2">
+        <div class="blocks hidden">
+          <div class="block reg01euclid row2">
             <div class="figure">
               <img src="figs/euclid.jpg">
             </div>
             <div class="figcaption">Euclid, 300BC</div>
           </div>
-          <div class="block2">
+          <div class="block">
             <div class="figure"><img class="reg02elements" src="figs/elements2.jpg"></div>
             <div class="figcaption">Euclid's Elements</div>
           </div>
-          <div class="block2">
+          <div class="block">
             <div class="figure"><img src="figs/edge-compass.svg"></div>
             <div class="figcaption">Straight Edge and Compass</div>
           </div>
-          <div class="block2 col2 reg01geo">
+          <div class="block col2 reg01geo">
             <div class="figure"><img src="figs/euclidean-geometry.svg"></div>
             <div class="figcaption">Geometric objects in Elements</div>
           </div>
-          <div class="block2 reg02pyth">
+          <div class="block reg02pyth">
             <div class="figure"><img src="figs/elements-right-angle.svg"></div>
             <div class="figcaption">Pythagorean Theorem</div>
           </div>
-          <div class="block2 row2">
+          <div class="block row2">
             <div class="figure"><img src="figs/solid-angle.svg"></div>
             <div class="figcaption">Solid angles and Volumes</div>
           </div>
         </div>
         <h3 class="hidden">Perspective</h3>
-        <div class="blocks2 hidden">
-          <div class="block2 col3">
+        <div class="blocks hidden">
+          <div class="block col3">
             <div class="figure"><img src="figs/optics.svg"></div>
             <div class="figcaption">Euclid's&nbsp;<span class="emph">Optics</span> &nbsp;book</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/perspective-first.jpg"></div>
             <div class="figcaption">Fillipo Brunelleschi (1377-1446) & Masaccio (1401-1428)</div>
           </div>
-          <div class="block2 row2 col3">
+          <div class="block row2 col3">
             <div class="figure"><img src="figs/raphael.jpg"></div>
             <div class="figcaption">Raphael (1483-1520), The School of Athens (1509-1511)</div>
           </div>
-          <div class="block2 row2 col4">
+          <div class="block row2 col4">
             <div class="figure"><img src="figs/lastsupper.jpg"></div>
             <div class="figcaption">Leonardo da Vinci (1452-1519), The Last Supper (1495–1496)</div>
           </div>
-          <div class="youtube-container block2 row2 col4">
+          <div class="youtube-container block row2 col4">
             <iframe class="youtube-video" src="https://www.youtube.com/embed/bkNMM8uiMww" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
           </div>
-          <div class="block2 col2">
+          <div class="block col2">
             <div class="figure"><img src="figs/depictura1.jpg"></div>
             <div class="figcaption">Leon Battista Alberti's&nbsp; <span class="emph">De Pictura</span> (1435)</div>
           </div>
-          <div class="block2 col2">
+          <div class="block col2">
             <div class="figure"><img src="figs/depictura2.jpg"></div>
           </div>
         </div>
         <h3 class="hidden">Projective Geometry</h3>
-        <div class="blocks2 hidden">
-          <div class="block2 row2 col2">
+        <div class="blocks hidden">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/kepler.jpg"></div>
             <div class="figcaption">Johannes Kepler (1571-1630)</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/kepler-ellipsis.svg"></div>
             <div class="figcaption">Ellipse and parabola</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/desargues.jpg"></div>
             <div class="figcaption">Girard Desargues (1591-1661)</div>
           </div>
-          <div class="block2 row2 col3">
+          <div class="block row2 col3">
             <div class="figure"><img src="figs/projection-angle.svg"></div>
             <div class="figcaption">No angles, distances, areas or volumes</div>
           </div>
-          <div class="block2 col4 flex-aj-center">
+          <div class="block col4 flex-aj-center">
             <p><span class="kw">Projective geometry</span> is a study of:</p>
             <ul>
               <li>Points, lines and planes</li>
               <li>Properties which remain unaltered (<span class="kw">invariant</span>) in projections.</li>
             </ul>
           </div>
-          <div class="block2 col3 row2">
+          <div class="block col3 row2">
             <div class="figure"><img src="figs/projection-parallel-lines.svg"></div>
             <div class="figcaption">All lines intersect</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/fermat.jpg"></div>
             <div class="figcaption">Pierre Fermat (1607-1665)</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/pascal.jpg"></div>
             <div class="figcaption">Blaise Pascal (1623-1662)</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/descartes.jpg"></div>
             <div class="figcaption">René Descartes (1596-1650)</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/lageometrie.jpg"></div>
             <div class="figcaption">La Géométrie (1637)</div>
           </div>
-          <div class="block2 row2 col3">
+          <div class="block row2 col3">
             <div class="figure"><img src="figs/analytic-geometry.svg"></div>
             <div class="figcaption">Analytic geometry</div>
           </div>
-          <div class="block2 col2">
+          <div class="block col2">
             <div class="figure"><img src="figs/differential-geometry.svg"></div>
             <div class="figcaption">Differential geometry</div>
           </div>
-          <div class="block2 col2">
+          <div class="block col2">
             <div class="figure"><img src="figs/algebraic-geometry.svg"></div>
             <div class="figcaption">Algebraic geometry</div>
           </div>
-          <div class="block2 col4 flex-aj-center">
+          <div class="block col4 flex-aj-center">
             <p><b>Projective Geometry & Linear Algebra:</b></p>
             <ul>
               <li>Homogeneous coordinates</li>
@@ -187,57 +187,57 @@
           </div>
         </div>
         <h3 class="hidden">Photogrammetry</h3>
-        <div class="blocks2 hidden">
-          <div class="block2 col4 row2">
+        <div class="blocks hidden">
+          <div class="block col4 row2">
             <div class="figure"><img src="figs/cameraobscura.jpg"></div>
             <div class="figcaption">Photography: Camera Obscura</div>
           </div>
-          <div class="block2 col3 row2">
+          <div class="block col3 row2">
             <div class="figure"><img src="figs/photography.jpg"></div>
             <div class="figcaption">First photography: View from the Window at Le Gras</div>
           </div>
-          <div class="block2 col2">
+          <div class="block col2">
             <div class="figure"><img src="figs/optics-physics.svg"></div>
             <div class="figcaption">Optics</div>
           </div>
-          <div class="block2 col4 row2">
+          <div class="block col4 row2">
             <div class="figure"><img src="figs/landsurvey.jpg"></div>
             <div class="figcaption">Land survey</div>
           </div>
-          <div class="block2 flex-aj-center col2">
+          <div class="block flex-aj-center col2">
             <p><b>Goals</b></p>
             <ul>
               <li>Measurements of geometric objects</li>
               <li>Object position and orientation</li>
             </ul>
           </div>
-          <div class="block2 col4 row2">
+          <div class="block col4 row2">
             <div class="figure"><img src="figs/camerapose.png"></div>
             <div class="figcaption">Camera pose: position and orientation</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/hauck-guido.jpg"></div>
             <div class="figcaption">Guido Hermann Hauck (1845-1905)</div>
           </div>
-          <div class="block2 col3 row2">
+          <div class="block col3 row2">
             <div class="figure"><img src="figs/camera-pose.svg"></div>
             <div class="figcaption">Homography (1883) and Epipolar geometry</div>
           </div>
-          <div class="block2 row2 col4">
+          <div class="block row2 col4">
             <div class="figure"><img src="figs/colossus.jpg"></div>
             <div class="figcaption">Colossus (1943)</div>
           </div>
-          <div class="block2 row2 col3">
+          <div class="block row2 col3">
             <div class="figure"><img src="figs/altair8800.jpg"></div>
             <div class="figcaption">Altair 8800 (1974)</div>
           </div>
-          <div class="block2 col4 flex-aj-center">
+          <div class="block col4 flex-aj-center">
             <p><span class="kw">Bundle Adjustment</span> (Duane Brown - 1958): <ul>
               <li><span class="emph">Input</span>: images from cameras at multiple positions and visible points;</li>
               <li><span class="emph">Output</span>: positions of points and camera poses</li></ul>
             </p>
           </div>
-          <div class="block2 col4 flex-aj-center">
+          <div class="block col4 flex-aj-center">
             D.C. Brown.
             A solution to the general problem of multiple station analytical stereotriangulation. 
             Technical report, Patrick Airforce Base, Florida, 1958. RCA-MTP Data Reduction Technical Report No. 43
@@ -245,45 +245,45 @@
           
         </div>
         <h3 class="hidden">Computer vision</h3>
-        <div class="blocks2 hidden">
-          <div class="block2 row2 col2">
+        <div class="blocks hidden">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/first-scan.jpg"></div>
             <div class="figcaption">First digitized image (1957)</div>
           </div>
-          <div class="block2 col3 row2">
+          <div class="block col3 row2">
             <div class="figure"><img src="figs/first-scan-complete.jpg"></div>
             <div class="figcaption">Russell Kirsch and 3-month-old son, Walden</div>
           </div>
-          <div class="block2 col3 row2">
+          <div class="block col3 row2">
             <div class="figure"><img src="figs/object-detection.jpg"></div>
             <div class="figcaption">Object detection</div>
           </div>
-          <div class="block2 col5 row2">
+          <div class="block col5 row2">
             <div class="figure"><img src="figs/3dreconstruction.jpg"></div>
             <div class="figcaption">3d reconstruction</div>
           </div>
-          <div class="block2 col3 row2">
+          <div class="block col3 row2">
             <div class="figure"><img src="figs/line-detection.png"></div>
             <div class="figcaption">Line detection</div>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/corner-detection.jpg"></div>
             <div class="figcaption">Corner detection</div>
           </div>
-          <div class="block2 row2 col3">
+          <div class="block row2 col3">
             <div class="figure"><img src="figs/cv-medicine.jpg"></div>
             <div class="figcaption">Computer vision in medicine</div>
           </div>
-          <div class="block2 col3 row2">
+          <div class="block col3 row2">
             <div class="figure"><img src="figs/cv-manufacturing.png"></div>
             <div class="figcaption">Computer vision in manufacturing</div>
           </div>
-          <div class="block2 flex-aj-center col3">
+          <div class="block flex-aj-center col3">
             <div>P. Sturm.
             <a href="https://link.springer.com/chapter/10.1007/978-3-642-23672-3_1" target="blank">A historical survey of geometric computer vision</a>. 
             In <span class="emph">International Conference on Computer Analysis of Images and Patterns</span>, pages 1-8, 2011. doi: 10.1007/978-3-642-23672-3\-1</div>
           </div>
-          <div class="block2 row2 col5">
+          <div class="block row2 col5">
             <div class="figure"><div class="figure"><img src="figs/sfm.jpg"></div><div class="figure"><img src="figs/sfm2.jpg"></div></div>
             <div class="figcaption">Structure from motion</div>
           </div>
@@ -291,31 +291,31 @@
         
         <p class="part">Representations</p>
         <div id="reg02"></div><h2>Cartesian Representations</h2>
-        <div class="blocks2 hidden">
-          <div class="block2 row2 col2">
+        <div class="blocks hidden">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/reg02-cartesian.svg"></div>
             <div class="figcaption"><span class="kw">Cartesian coordinate system</span></div>
           </div>
-          <div class="block2 row2">
+          <div class="block row2">
             <div class="figure"><img src="figs/handedness.svg"></div>
             <div class="figcaption"><span class="kw">Handedness</span> (right hand = clockwise)</div>
           </div>
-          <div class="block2">
+          <div class="block">
             <div class="figure"><img src="figs/righthand.svg"></div>
             <div class="figcaption">Right hand system</div>
           </div>
-          <div class="block2">
+          <div class="block">
             <div class="figure"><img src="figs/lefthand.svg"></div>
             <div class="figcaption">Left hand system</div>
           </div>
-          <div class="block2">
+          <div class="block">
             <div class="figure"><img src="figs/lefthand.svg"></div>
             <div class="figcaption">Left hand system</div>
           </div>
         </div>
         <h3 class="hidden">Points in <span class="keq">\mathbb{E}^2</span></h3>
-        <div class="blocks2 hidden">
-          <div class="block2 row3 col3">
+        <div class="blocks hidden">
+          <div class="block row3 col3">
             <p><span class="kw">Point</span> in <span class="keq">\mathbb{E}^2\Rightarrow</span> <span class="kw">Vector</span> <span class="keq">\vec{x}\in \mathbb{R}^2</span></p>
             <div class="center keq">\vec{x}\hspace{-2px}=\hspace{-2px}\begin{bmatrix}x_1\\x_2\end{bmatrix}</div>
             <p class="elevquarter"><span class="kw">Vector sum</span>: <span class="keq">\vec{z}=\vec{x}\hspace{-2px}+\hspace{-2px}\vec{y}\hspace{-2px}=\hspace{-4px}\begin{bmatrix}\hspace{-4px}x_1\hspace{-2px}+\hspace{-2px}y_1\hspace{-5px}\\\hspace{-4px}x_2\hspace{-2px}+\hspace{-2px}y_2\hspace{-5px}\end{bmatrix}</span></p>
@@ -328,13 +328,13 @@
             <div class="eq keq">\|\vec{x}\|=(\vec{x}\cdot \vec{x})^\frac{1}{2}=\sqrt{x_1^2+x_2^2}</div>
             
             <p><span class="kw">Unit vector</span>: <span class="keq">\hat{x}=\frac{\vec{x}}{\|\vec{x}\|}, \|\hat{x}\|=1</span></p>
-          </div><div class="block2 col2">
+          </div><div class="block col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
           </div>
-          <div class="block2 col2">
+          <div class="block col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
           </div>
-          <div class="block2 col4 row2">
+          <div class="block col4 row2">
             <p><b>Scalar product and angles</b> (<span class="keq">\theta=\angle(\vec{x}, \vec{y})</span>): </p>
             <div class="keq eq">\vec{x}\cdot \vec{y} = \|\vec{x}\|\|\vec{y}\|\cos\theta</div>
             <p><span class="kw">Perpendicularity</span> (<span class="kw">Orthogonality</span>):</p>
@@ -348,26 +348,26 @@
             </div>
           </div>
           
-          <div class="block2 col2">
+          <div class="block col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Left hand system</div>
           </div>
-          <div class="block2 col2">
+          <div class="block col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Left hand system</div>
           </div>
-          <div class="block2 col2">
+          <div class="block col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Left hand system</div>
           </div>
-          <div class="block2 col2">
+          <div class="block col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Left hand system</div>
           </div>
         </div>
         <h3 class="hidden">Lines in <span class="keq">\mathbb{E}^2</span></h3>
-        <div class="blocks2 hidden">
-          <div class="block2 row2 col4 text">
+        <div class="blocks hidden">
+          <div class="block row2 col4 text">
             <p><span class="kw">Line</span> in <span class="mr-math"><span class="mr-bb"><span class="mr-mord">E</span></span><span class="mr-msupsub"><span class="mr-msup"><span class="mr-mtext">2</span></span></span></span>: <span class="keq">\vec{x}</span> satisfying the <span class="kw">equation of the line</span>:</p>
             <div class="eq keq">l_1x_1+l_2x_2=\vec{l}\cdot\vec{x}=\Delta</div>
             <p><span class="kw">Co-linear</span>: <span class="keq">\exists \vec{l}: \vec{l}\cdot\vec{x}=\vec{l}\cdot\vec{y}=\vec{l}\cdot\vec{z}</span></p>
@@ -376,34 +376,34 @@
             <div class="eq keq">\vec{l}\cdot(\vec{x}-\vec{y}) = \vec{l}\cdot\vec{x}-\vec{l}\cdot\vec{y} = \Delta-\Delta = 0</div>
             
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Equation of the line</div>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Co-linear points</div>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption"><span class="keq">\vec{l}</span> normal to line tangent</div>
           </div>
-          <div class="block2 col4 text">
+          <div class="block col4 text">
             <h4 class="center">Slope-Intercept Form</h4>
             <div class="eq keq">x_2=f(x_1)=-\frac{l_1}{l_2}x_1+\frac{\Delta}{l_2} = mx_1+b</div>
             <div><span class="kw">Slope</span>: <span class="keq">m=\frac{x_2-b}{x_1}\Rightarrow f(x_1+1)=x_2+m</span></div>
             <div><span class="kw">Intercept</span>: <span class="keq">b = f(0)</span></div>
             <div><b>Problem</b>: <span class="keq">l_2=0\Rightarrow x_1=b</span> (vertical line).</div>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Slope-Intersect form</div>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Degenerate: vertical line.</div>
           </div>
-          <div class="block2 col4 row2 text">
+          <div class="block col4 row2 text">
             <h4 class="center">Hesse Normal Form</h4>
             <div class="center keq">\|\hat{l}\|\hspace{-2px}=\hspace{-2px}1\hspace{-2px}\Rightarrow\hspace{-2px}\hat{l}\hspace{-2px}=\hspace{-2px}\begin{bmatrix}l_1\\l_2\end{bmatrix}\hspace{-2px}=\hspace{-2px}\begin{bmatrix}\cos\alpha\\\sin\alpha\end{bmatrix}</div>
             <div class="keq eq">\hat{l}\cdot\vec{x}=x_1\cos\alpha+x_2\sin\alpha=\Delta</div>
@@ -414,11 +414,11 @@
               <li><span class="keq">\Delta = 0</span>: <span class="keq">\hat{l}\cdot\left[0,0\right]=\Delta</span></li>
             </ul>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Hesse normal form</div>
           </div>
-          <div class="block2 col4 row2 text">
+          <div class="block col4 row2 text">
             <h4 class="center">Parametric form 1: Vector form</h4>
             <p><span class="keq">\vec{l}\perp(\vec{x}-\vec{y}) \Rightarrow \vec{l}\perp\frac{\vec{x}-\vec{y}}{\|\vec{x}-\vec{y}\|} \Rightarrow \hat{l}\perp\hat{v}</span></p>
             <div class="keq eq">\vec{x}=\vec{x}_0+t\hat{v}=\vec{x}_0+(-t)(-\hat{v})</div>
@@ -435,38 +435,38 @@
               </li>
             </ul>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Vector form</div>
           </div>
-          <div class="block2 col2">
+          <div class="block col2">
             <h4 class="center">Parametric form 2: Linear Interpolation</h4>
             <div class="keq eq">\vec{x}=t\vec{x}_1+(1-t)\vec{x}_2</div>
             <p><ul><li><span class="keq">t\in[0,1] \Rightarrow \vec{x}\in\overline{\vec{x}_1\vec{x}_2}</span></li></ul></p>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Linear interpolation</div>
           </div>
         </div>
         <h3 class="hidden">Points, planes and lines in <span class="keq">\mathbb{E}^3</span></h3>
-        <div class="blocks2 hidden">
-          <div class="block2 col4 row2">
+        <div class="blocks hidden">
+          <div class="block col5 row2">
             <h4 class="center">Points</h4>
             <div class="eq keq">\vec{x}=\left[x_1,x_2,x_3\right]^T</div>
             <div class="eq keq">\vec{x}\cdot\vec{y}=x_1y_1+x_2y_2+x_3y_3</div>
             <div class="eq keq">\|\vec{x}\|=(\vec{x}\cdot\vec{x})^\frac{1}{2}=\sqrt{x_1^2+x_2^2+x_3^2}</div>
             <div class="eq keq">\begin{aligned}
                 d(\vec{x},\vec{y})&=\|\vec{x}-\vec{y}\| \\
-                &=\sqrt{(x_1-y_1)^2\hspace{-2px}+\hspace{-2px}(x_2-y_2)^2\hspace{-2px}+\hspace{-2px}(x_3-y_3)^2}
+                &=\sqrt{(x_1-y_1)^2+(x_2-y_2)^2+(x_3-y_3)^2}
               \end{aligned}</div>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Points and their distance</div>
           </div>
           
-          <div class="block2 col4 row2 text">
+          <div class="block col5 row2 text">
             <h4 class="center">Planes</h4>
             <p><b>Equation</b>: <span class="keq">x_1p_1+x_2p_2+x_3p_3=\vec{x}\cdot\vec{p}=\Delta</span></p>
             <p><span class="kw">Co-planar</span>: <span class="keq">\exists \vec{p}: \vec{p}\cdot\vec{x}=\vec{p}\cdot\vec{y}=\vec{p}\cdot\vec{z}=\vec{p}\cdot\vec{w}</span></p>
@@ -476,38 +476,38 @@
             <p>Vector form: <span class="keq">\hat{v}_1\cdot\hat{p}=\hat{v}_2\cdot\hat{p}=0</span></p>
             <div id="reg021planevec" class="eq keq">\vec{x} = \vec{x}_0 + t_1\hat{v}_1+t_2\hat{v}_2 = \begin{bmatrix}\hat{v}_1&\hat{v}_2&\vec{x}_0\end{bmatrix}\begin{bmatrix}t_1\\t_2\\1\end{bmatrix}</div>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Planes</div>
           </div>
-          <div class="block2 col2 text">
+          <div class="block col2 text">
             <h4 class="center">Lines</h4>
             <p><span class="keq">\vec{x}\hspace{-2px}=\hspace{-2px}\vec{x}_0+t\hat{x}</span></p>
             <p><span class="keq">\vec{x}\hspace{-2px}=\hspace{-2px}t\vec{x}_1+(1-t)\vec{x}_2</span></p>
             <p>Line as intersection of planes</p>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Lines in 3D</div>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Intersection of planes</div>
           </div>
         </div>
         <h3 class="hidden">Basic geometric operations</h3>
-        <div class="blocks2 hidden">
-          <div class="block2 col4 row2">
+        <div class="blocks hidden">
+          <div class="block col4 row2">
             <h4 class="center">Line from two points in <span class="keq">\mathbb{E}^2</span></h4>
             <div class="eq keq">\overbrace{\vec{x}-\vec{y}=\begin{bmatrix}x_1-y_1\\x_2-y_2\end{bmatrix}}^{\text{Tangent vector}}\hspace{10px}\overbrace{\vec{l}=\pm\begin{bmatrix}y_2-x_2\\x_1-y_1\end{bmatrix}}^{\text{Normal vector}}</div>
             <div class="eq keq">\hat{l}=\displaystyle\frac{\vec{l}}{\|\vec{l}\|}, \Delta=\hat{l}\vec{x}</div>
             <p class="center"><span class="eq keq">\vec{x}=\vec{y}\Rightarrow \vec{l}=\begin{bmatrix}0&0\end{bmatrix}^T</span> (not a line normal)</p>
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Vector form</div>
           </div>
-          <div class="block2 col5 row2 text">
+          <div class="block col5 row2 text">
             <h4 class="center">Intersection between two lines in <span class="keq">\mathbb{E}^2</span></h4>
             <p>Two normalized lines: <span class="keq">(\hat{l},\Delta_l)</span> and <span class="keq">(\hat{m},\Delta_m)</span></p>
             <p id="reg022lines"><span class="keq">
@@ -534,11 +534,11 @@
             </div>
             <div class="eq keq">\vec{x}\hspace{-2px} =\hspace{-2px} \vec{x}_l\hspace{-2px} =\hspace{-2px} \vec{x}_m\hspace{-2px} =\hspace{-2px} \hspace{-2px}\displaystyle \frac{1}{l_2m_1-l_1m_2}\hspace{-2px}\begin{bmatrix}\Delta_ml_2-\Delta_lm_2\\\Delta_lm_1-\Delta_ml_1\end{bmatrix}</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Intersection between two lines</div>
           </div>
-          <div class="block2 col4 row2">
+          <div class="block col4 row2">
             <h4 class="center">Distance between point and line</h4>
             <p class="elevquarter">Point <span class="keq">\vec{x}</span> and line <span class="keq">(\hat{l},\Delta)</span></p>
             <p class="elevquarter">Tangent vector <span class="keq">\hat{t}=\left[-l_2, l_1\right]\Rightarrow \hat{t}\perp\hat{l}</span></p>
@@ -553,7 +553,7 @@
 
               </span></p>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Distance between point and line</div>
           </div>
@@ -561,8 +561,8 @@
 
         <div id="reg03"></div><h2>Homogeneous Representations in 2D</h2>
         <h3 class="hidden">Homogeneous coordinates of 2D points</h3>
-        <div class="blocks2 hidden">
-          <div class="block2 col4 row2">
+        <div class="blocks hidden">
+          <div class="block col4 row2">
             <p><span class="keq">x_1l_1+x_2l_2=\vec{x}\cdot \hat{l}=\Delta</span></p>
             <p class="elev"><span class="keq">x_1l_1+x_2l_2+1(-\Delta)=0\hspace{-3px}=\hspace{-3px}
               \begin{bmatrix}x_1\\x_2\\1\end{bmatrix}\hspace{-2px}\cdot\hspace{-3px}
@@ -579,11 +579,11 @@
                       \sim\hspace{-3px}\begin{bmatrix}2\\4\\2\end{bmatrix}\hspace{-3px}
                       \sim\hspace{-3px}\begin{bmatrix}-1\\-2\\-1\end{bmatrix}</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Distance between point and line</div>
           </div>
-          <div class="block2 row2 col4 text">
+          <div class="block row2 col4 text">
             <h4 class="center">P-normalization</h4>
             <p><span class="keq">\mathbb{R}^2\rightarrow \mathbb{P}(\mathbb{R^2})</span>, Inverse: <span class="keq">\mathbb{P}(\mathbb{R^2})\rightarrow \mathbb{R}^2</span></p>
             <p class="keq center">\tilde{x}=\begin{bmatrix}x_1\\x_2\\x_3\end{bmatrix}
@@ -594,14 +594,14 @@
             <p class="center keq">c_P(\tilde{x})=h_P(n_P(\vec{x})) </p>
             <p>Problem: <span class="keq">\begin{bmatrix}\vec{x}&0\end{bmatrix}^T\hspace{-5px}\in\mathbb{P}(\mathbb{R^2})</span> if <span class="keq">\vec{x}\neq \vec{0}</span></p>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Distance between point and line</div>
           </div>
         </div>
         <h3 class="hidden">Dual homogeneous coordinates of 2D Lines</h3>
-        <div class="blocks2 hidden">
-          <div class="block2 text col4">
+        <div class="blocks hidden">
+          <div class="block text col4">
             <p class="kw">Dual homogeneous coordinates:</p>
             <div class="eq keq">\tilde{l}
             =\hspace{-1em}\overbrace{\begin{bmatrix}\hat{l}\\-\Delta\end{bmatrix}}^{\text{Canonical Form}}
@@ -610,11 +610,11 @@
               \Leftrightarrow \tilde{x}\cdot\tilde{l}=0
               \Leftrightarrow \tilde{x}\perp\tilde{l}</span></p>
           </div>
-          <div class="block2 row2 col3">
+          <div class="block row2 col3">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Distance between point and line</div>
           </div>
-          <div class="block2 text col4">
+          <div class="block text col4">
             <h4 class="center">D-normalization</h4>
             <p class="center keq elevquarter">
               \tilde{l}_\beta=\begin{bmatrix}\vec{\beta}\\\beta_n\end{bmatrix}
@@ -636,28 +636,28 @@
           
         </div>
         <h3 class="hidden">Relations between Points and Lines</h3>
-        <div class="blocks2 hidden">
-          <div class="block2 col4 text">
+        <div class="blocks hidden">
+          <div class="block col4 text">
             <h4>Line that intersects two points</h4>
             <p class="eq keq elevquarter">\tilde{x}\cdot\tilde{l}=\tilde{y}\cdot\tilde{l}=0\Rightarrow \tilde{l}\perp \tilde{x} \text{ and } \tilde{l}\perp \tilde{y}</p>
             <p class="eq keq elevquarter">\tilde{l}\sim\tilde{x}\times\tilde{y}\sim\tilde{y}\times\tilde{x}</p>
             <div class="center keq elevquarter">\vec{l}=\pm\begin{bmatrix}y_2-x_2\\x_1-y_1\end{bmatrix}, \hat{l}=\displaystyle\frac{\vec{l}}{\|\vec{l}\|}, \Delta=\hat{l}\vec{x}</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Line through points</div>
           </div>
-          <div class="block2 col4 text">
+          <div class="block col4 text">
             <h4>Point that intersects two lines</h4>
             <p class="eq keq elevquarter">\tilde{l}\cdot\tilde{x}=\tilde{m}\cdot\tilde{x}=0\Rightarrow \tilde{x}\perp \tilde{l} \text{ and } \tilde{x}\perp \tilde{m}</p>
             <p class="eq keq elevquarter">\tilde{x}\sim\tilde{l}\times\tilde{m}\sim\tilde{m}\times\tilde{l}</p>
             <div class="eq keq elevquarter">\vec{x} = \hspace{-2px}\displaystyle \frac{1}{l_2m_1-l_1m_2}\hspace{-2px}\begin{bmatrix}\Delta_ml_2-\Delta_lm_2\\\Delta_lm_1-\Delta_ml_1\end{bmatrix}</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Point through lines</div>
           </div>
-          <div class="block2 col4 text">
+          <div class="block col4 text">
             <h4>Degenerate cases</h4>
             <p class="elevquarter">Identical points: <span class="keq">\tilde{x}=\tilde{y}\Rightarrow \tilde{x}\times\tilde{y}=\vec{0}</span></p>
             <p class="elevquarter">Identical lines: <span class="keq">\tilde{l}=\tilde{m}\Rightarrow \tilde{l}\times\tilde{m}=\vec{0}</span></p>
@@ -666,7 +666,7 @@
           </div>
           
           
-          <div class="block2 col4 row4 text">
+          <div class="block col4 row4 text">
             <h4>Points on a line</h4>
             <p class="elevquarter center"><span class="keq">\tilde{x}_k\cdot\tilde{l}=0,\hspace{10px} k=1,\ldots,m\ge 3</span></p>
             <p class="elevquarter center"><span class="keq">\begin{bmatrix}\tilde{x}_1^T\tilde{l}\\\vdots\\\tilde{x}_m^T\tilde{l}\end{bmatrix}\hspace{-5px}=\hspace{-5px}\begin{bmatrix}\tilde{x}_1^T\\\vdots\\\tilde{x}_m^T\end{bmatrix}\tilde{l}=X^T\tilde{l}=\vec{0}</span></p>
@@ -692,11 +692,11 @@
             <p class="elevquarter"><span class="keq">\tilde{l}</span>: right eigenvector <span class="keq">\vec{v}_k</span> for eigenvalue <span class="keq">\sigma_k\hspace{-2px}=\hspace{-2px}0</span></p>
             <p class="elevquarter">Numerical issues: <span class="keq">\sigma_k\approx 0</span></p>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Distance between point and line</div>
           </div>
-          <div class="block2 col4 row3 text">
+          <div class="block col4 row3 text">
             <h4>Lines through a point</h4>
             <p class="elevquarter center"><span class="keq">\tilde{l}_k\cdot\tilde{x}=0,\hspace{10px} k=1,\ldots,m\ge 2</span></p>
             <p class="elevquarter center"><span class="keq">\begin{bmatrix}\tilde{l}_1^T\tilde{x}\\\vdots\\\tilde{l}_m^T\tilde{x}\end{bmatrix}\hspace{-5px}=\hspace{-5px}\begin{bmatrix}\tilde{l}_1^T\\\vdots\\\tilde{l}_m^T\end{bmatrix}\tilde{x}=L^T\tilde{x}=\vec{0}</span></p>
@@ -714,14 +714,14 @@
             <p class="elevquarter"><span class="keq">\tilde{x}</span>: right eigenvector <span class="keq">\vec{v}_k</span> for eigenvalue <span class="keq">\sigma_k\hspace{-2px}=\hspace{-2px}0</span></p>
             <p class="elevquarter">Numerical issues: <span class="keq">\sigma_k\approx 0</span></p>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Distance between point and line</div>
           </div>
         </div>
-        <h3>Operations on normalized homogeneous coordinates</h3>
-        <div class="blocks2">
-          <div class="block2 col4 text">
+        <h3 class="hidden">Operations on normalized homogeneous coordinates</h3>
+        <div class="blocks hidden">
+          <div class="block col4 text">
             <h4>Distance between two points</h4>
             <p class="elevquarter"><span class="keq">\tilde{x}=k_x\begin{bmatrix}x_1&x_2&1\end{bmatrix}, \tilde{y}=k_y\begin{bmatrix}y_1&y_2&1\end{bmatrix}</span></p>
             <p><span class="kw">Point-to-point</span> distance</p>
@@ -734,21 +734,21 @@
             </div>
 
           </div>
-          <div class="block2 col2 row2">
+          <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Distance between points</div>
           </div>
-          <div class="block2 col4 text">
+          <div class="block col4 text">
             <h4>Distance between point and line</h4>
             <p class="elevquarter">Point <span class="keq">\tilde{x}</span> and line <span class="keq">\tilde{l}</span></p>
             <p class="keq elevquarter">d(\vec{x},(\hat{l},\Delta)) \hspace{-2px}=\hspace{-2px} |\hat{l}\cdot\vec{x}-\Delta|\hspace{-2px} =\hspace{-2px} \left|\begin{bmatrix}\vec{x}\\1\end{bmatrix}\hspace{-3px}\cdot\hspace{-3px}\begin{bmatrix}\hat{l}\\-\Delta\end{bmatrix}\right|</p>
             <p class="keq elevquarter">d_{PD}(\tilde{x},\tilde{l})) \hspace{-2px}=\hspace{-2px} |n_P(\tilde{x})\cdot n_D(\tilde{l})|</p>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Distance between point and line</div>
           </div>
-          <div class="block2 col4 row2 text">
+          <div class="block col4 row2 text">
             <h4>Signed distance between point and line</h4>
             <p class="center elevquarter"><span class="keq">s(\tilde{x},\tilde{l})=n_P(\tilde{x})\cdot n_D(\tilde{l})</span></p>
             <p class="center elevquarter"><span class="keq">s(\tilde{x},\tilde{l})\hspace{-3px}\begin{cases}
@@ -761,15 +761,15 @@
             <p><span class="keq">\text{sign}(s(\tilde{x},\tilde{l}))=-\text{sign}(s(\tilde{y},\tilde{l}))</span></p>
             <ul><li><span class="keq">\Leftrightarrow \tilde{x},\tilde{y} \text{ lie on different sides}</span></li></ul>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Signed distance</div>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Line estimation</div>
           </div>
-          <div class="block2 row3 col4 text">
+          <div class="block row3 col4 text">
             <h4>Area of a triangle</h4>
             <p>Points <span class="keq">\vec{x},\vec{y},\vec{z}</span></p>
             <p><span class="keq">A_\square=\|\vec{y}-\vec{x}\|\|\vec{z}-\vec{x}\|\sin\alpha</span></p>
@@ -792,34 +792,160 @@
              =\frac{1}{2}|&(x_1-z_1)(y_2-x_2)\\-&(x_1-y_1)(z_2-x_2)|
             \end{aligned}</span></p>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Area of triangle</div>
           </div>
-          <div class="block2 row3 col6 text">
+          <div class="block row3 col6 text">
             <h4>Order of corner points and directed lines</h4>
             <p><span class="keq">n_P(\tilde{x})\hspace{-2px}\times\hspace{-2px} n_P(\tilde{y})+n_P(\tilde{y})\hspace{-2px}\times\hspace{-2px} n_P(\tilde{z})+n_P(\tilde{z})\hspace{-2px}\times\hspace{-2px} n_P(\tilde{x})=\begin{bmatrix}0\\0\\\pm 2A_\triangle\end{bmatrix}</span></p>
             <p class="center"><span class="keq">\text{det}(n_P(\tilde{x}),n_P(\tilde{y}),n_P(\tilde{z}))=\underbrace{(n_P(\tilde{x})\times n_P(\tilde{y}))}_{\displaystyle\tilde{l}}\cdot n_P(\tilde{z})</span></p>
             <p class="center"><span class="keq">\tilde{l}\cdot n_P(\tilde{z})\begin{cases}\lt 0, \tilde{x}\tilde{y}\tilde{z}\text{ clockwise}\\=0, \tilde{x}\tilde{y}\tilde{z}\text{ collinear}\\\gt 0, \tilde{x}\tilde{y}\tilde{z}\text{ counter-clockwise}\end{cases}</span></p>
             <p class="center"><span class="keq">\tilde{l}\cdot n_P(\tilde{z})\begin{cases}\lt 0, \tilde{z}\text{ on the right of }\tilde{l}\\=0, \tilde{z}\text{ on }\tilde{l}\\\gt 0, \tilde{z}\text{ on the left of }\tilde{l}\end{cases}</span></p>
           </div>
-          <div class="block2 row2 col2">
+          <div class="block row2 col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Cross product</div>
           </div>
-          <div class="block2 row2 col3">
+          <div class="block row2 col3">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Directed line</div>
           </div>
-          <div class="block2 col6 text">
+          <div class="block col6 text">
             <h4>Inside or outside?</h4>
             <p><span class="kw">Convex region</span> <span class="keq">\Omega</span>: <span class="keq">x_k, k=1,\ldots,m</span></p>
             <p class="center"><span class="keq">\tilde{y}\in\Omega\Leftrightarrow (n_P(\tilde{x}_{k-1})\times n_P(\tilde{x}_k))\cdot \tilde{x}\ge 0,\forall k=1,\ldots,m</span></p>
           </div>
-          <div class="block2 col3 text center flex-aj-center note">
+          <div class="block col3 text center flex-aj-center note">
             <b>Avoid normalizations, unless required (e.g., distance, area)</b>
           </div>
         </div>
+        <h3>Points at infinity</h3>
+        <div class="blocks">
+          <div class="block col2 row2">
+            <div class="figure"><img src="figs/placeholder.svg"></div>
+            <div class="figcaption">Distance between points</div>
+          </div>
+          <div class="block col5 row3 text">
+            <h4>Points at infinity</h4>
+            <p>Parallel lines: <span class="keq">\tilde{l}=\begin{bmatrix}l_1\\l_2\\-\Delta_1\end{bmatrix}, 
+                         \tilde{m}=\begin{bmatrix}l_1\\l_2\\-\Delta_2\end{bmatrix}</span></p>
+            <p><span class="keq">\tilde{x}\sim\tilde{l}\times\tilde{m}\hspace{-2px}=\hspace{-2px}
+              \begin{bmatrix}
+                l_2(-\Delta_2)\hspace{-2px}-\hspace{-2px}l_2(-\Delta_1)\\
+                l_1(-\Delta_1)\hspace{-2px}-\hspace{-2px}l_1(-\Delta_2)\\
+                l_1l_2         \hspace{-2px}-\hspace{-2px}l_2l_1
+                \end{bmatrix}\hspace{-2px}=\hspace{-2px}
+                \begin{bmatrix}\Delta_1-\Delta_2\end{bmatrix}\hspace{-5px}
+                \begin{bmatrix}-l_2\\l_1\\0\end{bmatrix}</span></p>
+            <p>Cannot be P-normalized</p>
+            <p>Well defined (<span class="keq">\Delta_1\neq\Delta_2</span>)</p>
+            <p class="center"><span class="keq">\tilde{l}=\begin{bmatrix}\cos\alpha_1\\\sin\alpha_1\\-\Delta_1\end{bmatrix}, 
+                         \tilde{m}=\begin{bmatrix}\cos\alpha_2\\\sin\alpha_2\\-\Delta_2\end{bmatrix}</span></p>
+            <p class="center"><span class="keq">\tilde{x}\sim\tilde{l}\times\tilde{m}=
+              \begin{bmatrix}
+                -\Delta_2\sin\alpha_1+\Delta_1\sin\alpha_2\\
+                \Delta_2\cos\alpha_1-\Delta_1\cos\alpha_2\\
+                \sin(\alpha_2-\alpha_1)
+                \end{bmatrix}</span></p>
+          </div>
+          <div class="block col2 row2">
+            <div class="figure"><img src="figs/placeholder.svg"></div>
+            <div class="figcaption">Parallel lines and point at infinity</div>
+          </div>
+          <div class="block col2 row2">
+            <div class="figure"><img src="figs/placeholder.svg"></div>
+            <div class="figcaption">Parallel lines and point at infinity</div>
+          </div>
+          <div class="block text col3">
+            <h4>Infinity = -Infinity?</h4>
+            <p><span class="keq">\begin{bmatrix}l_2 & -l_1\end{bmatrix}^T</span> and <span class="keq">\begin{bmatrix}-l_2 & l_1\end{bmatrix}^T</span></p>
+            <p>Same point</p>
+            <p><em>Orientation of the line</em> in <span class="keq">\mathbb{E}^2</span></p>
+          </div>
+          <div class="block col2 row2">
+            <div class="figure"><img src="figs/placeholder.svg"></div>
+            <div class="figcaption">Several parallel lines</div>
+          </div>
+          <div class="block text col3 note flex-aj-center center">
+            <b>Any set of distinct and parallel lines intersect at a single point, a point at infinity</b>
+          </div>
+          <div class="block text col3 flex-aj-center">
+            <ul>
+              <li><em>Proper point</em> = <em>affine point</em></li>
+              <li><em>Proper line</em></li>
+              <li><em>Point at infinity</em> = <em>ideal point</em> = <em>affine vector</em> = <em>direction</em></li>
+            </ul>
+          </div>
+          <div class="block text col3 row2">
+            <h4>Line at infinity</h4>
+            <p class="mt01"><span class="keq">\tilde{x}=\begin{bmatrix}x_1\\x_2\\1\end{bmatrix}, \tilde{y}=\begin{bmatrix}y_1\\y_2\\0\end{bmatrix}</span></p>
+            <p class="mt01"><span class="keq">l\sim\tilde{x}\times\tilde{y}=\begin{bmatrix}-y_2\\y_1\\x_1y_2-y_1x_2\end{bmatrix}</span></p>
+            <p class="mt01"><span class="keq">\hat{l}=\begin{bmatrix}-y_2\\y_1\end{bmatrix}, \hat{t}=\begin{bmatrix}y_1\\y_2\end{bmatrix}</span></p>
+            <p class="mt01"><span class="keq">
+              \tilde{l}\hspace{-2px}=\hspace{-2px}\begin{bmatrix}l_1\hspace{3px} l_2\hspace{3px} {-\Delta}\end{bmatrix}^T\hspace{-5px},
+              \tilde{x}\hspace{-2px}=\hspace{-2px}\begin{bmatrix}{-l_2} \hspace{-5px}&\hspace{-5px} l_1 \hspace{-5px}&\hspace{-5px} 0\end{bmatrix}^T</span>
+            </p>
+            <p class="mt01"><span class="keq">\tilde{l}\cdot \tilde{x}=0</span></p>
+          </div>
+          <div class="block col3 text row2">
+            <h4>Line through points at infinity</h4>
+            <p class="mt01"><span class="keq">\tilde{x}=\begin{bmatrix}x_1\\x_2\\0\end{bmatrix}, \tilde{y}=\begin{bmatrix}y_1\\y_2\\0\end{bmatrix}</span></p>
+            <p class="mt01"><span class="keq">l\sim\tilde{x}\times\tilde{y}=\begin{bmatrix}0\\0\\x_1y_2-y_1x_2\end{bmatrix}</span></p>
+            <p>Cannot be D-normalized</p>
+          </div>
+          <div class="block note col2 text">
+            <p><span class="kw">Line at infinity</span></p>
+            <p class="mt01 center"><span class="keq">\tilde{l}_\infty=\begin{bmatrix}0\\0\\1\end{bmatrix}</span></p>
+            <p class="center">Lines in <span class="keq">\mathbb{E}^2\hspace{-1px} +\hspace{0px} \tilde{l}_\infty</span></p>
+          </div>
+          <div class="block col3 text row2">
+            <p><b>Point or line</b>: <span class="keq">\tilde{x}\in\mathbb{R}^3\setminus\{0,0,0\}</span></p>
+            <ul>
+              <li><span class="keq">c\neq 0</span></li>
+              <li><span class="keq">d\neq 0</span> or <span class="keq">e\neq 0</span></li>
+            </ul>
+            <p class="center"><span class="keq">
+              \overbrace{\begin{bmatrix}a\\b\\c\end{bmatrix}}^{\text{point/line}}\hspace{-10px}
+              \underbrace{\begin{bmatrix}d\\e\\0\end{bmatrix}}_{\text{Point at infinity}}\hspace{-16px}
+              \overbrace{\begin{bmatrix}0\\0\\c\end{bmatrix}}^{\text{Line at infinity}}
+            </span></p>
+          </div>
+
+          <div class="block col2 row2">
+            <div class="figure"><img src="figs/placeholder.svg"></div>
+            <div class="figcaption">Parallel lines and point at infinity</div>
+          </div>
+          <div class="block col3 text">
+            <h4>Projective geometry and projective plane</h4>
+            <p>Euclidean geometry:</p>
+            <ul>
+              <li>no points at infinity</li>
+              <li>parallel lines do not intersect</li>
+            </ul>
+          </div>
+          <div class="block note col3 text">
+            <p><span class="kw">Projective Plane</span>: <span class="keq">\mathbb{P}^2</span></p>
+            <p class="center"><span class="keq">\mathbb{E}^2\cup</span> set of points at infinity</p>
+          </div>
+
+          <div class="block col2 row2">
+            <div class="figure"><img src="figs/placeholder.svg"></div>
+            <div class="figcaption">Parallel lines and point at infinity</div>
+          </div>
+          <div class="block col2 row2">
+            <div class="figure"><img src="figs/placeholder.svg"></div>
+            <div class="figcaption">Parallel lines and point at infinity</div>
+          </div>
+          <div class="block col2 row2">
+            <div class="figure"><img src="figs/placeholder.svg"></div>
+            <div class="figcaption">Parallel lines and point at infinity</div>
+          </div>
+          <div class="block col2 row2">
+            <div class="figure"><img src="figs/placeholder.svg"></div>
+            <div class="figcaption">Parallel lines and point at infinity</div>
+          </div>
+        </div>
 
         
         
@@ -841,7 +967,7 @@
         
       </div>
       <p class="part">Estimation</p>
-      <div class="hidden">
+      <div>
         <div id="reg12"></div><h2>Introduction of Estimation in Geometry</h2>
         
         <div id="reg13"></div><h2>Estimation of Transformations</h2>
@@ -856,7 +982,7 @@
         
       </div>
       <p class="part">Applications</p>
-      <div class="hidden">
+      <div>
         <div id="reg18"></div><h2>Camera Calibration</h2>
         
         <div id="reg19"></div><h2>Image Mosaics</h2>
diff --git a/tsbb06.mr b/tsbb06.mr
index cba3a780404384074f0b6c8977ca84c8d9f7dbbe..5d6e265dbca3fc947cb043e14d5a2275956ed2cf 100644
--- a/tsbb06.mr
+++ b/tsbb06.mr
@@ -2,9 +2,9 @@
 \html{
   \head{
     \meta(charset="utf-8")
+    \meta(name="viewport" content="width=device-width, initial-scale=1.0")
     \link(type="text/css" href="reboot.css" rel="stylesheet")
     \link(rel="stylesheet" href="katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous")
-    \link(type="text/css" href="mirim.css" rel="stylesheet")
     \link(type="text/css" href="theme.css" rel="stylesheet")
     \script(src="katex.min.js")
     \script(src="tsbb06.js")
@@ -63,121 +63,121 @@
       \div{
         \div#reg01\h2{Background and Overview}
         \h3.hidden{Euclidean Geometry}
-        \div.blocks2.hidden{
-          \div.block2.reg01euclid.row2{
+        \div.blocks.hidden{
+          \div.block.reg01euclid.row2{
             \div.figure{
               \img(src="figs/euclid.jpg")
             }
             \div.figcaption{Euclid, 300BC}
           }
-          \div.block2{
+          \div.block{
             \div.figure{\img.reg02elements(src="figs/elements2.jpg")}
             \div.figcaption{Euclid's Elements}
           }
-          \div.block2{
+          \div.block{
             \div.figure{\img(src="figs/edge-compass.svg")}
             \div.figcaption{Straight Edge and Compass}
           }
-          \div.block2.col2.reg01geo{
+          \div.block.col2.reg01geo{
             \div.figure{\img(src="figs/euclidean-geometry.svg")}
             \div.figcaption{Geometric objects in Elements}
           }
-          \div.block2.reg02pyth{
+          \div.block.reg02pyth{
             \div.figure{\img(src="figs/elements-right-angle.svg")}
             \div.figcaption{Pythagorean Theorem}
           }
-          \div.block2.row2{
+          \div.block.row2{
             \div.figure{\img(src="figs/solid-angle.svg")}
             \div.figcaption{Solid angles and Volumes}
           }
         }
         \h3.hidden{Perspective}
-        \div.blocks2.hidden{
-          \div.block2.col3{
+        \div.blocks.hidden{
+          \div.block.col3{
             \div.figure{\img(src="figs/optics.svg")}
             \div.figcaption{Euclid's&nbsp;\span.emph{Optics} &nbsp;book}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/perspective-first.jpg")}
             \div.figcaption{Fillipo Brunelleschi (1377-1446) & Masaccio (1401-1428)}
           }
-          \div.block2.row2.col3{
+          \div.block.row2.col3{
             \div.figure{\img(src="figs/raphael.jpg")}
             \div.figcaption{Raphael (1483-1520), The School of Athens (1509-1511)}
           }
-          \div.block2.row2.col4{
+          \div.block.row2.col4{
             \div.figure{\img(src="figs/lastsupper.jpg")}
             \div.figcaption{Leonardo da Vinci (1452-1519), The Last Supper (1495–1496)}
           }
-          \div.youtube-container.block2.row2.col4{
+          \div.youtube-container.block.row2.col4{
             \iframe.youtube-video(src="https://www.youtube.com/embed/bkNMM8uiMww" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen)
           }
-          \div.block2.col2{
+          \div.block.col2{
             \div.figure{\img(src="figs/depictura1.jpg")}
             \div.figcaption{Leon Battista Alberti's&nbsp; \span.emph{De Pictura} (1435)}
           }
-          \div.block2.col2{
+          \div.block.col2{
             \div.figure{\img(src="figs/depictura2.jpg")}
           }
         }
         \h3.hidden{Projective Geometry}
-        \div.blocks2.hidden{
-          \div.block2.row2.col2{
+        \div.blocks.hidden{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/kepler.jpg")}
             \div.figcaption{Johannes Kepler (1571-1630)}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/kepler-ellipsis.svg")}
             \div.figcaption{Ellipse and parabola}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/desargues.jpg")}
             \div.figcaption{Girard Desargues (1591-1661)}
           }
-          \div.block2.row2.col3{
+          \div.block.row2.col3{
             \div.figure{\img(src="figs/projection-angle.svg")}
             \div.figcaption{No angles, distances, areas or volumes}
           }
-          \div.block2.col4.flex-aj-center{
+          \div.block.col4.flex-aj-center{
             \p{\span.kw{Projective geometry} is a study of:}
             \ul{
               \li{Points, lines and planes}
               \li{Properties which remain unaltered (\span.kw{invariant}) in projections.}
             }
           }
-          \div.block2.col3.row2{
+          \div.block.col3.row2{
             \div.figure{\img(src="figs/projection-parallel-lines.svg")}
             \div.figcaption{All lines intersect}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/fermat.jpg")}
             \div.figcaption{Pierre Fermat (1607-1665)}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/pascal.jpg")}
             \div.figcaption{Blaise Pascal (1623-1662)}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/descartes.jpg")}
             \div.figcaption{René Descartes (1596-1650)}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/lageometrie.jpg")}
             \div.figcaption{La Géométrie (1637)}
           }
-          \div.block2.row2.col3{
+          \div.block.row2.col3{
             \div.figure{\img(src="figs/analytic-geometry.svg")}
             \div.figcaption{Analytic geometry}
           }
-          \div.block2.col2{
+          \div.block.col2{
             \div.figure{\img(src="figs/differential-geometry.svg")}
             \div.figcaption{Differential geometry}
           }
-          \div.block2.col2{
+          \div.block.col2{
             \div.figure{\img(src="figs/algebraic-geometry.svg")}
             \div.figcaption{Algebraic geometry}
           }
-          \div.block2.col4.flex-aj-center{
+          \div.block.col4.flex-aj-center{
             \p{\b{Projective Geometry & Linear Algebra:}}
             \ul{
               \li{Homogeneous coordinates}
@@ -187,57 +187,57 @@
           }
         }
         \h3.hidden{Photogrammetry}
-        \div.blocks2.hidden{
-          \div.block2.col4.row2{
+        \div.blocks.hidden{
+          \div.block.col4.row2{
             \div.figure{\img(src="figs/cameraobscura.jpg")}
             \div.figcaption{Photography: Camera Obscura}
           }
-          \div.block2.col3.row2{
+          \div.block.col3.row2{
             \div.figure{\img(src="figs/photography.jpg")}
             \div.figcaption{First photography: View from the Window at Le Gras}
           }
-          \div.block2.col2{
+          \div.block.col2{
             \div.figure{\img(src="figs/optics-physics.svg")}
             \div.figcaption{Optics}
           }
-          \div.block2.col4.row2{
+          \div.block.col4.row2{
             \div.figure{\img(src="figs/landsurvey.jpg")}
             \div.figcaption{Land survey}
           }
-          \div.block2.flex-aj-center.col2{
+          \div.block.flex-aj-center.col2{
             \p{\b{Goals}}
             \ul{
               \li{Measurements of geometric objects}
               \li{Object position and orientation}
             }
           }
-          \div.block2.col4.row2{
+          \div.block.col4.row2{
             \div.figure{\img(src="figs/camerapose.png")}
             \div.figcaption{Camera pose: position and orientation}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/hauck-guido.jpg")}
             \div.figcaption{Guido Hermann Hauck (1845-1905)}
           }
-          \div.block2.col3.row2{
+          \div.block.col3.row2{
             \div.figure{\img(src="figs/camera-pose.svg")}
             \div.figcaption{Homography (1883) and Epipolar geometry}
           }
-          \div.block2.row2.col4{
+          \div.block.row2.col4{
             \div.figure{\img(src="figs/colossus.jpg")}
             \div.figcaption{Colossus (1943)}
           }
-          \div.block2.row2.col3{
+          \div.block.row2.col3{
             \div.figure{\img(src="figs/altair8800.jpg")}
             \div.figcaption{Altair 8800 (1974)}
           }
-          \div.block2.col4.flex-aj-center{
+          \div.block.col4.flex-aj-center{
             \p{\span.kw{Bundle Adjustment} (Duane Brown - 1958): \ul{
               \li{\span.emph{Input}: images from cameras at multiple positions and visible points;}
               \li{\span.emph{Output}: positions of points and camera poses}}
             }
           }
-          \div.block2.col4.flex-aj-center{
+          \div.block.col4.flex-aj-center{
             D.C. Brown.
             A solution to the general problem of multiple station analytical stereotriangulation. 
             Technical report, Patrick Airforce Base, Florida, 1958. RCA-MTP Data Reduction Technical Report No. 43
@@ -245,45 +245,45 @@
           
         }
         \h3.hidden{Computer vision}
-        \div.blocks2.hidden{
-          \div.block2.row2.col2{
+        \div.blocks.hidden{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/first-scan.jpg")}
             \div.figcaption{First digitized image (1957)}
           }
-          \div.block2.col3.row2{
+          \div.block.col3.row2{
             \div.figure{\img(src="figs/first-scan-complete.jpg")}
             \div.figcaption{Russell Kirsch and 3-month-old son, Walden}
           }
-          \div.block2.col3.row2{
+          \div.block.col3.row2{
             \div.figure{\img(src="figs/object-detection.jpg")}
             \div.figcaption{Object detection}
           }
-          \div.block2.col5.row2{
+          \div.block.col5.row2{
             \div.figure{\img(src="figs/3dreconstruction.jpg")}
             \div.figcaption{3d reconstruction}
           }
-          \div.block2.col3.row2{
+          \div.block.col3.row2{
             \div.figure{\img(src="figs/line-detection.png")}
             \div.figcaption{Line detection}
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/corner-detection.jpg")}
             \div.figcaption{Corner detection}
           }
-          \div.block2.row2.col3{
+          \div.block.row2.col3{
             \div.figure{\img(src="figs/cv-medicine.jpg")}
             \div.figcaption{Computer vision in medicine}
           }
-          \div.block2.col3.row2{
+          \div.block.col3.row2{
             \div.figure{\img(src="figs/cv-manufacturing.png")}
             \div.figcaption{Computer vision in manufacturing}
           }
-          \div.block2.flex-aj-center.col3{
+          \div.block.flex-aj-center.col3{
             \div{P. Sturm.
             \a(href="https://link.springer.com/chapter/10.1007/978-3-642-23672-3_1" target="blank"){A historical survey of geometric computer vision}. 
             In \span.emph{International Conference on Computer Analysis of Images and Patterns}, pages 1-8, 2011. doi: 10.1007/978-3-642-23672-3\\-1}
           }
-          \div.block2.row2.col5{
+          \div.block.row2.col5{
             \div.figure{\div.figure{\img(src="figs/sfm.jpg")}\div.figure{\img(src="figs/sfm2.jpg")}}
             \div.figcaption{Structure from motion}
           }
@@ -291,31 +291,31 @@
         
         \p.part{Representations}
         \div#reg02\h2{Cartesian Representations}
-        \div.blocks2.hidden{
-          \div.block2.row2.col2{
+        \div.blocks.hidden{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/reg02-cartesian.svg")}
             \div.figcaption{\span.kw{Cartesian coordinate system}}
           }
-          \div.block2.row2{
+          \div.block.row2{
             \div.figure{\img(src="figs/handedness.svg")}
             \div.figcaption{\span.kw{Handedness} (right hand = clockwise)}
           }
-          \div.block2{
+          \div.block{
             \div.figure{\img(src="figs/righthand.svg")}
             \div.figcaption{Right hand system}
           }
-          \div.block2{
+          \div.block{
             \div.figure{\img(src="figs/lefthand.svg")}
             \div.figcaption{Left hand system}
           }
-          \div.block2{
+          \div.block{
             \div.figure{\img(src="figs/lefthand.svg")}
             \div.figcaption{Left hand system}
           }
         }
         \h3.hidden{Points in \span.keq{\\mathbb\{E\}^2}}
-        \div.blocks2.hidden{
-          \div.block2.row3.col3{
+        \div.blocks.hidden{
+          \div.block.row3.col3{
             \p{\span.kw{Point} in \span.keq{\\mathbb\{E\}^2\\Rightarrow} \span.kw{Vector} \span.keq{\\vec\{x\}\\in \\mathbb\{R\}^2}}
             \div.center.keq{\\vec\{x\}\\hspace\{-2px\}=\\hspace\{-2px\}\\begin\{bmatrix\}x_1\\\\x_2\\end\{bmatrix\}}
             \p.elevquarter{\span.kw{Vector sum}: \span.keq{\\vec\{z\}=\\vec\{x\}\\hspace\{-2px\}+\\hspace\{-2px\}\\vec\{y\}\\hspace\{-2px\}=\\hspace\{-4px\}\\begin\{bmatrix\}\\hspace\{-4px\}x_1\\hspace\{-2px\}+\\hspace\{-2px\}y_1\\hspace\{-5px\}\\\\\\hspace\{-4px\}x_2\\hspace\{-2px\}+\\hspace\{-2px\}y_2\\hspace\{-5px\}\\end\{bmatrix\}}}
@@ -328,13 +328,13 @@
             \div.eq.keq{\\|\\vec\{x\}\\|=(\\vec\{x\}\\cdot \\vec\{x\})^\\frac\{1\}\{2\}=\\sqrt\{x_1^2+x_2^2\}}
             
             \p{\span.kw{Unit vector}: \span.keq{\\hat\{x\}=\\frac\{\\vec\{x\}\}\{\\|\\vec\{x\}\\|\}, \\|\\hat\{x\}\\|=1}}
-          }\div.block2.col2{
+          }\div.block.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
           }
-          \div.block2.col2{
+          \div.block.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
           }
-          \div.block2.col4.row2{
+          \div.block.col4.row2{
             \p{\b{Scalar product and angles} (\span.keq{\\theta=\\angle(\\vec\{x\}, \\vec\{y\})}): }
             \div.keq.eq{\\vec\{x\}\\cdot \\vec\{y\} = \\|\\vec\{x\}\\|\\|\\vec\{y\}\\|\\cos\\theta}
             \p{\span.kw{Perpendicularity} (\span.kw{Orthogonality}):}
@@ -348,26 +348,26 @@
             }
           }
           
-          \div.block2.col2{
+          \div.block.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Left hand system}
           }
-          \div.block2.col2{
+          \div.block.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Left hand system}
           }
-          \div.block2.col2{
+          \div.block.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Left hand system}
           }
-          \div.block2.col2{
+          \div.block.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Left hand system}
           }
         }
         \h3.hidden{Lines in \span.keq{\\mathbb\{E\}^2}}
-        \div.blocks2.hidden{
-          \div.block2.row2.col4.text{
+        \div.blocks.hidden{
+          \div.block.row2.col4.text{
             \p{\span.kw{Line} in $\bb{E}^2$: \span.keq{\\vec\{x\}} satisfying the \span.kw{equation of the line}:}
             \div.eq.keq{l_1x_1+l_2x_2=\\vec\{l\}\\cdot\\vec\{x\}=\\Delta}
             \p{\span.kw{Co-linear}: \span.keq{\\exists \\vec\{l\}: \\vec\{l\}\\cdot\\vec\{x\}=\\vec\{l\}\\cdot\\vec\{y\}=\\vec\{l\}\\cdot\\vec\{z\}}}
@@ -376,34 +376,34 @@
             \div.eq.keq{\\vec\{l\}\\cdot(\\vec\{x\}-\\vec\{y\}) = \\vec\{l\}\\cdot\\vec\{x\}-\\vec\{l\}\\cdot\\vec\{y\} = \\Delta-\\Delta = 0}
             
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Equation of the line}
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Co-linear points}
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{\span.keq{\\vec\{l\}} normal to line tangent}
           }
-          \div.block2.col4.text{
+          \div.block.col4.text{
             \h4.center{Slope-Intercept Form}
             \div.eq.keq{x_2=f(x_1)=-\\frac\{l_1\}\{l_2\}x_1+\\frac\{\\Delta\}\{l_2\} = mx_1+b}
             \div{\span.kw{Slope}: \span.keq{m=\\frac\{x_2-b\}\{x_1\}\\Rightarrow f(x_1+1)=x_2+m}}
             \div{\span.kw{Intercept}: \span.keq{b = f(0)}}
             \div{\b{Problem}: \span.keq{l_2=0\\Rightarrow x_1=b} (vertical line).}
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Slope-Intersect form}
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Degenerate: vertical line.}
           }
-          \div.block2.col4.row2.text{
+          \div.block.col4.row2.text{
             \h4.center{Hesse Normal Form}
             \div.center.keq{\\|\\hat\{l\}\\|\\hspace\{-2px\}=\\hspace\{-2px\}1\\hspace\{-2px\}\\Rightarrow\\hspace\{-2px\}\\hat\{l\}\\hspace\{-2px\}=\\hspace\{-2px\}\\begin\{bmatrix\}l_1\\\\l_2\\end\{bmatrix\}\\hspace\{-2px\}=\\hspace\{-2px\}\\begin\{bmatrix\}\\cos\\alpha\\\\\\sin\\alpha\\end\{bmatrix\}}
             \div.keq.eq{\\hat\{l\}\\cdot\\vec\{x\}=x_1\\cos\\alpha+x_2\\sin\\alpha=\\Delta}
@@ -414,11 +414,11 @@
               \li{\span.keq{\\Delta = 0}: \span.keq{\\hat\{l\}\\cdot\\left[0,0\\right]=\\Delta}}
             }
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Hesse normal form}
           }
-          \div.block2.col4.row2.text{
+          \div.block.col4.row2.text{
             \h4.center{Parametric form 1: Vector form}
             \p{\span.keq{\\vec\{l\}\\perp(\\vec\{x\}-\\vec\{y\}) \\Rightarrow \\vec\{l\}\\perp\\frac\{\\vec\{x\}-\\vec\{y\}\}\{\\|\\vec\{x\}-\\vec\{y\}\\|\} \\Rightarrow \\hat\{l\}\\perp\\hat\{v\}}}
             \div.keq.eq{\\vec\{x\}=\\vec\{x\}_0+t\\hat\{v\}=\\vec\{x\}_0+(-t)(-\\hat\{v\})}
@@ -435,38 +435,38 @@
               }
             }
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Vector form}
           }
-          \div.block2.col2{
+          \div.block.col2{
             \h4.center{Parametric form 2: Linear Interpolation}
             \div.keq.eq{\\vec\{x\}=t\\vec\{x\}_1+(1-t)\\vec\{x\}_2}
             \p{\ul{\li{\span.keq{t\\in[0,1] \\Rightarrow \\vec\{x\}\\in\\overline\{\\vec\{x\}_1\\vec\{x\}_2\}}}}}
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Linear interpolation}
           }
         }
         \h3.hidden{Points, planes and lines in \span.keq{\\mathbb\{E\}^3}}
-        \div.blocks2.hidden{
-          \div.block2.col4.row2{
+        \div.blocks.hidden{
+          \div.block.col5.row2{
             \h4.center{Points}
             \div.eq.keq{\\vec\{x\}=\\left[x_1,x_2,x_3\\right]^T}
             \div.eq.keq{\\vec\{x\}\\cdot\\vec\{y\}=x_1y_1+x_2y_2+x_3y_3}
             \div.eq.keq{\\|\\vec\{x\}\\|=(\\vec\{x\}\\cdot\\vec\{x\})^\\frac\{1\}\{2\}=\\sqrt\{x_1^2+x_2^2+x_3^2\}}
             \div.eq.keq{\\begin\{aligned\}
                 d(\\vec\{x\},\\vec\{y\})&=\\|\\vec\{x\}-\\vec\{y\}\\| \\\\
-                &=\\sqrt\{(x_1-y_1)^2\\hspace\{-2px\}+\\hspace\{-2px\}(x_2-y_2)^2\\hspace\{-2px\}+\\hspace\{-2px\}(x_3-y_3)^2\}
+                &=\\sqrt\{(x_1-y_1)^2+(x_2-y_2)^2+(x_3-y_3)^2\}
               \\end\{aligned\}}
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Points and their distance}
           }
           
-          \div.block2.col4.row2.text{
+          \div.block.col5.row2.text{
             \h4.center{Planes}
             \p{\b{Equation}: \span.keq{x_1p_1+x_2p_2+x_3p_3=\\vec\{x\}\\cdot\\vec\{p\}=\\Delta}}
             \p{\span.kw{Co-planar}: \span.keq{\\exists \\vec\{p\}: \\vec\{p\}\\cdot\\vec\{x\}=\\vec\{p\}\\cdot\\vec\{y\}=\\vec\{p\}\\cdot\\vec\{z\}=\\vec\{p\}\\cdot\\vec\{w\}}}
@@ -476,38 +476,38 @@
             \p{Vector form: \span.keq{\\hat\{v\}_1\\cdot\\hat\{p\}=\\hat\{v\}_2\\cdot\\hat\{p\}=0}}
             \div#reg021planevec.eq.keq{\\vec\{x\} = \\vec\{x\}_0 + t_1\\hat\{v\}_1+t_2\\hat\{v\}_2 = \\begin\{bmatrix\}\\hat\{v\}_1&\\hat\{v\}_2&\\vec\{x\}_0\\end\{bmatrix\}\\begin\{bmatrix\}t_1\\\\t_2\\\\1\\end\{bmatrix\}}
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Planes}
           }
-          \div.block2.col2.text{
+          \div.block.col2.text{
             \h4.center{Lines}
             \p{\span.keq{\\vec\{x\}\\hspace\{-2px\}=\\hspace\{-2px\}\\vec\{x\}_0+t\\hat\{x\}}}
             \p{\span.keq{\\vec\{x\}\\hspace\{-2px\}=\\hspace\{-2px\}t\\vec\{x\}_1+(1-t)\\vec\{x\}_2}}
             \p{Line as intersection of planes}
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Lines in 3D}
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Intersection of planes}
           }
         }
         \h3.hidden{Basic geometric operations}
-        \div.blocks2.hidden{
-          \div.block2.col4.row2{
+        \div.blocks.hidden{
+          \div.block.col4.row2{
             \h4.center{Line from two points in \span.keq{\\mathbb\{E\}^2}}
             \div.eq.keq{\\overbrace\{\\vec\{x\}-\\vec\{y\}=\\begin\{bmatrix\}x_1-y_1\\\\x_2-y_2\\end\{bmatrix\}\}^\{\\text\{Tangent vector\}\}\\hspace\{10px\}\\overbrace\{\\vec\{l\}=\\pm\\begin\{bmatrix\}y_2-x_2\\\\x_1-y_1\\end\{bmatrix\}\}^\{\\text\{Normal vector\}\}}
             \div.eq.keq{\\hat\{l\}=\\displaystyle\\frac\{\\vec\{l\}\}\{\\|\\vec\{l\}\\|\}, \\Delta=\\hat\{l\}\\vec\{x\}}
             \p.center{\span.eq.keq{\\vec\{x\}=\\vec\{y\}\\Rightarrow \\vec\{l\}=\\begin\{bmatrix\}0&0\\end\{bmatrix\}^T} (not a line normal)}
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Vector form}
           }
-          \div.block2.col5.row2.text{
+          \div.block.col5.row2.text{
             \h4.center{Intersection between two lines in \span.keq{\\mathbb\{E\}^2}}
             \p{Two normalized lines: \span.keq{(\\hat\{l\},\\Delta_l)} and \span.keq{(\\hat\{m\},\\Delta_m)}}
             \p#reg022lines{\span.keq{
@@ -534,11 +534,11 @@
             }
             \div.eq.keq{\\vec\{x\}\\hspace\{-2px\} =\\hspace\{-2px\} \\vec\{x\}_l\\hspace\{-2px\} =\\hspace\{-2px\} \\vec\{x\}_m\\hspace\{-2px\} =\\hspace\{-2px\} \\hspace\{-2px\}\\displaystyle \\frac\{1\}\{l_2m_1-l_1m_2\}\\hspace\{-2px\}\\begin\{bmatrix\}\\Delta_ml_2-\\Delta_lm_2\\\\\\Delta_lm_1-\\Delta_ml_1\\end\{bmatrix\}}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Intersection between two lines}
           }
-          \div.block2.col4.row2{
+          \div.block.col4.row2{
             \h4.center{Distance between point and line}
             \p.elevquarter{Point \span.keq{\\vec\{x\}} and line \span.keq{(\\hat\{l\},\\Delta)}}
             \p.elevquarter{Tangent vector \span.keq{\\hat\{t\}=\\left[-l_2, l_1\\right]\\Rightarrow \\hat\{t\}\\perp\\hat\{l\}}}
@@ -553,7 +553,7 @@
 
               }}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Distance between point and line}
           }
@@ -561,8 +561,8 @@
 
         \div#reg03\h2{Homogeneous Representations in 2D}
         \h3.hidden{Homogeneous coordinates of 2D points}
-        \div.blocks2.hidden{
-          \div.block2.col4.row2{
+        \div.blocks.hidden{
+          \div.block.col4.row2{
             \p{\span.keq{x_1l_1+x_2l_2=\\vec\{x\}\\cdot \\hat\{l\}=\\Delta}}
             \p.elev{\span.keq{x_1l_1+x_2l_2+1(-\\Delta)=0\\hspace\{-3px\}=\\hspace\{-3px\}
               \\begin\{bmatrix\}x_1\\\\x_2\\\\1\\end\{bmatrix\}\\hspace\{-2px\}\\cdot\\hspace\{-3px\}
@@ -579,11 +579,11 @@
                       \\sim\\hspace\{-3px\}\\begin\{bmatrix\}2\\\\4\\\\2\\end\{bmatrix\}\\hspace\{-3px\}
                       \\sim\\hspace\{-3px\}\\begin\{bmatrix\}-1\\\\-2\\\\-1\\end\{bmatrix\}}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Distance between point and line}
           }
-          \div.block2.row2.col4.text{
+          \div.block.row2.col4.text{
             \h4.center{P-normalization}
             \p{\span.keq{\\mathbb\{R\}^2\\rightarrow \\mathbb\{P\}(\\mathbb\{R^2\})}, Inverse: \span.keq{\\mathbb\{P\}(\\mathbb\{R^2\})\\rightarrow \\mathbb\{R\}^2}}
             \p.keq.center{\\tilde\{x\}=\\begin\{bmatrix\}x_1\\\\x_2\\\\x_3\\end\{bmatrix\}
@@ -594,14 +594,14 @@
             \p.center.keq{c_P(\\tilde\{x\})=h_P(n_P(\\vec\{x\})) }
             \p{Problem: \span.keq{\\begin\{bmatrix\}\\vec\{x\}&0\\end\{bmatrix\}^T\\hspace\{-5px\}\\in\\mathbb\{P\}(\\mathbb\{R^2\})} if \span.keq{\\vec\{x\}\\neq \\vec\{0\}}}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Distance between point and line}
           }
         }
         \h3.hidden{Dual homogeneous coordinates of 2D Lines}
-        \div.blocks2.hidden{
-          \div.block2.text.col4{
+        \div.blocks.hidden{
+          \div.block.text.col4{
             \p.kw{Dual homogeneous coordinates:}
             \div.eq.keq{\\tilde\{l\}
             =\\hspace\{-1em\}\\overbrace\{\\begin\{bmatrix\}\\hat\{l\}\\\\-\\Delta\\end\{bmatrix\}\}^\{\\text\{Canonical Form\}\}
@@ -610,11 +610,11 @@
               \\Leftrightarrow \\tilde\{x\}\\cdot\\tilde\{l\}=0
               \\Leftrightarrow \\tilde\{x\}\\perp\\tilde\{l\}}}
           }
-          \div.block2.row2.col3{
+          \div.block.row2.col3{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Distance between point and line}
           }
-          \div.block2.text.col4{
+          \div.block.text.col4{
             \h4.center{D-normalization}
             \p.center.keq.elevquarter{
               \\tilde\{l\}_\\beta=\\begin\{bmatrix\}\\vec\{\\beta\}\\\\\\beta_n\\end\{bmatrix\}
@@ -636,28 +636,28 @@
           
         }
         \h3.hidden{Relations between Points and Lines}
-        \div.blocks2.hidden{
-          \div.block2.col4.text{
+        \div.blocks.hidden{
+          \div.block.col4.text{
             \h4{Line that intersects two points}
             \p.eq.keq.elevquarter{\\tilde\{x\}\\cdot\\tilde\{l\}=\\tilde\{y\}\\cdot\\tilde\{l\}=0\\Rightarrow \\tilde\{l\}\\perp \\tilde\{x\} \\text\{ and \} \\tilde\{l\}\\perp \\tilde\{y\}}
             \p.eq.keq.elevquarter{\\tilde\{l\}\\sim\\tilde\{x\}\\times\\tilde\{y\}\\sim\\tilde\{y\}\\times\\tilde\{x\}}
             \div.center.keq.elevquarter{\\vec\{l\}=\\pm\\begin\{bmatrix\}y_2-x_2\\\\x_1-y_1\\end\{bmatrix\}, \\hat\{l\}=\\displaystyle\\frac\{\\vec\{l\}\}\{\\|\\vec\{l\}\\|\}, \\Delta=\\hat\{l\}\\vec\{x\}}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Line through points}
           }
-          \div.block2.col4.text{
+          \div.block.col4.text{
             \h4{Point that intersects two lines}
             \p.eq.keq.elevquarter{\\tilde\{l\}\\cdot\\tilde\{x\}=\\tilde\{m\}\\cdot\\tilde\{x\}=0\\Rightarrow \\tilde\{x\}\\perp \\tilde\{l\} \\text\{ and \} \\tilde\{x\}\\perp \\tilde\{m\}}
             \p.eq.keq.elevquarter{\\tilde\{x\}\\sim\\tilde\{l\}\\times\\tilde\{m\}\\sim\\tilde\{m\}\\times\\tilde\{l\}}
             \div.eq.keq.elevquarter{\\vec\{x\} = \\hspace\{-2px\}\\displaystyle \\frac\{1\}\{l_2m_1-l_1m_2\}\\hspace\{-2px\}\\begin\{bmatrix\}\\Delta_ml_2-\\Delta_lm_2\\\\\\Delta_lm_1-\\Delta_ml_1\\end\{bmatrix\}}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Point through lines}
           }
-          \div.block2.col4.text{
+          \div.block.col4.text{
             \h4{Degenerate cases}
             \p.elevquarter{Identical points: \span.keq{\\tilde\{x\}=\\tilde\{y\}\\Rightarrow \\tilde\{x\}\\times\\tilde\{y\}=\\vec\{0\}}}
             \p.elevquarter{Identical lines: \span.keq{\\tilde\{l\}=\\tilde\{m\}\\Rightarrow \\tilde\{l\}\\times\\tilde\{m\}=\\vec\{0\}}}
@@ -666,7 +666,7 @@
           }
           
           
-          \div.block2.col4.row4.text{
+          \div.block.col4.row4.text{
             \h4{Points on a line}
             \p.elevquarter.center{\span.keq{\\tilde\{x\}_k\\cdot\\tilde\{l\}=0,\\hspace\{10px\} k=1,\\ldots,m\\ge 3}}
             \p.elevquarter.center{\span.keq{\\begin\{bmatrix\}\\tilde\{x\}_1^T\\tilde\{l\}\\\\\\vdots\\\\\\tilde\{x\}_m^T\\tilde\{l\}\\end\{bmatrix\}\\hspace\{-5px\}=\\hspace\{-5px\}\\begin\{bmatrix\}\\tilde\{x\}_1^T\\\\\\vdots\\\\\\tilde\{x\}_m^T\\end\{bmatrix\}\\tilde\{l\}=X^T\\tilde\{l\}=\\vec\{0\}}}
@@ -692,11 +692,11 @@
             \p.elevquarter{\span.keq{\\tilde\{l\}}: right eigenvector \span.keq{\\vec\{v\}_k} for eigenvalue \span.keq{\\sigma_k\\hspace\{-2px\}=\\hspace\{-2px\}0}}
             \p.elevquarter{Numerical issues: \span.keq{\\sigma_k\\approx 0}}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Distance between point and line}
           }
-          \div.block2.col4.row3.text{
+          \div.block.col4.row3.text{
             \h4{Lines through a point}
             \p.elevquarter.center{\span.keq{\\tilde\{l\}_k\\cdot\\tilde\{x\}=0,\\hspace\{10px\} k=1,\\ldots,m\\ge 2}}
             \p.elevquarter.center{\span.keq{\\begin\{bmatrix\}\\tilde\{l\}_1^T\\tilde\{x\}\\\\\\vdots\\\\\\tilde\{l\}_m^T\\tilde\{x\}\\end\{bmatrix\}\\hspace\{-5px\}=\\hspace\{-5px\}\\begin\{bmatrix\}\\tilde\{l\}_1^T\\\\\\vdots\\\\\\tilde\{l\}_m^T\\end\{bmatrix\}\\tilde\{x\}=L^T\\tilde\{x\}=\\vec\{0\}}}
@@ -714,14 +714,14 @@
             \p.elevquarter{\span.keq{\\tilde\{x\}}: right eigenvector \span.keq{\\vec\{v\}_k} for eigenvalue \span.keq{\\sigma_k\\hspace\{-2px\}=\\hspace\{-2px\}0}}
             \p.elevquarter{Numerical issues: \span.keq{\\sigma_k\\approx 0}}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Distance between point and line}
           }
         }
-        \h3{Operations on normalized homogeneous coordinates}
-        \div.blocks2{
-          \div.block2.col4.text{
+        \h3.hidden{Operations on normalized homogeneous coordinates}
+        \div.blocks.hidden{
+          \div.block.col4.text{
             \h4{Distance between two points}
             \p.elevquarter{\span.keq{\\tilde\{x\}=k_x\\begin\{bmatrix\}x_1&x_2&1\\end\{bmatrix\}, \\tilde\{y\}=k_y\\begin\{bmatrix\}y_1&y_2&1\\end\{bmatrix\}}}
             \p{\span.kw{Point-to-point} distance}
@@ -734,21 +734,21 @@
             }
 
           }
-          \div.block2.col2.row2{
+          \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Distance between points}
           }
-          \div.block2.col4.text{
+          \div.block.col4.text{
             \h4{Distance between point and line}
             \p.elevquarter{Point \span.keq{\\tilde\{x\}} and line \span.keq{\\tilde\{l\}}}
             \p.keq.elevquarter{d(\\vec\{x\},(\\hat\{l\},\\Delta)) \\hspace\{-2px\}=\\hspace\{-2px\} |\\hat\{l\}\\cdot\\vec\{x\}-\\Delta|\\hspace\{-2px\} =\\hspace\{-2px\} \\left|\\begin\{bmatrix\}\\vec\{x\}\\\\1\\end\{bmatrix\}\\hspace\{-3px\}\\cdot\\hspace\{-3px\}\\begin\{bmatrix\}\\hat\{l\}\\\\-\\Delta\\end\{bmatrix\}\\right|}
             \p.keq.elevquarter{d_\{PD\}(\\tilde\{x\},\\tilde\{l\})) \\hspace\{-2px\}=\\hspace\{-2px\} |n_P(\\tilde\{x\})\\cdot n_D(\\tilde\{l\})|}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Distance between point and line}
           }
-          \div.block2.col4.row2.text{
+          \div.block.col4.row2.text{
             \h4{Signed distance between point and line}
             \p.center.elevquarter{\span.keq{s(\\tilde\{x\},\\tilde\{l\})=n_P(\\tilde\{x\})\\cdot n_D(\\tilde\{l\})}}
             \p.center.elevquarter{\span.keq{s(\\tilde\{x\},\\tilde\{l\})\\hspace\{-3px\}\\begin\{cases\}
@@ -761,15 +761,15 @@
             \p{\span.keq{\\text\{sign\}(s(\\tilde\{x\},\\tilde\{l\}))=-\\text\{sign\}(s(\\tilde\{y\},\\tilde\{l\}))}}
             \ul{\li{\span.keq{\\Leftrightarrow \\tilde\{x\},\\tilde\{y\} \\text\{ lie on different sides\}}}}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Signed distance}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Line estimation}
           }
-          \div.block2.row3.col4.text{
+          \div.block.row3.col4.text{
             \h4{Area of a triangle}
             \p{Points \span.keq{\\vec\{x\},\\vec\{y\},\\vec\{z\}}}
             \p{\span.keq{A_\\square=\\|\\vec\{y\}-\\vec\{x\}\\|\\|\\vec\{z\}-\\vec\{x\}\\|\\sin\\alpha}}
@@ -792,34 +792,161 @@
              =\\frac\{1\}\{2\}|&(x_1-z_1)(y_2-x_2)\\\\-&(x_1-y_1)(z_2-x_2)|
             \\end\{aligned\}}}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Area of triangle}
           }
-          \div.block2.row3.col6.text{
+          \div.block.row3.col6.text{
             \h4{Order of corner points and directed lines}
             \p{\span.keq{n_P(\\tilde\{x\})\\hspace\{-2px\}\\times\\hspace\{-2px\} n_P(\\tilde\{y\})+n_P(\\tilde\{y\})\\hspace\{-2px\}\\times\\hspace\{-2px\} n_P(\\tilde\{z\})+n_P(\\tilde\{z\})\\hspace\{-2px\}\\times\\hspace\{-2px\} n_P(\\tilde\{x\})=\\begin\{bmatrix\}0\\\\0\\\\\\pm 2A_\\triangle\\end\{bmatrix\}}}
             \p.center{\span.keq{\\text\{det\}(n_P(\\tilde\{x\}),n_P(\\tilde\{y\}),n_P(\\tilde\{z\}))=\\underbrace\{(n_P(\\tilde\{x\})\\times n_P(\\tilde\{y\}))\}_\{\\displaystyle\\tilde\{l\}\}\\cdot n_P(\\tilde\{z\})}}
             \p.center{\span.keq{\\tilde\{l\}\\cdot n_P(\\tilde\{z\})\\begin\{cases\}\\lt 0, \\tilde\{x\}\\tilde\{y\}\\tilde\{z\}\\text\{ clockwise\}\\\\=0, \\tilde\{x\}\\tilde\{y\}\\tilde\{z\}\\text\{ collinear\}\\\\\\gt 0, \\tilde\{x\}\\tilde\{y\}\\tilde\{z\}\\text\{ counter-clockwise\}\\end\{cases\}}}
             \p.center{\span.keq{\\tilde\{l\}\\cdot n_P(\\tilde\{z\})\\begin\{cases\}\\lt 0, \\tilde\{z\}\\text\{ on the right of \}\\tilde\{l\}\\\\=0, \\tilde\{z\}\\text\{ on \}\\tilde\{l\}\\\\\\gt 0, \\tilde\{z\}\\text\{ on the left of \}\\tilde\{l\}\\end\{cases\}}}
           }
-          \div.block2.row2.col2{
+          \div.block.row2.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Cross product}
           }
-          \div.block2.row2.col3{
+          \div.block.row2.col3{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Directed line}
           }
-          \div.block2.col6.text{
+          \div.block.col6.text{
             \h4{Inside or outside?}
             \p{\span.kw{Convex region} \span.keq{\\Omega}: \span.keq{x_k, k=1,\\ldots,m}}
             \p.center{\span.keq{\\tilde\{y\}\\in\\Omega\\Leftrightarrow (n_P(\\tilde\{x\}_\{k-1\})\\times n_P(\\tilde\{x\}_k))\\cdot \\tilde\{x\}\\ge 0,\\forall k=1,\\ldots,m}}
           }
-          \div.block2.col3.text.center.flex-aj-center.note{
+          \div.block.col3.text.center.flex-aj-center.note{
             \b{Avoid normalizations, unless required (e.g., distance, area)}
           }
         }
+        \h3{Points at infinity}
+        \div.blocks{
+          \div.block.col2.row2{
+            \div.figure{\img(src="figs/placeholder.svg")}
+            \div.figcaption{Distance between points}
+          }
+          \div.block.col5.row3.text{
+            \h4{Points at infinity}
+            \p{Parallel lines: \span.keq{\\tilde\{l\}=\\begin\{bmatrix\}l_1\\\\l_2\\\\-\\Delta_1\\end\{bmatrix\}, 
+                         \\tilde\{m\}=\\begin\{bmatrix\}l_1\\\\l_2\\\\-\\Delta_2\\end\{bmatrix\}}}
+            \p{\span.keq{\\tilde\{x\}\\sim\\tilde\{l\}\\times\\tilde\{m\}\\hspace\{-2px\}=\\hspace\{-2px\}
+              \\begin\{bmatrix\}
+                l_2(-\\Delta_2)\\hspace\{-2px\}-\\hspace\{-2px\}l_2(-\\Delta_1)\\\\
+                l_1(-\\Delta_1)\\hspace\{-2px\}-\\hspace\{-2px\}l_1(-\\Delta_2)\\\\
+                l_1l_2         \\hspace\{-2px\}-\\hspace\{-2px\}l_2l_1
+                \\end\{bmatrix\}\\hspace\{-2px\}=\\hspace\{-2px\}
+                \\begin\{bmatrix\}\\Delta_1-\\Delta_2\\end\{bmatrix\}\\hspace\{-5px\}
+                \\begin\{bmatrix\}-l_2\\\\l_1\\\\0\\end\{bmatrix\}}}
+            \p{Cannot be P-normalized}
+            \p{Well defined (\span.keq{\\Delta_1\\neq\\Delta_2})}
+            \p.center{\span.keq{\\tilde\{l\}=\\begin\{bmatrix\}\\cos\\alpha_1\\\\\\sin\\alpha_1\\\\-\\Delta_1\\end\{bmatrix\}, 
+                         \\tilde\{m\}=\\begin\{bmatrix\}\\cos\\alpha_2\\\\\\sin\\alpha_2\\\\-\\Delta_2\\end\{bmatrix\}}}
+            \p.center{\span.keq{\\tilde\{x\}\\sim\\tilde\{l\}\\times\\tilde\{m\}=
+              \\begin\{bmatrix\}
+                -\\Delta_2\\sin\\alpha_1+\\Delta_1\\sin\\alpha_2\\\\
+                \\Delta_2\\cos\\alpha_1-\\Delta_1\\cos\\alpha_2\\\\
+                \\sin(\\alpha_2-\\alpha_1)
+                \\end\{bmatrix\}}}
+          }
+          \div.block.col2.row2{
+            \div.figure{\img(src="figs/placeholder.svg")}
+            \div.figcaption{Parallel lines and point at infinity}
+          }
+          \div.block.col2.row2{
+            \div.figure{\img(src="figs/placeholder.svg")}
+            \div.figcaption{Parallel lines and point at infinity}
+          }
+          \div.block.text.col3{
+            \h4{Infinity = -Infinity?}
+            \p{\span.keq{\\begin\{bmatrix\}l_2 & -l_1\\end\{bmatrix\}^T} and \span.keq{\\begin\{bmatrix\}-l_2 & l_1\\end\{bmatrix\}^T}}
+            \p{Same point}
+            \p{\em{Orientation of the line} in \span.keq{\\mathbb\{E\}^2}}
+          }
+          \div.block.col2.row2{
+            \div.figure{\img(src="figs/placeholder.svg")}
+            \div.figcaption{Several parallel lines}
+          }
+          \div.block.text.col3.note.flex-aj-center.center{
+            \b{Any set of distinct and parallel lines intersect at a single point, a point at infinity}
+          }
+          \div.block.text.col3.flex-aj-center{
+            \ul{
+              \li{\em{Proper point} = \em{affine point}}
+              \li{\em{Proper line}}
+              \li{\em{Point at infinity} = \em{ideal point} = \em{affine vector} = \em{direction}}
+            }
+          }
+          \div.block.text.col3.row2{
+            \h4{Line at infinity}
+            \p.mt01{\span.keq{\\tilde\{x\}=\\begin\{bmatrix\}x_1\\\\x_2\\\\1\\end\{bmatrix\}, \\tilde\{y\}=\\begin\{bmatrix\}y_1\\\\y_2\\\\0\\end\{bmatrix\}}}
+            \p.mt01{\span.keq{l\\sim\\tilde\{x\}\\times\\tilde\{y\}=\\begin\{bmatrix\}-y_2\\\\y_1\\\\x_1y_2-y_1x_2\\end\{bmatrix\}}}
+            \p.mt01{\span.keq{\\hat\{l\}=\\begin\{bmatrix\}-y_2\\\\y_1\\end\{bmatrix\}, \\hat\{t\}=\\begin\{bmatrix\}y_1\\\\y_2\\end\{bmatrix\}}}
+            \p.mt01{\span.keq{
+              \\tilde\{l\}\\hspace\{-2px\}=\\hspace\{-2px\}\\begin\{bmatrix\}l_1\\hspace\{3px\} l_2\\hspace\{3px\} \{-\\Delta\}\\end\{bmatrix\}^T\\hspace\{-5px\},
+              \\tilde\{x\}\\hspace\{-2px\}=\\hspace\{-2px\}\\begin\{bmatrix\}\{-l_2\} \\hspace\{-5px\}&\\hspace\{-5px\} l_1 \\hspace\{-5px\}&\\hspace\{-5px\} 0\\end\{bmatrix\}^T}
+            }
+            \p.mt01{\span.keq{\\tilde\{l\}\\cdot \\tilde\{x\}=0}}
+          }
+          \div.block.col3.text.row2{
+            \h4{Line through points at infinity}
+            \p.mt01{\span.keq{\\tilde\{x\}=\\begin\{bmatrix\}x_1\\\\x_2\\\\0\\end\{bmatrix\}, \\tilde\{y\}=\\begin\{bmatrix\}y_1\\\\y_2\\\\0\\end\{bmatrix\}}}
+            \p.mt01{\span.keq{l\\sim\\tilde\{x\}\\times\\tilde\{y\}=\\begin\{bmatrix\}0\\\\0\\\\x_1y_2-y_1x_2\\end\{bmatrix\}}}
+            \p{Cannot be D-normalized}
+          }
+          \div.block.note.col2.text{
+            \p{\span.kw{Line at infinity}}
+            \p.mt01.center{\span.keq{\\tilde\{l\}_\\infty=\\begin\{bmatrix\}0\\\\0\\\\1\\end\{bmatrix\}}}
+            \p.center{Lines in \span.keq{\\mathbb\{E\}^2\\hspace\{-1px\} +\\hspace\{0px\} \\tilde\{l\}_\\infty}}
+          }
+          \div.block.col3.text.row2{
+            \p{\b{Point or line}: \span.keq{\\tilde\{x\}\\in\\mathbb\{R\}^3\\setminus\\\{0,0,0\\\}}}
+            \ul{
+              \li{\span.keq{c\\neq 0}}
+              \li{\span.keq{d\\neq 0} or \span.keq{e\\neq 0}}
+            }
+            \p.center{\span.keq{
+              \\overbrace\{\\begin\{bmatrix\}a\\\\b\\\\c\\end\{bmatrix\}\}^\{\\text\{point/line\}\}\\hspace\{-10px\}
+              \\underbrace\{\\begin\{bmatrix\}d\\\\e\\\\0\\end\{bmatrix\}\}_\{\\text\{Point at infinity\}\}\\hspace\{-16px\}
+              \\overbrace\{\\begin\{bmatrix\}0\\\\0\\\\c\\end\{bmatrix\}\}^\{\\text\{Line at infinity\}\}
+            }}
+          }
+
+          \div.block.col2.row2{
+            \div.figure{\img(src="figs/placeholder.svg")}
+            \div.figcaption{Parallel lines and point at infinity}
+          }
+          \div.block.col3.text{
+            \h4{Projective geometry and projective plane}
+            \p{Euclidean geometry:}
+            \ul{
+              \li{no points at infinity}
+              \li{parallel lines do not intersect}
+            }
+          }
+          \div.block.note.col3.text{
+            \p{\span.kw{Projective Plane}: \span.keq{\\mathbb\{P\}^2}}
+            \p.center{\span.keq{\\mathbb\{E\}^2\\cup} set of points at infinity}
+          }
+          \div.block{}
+
+          \div.block.col2.row2{
+            \div.figure{\img(src="figs/placeholder.svg")}
+            \div.figcaption{Parallel lines and point at infinity}
+          }
+          \div.block.col2.row2{
+            \div.figure{\img(src="figs/placeholder.svg")}
+            \div.figcaption{Parallel lines and point at infinity}
+          }
+          \div.block.col2.row2{
+            \div.figure{\img(src="figs/placeholder.svg")}
+            \div.figcaption{Parallel lines and point at infinity}
+          }
+          \div.block.col2.row2{
+            \div.figure{\img(src="figs/placeholder.svg")}
+            \div.figcaption{Parallel lines and point at infinity}
+          }
+        }
 
         
         
@@ -841,7 +968,7 @@
         
       }
       \p.part{Estimation}
-      \div.hidden{
+      \div{
         \div#reg12\h2{Introduction of Estimation in Geometry}
         
         \div#reg13\h2{Estimation of Transformations}
@@ -856,7 +983,7 @@
         
       }
       \p.part{Applications}
-      \div.hidden{
+      \div{
         \div#reg18\h2{Camera Calibration}
         
         \div#reg19\h2{Image Mosaics}