@likec4/styles 1.36.1 → 1.38.0

package/dist/styles.css

@@ -99,34 +99,39 @@
     --likec4-palette-relation-stroke: #3b82f6;
     --likec4-palette-relation-label: #60a5fa;
     --likec4-palette-relation-label-bg: #172554;
+    --likec4-palette-outline: var(--likec4-palette-loContrast);
 }
 
   @property --likec4-text-size {
     syntax: '<length> | <percentage>';
 
     inherits: false;
-    
+
+    initial-value: initial;
   }
 
   @property --likec4-spacing {
     syntax: '<length> | <percentage>';
 
     inherits: false;
-    
+
+    initial-value: initial;
   }
 
   @property --text-fz {
     syntax: '<length> | <percentage>';
 
     inherits: false;
-    
+
+    initial-value: initial;
   }
 
   @property --likec4-icon-size {
     syntax: '<length> | <percentage>';
 
     inherits: false;
-    
+
+    initial-value: initial;
   }
 }
 
@@ -357,11 +362,11 @@
     --durations-slower: 400ms;
     --durations-slowest: 500ms;
     --shadows-none: none;
-    --shadows-xs: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
-    --shadows-sm: 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px;
-    --shadows-md: 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px;
-    --shadows-lg: 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px;
-    --shadows-xl: 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px;
+    --shadows-xs: 0 1px 3px rgb(0 0 0/5%), 0 1px 2px rgb(0 0 0/10%);
+    --shadows-sm: 0 1px 3px rgb(0 0 0/5%), 0 10px 15px -5px rgb(0 0 0/5%), 0 7px 7px -5px rgb(0 0 0/4%);
+    --shadows-md: 0 1px 3px rgb(0 0 0/5%), 0 20px 25px -5px rgb(0 0 0/5%), 0 10px 10px -5px rgb(0 0 0/4%);
+    --shadows-lg: 0 1px 3px rgb(0 0 0/5%), 0 28px 23px -7px rgb(0 0 0/5%), 0 12px 12px -7px rgb(0 0 0/4%);
+    --shadows-xl: 0 1px 3px rgb(0 0 0/5%), 0 36px 28px -7px rgb(0 0 0/5%), 0 17px 17px -7px rgb(0 0 0/4%);
     --breakpoints-xs: 36em;
     --breakpoints-sm: 48em;
     --breakpoints-md: 62em;
@@ -3286,6 +3291,16 @@
     --colors-likec4-panel-border: color-mix(in srgb, var(--colors-mantine-colors-default-border) 30%, transparent)
 }
 
