@import "https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap";:root{--bg:#0a0a0f;--surface:#0f0f1a;--border:#1a1a2e;--accent:#0f8;--accent2:#0af;--accent3:#ff6b35;--text:#c8d8e8;--text-dim:#4a5a6a;--text-bright:#e8f4ff;--danger:#f35;--glow:0 0 20px #00ff884d;--glow2:0 0 20px #00aaff4d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Share Tech Mono,monospace;overflow-x:hidden}#root{text-align:left;border:none;width:100%;max-width:100%;min-height:100vh;margin:0;display:block}body:before{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(#00ff8808 1px,#0000 1px),linear-gradient(90deg,#00ff8808 1px,#0000 1px);background-size:40px 40px;position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(at 30% 20%,#00aaff0d 0%,#0000 50%),radial-gradient(at 70% 80%,#00ff880d 0%,#0000 50%);width:200%;height:200%;position:fixed;top:-50%;left:-50%}.container{z-index:1;max-width:800px;margin:0 auto;padding:40px 20px 60px;position:relative}.header{text-align:center;margin-bottom:48px}.header-badge{letter-spacing:4px;color:var(--accent);text-transform:uppercase;border:1px solid #00ff884d;margin-bottom:16px;padding:4px 12px;font-size:10px;display:inline-block}h1{letter-spacing:2px;background:linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:12px;font-family:Orbitron,monospace;font-size:clamp(28px,6vw,52px);font-weight:900;line-height:1.1}.subtitle{color:var(--text-dim);letter-spacing:2px;font-size:12px}.panel{background:var(--surface);border:1px solid var(--border);margin-bottom:16px;position:relative}.panel:before{content:"";background:linear-gradient(90deg, transparent, var(--accent2), transparent);opacity:.5;height:1px;position:absolute;top:0;left:0;right:0}.panel-header{letter-spacing:3px;color:var(--accent2);border-bottom:1px solid var(--border);text-transform:uppercase;align-items:center;gap:8px;padding:10px 16px;font-size:10px;display:flex}.panel-header:before{content:"▶";color:var(--accent);font-size:8px}.panel-body{padding:20px}.upload-zone{text-align:center;cursor:pointer;border:1px dashed #00aaff4d;padding:40px 20px;transition:all .2s;position:relative;overflow:hidden}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:#00ff8808}.upload-zone.drag-over:after{content:"";background:#00ff880d;animation:.6s infinite alternate pulse;position:absolute;inset:0}@keyframes pulse{0%{opacity:.5}to{opacity:1}}.upload-icon{color:var(--text-dim);margin-bottom:12px;font-size:32px;display:block}.upload-text{color:var(--text-dim);margin-bottom:6px;font-size:13px}.upload-hint{color:var(--text-dim);opacity:.5;font-size:10px}#file-input{display:none}.file-info{align-items:center;gap:12px;display:none}.file-info.visible{display:flex}.file-icon{background:#00aaff1a;border:1px solid #00aaff4d;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;display:flex}.file-details{flex:1;min-width:0}.file-name{color:var(--text-bright);white-space:nowrap;text-overflow:ellipsis;margin-bottom:3px;font-size:13px;overflow:hidden}.file-meta{color:var(--text-dim);letter-spacing:1px;font-size:10px}.file-remove{color:var(--danger);cursor:pointer;letter-spacing:1px;background:0 0;border:1px solid #ff33554d;flex-shrink:0;padding:4px 10px;font-family:Share Tech Mono,monospace;font-size:10px;transition:all .2s}.file-remove:hover{border-color:var(--danger);background:#ff33551a}.params-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (width<=500px){.params-grid{grid-template-columns:1fr}}.param-group{flex-direction:column;gap:6px;display:flex}.param-label{color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;font-size:10px}.param-input,.param-select{background:var(--bg);border:1px solid var(--border);color:var(--text);appearance:none;outline:none;width:100%;padding:8px 12px;font-family:Share Tech Mono,monospace;font-size:13px;transition:border-color .2s}.param-input:focus,.param-select:focus{border-color:var(--accent2);box-shadow:0 0 0 1px #0af3}.param-select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a5a6a'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.param-select option{background:var(--surface)}.param-hint{color:var(--text-dim);opacity:.5;font-size:10px}.convert-btn{border:1px solid var(--accent);width:100%;color:var(--accent);letter-spacing:4px;cursor:pointer;text-transform:uppercase;background:0 0;margin-top:8px;padding:16px;font-family:Orbitron,monospace;font-size:13px;font-weight:700;transition:all .2s;position:relative;overflow:hidden}.convert-btn:before{content:"";background:var(--accent);z-index:0;transition:transform .3s;position:absolute;inset:0;transform:translate(-100%)}.convert-btn:hover:before{transform:translate(0)}.convert-btn:hover{color:var(--bg)}.convert-btn>span{z-index:1;position:relative}.convert-btn:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.converting-overlay{-webkit-backdrop-filter:blur(6px);z-index:10000;pointer-events:all;background:#06080cd1;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:none;position:fixed;inset:0}.converting-overlay.visible{display:flex}.converting-spinner{border:2px solid var(--border);border-top-color:var(--accent);border-right-color:var(--accent2);border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}.converting-text{letter-spacing:6px;color:var(--accent);font-family:Orbitron,monospace;font-size:14px;font-weight:700}.converting-sub{color:var(--text-dim);letter-spacing:1px;text-align:center;max-width:360px;font-size:12px;line-height:1.5}.converting-metrics{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:4px;display:flex}.metric-chip{text-transform:none;letter-spacing:0;background:#00000059;border:1px solid #00ff8838;border-radius:999px;align-items:baseline;gap:6px;padding:4px 12px;font-weight:500;display:inline-flex}.metric-key{color:var(--text-dim);letter-spacing:1px;font-size:11px}.metric-val{color:var(--accent);font-variant-numeric:tabular-nums;font-family:ui-monospace,Cascadia Code,SF Mono,monospace;font-size:13px;font-weight:600}.metric-sep{opacity:.4;margin:0 1px;font-weight:400}.converting-pct{letter-spacing:2px;color:var(--text-bright);font-variant-numeric:tabular-nums;min-height:1.2em;font-family:Orbitron,monospace;font-size:22px;font-weight:700}.converting-bar-wrap{background:var(--border);width:min(280px,70vw);height:3px;margin-top:2px;position:relative;overflow:hidden}.converting-bar{background:linear-gradient(90deg, var(--accent2), var(--accent));width:0%;height:100%;transition:width .25s;box-shadow:0 0 8px #00ff8880}.converting-bar.indeterminate{animation:1.15s ease-in-out infinite converting-bar-slide;width:32%!important}@keyframes converting-bar-slide{0%{opacity:.7;transform:translate(-100%)}50%{opacity:1;transform:translate(220%)}to{opacity:.7;transform:translate(-100%)}}.progress-section{display:none}.progress-section.visible{display:block}.progress-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.log-copy-btn{border:1px solid var(--border);color:var(--text-dim);letter-spacing:1px;cursor:pointer;text-transform:uppercase;background:0 0;padding:2px 10px;font-family:inherit;font-size:10px;transition:color .15s,border-color .15s}.log-copy-btn:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}.log-copy-btn:disabled{opacity:.35;cursor:not-allowed}.log-output{background:var(--bg);border:1px solid var(--border);height:220px;color:var(--text-dim);-webkit-user-select:text;user-select:text;cursor:text;padding:12px;font-size:11px;line-height:1.8;overflow-y:auto}.log-output::-webkit-scrollbar{width:4px}.log-output::-webkit-scrollbar-track{background:var(--bg)}.log-output::-webkit-scrollbar-thumb{background:var(--border)}.log-line{-webkit-user-select:text;user-select:text;gap:8px;display:flex}.log-time{color:var(--text-dim);opacity:.4;flex-shrink:0}.log-msg{color:var(--text)}.log-msg.success{color:var(--accent)}.log-msg.error{color:var(--danger)}.log-msg.info{color:var(--accent2)}.log-msg.warn{color:var(--accent3)}.progress-bar-wrap{background:var(--border);height:3px;margin-top:12px;position:relative;overflow:hidden}.progress-bar{background:linear-gradient(90deg, var(--accent2), var(--accent));width:0%;height:100%;transition:width .3s;box-shadow:0 0 8px #00ff8880}.progress-bar.indeterminate{animation:1.2s infinite slide;width:40%!important}@keyframes slide{0%{transform:translate(-200%)}to{transform:translate(350%)}}.progress-label{color:var(--text-dim);letter-spacing:1px;justify-content:space-between;margin-top:6px;font-size:10px;display:flex}.result-section{margin-top:16px;display:none}.result-section.visible{display:block}.result-body{padding-bottom:16px}.result-stats{background:var(--border);border:1px solid var(--border);grid-template-columns:repeat(2,1fr);gap:1px;margin-bottom:16px;display:grid}.stat-item{background:var(--surface);text-align:center;padding:16px 12px}.stat-value{color:var(--accent);word-break:break-all;margin-bottom:6px;font-family:Orbitron,monospace;font-size:18px;display:block}.stat-label{color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;font-size:9px}.download-btn{background:var(--accent);width:100%;color:var(--bg);letter-spacing:4px;cursor:pointer;text-align:center;text-transform:uppercase;box-shadow:var(--glow);box-sizing:border-box;border:none;padding:16px;font-family:Orbitron,monospace;font-size:13px;font-weight:700;text-decoration:none;transition:all .2s;display:block}.download-btn:hover:not(:disabled){background:var(--text-bright);box-shadow:0 0 30px #00ff8880}.download-btn:disabled{opacity:.6;cursor:wait}.download-fallback-link{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.save-hint{color:var(--accent);text-align:center;margin-top:10px;font-size:11px}.scanlines{pointer-events:none;z-index:999;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#0000000d 2px 4px);position:fixed;inset:0}#decode-video{width:320px;height:240px;position:fixed;top:-9999px;left:-9999px}#decode-canvas{position:fixed;top:-9999px;left:-9999px}@keyframes spin{to{transform:rotate(360deg)}}