@digo-labs/common 0.1.5

package/dist/index.css

@@ -0,0 +1,921 @@
+@plugin "@iconify/tailwind4";
+
+@plugin "tailwindcss-animate";
+
+@source inline("typo-1 typo-2 typo-3 typo-4 typo-5 typo-6 typo-7 typo-8 typo-9 typo-10 typo-11 typo-12 typo-13 typo-14 typo-15 typo-16 typo-17 typo-18 typo-weight-100 typo-weight-200 typo-weight-300 typo-weight-400 typo-weight-500 typo-weight-600 typo-weight-700 typo-weight-800 typo-weight-900");
+
+@source "./index.js";
+
+@theme static {
+  --font-code: 'geist-mono', monospace;
+  --font-geist: 'geist', sans-serif;
+  --font-geist-mono: 'geist-mono', monospace;
+  --font-pixel-circle: 'geist-pixel-circle', monospace;
+  --font-pixel-grid: 'geist-pixel-grid', monospace;
+  --font-pixel-line: 'geist-pixel-line', monospace;
+  --font-pixel-square: 'geist-pixel-square', monospace;
+  --font-pixel-triangle: 'geist-pixel-triangle', monospace;
+  --font-clash-grotesk: 'clash-grotesk-variable', sans-serif;
+  --font-nippo: 'nippo', sans-serif;
+  --font-humane: 'humane-variable', sans-serif;
+  --font-general-sans: 'general-sans', sans-serif;
+  --font-kode-mono: 'kode-mono-vf', monospace;
+  --font-aalto: 'Aalto', display;
+  --font-being: 'being', display;
+  --font-benzol: 'benzol', display;
+  --font-half: 'half', display;
+  --font-miratrix: 'miratrix', display;
+  --font-triakis: 'triakis', display;
+  --font-yeager: 'yeager', display;
+  --font-karmatic-arcade: 'karmatic-arcade-regular', display;
+  --font-digital-7: 'digital-7-mono', monospace;
+  --font-pixelony: 'pixelony', display;
+  --font-unknown: 'unknown', display;
+  --font-disket: 'disket', display;
+  --font-heming: 'heming', display;
+  --font-obrazec: 'obrazec', display;
+
+  --color-neutral-1: #111111;
+  --color-neutral-2: #191919;
+  --color-neutral-3: #222222;
+  --color-neutral-4: #2a2a2a;
+  --color-neutral-5: #313131;
+  --color-neutral-6: #3a3a3a;
+  --color-neutral-7: #484848;
+  --color-neutral-8: #606060;
+  --color-neutral-9: #6e6e6e;
+  --color-neutral-10: #7b7b7b;
+  --color-neutral-11: #b4b4b4;
+  --color-neutral-12: #eeeeee;
+
+  --color-neutralA-1: #FFFFFF05;
+  --color-neutralA-2: #FFFFFF09;
+  --color-neutralA-3: #FFFFFF12;
+  --color-neutralA-4: #FFFFFF1B;
+  --color-neutralA-5: #FFFFFF22;
+  --color-neutralA-6: #FFFFFF2C;
+  --color-neutralA-7: #FFFFFF3B;
+  --color-neutralA-8: #FFFFFF55;
+  --color-neutralA-9: #FFFFFF64;
+  --color-neutralA-10: #FFFFFF72;
+  --color-neutralA-11: #FFFFFFAF;
+  --color-neutralA-12: #FFFFFFED;
+
+  --color-shadows-1: #0000000D;
+  --color-shadows-2: #0000001A;
+  --color-shadows-3: #00000026;
+  --color-shadows-4: #00000033;
+  --color-shadows-5: #0000004D;
+  --color-shadows-6: #00000066;
+  --color-shadows-7: #00000080;
+  --color-shadows-8: #00000099;
+  --color-shadows-9: #000000B3;
+  --color-shadows-10: #000000CC;
+  --color-shadows-11: #000000E6;
+  --color-shadows-12: #000000F2;
+
+  --color-accent-1: #0e1512;
+  --color-accent-2: #121b17;
+  --color-accent-3: #132d21;
+  --color-accent-4: #113b29;
+  --color-accent-5: #174933;
+  --color-accent-6: #20573e;
+  --color-accent-7: #28684a;
+  --color-accent-8: #2f7c57;
+  --color-accent-9: #30a46c;
+  --color-accent-10: #33b074;
+  --color-accent-11: #3dd68c;
+  --color-accent-12: #b1f1cb;
+
+  --color-accentA-1:  #00de4505;
+  --color-accentA-2:  #29f99d0b;
+  --color-accentA-3:  #22ff991e;
+  --color-accentA-4:  #11ff992d;
+  --color-accentA-5:  #2bffa23c;
+  --color-accentA-6:  #44ffaa4b;
+  --color-accentA-7:  #50fdac5e;
+  --color-accentA-8:  #54ffad73;
+  --color-accentA-9:  #44ffa49e;
+  --color-accentA-10: #43fea4ab;
+  --color-accentA-11: #46fea5d4;
+  --color-accentA-12: #bbffd7f0;
+
+  --color-error-1: #191113;
+  --color-error-2: #1e1517;
+  --color-error-3: #3a141e;
+  --color-error-4: #4e1325;
+  --color-error-5: #5e1a2e;
+  --color-error-6: #6f2539;
+  --color-error-7: #883447;
+  --color-error-8: #b3445a;
+  --color-error-9: #e54666;
+  --color-error-10: #ec5a72;
+  --color-error-11: #ff949d;
+  --color-error-12: #fed2e1;
+
+  --color-errorA-1:  #f4126709;
+  --color-errorA-2:  #f22f7a11;
+  --color-errorA-3:  #fe2a8b2a;
+  --color-errorA-4:  #fd158741;
+  --color-errorA-5:  #fd278f51;
+  --color-errorA-6:  #fe459763;
+  --color-errorA-7:  #fd559b7f;
+  --color-errorA-8:  #fe5b9bab;
+  --color-errorA-9:  #fe418de8;
+  --color-errorA-10: #ff5693ed;
+  --color-errorA-11: #ff92ad;
+  --color-errorA-12: #ffd5eafd;
+
+  --color-success-1: #0d1512;
+  --color-success-2: #121c18;
+  --color-success-3: #0f2e22;
+  --color-success-4: #0b3b2c;
+  --color-success-5: #114837;
+  --color-success-6: #1b5745;
+  --color-success-7: #246854;
+  --color-success-8: #2a7e68;
+  --color-success-9: #29a383;
+  --color-success-10: #27b08b;
+  --color-success-11: #1fd8a4;
+  --color-success-12: #adf0d4;
+
+  --color-successA-1:  #00de4505;
+  --color-successA-2:  #29f99d0b;
+  --color-successA-3:  #22ff991e;
+  --color-successA-4:  #11ff992d;
+  --color-successA-5:  #2bffa23c;
+  --color-successA-6:  #44ffaa4b;
+  --color-successA-7:  #50fdac5e;
+  --color-successA-8:  #54ffad73;
+  --color-successA-9:  #44ffa49e;
+  --color-successA-10: #43fea4ab;
+  --color-successA-11: #46fea5d4;
+  --color-successA-12: #bbffd7f0;
+
+  --color-warning-1: #16120c;
+  --color-warning-2: #1d180f;
+  --color-warning-3: #302008;
+  --color-warning-4: #3f2700;
+  --color-warning-5: #4d3000;
+  --color-warning-6: #5c3d05;
+  --color-warning-7: #714f19;
+  --color-warning-8: #8f6424;
+  --color-warning-9: #f5d90a;
+  --color-warning-10: #ffef5c;
+  --color-warning-11: #f0c000;
+  --color-warning-12: #fffad1;
+
+  --color-warningA-1:  #d1510004;
+  --color-warningA-2:  #f9b4000b;
+  --color-warningA-3:  #ffaa001e;
+  --color-warningA-4:  #fdb70028;
+  --color-warningA-5:  #febb0036;
+  --color-warningA-6:  #fec40046;
+  --color-warningA-7:  #fdcb225c;
+  --color-warningA-8:  #fdca327b;
+  --color-warningA-9:  #ffe629;
+  --color-warningA-10: #ffff57;
+  --color-warningA-11: #fee949f5;
+  --color-warningA-12: #fef6baf6;
+
+  --color-info-1: #0d1520;
+  --color-info-2: #111927;
+  --color-info-3: #0d2847;
+  --color-info-4: #003362;
+  --color-info-5: #004074;
+  --color-info-6: #104d87;
+  --color-info-7: #205d9e;
+  --color-info-8: #2870bd;
+  --color-info-9: #0090ff;
+  --color-info-10: #3b9eff;
+  --color-info-11: #70b8ff;
+  --color-info-12: #c2e6ff;
+
+  --color-infoA-1:  #004df211;
+  --color-infoA-2:  #1166fb18;
+  --color-infoA-3:  #0077ff3a;
+  --color-infoA-4:  #0075ff57;
+  --color-infoA-5:  #0081fd6b;
+  --color-infoA-6:  #0f89fd7f;
+  --color-infoA-7:  #2a91fe98;
+  --color-infoA-8:  #3094feb9;
+  --color-infoA-9:  #0090ff;
+  --color-infoA-10: #3b9eff;
+  --color-infoA-11: #70b8ff;
+  --color-infoA-12: #c2e6ff;
+
+  --text-xxs: 0.625rem;
+  --text-10xl: 10rem;
+  --text-11xl: 12rem;
+  --text-12xl: 14rem;
+  --text-13xl: 16rem;
+}
+
+@theme {
+  --radius: 0.5rem;
+  --radius-xxs: calc(var(--radius) * 0.25);
+  --radius-xs:  calc(var(--radius) * 0.375);
+  --radius-sm:  calc(var(--radius) * 0.625);
+  --radius-md:  calc(var(--radius) * 0.875);
+  --radius-lg:  calc(var(--radius) * 1.25);
+  --radius-xl:  calc(var(--radius) * 1.75);
+  --radius-2xl: calc(var(--radius) * 2.5);
+  --radius-3xl: calc(var(--radius) * 3.5);
+
+  --typo-header-font:     'geist', sans-serif;
+  --typo-header-weight:   600;
+  --typo-header-tracking: 0.025em;
+  --typo-header-leading:  1;
+
+  --typo-label-font:      'geist', sans-serif;
+  --typo-label-weight:    500;
+  --typo-label-tracking:  0.025em;
+  --typo-label-leading:   1;
+
+  --typo-body-font:       'geist', sans-serif;
+  --typo-body-weight:     400;
+  --typo-body-tracking:   0.025em;
+  --typo-body-leading:    1.375;
+
+  --typo-code-font:       'geist-mono', monospace;
+  --typo-code-weight:     500;
+  --typo-code-tracking:   0;
+  --typo-code-leading:    1.5;
+
+  --typo-scale-factor:    1;
+
+  --shadow-xs-color:   var(--color-neutral-9);
+  --shadow-xs-offsetX: 0px;
+  --shadow-xs-offsetY: 0px;
+  --shadow-xs-blur:    2px;
+  --shadow-xs-spread:  0px;
+  --shadow-xs-opacity: 5%;
+  --shadow-xs: var(--shadow-xs-offsetX) var(--shadow-xs-offsetY) var(--shadow-xs-blur) var(--shadow-xs-spread) color-mix(in srgb, var(--shadow-xs-color) var(--shadow-xs-opacity), transparent);
+
+  --shadow-s-color:   var(--color-neutral-9);
+  --shadow-s-offsetX: 0px;
+  --shadow-s-offsetY: 0px;
+  --shadow-s-blur:    4px;
+  --shadow-s-spread:  0px;
+  --shadow-s-opacity: 10%;
+  --shadow-s: var(--shadow-s-offsetX) var(--shadow-s-offsetY) var(--shadow-s-blur) var(--shadow-s-spread) color-mix(in srgb, var(--shadow-s-color) var(--shadow-s-opacity), transparent);
+
+  --shadow-m-color:   var(--color-neutral-9);
+  --shadow-m-offsetX: 0px;
+  --shadow-m-offsetY: 0px;
+  --shadow-m-blur:    8px;
+  --shadow-m-spread:  -1px;
+  --shadow-m-opacity: 15%;
+  --shadow-m: var(--shadow-m-offsetX) var(--shadow-m-offsetY) var(--shadow-m-blur) var(--shadow-m-spread) color-mix(in srgb, var(--shadow-m-color) var(--shadow-m-opacity), transparent);
+
+  --shadow-l-color:   var(--color-neutral-9);
+  --shadow-l-offsetX: 0px;
+  --shadow-l-offsetY: 0px;
+  --shadow-l-blur:    16px;
+  --shadow-l-spread:  -2px;
+  --shadow-l-opacity: 20%;
+  --shadow-l: var(--shadow-l-offsetX) var(--shadow-l-offsetY) var(--shadow-l-blur) var(--shadow-l-spread) color-mix(in srgb, var(--shadow-l-color) var(--shadow-l-opacity), transparent);
+
+  --shadow-xl-color:   var(--color-neutral-9);
+  --shadow-xl-offsetX: 0px;
+  --shadow-xl-offsetY: 0px;
+  --shadow-xl-blur:    40px;
+  --shadow-xl-spread:  -8px;
+  --shadow-xl-opacity: 30%;
+  --shadow-xl: var(--shadow-xl-offsetX) var(--shadow-xl-offsetY) var(--shadow-xl-blur) var(--shadow-xl-spread) color-mix(in srgb, var(--shadow-xl-color) var(--shadow-xl-opacity), transparent);
+}
+
+@utility typo-weight-100 {
+  @apply font-thin;
+}
+
+@utility typo-weight-200 {
+  @apply font-extralight;
+}
+
+@utility typo-weight-300 {
+  @apply font-light;
+}
+
+@utility typo-weight-400 {
+  @apply font-normal;
+}
+
+@utility typo-weight-500 {
+  @apply font-medium;
+}
+
+@utility typo-weight-600 {
+  @apply font-semibold;
+}
+
+@utility typo-weight-700 {
+  @apply font-bold;
+}
+
+@utility typo-weight-800 {
+  @apply font-extrabold;
+}
+
+@utility typo-weight-900 {
+  @apply font-black;
+}
+
+@utility typo-header {
+  font-family: var(--typo-header-font);
+  font-weight: var(--typo-header-weight);
+  -webkit-font-smoothing: antialiased;
+  white-space: nowrap;
+  letter-spacing: var(--typo-header-tracking);
+  line-height: var(--typo-header-leading);
+}
+
+@utility typo-label {
+  font-family: var(--typo-label-font);
+  font-weight: var(--typo-label-weight);
+  -webkit-font-smoothing: antialiased;
+  white-space: nowrap;
+  letter-spacing: var(--typo-label-tracking);
+  line-height: var(--typo-label-leading);
+}
+
+@utility typo-body {
+  font-family: var(--typo-body-font);
+  font-weight: var(--typo-body-weight);
+  -webkit-font-smoothing: antialiased;
+  text-wrap: wrap;
+  letter-spacing: var(--typo-body-tracking);
+  line-height: var(--typo-body-leading);
+}
+
+@utility typo-code {
+  font-family: var(--typo-code-font);
+  font-weight: var(--typo-code-weight);
+  -webkit-font-smoothing: antialiased;
+  white-space: nowrap;
+  letter-spacing: var(--typo-code-tracking);
+  line-height: var(--typo-code-leading);
+  font-variant-numeric: tabular-nums;
+}
+
+@utility typo-1 {
+  @apply typo-body;
+  font-size: calc(var(--text-xxs) * var(--typo-scale-factor));
+}
+
+@utility typo-2 {
+  @apply typo-body;
+  font-size: calc(var(--text-xs) * var(--typo-scale-factor));
+}
+
+@utility typo-3 {
+  @apply typo-body;
+  font-size: calc(var(--text-sm) * var(--typo-scale-factor));
+}
+
+@utility typo-4 {
+  @apply typo-body;
+  font-size: calc(var(--text-base) * var(--typo-scale-factor));
+}
+
+@utility typo-5 {
+  @apply typo-body;
+  font-size: calc(var(--text-lg) * var(--typo-scale-factor));
+}
+
+@utility typo-6 {
+  @apply typo-body;
+  font-size: calc(var(--text-xl) * var(--typo-scale-factor));
+}
+
+@utility typo-7 {
+  @apply typo-body;
+  font-size: calc(var(--text-2xl) * var(--typo-scale-factor));
+}
+
+@utility typo-8 {
+  @apply typo-body;
+  font-size: calc(var(--text-3xl) * var(--typo-scale-factor));
+}
+
+@utility typo-9 {
+  @apply typo-body;
+  font-size: calc(var(--text-4xl) * var(--typo-scale-factor));
+}
+
+@utility typo-10 {
+  @apply typo-body;
+  font-size: calc(var(--text-5xl) * var(--typo-scale-factor));
+}
+
+@utility typo-11 {
+  @apply typo-body;
+  font-size: calc(var(--text-6xl) * var(--typo-scale-factor));
+}
+
+@utility typo-12 {
+  @apply typo-body;
+  font-size: calc(var(--text-7xl) * var(--typo-scale-factor));
+}
+
+@utility typo-13 {
+  @apply typo-body;
+  font-size: calc(var(--text-8xl) * var(--typo-scale-factor));
+}
+
+@utility typo-14 {
+  @apply typo-body;
+  font-size: calc(var(--text-9xl) * var(--typo-scale-factor));
+}
+
+@utility typo-15 {
+  @apply typo-body;
+  font-size: calc(var(--text-10xl) * var(--typo-scale-factor));
+}
+
+@utility typo-16 {
+  @apply typo-body;
+  font-size: calc(var(--text-11xl) * var(--typo-scale-factor));
+}
+
+@utility typo-17 {
+  @apply typo-body;
+  font-size: calc(var(--text-12xl) * var(--typo-scale-factor));
+}
+
+@utility typo-18 {
+  @apply typo-body;
+  font-size: calc(var(--text-13xl) * var(--typo-scale-factor));
+}
+
+@utility filter-none {
+  filter: none;
+}
+
+@utility flex-col-center {
+  @apply flex flex-col justify-center items-center align-middle;
+}
+
+@utility grid-hor-center {
+  @apply grid grid-flow-col items-center;
+}
+
+@utility grid-ver-center {
+  @apply grid grid-flow-row items-center;
+}
+
+@utility flex-row-center {
+  @apply flex flex-row justify-center items-center align-middle;
+}
+
+@utility cs-border-dashed {
+  @apply border border-dashed border-neutralA-4;
+}
+
+@utility cs-disabled {
+    @apply disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50;
+  }
+
+@utility cs-has-disabled {
+  @apply has-[[data-slot=control]:disabled]:pointer-events-none has-[[data-slot=control]:disabled]:opacity-50;
+}
+
+@utility cs-transition {
+  @apply transition-all duration-200 ease-in-out;
+}
+
+@utility cs-contrast {
+  @apply drop-shadow-[0_1px_1px_#0008] drop-shadow-[0_-1px_1px_#fff4];
+}
+
+@utility cs-popup-animation {
+  @apply origin-(--transform-origin) transition-[scale,opacity] duration-[0.25s] ease-[cubic-bezier(0.34,1.56,0.64,1)] data-starting-style:scale-90 data-starting-style:opacity-0 data-ending-style:scale-90 data-ending-style:opacity-0 data-instant:transition-none;
+}
+
+@utility cs-focus {
+  @apply outline-none focus-visible:duration-0 focus-visible:outline-solid focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-accent-4 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent-9;  
+}
+
+@utility cs-has-focus {
+  @apply has-[[data-slot=control]:focus-visible]:z-1 has-[[data-slot=control]:focus-visible]:ring-[3px] has-[[data-slot=control]:focus-visible]:ring-accent-4 has-[[data-slot=control]:focus-visible]:outline-1 has-[[data-slot=control]:focus-visible]:outline-solid has-[[data-slot=control]:focus-visible]:-outline-offset-1 has-[[data-slot=control]:focus-visible]:outline-accent-9;
+}
+
+@utility cs-invalid {
+  @apply aria-invalid:ring-3 aria-invalid:ring-error-3 aria-invalid:ring-error-6 aria-invalid:border-error-9 focus-visible:aria-invalid:ring-error-4 focus-visible:aria-invalid:outline-error-9;
+}
+
+@utility cs-has-invalid {
+  @apply has-[[data-slot=control][aria-invalid=true]]:ring-3 has-[[data-slot=control][aria-invalid=true]]:ring-error-3 has-[[data-slot=control][aria-invalid=true]]:ring-error-6 has-[[data-slot=control][aria-invalid=true]]:border-error-9 has-[[data-slot=control][aria-invalid=true]:focus-visible]:ring-error-4 has-[[data-slot=control][aria-invalid=true]:focus-visible]:outline-error-9;
+}
+
+@utility cs-masonry {
+  columns: 3;
+  & > * {
+    break-inside: avoid-column;
+  }
+}
+
+@utility cs-stroke {
+  -webkit-text-stroke-width: var(--stroke-w, 2px);
+  -webkit-text-stroke-color: var(--stroke-color, var(--color-neutral-12));
+  color: transparent;
+  paint-order: stroke fill;
+}
+
+@utility cs-backdrop-panel {
+  @apply rounded-md border-neutralA-4 bg-neutral-1/60 text-neutral-11 backdrop-blur-lg border shadow-m;
+  }
+
+@utility animate-collapsible-down {
+  animation: collapsible-down 0.2s ease-out;
+}
+
+@utility animate-collapsible-up {
+  animation: collapsible-up 0.2s ease-out;
+}
+
+@utility no-scrollbar {
+  @apply [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
+}
+
+@utility cs-gutter {
+  background: repeating-linear-gradient(315deg, var(--color-neutral-3) 0 1px, transparent 1px 50%);
+  background-size: 10px 10px;
+  background-attachment: fixed;
+}
+
+@keyframes stripes {
+  from { background-position: 0 0; }
+  to   { background-position: 16px 0; }
+}
+
+@utility cs-stripes {
+  background-image: repeating-linear-gradient(315deg, var(--color-neutralA-4) 0 4px, transparent 2px 50%);
+  background-size: 16px 16px;
+  animation: stripes 0.6s linear infinite;
+}
+
+@utility cs-guides {
+  overflow: clip;
+  isolation: isolate;
+
+  & > * {
+    position: relative;
+    z-index: 0;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: -1px;
+      top: -9999px;
+      bottom: -9999px;
+      border-left: 1px solid var(--color-neutral-4);
+      border-right: 1px solid var(--color-neutral-4);
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: -1px;
+      left: -9999px;
+      right: -9999px;
+      border-top: 1px solid var(--color-neutral-4);
+      border-bottom: 1px solid var(--color-neutral-4);
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+}
+
+@utility cs-page-container {
+  @apply grid grid-cols-[1fr_minmax(0,var(--page-max-w,64rem))_1fr];
+}
+
+@utility cs-page-grid {
+  position: relative;
+  max-width: var(--page-max-w, 64rem);
+  width: 100%;
+  margin-inline: auto;
+  border-inline: 1px solid var(--color-neutral-4);
+
+  & > :where(*) {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: -100vw;
+      width: 200vw;
+      height: 1px;
+      background-color: var(--color-neutral-4);
+      pointer-events: none;
+    }
+  }
+
+  & > :where(*:first-child)::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100vw;
+    width: 200vw;
+    height: 1px;
+    background-color: var(--color-neutral-4);
+    pointer-events: none;
+  }
+}
+
+@utility cs-page-gutter {
+  &::before, &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: var(--page-gutter-w, 2.5rem);
+    pointer-events: none;
+    background: repeating-linear-gradient(315deg, var(--color-neutral-3) 0 1px, transparent 1px 50%);
+    background-size: 10px 10px;
+    background-attachment: fixed;
+  }
+
+  &::before {
+    right: 100%;
+    border-left: 1px solid var(--color-neutral-4);
+  }
+
+  &::after {
+    left: 100%;
+    border-right: 1px solid var(--color-neutral-4);
+  }
+}
+
+@layer base {
+
+  * {
+    @apply transition-colors duration-200;
+  }
+
+  body {
+    color: var(--color-neutral-12);
+    background-color: var(--color-neutral-1);
+  }
+
+
+  @font-face {
+    font-family: 'geist';
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/geist.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'geist-mono';
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/geist-mono.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'geist-pixel-circle';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/geist-pixel-circle.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'geist-pixel-grid';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/geist-pixel-grid.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'geist-pixel-line';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/geist-pixel-line.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'geist-pixel-square';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/geist-pixel-square.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'geist-pixel-triangle';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/geist-pixel-triangle.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'clash-grotesk-variable';
+    font-weight: 200 700;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/clash-grotesk-variable.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'nippo';
+    font-weight: 200 700;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/nippo.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'being';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/being.otf) format('opentype');
+  }
+
+  @font-face {
+    font-family: 'Aalto';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/aalto.otf) format('opentype');
+  }
+
+  @font-face {
+    font-family: 'humane-variable';
+    font-weight: 200 800;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/humane-variable.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'general-sans';
+    font-weight: 200 800;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/general-sans.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'karmatic-arcade-regular';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/karmatic-arcade-regular.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'kode-mono-vf';
+    font-style: normal;
+    font-weight: 400 700;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/kode-mono-vf.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'digital-7-mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/digital-7-mono.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'pixelony';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/pixelony.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'unknown';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 140%;
+    src: url(https://cdn.digo-labs.com/fonts/unknown.otf) format('opentype');
+  }
+
+  @font-face {
+    font-family: 'benzol';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/benzol.otf) format('opentype');
+  }
+
+  @font-face {
+    font-family: 'half';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/half.otf) format('opentype');
+  }
+
+  @font-face {
+    font-family: 'miratrix';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/miratrix.otf) format('opentype');
+  }
+
+  @font-face {
+    font-family: 'triakis';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/triakis.otf) format('opentype');
+  }
+
+  @font-face {
+    font-family: 'yeager';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/yeager.otf) format('opentype');
+  }
+
+  @font-face {
+    font-family: 'disket';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/disket.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'heming';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/heming.ttf) format('truetype');
+  }
+
+  @font-face {
+    font-family: 'obrazec';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    size-adjust: 100%;
+    src: url(https://cdn.digo-labs.com/fonts/obrazec.ttf) format('truetype');
+  }
+  
+}
+
+@layer utilities {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #ffffff50 transparent;
+  }
+}
+
+@layer base {
+  ::selection {
+    background-color: var(--color-neutral-12);
+    color: var(--color-neutral-1);
+  }
+
+  ::-moz-selection {
+    background-color: var(--color-neutral-12);
+    color: var(--color-neutral-1);
+  }
+}