:root{--bg: #16161d;--panel: #1e1e27;--panel-2: #252531;--border: #32323f;--text: #e8e8f0;--text-dim: #9a9aac;--accent: #6c6ade;--accent-2: #8b89ff;--danger: #e5484d;--ok: #30a46c;--radius: 8px;font-size:13px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}.app{display:grid;height:100vh;grid-template-rows:48px 1fr 230px;grid-template-columns:215px 1fr 270px;grid-template-areas:"toolbar toolbar toolbar" "layers canvas props" "timeline timeline timeline"}.toolbar{grid-area:toolbar;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:baseline;gap:8px;margin-right:8px}.brand h1{font-size:15px;margin:0;font-weight:700;letter-spacing:.2px}.brand .free-chip{font-size:10px;font-weight:600;color:#b9f4d4;background:rgba(48,164,108,.18);border:1px solid rgba(48,164,108,.45);padding:2px 7px;border-radius:99px;white-space:nowrap}.toolbar .sep{width:1px;height:22px;background:var(--border);margin:0 2px}.toolbar .spacer{flex:1}button,select,input[type=text],input[type=number]{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:5px 10px}button{cursor:pointer;white-space:nowrap}button:hover:not(:disabled){background:#2d2d3b;border-color:#44445a}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);font-weight:600;color:#fff}button.primary:hover:not(:disabled){background:var(--accent-2);border-color:var(--accent-2)}button.icon{padding:5px 8px}select{cursor:pointer}input[type=number]{width:62px;padding:4px 6px}input[type=text]{width:100%}input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--border);border-radius:6px;background:none;cursor:pointer}.layers{grid-area:layers;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.panel-title{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-dim);padding:10px 12px 6px}.layer-rows{overflow-y:auto;flex:1}.layer-row{display:flex;align-items:center;gap:6px;padding:7px 8px 7px 12px;cursor:pointer;border-bottom:1px solid #20202a}.layer-row:hover{background:#23232e}.layer-row.selected{background:rgba(108,106,222,.18);box-shadow:inset 2px 0 0 var(--accent)}.layer-row .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-row .mini{padding:2px 5px;font-size:11px;line-height:1;background:transparent;border:none;color:var(--text-dim)}.layer-row .mini:hover{color:var(--text);background:transparent}.layer-row input{padding:2px 6px}.layers .empty{color:var(--text-dim);padding:12px;line-height:1.5}.canvas-wrap{grid-area:canvas;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at center,#1b1b24 0%,#141419 100%)}.stage{position:relative;box-shadow:0 8px 40px #00000080;background-image:linear-gradient(45deg,#26262f 25%,transparent 25%),linear-gradient(-45deg,#26262f 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#26262f 75%),linear-gradient(-45deg,transparent 75%,#26262f 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:#1f1f28}.stage>.lottie-host,.stage>.lottie-host svg{display:block}.drag-overlay{position:absolute;top:0;right:0;bottom:0;left:0;cursor:grab;touch-action:none}.drag-overlay.dragging{cursor:grabbing}.sel-badge{position:absolute;top:10px;left:10px;font-size:11px;color:var(--text-dim);background:rgba(20,20,28,.8);border:1px solid var(--border);padding:3px 8px;border-radius:6px;pointer-events:none}.props{grid-area:props;background:var(--panel);border-left:1px solid var(--border);overflow-y:auto;min-height:0}.props section{padding:4px 12px 12px;border-bottom:1px solid #23232d}.prop-row{display:flex;align-items:center;gap:6px;margin:7px 0}.prop-row label.k{width:64px;color:var(--text-dim);flex-shrink:0}.prop-row .grow{flex:1}.kf-btn{width:22px;height:22px;padding:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-dim);font-size:13px}.kf-btn:hover{color:var(--accent-2);background:transparent}.kf-btn.animated{color:var(--accent-2)}.kf-btn.on{color:#ffd166}.row-sub{display:flex;gap:6px;align-items:center;margin:4px 0 8px 28px}.row-sub select{padding:3px 6px;font-size:12px}.row-sub .link-btn{background:none;border:none;color:var(--text-dim);font-size:11px;padding:2px 4px;text-decoration:underline;text-underline-offset:2px}.row-sub .link-btn:hover{color:var(--danger);background:none}.hint{color:var(--text-dim);font-size:12px;line-height:1.5;padding:10px 12px}.timeline{grid-area:timeline;background:var(--panel);border-top:1px solid var(--border);display:grid;grid-template-rows:36px 1fr;min-height:0}.transport{display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--border)}.transport .frame-display{font-variant-numeric:tabular-nums;color:var(--text-dim)}.transport .frame-display b{color:var(--text)}.tl-body{display:grid;grid-template-columns:215px 1fr;overflow-y:auto;min-height:0}.tl-names{border-right:1px solid var(--border)}.tl-name-row{height:26px;display:flex;align-items:center;padding:0 12px;color:var(--text-dim);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px solid #20202a;font-size:12px}.tl-name-row.selected{color:var(--text);background:rgba(108,106,222,.14)}.tl-name-row.subrow{padding-left:26px;font-size:11px;height:22px}.tl-tracks{position:relative;overflow:hidden}.tl-ruler{position:relative;height:26px;border-bottom:1px solid var(--border);cursor:ew-resize}.tl-ruler .tick{position:absolute;top:0;bottom:0;border-left:1px solid #2c2c38}.tl-ruler .tick span{position:absolute;top:4px;left:4px;font-size:10px;color:var(--text-dim)}.tl-track-row{position:relative;height:26px;border-bottom:1px solid #20202a}.tl-track-row.subrow{height:22px}.layer-bar{position:absolute;top:7px;height:12px;border-radius:4px;background:#34344a;border:1px solid #46466a}.subrow .layer-bar{display:none}.kf-diamond{position:absolute;top:50%;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);background:var(--accent-2);border:1px solid #fff3;cursor:pointer;z-index:2}.kf-diamond:hover{background:#ffd166}.playhead{position:absolute;top:0;bottom:0;width:1px;background:#ff5c5c;z-index:5;pointer-events:none}.playhead:before{content:"";position:absolute;top:0;left:-5px;border:5px solid transparent;border-top-color:#ff5c5c}button.tool-active{background:rgba(108,106,222,.25);border-color:var(--accent);color:var(--accent-2)}.drag-overlay.pen{cursor:crosshair}.editing-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:visible}.draft-path{fill:none;stroke:var(--accent-2);stroke-width:1.5;stroke-dasharray:none}.draft-rubber{stroke:var(--accent-2);stroke-width:1;stroke-dasharray:4 3;opacity:.6}.draft-vertex{fill:var(--accent-2);stroke:#fff;stroke-width:1}.draft-vertex.first{fill:#ffd166}.path-vertex{fill:#ffd166;stroke:#1e1e27;stroke-width:1.5;pointer-events:auto;cursor:grab}.path-vertex:hover{fill:#fff}.path-handle{fill:var(--accent-2);stroke:#1e1e27;stroke-width:1;pointer-events:auto;cursor:grab}.path-handle:hover{fill:#fff}.path-handle-line{stroke:var(--accent-2);stroke-width:1;opacity:.55}.midpoint-marker{fill:#ffffff26;stroke:var(--text-dim);stroke-width:1;pointer-events:auto;cursor:copy}.midpoint-marker:hover{fill:var(--ok);stroke:#fff}.path-vertex.mask,.path-handle.mask{fill:#34d399}.path-handle-line.mask,.midpoint-marker.mask{stroke:#34d399}.crumbs{position:absolute;top:10px;left:12px;z-index:10;display:flex;align-items:center;gap:4px;background:rgba(20,20,28,.85);border:1px solid var(--border);border-radius:8px;padding:4px 8px}.crumbs button{background:none;border:none;padding:2px 4px;font-size:12px;color:var(--accent-2)}.crumbs button:disabled{color:var(--text);opacity:1;font-weight:600}.crumbs .crumb-sep{color:var(--text-dim);margin:0 2px}.props textarea{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:6px;width:100%;padding:6px 8px;resize:vertical;margin:6px 0 2px}.curve-box{margin:4px 0 10px 28px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:50}.modal{width:420px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px 20px;box-shadow:0 20px 60px #0009}.modal h2{margin:0 0 4px;font-size:16px}.modal .tagline{color:var(--ok);font-size:12px;margin-bottom:14px}.fmt-options{display:flex;flex-direction:column;gap:8px;margin:12px 0}.fmt-option{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:8px;padding:10px 12px;cursor:pointer}.fmt-option.active{border-color:var(--accent);background:rgba(108,106,222,.1)}.fmt-option input{margin-top:3px}.fmt-option .desc{color:var(--text-dim);font-size:12px;margin-top:2px}.gif-opts{display:flex;gap:14px;align-items:center;margin:4px 0 10px;padding-left:2px}.gif-opts label{color:var(--text-dim);display:flex;gap:6px;align-items:center}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.progress-track{height:6px;background:var(--panel-2);border-radius:99px;overflow:hidden;margin:10px 0}.progress-fill{height:100%;background:var(--accent);transition:width .15s}.export-error{color:var(--danger);font-size:12px;margin-top:8px}