Add checkbox to hide completed milestones

index.html

@@ -188,6 +188,10 @@ <h2>Token Consumption Milestones</h2>
       Each threshold represents the cumulative global AI token count at which a symbolic environmental
       event occurs.  Triggered milestones are highlighted in red.
     </p>
+    <label class="milestone-filter-label">
+      <input type="checkbox" id="hideCompletedMilestones" />
+      Hide completed milestones
+    </label>
     <div class="milestones-grid" id="milestonesGrid">
       <!-- populated by script.js -->
     </div>

script.js

@@ -2519,6 +2519,14 @@
     const toggleBtn = document.getElementById('themeToggle');
     if (toggleBtn) toggleBtn.addEventListener('click', toggleTheme);
 
+    // Hide completed milestones toggle
+    const hideCompletedCb = document.getElementById('hideCompletedMilestones');
+    if (hideCompletedCb) {
+      hideCompletedCb.addEventListener('change', function () {
+        const grid = document.getElementById('milestonesGrid');
+        if (grid) grid.classList.toggle('hide-completed', this.checked);
+      });
+    }
     // Tab navigation
     initTabs();
 

styles.css

@@ -513,6 +513,28 @@ header::after {
 /* ---- Milestones ---- */
 #milestones-section { background: var(--bg); }
 
+.milestone-filter-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--text-dim);
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 0.5rem;
+}
+
+.milestone-filter-label input[type="checkbox"] {
+  cursor: pointer;
+  accent-color: var(--accent);
+  width: 1rem;
+  height: 1rem;
+}
+
+.milestones-grid.hide-completed .milestone-card.triggered {
+  display: none;
+}
+
 .milestones-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));