@media (max-width: 600px) { .tts-card { padding: 20px; }

.rate-control, .pitch-control { display: flex; align-items: center; gap: 15px; }

initElements() { this.textInput = document.getElementById('textInput'); this.voiceSelect = document.getElementById('voiceSelect'); this.rateSlider = document.getElementById('rate'); this.pitchSlider = document.getElementById('pitch'); this.rateValue = document.getElementById('rateValue'); this.pitchValue = document.getElementById('pitchValue'); this.speakBtn = document.getElementById('speakBtn'); this.pauseBtn = document.getElementById('pauseBtn'); this.resumeBtn = document.getElementById('resumeBtn'); this.stopBtn = document.getElementById('stopBtn'); this.presetBtns = document.querySelectorAll('.preset-btn'); }

select:focus { outline: none; border-color: #667eea; }

resume() { if (this.synth.paused) { this.synth.resume(); this.showNotification('▶️ Speech resumed', 'info'); } }

.subtitle { text-align: center; color: #666; margin-bottom: 30px; }

@keyframes slideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }