:root{--bg: #0c0b09;--bg-elev: #161410;--bg-panel: #1c1914;--line: rgba(244, 193, 110, .16);--line-strong: rgba(244, 193, 110, .38);--gold: #f4c16e;--gold-dim: #c99a4a;--mint: #6ee7c5;--ink: #f3ece0;--muted: #9a9184;--danger: #e07a5f;--shadow: 0 24px 80px rgba(0, 0, 0, .45);--radius: 18px;--font-display: "Syne", "Noto Sans SC", sans-serif;--font-serif: "Instrument Serif", "Noto Sans SC", serif;--font-body: "Noto Sans SC", "Syne", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font-body)}body{background-image:radial-gradient(1200px 600px at 10% -10%,rgba(244,193,110,.08),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(110,231,197,.06),transparent 50%),linear-gradient(180deg,#12110e,#0c0b09 40%,#0c0b09)}#app{min-height:100vh}button,input,select{font-family:inherit}.app-shell{max-width:1280px;margin:0 auto;padding:28px 24px 80px}.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:46px;height:46px;border-radius:12px;background:#12110e;border:1px solid var(--line-strong);display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:8px;box-shadow:var(--shadow)}.brand-mark span{border-radius:3px}.brand-mark span:first-child{background:var(--gold)}.brand-mark span:last-child{background:var(--mint)}.brand h1{font-family:var(--font-display);font-size:28px;letter-spacing:.08em;font-weight:800;line-height:1}.brand p{margin-top:4px;color:var(--muted);font-size:13px;letter-spacing:.12em;text-transform:uppercase}.tagline{font-family:var(--font-serif);font-style:italic;font-size:22px;color:var(--gold);max-width:420px;text-align:right;line-height:1.25}.workspace{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr);gap:22px}.panel{background:linear-gradient(180deg,#1c1914eb,#12110ef5);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.stage{min-height:560px;display:flex;flex-direction:column}.stage-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}.stage-head h2{font-family:var(--font-display);font-size:15px;letter-spacing:.14em;text-transform:uppercase}.badge{font-size:12px;color:var(--mint);border:1px solid rgba(110,231,197,.35);padding:4px 10px;border-radius:999px}.dropzone{flex:1;margin:20px;border:1.5px dashed var(--line-strong);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);cursor:pointer;transition:border-color .2s,background .2s;background:linear-gradient(180deg,rgba(244,193,110,.03),transparent);min-height:420px}.dropzone:hover,.dropzone.dragover{border-color:var(--gold);background:#f4c16e0f}.dropzone h3{font-family:var(--font-serif);font-size:32px;color:var(--ink);font-weight:400}.dropzone p{font-size:14px}.preview-board{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px 20px 20px}.preview-col{min-width:0}.preview-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.preview-wrap{position:relative;background:#050504;border-radius:14px;overflow:hidden;min-height:220px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}.preview-col:last-child .preview-wrap{border-color:var(--gold)}.preview-col:last-child .preview-label{color:var(--gold)}#preview,#sourceCanvas{display:block;width:100%;height:auto;max-height:420px;background:#000}.thumb.single-l,.thumb.single-r{grid-template-columns:1fr}.thumb.single-l .r,.thumb.single-r .l{display:none}.hidden{display:none!important}.controls{padding:8px 20px 20px;display:grid;gap:16px}.control-row{display:grid;gap:8px}.control-row label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--mint));outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid var(--gold);cursor:pointer}.layout-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.layout-card{border:1px solid var(--line);background:var(--bg-elev);color:var(--ink);border-radius:12px;padding:12px;text-align:left;cursor:pointer;transition:border-color .2s,transform .15s}.layout-card:hover{border-color:var(--gold-dim);transform:translateY(-1px)}.layout-card.active{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.layout-card strong{display:block;font-size:13px;margin-bottom:4px}.layout-card span{font-size:12px;color:var(--muted)}.thumb{height:42px;border-radius:6px;margin-bottom:8px;background:#0a0908;display:grid;overflow:hidden;border:1px solid var(--line)}.thumb i{display:block}.thumb .l{background:var(--gold)}.thumb .r{background:var(--mint)}.thumb.stack{grid-template-rows:1fr 1fr}.thumb.side{grid-template-columns:1fr 1fr}.thumb.pip{position:relative}.thumb.pip .l{grid-column:1 / -1;grid-row:1 / -1}.thumb.pip .r{position:absolute;width:38%;height:38%;right:6%;bottom:10%;border-radius:3px;outline:1px solid #0a0908}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn{border:0;border-radius:12px;padding:13px 16px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:opacity .15s,transform .15s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn-primary{background:var(--gold);color:#1a1408}.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}.meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}.progress{height:6px;background:#2a261f;border-radius:99px;overflow:hidden}.progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--mint))}.status{min-height:20px;font-size:13px;color:var(--gold)}.error{color:var(--danger)}.side{display:flex;flex-direction:column;gap:16px}.hint{padding:20px}.hint h3{font-family:var(--font-serif);font-size:26px;margin-bottom:10px}.hint ol{padding-left:18px;color:var(--muted);display:grid;gap:8px;font-size:14px;line-height:1.5}.stats{padding:18px 20px 20px;display:grid;gap:10px}.stat{display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:8px}.stat b{font-weight:500;color:var(--ink)}video#source{display:none}footer.note{margin-top:28px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}@media (max-width: 1100px){.preview-board{grid-template-columns:1fr}}@media (max-width: 980px){.workspace{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}.tagline{text-align:left;font-size:18px}}