*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}.container{max-width:1400px;margin:0 auto;background:#fff;border-radius:20px;padding:30px;box-shadow:0 20px 60px #0000004d}.layout{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start}.left-pane{width:100%}.right-pane{width:100%;display:flex;flex-direction:column;gap:16px}header{text-align:center;margin-bottom:30px}h1{color:#667eea;font-size:2.5em;margin-bottom:10px}.subtitle{color:#666;font-size:1.1em}.camera-container{position:relative;width:100%;max-width:800px;margin:0 auto;background:#000;border-radius:10px;overflow:hidden}#cameraPreview{width:100%;height:auto;display:block}#overlayCanvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mic-indicator{position:absolute;top:15px;left:15px;background:#000000bf;color:#fff;padding:10px 14px;border-radius:999px;font-weight:700;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 20px #0000004d}.mic-indicator:before{content:"";width:10px;height:10px;background:#ff6b6b;border-radius:50%;box-shadow:0 0 #ff6b6bb3;animation:pulse 1.6s infinite}.mic-indicator.active:before{background:#48bb78;box-shadow:0 0 #48bb78b3}.listening-state{position:absolute;bottom:15px;left:50%;transform:translate(-50%);background:#000000a6;color:#fff;padding:10px 18px;border-radius:12px;font-weight:600;text-align:center;max-width:90%;box-shadow:0 6px 20px #00000040;transition:background .3s,transform .3s}.listening-state.command{background:#48bb78d9;transform:translate(-50%) scale(1.02)}.instructions{margin:0;background:#667eea1a;border:1px solid rgba(102,126,234,.25);color:#333;padding:15px 20px;border-radius:10px;font-size:1.05em;text-align:center;max-width:100%}.note{max-width:100%;margin:0 0 10px;text-align:center;color:#4a5568;font-size:.95em}.controls{display:flex;flex-direction:column;align-items:center;gap:20px;margin:0}.buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}button{padding:15px 40px;font-size:1.2em;border:none;border-radius:10px;cursor:pointer;transition:all .3s;font-weight:700}#readButton{background:#667eea;color:#fff}#readButton:hover:not(:disabled){background:#5568d3;transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}#readButton:disabled{background:#ccc;cursor:not-allowed}#repeatButton{background:#48bb78;color:#fff}#repeatButton:hover:not(:disabled){background:#38a169;transform:translateY(-2px);box-shadow:0 5px 15px #48bb7866}#repeatButton:disabled{background:#ccc;cursor:not-allowed}#stopButton{background:#f56565;color:#fff}#stopButton:hover:not(:disabled){background:#e53e3e;transform:translateY(-2px);box-shadow:0 5px 15px #f5656566}#stopButton:disabled{background:#ccc;cursor:not-allowed}.speech-controls{display:flex;align-items:center;gap:10px}.speech-controls label{font-weight:700;color:#333}#speechRate{width:150px}#rateValue{min-width:50px;font-weight:700;color:#667eea}.result-container{margin-bottom:20px}.result-container h3{color:#333;margin-bottom:10px}.recognized-text{background:#f7fafc;border:2px solid #e2e8f0;border-radius:10px;padding:20px;min-height:100px;font-size:1.2em;line-height:1.6;color:#2d3748}.status{text-align:center;padding:10px;background:#edf2f7;border-radius:10px;color:#4a5568;font-weight:700}.status.error{background:#fed7d7;color:#c53030}.status.success{background:#c6f6d5;color:#2f855a}.commands-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px}.commands-card h3{margin-bottom:8px;color:#333}.commands-card ul{list-style:disc;padding-left:20px;color:#4a5568;line-height:1.6}@keyframes pulse{0%{transform:scale(.9);box-shadow:0 0 #ff6b6bb3}70%{transform:scale(1);box-shadow:0 0 0 12px #ff6b6b00}to{transform:scale(.9);box-shadow:0 0 #ff6b6b00}}@media(max-width:768px){h1{font-size:2em}.subtitle{font-size:1em}.instructions{font-size:.9em;padding:10px 15px}.layout{grid-template-columns:1fr}button{padding:12px 30px;font-size:1em}}@media(max-width:900px){.container{padding:20px}.layout{grid-template-columns:1fr;gap:16px}.camera-container{margin-bottom:16px}.buttons{width:100%;flex-direction:column}.buttons button{width:100%}}