diff --git a/public/css/hanzi-graph.css b/public/css/hanzi-graph.css
index 28c1874..b8a18c7 100644
--- a/public/css/hanzi-graph.css
+++ b/public/css/hanzi-graph.css
@@ -1,5 +1,5 @@
 :root {
-    --background-color: linear-gradient(rgba(100, 150, 255, 0.05), rgba(100, 150, 255, 0.15));
+    --background-color: rgba(100, 150, 255, 0.12);
     --primary-font-color: rgba(0, 0, 0, 0.87);
     --primary-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     --chinese-font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
@@ -155,6 +155,9 @@ h1 {
 
 .walkthrough {
     margin-top: var(--walkthrough-top-margin);
+    padding: 10px;
+    background: var(--sentence-card-background-color);
+    border-radius: 12px;
 }
 
 h2 {
@@ -427,16 +430,13 @@ https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_a
     padding: 0 12px;
     margin-top: 8px;
     height: 40px;
+    width: fit-content;
     font-size: 14px;
     font-weight: bold;
     cursor: pointer;
     transition: opacity 0.2s;
 }
 
-.inline-definition-explain-btn:hover:not(:disabled) {
-    opacity: 0.8;
-}
-
 .inline-definition-explain-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
@@ -475,23 +475,17 @@ https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_a
     cursor: pointer;
 }
 
-/* Word click highlighting - apply to the word span */
-.sentence-container .word-span.word-clicked {
+.word-clicked {
     background-color: var(--highlight-color, rgba(0, 226, 102, 0.3));
     transform: scale(1.1);
     display: inline-block;
     border-radius: 2px;
-    margin: 0 2px;
     transition: transform 0.1s ease, background-color 0.1s ease;
 }
 
-/* Legacy: single character highlighting for study-mode (no word spans) */
-.sentence-container>a.word-clicked {
-    background-color: var(--highlight-color, rgba(109, 226, 0, 0.3));
-    transform: scale(1.1);
-    display: inline-block;
-    border-radius: 2px;
-    transition: transform 0.1s ease, background-color 0.1s ease;
+/* Word click highlighting - apply to the word span */
+.sentence-container .word-span.word-clicked {
+    margin: 0 2px;
 }
 
 #menu-popover {
@@ -2367,7 +2361,7 @@ main.auth-form {
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --background-color: linear-gradient(180deg, #071024, #121212);
+        --background-color: #071024;
         --primary-font-color: rgba(255, 255, 255, 0.87);
         --border: 1px solid #444;
         --border-color: #444;
diff --git a/public/index.html b/public/index.html
index aadacb3..59d694a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="description"
         content="Learn Chinese by exploring the relationships between characters alongside examples that illustrate their use.">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#f9fbff" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="rgb(237,242,254)" media="(prefers-color-scheme: light)">
     <meta name="theme-color" content="#071024" media="(prefers-color-scheme: dark)">
     <script type="module">
         if ('serviceWorker' in navigator) {
diff --git a/public/js/modules/explore.js b/public/js/modules/explore.js
index e298096..8a9c4b9 100644
--- a/public/js/modules/explore.js
+++ b/public/js/modules/explore.js
@@ -85,15 +85,15 @@ let runTextToSpeech = function (text, anchors) {
             }
             anchors.forEach((character, index) => {
                 if (index >= event.charIndex && index < (event.charIndex + (event.charLength || 1))) {
-                    character.style.backgroundColor = '#6de200';
+                    character.classList.add('word-clicked');
                 } else {
-                    character.removeAttribute('style');
+                    character.classList.remove('word-clicked');
                 }
             });
         });
         utterance.addEventListener('end', function () {
             anchors.forEach(character => {
-                character.removeAttribute('style');
+                character.classList.remove('word-clicked');
             });
             // length check shouldn't be necessary, but just in case, I guess?
             if (activeUtterances.length !== 0) {
diff --git a/public/js/modules/graph.js b/public/js/modules/graph.js
index 2740cc1..b30c750 100644
--- a/public/js/modules/graph.js
+++ b/public/js/modules/graph.js
@@ -264,17 +264,18 @@ function getStylesheet() {
                 'text-background-shape': 'round-rectangle',
                 'text-background-padding': '3px',
                 'text-events': 'yes',
-                'width': '5px',
+                'width': '6px',
                 'opacity': '1',
-                'overlay-opacity': '0'
+                'overlay-opacity': '0',
+                'transition-property': 'background-color, line-outline-color, line-outline-width',
+                'transition-duration': '0.2s'
             }
         },
         {
             selector: 'edge:selected',
             style: {
-                'width': '6px',
-                'opacity': '1',
-                'line-color': prefersDark ? '#999' : '#000'
+                'line-outline-width': '3px',
+                'line-outline-color': '#aaa'
             }
         }
     ];