@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--bg-main:#0b0f19;--bg-panel:#111827bf;--bg-input:#0f172a99;--text-main:#f1f5f9;--text-muted:#94a3b8;--accent:#6366f1;--accent-hover:#4f46e5;--accent-gradient:linear-gradient(135deg, #6366f1, #a855f7, #ec4899);--danger:#ef4444;--danger-hover:#dc2626;--success:#10b981;--border:#ffffff14;--shadow-sm:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 24px 48px -12px #00000080;--glass-blur:blur(20px);--radius-md:14px;--radius-lg:24px;--radius-full:9999px}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;color:var(--text-main);background-color:var(--bg-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(circle at 15%,#6366f126,#0000 25%),radial-gradient(circle at 85% 30%,#a855f726,#0000 25%),radial-gradient(circle at 50% 100%,#ec48991a,#0000 30%);background-attachment:fixed;margin:0;font-family:Inter,system-ui,-apple-system,sans-serif}button,select,input{font:inherit}.shell{justify-content:center;align-items:center;min-height:100vh;padding:40px 28px;display:flex}.workspace{grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:24px;width:min(1200px,100%);margin:0 auto;display:grid}.simple-workspace{grid-template-columns:minmax(340px,400px) minmax(0,1fr)}.panel,.stage{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-panel);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-lg);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s;overflow:hidden}.panel:hover,.stage:hover{box-shadow:0 32px 64px -16px #0009}.controls{flex-direction:column;gap:32px;padding:36px;display:flex}.brand{align-items:center;gap:18px;display:flex}.brand-mark{color:#fff;background:var(--accent-gradient);border-radius:16px;flex:0 0 56px;place-items:center;width:56px;height:56px;font-size:20px;font-weight:800;display:grid;position:relative;box-shadow:0 8px 24px #6366f14d}.brand-mark:after{content:"";border-radius:inherit;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #fff3}h1{letter-spacing:-.02em;background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:26px;font-weight:800}p{color:var(--text-muted);margin:6px 0 0;font-size:14px;font-weight:500}.dropzone{border-radius:var(--radius-md);cursor:pointer;text-align:center;background:#0f172a66;border:2px dashed #94a3b840;place-items:center;gap:12px;min-height:180px;padding:32px 24px;transition:all .3s cubic-bezier(.16,1,.3,1);display:grid;position:relative;overflow:hidden}.dropzone:before{content:"";background:var(--accent-gradient);opacity:0;z-index:0;transition:opacity .3s;position:absolute;inset:0}.dropzone:hover,.dropzone.is-dragging{background:#0f172ab3;border-color:#a855f799;transform:translateY(-4px);box-shadow:0 12px 32px #0000004d}.dropzone:hover:before,.dropzone.is-dragging:before{opacity:.08}.dropzone>*{z-index:1}.dropzone input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.drop-icon{border-radius:var(--radius-full);color:#0000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0d;border:1px solid #ffffff1a;justify-content:center;align-items:center;width:52px;height:52px;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;box-shadow:0 4px 12px #0003}.drop-icon:before,.drop-icon:after{content:"";background-color:#fff;border-radius:2px;transition:all .4s cubic-bezier(.34,1.56,.64,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.drop-icon:before{width:20px;height:2px}.drop-icon:after{width:2px;height:20px}.dropzone:hover .drop-icon{background:var(--accent);border-color:#0000;transform:scale(1.15)rotate(90deg);box-shadow:0 8px 24px #6366f166}.dropzone strong{color:#fff;letter-spacing:.01em;font-size:16px;font-weight:600}.dropzone small{max-width:280px;color:var(--text-muted);font-size:13px;line-height:1.5}label{display:block}label span{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;font-size:12px;font-weight:700;display:block}select,.url-input{border:1px solid var(--border);border-radius:var(--radius-md);width:100%;min-height:52px;color:var(--text-main);background:var(--bg-input);font-size:15px;font-weight:500;transition:all .2s}select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;padding:0 40px 0 16px}select:focus,.url-input:focus{border-color:var(--accent);background:#0f172acc;outline:none;box-shadow:0 0 0 4px #6366f126}.url-input{padding:0 16px}.url-input::placeholder{color:#94a3b866;font-weight:400}.actions{gap:12px;margin-top:8px;display:flex}button,.download{border-radius:var(--radius-md);letter-spacing:.02em;border:none;justify-content:center;align-items:center;min-height:52px;padding:0 24px;font-size:15px;font-weight:600;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative;overflow:hidden}.primary{color:#fff;background:var(--accent-gradient);cursor:pointer;flex:1;box-shadow:0 8px 20px #6366f14d}.primary:before{content:"";opacity:0;background:linear-gradient(#fff3,#0000);transition:opacity .2s;position:absolute;inset:0}.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 28px #6366f166}.primary:hover:not(:disabled):before{opacity:1}.primary:active:not(:disabled){transform:translateY(1px);box-shadow:0 4px 12px #6366f14d}.primary:disabled{cursor:not-allowed;opacity:.5;filter:grayscale(.6);box-shadow:none}.download{color:var(--success);background:#10b9811a;border:1px solid #10b98140;box-shadow:0 4px 12px #10b9811a}.download:hover{background:#10b98133;border-color:#10b98166;transform:translateY(-2px);box-shadow:0 8px 20px #10b98133}.danger{color:var(--danger);cursor:pointer;background:#ef44441a;border:1px solid #ef444440}.danger:hover:not(:disabled){background:#ef444433;border-color:#ef444466;transform:translateY(-2px)}.button-icon{margin-right:8px;font-size:16px}.probe-panel{border:1px solid var(--border);border-radius:var(--radius-md);background:#0f172a6b;gap:16px;padding:18px;display:grid}.probe-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.probe-head strong{color:var(--text-main);font-size:15px;display:block}.probe-btn{color:#c7d2fe;cursor:pointer;white-space:nowrap;background:#6366f11f;border:1px solid #6366f159;flex:none;min-height:40px;padding:0 14px;font-size:13px}.probe-btn:hover:not(:disabled){background:#6366f133;border-color:#a855f78c;transform:translateY(-1px)}.probe-btn:disabled{cursor:not-allowed;opacity:.55}.probe-status{color:var(--text-muted);margin:0;font-size:13px;line-height:1.5}.probe-result{gap:14px;display:grid}.info-section{gap:10px;display:grid}.info-section h2{color:#cbd5e1;letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:12px;font-weight:800}.info-grid{gap:8px;display:grid}.info-row{background:#0206173d;border:1px solid #ffffff0f;border-radius:10px;grid-template-columns:72px minmax(0,1fr);align-items:start;gap:10px;padding:10px 12px;display:grid}.info-row span{color:var(--text-muted);font-size:12px;line-height:1.4}.info-row strong{min-width:0;color:var(--text-main);overflow-wrap:anywhere;text-align:right;font-size:12px;font-weight:650;line-height:1.45}.stage{grid-template-rows:1fr auto;min-height:540px;display:grid}.preview-wrap{background:radial-gradient(circle,#1e293b66,#0f172acc);place-items:center;display:grid;position:relative;overflow:hidden}.preview-wrap:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0}video{z-index:1;background:#000;border-radius:8px;width:calc(100% - 32px);max-height:calc(100vh - 240px);margin:16px;display:none;box-shadow:0 20px 40px #0009}video.is-visible{display:block}.empty-state{z-index:1;color:var(--text-muted);text-align:center;place-items:center;gap:24px;animation:6s ease-in-out infinite float;display:grid;position:relative}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}.film{border-radius:var(--radius-md);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0003;border:1px solid #ffffff14;grid-template-columns:repeat(4,48px);gap:12px;padding:16px;display:grid;box-shadow:0 8px 32px #0000004d}.film span{aspect-ratio:1;background:#ffffff0f;border-radius:8px;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1a}.film span:after{content:"";background:linear-gradient(135deg,#0000,#ffffff26 50%,#0000);animation:3s infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}.film span:nth-child(2):after{animation-delay:.15s}.film span:nth-child(3):after{animation-delay:.3s}.film span:nth-child(4):after{animation-delay:.45s}@keyframes shimmer{to{transform:translate(100%)}}.empty-state p{letter-spacing:.02em;font-size:15px;font-weight:500}.status-band{border-top:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172a80;grid-template-columns:minmax(190px,240px) 1fr minmax(80px,auto);align-items:center;gap:24px;padding:24px 32px;display:grid}.eyebrow{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin:0 0 6px;font-size:11px;font-weight:700;display:block}#statusText{color:var(--text-main);letter-spacing:.01em;font-size:14px;font-weight:600}.progress-shell{border-radius:var(--radius-full);background:#ffffff0d;height:8px;overflow:hidden;box-shadow:inset 0 1px 3px #0000004d}#progressBar{border-radius:inherit;background:var(--accent-gradient);width:0%;height:100%;transition:width .4s cubic-bezier(.16,1,.3,1);position:relative;box-shadow:0 0 10px #a855f780}#progressBar:after{content:"";background:linear-gradient(90deg,#fff0 0%,#fff6 50%,#fff0 100%);animation:2s linear infinite progressShine;position:absolute;inset:0}@keyframes progressShine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-shell.is-indeterminate #progressBar{width:40%;animation:1.5s ease-in-out infinite alternate progressPulse}#progressText{color:#a855f7;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-size:14px;font-weight:700}@keyframes progressPulse{0%{transform:translate(-10%)}to{transform:translate(160%)}}.hidden{display:none!important}@media (width<=860px){.shell{align-items:flex-start;padding:20px 16px}.workspace{grid-template-columns:1fr}.stage{grid-template-rows:minmax(300px,50vh) auto}.status-band{grid-template-columns:1fr auto;gap:16px;padding:20px}.status-band>div:first-child{grid-column:1/-1}.probe-head{align-items:flex-start}.info-row{grid-template-columns:64px minmax(0,1fr)}}