:root{
  --bg:#0b0d12; --panel:#141821; --panel2:#1b2130;
  --ink:#eef1f7; --dim:#8b93a7; --line:#262c3a;
  --accent:#6ee7b7; --accent2:#60a5fa; --danger:#f87171;
  --radius:16px; --shadow:0 10px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #16203a 0%, var(--bg) 55%);
  color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.hero{text-align:center;padding:64px 20px 28px}
.hero h1{
  margin:0;font-size:clamp(34px,6vw,56px);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{margin:10px 0 0;color:var(--dim);font-size:clamp(15px,2.4vw,19px)}

main{max-width:760px;margin:0 auto;padding:0 20px 80px}

/* dropzone */
.dropzone{
  border:2px dashed var(--line);border-radius:var(--radius);
  background:var(--panel);padding:54px 20px;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s,transform .1s;
}
.dropzone:hover,.dropzone.drag{border-color:var(--accent2);background:var(--panel2)}
.drop-icon{
  width:62px;height:62px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;font-size:22px;color:#0b0d12;
  background:linear-gradient(120deg,var(--accent),var(--accent2));
}
.drop-title{margin:0;font-size:20px;font-weight:600}
.drop-sub{margin:6px 0 0;color:var(--dim);font-size:14px}
.link-btn{background:none;border:none;color:var(--accent2);cursor:pointer;font:inherit;text-decoration:underline;padding:0}

/* workbench */
.workbench{
  display:grid;grid-template-columns:1.3fr 1fr;gap:22px;margin-top:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
}
.src-video{width:100%;border-radius:12px;background:#000;max-height:340px}
.controls-col{display:flex;flex-direction:column;gap:18px;justify-content:center}
.ctrl{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--ink)}
.ctrl span{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ctrl .cap{color:var(--dim);font-style:normal;font-size:12px}
.ctrl output{color:var(--accent);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent2)}
.toggle{flex-direction:row;align-items:center;gap:10px}
.toggle input{width:18px;height:18px;accent-color:var(--accent)}

/* buttons */
.primary-btn{
  display:inline-block;text-align:center;border:none;cursor:pointer;
  padding:13px 20px;border-radius:12px;font:inherit;font-weight:700;color:#08110d;
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  transition:transform .08s,filter .2s;text-decoration:none;
}
.primary-btn:hover{filter:brightness(1.06)}
.primary-btn:active{transform:translateY(1px)}
.ghost-btn{
  background:none;border:1px solid var(--line);color:var(--dim);
  padding:11px 18px;border-radius:12px;cursor:pointer;font:inherit;
}
.ghost-btn:hover{border-color:var(--accent2);color:var(--ink)}

/* progress */
.progress{text-align:center;padding:54px 20px}
.spinner{
  width:46px;height:46px;margin:0 auto 18px;border-radius:50%;
  border:4px solid var(--line);border-top-color:var(--accent2);animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:18px auto 0;max-width:360px}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}

/* result */
.result{text-align:center;padding:14px 0}
.result-img{max-width:100%;border-radius:14px;box-shadow:var(--shadow);background:#000}
.result-actions{display:flex;gap:12px;justify-content:center;margin:18px 0 6px;flex-wrap:wrap}
.result-size{color:var(--dim);font-size:13px;margin:4px 0 0}
.upsell{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;align-items:center}
.upsell-btn{background:var(--panel2);border:1px dashed var(--line);color:var(--dim);padding:12px 18px;border-radius:12px;font:inherit;cursor:not-allowed}
.donate-link{color:var(--accent);text-decoration:none;font-size:14px}
.donate-link:hover{text-decoration:underline}

/* misc */
.error{background:rgba(248,113,113,.12);border:1px solid var(--danger);color:#fecaca;padding:14px 16px;border-radius:12px;margin-top:20px}
footer{text-align:center;color:var(--dim);font-size:13px;padding:30px 20px 60px;max-width:620px;margin:0 auto}
.dim{color:#5f6678;display:block;margin-top:4px}

@media(max-width:640px){
  .workbench{grid-template-columns:1fr}
  .hero{padding:42px 18px 22px}
}