*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#f5f5f7;--bg-secondary:#fff;--bg-tertiary:#f5f5f7;--text-primary:#1d1d1f;--text-secondary:#86868b;--border-color:#0000000d;--border-color-strong:#d2d2d7;--shadow:#0000001a;--overlay-bg:#000000b3;--card-bg:#fff}.dark-mode{--bg-primary:#000;--bg-secondary:#1c1c1e;--bg-tertiary:#2c2c2e;--text-primary:#fff;--text-secondary:#98989d;--border-color:#ffffff1a;--border-color-strong:#fff3;--shadow:#00000080;--overlay-bg:#000000e6;--card-bg:#1c1c1e}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f7;background:var(--bg-primary);color:#1d1d1f;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;transition:background-color .3s ease,color .3s ease}body,html{overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@media (max-width:768px){*{max-width:100%}canvas,img,video{height:auto;max-width:100%}}.app{background:linear-gradient(180deg,var(--bg-primary) 0,var(--bg-secondary) 100%);display:flex;flex-direction:column;min-height:100vh;transition:background .3s ease}.app-header{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#fffc;background:rgba(var(--card-bg-rgb,255,255,255),.8);border-bottom:1px solid var(--border-color);padding:48px 24px 32px;transition:background-color .3s ease,border-color .3s ease}.dark-mode .app-header{background:#1c1c1ecc}.header-content{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:0 auto;max-width:1200px;position:relative}.header-title-section{text-align:center;width:100%}.title-with-logo{align-items:center;display:flex;gap:16px;justify-content:center}.app-logo{flex-shrink:0;height:48px;object-fit:contain;width:48px}.new-video-button{background:#007aff1a;border:1px solid #007aff33;border-radius:10px;color:#007aff;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:500;padding:10px 24px;position:absolute;right:0;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.new-video-button:hover{background:#007aff26;border-color:#007aff4d;transform:translateY(-1px)}.new-video-button:active{transform:translateY(0)}.app-title{color:var(--text-primary);font-size:48px;font-weight:600;letter-spacing:-.5px;margin-bottom:0}.app-subtitle,.app-title{transition:color .3s ease}.app-subtitle{color:var(--text-secondary);font-size:17px;font-weight:400;margin-bottom:16px}.social-links{gap:16px;margin-top:12px}.social-link,.social-links{align-items:center;display:flex;justify-content:center}.social-link{background:var(--bg-tertiary);border-radius:50%;color:var(--text-primary);height:40px;text-decoration:none;transition:all .2s ease;width:40px}.social-link:hover{background:var(--border-color-strong);transform:translateY(-2px)}.social-link:active{transform:translateY(0)}.social-link svg{height:20px;width:20px}.app-main{flex:1 1;margin:0 auto;max-width:1200px;padding:32px 24px;width:100%}.video-workspace{gap:32px}.video-section,.video-workspace{display:flex;flex-direction:column}.video-section{gap:24px}@media (max-width:767px){.app-header{padding:32px 16px 24px}.app-title{font-size:36px}.app-logo{height:40px;width:40px}.title-with-logo{gap:12px}.app-subtitle{font-size:15px}.new-video-button{margin-top:16px;position:static;transform:none;width:100%}.header-content{flex-direction:column}.app-main{padding:24px 16px}.video-section,.video-workspace{gap:20px}.social-links{gap:12px}.social-link{height:36px;width:36px}}@media (min-width:768px){.app-header{padding:64px 24px 48px}.app-title{font-size:56px}.app-main{padding:48px 32px}}.video-uploader{background:var(--card-bg);border:2px dashed var(--border-color-strong);border-radius:18px;cursor:pointer;margin:0 auto;max-width:600px;padding:64px 32px;text-align:center;transition:all .3s ease;width:100%}.video-uploader:hover{background:var(--bg-tertiary);border-color:#007aff}.uploader-content{align-items:center;display:flex;flex-direction:column;gap:16px}.uploader-icon{color:#86868b;margin-bottom:8px}.uploader-title{color:var(--text-primary);font-size:28px;font-weight:600;letter-spacing:-.3px;transition:color .3s ease}.uploader-description{font-size:17px;max-width:400px}.uploader-description,.uploader-requirement{color:var(--text-secondary);transition:color .3s ease}.uploader-requirement{font-size:15px;font-weight:500}.upload-button{margin-top:8px}@media (max-width:768px){.video-uploader{padding:48px 24px}.uploader-title{font-size:24px}.uploader-description{font-size:15px}.uploader-requirement{font-size:14px}}.video-player-container{background:#000;border-radius:18px;box-shadow:0 4px 20px #0000001a;overflow:hidden}.video-wrapper{max-height:80vh;min-height:200px}.video-element{display:block;height:100%;object-fit:contain;width:100%}.video-controls{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#000c;display:flex;gap:16px;padding:16px 20px}.control-button{align-items:center;background:#0000;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:8px;transition:all .2s ease}.control-button:hover{background:#ffffff1a}.control-button:active{transform:scale(.95)}.progress-container{display:flex;flex:1 1;flex-direction:column;gap:8px}.progress-bar{background:#ffffff4d;border-radius:2px;cursor:pointer;height:4px;position:relative;transition:height .2s ease;width:100%}.progress-bar:hover{height:6px}.progress-fill{background:#007aff;border-radius:2px;height:100%;transition:width .1s linear}.time-display{color:#fffc;display:flex;font-size:13px;font-weight:500;justify-content:space-between}.volume-controls{align-items:center;display:flex;gap:8px}.volume-slider{-webkit-appearance:none;appearance:none;background:#ffffff4d;border-radius:2px;cursor:pointer;height:4px;outline:none;width:80px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border-radius:50%;cursor:pointer;height:12px;-webkit-transition:all .2s ease;transition:all .2s ease;width:12px}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;cursor:pointer;height:12px;-moz-transition:all .2s ease;transition:all .2s ease;width:12px}.volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.loop-toggle{align-items:center;border-radius:8px;cursor:pointer;display:flex;gap:8px;padding:8px 12px;transition:background .2s ease;-webkit-user-select:none;user-select:none}.loop-toggle:hover{background:#ffffff1a}.loop-checkbox{accent-color:#007aff;cursor:pointer;height:18px;width:18px}.loop-label{color:#ffffffe6;font-size:14px;font-weight:500;transition:color .3s ease}@media (max-width:768px){.video-wrapper{min-height:180px}.video-controls{flex-wrap:wrap;gap:8px;padding:10px 12px}.control-button{flex-shrink:0;padding:6px}.control-button svg{height:18px;width:18px}.progress-container{margin-top:4px;order:3;width:100%}.time-display{font-size:12px}.volume-controls{gap:6px;order:2}.volume-slider{width:50px}.loop-toggle{gap:6px;order:1;padding:6px 8px}.loop-checkbox{height:16px;width:16px}.loop-label{font-size:12px}}.frame-extractor{background:var(--card-bg);border-radius:18px;box-shadow:0 2px 10px var(--shadow);padding:24px;transition:background-color .3s ease,box-shadow .3s ease}.extractor-controls{align-items:flex-start;gap:20px}.extractor-controls,.extractor-options{display:flex;flex-direction:column;width:100%}.extractor-options{gap:12px}.extract-mode-label{align-items:center;border-radius:12px;color:var(--text-primary);cursor:pointer;display:flex;font-size:17px;font-weight:500;gap:12px;padding:12px;transition:background .2s ease,color .3s ease}.extract-mode-label:hover{background:var(--bg-tertiary)}.radio-input{accent-color:#007aff;cursor:pointer;height:20px;width:20px}.extract-mode-label span{flex:1 1}.frame-count-label{display:flex;flex-direction:column;font-weight:500;gap:8px;transition:color .3s ease;width:100%}.frame-count-input,.frame-count-label{color:var(--text-primary);font-size:17px}.frame-count-input{background:var(--card-bg);border:1px solid var(--border-color-strong);border-radius:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin-left:auto;padding:10px 14px;transition:all .2s ease;width:100px}.frame-count-input:focus{border-color:#007aff;box-shadow:0 0 0 4px #007aff1a;outline:none}.frame-count-input:disabled{cursor:not-allowed;opacity:.5}.fps-select{background:var(--card-bg);border:1px solid var(--border-color-strong);border-radius:10px;color:var(--text-primary);cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:17px;margin-left:8px;padding:10px 14px;transition:all .2s ease}.fps-select:focus{border-color:#007aff;box-shadow:0 0 0 4px #007aff1a;outline:none}.fps-select:disabled{cursor:not-allowed;opacity:.5}.fps-export-note{color:var(--text-secondary);font-size:14px;font-weight:400;margin-left:8px;transition:color .3s ease}.extract-button{align-items:center;background:#007aff;border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:17px;font-weight:500;gap:8px;padding:14px 32px;transition:all .2s ease}.extract-button:hover:not(:disabled){background:#0051d5;transform:translateY(-1px)}.extract-button:active:not(:disabled){transform:translateY(0)}.extract-button:disabled{cursor:not-allowed;opacity:.5}.spinner{animation:spin .6s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:16px;width:16px}@media (max-width:767px){.frame-extractor{padding:20px}.extractor-controls{gap:16px}.extractor-options{gap:10px}.extract-mode-label{font-size:15px;gap:8px;padding:10px}.extract-mode-label span{flex:0 0 auto}.frame-count-label{font-size:15px}.fps-select,.frame-count-input{margin-left:0;margin-top:8px;width:100%}.fps-export-note{margin-left:0;margin-top:4px;width:100%}.extract-button{font-size:16px;justify-content:center;padding:12px 24px;width:100%}}@media (min-width:768px){.extractor-controls{align-items:center;flex-direction:row;justify-content:space-between}.extractor-options{flex-direction:row;gap:24px;width:auto}.extract-mode-label{padding:8px 12px}}.confirmation-dialog-overlay{align-items:center;animation:fadeIn .2s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:2000}.confirmation-dialog-container{animation:slideUp .3s ease;background:var(--card-bg);border-radius:18px;box-shadow:0 20px 60px var(--shadow);max-width:500px;overflow:hidden;transition:background-color .3s ease;width:100%}.confirmation-dialog-header{border-bottom:1px solid var(--border-color-strong);padding:24px;transition:border-color .3s ease}.confirmation-dialog-header h3{color:var(--text-primary);font-size:24px;font-weight:600;margin:0;transition:color .3s ease}.confirmation-dialog-content{padding:24px}.confirmation-dialog-message{color:var(--text-primary);font-size:17px;line-height:1.5;margin:0;transition:color .3s ease}.confirmation-dialog-actions{border-top:1px solid var(--border-color-strong);display:flex;gap:12px;justify-content:flex-end;padding:16px 24px;transition:border-color .3s ease}.confirmation-button{border:none;border-radius:10px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:17px;font-weight:500;padding:10px 24px;transition:all .2s ease}.confirmation-button-cancel{background:var(--bg-tertiary);color:var(--text-primary);transition:all .2s ease}.confirmation-button-cancel:hover{background:var(--border-color-strong)}.confirmation-button-confirm{background:#ff3b30;color:#fff}.confirmation-button-confirm:hover{background:#ff2d20}@media (max-width:768px){.confirmation-dialog-overlay{padding:16px}.confirmation-dialog-container{max-width:100%}.confirmation-dialog-header{padding:20px}.confirmation-dialog-header h3{font-size:20px}.confirmation-dialog-content{padding:20px}.confirmation-dialog-message{font-size:15px}.confirmation-dialog-actions{flex-direction:column-reverse;padding:16px 20px}.confirmation-button{font-size:16px;justify-content:center;padding:12px 24px;width:100%}.confirmation-button-confirm{order:-1}}.frame-gallery{background:var(--card-bg);border-radius:18px;box-shadow:0 2px 10px var(--shadow);padding:32px;transition:background-color .3s ease,box-shadow .3s ease}.gallery-header{align-items:flex-start;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:24px}.gallery-actions{display:flex;flex-direction:column;gap:16px;width:100%}.selection-controls{align-items:center;display:flex;gap:12px}.select-all-button{background:#007aff1a;border:1px solid #007aff33;border-radius:10px;color:#007aff;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:500;padding:8px 16px;transition:all .2s ease}.select-all-button:hover{background:#007aff26;border-color:#007aff4d}.selection-count{color:var(--text-secondary);font-size:15px;font-weight:500;transition:color .3s ease}.gallery-title{color:var(--text-primary);font-size:32px;font-weight:600;letter-spacing:-.3px;margin-bottom:8px;transition:color .3s ease}.gallery-subtitle{color:var(--text-secondary);font-size:17px;transition:color .3s ease}.download-buttons-group{display:flex;flex-wrap:wrap;gap:12px}.download-selected-button{align-items:center;background:#007aff;border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:500;gap:8px;padding:12px 24px;transition:all .2s ease;white-space:nowrap}.download-selected-button:hover{background:#0051d5;transform:translateY(-1px)}.download-selected-button:active{transform:translateY(0)}.batch-upload-button{align-items:center;background:#34c759;border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:500;gap:8px;padding:12px 24px;transition:all .2s ease;white-space:nowrap}.batch-upload-button:hover{background:#28a745;transform:translateY(-1px)}.batch-upload-button:active{transform:translateY(0)}.download-all-button,.download-replaced-button{align-items:center;background:#007aff;border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:500;gap:8px;padding:12px 24px;transition:all .2s ease;white-space:nowrap}.download-all-button:hover{background:#0051d5;transform:translateY(-1px)}.download-all-button:active{transform:translateY(0)}.download-replaced-button{background:#34c759}.download-replaced-button:hover{background:#28a745;transform:translateY(-1px)}.download-replaced-button:active{transform:translateY(0)}.frames-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.frame-item{background:var(--bg-tertiary);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;overflow:visible;position:relative;transition:all .2s ease}.frame-image-wrapper{border-radius:12px 12px 0 0}.frame-item:hover{box-shadow:0 8px 24px #0000001f;transform:translateY(-4px)}.frame-item.selected{border:3px solid #007aff;box-shadow:0 0 0 2px #007aff33}.frame-item.export-selected{background:#ff95000d;border:1px solid #ff9500;box-shadow:0 0 0 2px #ff95004d}.export-selection-info{align-items:center;background:#34c7591a;border:1px solid #34c75933;border-radius:10px;display:flex;gap:12px;margin-top:8px;padding:12px}.export-count{color:var(--text-primary);font-size:14px;font-weight:500;transition:color .3s ease}.select-export-button{background:#34c7591a;border:1px solid #34c7594d;border-radius:8px;color:#34c759;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;padding:6px 16px;transition:all .2s ease}.select-export-button:hover{background:#34c75926;border-color:#34c75966;transform:translateY(-1px)}.frame-checkbox-wrapper{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffffe6;border-radius:8px;left:12px;padding:4px;position:absolute;top:12px;z-index:15}.frame-checkbox{accent-color:#007aff;cursor:pointer;height:20px;margin:0;width:20px}.frame-image-wrapper{background:#000;flex-shrink:0;overflow:hidden;padding-top:56.25%;position:relative;width:100%}.frame-image{height:100%;object-fit:contain;width:100%}.frame-image,.frame-overlay{left:0;position:absolute;top:0}.frame-overlay{align-items:center;background:#00000080;bottom:0;color:#fff;display:flex;justify-content:center;opacity:0;right:0;transition:opacity .2s ease}.frame-item:hover .frame-overlay{opacity:1}.frame-action-buttons{display:flex;gap:8px;opacity:0;position:absolute;right:12px;top:12px;transition:opacity .2s ease;z-index:10}.frame-item:hover .frame-action-buttons{opacity:1}.frame-export-toggle{align-items:center;background:#fffffff2;border:2px solid #ff9500;border-radius:10px;box-shadow:0 2px 8px #0003;color:#ff9500;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.frame-export-toggle:hover{background:#ff95001a;box-shadow:0 4px 12px #0000004d;transform:scale(1.1)}.frame-item.export-selected .frame-export-toggle{background:#ff9500;border-color:#ff9500;color:#fff}.frame-download-button,.frame-replace-button{align-items:center;background:#007affe6;border:none;border-radius:10px;box-shadow:0 2px 8px #0003;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.frame-replace-button{background:#34c759e6}.frame-replace-button:hover{background:#34c759;box-shadow:0 4px 12px #0000004d;transform:scale(1.1)}.frame-download-button:hover{background:#0051d5;box-shadow:0 4px 12px #0000004d;transform:scale(1.1)}.frame-download-button:active,.frame-replace-button:active{transform:scale(.95)}.replaced-badge{background:#34c759e6;border-radius:12px;box-shadow:0 2px 8px #0003;color:#fff;font-size:12px;font-weight:600;left:12px;padding:4px 10px;position:absolute;top:12px;z-index:5}.frame-info{background:var(--card-bg);border-radius:0 0 12px 12px;display:flex;flex-direction:column;flex-shrink:0;gap:4px;justify-content:center;min-height:60px;padding:12px;position:relative;transition:background-color .3s ease;z-index:1}.frame-number{color:var(--text-primary);display:block;font-size:16px;font-weight:700;line-height:1.4;transition:color .3s ease;white-space:nowrap}.frame-item.selected .frame-number{color:#007aff}.frame-item.export-selected .frame-number{color:#fff}.frame-time{color:var(--text-secondary);display:block;font-size:13px;font-weight:500;line-height:1.3;transition:color .3s ease;white-space:nowrap}@media (max-width:768px){.frame-gallery{padding:20px}.gallery-header{align-items:flex-start;flex-direction:column;gap:16px}.gallery-title{font-size:24px}.gallery-subtitle{font-size:15px}.gallery-actions{width:100%}.download-buttons-group{flex-direction:column;width:100%}.batch-upload-button,.download-all-button,.download-replaced-button,.download-selected-button{font-size:14px;justify-content:center;padding:10px 20px;width:100%}.selection-controls{justify-content:space-between;width:100%}.select-all-button{font-size:14px;padding:6px 12px}.frames-grid{gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.frame-item{border-radius:10px}.frame-image-wrapper{border-radius:10px 10px 0 0}.frame-checkbox-wrapper{left:8px;padding:3px;top:8px}.frame-checkbox{height:18px;width:18px}.frame-action-buttons{gap:6px;right:8px;top:8px}.frame-download-button,.frame-export-toggle,.frame-replace-button{height:36px;width:36px}.replaced-badge{font-size:11px;left:8px;padding:3px 8px;top:8px}.frame-info{background:var(--card-bg);border-radius:0 0 10px 10px;display:flex;flex-direction:column;flex-shrink:0;gap:4px;min-height:55px;padding:10px 8px;position:relative;transition:background-color .3s ease;z-index:1}.frame-number{color:var(--text-primary);font-size:16px;font-weight:700;line-height:1.3;transition:color .3s ease;white-space:nowrap}.frame-item.selected .frame-number{color:#007aff}.frame-item.export-selected .frame-number{color:#fff}.frame-time{font-size:12px;line-height:1.2;white-space:nowrap}.export-selection-info{align-items:flex-start;flex-direction:column;gap:8px;padding:10px}.select-export-button{text-align:center;width:100%}}.frame-preview-overlay{align-items:center;animation:fadeIn .2s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#000000e6;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.frame-preview-container{animation:slideUp .3s ease;background:#1d1d1f;border-radius:18px;box-shadow:0 20px 60px #00000080;display:flex;flex-direction:column;max-height:95vh;max-width:95vw;overflow:hidden}.frame-preview-header{align-items:center;background:#ffffff0d;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:20px 24px}.frame-preview-info h3{color:#fff;font-size:20px;font-weight:600;margin-bottom:4px}.frame-preview-info p{color:#ffffffb3;font-size:15px}.frame-preview-actions{align-items:center;display:flex;gap:12px}.preview-download-button{align-items:center;background:#007aff;border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:500;gap:8px;padding:10px 20px;transition:all .2s ease}.preview-download-button:hover{background:#0051d5;transform:translateY(-1px)}.preview-download-button:active{transform:translateY(0)}.frame-preview-image-wrapper{align-items:center;background:#000;display:flex;flex:1 1;justify-content:center;min-height:400px;overflow:auto;padding:20px;position:relative}.frame-preview-image{border-radius:8px;height:auto;max-height:calc(95vh - 200px);max-width:100%;object-fit:contain;width:auto}.preview-nav-button{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#0009;border:2px solid #ffffff4d;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:56px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;width:56px;z-index:10}.preview-nav-button:hover:not(:disabled){background:#000c;border-color:#ffffff80;transform:translateY(-50%) scale(1.1)}.preview-nav-button:active:not(:disabled){transform:translateY(-50%) scale(.95)}.preview-nav-button:disabled{cursor:not-allowed;opacity:.3}.preview-nav-left{left:20px}.preview-nav-right{right:20px}.preview-checkbox-label{align-items:center;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:15px;font-weight:500;gap:8px;padding:8px 12px;transition:background .2s ease}.keyboard-hint{color:#fff9;font-family:-apple-system,BlinkMacSystemFont,SF Mono,Monaco,Cascadia Code,monospace;font-size:12px;font-weight:400;margin-left:4px}.preview-checkbox-label:hover{background:#ffffff1a}.preview-checkbox{accent-color:#007aff;cursor:pointer;height:20px;width:20px}.frame-preview-footer{border-top:1px solid #ffffff1a;padding:16px 24px;text-align:center}.preview-hint{color:#fff9;font-size:13px;margin:0}@media (max-width:768px){.frame-preview-overlay{padding:10px}.frame-preview-container{border-radius:0;max-height:100vh;max-width:100vw}.frame-preview-header{align-items:flex-start;flex-direction:column;gap:12px;padding:12px 16px}.frame-preview-info h3{font-size:18px}.frame-preview-info p{font-size:14px}.frame-preview-actions{gap:8px;justify-content:space-between;width:100%}.preview-download-button{flex:1 1;font-size:14px;justify-content:center;padding:8px 16px}.preview-close-button{height:36px;width:36px}.frame-preview-image-wrapper{min-height:300px;padding:10px}.frame-preview-image{max-height:calc(100vh - 180px)}.preview-nav-button{height:44px;width:44px}.preview-nav-left{left:10px}.preview-nav-right{right:10px}.preview-checkbox-label{font-size:14px;padding:6px 10px}.preview-checkbox{height:18px;width:18px}.frame-preview-footer{padding:12px 16px}.preview-hint{font-size:12px}}.frame-replacer-overlay{align-items:center;animation:fadeIn .2s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1001}.frame-replacer-container{animation:slideUp .3s ease;background:#fff;border-radius:18px;box-shadow:0 20px 60px #0000004d;max-height:90vh;max-width:800px;overflow-y:auto;width:100%}.frame-replacer-header{align-items:center;border-bottom:1px solid #d2d2d7;display:flex;justify-content:space-between;padding:24px}.frame-replacer-header h3{color:#1d1d1f;font-size:24px;font-weight:600}.replacer-close-button{align-items:center;background:#f5f5f7;border:none;border-radius:10px;color:#1d1d1f;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.replacer-close-button:hover{background:#e5e5e7;transform:scale(1.05)}.replacer-close-button:active{transform:scale(.95)}.frame-replacer-content{display:flex;flex-direction:column;gap:24px;padding:24px}.current-frame-preview{display:flex;flex-direction:column;gap:12px}.current-frame-preview p{color:#1d1d1f;font-size:17px;font-weight:500}.current-frame-preview img{border:1px solid #d2d2d7;border-radius:12px;max-height:300px;object-fit:contain;width:100%}.replacement-upload-area{background:#f5f5f7;border:2px dashed #d2d2d7;border-radius:18px;cursor:pointer;padding:48px 24px;text-align:center;transition:all .3s ease}.replacement-upload-area:hover{background:#fff;border-color:#007aff}@media (max-width:768px){.frame-replacer-overlay{padding:10px}.frame-replacer-container{border-radius:12px;max-height:100vh;max-width:100vw}.frame-replacer-header{padding:16px}.frame-replacer-header h3{font-size:20px}.replacer-close-button{height:36px;width:36px}.frame-replacer-content{gap:16px;padding:16px}.current-frame-preview p{font-size:15px}.current-frame-preview img{max-height:200px}.replacement-upload-area{padding:32px 16px}.upload-text{font-size:15px}.upload-subtext{font-size:14px}.upload-button{font-size:16px;padding:10px 24px;width:100%}}.batch-uploader-overlay{align-items:center;animation:fadeIn .2s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1001}.batch-uploader-container{animation:slideUp .3s ease;background:#fff;border-radius:18px;box-shadow:0 20px 60px #0000004d;max-height:90vh;max-width:700px;overflow-y:auto;width:100%}.batch-uploader-header{align-items:center;border-bottom:1px solid #d2d2d7;display:flex;justify-content:space-between;padding:24px}.batch-uploader-header h3{color:#1d1d1f;font-size:24px;font-weight:600}.batch-close-button{align-items:center;background:#f5f5f7;border:none;border-radius:10px;color:#1d1d1f;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.batch-close-button:hover{background:#e5e5e7;transform:scale(1.05)}.batch-close-button:active{transform:scale(.95)}.batch-uploader-content{display:flex;flex-direction:column;gap:24px;padding:24px}.upload-instructions{background:#f5f5f7;border-radius:12px;padding:20px}.instruction-title{color:#1d1d1f;font-size:17px;font-weight:600;margin-bottom:12px}.instruction-list{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0 0 12px;padding:0}.instruction-list li{color:#1d1d1f;font-size:15px;padding-left:8px}.instruction-list code{background:#fff;border-radius:6px;color:#007aff;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,monospace;font-size:14px;font-weight:500;padding:4px 8px}.instruction-note{color:#86868b;font-size:14px;font-style:italic;margin-top:8px}.batch-upload-area{background:#f5f5f7;border:2px dashed #d2d2d7;border-radius:18px;cursor:pointer;padding:48px 24px;text-align:center;transition:all .3s ease}.batch-upload-area:hover{background:#fff;border-color:#007aff}.upload-icon{color:#86868b;display:flex;justify-content:center;margin-bottom:16px}.upload-text{color:#1d1d1f;font-size:17px;font-weight:500;margin-bottom:8px}.upload-subtext{color:#86868b;font-size:15px;margin-bottom:16px}.upload-button{background:#007aff;border:none;border-radius:12px;color:#fff;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:17px;font-weight:500;padding:12px 32px;transition:all .2s ease}.upload-button:hover{background:#0051d5;transform:translateY(-1px)}.upload-button:active{transform:translateY(0)}@media (max-width:768px){.batch-uploader-overlay{padding:10px}.batch-uploader-container{border-radius:12px;max-height:100vh;max-width:100vw}.batch-uploader-header{padding:16px}.batch-uploader-header h3{font-size:20px}.batch-close-button{height:36px;width:36px}.batch-uploader-content{gap:16px;padding:16px}.upload-instructions{padding:16px}.instruction-title{font-size:15px}.instruction-list li{font-size:14px}.instruction-list code{font-size:13px;padding:3px 6px}.instruction-note{font-size:13px}.batch-upload-area{padding:32px 16px}.upload-text{font-size:15px}.upload-subtext{font-size:14px}.upload-button{font-size:16px;padding:10px 24px;width:100%}}.video-comparison{background:var(--card-bg);border-radius:18px;box-shadow:0 2px 10px var(--shadow);padding:32px;transition:background-color .3s ease,box-shadow .3s ease}.comparison-header{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:24px}.comparison-title{color:var(--text-primary);font-size:32px;font-weight:600;letter-spacing:-.3px;transition:color .3s ease}.comparison-controls{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.download-video-button{align-items:center;background:#007aff;border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:500;gap:8px;padding:10px 20px;transition:all .2s ease;white-space:nowrap}.download-video-button:hover:not(:disabled){background:#0051d5;transform:translateY(-1px)}.download-video-button:active:not(:disabled){transform:translateY(0)}.download-video-button:disabled{cursor:not-allowed;opacity:.5}.spinner-small{animation:spin .6s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:14px;width:14px}@keyframes spin{to{transform:rotate(1turn)}}.speed-control{align-items:center;display:flex;font-weight:500;gap:8px;transition:color .3s ease}.speed-control,.speed-select{color:var(--text-primary);font-size:15px}.speed-select{background:var(--card-bg);border:1px solid var(--border-color-strong);border-radius:10px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:8px 12px;transition:all .2s ease}.speed-select:focus{border-color:#007aff;box-shadow:0 0 0 4px #007aff1a;outline:none}.loop-toggle-comparison{align-items:center;border-radius:10px;color:var(--text-primary);cursor:pointer;display:flex;font-size:15px;font-weight:500;gap:8px;padding:8px 12px;transition:background .2s ease,color .3s ease;-webkit-user-select:none;user-select:none}.loop-toggle-comparison:hover{background:var(--bg-tertiary)}.loop-toggle-comparison .loop-checkbox{accent-color:#007aff;cursor:pointer;height:18px;width:18px}.loop-toggle-comparison .loop-label{color:var(--text-primary);font-size:15px;font-weight:500;transition:color .3s ease}.play-button{align-items:center;background:#ff9500;border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;height:48px;justify-content:center;transition:all .2s ease;width:48px}.play-button:hover{background:#f80;transform:scale(1.05)}.play-button:active{transform:scale(.95)}.comparison-videos{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 1fr;margin-bottom:24px}.video-panel{display:flex;flex-direction:column;gap:12px}.video-label{color:var(--text-primary);font-size:17px;font-weight:600;gap:12px;min-height:28px;position:relative;transition:color .3s ease}.preview-button,.video-label{align-items:center;display:flex}.preview-button{background:#007aff1a;border:1px solid #007aff33;border-radius:8px;color:#007aff;cursor:pointer;flex-shrink:0;height:32px;justify-content:center;margin-left:auto;transition:all .2s ease;width:32px}.preview-button:hover{background:#007aff26;border-color:#007aff4d;transform:scale(1.05)}.preview-button:active{transform:scale(.95)}.replacement-badge{background:#34c759;border-radius:12px;color:#fff;flex-shrink:0;font-size:13px;font-weight:500;padding:4px 12px;white-space:nowrap}.video-wrapper{align-items:center;aspect-ratio:16/9;background:#000;border-radius:12px;display:flex;justify-content:center;overflow:hidden;position:relative;width:100%}.comparison-canvas,.comparison-video{height:100%;object-fit:contain;width:100%}.comparison-canvas{display:block}.frame-navigation{border-top:1px solid var(--border-color-strong);display:flex;flex-direction:column;gap:16px;padding-top:24px;transition:border-color .3s ease}.frame-info{color:var(--text-primary);font-size:15px;font-weight:500;text-align:center;transition:color .3s ease}.export-frame-note{color:var(--text-secondary);font-size:13px;font-weight:400;margin-left:4px;transition:color .3s ease}.frame-scrubber{width:100%}.frame-slider{-webkit-appearance:none;appearance:none;background:var(--border-color-strong);border-radius:3px;cursor:pointer;height:6px;outline:none;transition:background .3s ease;width:100%}.frame-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#007aff;border-radius:50%;cursor:pointer;height:20px;-webkit-transition:all .2s ease;transition:all .2s ease;width:20px}.frame-slider::-webkit-slider-thumb:hover{background:#0051d5;transform:scale(1.2)}.frame-slider::-moz-range-thumb{background:#007aff;border:none;border-radius:50%;cursor:pointer;height:20px;-moz-transition:all .2s ease;transition:all .2s ease;width:20px}.frame-slider::-moz-range-thumb:hover{background:#0051d5;transform:scale(1.2)}.frame-buttons{display:flex;gap:12px;justify-content:center}.nav-button{background:#007aff1a;border:1px solid #007aff33;border-radius:10px;color:#007aff;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:500;padding:10px 24px;transition:all .2s ease}.nav-button:hover:not(:disabled){background:#007aff26;border-color:#007aff4d}.nav-button:disabled{cursor:not-allowed;opacity:.5}@media (max-width:1024px){.comparison-videos{grid-template-columns:1fr}}@media (max-width:768px){.video-comparison{padding:20px}.comparison-header{align-items:flex-start;flex-direction:column;gap:16px}.comparison-title{font-size:24px}.comparison-controls{flex-direction:column;gap:12px;width:100%}.download-video-button{font-size:14px;justify-content:center;padding:12px 20px;width:100%}.speed-control{font-size:14px;justify-content:space-between;width:100%}.speed-select{flex:1 1;font-size:14px;max-width:150px}.loop-toggle-comparison{font-size:14px;justify-content:space-between;width:100%}.play-button{height:44px;width:44px}.comparison-videos{gap:16px;margin-bottom:20px}.video-label{font-size:15px;min-height:24px}.preview-button{height:28px;width:28px}.replacement-badge{font-size:12px;padding:3px 10px}.frame-navigation{gap:12px;padding-top:20px}.frame-info{font-size:14px}.frame-buttons{flex-wrap:wrap;gap:8px}.nav-button{flex:1 1;font-size:14px;min-width:100px;padding:8px 16px}}.video-preview-overlay{align-items:center;animation:fadeIn .2s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#000000f2;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:2000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.video-preview-container{animation:slideUp .3s ease;background:#1d1d1f;border-radius:18px;box-shadow:0 20px 60px #00000080;display:flex;flex-direction:column;max-height:95vh;max-width:95vw;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.video-preview-header{align-items:center;background:#ffffff0d;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:20px 24px}.video-preview-header h3{color:#fff;font-size:20px;font-weight:600}.preview-close-button{align-items:center;background:#ffffff1a;border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.preview-close-button:hover{background:#fff3;transform:scale(1.05)}.preview-close-button:active{transform:scale(.95)}.video-preview-content{align-items:center;background:#000;display:flex;flex:1 1;justify-content:center;overflow:auto;padding:20px}.video-preview-content canvas,.video-preview-content img,.video-preview-content video{border-radius:8px;height:auto;max-height:calc(95vh - 100px);max-width:100%;object-fit:contain;width:auto}@media (max-width:768px){.video-preview-overlay{padding:0}.video-preview-container{border-radius:0;max-height:100vh;max-width:100vw}.video-preview-header{padding:12px 16px}.video-preview-header h3{font-size:18px}.preview-close-button{height:36px;width:36px}.video-preview-content{padding:10px}.video-preview-content canvas,.video-preview-content img,.video-preview-content video{max-height:calc(100vh - 80px)}}.folder-picker-overlay{align-items:center;animation:fadeIn .2s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:2000}.folder-picker-container{animation:slideUp .3s ease;background:#fff;border-radius:18px;box-shadow:0 20px 60px #0000004d;max-width:500px;overflow:hidden;width:100%}.folder-picker-header{align-items:center;border-bottom:1px solid #d2d2d7;display:flex;justify-content:space-between;padding:24px}.folder-picker-header h3{color:#1d1d1f;font-size:24px;font-weight:600}.folder-picker-close{align-items:center;background:#f5f5f7;border:none;border-radius:10px;color:#1d1d1f;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.folder-picker-close:hover{background:#e5e5e7;transform:scale(1.05)}.folder-picker-content{align-items:center;display:flex;flex-direction:column;gap:20px;padding:32px 24px;text-align:center}.folder-picker-icon{color:#007aff;margin-bottom:8px}.folder-picker-text{color:#1d1d1f;font-size:17px;font-weight:500;margin:0}.folder-picker-note{color:#86868b;font-size:15px;margin:0}.folder-picker-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px;width:100%}.folder-picker-button{background:#007aff;border:none;border-radius:12px;color:#fff;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:17px;font-weight:500;padding:14px 32px;transition:all .2s ease}.folder-picker-button:hover{background:#0051d5;transform:translateY(-1px)}.folder-picker-button:active{transform:translateY(0)}.folder-picker-skip{background:#0000;border:none;border-radius:10px;color:#007aff;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;font-weight:500;padding:12px 24px;transition:all .2s ease}.folder-picker-skip:hover{background:#007aff1a}@media (max-width:768px){.folder-picker-overlay{padding:10px}.folder-picker-container{border-radius:12px;max-width:100vw}.folder-picker-header{padding:16px}.folder-picker-header h3{font-size:20px}.folder-picker-close{height:36px;width:36px}.folder-picker-content{gap:16px;padding:24px 16px}.folder-picker-text{font-size:15px}.folder-picker-note{font-size:14px}.folder-picker-actions{gap:10px}.folder-picker-button{font-size:16px;padding:12px 24px;width:100%}.folder-picker-skip{font-size:14px;padding:10px 20px;width:100%}}
/*# sourceMappingURL=main.c8c93d63.css.map*/