:root{color-scheme:dark;--bg:#141414;--card:#1c1c1c;--line:#2c2c2c;--tx:#f2ede4;
--dim:#8f8a80;--ok:#4ec98a;--bad:#e5645f;--warn:#d9a441;--acc:#c9922f;--acc-soft:#e0b25c}
*{box-sizing:border-box}
body{margin:0;padding:0 0 96px;background:var(--bg);color:var(--tx);
font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:24px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--tx)}
.logo svg{width:26px;height:26px;display:block}
.logo span{font-size:23px;letter-spacing:-.02em}
.logo b{font-weight:800}
.logo i{font-style:normal;font-weight:800;color:var(--acc)}
h2{font-size:12px;margin:28px 0 12px;text-transform:uppercase;
letter-spacing:.09em;color:var(--dim)}
.head{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
padding-bottom:16px;border-bottom:1px solid var(--line)}
.badge{font-size:12px;padding:4px 10px;border-radius:20px;border:1px solid var(--line);
color:var(--dim)}
.badge.live{border-color:var(--acc);color:var(--acc)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.drop{border:2px dashed var(--line);border-radius:14px;padding:48px;text-align:center;
color:var(--dim);cursor:pointer;transition:.15s}
.drop:hover,.drop.over{border-color:var(--acc);color:var(--tx)}
input[type=text]{background:#0d0f13;border:1px solid var(--line);color:var(--tx);
border-radius:8px;padding:9px 11px;font:inherit;width:100%}
button{background:#232733;border:1px solid var(--line);color:var(--tx);
border-radius:8px;padding:9px 14px;font:inherit;cursor:pointer}
button:hover:not(:disabled){border-color:var(--acc)}
button:disabled{opacity:.4;cursor:default}
button.primary{background:var(--acc);color:#141414;border-color:var(--acc);font-weight:700}
button.costly{border-color:var(--warn);color:var(--warn)}
video{border-radius:10px;background:#000;display:block}
.log{font:12px/1.7 ui-monospace,monospace;color:var(--dim);max-height:170px;
overflow:auto;white-space:pre-wrap}
.bar{position:fixed;left:0;right:0;bottom:0;background:#12151b;
border-top:1px solid var(--line);padding:12px 24px;display:flex;gap:14px;
align-items:center;flex-wrap:wrap}
.bar .grow{flex:1}
.timeline{position:relative;height:44px;background:#0d0f13;border:1px solid var(--line);
border-radius:8px;overflow:hidden;cursor:pointer;margin-top:10px}
.timeline .idle{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(
45deg,#2b2419,#2b2419 4px,#1a1712 4px,#1a1712 8px)}
.timeline .cut{position:absolute;top:0;bottom:0;width:1px;background:#4a5568}
.timeline .seg{position:absolute;top:6px;bottom:6px;background:var(--acc);
border-radius:4px;color:#141414;font-size:11px;font-weight:700;text-align:center;
line-height:32px}
.strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
.seg-card{min-width:210px;background:var(--card);border:1px solid var(--line);
border-radius:10px;padding:10px}
.seg-card.card-kind{border-color:var(--acc)}
.frames{display:flex;gap:4px}
.frames img{width:calc(33.33% - 3px);border-radius:4px;display:block}
.why{font-size:12px;color:var(--dim);margin-top:8px;line-height:1.45}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{font-size:13px;padding:6px 11px;border-radius:16px;background:#0d0f13;
border:1px solid var(--line);cursor:pointer}
.chip:hover{border-color:var(--acc)}
.chip.on{background:var(--acc);color:#141414;border-color:var(--acc)}
.text-row{margin-bottom:20px}
.text-row .now{font-size:19px;font-weight:700;color:var(--acc-soft);margin:6px 0}
.mono{font:12px ui-monospace,monospace;color:var(--dim)}
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
.free{font-size:11px;color:var(--ok);margin-left:6px}
.hide{display:none}

/* Результат надо отличать от исходника: первый кадр готового ролика — тот же
   геймплей, и без подписи его путают с записью. */
.card.done{border-color:var(--acc)}
.label-done{font-size:12px;font-weight:700;color:var(--acc);
text-transform:uppercase;letter-spacing:.08em}
.dl{display:inline-block;background:var(--acc);color:#141414;font-weight:700;
padding:9px 16px;border-radius:8px;text-decoration:none}
.dl:hover{background:var(--acc-soft)}

.optional{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
textarea{width:100%;background:#0d0f13;border:1px solid var(--line);color:var(--tx);
border-radius:8px;padding:9px 11px;font:inherit;resize:vertical}