diff --git a/index.html b/index.html
index 0fe44e1..5b3ac34 100644
--- a/index.html
+++ b/index.html
@@ -1496,6 +1496,47 @@ <h2 id="receipt-heading" class="sr-only">Session Receipt</h2>
   </div>
 </div>
 
+<!-- ── Grim Reaper ──────────────────────────────────────── -->
+<div id="grim-reaper" class="grim-reaper" aria-hidden="true">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 155">
+    <!-- scythe handle -->
+    <line x1="77" y1="16" x2="62" y2="148" stroke="#555" stroke-width="2.5" stroke-linecap="round"/>
+    <!-- scythe blade -->
+    <path d="M77,16 C100,2 103,28 87,35 C85,26 80,19 77,16 Z" fill="#555"/>
+    <!-- robe shadow -->
+    <ellipse cx="50" cy="151" rx="28" ry="5" fill="#000" opacity="0.4"/>
+    <!-- robe body -->
+    <path d="M22,72 C14,106 11,138 9,150 L91,150 C89,138 86,106 78,72 Z" fill="#161616"/>
+    <!-- hood -->
+    <path d="M22,75 C18,48 22,18 50,14 C78,18 82,48 78,75 Z" fill="#1d1d1d"/>
+    <!-- hood side drapes -->
+    <path d="M22,74 C14,82 10,98 14,122 C18,108 20,92 22,74 Z" fill="#141414"/>
+    <path d="M78,74 C86,82 90,98 86,122 C82,108 80,92 78,74 Z" fill="#141414"/>
+    <!-- eye sockets -->
+    <circle cx="37" cy="55" r="9" fill="#0a0a0a"/>
+    <circle cx="63" cy="55" r="9" fill="#0a0a0a"/>
+    <!-- glowing eyes -->
+    <circle cx="37" cy="55" r="6" fill="#cc1111" class="reaper-eye-inner"/>
+    <circle cx="63" cy="55" r="6" fill="#cc1111" class="reaper-eye-inner"/>
+    <!-- bright pupils -->
+    <circle cx="37" cy="55" r="2.5" fill="#ff5555"/>
+    <circle cx="63" cy="55" r="2.5" fill="#ff5555"/>
+    <!-- cute highlights -->
+    <circle cx="39.5" cy="52.5" r="2" fill="#fff" opacity="0.5"/>
+    <circle cx="65.5" cy="52.5" r="2" fill="#fff" opacity="0.5"/>
+    <!-- creepy-cute grin -->
+    <path d="M33,67 Q37,75 50,71 Q63,75 67,67" stroke="#999" stroke-width="1.8" fill="none" stroke-linecap="round"/>
+    <!-- left bony arm -->
+    <path d="M22,90 C14,88 8,85 5,79" stroke="#999" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+    <!-- bony fingers -->
+    <path d="M5,79 C2,73 5,71 7,73" stroke="#888" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+    <path d="M5,79 C1,77 2,73 5,74" stroke="#888" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+    <path d="M5,79 C3,83 6,84 8,82" stroke="#888" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+    <!-- robe ragged hem -->
+    <path d="M9,150 C20,145 30,150 40,147 C50,144 60,148 70,146 C80,144 88,148 91,150" stroke="#222" stroke-width="1.5" fill="none"/>
+  </svg>
+</div>
+
 <!-- Changelog & version data (auto-generated from CHANGELOG.md) -->
 <script src="changelog-data.js"></script>
 <!-- Milestone data (auto-generated from milestones.yaml) -->
diff --git a/styles.css b/styles.css
index d96e065..7ff69a0 100644
--- a/styles.css
+++ b/styles.css
@@ -3099,3 +3099,53 @@ footer a:hover {
   .milestone-flash-overlay { animation: none; background: rgba(255, 51, 51, 0.1); }
   .milestone-flash-content { animation: none; }
 }
+
+/* ---- Grim Reaper ---- */
+.grim-reaper {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  opacity: 0.22;
+  transform: translateX(-22px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+  pointer-events: auto;
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
+}
+
+.grim-reaper:hover {
+  opacity: 0.55;
+  transform: translateX(0);
+}
+
+.grim-reaper svg {
+  display: block;
+  width: 80px;
+  height: auto;
+  animation: reaper-float 5s ease-in-out infinite;
+}
+
+@keyframes reaper-float {
+  0%, 100% { transform: translateY(0); }
+  50%       { transform: translateY(-10px); }
+}
+
+.reaper-eye-inner {
+  filter: drop-shadow(0 0 4px #ff3333);
+  animation: reaper-eye-pulse 3s ease-in-out infinite;
+}
+
+@keyframes reaper-eye-pulse {
+  0%, 100% { opacity: 0.7; }
+  50%       { opacity: 1; }
+}
+
+@media (max-width: 480px) {
+  .grim-reaper svg { width: 55px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .grim-reaper svg,
+  .reaper-eye-inner { animation: none; }
+  .grim-reaper { transition: none; }
+}