:root,:root[data-theme=light]{--bg: #f1f5f9;--bg-2: #f8fafc;--panel: #ffffff;--panel-2: #f8fafc;--border: #e2e8f0;--border-2: #eef2f6;--text: #0f172a;--text-2: #64748b;--text-3: #94a3b8;--accent: #2563eb;--accent-2: #3b82f6;--accent-soft: rgba(59, 130, 246, .12);--danger: #ef4444;--success: #22c55e;--warning: #f59e0b;--canvas-bg: #ffffff;--grid-line: #e2e8f0;--control-line: #94a3b8;--anchor-start: #ef4444;--anchor-mid: #f59e0b;--anchor-end: #22c55e;--cp1: #3b82f6;--cp2: #8b5cf6;--smooth: #06b6d4;--arc-pink: #ec4899;--arc-pink-2: #f472b6;--hv: #10b981;--shadow: 0 8px 30px rgba(0, 0, 0, .06);--radius: .75rem;--radius-sm: .4rem;--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}:root[data-theme=dark]{--bg: #0f172a;--bg-2: #111827;--panel: #1e293b;--panel-2: #1a2434;--border: #334155;--border-2: #293548;--text: #e2e8f0;--text-2: #94a3b8;--text-3: #64748b;--accent: #3b82f6;--accent-2: #60a5fa;--accent-soft: rgba(59, 130, 246, .18);--canvas-bg: #0b1220;--grid-line: #1e293b;--control-line: #475569;--shadow: 0 8px 30px rgba(0, 0, 0, .4)}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;overflow:hidden}.topbar{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap;z-index:5}.topbar h1{font-size:1rem;font-weight:600;margin-right:.5rem;white-space:nowrap}.topbar h1 small{font-weight:400;font-size:.75rem;color:var(--text-3);margin-left:.4rem}.toolbar-group{display:flex;align-items:center;gap:.25rem;padding:.2rem;background:var(--panel-2);border:1px solid var(--border-2);border-radius:.5rem}.tool-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .7rem;font-size:.8rem;font-weight:500;color:var(--text-2);background:transparent;border:none;border-radius:.35rem;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}.tool-btn:hover{background:var(--accent-soft);color:var(--text)}.tool-btn.active{background:var(--accent);color:#fff}.tool-btn:disabled{opacity:.4;cursor:not-allowed}.tool-btn svg{width:14px;height:14px}.topbar-spacer{flex:1}.editor-layout{flex:1;display:flex;gap:1rem;padding:1rem;min-height:0}.canvas-wrap{flex:2;min-width:0;background:var(--panel);border-radius:var(--radius);border:1px solid var(--border);padding:.5rem;display:flex;flex-direction:column;overflow:hidden}.ruler-row{display:flex;flex-shrink:0}.ruler-corner{width:20px;height:20px;flex-shrink:0;background:var(--panel)}.ruler-x{position:relative;flex:1;height:20px;overflow:hidden;background:var(--panel);border-bottom:1px solid var(--border);user-select:none}.ruler-y{position:relative;width:20px;flex-shrink:0;overflow:hidden;background:var(--panel);border-right:1px solid var(--border);user-select:none}.canvas-main{flex:1;display:flex;min-height:0}.svg-slot{flex:1;display:flex;min-width:0;min-height:0}.ruler-x .ruler-tick{position:absolute;top:12px;height:8px;width:1px;background:var(--text-2)}.ruler-x .ruler-tick span{position:absolute;top:-11px;left:3px;font-size:9px;line-height:1;color:var(--text-2);white-space:nowrap}.ruler-y .ruler-tick{position:absolute;left:12px;width:8px;height:1px;background:var(--text-2)}.ruler-y .ruler-tick span{position:absolute;top:3px;left:0;font-size:9px;line-height:1;color:var(--text-2);white-space:nowrap;transform:rotate(90deg);transform-origin:left top}.canvas-wrap svg.editor-svg{display:block;width:100%;flex:1;min-height:0;background:var(--canvas-bg);border-radius:var(--radius-sm);user-select:none;touch-action:none;cursor:default}.canvas-wrap svg .canvas-bg{fill:var(--canvas-bg)}.artboard-frame{fill:var(--panel);stroke:var(--accent-2);stroke-width:1;stroke-dasharray:6 3;opacity:.55;pointer-events:none}.sidebar{flex:1;min-width:240px;max-width:340px;display:flex;flex-direction:column;gap:.75rem;overflow-y:auto;padding-bottom:1rem}@media(max-width:780px){.editor-layout{flex-direction:column}.sidebar{max-width:none}}.panel-disclosure{border:1px solid var(--border-2);border-radius:.6rem;background:var(--panel-2)}.panel-disclosure>summary{padding:.65rem .7rem;cursor:pointer;color:var(--text-2)}.panel-disclosure>summary h4{display:inline;font-size:.7rem;font-weight:600;letter-spacing:.025em;margin-left:.25rem}.panel-disclosure>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:.6rem}.panel-disclosure>.control-group{border:0;padding-top:0}.control-group{background:var(--panel-2);border-radius:.6rem;padding:.6rem .7rem .55rem;border:1px solid var(--border-2)}.control-group h4{font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);margin-bottom:.45rem;font-weight:600}.control-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem;flex-wrap:wrap}.control-row label{font-size:.75rem;color:var(--text-2);min-width:28px}.control-row input[type=number],.control-row input[type=text],.control-row select{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:.35rem;padding:.3rem .45rem;font-size:.8rem;min-width:0;flex:1;outline:none}.control-row input:focus,.control-row select:focus{border-color:var(--accent)}.checkbox-row{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--text-2);cursor:pointer;margin-bottom:.35rem}.checkbox-row input{accent-color:var(--accent)}.type-buttons{display:flex;flex-wrap:wrap;gap:.25rem}.type-btn{padding:.3rem .55rem;font-size:.75rem;font-weight:600;border:1px solid var(--border);background:var(--panel);color:var(--text-2);border-radius:.35rem;cursor:pointer}.type-btn:hover{background:var(--accent-soft)}.type-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.toolbar-group .type-buttons{display:flex;gap:2px}.toolbar-group .layout-btn{padding:.25rem .42rem;font-size:.72rem;min-width:26px;text-align:center}.flag-toggle{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .55rem;font-size:.75rem;border:1px solid var(--border);border-radius:.35rem;background:var(--panel);color:var(--text-2);cursor:pointer}.flag-toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}.empty-hint{font-size:.75rem;color:var(--text-3);font-style:italic}.command-list{list-style:none;max-height:260px;overflow-y:auto}.command-list li{display:flex;align-items:center;gap:.3rem;padding:.25rem .4rem;font-size:.75rem;border-radius:.3rem;cursor:default}.command-list li:hover{background:var(--accent-soft)}.command-list li.selected{background:var(--accent-soft);outline:1px solid var(--accent)}.command-list .cmd-type{font-weight:700;color:var(--accent);min-width:22px}.command-list .cmd-body{background:transparent;border:none;padding:2px;font:inherit;text-align:start;min-width:0;cursor:pointer;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.command-list .cmd-body:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.command-list .cmd-del{cursor:pointer;color:var(--text-3);background:none;border:none;font-size:.85rem;padding:0 .2rem}.command-list .cmd-del:hover{color:var(--danger)}.command-list .cmd-del-grouped{color:var(--danger);font-weight:700}.command-list .cmd-del-sel{color:var(--danger)}.command-list li.cmd-sep{color:var(--text-3);font-style:italic;gap:.2rem;cursor:default}.command-list .cmd-move{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:.7rem;padding:0 .25rem}.command-list .cmd-move:hover{color:var(--accent)}.command-list li.cmd-actions{gap:.3rem;justify-content:flex-end;cursor:default}.command-list .cmd-act{background:none;border:1px solid var(--border);border-radius:.25rem;color:var(--text-2);cursor:pointer;font-size:.68rem;padding:.05rem .35rem}.command-list .cmd-act:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.command-list .cmd-act:disabled{opacity:.35;cursor:default}.command-list .cmd-insert{font-size:.68rem;background:var(--panel-2);color:var(--text-2);border:1px solid var(--border);border-radius:.25rem;padding:.05rem .15rem}.command-list li.editing .cmd-edit{flex:1;min-width:0;font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.72rem;background:var(--bg-2);color:var(--text);border:1px solid var(--accent);border-radius:.25rem;padding:.1rem .3rem;outline:none}.document-list{list-style:none;max-height:150px;overflow-y:auto}.document-list li{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--text-2);border-radius:.25rem;padding:.15rem .2rem}.document-list li.active{background:var(--accent-soft);color:var(--text-1)}.document-list .doc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0}.document-list .doc-close{flex:none;opacity:.6}.document-list .doc-close:hover{opacity:1}.document-list .doc-rename{flex:1;min-width:0;font:inherit;font-size:.72rem;padding:.1rem .25rem;border:1px solid var(--accent);border-radius:.25rem;background:var(--bg-1);color:var(--text-1);outline:none}.subpath-list{list-style:none;max-height:160px;overflow-y:auto}.subpath-list li{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--text-2);padding:.15rem .2rem}.subpath-list li.selected{background:var(--accent-soft);outline:1px solid var(--accent)}.subpath-list .sub-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subpath-list .cmd-move,.subpath-list .cmd-act{background:none;border:1px solid var(--border);border-radius:.25rem;color:var(--text-2);cursor:pointer;font-size:.68rem;padding:.05rem .35rem}.subpath-list .cmd-move{border:none;font-size:.7rem;padding:0 .25rem}.subpath-list .cmd-move:hover:not(:disabled){color:var(--accent)}.subpath-list .cmd-act:hover{border-color:var(--accent);color:var(--accent)}.subpath-list .cmd-move:disabled{opacity:.35;cursor:default}.subpath-list li.hidden-sub .sub-name{opacity:.45;text-decoration:line-through}.subpath-list li.hidden-sub{opacity:.7}.subpath-list .sub-swatch{width:.85rem;height:.85rem;border-radius:.2rem;border:1px solid var(--border);cursor:pointer;padding:0;flex:none}.subpath-list .sub-swatch-default{background:repeating-linear-gradient(45deg,transparent,transparent 2px,var(--border) 2px,var(--border) 4px)}.subpath-list .sub-vis{font-size:.75rem}.element-layer .element-path{opacity:.85}.element-layer .element-text{user-select:none}.element-layer .element-text.active-text{outline:1px dashed var(--accent-2);outline-offset:2px}.element-layer .element-image{opacity:.9;image-rendering:auto}.element-layer .element-image.active-image{outline:1px dashed var(--accent-2);outline-offset:1px}.inline-text-edit{position:fixed;z-index:40;min-width:80px;padding:2px 4px;border:1px solid var(--accent-2);border-radius:3px;background:var(--bg);color:var(--text-1);box-shadow:0 2px 8px #00000040}.snap-marker line{stroke:var(--accent-2);stroke-width:1;vector-effect:non-scaling-stroke}.snap-marker .snap-marker-line{opacity:.6}.doc-guides .guide-vis{stroke:var(--accent-2);stroke-width:1;stroke-dasharray:5 3;pointer-events:none}.doc-guides .guide-hit{stroke:transparent;stroke-width:7;pointer-events:stroke}.guide-line[data-guide=x] .guide-hit{cursor:ew-resize}.guide-line[data-guide=y] .guide-hit{cursor:ns-resize}.layers-list{list-style:none;max-height:180px;overflow-y:auto}.layers-list li.layers-row{display:flex;align-items:center;gap:.25rem;font-size:.72rem;color:var(--text-2);padding:.12rem .2rem;cursor:pointer;border-left:2px solid transparent}.layers-list li.layers-row:hover{background:var(--accent-soft)}.layers-list li.layers-row.selected{background:var(--accent-soft);outline:1px solid var(--accent)}.layers-list li.layers-row.active{border-left-color:var(--accent)}.layers-list li.layers-row.hidden-elem{opacity:.45}.layers-list li.layers-row.locked-elem .layers-name{color:var(--text-3)}.layers-list .layers-glyph{flex:0 0 auto;width:1.1em;text-align:center;color:var(--text-3)}.layers-list .layers-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layers-list .layers-rename{flex:1;min-width:0;font-size:.72rem;padding:0;border:1px solid var(--accent);background:transparent;color:var(--text-1)}.layers-list .cmd-move,.layers-list .cmd-act{font-size:.7rem}.layers-actions{display:flex;gap:.25rem;margin-top:.3rem;flex-wrap:wrap}.layers-act{font-size:.68rem;padding:.15rem .4rem;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text-2);cursor:pointer}.layers-act:hover{border-color:var(--accent);color:var(--text-1)}.import-recents{margin-top:.35rem;max-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem;align-items:flex-start}.import-recent{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:1px solid var(--border);border-radius:.25rem;color:var(--text-2);font-size:.7rem;cursor:pointer;padding:.1rem .4rem}.import-modes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.35rem}.import-modes .radio-row{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--text-2);cursor:pointer}.import-recent:hover{border-color:var(--accent);color:var(--accent)}.import-picker{max-height:180px;overflow-y:auto;border:1px solid var(--border);border-radius:.35rem;background:var(--bg-2)}.import-picker:empty{display:none}.import-row{display:flex;align-items:center;gap:.4rem;padding:.25rem .5rem;font-size:.72rem;cursor:pointer}.import-row:hover{background:var(--accent-soft)}.import-row .import-preview{font-family:ui-monospace,Cascadia Code,Consolas,monospace;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.path-code{font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.68rem;line-height:1.5;color:var(--text-2);background:var(--bg-2);border:1px solid var(--border);border-radius:.35rem;padding:.45rem .55rem;max-height:130px;overflow:auto;white-space:pre-wrap;word-break:break-all;user-select:text;cursor:text}.history-list{list-style:none;max-height:140px;overflow-y:auto}.history-list li{font-size:.72rem;color:var(--text-2);padding:.15rem .3rem}.history-list li.current{color:var(--accent);font-weight:600}.statusbar{display:flex;align-items:center;gap:1rem;padding:.35rem 1rem;font-size:.72rem;color:var(--text-2);background:var(--panel);border-top:1px solid var(--border);flex-wrap:wrap}.statusbar .spacer{flex:1}.statusbar .error{color:var(--danger)}.statusbar .status-snap{color:var(--accent-2);font-weight:700;min-width:1ch}.modal-backdrop{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);width:min(640px,92vw);max-height:84vh;display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;gap:.5rem;padding:.8rem 1rem;border-bottom:1px solid var(--border)}.modal-header h3{font-size:.95rem;flex:1}.modal-close{background:none;border:none;font-size:1.1rem;color:var(--text-3);cursor:pointer}.modal-body{padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem}.modal-body textarea{width:100%;min-height:140px;font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.78rem;background:var(--bg-2);color:var(--text);border:1px solid var(--border);border-radius:.35rem;padding:.5rem;resize:vertical;outline:none}.modal-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.7rem 1rem;border-top:1px solid var(--border)}.btn{padding:.4rem .9rem;font-size:.8rem;border-radius:.4rem;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn:hover{filter:brightness(1.05)}.btn:disabled{opacity:.4;cursor:not-allowed}.path-main,.path-glow{stroke-linecap:round;stroke-linejoin:round}.control-line{stroke:var(--control-line);stroke-width:1;stroke-dasharray:3 3;pointer-events:none;opacity:.4}.control-line.smooth{stroke:var(--smooth)}.arc-axis{stroke:var(--arc-pink);stroke-width:1;opacity:.5}.axis-line{stroke:var(--accent-2);stroke-width:1;stroke-dasharray:4 4;opacity:.5}.rot-line{stroke:var(--cp2);stroke-width:1;stroke-dasharray:2 3;opacity:.6}.selection-ring{fill:none;stroke-width:3;opacity:0;pointer-events:none;transition:opacity .15s}.selection-ring.active{opacity:.4}.draggable{cursor:grab;pointer-events:all;transition:r .12s ease,stroke-width .12s ease}.draggable:active{cursor:grabbing}.draggable:hover{r:11;stroke-width:2.5}.anchor-point{cursor:pointer}.anchor-point:hover{stroke:var(--accent)}.handle-label{font-size:11px;fill:var(--text-2);font-weight:500;pointer-events:none;dominant-baseline:middle;font-family:var(--font)}.type-badge{font-size:10px;fill:var(--text-2);pointer-events:none;font-weight:600;font-family:var(--font)}.delete-hint{font-size:9px;fill:var(--text-3);pointer-events:none;opacity:0;transition:opacity .2s}.anchor-point:hover+.delete-hint,.anchor-point:hover~.delete-hint{opacity:1}.label,.anchor-label{font-size:11px;fill:var(--text-2);font-family:var(--font);pointer-events:none}.badge{font-size:11px;font-weight:700;fill:var(--accent);pointer-events:none}.anchor-label{fill:var(--text-3)}.toast{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);background:var(--panel);color:var(--text);border:1px solid var(--border);border-left:3px solid var(--accent);padding:.6rem 1rem;border-radius:.5rem;font-size:.8rem;box-shadow:var(--shadow);z-index:200;animation:toast-in .2s ease}.toast.error{border-left-color:var(--danger)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-3)}.quick-start{max-width:760px}.quick-start-intro,.quick-start-note{line-height:1.55}.quick-start-steps{padding-inline-start:1.5rem;line-height:1.6;margin:0}.quick-start-steps li+li{margin-top:.5rem}.quick-start-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.quick-start-card{display:flex;flex-direction:column;gap:.75rem;padding:1rem;border:1px solid var(--border);border-radius:8px}.quick-start-card h4,.quick-start-card p{margin:0}.quick-start-card p{flex:1;line-height:1.5;font-size:.85rem}.quick-start-card .btn{white-space:normal}.quick-start-note{font-size:.8rem}@media(max-width:640px){.quick-start-samples{grid-template-columns:1fr}}[hidden]{display:none!important}