@likec4/styles 1.27.0

package/dist/styles.css

@@ -0,0 +1,1601 @@
+@layer reset, base, tokens, recipes, utilities;
+
+@layer base{
+  :root {
+    --made-with-panda: '🐼';
+}
+
+  :where(:host, :root) {
+    --likec4-app-font-default: 'IBM Plex Sans','ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"';
+}
+
+  .likec4-shadow-root {
+    display: contents;
+    --mantine-font-family: var(--likec4-app-font-default);
+    --mantine-font-family-headings: var(--likec4-app-font-default);
+}
+
+  .likec4-root {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: var(--spacing-0);
+    margin: var(--spacing-0);
+    box-sizing: border-box;
+    border: 0px solid transparent;
+}
+
+  .likec4-root .react-flow:is(.not-initialized) {
+    opacity: 0;
+}
+
+  :where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon {
+    width: 75%;
+    height: 75%;
+}
+
+  .likec4-root :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed]) {
+    opacity: 0.25;
+}
+
+  .likec4-root:not([data-likec4-reduced-graphics]):not([data-likec4-diagram-panning]) :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed]) {
+    filter: var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, );
+    --grayscale: grayscale(0.85);
+    --blur: blur(3px);
+}
+
+  .likec4-root:not([data-likec4-reduced-graphics]):not([data-likec4-diagram-panning]) :where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container):has([data-likec4-dimmed="true"]) {
+    --transition-prop: opacity, filter;
+    transition-property: opacity, filter;
+    --transition-easing: var(--easings-in-out);
+    transition-timing-function: var(--easings-in-out);
+    --transition-duration: 800ms;
+    transition-duration: 800ms;
+    transition-delay: 200ms;
+}
+
+  [data-mantine-color-scheme="dark"] .likec4-root:not([data-likec4-reduced-graphics]):not([data-likec4-diagram-panning]) .react-flow__edges > svg {
+    mix-blend-mode: plus-lighter;
+}
+
+  :where([data-likec4-text-size='xs']) {
+    --likec4-text-size: var(--font-sizes-likec4-xs);
+}
+
+  :where([data-likec4-text-size='sm']) {
+    --likec4-text-size: var(--font-sizes-likec4-sm);
+}
+
+  :where([data-likec4-text-size='md']) {
+    --likec4-text-size: var(--font-sizes-likec4-md);
+}
+
+  :where([data-likec4-text-size='lg']) {
+    --likec4-text-size: var(--font-sizes-likec4-lg);
+}
+
+  :where([data-likec4-text-size='xl']) {
+    --likec4-text-size: var(--font-sizes-likec4-xl);
+}
+
+  :where([data-likec4-spacing='xs']) {
+    --likec4-spacing: var(--spacing-likec4-xs);
+}
+
+  :where([data-likec4-spacing='sm']) {
+    --likec4-spacing: var(--spacing-likec4-sm);
+}
+
+  :where([data-likec4-spacing='md']) {
+    --likec4-spacing: var(--spacing-likec4-md);
+}
+
+  :where([data-likec4-spacing='lg']) {
+    --likec4-spacing: var(--spacing-likec4-lg);
+}
+
+  :where([data-likec4-spacing='xl']) {
+    --likec4-spacing: var(--spacing-likec4-xl);
+}
+
+  *,::before,::after,::backdrop {
+    --blur: /*-*/ /*-*/;
+    --brightness: /*-*/ /*-*/;
+    --contrast: /*-*/ /*-*/;
+    --grayscale: /*-*/ /*-*/;
+    --hue-rotate: /*-*/ /*-*/;
+    --invert: /*-*/ /*-*/;
+    --saturate: /*-*/ /*-*/;
+    --sepia: /*-*/ /*-*/;
+    --drop-shadow: /*-*/ /*-*/;
+    --backdrop-blur: /*-*/ /*-*/;
+    --backdrop-brightness: /*-*/ /*-*/;
+    --backdrop-contrast: /*-*/ /*-*/;
+    --backdrop-grayscale: /*-*/ /*-*/;
+    --backdrop-hue-rotate: /*-*/ /*-*/;
+    --backdrop-invert: /*-*/ /*-*/;
+    --backdrop-opacity: /*-*/ /*-*/;
+    --backdrop-saturate: /*-*/ /*-*/;
+    --backdrop-sepia: /*-*/ /*-*/;
+    --gradient-from-position: /*-*/ /*-*/;
+    --gradient-to-position: /*-*/ /*-*/;
+    --gradient-via-position: /*-*/ /*-*/;
+    --scroll-snap-strictness: proximity;
+    --border-spacing-x: 0;
+    --border-spacing-y: 0;
+    --translate-x: 0;
+    --translate-y: 0;
+    --rotate: 0;
+    --rotate-x: 0;
+    --rotate-y: 0;
+    --skew-x: 0;
+    --skew-y: 0;
+    --scale-x: 1;
+    --scale-y: 1;
+}
+
+  @property --likec4-palette {
+    syntax: '*';
+
+    inherits: false;
+
+    initial-value: 'likec4.primary';
+  }
+
+  @property --likec4-text-size {
+    syntax: '<length-percentage>';
+
+    inherits: false;
+
+    initial-value: 1rem;
+  }
+
+  @property --likec4-spacing {
+    syntax: '<length-percentage>';
+
+    inherits: false;
+
+    initial-value: 1rem;
+  }
+}
+
+@layer tokens{
+  :where(:root, :host) {
+    --radii-xs: var(--mantine-radius-xs);
+    --radii-sm: var(--mantine-radius-sm);
+    --radii-md: var(--mantine-radius-md);
+    --radii-lg: var(--mantine-radius-lg);
+    --radii-xl: var(--mantine-radius-xl);
+    --font-sizes-xxs: 0.625rem;
+    --font-sizes-xs: calc(0.75rem * var(--mantine-scale));
+    --font-sizes-sm: calc(0.875rem * var(--mantine-scale));
+    --font-sizes-md: calc(1rem * var(--mantine-scale));
+    --font-sizes-lg: calc(1.125rem * var(--mantine-scale));
+    --font-sizes-xl: calc(1.25rem * var(--mantine-scale));
+    --font-sizes-likec4-xs: 0.750rem;
+    --font-sizes-likec4-sm: 0.875rem;
+    --font-sizes-likec4-md: 1.19rem;
+    --font-sizes-likec4-lg: 1.50rem;
+    --font-sizes-likec4-xl: 2.00rem;
+    --shadows-xs: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1);
+    --shadows-sm: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale)) calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
+    --shadows-md: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale)) calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
+    --shadows-lg: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale)) calc(1.4375rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale));
+    --shadows-xl: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) calc(1.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale)) calc(1.0625rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale));
+    --line-heights-1: 1;
+    --line-heights-xs: 1.4;
+    --line-heights-sm: 1.45;
+    --line-heights-md: 1.55;
+    --line-heights-lg: 1.6;
+    --line-heights-xl: 1.65;
+    --borders-none: none;
+    --borders-transparent: 0px solid transparent;
+    --borders-default: 1px solid var(--colors-mantine-colors-default-border);
+    --spacing-0: 0px;
+    --spacing-2: 2px;
+    --spacing-4: 4px;
+    --spacing-8: 8px;
+    --spacing-xs: calc(0.625rem * var(--mantine-scale));
+    --spacing-sm: calc(0.75rem * var(--mantine-scale));
+    --spacing-md: calc(1rem * var(--mantine-scale));
+    --spacing-lg: calc(1.25rem * var(--mantine-scale));
+    --spacing-xl: calc(2rem * var(--mantine-scale));
+    --spacing-likec4-xs: 8px;
+    --spacing-likec4-sm: 10px;
+    --spacing-likec4-md: 16px;
+    --spacing-likec4-lg: 24px;
+    --spacing-likec4-xl: 32px;
+    --spacing-micro: 4px;
+    --spacing-2xs: 8px;
+    --colors-mantine-colors-primary: var(--mantine-primary-color-6);
+    --colors-mantine-colors-primary-filled: var(--mantine-primary-color-filled);
+    --colors-mantine-colors-primary-filled-hover: var(--mantine-primary-color-filled-hover);
+    --colors-mantine-colors-primary-light: var(--mantine-primary-color-light);
+    --colors-mantine-colors-primary-light-hover: var(--mantine-primary-color-light-hover);
+    --colors-mantine-colors-primary-light-color: var(--mantine-primary-color-light-color);
+    --colors-mantine-colors-primary-outline: var(--mantine-primary-color-outline);
+    --colors-mantine-colors-primary-outline-hover: var(--mantine-primary-color-outline-hover);
+    --colors-mantine-colors-primary\[0\]: var(--mantine-primary-color-0);
+    --colors-mantine-colors-primary\[1\]: var(--mantine-primary-color-1);
+    --colors-mantine-colors-primary\[2\]: var(--mantine-primary-color-2);
+    --colors-mantine-colors-primary\[3\]: var(--mantine-primary-color-3);
+    --colors-mantine-colors-primary\[4\]: var(--mantine-primary-color-4);
+    --colors-mantine-colors-primary\[5\]: var(--mantine-primary-color-5);
+    --colors-mantine-colors-primary\[6\]: var(--mantine-primary-color-6);
+    --colors-mantine-colors-primary\[7\]: var(--mantine-primary-color-7);
+    --colors-mantine-colors-primary\[8\]: var(--mantine-primary-color-8);
+    --colors-mantine-colors-primary\[9\]: var(--mantine-primary-color-9);
+    --colors-mantine-colors-white: var(--mantine-color-white);
+    --colors-mantine-colors-text: var(--mantine-color-text);
+    --colors-mantine-colors-body: var(--mantine-color-body);
+    --colors-mantine-colors-dimmed: var(--mantine-color-dimmed);
+    --colors-mantine-colors-default-border: var(--mantine-color-default-border);
+    --colors-mantine-colors-default-color: var(--mantine-color-default-color);
+    --colors-mantine-colors-default-hover: var(--mantine-color-default-hover);
+    --colors-mantine-colors-default: var(--mantine-color-default);
+    --colors-mantine-colors-error: var(--mantine-color-error);
+    --colors-mantine-colors-placeholder: var(--mantine-color-placeholder);
+    --colors-mantine-colors-gray: var(--mantine-color-gray-6);
+    --colors-mantine-colors-gray-filled: var(--mantine-color-gray-filled);
+    --colors-mantine-colors-gray-filled-hover: var(--mantine-color-gray-filled-hover);
+    --colors-mantine-colors-gray-light: var(--mantine-color-gray-light);
+    --colors-mantine-colors-gray-light-hover: var(--mantine-color-gray-light-hover);
+    --colors-mantine-colors-gray-light-color: var(--mantine-color-gray-light-color);
+    --colors-mantine-colors-gray-outline: var(--mantine-color-gray-outline);
+    --colors-mantine-colors-gray-outline-hover: var(--mantine-color-gray-outline-hover);
+    --colors-mantine-colors-gray\[0\]: var(--mantine-color-gray-0);
+    --colors-mantine-colors-gray\[1\]: var(--mantine-color-gray-1);
+    --colors-mantine-colors-gray\[2\]: var(--mantine-color-gray-2);
+    --colors-mantine-colors-gray\[3\]: var(--mantine-color-gray-3);
+    --colors-mantine-colors-gray\[4\]: var(--mantine-color-gray-4);
+    --colors-mantine-colors-gray\[5\]: var(--mantine-color-gray-5);
+    --colors-mantine-colors-gray\[6\]: var(--mantine-color-gray-6);
+    --colors-mantine-colors-gray\[7\]: var(--mantine-color-gray-7);
+    --colors-mantine-colors-gray\[8\]: var(--mantine-color-gray-8);
+    --colors-mantine-colors-gray\[9\]: var(--mantine-color-gray-9);
+    --colors-mantine-colors-dark: var(--mantine-color-dark-6);
+    --colors-mantine-colors-dark-filled: var(--mantine-color-dark-filled);
+    --colors-mantine-colors-dark-filled-hover: var(--mantine-color-dark-filled-hover);
+    --colors-mantine-colors-dark-light: var(--mantine-color-dark-light);
+    --colors-mantine-colors-dark-light-hover: var(--mantine-color-dark-light-hover);
+    --colors-mantine-colors-dark-light-color: var(--mantine-color-dark-light-color);
+    --colors-mantine-colors-dark-outline: var(--mantine-color-dark-outline);
+    --colors-mantine-colors-dark-outline-hover: var(--mantine-color-dark-outline-hover);
+    --colors-mantine-colors-dark\[0\]: var(--mantine-color-dark-0);
+    --colors-mantine-colors-dark\[1\]: var(--mantine-color-dark-1);
+    --colors-mantine-colors-dark\[2\]: var(--mantine-color-dark-2);
+    --colors-mantine-colors-dark\[3\]: var(--mantine-color-dark-3);
+    --colors-mantine-colors-dark\[4\]: var(--mantine-color-dark-4);
+    --colors-mantine-colors-dark\[5\]: var(--mantine-color-dark-5);
+    --colors-mantine-colors-dark\[6\]: var(--mantine-color-dark-6);
+    --colors-mantine-colors-dark\[7\]: var(--mantine-color-dark-7);
+    --colors-mantine-colors-dark\[8\]: var(--mantine-color-dark-8);
+    --colors-mantine-colors-dark\[9\]: var(--mantine-color-dark-9);
+    --colors-mantine-colors-orange: var(--mantine-color-orange-6);
+    --colors-mantine-colors-orange-filled: var(--mantine-color-orange-filled);
+    --colors-mantine-colors-orange-filled-hover: var(--mantine-color-orange-filled-hover);
+    --colors-mantine-colors-orange-light: var(--mantine-color-orange-light);
+    --colors-mantine-colors-orange-light-hover: var(--mantine-color-orange-light-hover);
+    --colors-mantine-colors-orange-light-color: var(--mantine-color-orange-light-color);
+    --colors-mantine-colors-orange-outline: var(--mantine-color-orange-outline);
+    --colors-mantine-colors-orange-outline-hover: var(--mantine-color-orange-outline-hover);
+    --colors-mantine-colors-orange\[0\]: var(--mantine-color-orange-0);
+    --colors-mantine-colors-orange\[1\]: var(--mantine-color-orange-1);
+    --colors-mantine-colors-orange\[2\]: var(--mantine-color-orange-2);
+    --colors-mantine-colors-orange\[3\]: var(--mantine-color-orange-3);
+    --colors-mantine-colors-orange\[4\]: var(--mantine-color-orange-4);
+    --colors-mantine-colors-orange\[5\]: var(--mantine-color-orange-5);
+    --colors-mantine-colors-orange\[6\]: var(--mantine-color-orange-6);
+    --colors-mantine-colors-orange\[7\]: var(--mantine-color-orange-7);
+    --colors-mantine-colors-orange\[8\]: var(--mantine-color-orange-8);
+    --colors-mantine-colors-orange\[9\]: var(--mantine-color-orange-9);
+    --colors-mantine-colors-teal: var(--mantine-color-teal-6);
+    --colors-mantine-colors-teal-filled: var(--mantine-color-teal-filled);
+    --colors-mantine-colors-teal-filled-hover: var(--mantine-color-teal-filled-hover);
+    --colors-mantine-colors-teal-light: var(--mantine-color-teal-light);
+    --colors-mantine-colors-teal-light-hover: var(--mantine-color-teal-light-hover);
+    --colors-mantine-colors-teal-light-color: var(--mantine-color-teal-light-color);
+    --colors-mantine-colors-teal-outline: var(--mantine-color-teal-outline);
+    --colors-mantine-colors-teal-outline-hover: var(--mantine-color-teal-outline-hover);
+    --colors-mantine-colors-teal\[0\]: var(--mantine-color-teal-0);
+    --colors-mantine-colors-teal\[1\]: var(--mantine-color-teal-1);
+    --colors-mantine-colors-teal\[2\]: var(--mantine-color-teal-2);
+    --colors-mantine-colors-teal\[3\]: var(--mantine-color-teal-3);
+    --colors-mantine-colors-teal\[4\]: var(--mantine-color-teal-4);
+    --colors-mantine-colors-teal\[5\]: var(--mantine-color-teal-5);
+    --colors-mantine-colors-teal\[6\]: var(--mantine-color-teal-6);
+    --colors-mantine-colors-teal\[7\]: var(--mantine-color-teal-7);
+    --colors-mantine-colors-teal\[8\]: var(--mantine-color-teal-8);
+    --colors-mantine-colors-teal\[9\]: var(--mantine-color-teal-9);
+    --colors-mantine-colors-red: var(--mantine-color-red-6);
+    --colors-mantine-colors-red-filled: var(--mantine-color-red-filled);
+    --colors-mantine-colors-red-filled-hover: var(--mantine-color-red-filled-hover);
+    --colors-mantine-colors-red-light: var(--mantine-color-red-light);
+    --colors-mantine-colors-red-light-hover: var(--mantine-color-red-light-hover);
+    --colors-mantine-colors-red-light-color: var(--mantine-color-red-light-color);
+    --colors-mantine-colors-red-outline: var(--mantine-color-red-outline);
+    --colors-mantine-colors-red-outline-hover: var(--mantine-color-red-outline-hover);
+    --colors-mantine-colors-red\[0\]: var(--mantine-color-red-0);
+    --colors-mantine-colors-red\[1\]: var(--mantine-color-red-1);
+    --colors-mantine-colors-red\[2\]: var(--mantine-color-red-2);
+    --colors-mantine-colors-red\[3\]: var(--mantine-color-red-3);
+    --colors-mantine-colors-red\[4\]: var(--mantine-color-red-4);
+    --colors-mantine-colors-red\[5\]: var(--mantine-color-red-5);
+    --colors-mantine-colors-red\[6\]: var(--mantine-color-red-6);
+    --colors-mantine-colors-red\[7\]: var(--mantine-color-red-7);
+    --colors-mantine-colors-red\[8\]: var(--mantine-color-red-8);
+    --colors-mantine-colors-red\[9\]: var(--mantine-color-red-9);
+    --colors-mantine-colors-green: var(--mantine-color-green-6);
+    --colors-mantine-colors-green-filled: var(--mantine-color-green-filled);
+    --colors-mantine-colors-green-filled-hover: var(--mantine-color-green-filled-hover);
+    --colors-mantine-colors-green-light: var(--mantine-color-green-light);
+    --colors-mantine-colors-green-light-hover: var(--mantine-color-green-light-hover);
+    --colors-mantine-colors-green-light-color: var(--mantine-color-green-light-color);
+    --colors-mantine-colors-green-outline: var(--mantine-color-green-outline);
+    --colors-mantine-colors-green-outline-hover: var(--mantine-color-green-outline-hover);
+    --colors-mantine-colors-green\[0\]: var(--mantine-color-green-0);
+    --colors-mantine-colors-green\[1\]: var(--mantine-color-green-1);
+    --colors-mantine-colors-green\[2\]: var(--mantine-color-green-2);
+    --colors-mantine-colors-green\[3\]: var(--mantine-color-green-3);
+    --colors-mantine-colors-green\[4\]: var(--mantine-color-green-4);
+    --colors-mantine-colors-green\[5\]: var(--mantine-color-green-5);
+    --colors-mantine-colors-green\[6\]: var(--mantine-color-green-6);
+    --colors-mantine-colors-green\[7\]: var(--mantine-color-green-7);
+    --colors-mantine-colors-green\[8\]: var(--mantine-color-green-8);
+    --colors-mantine-colors-green\[9\]: var(--mantine-color-green-9);
+    --colors-mantine-colors-yellow: var(--mantine-color-yellow-6);
+    --colors-mantine-colors-yellow-filled: var(--mantine-color-yellow-filled);
+    --colors-mantine-colors-yellow-filled-hover: var(--mantine-color-yellow-filled-hover);
+    --colors-mantine-colors-yellow-light: var(--mantine-color-yellow-light);
+    --colors-mantine-colors-yellow-light-hover: var(--mantine-color-yellow-light-hover);
+    --colors-mantine-colors-yellow-light-color: var(--mantine-color-yellow-light-color);
+    --colors-mantine-colors-yellow-outline: var(--mantine-color-yellow-outline);
+    --colors-mantine-colors-yellow-outline-hover: var(--mantine-color-yellow-outline-hover);
+    --colors-mantine-colors-yellow\[0\]: var(--mantine-color-yellow-0);
+    --colors-mantine-colors-yellow\[1\]: var(--mantine-color-yellow-1);
+    --colors-mantine-colors-yellow\[2\]: var(--mantine-color-yellow-2);
+    --colors-mantine-colors-yellow\[3\]: var(--mantine-color-yellow-3);
+    --colors-mantine-colors-yellow\[4\]: var(--mantine-color-yellow-4);
+    --colors-mantine-colors-yellow\[5\]: var(--mantine-color-yellow-5);
+    --colors-mantine-colors-yellow\[6\]: var(--mantine-color-yellow-6);
+    --colors-mantine-colors-yellow\[7\]: var(--mantine-color-yellow-7);
+    --colors-mantine-colors-yellow\[8\]: var(--mantine-color-yellow-8);
+    --colors-mantine-colors-yellow\[9\]: var(--mantine-color-yellow-9);
+    --colors-transparent: transparent;
+    --fonts-body: var(--likec4-app-font, var(--likec4-app-font-default));
+    --fonts-likec4: var(--likec4-app-font, var(--likec4-app-font-default));
+    --fonts-likec4-element: var(--likec4-element-font, var(--fonts-likec4));
+    --fonts-likec4-compound: var(--likec4-compound-font, var(--fonts-likec4));
+    --fonts-likec4-relation: var(--likec4-relation-font, var(--fonts-likec4));
+    --easings-default: cubic-bezier(0.4, 0, 0.2, 1);
+    --easings-in: cubic-bezier(0.4, 0, 1, 1);
+    --easings-out: cubic-bezier(0, 0, 0.40, 1);
+    --easings-in-out: cubic-bezier(0.50, 0, 0.2, 1);
+    --durations-fastest: 50ms;
+    --durations-faster: 100ms;
+    --durations-fast: 130ms;
+    --durations-normal: 170ms;
+    --durations-slow: 300ms;
+    --durations-slower: 400ms;
+    --durations-slowest: 500ms;
+    --breakpoints-xs: 36em;
+    --breakpoints-sm: 48em;
+    --breakpoints-md: 62em;
+    --breakpoints-lg: 75em;
+    --breakpoints-xl: 88em;
+    --sizes-breakpoint-xs: 36em;
+    --sizes-breakpoint-sm: 48em;
+    --sizes-breakpoint-md: 62em;
+    --sizes-breakpoint-lg: 75em;
+    --sizes-breakpoint-xl: 88em;
+    --font-sizes-likec4-text-size: var(--font-sizes-likec4-md);
+    --colors-likec4-background: var(--colors-mantine-colors-body);
+    --colors-likec4-background-pattern: var(--colors-mantine-colors-dark\[5\]);
+    --colors-likec4-amber-element-fill: #A35829;
+    --colors-likec4-amber-element-stroke: #7E451D;
+    --colors-likec4-amber-element-hi-contrast: #FFE0C2;
+    --colors-likec4-amber-element-lo-contrast: #f9b27c;
+    --colors-likec4-amber-relation-stroke: #b45309;
+    --colors-likec4-amber-relation-label: #FFE0C2;
+    --colors-likec4-amber-relation-label-bg: #78350f;
+    --colors-likec4-blue-element-fill: #3b82f6;
+    --colors-likec4-blue-element-stroke: #2563eb;
+    --colors-likec4-blue-element-hi-contrast: #eff6ff;
+    --colors-likec4-blue-element-lo-contrast: #bfdbfe;
+    --colors-likec4-blue-relation-stroke: #3b82f6;
+    --colors-likec4-blue-relation-label: #60a5fa;
+    --colors-likec4-blue-relation-label-bg: #172554;
+    --colors-likec4-gray-element-fill: #737373;
+    --colors-likec4-gray-element-stroke: #525252;
+    --colors-likec4-gray-element-hi-contrast: #fafafa;
+    --colors-likec4-gray-element-lo-contrast: #d4d4d4;
+    --colors-likec4-gray-relation-stroke: #6E6E6E;
+    --colors-likec4-gray-relation-label: #C6C6C6;
+    --colors-likec4-gray-relation-label-bg: #18191b;
+    --colors-likec4-slate-element-fill: #64748b;
+    --colors-likec4-slate-element-stroke: #475569;
+    --colors-likec4-slate-element-hi-contrast: #f8fafc;
+    --colors-likec4-slate-element-lo-contrast: #cbd5e1;
+    --colors-likec4-slate-relation-stroke: #64748b;
+    --colors-likec4-slate-relation-label: #cbd5e1;
+    --colors-likec4-slate-relation-label-bg: #0f172a;
+    --colors-likec4-green-element-fill: #428a4f;
+    --colors-likec4-green-element-stroke: #2d5d39;
+    --colors-likec4-green-element-hi-contrast: #f8fafc;
+    --colors-likec4-green-element-lo-contrast: #c2f0c2;
+    --colors-likec4-green-relation-stroke: #15803d;
+    --colors-likec4-green-relation-label: #22c55e;
+    --colors-likec4-green-relation-label-bg: #052e16;
+    --colors-likec4-indigo-element-fill: #6366f1;
+    --colors-likec4-indigo-element-stroke: #4f46e5;
+    --colors-likec4-indigo-element-hi-contrast: #eef2ff;
+    --colors-likec4-indigo-element-lo-contrast: #c7d2fe;
+    --colors-likec4-indigo-relation-stroke: #6366f1;
+    --colors-likec4-indigo-relation-label: #818cf8;
+    --colors-likec4-indigo-relation-label-bg: #1e1b4b;
+    --colors-likec4-muted-element-fill: #64748b;
+    --colors-likec4-muted-element-stroke: #475569;
+    --colors-likec4-muted-element-hi-contrast: #f8fafc;
+    --colors-likec4-muted-element-lo-contrast: #cbd5e1;
+    --colors-likec4-muted-relation-stroke: #64748b;
+    --colors-likec4-muted-relation-label: #cbd5e1;
+    --colors-likec4-muted-relation-label-bg: #0f172a;
+    --colors-likec4-primary-element-fill: #3b82f6;
+    --colors-likec4-primary-element-stroke: #2563eb;
+    --colors-likec4-primary-element-hi-contrast: #eff6ff;
+    --colors-likec4-primary-element-lo-contrast: #bfdbfe;
+    --colors-likec4-primary-relation-stroke: #3b82f6;
+    --colors-likec4-primary-relation-label: #60a5fa;
+    --colors-likec4-primary-relation-label-bg: #172554;
+    --colors-likec4-red-element-fill: #AC4D39;
+    --colors-likec4-red-element-stroke: #853A2D;
+    --colors-likec4-red-element-hi-contrast: #FBD3CB;
+    --colors-likec4-red-element-lo-contrast: #f5b2a3;
+    --colors-likec4-red-relation-stroke: #AC4D39;
+    --colors-likec4-red-relation-label: #f5b2a3;
+    --colors-likec4-red-relation-label-bg: #b91c1c;
+    --colors-likec4-secondary-element-fill: #0284c7;
+    --colors-likec4-secondary-element-stroke: #0369a1;
+    --colors-likec4-secondary-element-hi-contrast: #f0f9ff;
+    --colors-likec4-secondary-element-lo-contrast: #B6ECF7;
+    --colors-likec4-secondary-relation-stroke: #0ea5e9;
+    --colors-likec4-secondary-relation-label: #38bdf8;
+    --colors-likec4-secondary-relation-label-bg: #082f49;
+    --colors-likec4-sky-element-fill: #0284c7;
+    --colors-likec4-sky-element-stroke: #0369a1;
+    --colors-likec4-sky-element-hi-contrast: #f0f9ff;
+    --colors-likec4-sky-element-lo-contrast: #B6ECF7;
+    --colors-likec4-sky-relation-stroke: #0ea5e9;
+    --colors-likec4-sky-relation-label: #38bdf8;
+    --colors-likec4-sky-relation-label-bg: #082f49;
+    --colors-likec4-compound1-amber-hi-contrast: var(--colors-likec4-amber-element-hi-contrast);
+    --colors-likec4-compound1-amber-lo-contrast: var(--colors-likec4-amber-element-lo-contrast);
+    --colors-likec4-compound1-blue-hi-contrast: var(--colors-likec4-blue-element-hi-contrast);
+    --colors-likec4-compound1-blue-lo-contrast: var(--colors-likec4-blue-element-lo-contrast);
+    --colors-likec4-compound1-gray-hi-contrast: var(--colors-likec4-gray-element-hi-contrast);
+    --colors-likec4-compound1-gray-lo-contrast: var(--colors-likec4-gray-element-lo-contrast);
+    --colors-likec4-compound1-slate-hi-contrast: var(--colors-likec4-slate-element-hi-contrast);
+    --colors-likec4-compound1-slate-lo-contrast: var(--colors-likec4-slate-element-lo-contrast);
+    --colors-likec4-compound1-green-hi-contrast: var(--colors-likec4-green-element-hi-contrast);
+    --colors-likec4-compound1-green-lo-contrast: var(--colors-likec4-green-element-lo-contrast);
+    --colors-likec4-compound1-indigo-hi-contrast: var(--colors-likec4-indigo-element-hi-contrast);
+    --colors-likec4-compound1-indigo-lo-contrast: var(--colors-likec4-indigo-element-lo-contrast);
+    --colors-likec4-compound1-muted-hi-contrast: var(--colors-likec4-muted-element-hi-contrast);
+    --colors-likec4-compound1-muted-lo-contrast: var(--colors-likec4-muted-element-lo-contrast);
+    --colors-likec4-compound1-primary-hi-contrast: var(--colors-likec4-primary-element-hi-contrast);
+    --colors-likec4-compound1-primary-lo-contrast: var(--colors-likec4-primary-element-lo-contrast);
+    --colors-likec4-compound1-red-hi-contrast: var(--colors-likec4-red-element-hi-contrast);
+    --colors-likec4-compound1-red-lo-contrast: var(--colors-likec4-red-element-lo-contrast);
+    --colors-likec4-compound1-secondary-hi-contrast: var(--colors-likec4-secondary-element-hi-contrast);
+    --colors-likec4-compound1-secondary-lo-contrast: var(--colors-likec4-secondary-element-lo-contrast);
+    --colors-likec4-compound1-sky-hi-contrast: var(--colors-likec4-sky-element-hi-contrast);
+    --colors-likec4-compound1-sky-lo-contrast: var(--colors-likec4-sky-element-lo-contrast);
+    --colors-likec4-compound2-amber-hi-contrast: var(--colors-likec4-amber-element-hi-contrast);
+    --colors-likec4-compound2-amber-lo-contrast: var(--colors-likec4-amber-element-lo-contrast);
+    --colors-likec4-compound2-blue-hi-contrast: var(--colors-likec4-blue-element-hi-contrast);
+    --colors-likec4-compound2-blue-lo-contrast: var(--colors-likec4-blue-element-lo-contrast);
+    --colors-likec4-compound2-gray-hi-contrast: var(--colors-likec4-gray-element-hi-contrast);
+    --colors-likec4-compound2-gray-lo-contrast: var(--colors-likec4-gray-element-lo-contrast);
+    --colors-likec4-compound2-slate-hi-contrast: var(--colors-likec4-slate-element-hi-contrast);
+    --colors-likec4-compound2-slate-lo-contrast: var(--colors-likec4-slate-element-lo-contrast);
+    --colors-likec4-compound2-green-hi-contrast: var(--colors-likec4-green-element-hi-contrast);
+    --colors-likec4-compound2-green-lo-contrast: var(--colors-likec4-green-element-lo-contrast);
+    --colors-likec4-compound2-indigo-hi-contrast: var(--colors-likec4-indigo-element-hi-contrast);
+    --colors-likec4-compound2-indigo-lo-contrast: var(--colors-likec4-indigo-element-lo-contrast);
+    --colors-likec4-compound2-muted-hi-contrast: var(--colors-likec4-muted-element-hi-contrast);
+    --colors-likec4-compound2-muted-lo-contrast: var(--colors-likec4-muted-element-lo-contrast);
+    --colors-likec4-compound2-primary-hi-contrast: var(--colors-likec4-primary-element-hi-contrast);
+    --colors-likec4-compound2-primary-lo-contrast: var(--colors-likec4-primary-element-lo-contrast);
+    --colors-likec4-compound2-red-hi-contrast: var(--colors-likec4-red-element-hi-contrast);
+    --colors-likec4-compound2-red-lo-contrast: var(--colors-likec4-red-element-lo-contrast);
+    --colors-likec4-compound2-secondary-hi-contrast: var(--colors-likec4-secondary-element-hi-contrast);
+    --colors-likec4-compound2-secondary-lo-contrast: var(--colors-likec4-secondary-element-lo-contrast);
+    --colors-likec4-compound2-sky-hi-contrast: var(--colors-likec4-sky-element-hi-contrast);
+    --colors-likec4-compound2-sky-lo-contrast: var(--colors-likec4-sky-element-lo-contrast);
+    --colors-likec4-compound3-amber-hi-contrast: var(--colors-likec4-amber-element-hi-contrast);
+    --colors-likec4-compound3-amber-lo-contrast: var(--colors-likec4-amber-element-lo-contrast);
+    --colors-likec4-compound3-blue-hi-contrast: var(--colors-likec4-blue-element-hi-contrast);
+    --colors-likec4-compound3-blue-lo-contrast: var(--colors-likec4-blue-element-lo-contrast);
+    --colors-likec4-compound3-gray-hi-contrast: var(--colors-likec4-gray-element-hi-contrast);
+    --colors-likec4-compound3-gray-lo-contrast: var(--colors-likec4-gray-element-lo-contrast);
+    --colors-likec4-compound3-slate-hi-contrast: var(--colors-likec4-slate-element-hi-contrast);
+    --colors-likec4-compound3-slate-lo-contrast: var(--colors-likec4-slate-element-lo-contrast);
+    --colors-likec4-compound3-green-hi-contrast: var(--colors-likec4-green-element-hi-contrast);
+    --colors-likec4-compound3-green-lo-contrast: var(--colors-likec4-green-element-lo-contrast);
+    --colors-likec4-compound3-indigo-hi-contrast: var(--colors-likec4-indigo-element-hi-contrast);
+    --colors-likec4-compound3-indigo-lo-contrast: var(--colors-likec4-indigo-element-lo-contrast);
+    --colors-likec4-compound3-muted-hi-contrast: var(--colors-likec4-muted-element-hi-contrast);
+    --colors-likec4-compound3-muted-lo-contrast: var(--colors-likec4-muted-element-lo-contrast);
+    --colors-likec4-compound3-primary-hi-contrast: var(--colors-likec4-primary-element-hi-contrast);
+    --colors-likec4-compound3-primary-lo-contrast: var(--colors-likec4-primary-element-lo-contrast);
+    --colors-likec4-compound3-red-hi-contrast: var(--colors-likec4-red-element-hi-contrast);
+    --colors-likec4-compound3-red-lo-contrast: var(--colors-likec4-red-element-lo-contrast);
+    --colors-likec4-compound3-secondary-hi-contrast: var(--colors-likec4-secondary-element-hi-contrast);
+    --colors-likec4-compound3-secondary-lo-contrast: var(--colors-likec4-secondary-element-lo-contrast);
+    --colors-likec4-compound3-sky-hi-contrast: var(--colors-likec4-sky-element-hi-contrast);
+    --colors-likec4-compound3-sky-lo-contrast: var(--colors-likec4-sky-element-lo-contrast);
+    --colors-likec4-compound4-amber-hi-contrast: var(--colors-likec4-amber-element-hi-contrast);
+    --colors-likec4-compound4-amber-lo-contrast: var(--colors-likec4-amber-element-lo-contrast);
+    --colors-likec4-compound4-blue-hi-contrast: var(--colors-likec4-blue-element-hi-contrast);
+    --colors-likec4-compound4-blue-lo-contrast: var(--colors-likec4-blue-element-lo-contrast);
+    --colors-likec4-compound4-gray-hi-contrast: var(--colors-likec4-gray-element-hi-contrast);
+    --colors-likec4-compound4-gray-lo-contrast: var(--colors-likec4-gray-element-lo-contrast);
+    --colors-likec4-compound4-slate-hi-contrast: var(--colors-likec4-slate-element-hi-contrast);
+    --colors-likec4-compound4-slate-lo-contrast: var(--colors-likec4-slate-element-lo-contrast);
+    --colors-likec4-compound4-green-hi-contrast: var(--colors-likec4-green-element-hi-contrast);
+    --colors-likec4-compound4-green-lo-contrast: var(--colors-likec4-green-element-lo-contrast);
+    --colors-likec4-compound4-indigo-hi-contrast: var(--colors-likec4-indigo-element-hi-contrast);
+    --colors-likec4-compound4-indigo-lo-contrast: var(--colors-likec4-indigo-element-lo-contrast);
+    --colors-likec4-compound4-muted-hi-contrast: var(--colors-likec4-muted-element-hi-contrast);
+    --colors-likec4-compound4-muted-lo-contrast: var(--colors-likec4-muted-element-lo-contrast);
+    --colors-likec4-compound4-primary-hi-contrast: var(--colors-likec4-primary-element-hi-contrast);
+    --colors-likec4-compound4-primary-lo-contrast: var(--colors-likec4-primary-element-lo-contrast);
+    --colors-likec4-compound4-red-hi-contrast: var(--colors-likec4-red-element-hi-contrast);
+    --colors-likec4-compound4-red-lo-contrast: var(--colors-likec4-red-element-lo-contrast);
+    --colors-likec4-compound4-secondary-hi-contrast: var(--colors-likec4-secondary-element-hi-contrast);
+    --colors-likec4-compound4-secondary-lo-contrast: var(--colors-likec4-secondary-element-lo-contrast);
+    --colors-likec4-compound4-sky-hi-contrast: var(--colors-likec4-sky-element-hi-contrast);
+    --colors-likec4-compound4-sky-lo-contrast: var(--colors-likec4-sky-element-lo-contrast);
+    --colors-likec4-compound5-amber-hi-contrast: var(--colors-likec4-amber-element-hi-contrast);
+    --colors-likec4-compound5-amber-lo-contrast: var(--colors-likec4-amber-element-lo-contrast);
+    --colors-likec4-compound5-blue-hi-contrast: var(--colors-likec4-blue-element-hi-contrast);
+    --colors-likec4-compound5-blue-lo-contrast: var(--colors-likec4-blue-element-lo-contrast);
+    --colors-likec4-compound5-gray-hi-contrast: var(--colors-likec4-gray-element-hi-contrast);
+    --colors-likec4-compound5-gray-lo-contrast: var(--colors-likec4-gray-element-lo-contrast);
+    --colors-likec4-compound5-slate-hi-contrast: var(--colors-likec4-slate-element-hi-contrast);
+    --colors-likec4-compound5-slate-lo-contrast: var(--colors-likec4-slate-element-lo-contrast);
+    --colors-likec4-compound5-green-hi-contrast: var(--colors-likec4-green-element-hi-contrast);
+    --colors-likec4-compound5-green-lo-contrast: var(--colors-likec4-green-element-lo-contrast);
+    --colors-likec4-compound5-indigo-hi-contrast: var(--colors-likec4-indigo-element-hi-contrast);
+    --colors-likec4-compound5-indigo-lo-contrast: var(--colors-likec4-indigo-element-lo-contrast);
+    --colors-likec4-compound5-muted-hi-contrast: var(--colors-likec4-muted-element-hi-contrast);
+    --colors-likec4-compound5-muted-lo-contrast: var(--colors-likec4-muted-element-lo-contrast);
+    --colors-likec4-compound5-primary-hi-contrast: var(--colors-likec4-primary-element-hi-contrast);
+    --colors-likec4-compound5-primary-lo-contrast: var(--colors-likec4-primary-element-lo-contrast);
+    --colors-likec4-compound5-red-hi-contrast: var(--colors-likec4-red-element-hi-contrast);
+    --colors-likec4-compound5-red-lo-contrast: var(--colors-likec4-red-element-lo-contrast);
+    --colors-likec4-compound5-secondary-hi-contrast: var(--colors-likec4-secondary-element-hi-contrast);
+    --colors-likec4-compound5-secondary-lo-contrast: var(--colors-likec4-secondary-element-lo-contrast);
+    --colors-likec4-compound5-sky-hi-contrast: var(--colors-likec4-sky-element-hi-contrast);
+    --colors-likec4-compound5-sky-lo-contrast: var(--colors-likec4-sky-element-lo-contrast);
+    --colors-likec4-palette: var(--likec4-palette,'likec4.primary');
+    --colors-likec4-palette-fill: var(--colors-likec4-primary-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-primary-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-primary-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-primary-element-lo-contrast);
+    --colors-likec4-relation-stroke: var(--colors-likec4-gray-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-gray-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-gray-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-gray-relation-label-bg);
+}
+
+  [data-mantine-color-scheme="light"] {
+    --colors-likec4-background-pattern: var(--colors-mantine-colors-gray\[4\]);
+    --colors-likec4-amber-relation-stroke-selected: #994708;
+    --colors-likec4-blue-relation-stroke-selected: #326fd1;
+    --colors-likec4-gray-relation-stroke-selected: #5e5e5e;
+    --colors-likec4-slate-relation-stroke-selected: #556376;
+    --colors-likec4-green-relation-stroke-selected: #126d34;
+    --colors-likec4-indigo-relation-stroke-selected: #5457cd;
+    --colors-likec4-muted-relation-stroke-selected: #556376;
+    --colors-likec4-primary-relation-stroke-selected: #326fd1;
+    --colors-likec4-red-relation-stroke-selected: #924130;
+    --colors-likec4-secondary-relation-stroke-selected: #0c8cc6;
+    --colors-likec4-sky-relation-stroke-selected: #0c8cc6;
+    --colors-likec4-compound1-amber-fill: #794524;
+    --colors-likec4-compound1-amber-stroke: #5e361a;
+    --colors-likec4-compound1-blue-fill: #145ed7;
+    --colors-likec4-compound1-blue-stroke: #194bb8;
+    --colors-likec4-compound1-gray-fill: #595959;
+    --colors-likec4-compound1-gray-stroke: #3f3f3f;
+    --colors-likec4-compound1-slate-fill: #4e5a6a;
+    --colors-likec4-compound1-slate-stroke: #384250;
+    --colors-likec4-compound1-green-fill: #35683e;
+    --colors-likec4-compound1-green-stroke: #24462d;
+    --colors-likec4-compound1-indigo-fill: #2529e1;
+    --colors-likec4-compound1-indigo-stroke: #2d24c2;
+    --colors-likec4-compound1-muted-fill: #4e5a6a;
+    --colors-likec4-compound1-muted-stroke: #384250;
+    --colors-likec4-compound1-primary-fill: #145ed7;
+    --colors-likec4-compound1-primary-stroke: #194bb8;
+    --colors-likec4-compound1-red-fill: #803e30;
+    --colors-likec4-compound1-red-stroke: #632f26;
+    --colors-likec4-compound1-secondary-fill: #086392;
+    --colors-likec4-compound1-secondary-stroke: #084f76;
+    --colors-likec4-compound1-sky-fill: #086392;
+    --colors-likec4-compound1-sky-stroke: #084f76;
+    --colors-likec4-compound2-amber-fill: #724325;
+    --colors-likec4-compound2-amber-stroke: #58341b;
+    --colors-likec4-compound2-blue-fill: #195cc8;
+    --colors-likec4-compound2-blue-stroke: #1d4aac;
+    --colors-likec4-compound2-gray-fill: #555555;
+    --colors-likec4-compound2-gray-stroke: #3d3d3d;
+    --colors-likec4-compound2-slate-fill: #4c5665;
+    --colors-likec4-compound2-slate-stroke: #363f4c;
+    --colors-likec4-compound2-green-fill: #35623d;
+    --colors-likec4-compound2-green-stroke: #24422c;
+    --colors-likec4-compound2-indigo-fill: #2428d7;
+    --colors-likec4-compound2-indigo-stroke: #3028b5;
+    --colors-likec4-compound2-muted-fill: #4c5665;
+    --colors-likec4-compound2-muted-stroke: #363f4c;
+    --colors-likec4-compound2-primary-fill: #195cc8;
+    --colors-likec4-compound2-primary-stroke: #1d4aac;
+    --colors-likec4-compound2-red-fill: #793d31;
+    --colors-likec4-compound2-red-stroke: #5e2e26;
+    --colors-likec4-compound2-secondary-fill: #0c5e88;
+    --colors-likec4-compound2-secondary-stroke: #0b4b6e;
+    --colors-likec4-compound2-sky-fill: #0c5e88;
+    --colors-likec4-compound2-sky-stroke: #0b4b6e;
+    --colors-likec4-compound3-amber-fill: #6b4126;
+    --colors-likec4-compound3-amber-stroke: #52321c;
+    --colors-likec4-compound3-blue-fill: #1e59ba;
+    --colors-likec4-compound3-blue-stroke: #2149a0;
+    --colors-likec4-compound3-gray-fill: #525252;
+    --colors-likec4-compound3-gray-stroke: #3a3a3a;
+    --colors-likec4-compound3-slate-fill: #4a5360;
+    --colors-likec4-compound3-slate-stroke: #353d48;
+    --colors-likec4-compound3-green-fill: #345d3c;
+    --colors-likec4-compound3-green-stroke: #243e2a;
+    --colors-likec4-compound3-indigo-fill: #292cc8;
+    --colors-likec4-compound3-indigo-stroke: #322ba9;
+    --colors-likec4-compound3-muted-fill: #4a5360;
+    --colors-likec4-compound3-muted-stroke: #353d48;
+    --colors-likec4-compound3-primary-fill: #1e59ba;
+    --colors-likec4-compound3-primary-stroke: #2149a0;
+    --colors-likec4-compound3-red-fill: #723c31;
+    --colors-likec4-compound3-red-stroke: #582e27;
+    --colors-likec4-compound3-secondary-fill: #10597f;
+    --colors-likec4-compound3-secondary-stroke: #0e4767;
+    --colors-likec4-compound3-sky-fill: #10597f;
+    --colors-likec4-compound3-sky-stroke: #0e4767;
+    --colors-likec4-compound4-amber-fill: #643e27;
+    --colors-likec4-compound4-amber-stroke: #4d301d;
+    --colors-likec4-compound4-blue-fill: #2357ad;
+    --colors-likec4-compound4-blue-stroke: #244795;
+    --colors-likec4-compound4-gray-fill: #4e4e4e;
+    --colors-likec4-compound4-gray-stroke: #383838;
+    --colors-likec4-compound4-slate-fill: #48505b;
+    --colors-likec4-compound4-slate-stroke: #333a44;
+    --colors-likec4-compound4-green-fill: #33573a;
+    --colors-likec4-compound4-green-stroke: #233b29;
+    --colors-likec4-compound4-indigo-fill: #2d30ba;
+    --colors-likec4-compound4-indigo-stroke: #342e9e;
+    --colors-likec4-compound4-muted-fill: #48505b;
+    --colors-likec4-compound4-muted-stroke: #333a44;
+    --colors-likec4-compound4-primary-fill: #2357ad;
+    --colors-likec4-compound4-primary-stroke: #244795;
+    --colors-likec4-compound4-red-fill: #6a3b31;
+    --colors-likec4-compound4-red-stroke: #522d27;
+    --colors-likec4-compound4-secondary-fill: #135475;
+    --colors-likec4-compound4-secondary-stroke: #11435f;
+    --colors-likec4-compound4-sky-fill: #135475;
+    --colors-likec4-compound4-sky-stroke: #11435f;
+    --colors-likec4-compound5-amber-fill: #5d3c28;
+    --colors-likec4-compound5-amber-stroke: #472f1d;
+    --colors-likec4-compound5-blue-fill: #2755a0;
+    --colors-likec4-compound5-blue-stroke: #27468a;
+    --colors-likec4-compound5-gray-fill: #4b4b4b;
+    --colors-likec4-compound5-gray-stroke: #353535;
+    --colors-likec4-compound5-slate-fill: #454c56;
+    --colors-likec4-compound5-slate-stroke: #323841;
+    --colors-likec4-compound5-green-fill: #335238;
+    --colors-likec4-compound5-green-stroke: #223728;
+    --colors-likec4-compound5-indigo-fill: #3133ac;
+    --colors-likec4-compound5-indigo-stroke: #363092;
+    --colors-likec4-compound5-muted-fill: #454c56;
+    --colors-likec4-compound5-muted-stroke: #323841;
+    --colors-likec4-compound5-primary-fill: #2755a0;
+    --colors-likec4-compound5-primary-stroke: #27468a;
+    --colors-likec4-compound5-red-fill: #633a31;
+    --colors-likec4-compound5-red-stroke: #4d2c27;
+    --colors-likec4-compound5-secondary-fill: #164f6c;
+    --colors-likec4-compound5-secondary-stroke: #133f58;
+    --colors-likec4-compound5-sky-fill: #164f6c;
+    --colors-likec4-compound5-sky-stroke: #133f58;
+    --colors-likec4-mix-color: black
+}
+
+  [data-mantine-color-scheme="dark"] {
+    --colors-likec4-amber-relation-stroke-selected: #cb8753;
+    --colors-likec4-blue-relation-stroke-selected: #76a8f9;
+    --colors-likec4-gray-relation-stroke-selected: #9a9a9a;
+    --colors-likec4-slate-relation-stroke-selected: #939eae;
+    --colors-likec4-green-relation-stroke-selected: #5ba677;
+    --colors-likec4-indigo-relation-stroke-selected: #9294f5;
+    --colors-likec4-muted-relation-stroke-selected: #939eae;
+    --colors-likec4-primary-relation-stroke-selected: #76a8f9;
+    --colors-likec4-red-relation-stroke-selected: #c58274;
+    --colors-likec4-secondary-relation-stroke-selected: #56c0f0;
+    --colors-likec4-sky-relation-stroke-selected: #56c0f0;
+    --colors-likec4-compound1-amber-fill: #704225;
+    --colors-likec4-compound1-amber-stroke: #56331b;
+    --colors-likec4-compound1-blue-fill: #1a5bc5;
+    --colors-likec4-compound1-blue-stroke: #1e49a9;
+    --colors-likec4-compound1-gray-fill: #545454;
+    --colors-likec4-compound1-gray-stroke: #3c3c3c;
+    --colors-likec4-compound1-slate-fill: #4b5563;
+    --colors-likec4-compound1-slate-stroke: #363e4b;
+    --colors-likec4-compound1-green-fill: #34613c;
+    --colors-likec4-compound1-green-stroke: #24412b;
+    --colors-likec4-compound1-indigo-fill: #2529d3;
+    --colors-likec4-compound1-indigo-stroke: #3028b2;
+    --colors-likec4-compound1-muted-fill: #4b5563;
+    --colors-likec4-compound1-muted-stroke: #363e4b;
+    --colors-likec4-compound1-primary-fill: #1a5bc5;
+    --colors-likec4-compound1-primary-stroke: #1e49a9;
+    --colors-likec4-compound1-red-fill: #773d30;
+    --colors-likec4-compound1-red-stroke: #5c2e26;
+    --colors-likec4-compound1-secondary-fill: #0d5d86;
+    --colors-likec4-compound1-secondary-stroke: #0b4a6c;
+    --colors-likec4-compound1-sky-fill: #0d5d86;
+    --colors-likec4-compound1-sky-stroke: #0b4a6c;
+    --colors-likec4-compound2-amber-fill: #663e25;
+    --colors-likec4-compound2-amber-stroke: #4e301b;
+    --colors-likec4-compound2-blue-fill: #1e56b1;
+    --colors-likec4-compound2-blue-stroke: #204698;
+    --colors-likec4-compound2-gray-fill: #4e4e4e;
+    --colors-likec4-compound2-gray-stroke: #383838;
+    --colors-likec4-compound2-slate-fill: #474f5c;
+    --colors-likec4-compound2-slate-stroke: #333a45;
+    --colors-likec4-compound2-green-fill: #325839;
+    --colors-likec4-compound2-green-stroke: #223c29;
+    --colors-likec4-compound2-indigo-fill: #282bbf;
+    --colors-likec4-compound2-indigo-stroke: #312aa1;
+    --colors-likec4-compound2-muted-fill: #474f5c;
+    --colors-likec4-compound2-muted-stroke: #333a45;
+    --colors-likec4-compound2-primary-fill: #1e56b1;
+    --colors-likec4-compound2-primary-stroke: #204698;
+    --colors-likec4-compound2-red-fill: #6c3a2f;
+    --colors-likec4-compound2-red-stroke: #542c25;
+    --colors-likec4-compound2-secondary-fill: #105579;
+    --colors-likec4-compound2-secondary-stroke: #0e4462;
+    --colors-likec4-compound2-sky-fill: #105579;
+    --colors-likec4-compound2-sky-stroke: #0e4462;
+    --colors-likec4-compound3-amber-fill: #5c3a25;
+    --colors-likec4-compound3-amber-stroke: #472d1b;
+    --colors-likec4-compound3-blue-fill: #21519f;
+    --colors-likec4-compound3-blue-stroke: #224289;
+    --colors-likec4-compound3-gray-fill: #484848;
+    --colors-likec4-compound3-gray-stroke: #343434;
+    --colors-likec4-compound3-slate-fill: #424a54;
+    --colors-likec4-compound3-slate-stroke: #30363f;
+    --colors-likec4-compound3-green-fill: #305136;
+    --colors-likec4-compound3-green-stroke: #213626;
+    --colors-likec4-compound3-indigo-fill: #2b2dac;
+    --colors-likec4-compound3-indigo-stroke: #312b91;
+    --colors-likec4-compound3-muted-fill: #424a54;
+    --colors-likec4-compound3-muted-stroke: #30363f;
+    --colors-likec4-compound3-primary-fill: #21519f;
+    --colors-likec4-compound3-primary-stroke: #224289;
+    --colors-likec4-compound3-red-fill: #62372e;
+    --colors-likec4-compound3-red-stroke: #4c2a24;
+    --colors-likec4-compound3-secondary-fill: #134e6c;
+    --colors-likec4-compound3-secondary-stroke: #103e57;
+    --colors-likec4-compound3-sky-fill: #134e6c;
+    --colors-likec4-compound3-sky-stroke: #103e57;
+    --colors-likec4-compound4-amber-fill: #533624;
+    --colors-likec4-compound4-amber-stroke: #402a1a;
+    --colors-likec4-compound4-blue-fill: #234c8e;
+    --colors-likec4-compound4-blue-stroke: #243f7a;
+    --colors-likec4-compound4-gray-fill: #434343;
+    --colors-likec4-compound4-gray-stroke: #303030;
+    --colors-likec4-compound4-slate-fill: #3e444d;
+    --colors-likec4-compound4-slate-stroke: #2d323a;
+    --colors-likec4-compound4-green-fill: #2d4932;
+    --colors-likec4-compound4-green-stroke: #1f3123;
+    --colors-likec4-compound4-indigo-fill: #2c2f99;
+    --colors-likec4-compound4-indigo-stroke: #302c82;
+    --colors-likec4-compound4-muted-fill: #3e444d;
+    --colors-likec4-compound4-muted-stroke: #2d323a;
+    --colors-likec4-compound4-primary-fill: #234c8e;
+    --colors-likec4-compound4-primary-stroke: #243f7a;
+    --colors-likec4-compound4-red-fill: #58342c;
+    --colors-likec4-compound4-red-stroke: #442823;
+    --colors-likec4-compound4-secondary-fill: #154660;
+    --colors-likec4-compound4-secondary-stroke: #11384e;
+    --colors-likec4-compound4-sky-fill: #154660;
+    --colors-likec4-compound4-sky-stroke: #11384e;
+    --colors-likec4-compound5-amber-fill: #493223;
+    --colors-likec4-compound5-amber-stroke: #38261a;
+    --colors-likec4-compound5-blue-fill: #25467d;
+    --colors-likec4-compound5-blue-stroke: #243b6c;
+    --colors-likec4-compound5-gray-fill: #3d3d3d;
+    --colors-likec4-compound5-gray-stroke: #2b2b2b;
+    --colors-likec4-compound5-slate-fill: #393e46;
+    --colors-likec4-compound5-slate-stroke: #292e34;
+    --colors-likec4-compound5-green-fill: #2b422f;
+    --colors-likec4-compound5-green-stroke: #1d2c21;
+    --colors-likec4-compound5-indigo-fill: #2d2f87;
+    --colors-likec4-compound5-indigo-stroke: #2f2b73;
+    --colors-likec4-compound5-muted-fill: #393e46;
+    --colors-likec4-compound5-muted-stroke: #292e34;
+    --colors-likec4-compound5-primary-fill: #25467d;
+    --colors-likec4-compound5-primary-stroke: #243b6c;
+    --colors-likec4-compound5-red-fill: #4f312a;
+    --colors-likec4-compound5-red-stroke: #3d2521;
+    --colors-likec4-compound5-secondary-fill: #163f55;
+    --colors-likec4-compound5-secondary-stroke: #123345;
+    --colors-likec4-compound5-sky-fill: #163f55;
+    --colors-likec4-compound5-sky-stroke: #123345;
+    --colors-likec4-mix-color: white
+}
+
+  @keyframes indicatorStrokeOpacity {
+    0% {
+      stroke-opacity: 0.8;
+}
+
+    100% {
+      stroke-opacity: 0.4;
+}
+}
+
+  @keyframes xyedgeAnimated {
+    0% {
+      stroke-dashoffset: 46;
+}
+
+    100% {
+      stroke-dashoffset: 10;
+}
+}
+}
+
+@layer recipes{
+  @layer _base{
+
+    .action-btn {
+      pointer-events: all;
+      cursor: pointer;
+      color: var(--actionbtn-color);
+      opacity: 0.75;
+      --actionbtn-color: var(--colors-likec4-palette-lo-contrast);
+      --actionbtn-color-hovered: var(--colors-likec4-palette-lo-contrast);
+      --actionbtn-color-hovered-btn: var(--colors-likec4-palette-hi-contrast);
+      --actionbtn-bg-idle: color-mix(in srgb , var(--colors-likec4-palette-fill),  transparent 99%);
+      --actionbtn-bg-hovered: color-mix(in srgb , var(--colors-likec4-palette-fill) 65%, var(--colors-likec4-palette-stroke));
+      --actionbtn-bg-hovered-btn: color-mix(in srgb , var(--colors-likec4-palette-fill) 50%, var(--colors-likec4-palette-stroke));
+      --ai-bg: var(--actionbtn-bg-idle);
+      background: var(--ai-bg);
+}
+
+    :where([data-likec4-hovered="true"]) .action-btn {
+      opacity: 1;
+      color: var(--actionbtn-color-hovered);
+      --ai-bg: var(--actionbtn-bg-hovered);
+}
+
+    :is(.likec4-root[data-likec4-diagram-panning]) .action-btn {
+      display: none;
+}
+
+    :where([data-likec4-zoom-small]) .action-btn {
+      display: none;
+}
+
+    .action-btn:is(:hover, [data-hover]) {
+      color: var(--actionbtn-color-hovered-btn);
+      --ai-bg: var(--actionbtn-bg-hovered-btn);
+}
+}
+
+  .action-btn--size_md {
+    --ai-size: var(--ai-size-md);
+}
+
+  .action-btn--radius_md {
+    --ai-radius: var(--mantine-radius-md);
+}
+
+  .action-btn--variant_filled {
+    box-shadow: 1px 1px 3px 0px transparent;
+}
+
+  :where([data-likec4-hovered="true"]) .action-btn--variant_filled {
+    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
+}
+
+  .likec4-root:is([data-likec4-reduced-graphics]) .action-btn--variant_filled {
+    box-shadow: none;
+}
+
+  :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--size_md {
+    --ai-size: var(--ai-size-md);
+}
+
+  .hover\:action-btn--size_md:is(:hover, [data-hover]) {
+    --ai-size: var(--ai-size-md);
+}
+
+  :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--radius_md {
+    --ai-radius: var(--mantine-radius-md);
+}
+
+  .hover\:action-btn--radius_md:is(:hover, [data-hover]) {
+    --ai-radius: var(--mantine-radius-md);
+}
+
+  .action-btn--variant_transparent {
+    --actionbtn-bg-hovered: var(--actionbtn-bg-idle);
+}
+
+  :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--variant_transparent {
+    --actionbtn-bg-hovered: var(--actionbtn-bg-idle);
+}
+
+  .hover\:action-btn--variant_transparent:is(:hover, [data-hover]) {
+    --actionbtn-bg-hovered: var(--actionbtn-bg-idle);
+}
+
+  :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--variant_filled {
+    box-shadow: 1px 1px 3px 0px transparent;
+}
+
+  :where([data-likec4-hovered="true"]) :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--variant_filled {
+    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
+}
+
+  .likec4-root:is([data-likec4-reduced-graphics]) :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--variant_filled {
+    box-shadow: none;
+}
+
+  .hover\:action-btn--variant_filled:is(:hover, [data-hover]) {
+    box-shadow: 1px 1px 3px 0px transparent;
+}
+
+  :where([data-likec4-hovered="true"]) .hover\:action-btn--variant_filled:is(:hover, [data-hover]) {
+    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
+}
+
+  .likec4-root:is([data-likec4-reduced-graphics]) .hover\:action-btn--variant_filled:is(:hover, [data-hover]) {
+    box-shadow: none;
+}
+}
+
+@layer utilities{
+
+  .c_likec4\.palette\.hiContrast {
+    color: var(--colors-likec4-palette-hi-contrast);
+}
+
+  .c_likec4\.palette\.loContrast {
+    color: var(--colors-likec4-palette-lo-contrast);
+}
+
+  .likec4-palette_amber {
+    --likec4-palette: 'likec4.amber';
+    --colors-likec4-palette-fill: var(--colors-likec4-amber-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-amber-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-amber-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-amber-element-lo-contrast);
+}
+
+  .likec4-palette_blue {
+    --likec4-palette: 'likec4.blue';
+    --colors-likec4-palette-fill: var(--colors-likec4-blue-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-blue-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-blue-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-blue-element-lo-contrast);
+}
+
+  .likec4-palette_gray {
+    --likec4-palette: 'likec4.gray';
+    --colors-likec4-palette-fill: var(--colors-likec4-gray-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-gray-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-gray-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-gray-element-lo-contrast);
+}
+
+  .likec4-palette_slate {
+    --likec4-palette: 'likec4.slate';
+    --colors-likec4-palette-fill: var(--colors-likec4-slate-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-slate-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-slate-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-slate-element-lo-contrast);
+}
+
+  .likec4-palette_green {
+    --likec4-palette: 'likec4.green';
+    --colors-likec4-palette-fill: var(--colors-likec4-green-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-green-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-green-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-green-element-lo-contrast);
+}
+
+  .likec4-palette_indigo {
+    --likec4-palette: 'likec4.indigo';
+    --colors-likec4-palette-fill: var(--colors-likec4-indigo-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-indigo-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-indigo-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-indigo-element-lo-contrast);
+}
+
+  .likec4-palette_muted {
+    --likec4-palette: 'likec4.muted';
+    --colors-likec4-palette-fill: var(--colors-likec4-muted-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-muted-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-muted-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-muted-element-lo-contrast);
+}
+
+  .likec4-palette_primary {
+    --likec4-palette: 'likec4.primary';
+    --colors-likec4-palette-fill: var(--colors-likec4-primary-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-primary-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-primary-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-primary-element-lo-contrast);
+}
+
+  .likec4-palette_red {
+    --likec4-palette: 'likec4.red';
+    --colors-likec4-palette-fill: var(--colors-likec4-red-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-red-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-red-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-red-element-lo-contrast);
+}
+
+  .likec4-palette_secondary {
+    --likec4-palette: 'likec4.secondary';
+    --colors-likec4-palette-fill: var(--colors-likec4-secondary-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-secondary-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-secondary-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-secondary-element-lo-contrast);
+}
+
+  .likec4-palette_sky {
+    --likec4-palette: 'likec4.sky';
+    --colors-likec4-palette-fill: var(--colors-likec4-sky-element-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-sky-element-stroke);
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-sky-element-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-sky-element-lo-contrast);
+}
+
+  .likec4-palette_amber\.1 {
+    --likec4-palette: 'likec4.compound1.amber';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound1-amber-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound1-amber-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound1-amber-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound1-amber-stroke);
+}
+
+  .likec4-palette_amber\.2 {
+    --likec4-palette: 'likec4.compound2.amber';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound2-amber-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound2-amber-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound2-amber-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound2-amber-stroke);
+}
+
+  .likec4-palette_amber\.3 {
+    --likec4-palette: 'likec4.compound3.amber';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound3-amber-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound3-amber-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound3-amber-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound3-amber-stroke);
+}
+
+  .likec4-palette_amber\.4 {
+    --likec4-palette: 'likec4.compound4.amber';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound4-amber-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound4-amber-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound4-amber-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound4-amber-stroke);
+}
+
+  .likec4-palette_amber\.5 {
+    --likec4-palette: 'likec4.compound5.amber';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound5-amber-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound5-amber-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound5-amber-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound5-amber-stroke);
+}
+
+  .likec4-palette_blue\.1 {
+    --likec4-palette: 'likec4.compound1.blue';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound1-blue-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound1-blue-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound1-blue-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound1-blue-stroke);
+}
+
+  .likec4-palette_blue\.2 {
+    --likec4-palette: 'likec4.compound2.blue';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound2-blue-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound2-blue-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound2-blue-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound2-blue-stroke);
+}
+
+  .likec4-palette_blue\.3 {
+    --likec4-palette: 'likec4.compound3.blue';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound3-blue-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound3-blue-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound3-blue-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound3-blue-stroke);
+}
+
+  .likec4-palette_blue\.4 {
+    --likec4-palette: 'likec4.compound4.blue';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound4-blue-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound4-blue-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound4-blue-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound4-blue-stroke);
+}
+
+  .likec4-palette_blue\.5 {
+    --likec4-palette: 'likec4.compound5.blue';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound5-blue-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound5-blue-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound5-blue-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound5-blue-stroke);
+}
+
+  .likec4-palette_gray\.1 {
+    --likec4-palette: 'likec4.compound1.gray';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound1-gray-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound1-gray-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound1-gray-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound1-gray-stroke);
+}
+
+  .likec4-palette_gray\.2 {
+    --likec4-palette: 'likec4.compound2.gray';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound2-gray-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound2-gray-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound2-gray-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound2-gray-stroke);
+}
+
+  .likec4-palette_gray\.3 {
+    --likec4-palette: 'likec4.compound3.gray';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound3-gray-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound3-gray-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound3-gray-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound3-gray-stroke);
+}
+
+  .likec4-palette_gray\.4 {
+    --likec4-palette: 'likec4.compound4.gray';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound4-gray-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound4-gray-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound4-gray-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound4-gray-stroke);
+}
+
+  .likec4-palette_gray\.5 {
+    --likec4-palette: 'likec4.compound5.gray';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound5-gray-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound5-gray-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound5-gray-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound5-gray-stroke);
+}
+
+  .likec4-palette_slate\.1 {
+    --likec4-palette: 'likec4.compound1.slate';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound1-slate-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound1-slate-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound1-slate-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound1-slate-stroke);
+}
+
+  .likec4-palette_slate\.2 {
+    --likec4-palette: 'likec4.compound2.slate';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound2-slate-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound2-slate-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound2-slate-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound2-slate-stroke);
+}
+
+  .likec4-palette_slate\.3 {
+    --likec4-palette: 'likec4.compound3.slate';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound3-slate-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound3-slate-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound3-slate-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound3-slate-stroke);
+}
+
+  .likec4-palette_slate\.4 {
+    --likec4-palette: 'likec4.compound4.slate';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound4-slate-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound4-slate-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound4-slate-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound4-slate-stroke);
+}
+
+  .likec4-palette_slate\.5 {
+    --likec4-palette: 'likec4.compound5.slate';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound5-slate-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound5-slate-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound5-slate-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound5-slate-stroke);
+}
+
+  .likec4-palette_green\.1 {
+    --likec4-palette: 'likec4.compound1.green';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound1-green-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound1-green-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound1-green-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound1-green-stroke);
+}
+
+  .likec4-palette_green\.2 {
+    --likec4-palette: 'likec4.compound2.green';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound2-green-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound2-green-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound2-green-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound2-green-stroke);
+}
+
+  .likec4-palette_green\.3 {
+    --likec4-palette: 'likec4.compound3.green';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound3-green-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound3-green-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound3-green-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound3-green-stroke);
+}
+
+  .likec4-palette_green\.4 {
+    --likec4-palette: 'likec4.compound4.green';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound4-green-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound4-green-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound4-green-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound4-green-stroke);
+}
+
+  .likec4-palette_green\.5 {
+    --likec4-palette: 'likec4.compound5.green';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound5-green-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound5-green-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound5-green-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound5-green-stroke);
+}
+
+  .likec4-palette_indigo\.1 {
+    --likec4-palette: 'likec4.compound1.indigo';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound1-indigo-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound1-indigo-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound1-indigo-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound1-indigo-stroke);
+}
+
+  .likec4-palette_indigo\.2 {
+    --likec4-palette: 'likec4.compound2.indigo';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound2-indigo-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound2-indigo-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound2-indigo-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound2-indigo-stroke);
+}
+
+  .likec4-palette_indigo\.3 {
+    --likec4-palette: 'likec4.compound3.indigo';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound3-indigo-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound3-indigo-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound3-indigo-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound3-indigo-stroke);
+}
+
+  .likec4-palette_indigo\.4 {
+    --likec4-palette: 'likec4.compound4.indigo';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound4-indigo-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound4-indigo-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound4-indigo-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound4-indigo-stroke);
+}
+
+  .likec4-palette_indigo\.5 {
+    --likec4-palette: 'likec4.compound5.indigo';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound5-indigo-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound5-indigo-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound5-indigo-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound5-indigo-stroke);
+}
+
+  .likec4-palette_muted\.1 {
+    --likec4-palette: 'likec4.compound1.muted';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound1-muted-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound1-muted-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound1-muted-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound1-muted-stroke);
+}
+
+  .likec4-palette_muted\.2 {
+    --likec4-palette: 'likec4.compound2.muted';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound2-muted-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound2-muted-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound2-muted-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound2-muted-stroke);
+}
+
+  .likec4-palette_muted\.3 {
+    --likec4-palette: 'likec4.compound3.muted';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound3-muted-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound3-muted-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound3-muted-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound3-muted-stroke);
+}
+
+  .likec4-palette_muted\.4 {
+    --likec4-palette: 'likec4.compound4.muted';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound4-muted-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound4-muted-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound4-muted-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound4-muted-stroke);
+}
+
+  .likec4-palette_muted\.5 {
+    --likec4-palette: 'likec4.compound5.muted';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound5-muted-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound5-muted-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound5-muted-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound5-muted-stroke);
+}
+
+  .likec4-palette_primary\.1 {
+    --likec4-palette: 'likec4.compound1.primary';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound1-primary-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound1-primary-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound1-primary-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound1-primary-stroke);
+}
+
+  .likec4-palette_primary\.2 {
+    --likec4-palette: 'likec4.compound2.primary';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound2-primary-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound2-primary-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound2-primary-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound2-primary-stroke);
+}
+
+  .likec4-palette_primary\.3 {
+    --likec4-palette: 'likec4.compound3.primary';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound3-primary-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound3-primary-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound3-primary-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound3-primary-stroke);
+}
+
+  .likec4-palette_primary\.4 {
+    --likec4-palette: 'likec4.compound4.primary';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound4-primary-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound4-primary-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound4-primary-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound4-primary-stroke);
+}
+
+  .likec4-palette_primary\.5 {
+    --likec4-palette: 'likec4.compound5.primary';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound5-primary-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound5-primary-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound5-primary-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound5-primary-stroke);
+}
+
+  .likec4-palette_red\.1 {
+    --likec4-palette: 'likec4.compound1.red';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound1-red-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound1-red-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound1-red-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound1-red-stroke);
+}
+
+  .likec4-palette_red\.2 {
+    --likec4-palette: 'likec4.compound2.red';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound2-red-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound2-red-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound2-red-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound2-red-stroke);
+}
+
+  .likec4-palette_red\.3 {
+    --likec4-palette: 'likec4.compound3.red';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound3-red-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound3-red-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound3-red-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound3-red-stroke);
+}
+
+  .likec4-palette_red\.4 {
+    --likec4-palette: 'likec4.compound4.red';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound4-red-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound4-red-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound4-red-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound4-red-stroke);
+}
+
+  .likec4-palette_red\.5 {
+    --likec4-palette: 'likec4.compound5.red';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound5-red-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound5-red-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound5-red-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound5-red-stroke);
+}
+
+  .likec4-palette_secondary\.1 {
+    --likec4-palette: 'likec4.compound1.secondary';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound1-secondary-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound1-secondary-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound1-secondary-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound1-secondary-stroke);
+}
+
+  .likec4-palette_secondary\.2 {
+    --likec4-palette: 'likec4.compound2.secondary';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound2-secondary-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound2-secondary-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound2-secondary-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound2-secondary-stroke);
+}
+
+  .likec4-palette_secondary\.3 {
+    --likec4-palette: 'likec4.compound3.secondary';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound3-secondary-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound3-secondary-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound3-secondary-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound3-secondary-stroke);
+}
+
+  .likec4-palette_secondary\.4 {
+    --likec4-palette: 'likec4.compound4.secondary';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound4-secondary-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound4-secondary-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound4-secondary-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound4-secondary-stroke);
+}
+
+  .likec4-palette_secondary\.5 {
+    --likec4-palette: 'likec4.compound5.secondary';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound5-secondary-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound5-secondary-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound5-secondary-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound5-secondary-stroke);
+}
+
+  .likec4-palette_sky\.1 {
+    --likec4-palette: 'likec4.compound1.sky';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound1-sky-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound1-sky-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound1-sky-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound1-sky-stroke);
+}
+
+  .likec4-palette_sky\.2 {
+    --likec4-palette: 'likec4.compound2.sky';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound2-sky-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound2-sky-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound2-sky-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound2-sky-stroke);
+}
+
+  .likec4-palette_sky\.3 {
+    --likec4-palette: 'likec4.compound3.sky';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound3-sky-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound3-sky-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound3-sky-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound3-sky-stroke);
+}
+
+  .likec4-palette_sky\.4 {
+    --likec4-palette: 'likec4.compound4.sky';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound4-sky-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound4-sky-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound4-sky-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound4-sky-stroke);
+}
+
+  .likec4-palette_sky\.5 {
+    --likec4-palette: 'likec4.compound5.sky';
+    --colors-likec4-palette-hi-contrast: var(--colors-likec4-compound5-sky-hi-contrast);
+    --colors-likec4-palette-lo-contrast: var(--colors-likec4-compound5-sky-lo-contrast);
+    --colors-likec4-palette-fill: var(--colors-likec4-compound5-sky-fill);
+    --colors-likec4-palette-stroke: var(--colors-likec4-compound5-sky-stroke);
+}
+
+  .likec4-relation-color_amber {
+    --likec4-palette: 'likec4.amber';
+    --colors-likec4-relation-stroke: var(--colors-likec4-amber-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-amber-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-amber-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-amber-relation-label-bg);
+}
+
+  .likec4-relation-color_blue {
+    --likec4-palette: 'likec4.blue';
+    --colors-likec4-relation-stroke: var(--colors-likec4-blue-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-blue-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-blue-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-blue-relation-label-bg);
+}
+
+  .likec4-relation-color_gray {
+    --likec4-palette: 'likec4.gray';
+    --colors-likec4-relation-stroke: var(--colors-likec4-gray-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-gray-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-gray-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-gray-relation-label-bg);
+}
+
+  .likec4-relation-color_slate {
+    --likec4-palette: 'likec4.slate';
+    --colors-likec4-relation-stroke: var(--colors-likec4-slate-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-slate-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-slate-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-slate-relation-label-bg);
+}
+
+  .likec4-relation-color_green {
+    --likec4-palette: 'likec4.green';
+    --colors-likec4-relation-stroke: var(--colors-likec4-green-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-green-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-green-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-green-relation-label-bg);
+}
+
+  .likec4-relation-color_indigo {
+    --likec4-palette: 'likec4.indigo';
+    --colors-likec4-relation-stroke: var(--colors-likec4-indigo-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-indigo-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-indigo-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-indigo-relation-label-bg);
+}
+
+  .likec4-relation-color_muted {
+    --likec4-palette: 'likec4.muted';
+    --colors-likec4-relation-stroke: var(--colors-likec4-muted-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-muted-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-muted-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-muted-relation-label-bg);
+}
+
+  .likec4-relation-color_primary {
+    --likec4-palette: 'likec4.primary';
+    --colors-likec4-relation-stroke: var(--colors-likec4-primary-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-primary-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-primary-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-primary-relation-label-bg);
+}
+
+  .likec4-relation-color_red {
+    --likec4-palette: 'likec4.red';
+    --colors-likec4-relation-stroke: var(--colors-likec4-red-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-red-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-red-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-red-relation-label-bg);
+}
+
+  .likec4-relation-color_secondary {
+    --likec4-palette: 'likec4.secondary';
+    --colors-likec4-relation-stroke: var(--colors-likec4-secondary-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-secondary-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-secondary-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-secondary-relation-label-bg);
+}
+
+  .likec4-relation-color_sky {
+    --likec4-palette: 'likec4.sky';
+    --colors-likec4-relation-stroke: var(--colors-likec4-sky-relation-stroke);
+    --colors-likec4-relation-stroke-selected: var(--colors-likec4-sky-relation-stroke-selected);
+    --colors-likec4-relation-label: var(--colors-likec4-sky-relation-label);
+    --colors-likec4-relation-label-bg: var(--colors-likec4-sky-relation-label-bg);
+}
+}