+  @keyframes indicatorOpacity {
+    0% {
+      opacity: 0.9;
+}
+
+    100% {
+      opacity: 0.6;
+}
+}
+
   @keyframes indicatorStrokeOpacity {
     0% {
       stroke-opacity: 0.8;
@@ -3325,19 +3340,29 @@
 
     .likec4-markdown-block {
       --text-fz: 1rem;
-      --typography-spacing: calc(0.75 * var(--text-fz) * var(--mantine-scale, 1));
       --text-fz-sm: calc(var(--text-fz) * var(--mantine-scale, 1) / 1.125);
       --text-fz-md: calc(var(--text-fz) * var(--mantine-scale, 1));
+      --typography-spacing: calc(0.75 * var(--text-fz-md));
       --text-fw-headings: 600;
-      pointer-events: all;
       font-size: var(--text-fz-md);
-      padding-bottom: calc(.5 * var(--typography-spacing) + 1px);
+      line-height: var(--mantine-line-height);
+}
+
+    [data-mantine-color-scheme="light"] .likec4-markdown-block {
+      --code-background: var(--mantine-color-gray-2);
+      --code-color: var(--mantine-color-black);
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-markdown-block {
+      --code-background: var(--mantine-color-dark-8);
+      --code-color: var(--mantine-color-white);
 }
 
     .likec4-markdown-block :where(hr) {
-      margin: var(--typography-spacing);
       border: var(--borders-none);
       border-bottom: 1px solid;
+      margin-top: calc(var(--typography-spacing) / 2);
+      margin-bottom: calc(var(--typography-spacing) / 2);
 }
 
     [data-mantine-color-scheme="light"] .likec4-markdown-block :where(hr) {
@@ -3349,49 +3374,36 @@
 }
 
     .likec4-markdown-block :where(pre) {
-      padding: var(--mantine-spacing-xs);
       margin: var(--spacing-0);
-      border-radius: var(--mantine-radius-xs);
-      line-height: var(--mantine-line-height);
+      padding-inline: var(--spacing-3);
+      padding-block: var(--spacing-2);
+      border-radius: var(--radii-sm);
+      line-height: var(--mantine-line-height-xs);
       font-family: var(--mantine-font-family-monospace);
       font-size: var(--text-fz-sm);
-      margin-top: var(--mantine-spacing-md);
-      margin-bottom: var(--mantine-spacing-md);
+      background-color: var(--code-background);
+      color: var(--code-color);
+      margin-top: var(--typography-spacing);
+      margin-bottom: var(--typography-spacing);
       overflow-x: auto;
 }
 
-    .likec4-markdown-block :where(pre) :where(code) {
-      padding: var(--spacing-0);
-      border: 0;
-      border-radius: var(--radii-0);
-      background-color: var(--colors-transparent);
-      color: inherit;
-}
-
-    [data-mantine-color-scheme="light"] .likec4-markdown-block :where(pre) {
-      background-color: var(--colors-mantine-colors-gray\[0\]);
-}
-
-    [data-mantine-color-scheme="dark"] .likec4-markdown-block :where(pre) {
-      background-color: var(--colors-mantine-colors-dark\[8\]);
-}
-
     .likec4-markdown-block :where(code) {
       padding: 1px 4px;
-      border-radius: 2px;
+      border-radius: var(--radii-xs);
       line-height: var(--line-heights-1);
       font-family: var(--mantine-font-family-monospace);
       font-size: var(--text-fz-sm);
+      background-color: var(--code-background);
+      color: var(--code-color);
 }
 
-    [data-mantine-color-scheme="light"] .likec4-markdown-block :where(code) {
-      background-color: var(--colors-mantine-colors-gray\[0\]);
-      color: mantine.colors.black;
-}
-
-    [data-mantine-color-scheme="dark"] .likec4-markdown-block :where(code) {
-      background-color: var(--colors-mantine-colors-dark\[5\]);
-      color: var(--colors-mantine-colors-white);
+    .likec4-markdown-block :where(pre code) {
+      padding: var(--spacing-0);
+      border: 0;
+      border-radius: var(--radii-0);
+      background-color: var(--colors-transparent);
+      color: inherit;
 }
 
     .likec4-markdown-block :where(blockquote) {
@@ -3399,15 +3411,14 @@
       padding: var(--spacing-xs);
       border-radius: var(--mantine-radius-sm);
       font-size: var(--text-fz-md);
-      line-height: var(--mantine-line-height);
 }
 
     [data-mantine-color-scheme="light"] .likec4-markdown-block :where(blockquote) {
-      background-color: var(--colors-mantine-colors-gray\[1\]);
+      background-color: var(--mantine-color-gray-1);
 }
 
     [data-mantine-color-scheme="dark"] .likec4-markdown-block :where(blockquote) {
-      background-color: var(--colors-mantine-colors-dark\[5\]);
+      background-color: var(--mantine-color-dark-5);
 }
 
     .likec4-markdown-block :where(blockquote):not(:first-child) {
@@ -3433,38 +3444,37 @@
 }
 
     .likec4-markdown-block :is(h1) {
-      font-size: calc(1.476 * var(--text-fz) * var(--mantine-scale, 1));
+      font-size: calc(1.476 * var(--text-fz-md));
       font-weight: var(--text-fw-headings);
 }
 
     .likec4-markdown-block :is(h2) {
-      font-size: calc(1.383 * var(--text-fz) * var(--mantine-scale, 1));
+      font-size: calc(1.383 * var(--text-fz-md));
       font-weight: var(--text-fw-headings);
 }
 
     .likec4-markdown-block :is(h3) {
-      font-size: calc(1.296 * var(--text-fz) * var(--mantine-scale, 1));
+      font-size: calc(1.296 * var(--text-fz-md));
       font-weight: var(--text-fw-headings);
 }
 
     .likec4-markdown-block :is(h4) {
-      font-size: calc(1.215 * var(--text-fz) * var(--mantine-scale, 1));
+      font-size: calc(1.215 * var(--text-fz-md));
       font-weight: var(--text-fw-headings);
 }
 
     .likec4-markdown-block :is(h5) {
-      font-size: calc(1.138 * var(--text-fz) * var(--mantine-scale, 1));
+      font-size: calc(1.138 * var(--text-fz-md));
       font-weight: var(--text-fw-headings);
 }
 
     .likec4-markdown-block :is(h6) {
-      font-size: calc(1.067 * var(--text-fz) * var(--mantine-scale, 1));
+      font-size: calc(1.067 * var(--text-fz-md));
       font-weight: var(--text-fw-headings);
 }
 
     .likec4-markdown-block :where(p) {
       font-size: var(--text-fz-md);
-      white-space: preserve-breaks;
       margin-top: var(--spacing-0);
       margin-bottom: var(--typography-spacing);
 }
@@ -3497,7 +3507,7 @@
       border-collapse: collapse;
       caption-side: bottom;
       width: 100%;
-      margin-bottom: var(--mantine-spacing-md);
+      margin-bottom: var(--typography-spacing);
 }
 
     [data-mantine-color-scheme="light"] .likec4-markdown-block :where(table) {
@@ -3509,14 +3519,14 @@
 }
 
     .likec4-markdown-block :where(table) :where(th) {
-      padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
+      padding: var(--typography-spacing);
       text-align: left;
       font-weight: bold;
       font-size: var(--text-fz-sm);
 }
 
     .likec4-markdown-block :where(table) :where(td) {
-      padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
+      padding: var(--typography-spacing);
       border-bottom: 1px solid;
       border-color: var(--table-border-color);
       font-size: var(--text-fz-sm);
@@ -3539,7 +3549,7 @@
     .likec4-markdown-block :where(table) :where(caption) {
       font-size: var(--text-fz-sm);
       color: var(--mantine-color-dimmed);
-      margin-top: var(--mantine-spacing-xs);
+      margin-top: calc(.5 * var(--typography-spacing) + 1px);
 }
 
     .likec4-markdown-block :first-child {
@@ -3574,17 +3584,17 @@
       opacity: 0.75;
 }
 
-    :where([data-likec4-hovered="true"]) .action-btn {
+    :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .action-btn {
       --ai-bg: var(--actionbtn-bg-hovered);
       opacity: 1;
       color: var(--actionbtn-color-hovered);
 }
 
-    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .action-btn {
+    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .action-btn {
       display: none;
 }
 
-    :where([data-likec4-zoom-small]) .action-btn {
+    :where([data-likec4-zoom-small="true"]) .action-btn {
       display: none;
 }
 
@@ -3598,6 +3608,177 @@
       color: var(--actionbtn-color-hovered-btn);
 }
 
+    .likec4-compound-node {
+      --_border-width: 3px;
+      --_border-radius: 6px;
+      --_compound-transparency: 100%;
+      --_border-transparency: 100%;
+      --_indicator-spacing: calc(var(--_border-width) + 2px);
+      --_compound-color: var(--likec4-palette-loContrast);
+      padding: var(--spacing-0);
+      margin: var(--spacing-0);
+      border-style: solid;
+      border-width: var(--_border-width);
+      border-radius: var(--_border-radius);
+      position: relative;
+      pointer-events: none;
+      background-clip: padding-box;
+      -webkit-background-clip: padding-box;
+      box-sizing: border-box;
+      color: var(--_compound-color);
+      width: 100%;
+      height: 100%;
+}
+
+    [data-mantine-color-scheme="light"] .likec4-compound-node {
+      --likec4-palette-outline: color-mix(in srgb, var(--likec4-palette-stroke) 80%, var(--likec4-palette-hiContrast));
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-compound-node {
+      --likec4-palette-outline: color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast));
+}
+
+    .likec4-compound-node::after {
+      border-style: solid;
+      border-width: calc(var(--_border-width) + 1px);
+      border-radius: calc(var(--_border-radius) + 4px);
+      border-color: var(--likec4-palette-outline);
+      position: absolute;
+      content: " ";
+      pointer-events: none;
+      display: none;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-direction: alternate;
+      animation-name: indicatorOpacity;
+      animation-play-state: paused;
+      top: calc(-1 * var(--_indicator-spacing));
+      left: calc(-1 * var(--_indicator-spacing));
+      width: calc(100% + 2 * var(--_indicator-spacing));
+      height: calc(100% + 2 * var(--_indicator-spacing));
+}
+
+    :where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) .likec4-compound-node::after {
+      display: block;
+      animation-play-state: running;
+}
+
+    :where(.react-flow__node.selected, .react-flow__edge.selected) .likec4-compound-node::after {
+      display: block;
+      animation-play-state: running;
+}
+
+    .likec4-root:is([data-likec4-diagram-panning="true"]) .likec4-compound-node::after {
+      animation-play-state: paused;
+}
+
+    .likec4-compound-node:has(.likec4-compound-navigation) .likec4-compound-title-container {
+      padding-left: 24px;
+}
+
+    .likec4-compound-node .action-btn {
+      --actionbtn-color: var(--_compound-color);
+      --actionbtn-color-hovered: var(--_compound-color);
+      --actionbtn-color-hovered-btn: color-mix(in srgb, var(--_compound-color) 80%, #fff);
+      opacity: 0.6;
+}
+
+    .likec4-root:not([data-likec4-reduced-graphics]) .likec4-compound-node .action-btn {
+      transition: all var(--durations-fast) var(--easings-in-out);
+}
+
+    :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .likec4-compound-node .action-btn {
+      opacity: 0.75;
+}
+
+    :where(.react-flow__node.selected, .react-flow__edge.selected) .likec4-compound-node .action-btn {
+      opacity: 0.75;
+}
+
+    .likec4-compound-node .action-btn:is(:hover, [data-hover]) {
+      opacity: 1;
+}
+
+    .likec4-compound-node .likec4-compound-title-container {
+      gap: var(--spacing-1\.5);
+      position: absolute;
+      display: flex;
+      align-items: center;
+      left: var(--spacing-2\.5);
+      top: var(--spacing-0\.5);
+      right: 30px;
+      width: auto;
+      min-height: 30px;
+}
+
+    :where(.react-flow__node.draggable) .likec4-compound-node .likec4-compound-title-container {
+      pointer-events: all;
+      cursor: grab;
+}
+
+    .likec4-compound-node .likec4-compound-title {
+      flex: 1 1 0%;
+      font-family: var(--fonts-likec4-compound);
+      font-weight: 600;
+      font-size: 15px;
+      text-transform: uppercase;
+      letter-spacing: 0.25px;
+      line-height: var(--line-heights-1);
+      color: var(--_compound-color);
+}
+
+    .likec4-compound-node .likec4-compound-icon {
+      flex: 0 0 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      mix-blend-mode: hard-light;
+      height: 20px;
+      width: 20px;
+}
+
+    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .likec4-compound-node .likec4-compound-icon {
+      mix-blend-mode: normal;
+}
+
+    .likec4-compound-node .likec4-compound-icon svg,.likec4-compound-node .likec4-compound-icon img {
+      pointer-events: none;
+      filter: drop-shadow(0 0 3px rgb(0 0 0 / 12%))
+drop-shadow(0 1px 8px rgb(0 0 0 / 8%))
+drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
+      width: 100%;
+      height: auto;
+      max-height: 100%;
+}
+
+    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .likec4-compound-node .likec4-compound-icon svg,.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .likec4-compound-node .likec4-compound-icon img {
+      filter: none;
+}
+
+    .likec4-compound-node .likec4-compound-icon img {
+      object-fit: contain;
+}
+
+    .likec4-compound-node .likec4-compound-navigation {
+      position: absolute;
+      top: var(--spacing-1);
+      left: var(--spacing-0\.5);
+}
+
+    :where([data-likec4-zoom-small="true"]) .likec4-compound-node .likec4-compound-navigation {
+      display: none;
+}
+
+    .likec4-compound-node .likec4-compound-details {
+      position: absolute;
+      top: var(--spacing-0\.5);
+      right: var(--spacing-0\.5);
+}
+
+    :where([data-likec4-zoom-small="true"]) .likec4-compound-node .likec4-compound-details {
+      display: none;
+}
+
     .likec4-edge-action-btn {
       --ai-bg: transparent;
       --ai-hover: color-mix(in srgb , var(--xy-edge-label-background-color), var(--colors-likec4-mix-color) 10%);
@@ -3611,7 +3792,7 @@
       translate: var(--translate-x) var(--translate-y);
 }
 
-    :where([data-likec4-hovered="true"]) .likec4-edge-action-btn {
+    :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .likec4-edge-action-btn {
       --ai-bg: var(--xy-edge-label-background-color);
       opacity: 1;
 }
@@ -3632,6 +3813,53 @@
       scale: 0.9;
 }
 
+    .likec4-element-shape {
+      overflow: visible;
+      position: absolute;
+      pointer-events: none;
+      top: var(--spacing-0);
+      left: var(--spacing-0);
+      width: 100%;
+      height: 100%;
+}
+
+    [data-mantine-color-scheme="light"] .likec4-element-shape {
+      --likec4-palette-outline: color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast));
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-element-shape {
+      --likec4-palette-outline: color-mix(in srgb, var(--likec4-palette-stroke) 30%, var(--likec4-palette-loContrast));
+}
+
+    .likec4-element-shape .likec4-shape-outline {
+      visibility: hidden;
+      animation-play-state: paused;
+      pointer-events: none;
+}
+
+    :where([data-likec4-zoom-small="true"]) .likec4-element-shape .likec4-shape-outline {
+      visibility: hidden;
+}
+
+    :where(.react-flow__node.selected, .react-flow__edge.selected) .likec4-element-shape .likec4-shape-outline {
+      visibility: visible;
+      animation-play-state: running;
+}
+
+    :where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) .likec4-element-shape .likec4-shape-outline {
+      visibility: visible;
+      animation-play-state: running;
+}
+
+    .group:is(:focus-visible, [data-focus-visible]) .likec4-element-shape .likec4-shape-outline {
+      visibility: visible;
+      animation-play-state: running;
+}
+
+    .likec4-root:is([data-likec4-diagram-panning="true"]) .likec4-element-shape .likec4-shape-outline {
+      animation-play-state: paused;
+}
+
     .likec4-tag {
       transition: all var(--durations-fast) var(--easings-in-out);
       gap: 1px;
@@ -3672,7 +3900,7 @@
       width: var(--likec4-icon-size);
 }
 
-    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .likec4-element-node-icon {
+    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .likec4-element-node-icon {
       mix-blend-mode: normal;
 }
 
@@ -3684,7 +3912,7 @@
       max-height: 100%;
 }
 
-    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .likec4-element-node-icon svg,.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .likec4-element-node-icon img {
+    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .likec4-element-node-icon svg,.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .likec4-element-node-icon img {
       filter: none;
 }
 
@@ -3722,21 +3950,20 @@
 }
 
   .likec4-markdown-block--uselikec4palette_true {
-    --typography-spacing: calc(0.25rem * var(--mantine-scale, 1));
+    --code-background: color-mix(in srgb , var(--likec4-palette-stroke) 70%, transparent);
+    --code-color: var(--likec4-palette-loContrast);
+    --typography-spacing: calc(0.5 * var(--text-fz-md));
 }
 
   .likec4-markdown-block--uselikec4palette_true :where(blockquote) {
-    padding: 2xs;
+    padding: var(--spacing-xxs);
     --mix-backgroundColor: color-mix(in srgb, var(--likec4-palette-stroke) 65%, transparent);
     background-color: var(--mix-backgroundColor, var(--likec4-palette-stroke));
 }
 
-  .likec4-markdown-block--uselikec4palette_true :where(code) {
+  .likec4-markdown-block--uselikec4palette_true :where(hr) {
     --mix-borderColor: color-mix(in srgb, var(--likec4-palette-stroke) 85%, transparent);
     border-color: var(--mix-borderColor, var(--likec4-palette-stroke));
-    color: var(--likec4-palette-loContrast);
-    --mix-backgroundColor: color-mix(in srgb, var(--likec4-palette-stroke) 70%, transparent);
-    background-color: var(--mix-backgroundColor, var(--likec4-palette-stroke));
 }
 
   .likec4-markdown-block--uselikec4palette_true :where(a) {
@@ -3757,11 +3984,15 @@
     --ai-radius: var(--mantine-radius-md);
 }
 
+  .action-btn--variant_transparent {
+    --actionbtn-bg-hovered: var(--actionbtn-bg-idle);
+}
+
   .action-btn--variant_filled {
     box-shadow: 1px 1px 3px 0px transparent;
 }
 
-  :where([data-likec4-hovered="true"]) .action-btn--variant_filled {
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .action-btn--variant_filled {
     box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
 }
 
@@ -3769,124 +4000,350 @@
     box-shadow: var(--shadows-none);
 }
 
-  .action-btn--variant_transparent {
-    --actionbtn-bg-hovered: var(--actionbtn-bg-idle);
+  .likec4-compound-node--borderStyle_dashed {
+    border-style: dashed;
 }
 
-  .likec4-tag--autoTextColor_false > span {
-    color: var(--colors-likec4-tag-text);
+  .likec4-compound-node--borderStyle_none {
+    --_indicator-spacing: calc(var(--_border-width) * 2);
+    border-color: var(--colors-transparent) !important;
+    background-clip: border-box !important;
+    -webkit-background-clip: border-box !important;
 }
 
-  .likec4-tag--autoTextColor_false > span:first-child {
-    opacity: 0.65;
+  .likec4-compound-node--isTransparent_false {
+    border-color: var(--likec4-palette-stroke);
+    background-color: var(--likec4-palette-fill);
 }
 
-  .likec4-tag--autoTextColor_true > span {
-    background: inherit;
-    color: var(--colors-transparent);
-    filter: invert(1) grayscale(1) brightness(1.3) contrast(1000);
-    background-clip: text;
-    -webkit-background-clip: text;
-    mix-blend-mode: plus-lighter;
+  .likec4-root:not([data-likec4-reduced-graphics]) .likec4-compound-node--isTransparent_false {
+    box-shadow: 0 4px 10px 0.5px rgb(0 0 0/10%) , 0 2px 2px -1px rgb(0 0 0/40%);
 }
 
-  .hover\:likec4-tag--autoTextColor_true:is(:hover, [data-hover]) > span {
-    background: inherit;
-    color: var(--colors-transparent);
-    filter: invert(1) grayscale(1) brightness(1.3) contrast(1000);
-    background-clip: text;
-    -webkit-background-clip: text;
-    mix-blend-mode: plus-lighter;
+  :where(.react-flow__node.selected, .react-flow__edge.selected) .likec4-compound-node--isTransparent_false {
+    box-shadow: var(--shadows-none);
 }
 
-  .hover\:likec4-tag--autoTextColor_false:is(:hover, [data-hover]) > span {
-    color: var(--colors-likec4-tag-text);
+  .likec4-root:is([data-likec4-diagram-panning="true"]) .likec4-compound-node--isTransparent_false {
+    box-shadow: var(--shadows-none) !important;
 }
 
-  .hover\:likec4-tag--autoTextColor_false:is(:hover, [data-hover]) > span:first-child {
-    opacity: 0.65;
-}
+  .likec4-compound-node--isTransparent_true {
+    border-color: color-mix(in srgb, var(--likec4-palette-stroke) var(--_border-transparency), transparent);
+    background-color: color-mix(in srgb, var(--likec4-palette-fill) var(--_compound-transparency), transparent);
 }
 
-@layer recipes.slots{
-  @layer _base{
-
-    .likec4-navlink__root {
-      border-radius: var(--radii-sm);
-      padding-inline: var(--spacing-xs);
-      padding-block: var(--spacing-xxs);
+  .likec4-compound-node--inverseColor_true {
+    --_compound-color: var(--likec4-palette-stroke);
 }
 
-    .likec4-navlink__root:is(:hover, [data-hover]):not([data-active]) {
-      background-color: var(--colors-mantine-colors-gray\[1\]);
+  [data-mantine-color-scheme="dark"] .likec4-compound-node--inverseColor_true {
+    --_compound-color: color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill));
 }
 
-    [data-mantine-color-scheme="dark"] .likec4-navlink__root:is(:hover, [data-hover]):not([data-active]) {
-      background-color: var(--colors-mantine-colors-dark\[5\]);
+  [data-mantine-color-scheme="dark"] .likec4-compound-node--inverseColor_true .action-btn {
+    --actionbtn-color-hovered-btn: var(--likec4-palette-loContrast);
 }
 
-    .likec4-navlink__body {
-      gap: var(--spacing-0\.5);
-      display: flex;
-      flex-direction: column;
+  [data-mantine-color-scheme="light"] .likec4-compound-node--inverseColor_true .action-btn {
+    --actionbtn-color: var(--likec4-palette-stroke);
+    --actionbtn-color-hovered: var(--likec4-palette-stroke);
+    --actionbtn-color-hovered-btn: var(--likec4-palette-hiContrast);
+    --actionbtn-bg-hovered: var(--likec4-palette-fill)/50;
+    --actionbtn-bg-hovered-btn: var(--likec4-palette-fill);
 }
 
-    .likec4-navlink__section:where([data-position="left"]) {
-      margin-inline-end: var(--spacing-xxs);
+  .likec4-compound-node--borderStyle_solid {
+    border-style: solid;
 }
 
-    .likec4-navlink__label {
-      display: block;
-      font-size: var(--font-sizes-sm);
-      font-weight: 500;
-      line-height: 1.2;
+  .likec4-compound-node--borderStyle_dotted {
+    border-style: dotted;
 }
 
-    .likec4-navlink__description {
-      display: block;
-      font-size: var(--font-sizes-xxs);
-      line-height: 1.2;
+  .likec4-element-shape--shapetype_html {
+    --likec4-outline-size: 4px;
+    border-radius: 6px;
+    transition: background-color 120ms linear, box-shadow 130ms var(--easings-in-out);
+    background-color: var(--likec4-palette-fill);
+    box-shadow: 0 2px 1px 0 rgb(0 0 0 / 21%),0 1px 1px 0 color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent),0 5px 3px 0 rgb(0 0 0 / 10%);
+    transition-delay: 0ms;
 }
 
-    .likec4-edge-label__root {
-      padding-block: var(--spacing-1);
-      padding-inline: var(--spacing-1\.5);
-      gap: var(--spacing-0\.5);
-      pointer-events: all;
-      font-family: var(--fonts-likec4-relation);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      line-height: 1.2;
-      color: var(--xy-edge-label-color);
-      width: max-content;
-      max-width: 100%;
+  .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .likec4-element-shape--shapetype_html {
+    transition: none;
 }
 
-    .likec4-edge-label__stepNumber {
-      padding: var(--spacing-1);
-      background: color-mix(in srgb, var(--likec4-palette-relation-label-bg), var(--colors-likec4-mix-color) 10%);
-      flex: 0 0 auto;
-      align-self: stretch;
-      font-weight: 600;
-      font-size: 14px;
-      text-align: center;
-      font-variant-numeric: tabular-nums;
-      min-width: 22px;
-      border-top-left-radius: 4px;
-      border-bottom-left-radius: 4px;
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .likec4-element-shape--shapetype_html {
+    box-shadow: 0 2px 1px 0 rgb(0 0 0 / 25%),0 8px 3px 0 rgb(0 0 0 / 10%),0 10px 10px 0 rgb(0 0 0 / 8%);
 }
 
-    [data-mantine-color-scheme="dark"] :where([data-likec4-color="gray"]) .likec4-edge-label__stepNumber {
-      background: color-mix(in srgb, var(--likec4-palette-relation-label-bg), var(--colors-likec4-mix-color) 15%);
+  :where(.react-flow__node.selected, .react-flow__edge.selected) .likec4-element-shape--shapetype_html {
+    box-shadow: var(--shadows-none);
 }
 
-    .likec4-edge-label__labelContents {
-      display: contents;
+  :where([data-likec4-zoom-small="true"]) .likec4-element-shape--shapetype_html {
+    box-shadow: var(--shadows-none);
 }
 
-    .likec4-edge-label__labelContents:is(:empty, [data-empty]) {
-      display: none !important;
+  .likec4-root:is([data-likec4-diagram-panning="true"]) .likec4-element-shape--shapetype_html {
+    box-shadow: var(--shadows-none);
+}
+
+  .likec4-element-shape--shapetype_html .likec4-shape-multiple {
+    border-radius: 6px;
+    position: absolute;
+    content: " ";
+    background-color: var(--likec4-palette-fill);
+    z-index: -1;
+    filter: brightness(0.65);
+    visibility: visible;
+    top: 14px;
+    left: 14px;
+    width: calc(100% - 6px);
+    height: calc(100% - 6px);
+}
+
+  :where([data-likec4-zoom-small="true"]) .likec4-element-shape--shapetype_html .likec4-shape-multiple {
+    visibility: hidden;
+}
+
+  :where(.react-flow__node.selected, .react-flow__edge.selected) .likec4-element-shape--shapetype_html .likec4-shape-multiple {
+    visibility: hidden;
+}
+
+  :where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) .likec4-element-shape--shapetype_html .likec4-shape-multiple {
+    visibility: hidden;
+}
+
+  .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .likec4-element-shape--shapetype_html .likec4-shape-multiple {
+    visibility: hidden;
+}
+
+  .likec4-element-shape--shapetype_html .likec4-shape-outline {
+    border-style: solid;
+    border-width: var(--likec4-outline-size);
+    border-radius: 10px;
+    border-color: var(--likec4-palette-outline);
+    position: absolute;
+    content: " ";
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-name: indicatorOpacity;
+    top: calc(-1 * var(--likec4-outline-size));
+    left: calc(-1 * var(--likec4-outline-size));
+    width: calc(100% + 2 * var(--likec4-outline-size));
+    height: calc(100% + 2 * var(--likec4-outline-size));
+}
+
+  .likec4-element-shape--shapetype_svg {
+    transition: fill 120ms linear, filter 130ms var(--easings-in-out);
+    fill: var(--likec4-palette-fill);
+    stroke: var(--likec4-palette-stroke);
+    transition-delay: 0ms;
+    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
+drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent))
+drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1));
+}
+
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .likec4-element-shape--shapetype_svg {
+    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
+drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
+drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05));
+}
+
+  :where(.react-flow__node.selected, .react-flow__edge.selected) .likec4-element-shape--shapetype_svg {
+    filter: none;
+}
+
+  :where([data-likec4-zoom-small="true"]) .likec4-element-shape--shapetype_svg {
+    filter: none;
+}
+
+  .likec4-root:is([data-likec4-diagram-panning="true"]) .likec4-element-shape--shapetype_svg {
+    filter: none;
+}
+
+  .likec4-element-shape--shapetype_svg [data-likec4-fill="fill"] {
+    fill: var(--likec4-palette-fill);
+}
+
+  .likec4-element-shape--shapetype_svg [data-likec4-fill="stroke"] {
+    fill: var(--likec4-palette-stroke);
+}
+
+  .likec4-element-shape--shapetype_svg [data-likec4-fill="mix-stroke"] {
+    fill: color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill));
+}
+
+  .likec4-element-shape--shapetype_svg:is([data-likec4-shape-multiple="true"]) {
+    transform-origin: 50% 50%;
+    transform: translate(14px, 14px) perspective(300px) translateZ(-8px);
+    filter: brightness(0.65);
+    stroke: none;
+}
+
+  :where([data-likec4-shape='queue']) .likec4-element-shape--shapetype_svg:is([data-likec4-shape-multiple="true"]) {
+    transform-origin: 75% 25%;
+}
+
+  :where([data-likec4-shape='cylinder']) .likec4-element-shape--shapetype_svg:is([data-likec4-shape-multiple="true"]) {
+    transform-origin: 50% 100%;
+}
+
+  :where([data-likec4-shape='storage']) .likec4-element-shape--shapetype_svg:is([data-likec4-shape-multiple="true"]) {
+    transform-origin: 50% 100%;
+}
+
+  :where([data-likec4-zoom-small="true"]) .likec4-element-shape--shapetype_svg:is([data-likec4-shape-multiple="true"]) {
+    display: none;
+}
+
+  .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .likec4-element-shape--shapetype_svg:is([data-likec4-shape-multiple="true"]) {
+    display: none;
+}
+
+  :where(.react-flow__node.selected, .react-flow__edge.selected) .likec4-element-shape--shapetype_svg:is([data-likec4-shape-multiple="true"]) {
+    display: none;
+}
+
+  :where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) .likec4-element-shape--shapetype_svg:is([data-likec4-shape-multiple="true"]) {
+    display: none;
+}
+
+  .likec4-element-shape--shapetype_svg:is([data-likec4-shape-multiple="true"]) [data-likec4-fill="mix-stroke"] {
+    fill: var(--likec4-palette-fill);
+}
+
+  .likec4-element-shape--shapetype_svg .likec4-shape-outline {
+    stroke: var(--likec4-palette-outline);
+    fill: none;
+    stroke-width: 8;
+    stroke-opacity: 0.8;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-name: indicatorStrokeOpacity;
+}
+
+  .likec4-tag--autoTextColor_false > span {
+    color: var(--colors-likec4-tag-text);
+}
+
+  .likec4-tag--autoTextColor_false > span:first-child {
+    opacity: 0.65;
+}
+
+  .likec4-tag--autoTextColor_true > span {
+    background: inherit;
+    color: var(--colors-transparent);
+    filter: invert(1) grayscale(1) brightness(1.3) contrast(1000);
+    background-clip: text;
+    -webkit-background-clip: text;
+    mix-blend-mode: plus-lighter;
+}
+
+  .hover\:likec4-tag--autoTextColor_true:is(:hover, [data-hover]) > span {
+    background: inherit;
+    color: var(--colors-transparent);
+    filter: invert(1) grayscale(1) brightness(1.3) contrast(1000);
+    background-clip: text;
+    -webkit-background-clip: text;
+    mix-blend-mode: plus-lighter;
+}
+
+  .hover\:likec4-tag--autoTextColor_false:is(:hover, [data-hover]) > span {
+    color: var(--colors-likec4-tag-text);
+}
+
+  .hover\:likec4-tag--autoTextColor_false:is(:hover, [data-hover]) > span:first-child {
+    opacity: 0.65;
+}
+}
+
+@layer recipes.slots{
+  @layer _base{
+
+    .likec4-navlink__root {
+      border-radius: var(--radii-sm);
+      padding-inline: var(--spacing-xs);
+      padding-block: var(--spacing-xxs);
+}
+
+    .likec4-navlink__root:is(:hover, [data-hover]):not([data-active]) {
+      background-color: var(--colors-mantine-colors-gray\[1\]);
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-navlink__root:is(:hover, [data-hover]):not([data-active]) {
+      background-color: var(--colors-mantine-colors-dark\[5\]);
+}
+
+    .likec4-navlink__body {
+      gap: var(--spacing-0\.5);
+      display: flex;
+      flex-direction: column;
+}
+
+    .likec4-navlink__section:where([data-position="left"]) {
+      margin-inline-end: var(--spacing-xxs);
+}
+
+    .likec4-navlink__label {
+      display: block;
+      font-size: var(--font-sizes-sm);
+      font-weight: 500;
+      line-height: 1.2;
+}
+
+    .likec4-navlink__description {
+      display: block;
+      font-size: var(--font-sizes-xxs);
+      line-height: 1.2;
+}
+
+    .likec4-edge-label__root {
+      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);
+      border-radius: 4px;
+      pointer-events: all;
+      font-family: var(--fonts-likec4-relation);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      line-height: 1.2;
+      color: var(--xy-edge-label-color);
+      width: max-content;
+      max-width: 100%;
+}
+
+    .likec4-edge-label__stepNumber {
+      padding: var(--spacing-1);
+      background: color-mix(in srgb, var(--likec4-palette-relation-label-bg), var(--colors-likec4-mix-color) 10%);
+      flex: 0 0 auto;
+      align-self: stretch;
+      font-weight: 600;
+      font-size: 14px;
+      text-align: center;
+      font-variant-numeric: tabular-nums;
+      min-width: 22px;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+}
+
+    [data-mantine-color-scheme="dark"] :where([data-likec4-color="gray"]) .likec4-edge-label__stepNumber {
+      background: color-mix(in srgb, var(--likec4-palette-relation-label-bg), var(--colors-likec4-mix-color) 15%);
+}
+
+    .likec4-edge-label__labelContents {
+      display: contents;
+}
+
+    .likec4-edge-label__labelContents:is(:empty, [data-empty]) {
+      display: none !important;
 }
 
     .likec4-edge-label__labelText {
@@ -4017,10 +4474,18 @@
       display: none;
 }
 
-    :where([data-likec4-zoom-small]) .likec4-el-node-data__description {
+    :where([data-likec4-zoom-small="true"]) .likec4-el-node-data__description {
       display: none;
 }
 
+    .likec4-el-node-data__description:not(.likec4-markdown-block) {
+      white-space: preserve-breaks;
+}
+
+    .likec4-el-node-data__description a {
+      pointer-events: all;
+}
+
     .likec4-el-node-data__technology {
       flex: 0 0 auto;
       text-wrap: balance;
@@ -4035,7 +4500,7 @@
       opacity: 0.92;
 }
 
-    :where([data-likec4-hovered="true"]) .likec4-el-node-data__technology {
+    :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .likec4-el-node-data__technology {
       opacity: 1;
 }
 
@@ -4047,7 +4512,7 @@
       display: none;
 }
 
-    :where([data-likec4-zoom-small]) .likec4-el-node-data__technology {
+    :where([data-likec4-zoom-small="true"]) .likec4-el-node-data__technology {
       display: none;
 }
 }
@@ -4059,6 +4524,14 @@
     width: 100%;
 }
 
+  .likec4-edge-label__root--cursor_pointer {
+    cursor: pointer;
+}
+
+  .likec4-edge-label__root--cursor_default {
+    cursor: default;
+}
+
   .likec4-edge-label__root--isStepEdge_true {
     padding: var(--spacing-0);
     gap: var(--spacing-1);
@@ -4105,36 +4578,31 @@
       background-color: var(--colors-likec4-panel-bg);
 }
 
-    :is(.likec4-root[data-likec4-diagram-panning]) .layerStyle_likec4\.panel {
+    .likec4-root:is([data-likec4-diagram-panning="true"]) .layerStyle_likec4\.panel {
       border-radius: var(--radii-0);
-      background-color: var(--colors-likec4-panel-bg-when-panning);
       box-shadow: var(--shadows-none);
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
 }
 
+    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .layerStyle_likec4\.panel {
+      background-color: var(--colors-likec4-panel-bg-when-panning);
+}
+
     .layerStyle_likec4\.dropdown {
+      padding: var(--spacing-xxs);
       border: 1px solid var(--colors-likec4-dropdown-border);
-      padding-inline: 2xs;
-      padding-block: 2xs;
       border-radius: var(--radii-md);
       background-color: var(--colors-likec4-dropdown-bg);
       box-shadow: var(--shadows-lg);
 }
 
-    :is(.likec4-root[data-likec4-diagram-panning]) .layerStyle_likec4\.dropdown {
+    .likec4-root:is([data-likec4-diagram-panning="true"]) .layerStyle_likec4\.dropdown {
       border-radius: 0px;
       border-color: var(--colors-transparent);
       box-shadow: var(--shadows-none);
 }
 
-    .animationStyle_indicator {
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-      animation-name: indicatorStrokeOpacity;
-}
-
     .layerStyle_likec4\.tag {
       border: var(--borders-none);
       border-radius: 3px;
@@ -4146,15 +4614,7 @@
       background-color: var(--colors-likec4-tag-bg-hover);
 }
 
-    :where([data-likec4-hovered="true"]) .whenHovered\:animationStyle_xyedgeAnimated {
-      animation-duration: 800ms;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-      animation-fill-mode: both;
-      animation-name: xyedgeAnimated;
-}
-
-    :where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) .\[\:where\(\.react-flow__edge\.selected\,_\[data-edge-active\=\'true\'\]\,_\[data-edge-animated\=\'true\'\]\)_\&\]\:animationStyle_xyedgeAnimated {
+    .likec4-root:not([data-likec4-reduced-graphics]) .noReduceGraphics\:animationStyle_xyedgeAnimated {
       animation-duration: 800ms;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
@@ -4162,13 +4622,6 @@
       animation-name: xyedgeAnimated;
 }
 
-    :where(.react-flow__node.selected, .react-flow__edge.selected) .whenSelected\:animationStyle_indicator {
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-      animation-name: indicatorStrokeOpacity;
-}
-
     @container  (min-width: 40rem) {
       .layerStyle_likec4\.panel {
         padding: 2xs;
@@ -4180,18 +4633,6 @@
 }
 }
 
-  .\--xy-background-color_transparent\! {
-    --xy-background-color: transparent !important;
-}
-
-  .\--xy-background-color_\{colors\.likec4\.background\} {
-    --xy-background-color: var(--colors-likec4-background);
-}
-
-  .\--xy-background-pattern-color_\{colors\.likec4\.background\.pattern\} {
-    --xy-background-pattern-color: var(--colors-likec4-background-pattern);
-}
-
   .\--mantine-cursor-pointer_pointer {
     --mantine-cursor-pointer: pointer;
 }
@@ -4200,6 +4641,14 @@
     --thickness: 1px;
 }
 
+  .\--bleed-x_token\(spacing\.2\,_2\) {
+    --bleed-x: var(--spacing-2, 2);
+}
+
+  .\--bleed-y_token\(spacing\.2\,_2\) {
+    --bleed-y: var(--spacing-2, 2);
+}
+
   .\--view-title-color_\{colors\.mantine\.colors\.dark\[1\]\} {
     --view-title-color: var(--colors-mantine-colors-dark\[1\]);
 }
@@ -4280,10 +4729,6 @@
     background: var(--colors-transparent);
 }
 
-  .bg_transparent\! {
-    background: var(--colors-transparent) !important;
-}
-
   .p_0 {
     padding: var(--spacing-0);
 }
@@ -4312,6 +4757,19 @@
     background: var(--colors-transparent);
 }
 
+  .p_4 {
+    padding: var(--spacing-4);
+}
+
+  .p_\[2px_4px\] {
+    padding: 2px 4px;
+}
+
+  .bg_var\(--likec4-palette-fill\)\/30 {
+    --mix-background: color-mix(in srgb, var(--likec4-palette-fill) 30%, transparent);
+    background: var(--mix-background, var(--likec4-palette-fill));
+}
+
   .m_xs {
     margin: var(--spacing-xs);
 }
@@ -4447,27 +4905,6 @@
     border: 2px dashed;
 }
 
-  .bg_\[var\(--xy-edge-label-background-color\)\] {
-    background: var(--xy-edge-label-background-color);
-}
-
-  .bd_0px_solid_transparent {
-    border: 0px solid transparent;
-}
-
-  .p_4 {
-    padding: var(--spacing-4);
-}
-
-  .p_\[2px_4px\] {
-    padding: 2px 4px;
-}
-
-  .bg_var\(--likec4-palette-fill\)\/30 {
-    --mix-background: color-mix(in srgb, var(--likec4-palette-fill) 30%, transparent);
-    background: var(--mix-background, var(--likec4-palette-fill));
-}
-
   .p_sm {
     padding: var(--spacing-sm);
 }
@@ -4557,22 +4994,66 @@
     gap: 10px;
 }
 
+  .gap_3\.5 {
+    gap: var(--spacing-3\.5);
+}
+
+  .mx_calc\(var\(--bleed-x\,_0\)_\*_-1\) {
+    margin-inline: calc(var(--bleed-x, 0) * -1);
+}
+
+  .my_calc\(var\(--bleed-y\,_0\)_\*_-1\) {
+    margin-block: calc(var(--bleed-y, 0) * -1);
+}
+
+  .py_2 {
+    padding-block: var(--spacing-2);
+}
+
+  .px_2 {
+    padding-inline: var(--spacing-2);
+}
+
+  .gap_1 {
+    gap: var(--spacing-1);
+}
+
   .gap_0\.5 {
     gap: var(--spacing-0\.5);
 }
 
+  .gap_2 {
+    gap: var(--spacing-2);
+}
+
+  .py_1\.5 {
+    padding-block: var(--spacing-1\.5);
+}
+
+  .bd-l_2px_dotted {
+    border-left: 2px dotted;
+}
+
+  .bdr_\[2px\] {
+    border-radius: 2px;
+}
+
   .px_xxs {
     padding-inline: var(--spacing-xxs);
 }
 
-  .gap_2 {
-    gap: var(--spacing-2);
-}
-
   .gap_md {
     gap: var(--spacing-md);
 }
 
+  .ov_auto {
+    overflow: auto;
+}
+
+  .ovs-b_contain {
+    overscroll-behavior: contain;
+}
+
   .my_md {
     margin-block: var(--spacing-md);
 }
@@ -4733,10 +5214,6 @@
     outline: var(--borders-none) !important;
 }
 
-  .gap_1 {
-    gap: var(--spacing-1);
-}
-
   .bdr_4px {
     border-radius: 4px;
 }
@@ -4769,38 +5246,6 @@
     padding-block: var(--spacing-xl);
 }
 
-  .bdr_var\(--_border-radius\,_4px\) {
-    border-radius: var(--_border-radius, 4px);
-}
-
-  .transition_all_250ms_\{easings\.inOut\} {
-    transition: all 250ms var(--easings-in-out);
-}
-
-  .border-style_dashed {
-    border-style: dashed;
-}
-
-  .bd-w_\[var\(--_border-width\,_2px\)\] {
-    border-width: var(--_border-width, 2px);
-}
-
-  .bd-c_\[color-mix\(in_srgb\,_var\(--likec4-palette-stroke\)_var\(--_border-opacity-percent\,_100\%\)\,_transparent\)\] {
-    border-color: color-mix(in srgb, var(--likec4-palette-stroke) var(--_border-opacity-percent, 100%), transparent);
-}
-
-  .flex_0_0_20px {
-    flex: 0 0 20px;
-}
-
-  .tw_pretty {
-    text-wrap: pretty;
-}
-
-  .transition_fill_120ms_linear\,_filter_130ms_\{easings\.inOut\} {
-    transition: fill 120ms linear, filter 130ms var(--easings-in-out);
-}
-
   .bdr_\[4px\] {
     border-radius: 4px;
 }
@@ -4813,20 +5258,12 @@
     gap: 6px;
 }
 
-  .offset_16 {
-    offset: 16px;
-}
-
-  .bdr_\[2px\] {
-    border-radius: 2px;
-}
-
-  .gap_3 {
-    gap: var(--spacing-3);
+  .tw_pretty {
+    text-wrap: pretty;
 }
 
-  .py_2 {
-    padding-block: var(--spacing-2);
+  .offset_16 {
+    offset: 16px;
 }
 
   .flex_0_0_auto {
@@ -4865,6 +5302,10 @@
     border-width: 3px;
 }
 
+  .border-style_dashed {
+    border-style: dashed;
+}
+
   .offset_2 {
     offset: 2px;
 }
@@ -4926,6 +5367,10 @@
     user-select: all;
 }
 
+  .bg-c_transparent {
+    background-color: var(--colors-transparent);
+}
+
   .stk_2\.5 {
     stroke: 2.5px;
 }
@@ -5095,6 +5540,54 @@
     order: 6;
 }
 
+  .bd-be-w_var\(--thickness\) {
+    border-block-end-width: var(--thickness);
+}
+
+  .cursor_default {
+    cursor: default;
+}
+
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
+  .op_0\.65 {
+    opacity: 0.65;
+}
+
+  .d_inline-block {
+    display: inline-block;
+}
+
+  .fs_xxs {
+    font-size: var(--font-sizes-xxs);
+}
+
+  .lh_\[1\.11\] {
+    line-height: 1.11;
+}
+
+  .d_block {
+    display: block;
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
+  .mix-bm_hard-light {
+    mix-blend-mode: hard-light;
+}
+
+  .white-space-collapse_preserve-breaks {
+    white-space-collapse: preserve-breaks;
+}
+
+  .lh_sm {
+    line-height: var(--line-heights-sm);
+}
+
   .c_likec4\.panel\.action-icon\.text {
     color: var(--colors-likec4-panel-action-icon-text);
 }
@@ -5107,10 +5600,6 @@
     opacity: 0.8;
 }
 
-  .white-space_nowrap {
-    white-space: nowrap;
-}
-
   .pos_bottom-end {
     position: bottom-end;
 }
@@ -5127,22 +5616,10 @@
     stroke: 1.8px;
 }
 
-  .flex-wrap_wrap {
-    flex-wrap: wrap;
-}
-
   .fs_xs {
     font-size: var(--font-sizes-xs);
 }
 
-  .fs_xxs {
-    font-size: var(--font-sizes-xxs);
-}
-
-  .cursor_default {
-    cursor: default;
-}
-
   .op_0\.5 {
     opacity: 0.5;
 }
@@ -5215,10 +5692,6 @@
     flex-shrink: 0;
 }
 
-  .d_block {
-    display: block;
-}
-
   .bx-s_border-box {
     box-sizing: border-box;
 }
@@ -5307,10 +5780,6 @@
     stroke: 1.6px;
 }
 
-  .bd-be-w_var\(--thickness\) {
-    border-block-end-width: var(--thickness);
-}
-
   .trs-prop_all {
     --transition-prop: all;
     transition-property: all;
@@ -5350,14 +5819,6 @@
     stroke: 1.2px;
 }
 
-  .op_0\.65 {
-    opacity: 0.65;
-}
-
-  .d_inline-block {
-    display: inline-block;
-}
-
   .lh_1\.2 {
     line-height: 1.2;
 }
@@ -5520,42 +5981,6 @@
     z-index: 903;
 }
 
-  .vis_hidden {
-    visibility: hidden;
-}
-
-  .stk_\[color-mix\(in_srgb\,_var\(--likec4-palette-stroke\)_60\%\,_var\(--likec4-palette-hiContrast\)\)\] {
-    stroke: color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast));
-}
-
-  .stk-w_4 {
-    stroke-width: 4;
-}
-
-  .fill_\[none\] {
-    fill: none;
-}
-
-  .ff_likec4\.compound {
-    font-family: var(--fonts-likec4-compound);
-}
-
-  .tt_uppercase {
-    text-transform: uppercase;
-}
-
-  .ls_0\.2px {
-    letter-spacing: 0.2px;
-}
-
-  .c_var\(--likec4-palette-loContrast\) {
-    color: var(--likec4-palette-loContrast);
-}
-
-  .mix-bm_hard-light {
-    mix-blend-mode: hard-light;
-}
-
   .trs-dur_normal {
     --transition-duration: var(--durations-normal);
     transition-duration: var(--durations-normal);
@@ -5565,24 +5990,8 @@
     transition-delay: 0.2s;
 }
 
-  .ta_left {
-    text-align: left;
-}
-
-  .white-space-collapse_preserve-breaks {
-    white-space-collapse: preserve-breaks;
-}
-
-  .lh_1\.25 {
-    line-height: 1.25;
-}
-
-  .c_\[var\(--xy-edge-label-color\)\] {
-    color: var(--xy-edge-label-color);
-}
-
-  .trf_var\(--edge-translate\) {
-    transform: var(--edge-translate);
+  .fill_\[none\] {
+    fill: none;
 }
 
   .stk-op_0 {
@@ -5597,11 +6006,6 @@
     stroke-opacity: 0.08;
 }
 
-  .trs-prop_stroke-width\,_stroke-opacity {
-    --transition-prop: stroke-width, stroke-opacity;
-    transition-property: stroke-width, stroke-opacity;
-}
-
   .fill_\[var\(--xy-edge-stroke\)\] {
     fill: var(--xy-edge-stroke);
 }
@@ -5618,58 +6022,6 @@
     stroke-dashoffset: 10;
 }
 
-  .stk_var\(--likec4-palette-loContrast\) {
-    stroke: var(--likec4-palette-loContrast);
-}
-
-  .stk-w_8 {
-    stroke-width: 8;
-}
-
-  .stk-op_0\.8 {
-    stroke-opacity: 0.8;
-}
-
-  .fill_var\(--likec4-palette-fill\) {
-    fill: var(--likec4-palette-fill);
-}
-
-  .fill_var\(--likec4-palette-stroke\) {
-    fill: var(--likec4-palette-stroke);
-}
-
-  .fill_\[color-mix\(in_srgb\,_var\(--likec4-palette-stroke\)_90\%\,_var\(--likec4-palette-fill\)\)\] {
-    fill: color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill));
-}
-
-  .stk_var\(--likec4-palette-stroke\) {
-    stroke: var(--likec4-palette-stroke);
-}
-
-  .trf-o_50\%_50\% {
-    transform-origin: 50% 50%;
-}
-
-  .trf_translate\(14px\,_14px\)_perspective\(300px\)_translateZ\(-8px\) {
-    transform: translate(14px, 14px) perspective(300px) translateZ(-8px);
-}
-
-  .filter_brightness\(0\.65\)_saturate\(0\.8\) {
-    filter: brightness(0.65) saturate(0.8);
-}
-
-  .stk_\[none\] {
-    stroke: none;
-}
-
-  .trs-dly_0ms {
-    transition-delay: 0ms;
-}
-
-  .filter_drop-shadow\(0_2px_1px_rgba\(0\,_0\,_0\,_0\.21\)\)_drop-shadow\(0_1px_1px_color-mix\(in_srgb\,_var\(--likec4-palette-stroke\)_40\%\,_transparent\)\)_drop-shadow\(0_5px_3px_rgba\(0\,_0\,_0\,_0\.1\)\) {
-    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21)) drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent)) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1));
-}
-
   .fs_lg {
     font-size: var(--font-sizes-lg);
 }
