.frame-extract-app{--frame-bg: #0f0f0f;--frame-bg2: #1a1a1a;--frame-bg3: #242424;--frame-bg-hover: #2a2a2a;--frame-border: #333333;--frame-border-subtle: #2a2a2a;--frame-text: #f5f5f5;--frame-text2: #a0a0a0;--frame-text-muted: #666666;--frame-accent: #ffffff;--frame-accent-dim: rgba(255, 255, 255, .1);--frame-marker: #f59e0b;--frame-marker-hover: #fbbf24;--frame-success: #4ade80;--frame-danger: #ef4444;--frame-radius: 8px;--frame-radius-lg: 12px;--frame-transition: .15s cubic-bezier(.4, 0, .2, 1);position:relative;background:var(--frame-bg);color:var(--frame-text);font-family:DM Sans,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;overflow-x:hidden;display:flex;flex-direction:column}.frame-extract-app--fullpage{height:calc(100vh - 100px);min-height:500px}.frame-extract-app .frame-header{padding:16px 32px;border-bottom:1px solid var(--frame-border-subtle);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px;flex-wrap:wrap}.frame-extract-app .frame-header-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.frame-extract-app .frame-badge{font-family:JetBrains Mono,monospace;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:var(--frame-marker);color:#000;border:2px solid var(--frame-text);padding:3px 8px;display:inline-flex;align-items:center;gap:5px}.frame-extract-app .frame-badge:before{content:"";width:5px;height:5px;background:#000;animation:frame-pulse 2s ease-in-out infinite}@keyframes frame-pulse{0%,to{opacity:1}50%{opacity:.2}}.frame-extract-app .frame-title{font-family:Space Grotesk,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.5px;text-transform:uppercase;color:var(--frame-text)}.frame-extract-app .frame-header-right{display:flex;align-items:center;gap:12px}.frame-extract-app .frame-file-info{font-family:JetBrains Mono,monospace;font-size:12px;color:var(--frame-text-muted);padding:6px 12px;background:var(--frame-bg2);border-radius:var(--frame-radius);border:1px solid var(--frame-border-subtle);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity var(--frame-transition)}.frame-extract-app .frame-file-info.visible{opacity:1}.frame-extract-app .frame-quality-badge{font-family:JetBrains Mono,monospace;font-size:10px;color:var(--frame-success);padding:4px 8px;background:#4ade801a;border:1px solid rgba(74,222,128,.3);border-radius:4px;opacity:0;transition:opacity var(--frame-transition)}.frame-extract-app .frame-quality-badge.visible{opacity:1}.frame-extract-app .frame-main{flex:1;display:flex;flex-direction:column;padding:32px;gap:24px;overflow:auto}.frame-extract-app .frame-drop-zone{border:2px dashed var(--frame-border);border-radius:var(--frame-radius-lg);padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:pointer;transition:all var(--frame-transition);background:var(--frame-bg2);position:relative;overflow:hidden;width:720px;height:480px;margin:0 auto}.frame-extract-app .frame-drop-zone:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,var(--frame-accent-dim) 0%,transparent 70%);opacity:0;transition:opacity var(--frame-transition)}.frame-extract-app .frame-drop-zone:hover,.frame-extract-app .frame-drop-zone.dragover{border-color:var(--frame-text-muted);background:var(--frame-bg3)}.frame-extract-app .frame-drop-zone:hover:before,.frame-extract-app .frame-drop-zone.dragover:before{opacity:1}.frame-extract-app .frame-drop-zone.hidden{display:none}.frame-extract-app .frame-instructions{max-width:480px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:6px}.frame-extract-app .frame-instructions p{font-size:13px;color:var(--frame-text-muted);line-height:1.6}.frame-extract-app .frame-instructions strong{color:var(--frame-text2)}.frame-extract-app .frame-instructions.hidden{display:none}.frame-extract-app .frame-drop-icon{width:48px;height:48px;color:var(--frame-text-muted);transition:color var(--frame-transition),transform var(--frame-transition)}.frame-extract-app .frame-drop-zone:hover .frame-drop-icon{color:var(--frame-text2);transform:translateY(-2px)}.frame-extract-app .frame-drop-text{text-align:center;position:relative;z-index:1}.frame-extract-app .frame-drop-text h2{font-size:16px;font-weight:500;color:var(--frame-text);margin-bottom:4px}.frame-extract-app .frame-drop-text p{font-size:13px;color:var(--frame-text-muted)}.frame-extract-app .frame-drop-text span{color:var(--frame-text2);text-decoration:underline;text-underline-offset:2px}.frame-extract-app input[type=file]{display:none}.frame-extract-app .frame-video-container{display:none;flex-direction:column;gap:20px;flex:1}.frame-extract-app .frame-video-container.visible{display:flex}.frame-extract-app .frame-video-wrapper{position:relative;background:var(--frame-bg2);border-radius:var(--frame-radius-lg);overflow:hidden;border:1px solid var(--frame-border-subtle);flex:1;display:flex;align-items:center;justify-content:center;min-height:300px}.frame-extract-app .frame-video-wrapper video{max-width:100%;max-height:100%;display:block}.frame-extract-app .frame-controls{background:var(--frame-bg2);border-radius:var(--frame-radius-lg);padding:20px 24px;border:1px solid var(--frame-border-subtle);flex-shrink:0}.frame-extract-app .frame-timeline-container{margin-bottom:20px}.frame-extract-app .frame-timeline{position:relative;height:48px;background:var(--frame-bg3);border-radius:var(--frame-radius);overflow:visible;cursor:pointer}.frame-extract-app .frame-timeline-track{position:absolute;inset:0;border-radius:var(--frame-radius);overflow:hidden}.frame-extract-app .frame-timeline-progress{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--frame-accent-dim) 0%,rgba(255,255,255,.15) 100%);pointer-events:none;will-change:width}.frame-extract-app .frame-timeline-handle{position:absolute;top:0;width:3px;height:100%;background:var(--frame-accent);transform:translate(-50%);pointer-events:none;box-shadow:0 0 12px #ffffff4d;z-index:10;will-change:left}.frame-extract-app .frame-timeline-handle:before,.frame-extract-app .frame-timeline-handle:after{content:"";position:absolute;left:50%;transform:translate(-50%);width:12px;height:12px;background:var(--frame-accent);border-radius:50%}.frame-extract-app .frame-timeline-handle:before{top:-6px}.frame-extract-app .frame-timeline-handle:after{bottom:-6px}.frame-extract-app .frame-markers-container{position:absolute;inset:0;pointer-events:none;z-index:5}.frame-extract-app .frame-marker{position:absolute;top:0;width:4px;height:100%;background:var(--frame-marker);transform:translate(-50%);cursor:pointer;pointer-events:auto;transition:background-color var(--frame-transition);border-radius:2px}.frame-extract-app .frame-marker:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--frame-marker);transition:border-color var(--frame-transition)}.frame-extract-app .frame-marker:hover{background:var(--frame-marker-hover)}.frame-extract-app .frame-marker:hover:before{border-top-color:var(--frame-marker-hover)}.frame-extract-app .frame-marker-label{position:absolute;top:-28px;left:50%;transform:translate(-50%);font-family:JetBrains Mono,monospace;font-size:9px;color:var(--frame-marker);background:var(--frame-bg);padding:2px 4px;border-radius:3px;white-space:nowrap;opacity:0;transition:opacity var(--frame-transition)}.frame-extract-app .frame-marker:hover .frame-marker-label{opacity:1}.frame-extract-app .frame-control-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.frame-extract-app .frame-control-group{display:flex;align-items:center;gap:8px}.frame-extract-app .frame-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid var(--frame-border);background:var(--frame-bg3);color:var(--frame-text);font-family:inherit;font-size:13px;font-weight:500;border-radius:var(--frame-radius);cursor:pointer;transition:all var(--frame-transition);white-space:nowrap}.frame-extract-app .frame-btn:hover:not(:disabled){background:var(--frame-bg-hover);border-color:var(--frame-text-muted)}.frame-extract-app .frame-btn:active:not(:disabled){transform:scale(.98)}.frame-extract-app .frame-btn:disabled{opacity:.4;cursor:not-allowed}.frame-extract-app .frame-btn svg{width:16px;height:16px}.frame-extract-app .frame-btn-icon{width:40px;height:40px;padding:0}.frame-extract-app .frame-btn-primary{background:var(--frame-accent);color:var(--frame-bg);border-color:var(--frame-accent)}.frame-extract-app .frame-btn-primary:hover:not(:disabled){background:#e5e5e5;border-color:#e5e5e5}.frame-extract-app .frame-btn-marker{background:#f59e0b26;border-color:var(--frame-marker);color:var(--frame-marker)}.frame-extract-app .frame-btn-marker:hover:not(:disabled){background:#f59e0b40;border-color:var(--frame-marker-hover);color:var(--frame-marker-hover)}.frame-extract-app .frame-btn-danger{border-color:var(--frame-danger);color:var(--frame-danger)}.frame-extract-app .frame-btn-danger:hover:not(:disabled){background:#ef444426}.frame-extract-app .frame-time-display{font-family:JetBrains Mono,monospace;font-size:13px;color:var(--frame-text2);min-width:140px;text-align:center}.frame-extract-app .frame-step{display:flex;align-items:center;gap:4px}.frame-extract-app .frame-step .frame-btn{padding:10px 12px}.frame-extract-app .frame-markers-panel{margin-top:16px;padding-top:16px;border-top:1px solid var(--frame-border-subtle);display:none}.frame-extract-app .frame-markers-panel.visible{display:block}.frame-extract-app .frame-markers-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.frame-extract-app .frame-markers-title{font-size:12px;font-weight:500;color:var(--frame-text2);text-transform:uppercase;letter-spacing:.05em}.frame-extract-app .frame-marker-count{font-family:JetBrains Mono,monospace;font-size:11px;color:var(--frame-marker);background:#f59e0b26;padding:2px 8px;border-radius:10px}.frame-extract-app .frame-markers-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;max-height:120px;overflow-y:auto}.frame-extract-app .frame-marker-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--frame-bg3);border:1px solid var(--frame-border);border-radius:var(--frame-radius);font-family:JetBrains Mono,monospace;font-size:11px;color:var(--frame-text2);cursor:pointer;transition:all var(--frame-transition)}.frame-extract-app .frame-marker-chip:hover{border-color:var(--frame-marker);color:var(--frame-text)}.frame-extract-app .frame-marker-chip-dot{width:6px;height:6px;background:var(--frame-marker);border-radius:50%;flex-shrink:0}.frame-extract-app .frame-marker-chip-remove{width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--frame-text-muted);transition:all var(--frame-transition);margin-left:2px;cursor:pointer}.frame-extract-app .frame-marker-chip-remove:hover{background:var(--frame-danger);color:#fff}.frame-extract-app .frame-markers-actions{display:flex;gap:8px}.frame-extract-app .frame-shortcuts{display:flex;gap:16px;justify-content:center;padding-top:12px;border-top:1px solid var(--frame-border-subtle);margin-top:16px}.frame-extract-app .frame-shortcut{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--frame-text-muted)}.frame-extract-app .frame-key{font-family:JetBrains Mono,monospace;font-size:10px;padding:3px 6px;background:var(--frame-bg3);border:1px solid var(--frame-border);border-radius:4px;color:var(--frame-text2)}.frame-extract-app .frame-toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%) translateY(100px);background:var(--frame-bg2);border:1px solid var(--frame-border);padding:12px 20px;border-radius:var(--frame-radius);display:flex;align-items:center;gap:10px;font-size:13px;color:var(--frame-text);box-shadow:0 8px 32px #0006;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1000}.frame-extract-app .frame-toast.visible{opacity:1;transform:translate(-50%) translateY(0)}.frame-extract-app .frame-toast.toast-error{border-color:var(--frame-danger)}.frame-extract-app .frame-toast.toast-error svg{color:var(--frame-danger)}.frame-extract-app .frame-toast svg{width:18px;height:18px;color:var(--frame-success);flex-shrink:0}.frame-extract-app .frame-export-overlay{position:fixed;inset:0;background:#000c;display:none;align-items:center;justify-content:center;z-index:1000}.frame-extract-app .frame-export-overlay.visible{display:flex}.frame-extract-app .frame-export-modal{background:var(--frame-bg2);border:1px solid var(--frame-border);border-radius:var(--frame-radius-lg);padding:32px;text-align:center;min-width:300px}.frame-extract-app .frame-export-modal h3{font-size:16px;font-weight:500;margin-bottom:8px;color:var(--frame-text)}.frame-extract-app .frame-export-progress{font-family:JetBrains Mono,monospace;font-size:13px;color:var(--frame-text2);margin-bottom:16px}.frame-extract-app .frame-export-bar{height:4px;background:var(--frame-bg3);border-radius:2px;overflow:hidden}.frame-extract-app .frame-export-bar-fill{height:100%;background:var(--frame-marker);transition:width .2s ease}.frame-extract-app .frame-capture-canvas{display:none}@media(max-width:768px){.frame-extract-app .frame-header{padding:12px 20px}.frame-extract-app .frame-main{padding:20px}.frame-extract-app .frame-drop-zone{width:100%;max-width:720px;height:auto;aspect-ratio:3 / 2}.frame-extract-app .frame-control-row,.frame-extract-app .frame-shortcuts{flex-wrap:wrap;justify-content:center}.frame-extract-app .frame-markers-actions{flex-wrap:wrap}}