@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { color-scheme: dark; --ink:#f4f1e8; --muted:#a9aaa4; --line:#393e3b; --accent:#d9ff62; --panel:#171b19; --bg:#0d100f; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 80% 10%,#263a27 0,transparent 32%),var(--bg); font-family:'Space Grotesk',sans-serif; }
.shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:34px 0 48px; }
.eyebrow { color:var(--accent); font:500 11px 'DM Mono',monospace; margin:0 0 10px; }.eyebrow span { margin-left:8px;color:var(--muted); }
h1 { font-size:clamp(1.8rem,4vw,3.7rem); line-height:1; margin:0; }.intro { color:var(--muted); font-size:14px; line-height:1.4; max-width:680px; margin:10px 0 26px; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,1.12fr); gap:22px; align-items:start; }.controls,.preview-panel { min-width:0; padding:18px; border:1px solid var(--line); border-radius:6px; background:rgba(23,27,25,.76); }.controls { display:grid; gap:16px; }
.field-group { display:grid; gap:6px; padding-bottom:14px; border-bottom:1px solid var(--line); } fieldset.field-group { min-width:0; margin:0; padding:0 0 14px; border:0; border-bottom:1px solid var(--line); } fieldset legend { padding:0; font-size:14px; font-weight:600; }
.radio-option { display:inline-flex; align-items:flex-start; gap:8px; margin:8px 18px 0 0; font-size:12px; font-weight:500; cursor:pointer; }.radio-option input { margin:2px 0 0; accent-color:var(--accent); }.radio-option small,.checkbox-row small { display:block; margin-top:2px; color:var(--muted); font-size:10px; font-weight:400; }
label { font-size:14px; font-weight:600; }.optional { color:var(--muted); font-size:11px; font-weight:400; } input[type=file] { width:100%; padding:10px; border:1px dashed #657060; border-radius:4px; color:var(--ink); background:var(--panel); font:11px 'DM Mono',monospace; } input[type=file]::file-selector-button { margin-right:8px; padding:6px 8px; border:1px solid var(--accent); border-radius:3px; color:var(--bg); background:var(--accent); font:500 10px 'DM Mono',monospace; cursor:pointer; }
.hint { color:var(--muted); font-size:11px; line-height:1.35; margin:0; }.checkbox-row { display:flex; align-items:flex-start; gap:8px; color:var(--ink); font-size:12px; cursor:pointer; }.checkbox-row input { margin:2px 0 0; accent-color:var(--accent); }
.actions { display:flex; flex-wrap:wrap; gap:8px; } button { border:0; border-radius:3px; padding:10px 14px; color:var(--bg); background:var(--accent); font:600 13px 'Space Grotesk',sans-serif; cursor:pointer; } button:hover { background:#efffb0; } button:disabled { cursor:wait; opacity:.55; }.cancel-button { color:var(--ink); background:transparent; border:1px solid #8b625b; }.cancel-button:hover { color:#ffb5a6; border-color:#ffb5a6; }
.status { min-height:16px; margin:0; font-size:12px; }.working { color:#e9dc9e; }.success { color:var(--accent); }.error { color:#ff9d8d; }.progress-panel { display:grid; gap:7px; padding-top:2px; }.progress-heading { display:flex; justify-content:space-between; gap:16px; font:11px 'DM Mono',monospace; }.progress-track { height:7px; overflow:hidden; border-radius:2px; background:#303731; }.progress-bar { width:0; height:100%; background:var(--accent); transition:width .25s ease; }.progress-panel .hint { overflow-wrap:anywhere; }
.panel-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }.panel-heading h2 { margin:0; font-size:14px; }.preview-state { color:var(--muted); font:10px 'DM Mono',monospace; }.preview-empty { display:grid; place-items:center; width:100%; padding:30px; aspect-ratio:16 / 9; border:1px dashed #657060; border-radius:4px; color:var(--muted); font-size:12px; text-align:center; } #video-preview { display:block; width:100%; aspect-ratio:16 / 9; object-fit:contain; border-radius:4px; background:#090b0a; }.download-button { margin-top:10px; }.note { display:grid; gap:4px; margin-top:18px; padding-left:12px; border-left:2px solid var(--accent); color:var(--muted); font-size:11px; line-height:1.4; }.note strong { color:var(--ink); font-size:12px; }
@media (max-width:760px) { .shell { width:min(100% - 24px,600px); padding-top:24px; } h1 { font-size:clamp(1.55rem,7vw,2.5rem); }.workspace { grid-template-columns:1fr; gap:14px; }.preview-panel { order:-1; } }