@@ -5686,8 +6038,12 @@
     z-index: 9;
 }
 
-  .lh_\[1\.11\] {
-    line-height: 1.11;
+  .ta_left {
+    text-align: left;
+}
+
+  .lh_1\.25 {
+    line-height: 1.25;
 }
 
   .mix-bm_normal {
@@ -5718,6 +6074,10 @@
     pointer-events: auto;
 }
 
+  .vis_hidden {
+    visibility: hidden;
+}
+
   .cursor_grabbing {
     cursor: grabbing;
 }
@@ -5735,14 +6095,22 @@
     opacity: 0.7;
 }
 
-  .bg-c_transparent {
-    background-color: var(--colors-transparent);
+  .fill_var\(--likec4-palette-fill\) {
+    fill: var(--likec4-palette-fill);
+}
+
+  .stk_var\(--likec4-palette-stroke\) {
+    stroke: var(--likec4-palette-stroke);
 }
 
   .filter_drop-shadow\(0_2px_3px_rgb\(0_0_0_\/_22\%\)\)_drop-shadow\(0_1px_8px_rgb\(0_0_0_\/_10\%\)\) {
     filter: drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%));
 }
 
+  .ls_0\.2px {
+    letter-spacing: 0.2px;
+}
+
   .tt_lowercase {
     text-transform: lowercase;
 }
