Update style.css

style.css

@@ -1,28 +1,71 @@
+html {
+    font-family: 'Inter', sans-serif;
+    scroll-behavior: smooth;
+}
+@supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+}
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    background-color: #f8fafc; /* slate-50 */
+    color: #0f172a; /* slate-900 */
+    padding: 1rem;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom styles for individual code lines */
+.code-line {
+    padding: 0.25rem 0.75rem; /* Equivalent to Tailwind py-1 px-3 */
+    border-left: 4px solid transparent;
+    min-height: 1.75em; /* Ensures empty lines have some height */
+    white-space: pre; /* Preserve whitespace, crucial for pre-formatted code from Prism */
+    display: block; /* Ensure each line takes full width */
+    line-height: 1.5;
+    transition: background-color 0.3s ease-in-out,
+                border-color 0.3s ease-in-out,
+                opacity 0.3s ease-in-out,
+                transform 0.3s ease-in-out,
+                box-shadow 0.3s ease-in-out;
+    cursor: pointer; /* Indicate lines are clickable */
 }
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.code-line:hover {
+    background-color: rgba(255, 255, 255, 0.05); /* Subtle hover on code lines */
 }
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.code-line.highlighted {
+    background-color: #334155; /* slate-700, for contrast on bg-gray-900 code area */
+    border-left-color: #0ea5e9; /* sky-500 */
+    opacity: 1 !important; /* Ensure full opacity */
+    transform: scale(1.015); /* Subtle pop effect */
+    box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* Shadow for depth */
+    position: relative; /* For z-index stacking context */
+    z-index: 10; /* Ensure highlighted line is on top */
+}
+.code-line-dimmed {
+    opacity: 0.4; /* Dim non-focused lines */
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Custom scrollbar styles */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: #e2e8f0; /* slate-200 */
+    border-radius: 10px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: #94a3b8; /* slate-400 */
+    border-radius: 10px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #64748b; /* slate-500 */
+}
+/* Prose adjustments for inline code in explanations */
+.prose code::before, .prose code::after {
+    content: ""; /* Remove backticks from prose code */
+}
+/* Ensure code block text within Prism spans respects the theme. */
+.code-line .token {
+    /* Specific token styles from prism-okaidia.css will apply here */
 }
+html { font-family: 'Inter', sans-serif; }
+@supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; } }
+body { background-color: #f8fafc; color: #0f172a; padding: 1rem; }