@import"https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Inter:wght@400;500;600&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--black: #000000;--dark-gray: #1d1e20;--white: #e8eae9;--beige: #f6ecc9;--gold: #8f8202;--green: #d9e5d7;--yellow: #f9eb32;--purple: #968bab;--orange: #ff522a;--bg-primary: var(--black);--bg-secondary: var(--dark-gray);--text-primary: var(--white);--text-secondary: var(--beige);--accent-primary: var(--gold);--accent-success: var(--green);--accent-warning: var(--yellow);--accent-danger: var(--orange);--accent-info: var(--purple);--shadow: 0 4px 6px -1px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3);--radius: 4px;--radius-lg: 8px;--font-logo: "Oswald", system-ui, -apple-system, sans-serif;--font-primary: "Inter", system-ui, -apple-system, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace}body{font-family:var(--font-primary);line-height:1.5;color:var(--text-primary);background:var(--bg-primary);font-size:14px;font-weight:400}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1rem;color:var(--text-secondary)}.spinner{width:32px;height:32px;border:2px solid var(--dark-gray);border-top:2px solid var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-container{max-width:1400px;margin:0 auto;padding:1.5rem;min-height:100vh}.app-container>section:not(.input-section){margin-bottom:.5rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-family:var(--font-logo);font-size:3rem;font-weight:400;color:var(--white);margin-bottom:.5rem;letter-spacing:.05em}.header p{font-size:1rem;color:var(--text-secondary);max-width:700px;margin:0 auto;font-weight:400}.input-section{background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-bottom:1.5rem;border:1px solid #333;transition:all .3s ease;overflow:hidden}.input-section.minimized{margin-bottom:.5rem}.input-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;cursor:pointer;border-bottom:1px solid #333}.input-header h3{color:var(--text-primary);font-size:1rem;font-weight:500}.collapse-arrow{color:var(--accent-primary);font-size:1.2rem;transition:transform .3s ease}.input-section.minimized .collapse-arrow{transform:rotate(180deg)}.input-content{padding:1.5rem;transition:all .3s ease;max-height:300px;opacity:1}.input-section.minimized .input-content{max-height:0;padding:0 1.5rem;opacity:0}.unified-input{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.url-section,.file-section{display:flex;flex-direction:column;gap:.75rem}.url-input-group{display:flex;gap:.75rem}.url-input{flex:1;padding:.75rem;border:1px solid #444;border-radius:var(--radius);font-size:.9rem;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-primary);transition:border-color .2s}.url-input:focus{outline:none;border-color:var(--accent-primary)}.url-input::placeholder{color:#666}.file-upload{border:2px dashed #444;border-radius:var(--radius);padding:1.5rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg-primary);min-height:100px;display:flex;flex-direction:column;justify-content:center}.file-upload:hover,.file-upload.dragover{border-color:var(--accent-info);background:#968bab1a}.file-upload-icon{font-size:1.5rem;margin-bottom:.5rem;opacity:.7}.file-upload-text{font-size:.9rem;margin-bottom:.25rem;font-weight:500}.file-upload-subtext{color:var(--text-secondary);font-size:.8rem}.file-input{display:none}.btn{padding:.6rem 1rem;border:none;border-radius:var(--radius);font-size:.85rem;font-weight:500;font-family:var(--font-primary);cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;letter-spacing:.025em}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent-primary);color:var(--black);font-weight:500}.btn-primary:hover:not(:disabled){background:#b5a502;transform:translateY(-1px)}.btn-secondary{background:#333;color:var(--text-primary);border:1px solid #555}.btn-secondary:hover:not(:disabled){background:#444;transform:translateY(-1px)}.btn-success{background:var(--accent-success);color:var(--black);font-weight:500}.btn-success:hover:not(:disabled){background:#c1d6be}.btn-danger{background:var(--accent-danger);color:var(--white);font-weight:500}.btn-danger:hover:not(:disabled){background:#e6471f}.btn-warning{background:var(--accent-warning);color:var(--black);font-weight:500}.btn-warning:hover:not(:disabled){background:#f7e81e}.btn-info{background:var(--accent-info);color:var(--white);font-weight:500}.btn-info:hover:not(:disabled){background:#877ea0}.video-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:1rem 1.5rem .5rem;box-shadow:var(--shadow);margin-bottom:.5rem;border:1px solid #333}.video-wrapper{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--black);margin-bottom:0;border:2px solid #333;border-bottom:none}.video-player{width:100%;height:auto;display:block;border-radius:var(--radius) var(--radius) 0 0}.video-status{background:#222;padding:.25rem .75rem;border-radius:var(--radius);margin-bottom:.25rem;border:1px solid #333;font-size:.8rem;color:var(--text-secondary);min-height:1rem;display:flex;align-items:center}.video-status.has-message{color:var(--accent-primary)}.timeline-container{margin:0 0 .5rem;background:var(--bg-secondary);padding:.5rem 0}.timeline{position:relative;height:6px;background:#333;border-radius:3px;margin-bottom:1rem;cursor:pointer}.timeline-track{width:100%;height:100%;background:transparent;border:none;cursor:pointer;-webkit-appearance:none;appearance:none;position:relative}.timeline-track::-webkit-slider-thumb{-webkit-appearance:none;width:2px;height:20px;background:var(--accent-primary);cursor:pointer;border:none;border-radius:0;position:relative}.timeline-track::-moz-range-thumb{width:2px;height:20px;background:var(--accent-primary);cursor:pointer;border:none;border-radius:0}.timeline-progress{position:absolute;top:0;left:0;height:100%;background:var(--accent-primary);border-radius:3px;pointer-events:none}.timeline-markers{position:absolute;top:-8px;left:0;right:0;height:22px;pointer-events:none}.timeline-marker{position:absolute;width:3px;height:22px;border-radius:2px;top:0}.timeline-marker.in-point{background:var(--accent-success)}.timeline-marker.out-point{background:var(--accent-danger)}.timeline-marker.mark-point{background:var(--accent-warning);width:2px}.time-display{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.85rem;color:var(--text-secondary);margin-bottom:0;background:var(--black);padding:.25rem .75rem;border-radius:var(--radius);border:1px solid #333}.timecode{color:var(--accent-primary);font-weight:600}.video-controls{display:flex;align-items:center;justify-content:center;gap:1rem;background:#222;padding:.75rem;border-radius:var(--radius);margin-bottom:.5rem;border:1px solid #333}.video-controls button{background:#333;border:1px solid #555;border-radius:var(--radius);width:36px;height:36px;color:var(--text-primary);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:.9rem}.video-controls button:hover{background:#444;border-color:var(--accent-primary);transform:translateY(-1px)}.video-controls .play-button{width:48px;height:48px;font-size:1.2rem;background:var(--white);color:var(--black);border-color:var(--white)}.video-controls .play-button:hover{background:#d9e5d7}.video-controls .in-button{background:var(--accent-warning);color:var(--black);border-color:var(--accent-warning);font-size:.7rem;font-weight:600}.video-controls .in-button:hover{background:#f7e81e}.video-controls .out-button{background:var(--accent-danger);color:var(--white);border-color:var(--accent-danger);font-size:.7rem;font-weight:600}.video-controls .out-button:hover{background:#e6471f}.export-buttons{display:flex;justify-content:center;gap:1rem;background:#222;padding:.75rem;border-radius:var(--radius);margin-bottom:.5rem;border:1px solid #333}.export-buttons button{background:var(--accent-success);color:var(--black);border:1px solid var(--accent-success);border-radius:var(--radius);padding:.6rem 1.2rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;font-family:var(--font-primary)}.export-buttons button:hover{background:#c1d6be;transform:translateY(-1px)}.export-buttons button:disabled{opacity:.4;cursor:not-allowed;transform:none}.marks-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:.75rem 1.5rem;box-shadow:var(--shadow);margin-bottom:.5rem;border:1px solid #333}.marks-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.marks-header h4{color:var(--text-primary);font-size:.9rem;font-weight:500}.marks-controls{display:flex;gap:.5rem}.marks-list{display:flex;gap:.4rem;flex-wrap:wrap;min-height:1.5rem;align-items:center}.mark-item{background:var(--accent-warning);color:var(--black);padding:.2rem .4rem;border-radius:var(--radius);font-size:.7rem;font-weight:500;font-family:var(--font-mono)}.mark-item.empty-state{background:transparent;color:var(--text-secondary);font-style:italic;font-family:var(--font-primary)}.export-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:.5rem 1.5rem;box-shadow:var(--shadow);margin-bottom:.5rem;border:1px solid #333}.export-section h3{color:var(--text-primary);margin-bottom:.5rem;text-align:center;font-size:1rem;font-weight:500}.export-toggles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem;margin-bottom:0}.toggle-group{display:flex;flex-direction:column;gap:.25rem}.toggle-group label{font-weight:500;color:var(--text-primary);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.1rem}.toggle-options{display:flex;flex-wrap:wrap;background:var(--black);border-radius:var(--radius);padding:.1rem;gap:.15rem;border:1px solid #333}.toggle-option{flex:1;padding:.3rem .15rem;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius);font-family:var(--font-primary);font-size:.65rem;font-weight:500;transition:all .2s;text-align:center;min-width:fit-content}.toggle-option.active{background:var(--accent-primary);color:var(--black)}.toggle-option:hover:not(.active){background:#333;color:var(--text-primary)}.shortcuts-legend{background:var(--bg-secondary);border-radius:var(--radius);padding:.75rem 1rem;box-shadow:var(--shadow);border:1px solid #333}.shortcuts-legend h4{color:var(--text-primary);margin-bottom:.5rem;font-size:.9rem;font-weight:500;text-align:center}.shortcuts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;font-size:.75rem}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:.3rem .5rem;background:var(--black);border-radius:var(--radius);border:1px solid #333}.shortcut-key{font-family:var(--font-mono);background:#333;padding:.1rem .3rem;border-radius:2px;font-size:.7rem;color:var(--accent-primary);font-weight:600}.shortcut-desc{color:var(--text-secondary)}.status-section{background:var(--bg-secondary);border-radius:var(--radius);padding:.5rem 1rem;box-shadow:var(--shadow);text-align:center;border:1px solid #333;margin-bottom:.5rem}.status-message{margin:0;font-weight:500;font-size:.8rem}.status-success{color:var(--accent-success)}.status-error{color:var(--accent-danger)}.status-warning{color:var(--accent-warning)}.status-info{color:var(--accent-info)}.progress-bar{width:100%;height:4px;background:#333;border-radius:2px;overflow:hidden;margin:.75rem 0}.progress-fill{height:100%;background:var(--accent-primary);transition:width .3s ease;border-radius:2px}.hidden{display:none!important}.desktop-only{display:block}@media (max-width: 768px){.app-container{padding:1rem}.header h1{font-size:2.5rem}.unified-input{grid-template-columns:1fr}.url-input-group{flex-direction:column}.export-toggles{grid-template-columns:1fr 1fr}.shortcuts-grid{grid-template-columns:1fr}.video-controls{flex-wrap:wrap;gap:.5rem}.marks-controls{flex-direction:column;gap:.25rem}.desktop-only{display:none!important}}@media (max-height: 800px){.app-container{padding:1rem}.header{margin-bottom:1rem}.video-section,.export-section,.marks-section{padding:1rem;margin-bottom:1rem}}.export-toggles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem}.toggle-group label{font-size:.65rem;line-height:1.2}@media (max-width: 768px){.export-toggles{grid-template-columns:1fr 1fr;gap:.6rem}.toggle-option{padding:.25rem;font-size:.65rem}}