@@ -5892,8 +6260,24 @@
     padding-bottom: var(--spacing-sm);
 }
 
-  .pr_xs {
-    padding-right: var(--spacing-xs);
+  .pr_xs {
+    padding-right: var(--spacing-xs);
+}
+
+  .w_max-content {
+    width: max-content;
+}
+
+  .pt_2\.5 {
+    padding-top: var(--spacing-2\.5);
+}
+
+  .pl_2\.5 {
+    padding-left: var(--spacing-2\.5);
+}
+
+  .bd-l-c_mantine\.colors\.gray\[3\] {
+    border-left-color: var(--colors-mantine-colors-gray\[3\]);
 }
 
   .mt_1 {
@@ -5916,10 +6300,6 @@
     max-height: calc(100cqh - 100px);
 }
 
-  .w_max-content {
-    width: max-content;
-}
-
   .h_auto {
     height: auto;
 }
@@ -6123,28 +6503,15 @@
     min-width: 200px;
 }
 
-  .top_\[5px\] {
-    top: 5px;
-}
-
-  .left_\[4px\] {
-    left: 4px;
-}
-
-  .top_0\.5 {
-    top: var(--spacing-0\.5);
-}
-
-  .left_\[14px\] {
-    left: 14px;
-}
-
-  .top_\[4px\] {
-    top: 4px;
+  .lc_5 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
 }
 
