fix: reduce welcome overlay text size and spacing to prevent cutoff

- Smaller title font (22px down from 28px)
- Smaller body text (14px) with tighter line height (1.4)
- Reduced padding (24px down from 32px) and margins
- Smaller icon (48px down from 64px)
- Add max-height 80vh and overflow-y auto for safety
- Better spacing prevents content from being cut off

src/styles.css

@@ -68,26 +68,29 @@
 .welcome-modal {
   background: white;
   border-radius: 12px;
-  padding: 32px;
+  padding: 24px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  max-height: 80vh;
+  overflow-y: auto;
 }
 
 .welcome-title {
-  margin: 0 0 24px 0;
+  margin: 0 0 16px 0;
   color: #1f2937;
-  font-size: 28px;
+  font-size: 22px;
   font-weight: 600;
 }
 
 .welcome-content {
   text-align: left;
   color: #4b5563;
-  line-height: 1.6;
-  margin-bottom: 32px;
+  line-height: 1.4;
+  margin-bottom: 20px;
+  font-size: 14px;
 }
 
 .welcome-content p {
-  margin: 0 0 16px 0;
+  margin: 0 0 12px 0;
 }
 
 .welcome-overlay .typewriter-button {

src/welcomeOverlay.js

@@ -34,10 +34,10 @@ class WelcomeOverlay {
     `;
 
     modal.innerHTML = `
-      <div style="display: flex; justify-content: center; margin-bottom: 16px;">
+      <div style="display: flex; justify-content: center; margin-bottom: 12px;">
         <img src="https://raw.githubusercontent.com/zmuhls/cloze-reader/main/icon.png" 
              alt="Cloze Reader" 
-             style="width: 64px; height: 64px; border-radius: 8px;">
+             style="width: 48px; height: 48px; border-radius: 6px;">
       </div>
       <h1 class="welcome-title">
         Cloze Reader