:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.frame-canvas{background:#111;image-rendering:pixelated;border:1px solid #333;cursor:pointer}.frame-canvas.normal{width:240px;max-width:240px}.frame-canvas.zoomed{width:100%;max-width:800px}.dev-mode-section{background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:16px;margin:16px 0}.dev-mode-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.dev-mode-header h3{margin:0;color:orange}.dev-mode-controls{display:flex;align-items:center;gap:8px}.ffmpeg-output-container{background:#0a0a0a;border:1px solid #444;border-radius:4px;overflow:hidden}.ffmpeg-output-header{background:#222;padding:8px 12px;border-bottom:1px solid #444;display:flex;justify-content:space-between;align-items:center}.ffmpeg-output-header h4{margin:0;color:#fff;font-size:14px}.ffmpeg-output-content{max-height:400px;overflow-y:auto}.ffmpeg-output-text{margin:0;padding:12px;background:#000;color:#0f0;font-family:Courier New,monospace;font-size:12px;line-height:1.4;white-space:pre-wrap;word-break:break-all}.ffmpeg-output-controls{display:flex;gap:8px}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:flex-start;justify-content:flex-start;z-index:1000;padding:20px}.modal-content{background:#1a1a1a;border:1px solid #333;border-radius:8px;width:90%;max-width:1200px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 10px 30px #00000080;margin-top:20px;margin-left:20px}.modal-header{background:#222;padding:16px 20px;border-bottom:1px solid #444;display:flex;justify-content:space-between;align-items:center;border-radius:8px 8px 0 0}.modal-header h3{margin:0;color:orange}.modal-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px}.modal-close:hover{background:#444}.modal-body{flex:1;overflow:hidden;display:flex;flex-direction:column}.modal-ffmpeg-output{margin:0;padding:20px;background:#000;color:#0f0;font-family:Courier New,monospace;font-size:13px;line-height:1.4;white-space:pre-wrap;word-break:break-all;overflow:auto;flex:1;border:none;outline:none}.modal-footer{background:#222;padding:16px 20px;border-top:1px solid #444;display:flex;gap:12px;justify-content:flex-end;border-radius:0 0 8px 8px}.btn-secondary{background:#666;color:#fff}.btn-secondary:hover{background:#777}.app-root{position:relative;transition:margin-right .3s ease}.app-root.with-sidebar{margin-right:600px}.ffmpeg-sidebar{position:fixed;top:0;right:0;width:600px;height:100vh;background:#1a1a1a;border-left:1px solid #333;display:flex;flex-direction:column;z-index:100;box-shadow:-5px 0 15px #0000004d}.sidebar-header{background:#222;padding:16px 20px;border-bottom:1px solid #444;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.sidebar-header h3{margin:0;color:orange;font-size:16px}.sidebar-controls{display:flex;gap:8px;align-items:center}.sidebar-close{background:#666!important;color:#fff!important;border:none!important;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:16px;line-height:1}.sidebar-close:hover{background:#777!important}.sidebar-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.sidebar-ffmpeg-output{margin:0;padding:16px;background:#000;color:#0f0;font-family:Courier New,monospace;font-size:13px;line-height:1.4;white-space:pre-wrap;word-break:break-all;overflow:auto;flex:1;border:none;outline:none}.main-content{transition:margin-right .3s ease;width:100%;max-width:none}#root{max-width:1280px;margin:0 auto;padding:2rem}.app-root{text-align:center}.app-root.with-sidebar{text-align:left}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.frame-extraction-section{margin:20px 0;padding:20px;border:1px solid #ddd;border-radius:8px;background-color:#f9f9f9}.frame-buttons{margin:10px 0}.frame-info{margin-top:15px}.frame-thumbnails{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.frame-thumbnail{padding:8px 12px;border:1px solid #ccc;background-color:#fff;border-radius:4px;cursor:pointer;transition:all .2s}.frame-thumbnail:hover{background-color:#f0f0f0;border-color:#999}.frame-thumbnail.selected{background-color:#007bff;color:#fff;border-color:#007bff}.frame-display-section{margin:20px 0;padding:20px;border:1px solid #ddd;border-radius:8px;background-color:#f9f9f9}.frame-canvas-container{display:flex;justify-content:center;margin:15px 0}.pretty-block{background-color:#f8f9fa;padding:10px;border-radius:5px;font-size:15px;border:1px solid #ddd;text-align:left;white-space:pre-wrap;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.pretty-line{font-weight:700;background-color:transparent;border-radius:3px;padding:1px 2px;font-style:normal;color:#333}.pretty-line.is-desc{font-style:italic;color:#666}.pretty-line.is-nonzero{color:#000}.app-root{padding:20px;font-family:Arial,sans-serif}.upload-section{margin-bottom:20px}.file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dropzone{margin-top:10px;padding:16px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;color:#475569;text-align:left;cursor:pointer}.dropzone.active{background-color:#eff6ff;border-color:#3b82f6;box-shadow:inset 0 0 0 2px #3b82f626}.dropzone-title{font-weight:700}.dropzone-hint{font-size:12px;color:#64748b;margin-top:6px}.clickable{cursor:pointer;text-decoration:underline}.file-input{padding:10px;border:2px dashed #ccc;border-radius:5px}.file-input[disabled]{cursor:not-allowed;opacity:.6}.file-meta{margin-bottom:12px;padding:6px 10px;background-color:#f9f9f9;border-radius:6px;border:1px solid #e5e7eb;font-size:13px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta .label{font-weight:700}.muted{color:#6b7280}.text{color:#374151}.mode-radio{margin-left:20px}.help-box{font-size:12px;color:#666;margin-bottom:8px;padding:8px 12px;background-color:#f0f0f0;border-radius:4px}.panel{margin-top:20px;padding:16px;background-color:#f8f9fa;border-radius:8px;border:1px solid #e9ecef}.panel-title{margin-bottom:12px;font-size:14px;font-weight:600;color:#495057}.top-controls{display:flex;align-items:center;gap:12px;margin-bottom:16px}.zoom-controls{display:flex;align-items:center;gap:8px;margin-left:20px}.zoom-button{padding:4px 8px;font-size:12px}.zoom-percent{font-size:12px;min-width:40px;text-align:center}.jump-controls{margin-left:auto;display:flex;align-items:center;gap:6px}.jump-input{width:90px}.jump-button{padding:6px 10px}.timeline{display:flex;gap:2px;overflow-x:auto;padding:8px 0;min-height:80px;align-items:flex-end;transform-origin:left top}.timeline-item{min-width:24px;width:var(--bar-width, 24px);display:flex;flex-direction:column;align-items:center;position:relative}.timeline-badge-wrap{margin-bottom:4px;display:flex;justify-content:center}.timeline-badge{font-size:9px;color:#fff;padding:1px 4px;border-radius:6px;font-weight:500;white-space:nowrap;background:var(--badge-bg, #757575)}.timeline-badge.sps{background:#455a64}.timeline-badge.pps{background:#1e88e5}.timeline-badge.sei{background:#616161}.timeline-badge.aud{background:#8d6e63}.timeline-badge.eos{background:#d32f2f}.timeline-badge.eostr{background:#c62828}.timeline-badge.idr{background:#ff9800}.timeline-badge.nonidr{background:#9e9e9e}.timeline-index-wrap{margin-bottom:4px;display:flex;justify-content:center}.timeline-index{font-size:10px;font-weight:600;color:#333;text-align:center}.timeline-bar{width:100%;border-radius:3px;cursor:pointer;transition:all .2s ease;height:var(--bar-height, 24px);background-color:var(--bar-bg, #f5f5f5)}.timeline-bar.selected{border:2px solid #2196f3;box-shadow:0 2px 8px #2196f34d}.timeline-bar.unselected{border:1px solid #ddd;box-shadow:0 1px 3px #0000001a}.bar-h-20{height:20px}.bar-h-24{height:24px}.bar-h-28{height:28px}.bar-h-32{height:32px}.bar-h-36{height:36px}.bar-h-40{height:40px}.bar-h-44{height:44px}.bar-h-48{height:48px}.bar-h-52{height:52px}.bar-h-56{height:56px}.bar-h-60{height:60px}.bar-h-64{height:64px}.bar-h-68{height:68px}.bar-h-72{height:72px}.bar-h-76{height:76px}.bar-h-80{height:80px}.bar-h-84{height:84px}.bar-h-88{height:88px}.bar-h-92{height:92px}.bar-h-96{height:96px}.bar-h-100{height:100px}.bar-h-104{height:104px}.bar-h-108{height:108px}.bar-h-112{height:112px}.bar-h-116{height:116px}.bar-h-120{height:120px}.timeline-bar.bg-idr{background-color:#ffecb3}.timeline-bar.bg-i{background-color:#e3f2fd}.timeline-bar.bg-p{background-color:#e8f5e9}.timeline-bar.bg-b{background-color:#f3e5f5}.timeline-bar.bg-default{background-color:#f5f5f5}.legend{margin-top:12px;display:flex;gap:16px;font-size:11px;color:#666;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:4px}.legend-chip{width:12px;height:3px;border-radius:1px;background-color:var(--chip-bg, #e5e7eb)}.legend-chip.idr{background-color:#ff9800}.legend-chip.i{background-color:#e3f2fd}.legend-chip.p{background-color:#e8f5e9}.legend-chip.b{background-color:#f3e5f5}.legend-chip.sps{background-color:#455a64}.legend-chip.pps{background-color:#1e88e5}.details-card{margin-top:20px;padding:16px;border:1px solid #ddd;border-radius:8px;background-color:#fff}.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:10px}.hex-block{background-color:#0f172a;color:#e2e8f0;padding:10px;border-radius:5px;font-size:11px;border:1px solid #1f2937}.hex-meta{font-size:12px;color:#555;margin-bottom:6px}.btn{margin-top:8px;padding:6px 12px;font-size:12px;background-color:#e2e8f0;color:#334155;border:1px solid #cbd5e1;border-radius:4px;cursor:pointer}.hex-line{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.4;text-align:left;display:flex;align-items:flex-start}.hex-offset{color:#9ca3af;min-width:80px;text-align:left}.hex-gap{margin:0 8px;min-width:8px}.hex-bytes{display:flex;min-width:400px}.hex-ascii{display:flex;min-width:200px}.hex-sep{color:#9ca3af}.hex-byte{color:#e2e8f0;padding:1px 2px;margin:0 1px}.hex-ascii-char{color:#e2e8f0}.hex-pad{color:#6b7280;opacity:.5}.ffmpeg-test-section{margin-top:20px;padding:16px;background-color:#f0f9ff;border:1px solid #bae6fd;border-radius:8px}.ffmpeg-test-section h3{margin:0 0 12px;font-size:16px;color:#0369a1}.ffmpeg-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.ffmpeg-buttons .btn{margin:0;padding:8px 12px;font-size:13px;background-color:#0369a1;color:#fff;border:1px solid #0284c7;border-radius:6px;cursor:pointer;transition:background-color .2s}.ffmpeg-buttons .btn:hover:not(:disabled){background-color:#0284c7}.ffmpeg-buttons .btn:disabled{background-color:#94a3b8;border-color:#94a3b8;cursor:not-allowed;opacity:.6}.ffmpeg-result{padding:8px 12px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:4px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;white-space:pre-wrap;word-break:break-word}.mt-10{margin-top:10px}.mb-12{margin-bottom:12px}.mb-8{margin-bottom:8px}.m-0{margin:0}.ellipsis{overflow:hidden;text-overflow:ellipsis}.text-muted{color:#666}.my-4{margin:4px 0}.ml-8{margin-left:8px}.example-files-section{margin-top:10px;padding:16px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;color:#475569}.example-files-toggle{background:#3b82f6;color:#fff;border:none;padding:12px 20px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px;width:100%;justify-content:center}.example-files-toggle:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.example-files-toggle:active{transform:translateY(0);background:#1d4ed8}.example-files-list{margin-top:16px;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.example-files-list h3{margin:0 0 12px;font-size:16px;color:#374151;font-weight:600;text-align:center}.example-file-item{margin-bottom:12px}.example-file-content{display:flex;gap:8px;align-items:stretch}.example-file-button{flex:1;background:#fff;border:2px dashed #cbd5e1;border-radius:8px;padding:12px 16px;cursor:pointer;transition:all .2s ease;text-align:left;display:flex;flex-direction:column;gap:4px}.download-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:6px;padding:12px 16px;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:500;min-width:80px;display:flex;align-items:center;justify-content:center;white-space:nowrap}.example-file-button:hover{background-color:#eff6ff;border-color:#3b82f6;box-shadow:inset 0 0 0 2px #3b82f626;transform:translateY(-1px)}.example-file-button:active{transform:translateY(0);background-color:#dbeafe}.example-file-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.download-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.download-button:active{transform:translateY(0)}.download-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.file-name{font-weight:600;color:#1f2937;font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.file-description{color:#6b7280;font-size:12px;font-style:italic}.app-footer{margin-top:40px;padding:20px 0;border-top:1px solid #e5e7eb;background-color:#f9fafb}.footer-content{text-align:center;color:#6b7280;font-size:14px}.footer-content p{margin:4px 0}.footer-content a{color:#3b82f6;text-decoration:none;font-weight:500}.footer-content a:hover{color:#1d4ed8;text-decoration:underline}