1  /**
  2   * Tutorial Styles
  3   *
  4   * Styles for tutorial modal and animations
  5   */
  6  
  7  /* Obsidian Modal Styles */
  8  .tutorial-modal .modal {
  9    max-width: 800px;
 10  }
 11  
 12  .tutorial-modal-content {
 13    padding: 3rem;
 14    text-align: center;
 15  }
 16  
 17  .tutorial-step {
 18    display: flex;
 19    flex-direction: column;
 20    align-items: center;
 21    gap: 1rem;
 22  }
 23  
 24  .tutorial-buttons {
 25    margin-top: 2rem;
 26    display: flex;
 27    gap: 1rem;
 28    justify-content: center;
 29  }
 30  
 31  /* Fade in animation for description */
 32  @keyframes fadeIn {
 33    from {
 34      opacity: 0;
 35      transform: translateY(10px);
 36    }
 37    to {
 38      opacity: 1;
 39      transform: translateY(0);
 40    }
 41  }
 42  
 43  /* === 3D Space Styles (for future use) === */
 44  
 45  .tutorial-tooltip {
 46    background: rgba(0, 0, 0, 0.9);
 47    border: 2px solid rgba(255, 255, 255, 0.3);
 48    border-radius: 12px;
 49    padding: 2rem 3rem;
 50    min-width: 400px;
 51    max-width: 600px;
 52    backdrop-filter: blur(10px);
 53    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
 54  }
 55  
 56  .manim-text-container {
 57    margin-bottom: 1rem;
 58    min-height: 60px;
 59    display: flex;
 60    align-items: center;
 61    justify-content: center;
 62  }
 63  
 64  .tutorial-description {
 65    color: rgba(255, 255, 255, 0.8);
 66    font-size: 1rem;
 67    line-height: 1.5;
 68    margin-top: 1rem;
 69    text-align: center;
 70    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 71  }
 72  
 73  .tutorial-skip {
 74    margin-top: 1.5rem;
 75    padding: 0.5rem 1.5rem;
 76    background: rgba(255, 255, 255, 0.1);
 77    border: 1px solid rgba(255, 255, 255, 0.3);
 78    border-radius: 6px;
 79    color: rgba(255, 255, 255, 0.6);
 80    font-size: 0.875rem;
 81    cursor: pointer;
 82    transition: all 0.2s ease;
 83    display: block;
 84    margin-left: auto;
 85    margin-right: auto;
 86  }
 87  
 88  .tutorial-skip:hover {
 89    background: rgba(255, 255, 255, 0.2);
 90    color: rgba(255, 255, 255, 0.9);
 91    border-color: rgba(255, 255, 255, 0.5);
 92  }
 93  
 94  .tutorial-skip:active {
 95    transform: scale(0.95);
 96  }
 97  
 98  /* Navigation controls (for future multi-step navigation) */
 99  .tutorial-nav {
100    display: flex;
101    justify-content: space-between;
102    margin-top: 1.5rem;
103    gap: 1rem;
104  }
105  
106  .tutorial-nav button {
107    padding: 0.5rem 1rem;
108    background: rgba(255, 255, 255, 0.1);
109    border: 1px solid rgba(255, 255, 255, 0.3);
110    border-radius: 6px;
111    color: white;
112    font-size: 0.875rem;
113    cursor: pointer;
114    transition: all 0.2s ease;
115  }
116  
117  .tutorial-nav button:hover {
118    background: rgba(255, 255, 255, 0.2);
119    border-color: rgba(255, 255, 255, 0.5);
120  }
121  
122  .tutorial-nav button:disabled {
123    opacity: 0.3;
124    cursor: not-allowed;
125  }
126  
127  /* Progress indicator */
128  .tutorial-progress {
129    margin-top: 1rem;
130    display: flex;
131    gap: 0.5rem;
132    justify-content: center;
133  }
134  
135  .tutorial-progress-dot {
136    width: 8px;
137    height: 8px;
138    border-radius: 50%;
139    background: rgba(255, 255, 255, 0.3);
140    transition: all 0.3s ease;
141  }
142  
143  .tutorial-progress-dot.active {
144    background: white;
145    transform: scale(1.3);
146  }