likec4 1.60.0 → 1.61.0

package/__app__/src/style.css

@@ -649,7 +649,7 @@ fieldset:disabled .mantine-active:active {
       [data-offset-scrollbars='y'],
       [data-offset-scrollbars='present']
     ):not([data-vertical-hidden]) {
-        padding-inline-end: var(--scrollarea-scrollbar-size);
+        padding-inline-end: var(--scrollarea-offset-size, var(--scrollarea-scrollbar-size));
         padding-inline-start: unset;
       }
 
@@ -659,7 +659,7 @@ fieldset:disabled .mantine-active:active {
       [data-offset-scrollbars='present']
     ):not([data-vertical-hidden]):where([data-vertical-scrollbar-position='left']) {
           padding-inline-end: unset;
-          padding-left: var(--scrollarea-scrollbar-size);
+          padding-left: var(--scrollarea-offset-size, var(--scrollarea-scrollbar-size));
           padding-right: unset;
         }
 
@@ -670,7 +670,7 @@ fieldset:disabled .mantine-active:active {
     ):not([data-vertical-hidden]):where([data-vertical-scrollbar-position='right']) {
           padding-inline-end: unset;
           padding-left: unset;
-          padding-right: var(--scrollarea-scrollbar-size);
+          padding-right: var(--scrollarea-offset-size, var(--scrollarea-scrollbar-size));
         }
 
 .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
