:root{--bg: #0d0b09;--surface: #1a1410;--surface2: #231c16;--surface3: #2d241c;--border: rgba(242, 235, 222, .1);--text: #F2EBDE;--dim: #8A7E72;--cognac: #D4B25A;--camel: #C9A88C;--font: "Manrope", system-ui, sans-serif;--mono: "JetBrains Mono", Menlo, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}button{font-family:var(--mono);cursor:pointer}.app{display:grid;grid-template-rows:48px 1fr;height:100vh}.toolbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--border)}.toolbar .brand{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--cognac)}.toolbar .brand-v{color:var(--dim);margin-left:8px;font-weight:400;letter-spacing:.1em}.toolbar .sep{width:1px;height:20px;background:var(--border);flex-shrink:0}.toolbar>button,.dropdown>button{flex-shrink:0;white-space:nowrap}.toolbar .brand{flex-shrink:0}.toolbar .spacer{flex:1}.toolbar button{font-size:11px;letter-spacing:.04em;background:none;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:7px 11px;transition:all .15s}.toolbar button:hover:not(:disabled){border-color:var(--cognac);color:var(--cognac)}.toolbar button:disabled{opacity:.3;cursor:default}.toolbar button.primary{background:var(--cognac);color:#1a130f;border-color:var(--cognac);font-weight:500}.toolbar button.on{background:#d4b25a29;border-color:var(--cognac);color:var(--cognac)}.dropdown{position:relative;display:flex}.menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99}.menu{position:absolute;top:calc(100% + 6px);left:0;z-index:100;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:5px;display:flex;flex-direction:column;gap:2px;min-width:164px;box-shadow:0 18px 44px #0000008c}.menu button{background:none;border:none;color:var(--text);text-align:left;padding:9px 11px;border-radius:6px;font:400 12px/1 var(--mono);width:100%}.menu button:hover{background:#d4b25a24;color:var(--cognac)}.toolbar .lib-back{font-size:11px;background:none;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:7px 11px}.toolbar .lib-back:hover{border-color:var(--cognac);color:var(--cognac)}.toolbar .deck-title{background:none;border:1px solid transparent;color:var(--text);font:500 13px/1 var(--font);padding:7px 9px;border-radius:6px;min-width:160px;max-width:280px}.toolbar .deck-title:hover{border-color:var(--border)}.toolbar .deck-title:focus{outline:none;border-color:var(--cognac);background:var(--surface2)}.toolbar .save-status{font:400 10px/1 var(--mono);letter-spacing:.08em;color:var(--dim);flex-shrink:0;min-width:56px}.shortcuts{padding:16px 18px;display:flex;flex-direction:column;gap:2px}.shortcut-row{display:flex;align-items:center;gap:14px;padding:7px 6px;border-bottom:1px solid var(--border)}.shortcut-row:last-child{border-bottom:none}.shortcut-row kbd{font:500 11px/1 var(--mono);color:var(--cognac);background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:6px 9px;min-width:130px;text-align:center;flex-shrink:0}.shortcut-row span{font:400 13px/1.3 var(--font);color:var(--text)}.library{height:100vh;overflow-y:auto;background:var(--bg)}.lib-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:0 24px;height:56px;background:var(--surface);border-bottom:1px solid var(--border)}.lib-head .brand{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--cognac)}.lib-head .brand-v{color:var(--dim);margin-left:8px;font-weight:400}.lib-title{font:500 15px/1 var(--font);margin-left:8px}.lib-head button{font:400 12px/1 var(--mono);background:none;border:1px solid var(--border);color:var(--text);border-radius:7px;padding:9px 13px;cursor:pointer}.lib-head button:hover{border-color:var(--cognac);color:var(--cognac)}.lib-head button.primary{background:var(--cognac);color:#1a130f;border-color:var(--cognac);font-weight:500}.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:20px;padding:28px 24px;max-width:1280px;margin:0 auto}.lib-new{aspect-ratio:16/9;border:1px dashed var(--border);border-radius:12px;background:none;color:var(--dim);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;font:400 12px/1 var(--mono);transition:border-color .15s,color .15s}.lib-new:hover{border-color:var(--cognac);color:var(--cognac)}.lib-new-plus{font-size:32px;line-height:1}.lib-card{display:flex;flex-direction:column}.lib-thumb{padding:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;background:#000;transition:border-color .15s,transform .12s}.lib-thumb:hover{border-color:var(--cognac);transform:translateY(-2px)}.lib-thumb .thumb-stage{display:block}.lib-meta{padding:10px 2px 0}.lib-card-title{font:500 14px/1.3 var(--font);cursor:pointer}.lib-card-title:hover{color:var(--cognac)}.lib-card-sub{font:400 10px/1.4 var(--mono);color:var(--dim);margin-top:3px}.lib-actions{display:flex;gap:6px;margin-top:8px}.lib-actions button{font:400 10px/1 var(--mono);background:var(--surface2);border:1px solid var(--border);color:var(--dim);border-radius:5px;padding:6px 8px;cursor:pointer}.lib-actions button:hover{border-color:var(--cognac);color:var(--cognac)}.lib-actions button.danger:hover{border-color:#b05050;color:#d07070}.lib-empty{grid-column:1 / -1;text-align:center;color:var(--dim);font:400 12px/1.8 var(--mono);padding:60px 0}.workspace{display:grid;grid-template-columns:184px 1fr 280px;overflow:hidden}.rail{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.rail-head{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--border);font:400 9px/1 var(--mono);letter-spacing:.16em;color:var(--dim)}.rail-head button{background:none;border:1px solid var(--border);color:var(--dim);border-radius:5px;width:24px;height:22px}.rail-head button:hover{border-color:var(--cognac);color:var(--cognac)}.rail-list{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}.thumb{flex-shrink:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer}.thumb.active{border-color:var(--cognac)}.thumb-stage{overflow:hidden;border-radius:6px;background:#000}.thumb-meta{display:flex;justify-content:space-between;align-items:center;padding:5px 2px 0;font:400 9px/1.2 var(--mono);color:var(--dim)}.thumb-meta button{background:none;border:none;color:var(--dim)}.thumb-meta button:hover{color:#d07070}.stage-pane{background:#080604;overflow:hidden}.canvas-host{width:100%;height:100%;display:grid;place-items:center;position:relative}.play-btn{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:20;font:500 11px/1 var(--mono);letter-spacing:.1em;background:#d4b25a29;border:1px solid var(--cognac);color:var(--cognac);border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .15s}.play-btn:hover:not(:disabled){background:#d4b25a47}.play-btn:disabled{opacity:.6;cursor:default}.ctx-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300}.ctx-menu{position:fixed;z-index:301;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:5px;min-width:180px;box-shadow:0 18px 44px #0000008c;display:flex;flex-direction:column;gap:1px}.ctx-menu button{background:none;border:none;color:var(--text);text-align:left;padding:8px 11px;border-radius:6px;font:400 12px/1 var(--mono);cursor:pointer}.ctx-menu button:hover{background:#d4b25a24;color:var(--cognac)}.ctx-menu button.danger:hover{background:#b050502e;color:#d07070}.ctx-sep{height:1px;background:var(--border);margin:4px 6px}.canvas{position:relative}.canvas-inner{position:absolute;top:0;left:0;transform-origin:top left;overflow:hidden;box-shadow:0 24px 70px #0009}.el{-webkit-user-select:none;user-select:none}.el.selected{outline:1px solid var(--cognac);outline-offset:0}.el.cropping{outline:2px dashed var(--camel);outline-offset:2px;cursor:grab}.el.cropping:active{cursor:grabbing}.lock-badge{position:absolute;top:2px;right:2px;font-size:11px;opacity:.8}.sel-overlay{position:absolute;pointer-events:none;outline:1px solid var(--cognac)}.handle{position:absolute;width:10px;height:10px;background:var(--cognac);border:1px solid #1A130F;border-radius:2px;pointer-events:auto}.handle-nw{left:-5px;top:-5px;cursor:nwse-resize}.handle-n{left:calc(50% - 5px);top:-5px;cursor:ns-resize}.handle-ne{right:-5px;top:-5px;cursor:nesw-resize}.handle-e{right:-5px;top:calc(50% - 5px);cursor:ew-resize}.handle-se{right:-5px;bottom:-5px;cursor:nwse-resize}.handle-s{left:calc(50% - 5px);bottom:-5px;cursor:ns-resize}.handle-sw{left:-5px;bottom:-5px;cursor:nesw-resize}.handle-w{left:-5px;top:calc(50% - 5px);cursor:ew-resize}.handle-rot{position:absolute;left:calc(50% - 6px);top:-28px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--cognac);pointer-events:auto;cursor:grab}.handle-rot:active{cursor:grabbing}.handle-rot:before{content:"";position:absolute;left:50%;top:12px;width:1px;height:16px;background:var(--cognac);transform:translate(-50%)}.group-box{position:absolute;pointer-events:none;outline:1px dashed var(--cognac);outline-offset:1px}.marquee{position:absolute;pointer-events:none;background:#d4b25a1f;border:1px solid var(--cognac);z-index:998}.guide{position:absolute;background:#4ad2c9;pointer-events:none;z-index:999}.guide-v{top:0;bottom:0;width:1px}.guide-h{left:0;right:0;height:1px}.props{background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:16px}.psec{display:flex;flex-direction:column;gap:8px}.ptitle{font:400 8px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}.empty{color:var(--dim);font:400 11px/1.7 var(--mono);text-align:center;padding:24px 0}.swatches{display:flex;flex-wrap:wrap;gap:5px}.chip{width:26px;height:26px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform .12s}.chip:hover{transform:scale(1.12)}.chip.on{border-color:var(--cognac)}.bg-row{display:flex;gap:5px}.bg-btn{flex:1;height:22px;border-radius:5px;border:1px solid var(--border);cursor:pointer}.row{display:flex;gap:6px}.row button{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:7px 4px;font-size:11px}.row button:hover{border-color:var(--cognac)}.row button.on{background:#d4b25a29;border-color:var(--cognac);color:var(--cognac)}.row button:disabled{opacity:.35;cursor:default}.row button:disabled:hover{border-color:var(--border)}.row button.danger:hover{border-color:#b05050;color:#d07070}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.num,.sel{display:flex;flex-direction:column;gap:4px;font:400 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}.num input,.sel select,.ta{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:7px 9px;font:400 13px/1 var(--font);width:100%}.num input:focus,.sel select:focus,.ta:focus{outline:none;border-color:var(--cognac)}.ta{font-family:var(--font);min-height:64px;resize:vertical;line-height:1.4}.sel select option{background:var(--surface2)}.hint-sm{font:400 10px/1.4 var(--mono);color:var(--dim);margin-top:2px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:grid;place-items:center;z-index:200}.picker{background:var(--surface);border:1px solid var(--border);border-radius:14px;width:720px;max-width:92vw;max-height:84vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 90px #0009}.picker-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}.picker-title{font:500 15px/1 var(--font)}.picker-x{background:none;border:none;color:var(--dim);font-size:16px}.picker-x:hover{color:var(--text)}.picker-grid{padding:16px;display:grid;grid-template-columns:repeat(3,200px);justify-content:center;gap:14px;overflow-y:auto}.preset-card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:8px;cursor:pointer;text-align:left;transition:border-color .15s,transform .12s;display:flex;flex-direction:column;align-items:center;gap:8px}.preset-card:hover{border-color:var(--cognac);transform:translateY(-2px)}.preset-card .thumb-stage{border-radius:6px;overflow:hidden}.preset-card .preset-meta{align-self:stretch}.preset-meta{display:flex;flex-direction:column;gap:2px;padding:0 2px 2px}.preset-name{font:500 13px/1 var(--font);color:var(--text)}.preset-desc{font:400 11px/1.3 var(--mono);color:var(--dim)}.rt-toolbar{position:fixed;z-index:320;transform:translate(-50%);display:flex;align-items:center;gap:3px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:5px 7px;box-shadow:0 12px 32px #00000080}.rt-toolbar button{background:none;border:1px solid transparent;color:var(--text);border-radius:5px;font:500 11px/1 var(--mono);padding:5px 7px;cursor:pointer;min-width:26px}.rt-toolbar button:hover{background:#d4b25a29;color:var(--cognac);border-color:var(--border)}.rt-toolbar .rt-sw{min-width:18px;width:18px;height:18px;padding:0;border:1px solid rgba(242,235,222,.25)}.rt-toolbar .rt-sep{width:1px;align-self:stretch;background:var(--border);margin:0 3px}.blk-item{border:1px solid var(--border);border-radius:8px;padding:8px 9px;margin-top:8px;display:flex;flex-direction:column;gap:6px}.blk-field{display:flex;flex-direction:column;gap:3px}.blk-field>span{font:400 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}.blk-input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:5px;padding:6px 8px;font:400 12px/1.3 var(--font);width:100%;resize:vertical}.blk-input:focus{outline:none;border-color:var(--cognac)}.blk-check{display:flex;align-items:center;gap:7px;font:400 11px/1 var(--font);color:var(--text);cursor:pointer}