.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:.75rem;padding:1rem 0}.message{padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:100%;transition:all var(--transition-base) var(--ease-out);animation:messageSlideIn .4s var(--ease-out) forwards}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.message:hover{border-color:var(--border-hover);box-shadow:var(--shadow-sm)}.message-content{font-size:.9375rem;line-height:1.7;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:.25;transition:opacity var(--transition-base) var(--ease-out)}.empty-state:hover .empty-icon{opacity:.4}.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:10px;height:10px;background:var(--error);border-radius:50%;animation:pulseScale 1.5s ease-in-out infinite;box-shadow:0 0 #ef444466}@keyframes pulseScale{0%,to{opacity:1;transform:scale(1);box-shadow:0 0 #ef444466}50%{opacity:.8;transform:scale(.9);box-shadow:0 0 0 8px #ef444400}}.record-button{width:56px;height:56px;border-radius:50%;border:none;background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base) var(--ease-out);position:relative}.record-button:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;background:transparent;transition:all var(--transition-base) var(--ease-out)}.record-button:hover{background:var(--surface-hover);border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.record-button:hover:before{background:var(--surface-hover);opacity:.5}.record-button.recording{background:var(--error);border-color:var(--error);color:#fff;box-shadow:0 0 0 4px #ef444426}.record-button.recording:hover{background:#dc2626;border-color:#dc2626;transform:translateY(-2px);box-shadow:0 4px 12px #ef444440,0 0 0 4px #ef444426}.record-button:active{transform:scale(.95) translateY(0)}.record-button svg{width:20px;height:20px;transition:transform var(--transition-base) var(--ease-spring)}.record-button:hover svg{transform:scale(1.1)}.record-button.recording svg{animation:recordingIconPulse 1s ease-in-out infinite}@keyframes recordingIconPulse{0%,to{transform:scale(1)}50%{transform:scale(.9)}}.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:52px;height:52px}}@media (prefers-reduced-motion: reduce){.message,.recording-pulse{animation:none}.record-button.recording svg{animation:none}}.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}.fade-in-element{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}.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);transition:all var(--transition-base) var(--ease-out)}.video-wrapper:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md)}.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:.25;transition:opacity var(--transition-base) var(--ease-out)}.video-placeholder:hover svg{opacity:.4}.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%;transition:all var(--transition-base) var(--ease-out);animation:translationSlideIn .4s var(--ease-out) forwards}@keyframes translationSlideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.translation-display:hover{border-color:var(--border-hover);box-shadow:var(--shadow-sm)}.translation-content{font-size:.9375rem;line-height:1.7;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:56px;height:56px;border-radius:50%;border:none;background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base) var(--ease-out);position:relative}.stream-button:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;background:transparent;transition:all var(--transition-base) var(--ease-out)}.stream-button:hover{background:var(--surface-hover);border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.stream-button:hover:before{background:var(--surface-hover);opacity:.5}.stream-button.streaming{background:var(--error);border-color:var(--error);color:#fff;box-shadow:0 0 0 4px #ef444426}.stream-button.streaming:hover{background:#dc2626;border-color:#dc2626;transform:translateY(-2px);box-shadow:0 4px 12px #ef444440,0 0 0 4px #ef444426}.stream-button:active{transform:scale(.95) translateY(0)}.stream-button svg{width:20px;height:20px;transition:transform var(--transition-base) var(--ease-spring)}.stream-button:hover svg{transform:scale(1.1)}.stream-button.streaming svg{animation:streamingIconPulse 1s ease-in-out infinite}@keyframes streamingIconPulse{0%,to{transform:scale(1)}50%{transform:scale(.9)}}.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:52px;height:52px}}@media (prefers-reduced-motion: reduce){.translation-display{animation:none}.stream-button.streaming svg{animation:none}}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--background)}.app-header{border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);background:#ffffffb8}[data-theme=dark] .app-header{background:#0a0a0ab8}.header-content{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between}.app-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:.625rem;letter-spacing:-.02em;transition:opacity var(--transition-fast) var(--ease-out)}.app-title:hover{opacity:.7}.title-icon{font-size:1.75rem;display:flex;align-items:center}.title-icon-img{width:1.5em;height:1.5em;vertical-align:middle;transition:transform var(--transition-base) var(--ease-spring)}.app-title:hover .title-icon-img{transform:rotate(-8deg) scale(1.05)}.header-actions{display:flex;align-items:center;gap:.75rem}.theme-toggle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--text-secondary);border:1px solid transparent;cursor:pointer;transition:all var(--transition-base) var(--ease-out);position:relative;overflow:hidden}.theme-toggle:hover{background:var(--surface-hover);color:var(--text-primary);border-color:var(--border)}.theme-toggle:active{transform:scale(.92)}.theme-toggle svg{width:18px;height:18px;transition:transform var(--transition-base) var(--ease-spring)}.theme-toggle:hover svg{transform:rotate(15deg)}.nav-tabs{display:flex;gap:.5rem;align-items:center;background:var(--background-secondary);padding:4px;border-radius:var(--radius-lg);border:1px solid var(--border)}.mode-button{padding:.5rem 1rem;font-size:.875rem;font-weight:500;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius);transition:all var(--transition-base) var(--ease-out);position:relative}.mode-button:hover{color:var(--text-primary);background:var(--surface-hover)}.mode-button.active{color:var(--text-primary);background:var(--surface);box-shadow:var(--shadow-sm)}[data-theme=dark] .mode-button.active{background:var(--surface-hover)}.mode-separator{display:none}.app-main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem}.hero-section{margin-bottom:4rem;background:linear-gradient(180deg,rgba(99,102,241,.04) 0%,rgba(139,92,246,.02) 50%,transparent 100%);border-radius:var(--radius-xl);margin-left:-1rem;margin-right:-1rem;padding:4rem 1rem 2rem}[data-theme=dark] .hero-section{background:transparent}.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.hero-text{max-width:550px}.hero-title{font-size:3.5rem;font-weight:700;line-height:1.08;margin-bottom:1.5rem;color:var(--text-primary);letter-spacing:-.04em;background:linear-gradient(180deg,#1a1a2e,#4a4a6a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}[data-theme=dark] .hero-title{background:linear-gradient(180deg,var(--text-primary) 0%,var(--text-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.125rem;line-height:1.7;color:#5a5a7a;font-weight:400}[data-theme=dark] .hero-subtitle{color:var(--text-secondary)}.hero-visual{display:flex;justify-content:center;align-items:center;min-height:350px;position:relative}.gradient-orb{width:320px;height:320px;background:radial-gradient(circle at 30% 40%,rgba(99,102,241,.25) 0%,rgba(139,92,246,.18) 25%,rgba(167,139,250,.22) 50%,transparent 70%);border-radius:50%;animation:orbFloat 12s ease-in-out infinite,orbPulse 6s ease-in-out infinite;position:relative;filter:blur(0px)}.gradient-orb:before{content:"";position:absolute;top:30px;right:30px;bottom:30px;left:30px;background:radial-gradient(circle at 60% 50%,rgba(59,130,246,.28) 0%,rgba(99,102,241,.22) 40%,transparent 70%);border-radius:50%;animation:orbFloat 8s ease-in-out infinite reverse}.gradient-orb:after{content:"";position:absolute;top:60px;right:60px;bottom:60px;left:60px;background:radial-gradient(circle at 40% 60%,rgba(139,92,246,.3) 0%,rgba(167,139,250,.2) 50%,transparent 70%);border-radius:50%;animation:orbFloat 10s ease-in-out infinite}[data-theme=dark] .gradient-orb{background:radial-gradient(circle at 30% 40%,rgba(99,102,241,.2) 0%,rgba(139,92,246,.15) 25%,rgba(167,139,250,.2) 50%,transparent 70%)}[data-theme=dark] .gradient-orb:before{background:radial-gradient(circle at 60% 50%,rgba(59,130,246,.25) 0%,rgba(99,102,241,.2) 40%,transparent 70%)}[data-theme=dark] .gradient-orb:after{background:radial-gradient(circle at 40% 60%,rgba(139,92,246,.25) 0%,rgba(167,139,250,.15) 50%,transparent 70%)}@keyframes orbFloat{0%,to{transform:translateY(0) translate(0) rotate(0)}33%{transform:translateY(-12px) translate(8px) rotate(2deg)}66%{transform:translateY(8px) translate(-6px) rotate(-2deg)}}@keyframes orbPulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:.9;transform:scale(1.03)}}.app-footer{border-top:1px solid var(--border);padding:1.5rem 2rem;text-align:center;color:var(--text-muted);font-size:.8125rem;background:var(--background-secondary)}.fade-in-element{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}.fade-in-element.visible{opacity:1;transform:translateY(0)}.fade-in-delay-1{transition-delay:.12s}.fade-in-delay-2{transition-delay:.24s}.fade-in-delay-3{transition-delay:.36s}@media (max-width: 768px){.header-content{flex-direction:column;gap:1rem;padding:.875rem 1rem}.header-row{width:100%;display:flex;justify-content:space-between;align-items:center}.app-title{font-size:1.125rem}.nav-tabs{width:100%;justify-content:center}.mode-button{font-size:.8125rem;padding:.5rem .875rem}.theme-toggle{width:32px;height:32px}.theme-toggle svg{width:16px;height:16px}.app-main{padding:1rem}.hero-section{padding:2rem 1rem 1rem;margin-bottom:2rem;margin-left:-.5rem;margin-right:-.5rem}.hero-content{grid-template-columns:1fr;gap:2rem}.hero-title{font-size:2.25rem}.hero-subtitle{font-size:1rem}.gradient-orb{width:220px;height:220px}}@media (prefers-reduced-motion: reduce){.fade-in-element{transition:opacity .3s ease;transform:none}.gradient-orb,.gradient-orb:before,.gradient-orb:after{animation:none}}*{margin:0;padding:0;box-sizing:border-box}:root{--background: #ffffff;--background-secondary: #fafafa;--surface: #ffffff;--surface-hover: #f7f7f7;--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, .07), 0 2px 4px -1px rgba(0, 0, 0, .04);--shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .03);--shadow-glow: 0 0 40px rgba(0, 0, 0, .06);--radius: 8px;--radius-lg: 12px;--radius-xl: 16px;--transition-fast: .15s;--transition-base: .2s;--transition-slow: .3s;--ease-out: cubic-bezier(.25, .46, .45, .94);--ease-spring: cubic-bezier(.34, 1.56, .64, 1)}[data-theme=dark]{--background: #0a0a0a;--background-secondary: #111111;--surface: #141414;--surface-hover: #1c1c1c;--border: #262626;--border-hover: #3a3a3a;--text-primary: #ededed;--text-secondary: #a1a1a1;--text-muted: #666666;--text-inverse: #000000;--primary: #ffffff;--primary-hover: #e5e5e5;--accent: #3291ff;--accent-hover: #0070f3;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, .5), 0 4px 6px -2px rgba(0, 0, 0, .3);--shadow-glow: 0 0 60px rgba(255, 255, 255, .03)}@media (prefers-color-scheme: dark){:root:not([data-theme]){--background: #0a0a0a;--background-secondary: #111111;--surface: #141414;--surface-hover: #1c1c1c;--border: #262626;--border-hover: #3a3a3a;--text-primary: #ededed;--text-secondary: #a1a1a1;--text-muted: #666666;--text-inverse: #000000;--primary: #ffffff;--primary-hover: #e5e5e5;--accent: #3291ff;--accent-hover: #0070f3;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, .5), 0 4px 6px -2px rgba(0, 0, 0, .3);--shadow-glow: 0 0 60px rgba(255, 255, 255, .03)}}html{scroll-behavior:smooth}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;transition:background-color var(--transition-slow) var(--ease-out),color var(--transition-slow) var(--ease-out)}code{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace}#root{min-height:100vh}::selection{background:var(--accent);color:#fff}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}*,*:before,*:after{transition-property:background-color,border-color,box-shadow;transition-duration:var(--transition-slow);transition-timing-function:var(--ease-out)}button{font-family:inherit;cursor:pointer;border:none;background:none;transition:all var(--transition-base) var(--ease-out)}button:active{transform:scale(.97)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}