@charset "UTF-8";:root{--gray-50: #F9FAFB;--gray-100: #F3F4F6;--gray-200: #E5E7EB;--gray-300: #D1D5DB;--gray-400: #9CA3AF;--gray-500: #6B7280;--gray-600: #4B5563;--gray-700: #374151;--gray-800: #1F2937;--gray-900: #111827;--white: #FFFFFF;--black: #000000;--purple-50: #F5F3FF;--purple-100: #EDE9FE;--purple-200: #DDD6FE;--purple-300: #C4B5FD;--purple-400: #A78BFA;--purple-500: #8B5CF6;--purple-600: #7C3AED;--purple-700: #6D28D9;--purple-800: #5B21B6;--purple-900: #4C1D95}.light{--background: var(--gray-100);--text: var(--gray-800);--border: var(--gray-300);--highlight: var(--white);--track: var(--gray-400);--track-fill: var(--purple-500);--link: var(--purple-600);--button-primary-bg: var(--purple-600);--button-primary-text: var(--white);--button-primary-hover-bg: var(--purple-700);--button-secondary-bg: var(--white);--button-secondary-text: var(--purple-600);--button-secondary-border: var(--purple-500);--button-secondary-hover-bg: var(--purple-50);--button-secondary-active-bg: var(--purple-100);--button-secondary-active-text: var(--purple-700);--button-secondary-active-border: var(--purple-600);--input-active-border: var(--purple-500);--logo-text-color: var(--purple-700);--reveal-checkbox-bg: rgba(255, 255, 255, .8);--reveal-checkbox-text: var(--gray-700);--reveal-checkbox-border: var(--gray-300)}.dark{--background: var(--gray-900);--text: var(--gray-200);--border: var(--gray-700);--highlight: var(--gray-800);--track: var(--gray-600);--track-fill: var(--purple-400);--link: var(--purple-400);--button-primary-bg: var(--purple-500);--button-primary-text: var(--white);--button-primary-hover-bg: var(--purple-400);--button-secondary-bg: var(--gray-800);--button-secondary-text: var(--purple-400);--button-secondary-border: var(--purple-500);--button-secondary-hover-bg: var(--gray-700);--button-secondary-active-bg: var(--gray-700);--button-secondary-active-text: var(--purple-300);--button-secondary-active-border: var(--purple-400);--input-active-border: var(--purple-400);--logo-text-color: var(--purple-400);--reveal-checkbox-bg: rgba(31, 41, 55, .8);--reveal-checkbox-text: var(--gray-200);--reveal-checkbox-border: var(--gray-600)}*{margin:0;padding:0;box-sizing:border-box;font-variant-ligatures:none}:root{font-family:Space Mono,monospace}#root{width:100vw;height:100vh}body{background-color:#374151}h1,h2,h3,h4,h5,h6{font-weight:400;color:var(--text)}li{list-style:none}input,textarea{font-family:Space Mono,monospace;background:var(--highlight);color:var(--text);border:1px solid var(--border);outline:none;font-size:14px;resize:none;-webkit-user-select:text;user-select:text;border-radius:6px;padding:10px 15px}input::placeholder,textarea::placeholder{-webkit-user-select:none;user-select:none;color:var(--gray-400)}textarea{width:100%;margin-bottom:10px}textarea:focus,input:focus{border-color:var(--input-active-border);box-shadow:0 0 0 2px var(--purple-500_30, rgba(139, 92, 246, .3))}.light textarea:focus,.light input:focus{box-shadow:0 0 0 2px #8b5cf633}.dark textarea:focus,.dark input:focus{box-shadow:0 0 0 2px #a78bfa4d}[role=button]{cursor:pointer}button{font-family:Space Mono,monospace;background:none;color:var(--link);border:none;font-size:14px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:5px;padding:4px;border-radius:4px}button:hover:not([disabled]){background-color:var(--button-secondary-hover-bg)}button:focus{outline:none;box-shadow:0 0 0 2px var(--input-active-border)}button[disabled]{opacity:.5;cursor:not-allowed;color:var(--gray-400)!important;background-color:transparent!important}button .icon{display:block}.button{padding:8px 12px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out;border:1px solid transparent}.button.inactive{opacity:.3;pointer-events:none}.icon{font-family:Material Symbols Outlined;font-weight:300;line-height:1}main{max-width:1200px;height:100vh;display:flex;flex-direction:column;margin:0 auto;overflow:hidden;background:var(--background);color:var(--text)}.app-logo{text-align:center;padding:15px 0;font-size:26px;font-weight:700;color:var(--logo-text-color);letter-spacing:.5px;border-bottom:1px solid var(--border);-webkit-user-select:none;user-select:none}.top{display:flex;min-height:50vh;max-height:60vh;border-bottom:1px solid var(--border)}.tools{display:flex;gap:20px;flex:1;overflow:hidden;transition:opacity .2s;min-height:0}.tools.inactive{opacity:.2;pointer-events:none}.collapseButton{border-left:1px solid var(--border);width:20px;display:flex;align-items:center;justify-content:center;color:var(--text)}.collapseButton .icon{font-size:24px}.modeSelector{display:flex;flex-direction:column;gap:15px;overflow:hidden;width:250px;flex-shrink:0}.modeSelector.hide{width:0}.modeSelector>div{padding:15px;display:flex;flex-direction:column;gap:15px}.modeSelector>div:first-child{flex:1;overflow:auto;padding-bottom:0}.modeSelector>div:last-child{border-top:1px solid var(--border);padding-top:15px;justify-content:flex-start}.modeSelector h2{font-size:14px;color:var(--text);white-space:nowrap;margin-bottom:0}.modeList{flex-direction:column;display:flex;gap:8px}.modeList .button{background-color:var(--button-secondary-bg);color:var(--button-secondary-text);border:1px solid var(--button-secondary-border);justify-content:flex-start;gap:12px;white-space:nowrap;width:100%;font-weight:400}.modeList .button:hover:not([disabled]){background-color:var(--button-secondary-hover-bg)}.modeList .button.active{background-color:var(--button-secondary-active-bg);color:var(--button-secondary-active-text);border-color:var(--button-secondary-active-border);font-weight:700}.modeList+textarea{margin-top:15px}.modeSelector>div>h2+textarea{margin-top:0}.modeSelector>div>.modeList+textarea{margin-top:10px}.generateButton{padding:10px 20px;background-color:var(--button-primary-bg);color:var(--button-primary-text);width:100%;border:1px solid var(--button-primary-bg);margin-top:auto}.modeSelector>div:first-child .generateButton{margin-top:10px}.generateButton:hover:not([disabled]){background-color:var(--button-primary-hover-bg);border-color:var(--button-primary-hover-bg)}.generateButton[disabled]{background-color:var(--gray-300)!important;border-color:var(--gray-300)!important;color:var(--gray-500)!important}.dark .generateButton[disabled]{background-color:var(--gray-700)!important;border-color:var(--gray-700)!important;color:var(--gray-500)!important}.backButton{border-top:none!important}.backButton button{font-size:14px;color:var(--link)}.output{flex:1;padding:20px 15px;overflow:auto;position:relative;min-height:0}.output:hover .sentence{opacity:.7}.output time{color:var(--link);padding:2px 5px;border-radius:4px;font-size:inherit;text-decoration:underline;cursor:pointer}.output .sentence{font-size:18px;line-height:1.8;display:inline;cursor:pointer;transition:opacity .2s}.output .sentence:hover{opacity:1}.output .sentence time{margin-right:8px}.output ul{display:flex;flex-direction:column;gap:5px}.output ul button{font-size:15px;display:flex;gap:15px;text-align:left;padding:10px 15px;border-radius:6px;width:100%;color:var(--text);background-color:transparent}.output ul button:hover{background:var(--button-secondary-hover-bg);color:var(--text)}.output ul button time{color:var(--link)}.output ul button p{font-size:14px;color:var(--text)}.modeEmojis .sentence{font-size:40px;margin-right:20px}.modeEmojis .sentence time{top:-8px}.modeTable table{width:100%;border-collapse:collapse}.modeTable th{text-align:left;color:var(--text);font-weight:700}.modeTable th,.modeTable td{padding:10px;border-bottom:1px solid var(--border)}.modeTable td{color:var(--text)}.modeTable tr:hover{background-color:var(--button-secondary-hover-bg)}.modeTable thead tr:hover{background:transparent}.modelSelector{position:relative;margin-bottom:10px}.modelSelector:after{content:"▾";display:block;position:absolute;right:10px;top:50%;transform:translateY(-55%);color:var(--text)}.modelSelector select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--text);background:var(--highlight);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-family:Space Mono,monospace;outline:none}.modelSelector select:focus{border-color:var(--input-active-border)}.loading{color:var(--text)}.loading span{display:inline-block;animation:loading steps(4,jump-none) 777ms infinite;width:0;overflow:hidden;vertical-align:bottom}@keyframes loading{to{width:30px}}.lineChart{width:100%;height:100%}.lineChart path{fill:none;stroke:var(--link);stroke-width:2}.lineChart circle{fill:var(--background);stroke:var(--text);stroke-width:2}.axisLabels text{text-anchor:middle;font-size:12px;fill:var(--text)}.axisTitle{font-size:12px;fill:var(--text)}.dataPoint text{fill:var(--text);font-size:12px;text-anchor:middle}.timeLabels text{cursor:pointer;fill:var(--link);text-decoration:underline}video{max-height:100%;width:100%;height:100%;margin:0 auto;display:block;object-fit:contain}.videoPlayer{flex:1;background:var(--black);display:flex;align-items:stretch;flex-direction:column;justify-content:center;font-size:0;position:relative;-webkit-user-select:none;user-select:none;border-left:1px solid var(--border);min-width:0;overflow:hidden}.videoPlayer:has(.timecodeMarker:hover) .videoCaption{opacity:0}.videoPlayer>.videoWrapper{display:flex;flex:1;align-items:center;justify-content:center;overflow:hidden;position:relative}.segmentationCanvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.emptyVideo{height:100%;color:var(--gray-200);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px;padding:20px}.emptyVideo p{max-width:500px;text-align:center}.emptyVideo:before{font-family:Material Symbols Outlined;content:"movie";font-size:48px;margin-bottom:10px;color:var(--gray-400)}.videoCaption{background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 10px #00000080;position:absolute;bottom:15px;left:50%;transform:translate(-50%);text-align:center;padding:8px 12px;color:var(--white);max-width:calc(100% - 40px);font-size:14px;border-radius:5px;transition:opacity .2s;z-index:10}.videoControls{font-size:12px;position:relative;background:var(--background);color:var(--text);z-index:15}.videoControls:hover .timecodeMarkerTick{scale:1 2.3}.videoScrubber{height:5px;transform-origin:bottom;transition:all .2s;overflow:hidden;padding:5px 0;margin-top:-5px}.videoScrubber input{position:relative;top:-5px;height:5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;background-image:linear-gradient(to right,var(--track-fill) 0%,var(--track-fill) var(--pct),var(--track) var(--pct),var(--track) 100%);cursor:pointer}.videoScrubber input::-webkit-slider-thumb{opacity:0}.videoScrubber input::-moz-range-thumb{opacity:0}.videoTime{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;font-size:14px;border-top:1px solid var(--border)}.videoTime button{font-size:24px;color:var(--link)}.videoTime span{color:var(--text)}.timecodeList{overflow:auto;padding:10px 20px}.timecodeList td{padding:10px 5px}.timecodeList button,.timecodeList button:hover{color:var(--link)}.timecodeMarkers{position:absolute;right:0;bottom:0;left:0;top:-5px;height:5px;pointer-events:none}.timecodeMarker{position:absolute;top:0;width:10px;height:100%;transform:translate(-50%)}.timecodeMarker:hover .timecodeMarkerLabel{opacity:1;visibility:visible}.timecodeMarkerTick{height:100%;pointer-events:auto;cursor:pointer;transform-origin:bottom;transition:all .2s;display:flex;justify-content:center}.timecodeMarkerTick>div{width:3px;height:100%;background:var(--link)}.timecodeMarkerLabel{background:var(--gray-800);color:var(--gray-200);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 2px 5px #0000004d;opacity:0;visibility:hidden;display:flex;flex-direction:column;gap:3px;font-size:11px;transition:opacity .1s,visibility .1s;pointer-events:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);z-index:20;padding:6px 8px;border-radius:4px;width:max-content;max-width:200px}.timecodeMarkerLabel div{color:var(--gray-400)}.timecodeMarkerLabel p{color:var(--gray-100);font-size:12px;font-weight:700}.segmentationLegend{padding:10px;color:var(--text)}.segmentationLegend h3{font-size:14px;margin-bottom:8px}.segmentationLegend ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:5px}.segmentationLegend li{font-size:13px;display:flex;align-items:center;margin-bottom:0;padding:6px 10px;background-color:var(--highlight);border-radius:4px;border:1px solid}.dark .segmentationLegend li{background-color:var(--gray-800)}.light .segmentationLegend li{background-color:var(--gray-50)}.revealOnHoverCheckboxContainer{position:absolute;top:10px;right:10px;z-index:20;background-color:var(--reveal-checkbox-bg);padding:5px 8px;border-radius:4px;display:flex;align-items:center;gap:6px;border:1px solid var(--reveal-checkbox-border);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.revealOnHoverCheckbox{accent-color:var(--purple-500);width:16px;height:16px;cursor:pointer;margin:0}.light .revealOnHoverCheckbox{accent-color:var(--purple-600)}.revealOnHoverLabel{font-size:12px;color:var(--reveal-checkbox-text);-webkit-user-select:none;user-select:none;cursor:pointer;margin:0}
