body { margin: 0; font-family: 'Helvetica Neue', Arial, sans-serif; background-color: #0f172a; color: #f8fafc; }
#app-container { display: flex; flex-direction: column; height: 100vh; }
header { background-color: #1e293b; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #334155; }
.main-content { display: flex; flex: 1; padding: 20px; gap: 20px; }
.video-section { flex: 2; display: flex; flex-direction: column; gap: 12px; }
.video-wrapper { position: relative; width: 100%%; height: 70vh; background-color: #000; border-radius: 12px; overflow: hidden; }
#webcam { width: 100%%; height: 100%%; object-fit: cover; }
.text-overlay { position: absolute; bottom: 30px; left: 5%%; right: 5%%; background: rgba(15, 23, 42, 0.85); padding: 16px; border-radius: 8px; backdrop-filter: blur(8px); font-size: 20px; line-height: 1.6; min-height: 50px; }
.char-span { display: inline-block; opacity: 0; transform: translateY(10px); animation: fadeInUp 0.4s forwards, fadeOutDown 0.5s 4s forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOutDown { to { opacity: 0; transform: translateY(-8px); } }
.control-section { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.card { background-color: #1e293b; padding: 16px; border-radius: 8px; border: 1px solid #334155; }
.switch { display: inline-flex; align-items: center; cursor: pointer; gap: 8px; margin-right: 16px; }