revert: restore working contextualization by reverting to 77c4776 while preserving font improvements

src/styles.css

@@ -31,14 +31,38 @@
   transform: scale(1.1);
 }
 
-.suggestion-btn {
+.suggestion-btn, .question-btn {
   transition: all 0.2s ease;
+  padding: 14px 18px;
+  background: #f8f9fa;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  text-align: center;
+  cursor: pointer;
+  line-height: 1.4;
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.suggestion-btn:hover {
+.suggestion-btn:hover, .question-btn:hover:not(:disabled) {
+  background: #e9ecef;
+  border-color: #6c757d;
   transform: translateY(-1px);
 }
 
+.suggestion-btn:disabled, .question-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #f8f9fa;
+}
+
 /* Answer revelation styles */
 .revealed-answer {
   background-color: #fef3c7 !important;
@@ -138,10 +162,11 @@
 
 @layer base {
   body {
-    font-family: 'Special Elite', 'Courier New', monospace;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     background-color: var(--aged-paper);
     color: var(--typewriter-ink);
-    letter-spacing: 0.05em;
+    line-height: 1.6;
+    font-size: 16px;
     background-image: 
       radial-gradient(circle at 25% 25%, rgba(139, 92, 246, 0.02) 0%, transparent 50%),
       radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.02) 0%, transparent 50%);
@@ -150,18 +175,17 @@
 
 @layer components {
   .typewriter-text {
-    font-family: 'Special Elite', 'Courier New', monospace;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     color: var(--typewriter-ink);
-    letter-spacing: 0.1em;
-    word-spacing: 0.1em;
-    line-height: 1.8;
+    font-weight: 600;
+    line-height: 1.7;
   }
 
   .typewriter-subtitle {
-    font-family: 'Special Elite', 'Courier New', monospace;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     color: #666;
-    letter-spacing: 0.05em;
-    font-size: 0.95rem;
+    font-size: 1rem;
+    line-height: 1.5;
   }
 
   .paper-sheet {
@@ -197,18 +221,17 @@
   }
 
   .cloze-input {
-    font-family: 'Special Elite', 'Courier New', monospace;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     background-color: transparent;
     border: none;
     border-bottom: 2px solid black;
     color: var(--typewriter-ink);
     text-align: center;
     outline: none;
-    padding: 2px 4px;
+    padding: 4px 6px;
     margin: 0 2px;
-    min-width: 3ch;
+    min-width: 4ch;
     width: auto;
-    letter-spacing: 0.05em;
     font-size: inherit;
     line-height: inherit;
     transition: all 0.2s ease;
@@ -236,16 +259,16 @@
   }
 
   .typewriter-button {
-    font-family: 'Special Elite', 'Courier New', monospace;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     min-width: 120px;
-    min-height: 42px;
-    padding: 8px 16px;
+    min-height: 44px;
+    padding: 10px 18px;
     background-color: var(--aged-paper-dark);
     color: var(--typewriter-ink);
     border: 2px solid black;
-    border-radius: 4px;
+    border-radius: 6px;
     font-weight: 600;
-    letter-spacing: 0.05em;
+    font-size: 16px;
     cursor: pointer;
     transition: all 0.15s ease;
     box-shadow: 
@@ -288,11 +311,9 @@
   }
 
   .prose {
-    font-family: 'Special Elite', 'Courier New', monospace;
-    font-size: 1.1rem;
-    line-height: 1.8;
-    letter-spacing: 0.05em;
-    word-spacing: 0.1em;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 1.125rem;
+    line-height: 1.7;
     color: var(--typewriter-ink);
     overflow-wrap: break-word;
   }