:root { color-scheme: dark; --ink:#f7f4ed; --muted:#a9a59c; --line:#34332f; --panel:#151513; --accent:#d8ff63; --bg:#0a0a09; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 80% 0%, #273018 0, transparent 33rem), var(--bg); color:var(--ink); font:15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
.shell { width:min(1180px, calc(100% - 48px)); margin:0 auto; padding:42px 0 28px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:42px; }
.eyebrow { color:var(--accent); font-size:11px; letter-spacing:.18em; font-weight:700; }
h1 { font:500 clamp(36px, 6vw, 72px)/.95 Georgia, serif; letter-spacing:-.05em; margin:12px 0 0; }
.status,.state { color:var(--muted); font-size:12px; border:1px solid var(--line); border-radius:999px; padding:8px 12px; white-space:nowrap; }
.status.ok { color:var(--accent); border-color:#536526; }
.workspace { display:grid; grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr); gap:18px; }
.panel { background:color-mix(in srgb, var(--panel) 92%, transparent); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 20px 60px #0005; }
.composer { display:flex; flex-direction:column; gap:18px; }
label { display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:12px; }
textarea,input,select { width:100%; border:1px solid var(--line); border-radius:10px; background:#0e0e0c; color:var(--ink); padding:12px; font:inherit; outline:none; }
textarea { min-height:180px; resize:vertical; font:17px/1.45 Georgia, serif; }
textarea:focus,input:focus,select:focus { border-color:var(--accent); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compact { grid-template-columns:1fr 1fr 1fr; }
button { margin-top:4px; border:0; border-radius:10px; padding:14px 16px; background:var(--accent); color:#111; cursor:pointer; font-weight:800; }
button:disabled { opacity:.5; cursor:wait; }
button span { float:right; font-size:18px; }
.message { min-height:22px; color:#ef9b83; margin:0; }
.result { min-height:520px; display:flex; flex-direction:column; }
.result-head,.result-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.preview { flex:1; min-height:390px; margin:20px 0; border-radius:14px; background:linear-gradient(135deg,#171b10,#0d1216); display:grid; place-items:center; align-content:center; gap:16px; color:var(--muted); overflow:hidden; }
.preview video { width:100%; height:100%; min-height:390px; object-fit:cover; }
.orb { width:84px; height:84px; border-radius:50%; background:var(--accent); filter:blur(2px); box-shadow:0 0 80px 20px #d8ff6355; animation:pulse 2.4s infinite ease-in-out; }
@keyframes pulse { 50% { transform:scale(1.18); opacity:.65; } }
.progress { height:4px; background:#2b2b27; border-radius:99px; overflow:hidden; }
.progress span { display:block; height:100%; width:0; background:var(--accent); transition:width .4s ease; }
.result-meta { color:var(--muted); font-size:12px; margin-top:10px; }
.download { display:inline-block; margin-top:18px; color:var(--accent); text-decoration:none; font-weight:700; }
footer { color:#68675f; font-size:12px; margin-top:22px; }
@media (max-width:800px) { .shell { width:min(100% - 24px, 600px); padding-top:24px; } .topbar { align-items:flex-start; flex-direction:column; margin-bottom:24px; } .workspace { grid-template-columns:1fr; } .result { min-height:420px; } .preview { min-height:280px; } .preview video { min-height:280px; } }