refactor: split startup lifecycle and Anki service architecture

src/renderer/style.css

@@ -284,6 +284,11 @@ body.settings-modal-open #subtitleContainer {
   position: relative;
 }
 
+#subtitleRoot .word.word-known {
+  color: #a6da95;
+  text-shadow: 0 0 6px rgba(166, 218, 149, 0.35);
+}
+
 #subtitleRoot .word:hover {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 3px;

src/renderer/subtitle-render.ts

@@ -26,7 +26,7 @@ function renderWithTokens(root: HTMLElement, tokens: MergedToken[]): void {
       for (let i = 0; i < parts.length; i += 1) {
         if (parts[i]) {
           const span = document.createElement("span");
-          span.className = "word";
+          span.className = token.isKnown ? "word word-known" : "word";
           span.textContent = parts[i];
           if (token.reading) span.dataset.reading = token.reading;
           if (token.headword) span.dataset.headword = token.headword;
@@ -40,7 +40,7 @@ function renderWithTokens(root: HTMLElement, tokens: MergedToken[]): void {
     }
 
     const span = document.createElement("span");
-    span.className = "word";
+    span.className = token.isKnown ? "word word-known" : "word";
     span.textContent = surface;
     if (token.reading) span.dataset.reading = token.reading;
     if (token.headword) span.dataset.headword = token.headword;