Add explanation

src/routes/lru/+page.svelte

@@ -3,6 +3,7 @@
 
 	let numCacheEntries = 4;
 	let valuesQueued = '1,2,3,4,5,6,7,6,8,5,9';
+	let oldestEntry = 0;
 
 	$: lruMatrix = makeLruMatrix(numCacheEntries);
 	/** @type {string[]} */
@@ -92,7 +93,35 @@
 	}
 </script>
 
-<h1>LRU mit Dreiecksmatrix</h1>
+<h1>LRU Matrix</h1>
+
+<fieldset>
+	<details>
+		<summary>What is this all about?</summary>
+		<p>Most modern CPUs use three layers of extremely fast caches, called L1, L2 and L3.</p>
+		<p>
+			These caches have limited capacity. If they are full, some old value must be evicted to make
+			place for a new one. An effective method to choosing which value to evict is called <em
+				>LRU</em
+			>
+			(<em>Least Recently Used</em>).
+		</p>
+		<p>
+			LRU means: The value that was least recently used (~= the oldest one) is to be removed. To
+			make this work, the cache must keep track of which item is the oldest. In Software, you might
+			use a linked list, where you bring an item to the start whenever it is accessed, leaving the
+			last item as the least recently used one.
+		</p>
+		<p>
+			In hardware though, this is inefficient. Therefor, the lecture introduced a method called <em
+				>LRU Matrix</em
+			>. It encodes the information
+			<i>›slot i contains an older (= less recently used) item than slot j‹</i> using a 2D-grid
+			<code>lru[i][j]</code>, where 1 denotes slot i being less recently used compared to slot j.
+		</p>
+		<p>This tool allows you to play around with that concept and test your assumptions :)</p>
+	</details>
+</fieldset>
 
 <fieldset>
 	<label for="num-cache-entries-slider">
@@ -126,8 +155,8 @@
 	{/each}
 </table>
 
-<p>Def: f [i,j] = 1, falls Zugriff auf i älter ist als der auf j</p>
-<p>Def: f [i,j] = 0, falls Zugriff auf i jünger ist als der auf j</p>
+<p>Def: f [i,j] = 1, if access to i is older than the access to j</p>
+<p>Def: f [i,j] = 0, if the access to i is younger than the access to j</p>
 
 <h2>Cache entries</h2>
 <table border="1">