:root{--white: rgb(255, 255, 255);--black: rgb(0, 0, 0);--light-purple: rgb(205, 130, 240);--purple: rgb(85, 5, 75);--orange: rgb(255, 95, 30);--white-70: rgba(255, 255, 255, .7);--white-50: rgba(255, 255, 255, .5);--white-30: rgba(255, 255, 255, .3);--white-10: rgba(255, 255, 255, .1);--black-70: rgba(0, 0, 0, .7);--black-50: rgba(0, 0, 0, .5);--black-30: rgba(0, 0, 0, .3);--black-10: rgba(0, 0, 0, .1);--light-purple-70: rgba(205, 130, 240, .7);--light-purple-50: rgba(205, 130, 240, .5);--light-purple-30: rgba(205, 130, 240, .3);--light-purple-10: rgba(205, 130, 240, .1);--purple-70: rgba(85, 5, 75, .7);--purple-50: rgba(85, 5, 75, .5);--purple-30: rgba(85, 5, 75, .3);--purple-10: rgba(85, 5, 75, .1);--orange-70: rgba(255, 95, 30, .7);--orange-50: rgba(255, 95, 30, .5);--orange-30: rgba(255, 95, 30, .3);--orange-10: rgba(255, 95, 30, .1);--border-style: solid;--border-width: 2px;--dash-length: 5px;--bg-primary: var(--black);--bg-secondary: var(--black-70);--bg-tertiary: var(--black-50);--text-primary: var(--white);--text-secondary: var(--white-70);--border-color: var(--light-purple-30);--accent-primary: var(--purple);--accent-secondary: var(--light-purple);--accent-hover: var(--light-purple);--message-user-bg: var(--purple);--message-assistant-bg: var(--black-70);--input-bg: var(--black-30);--input-border: var(--light-purple-30);--input-focus: var(--light-purple)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Söhne,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);padding:0;margin:0;min-height:100vh}.app-layout{display:flex;flex-direction:column;height:100vh;overflow:hidden}.top-nav{position:relative;display:flex;align-items:center;justify-content:space-between;background-color:var(--bg-secondary);border-bottom:var(--border-width) var(--border-style) var(--border-color);padding:24px}.nav-left{display:flex;align-items:baseline;gap:12px;z-index:1}.nav-center{position:absolute;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px}.nav-title{font-size:22px;font-weight:600;color:var(--text-primary)}.nav-subtitle{font-size:16px;color:var(--text-secondary);text-align:center}.nav-logo-img{height:24px;width:auto}.nav-logo-link{font-size:28px;font-weight:600;color:var(--text-primary);text-decoration:none;transition:color .2s ease;display:inline-block;line-height:1}.nav-logo-link:hover{color:var(--light-purple)}.model-status{font-size:18px;font-weight:500;color:var(--text-secondary)}.loading-progress{width:100%;max-width:300px;margin:8px 0}.progress-bar{width:100%;height:6px;background:var(--white-10);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--light-purple),var(--orange));border-radius:3px;transition:width .3s ease}.progress-text{font-size:12px;color:var(--text-secondary);margin-top:4px;text-align:center}.model-input-wrapper{display:flex;align-items:center;gap:8px;width:100%}.model-input{flex:1;padding:6px 12px;background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:6px;font-size:13px;color:var(--text-primary);font-family:inherit;min-width:0}select.model-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}select.model-input option{background-color:var(--bg-primary);color:var(--text-primary)}.model-input:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px var(--light-purple-10)}.model-input:disabled{opacity:.6;cursor:not-allowed}.cache-info{font-size:12px;color:var(--text-secondary);white-space:nowrap}.container{flex:1;background-color:var(--bg-primary);display:flex;flex-direction:column;overflow:hidden;min-height:0}.mode-container{display:none;flex-direction:column;height:100%;overflow:hidden}.mode-container.active{display:flex}#live-caption-mode.active{display:flex;flex-direction:column;width:100%;height:100%;padding:32px;gap:24px;background-color:var(--bg-primary)}.live-caption-content{flex:1;display:flex;gap:24px;min-height:0}.live-caption-video-section{flex:2;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0}.is-safari .live-caption-video-container{aspect-ratio:auto;width:100%}.live-caption-video-container{position:relative;aspect-ratio:1;height:100%;max-height:calc(100vh - 220px);border:2px solid var(--light-purple-30);border-radius:12px;background-color:var(--black-50);overflow:hidden;display:flex;align-items:center;justify-content:center}#live-caption-video{width:100%;height:100%;object-fit:contain;background-color:var(--black);transform:scaleX(-1)}.capture-overlay{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding:10px 12px;background:#0009;backdrop-filter:blur(8px);border-radius:8px;z-index:10;min-width:100px}.capture-overlay .control-btn{padding:8px 16px;font-size:14px;width:100%}.capture-overlay .control-select{padding:6px 24px 6px 10px;font-size:14px;background-position:right 6px center}.overlay-field{display:flex;align-items:center;gap:8px}.overlay-label{font-size:14px;color:var(--white-70);white-space:nowrap}.capture-status{display:flex;align-items:center;justify-content:center;gap:6px}.capture-overlay .status-text{font-size:14px;color:var(--white-70)}.controls-bar{display:flex;flex-direction:column;gap:10px;padding:12px 16px;background-color:var(--black-50);border:1px solid var(--light-purple-30);border-radius:12px}.controls-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.controls-row.status-row{gap:12px}.control-group{display:flex;align-items:center;gap:8px}.control-label{font-size:13px;color:var(--text-secondary);white-space:nowrap}.control-btn{padding:8px 16px;background-color:var(--light-purple-30);border:1px solid var(--light-purple-50);border-radius:6px;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.control-btn:hover:not(:disabled){background-color:var(--light-purple-50);border-color:var(--light-purple)}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.primary{background:linear-gradient(135deg,var(--purple) 0%,var(--light-purple) 100%);border:none;color:#fff;padding:8px 20px}.control-btn.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px var(--purple-50)}.control-btn.primary.stop{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-70) 100%)}.control-btn.small{padding:6px 12px;font-size:12px}.control-select{padding:8px 28px 8px 12px;background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:6px;color:var(--text-primary);font-size:13px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.control-select:focus{outline:none;border-color:var(--input-focus)}.control-select option{background-color:var(--bg-primary);color:var(--text-primary)}.control-select.model-select{min-width:140px}.status-text{font-size:13px;color:var(--text-secondary);min-width:40px}.progress-bar-row{flex:1;max-width:200px;height:4px;background:var(--white-10);border-radius:2px;overflow:hidden}.progress-bar-row .progress-fill{height:100%;background:linear-gradient(90deg,var(--light-purple),var(--orange));border-radius:2px;transition:width .3s ease}.progress-bar-row.indeterminate .progress-fill{width:30%!important;animation:indeterminate 1.5s ease-in-out infinite}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}.status-indicator{width:10px;height:10px;border-radius:50%;background-color:var(--text-secondary)}.status-indicator.active{background-color:var(--light-purple);box-shadow:0 0 8px var(--light-purple);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.live-caption-text-section{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0;padding:20px;background-color:var(--black-50);border:1px solid var(--light-purple-30);border-radius:12px}.caption-section-title{font-size:22px;font-weight:600;color:var(--text-primary);padding-bottom:12px;border-bottom:1px solid var(--light-purple-30)}.latest-caption{font-size:20px;font-weight:500;color:var(--white);line-height:1.4;padding:12px;background-color:var(--black-30);border-radius:8px;border-left:3px solid var(--light-purple)}.caption-history{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto}.caption-history-item{display:flex;gap:12px;padding:12px 16px;background-color:var(--black-30);border-radius:8px;border:1px solid var(--light-purple-30);border-left:3px solid transparent;transition:opacity .3s ease,border-color .3s ease}.caption-history-item.latest{border-left-color:var(--light-purple);background-color:var(--black-50)}.caption-timestamp{font-size:11px;color:var(--text-secondary);flex-shrink:0;font-family:JetBrains Mono,monospace;opacity:.7}.caption-text{font-size:14px;color:var(--text-primary);line-height:1.4}@media (max-width: 1024px){.live-caption-content{flex-direction:column}.live-caption-video-section,.live-caption-text-section{flex:none;width:100%}.live-caption-text-section{max-height:300px}}@media (max-width: 768px){.top-nav{flex-direction:column;align-items:flex-start;gap:16px;padding:12px 16px}.nav-left,.nav-center{width:100%}.nav-center{position:static;transform:none;align-items:flex-start}.nav-subtitle{text-align:left;font-size:14px}.model-status{max-width:100%}.model-input-wrapper{width:100%}#live-caption-mode.active{padding:16px;gap:16px}.live-caption-video-container{min-height:200px}.live-caption-text-section{padding:16px}.latest-caption{font-size:20px;padding:12px}.controls-bar{padding:12px}.controls-row{flex-direction:column;align-items:stretch;gap:12px}.control-group{flex-wrap:wrap;width:100%}.control-group.model-group{flex-direction:column;align-items:stretch;gap:10px}.control-group.model-group .control-label{margin-bottom:4px}.control-group.model-group .control-select{width:100%;min-width:auto}.control-group.model-group .control-btn{width:100%;padding:12px 16px}.control-group.cache-group{flex-direction:row;justify-content:space-between;align-items:center}.app-layout,.container{overflow-y:auto;overflow-x:hidden}#live-caption-mode.active{overflow-y:auto;min-height:auto;height:auto}.live-caption-content{min-height:auto}.live-caption-video-section{flex-shrink:0}}.mode-container{transition:opacity .2s ease}.caption-history::-webkit-scrollbar{width:6px}.caption-history::-webkit-scrollbar-track{background:var(--black-30)}.caption-history::-webkit-scrollbar-thumb{background:var(--light-purple-50);border-radius:3px}.caption-history::-webkit-scrollbar-thumb:hover{background:var(--light-purple)}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.loading{background:linear-gradient(90deg,var(--bg-tertiary) 0%,var(--bg-secondary) 50%,var(--bg-tertiary) 100%);background-size:1000px 100%;animation:shimmer 2s infinite}button:focus-visible,input:focus-visible{outline:2px solid var(--light-purple);outline-offset:2px}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}@media (prefers-contrast: high){button:not(:disabled){border:2px solid var(--light-purple)}}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--black);z-index:10000;display:flex;align-items:center;justify-content:center;overflow-y:auto;overflow-x:hidden}.loading-screen.hidden{display:none}.loading-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.loading-vignette{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,transparent 0%,rgba(0,0,0,.7) 100%);z-index:2}.loading-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;max-width:800px;width:100%;text-align:center;color:var(--white);margin:auto}.loading-header{margin-bottom:2rem}.loading-logo{height:60px;width:auto;margin-bottom:1rem}.loading-title-section{margin-bottom:2rem}.loading-title{font-size:2.5rem;font-weight:700;color:var(--white);margin:0 0 .5rem;text-shadow:0 2px 8px rgba(0,0,0,.5)}.loading-subtitle{font-size:1.25rem;color:var(--white-70);margin:0;font-weight:400}.loading-description{margin-bottom:3rem;max-width:600px}.loading-description p{font-size:1rem;color:var(--white-70);line-height:1.6;margin:0 0 1rem}.loading-description p:last-child{margin-bottom:0}.loading-action-section{margin-bottom:2rem}.loading-explore-button{padding:16px 48px;background:linear-gradient(135deg,var(--purple) 0%,var(--light-purple) 100%);color:var(--white);border:none;border-radius:12px;font-size:1.125rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px var(--purple-50);display:inline-flex;align-items:center;gap:12px;min-width:200px;justify-content:center}.loading-explore-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px var(--purple-70);background:linear-gradient(135deg,var(--light-purple) 0%,var(--purple) 100%)}.loading-explore-button:active:not(:disabled){transform:translateY(0)}.loading-explore-button:disabled{opacity:.7;cursor:not-allowed}.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid var(--white-30);border-top-color:var(--white);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-progress-text{font-size:.875rem;color:var(--white-70);font-weight:500}.loading-error{margin-top:2rem;padding:1.5rem;background-color:var(--black-70);border:1px solid var(--orange-50);border-radius:8px;max-width:500px}.loading-error p{color:var(--orange);margin:0 0 1rem;font-size:.95rem}.loading-retry-button{padding:10px 24px;background-color:var(--orange);color:var(--white);border:none;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease}.loading-retry-button:hover{background-color:var(--orange-70);transform:translateY(-1px)}.hidden{display:none!important}@media (max-width: 768px){.loading-screen{align-items:flex-start}.loading-content{padding:3rem 1.5rem 2rem;min-height:100%;justify-content:flex-start}.loading-title{font-size:1.75rem}.loading-subtitle{font-size:1rem}.loading-description p{font-size:.9rem}.loading-explore-button{padding:14px 36px;font-size:1rem;min-width:180px}}.mobile-warning{margin-bottom:1.5rem;padding:1rem 1.5rem;background-color:#ff5f1e26;border:1px solid var(--orange-50);border-radius:8px;max-width:400px}.mobile-warning-title{color:var(--orange);font-weight:600;font-size:1rem;margin-bottom:.5rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}.mobile-warning-title svg{flex-shrink:0}.mobile-warning p{color:var(--white-70);font-size:.85rem;line-height:1.5;margin:0 0 .5rem;text-align:center}.mobile-warning p:last-child{margin-bottom:0}.safari-warning{margin-bottom:1.5rem;padding:1rem 1.5rem;background-color:#cd82f026;border:1px solid var(--light-purple-50);border-radius:8px;max-width:500px}.safari-warning-title{color:var(--light-purple);font-weight:600;font-size:1rem;margin-bottom:.5rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}.safari-warning-title svg{flex-shrink:0}.safari-warning p{color:var(--white-70);font-size:.85rem;line-height:1.5;margin:0 0 .5rem;text-align:center}.safari-warning p:last-child{margin-bottom:0}.safari-warning a{color:var(--light-purple);text-decoration:underline}.safari-warning a:hover{color:var(--white)}