:root{--bg:#1e1e1e;--bg-2:#2c2c2c;--bg-3:#383838;--border:#444;--text:#e6e6e6;--text-2:#a0a0a0;--text-3:#6f6f6f;--accent:#0d99ff;--accent-2:#0b7fd6;--danger:#f24822;--radius:6px;--font:"Inter", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:12px;overflow:hidden}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none}kbd{font-family:var(--mono);background:var(--bg-3);border:1px solid var(--border);color:var(--text-2);border-radius:3px;padding:1px 4px;font-size:10px}.app{flex-direction:column;height:100%;display:flex}.topbar{background:var(--bg-2);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;height:44px;padding:0 8px;display:flex}.main{flex:1;min-height:0;display:flex}aside{background:var(--bg-2);flex-shrink:0;overflow:hidden auto}aside.left{border-right:1px solid var(--border);width:240px}aside.right{border-left:1px solid var(--border);width:260px}aside.chat{border-left:1px solid var(--border);flex-direction:column;width:360px;display:flex;overflow:hidden}.logo{border-radius:var(--radius);align-items:center;gap:6px;padding:6px 8px;font-weight:600;display:flex}.logo:hover{background:var(--bg-3)}.logo .caret{color:var(--text-3);font-size:10px}.menu-wrap{position:relative}.menu{z-index:50;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);min-width:240px;padding:4px;position:absolute;top:36px;left:0;box-shadow:0 8px 24px #0006}.menu button{text-align:left;border-radius:4px;justify-content:space-between;width:100%;padding:7px 10px;display:flex}.menu button:hover{background:var(--accent);color:#fff}.menu hr{border:0;border-top:1px solid var(--border);margin:4px 0}.doc-name{flex:1;justify-content:center;align-items:center;gap:6px;display:flex}.doc-name input{text-align:center;background:0 0;border:1px solid #0000;border-radius:4px;width:220px;padding:4px 8px}.doc-name input:hover,.doc-name input:focus{border-color:var(--border);outline:none}.dirty{color:var(--text-3);font-size:9px}.topbar-right{align-items:center;gap:6px;display:flex}.zoom-ctl{background:var(--bg-3);border-radius:var(--radius);align-items:center;display:flex}.zoom-label{font-variant-numeric:tabular-nums;min-width:48px;padding:4px 6px}.toolbar{background:var(--bg-3);border-radius:var(--radius);gap:2px;padding:2px;display:flex}.tool-btn{width:32px;height:32px;color:var(--text);border-radius:4px;place-items:center;display:grid}.tool-btn:hover{background:#4a4a4a}.tool-btn.active{background:var(--accent);color:#fff}.icon-btn{min-width:24px;height:24px;color:var(--text-2);border-radius:4px;place-items:center;padding:0 4px;display:inline-grid}.icon-btn:hover:not(:disabled){background:var(--bg-3);color:var(--text)}.icon-btn:disabled{opacity:.35;cursor:default}.btn{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);white-space:nowrap;padding:5px 10px}.btn:hover:not(:disabled){background:#454545}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover:not(:disabled){background:var(--accent-2)}.btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.btn.small{padding:3px 8px;font-size:11px}.link{color:var(--accent);padding:0;text-decoration:underline}.row{align-items:center;gap:6px;display:flex}.row.end{justify-content:flex-end}.row>*{min-width:0}.grow{flex:1}.stack{flex-direction:column;gap:6px;display:flex}.grid2{grid-template-columns:1fr 1fr;gap:6px;display:grid}.grid4{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.hint{color:var(--text-3);font-size:11px;line-height:1.4}.check{color:var(--text-2);align-items:center;gap:6px;display:flex}.num-field{background:var(--bg);border:1px solid #0000;border-radius:4px;flex:1;align-items:center;gap:4px;min-width:0;height:26px;padding:0 6px;display:flex}.num-field:focus-within{border-color:var(--accent)}.num-label{color:var(--text-3);flex-shrink:0;min-width:10px;font-size:10px}.num-field input{font-variant-numeric:tabular-nums;background:0 0;border:none;outline:none;width:100%;min-width:0}.num-field input:disabled{color:var(--text-3)}.num-suffix{color:var(--text-3);font-size:10px}.select-field{background:var(--bg);border-radius:4px;flex:1;align-items:center;gap:4px;min-width:0;height:26px;padding:0 4px 0 6px;display:flex}.select-field select{min-width:0;color:var(--text);background:0 0;border:none;outline:none;flex:1;height:100%}.select-field select option{background:var(--bg-2)}.seg{background:var(--bg);border-radius:4px;gap:2px;padding:2px;display:flex}.seg button{height:22px;color:var(--text-2);border-radius:3px;flex:1;padding:0 6px;font-size:11px}.seg button.active{background:var(--bg-3);color:var(--text)}.field{flex-direction:column;gap:3px;display:flex}.field input,.text-input{background:var(--bg);border:1px solid #0000;border-radius:4px;outline:none;flex:1;min-width:0;height:26px;padding:0 6px}.field input:focus,.text-input:focus{border-color:var(--accent)}.color-field{background:var(--bg);border-radius:4px;align-items:center;gap:6px;padding:3px 4px;display:flex}.swatch{background-image:linear-gradient(45deg,#666 25%,#0000 25%),linear-gradient(-45deg,#666 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#666 75%),linear-gradient(-45deg,#0000 75%,#666 75%);background-size:6px 6px;border:1px solid #ffffff26;border-radius:3px;flex-shrink:0;width:18px;height:18px;position:relative;overflow:hidden}.swatch input{opacity:0;cursor:pointer;position:absolute;inset:-4px}.hex-input{width:64px;font-family:var(--mono);text-transform:uppercase;background:0 0;border:none;outline:none;font-size:11px}.color-field .num-field{background:0 0;flex:none}.paint-row{flex-direction:column;gap:4px;display:flex}.gradient-editor{background:var(--bg);border-radius:4px;flex-direction:column;gap:4px;padding:4px;display:flex}.gradient-preview{border-radius:3px;flex:1;height:20px}.style-chips{flex-wrap:wrap;gap:4px;margin-top:6px;display:flex}.chip{border:1px solid #fff3;border-radius:50%;width:18px;height:18px}.panel-section{border-bottom:1px solid var(--border);padding:8px 10px 10px}.panel-header{color:var(--text);justify-content:space-between;align-items:center;height:24px;margin-bottom:4px;font-weight:600;display:flex}.panel-body{flex-direction:column;gap:6px;display:flex}.props-title{border-bottom:1px solid var(--border);align-items:center;gap:6px;padding:8px 10px;display:flex}.name-input{background:0 0;border:1px solid #0000;border-radius:4px;outline:none;flex:1;min-width:0;padding:3px 6px;font-weight:600}.name-input:focus{border-color:var(--accent)}.type-badge{color:var(--text-3);text-transform:uppercase;font-size:10px}.align-row{gap:2px;display:flex}.align-row .icon-btn{flex:1;font-size:14px}details.sub summary{color:var(--text-3);cursor:pointer;margin:2px 0 4px;font-size:11px}.effect{background:var(--bg);border-radius:4px;padding:4px}.text-content{background:var(--bg);resize:vertical;border:1px solid #0000;border-radius:4px;outline:none;padding:6px}.text-content:focus{border-color:var(--accent)}.shortcuts{grid-template-columns:1fr 1fr;gap:4px 8px;display:grid}.shortcut{color:var(--text-2);align-items:center;gap:6px;font-size:11px;display:flex}.layers-panel .pages{max-height:160px;overflow-y:auto}.page-row{color:var(--text-2);cursor:default;border-radius:4px;justify-content:space-between;align-items:center;padding:4px 8px;display:flex}.page-row:hover{background:var(--bg-3)}.page-row.selected{color:var(--text);background:var(--bg-3)}.page-delete{opacity:0}.page-row:hover .page-delete{opacity:1}.layers-panel>.panel-header{margin-top:6px;padding:0 10px}.layer-tree{min-height:200px;padding-bottom:40px}.layer-row{cursor:default;height:28px;color:var(--text-2);border-top:2px solid #0000;border-bottom:2px solid #0000;align-items:center;gap:4px;padding-right:6px;display:flex;position:relative}.layer-row:hover,.layer-row.hovered{background:var(--bg-3)}.layer-row.selected{color:var(--text);background:#0d99ff40}.layer-row.hidden-layer{opacity:.45}.layer-row.drop-before{border-top-color:var(--accent)}.layer-row.drop-after{border-bottom-color:var(--accent)}.layer-row.drop-inside{box-shadow:inset 0 0 0 1px var(--accent)}.layer-caret{width:12px;color:var(--text-3);text-align:center;flex-shrink:0;font-size:10px}.layer-icon{text-align:center;width:14px;color:var(--text-3);flex-shrink:0;font-size:11px}.layer-icon.type-component,.layer-icon.type-instance{color:#9b84ff}.layer-name{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.layer-rename{background:var(--bg);border:1px solid var(--accent);border-radius:3px;outline:none;flex:1;min-width:0;padding:1px 4px}.layer-actions{gap:2px;display:none}.layer-row:hover .layer-actions{display:flex}.layer-actions:has(.on){display:flex}.layer-actions button{opacity:.6;padding:2px;font-size:10px}.layer-actions button.on{opacity:1}.layer-empty{color:var(--text-3);text-align:center;padding:12px}.canvas-wrap{background:#f0f0f0;flex:1;min-width:0;position:relative}.canvas-wrap canvas{touch-action:none;outline:none;width:100%;height:100%;position:absolute;inset:0}.overlay-svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.text-editor{outline:1px solid var(--accent);resize:none;caret-color:#000;background:0 0;border:none;min-width:20px;margin:0;padding:0;position:absolute;overflow:hidden}.canvas-empty{text-align:center;color:#888;pointer-events:none;max-width:360px;line-height:1.6;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.canvas-empty-title{color:#666;margin-bottom:4px;font-size:16px;font-weight:600}.canvas-empty kbd{color:#555;background:#fff;border-color:#ccc}.chat-panel{flex-direction:column;height:100%;display:flex}.chat-header{border-bottom:1px solid var(--border);align-items:center;gap:6px;padding:8px 10px;display:flex}.chat-title{font-weight:600}.chat-model{color:var(--text-3);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:10px;overflow:hidden}.provider-settings{border-bottom:1px solid var(--border);background:var(--bg-3);flex-direction:column;gap:8px;padding:10px;display:flex}.chat-list{flex-direction:column;flex:1;gap:10px;padding:10px;display:flex;overflow-y:auto}.chat-empty{color:var(--text-2);line-height:1.5}.suggestions{flex-direction:column;gap:6px;margin:10px 0;display:flex}.suggestion{text-align:left;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:8px 10px;line-height:1.4}.suggestion:hover{border-color:var(--accent)}.turn{flex-direction:column;gap:6px;display:flex}.turn.user .turn-text{background:var(--accent);color:#fff;white-space:pre-wrap;border-radius:12px 12px 2px;align-self:flex-end;max-width:90%;padding:8px 12px}.turn.assistant .turn-text{background:var(--bg-3);white-space:pre-wrap;border-radius:12px 12px 12px 2px;max-width:95%;padding:8px 12px;line-height:1.5}.turn-text.thinking{color:var(--text-3);font-style:italic}.turn-error{color:var(--danger);white-space:pre-wrap;word-break:break-word;font-size:11px}.tool-calls{color:var(--text-3);font-size:11px}.tool-calls summary{cursor:pointer}.tool-call{border-left:2px solid var(--border);margin:2px 0;padding:3px 0 3px 10px;overflow:hidden}.tool-call code{color:var(--text-2);font-family:var(--mono);font-size:10px}.tool-call.error{border-left-color:var(--danger)}.tool-args{font-family:var(--mono);word-break:break-all;font-size:10px}.tool-result{color:var(--danger);margin-top:2px}.tool-image{border:1px solid var(--border);border-radius:4px;max-width:100%;margin-top:4px;display:block}.attachments{gap:6px;padding:6px 10px 0;display:flex}.attachment{position:relative}.attachment img{object-fit:cover;border:1px solid var(--border);border-radius:4px;width:48px;height:48px}.attachment button{background:var(--bg-3);border-radius:50%;width:16px;height:16px;font-size:10px;line-height:1;position:absolute;top:-6px;right:-6px}.chat-input{border-top:1px solid var(--border);align-items:flex-end;gap:6px;padding:10px;display:flex}.chat-input textarea{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);resize:none;outline:none;flex:1;max-height:160px;padding:8px;line-height:1.4}.chat-input textarea:focus{border-color:var(--accent)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#555;border-radius:4px}::-webkit-scrollbar-track{background:0 0}