:root{--base:#1e1e2e;--mantle:#181825;--crust:#11111b;--surface0:#313244;--surface1:#45475a;--surface2:#585b70;--overlay0:#6c7086;--overlay1:#7f849c;--overlay2:#9399b2;--subtext0:#a6adc8;--subtext1:#bac2de;--text:#cdd6f4;--lavender:#b4befe;--blue:#89b4fa;--sapphire:#74c7ec;--sky:#89dceb;--teal:#94e2d5;--green:#a6e3a1;--yellow:#f9e2af;--peach:#fab387;--maroon:#eba0ac;--red:#f38ba8;--mauve:#cba6f7;--pink:#f5c2e7;--flamingo:#f2cdcd;--rosewater:#f5e0dc;--neon-mauve:#cba6f799;--neon-blue:#89b4fa99;--neon-teal:#94e2d580;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--panel-width:260px;--topbar-h:52px;--font:"Segoe UI", system-ui, -apple-system, sans-serif;--font-mono:"Cascadia Code", "Fira Code", "JetBrains Mono", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--base);color:var(--text);font-family:var(--font);-webkit-user-select:none;user-select:none;width:100vw;height:100vh;font-size:13px;overflow:hidden}#app{grid-template-rows:var(--topbar-h) 1fr;grid-template-columns:1fr var(--panel-width);height:100vh;display:grid}#topbar{background:var(--mantle);border-bottom:1px solid var(--surface0);z-index:100;grid-column:1/-1;align-items:center;gap:12px;padding:0 16px;display:flex;box-shadow:0 1px 20px #0006}.topbar-brand{align-items:center;gap:8px;margin-right:12px;display:flex}.brand-icon{color:var(--mauve);filter:drop-shadow(0 0 6px var(--neon-mauve));font-size:20px;line-height:1}.brand-name{letter-spacing:.04em;color:var(--lavender);font-size:14px;font-weight:600}.topbar-tools{flex:1;align-items:center;gap:4px;display:flex}.topbar-separator{background:var(--surface1);width:1px;height:24px;margin:0 6px}.tool-btn{border-radius:var(--radius-sm);color:var(--subtext1);cursor:pointer;font-size:12px;font-family:var(--font);background:0 0;border:1px solid #0000;align-items:center;gap:6px;padding:6px 12px;transition:all .15s;display:flex}.tool-btn svg{flex-shrink:0;width:16px;height:16px}.tool-btn:hover{background:var(--surface0);color:var(--text);border-color:var(--surface1)}.tool-btn.active{border-color:var(--mauve);color:var(--mauve);background:#cba6f71f;box-shadow:0 0 10px #cba6f733,inset 0 0 10px #cba6f70d}.icon-btn{border:1px solid var(--surface1);border-radius:var(--radius-sm);color:var(--subtext0);cursor:pointer;font-size:12px;font-family:var(--font);background:0 0;align-items:center;gap:5px;padding:6px 10px;transition:all .15s;display:flex}.icon-btn svg{width:14px;height:14px}.icon-btn:hover{background:var(--surface0);color:var(--text);border-color:var(--overlay0)}.icon-btn.accent{border-color:var(--mauve);color:var(--mauve);background:#cba6f714}.icon-btn.accent:hover{background:#cba6f72e;box-shadow:0 0 12px #cba6f740}#canvas-area{background:var(--base);background-image:radial-gradient(circle,#cba6f708 0%,#0000 70%),linear-gradient(#45475a26 1px,#0000 1px),linear-gradient(90deg,#45475a26 1px,#0000 1px);background-size:100% 100%,40px 40px,40px 40px;position:relative;overflow:hidden}#canvas{cursor:default;outline:none;width:100%;height:100%}#canvas.tool-state{cursor:crosshair}#canvas.tool-transition{cursor:cell}#canvas.dragging{cursor:grabbing}#zoom-controls{background:var(--mantle);border:1px solid var(--surface0);border-radius:var(--radius-md);flex-direction:column;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:48px;right:12px;box-shadow:0 4px 20px #0006}.zoom-btn{border-radius:var(--radius-sm);width:28px;height:28px;color:var(--subtext1);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;font-size:16px;transition:all .1s;display:flex}.zoom-btn:hover{background:var(--surface0);color:var(--text)}#zoom-label{color:var(--overlay1);font-size:11px;font-family:var(--font-mono);padding:2px 0}#status-bar{background:var(--mantle);border:1px solid var(--surface0);color:var(--overlay2);pointer-events:none;white-space:nowrap;border-radius:20px;padding:5px 14px;font-size:11px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}#right-panel{background:var(--mantle);border-left:1px solid var(--surface0);flex-direction:column;display:flex;overflow:hidden}#panel-header{border-bottom:1px solid var(--surface0);padding:14px 16px 10px}#panel-title{letter-spacing:.08em;text-transform:uppercase;color:var(--overlay1);font-size:11px;font-weight:600}#panel-content{scrollbar-width:thin;scrollbar-color:var(--surface1) transparent;flex:1;padding:12px;overflow:hidden auto}#panel-content::-webkit-scrollbar{width:4px}#panel-content::-webkit-scrollbar-track{background:0 0}#panel-content::-webkit-scrollbar-thumb{background:var(--surface1);border-radius:4px}#panel-empty{height:200px;color:var(--overlay0);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;line-height:1.6;display:flex}.empty-icon{opacity:.3;font-size:32px}.panel-section{flex-direction:column;gap:12px;display:flex}.panel-section.hidden{display:none}.prop-group{flex-direction:column;gap:5px;display:flex}.prop-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.prop-group label{color:var(--overlay2);letter-spacing:.04em;font-size:11px;font-weight:500}.prop-group input[type=text],.prop-group input[type=number],.prop-group textarea{background:var(--surface0);border:1px solid var(--surface1);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);resize:none;outline:none;width:100%;padding:7px 10px;font-size:12px;transition:border-color .15s,box-shadow .15s}.prop-group input[type=text]:focus,.prop-group input[type=number]:focus,.prop-group textarea:focus{border-color:var(--mauve);box-shadow:0 0 0 2px #cba6f726}.prop-group input[type=range]{width:100%;accent-color:var(--mauve);cursor:pointer;height:4px}.color-picker-wrap{background:var(--surface0);border:1px solid var(--surface1);border-radius:var(--radius-sm);cursor:pointer;align-items:center;gap:8px;padding:4px 10px 4px 4px;display:flex}.color-picker-wrap input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:4px;width:28px;height:28px;padding:0}.color-picker-wrap span{font-family:var(--font-mono);color:var(--subtext0);font-size:11px}.color-presets{flex-wrap:wrap;gap:6px;display:flex}.color-swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:22px;height:22px;transition:transform .1s,border-color .1s}.color-swatch:hover{border-color:var(--text);transform:scale(1.2)}.color-swatch.selected{border-color:var(--text);transform:scale(1.15)}.toggle-label{cursor:pointer;align-items:center;gap:10px;color:var(--subtext1)!important;flex-direction:row!important;font-size:12px!important;display:flex!important}.toggle-label input[type=checkbox]{display:none}.toggle-track{background:var(--surface1);border-radius:9px;flex-shrink:0;width:32px;height:18px;transition:background .2s;position:relative}.toggle-track:after{content:"";background:var(--overlay0);border-radius:50%;width:12px;height:12px;transition:transform .2s,background .2s;position:absolute;top:3px;left:3px}.toggle-label input:checked+.toggle-track{background:#cba6f74d}.toggle-label input:checked+.toggle-track:after{background:var(--mauve);box-shadow:0 0 6px var(--neon-mauve);transform:translate(14px)}.segment-control{background:var(--surface0);border:1px solid var(--surface1);border-radius:var(--radius-sm);display:flex;overflow:hidden}.seg-btn{color:var(--subtext0);cursor:pointer;font-size:11px;font-family:var(--font);background:0 0;border:none;flex:1;padding:6px;transition:all .15s}.seg-btn.active{color:var(--mauve);background:#cba6f72e}.seg-btn:hover:not(.active){background:var(--surface1);color:var(--text)}.danger-btn{border-radius:var(--radius-sm);width:100%;color:var(--red);cursor:pointer;font-size:12px;font-family:var(--font);background:#f38ba814;border:1px solid #f38ba84d;margin-top:4px;padding:8px;transition:all .15s}.danger-btn:hover{border-color:var(--red);background:#f38ba82e;box-shadow:0 0 12px #f38ba833}.state-group{cursor:pointer}.state-group:hover .state-circle{filter:brightness(1.15)}.state-circle{stroke-width:2px;transition:filter .15s}.state-circle.selected{stroke-width:3px;filter:drop-shadow(0 0 8px)}.state-circle.final{stroke-dasharray:none}.state-inner-ring{fill:none;stroke-width:1.5px;opacity:.7;pointer-events:none}.state-label-title{font-family:var(--font);fill:var(--text);dominant-baseline:middle;text-anchor:middle;pointer-events:none;font-size:13px;font-weight:600}.state-label-desc{font-family:var(--font);fill:var(--subtext0);dominant-baseline:middle;text-anchor:middle;pointer-events:none;font-size:10px}.transition-group{cursor:pointer}.transition-path{fill:none;stroke-width:2px;transition:stroke-width .1s}.transition-path:hover,.transition-path.selected{stroke-width:2.5px}.transition-label{font-family:var(--font);fill:var(--text);dominant-baseline:middle;text-anchor:middle;pointer-events:none;font-size:11px;font-weight:500}.transition-label-bg{fill:var(--mantle);rx:4;pointer-events:none}.resize-handle{fill:var(--base);stroke:var(--mauve);stroke-width:2px;cursor:nwse-resize;filter:drop-shadow(0 0 3px var(--neon-mauve));transition:r .1s}.resize-handle:hover{r:7}.arch-handle{fill:var(--sky);stroke:var(--base);stroke-width:2px;cursor:grab;filter:drop-shadow(0 0 3px var(--neon-teal));r:6}.arch-handle:active{cursor:grabbing}#transition-hint{border:1px solid var(--mauve);color:var(--mauve);pointer-events:none;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#cba6f726;border-radius:20px;padding:8px 18px;font-size:12px;position:fixed;bottom:80px;left:50%;transform:translate(-50%);box-shadow:0 0 20px #cba6f733}#transition-hint.hidden{display:none}.initial-arrow{stroke:var(--green);stroke-width:2.5px;fill:none;marker-end:url(#arrowhead-green);pointer-events:none}.initial-dot{fill:var(--green);filter:drop-shadow(0 0 4px #a6e3a1cc)}.glow-mauve{filter:drop-shadow(0 0 6px #cba6f7b3)}.glow-blue{filter:drop-shadow(0 0 6px #89b4fab3)}.glow-teal{filter:drop-shadow(0 0 6px #94e2d599)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--surface1);border-radius:3px}