:root { --ink:#f7f4ed; --muted:#a7a29a; --line:#2a2928; --orange:#ff5c35; --lime:#c9ff55; --panel:#151514; }
* { box-sizing:border-box; }
html { background:#0b0b0a; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 50% -20%,#27231d 0,transparent 42%); }
.glow { position:fixed; width:360px; height:360px; border-radius:50%; filter:blur(110px); opacity:.12; pointer-events:none; }
.glow-one { background:var(--orange); top:12%; left:-180px; }.glow-two { background:var(--lime); right:-220px; bottom:8%; }
main { width:min(1160px,calc(100% - 40px)); margin:auto; padding:44px 0 80px; position:relative; }
.brand { font-size:13px; letter-spacing:.24em; font-weight:800; display:flex; align-items:center; gap:10px; }
.brand span { display:grid; place-items:center; width:29px; height:29px; background:var(--ink); color:#0b0b0a; border-radius:50%; font-family:Georgia,serif; font-size:18px; }
.hero { padding:70px 0 58px; max-width:900px; }
.eyebrow { color:var(--lime); letter-spacing:.18em; font-weight:700; font-size:12px; margin:0 0 20px; }
h1 { font:500 clamp(48px,8vw,92px)/.94 Georgia,"Times New Roman",serif; letter-spacing:-.045em; margin:0; }
h1 em { color:var(--orange); font-weight:400; }
.intro { color:var(--muted); max-width:630px; font-size:18px; line-height:1.65; margin:30px 0 0; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:start; gap:22px; }
form,.job-panel { background:color-mix(in srgb,var(--panel) 94%,transparent); border:1px solid var(--line); border-radius:20px; padding:34px; box-shadow:0 24px 80px #0005; }
.job-panel { position:sticky; top:22px; text-align:center; }
.section-title { display:flex; gap:15px; align-items:flex-start; text-align:left; margin-bottom:30px; }
.section-title>span { color:var(--orange); font:italic 20px Georgia,serif; }
h2 { font-size:21px; margin:0 0 5px; }.section-title p { color:var(--muted); font-size:13px; margin:0; }
.grid { display:grid; gap:18px; }.grid.two { grid-template-columns:1fr 1fr; }
label { display:block; color:#d8d4cc; font-size:13px; font-weight:650; letter-spacing:.01em; margin:0 0 20px; }
input,textarea { width:100%; margin-top:9px; border:1px solid #353330; border-radius:10px; background:#0e0e0d; color:var(--ink); padding:14px 15px; font:inherit; font-weight:450; outline:none; transition:.2s; }
textarea { resize:vertical; min-height:190px; line-height:1.55; }
input:focus,textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px #ff5c3518; }
small { display:block; color:#78746e; margin-top:6px; font-weight:400; }
.actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:8px; }
.automatic-note { color:var(--muted); font-size:13px; line-height:1.5; margin:0; max-width:390px; }
.check { display:flex; align-items:center; gap:9px; color:var(--muted); margin:0; font-weight:450; }.check input { width:auto; margin:0; accent-color:var(--orange); }
button,.download { border:0; border-radius:999px; background:var(--orange); color:white; padding:14px 20px; font-weight:750; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:28px; transition:.2s; }
button:hover,.download:hover { transform:translateY(-2px); filter:brightness(1.08); }button:disabled { opacity:.5; cursor:wait; }
button b { font-size:20px; }.secondary { background:transparent; border:1px solid #3b3935; color:var(--muted); margin-top:25px; }
.error { background:#381c18; border:1px solid #7d3026; color:#ffb5a6; border-radius:9px; padding:12px 14px; font-size:13px; text-align:left; }
.progress-ring { --progress:0deg; width:135px; height:135px; border-radius:50%; display:grid; place-items:center; margin:12px auto 22px; background:conic-gradient(var(--orange) var(--progress),#282624 0); position:relative; }
.progress-ring:after { content:""; position:absolute; inset:8px; background:var(--panel); border-radius:50%; }.progress-ring strong { z-index:1; font:500 30px Georgia,serif; }
.progress-track { height:4px; border-radius:10px; background:#292725; overflow:hidden; }.progress-track i { display:block; width:0; height:100%; background:var(--lime); transition:width .5s; }
.job-panel h3 { margin:22px 0 7px; }.job-panel>p { color:var(--muted); line-height:1.5; font-size:14px; }
.video-result { margin-top:25px; }.video-result video { width:100%; border-radius:10px; background:#050505; display:block; margin-bottom:14px; }.download { justify-content:center; width:100%; }
footer { border-top:1px solid var(--line); color:#77736c; display:flex; justify-content:space-between; padding:20px max(20px,calc((100vw - 1160px)/2)); font-size:11px; letter-spacing:.15em; }
[hidden] { display:none!important; }
@media (max-width:850px) { .workspace { grid-template-columns:1fr; }.job-panel { position:static; }.hero { padding-top:55px; }.grid.two { grid-template-columns:1fr; gap:0; } }
@media (max-width:560px) { main { width:min(100% - 24px,1160px); padding-top:24px; }.hero { padding-bottom:38px; }form,.job-panel { padding:24px 18px; border-radius:15px; }.actions { align-items:stretch; flex-direction:column; }.actions button { width:100%; justify-content:space-between; }footer { flex-direction:column; gap:8px; } }