Flipped pencil icon.

index.html

@@ -29,6 +29,10 @@
       z-index: -1;
     }
     .cursor-pointer { cursor: pointer; }
+    #edit-xp {
+      display: inline-block;
+      transform: scaleX(-1);
+    }
   </style>
 </head>
 <body class="bg-slate-50 flex items-center justify-center min-h-screen p-4">
@@ -73,7 +77,6 @@
   </div>
 
   <script>
-    // XP thresholds for levels 1–80
     const xpThresholds = [
       0, 1000, 3000, 6000, 10000, 15000, 21000, 28000, 36000, 45000,
       55000, 65000, 75000, 85000, 100000, 120000, 140000, 160000, 185000, 210000,
@@ -135,7 +138,6 @@
       let currentLevelXp = xpThresholds[currentLevel - 1];
       let progress = (currentXp - currentLevelXp) / (nextLevelXp - currentLevelXp) * 100;
 
-      // Update UI
       document.getElementById('progress-bar').style.width = progress + '%';
       document.getElementById('level-text').textContent = `Level ${currentLevel}`;
       document.getElementById('level-left').textContent = currentLevel;
@@ -150,12 +152,10 @@
       e.target.value = e.target.value.replace(/[^0-9,]/g,'');
     });
 
-    // Toggle extra info
     document.getElementById('toggle-extra').addEventListener('click', () => {
       document.getElementById('extra-info').classList.toggle('hidden');
     });
 
-    // Edit XP/day
     document.getElementById('edit-xp').addEventListener('click', () => {
       let newVal = prompt("Enter your average XP per day:", avgXpPerDay);
       if (newVal && !isNaN(newVal) && parseInt(newVal) > 0) {