.speech-to-text-container{display:flex;flex-direction:column;height:calc(100vh - 400px);min-height:400px;max-width:800px;margin:0 auto;gap:1.5rem}.conversation-area{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;padding:1rem 0}.message{padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:100%}.message-content{font-size:.9375rem;line-height:1.6;color:var(--text-primary);white-space:pre-wrap;word-wrap:break-word}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem;color:var(--text-muted)}.empty-icon{font-size:3rem;opacity:.3}.empty-text{font-size:.9375rem;font-weight:400}.recording-status{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem;color:var(--text-secondary);font-size:.9375rem;font-weight:500}.recording-pulse{width:12px;height:12px;background:var(--error);border-radius:50%;animation:pulse-scale 1.5s ease-in-out infinite}@keyframes pulse-scale{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}.record-button{width:52px;height:52px;border-radius:50%;border:none;background:var(--surface);border:2px solid var(--border);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;position:relative}.record-button:hover{background:var(--surface-hover);border-color:var(--text-primary);color:var(--text-primary);box-shadow:0 0 0 4px #ffffff0d}.record-button.recording{background:var(--error);border-color:var(--error);color:#fff}.record-button.recording:hover{background:#dc2626;border-color:#dc2626;box-shadow:0 0 0 4px #ef44441a}.record-button:active{transform:scale(.95)}.record-button svg{width:20px;height:20px}.conversation-area::-webkit-scrollbar{width:6px}.conversation-area::-webkit-scrollbar-track{background:transparent}.conversation-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.conversation-area::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}@media (max-width: 768px){.speech-to-text-container{height:calc(100vh - 300px);min-height:300px}.conversation-area{padding:.5rem 0}.message{padding:.875rem 1rem}.empty-icon{font-size:2.5rem}.empty-text{font-size:.875rem}.input-area{padding:1rem 0}.record-button{width:48px;height:48px}}.sign-to-speech-container{display:flex;flex-direction:column;height:calc(100vh - 300px);min-height:500px;max-width:900px;margin:0 auto;gap:1.5rem}.video-area{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.video-wrapper{position:relative;width:100%;aspect-ratio:4 / 3;background:var(--background-secondary);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border)}.camera-video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}.video-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--text-muted);background:var(--background-secondary)}.video-placeholder svg{opacity:.3}.video-placeholder p{font-size:.9375rem;font-weight:400}.translation-display{padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:100%}.translation-content{font-size:.9375rem;line-height:1.6;color:var(--text-primary);white-space:pre-wrap;word-wrap:break-word}.input-area{display:flex;justify-content:center;padding:1.5rem 0;border-top:1px solid var(--border)}.stream-button{width:52px;height:52px;border-radius:50%;border:none;background:var(--surface);border:2px solid var(--border);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;position:relative}.stream-button:hover{background:var(--surface-hover);border-color:var(--text-primary);color:var(--text-primary);box-shadow:0 0 0 4px #ffffff0d}.stream-button.streaming{background:var(--error);border-color:var(--error);color:#fff}.stream-button.streaming:hover{background:#dc2626;border-color:#dc2626;box-shadow:0 0 0 4px #ef44441a}.stream-button:active{transform:scale(.95)}.stream-button svg{width:20px;height:20px}.video-area::-webkit-scrollbar{width:6px}.video-area::-webkit-scrollbar-track{background:transparent}.video-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.video-area::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}@media (max-width: 768px){.sign-to-speech-container{height:calc(100vh - 300px);min-height:300px}.video-area{gap:.75rem}.video-wrapper{aspect-ratio:4 / 3}.translation-display{padding:.875rem 1rem}.video-placeholder svg{width:48px;height:48px}.video-placeholder p{font-size:.875rem}.input-area{padding:1rem 0}.stream-button{width:48px;height:48px}}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--background)}.app-header{border-bottom:1px solid var(--border);background:var(--surface);padding:0;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffc}@media (prefers-color-scheme: dark){.app-header{background:#000c}}.header-content{max-width:1200px;margin:0 auto;padding:1.5rem 2rem;display:flex;align-items:center;justify-content:space-between}.app-title{font-size:1.5rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:.75rem;letter-spacing:-.02em}.title-icon{font-size:1.75rem}.title-icon-img{width:1.5em;height:1.5em;vertical-align:middle}.nav-tabs{display:flex;gap:1rem;align-items:center}.mode-button{padding:.5rem 0;font-size:.95rem;font-weight:500;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .3s ease;position:relative}.mode-button:hover{color:#ffffffe6;text-shadow:0 0 8px rgba(255,255,255,.5)}.mode-button.active{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.4)}@media (prefers-color-scheme: dark){.mode-button{color:#9ca3af}.mode-button:hover{color:#ffffffe6}.mode-button.active{color:#fff}}.mode-separator{color:var(--text-muted);font-weight:300;-webkit-user-select:none;user-select:none}.app-main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem}.hero-section{margin-bottom:4rem;padding:4rem 0 2rem}.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.hero-text{max-width:550px}.hero-title{font-size:3rem;font-weight:600;line-height:1.1;margin-bottom:1.5rem;color:var(--text-primary);letter-spacing:-.03em}.hero-subtitle{font-size:1.125rem;line-height:1.6;color:var(--text-secondary);font-weight:400}.hero-visual{display:flex;justify-content:center;align-items:center;min-height:350px;position:relative}.gradient-orb{width:350px;height:350px;background:radial-gradient(circle at 30% 40%,rgba(99,102,241,.15) 0%,rgba(139,92,246,.1) 25%,rgba(167,139,250,.15) 50%,transparent 70%);border-radius:50%;animation:orbFloat 8s ease-in-out infinite,orbPulse 4s ease-in-out infinite;position:relative}.gradient-orb:before{content:"";position:absolute;top:20px;right:20px;bottom:20px;left:20px;background:radial-gradient(circle at 60% 50%,rgba(59,130,246,.2) 0%,rgba(99,102,241,.15) 40%,transparent 70%);border-radius:50%;animation:orbFloat 6s ease-in-out infinite reverse}@media (prefers-color-scheme: dark){.gradient-orb{background:radial-gradient(circle at 30% 40%,rgba(99,102,241,.25) 0%,rgba(139,92,246,.18) 25%,rgba(167,139,250,.25) 50%,transparent 70%)}.gradient-orb:before{background:radial-gradient(circle at 60% 50%,rgba(59,130,246,.3) 0%,rgba(99,102,241,.25) 40%,transparent 70%)}}@keyframes orbFloat{0%,to{transform:translateY(0) translate(0)}50%{transform:translateY(-15px) translate(10px)}}@keyframes orbPulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.app-footer{border-top:1px solid var(--border);padding:2rem;text-align:center;color:var(--text-muted);font-size:.8125rem;background:var(--background-secondary)}@media (max-width: 768px){.header-content{flex-direction:column;gap:1rem;padding:1rem}.app-title{font-size:1.25rem}.nav-tabs{width:100%;justify-content:center}.mode-button{font-size:.875rem}.app-main{padding:1rem}.hero-section{padding:2rem 0 1rem;margin-bottom:2rem}.hero-content{grid-template-columns:1fr;gap:2rem}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.gradient-orb{width:250px;height:250px}}.fade-in-element{opacity:0;transform:translateY(30px);transition:opacity .6s ease-out,transform .6s ease-out}.fade-in-element.visible{opacity:1;transform:translateY(0)}.fade-in-delay-1{transition-delay:.1s}.fade-in-delay-2{transition-delay:.2s}.fade-in-delay-3{transition-delay:.3s}*{margin:0;padding:0;box-sizing:border-box}:root{--background: #ffffff;--background-secondary: #fafafa;--surface: #ffffff;--surface-hover: #fafafa;--border: #eaeaea;--border-hover: #d1d1d1;--text-primary: #000000;--text-secondary: #666666;--text-muted: #999999;--text-inverse: #ffffff;--primary: #000000;--primary-hover: #333333;--accent: #0070f3;--accent-hover: #0051cc;--success: #22c55e;--warning: #f59e0b;--error: #ef4444;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--radius: 8px;--radius-lg: 12px}@media (prefers-color-scheme: dark){:root{--background: #000000;--background-secondary: #111111;--surface: #111111;--surface-hover: #1a1a1a;--border: #333333;--border-hover: #404040;--text-primary: #ffffff;--text-secondary: #a1a1a1;--text-muted: #666666;--text-inverse: #000000;--primary: #ffffff;--primary-hover: #e5e5e5;--accent: #3291ff;--accent-hover: #0070f3}}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--background);color:var(--text-primary);min-height:100vh;line-height:1.5;font-size:14px}code{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace}#root{min-height:100vh}