:root,[data-theme=dark]{--bg-panel: #2c2c2c;--bg-panel-2: #383838;--bg-hover: #3a3a3a;--bg-active: #4a4a4a;--bg-input: #383838;--bg-toolbar: #2c2c2c;--canvas: #1e1e1e;--dot: rgba(255, 255, 255, .2);--border: #444444;--border-soft: #3a3a3a;--text: #ffffff;--text-2: #b3b3b3;--text-3: #8a8a8a;--accent: #0d99ff;--accent-soft: rgba(13, 153, 255, .18);--accent-text: #ffffff;--frame-label: #a0a0a0;--menu-bg: #1e1e1e;--shadow: 0 8px 28px rgba(0, 0, 0, .5);--danger: #f24822;color-scheme:dark}[data-theme=light]{--bg-panel: #ffffff;--bg-panel-2: #f5f5f5;--bg-hover: #f0f0f0;--bg-active: #e5e5e5;--bg-input: #f5f5f5;--bg-toolbar: #ffffff;--canvas: #f2f2f2;--dot: rgba(0, 0, 0, .22);--border: #e6e6e6;--border-soft: #efefef;--text: #1e1e1e;--text-2: #5c5c5c;--text-3: #8f8f8f;--accent: #0d99ff;--accent-soft: rgba(13, 153, 255, .14);--accent-text: #ffffff;--frame-label: #7a7a7a;--menu-bg: #1e1e1e;--shadow: 0 8px 28px rgba(0, 0, 0, .16);--danger: #f24822;color-scheme:light}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden}body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:11px;color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:default}button:focus{outline:none}button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}input,select,textarea{font:inherit;color:inherit}.app{display:grid;grid-template-rows:48px 1fr;grid-template-columns:240px 1fr 240px;height:100vh}.app.ui-hidden{grid-template-columns:0 1fr 0;grid-template-rows:0 1fr}.app.ui-hidden .toolbar,.app.ui-hidden .panel{display:none}.toolbar{grid-column:1 / -1;display:flex;align-items:center;background:var(--bg-toolbar);border-bottom:1px solid var(--border);height:48px;padding:0 8px;gap:2px;position:relative;z-index:20}.tb-left,.tb-right{display:flex;align-items:center;gap:2px;flex:1}.tb-right{justify-content:flex-end;gap:6px}.tb-center{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;color:var(--text-2);font-size:12px}.tb-center input{background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 6px;color:var(--text);font-weight:500;font-size:12px;text-align:left;max-width:320px;outline:none}.tb-center input:hover{border-color:var(--border)}.tb-center input:focus{border-color:var(--accent)}.tool-btn{height:36px;min-width:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:var(--text);position:relative}.tool-btn:hover{background:var(--bg-hover)}.tool-btn.active{background:var(--accent);color:var(--accent-text)}.tool-group{display:flex;align-items:center;border-radius:6px}.tool-group:hover{background:var(--bg-hover)}.tool-group.active{background:var(--accent);color:var(--accent-text)}.tool-group .tool-btn:hover,.tool-group.active .tool-btn:hover{background:transparent}.tool-group.active .tool-btn{color:var(--accent-text)}.tool-chevron{width:14px;height:36px;display:flex;align-items:center;justify-content:center;opacity:.7}.tool-chevron:hover{opacity:1}.logo-btn{gap:4px;padding:0 6px}.logo-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#7c5cff,#0d99ff);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px}.tb-sep{width:1px;height:24px;background:var(--border);margin:0 6px}.zoom-btn{height:32px;padding:0 8px;border-radius:6px;display:inline-flex;gap:4px;align-items:center;font-size:11px}.zoom-btn:hover{background:var(--bg-hover)}.primary-btn{height:28px;padding:0 12px;border-radius:6px;background:var(--accent);color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:6px}.primary-btn:hover{filter:brightness(1.08)}.icon-btn{width:28px;height:28px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2)}.icon-btn:hover{background:var(--bg-hover);color:var(--text)}.icon-btn.on{color:var(--text);background:var(--bg-active)}.menu{position:fixed;min-width:200px;background:var(--menu-bg);color:#fff;border-radius:8px;padding:6px 0;box-shadow:0 10px 30px #00000073;z-index:1000;font-size:12px}.menu-item{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 12px;cursor:default;white-space:nowrap}.menu-item:hover:not(.disabled){background:var(--accent)}.menu-item.disabled{opacity:.4}.menu-item .check{width:14px;display:inline-flex}.menu-item .kbd{margin-left:auto;padding-left:24px;opacity:.6;font-size:11px}.menu-sep{height:1px;background:#ffffff1f;margin:6px 0}.menu-label{padding:4px 12px;opacity:.5;font-size:10px;text-transform:uppercase;letter-spacing:.05em}.panel{background:var(--bg-panel);display:flex;flex-direction:column;overflow:hidden;min-height:0;z-index:10}.panel.left{border-right:1px solid var(--border)}.panel.right{border-left:1px solid var(--border)}.panel-tabs{display:flex;gap:4px;padding:8px 8px 6px;border-bottom:1px solid var(--border);align-items:center}.panel-tab{padding:6px 8px;border-radius:5px;font-weight:600;color:var(--text-3)}.panel-tab:hover{color:var(--text)}.panel-tab.active{color:var(--text);background:var(--bg-panel-2)}.panel-scroll{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}.panel-scroll::-webkit-scrollbar{width:8px}.panel-scroll::-webkit-scrollbar-thumb{background:var(--bg-active);border-radius:4px}.section{border-bottom:1px solid var(--border);padding:8px 8px 12px}.section-head{display:flex;align-items:center;justify-content:space-between;height:28px;padding-left:8px;font-weight:600}.section-head .muted{color:var(--text-3);font-weight:500}.section-head .head-actions{display:flex;gap:2px}.page-row{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px 0 16px;border-radius:5px;margin:0 0 1px}.page-row:hover{background:var(--bg-hover)}.page-row.active{font-weight:600}.page-row .check{width:12px;color:var(--text)}.page-row input{flex:1;background:var(--bg-input);border:1px solid var(--accent);border-radius:3px;padding:2px 4px;outline:none}.layer-row{display:flex;align-items:center;height:32px;padding-right:6px;position:relative;color:var(--text);border-radius:0;cursor:default}.layer-row:hover{box-shadow:inset 0 0 0 1px var(--accent)}.layer-row.selected{background:var(--accent-soft)}.layer-row.child-of-selected{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}.layer-row.hidden-layer .layer-name,.layer-row.hidden-layer .layer-icon{opacity:.4}.layer-row .twisty{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);flex:none}.layer-row .twisty:hover{color:var(--text)}.layer-icon{width:16px;display:inline-flex;justify-content:center;color:var(--text-2);margin-right:8px;flex:none}.layer-row.selected .layer-icon{color:var(--accent)}.layer-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-row.is-frame>.layer-name{font-weight:600}.layer-name input{width:100%;background:var(--bg-input);border:1px solid var(--accent);border-radius:3px;padding:2px 4px;outline:none}.layer-actions{display:flex;gap:0;opacity:0}.layer-row:hover .layer-actions,.layer-actions.pinned{opacity:1}.layer-actions .icon-btn{width:24px;height:24px}.drop-line{position:absolute;left:0;right:0;height:2px;background:var(--accent);pointer-events:none}.drop-line.top{top:-1px}.drop-line.bottom{bottom:-1px}.layer-row.drop-inside{box-shadow:inset 0 0 0 2px var(--accent)}.empty-hint{color:var(--text-3);padding:16px;line-height:1.6;text-align:center}.asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}.asset{aspect-ratio:1;border-radius:6px;background:var(--bg-panel-2);overflow:hidden;position:relative;border:1px solid var(--border)}.asset:hover{border-color:var(--accent)}.asset img,.asset video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.asset .badge{position:absolute;left:4px;bottom:4px;background:#000000a6;color:#fff;border-radius:3px;padding:1px 4px;font-size:9px;font-weight:600}.row{display:flex;gap:8px;align-items:center;padding:0 8px;margin-top:6px}.row>*{min-width:0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 8px;margin-top:6px}.field{display:flex;align-items:center;height:28px;background:var(--bg-input);border-radius:5px;border:1px solid transparent;min-width:0;flex:1}.field:hover{border-color:var(--border)}.field:focus-within{border-color:var(--accent)}.field .lbl{width:24px;flex:none;text-align:center;color:var(--text-3);cursor:ew-resize;display:inline-flex;justify-content:center}.field input{width:100%;background:transparent;border:0;outline:none;height:100%;padding:0 6px 0 0;min-width:0;font-size:11px}.field .suffix{color:var(--text-3);padding-right:6px}.field select{width:100%;background:transparent;border:0;outline:none;height:100%;padding:0 4px;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.field select option{background:var(--bg-panel);color:var(--text)}.color-field{display:flex;align-items:center;height:28px;background:var(--bg-input);border-radius:5px;border:1px solid transparent;flex:1;min-width:0}.color-field:hover{border-color:var(--border)}.color-field:focus-within{border-color:var(--accent)}.swatch{width:16px;height:16px;border-radius:3px;margin:0 6px;position:relative;overflow:hidden;flex:none;box-shadow:inset 0 0 0 1px #80808066;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:#fff}.swatch span{position:absolute;top:0;right:0;bottom:0;left:0}.swatch input[type=color]{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;width:30px;height:30px;opacity:0;cursor:pointer}.color-field .hex{flex:1;min-width:0;background:transparent;border:0;outline:none;text-transform:uppercase;height:100%}.color-field .pct{width:44px;border-left:1px solid var(--border);height:100%;display:flex;align-items:center}.color-field .pct input{width:100%;background:transparent;border:0;outline:none;text-align:right;padding-right:2px}.color-field .pct span{color:var(--text-3);padding-right:6px}.seg{display:flex;background:var(--bg-input);border-radius:5px;padding:2px;gap:2px;flex:1}.seg button{flex:1;height:24px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2)}.seg button:hover{color:var(--text)}.seg button.on{background:var(--bg-panel);color:var(--text);box-shadow:0 0 0 1px var(--border)}.align-bar{display:flex;justify-content:space-between;padding:6px 8px;border-bottom:1px solid var(--border)}.check-row{display:flex;align-items:center;gap:8px;padding:0 8px;margin-top:8px;color:var(--text-2)}.check-row input{accent-color:var(--accent);margin:0}.media-info{margin:6px 8px 0;color:var(--text-3);line-height:1.5}.export-preview{margin:8px;border-radius:6px;background:var(--bg-panel-2);padding:8px;display:flex;justify-content:center}.export-preview img{max-width:100%;max-height:140px}.wide-btn{margin:8px 8px 0;height:30px;border-radius:6px;border:1px solid var(--border);width:calc(100% - 16px);display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:500}.wide-btn:hover{background:var(--bg-hover)}.wide-btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}.wide-btn:disabled{opacity:.5}.viewport{position:relative;overflow:hidden;background-color:var(--canvas);min-width:0;min-height:0;outline:none;touch-action:none}.viewport.tool-hand,.viewport.panning{cursor:grab}.viewport.panning-active{cursor:grabbing}.viewport.tool-draw{cursor:crosshair}.viewport.tool-text{cursor:text}.world{position:absolute;left:0;top:0;transform-origin:0 0}.node{position:absolute;transform-origin:center center}.node-media{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}.node-text{white-space:pre;outline:none;word-break:break-word}.node-text.editing{cursor:text;-webkit-user-select:text;user-select:text;caret-color:var(--accent)}.frame-label{position:absolute;font-size:11px;color:var(--frame-label);white-space:nowrap;pointer-events:auto;transform-origin:0 100%;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.frame-label.selected{color:var(--accent)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.overlay svg{position:absolute;left:0;top:0;overflow:visible}.handle{fill:#fff;stroke:var(--accent);stroke-width:1;pointer-events:all}.size-badge{position:absolute;background:var(--accent);color:#fff;font-size:10px;font-weight:500;padding:2px 5px;border-radius:3px;white-space:nowrap;transform:translate(-50%)}.drop-hint{position:absolute;top:12px;right:12px;bottom:12px;left:12px;border:2px dashed var(--accent);border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent);font-size:14px;font-weight:600;pointer-events:none;z-index:5}.canvas-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text-3);pointer-events:none;line-height:1.8;font-size:12px}.canvas-empty b{color:var(--text-2);font-size:15px;display:block;margin-bottom:4px}.canvas-empty kbd{background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-family:inherit;color:var(--text-2)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--menu-bg);color:#fff;padding:8px 14px;border-radius:8px;box-shadow:var(--shadow);z-index:2000;font-size:12px}.modal-back{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:3000;display:grid;place-items:center}.modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;width:min(720px,92vw);max-height:80vh;overflow:auto;box-shadow:var(--shadow);padding:20px 24px}.modal h2{margin:0 0 12px;font-size:15px;display:flex;justify-content:space-between;align-items:center}.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px}.shortcut-grid div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border-soft);color:var(--text-2);font-size:12px}.shortcut-grid kbd{font-family:inherit;color:var(--text);background:var(--bg-panel-2);border-radius:4px;padding:1px 6px}