@@ -686,7 +686,7 @@ fieldset:disabled .mantine-active:active {
       [data-offset-scrollbars='x'],
       [data-offset-scrollbars='present']
     ):not([data-horizontal-hidden]) {
-        padding-bottom: var(--scrollarea-scrollbar-size);
+        padding-bottom: var(--scrollarea-offset-size, var(--scrollarea-scrollbar-size));
       }
 
 .m_f8f631dd {
@@ -10836,6 +10836,41 @@ html, body {
     height: 5px !important;
 }
 
+  .likec4-root .react-flow__node.likec4-diff-added {
+    --likec4-diff-color: var(--colors-likec4-diff-added);
+    box-shadow: 0 0 0 10px color-mix(in srgb, var(--likec4-diff-color) 22%, transparent);
+}
+
+  .likec4-root .react-flow__node.likec4-diff-modified {
+    --likec4-diff-color: var(--colors-likec4-diff-modified);
+    outline-style: dashed;
+}
+
+  .likec4-root .react-flow__node.likec4-diff-orphan {
+    --likec4-diff-color: var(--colors-likec4-diff-orphan);
+    outline-style: dotted;
+}
+
+  .likec4-root .react-flow__node.likec4-diff-removed {
+    --likec4-diff-color: var(--colors-likec4-diff-removed);
+    outline-style: dashed;
+    opacity: var(--opacity-0\.45);
+    filter: grayscale(70%);
+}
+
+  .likec4-root .react-flow__edge.likec4-diff-added * {
+    --xy-edge-stroke: var(--colors-likec4-diff-added);
+    --xy-edge-stroke-width: 4;
+}
+
+  .likec4-root .react-flow__edge.likec4-diff-modified * {
+    --xy-edge-stroke: var(--colors-likec4-diff-modified);
+}
+
+  .likec4-root .react-flow__edge.likec4-diff-removed * {
+    --xy-edge-stroke: var(--colors-likec4-diff-removed);
+}
+
   .likec4-root :where(.react-flow__edge, .likec4-edge-container, .likec4-edge-label-container) {
     --xy-edge-stroke-width: 3;
     --xy-edge-stroke: var(--likec4-palette-relation-stroke);
@@ -10854,6 +10889,14 @@ html, body {
     --xy-edge-stroke: var(--likec4-palette-relation-stroke-selected);
 }
 
+  .likec4-root .react-flow__node.likec4-diff {
+    border-radius: 6px;
+    outline-width: 3px;
+    outline-style: solid;
+    outline-color: var(--likec4-diff-color);
+    outline-offset: 4px;
+}
+
   .likec4-root .noselect * {
     -webkit-user-select: none;
     user-select: none;
@@ -10863,6 +10906,14 @@ html, body {
     opacity: var(--opacity-0\.25);
 }
 
+  .likec4-root .react-flow__edge.likec4-diff-removed {
+    opacity: var(--opacity-0\.55);
+}
+
+  .likec4-root .react-flow__edge.likec4-diff-removed .react-flow__edge-path {
+    stroke-dasharray: 6 6;
+}
+
   .likec4-root:is([data-likec4-reduced-graphics="true"]) .hide-on-reduced-graphics {
     display: none !important;
 }
@@ -10972,6 +11023,7 @@ html, body {
 
 @layer tokens {
   :where(:root,:host) {
+    --font-sizes-micro: 9px;
     --font-sizes-xxs: 10px;
     --font-sizes-xs: 12px;
     --font-sizes-sm: 13px;
@@ -11015,6 +11067,7 @@ html, body {
     --letter-spacings-normal: 0em;
     --letter-spacings-caps: 0.12em;
     --letter-spacings-caps-sm: 0.06em;
+    --letter-spacings-caps-label: 0.08em;
     --sizes-0: 0;
     --sizes-auto: auto;
     --sizes-max-content: max-content;
@@ -11264,10 +11317,70 @@ html, body {
     --colors-diagram-background: var(--colors-surface-canvas);
     --colors-diagram-background-pattern: #ced4da;
     --colors-likec4-mix-color: #000000;
-    --colors-likec4-tag-bg: var(--colors-tomato-9);
-    --colors-likec4-tag-bg-hover: var(--colors-tomato-10);
-    --colors-likec4-tag-border: var(--colors-tomato-8);
-    --colors-likec4-tag-text: var(--colors-tomato-3);
+    --colors-likec4-tag-bg: var(--colors-likec4-tag-tomato-bg);
+    --colors-likec4-tag-bg-hover: var(--colors-likec4-tag-tomato-bg-hover);
+    --colors-likec4-tag-border: var(--colors-likec4-tag-tomato-border);
+    --colors-likec4-tag-text: var(--colors-likec4-tag-tomato-text);
+    --colors-likec4-tag-tomato-bg: #e54d2e;
+    --colors-likec4-tag-tomato-bg-hover: #dd4425;
+    --colors-likec4-tag-tomato-border: #ec8e7b;
+    --colors-likec4-tag-tomato-text: #5c271f;
+    --colors-likec4-tag-grass-bg: #46a758;
+    --colors-likec4-tag-grass-bg-hover: #3e9b4f;
+    --colors-likec4-tag-grass-border: #65ba74;
+    --colors-likec4-tag-grass-text: rgba(0 0 0 / 0.85);
+    --colors-likec4-tag-blue-bg: #0090ff;
+    --colors-likec4-tag-blue-bg-hover: #0588f0;
+    --colors-likec4-tag-blue-border: #5eb1ef;
+    --colors-likec4-tag-blue-text: #113264;
+    --colors-likec4-tag-ruby-bg: #e54666;
+    --colors-likec4-tag-ruby-bg-hover: #dc3b5d;
+    --colors-likec4-tag-ruby-border: #e592a3;
+    --colors-likec4-tag-ruby-text: #64172b;
+    --colors-likec4-tag-orange-bg: #f76b15;
+    --colors-likec4-tag-orange-bg-hover: #ef5f00;
+    --colors-likec4-tag-orange-border: #ec9455;
+    --colors-likec4-tag-orange-text: #582d1d;
+    --colors-likec4-tag-indigo-bg: #3e63dd;
+    --colors-likec4-tag-indigo-bg-hover: #3358d4;
+    --colors-likec4-tag-indigo-border: #8da4ef;
+    --colors-likec4-tag-indigo-text: #1f2d5c;
+    --colors-likec4-tag-pink-bg: #d6409f;
+    --colors-likec4-tag-pink-bg-hover: #cf3897;
+    --colors-likec4-tag-pink-border: #dd93c2;
+    --colors-likec4-tag-pink-text: #651249;
+    --colors-likec4-tag-teal-bg: #12a594;
+    --colors-likec4-tag-teal-bg-hover: #0d9b8a;
+    --colors-likec4-tag-teal-border: #53b9ab;
+    --colors-likec4-tag-teal-text: #0d3d38;
+    --colors-likec4-tag-purple-bg: #8e4ec6;
+    --colors-likec4-tag-purple-bg-hover: #8347b9;
+    --colors-likec4-tag-purple-border: #be93e4;
+    --colors-likec4-tag-purple-text: #402060;
+    --colors-likec4-tag-amber-bg: #ffc53d;
+    --colors-likec4-tag-amber-bg-hover: #ffba18;
+    --colors-likec4-tag-amber-border: #e2a336;
+    --colors-likec4-tag-amber-text: rgba(0 0 0 / 0.85);
+    --colors-likec4-tag-crimson-bg: #e93d82;
+    --colors-likec4-tag-crimson-bg-hover: #df3478;
+    --colors-likec4-tag-crimson-border: #e093b2;
+    --colors-likec4-tag-crimson-text: #621639;
+    --colors-likec4-tag-red-bg: #e5484d;
+    --colors-likec4-tag-red-bg-hover: #dc3e42;
+    --colors-likec4-tag-red-border: #eb8e90;
+    --colors-likec4-tag-red-text: #641723;
+    --colors-likec4-tag-lime-bg: #bdee63;
+    --colors-likec4-tag-lime-bg-hover: #b0e64c;
+    --colors-likec4-tag-lime-border: #8db654;
+    --colors-likec4-tag-lime-text: rgba(0 0 0 / 0.85);
+    --colors-likec4-tag-yellow-bg: #ffe629;
+    --colors-likec4-tag-yellow-bg-hover: #ffdc00;
+    --colors-likec4-tag-yellow-border: #d5ae39;
+    --colors-likec4-tag-yellow-text: rgba(0 0 0 / 0.85);
+    --colors-likec4-tag-violet-bg: #6e56cf;
+    --colors-likec4-tag-violet-bg-hover: #654dc4;
+    --colors-likec4-tag-violet-border: #aa99ec;
+    --colors-likec4-tag-violet-text: #2f265f;
     --colors-likec4-panel-bg: var(--colors-surface-default);
     --colors-likec4-panel-border: #e9ecef;
     --colors-likec4-panel-text: color-mix(in srgb, var(--colors-text-default) 85%, transparent);
@@ -11290,6 +11403,10 @@ html, body {
     --colors-likec4-compare-manual: #e8590c;
     --colors-likec4-compare-outline: #e8590c;
     --colors-likec4-compare-latest: #40c057;
+    --colors-likec4-diff-added: #2f9e44;
+    --colors-likec4-diff-modified: #f08c00;
+    --colors-likec4-diff-removed: #e03131;
+    --colors-likec4-diff-orphan: #e8590c;
     --colors-subflow-opt: oklch(from #3b5bdb l c h / 8%);
     --colors-subflow-opt-hovered: oklch(from #3b5bdb l c h / 13%);
     --colors-subflow-opt-text: oklch(from #364fc7 l c h / 75%);
@@ -11325,186 +11442,6 @@ html, body {
     --colors-subflow-alt-text: oklch(from #5f3dc4 l c h / 90%);
     --colors-subflow-alt-border: oklch(from #7048e8 l c h / 65%);
     --colors-subflow-alt-label: oklch(from #7048e8 l c h / 30%);
-    --colors-amber-1: #fefdfb;
-    --colors-amber-2: #fefbe9;
-    --colors-amber-3: #fff7c2;
-    --colors-amber-4: #ffee9c;
-    --colors-amber-5: #fbe577;
-    --colors-amber-6: #f3d673;
-    --colors-amber-7: #e9c162;
-    --colors-amber-8: #e2a336;
-    --colors-amber-9: #ffc53d;
-    --colors-amber-10: #ffba18;
-    --colors-amber-11: #ab6400;
-    --colors-amber-12: #4f3422;
-    --colors-blue-1: #fbfdff;
-    --colors-blue-2: #f4faff;
-    --colors-blue-3: #e6f4fe;
-    --colors-blue-4: #d5efff;
-    --colors-blue-5: #c2e5ff;
-    --colors-blue-6: #acd8fc;
-    --colors-blue-7: #8ec8f6;
-    --colors-blue-8: #5eb1ef;
-    --colors-blue-9: #0090ff;
-    --colors-blue-10: #0588f0;
-    --colors-blue-11: #0d74ce;
-    --colors-blue-12: #113264;
-    --colors-crimson-1: #fffcfd;
-    --colors-crimson-2: #fef7f9;
-    --colors-crimson-3: #ffe9f0;
-    --colors-crimson-4: #fedce7;
-    --colors-crimson-5: #facedd;
-    --colors-crimson-6: #f3bed1;
-    --colors-crimson-7: #eaacc3;
-    --colors-crimson-8: #e093b2;
-    --colors-crimson-9: #e93d82;
-    --colors-crimson-10: #df3478;
-    --colors-crimson-11: #cb1d63;
-    --colors-crimson-12: #621639;
-    --colors-grass-1: #fbfefb;
-    --colors-grass-2: #f5fbf5;
-    --colors-grass-3: #e9f6e9;
-    --colors-grass-4: #daf1db;
-    --colors-grass-5: #c9e8ca;
-    --colors-grass-6: #b2ddb5;
-    --colors-grass-7: #94ce9a;
-    --colors-grass-8: #65ba74;
-    --colors-grass-9: #46a758;
-    --colors-grass-10: #3e9b4f;
-    --colors-grass-11: #2a7e3b;
-    --colors-grass-12: #203c25;
-    --colors-indigo-1: #fdfdfe;
-    --colors-indigo-2: #f7f9ff;
-    --colors-indigo-3: #edf2fe;
-    --colors-indigo-4: #e1e9ff;
-    --colors-indigo-5: #d2deff;
-    --colors-indigo-6: #c1d0ff;
-    --colors-indigo-7: #abbdf9;
-    --colors-indigo-8: #8da4ef;
-    --colors-indigo-9: #3e63dd;
-    --colors-indigo-10: #3358d4;
-    --colors-indigo-11: #3a5bc7;
-    --colors-indigo-12: #1f2d5c;
-    --colors-lime-1: #fcfdfa;
-    --colors-lime-2: #f8faf3;
-    --colors-lime-3: #eef6d6;
-    --colors-lime-4: #e2f0bd;
-    --colors-lime-5: #d3e7a6;
-    --colors-lime-6: #c2da91;
-    --colors-lime-7: #abc978;
-    --colors-lime-8: #8db654;
-    --colors-lime-9: #bdee63;
-    --colors-lime-10: #b0e64c;
-    --colors-lime-11: #5c7c2f;
-    --colors-lime-12: #37401c;
-    --colors-orange-1: #fefcfb;
-    --colors-orange-2: #fff7ed;
-    --colors-orange-3: #ffefd6;
-    --colors-orange-4: #ffdfb5;
-    --colors-orange-5: #ffd19a;
-    --colors-orange-6: #ffc182;
-    --colors-orange-7: #f5ae73;
-    --colors-orange-8: #ec9455;
-    --colors-orange-9: #f76b15;
-    --colors-orange-10: #ef5f00;
-    --colors-orange-11: #cc4e00;
-    --colors-orange-12: #582d1d;
-    --colors-pink-1: #fffcfe;
-    --colors-pink-2: #fef7fb;
-    --colors-pink-3: #fee9f5;
-    --colors-pink-4: #fbdcef;
-    --colors-pink-5: #f6cee7;
-    --colors-pink-6: #efbfdd;
-    --colors-pink-7: #e7acd0;
-    --colors-pink-8: #dd93c2;
-    --colors-pink-9: #d6409f;
-    --colors-pink-10: #cf3897;
-    --colors-pink-11: #c2298a;
-    --colors-pink-12: #651249;
-    --colors-purple-1: #fefcfe;
-    --colors-purple-2: #fbf7fe;
-    --colors-purple-3: #f7edfe;
-    --colors-purple-4: #f2e2fc;
-    --colors-purple-5: #ead5f9;
-    --colors-purple-6: #e0c4f4;
-    --colors-purple-7: #d1afec;
-    --colors-purple-8: #be93e4;
-    --colors-purple-9: #8e4ec6;
-    --colors-purple-10: #8347b9;
-    --colors-purple-11: #8145b5;
-    --colors-purple-12: #402060;
-    --colors-red-1: #fffcfc;
-    --colors-red-2: #fff7f7;
-    --colors-red-3: #feebec;
-    --colors-red-4: #ffdbdc;
-    --colors-red-5: #ffcdce;
-    --colors-red-6: #fdbdbe;
-    --colors-red-7: #f4a9aa;
-    --colors-red-8: #eb8e90;
-    --colors-red-9: #e5484d;
-    --colors-red-10: #dc3e42;
-    --colors-red-11: #ce2c31;
-    --colors-red-12: #641723;
-    --colors-ruby-1: #fffcfd;
-    --colors-ruby-2: #fff7f8;
-    --colors-ruby-3: #feeaed;
-    --colors-ruby-4: #ffdce1;
-    --colors-ruby-5: #ffced6;
-    --colors-ruby-6: #f8bfc8;
-    --colors-ruby-7: #efacb8;
-    --colors-ruby-8: #e592a3;
-    --colors-ruby-9: #e54666;
-    --colors-ruby-10: #dc3b5d;
-    --colors-ruby-11: #ca244d;
-    --colors-ruby-12: #64172b;
-    --colors-teal-1: #fafefd;
-    --colors-teal-2: #f3fbf9;
-    --colors-teal-3: #e0f8f3;
-    --colors-teal-4: #ccf3ea;
-    --colors-teal-5: #b8eae0;
-    --colors-teal-6: #a1ded2;
-    --colors-teal-7: #83cdc1;
-    --colors-teal-8: #53b9ab;
-    --colors-teal-9: #12a594;
-    --colors-teal-10: #0d9b8a;
-    --colors-teal-11: #008573;
-    --colors-teal-12: #0d3d38;
-    --colors-tomato-1: #fffcfc;
-    --colors-tomato-2: #fff8f7;
-    --colors-tomato-3: #feebe7;
-    --colors-tomato-4: #ffdcd3;
-    --colors-tomato-5: #ffcdc2;
-    --colors-tomato-6: #fdbdaf;
-    --colors-tomato-7: #f5a898;
-    --colors-tomato-8: #ec8e7b;
-    --colors-tomato-9: #e54d2e;
-    --colors-tomato-10: #dd4425;
-    --colors-tomato-11: #d13415;
-    --colors-tomato-12: #5c271f;
-    --colors-violet-1: #fdfcfe;
-    --colors-violet-2: #faf8ff;
-    --colors-violet-3: #f4f0fe;
-    --colors-violet-4: #ebe4ff;
-    --colors-violet-5: #e1d9ff;
-    --colors-violet-6: #d4cafe;
-    --colors-violet-7: #c2b5f5;
-    --colors-violet-8: #aa99ec;
-    --colors-violet-9: #6e56cf;
-    --colors-violet-10: #654dc4;
-    --colors-violet-11: #6550b9;
-    --colors-violet-12: #2f265f;
-    --colors-yellow-1: #fdfdf9;
-    --colors-yellow-2: #fefce9;
-    --colors-yellow-3: #fffab8;
-    --colors-yellow-4: #fff394;
-    --colors-yellow-5: #ffe770;
-    --colors-yellow-6: #f3d768;
-    --colors-yellow-7: #e4c767;
-    --colors-yellow-8: #d5ae39;
-    --colors-yellow-9: #ffe629;
-    --colors-yellow-10: #ffdc00;
-    --colors-yellow-11: #9e6c00;
-    --colors-yellow-12: #473b1f;
 }
 
   [data-mantine-color-scheme="dark"] {
@@ -11539,6 +11476,62 @@ html, body {
     --colors-warning-body: #fcc419;
     --colors-diagram-background-pattern: oklch(from #424242 l c h / 70%);
     --colors-likec4-mix-color: #ffffff;
+    --colors-likec4-tag-tomato-bg: #e54d2e;
+    --colors-likec4-tag-tomato-bg-hover: #ec6142;
+    --colors-likec4-tag-tomato-border: #ac4d39;
+    --colors-likec4-tag-tomato-text: #fbd3cb;
+    --colors-likec4-tag-grass-bg: #46a758;
+    --colors-likec4-tag-grass-bg-hover: #53b365;
+    --colors-likec4-tag-grass-border: #3e7949;
+    --colors-likec4-tag-blue-bg: #0090ff;
+    --colors-likec4-tag-blue-bg-hover: #3b9eff;
+    --colors-likec4-tag-blue-border: #2870bd;
+    --colors-likec4-tag-blue-text: #c2e6ff;
+    --colors-likec4-tag-ruby-bg: #e54666;
+    --colors-likec4-tag-ruby-bg-hover: #ec5a72;
+    --colors-likec4-tag-ruby-border: #b3445a;
+    --colors-likec4-tag-ruby-text: #fed2e1;
+    --colors-likec4-tag-orange-bg: #f76b15;
+    --colors-likec4-tag-orange-bg-hover: #ff801f;
+    --colors-likec4-tag-orange-border: #a35829;
+    --colors-likec4-tag-orange-text: #ffe0c2;
+    --colors-likec4-tag-indigo-bg: #3e63dd;
+    --colors-likec4-tag-indigo-bg-hover: #5472e4;
+    --colors-likec4-tag-indigo-border: #435db1;
+    --colors-likec4-tag-indigo-text: #d6e1ff;
+    --colors-likec4-tag-pink-bg: #d6409f;
+    --colors-likec4-tag-pink-bg-hover: #de51a8;
+    --colors-likec4-tag-pink-border: #a84885;
+    --colors-likec4-tag-pink-text: #fdd1ea;
+    --colors-likec4-tag-teal-bg: #12a594;
+    --colors-likec4-tag-teal-bg-hover: #0eb39e;
+    --colors-likec4-tag-teal-border: #207e73;
+    --colors-likec4-tag-teal-text: #adf0dd;
+    --colors-likec4-tag-purple-bg: #8e4ec6;
+    --colors-likec4-tag-purple-bg-hover: #9a5cd0;
+    --colors-likec4-tag-purple-border: #8457aa;
+    --colors-likec4-tag-purple-text: #ecd9fa;
+    --colors-likec4-tag-amber-bg: #ffc53d;
+    --colors-likec4-tag-amber-bg-hover: #ffd60a;
+    --colors-likec4-tag-amber-border: #8f6424;
+    --colors-likec4-tag-crimson-bg: #e93d82;
+    --colors-likec4-tag-crimson-bg-hover: #ee518a;
+    --colors-likec4-tag-crimson-border: #b0436e;
+    --colors-likec4-tag-crimson-text: #fdd3e8;
+    --colors-likec4-tag-red-bg: #e5484d;
+    --colors-likec4-tag-red-bg-hover: #ec5d5e;
+    --colors-likec4-tag-red-border: #b54548;
+    --colors-likec4-tag-red-text: #ffd1d9;
+    --colors-likec4-tag-lime-bg: #bdee63;
+    --colors-likec4-tag-lime-bg-hover: #d4ff70;
+    --colors-likec4-tag-lime-border: #577538;
+    --colors-likec4-tag-yellow-bg: #ffe629;
+    --colors-likec4-tag-yellow-bg-hover: #ffff57;
+    --colors-likec4-tag-yellow-border: #836a21;
+    --colors-likec4-tag-violet-bg: #6e56cf;
+    --colors-likec4-tag-violet-bg-hover: #7d66d9;
+    --colors-likec4-tag-violet-border: #6958ad;
+    --colors-likec4-tag-violet-text: #e2ddfe;
     --colors-likec4-panel-bg: #2e2e2e;
     --colors-likec4-panel-border: transparent;
     --colors-likec4-panel-action-bg: oklch(from #242424 l c h / 70%);
@@ -11569,187 +11562,7 @@ html, body {
     --colors-subflow-par-text: oklch(from #eebefa l c h / 90%);
     --colors-subflow-alt: oklch(from #6741d9 l c h / 10%);
     --colors-subflow-alt-hovered: oklch(from #6741d9 l c h / 15%);
-    --colors-subflow-alt-text: oklch(from #d0bfff l c h / 90%);
-    --colors-amber-1: #16120c;
-    --colors-amber-2: #1d180f;
-    --colors-amber-3: #302008;
-    --colors-amber-4: #3f2700;
-    --colors-amber-5: #4d3000;
-    --colors-amber-6: #5c3d05;
-    --colors-amber-7: #714f19;
-    --colors-amber-8: #8f6424;
-    --colors-amber-9: #ffc53d;
-    --colors-amber-10: #ffd60a;
-    --colors-amber-11: #ffca16;
-    --colors-amber-12: #ffe7b3;
-    --colors-blue-1: #0d1520;
-    --colors-blue-2: #111927;
-    --colors-blue-3: #0d2847;
-    --colors-blue-4: #003362;
-    --colors-blue-5: #004074;
-    --colors-blue-6: #104d87;
-    --colors-blue-7: #205d9e;
-    --colors-blue-8: #2870bd;
-    --colors-blue-9: #0090ff;
-    --colors-blue-10: #3b9eff;
-    --colors-blue-11: #70b8ff;
-    --colors-blue-12: #c2e6ff;
-    --colors-crimson-1: #191114;
-    --colors-crimson-2: #201318;
-    --colors-crimson-3: #381525;
-    --colors-crimson-4: #4d122f;
-    --colors-crimson-5: #5c1839;
-    --colors-crimson-6: #6d2545;
-    --colors-crimson-7: #873356;
-    --colors-crimson-8: #b0436e;
-    --colors-crimson-9: #e93d82;
-    --colors-crimson-10: #ee518a;
-    --colors-crimson-11: #ff92ad;
-    --colors-crimson-12: #fdd3e8;
-    --colors-grass-1: #0e1511;
-    --colors-grass-2: #141a15;
-    --colors-grass-3: #1b2a1e;
-    --colors-grass-4: #1d3a24;
-    --colors-grass-5: #25482d;
-    --colors-grass-6: #2d5736;
-    --colors-grass-7: #366740;
-    --colors-grass-8: #3e7949;
-    --colors-grass-9: #46a758;
-    --colors-grass-10: #53b365;
-    --colors-grass-11: #71d083;
-    --colors-grass-12: #c2f0c2;
-    --colors-indigo-1: #11131f;
-    --colors-indigo-2: #141726;
-    --colors-indigo-3: #182449;
-    --colors-indigo-4: #1d2e62;
-    --colors-indigo-5: #253974;
-    --colors-indigo-6: #304384;
-    --colors-indigo-7: #3a4f97;
-    --colors-indigo-8: #435db1;
-    --colors-indigo-9: #3e63dd;
-    --colors-indigo-10: #5472e4;
-    --colors-indigo-11: #9eb1ff;
-    --colors-indigo-12: #d6e1ff;
-    --colors-lime-1: #11130c;
-    --colors-lime-2: #151a10;
-    --colors-lime-3: #1f2917;
-    --colors-lime-4: #29371d;
-    --colors-lime-5: #334423;
-    --colors-lime-6: #3d522a;
-    --colors-lime-7: #496231;
-    --colors-lime-8: #577538;
-    --colors-lime-9: #bdee63;
-    --colors-lime-10: #d4ff70;
-    --colors-lime-11: #bde56c;
-    --colors-lime-12: #e3f7ba;
-    --colors-orange-1: #17120e;
-    --colors-orange-2: #1e160f;
-    --colors-orange-3: #331e0b;
-    --colors-orange-4: #462100;
-    --colors-orange-5: #562800;
-    --colors-orange-6: #66350c;
-    --colors-orange-7: #7e451d;
-    --colors-orange-8: #a35829;
-    --colors-orange-9: #f76b15;
-    --colors-orange-10: #ff801f;
-    --colors-orange-11: #ffa057;
-    --colors-orange-12: #ffe0c2;
-    --colors-pink-1: #191117;
-    --colors-pink-2: #21121d;
-    --colors-pink-3: #37172f;
-    --colors-pink-4: #4b143d;
-    --colors-pink-5: #591c47;
-    --colors-pink-6: #692955;
-    --colors-pink-7: #833869;
-    --colors-pink-8: #a84885;
-    --colors-pink-9: #d6409f;
-    --colors-pink-10: #de51a8;
-    --colors-pink-11: #ff8dcc;
-    --colors-pink-12: #fdd1ea;
-    --colors-purple-1: #18111b;
-    --colors-purple-2: #1e1523;
-    --colors-purple-3: #301c3b;
-    --colors-purple-4: #3d224e;
-    --colors-purple-5: #48295c;
-    --colors-purple-6: #54346b;
-    --colors-purple-7: #664282;
-    --colors-purple-8: #8457aa;
-    --colors-purple-9: #8e4ec6;
-    --colors-purple-10: #9a5cd0;
-    --colors-purple-11: #d19dff;
-    --colors-purple-12: #ecd9fa;
-    --colors-red-1: #191111;
-    --colors-red-2: #201314;
-    --colors-red-3: #3b1219;
-    --colors-red-4: #500f1c;
-    --colors-red-5: #611623;
-    --colors-red-6: #72232d;
-    --colors-red-7: #8c333a;
-    --colors-red-8: #b54548;
-    --colors-red-9: #e5484d;
-    --colors-red-10: #ec5d5e;
-    --colors-red-11: #ff9592;
-    --colors-red-12: #ffd1d9;
-    --colors-ruby-1: #191113;
-    --colors-ruby-2: #1e1517;
-    --colors-ruby-3: #3a141e;
-    --colors-ruby-4: #4e1325;
-    --colors-ruby-5: #5e1a2e;
-    --colors-ruby-6: #6f2539;
-    --colors-ruby-7: #883447;
-    --colors-ruby-8: #b3445a;
-    --colors-ruby-9: #e54666;
-    --colors-ruby-10: #ec5a72;
-    --colors-ruby-11: #ff949d;
-    --colors-ruby-12: #fed2e1;
-    --colors-teal-1: #0d1514;
-    --colors-teal-2: #111c1b;
-    --colors-teal-3: #0d2d2a;
-    --colors-teal-4: #023b37;
-    --colors-teal-5: #084843;
-    --colors-teal-6: #145750;
-    --colors-teal-7: #1c6961;
-    --colors-teal-8: #207e73;
-    --colors-teal-9: #12a594;
-    --colors-teal-10: #0eb39e;
-    --colors-teal-11: #0bd8b6;
-    --colors-teal-12: #adf0dd;
-    --colors-tomato-1: #181111;
-    --colors-tomato-2: #1f1513;
-    --colors-tomato-3: #391714;
-    --colors-tomato-4: #4e1511;
-    --colors-tomato-5: #5e1c16;
-    --colors-tomato-6: #6e2920;
-    --colors-tomato-7: #853a2d;
-    --colors-tomato-8: #ac4d39;
-    --colors-tomato-9: #e54d2e;
-    --colors-tomato-10: #ec6142;
-    --colors-tomato-11: #ff977d;
-    --colors-tomato-12: #fbd3cb;
-    --colors-violet-1: #14121f;
-    --colors-violet-2: #1b1525;
-    --colors-violet-3: #291f43;
-    --colors-violet-4: #33255b;
-    --colors-violet-5: #3c2e69;
-    --colors-violet-6: #473876;
-    --colors-violet-7: #56468b;
-    --colors-violet-8: #6958ad;
-    --colors-violet-9: #6e56cf;
-    --colors-violet-10: #7d66d9;
-    --colors-violet-11: #baa7ff;
-    --colors-violet-12: #e2ddfe;
-    --colors-yellow-1: #14120b;
-    --colors-yellow-2: #1b180f;
-    --colors-yellow-3: #2d2305;
-    --colors-yellow-4: #362b00;
-    --colors-yellow-5: #433500;
-    --colors-yellow-6: #524202;
-    --colors-yellow-7: #665417;
-    --colors-yellow-8: #836a21;
-    --colors-yellow-9: #ffe629;
-    --colors-yellow-10: #ffff57;
-    --colors-yellow-11: #f5e147;
-    --colors-yellow-12: #f6eeb4
+    --colors-subflow-alt-text: oklch(from #d0bfff l c h / 90%)
 }
 
   @keyframes indicatorOpacity {
@@ -11778,9 +11591,9 @@ html, body {
     .likec4-edge-label {
       background: var(--xy-edge-label-background-color);
       border: 0px solid transparent;
-      padding-block: var(--spacing-1);
-      padding-inline: var(--spacing-1\.5);
-      gap: var(--spacing-0\.5);
+      padding-block: 4px;
+      padding-inline: 6px;
+      gap: 2px;
       border-radius: 4px;
       font-family: var(--fonts-likec4-relation);
       display: flex;
@@ -11866,8 +11679,9 @@ html, body {
     .likec4-overlay::backdrop {
       background: color-mix(in oklab, var(--colors-likec4-overlay-backdrop) var(--_opacity), transparent);
       cursor: var(--cursor-zoom-out);
-      -webkit-backdrop-filter: blur(var(--_blur));
-      backdrop-filter: blur(var(--_blur));
+      -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
+      --backdrop-blur: blur(var(--_blur));
 }
 
     .likec4-overlay .likec4-overlay-body {
@@ -11922,6 +11736,54 @@ html, body {
       --color-success-emphasis: #1f883d;
 }
 
+    .likec4-markdown-block [data-likec4-ref-state="link"] {
+      --likec4-ref-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2016.008v-8.018a1.98%201.98%200%200%200%20-1%20-1.717l-7%20-4.008a2.016%202.016%200%200%200%20-2%200l-7%204.008c-.619%20.355%20-1%201.01%20-1%201.718v8.018c0%20.709%20.381%201.363%201%201.717l7%204.008a2.016%202.016%200%200%200%202%200l7%20-4.008c.619%20-.355%201%20-1.01%201%20-1.718'%2F%3E%3Cpath%20d%3D'M12%2022v-10'%2F%3E%3Cpath%20d%3D'M12%2012l8.73%20-5.04'%2F%3E%3Cpath%20d%3D'M3.27%206.96l8.73%205.04'%2F%3E%3C%2Fsvg%3E");
+      border: 1px solid;
+      border-radius: var(--radii-sm);
+      padding-inline: var(--spacing-1);
+      --mix-borderColor: color-mix(in srgb, var(--colors-current-color) 15%, transparent);
+      border-color: var(--mix-borderColor, var(--colors-current-color));
+      text-decoration: none;
+      display: inline-block;
+}
+
+    .likec4-markdown-block [data-likec4-ref-state="link"]:is(:hover, [data-hover]) {
+      text-decoration: none;
+      --mix-borderColor: color-mix(in srgb, var(--colors-current-color) 25%, transparent);
+      border-color: var(--mix-borderColor, var(--colors-current-color));
+      --mix-backgroundColor: color-mix(in srgb, var(--colors-current-color) 10%, transparent);
+      background-color: var(--mix-backgroundColor, var(--colors-current-color));
+}
+
+    .likec4-markdown-block [data-likec4-ref-state="link"]::before {
+      content: "";
+      display: inline-block;
+      margin-inline-end: 0.25em;
+      vertical-align: -0.1em;
+      background-color: var(--colors-current-color);
+      mask-image: var(--likec4-ref-icon);
+      -webkit-mask-image: var(--likec4-ref-icon);
+      mask-size: contain;
+      -webkit-mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+      width: 0.9em;
+      height: 0.9em;
+}
+
+    .likec4-markdown-block [data-likec4-ref-state="link"][data-likec4-ref-kind="view"] {
+      --likec4-ref-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M8%2011a3%203%200%201%200%206%200a3%203%200%200%200%20-6%200'%2F%3E%3Cpath%20d%3D'M16%2016l-2.5%20-2.5'%2F%3E%3Cpath%20d%3D'M3%207v-2a2%202%200%200%201%202%20-2h2'%2F%3E%3Cpath%20d%3D'M3%2017v2a2%202%200%200%200%202%202h2'%2F%3E%3Cpath%20d%3D'M17%203h2a2%202%200%200%201%202%202v2'%2F%3E%3Cpath%20d%3D'M17%2021h2a2%202%200%200%200%202%20-2v-2'%2F%3E%3C%2Fsvg%3E");
+      color: var(--color-done-fg);
+}
+
+    .likec4-markdown-block [data-likec4-ref-state="link"][data-likec4-ref-view-type="dynamic"] {
+      --likec4-ref-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'black'%3E%3Cpath%20d%3D'M10.52%202.614a2.095%202.095%200%200%201%202.835%20-.117l.126%20.117l7.905%207.905c.777%20.777%20.816%202.013%20.117%202.836l-.117%20.126l-7.905%207.905a2.094%202.094%200%200%201%20-2.836%20.117l-.126%20-.117l-7.907%20-7.906a2.096%202.096%200%200%201%20-.115%20-2.835l.117%20-.126l7.905%20-7.905zm5.969%209.535l.01%20-.116l-.003%20-.12l-.016%20-.114l-.03%20-.11l-.044%20-.112l-.052%20-.098l-.076%20-.105l-.07%20-.081l-3.5%20-3.5l-.095%20-.083a1%201%200%200%200%20-1.226%200l-.094%20.083l-.083%20.094a1%201%200%200%200%200%201.226l.083%20.094l1.792%201.793h-5.085l-.117%20.007a1%201%200%200%200%200%201.986l.117%20.007h5.085l-1.792%201.793l-.083%20.094a1%201%200%200%200%201.403%201.403l.094%20-.083l3.5%20-3.5l.097%20-.112l.05%20-.074l.037%20-.067l.05%20-.112l.023%20-.076l.025%20-.117z'%2F%3E%3C%2Fsvg%3E");
+}
+
+    .likec4-markdown-block [data-likec4-ref-state="link"][data-likec4-ref-view-type="deployment"] {
+      --likec4-ref-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%204l-8%204l8%204l8%20-4l-8%20-4'%2F%3E%3Cpath%20d%3D'M4%2012l8%204l8%20-4'%2F%3E%3Cpath%20d%3D'M4%2016l8%204l8%20-4'%2F%3E%3C%2Fsvg%3E");
+}
+
     .likec4-markdown-block :where(hr) {
       border: var(--borders-none);
       border-bottom: 1px solid;
@@ -12675,9 +12537,9 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
       max-height: var(--sizes-100\%);
       max-width: var(--sizes-100\%);
       padding-top: var(--likec4-spacing);
+      padding-right: calc(var(--likec4-spacing) + 8px);
       padding-bottom: var(--likec4-spacing);
       padding-left: calc(var(--likec4-spacing) + 8px);
-      padding-right: calc(var(--likec4-spacing) + 8px);
 }
 
     :where([data-likec4-shape-size='xs']) .likec4-element-node-data {
@@ -12703,29 +12565,41 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
 }
 
     .likec4-element-node-data:has([data-likec4-icon]) {
-      gap: var(--spacing-4);
+      gap: 16px;
 }
 
     :where([data-likec4-shape='queue']) .likec4-element-node-data,:where([data-likec4-shape='mobile']) .likec4-element-node-data {
-      padding-left: 46px;
+      padding-top: var(--likec4-spacing);
       padding-right: 16px;
+      padding-bottom: var(--likec4-spacing);
+      padding-left: 46px;
 }
 
     :where([data-likec4-shape='cylinder']) .likec4-element-node-data,:where([data-likec4-shape='storage']) .likec4-element-node-data {
       padding-top: 30px;
+      padding-right: calc(var(--likec4-spacing) + 8px);
+      padding-bottom: var(--likec4-spacing);
+      padding-left: calc(var(--likec4-spacing) + 8px);
 }
 
     :where([data-likec4-shape='browser']) .likec4-element-node-data {
       padding-top: 32px;
+      padding-right: calc(var(--likec4-spacing) + 8px);
       padding-bottom: 28px;
+      padding-left: calc(var(--likec4-spacing) + 8px);
 }
 
     :where([data-likec4-shape='bucket']) .likec4-element-node-data {
-      padding-left: calc(var(--likec4-spacing) + 20px);
+      padding-top: var(--likec4-spacing);
       padding-right: calc(var(--likec4-spacing) + 20px);
+      padding-bottom: var(--likec4-spacing);
+      padding-left: calc(var(--likec4-spacing) + 20px);
 }
 
     :where([data-likec4-shape='component']) .likec4-element-node-data {
+      padding-top: var(--likec4-spacing);
+      padding-right: calc(var(--likec4-spacing) + 8px);
+      padding-bottom: var(--likec4-spacing);
       padding-left: calc(var(--likec4-spacing) + 30px);
 }
 
@@ -12737,7 +12611,7 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
       font-family: var(--fonts-likec4-element);
       font-weight: 420;
       font-size: calc(var(--likec4-text-size) * 0.74);
-      line-height: var(--line-heights-xs);
+      line-height: 1.2;
       text-wrap-style: pretty;
       color: var(--likec4-palette-loContrast);
       text-align: var(--__text-align);
@@ -12771,12 +12645,16 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
       flex: 0 0 auto;
       text-wrap: balance;
       font-family: var(--fonts-likec4-element);
-      font-weight: var(--font-weights-normal);
+      font-weight: 400;
       font-size: calc(var(--likec4-text-size) * 0.635);
-      line-height: var(--line-heights-xs);
+      line-height: 1.2;
       color: var(--likec4-palette-loContrast);
       text-align: var(--__text-align);
       opacity: 0.92;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
 }
 
     :where([data-likec4-hovered="true"]) .likec4-element-node-data [data-likec4-node-technology] {
@@ -12823,7 +12701,7 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
     .likec4-element-node-data .likec4-element-node-content {
       flex: 0 1 auto;
       overflow: hidden;
-      gap: var(--spacing-2);
+      gap: 8px;
       display: flex;
       flex-direction: column;
       align-items: stretch;
@@ -12836,15 +12714,15 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
 }
 
     .likec4-element-node-data .likec4-element-node-content:has([data-likec4-node-description]):has([data-likec4-node-technology]) {
-      gap: var(--spacing-1\.5);
+      gap: 6px;
 }
 
     .likec4-element-node-data [data-likec4-node-title] {
       flex: 0 0 auto;
       font-family: var(--fonts-likec4-element);
-      font-weight: var(--font-weights-medium);
+      font-weight: 500;
       font-size: var(--likec4-text-size);
-      line-height: var(--line-heights-sm);
+      line-height: 1.35;
       text-wrap-style: balance;
       white-space: preserve-breaks;
       text-align: var(--__text-align);
@@ -13297,7 +13175,7 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
 
   .likec4-element-node-data--iconPosition_right:has([data-likec4-icon]) {
     --__text-align: right;
-    gap: var(--spacing-4);
+    gap: 16px;
     flex-direction: row-reverse;
 }
 
@@ -13311,7 +13189,7 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
 }
 
   .likec4-element-node-data--iconPosition_top:has([data-likec4-icon]) {
-    gap: var(--spacing-2);
+    gap: 8px;
     flex-direction: column;
     height: var(--sizes-100\%);
 }
@@ -13326,7 +13204,7 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
 }
 
   .likec4-element-node-data--iconPosition_bottom:has([data-likec4-icon]) {
-    gap: var(--spacing-2);
+    gap: 8px;
     flex-direction: column-reverse;
     height: var(--sizes-100\%);
 }
@@ -13679,10 +13557,43 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
       color: var(--colors-likec4-panel-text);
 }
 
+    .likec4-navigation-panel__breadcrumb {
+      border: 0;
+      padding: var(--spacing-0);
+      text-decoration: none;
+      background-color: var(--colors-transparent);
+      cursor: var(--cursor-pointer);
+      appearance: none;
+      -webkit-appearance: none;
+      text-align: start;
+      touch-action: manipulation;
+      webkit-tap-highlight-color: transparent;
+      font-size: var(--font-sizes-sm);
+      font-weight: var(--font-weights-medium);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--colors-likec4-panel-action);
+}
+
+    .likec4-navigation-panel__breadcrumb[data-dimmed="true"] {
+      color: var(--colors-likec4-panel-text-dimmed);
+}
+
+    .likec4-navigation-panel__breadcrumb[data-dimmed="true"]:is(:hover, [data-hover]) {
+      color: var(--colors-likec4-panel-action);
+}
+
+    .likec4-navigation-panel__breadcrumb:is(:hover, [data-hover]) {
+      color: var(--colors-likec4-panel-action-hover);
+}
+
     .likec4-navigation-panel__dropdown {
+      gap: var(--spacing-xs);
       flex: 1 1 0%;
       overflow: hidden;
       display: flex;
+      flex-direction: column;
       flex-grow: 0;
       padding: var(--spacing-2);
       border: 1px solid var(--colors-likec4-dropdown-border);
@@ -13799,6 +13710,68 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
       pointer-events: none;
 }
 
+    .likec4-edge-control-points__container {
+      overflow: visible;
+      position: absolute;
+      pointer-events: none;
+      z-index: 100;
+      top: var(--spacing-0);
+      left: var(--spacing-0);
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-edge-control-points__container {
+      mix-blend-mode: screen;
+}
+
+    [data-mantine-color-scheme="light"] .likec4-edge-control-points__container {
+      mix-blend-mode: multiply;
+}
+
+    .likec4-edge-control-points__point {
+      fill: var(--xy-edge-stroke);
+      stroke: var(--colors-transparent);
+      fill-opacity: 0.5;
+      stroke-width: 10;
+      r: 4px;
+      cursor: var(--cursor-grab);
+      pointer-events: all;
+      visibility: hidden;
+      --transition-duration: var(--durations-fast);
+      transition-duration: var(--durations-fast);
+      --transition-prop: visibility, fill, fill-opacity, r;
+      transition-property: visibility, fill, fill-opacity, r;
+      --transition-easing: var(--easings-in-out);
+      transition-timing-function: var(--easings-in-out);
+      transition-delay: 20ms;
+}
+
+    :where([data-likec4-selected='true'], [data-likec4-hovered='true']) .likec4-edge-control-points__point {
+      visibility: visible;
+      fill-opacity: 1;
+      --transition-easing: var(--easings-out);
+      transition-timing-function: var(--easings-out);
+      transition-delay: var(--durations-0);
+}
+
+    :where([data-likec4-selected='true']) .likec4-edge-control-points__point {
+      r: 6;
+}
+
+    :is([data-likec4-hovered='true']) .likec4-edge-control-points__point {
+      r: 8;
+}
+
+    .likec4-edge-control-points__point:is(:hover, [data-hover]) {
+      fill: var(--colors-primary-body-hover);
+      r: 10;
+      --transition-duration: var(--durations-fastest);
+      transition-duration: var(--durations-fastest);
+}
+
+    .group:is(:active, [data-active]) .likec4-edge-control-points__point {
+      cursor: var(--cursor-grabbing);
+}
+
     @media screen and (min-width: 36rem) {
       .likec4-navigation-panel__root {
         max-height: calc(100cqh);
@@ -13947,17 +13920,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
       font-size: var(--font-sizes-h6);
 }
 
-    .layerStyle_likec4\.panel {
-      padding: var(--spacing-1);
-      border: 1px solid var(--colors-likec4-panel-border);
-      border-radius: var(--radii-0);
-      background-color: var(--colors-likec4-panel-bg);
-}
-
-    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .layerStyle_likec4\.panel {
-      box-shadow: var(--shadows-none);
-}
-
     .layerStyle_likec4\.dropdown {
       padding: var(--spacing-2);
       border: 1px solid var(--colors-likec4-dropdown-border);
@@ -13987,7 +13949,11 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
       background-color: var(--colors-likec4-tag-bg-hover);
 }
 
-    .textStyle_xxs {
+    .textStyle_dimmed\.xxs {
+      color: var(--colors-text-dimmed);
+}
+
+    .textStyle_dimmed\.xxs,.textStyle_xxs {
       font-size: var(--font-sizes-xxs);
       line-height: xxs;
 }
@@ -13997,23 +13963,20 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
       line-height: var(--line-heights-xs);
 }
 
-    .layerStyle_likec4\.panel\.action {
-      border: var(--borders-transparent);
-      padding-inline: var(--spacing-2);
-      padding-block: var(--spacing-1\.5);
-      border-radius: var(--radii-sm);
-      color: var(--colors-likec4-panel-action);
-      cursor: var(--cursor-pointer);
+    .layerStyle_likec4\.panel {
+      padding: var(--spacing-1);
+      border: 1px solid var(--colors-likec4-panel-border);
+      border-radius: var(--radii-0);
+      background-color: var(--colors-likec4-panel-bg);
 }
 
-    .layerStyle_likec4\.panel\.action:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
-      color: var(--colors-likec4-panel-action-disabled);
-      cursor: not-allowed;
+    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .layerStyle_likec4\.panel {
+      box-shadow: var(--shadows-none);
 }
 
-    .layerStyle_likec4\.panel\.action:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
-      color: var(--colors-likec4-panel-action-hover);
-      background-color: var(--colors-likec4-panel-action-bg-hover);
+    .textStyle_sm {
+      font-size: var(--font-sizes-sm);
+      line-height: var(--line-heights-sm);
 }
 
     .textStyle_md {
@@ -14021,10 +13984,15 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
       line-height: var(--line-heights-md);
 }
 
-    .textStyle_dimmed\.xs {
-      font-size: var(--font-sizes-xs);
-      line-height: var(--line-heights-xs);
-      color: var(--colors-text-dimmed);
+    .textStyle_fieldLabel {
+      font-family: var(--fonts-body);
+      font-weight: var(--font-weights-semibold);
+      font-size: var(--font-sizes-micro);
+      line-height: var(--line-heights-tight);
+      text-transform: uppercase;
+      letter-spacing: var(--letter-spacings-caps-label);
+      --mix-color: color-mix(in srgb, var(--colors-text) 60%, transparent);
+      color: var(--mix-color, var(--colors-text));
 }
 
     .layerStyle_likec4\.panel\.action\.filled {
@@ -14048,6 +14016,25 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
       background-color: var(--colors-likec4-panel-action-bg-hover);
 }
 
+    .layerStyle_likec4\.panel\.action {
+      border: var(--borders-transparent);
+      padding-inline: var(--spacing-2);
+      padding-block: var(--spacing-1\.5);
+      border-radius: var(--radii-sm);
+      color: var(--colors-likec4-panel-action);
+      cursor: var(--cursor-pointer);
+}
+
+    .layerStyle_likec4\.panel\.action:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      color: var(--colors-likec4-panel-action-disabled);
+      cursor: not-allowed;
+}
+
+    .layerStyle_likec4\.panel\.action:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+      color: var(--colors-likec4-panel-action-hover);
+      background-color: var(--colors-likec4-panel-action-bg-hover);
+}
+
     .layerStyle_surface\.warning {
       border-radius: var(--radii-sm);
       color: var(--colors-likec4-panel-action-warning);
@@ -14059,9 +14046,24 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
       background-color: var(--colors-likec4-panel-action-warning-bg-hover);
 }
 
-    .textStyle_dimmed\.xxs {
-      font-size: var(--font-sizes-xxs);
-      line-height: xxs;
+    .textStyle_dimmed\.sm {
+      font-size: var(--font-sizes-sm);
+      line-height: var(--line-heights-sm);
+      color: var(--colors-text-dimmed);
+}
+
+    .layerStyle_surface\.sunken {
+      border: 1px solid colors\.surface\.sunken\.border;
+      background-color: var(--colors-surface-sunken);
+}
+
+    .layerStyle_surface\.sunken:is(:hover, [data-hover]) {
+      background-color: var(--colors-surface-sunken-hover);
+}
+
+    .textStyle_dimmed\.xs {
+      font-size: var(--font-sizes-xs);
+      line-height: var(--line-heights-xs);
       color: var(--colors-text-dimmed);
 }
 
@@ -14072,17 +14074,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
 }
 
     .textStyle_likec4\.panel {
-      font-weight: var(--font-weights-medium);
-      color: var(--colors-likec4-panel-text);
-}
-
-    .textStyle_likec4\.panel,.textStyle_dimmed\.sm {
       font-size: var(--font-sizes-sm);
       line-height: var(--line-heights-sm);
-}
-
-    .textStyle_dimmed\.sm {
-      color: var(--colors-text-dimmed);
+      font-weight: var(--font-weights-medium);
+      color: var(--colors-likec4-panel-text);
 }
 
     @container  (min-width: 40rem) {
@@ -14222,10 +14217,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding: var(--spacing-1\.5);
 }
 
-  .p_0\.5 {
-    padding: var(--spacing-0\.5);
-}
-
   .p_8 {
     padding: var(--spacing-8);
 }
@@ -14254,18 +14245,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding: var(--spacing-md);
 }
 
-  .m_1 {
-    margin: var(--spacing-1);
-}
-
-  .inset_0 {
-    inset: var(--spacing-0);
-}
-
-  .bd_transparent {
-    border: var(--borders-transparent);
-}
-
   .bd_none {
     border: var(--borders-none);
 }
@@ -14274,45 +14253,33 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     background: linear-gradient(180deg, color-mix(in oklab, var(--likec4-palette-fill) 60%, transparent), color-mix(in oklab, var(--likec4-palette-fill) 20%, transparent) 8px, color-mix(in oklab, var(--likec4-palette-fill) 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px), var(--colors-likec4-overlay-body);
 }
 
+  .bd_\[3\.5px_solid_\{colors\.mantine\.dark\[3\]\}\] {
+    border: 3.5px solid var(--colors-mantine-dark\[3\]);
+}
+
   .p_\[10px_8px\] {
     padding: 10px 8px;
 }
 
-  .bg_mantine\.gray\[1\] {
-    background: var(--colors-mantine-gray\[1\]);
+  .bg_surface\.sunken {
+    background: var(--colors-surface-sunken);
 }
 
   .p_\[6px_8px\] {
     padding: 6px 8px;
 }
 
-  .bd_\[3\.5px_solid_\{colors\.mantine\.dark\[3\]\}\] {
-    border: 3.5px solid var(--colors-mantine-dark\[3\]);
+  .bg_none {
+    background: var(--colors-none);
 }
 
-  .p_xs {
-    padding: var(--spacing-xs);
+  .p_\[3px_6px\] {
+    padding: 3px 6px;
 }
 
-  .p_\[4px_8px\] {
-    padding: 4px 8px;
-}
-
-  .p_\[1px_4px\] {
-    padding: 1px 4px;
-}
-
-  .p_\[3px_6px\] {
-    padding: 3px 6px;
-}
-
-  .bg_var\(--likec4-palette-fill\)\/75 {
-    --mix-background: color-mix(in srgb, var(--likec4-palette-fill) 75%, transparent);
-    background: var(--mix-background, var(--likec4-palette-fill));
-}
-
-  .bg_surface\.sunken {
-    background: var(--colors-surface-sunken);
+  .bg_var\(--likec4-palette-fill\)\/75 {
+    --mix-background: color-mix(in srgb, var(--likec4-palette-fill) 75%, transparent);
+    background: var(--mix-background, var(--likec4-palette-fill));
 }
 
   .p_\[1px_5px\] {
@@ -14327,6 +14294,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding: 0 4px 5px 4px;
 }
 
+  .p_xs {
+    padding: var(--spacing-xs);
+}
+
   .bd_\[3px_dashed\] {
     border: 3px dashed;
 }
@@ -14344,6 +14315,14 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding: 12px 8px 12px 14px;
 }
 
+  .bd_transparent {
+    border: var(--borders-transparent);
+}
+
+  .inset_0 {
+    inset: var(--spacing-0);
+}
+
   .bd_\[2px_solid_var\(--likec4-palette-stroke\)\] {
     border: 2px solid var(--likec4-palette-stroke);
 }
@@ -14485,18 +14464,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     gap: var(--spacing-xs);
 }
 
-  .gap_xxs {
-    gap: var(--spacing-xxs);
-}
-
-  .gap_1 {
-    gap: var(--spacing-1);
-}
-
-  .ov_hidden {
-    overflow: hidden;
-}
-
   .gap_1\.5 {
     gap: var(--spacing-1\.5);
 }
@@ -14509,6 +14476,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     gap: var(--spacing-0\.5);
 }
 
+  .gap_xxs {
+    gap: var(--spacing-xxs);
+}
+
   .px_xs {
     padding-inline: var(--spacing-xs);
 }
@@ -14517,6 +14488,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding-block: var(--spacing-xxs);
 }
 
+  .ov_hidden {
+    overflow: hidden;
+}
+
   .px_sm {
     padding-inline: var(--spacing-sm);
 }
@@ -14525,10 +14500,34 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     gap: 8px;
 }
 
+  .gap_1 {
+    gap: var(--spacing-1);
+}
+
   .px_1\.5 {
     padding-inline: var(--spacing-1\.5);
 }
 
+  .px_3 {
+    padding-inline: var(--spacing-3);
+}
+
+  .py_2 {
+    padding-block: var(--spacing-2);
+}
+
+  .gap_2 {
+    gap: var(--spacing-2);
+}
+
+  .flex_\[0_0_20px\] {
+    flex: 0 0 20px;
+}
+
+  .offset_6 {
+    offset: 6px;
+}
+
   .gap_3 {
     gap: var(--spacing-3);
 }
@@ -14549,10 +14548,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding-inline: var(--spacing-2);
 }
 
-  .gap_2 {
-    gap: var(--spacing-2);
-}
-
   .offset_2 {
     offset: 2px;
 }
@@ -14577,61 +14572,71 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     border-radius: var(--radii-xs);
 }
 
-  .bd-c_likec4\.compare\.manual {
-    border-color: var(--colors-likec4-compare-manual);
+  .px_0 {
+    padding-inline: var(--spacing-0);
 }
 
-  .bd-c_likec4\.compare\.latest {
-    border-color: var(--colors-likec4-compare-latest);
+  .py_0 {
+    padding-block: var(--spacing-0);
 }
 
-  .px_4 {
-    padding-inline: var(--spacing-4);
+  .gap_0 {
+    gap: var(--spacing-0);
 }
 
-  .bd-w_4 {
-    border-width: var(--border-widths-4);
+  .ov_scroll {
+    overflow: scroll;
+}
+
+  .my_3 {
+    margin-block: var(--spacing-3);
+}
+
+  .flex_auto {
+    flex: 1 1 auto;
 }
 
   .py_1 {
     padding-block: var(--spacing-1);
 }
 
-  .gap_4 {
-    gap: var(--spacing-4);
+  .bd-t_subtle {
+    border-top: var(--borders-subtle);
 }
 
-  .flex_\[0\] {
-    flex: 0;
+  .bd-c_likec4\.diff\.removed\/40 {
+    --mix-borderColor: color-mix(in srgb, var(--colors-likec4-diff-removed) 40%, transparent);
+    border-color: var(--mix-borderColor, var(--colors-likec4-diff-removed));
 }
 
-  .mx_\[calc\(\{spacing\.2\}_\*_-1\)\] {
-    margin-inline: calc(var(--spacing-2) * -1);
+  .bd-c_likec4\.diff\.added\/40 {
+    --mix-borderColor: color-mix(in srgb, var(--colors-likec4-diff-added) 40%, transparent);
+    border-color: var(--mix-borderColor, var(--colors-likec4-diff-added));
 }
 
-  .ov_scroll {
-    overflow: scroll;
+  .bd-c_likec4\.diff\.modified\/40 {
+    --mix-borderColor: color-mix(in srgb, var(--colors-likec4-diff-modified) 40%, transparent);
+    border-color: var(--mix-borderColor, var(--colors-likec4-diff-modified));
 }
 
-  .px_3 {
-    padding-inline: var(--spacing-3);
+  .bd-c_likec4\.compare\.manual {
+    border-color: var(--colors-likec4-compare-manual);
 }
 
-  .py_2 {
-    padding-block: var(--spacing-2);
+  .bd-c_likec4\.compare\.latest {
+    border-color: var(--colors-likec4-compare-latest);
 }
 
-  .bd-w_default {
-    border-width: var(--border-widths-default);
+  .px_4 {
+    padding-inline: var(--spacing-4);
 }
 
-  .border-style_solid {
-    border-style: solid;
+  .transition_\[transform_100ms_ease-out\] {
+    transition: transform 100ms ease-out;
 }
 
-  .bd-c_likec4\.compare\.outline\/20 {
-    --mix-borderColor: color-mix(in srgb, var(--colors-likec4-compare-outline) 20%, transparent);
-    border-color: var(--mix-borderColor, var(--colors-likec4-compare-outline));
+  .bd-w_4 {
+    border-width: var(--border-widths-4);
 }
 
   .px_xxs {
@@ -14658,6 +14663,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     border-width: var(--border-widths-strong);
 }
 
+  .border-style_solid {
+    border-style: solid;
+}
+
   .bd-c_likec4\.walkthrough\.parallelFrame {
     border-color: var(--colors-likec4-walkthrough-parallel-frame);
 }
@@ -14674,49 +14683,44 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     border-color: var(--colors-transparent);
 }
 
-  .flex_\[0_0_40px\] {
-    flex: 0 0 40px;
-}
-
-  .border-style_dashed {
-    border-style: dashed;
+  .gap_4 {
+    gap: var(--spacing-4);
 }
 
-  .gap_\[24px_20px\] {
-    gap: 24px 20px;
+  .flex_\[0\] {
+    flex: 0;
 }
 
-  .bd-t_none {
-    border-top: var(--borders-none);
+  .flex_\[0_0_40px\] {
+    flex: 0 0 40px;
 }
 
-  .bd-l_none {
-    border-left: var(--borders-none);
+  .bdr_md {
+    border-radius: var(--radii-md);
 }
 
   .gap_6 {
     gap: var(--spacing-6);
 }
 
-  .gap_\[12px_16px\] {
-    gap: 12px 16px;
+  .bd-t_none {
+    border-top: var(--borders-none);
 }
 
-  .ov_visible {
-    overflow: visible;
+  .bd-l_none {
+    border-left: var(--borders-none);
 }
 
-  .bd-c_mantine\.gray\[3\] {
-    border-color: var(--colors-mantine-gray\[3\]);
+  .border-style_dashed {
+    border-style: dashed;
 }
 
-  .flex_\[0_1_auto\] {
-    flex: 0 1 auto;
+  .my_2 {
+    margin-block: var(--spacing-2);
 }
 
-  .transition_medium {
-    transition-duration: var(--durations-medium);
-    transition-timing-function: var(--easings-in-out);
+  .gap_2\.5 {
+    gap: var(--spacing-2\.5);
 }
 
   .flex_1_1_100\% {
@@ -14763,10 +14767,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     grid-column: 3;
 }
 
-  .gap_0 {
-    gap: var(--spacing-0);
-}
-
   .gap_\[10px_12px\] {
     gap: 10px 12px;
 }
@@ -14783,10 +14783,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     flex: 1 0 auto;
 }
 
-  .bdr_md {
-    border-radius: var(--radii-md);
-}
-
   .ring_none\! {
     outline: var(--borders-none) !important;
 }
@@ -14824,14 +14820,14 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     border-radius: var(--radii-0);
 }
 
-  .my_2 {
-    margin-block: var(--spacing-2);
-}
-
   .transition_\[all_100ms_ease-in\] {
     transition: all 100ms ease-in;
 }
 
+  .ov_visible {
+    overflow: visible;
+}
+
   .transition_\[all_150ms_ease-in-out\] {
     transition: all 150ms ease-in-out;
 }
@@ -14865,10 +14861,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     transition-timing-function: var(--easings-in-out);
 }
 
-  .gap_2\.5 {
-    gap: var(--spacing-2\.5);
-}
-
   .bdr_pill {
     border-radius: var(--radii-pill);
 }
@@ -14881,10 +14873,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     margin-inline: var(--spacing-1);
 }
 
-  .bd-t_subtle {
-    border-top: var(--borders-subtle);
-}
-
   .mx_-2 {
     margin-inline: calc(var(--spacing-2) * -1);
 }
@@ -14897,10 +14885,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     margin-inline: var(--spacing-0);
 }
 
-  .px_0 {
-    padding-inline: var(--spacing-0);
-}
-
   .bd-l_default {
     border-left: var(--borders-default);
 }
@@ -14965,6 +14949,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     letter-spacing: var(--letter-spacings-caps-sm);
 }
 
+  .bx-sh_sm {
+    box-shadow: var(--shadows-sm);
+}
+
   .cursor_pointer {
     cursor: var(--cursor-pointer);
 }
@@ -15098,14 +15086,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     position: bottom-left;
 }
 
-  .z_panel {
-    z-index: var(--z-index-panel);
-}
-
-  .pointer-events_none {
-    pointer-events: none;
-}
-
   .main-axis_4 {
     main-axis: 4px;
 }
@@ -15114,31 +15094,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     position: bottom-start;
 }
 
-  .pos_relative {
-    position: relative;
-}
-
-  .pointer-events_all {
-    pointer-events: all;
-}
-
-  .us_none {
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-  .d_none {
-    display: none;
-}
-
-  .flex-sh_1 {
-    flex-shrink: 1;
-}
-
-  .flex-g_1 {
-    flex-grow: 1;
-}
-
   .flex-sh_0 {
     flex-shrink: 0;
 }
@@ -15147,10 +15102,18 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     flex-grow: 0;
 }
 
+  .pointer-events_all {
+    pointer-events: all;
+}
+
   .op_0\.3 {
     opacity: var(--opacity-0\.3);
 }
 
+  .flex-g_1 {
+    flex-grow: 1;
+}
+
   .bd-e-w_var\(--thickness\) {
     border-inline-end-width: var(--thickness);
 }
@@ -15163,20 +15126,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     background-color: var(--colors-likec4-panel-action-warning-bg);
 }
 
-  .c_likec4\.panel\.action {
-    color: var(--colors-likec4-panel-action);
-}
-
-  .trunc_true {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-  .c_likec4\.panel\.text\.dimmed {
-    color: var(--colors-likec4-panel-text-dimmed);
-}
-
   .bg-c_\[rgb\(34_34_34_\/_var\(--_opacity\,_95\%\)\)\] {
     background-color: rgb(34 34 34 / var(--_opacity, 95%));
 }
@@ -15231,6 +15180,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     fill: var(--colors-none);
 }
 
+  .d_none {
+    display: none;
+}
+
   .ai_flex-end {
     align-items: flex-end;
 }
@@ -15243,6 +15196,11 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     justify-content: center;
 }
 
+  .us_none {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
   .fs_lg {
     font-size: var(--font-sizes-lg);
 }
@@ -15263,14 +15221,27 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     --translate-x: -8px;
 }
 
-  .bd-be-w_var\(--thickness\) {
-    border-block-end-width: var(--thickness);
+  .size_\[20px\] {
+    width: 20px;
+    height: 20px;
+}
+
+  .bx-sh_md {
+    box-shadow: var(--shadows-md);
+}
+
+  .z_var\(--z-index-tooltip\) {
+    z-index: var(--z-index-tooltip);
 }
 
   .cursor_default {
     cursor: var(--cursor-default);
 }
 
+  .bd-be-w_var\(--thickness\) {
+    border-block-end-width: var(--thickness);
+}
+
   .wb_break-word {
     word-break: break-word;
 }
@@ -15307,73 +15278,108 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     white-space: nowrap;
 }
 
-  .tov_ellipsis {
+  .tov_ellipsis,.trunc_true {
     text-overflow: ellipsis;
 }
 
-  .white-space-collapse_preserve-breaks {
-    white-space-collapse: preserve-breaks;
-}
-
+  .trunc_true {
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+  .white-space-collapse_preserve-breaks {
+    white-space-collapse: preserve-breaks;
+}
+
   .ov-wrap_anywhere {
     overflow-wrap: anywhere;
 }
 
-  .bg-c_likec4\.compare\.manual {
-    background-color: var(--colors-likec4-compare-manual);
+  .pointer-events_none {
+    pointer-events: none;
 }
 
-  .bg-c_likec4\.compare\.latest {
-    background-color: var(--colors-likec4-compare-latest);
+  .pos_right-start {
+    position: right-start;
+}
+
+  .stk_1\.7 {
+    stroke: 1.7px;
+}
+
+  .pos_relative {
+    position: relative;
 }
 
   .fs_xs {
     font-size: var(--font-sizes-xs);
 }
 
-  .lh_1 {
-    line-height: var(--line-heights-1);
+  .rg_2 {
+    row-gap: var(--spacing-2);
 }
 
-  .trf_translateY\(-4px\) {
-    transform: translateY(-4px);
+  .bg-c_surface\.sunken {
+    background-color: var(--colors-surface-sunken);
 }
 
-  .c_mantine\.gray\[9\] {
-    color: var(--colors-mantine-gray\[9\]);
+  .fs_\[8px\] {
+    font-size: 8px;
 }
 
-  .bx-sh_lg {
-    box-shadow: var(--shadows-lg);
+  .ff_mono {
+    font-family: var(--fonts-mono);
 }
 
-  .pos_right-start {
-    position: right-start;
+  .c_likec4\.diff\.removed {
+    color: var(--colors-likec4-diff-removed);
 }
 
-  .stk_1\.7 {
-    stroke: 1.7px;
+  .bg-c_likec4\.diff\.removed\/5 {
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-diff-removed) 5%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-likec4-diff-removed));
 }
 
-  .c_orange {
-    color: orange;
+  .c_likec4\.diff\.added {
+    color: var(--colors-likec4-diff-added);
 }
 
-  .c_likec4\.panel\.text {
-    color: var(--colors-likec4-panel-text);
+  .bg-c_likec4\.diff\.added\/5 {
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-diff-added) 5%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-likec4-diff-added));
 }
 
-  .c_likec4\.compare\.outline {
-    color: var(--colors-likec4-compare-outline);
+  .c_likec4\.diff\.modified {
+    color: var(--colors-likec4-diff-modified);
 }
 
-  .bg-c_likec4\.compare\.manual\/10 {
-    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-compare-manual) 10%, transparent);
-    background-color: var(--mix-backgroundColor, var(--colors-likec4-compare-manual));
+  .bg-c_likec4\.diff\.modified\/5 {
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-diff-modified) 5%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-likec4-diff-modified));
 }
 
-  .c_text {
-    color: var(--colors-text);
+  .bg-c_likec4\.compare\.manual {
+    background-color: var(--colors-likec4-compare-manual);
+}
+
+  .bg-c_likec4\.compare\.latest {
+    background-color: var(--colors-likec4-compare-latest);
+}
+
+  .lh_1 {
+    line-height: var(--line-heights-1);
+}
+
+  .trf_translateY\(-4px\) {
+    transform: translateY(-4px);
+}
+
+  .c_mantine\.gray\[9\] {
+    color: var(--colors-mantine-gray\[9\]);
+}
+
+  .c_orange {
+    color: orange;
 }
 
   .c_green {
@@ -15384,6 +15390,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     cross-axis: -22px;
 }
 
+  .flex-sh_1 {
+    flex-shrink: 1;
+}
+
   .lh_snug {
     line-height: var(--line-heights-snug);
 }
@@ -15396,10 +15406,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     font-weight: var(--font-weights-normal);
 }
 
-  .bx-sh_md {
-    box-shadow: var(--shadows-md);
-}
-
   .main-axis_3 {
     main-axis: 3px;
 }
@@ -15473,14 +15479,36 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     stroke: 3px;
 }
 
-  .bx-s_border-box {
-    box-sizing: border-box;
+  .c_text {
+    color: var(--colors-text);
 }
 
   .cursor_move {
     cursor: var(--cursor-move);
 }
 
+  .size_\[40px\] {
+    width: 40px;
+    height: 40px;
+}
+
+  .as_flex-start {
+    align-self: flex-start;
+}
+
+  .fs_md {
+    font-size: var(--font-sizes-md);
+}
+
+  .size_\[14px\] {
+    width: 14px;
+    height: 14px;
+}
+
+  .cursor_\[se-resize\] {
+    cursor: se-resize;
+}
+
   .ff_likec4\.element {
     font-family: var(--fonts-likec4-element);
 }
@@ -15493,17 +15521,8 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     font-style: normal;
 }
 
-  .fs_\[24px\] {
-    font-size: 24px;
-}
-
-  .size_\[40px\] {
-    width: 40px;
-    height: 40px;
-}
-
-  .as_flex-start {
-    align-self: flex-start;
+  .fs_h2 {
+    font-size: var(--font-sizes-h2);
 }
 
   .c_\[var\(--view-title-color\,_\{colors\.mantine\.gray\[7\]\}\)\] {
@@ -15518,33 +15537,24 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     line-height: 1.4;
 }
 
-  .c_mantine\.gray\[7\] {
-    color: var(--colors-mantine-gray\[7\]);
-}
-
-  .grid-tc_\[min-content_1fr\] {
-    grid-template-columns: min-content 1fr;
+  .cg_lg {
+    column-gap: var(--spacing-lg);
 }
 
-  .grid-ar_\[min-content_max-content\] {
-    grid-auto-rows: min-content max-content;
+  .rg_xs {
+    row-gap: var(--spacing-xs);
 }
 
-  .justify-self_end {
-    justify-self: end;
+  .c_mantine\.gray\[7\] {
+    color: var(--colors-mantine-gray\[7\]);
 }
 
-  .ta_right {
-    text-align: right;
+  .ff_body {
+    font-family: var(--fonts-body);
 }
 
-  .size_\[14px\] {
-    width: 14px;
-    height: 14px;
-}
-
-  .cursor_\[se-resize\] {
-    cursor: se-resize;
+  .ff_\[inherit\] {
+    font-family: inherit;
 }
 
   .ai_start {
@@ -15559,65 +15569,41 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     stroke: 1.6px;
 }
 
-  .grid-tc_min-content_1fr {
-    grid-template-columns: min-content 1fr;
-}
-
-  .grid-ar_\[min-content\] {
-    grid-auto-rows: min-content;
-}
-
-  .white-space_pre-wrap {
-    white-space: pre-wrap;
-}
-
-  .tov_unset {
-    text-overflow: unset;
-}
-
-  .wb_normal {
-    word-break: normal;
-}
-
-  .lh_md {
-    line-height: var(--line-heights-md);
+  .as_center {
+    align-self: center;
 }
 
-  .c_mantine\.gray\[5\] {
-    color: var(--colors-mantine-gray\[5\]);
+  .op_0 {
+    opacity: var(--opacity-0);
 }
 
-  .bg-c_white {
-    background-color: var(--colors-white);
+  .cg_2 {
+    column-gap: var(--spacing-2);
 }
 
-  .jc_flex-end {
-    justify-content: flex-end;
+  .rg_1 {
+    row-gap: var(--spacing-1);
 }
 
-  .trs-prop_common {
-    --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-}
-
-  .c_mantine\.gray\[6\] {
-    color: var(--colors-mantine-gray\[6\]);
+  .c_text\/55 {
+    --mix-color: color-mix(in srgb, var(--colors-text) 55%, transparent);
+    color: var(--mix-color, var(--colors-text));
 }
 
-  .bg-c_mantine\.gray\[1\] {
-    background-color: var(--colors-mantine-gray\[1\]);
+  .fs_\[inherit\] {
+    font-size: inherit;
 }
 
-  .fw_\[700\] {
-    font-weight: 700;
+  .fw_\[inherit\] {
+    font-weight: inherit;
 }
 
-  .justify-self_stretch {
-    justify-self: stretch;
+  .lh_\[inherit\] {
+    line-height: inherit;
 }
 
-  .as_start {
-    align-self: start;
+  .c_\[var\(--badge-color\)\] {
+    color: var(--badge-color);
 }
 
   .ps_\[16px\] {
@@ -15676,6 +15662,14 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     grid-template-columns: 1fr 30px 1fr;
 }
 
+  .grid-ar_\[min-content_max-content\] {
+    grid-auto-rows: min-content max-content;
+}
+
+  .grid-tc_min-content_1fr {
+    grid-template-columns: min-content 1fr;
+}
+
   .justify-items_start {
     justify-items: start;
 }
@@ -15734,6 +15728,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     border-width: 0;
 }
 
+  .lh_md {
+    line-height: var(--line-heights-md);
+}
+
   .size_\[24px\] {
     width: 24px;
     height: 24px;
@@ -15775,61 +15773,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     stroke-opacity: 0.5;
 }
 
-  .z_\[100\] {
-    z-index: 100;
-}
-
   .cursor_grab\! {
     cursor: var(--cursor-grab) !important;
 }
 
-  .fill_\[var\(--xy-edge-stroke\)\] {
-    fill: var(--xy-edge-stroke);
-}
-
-  .stk_transparent {
-    stroke: var(--colors-transparent);
-}
-
-  .fill-opacity_0\.5 {
-    fill-opacity: 0.5;
-}
-
-  .stk-w_\[10\] {
-    stroke-width: 10;
-}
-
-  .r_\[4\] {
-    r: 4px;
-}
-
-  .cursor_grab {
-    cursor: var(--cursor-grab);
-}
-
-  .vis_hidden {
-    visibility: hidden;
-}
-
-  .trs-dur_fast {
-    --transition-duration: var(--durations-fast);
-    transition-duration: var(--durations-fast);
-}
-
-  .trs-prop_\[visibility\,_fill\,_fill-opacity\,_r\] {
-    --transition-prop: visibility, fill, fill-opacity, r;
-    transition-property: visibility, fill, fill-opacity, r;
-}
-
-  .trs-tmf_inOut {
-    --transition-easing: var(--easings-in-out);
-    transition-timing-function: var(--easings-in-out);
-}
-
-  .trs-dly_\[20ms\] {
-    transition-delay: 20ms;
-}
-
   .bg-c_var\(--likec4-palette-fill\) {
     background-color: var(--likec4-palette-fill);
 }
@@ -15838,10 +15785,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     --translate-y: -50%;
 }
 
-  .c_\[var\(--likec4-palette-hiContrast\)\] {
-    color: var(--likec4-palette-hiContrast);
-}
-
   .op_\[0\.7\] {
     opacity: var(--opacity-0\.7);
 }
@@ -15957,22 +15900,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     --colors-color-palette-label: var(--colors-subflow-try-label);
 }
 
-  .ring-c_likec4\.compare\.outline {
-    outline-color: var(--colors-likec4-compare-outline);
-}
-
-  .ring-w_extra {
-    outline-width: var(--border-widths-extra);
-}
-
-  .outline-style_dashed {
-    outline-style: dashed;
-}
-
-  .ring-o_1\.5 {
-    outline-offset: var(--spacing-1\.5);
-}
-
   .bg-c_surface\.default\/80 {
     --mix-backgroundColor: color-mix(in srgb, var(--colors-surface-default) 80%, transparent);
     background-color: var(--mix-backgroundColor, var(--colors-surface-default));
@@ -16002,6 +15929,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     opacity: var(--opacity-0\.25);
 }
 
+  .bx-sh_lg {
+    box-shadow: var(--shadows-lg);
+}
+
   .ap_none {
     appearance: none;
     -webkit-appearance: none;
@@ -16033,11 +15964,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     transition-property: background, background-color, background-image, background-position;
 }
 
-  .size_\[20px\] {
-    width: 20px;
-    height: 20px;
-}
-
   .fv-num_tabular-nums {
     font-variant-numeric: tabular-nums;
 }
@@ -16068,18 +15994,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     white-space: pre-line;
 }
 
-  .fs_md {
-    font-size: var(--font-sizes-md);
-}
-
   .lh_\[20px\] {
     line-height: 20px;
 }
 
-  .fs_\[8px\] {
-    font-size: 8px;
-}
-
   .c_\[color-mix\(in_srgb\,_\{colors\.text\}\,_transparent_20\%\)\] {
     color: color-mix(in srgb, var(--colors-text), transparent 20%);
 }
@@ -16112,10 +16030,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     position: left-start;
 }
 
-  .ff_mono {
-    font-family: var(--fonts-mono);
-}
-
   .white-space_pre {
     white-space: pre;
 }
@@ -16132,6 +16046,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     background-color: var(--colors-surface-hover);
 }
 
+  .white-space_pre-wrap {
+    white-space: pre-wrap;
+}
+
   .order_4 {
     order: 4;
 }
@@ -16156,35 +16074,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     z-index: 2;
 }
 
-  .bkdp_\[blur\(6px\)\] {
-    -webkit-backdrop-filter: blur(6px);
-    backdrop-filter: blur(6px);
-}
-
-  .trf_translateX\(-100\%\) {
-    transform: translateX(-100%);
-}
-
-  .c_indigo {
-    color: indigo;
-}
-
-  .c_violet {
-    color: violet;
-}
-
-  .blur_2 {
-    --blur: blur(2);
-}
-
-  .c_dimmed {
-    color: dimmed;
-}
-
-  .blur_3 {
-    --blur: blur(3);
-}
-
   .bg-o_padding-box {
     background-origin: padding-box;
 }
@@ -16223,8 +16112,42 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     backdrop-filter: blur(8px);
 }
 
-  .op_0\.8 {
-    opacity: var(--opacity-0\.8);
+  .op_0\.8 {
+    opacity: var(--opacity-0\.8);
+}
+
+  .bkdp_\[blur\(6px\)\] {
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+}
+
+  .trs-prop_common {
+    --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+}
+
+  .trf_translateX\(-100\%\) {
+    transform: translateX(-100%);
+}
+
+  .c_indigo {
+    color: indigo;
+}
+
+  .c_violet {
+    color: violet;
+}
+
+  .blur_2 {
+    --blur: blur(2);
+}
+
+  .c_dimmed {
+    color: dimmed;
+}
+
+  .blur_3 {
+    --blur: blur(3);
 }
 
   .c_yellow {
@@ -16303,22 +16226,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding-right: var(--spacing-2\.5);
 }
 
-  .top_0 {
-    top: var(--spacing-0);
-}
-
-  .left_0 {
-    left: var(--spacing-0);
-}
-
-  .max-w_100vw {
-    max-width: var(--sizes-100vw);
-}
-
-  .max-w_\[150px\] {
-    max-width: 150px;
-}
-
   .max-w_\[calc\(100vw_-_50px\)\] {
     max-width: calc(100vw - 50px);
 }
@@ -16375,13 +16282,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding-right: var(--spacing-xs);
 }
 
-  .lc_5 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 5;
-    -webkit-box-orient: vertical;
-}
-
   .top_0\.5 {
     top: var(--spacing-0\.5);
 }
@@ -16394,6 +16294,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     bottom: var(--spacing-0);
 }
 
+  .left_0 {
+    left: var(--spacing-0);
+}
+
   .max-w_\[50px\] {
     max-width: 50px;
 }
@@ -16402,14 +16306,45 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     height: 5px;
 }
 
-  .w_max-content {
-    width: var(--sizes-max-content);
+  .max-w_\[320px\] {
+    max-width: 320px;
+}
+
+  .mt_\[1px\] {
+    margin-top: 1px;
+}
+
+  .mt_1\.5 {
+    margin-top: var(--spacing-1\.5);
+}
+
+  .lc_4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
 }
 
   .min-w_0 {
     min-width: var(--sizes-0);
 }
 
+  .mt_1 {
+    margin-top: var(--spacing-1);
+}
+
+  .mt_xs {
+    margin-top: var(--spacing-xs);
+}
+
+  .top_0 {
+    top: var(--spacing-0);
+}
+
+  .w_max-content {
+    width: var(--sizes-max-content);
+}
+
   .pt_2 {
     padding-top: var(--spacing-2);
 }
@@ -16450,60 +16385,60 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     top: 64px;
 }
 
-  .bdr-bl_sm {
-    border-bottom-left-radius: var(--radii-sm);
-}
-
-  .bdr-br_sm {
-    border-bottom-right-radius: var(--radii-sm);
+  .h_auto {
+    height: var(--sizes-auto);
 }
 
-  .w_full {
-    width: var(--sizes-full);
+  .max-h_\[calc\(100cqh_-_180px\)\] {
+    max-height: calc(100cqh - 180px);
 }
 
-  .h_full {
-    height: var(--sizes-full);
+  .max-w_\[200px\] {
+    max-width: 200px;
 }
 
   .pl_3 {
     padding-left: var(--spacing-3);
 }
 
-  .h_auto {
-    height: var(--sizes-auto);
+  .pr_2 {
+    padding-right: var(--spacing-2);
 }
 
-  .max-h_\[calc\(100cqh_-_180px\)\] {
-    max-height: calc(100cqh - 180px);
+  .w_full {
+    width: var(--sizes-full);
 }
 
-  .mb_xs {
-    margin-bottom: var(--spacing-xs);
+  .pb_3 {
+    padding-bottom: var(--spacing-3);
 }
 
-  .max-w_\[160px\] {
-    max-width: 160px;
+  .bdr-bl_sm {
+    border-bottom-left-radius: var(--radii-sm);
 }
 
-  .pl_2 {
-    padding-left: var(--spacing-2);
+  .bdr-br_sm {
+    border-bottom-right-radius: var(--radii-sm);
+}
+
+  .h_full {
+    height: var(--sizes-full);
 }
 
   .mt_4 {
     margin-top: var(--spacing-4);
 }
 
-  .mt_xs {
-    margin-top: var(--spacing-xs);
+  .max-w_\[150px\] {
+    max-width: 150px;
 }
 
-  .w_\[20px\] {
-    width: 20px;
+  .w_300 {
+    width: 300px;
 }
 
-  .max-w_\[250px\] {
-    max-width: 250px;
+  .mb_4 {
+    margin-bottom: var(--spacing-4);
 }
 
   .mb_10 {
@@ -16566,66 +16501,94 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     max-height: calc(100cqh - 100px);
 }
 
-  .mt_xxs {
-    margin-top: var(--spacing-xxs);
-}
-
   .min-w_\[40px\] {
     min-width: 40px;
 }
 
-  .w_100vw {
-    width: var(--sizes-100vw);
+  .mt_xxs {
+    margin-top: var(--spacing-xxs);
 }
 
-  .h_100vh {
-    height: var(--sizes-100vh);
+  .mb_xs {
+    margin-bottom: var(--spacing-xs);
 }
 
-  .lc_2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+  .ml_sm {
+    margin-left: var(--spacing-sm);
+}
+
+  .mb_2 {
+    margin-bottom: var(--spacing-2);
 }
 
   .bottom_0\.5 {
     bottom: var(--spacing-0\.5);
 }
 
-  .mb_sm {
-    margin-bottom: var(--spacing-sm);
+  .lc_2 {
+    -webkit-line-clamp: 2;
 }
 
-  .lc_1 {
+  .lc_2,.lc_1 {
     overflow: hidden;
     display: -webkit-box;
-    -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
 }
 
+  .lc_1 {
+    -webkit-line-clamp: 1;
+}
+
+  .mt_\[-8px\] {
+    margin-top: -8px;
+}
+
   .pt_xs {
     padding-top: var(--spacing-xs);
 }
 
-  .mt_6 {
-    margin-top: var(--spacing-6);
+  .pt_0\.5 {
+    padding-top: var(--spacing-0\.5);
 }
 
-  .w_300 {
-    width: 300px;
+  .pb_1\.5 {
+    padding-bottom: var(--spacing-1\.5);
+}
+
+  .ml_1 {
+    margin-left: var(--spacing-1);
+}
+
+  .pl_4 {
+    padding-left: var(--spacing-4);
+}
+
+  .pl_1 {
+    padding-left: var(--spacing-1);
+}
+
+  .max-w_\[160px\] {
+    max-width: 160px;
+}
+
+  .max-w_100\% {
+    max-width: var(--sizes-100\%);
+}
+
+  .min-h_0 {
+    min-height: var(--sizes-0);
 }
 
-  .min-h_\[32px\] {
-    min-height: 32px;
+  .w_\[16px\] {
+    width: 16px;
 }
 
-  .max-w_\[min\(200px\,_100\%\)\] {
-    max-width: min(200px, 100%);
+  .top_1 {
+    top: var(--spacing-1);
 }
 
-  .min-w_\[60px\] {
-    min-width: 60px;
+  .h_icon\.xl {
+    height: var(--sizes-icon-xl);
 }
 
   .mb_0 {
@@ -16640,10 +16603,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     min-width: 24px;
 }
 
-  .mb_4 {
-    margin-bottom: var(--spacing-4);
-}
-
   .top_12 {
     top: var(--spacing-12);
 }
@@ -16656,12 +16615,8 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     margin-top: var(--spacing-sm);
 }
 
-  .ml_sm {
-    margin-left: var(--spacing-sm);
-}
-
-  .pl_1 {
-    padding-left: var(--spacing-1);
+  .mb_sm {
+    margin-bottom: var(--spacing-sm);
 }
 
   .bd-b-w_default {
@@ -16680,10 +16635,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     max-height: 70vh;
 }
 
-  .mb_2 {
-    margin-bottom: var(--spacing-2);
-}
-
   .max-w_8xl {
     max-width: 8xl;
 }
@@ -16696,10 +16647,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     margin-right: var(--spacing-1);
 }
 
-  .mt_1 {
-    margin-top: var(--spacing-1);
-}
-
   .min-h_\[60px\] {
     min-height: 60px;
 }
@@ -16756,12 +16703,8 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding-right: var(--spacing-xxs);
 }
 
-  .top_1 {
-    top: var(--spacing-1);
-}
-
-  .pt_0\.5 {
-    padding-top: var(--spacing-0\.5);
+  .pl_2 {
+    padding-left: var(--spacing-2);
 }
 
   .bdr-tl_sm {
@@ -16776,10 +16719,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding-left: var(--spacing-4\.5);
 }
 
-  .pr_2 {
-    padding-right: var(--spacing-2);
-}
-
   .w_min-content {
     width: var(--sizes-min-content);
 }
@@ -16824,10 +16763,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     margin-bottom: var(--spacing-1\.5);
 }
 
-  .max-w_\[200px\] {
-    max-width: 200px;
-}
-
   .mb_0\.5 {
     margin-bottom: var(--spacing-0\.5);
 }
@@ -16836,10 +16771,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding-bottom: var(--spacing-1);
 }
 
-  .min-h_0 {
-    min-height: var(--sizes-0);
-}
-
   .pb_4 {
     padding-bottom: var(--spacing-4);
 }
@@ -16848,10 +16779,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     height: 2px;
 }
 
-  .mt_1\.5 {
-    margin-top: var(--spacing-1\.5);
-}
-
   .mt_0\.5 {
     margin-top: var(--spacing-0\.5);
 }
@@ -17008,6 +16935,25 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding-top: var(--header-height);
 }
 
+  .lc_3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+
+  .pt_sm {
+    padding-top: var(--spacing-sm);
+}
+
+  .top_56 {
+    top: 56px;
+}
+
+  .w_280 {
+    width: 280px;
+}
+
   .top_\[14px\] {
     top: 14px;
 }
@@ -17020,19 +16966,12 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     width: 200px;
 }
 
-  .pt_md {
-    padding-top: var(--spacing-md);
-}
-
-  .lc_3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
+  .max-w_\[250px\] {
+    max-width: 250px;
 }
 
-  .pt_sm {
-    padding-top: var(--spacing-sm);
+  .pt_md {
+    padding-top: var(--spacing-md);
 }
 
   .\[\&\]\:--likec4-outline-size_6px {
@@ -17063,6 +17002,14 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     --ai-radius: var(--radii-md);
 }
 
+  [data-mantine-color-scheme="dark"] .dark\:bg_surface\.canvas {
+    background: var(--colors-surface-canvas);
+}
+
+  [data-mantine-color-scheme="dark"] .dark\:bd_subtle {
+    border: var(--borders-subtle);
+}
+
   .backdrop\:bg_\[color-mix\(in_oklab\,_\{colors\.likec4\.overlay\.backdrop\}_60\%\,_transparent\)\]::backdrop {
     background: color-mix(in oklab, var(--colors-likec4-overlay-backdrop) 60%, transparent);
 }
@@ -17085,6 +17032,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     background: var(--colors-mantine-dark\[7\]);
 }
 
+  .\[\&_\>_\.mantine-ScrollArea-viewport\]\:p_3\! > .mantine-ScrollArea-viewport {
+    padding: var(--spacing-3) !important;
+}
+
   .\[\&\[data-active\]\]\:bg_white[data-active] {
     background: var(--colors-white);
 }
@@ -17186,6 +17137,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     border-radius: var(--radii-sm);
 }
 
+  :is(.\[\&_\+_\&\]\:bd-t_none) + :is(.\[\&_\+_\&\]\:bd-t_none) {
+    border-top: var(--borders-none);
+}
+
   .\[\&_\.mantine-ThemeIcon-root\]\:transition_fast .mantine-ThemeIcon-root {
     transition-duration: var(--durations-fast);
     transition-timing-function: var(--easings-in-out);
@@ -17195,8 +17150,21 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     transition: all 130ms var(--easings-in-out);
 }
 
-  .\[\&\[data-active\]\]\:transition_none[data-active] {
-    transition: none;
+  .\[\&\[data-active\]\]\:transition_none[data-active] {
+    transition: none;
+}
+
+  .before\:transition_fast::before {
+    transition-duration: var(--durations-fast);
+    transition-timing-function: var(--easings-in-out);
+}
+
+  .\[\&\:is\(\[aria-expanded\=\"false\"\]\)\]\:gap_1:is([aria-expanded="false"]) {
+    gap: var(--spacing-1);
+}
+
+  .\[\&\:is\(\[aria-expanded\=\"false\"\]\)\]\:px_1:is([aria-expanded="false"]) {
+    padding-inline: var(--spacing-1);
 }
 
   .\[\&_\>_\*\]\:transition_fast > *,.\[\&_\.tabler-icon\]\:transition_fast .tabler-icon {
@@ -17239,11 +17207,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     flex: none;
 }
 
-  .before\:transition_slow::before {
-    transition-duration: var(--durations-slow);
-    transition-timing-function: var(--easings-in-out);
-}
-
   .\[\&_iframe\]\:border-style_none iframe {
     border-style: none;
 }
@@ -17252,6 +17215,15 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     overflow: hidden;
 }
 
+  .before\:transition_slow::before {
+    transition-duration: var(--durations-slow);
+    transition-timing-function: var(--easings-in-out);
+}
+
+  [data-mantine-color-scheme="dark"] .dark\:bx-sh_lg {
+    box-shadow: var(--shadows-lg);
+}
+
   .\[\&_\:where\(\.likec4-diagram\,_\.likec4-compound-node\,_\.likec4-element-node\)\]\:cursor_pointer :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node) {
     cursor: var(--cursor-pointer);
 }
@@ -17333,6 +17305,34 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     transition-delay: var(--durations-fastest);
 }
 
+  .\[\&_\:where\(\[data-likec4-ref-state\=\"link\"\]\)\]\:cursor_pointer :where([data-likec4-ref-state="link"]) {
+    cursor: var(--cursor-pointer);
+}
+
+  .\[\&_\:where\(\[data-likec4-ref-state\=\"missing\"\]\)\]\:op_0\.6 :where([data-likec4-ref-state="missing"]) {
+    opacity: var(--opacity-0\.6);
+}
+
+  .\[\&_\:where\(\[data-likec4-ref-state\=\"missing\"\]\)\]\:text-decoration-line_underline :where([data-likec4-ref-state="missing"]) {
+    text-decoration-line: underline;
+}
+
+  .\[\&_\:where\(\[data-likec4-ref-state\=\"missing\"\]\)\]\:td-s_dotted :where([data-likec4-ref-state="missing"]) {
+    text-decoration-style: dotted;
+}
+
+  .\[\&_\:where\(\[data-likec4-ref-state\=\"missing\"\]\)\]\:tu-o_2px :where([data-likec4-ref-state="missing"]) {
+    text-underline-offset: 2px;
+}
+
+  .\[\&_\:where\(svg\,_img\)\]\:pointer-events_none :where(svg, img) {
+    pointer-events: none;
+}
+
+  .\[\&_img\]\:obj-f_contain img {
+    object-fit: contain;
+}
+
   .likec4-root:is([data-likec4-diagram-panning="true"]) .whenPanning\:pointer-events_none {
     pointer-events: none;
 }
@@ -17374,19 +17374,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     box-shadow: var(--shadows-none);
 }
 
-  .backdrop\:bkdp_auto::backdrop {
-    -webkit-backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-    backdrop-filter: var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, );
-}
-
-  .backdrop\:bkdp-blur_var\(--_blur\)::backdrop {
-    --backdrop-blur: blur(var(--_blur));
-}
-
-  .backdrop\:bg-c_\[rgb\(36_36_36_\/_var\(--_opacity\,_5\%\)\)\]::backdrop {
-    background-color: rgb(36 36 36 / var(--_opacity, 5%));
-}
-
   .\[\&_\.react-flow__attribution\]\:d_none .react-flow__attribution {
     display: none;
 }
@@ -17395,18 +17382,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     mix-blend-mode: hard-light;
 }
 
-  .\[\&_\:where\(svg\,_img\)\]\:pointer-events_none :where(svg, img) {
-    pointer-events: none;
-}
-
   .\[\&_\:where\(svg\,_img\)\]\:filter_\[_drop-shadow\(0_0_3px_rgb\(0_0_0_\/_10\%\)\)_drop-shadow\(0_1px_8px_rgb\(0_0_0_\/_5\%\)\)_drop-shadow\(1px_1px_16px_rgb\(0_0_0_\/_2\%\)\)_\] :where(svg, img) {
     filter: drop-shadow(0 0 3px rgb(0 0 0 / 10%)) drop-shadow(0 1px 8px rgb(0 0 0 / 5%)) drop-shadow(1px 1px 16px rgb(0 0 0 / 2%));
 }
 
-  .\[\&_img\]\:obj-f_contain img {
-    object-fit: contain;
-}
-
   .\[\&_\.mantine-ThemeIcon-root\]\:c_\[var\(--icon-color\,_\{colors\.mantine\.dark\[2\]\}\)\] .mantine-ThemeIcon-root {
     color: var(--icon-color, var(--colors-mantine-dark\[2\]));
 }
@@ -17423,20 +17402,48 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     color: var(--colors-mantine-dark\[1\]);
 }
 
-  [data-mantine-color-scheme="dark"] .dark\:c_mantine\.dark\[3\] {
-    color: var(--colors-mantine-dark\[3\]);
+  .\[\&\[data-hovered\=\"true\"\]\]\:c_text\.bright[data-hovered="true"] {
+    color: var(--colors-text-bright);
+}
+
+  .\[\&\[data-hovered\=\"true\"\]\]\:bg-c_surface\.sunken[data-hovered="true"] {
+    background-color: var(--colors-surface-sunken);
+}
+
+  .\[\&\[data-copied\=\"true\"\]\]\:op_1[data-copied="true"] {
+    opacity: var(--opacity-1);
+}
+
+  .\[\&\[data-copied\=\"true\"\]\]\:c_\[var\(--mantine-color-teal-text\)\][data-copied="true"] {
+    color: var(--mantine-color-teal-text);
+}
+
+  .before\:content_\"\"::before {
+    content: "";
 }
 
-  [data-mantine-color-scheme="dark"] .dark\:bg-c_mantine\.dark\[9\] {
-    background-color: var(--colors-mantine-dark\[9\]);
+  .before\:pos_absolute::before {
+    position: absolute;
+}
+
+  .before\:bg-c_border\.focus::before {
+    background-color: var(--colors-border-focus);
+}
+
+  .before\:bg-c_transparent::before {
+    background-color: var(--colors-transparent);
+}
+
+  :where([data-separator="active"]) .\[\:where\(\[data-separator\=\"active\"\]\)_\&\]\:trs-dly_fast {
+    transition-delay: var(--durations-fast);
 }
 
-  [data-mantine-color-scheme="dark"] .dark\:c_mantine\.dark\[2\] {
-    color: var(--colors-mantine-dark\[2\]);
+  :where([data-separator="active"]) .\[\:where\(\[data-separator\=\"active\"\]\)_\&\]\:vis_hidden {
+    visibility: hidden;
 }
 
-  [data-mantine-color-scheme="dark"] .dark\:bg-c_mantine\.dark\[6\] {
-    background-color: var(--colors-mantine-dark\[6\]);
+  .expanded\:trf_translateX\(-50\%\):is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
+    transform: translateX(-50%);
 }
 
   .\[\&_\.tabler-icon\]\:size_\[90\%\] .tabler-icon {
@@ -17456,10 +17463,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     content: "scope:";
 }
 
-  .before\:pos_absolute::before {
-    position: absolute;
-}
-
   .before\:fs_xxs::before {
     font-size: var(--font-sizes-xxs);
 }
@@ -17562,39 +17565,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     cursor: var(--cursor-inherit);
 }
 
-  [data-mantine-color-scheme="dark"] .dark\:mix-bm_screen {
-    mix-blend-mode: screen;
-}
-
-  [data-mantine-color-scheme="light"] .light\:mix-bm_multiply {
-    mix-blend-mode: multiply;
-}
-
-  :where([data-likec4-selected='true'], [data-likec4-hovered='true']) .\[\:where\(\[data-likec4-selected\=\'true\'\]\,_\[data-likec4-hovered\=\'true\'\]\)_\&\]\:vis_visible {
-    visibility: visible;
-}
-
-  :where([data-likec4-selected='true'], [data-likec4-hovered='true']) .\[\:where\(\[data-likec4-selected\=\'true\'\]\,_\[data-likec4-hovered\=\'true\'\]\)_\&\]\:fill-opacity_1 {
-    fill-opacity: 1;
-}
-
-  :where([data-likec4-selected='true'], [data-likec4-hovered='true']) .\[\:where\(\[data-likec4-selected\=\'true\'\]\,_\[data-likec4-hovered\=\'true\'\]\)_\&\]\:trs-tmf_out {
-    --transition-easing: var(--easings-out);
-    transition-timing-function: var(--easings-out);
-}
-
-  :where([data-likec4-selected='true'], [data-likec4-hovered='true']) .\[\:where\(\[data-likec4-selected\=\'true\'\]\,_\[data-likec4-hovered\=\'true\'\]\)_\&\]\:trs-dly_0 {
-    transition-delay: var(--durations-0);
-}
-
-  :where([data-likec4-selected='true']) .\[\:where\(\[data-likec4-selected\=\'true\'\]\)_\&\]\:r_\[6\] {
-    r: 6;
-}
-
-  :is([data-likec4-hovered='true']) .\[\:is\(\[data-likec4-hovered\=\'true\'\]\)_\&\]\:r_\[8\] {
-    r: 8;
-}
-
   .\[\&_\+_\.likec4-element-shape\]\:ring-c_likec4\.compare\.outline + .likec4-element-shape {
     outline-color: var(--colors-likec4-compare-outline);
 }
@@ -17637,6 +17607,22 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     transform: translateY(-50%);
 }
 
+  .\[\&\:has\(\.likec4-node-drifts\)\]\:ring-c_likec4\.compare\.outline:has(.likec4-node-drifts) {
+    outline-color: var(--colors-likec4-compare-outline);
+}
+
+  .\[\&\:has\(\.likec4-node-drifts\)\]\:ring-w_extra:has(.likec4-node-drifts) {
+    outline-width: var(--border-widths-extra);
+}
+
+  .\[\&\:has\(\.likec4-node-drifts\)\]\:outline-style_dashed:has(.likec4-node-drifts) {
+    outline-style: dashed;
+}
+
+  .\[\&\:has\(\.likec4-node-drifts\)\]\:ring-o_1\.5:has(.likec4-node-drifts) {
+    outline-offset: var(--spacing-1\.5);
+}
+
   .\[\&_svg\]\:op_\[0\.5\] svg {
     opacity: var(--opacity-0\.5);
 }
@@ -17645,6 +17631,22 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     cursor: var(--cursor-default);
 }
 
+  .after\:content_\"_\"::after {
+    content: " ";
+}
+
+  .after\:pos_absolute::after {
+    position: absolute;
+}
+
+  .after\:z_\[1\]::after {
+    z-index: 1;
+}
+
+  .\[\&_iframe\]\:bg-c_transparent iframe {
+    background-color: var(--colors-transparent);
+}
+
   .before\:trs-prop_common::before {
     --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -17700,22 +17702,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     visibility: hidden;
 }
 
-  .after\:content_\"_\"::after {
-    content: " ";
-}
-
-  .after\:pos_absolute::after {
-    position: absolute;
-}
-
-  .after\:z_\[1\]::after {
-    z-index: 1;
-}
-
-  .\[\&_iframe\]\:bg-c_transparent iframe {
-    background-color: var(--colors-transparent);
-}
-
   .\[\&_\.mantine-ScrollArea-viewport\]\:min-h_100\% .mantine-ScrollArea-viewport {
     min-height: var(--sizes-100\%);
 }
@@ -17752,6 +17738,22 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     height: 12px;
 }
 
+  .\[\&_\:where\(svg\,_img\)\]\:w_100\% :where(svg, img) {
+    width: var(--sizes-100\%);
+}
+
+  .\[\&_\:where\(svg\,_img\)\]\:h_auto :where(svg, img) {
+    height: var(--sizes-auto);
+}
+
+  .\[\&_\:where\(svg\,_img\)\]\:max-h_100\% :where(svg, img) {
+    max-height: var(--sizes-100\%);
+}
+
+  .\[\&_\:where\(p\:last-child\)\]\:mb_0 :where(p:last-child) {
+    margin-bottom: var(--spacing-0);
+}
+
   [data-mantine-color-scheme="dark"] .dark\:bd-l-c_mantine\.dark\[4\] {
     border-left-color: var(--colors-mantine-dark\[4\]);
 }
@@ -17764,16 +17766,8 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     height: 70%;
 }
 
-  .\[\&_\:where\(svg\,_img\)\]\:w_100\% :where(svg, img) {
-    width: var(--sizes-100\%);
-}
-
-  .\[\&_\:where\(svg\,_img\)\]\:h_auto :where(svg, img) {
-    height: var(--sizes-auto);
-}
-
-  .\[\&_\:where\(svg\,_img\)\]\:max-h_100\% :where(svg, img) {
-    max-height: var(--sizes-100\%);
+  .\[\&_\>_\.mantine-ScrollArea-viewport\]\:pl_0\! > .mantine-ScrollArea-viewport {
+    padding-left: var(--spacing-0) !important;
 }
 
   .\[\&\:not\(\:has\(\.mantine-ScrollArea-root\)\)\]\:pl_1:not(:has(.mantine-ScrollArea-root)) {
@@ -17792,14 +17786,58 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     height: var(--sizes-100\%);
 }
 
-  .\[\&\[data-level\=\'1\'\]\]\:mb_sm[data-level='1'] {
-    margin-bottom: var(--spacing-sm);
+  :is(.\[\&_\+_\&\]\:ml_-1) + :is(.\[\&_\+_\&\]\:ml_-1) {
+    margin-left: calc(var(--spacing-1) * -1);
+}
+
+  .\[\&_\+_\&\]\:pl_0 + .\[\&_\+_\&\]\:pl_0 {
+    padding-left: var(--spacing-0);
+}
+
+  .before\:left_1::before {
+    left: var(--spacing-1);
 }
 
   .before\:top_0::before {
     top: var(--spacing-0);
 }
 
+  .before\:w_\[2px\]::before {
+    width: 2px;
+}
+
+  .before\:h_100\%::before {
+    height: var(--sizes-100\%);
+}
+
+  .before\:bottom_0::before {
+    bottom: var(--spacing-0);
+}
+
+  .before\:left_\[7\.5px\]::before {
+    left: 7.5px;
+}
+
+  .before\:w_\[1px\]::before {
+    width: 1px;
+}
+
+  .expanded\:left_\[50\%\]:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
+    left: 50%;
+}
+
+  .expanded\:w_icon\.xl:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
+    width: var(--sizes-icon-xl);
+}
+
+  .\[\&\:is\(\[aria-expanded\=\"false\"\]\)\]\:right_0:is([aria-expanded="false"]) {
+    right: var(--spacing-0);
+}
+
+  .\[\&\[data-level\=\'1\'\]\]\:mb_sm[data-level='1'] {
+    margin-bottom: var(--spacing-sm);
+}
+
   .before\:left_2::before {
     left: var(--spacing-2);
 }
@@ -17820,7 +17858,7 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     max-height: var(--sizes-100\%);
 }
 
-  :is(.\[\&_\+_\&\]\:mt_\[32px\]) + :is(.\[\&_\+_\&\]\:mt_\[32px\]) {
+  .\[\&_\+_\&\]\:mt_\[32px\] + .\[\&_\+_\&\]\:mt_\[32px\] {
     margin-top: 32px;
 }
 
@@ -18011,11 +18049,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     border-color: var(--colors-border-default);
 }
 
-  .hover\:bd-c_likec4\.compare\.outline\/25:is(:hover, [data-hover]) {
-    --mix-borderColor: color-mix(in srgb, var(--colors-likec4-compare-outline) 25%, transparent);
-    border-color: var(--mix-borderColor, var(--colors-likec4-compare-outline));
-}
-
   .hover\:bd-w_\[4px\]:is(:hover, [data-hover]) {
     border-width: 4px;
 }
@@ -18073,25 +18106,27 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     background-color: var(--colors-likec4-panel-action-warning-bg-hover);
 }
 
-  .hover\:c_likec4\.panel\.action\.hover:is(:hover, [data-hover]) {
-    color: var(--colors-likec4-panel-action-hover);
+  .hover\:trs-dly_0:is(:hover, [data-hover]) {
+    transition-delay: var(--durations-0);
 }
 
-  .hover\:c_likec4\.panel\.action:is(:hover, [data-hover]) {
-    color: var(--colors-likec4-panel-action);
+  .hover\:bg-c_surface\.hover:is(:hover, [data-hover]) {
+    background-color: var(--colors-surface-hover);
 }
 
-  .hover\:trs-dly_0:is(:hover, [data-hover]) {
-    transition-delay: var(--durations-0);
+  .group:is(:hover, [data-hover]) .groupHover\:bg-c_likec4\.diff\.removed\/10 {
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-diff-removed) 10%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-likec4-diff-removed));
 }
 
-  .hover\:bg-c_likec4\.compare\.manual\/20:is(:hover, [data-hover]) {
-    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-compare-manual) 20%, transparent);
-    background-color: var(--mix-backgroundColor, var(--colors-likec4-compare-manual));
+  .group:is(:hover, [data-hover]) .groupHover\:bg-c_likec4\.diff\.added\/15 {
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-diff-added) 15%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-likec4-diff-added));
 }
 
-  .group:is(:hover, [data-hover]) .groupHover\:c_text\.bright {
-    color: var(--colors-text-bright);
+  .group:is(:hover, [data-hover]) .groupHover\:bg-c_likec4\.diff\.modified\/15 {
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-diff-modified) 15%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-likec4-diff-modified));
 }
 
   .hover\:bg-c_surface\.field\.hover:is(:hover, [data-hover]) {
@@ -18107,8 +18142,8 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     color: var(--colors-text);
 }
 
-  .hover\:c_primary\.body:is(:hover, [data-hover]) {
-    color: var(--colors-primary-body);
+  .hover\:c_text\.link:is(:hover, [data-hover]) {
+    color: var(--colors-text-link);
 }
 
   .hover\:c_text\.default:is(:hover, [data-hover]) {
@@ -18124,7 +18159,7 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     cursor: var(--cursor-pointer);
 }
 
-  .\[\&\:is\(\:hover\,_\[data-selected\=true\]\)_\>_\*\]\:bg-c_surface\.hover:is(:hover, [data-selected=true]) > *,.hover\:bg-c_surface\.hover:is(:hover, [data-hover]) {
+  .\[\&\:is\(\:hover\,_\[data-selected\=true\]\)_\>_\*\]\:bg-c_surface\.hover:is(:hover, [data-selected=true]) > * {
     background-color: var(--colors-surface-hover);
 }
 
@@ -18144,19 +18179,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     color: var(--colors-likec4-accent-1);
 }
 
-  .hover\:fill_primary\.body\.hover:is(:hover, [data-hover]) {
-    fill: var(--colors-primary-body-hover);
-}
-
-  .hover\:r_\[10\]:is(:hover, [data-hover]) {
-    r: 10;
-}
-
-  .hover\:trs-dur_fastest:is(:hover, [data-hover]) {
-    --transition-duration: var(--durations-fastest);
-    transition-duration: var(--durations-fastest);
-}
-
   .hover\:filter_\[none\]:is(:hover, [data-hover]) {
     filter: none;
 }
@@ -18185,10 +18207,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     cursor: var(--cursor-grabbing) !important;
 }
 
-  .group:is(:active, [data-active]) .groupActive\:cursor_grabbing {
-    cursor: var(--cursor-grabbing);
-}
-
   .likec4-root:is([data-likec4-reduced-graphics]) .reduceGraphics\:\[\&_\.action-icon\]\:--ai-radius_0px .action-icon {
     --ai-radius: 0px;
 }
@@ -18209,6 +18227,14 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     background: var(--colors-mantine-gray\[3\]);
 }
 
+  .\[\&_\:where\(\[data-likec4-ref-state\=\"link\"\]\)\]\:focusVisible\:ring_\[2px_solid_var\(--mantine-primary-color-filled\)\] :where([data-likec4-ref-state="link"]):is(:focus-visible, [data-focus-visible]) {
+    outline: 2px solid var(--mantine-primary-color-filled);
+}
+
+  .\[\&_\:where\(\[data-likec4-ref-state\=\"link\"\]\)\]\:focusVisible\:bdr_xs :where([data-likec4-ref-state="link"]):is(:focus-visible, [data-focus-visible]) {
+    border-radius: var(--radii-xs);
+}
+
   [data-mantine-color-scheme="light"] .light\:hover\:bd-c_likec4\.accent\.6:is(:hover, [data-hover]) {
     border-color: var(--colors-likec4-accent-6);
 }
@@ -18229,6 +18255,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     color: var(--colors-inherit) !important;
 }
 
+  .\[\&_\:where\(\[data-likec4-ref-state\=\"link\"\]\)\]\:focusVisible\:ring-o_\[1px\] :where([data-likec4-ref-state="link"]):is(:focus-visible, [data-focus-visible]) {
+    outline-offset: 1px;
+}
+
   .selected\:hover\:bg-c_primary\.body\.hover:is([aria-selected=true], [data-selected]):is(:hover, [data-hover]) {
     background-color: var(--colors-primary-body-hover);
 }
@@ -18245,6 +18275,10 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     color: var(--colors-white);
 }
 
+  .\[\&\[data-separator\=\"active\"\]\]\:before\:bg-c_primary\.border[data-separator="active"]::before {
+    background-color: var(--colors-primary-border);
+}
+
   [data-mantine-color-scheme="light"] .\[\&\[data-missing\]\]\:light\:c_mantine\.orange\[8\][data-missing] {
     color: var(--colors-mantine-orange\[8\]);
 }
@@ -18269,11 +18303,23 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     padding-right: var(--spacing-1);
 }
 
+  .\[\&\[data-separator\=\"active\"\]\]\:before\:left_\[7px\][data-separator="active"]::before {
+    left: 7px;
+}
+
+  .\[\&\[data-separator\=\"active\"\]\]\:before\:w_\[2px\][data-separator="active"]::before {
+    width: 2px;
+}
+
   [data-mantine-color-scheme="dark"] .focusWithin\:dark\:bg_mantine\.dark\[5\]\/55\!:focus-within {
     --mix-background: color-mix(in srgb, var(--colors-mantine-dark\[5\]) 55%, transparent) !important;
     background: var(--mix-background, var(--colors-mantine-dark\[5\])) !important;
 }
 
+  .\[\&\:is\(\[data-separator\=\"hover\"\]\,_\:focus-visible\)\]\:before\:bg-c_border\.default:is([data-separator="hover"], :focus-visible)::before {
+    background-color: var(--colors-border-default);
+}
+
   [data-mantine-color-scheme="light"] .group:is(:focus, [data-focus]) .groupFocus\:light\:c_white,[data-mantine-color-scheme="light"] .mantine-Tree-node:focus > .mantine-Tree-label .\[\.mantine-Tree-node\:focus_\>_\.mantine-Tree-label_\&\]\:light\:c_white {
     color: var(--colors-white);
 }
@@ -18300,14 +18346,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     background-color: var(--mix-backgroundColor, var(--colors-mantine-dark\[5\]));
 }
 
-  [data-mantine-color-scheme="dark"] .hover\:dark\:bg-c_mantine\.dark\[7\]:is(:hover, [data-hover]) {
-    background-color: var(--colors-mantine-dark\[7\]);
-}
-
-  [data-mantine-color-scheme="dark"] .hover\:dark\:c_primary\.body\.hover:is(:hover, [data-hover]) {
-    color: var(--colors-primary-body-hover);
-}
-
   [data-mantine-color-scheme="light"] .group:is(:hover, [data-hover]) .groupHover\:light\:c_white {
     color: var(--colors-white);
 }
@@ -18323,9 +18361,6 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
 }
 
   @media screen and (min-width: 36rem) {
-    .xs\:max-w_100cqw {
-      max-width: var(--sizes-100cqw);
-}
     .xs\:max-w_\[calc\(100cqw_-_50px\)\] {
       max-width: calc(100cqw - 50px);
 }
@@ -18347,20 +18382,8 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
 }
 
   @container  (min-width: 40rem) {
-    .\@\/sm\:m_xs {
-      margin: var(--spacing-xs);
-}
-    .\@\/sm\:gap_xs {
-      gap: var(--spacing-xs);
-}
-    .\@\/sm\:w_max-content {
-      width: var(--sizes-max-content);
-}
-    .\@\/sm\:max-w_\[calc\(100vw_-_2_\*_\{spacing\.md\}\)\] {
-      max-width: calc(100vw - 2 * var(--spacing-md));
-}
-    .\@\/sm\:max-w_\[180px\] {
-      max-width: 180px;
+    .\@\/sm\:max-w_\[250px\] {
+      max-width: 250px;
 }
     .\@\/sm\:min-w_\[400px\] {
       min-width: 400px;
@@ -18368,22 +18391,11 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     .\@\/sm\:max-w_\[550px\] {
       max-width: 550px;
 }
-}
-
-  @container  (min-width: 40rem) {
-    @media screen and (min-width: 36rem) {
-      .\@\/sm\:xs\:max-w_\[calc\(100cqw_-_2_\*_\{spacing\.md\}\)\] {
-        max-width: calc(100cqw - 2 * var(--spacing-md));
-}
-}
 }
 
   @container  (min-width: 48rem) {
     .\@\/md\:d_block {
       display: block;
-}
-    .\@\/md\:d_none {
-      display: none;
 }
     .\@\/md\:d_flex {
       display: flex;
@@ -18397,11 +18409,8 @@ drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
     .\@\/md\:min-w_\[200px\] {
       min-width: 200px;
 }
-    .\@\/md\:max-w_\[250px\] {
-      max-width: 250px;
-}
-    .\@\/md\:w_\[64px\] {
-      width: 64px;
+    .\@\/md\:max-w_\[300px\] {
+      max-width: 300px;
 }
 }