body {
      background: linear-gradient(135deg, #74ebd5 0%, #acb6e5 100%);
      min-height: 100vh;
      padding: 40px 0;
      font-family: 'Segoe UI', Arial, sans-serif;
    }
    
    .container {
      max-width: 900px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .lesson-selector {
      margin-bottom: 20px;
    }
    
    .typing-box {
      border: 3px solid #4dabf7;
      padding: 20px;
      border-radius: 15px;
      background: #fff;
      transition: all 0.3s ease;
    }
    
    .typing-box:hover {
      border-color: #339af0;
      box-shadow: 0 5px 15px rgba(51, 154, 240, 0.3);
    }
    
    .ad-space {
      background: linear-gradient(45deg, #e9ecef, #dee2e6);
      height: 100px;
      border-radius: 10px;
      text-align: center;
      line-height: 100px;
      margin: 20px 0;
      font-style: italic;
      color: #6c757d;
    }
    
    /* UI for showing words */
    #text-to-type {
      margin-bottom: 20px;
      min-height: 100px;
      max-height: 150px;
      overflow-y: auto;
      padding: 15px;
      border: 1px solid #d1e3f0;
      border-radius: 10px;
      background: #f0f4f8;
      line-height: 1.8;
      text-align: center;
    }
    
    /* Each word is wrapped in its own bordered block */
    .word-block {
      display: inline-block;
      border: 2px solid #d1e3f0;
      border-radius: 8px;
      padding: 5px 8px;
      margin: 3px;
      background: #fff;
    }
    
    /* Each letter inside a word */
    .word-block .letter {
      font-size: 24px;
      font-weight: 500;
      padding: 2px 4px;
      margin: 1px;
      transition: background 0.2s ease, color 0.2s ease;
      pointer-events: none;
    }
    
    /* A space between word blocks */
    .letter.space {
      margin: 0 3px;
    }
    
    .highlight-correct {
      color: #2ecc71 !important;
      background: #d1fae5 !important;
    }
    
    .highlight-wrong {
      color: #e74c3c !important;
      background: #ffe6e6 !important;
    }
    
    .highlight-next {
      color: #3498db !important;
      background: #e6f3ff !important;
    }
    
    textarea {
      font-size: 22px;
      height: 120px;
      border-radius: 10px;
      resize: none;
      padding: 15px;
      transition: border-color 0.3s ease;
    }
    
    textarea:focus {
      border-color: #4dabf7;
      box-shadow: 0 0 10px rgba(77, 171, 247, 0.3);
    }
    
    .stats {
      background: #f8f9fa;
      padding: 15px;
      border-radius: 10px;
      margin-top: 20px;
    }
    
    h1 {
      color: #2b8a3e;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      margin-bottom: 25px;
    }