@ichigo_san/graphing
Version:
A lightweight UML-style diagram editor built with React Flow and Tailwind CSS
1 lines • 26.3 kB
CSS
.graphing *,.graphing ::backdrop,.graphing :after,.graphing :before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.graphing .container{width:100%}@media (min-width:640px){.graphing .container{max-width:640px}}@media (min-width:768px){.graphing .container{max-width:768px}}@media (min-width:1024px){.graphing .container{max-width:1024px}}@media (min-width:1280px){.graphing .container{max-width:1280px}}@media (min-width:1536px){.graphing .container{max-width:1536px}}.graphing .sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.graphing .invisible{visibility:hidden}.graphing .fixed{position:fixed}.graphing .absolute{position:absolute}.graphing .relative{position:relative}.graphing .inset-0{inset:0}.graphing .left-0{left:0}.graphing .left-0\.5{left:.125rem}.graphing .left-2{left:.5rem}.graphing .right-2{right:.5rem}.graphing .top-0\.5{top:.125rem}.graphing .top-2{top:.5rem}.graphing .top-full{top:100%}.graphing .z-10{z-index:10}.graphing .z-50{z-index:50}.graphing .m-0{margin:0}.graphing .mx-1{margin-left:.25rem;margin-right:.25rem}.graphing .my-1{margin-top:.25rem}.graphing .mb-1,.graphing .my-1{margin-bottom:.25rem}.graphing .mb-2{margin-bottom:.5rem}.graphing .mb-4{margin-bottom:1rem}.graphing .mr-2{margin-right:.5rem}.graphing .mt-1{margin-top:.25rem}.graphing .mt-2{margin-top:.5rem}.graphing .mt-4{margin-top:1rem}.graphing .block{display:block}.graphing .inline{display:inline}.graphing .flex{display:flex}.graphing .grid{display:grid}.graphing .hidden{display:none}.graphing .h-10{height:2.5rem}.graphing .h-2{height:.5rem}.graphing .h-2\.5{height:.625rem}.graphing .h-4{height:1rem}.graphing .h-40{height:10rem}.graphing .h-5{height:1.25rem}.graphing .h-6{height:1.5rem}.graphing .h-8{height:2rem}.graphing .h-9{height:2.25rem}.graphing .h-\[1200px\]{height:1200px}.graphing .h-full{height:100%}.graphing .h-px{height:1px}.graphing .h-screen{height:100vh}.graphing .w-10{width:2.5rem}.graphing .w-12{width:3rem}.graphing .w-2\.5{width:.625rem}.graphing .w-24{width:6rem}.graphing .w-4{width:1rem}.graphing .w-72{width:18rem}.graphing .w-8{width:2rem}.graphing .w-9{width:2.25rem}.graphing .w-\[900px\]{width:900px}.graphing .w-full{width:100%}.graphing .w-px{width:1px}.graphing .min-w-\[200px\]{min-width:200px}.graphing .max-w-\[90vw\]{max-width:90vw}.graphing .max-w-md{max-width:28rem}.graphing .flex-1{flex:1 1 0%}.graphing .translate-x-5{--tw-translate-x:1.25rem}.graphing .rotate-90,.graphing .translate-x-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.graphing .rotate-90{--tw-rotate:90deg}.graphing .scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1}.graphing .scale-110,.graphing .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.graphing .animate-fadeIn{animation:fadeIn .2s ease-in-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.graphing .animate-slideIn{animation:slideIn .3s ease-in-out}.graphing .cursor-move{cursor:move}.graphing .cursor-not-allowed{cursor:not-allowed}.graphing .cursor-pointer{cursor:pointer}.graphing .resize-y{resize:vertical}.graphing .list-disc{list-style-type:disc}.graphing .appearance-none{appearance:none}.graphing .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.graphing .grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.graphing .flex-col{flex-direction:column}.graphing .flex-wrap{flex-wrap:wrap}.graphing .items-center{align-items:center}.graphing .justify-end{justify-content:flex-end}.graphing .justify-center{justify-content:center}.graphing .justify-between{justify-content:space-between}.graphing .gap-1{gap:.25rem}.graphing .gap-2{gap:.5rem}.graphing .gap-3{gap:.75rem}.graphing .gap-4{gap:1rem}.graphing .space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.graphing .overflow-hidden{overflow:hidden}.graphing .overflow-y-auto{overflow-y:auto}.graphing .rounded{border-radius:.25rem}.graphing .rounded-full{border-radius:9999px}.graphing .rounded-lg{border-radius:.5rem}.graphing .rounded-md{border-radius:.375rem}.graphing .rounded-xl{border-radius:.75rem}.graphing .rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.graphing .rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.graphing .border{border-width:1px}.graphing .border-2{border-width:2px}.graphing .border-b{border-bottom-width:1px}.graphing .border-t{border-top-width:1px}.graphing .border-dashed{border-style:dashed}.graphing .border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.graphing .border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.graphing .border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.graphing .border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity,1))}.graphing .border-indigo-600{--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity,1))}.graphing .border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.graphing .border-white\/10{border-color:#ffffff1a}.graphing .border-white\/20{border-color:#fff3}.graphing .bg-black\/60{background-color:#0009}.graphing .bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.graphing .bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.graphing .bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.graphing .bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.graphing .bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.graphing .bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.graphing .bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.graphing .bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.graphing .bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.graphing .bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.graphing .bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.graphing .bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.graphing .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.graphing .bg-white\/10{background-color:#ffffff1a}.graphing .bg-white\/20{background-color:#fff3}.graphing .bg-white\/5{background-color:#ffffff0d}.graphing .bg-white\/95{background-color:#fffffff2}.graphing .bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.graphing .fill-red-500{fill:#ef4444}.graphing .fill-white{fill:#fff}.graphing .stroke-gray-600{stroke:#4b5563}.graphing .stroke-indigo-600{stroke:#4f46e5}.graphing .p-0{padding:0}.graphing .p-1{padding:.25rem}.graphing .p-2{padding:.5rem}.graphing .p-3{padding:.75rem}.graphing .p-4{padding:1rem}.graphing .p-5{padding:1.25rem}.graphing .p-6{padding:1.5rem}.graphing .px-1\.5{padding-left:.375rem;padding-right:.375rem}.graphing .px-2{padding-left:.5rem;padding-right:.5rem}.graphing .px-3{padding-left:.75rem;padding-right:.75rem}.graphing .px-4{padding-left:1rem;padding-right:1rem}.graphing .px-6{padding-left:1.5rem;padding-right:1.5rem}.graphing .py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.graphing .py-1{padding-bottom:.25rem;padding-top:.25rem}.graphing .py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.graphing .py-2{padding-bottom:.5rem;padding-top:.5rem}.graphing .py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.graphing .py-3{padding-bottom:.75rem;padding-top:.75rem}.graphing .py-4{padding-bottom:1rem;padding-top:1rem}.graphing .py-6{padding-bottom:1.5rem;padding-top:1.5rem}.graphing .pl-5{padding-left:1.25rem}.graphing .text-left{text-align:left}.graphing .text-center{text-align:center}.graphing .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.graphing .text-4xl{font-size:2.25rem;line-height:2.5rem}.graphing .text-lg{font-size:1.125rem;line-height:1.75rem}.graphing .text-sm{font-size:.875rem;line-height:1.25rem}.graphing .text-xl{font-size:1.25rem;line-height:1.75rem}.graphing .text-xs{font-size:.75rem;line-height:1rem}.graphing .font-medium{font-weight:500}.graphing .font-semibold{font-weight:600}.graphing .uppercase{text-transform:uppercase}.graphing .italic{font-style:italic}.graphing .tracking-wider{letter-spacing:.05em}.graphing .text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.graphing .text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.graphing .text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.graphing .text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.graphing .text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.graphing .text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.graphing .text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.graphing .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.graphing .opacity-50{opacity:.5}.graphing .opacity-60{opacity:.6}.graphing .shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.graphing .shadow,.graphing .shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.graphing .shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.graphing .shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.graphing .shadow-lg,.graphing .shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.graphing .shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.graphing .shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.graphing .outline{outline-style:solid}.graphing .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.graphing .backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.graphing .backdrop-blur-md,.graphing .backdrop-blur-sm{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.graphing .backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.graphing .transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.graphing .transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.graphing .transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.graphing .transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.graphing{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}.graphing code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.graphing .modal-overlay{align-items:center;background-color:#00000080;display:flex;inset:0;justify-content:center;position:fixed;z-index:50}.graphing .modal-container{--tw-bg-opacity:1;--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);background-color:rgb(255 255 255/var(--tw-bg-opacity,1));border-radius:.5rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);max-width:28rem;overflow:hidden;width:91.666667%}.graphing .modal-container:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.graphing .modal-header{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));border-bottom-width:1px;border-color:rgb(229 231 235/var(--tw-border-opacity,1));padding:.75rem 1rem}.graphing .modal-header:is(.dark *){--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1));border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.graphing .modal-body{padding:1rem}.graphing .modal-footer{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));border-color:rgb(229 231 235/var(--tw-border-opacity,1));border-top-width:1px;display:flex;gap:.5rem;justify-content:flex-end;padding:.75rem 1rem}.graphing .modal-footer:is(.dark *){--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1));border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.graphing .modal-button{border-radius:.375rem;font-weight:500;padding:.5rem 1rem;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.graphing .modal-button.cancel{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1));color:rgb(255 255 255/var(--tw-text-opacity,1))}.graphing .modal-button.cancel:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.graphing .modal-button.confirm{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1));color:rgb(255 255 255/var(--tw-text-opacity,1))}.graphing .modal-button.confirm:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity,1))}.graphing .modal-button.confirm:disabled{opacity:.5}.graphing .custom-handle{cursor:pointer;transition:transform .15s,box-shadow .15s}.graphing .custom-handle:hover{box-shadow:0 0 0 2px #fff,0 0 6px #3b82f6cc;transform:scale(1.25)}.graphing .react-flow__connection-path{stroke-dasharray:5}.graphing .react-flow__edge-path.animated{stroke-dasharray:5;animation:dash 1s linear infinite}.graphing .circle-handle,.graphing .component-handle,.graphing .container-handle,.graphing .diamond-handle,.graphing .hexagon-handle,.graphing .triangle-handle{cursor:crosshair;pointer-events:all;transition:all .15s ease}.graphing .circle-handle:hover,.graphing .component-handle:hover,.graphing .container-handle:hover,.graphing .diamond-handle:hover,.graphing .hexagon-handle:hover,.graphing .triangle-handle:hover{background:#1d4ed8;box-shadow:0 0 0 3px #3b82f64d,0 0 8px #3b82f699;transform:scale(1.4);z-index:1000}.graphing .react-flow__connection-line{stroke:#2563eb;stroke-width:2px;stroke-dasharray:8,4;animation:dash 1s linear infinite}.graphing .react-flow__connection-line circle{fill:#2563eb;stroke:#fff;stroke-width:2px;r:4}@keyframes dash{0%{stroke-dashoffset:0}to{stroke-dashoffset:-12}}.graphing .react-flow__handle{pointer-events:all}.graphing .react-flow__handle-connecting{background:#ff6b6b;transform:scale(1.5)}.graphing .react-flow__handle-valid{background:#51cf66;transform:scale(1.3)}.graphing .react-flow__edge.selected .react-flow__edge-path{stroke:#2563eb}.graphing .react-flow__node.connecting{box-shadow:0 0 0 2px #2563eb}.graphing .react-flow__handle{z-index:100}.graphing .react-flow__handle.source{z-index:101}.graphing .react-flow__handle.target{z-index:102}.graphing .react-flow__edge-path{transition:all .2s ease}.graphing .react-flow__edge.selected .react-flow__edge-path{stroke-width:3px;filter:drop-shadow(0 0 4px rgba(37,99,235,.3))}.graphing .react-flow__edge .react-flow__edge-label circle{filter:drop-shadow(0 1px 2px rgba(0,0,0,.1));transition:all .15s ease}.graphing .react-flow__edge .react-flow__edge-label circle:hover{filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));transform:scale(1.1)}.graphing .react-flow__edge-label{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.graphing .react-flow__edge[data-intersection=arc] .react-flow__edge-path{stroke-linecap:round;stroke-linejoin:round}.graphing .react-flow__edge[data-intersection=sharp] .react-flow__edge-path{stroke-linecap:square;stroke-linejoin:miter}.graphing .intersection-preview{align-items:center;background:#f8f9fa;border-radius:4px;color:#666;display:flex;font-size:11px;gap:8px;margin-top:4px;padding:8px}.graphing .intersection-preview svg{height:16px;width:24px}.graphing .connection-preview{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;margin-top:8px;padding:12px}.graphing .connection-preview svg{height:40px;width:100%}.graphing .edge-property-section{background:#f8f9fa;border-radius:8px;margin:8px 0;padding:12px}.graphing .edge-property-section h4{color:#495057;font-size:12px;font-weight:600;letter-spacing:.5px;margin:0 0 8px;text-transform:uppercase}.graphing .intersection-type-buttons{display:flex;gap:4px;margin-top:8px}.graphing .intersection-type-button{background:#fff;border:1px solid #dee2e6;border-radius:4px;cursor:pointer;flex:1;font-size:11px;padding:6px 8px;text-align:center;transition:all .15s ease}.graphing .intersection-type-button:hover{background:#f8f9fa;border-color:#adb5bd}.graphing .intersection-type-button.active{background:#007bff;border-color:#007bff;color:#fff}.graphing .react-flow__edge.editing{pointer-events:all}.graphing .react-flow__edge.editing .react-flow__edge-path{stroke-dasharray:4,4;animation:dash 1s linear infinite}.graphing .property-section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.graphing .property-section-header .icon{font-size:14px;opacity:.7}.graphing .react-flow__edge-path{transition:stroke-dasharray .3s ease,stroke-width .2s ease}.graphing .react-flow__edge-path:hover{stroke-width:3}.graphing .intersection-jump{filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.graphing .control-point{cursor:grab;transition:all .2s ease}.graphing .control-point:hover{r:8;filter:drop-shadow(0 2px 4px rgba(59,130,246,.3))}.graphing .control-point:active{cursor:grabbing;filter:drop-shadow(0 1px 2px rgba(59,130,246,.5))}.graphing .selection-indicator{animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.graphing .intersection-preview{transition:all .2s ease}.graphing .intersection-preview:hover{transform:scale(1.05)}.graphing .edge-label{backdrop-filter:blur(4px);background:#fffffff2;border:1px solid #0000001a;box-shadow:0 2px 4px #0000001a;transition:all .2s ease}.graphing .react-flow__edge.intersection-arc path{stroke-linecap:round;stroke-linejoin:round}.graphing .react-flow__edge.intersection-sharp path{stroke-linejoin:miter;stroke-miterlimit:4}.graphing .dark .react-flow__viewport{background-color:initial}.graphing .react-flow__node{transition:filter .2s ease}.graphing .dark .react-flow__node{filter:brightness(.85)}.graphing .hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.graphing .hover\:-translate-y-0\.5:hover,.graphing .hover\:-translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.graphing .hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.graphing .hover\:translate-x-0\.5:hover{--tw-translate-x:0.125rem}.graphing .hover\:scale-110:hover,.graphing .hover\:translate-x-0\.5:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.graphing .hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.graphing .hover\:border-indigo-400:hover{--tw-border-opacity:1;border-color:rgb(129 140 248/var(--tw-border-opacity,1))}.graphing .hover\:border-indigo-500:hover{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity,1))}.graphing .hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.graphing .hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.graphing .hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.graphing .hover\:bg-indigo-50:hover{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity,1))}.graphing .hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity,1))}.graphing .hover\:bg-white\/10:hover{background-color:#ffffff1a}.graphing .hover\:bg-white\/20:hover{background-color:#fff3}.graphing .hover\:stroke-indigo-500:hover{stroke:#6366f1}.graphing .hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.graphing .hover\:shadow-lg:hover,.graphing .hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.graphing .hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.graphing .focus\:border-transparent:focus{border-color:#0000}.graphing .focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.graphing .focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.graphing .focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity,1))}.graphing .dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.graphing .dark\:border-gray-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.graphing .dark\:bg-blue-900\/30:is(.dark *){background-color:#1e3a8a4d}.graphing .dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.graphing .dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.graphing .dark\:bg-gray-800\/95:is(.dark *){background-color:#1f2937f2}.graphing .dark\:bg-gray-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.graphing .dark\:bg-green-900\/30:is(.dark *){background-color:#14532d4d}.graphing .dark\:bg-orange-900\/30:is(.dark *){background-color:#7c2d124d}.graphing .dark\:bg-red-900\/30:is(.dark *){background-color:#7f1d1d4d}.graphing .dark\:bg-yellow-900\/30:is(.dark *){background-color:#713f124d}.graphing .dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.graphing .dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.graphing .dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.graphing .dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.graphing .dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.graphing .dark\:hover\:border-indigo-400:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(129 140 248/var(--tw-border-opacity,1))}.graphing .dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.graphing .dark\:hover\:bg-indigo-900\/20:hover:is(.dark *){background-color:#312e8133}