:root { --accent: #ff5e5b; --bg: #0e0f13; --glass: rgba(255,255,255,.08); }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  font-family: -apple-system, system-ui, sans-serif; color: #f2f2f7;
  background: radial-gradient(1200px 600px at 50% -10%, #23252e, var(--bg));
}
.glass {
  width: min(640px, 92vw); padding: 2rem; border-radius: 20px;
  background: var(--glass); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
h1 { margin: 0 0 1.5rem; font-weight: 700; }
.accent { color: var(--accent); }
input, select, button { font: inherit; border-radius: 10px; padding: .6rem .8rem; }
input, select {
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.15); color: inherit; width: 100%;
}
button {
  background: var(--accent); color: #fff; border: none; cursor: pointer; font-weight: 600;
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; }
video, #result { width: 100%; border-radius: 12px; margin-top: 1rem; }
.controls { display: grid; gap: .8rem; margin-top: 1rem; }
.controls label { display: grid; gap: .3rem; font-size: .85rem; }
.controls .loop { grid-auto-flow: column; justify-content: start; align-items: center; gap: .5rem; }
.error { color: #ff6b6b; min-height: 1.2em; }
#status { min-height: 1.2em; }
#download { display: inline-block; margin-top: .8rem; color: var(--accent); }