-  .right_\[30px\] {
-    right: 30px;
+  .top_\[calc\(100\%_-_30px\)\] {
+    top: calc(100% - 30px);
 }
 
   .w_auto {
@@ -6155,31 +6522,8 @@
     min-height: 30px;
 }
 
-  .h_20px {
-    height: 20px;
-}
-
-  .w_20px {
-    width: 20px;
-}
-
-  .top_1 {
-    top: var(--spacing-1);
-}
-
-  .right_1 {
-    right: var(--spacing-1);
-}
-
-  .lc_5 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 5;
-    -webkit-box-orient: vertical;
-}
-
-  .top_\[calc\(100\%_-_30px\)\] {
-    top: calc(100% - 30px);
+  .top_0\.5 {
+    top: var(--spacing-0\.5);
 }
 
   .bottom_0 {
@@ -6220,30 +6564,6 @@
     right: 1px;
 }
 
-  .ov-y_scroll {
-    overflow-y: scroll;
-}
-
-  .min-w_250px {
-    min-width: 250px;
-}
-
-  .max-w_min\(90vw\,_500px\) {
-    max-width: min(90vw, 500px);
-}
-
-  .top_5 {
-    top: var(--spacing-5);
-}
-
-  .right_6 {
-    right: var(--spacing-6);
-}
-
-  .w_xs {
-    width: xs;
-}
-
   .min-w_200 {
     min-width: 200px;
 }
@@ -6381,14 +6701,6 @@
     background: var(--mix-background, var(--colors-mantine-colors-white));
 }
 
