harden database interactions and improve error handling

app/pages/learn/[id]/index.vue

@@ -541,26 +541,22 @@ async function completeLesson() {
   completing.value = true;
   completeError.value = false;
 
-  const ctrl = new AbortController();
-  const timer = setTimeout(() => ctrl.abort(), 10000);
-
   try {
-    await $fetch(`/api/topics/${topicId}/progress`, {
-      method: "POST",
-      signal: ctrl.signal,
-      body: {
-        lessonComplete: true,
-        tookBranches: branchesEntered.value > 0,
-        branchCount: branchesEntered.value,
-      },
-    });
+    const existing = localStorage.getItem(`progress:${topicId}`);
+    const prev = existing ? JSON.parse(existing) : {};
+    localStorage.setItem(`progress:${topicId}`, JSON.stringify({
+      ...prev,
+      lessonComplete: true,
+      tookBranches: branchesEntered.value > 0,
+      branchCount: branchesEntered.value,
+    }));
+
     lessonDone.value = true;
   } catch {
     completing.value = false;
     completeError.value = true;
     return;
   } finally {
-    clearTimeout(timer);
     completing.value = false;
   }
 }
@@ -571,6 +567,7 @@ function goBack() {
   history.back();
 }
 
+
 function stepBack() {
   stopAllAudio();
   if (lessonState.mode === "branch" || lessonState.mode === "confirm" || lessonState.mode === "hardStop") {
@@ -1377,6 +1374,26 @@ onBeforeUnmount(() => {
 }
 .karaoke-skip:hover { opacity: 0.85; }
 
+.karaoke-start {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: oklch(54% 0.140 44);
+  color: #fff;
+  border: none;
+  border-radius: 9999px;
+  padding: 0.85rem 2rem;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
+  transition: opacity 0.15s, transform 0.1s;
+}
+.karaoke-start:hover { opacity: 0.88; }
+.karaoke-start:active { transform: scale(0.97); }
+
 .karaoke-fade-enter-active { transition: opacity 0.2s ease; }
 .karaoke-fade-leave-active { transition: opacity 0.15s ease; }
 .karaoke-fade-enter-from,
@@ -2099,4 +2116,5 @@ onBeforeUnmount(() => {
   transition: opacity 0.15s;
 }
 .branch-loading-skip:hover { opacity: 0.85; }
+
 </style>