*{box-sizing:border-box;padding:0;margin:0}:root{--primary:#0f3467;--primary-light:#1e5ba8;--accent:#2ed1e9;--accent-light:#7dd3fc;--background:#fff;--background-alt:#f8fafc;--background-gradient:linear-gradient(135deg,#f0f9ff,#e0f2fe 50%,#fff);--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--border:#e2e8f0;--border-hover:#cbd5e1;--success:#10b981;--error:#ef4444;--warning:#f59e0b;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);--spacing-xs:0.5rem;--spacing-sm:0.75rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--radius-sm:0.5rem;--radius-md:0.75rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-2xl:2rem;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:250ms cubic-bezier(0.4,0,0.2,1);--transition-slow:350ms cubic-bezier(0.4,0,0.2,1)}body,html{max-width:100vw;overflow-x:hidden;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-gradient);min-height:100vh;margin:0;padding:0;color:var(--text-primary);line-height:1.6}.container{max-width:100%;margin:0;background:var(--background);padding:0;animation:fadeIn .6s ease-out}.container.obs-mode{max-width:100%;padding:0;border-radius:0;box-shadow:none;background:transparent}.hero-section{background:linear-gradient(135deg,#e0f2fe 0,#bae6fd 30%,#7dd3fc 60%,var(--accent) 100%);color:var(--text-primary);padding:var(--spacing-3xl) var(--spacing-lg);text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-xl)}.hero-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,hsla(0,0%,100%,.4) 0,transparent 50%),radial-gradient(circle at 80% 70%,rgba(46,209,233,.3) 0,transparent 50%),radial-gradient(circle at 50% 50%,hsla(0,0%,100%,.2) 0,transparent 70%);opacity:1;animation:heroPulse 8s ease-in-out infinite}@keyframes heroPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.hero-content{position:relative;z-index:1;max-width:1200px;margin:0 auto}.hero-logo-wrapper{display:inline-block;margin-bottom:var(--spacing-2xl);padding:var(--spacing-xl);background:hsla(0,0%,100%,.9);border-radius:var(--radius-2xl);border:3px solid rgba(46,209,233,.3);box-shadow:0 20px 60px rgba(15,52,103,.15),0 0 40px rgba(46,209,233,.2),inset 0 0 30px hsla(0,0%,100%,.5);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:relative;overflow:hidden;transition:transform var(--transition-base)}.hero-logo-wrapper:hover{transform:scale(1.05)}.hero-logo-wrapper:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(46,209,233,.3) 50%,transparent 70%);animation:shine 4s infinite}@keyframes shine{0%{transform:translateX(-100%) translateY(-100%) rotate(45deg)}to{transform:translateX(100%) translateY(100%) rotate(45deg)}}.hero-logo{max-width:320px;max-height:160px;height:auto;width:auto;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 4px 12px rgba(15,52,103,.2)) drop-shadow(0 0 30px rgba(46,209,233,.3)) brightness(1.05) contrast(1.1) saturate(1.05)}.hero-title{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:900;margin-bottom:var(--spacing-lg);line-height:1.1;background:linear-gradient(135deg,var(--primary) 0,var(--primary-light) 50%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 100%;animation:titleGradient 4s ease infinite;letter-spacing:-2px;filter:drop-shadow(0 2px 4px rgba(15,52,103,.1))}@keyframes titleGradient{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.hero-subtitle{font-size:clamp(1.25rem,2.5vw,1.875rem);margin-bottom:var(--spacing-xl);color:var(--primary);font-weight:700;letter-spacing:.5px}.hero-description,.hero-subtitle{text-shadow:0 2px 8px hsla(0,0%,100%,.8)}.hero-description{font-size:clamp(1rem,1.5vw,1.25rem);max-width:800px;margin:0 auto var(--spacing-3xl);line-height:1.8;color:var(--text-secondary);font-weight:500}.features-section{padding:var(--spacing-3xl) var(--spacing-lg);background:var(--background-alt);max-width:1400px;margin:0 auto;position:relative}.section-title{text-align:center;font-size:clamp(2rem,4vw,3rem);font-weight:800;background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-md);letter-spacing:-1px}.section-subtitle{text-align:center;font-size:clamp(1rem,1.5vw,1.25rem);color:var(--text-secondary);margin-bottom:var(--spacing-3xl);max-width:700px;margin-left:auto;margin-right:auto;font-weight:500;line-height:1.7}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));grid-gap:var(--spacing-xl);gap:var(--spacing-xl);margin-bottom:var(--spacing-3xl)}.feature-card{background:var(--background);border:2px solid var(--border);border-radius:var(--radius-xl);padding:var(--spacing-2xl) var(--spacing-xl);text-align:center;transition:all var(--transition-base);position:relative;overflow:hidden;box-shadow:var(--shadow-md)}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary));background-size:200% 100%;transform:scaleX(0);transition:transform var(--transition-base);animation:gradientShift 3s ease infinite}.feature-card:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(46,209,233,.1) 0,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);transition:width var(--transition-slow),height var(--transition-slow)}.feature-card:hover{border-color:var(--accent);transform:translateY(-8px);box-shadow:var(--shadow-2xl);background:linear-gradient(135deg,var(--background) 0,#f0f9ff 100%)}.feature-card:hover:before{transform:scaleX(1)}.feature-card:hover:after{width:300px;height:300px}@keyframes gradientShift{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.feature-icon{font-size:4rem;margin-bottom:var(--spacing-lg);display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));transition:transform var(--transition-base);animation:iconFloat 4s ease-in-out infinite}.feature-card:hover .feature-icon{transform:scale(1.15) rotate(5deg)}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.feature-title{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-md);letter-spacing:-.3px}.feature-description{font-size:1rem;color:var(--text-secondary);line-height:1.7;font-weight:400}.use-cases-section{padding:var(--spacing-3xl) var(--spacing-lg);background:linear-gradient(180deg,var(--background-alt) 0,#fff 100%);max-width:1400px;margin:0 auto;position:relative}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));grid-gap:var(--spacing-xl);gap:var(--spacing-xl);margin-bottom:var(--spacing-3xl)}.use-case-card{background:var(--background);border:2px solid var(--border);border-radius:var(--radius-xl);padding:var(--spacing-2xl) var(--spacing-xl);text-align:center;transition:all var(--transition-base);position:relative;overflow:hidden;box-shadow:var(--shadow-md)}.use-case-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--primary),var(--accent));background-size:200% 100%;transform:scaleX(0);transition:transform var(--transition-base);animation:gradientShift 3s ease infinite}.use-case-card:hover{border-color:var(--accent);transform:translateY(-8px);box-shadow:var(--shadow-2xl);background:linear-gradient(135deg,var(--background) 0,#f0f9ff 100%)}.use-case-card:hover:before{transform:scaleX(1)}.use-case-icon{font-size:3.5rem;margin-bottom:var(--spacing-lg);display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));transition:transform var(--transition-base);animation:iconFloat 4s ease-in-out infinite}.use-case-card:hover .use-case-icon{transform:scale(1.15) rotate(5deg)}.use-case-title{font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-md);letter-spacing:-.3px}.use-case-description{font-size:.95rem;color:var(--text-secondary);line-height:1.7;font-weight:400}.demo-section{padding:var(--spacing-3xl) var(--spacing-lg);background:var(--background-gradient);position:relative}.demo-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(46,209,233,.08) 0,transparent 50%),radial-gradient(circle at 80% 50%,rgba(15,52,103,.08) 0,transparent 50%);pointer-events:none}.demo-container{max-width:1200px;margin:0 auto;background:var(--background);border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);padding:var(--spacing-3xl);border:1px solid var(--border);position:relative;overflow:hidden}.demo-container:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary));background-size:200% 100%;animation:gradientShift 3s ease infinite}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.header{text-align:center;margin-bottom:var(--spacing-2xl)}.header h1{font-size:clamp(1.75rem,3vw,2.5rem);color:var(--primary);margin-bottom:var(--spacing-sm);font-weight:800;background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-secondary);font-size:1rem;font-weight:500}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:var(--spacing-lg);gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.control-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.control-group label{font-weight:700;color:var(--primary);font-size:.95rem;margin-bottom:var(--spacing-xs);display:block}.control-group select{padding:var(--spacing-md) var(--spacing-lg);border:2px solid var(--border);border-radius:var(--radius-lg);font-size:1rem;background:var(--background);cursor:pointer;transition:all var(--transition-base);font-weight:500;color:var(--text-primary)}.control-group select:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}.control-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(46,209,233,.1);background:var(--background)}.control-group select:disabled{background:var(--background-alt);cursor:not-allowed;opacity:.6}.input-section,.output-section{margin-bottom:var(--spacing-xl)}.input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm);flex-wrap:wrap;gap:var(--spacing-md)}.input-section label,.output-section label{font-weight:700;color:var(--primary);font-size:.95rem}.output-header{justify-content:space-between;margin-bottom:var(--spacing-sm)}.obs-controls,.output-header{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-md)}.color-picker-label{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:600;color:var(--text-secondary);font-size:.9rem}.color-picker{width:48px;height:36px;border:2px solid var(--border);border-radius:var(--radius-md);cursor:pointer;background:none;padding:0;transition:all var(--transition-base)}.color-picker:hover{border-color:var(--accent);transform:scale(1.05)}.obs-toggle-button{padding:var(--spacing-sm) var(--spacing-lg);border:2px solid var(--accent);border-radius:var(--radius-lg);background:var(--background);color:var(--primary);font-size:.95rem;font-weight:700;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.obs-toggle-button:hover{background:linear-gradient(135deg,var(--accent) 0,var(--primary) 100%);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--accent)}.voice-controls{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.voice-button{padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-lg);font-size:.95rem;font-weight:700;cursor:pointer;transition:all var(--transition-base);white-space:nowrap;box-shadow:var(--shadow-md)}.record-button{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.record-button:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-xl)}.record-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.stop-button{background:linear-gradient(135deg,#fa709a,#fee140);color:var(--text-primary);animation:pulse 1.5s ease-in-out infinite}.stop-button:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-xl)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.85}}.recording-indicator{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-md);padding:var(--spacing-md);background:#fef2f2;border:2px solid #fecaca;border-radius:var(--radius-lg);color:#dc2626;font-weight:600;font-size:.9rem;flex-wrap:wrap}.voice-time-limit{color:#f59e0b;font-weight:700;margin-left:var(--spacing-sm)}.recording-dot{width:12px;height:12px;background:#ef4444;border-radius:50%;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.interim-transcript{margin-top:var(--spacing-md);padding:var(--spacing-md);background:#eff6ff;border:2px solid #bfdbfe;border-radius:var(--radius-lg);font-size:.95rem;color:#1e40af}.interim-label{font-weight:600;margin-right:var(--spacing-sm)}.interim-text{color:#1e3a8a;font-style:italic}.input-section textarea{width:100%;padding:var(--spacing-lg);border:2px solid var(--border);border-radius:var(--radius-lg);font-size:1.05rem;font-family:inherit;resize:vertical;transition:all var(--transition-base);background:var(--background);color:var(--text-primary);line-height:1.7;font-weight:400;min-height:140px}.input-section textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(46,209,233,.1),var(--shadow-md);background:var(--background);transform:translateY(-2px)}.input-section textarea:disabled{background:var(--background-alt);cursor:not-allowed;opacity:.7}.output-box{min-height:180px;padding:var(--spacing-xl);border:2px solid var(--border);border-radius:var(--radius-lg);background:var(--background);font-size:1.05rem;line-height:1.8;position:relative;transition:all var(--transition-base)}.output-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(46,209,233,.1)}.loading-indicator{display:flex;align-items:center;gap:var(--spacing-md);color:var(--accent);font-weight:600}.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.translated-content{color:var(--text-primary);white-space:pre-wrap;word-wrap:break-word;animation:fadeIn .3s ease-in;font-weight:500;font-size:1.05rem;line-height:1.8}.placeholder{color:var(--text-muted);font-style:italic}.demo-text-display-container{display:flex;gap:var(--spacing-lg);align-items:stretch}.demo-text-column{flex:1 1;display:flex;flex-direction:column;gap:var(--spacing-sm)}.demo-text-label{font-weight:700;color:var(--primary);font-size:.95rem;text-transform:uppercase;letter-spacing:.5px}.demo-text-box{min-height:180px;padding:var(--spacing-lg);border:3px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(135deg,#fff,#f8fbff);font-size:1.15rem;line-height:1.8;position:relative;transition:all .3s ease;color:var(--text-primary);display:flex;align-items:flex-start;word-wrap:break-word;white-space:pre-wrap}.demo-text-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(46,209,233,.15)}.demo-obs-style{background:#00b140;border:none;border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-top:var(--spacing-md)}.demo-obs-style .obs-combined-content{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg);width:100%}.demo-obs-style .obs-text-columns{display:flex;gap:var(--spacing-lg);flex:1 1}.demo-obs-style .obs-text-column{flex:1 1;display:flex;flex-direction:column;gap:var(--spacing-sm)}.demo-obs-style .obs-label{font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;color:hsla(0,0%,100%,.9)}.demo-obs-style .obs-text-display{font-size:1.1rem;line-height:1.6;min-height:60px;display:flex;align-items:center;word-wrap:break-word;white-space:pre-wrap;color:var(--text-color,#fff)}.demo-obs-style .obs-logo-container{display:flex;align-items:center;justify-content:center;flex-shrink:0}.demo-obs-style .obs-logo{max-width:200px;max-height:100px;object-fit:contain}.demo-obs-style .streaming-indicator{display:inline-block;width:12px;height:12px;background:#f44;border-radius:50%;margin-right:8px;animation:pulse 1.5s ease-in-out infinite}.actions{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);flex-wrap:wrap}.primary-button,.secondary-button,.summarize-button{padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:var(--radius-lg);font-size:1rem;font-weight:700;cursor:pointer;transition:all var(--transition-base);flex:1 1;min-width:140px;box-shadow:var(--shadow-md);letter-spacing:.3px}.summarize-button{background:linear-gradient(135deg,var(--accent) 0,var(--primary) 100%);color:#fff}.summarize-button:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-xl);background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%)}.summarize-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.primary-button{background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);color:#fff}.primary-button:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-xl);background:linear-gradient(135deg,var(--accent) 0,var(--primary) 100%)}.primary-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.secondary-button{background:var(--background-alt);color:var(--text-secondary);border:2px solid var(--border)}.secondary-button:hover:not(:disabled){background:var(--background);border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.secondary-button:disabled{opacity:.6;cursor:not-allowed}.error-message{padding:var(--spacing-lg);background:#fef2f2;border:2px solid #fecaca;border-radius:var(--radius-lg);color:#dc2626;margin-bottom:var(--spacing-xl);font-weight:600;animation:shake .5s ease-in-out}.demo-timer{margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-lg);background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:2px solid var(--accent);border-radius:var(--radius-lg);color:var(--primary);font-weight:600;text-align:center;font-size:1rem}.demo-timer strong{color:var(--accent);font-size:1.1rem}.demo-expired-message{margin-top:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background:#fef2f2;border:2px solid #fecaca;border-radius:var(--radius-lg);color:#dc2626;font-weight:600;text-align:center;font-size:1rem;animation:shake .5s ease-in-out}.audience-link-section{margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:2px solid var(--accent);border-radius:var(--radius-lg)}.audience-link-label{display:block;font-weight:700;color:var(--primary);margin-bottom:var(--spacing-sm);font-size:.95rem}.audience-link-container{display:flex;gap:var(--spacing-sm);align-items:center}.audience-link-input{flex:1 1;padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--border);border-radius:var(--radius-md);font-size:.9rem;font-family:monospace;background:var(--background);color:var(--text-primary);cursor:text}.audience-link-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,209,233,.1)}.copy-link-button{padding:var(--spacing-sm) var(--spacing-lg);border:2px solid var(--accent);border-radius:var(--radius-md);background:linear-gradient(135deg,var(--accent) 0,var(--primary) 100%);color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.copy-link-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%)}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}.obs-capture-view{margin-top:var(--spacing-2xl);padding:var(--spacing-xl);background:#1a1a1a;border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:var(--spacing-xl);box-shadow:var(--shadow-2xl)}.obs-capture-view.obs-mode-active{margin-top:0;padding:var(--spacing-md);border-radius:0;min-height:auto;max-height:100vh;background:#0a0a0a;flex-direction:row;gap:var(--spacing-md);align-items:stretch;flex-wrap:wrap;overflow:hidden}@media (max-width:768px){.obs-capture-view.obs-mode-active{padding:var(--spacing-sm);gap:var(--spacing-sm);flex-direction:column}.obs-capture-view.obs-mode-active>.obs-box:not(.obs-summary-box){min-width:auto;width:100%}.obs-box{max-height:50vh}}@media (max-width:480px){.obs-capture-view.obs-mode-active{padding:var(--spacing-xs);gap:var(--spacing-xs)}.obs-box{max-height:40vh;padding:var(--spacing-sm)}}.obs-capture-view.obs-mode-active>.obs-box:not(.obs-summary-box){flex:1 1;min-width:300px}.obs-capture-view.obs-mode-active>.obs-summary-box{flex:1 1 100%;width:100%}.obs-combined-box{width:100%;min-height:150px;max-height:200px;padding:var(--spacing-lg)}@media (max-width:768px){.obs-combined-box{min-height:120px;max-height:180px;padding:var(--spacing-md)}.obs-combined-content{flex-direction:column;gap:var(--spacing-md);align-items:stretch}.obs-text-columns{flex-direction:row;gap:var(--spacing-sm);overflow-x:auto}.obs-text-column{min-width:200px;flex:1 1}.obs-logo-container{min-width:auto;width:100%;justify-content:center;padding-top:var(--spacing-sm);border-top:1px solid hsla(0,0%,100%,.2)}.obs-logo{max-width:180px;max-height:90px}.obs-label{font-size:.75rem}.obs-text-display{font-size:1rem;line-height:1.4}.obs-controls-bar{flex-direction:column;align-items:stretch}.obs-controls-left,.obs-controls-right{width:100%;justify-content:center}.obs-control-button{font-size:.85rem;padding:var(--spacing-xs) var(--spacing-sm)}.obs-capture-view.obs-mode-active{padding:var(--spacing-sm);gap:var(--spacing-sm);flex-direction:column}.obs-capture-view.obs-mode-active>.obs-box:not(.obs-summary-box){min-width:auto;width:100%}.obs-box{max-height:50vh}.obs-controls-bar{padding:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.obs-select{font-size:.85rem;padding:6px var(--spacing-sm)}}@media (max-width:480px){.obs-combined-box{min-height:100px;max-height:150px;padding:var(--spacing-sm)}.obs-text-columns{gap:var(--spacing-xs)}.obs-text-column{min-width:150px}.obs-logo{max-width:150px;max-height:75px}.obs-label{font-size:.7rem}.obs-text-display{font-size:.9rem;line-height:1.3}.obs-control-button{font-size:.8rem;padding:6px var(--spacing-sm)}.obs-capture-view.obs-mode-active{padding:var(--spacing-xs);gap:var(--spacing-xs)}.obs-box{max-height:40vh;padding:var(--spacing-sm)}.obs-controls-bar{padding:var(--spacing-xs) var(--spacing-sm)}.obs-select{padding:4px var(--spacing-xs)}.control-group-inline label,.obs-select{font-size:.8rem}}.obs-combined-content{display:flex;justify-content:space-between;align-items:center;height:100%;gap:var(--spacing-xl);width:100%}.obs-text-columns{display:flex;flex-direction:column;gap:var(--spacing-md);flex:1 1;min-width:0}.obs-text-column{display:flex;flex-direction:column;gap:var(--spacing-xs)}.obs-text-display{font-size:1.2rem;line-height:1.5;font-weight:500;white-space:pre-wrap;word-wrap:break-word;text-shadow:0 1px 4px rgba(0,0,0,.5);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.obs-text-display.streaming-text{position:relative}.streaming-indicator{display:inline-block;color:#0f0;animation:streamingPulse 1s ease-in-out infinite;margin-right:4px;font-size:.8em;vertical-align:middle}@keyframes streamingPulse{0%,to{opacity:1}50%{opacity:.3}}.obs-controls-bar{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:hsla(0,0%,100%,.05);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);flex-wrap:wrap;gap:var(--spacing-sm);flex-shrink:0}.obs-controls-left,.obs-controls-right{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.control-group-inline{display:flex;align-items:center;gap:var(--spacing-sm)}.control-group-inline label{color:#fff;font-size:.9rem;font-weight:600}.obs-select{padding:var(--spacing-sm) var(--spacing-md);border:2px solid hsla(0,0%,100%,.2);border-radius:var(--radius-md);background:hsla(0,0%,100%,.1);color:#fff;font-size:.9rem;cursor:pointer;transition:all var(--transition-base)}.obs-select:hover:not(:disabled){border-color:#4ade80;background:hsla(0,0%,100%,.15)}.obs-select:disabled{opacity:.5;cursor:not-allowed}.obs-control-button{padding:var(--spacing-sm) var(--spacing-lg);border:2px solid hsla(0,0%,100%,.2);border-radius:var(--radius-md);background:hsla(0,0%,100%,.1);color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.obs-control-button:hover:not(:disabled){background:hsla(0,0%,100%,.2);border-color:#4ade80;transform:translateY(-2px)}.obs-control-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.obs-control-button.primary-button{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea}.obs-control-button.summarize-button{background:linear-gradient(135deg,#10b981,#059669);border-color:#10b981}.obs-control-button.record-button{background:linear-gradient(135deg,#f093fb,#f5576c);border-color:#f5576c}.obs-control-button.stop-button{background:linear-gradient(135deg,#fa709a,#fee140);border-color:#fee140;animation:pulse 1.5s ease-in-out infinite}.obs-box{background:#00b140;border:2px solid #0f0;border-radius:var(--radius-md);padding:var(--spacing-md);min-height:200px;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(0,255,0,.2);position:relative}.obs-box,.obs-box.obs-scrollable{max-height:60vh;overflow:hidden}.obs-scroll-container{flex:1 1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--spacing-sm);padding-right:var(--spacing-xs);min-height:0}.obs-scroll-container::-webkit-scrollbar{width:12px}.obs-scroll-container::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:6px}.obs-scroll-container::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.4);border-radius:6px}.obs-scroll-container::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.6)}.obs-history-item{padding:var(--spacing-sm);background:rgba(0,0,0,.2);border-radius:var(--radius-sm);border-left:3px solid hsla(0,0%,100%,.3);animation:fadeIn .3s ease-in;word-wrap:break-word}.obs-history-item.current{background:rgba(0,0,0,.3);border-left-color:hsla(0,0%,100%,.7);border-left-width:4px}.obs-box:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4ade80,#22c55e,#4ade80);animation:shimmer 2s ease-in-out infinite}@keyframes shimmer{0%,to{opacity:.5}50%{opacity:1}}.obs-box-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm);border-bottom:1px solid hsla(0,0%,100%,.3);padding-bottom:var(--spacing-xs);flex-shrink:0}.obs-label{font-size:.85rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.3);margin:0}.obs-logo{max-width:250px;max-height:125px;height:auto;width:auto;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)) brightness(1.1) contrast(1.1)}.obs-logo-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:250px}.obs-text-content{font-size:1.2rem;line-height:1.6;font-weight:500;white-space:pre-wrap;word-wrap:break-word;flex:1 1;display:flex;align-items:flex-start;text-shadow:0 1px 4px rgba(0,0,0,.5);animation:fadeIn .3s ease-in}.obs-mode-active .obs-text-content{font-size:1.1rem;line-height:1.5;min-height:auto}.obs-source-box,.obs-summary-box,.obs-translated-box{background:#00b140;width:100%}.obs-summary-box{border-color:#0f0}.summary-box{background:#f0fdf4;border-color:#86efac}.footer{text-align:center;margin-top:var(--spacing-2xl);padding-top:var(--spacing-xl);border-top:1px solid var(--border)}.footer p{color:var(--text-secondary);font-size:.9rem}.footer kbd{background:var(--background-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px;font-family:monospace;font-size:.85rem;box-shadow:var(--shadow-sm)}.footer-section{background:var(--primary);color:#fff;padding:var(--spacing-2xl) var(--spacing-lg);text-align:center}.footer-content p{color:hsla(0,0%,100%,.9);margin:var(--spacing-sm) 0;font-size:.95rem}.history-toggle-button{padding:var(--spacing-sm) var(--spacing-lg);border:2px solid var(--accent);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--accent) 0,var(--primary) 100%);color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.history-toggle-button:hover{background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--accent)}.history-container{margin-top:var(--spacing-md);border:2px solid var(--border);border-radius:var(--radius-lg);background:var(--background);max-height:600px;overflow-y:auto;box-shadow:var(--shadow-md);animation:fadeIn .3s ease-in}.history-container::-webkit-scrollbar{width:12px}.history-container::-webkit-scrollbar-track{background:var(--background-alt);border-radius:6px}.history-container::-webkit-scrollbar-thumb{background:var(--accent);border-radius:6px}.history-container::-webkit-scrollbar-thumb:hover{background:var(--primary)}.history-empty{padding:var(--spacing-3xl) var(--spacing-xl);text-align:center;color:var(--text-muted)}.history-empty p{margin:var(--spacing-sm) 0;font-size:1rem}.history-empty-subtitle{font-size:.9rem!important;color:var(--text-muted)!important}.history-list{display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-lg)}.history-item{padding:var(--spacing-lg);background:linear-gradient(135deg,#f8fafc,#fff);border:2px solid var(--border);border-radius:var(--radius-lg);transition:all var(--transition-base);animation:slideIn .3s ease-out;position:relative;overflow:hidden}.history-item:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--accent) 0,var(--primary) 100%);opacity:0;transition:opacity var(--transition-base)}.history-item:hover{border-color:var(--accent);transform:translateX(4px);box-shadow:var(--shadow-lg)}.history-item:hover:before{opacity:1}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.history-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border)}.history-item-time{font-size:.85rem;color:var(--text-secondary);font-weight:600;font-family:monospace}.history-item-number{font-size:.85rem;color:var(--accent);font-weight:700;background:linear-gradient(135deg,var(--accent) 0,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.history-item-content{display:flex;flex-direction:column;gap:var(--spacing-md)}.history-item-source,.history-item-translated{display:flex;flex-direction:column;gap:var(--spacing-xs)}.history-item-label{font-size:.85rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.5px}.history-item-text{font-size:1rem;line-height:1.7;color:var(--text-primary);padding:var(--spacing-sm) var(--spacing-md);background:var(--background);border-radius:var(--radius-md);border:1px solid var(--border);word-wrap:break-word;white-space:pre-wrap}.history-item-translated .history-item-text{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-color:var(--accent);color:var(--primary);font-weight:500}.queue-status-container{margin-top:var(--spacing-md);padding:var(--spacing-lg);background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #f59e0b;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);animation:fadeIn .3s ease-in}.queue-item{margin-bottom:var(--spacing-md)}.queue-item:last-child{margin-bottom:0}.queue-item.current{padding:var(--spacing-md);background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-left:2px solid var(--accent);border-radius:var(--radius-md);border:2px solid var(--accent);border-left-width:4px}.queue-item.waiting{padding:var(--spacing-md);background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:var(--radius-md);border:2px solid #f59e0b;border-left-width:4px}.queue-label{font-size:.9rem;font-weight:700;color:var(--primary);display:block;margin-bottom:var(--spacing-sm)}.queue-text{font-size:1rem;line-height:1.6;color:var(--text-primary);word-wrap:break-word;display:block;font-weight:500}.queue-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.queue-text-small{font-size:.9rem;line-height:1.5;color:var(--text-secondary);word-wrap:break-word;display:block;padding-left:var(--spacing-sm)}.summary-count{font-size:.85rem;color:var(--text-secondary);font-weight:600;margin-left:var(--spacing-sm)}.periodic-summaries-container{margin-top:var(--spacing-md);border:2px solid var(--border);border-radius:var(--radius-lg);background:var(--background);max-height:600px;overflow-y:auto;box-shadow:var(--shadow-md);animation:fadeIn .3s ease-in;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-lg)}.periodic-summaries-container::-webkit-scrollbar{width:12px}.periodic-summaries-container::-webkit-scrollbar-track{background:var(--background-alt);border-radius:6px}.periodic-summaries-container::-webkit-scrollbar-thumb{background:var(--accent);border-radius:6px}.periodic-summaries-container::-webkit-scrollbar-thumb:hover{background:var(--primary)}.periodic-summary-item{padding:var(--spacing-lg);background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:2px solid #86efac;border-radius:var(--radius-lg);transition:all var(--transition-base);animation:slideIn .3s ease-out;position:relative;overflow:hidden}.periodic-summary-item:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#10b981,#059669);opacity:1}.periodic-summary-item:hover{border-color:#10b981;transform:translateX(4px);box-shadow:var(--shadow-lg)}.periodic-summary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid rgba(16,185,129,.2);flex-wrap:wrap;gap:var(--spacing-sm)}.periodic-summary-time{font-size:.9rem;color:#059669;font-weight:700;font-family:monospace}.periodic-summary-period{font-size:.85rem;color:var(--text-secondary);font-weight:600;font-style:italic}.periodic-summary-content{font-size:1rem;line-height:1.8;color:var(--text-primary);padding:var(--spacing-md);background:var(--background);border-radius:var(--radius-md);border:1px solid rgba(16,185,129,.2);word-wrap:break-word;white-space:pre-wrap;font-weight:500}@media (max-width:768px){.container{padding:0}.hero-section{padding:var(--spacing-2xl) var(--spacing-md)}.hero-logo{max-width:240px;max-height:120px}.features-section{padding:var(--spacing-2xl) var(--spacing-md)}.features-grid{grid-template-columns:1fr;gap:var(--spacing-lg)}.demo-section{padding:var(--spacing-2xl) var(--spacing-md)}.demo-container{padding:var(--spacing-xl) var(--spacing-lg)}.controls{grid-template-columns:1fr}.actions{flex-direction:column}.primary-button,.secondary-button,.summarize-button{width:100%}.obs-capture-view{padding:var(--spacing-md);gap:var(--spacing-md)}.obs-text-content{font-size:1.2rem}.output-header{flex-direction:column;align-items:flex-start}.obs-controls{width:100%;justify-content:space-between}.history-container{max-height:400px}.history-item{padding:var(--spacing-md)}.history-item-text{font-size:.95rem}}@media (max-width:480px){.hero-logo-wrapper{padding:var(--spacing-md)}.hero-logo{max-width:200px;max-height:100px}.demo-container{padding:var(--spacing-lg)}.feature-card{padding:var(--spacing-xl) var(--spacing-lg)}.feature-icon{font-size:3rem}}