-  .before\:bd_transparent::before {
-    border: var(--borders-transparent);
-}
-
-  .before\:bg_var\(--likec4-palette-fill\)::before {
-    background: var(--likec4-palette-fill);
-}
-
   .before\:bg_\[transparent\]::before {
     background: var(--colors-transparent);
 }
@@ -6414,7 +6726,7 @@
     border-color: var(--colors-mantine-colors-dark\[4\]);
 }
 
-  :is(.likec4-root[data-likec4-diagram-panning]) .whenPanning\:transition_none\! {
+  .likec4-root:is([data-likec4-diagram-panning="true"]) .whenPanning\:transition_none\! {
     transition: none !important;
 }
 
@@ -6463,14 +6775,6 @@
     border-color: var(--colors-transparent);
 }
 
-  .before\:bdr_var\(--_border-radius\,_4px\)::before {
-    border-radius: var(--_border-radius, 4px);
-}
-
-  .\[\&\:is\(\[data-likec4-hovered\=\'true\'\]\)\]\:transition_all_190ms_\{easings\.inOut\}:is([data-likec4-hovered='true']) {
-    transition: all 190ms var(--easings-in-out);
-}
-
   .likec4-root:is([data-likec4-reduced-graphics]) .reduceGraphics\:transition_none {
     transition: none;
 }
@@ -6479,11 +6783,7 @@
     transition: stroke 130ms ease-out,stroke-width 130ms ease-out;
 }
 
-  :is(.likec4-root[data-likec4-diagram-panning]) .whenPanning\:transition_none {
-    transition: none;
-}
-
-  :where([data-likec4-hovered="true"]) .whenHovered\:bdr_4 {
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .whenHovered\:bdr_4 {
     border-radius: 4px;
 }
 
@@ -6491,14 +6791,6 @@
     transition: fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out;
 }
 
-  .\[\&_\.react-flow__pane\]\:-webkit-user-select_none .react-flow__pane {
-    -webkit-user-select: none;
-}
-
-  .\[\&_\.react-flow__attribution\]\:d_none .react-flow__attribution {
-    display: none;
-}
-
   .\[\&_\:where\(\.likec4-diagram\,_\.likec4-compound-node\,_\.likec4-element-node\)\]\:cursor_pointer :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node) {
     cursor: pointer;
 }
@@ -6532,7 +6824,7 @@
     color: var(--colors-mantine-colors-text);
 }
 
-  :is(.likec4-root[data-likec4-diagram-panning]) .whenPanning\:bx-sh_none\! {
+  .likec4-root:is([data-likec4-diagram-panning="true"]) .whenPanning\:bx-sh_none\! {
     box-shadow: var(--shadows-none) !important;
 }
 
@@ -6584,6 +6876,14 @@
     background-color: rgb(250 250 250 / var(--_opacity, 95%));
 }
 
+  [data-mantine-color-scheme="light"] .light\:c_\[color-mix\(in_srgb\,_var\(--likec4-palette-stroke\)\,_\{colors\.likec4\.mixColor\}_60\%\)\] {
+    color: color-mix(in srgb, var(--likec4-palette-stroke), var(--colors-likec4-mix-color) 60%);
+}
+
+  [data-mantine-color-scheme="dark"] .dark\:c_var\(--likec4-palette-loContrast\) {
+    color: var(--likec4-palette-loContrast);
+}
+
   [data-mantine-color-scheme="light"] .light\:c_mantine\.colors\.gray\[8\] {
     color: var(--colors-mantine-colors-gray\[8\]);
 }
@@ -6600,7 +6900,7 @@
     pointer-events: all;
 }
 
-  :is(.likec4-root[data-likec4-diagram-panning]) .whenPanning\:bx-sh_none {
+  .likec4-root:is([data-likec4-diagram-panning="true"]) .whenPanning\:bx-sh_none {
     box-shadow: var(--shadows-none);
 }
 
@@ -6621,6 +6921,10 @@
     background-color: var(--colors-mantine-colors-dark\[6\]);
 }
 
+  .\[\&_\.react-flow__attribution\]\:d_none .react-flow__attribution {
+    display: none;
+}
+
   [data-mantine-color-scheme="dark"] .dark\:mix-bm_hard-light {
     mix-blend-mode: hard-light;
 }
@@ -6779,81 +7083,39 @@
     background-color: rgb(255 255 255 / 0.6);
 }
 
