:root{color-scheme:dark;--bg:#080c12;--panel:#101722;--panel2:#151f2c;--line:#263244;--muted:#8c9aad;--text:#edf3f9;--accent:#5ce1c6;--accent2:#ee6a8d;--danger:#ff7b72;--radius:16px;--shadow:0 18px 60px rgba(0,0,0,.28)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 25% -10%,#17283a 0,transparent 35%),var(--bg);color:var(--text);font:14px/1.5 Inter,Segoe UI,system-ui,sans-serif;min-width:300px}.topbar{min-height:104px;padding:24px clamp(18px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);background:rgba(8,12,18,.78);backdrop-filter:blur(18px)}h1,h2,p{margin:0}.eyebrow,.step{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--accent)}h1{font-size:clamp(24px,3vw,36px);line-height:1.1;margin:4px 0 6px}.subtitle{color:var(--muted);max-width:720px}.privacy-badge{border:1px solid rgba(92,225,198,.28);background:rgba(92,225,198,.08);color:var(--accent);padding:9px 12px;border-radius:999px;font-size:12px;white-space:nowrap}.privacy-badge span{font-size:8px;margin-right:6px}.workspace{display:grid;grid-template-columns:minmax(260px,340px) minmax(360px,1fr) minmax(260px,330px);gap:14px;padding:14px;min-height:calc(100vh - 150px)}.panel{background:linear-gradient(180deg,rgba(21,31,44,.98),rgba(13,20,30,.98));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}.source-panel,.settings-panel{padding:18px;display:flex;flex-direction:column;gap:14px}.preview-panel{display:flex;flex-direction:column;min-height:640px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-heading h2{font-size:18px}.button,.segment,.text-button{font:inherit;cursor:pointer}.button{border:1px solid transparent;border-radius:10px;padding:10px 14px;font-weight:700}.button:disabled,.text-button:disabled,.segment:disabled{cursor:not-allowed;opacity:.42}.primary{background:var(--accent);color:#07110f}.secondary{background:#213044;color:var(--text);border-color:#34445a}.ghost{background:transparent;color:var(--muted);border-color:var(--line)}.full{width:100%;margin-top:8px}.drop-zone{min-height:154px;border:1px dashed #3c5068;border-radius:14px;background:rgba(4,8,13,.36);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;cursor:pointer;transition:.2s}.drop-zone:hover,.drop-zone.dragover,.drop-zone:focus-visible{border-color:var(--accent);background:rgba(92,225,198,.06);outline:none}.drop-icon{font-size:32px;color:var(--accent);line-height:1}.drop-zone strong{margin-top:10px}.drop-zone small{color:var(--muted);margin-top:4px}.list-toolbar{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}.list-toolbar>div{display:flex;gap:10px}.text-button{border:0;background:none;color:var(--accent);padding:2px}.frame-list{display:flex;flex-direction:column;gap:7px;overflow:auto;max-height:calc(100vh - 380px);min-height:120px}.empty-card{border:1px solid var(--line);border-radius:10px;padding:18px;color:var(--muted);text-align:center}.frame-card{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);background:#0d141e;border-radius:11px;padding:8px}.thumb{width:48px;height:48px;border-radius:7px;background-color:#0a0f16;background-image:linear-gradient(45deg,#1e2a38 25%,transparent 25%),linear-gradient(-45deg,#1e2a38 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1e2a38 75%),linear-gradient(-45deg,transparent 75%,#1e2a38 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;display:grid;place-items:center;overflow:hidden}.thumb img{max-width:100%;max-height:100%;image-rendering:pixelated}.frame-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:12px}.frame-meta{color:var(--muted);font-size:11px}.frame-actions{display:flex;gap:3px}.icon-button{width:28px;height:28px;border:1px solid var(--line);background:#182333;color:var(--muted);border-radius:7px;cursor:pointer}.icon-button:hover{color:var(--text);border-color:#51647c}.icon-button.remove:hover{color:var(--danger)}.preview-heading{padding:18px 18px 0}.segmented{display:flex;background:#0b111a;border:1px solid var(--line);padding:3px;border-radius:10px}.segment{border:0;background:transparent;color:var(--muted);padding:7px 10px;border-radius:7px}.segment.active{background:#243247;color:var(--text)}.preview-stage{flex:1;margin:14px 18px;min-height:380px;border:1px solid var(--line);border-radius:14px;overflow:auto;display:grid;place-items:center;padding:22px;background-color:#090e15;background-image:linear-gradient(45deg,#121c29 25%,transparent 25%),linear-gradient(-45deg,#121c29 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#121c29 75%),linear-gradient(-45deg,transparent 75%,#121c29 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.preview-stage canvas{max-width:100%;max-height:70vh;image-rendering:pixelated}.preview-empty{display:flex;flex-direction:column;align-items:center;color:var(--muted);text-align:center}.preview-empty strong{color:var(--text);font-size:20px}.animation-controls{display:flex;align-items:center;justify-content:center;gap:18px;padding:0 18px 14px}.animation-controls label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.animation-controls input{width:100px;accent-color:var(--accent)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin:0}.metrics div{padding:13px 16px;border-right:1px solid var(--line)}.metrics div:last-child{border-right:0}.metrics dt{color:var(--muted);font-size:11px}.metrics dd{margin:2px 0 0;font-weight:800;color:var(--accent)}fieldset{margin:0;padding:14px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:11px}legend{padding:0 7px;color:var(--accent);font-weight:800;font-size:12px}.field{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:12px}.optional{font-weight:400;color:#59697e}input,select{width:100%;border:1px solid #324157;background:#0b111a;color:var(--text);border-radius:8px;padding:9px 10px;font:inherit}input:focus,select:focus{outline:2px solid rgba(92,225,198,.28);border-color:var(--accent)}input[type=range]{padding:0;accent-color:var(--accent)}.range-row{display:grid;grid-template-columns:1fr 52px;gap:8px;align-items:center}.range-row output{text-align:right;color:var(--accent)}.check-row{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:12px}.check-row input{width:auto;margin-top:3px}.status{border-left:3px solid var(--accent);padding:10px 11px;background:#0c141d;color:var(--muted);font-size:12px;border-radius:3px 9px 9px 3px}footer{display:flex;justify-content:space-between;padding:16px clamp(18px,4vw,56px);color:#617187;font-size:11px;border-top:1px solid var(--line)}@media(max-width:1050px){.workspace{grid-template-columns:320px 1fr}.settings-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.settings-panel .panel-heading,.settings-panel .status{grid-column:1/-1}}@media(max-width:760px){.topbar{align-items:flex-start;flex-direction:column}.workspace{grid-template-columns:1fr}.settings-panel{display:flex}.preview-panel{min-height:550px}.metrics{grid-template-columns:repeat(2,1fr)}.metrics div:nth-child(2){border-right:0}.metrics div:nth-child(-n+2){border-bottom:1px solid var(--line)}footer{flex-direction:column;gap:4px}.privacy-badge{white-space:normal}.animation-controls{flex-wrap:wrap}}@media(max-width:380px){.workspace{padding:8px;gap:8px}.topbar{padding:18px}.source-panel,.settings-panel{padding:14px}.preview-heading{align-items:flex-start;flex-direction:column}.segmented{width:100%}.segment{flex:1}.metrics{grid-template-columns:1fr}.metrics div{border-right:0!important;border-bottom:1px solid var(--line)}}

[hidden]{display:none!important}

.frame-card[draggable=true]{cursor:grab}.frame-card.dragging{opacity:.45}.frame-card.drag-over{outline:2px solid #57dfc2;outline-offset:-2px}.list-toolbar>div{flex-wrap:wrap}

.animation-controls .range-field{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.animation-controls .range-field>label{color:inherit}.animation-controls .range-field input{width:100px}.field.range-field>label{color:inherit;font-size:inherit}