@heymantle/litho 0.0.1

package/index.css

@@ -0,0 +1,1137 @@
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+  --spacing: 4px;
+
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 800px;
+  --breakpoint-lg: 1038px;
+  --breakpoint-xl: 1440px;
+  --breakpoint-2xl: 1600px;
+
+  --container-sm: 480px;
+  --container-md: 800px;
+  --container-lg: 1038px;
+  --container-xl: 1440px;
+  --container-2xl: 1600px;
+
+  --container-sm-embed: 480px;
+  --container-md-embed: 586px;
+  --container-lg-embed: 824px;
+  --container-xl-embed: 1186px;
+  --container-2xl-embed: 1386px;
+
+  --font-sans: 'Inter var', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --text-xxs: 1.1rem;
+  --text-xs: 1.2rem;
+  --text-sm: 1.3rem;
+  --text-base: 1.4rem;
+  --text-md: 1.5rem;
+  --text-lg: 1.6rem;
+  --text-xl: 1.8rem;
+  --text-2xl: 2rem;
+  --text-3xl: 2.4rem;
+  --text-4xl: 3rem;
+
+  --leading-none: 1;
+  --leading-tightest: 1.1;
+  --leading-tighter: 1.2;
+  --leading-tight: 1.3;
+  --leading-normal: 1.4;
+  --leading-loose: 1.5;
+  --leading-looser: 1.6;
+  --leading-loosest: 1.8;
+  --leading-4: 1.6rem;
+  --leading-5: 2rem;
+  --leading-6: 2.4rem;
+  --leading-7: 2.8rem;
+  --leading-8: 3.2rem;
+  --leading-10: 4rem;
+  --leading-12: 4.8rem;
+  --leading-14: 5.6rem;
+  --leading-16: 6.4rem;
+
+  --radius-none: 0;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-full: 9999px;
+  --radius-max: 50%;
+
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-transparent: transparent;
+  --color-black-opaque: rgba(0, 0, 0, 1);
+  --color-black-transparent: rgba(0, 0, 0, 0);
+
+  --color-brand: #ffbb70;
+  --color-brand-low: #f5b46c;
+  --color-brand-lower: #ebac67;
+  --color-brand-alternate: #de7d14;
+  --color-brand-saturated: #ffb64e;
+
+  --color-tint-1: rgba(2, 2, 3, 0.03);
+  --color-tint-2: rgba(2, 2, 3, 0.06);
+  --color-tint-3: rgba(2, 2, 3, 0.09);
+  --color-tint-4: rgba(2, 2, 3, 0.12);
+  --color-tint-5: rgba(2, 2, 3, 0.15);
+  --color-tint-6: rgba(2, 2, 3, 0.18);
+  --color-tint-7: rgba(2, 2, 3, 0.21);
+  --color-tint-8: rgba(2, 2, 3, 0.24);
+  --color-tint-9: rgba(2, 2, 3, 0.27);
+  --color-tint-10: rgba(2, 2, 3, 0.3);
+  --color-tint-11: rgba(2, 2, 3, 0.33);
+  --color-tint-12: rgba(2, 2, 3, 0.36);
+  --color-tint-13: rgba(2, 2, 3, 0.39);
+  --color-tint-14: rgba(2, 2, 3, 0.42);
+  --color-tint-15: rgba(2, 2, 3, 0.45);
+  --color-tint-16: rgba(2, 2, 3, 0.48);
+  --color-tint-17: rgba(2, 2, 3, 0.51);
+  --color-tint-18: rgba(2, 2, 3, 0.54);
+  --color-tint-19: rgba(2, 2, 3, 0.57);
+  --color-tint-20: rgba(2, 2, 3, 0.6);
+  --color-tint-25: rgba(2, 2, 3, 0.8);
+
+  --color-tint-alt-1: rgba(238, 238, 242, 0.03);
+  --color-tint-alt-2: rgba(238, 238, 242, 0.06);
+  --color-tint-alt-3: rgba(238, 238, 242, 0.09);
+  --color-tint-alt-4: rgba(238, 238, 242, 0.12);
+  --color-tint-alt-5: rgba(238, 238, 242, 0.15);
+  --color-tint-alt-6: rgba(238, 238, 242, 0.18);
+  --color-tint-alt-7: rgba(238, 238, 242, 0.21);
+  --color-tint-alt-8: rgba(238, 238, 242, 0.24);
+  --color-tint-alt-9: rgba(238, 238, 242, 0.27);
+  --color-tint-alt-10: rgba(238, 238, 242, 0.3);
+  --color-tint-alt-11: rgba(238, 238, 242, 0.33);
+  --color-tint-alt-12: rgba(238, 238, 242, 0.36);
+  --color-tint-alt-13: rgba(238, 238, 242, 0.39);
+  --color-tint-alt-14: rgba(238, 238, 242, 0.42);
+  --color-tint-alt-15: rgba(238, 238, 242, 0.45);
+  --color-tint-alt-16: rgba(238, 238, 242, 0.48);
+  --color-tint-alt-17: rgba(238, 238, 242, 0.51);
+  --color-tint-alt-18: rgba(238, 238, 242, 0.54);
+  --color-tint-alt-19: rgba(238, 238, 242, 0.57);
+  --color-tint-alt-20: rgba(238, 238, 242, 0.6);
+  --color-tint-alt-25: rgba(238, 238, 242, 0.8);
+
+  --color-chart-purple: #8c63fc;
+  --color-chart-yellow: #ffb64e;
+  --color-chart-blue: #3f8ae0;
+  --color-chart-orange: #ff834e;
+  --color-chart-green: #1a8b43;
+  --color-chart-red: #d22323;
+  --color-chart-pink: #e863fc;
+  --color-chart-purple-alt: #d0bfff;
+  --color-chart-yellow-alt: #ffdd80;
+  --color-chart-blue-alt: #a6f7ff;
+  --color-chart-orange-alt: #ffb47a;
+  --color-chart-green-alt: #a6ffc9;
+  --color-chart-red-alt: #ffa6a6;
+  --color-chart-pink-alt: #f5b3ff;
+
+  --color-surface-highest: #ffffff;
+  --color-surface-higher: #f7f6f5;
+  --color-surface-normal: #f2f0ee;
+  --color-surface-lower: #ebe9e7;
+  --color-surface-lowest: #e6e4e2;
+  --color-surface-selected: #fff6ed;
+  --color-surface-alternate: #0f0e12;
+
+  --color-highest: #000000;
+  --color-higher: #141413;
+  --color-high: #292726;
+  --color-normal: #3d3b39;
+  --color-low: #5c5855;
+  --color-lower: #75716d;
+  --color-lowest: #8f8a84;
+  --color-alternate: #ffffff;
+
+  --color-fg-success: #0e4d25;
+  --color-fg-success-alternate: #41e67c;
+  --color-fg-critical: #ad1d1d;
+  --color-fg-critical-alternate: #ff6969;
+  --color-fg-caution: #805500;
+  --color-fg-caution-alternate: #ffb729;
+
+  --color-link: #954b00;
+  --color-link-lower: #613100;
+  --color-link-alternate: #ffbd7b;
+
+  --color-edge-darker: rgba(2, 2, 3, 0.42);
+  --color-edge-dark: rgba(2, 2, 3, 0.3);
+  --color-edge-default: rgba(2, 2, 3, 0.21);
+  --color-edge-subdued: rgba(2, 2, 3, 0.12);
+  --color-edge-alt-darker: rgba(238, 238, 242, 0.42);
+  --color-edge-alt-dark: rgba(238, 238, 242, 0.3);
+  --color-edge-alt-default: rgba(238, 238, 242, 0.21);
+  --color-edge-alt-subdued: rgba(238, 238, 242, 0.12);
+
+  --color-success: #1a8b43;
+  --color-success-low: #157337;
+  --color-success-lower: #11592b;
+  --color-success-lowest: #0c401f;
+  --color-success-fg: #ffffff;
+  --color-success-icon: #9edeb5;
+  --color-success-alt: #c4f5d7;
+  --color-success-alt-lower: #aee8c5;
+  --color-success-alt-fg: #060d09;
+  --color-success-alt-icon: #336645;
+
+  --color-critical: #d22323;
+  --color-critical-low: #b81f1f;
+  --color-critical-lower: #911818;
+  --color-critical-lowest: #6b1212;
+  --color-critical-fg: #ffffff;
+  --color-critical-icon: #ffa8a8;
+  --color-critical-alt: #ffbfbf;
+  --color-critical-alt-lower: #f2aaaa;
+  --color-critical-alt-fg: #0d0606;
+  --color-critical-alt-icon: #663333;
+
+  --color-warning: #ff834e;
+  --color-warning-low: #e67646;
+  --color-warning-lower: #bf623b;
+  --color-warning-lowest: #994f2f;
+  --color-warning-fg: #111014;
+  --color-warning-icon: #9f3c12;
+  --color-warning-alt: #ffc6a3;
+  --color-warning-alt-lower: #f2b58f;
+  --color-warning-alt-fg: #0d0906;
+  --color-warning-alt-icon: #664033;
+
+  --color-attention: #ffb64e;
+  --color-attention-low: #e6a446;
+  --color-attention-lower: #bf893b;
+  --color-attention-lowest: #996d2f;
+  --color-attention-fg: #111014;
+  --color-attention-icon: #794a07;
+  --color-attention-alt: #ffe399;
+  --color-attention-alt-lower: #f2d485;
+  --color-attention-alt-fg: #0d0b06;
+  --color-attention-alt-icon: #665833;
+
+  --color-info: #3f8ae0;
+  --color-info-low: #387bc7;
+  --color-info-lower: #2d63a1;
+  --color-info-lowest: #224b7a;
+  --color-info-fg: #ffffff;
+  --color-info-icon: #bcdbff;
+  --color-info-alt: #c9f1f5;
+  --color-info-alt-lower: #b3e3e8;
+  --color-info-alt-fg: #060c0d;
+  --color-info-alt-icon: #336166;
+
+  --color-highlight: #8c63fc;
+  --color-highlight-low: #7e59e3;
+  --color-highlight-lower: #694abd;
+  --color-highlight-lowest: #543b96;
+  --color-highlight-fg: #ffffff;
+  --color-highlight-icon: #c8b4ff;
+  --color-highlight-alt: #d7cafc;
+  --color-highlight-alt-lower: #c3b4f0;
+  --color-highlight-alt-fg: #08060d;
+  --color-highlight-alt-icon: #403366;
+
+  --color-insight: #e863fc;
+  --color-insight-low: #d159e3;
+  --color-insight-lower: #ae4abd;
+  --color-insight-lowest: #8a3b96;
+  --color-insight-fg: #111014;
+  --color-insight-icon: #650274;
+  --color-insight-alt: #f5cafc;
+  --color-insight-alt-lower: #e7b4f0;
+  --color-insight-alt-fg: #0c060d;
+  --color-insight-alt-icon: #5f3366;
+
+  --color-neutral: #9b8e82;
+  --color-neutral-low: #82776d;
+  --color-neutral-lower: #615951;
+  --color-neutral-lowest: #403a35;
+  --color-neutral-fg: #ffffff;
+  --color-neutral-icon: #e6d5c6;
+  --color-neutral-alt: #e6ddd5;
+  --color-neutral-alt-lower: #d9cbbf;
+  --color-neutral-alt-fg: #0d0906;
+  --color-neutral-alt-icon: #664b33;
+
+  --color-btn-primary: #0f0e12;
+  --color-btn-primary-low: #09080a;
+  --color-btn-primary-lower: #020203;
+  --color-btn-primary-fg: #f7f6f5;
+  --color-btn-primary-fg-alt: #ffffff;
+  --color-btn-primary-icon: #f7f6f5;
+  --color-btn-primary-border: #0f0e12;
+  --color-btn-primary-border-low: #09080a;
+  --color-btn-primary-disabled: rgba(2, 2, 3, 0.09);
+  --color-btn-primary-disabled-fg: #99948e;
+
+  --color-btn-secondary: #ffffff;
+  --color-btn-secondary-low: #f7f7f7;
+  --color-btn-secondary-lower: #efefef;
+  --color-btn-secondary-fg: #292726;
+  --color-btn-secondary-fg-alt: #141413;
+  --color-btn-secondary-icon: #292726;
+  --color-btn-secondary-border: #c9c9c9;
+  --color-btn-secondary-border-low: #bdbdbc;
+  --color-btn-secondary-disabled: rgba(2, 2, 3, 0.09);
+  --color-btn-secondary-disabled-fg: #99948e;
+
+  --color-btn-plain: transparent;
+  --color-btn-plain-low: rgba(2, 2, 3, 0.06);
+  --color-btn-plain-lower: rgba(2, 2, 3, 0.09);
+  --color-btn-plain-fg: #292726;
+  --color-btn-plain-fg-alt: #141413;
+  --color-btn-plain-icon: #292726;
+  --color-btn-plain-border: transparent;
+  --color-btn-plain-border-low: transparent;
+  --color-btn-plain-disabled: transparent;
+  --color-btn-plain-disabled-fg: #99948e;
+
+  --color-btn-link: transparent;
+  --color-btn-link-low: rgba(2, 2, 3, 0.06);
+  --color-btn-link-lower: rgba(2, 2, 3, 0.09);
+  --color-btn-link-fg: #954b00;
+  --color-btn-link-fg-alt: #613100;
+  --color-btn-link-icon: #954b00;
+  --color-btn-link-border: transparent;
+  --color-btn-link-border-low: transparent;
+  --color-btn-link-disabled: transparent;
+  --color-btn-link-disabled-fg: #99948e;
+
+  --color-btn-destructive: #d22323;
+  --color-btn-destructive-low: #b81f1f;
+  --color-btn-destructive-lower: #911818;
+  --color-btn-destructive-fg: #f7f6f5;
+  --color-btn-destructive-fg-alt: #ffffff;
+  --color-btn-destructive-icon: #f7f6f5;
+  --color-btn-destructive-border: #d22323;
+  --color-btn-destructive-border-low: #b81f1f;
+  --color-btn-destructive-disabled: rgba(2, 2, 3, 0.09);
+  --color-btn-destructive-disabled-fg: #99948e;
+
+  --color-btn-highlight: #ffbb70;
+  --color-btn-highlight-low: #f5b46c;
+  --color-btn-highlight-lower: #ebac67;
+  --color-btn-highlight-fg: #292726;
+  --color-btn-highlight-fg-alt: #141413;
+  --color-btn-highlight-icon: #292726;
+  --color-btn-highlight-border: #ffbb70;
+  --color-btn-highlight-border-low: #f5b46c;
+  --color-btn-highlight-disabled: #ffbb70;
+  --color-btn-highlight-disabled-fg: #66635f;
+
+  --color-form-accent: #ffb64e;
+  --color-form-bg: #ffffff;
+  --color-form-bg-hover: #fcfcfc;
+  --color-form-bg-focus: #ffffff;
+  --color-form-bg-disabled: #eeecea;
+  --color-form-bg-error: #fffafa;
+  --color-form-bg-error-low: #faf2f2;
+
+  --color-form-border: #bdbcbb;
+  --color-form-border-hover: #a3a2a1;
+  --color-form-border-focus: #ffab56;
+  --color-form-border-error: #d22323;
+  --color-form-focus: rgba(255, 189, 123, 0.4);
+  --color-form-focus-active: rgba(255, 189, 123, 1);
+  --color-form-focus-error: rgba(210, 35, 35, 0.3);
+
+  --color-form-placeholder: #99938e;
+  --color-form-placeholder-error: #998484;
+  --color-form-input-fg-light: #954b00;
+  --color-form-input-fg: #2e1700;
+  --color-form-input-fg-disabled: #99938d;
+
+  --color-tab-active-bg: #ffe6cc;
+  --color-tab-active-bg-hover: #f7dfc6;
+  --color-tab-active-bg-active: #f0d8c0;
+  --color-tab-active-fg: #954b00;
+  --color-tab-active-fg-low: #2e1700;
+
+  --color-tab-inactive-bg: transparent;
+  --color-tab-inactive-bg-hover: rgba(2, 2, 3, 0.06);
+  --color-tab-inactive-bg-active: rgba(2, 2, 3, 0.09);
+  --color-tab-inactive-fg: #33312f;
+  --color-tab-inactive-fg-low: #33312f;
+
+  --color-tag-bg: #cccac8;
+  --color-tag-bg-hover: #bfbdbb;
+  --color-tag-bg-disabled: #f5f3f1;
+  --color-tag-fg: #33312f;
+  --color-tag-fg-icon: #4d4a47;
+  --color-tag-fg-disabled: #66625e;
+
+  --color-brand-paypal: #003087;
+  --color-brand-stripe: #6772e5;
+  --color-brand-shopify: #96bf48;
+
+  --shadow-none: 0 0 0 0 transparent;
+  --shadow-frame-header: 0px 1px 2px 1px rgba(2, 2, 3, 0.06);
+  --shadow-card: 0px 1px 1px 0px rgba(2, 2, 3, 0.12);
+  --shadow-card-offset: 0px 1px 1px 1px rgba(2, 2, 3, 0.12);
+  --shadow-card-strong: 0px 1px 2px 1px rgba(2, 2, 3, 0.12);
+  --shadow-popover: 0px 1px 2px 1px rgba(2, 2, 3, 0.15);
+  --shadow-btn: 0px 1px 4px 1px rgba(2, 2, 3, 0.2);
+  --shadow-btn-pressed: inset 0 0 0 30px rgba(2, 2, 3, 0.1), inset 0 1px 2px 1px rgba(2, 2, 3, 0.15);
+  --shadow-modal: 0px 1px 5px 1px rgba(2, 2, 3, 0.2);
+  --shadow-table-scroll: 0 0 10px 2px rgba(2, 2, 3, 0.15);
+  --shadow-table-scroll-hidden: 0 0 10px 2px rgba(2, 2, 3, 0);
+  --shadow-table-header: 0px 1px 1px 0px rgba(2, 2, 3, 0.25);
+  --shadow-inset: inset 0 0 0 1px rgba(2, 2, 3, 0.1);
+
+  --shadow-popover-dark: 0px 1px 3px 2px rgba(2, 2, 3, 0.3);
+  --shadow-card-dark: 0px 1px 3px 2px rgba(2, 2, 3, 0.15);
+  --shadow-btn-dark: 0px 0px 0px 1px rgba(2, 2, 3, 0.25), 0px 1px 4px 0px rgba(2, 2, 3, 0.06);
+  --shadow-btn-pressed-dark: 0px 0px 0px 1px rgba(2, 2, 3, 0.25), 0px 1px 4px 0px rgba(2, 2, 3, 0.06);
+  --shadow-modal-dark: 0px 1px 10px 6px rgba(2, 2, 3, 0.3);
+
+  --animate-bounce: bounce 1.5s infinite;
+  --animate-fade: fade 200ms forwards;
+  --animate-sonar: sonar 2s ease-out infinite;
+  --animate-spin: spin 1s linear infinite;
+  --animate-spin-slow: spin 1.4s linear infinite;
+  --animate-spin-fast: spin 0.6s linear infinite;
+  --animate-spin-moon: spin 600s linear infinite;
+
+  --default-ring-width: 3px;
+  --default-ring-color: var(--color-form-focus);
+
+  /* animation */
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateX(0);
+    }
+    50% {
+      transform: translateX(-10px);
+    }
+  }
+
+  @keyframes fade {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes sonar {
+    0% {
+      transform-origin: center center;
+      transform: scale(0.8);
+      opacity: 0.8;
+    }
+    5% {
+      transform-origin: center center;
+      transform: scale(1.2);
+      opacity: 0.4;
+    }
+    10% {
+      transform-origin: center center;
+      transform: scale(1.5);
+      opacity: 0;
+    }
+    100% {
+      transform-origin: center center;
+      transform: scale(1.5);
+      opacity: 0;
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+@layer base {
+  ::selection {
+    @apply bg-brand-lower text-black;
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-edge-default, currentColor);
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    @apply cursor-pointer;
+  }
+
+  html {
+    color-scheme: light;
+    font-size: 62.5%;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    background-color: var(--color-surface-normal);
+    @apply relative bg-surface-normal;
+  }
+
+  html[data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  html, body {
+    overscroll-behavior: none;
+  }
+
+  html, body, #__next, #__next > div {
+    @apply h-full;
+  }
+
+  body {
+    font-feature-settings: "calt" 0;
+    overscroll-behavior-x: none;
+    @apply bg-surface-normal text-base text-high leading-5;
+  }
+
+  * {
+    @apply box-border p-0 m-0;
+  }
+
+  a {
+    font-size: inherit;
+    @apply no-underline;
+  }
+
+  hr {
+    @apply border-none border-t border-edge-dark my-3;
+  }
+
+  input, textarea {
+    @apply text-lg md:text-base;
+  }
+  
+  button, select {
+    @apply text-base;
+  }
+
+  :root {
+    --litho-top-bar-height: 56px;
+    --litho-header-offset: 0px;
+    --litho-header-height: 56px;
+    --litho-nav-width: 214px;
+    --litho-table-header-sticky-at: 56px;
+    --litho-pane-width: 400px;
+
+    overscroll-behavior: none;
+  }
+
+  [data-theme="dark"] {
+    --color-surface-highest: #2E2C2C;
+    --color-surface-higher: #262424;
+    --color-surface-normal: #1C1B1B;
+    --color-surface-lower: #171616;
+    --color-surface-lowest: #121111;
+    --color-surface-selected: #383330;
+    --color-surface-alternate: #050505;
+
+    --color-highest: #FFFFFF;
+    --color-higher: #E6DFDF;
+    --color-high: #CCC6C6;
+    --color-normal: #B3ADAD;
+    --color-low: #999494;
+    --color-lower: #807B7B;
+    --color-lowest: #666363;
+    --color-alternate: #FFFFFF;
+
+    --color-fg-success: #40fb84;
+    --color-fg-success-alternate: #40fb84;
+    --color-fg-critical: #fe5757;
+    --color-fg-critical-alternate: #fe5757;
+    --color-fg-caution: #ffb141;
+    --color-fg-caution-alternate: #ffb141;
+
+    --color-link: #ffbd7b;
+    --color-link-lower: #ffc67a;
+    --color-link-alternate: #ffbd7b;
+
+    --color-edge-darker: rgba(20, 20, 20, 0.80);
+    --color-edge-dark: rgba(20, 20, 20, 0.70);
+    --color-edge-default: rgba(20, 20, 20, 0.60);
+    --color-edge-subdued: rgba(20, 20, 20, 0.45);
+    --color-edge-alt-darker: rgba(238, 238, 242, 0.42);
+    --color-edge-alt-dark: rgba(238, 238, 242, 0.3);
+    --color-edge-alt-default: rgba(238, 238, 242, 0.21);
+    --color-edge-alt-subdued: rgba(238, 238, 242, 0.12);
+
+    --color-tint-1: rgba(0, 0, 0, 0.08);
+    --color-tint-2: rgba(0, 0, 0, 0.11);
+    --color-tint-3: rgba(0, 0, 0, 0.14);
+    --color-tint-4: rgba(0, 0, 0, 0.17);
+    --color-tint-5: rgba(0, 0, 0, 0.20);
+    --color-tint-6: rgba(0, 0, 0, 0.23);
+    --color-tint-7: rgba(0, 0, 0, 0.26);
+    --color-tint-8: rgba(0, 0, 0, 0.29);
+    --color-tint-9: rgba(0, 0, 0, 0.32);
+    --color-tint-10: rgba(0, 0, 0, 0.35);
+    --color-tint-11: rgba(0, 0, 0, 0.38);
+    --color-tint-12: rgba(0, 0, 0, 0.41);
+    --color-tint-13: rgba(0, 0, 0, 0.44);
+    --color-tint-14: rgba(0, 0, 0, 0.47);
+    --color-tint-15: rgba(0, 0, 0, 0.50);
+    --color-tint-16: rgba(0, 0, 0, 0.53);
+    --color-tint-17: rgba(0, 0, 0, 0.56);
+    --color-tint-18: rgba(0, 0, 0, 0.59);
+    --color-tint-19: rgba(0, 0, 0, 0.62);
+    --color-tint-20: rgba(0, 0, 0, 0.65);
+    --color-tint-25: rgba(0, 0, 0, 0.75);
+  
+    --color-tint-alt-1: rgba(238, 238, 242, 0.03);
+    --color-tint-alt-2: rgba(238, 238, 242, 0.06);
+    --color-tint-alt-3: rgba(238, 238, 242, 0.09);
+    --color-tint-alt-4: rgba(238, 238, 242, 0.12);
+    --color-tint-alt-5: rgba(238, 238, 242, 0.15);
+    --color-tint-alt-6: rgba(238, 238, 242, 0.18);
+    --color-tint-alt-7: rgba(238, 238, 242, 0.21);
+    --color-tint-alt-8: rgba(238, 238, 242, 0.24);
+    --color-tint-alt-9: rgba(238, 238, 242, 0.27);
+    --color-tint-alt-10: rgba(238, 238, 242, 0.3);
+    --color-tint-alt-11: rgba(238, 238, 242, 0.33);
+    --color-tint-alt-12: rgba(238, 238, 242, 0.36);
+    --color-tint-alt-13: rgba(238, 238, 242, 0.39);
+    --color-tint-alt-14: rgba(238, 238, 242, 0.42);
+    --color-tint-alt-15: rgba(238, 238, 242, 0.45);
+    --color-tint-alt-16: rgba(238, 238, 242, 0.48);
+    --color-tint-alt-17: rgba(238, 238, 242, 0.51);
+    --color-tint-alt-18: rgba(238, 238, 242, 0.54);
+    --color-tint-alt-19: rgba(238, 238, 242, 0.57);
+    --color-tint-alt-20: rgba(238, 238, 242, 0.6);
+    --color-tint-alt-25: rgba(238, 238, 242, 0.8);
+
+    --color-success: #25372c;
+    --color-success-low: #1f2e25;
+    --color-success-lower: #11592b;
+    --color-success-lowest: #0c401f;
+    --color-success-fg: #a6ffc9;
+    --color-success-icon: #85cca1;
+    --color-success-alt: #171616;
+    --color-success-alt-lower: #121111;
+    --color-success-alt-fg: #a6ffc9;
+    --color-success-alt-icon: #85cca1;
+
+    --color-critical: #372525;
+    --color-critical-low: #2b1d1d;
+    --color-critical-lower: #911818;
+    --color-critical-lowest: #6b1212;
+    --color-critical-fg: #ffa6a6;
+    --color-critical-icon: #cc8585;
+    --color-critical-alt: #171616;
+    --color-critical-alt-lower: #121111;
+    --color-critical-alt-fg: #ffa6a6;
+    --color-critical-alt-icon: #cc8585;
+
+    --color-warning: #372d25;
+    --color-warning-low: #2b241d;
+    --color-warning-lower: #bf623b;
+    --color-warning-lowest: #994f2f;
+    --color-warning-fg: #ffb47a;
+    --color-warning-icon: #cc9061;
+    --color-warning-alt: #171616;
+    --color-warning-alt-lower: #121111;
+    --color-warning-alt-fg: #ffb47a;
+    --color-warning-alt-icon: #cc9061;
+
+    --color-attention: #373225;
+    --color-attention-low: #2e2a1f;
+    --color-attention-lower: #bf893b;
+    --color-attention-lowest: #996d2f;
+    --color-attention-fg: #ffdd80;
+    --color-attention-icon: #ccb167;
+    --color-attention-alt: #171616;
+    --color-attention-alt-lower: #121111;
+    --color-attention-alt-fg: #ffdd80;
+    --color-attention-alt-icon: #ccb167;
+
+    --color-info: #253537;
+    --color-info-low: #1f2c2e;
+    --color-info-lower: #2d63a1;
+    --color-info-lowest: #224b7a;
+    --color-info-fg: #a6f7ff;
+    --color-info-icon: #85c5cc;
+    --color-info-alt: #171616;
+    --color-info-alt-lower: #121111;
+    --color-info-alt-fg: #a6f7ff;
+    --color-info-alt-icon: #85c5cc;
+
+    --color-highlight: #2a2537;
+    --color-highlight-low: #211d2b;
+    --color-highlight-lower: #694abd;
+    --color-highlight-lowest: #543b96;
+    --color-highlight-fg: #d0bfff;
+    --color-highlight-icon: #a799cc;
+    --color-highlight-alt: #171616;
+    --color-highlight-alt-lower: #121111;
+    --color-highlight-alt-fg: #d0bfff;
+    --color-highlight-alt-icon: #a799cc;
+
+    --color-insight: #352537;
+    --color-insight-low: #2c1f2e;
+    --color-insight-lower: #ae4abd;
+    --color-insight-lowest: #8a3b96;
+    --color-insight-fg: #f5b3ff;
+    --color-insight-icon: #c48fcc;
+    --color-insight-alt: #171616;
+    --color-insight-alt-lower: #121111;
+    --color-insight-alt-fg: #f5b3ff;
+    --color-insight-alt-icon: #c48fcc;
+
+    --color-neutral: #372d25;
+    --color-neutral-low: #2e261f;
+    --color-neutral-lower: #615951;
+    --color-neutral-lowest: #403a35;
+    --color-neutral-fg: #e6d4c5;
+    --color-neutral-icon: #ccbdaf;
+    --color-neutral-alt: #171616;
+    --color-neutral-alt-lower: #121111;
+    --color-neutral-alt-fg: #e6d4c5;
+    --color-neutral-alt-icon: #ccbdaf;
+
+    --color-btn-primary: #ffbb70;
+    --color-btn-primary-low: #f5b46c;
+    --color-btn-primary-lower: #ebac67;
+    --color-btn-primary-fg: var(--color-surface-lowest);
+    --color-btn-primary-fg-alt: var(--color-surface-lowest);
+    --color-btn-primary-icon: var(--color-surface-lowest);
+    --color-btn-primary-border: #ffbb70;
+    --color-btn-primary-border-low: #f5b46c;
+    --color-btn-primary-disabled: rgba(238, 238, 242, 0.09);
+    --color-btn-primary-disabled-fg: #656466;
+
+    --color-btn-secondary: #2E2C2C;
+    --color-btn-secondary-low: #2B2929;
+    --color-btn-secondary-lower: #292727;
+    --color-btn-secondary-fg: var(--color-higher);
+    --color-btn-secondary-fg-alt: var(--color-higher);
+    --color-btn-secondary-icon: var(--color-higher);
+    --color-btn-secondary-border: transparent;
+    --color-btn-secondary-border-low: transparent;
+    --color-btn-secondary-disabled: rgba(238, 238, 242, 0.09);
+    --color-btn-secondary-disabled-fg: var(--color-lowest);
+
+    --color-btn-plain: transparent;
+    --color-btn-plain-low: rgba(0, 0, 0, 0.25);
+    --color-btn-plain-lower: rgba(0, 0, 0, 0.35);
+    --color-btn-plain-fg: var(--color-higher);
+    --color-btn-plain-fg-alt: var(--color-highest);
+    --color-btn-plain-icon: var(--color-higher);
+    --color-btn-plain-border: transparent;
+    --color-btn-plain-border-low: transparent;
+    --color-btn-plain-disabled: transparent;
+    --color-btn-plain-disabled-fg: var(--color-lowest);
+
+    --color-btn-link: transparent;
+    --color-btn-link-low: rgba(0, 0, 0, 0.25);
+    --color-btn-link-lower: rgba(0, 0, 0, 0.35);
+    --color-btn-link-fg: #ffbd7b;
+    --color-btn-link-fg-alt: #ffc67a;
+    --color-btn-link-icon: #ffbd7b;
+    --color-btn-link-border: transparent;
+    --color-btn-link-border-low: transparent;
+    --color-btn-link-disabled: transparent;
+    --color-btn-link-disabled-fg: var(--color-lowest);
+
+    --color-btn-destructive: #d22323;
+    --color-btn-destructive-low: #b81f1f;
+    --color-btn-destructive-lower: #911818;
+    --color-btn-destructive-fg: #f7f6f5;
+    --color-btn-destructive-fg-alt: #ffffff;
+    --color-btn-destructive-icon: #f7f6f5;
+    --color-btn-destructive-border: #d22323;
+    --color-btn-destructive-border-low: #b81f1f;
+    --color-btn-destructive-disabled: rgba(238, 238, 242, 0.09);
+    --color-btn-destructive-disabled-fg: var(--color-lowest);
+
+    --color-btn-highlight: #0f0e12;
+    --color-btn-highlight-low: #09080a;
+    --color-btn-highlight-lower: #020203;
+    --color-btn-highlight-fg: #f5b46c;
+    --color-btn-highlight-fg-alt: #ffbb70;
+    --color-btn-highlight-icon: #f5b46c;
+    --color-btn-highlight-border: #0f0e12;
+    --color-btn-highlight-border-low: #09080a;
+    --color-btn-highlight-disabled: transparent;
+    --color-btn-highlight-disabled-fg: #b98449;
+
+    --color-form-accent: #ffb64e;
+    --color-form-bg: var(--color-surface-normal);
+    --color-form-bg-hover: var(--color-surface-lower);
+    --color-form-bg-focus: var(--color-surface-normal);
+    --color-form-bg-disabled: var(--color-surface-higher);
+    --color-form-bg-error: #1c1212;
+    --color-form-bg-error-low: #2b1919;
+
+    --color-form-border: #3D3B3B;
+    --color-form-border-hover: #454242;
+    --color-form-border-focus: #ebac67;
+    --color-form-border-error: #d22323;
+    --color-form-focus: rgba(255, 189, 123, 0.4);
+    --color-form-focus-active: rgba(255, 189, 123, 1);
+    --color-form-focus-error: rgba(210, 35, 35, 0.4);
+
+    --color-form-placeholder: var(--color-lowest);
+    --color-form-placeholder-error: var(--color-lowest);
+    --color-form-input-fg-light: #1c1a1f;
+    --color-form-input-fg: #1c1a1f;
+    --color-form-input-fg-disabled: #666666;
+
+    --color-tab-active-bg: #413933;
+    --color-tab-active-bg-hover: #473F38;
+    --color-tab-active-bg-active: #4F453E;
+    --color-tab-active-fg: #f5b46c;
+    --color-tab-active-fg-low: #ffbb70;
+
+    --color-tab-inactive-bg: transparent;
+    --color-tab-inactive-bg-hover: var(--color-tint-2);
+    --color-tab-inactive-bg-active: var(--color-tint-3);
+    --color-tab-inactive-fg: var(--color-normal);
+    --color-tab-inactive-fg-low: var(--color-normal);
+
+    --color-tag-bg: #171616;
+    --color-tag-bg-hover: #121111;
+    --color-tag-bg-disabled: #252323;
+    --color-tag-fg: var(--color-higher);
+    --color-tag-fg-icon: var(--color-higher);
+    --color-tag-fg-disabled: var(--color-lowest);
+  }
+
+  /* zIndex */
+  .Litho-Loading { z-index: 2500; }
+  .Litho-Logo { z-index: 2400; }
+  .Litho-TooltipPortal { z-index: 2300; }
+  .Litho-Popover { z-index: 2200; }
+  .Litho-Frame-Navigation { z-index: 2100; } /* mobile only */
+  .Litho-Frame-Navigation-Overlay { z-index: 2000; } /* mobile only */
+  .Litho-Frame-Content.Litho-Frame-Content--InIframe iframe { z-index: 1900; }
+  .Litho-ModalContainer { z-index: 1800; }
+  .Litho-ModalOverlay { z-index: 1700; }
+  .Litho-Pane { z-index: 1690; }
+  .Litho-Logo.Litho-Logo--ModalOpen { z-index: 1600; }
+  .Litho-FrameSaveBar__Toggle { z-index: 1500; }
+  .Litho-FrameSaveBar { z-index: 1400; }
+  .Litho-Page__Header { z-index: 1300; }
+  .Litho-Frame-Header { z-index: 1200; }
+  .Litho-Table-StickyHeaderContainer { z-index: 1100; }
+  .Litho-Table-Header { z-index: 1000; }
+}
+
+@layer base {
+
+  .w-full-plus-2 {
+    width: calc(100% + calc(var(--spacing) * 2));
+  }
+  
+  .w-full-plus-4 {
+    width: calc(100% + calc(var(--spacing) * 4));
+  }
+  
+  .w-full-plus-5 {
+    width: calc(100% + calc(var(--spacing) * 5));
+  }
+  
+  .w-full-plus-6 {
+    width: calc(100% + calc(var(--spacing) * 6));
+  }
+  
+  .w-full-plus-8 {
+    width: calc(100% + calc(var(--spacing) * 8));
+  }
+  
+  .w-full-plus-9 {
+    width: calc(100% + calc(var(--spacing) * 9));
+  }
+  
+  .max-w-full-plus-4 {
+    max-width: calc(100% + calc(var(--spacing) * 4));
+  }
+
+  .h-full-plus-2 {
+    height: calc(100% + calc(var(--spacing) * 2));
+  }
+
+  .h-full-plus-4 {
+    height: calc(100% + calc(var(--spacing) * 4));
+  }
+
+  @media (min-width: theme(--breakpoint-sm)) {
+    .sm\:w-full-plus-11 {
+      width: calc(100% + calc(var(--spacing) * 11));
+    }
+  }
+
+  @media (min-width: theme(--breakpoint-md)) {
+    .md\:w-full-plus-4 {
+      width: calc(100% + calc(var(--spacing) * 4));
+    }
+    .md\:w-full-plus-11 {
+      width: calc(100% + calc(var(--spacing) * 11));
+    }
+  }
+}
+
+@layer utilities {
+
+  .hover {
+    @apply hover:bg-tint-1 active:bg-tint-2 dark:hover:bg-tint-alt-1 dark:active:bg-tint-alt-2;
+  }
+  
+  .hover-dark {
+    @apply hover:bg-tint-2 active:bg-tint-3 dark:hover:bg-tint-alt-2 dark:active:bg-tint-alt-3;
+  }
+  
+  .disclosure-line {
+    @apply w-px bg-tint-6 dark:bg-tint-alt-6;
+  }
+}
+
+.Litho-Tooltip .Litho-Text {
+  @apply text-alternate dark:text-highest;
+}
+
+.Litho-Tooltip .Litho-Link {
+  @apply text-link-alternate;
+}
+
+.Litho-ButtonGroup--Segmented .Litho-Button {
+  @apply rounded-none border-r-0!;
+}
+
+.Litho-ButtonGroup--FullWidth .Litho-Button {
+  @apply w-full;
+}
+
+.Litho-ButtonGroup--Segmented > *:first-child .Litho-Button,
+.Litho-ButtonGroup--Segmented > .Litho-Button:first-child {
+  @apply rounded-l-md;
+}
+
+.Litho-ButtonGroup--Segmented > *:last-child .Litho-Button,
+.Litho-ButtonGroup--Segmented > .Litho-Button:last-child {
+  @apply rounded-r-md border-r!;
+}
+
+.Litho-TextField__Input[type='number']::-webkit-inner-spin-button,
+.Litho-TextField__Input[type='number']::-webkit-outer-spin-button {
+  @apply m-0 appearance-none;
+}
+
+.Litho-TextField__Input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.Litho-Table-Heading.first-cell-after-selection-cell:nth-child(2) {
+  @apply pl-0;
+}
+.Litho-Table-Cell.first-cell-after-selection-cell:nth-child(2) {
+  @apply pl-2;
+}
+.no-scrollbar::-webkit-scrollbar {
+  @apply hidden;
+}
+.no-scrollbar {
+  -ms-overflow-style: none; /* for IE and Edge */
+  scrollbar-width: none; /* for Firefox */
+}
+
+.sortable .draggable--over {
+  @apply border-none;
+}
+
+.sortable .draggable--over > * {
+  @apply opacity-0;
+}
+
+.sortable .draggable-original > * {
+  @apply opacity-0;
+}
+
+.sortable .draggable-source--is-dragging {
+  @apply border-none;
+}
+
+.sortable .draggable-source--is-dragging > * {
+  @apply opacity-0;
+}
+
+.sortable .draggable-source--is-dragging::after {
+  @apply !hidden;
+}
+
+.sortable .draggable-mirror .hide-when-dragging {
+  @apply opacity-0;
+}
+
+.mask-fade-right {
+  mask-image: linear-gradient(to right, var(--color-black-opaque) calc(100% - 24px), var(--color-black-transparent) 100%);
+  -webkit-mask-image: linear-gradient(to right, var(--color-black-opaque) calc(100% - 24px), var(--color-black-transparent) 100%);
+}
+
+.hide-time-picker::-webkit-calendar-picker-indicator {
+  @apply hidden;
+}
+
+/* DatePicker */
+.Litho-DatePicker__Calendar {
+  .react-datepicker__header--custom {
+    @apply flex flex-col gap-0.5 pb-0.5;
+  }
+  .react-datepicker__day--selected, .react-datepicker__day--range-end {
+    @apply text-highest dark:text-alternate;
+  }
+  .react-datepicker__day-names, .react-datepicker__week {
+    @apply flex;
+  }
+  .react-datepicker__day-name {
+    @apply w-10 @sm:w-8 h-8 flex items-center justify-center text-center text-lower text-xs;
+  }
+  .react-datepicker__aria-live {
+    @apply sr-only;
+  }
+  .react-datepicker__day--in-selecting-range {
+    @apply bg-tab-active-bg;   
+  }
+  .react-datepicker__day--selecting-range-end {
+    @apply rounded-r-md bg-tab-active-bg hover:bg-tab-active-bg active:bg-tab-active-bg;
+  }
+  .react-datepicker__month {
+    @apply flex flex-col gap-0.5;
+  }
+}
+
+/* RangeSlider */
+
+.Litho-RangeSlider__Slider {
+  &::-webkit-slider-thumb {
+    @apply appearance-none bg-form-accent rounded-full h-3 w-3;
+  }
+  &::-moz-range-thumb {
+    @apply appearance-none bg-form-accent rounded-full h-3 w-3;
+  }
+
+  &:disabled {
+
+    &::-webkit-slider-thumb {
+      @apply bg-surface-lowest;
+    }
+    &::-moz-range-thumb {
+      @apply bg-surface-lowest;
+    }
+  }
+}
+
+/* Highcharts */
+.Chart-Tooltip {
+  @apply text-alternate dark:text-highest;
+}
+
+.Chart-Tooltip__Table {
+ @apply w-full max-w-100;
+}
+
+.Chart-Tooltip {
+  @apply flex flex-col text-base rounded-md overflow-hidden;
+}
+
+.Chart-Tooltip table {
+  @apply my-1;
+}
+
+.Chart-Tooltip td {
+  @apply align-middle px-2;
+}
+
+.Chart-Tooltip__Row--total {
+  @apply bg-tint-12;
+}
+
+.Chart-Tooltip__Row--last {
+  @apply pb-1!;
+}
+
+.Chart-Tooltip__Row--total td {
+  @apply py-1 px-2 pr-2;
+}
+
+.Chart-Tooltip__Header {
+  @apply flex justify-between gap-3 font-semibold border-b border-tint-5 py-1 px-2 bg-tint-12;
+}
+
+.Chart-Tooltip__Row__Color {
+  @apply align-middle inline-block w-2.5 h-2.5 rounded-full mr-0.5;
+}
+
+.Chart-Tooltip td.Chart-Tooltip__Row__Label {
+  @apply align-middle pr-3;
+}
+
+.Chart-Tooltip td.Chart-Tooltip__Row__Value {
+  @apply font-semibold w-full text-right pl-3;
+}
+.highcharts-axis-labels text, .highcharts-legend-item text {
+  @apply text-sm;
+}
+
+/* Code */
+.styled-code .json-key {
+  @apply font-bold text-highlight-lowest;
+}
+.styled-code .json-string {
+  @apply text-fg-success;
+}
+.styled-code .json-number {
+  @apply text-link;
+}
+.styled-code .json-boolean {
+  @apply text-info-lowest
+}
+.styled-code .json-null {
+  @apply text-fg-critical;
+}
+.styled-code .json-default {
+  @apply text-base;
+}
+.styled-code .json-link {
+  @apply cursor-pointer underline text-link-lower;
+}
+
+/* Draggable */
+.draggable-mirror {
+  @apply bg-surface-highest rounded-md shadow-popover min-w-40;
+}
+.draggable-source--is-dragging.draggable--over {
+  @apply bg-tint-2 rounded-md;
+}
+.draggable-container--is-dragging {
+  @apply rounded-md;
+}
+.draggable-container--is-dragging .hide-on-drag {
+  @apply opacity-0!;
+}
+.draggable--is-dragging .disable-pointer-events-when-dragging {
+  @apply pointer-events-none!;
+}
+.draggable-source--is-dragging.draggable--over > div {
+  @apply opacity-0!;
+}
+
+.sketch-picker {
+  @apply bg-surface-highest! rounded-sm max-h-80 overflow-y-auto overflow-x-hidden shadow-popover outline outline-tint-3 min-w-32 dark:outline-hidden dark:border-t dark:border-tint-alt-2;
+
+  input {
+    @apply text-xs! bg-form-bg text-center hover:border-form-border-hover! text-highest rounded-sm shadow-none! outline-hidden focus:border-form-border-focus! focus:ring focus:ring-form-focus w-full!;
+    border: 1px solid var(--color-form-border) !important;
+  }
+  label {
+    @apply text-xxs! text-low!;
+  }
+}