-  :where([data-likec4-zoom-small]) .smallZoom\:d_none {
+  .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .reduceGraphicsOnPan\:d_none {
     display: none;
 }
 
-  :where([data-likec4-hovered="true"]) .whenHovered\:op_0\.75 {
-    opacity: 0.75;
-}
-
-  .before\:content_\"_\"::before {
-    content: " ";
-}
-
-  .before\:bg-cp_padding-box::before {
-    background-clip: padding-box;
-    -webkit-background-clip: padding-box;
-}
-
-  .before\:trs-dly_\.075ms::before {
-    transition-delay: .075ms;
-}
-
-  :where(.react-flow__node.selected, .react-flow__edge.selected) .whenSelected\:vis_visible {
-    visibility: visible;
-}
-
-  :is(.likec4-root[data-likec4-diagram-panning]) .whenPanning\:d_none {
+  :where([data-likec4-zoom-small="true"]) .smallZoom\:d_none {
     display: none;
 }
 
-  [data-mantine-color-scheme="light"] .light\:stk_\[color-mix\(in_srgb\,_var\(--likec4-palette-stroke\)_80\%\,_var\(--likec4-palette-hiContrast\)\)\] {
-    stroke: color-mix(in srgb, var(--likec4-palette-stroke) 80%, var(--likec4-palette-hiContrast));
-}
-
-  :where(.react-flow__node.draggable) .\[\:where\(\.react-flow__node\.draggable\)_\&\]\:pointer-events_all {
-    pointer-events: all;
-}
-
-  :where(.react-flow__node.draggable) .\[\:where\(\.react-flow__node\.draggable\)_\&\]\:cursor_grab {
-    cursor: grab;
-}
-
-  [data-compound-title-inverse] .\[\[data-compound-title-inverse\]_\&\]\:c_\[color-mix\(in_srgb\,_var\(--likec4-palette-loContrast\)_60\%\,_var\(--likec4-palette-fill\)\)\] {
-    color: color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill));
-}
-
-  .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .reduceGraphicsOnPan\:mix-bm_normal {
-    mix-blend-mode: normal;
-}
-
-  .\[\&_svg\,_\&_img\]\:filter_drop-shadow\(0_0_3px_rgb\(0_0_0_\/_12\%\)\) svg,.\[\&_svg\,_\&_img\]\:filter_drop-shadow\(0_0_3px_rgb\(0_0_0_\/_12\%\)\) img {
-    filter: drop-shadow(0 0 3px rgb(0 0 0 / 12%));
-}
-
-  .\[\&\:is\(\[data-likec4-hovered\=\'true\'\]\)\]\:trf_var\(--edge-translate\,_translate\(0px\,_0px\)\)_scale\(1\.12\):is([data-likec4-hovered='true']) {
-    transform: var(--edge-translate, translate(0px, 0px)) scale(1.12);
+  .likec4-root:not([data-likec4-reduced-graphics]) .noReduceGraphics\:trs-prop_stroke-width\,_stroke-opacity {
+    --transition-prop: stroke-width, stroke-opacity;
+    transition-property: stroke-width, stroke-opacity;
 }
 
-  .\[\&\:is\(\[data-likec4-hovered\=\'true\'\]\)\]\:trs-dly_100ms:is([data-likec4-hovered='true']) {
-    transition-delay: 100ms;
+  .likec4-root:not([data-likec4-reduced-graphics]) .noReduceGraphics\:trs-dur_fast {
+    --transition-duration: var(--durations-fast);
+    transition-duration: var(--durations-fast);
 }
 
-  .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .reduceGraphicsOnPan\:d_none {
-    display: none;
+  .likec4-root:not([data-likec4-reduced-graphics]) .noReduceGraphics\:trs-tmf_inOut {
+    --transition-easing: var(--easings-in-out);
+    transition-timing-function: var(--easings-in-out);
 }
 
-  :where([data-likec4-hovered="true"]) .whenHovered\:trs-tmf_out {
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .whenHovered\:trs-tmf_out {
     --transition-easing: var(--easings-out);
     transition-timing-function: var(--easings-out);
 }
 
-  :where([data-likec4-hovered="true"]) .whenHovered\:stk-w_calc\(var\(--xy-edge-stroke-width\)_\+_4\) {
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .whenHovered\:stk-w_calc\(var\(--xy-edge-stroke-width\)_\+_4\) {
     stroke-width: calc(var(--xy-edge-stroke-width) + 4);
 }
 
-  :where([data-likec4-hovered="true"]) .whenHovered\:stk-op_0\.2 {
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .whenHovered\:stk-op_0\.2 {
     stroke-opacity: 0.2;
 }
 
@@ -6865,32 +7127,32 @@
     stroke-opacity: 0.25;
 }
 
-  :where([data-likec4-hovered="true"]) .whenHovered\:anim-dly_450ms {
-    animation-delay: 450ms;
-}
-
-  :where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) .\[\:where\(\.react-flow__edge\.selected\,_\[data-edge-active\=\'true\'\]\,_\[data-edge-animated\=\'true\'\]\)_\&\]\:anim-dly_0ms {
-    animation-delay: 0ms;
+  .likec4-root:not([data-likec4-reduced-graphics]) .noReduceGraphics\:anim-ps_paused {
+    animation-play-state: paused;
 }
 
   :where([data-edge-dir='back']) .\[\:where\(\[data-edge-dir\=\'back\'\]\)_\&\]\:anim-dir_reverse {
     animation-direction: reverse;
 }
 
-  :where([data-likec4-dimmed]) .whenDimmed\:anim-ps_paused {
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) .whenDimmed\:anim-ps_paused {
     animation-play-state: paused;
 }
 
-  :where([data-likec4-zoom-small]) .smallZoom\:anim-n_none {
+  :where([data-likec4-zoom-small="true"]) .smallZoom\:anim-n_none {
     animation-name: none;
 }
 
-  :is(.likec4-root[data-likec4-diagram-panning]) .whenPanning\:stk-dsh_none\! {
+  .likec4-root:is([data-likec4-diagram-panning="true"]) .whenPanning\:stk-dsh_none\! {
     stroke-dasharray: none !important;
 }
 
-  :is(.likec4-root[data-likec4-diagram-panning]) .whenPanning\:anim-n_none {
-    animation-name: none;
+  .likec4-root:is([data-likec4-diagram-panning="true"]) .whenPanning\:anim-ps_paused {
+    animation-play-state: paused;
+}
+
+  .before\:content_\"_\"::before {
+    content: " ";
 }
 
   .before\:pointer-events_all::before {
@@ -6901,66 +7163,10 @@
     cursor: pointer;
 }
 
-  :where([data-likec4-zoom-small]) .smallZoom\:vis_hidden {
-    visibility: hidden;
-}
-
-  [data-mantine-color-scheme="light"] .light\:stk_\[color-mix\(in_srgb\,_var\(--likec4-palette-fill\)_50\%\,rgb\(121\,_121\,_121\)\)\] {
-    stroke: color-mix(in srgb, var(--likec4-palette-fill) 50%,rgb(121, 121, 121));
-}
-
-  .shape-svg-multiple .\[\.shape-svg-multiple_\&\]\:fill_var\(--likec4-palette-fill\) {
-    fill: var(--likec4-palette-fill);
-}
-
-  :where([data-likec4-shape='queue']) .shapeQueue\:trf-o_75\%_25\% {
-    transform-origin: 75% 25%;
-}
-
-  :where([data-likec4-shape='cylinder']) .shapeCylinder\:trf-o_50\%_100\% {
-    transform-origin: 50% 100%;
-}
-
-  :where([data-likec4-shape='storage']) .shapeStorage\:trf-o_50\%_100\% {
-    transform-origin: 50% 100%;
-}
-
-  :where(.react-flow__node.selected, .react-flow__edge.selected) .whenSelected\:d_none {
-    display: none;
-}
-
-  :where([data-likec4-hovered="true"]) .whenHovered\:filter_drop-shadow\(0_2px_1px_rgba\(0\,_0\,_0\,_0\.25\)\)_drop-shadow\(0_8px_3px_rgba\(0\,_0\,_0\,_0\.1\)\)_drop-shadow\(0_10px_10px_rgba\(0\,_0\,_0\,_0\.05\)\) {
-    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05));
-}
-
-  :where([data-likec4-level='true']) .\[\:where\(\[data-likec4-level\=\'true\'\]\)_\&\]\:filter_drop-shadow\(0_2px_1px_rgba\(0\,_0\,_0\,_0\.25\)\)_drop-shadow\(0_8px_3px_rgba\(0\,_0\,_0\,_0\.1\)\)_drop-shadow\(0_10px_10px_rgba\(0\,_0\,_0\,_0\.05\)\) {
-    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05));
-}
-
-  :where(.react-flow__node.selected, .react-flow__edge.selected) .whenSelected\:filter_none {
-    filter: none;
-}
-
-  :where([data-likec4-zoom-small]) .smallZoom\:filter_none {
-    filter: none;
-}
-
-  :is(.likec4-root[data-likec4-diagram-panning]) .whenPanning\:filter_none {
-    filter: none;
-}
-
-  :where([data-likec4-hovered="true"]) .whenHovered\:trs-dly_\.08s {
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .whenHovered\:trs-dly_\.08s {
     transition-delay: .08s;
 }
 
-  [data-mantine-color-scheme="light"] .light\:c_\[color-mix\(in_srgb\,_var\(--likec4-palette-stroke\)\,_\{colors\.likec4\.mixColor\}_60\%\)\] {
-    color: color-mix(in srgb, var(--likec4-palette-stroke), var(--colors-likec4-mix-color) 60%);
-}
-
-  [data-mantine-color-scheme="dark"] .dark\:c_var\(--likec4-palette-loContrast\) {
-    color: var(--likec4-palette-loContrast);
-}
-
   :where(.react-flow__edge.selected, [data-likec4-hovered='true']) .\[\:where\(\.react-flow__edge\.selected\,_\[data-likec4-hovered\=\'true\'\]\)_\&\]\:vis_visible {
     visibility: visible;
 }
@@ -6986,7 +7192,7 @@
     background-color: var(--mix-backgroundColor, var(--colors-mantine-colors-dark\[6\]));
 }
 
-  :is(.likec4-root[data-likec4-diagram-panning]) .whenPanning\:bg-c_mantine\.colors\.body {
+  .likec4-root:is([data-likec4-diagram-panning="true"]) .whenPanning\:bg-c_mantine\.colors\.body {
     background-color: var(--colors-mantine-colors-body);
 }
 
@@ -6998,6 +7204,10 @@
     min-height: 100%;
 }
 
+  [data-mantine-color-scheme="dark"] .dark\:bd-l-c_mantine\.colors\.dark\[4\] {
+    border-left-color: var(--colors-mantine-colors-dark\[4\]);
+}
+
   .\[\&_\>_svg\]\:w_70\% > svg {
     width: 70%;
 }
@@ -7078,22 +7288,6 @@
     margin-top: 32px;
 }
 
-  .before\:left_0::before {
-    left: var(--spacing-0);
-}
-
-  .before\:w_100\%::before {
-    width: 100%;
-}
-
-  .before\:h_100\%::before {
-    height: 100%;
-}
-
-  .likec4-compound-node:has(.compound-action) .\[\.likec4-compound-node\:has\(\.compound-action\)_\&\]\:pl_\[22px\] {
-    padding-left: 22px;
-}
-
   :where([data-likec4-shape='browser']) .shapeBrowser\:right_\[5px\] {
     right: 5px;
 }
@@ -7118,6 +7312,14 @@
     top: calc(100% - 4px);
 }
 
+  .before\:left_0::before {
+    left: var(--spacing-0);
+}
+
+  .before\:w_100\%::before {
+    width: 100%;
+}
+
   .before\:h_24px::before {
     height: 24px;
 }
@@ -7138,7 +7340,7 @@
     padding-left: 14px;
 }
 
-  :where([data-likec4-hovered="true"]) .whenHovered\:h_12 {
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .whenHovered\:h_12 {
     height: 12px;
 }
 
@@ -7163,14 +7365,6 @@
     --grayscale: grayscale(0);
 }
 
-  :where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) .whenFocused\:vis_visible {
-    visibility: visible;
-}
-
-  :where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) .whenFocused\:d_none {
-    display: none;
-}
-
   .focus\:bg_mantine\.colors\.primary\[8\]:is(:focus, [data-focus]) {
     background: var(--colors-mantine-colors-primary\[8\]);
 }
@@ -7243,10 +7437,6 @@
     color: var(--colors-mantine-colors-primary\[1\]);
 }
 
-  .group:is(:focus-visible, [data-focus-visible]) .groupFocusVisible\:vis_visible {
-    visibility: visible;
-}
-
   .hover\:--icon-color_\{colors\.mantine\.colors\.dark\[1\]\}:is(:hover, [data-hover]) {
     --icon-color: var(--colors-mantine-colors-dark\[1\]);
 }
@@ -7463,30 +7653,6 @@
     --ai-radius: 0px;
 }
 
-  [data-mantine-color-scheme="dark"] [data-compound-title-inverse] .\[\[data-compound-title-inverse\]_\&\]\:dark\:--actionbtn-color_color-mix\(in_srgb\,_var\(--likec4-palette-loContrast\)_60\%\,_var\(--likec4-palette-fill\)\) {
-    --actionbtn-color: color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill));
-}
-
-  [data-mantine-color-scheme="light"] [data-compound-title-inverse] .\[\[data-compound-title-inverse\]_\&\]\:light\:--actionbtn-color_var\(--likec4-palette-stroke\) {
-    --actionbtn-color: var(--likec4-palette-stroke);
-}
-
-  [data-mantine-color-scheme="light"] [data-compound-title-inverse] .\[\[data-compound-title-inverse\]_\&\]\:light\:--actionbtn-color-hovered_var\(--likec4-palette-stroke\) {
-    --actionbtn-color-hovered: var(--likec4-palette-stroke);
-}
-
-  [data-mantine-color-scheme="light"] [data-compound-title-inverse] .\[\[data-compound-title-inverse\]_\&\]\:light\:--actionbtn-color-hovered-btn_var\(--likec4-palette-hiContrast\) {
-    --actionbtn-color-hovered-btn: var(--likec4-palette-hiContrast);
-}
-
-  [data-mantine-color-scheme="light"] [data-compound-title-inverse] .\[\[data-compound-title-inverse\]_\&\]\:light\:--actionbtn-bg-hovered_var\(--likec4-palette-fill\)\/50 {
-    --actionbtn-bg-hovered: var(--likec4-palette-fill)/50;
-}
-
-  [data-mantine-color-scheme="light"] [data-compound-title-inverse] .\[\[data-compound-title-inverse\]_\&\]\:light\:--actionbtn-bg-hovered-btn_var\(--likec4-palette-fill\) {
-    --actionbtn-bg-hovered-btn: var(--likec4-palette-fill);
-}
-
   [data-mantine-color-scheme="dark"] .dark\:\[\&\:is\(\[data-active\]\)\]\:bg_mantine\.colors\.dark\[5\]:is([data-active]) {
     background: var(--colors-mantine-colors-dark\[5\]);
 }
@@ -7499,14 +7665,6 @@
     text-decoration: underline;
 }
 
-  .likec4-root:not([data-likec4-reduced-graphics]) .noReduceGraphics\:before\:transition_all_\{durations\.slow\}_\{easings\.inOut\}::before {
-    transition: all var(--durations-slow) var(--easings-in-out);
-}
-
-  .\[\&\:is\(\[data-compound-transparent\]\)\]\:before\:bd-w_calc\(var\(--_border-width\,_2px\)_-_1px\):is([data-compound-transparent])::before {
-    border-width: calc(var(--_border-width, 2px) - 1px);
-}
-
   .group:is(:hover, [data-hover]) .\[\&\:is\(\[data-position\=\"left\"\]\)\]\:groupHover\:c_\[inherit\]:is([data-position="left"]) {
     color: inherit;
 }
@@ -7552,43 +7710,27 @@
     background-color: rgb(15 15 15/ var(--_opacity));
 }
 
-  .\[\&\:is\(\[data-compound-transparent\]\)\]\:before\:op_var\(--_compound-opacity\,_1\):is([data-compound-transparent])::before {
-    opacity: var(--_compound-opacity, 1);
-}
-
-  .likec4-root:not([data-likec4-reduced-graphics]) .before\:noReduceGraphics\:bx-sh_0_4px_10px_0\.5px_rgba\(0\,0\,0\,0\.1\)_\,_0_2px_2px_-1px_rgba\(0\,0\,0\,0\.4\)::before {
-    box-shadow: 0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4);
-}
-
-  :where(.react-flow__node.selected, .react-flow__edge.selected) .before\:whenSelected\:bx-sh_none::before {
-    box-shadow: var(--shadows-none);
-}
-
-  :is(.likec4-root[data-likec4-diagram-panning]) .before\:whenPanning\:bx-sh_none\!::before {
-    box-shadow: var(--shadows-none) !important;
-}
-
-  [data-mantine-color-scheme="light"] [data-compound-title-inverse] .\[\[data-compound-title-inverse\]_\&\]\:light\:c_var\(--likec4-palette-stroke\) {
-    color: var(--likec4-palette-stroke);
+  :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) :where(.react-flow__node.selected, .react-flow__edge.selected) .whenSelected\:whenHovered\:stk-op_0\.4 {
+    stroke-opacity: 0.4;
 }
 
-  .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .\[\&_svg\,_\&_img\]\:reduceGraphicsOnPan\:filter_none svg,.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .\[\&_svg\,_\&_img\]\:reduceGraphicsOnPan\:filter_none img {
-    filter: none;
+  .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .whenHovered\:noReduceGraphics\:anim-ps_running {
+    animation-play-state: running;
 }
 
-  [data-mantine-color-scheme="dark"] .likec4-root:not([data-likec4-reduced-graphics]) .noReduceGraphics\:dark\:mix-bm_plus-lighter {
-    mix-blend-mode: plus-lighter;
+  .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) .whenHovered\:noReduceGraphics\:anim-dly_450ms {
+    animation-delay: 450ms;
 }
 
-  [data-mantine-color-scheme="light"] .likec4-root:not([data-likec4-reduced-graphics]) .noReduceGraphics\:light\:mix-bm_screen {
-    mix-blend-mode: screen;
+  .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) .\[\:where\(\.react-flow__edge\.selected\,_\[data-edge-active\=\'true\'\]\,_\[data-edge-animated\=\'true\'\]\)_\&\]\:noReduceGraphics\:anim-ps_running {
+    animation-play-state: running;
 }
 
-  :where([data-likec4-hovered="true"]) :where(.react-flow__node.selected, .react-flow__edge.selected) .whenSelected\:whenHovered\:stk-op_0\.4 {
-    stroke-opacity: 0.4;
+  .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) .\[\:where\(\.react-flow__edge\.selected\,_\[data-edge-active\=\'true\'\]\,_\[data-edge-animated\=\'true\'\]\)_\&\]\:noReduceGraphics\:anim-dly_0ms {
+    animation-delay: 0ms;
 }
 
-  .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .reduceGraphicsOnPan\:before\:d_none::before {
+  .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) .reduceGraphicsOnPan\:before\:d_none::before {
     display: none;
 }
 
@@ -7663,6 +7805,11 @@
     background-color: var(--colors-mantine-colors-dark\[4\]);
 }
 
+  [data-mantine-color-scheme="dark"] .hover\:dark\:bg-c_mantine\.colors\.dark\[5\]\/70:is(:hover, [data-hover]) {
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-mantine-colors-dark\[5\]) 70%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-mantine-colors-dark\[5\]));
+}
+
   [data-mantine-color-scheme="dark"] .dark\:hover\:c_mantine\.colors\.white:is(:hover, [data-hover]) {
     color: var(--colors-mantine-colors-white);
 }
@@ -7710,15 +7857,6 @@
     background-color: var(--mix-backgroundColor, var(--colors-mantine-colors-dark\[3\]));
 }
 
-  .likec4-root:not([data-likec4-reduced-graphics]) .noReduceGraphics\:\[\&\[data-likec4-hovered\=\'true\'\]\]\:before\:trs-dly_\.2s[data-likec4-hovered='true']::before {
-    transition-delay: .2s;
-}
-
-  .likec4-root:not([data-likec4-reduced-graphics]) .noReduceGraphics\:\[\&\[data-likec4-hovered\=\'true\'\]\]\:before\:trs-tmf_in[data-likec4-hovered='true']::before {
-    --transition-easing: var(--easings-in);
-    transition-timing-function: var(--easings-in);
-}
-
   @container  (min-width: 24rem) {
     .\@\/xs\:d_flex {
       display: flex;
@@ -7746,9 +7884,6 @@
 }
     .xs\:max-h_calc\(100cqh_-_70px\) {
       max-height: calc(100cqh - 70px);
-}
-    .\[\&_svg\,_\&_img\]\:xs\:filter_drop-shadow\(0_1px_8px_rgb\(0_0_0_\/_8\%\)\) svg,.\[\&_svg\,_\&_img\]\:xs\:filter_drop-shadow\(0_1px_8px_rgb\(0_0_0_\/_8\%\)\) img {
-      filter: drop-shadow(0 1px 8px rgb(0 0 0 / 8%));
 }
 }
 
@@ -7779,12 +7914,6 @@
         max-width: calc(100cqw - 2 * var(--spacing-md));
 }
 }
-}
-
-  @container likec4-root (min-width: 40rem) {
-    .\@likec4-root\/sm\:d_flex {
-      display: flex;
-}
 }
 
   @container  (min-width: 48rem) {
@@ -7832,9 +7961,6 @@
 }
     .sm\:max-w_65vw {
       max-width: 65vw;
-}
-    .\[\&_svg\,_\&_img\]\:sm\:filter_drop-shadow\(1px_1px_16px_rgb\(0_0_0_\/_3\%\)\) svg,.\[\&_svg\,_\&_img\]\:sm\:filter_drop-shadow\(1px_1px_16px_rgb\(0_0_0_\/_3\%\)\) img {
-      filter: drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
 }
 }