@iit/precision-ui 0.1.0 → 0.3.0

package/dist/styles.css

@@ -1,730 +1,2280 @@
-
-  :root {
-    /* TODO: check all colors from Figma */
-    /* init */
-    --foreground-rgb: 0, 0, 0;
-    --background-start-rgb: 214, 219, 220;
-    --background-end-rgb: 255, 255, 255;
-    /* shad */
-    --precision-ui-tw-background: 0 0% 100%;
-    --precision-ui-tw-foreground: 222.2 84% 4.9%;
-
-    --precision-ui-tw-muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --precision-ui-tw-popover: 0 0% 100%;
-    --precision-ui-tw-popover-foreground: 222.2 84% 4.9%;
-
-    --precision-ui-tw-border: 214.3 31.8% 91.4%;
-    --precision-ui-tw-input: 214.3 31.8% 91.4%;
-
-    --precision-ui-tw-card: 0 0% 100%;
-    --precision-ui-tw-card-foreground: 222.2 84% 4.9%;
-
-    --precision-ui-tw-navy: 219, 98%, 24%;
-    --precision-ui-tw-navy-opacity-4: 219, 98%, 24%, 0.04;
-    --precision-ui-tw-navy-opacity-4-absolute: 216, 12%, 92%;
-    --precision-ui-tw-navy-opacity-8: 219, 98%, 24%, 0.08;
-    /* above not in Figma, just for inputs */
-    --precision-ui-tw-navy-opacity-16: 219, 98%, 24%, 0.16;
-    --precision-ui-tw-navy-opacity-32: 219, 98%, 24%, 0.32;
-    --precision-ui-tw-navy-opacity-40: 219, 98%, 24%, 0.4;
-    --precision-ui-tw-navy-opacity-60: 219, 98%, 24%, 0.6;
-    --precision-ui-tw-navy-opacity-80: 219, 98%, 24%, 0.8;
-    /* above not in Figma, for checked checkbox hover */
-
-    --precision-ui-tw-article-verylight: 225, 95%, 59%;
-    --precision-ui-tw-article-ultramarine: 235, 88%, 69%;
-
-    --precision-ui-tw-sapphire: 219, 98%, 44%;
-    --precision-ui-tw-sapphire-hover: 219, 78%, 62%;
-    --precision-ui-tw-turquoise: 181, 100%, 41%;
-    --precision-ui-tw-turquoise-opacity-16: 181, 100%, 41%, 0.16;
-    --precision-ui-tw-turquoise-opacity-20: 181, 100%, 41%, 0.2;
-    /* for advantages card */
-
-    --precision-ui-tw-whitish: 0, 0%, 100%;
-    --precision-ui-tw-whitish-opacity-8: 0, 0%, 100%, 0.08;
-    --precision-ui-tw-whitish-opacity-16: 0, 0%, 100%, 0.16;
-    --precision-ui-tw-whitish-opacity-24: 0, 0%, 100%, 0.24;
-    --precision-ui-tw-whitish-opacity-32: 0, 0%, 100%, 0.32;
-    --precision-ui-tw-whitish-opacity-40: 0, 0%, 100%, 0.4;
-    /* above slider pagination element */
-    --precision-ui-tw-whitish-opacity-60: 0, 0%, 100%, 0.6;
-    --precision-ui-tw-whitish-opacity-80: 0, 0%, 100%, 0.8;
-    /* above not in Figma, for checked checkbox hover */
-
-    --precision-ui-tw-grey-1: 0, 0%, 95%;
-    --precision-ui-tw-grey-2: 0, 0%, 97%;
-
-    --precision-ui-tw-danger: 1, 88%, 50%;
-
-    --precision-ui-tw-primary: 222.2 47.4% 11.2%;
-    --precision-ui-tw-primary-foreground: 210 40% 98%;
-
-    --precision-ui-tw-secondary: 210 40% 96.1%;
-    --precision-ui-tw-secondary-foreground: 222.2 47.4% 11.2%;
-
-    --precision-ui-tw-accent: 210 40% 96.1%;
-    --precision-ui-tw-accent-foreground: 222.2 47.4% 11.2%;
-
-    --precision-ui-tw-destructive: 0 84.2% 60.2%;
-    --precision-ui-tw-destructive-foreground: 210 40% 98%;
-
-    --precision-ui-tw-ring: 222.2 84% 4.9%;
-
-    --precision-ui-tw-radius: 0.5rem;
-  }
-
-  .dark {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --precision-ui-tw-background: 0 0% 0%;
-    --precision-ui-tw-foreground: 210 40% 98%;
-    --precision-ui-tw-muted: 210 40% 10%;
-    --muted-foreground: 215.4 16.3% 80%;
-    --precision-ui-tw-popover: 0 0% 0%;
-    --precision-ui-tw-popover-foreground: 210 40% 98%;
-    --precision-ui-tw-border: 214.3 31.8% 10%;
-    --precision-ui-tw-input: 214.3 31.8% 10%;
-    --precision-ui-tw-card: 0 0% 0%;
-    --precision-ui-tw-card-foreground: 210 40% 98%;
-    --precision-ui-tw-navy: 219, 98%, 80%;
-    --precision-ui-tw-navy-opacity-4: 219, 98%, 80%, 0.04;
-    --precision-ui-tw-navy-opacity-4-absolute: 216, 12%, 10%;
-    --precision-ui-tw-navy-opacity-8: 219, 98%, 80%, 0.08;
-    --precision-ui-tw-navy-opacity-16: 219, 98%, 80%, 0.16;
-    --precision-ui-tw-navy-opacity-32: 219, 98%, 80%, 0.32;
-    --precision-ui-tw-navy-opacity-40: 219, 98%, 80%, 0.4;
-    --precision-ui-tw-navy-opacity-60: 219, 98%, 80%, 0.6;
-    --precision-ui-tw-navy-opacity-80: 219, 98%, 80%, 0.8;
-    --precision-ui-tw-article-verylight: 225, 95%, 80%;
-    --precision-ui-tw-article-ultramarine: 235, 88%, 80%;
-    --precision-ui-tw-sapphire: 219, 98%, 80%;
-    --precision-ui-tw-sapphire-hover: 219, 78%, 80%;
-    --precision-ui-tw-turquoise: 181, 100%, 80%;
-    --precision-ui-tw-turquoise-opacity-16: 181, 100%, 80%, 0.16;
-    --precision-ui-tw-turquoise-opacity-20: 181, 100%, 80%, 0.2;
-    --precision-ui-tw-whitish: 0, 0%, 0%;
-    --precision-ui-tw-whitish-opacity-8: 0, 0%, 0%, 0.08;
-    --precision-ui-tw-whitish-opacity-16: 0, 0%, 0%, 0.16;
-    --precision-ui-tw-whitish-opacity-24: 0, 0%, 0%, 0.24;
-    --precision-ui-tw-whitish-opacity-32: 0, 0%, 0%, 0.32;
-    --precision-ui-tw-whitish-opacity-40: 0, 0%, 0%, 0.4;
-    --precision-ui-tw-whitish-opacity-60: 0, 0%, 0%, 0.6;
-    --precision-ui-tw-whitish-opacity-80: 0, 0%, 0%, 0.8;
-    --precision-ui-tw-grey-1: 0, 0%, 10%;
-    --precision-ui-tw-grey-2: 0, 0%, 5%;
-    --precision-ui-tw-danger: 1, 88%, 80%;
-    --precision-ui-tw-primary: 222.2 47.4% 90%;
-    --precision-ui-tw-primary-foreground: 210 40% 10%;
-    --precision-ui-tw-secondary: 210 40% 10%;
-    --precision-ui-tw-secondary-foreground: 222.2 47.4% 90%;
-    --precision-ui-tw-accent: 210 40% 10%;
-    --precision-ui-tw-accent-foreground: 222.2 47.4% 90%;
-    --precision-ui-tw-destructive: 0 84.2% 80%;
-    --precision-ui-tw-destructive-foreground: 210 40% 10%;
-    --precision-ui-tw-ring: 210 40% 98%;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --foreground-rgb: 255, 255, 255;
-      --background-start-rgb: 0, 0, 0;
-      --background-end-rgb: 0, 0, 0;
-    }
-  }
-  * {
-    border-color: hsl(var(--precision-ui-tw-border));
-}
-  body {
-    background-color: hsl(var(--precision-ui-tw-background));
-    color: hsl(var(--precision-ui-tw-foreground));
-    font-feature-settings: 'rlig' 1, 'calt' 1;
-}
-
-:root {
-    --precision-ui-tw-border-spacing-x: 0;
-    --precision-ui-tw-border-spacing-y: 0;
-    --precision-ui-tw-translate-x: 0;
-    --precision-ui-tw-translate-y: 0;
-    --precision-ui-tw-rotate: 0;
-    --precision-ui-tw-skew-x: 0;
-    --precision-ui-tw-skew-y: 0;
-    --precision-ui-tw-scale-x: 1;
-    --precision-ui-tw-scale-y: 1;
-    --precision-ui-tw-pan-x:  ;
-    --precision-ui-tw-pan-y:  ;
-    --precision-ui-tw-pinch-zoom:  ;
-    --precision-ui-tw-scroll-snap-strictness: proximity;
-    --precision-ui-tw-gradient-from-position:  ;
-    --precision-ui-tw-gradient-via-position:  ;
-    --precision-ui-tw-gradient-to-position:  ;
-    --precision-ui-tw-ordinal:  ;
-    --precision-ui-tw-slashed-zero:  ;
-    --precision-ui-tw-numeric-figure:  ;
-    --precision-ui-tw-numeric-spacing:  ;
-    --precision-ui-tw-numeric-fraction:  ;
-    --precision-ui-tw-ring-inset:  ;
-    --precision-ui-tw-ring-offset-width: 0px;
-    --precision-ui-tw-ring-offset-color: #fff;
-    --precision-ui-tw-ring-color: rgb(59 130 246 / 0.5);
-    --precision-ui-tw-ring-offset-shadow: 0 0 #0000;
-    --precision-ui-tw-ring-shadow: 0 0 #0000;
-    --precision-ui-tw-shadow: 0 0 #0000;
-    --precision-ui-tw-shadow-colored: 0 0 #0000;
-    --precision-ui-tw-blur:  ;
-    --precision-ui-tw-brightness:  ;
-    --precision-ui-tw-contrast:  ;
-    --precision-ui-tw-grayscale:  ;
-    --precision-ui-tw-hue-rotate:  ;
-    --precision-ui-tw-invert:  ;
-    --precision-ui-tw-saturate:  ;
-    --precision-ui-tw-sepia:  ;
-    --precision-ui-tw-drop-shadow:  ;
-    --precision-ui-tw-backdrop-blur:  ;
-    --precision-ui-tw-backdrop-brightness:  ;
-    --precision-ui-tw-backdrop-contrast:  ;
-    --precision-ui-tw-backdrop-grayscale:  ;
-    --precision-ui-tw-backdrop-hue-rotate:  ;
-    --precision-ui-tw-backdrop-invert:  ;
-    --precision-ui-tw-backdrop-opacity:  ;
-    --precision-ui-tw-backdrop-saturate:  ;
-    --precision-ui-tw-backdrop-sepia:  ;
-    --precision-ui-tw-contain-size:  ;
-    --precision-ui-tw-contain-layout:  ;
-    --precision-ui-tw-contain-paint:  ;
-    --precision-ui-tw-contain-style:  ;
-}
-
-::backdrop {
-    --precision-ui-tw-border-spacing-x: 0;
-    --precision-ui-tw-border-spacing-y: 0;
-    --precision-ui-tw-translate-x: 0;
-    --precision-ui-tw-translate-y: 0;
-    --precision-ui-tw-rotate: 0;
-    --precision-ui-tw-skew-x: 0;
-    --precision-ui-tw-skew-y: 0;
-    --precision-ui-tw-scale-x: 1;
-    --precision-ui-tw-scale-y: 1;
-    --precision-ui-tw-pan-x:  ;
-    --precision-ui-tw-pan-y:  ;
-    --precision-ui-tw-pinch-zoom:  ;
-    --precision-ui-tw-scroll-snap-strictness: proximity;
-    --precision-ui-tw-gradient-from-position:  ;
-    --precision-ui-tw-gradient-via-position:  ;
-    --precision-ui-tw-gradient-to-position:  ;
-    --precision-ui-tw-ordinal:  ;
-    --precision-ui-tw-slashed-zero:  ;
-    --precision-ui-tw-numeric-figure:  ;
-    --precision-ui-tw-numeric-spacing:  ;
-    --precision-ui-tw-numeric-fraction:  ;
-    --precision-ui-tw-ring-inset:  ;
-    --precision-ui-tw-ring-offset-width: 0px;
-    --precision-ui-tw-ring-offset-color: #fff;
-    --precision-ui-tw-ring-color: rgb(59 130 246 / 0.5);
-    --precision-ui-tw-ring-offset-shadow: 0 0 #0000;
-    --precision-ui-tw-ring-shadow: 0 0 #0000;
-    --precision-ui-tw-shadow: 0 0 #0000;
-    --precision-ui-tw-shadow-colored: 0 0 #0000;
-    --precision-ui-tw-blur:  ;
-    --precision-ui-tw-brightness:  ;
-    --precision-ui-tw-contrast:  ;
-    --precision-ui-tw-grayscale:  ;
-    --precision-ui-tw-hue-rotate:  ;
-    --precision-ui-tw-invert:  ;
-    --precision-ui-tw-saturate:  ;
-    --precision-ui-tw-sepia:  ;
-    --precision-ui-tw-drop-shadow:  ;
-    --precision-ui-tw-backdrop-blur:  ;
-    --precision-ui-tw-backdrop-brightness:  ;
-    --precision-ui-tw-backdrop-contrast:  ;
-    --precision-ui-tw-backdrop-grayscale:  ;
-    --precision-ui-tw-backdrop-hue-rotate:  ;
-    --precision-ui-tw-backdrop-invert:  ;
-    --precision-ui-tw-backdrop-opacity:  ;
-    --precision-ui-tw-backdrop-saturate:  ;
-    --precision-ui-tw-backdrop-sepia:  ;
-    --precision-ui-tw-contain-size:  ;
-    --precision-ui-tw-contain-layout:  ;
-    --precision-ui-tw-contain-paint:  ;
-    --precision-ui-tw-contain-style:  ;
-}
-.bg-link-gradient:hover::before {
-    background-color: hsl(var(--precision-ui-tw-navy));
-  }
-.link_white:hover::before {
-    background-color: hsl(var(--precision-ui-tw-whitish));
-  }
-.bg-link-gradient-container {
-    &:hover {
-      .bg-link-gradient::before {
-        background-color: hsl(var(--precision-ui-tw-navy));
-      }
-
-      .bg-link-white-gradient::before {
-        background-color: white;
-      }
-    }
-  }
-.relative {
-    position: relative;
-}
-.mb-1 {
-    margin-bottom: 0.25rem;
-}
-.flex {
-    display: flex;
-}
-.inline-flex {
-    display: inline-flex;
-}
-.table {
-    display: table;
-}
-.grid {
-    display: grid;
-}
-.contents {
-    display: contents;
-}
-.h-10 {
-    height: 2.5rem;
-}
-.h-11 {
-    height: 2.75rem;
-}
-.h-14 {
-    height: 3.5rem;
-}
-.h-9 {
-    height: 2.25rem;
-}
-.w-10 {
-    width: 2.5rem;
-}
-.w-full {
-    width: 100%;
-}
-.rotate-90 {
-    --precision-ui-tw-rotate: 90deg;
-    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
-}
-.cursor-pointer {
-    cursor: pointer;
-}
-.items-center {
-    align-items: center;
-}
-.justify-center {
-    justify-content: center;
-}
-.justify-between {
-    justify-content: space-between;
-}
-.gap-2 {
-    gap: 0.5rem;
-}
-.gap-8 {
-    gap: 2rem;
-}
-.whitespace-nowrap {
-    white-space: nowrap;
-}
-.rounded-full {
-    border-radius: 9999px;
-}
-.rounded-lg {
-    border-radius: var(--precision-ui-tw-radius);
-}
-.rounded-md {
-    border-radius: calc(var(--precision-ui-tw-radius) - 2px);
-}
-.border {
-    border-width: 1px;
-}
-.border-solid {
-    border-style: solid;
-}
-.border-none {
-    border-style: none;
-}
-.border-destructive\/50 {
-    border-color: hsl(var(--precision-ui-tw-destructive) / 0.5);
-}
-.border-input {
-    border-color: hsl(var(--precision-ui-tw-input));
-}
-.border-navy-opacity-32 {
-    border-color: hsl(var(--precision-ui-tw-navy-opacity-32));
-}
-.border-whitish-opacity-32 {
-    border-color: hsl(var(--precision-ui-tw-whitish-opacity-32));
-}
-.bg-background {
-    background-color: hsl(var(--precision-ui-tw-background));
-}
-.bg-destructive {
-    background-color: hsl(var(--precision-ui-tw-destructive));
-}
-.bg-navy {
-    background-color: hsl(var(--precision-ui-tw-navy));
-}
-.bg-navy-opacity-4 {
-    background-color: hsl(var(--precision-ui-tw-navy-opacity-4));
-}
-.bg-red-500 {
-    --precision-ui-tw-bg-opacity: 1;
-    background-color: rgb(239 68 68 / var(--precision-ui-tw-bg-opacity));
-}
-.bg-sapphire {
-    background-color: hsl(var(--precision-ui-tw-sapphire));
-}
-.bg-transparent {
-    background-color: transparent;
-}
-.bg-white {
-    --precision-ui-tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--precision-ui-tw-bg-opacity));
-}
-.bg-whitish-opacity-16 {
-    background-color: hsl(var(--precision-ui-tw-whitish-opacity-16));
-}
-.bg-whitish-opacity-32 {
-    background-color: hsl(var(--precision-ui-tw-whitish-opacity-32));
-}
-.bg-whitish-opacity-8 {
-    background-color: hsl(var(--precision-ui-tw-whitish-opacity-8));
-}
-.p-4 {
-    padding: 1rem;
-}
-.p-\[10px\] {
-    padding: 10px;
-}
-.p-\[5px\] {
-    padding: 5px;
-}
-.px-3 {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-}
-.px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-.px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
-}
-.px-\[13\.5px\] {
-    padding-left: 13.5px;
-    padding-right: 13.5px;
-}
-.px-\[18px\] {
-    padding-left: 18px;
-    padding-right: 18px;
-}
-.py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-}
-.py-4 {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-}
-.py-\[11px\] {
-    padding-top: 11px;
-    padding-bottom: 11px;
-}
-.py-\[15px\] {
-    padding-top: 15px;
-    padding-bottom: 15px;
-}
-.pr-2 {
-    padding-right: 0.5rem;
-}
-.text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
-.font-medium {
-    font-weight: 500;
-}
-.leading-none {
-    line-height: 1;
-}
-.tracking-tight {
-    letter-spacing: -0.025em;
-}
-.text-destructive {
-    color: hsl(var(--precision-ui-tw-destructive));
-}
-.text-destructive-foreground {
-    color: hsl(var(--precision-ui-tw-destructive-foreground));
-}
-.text-foreground {
-    color: hsl(var(--precision-ui-tw-foreground));
-}
-.text-navy {
-    color: hsl(var(--precision-ui-tw-navy));
-}
-.text-primary {
-    color: hsl(var(--precision-ui-tw-primary));
-}
-.text-turquoise {
-    color: hsl(var(--precision-ui-tw-turquoise));
-}
-.text-white {
-    --precision-ui-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--precision-ui-tw-text-opacity));
-}
-.underline-offset-4 {
-    text-underline-offset: 4px;
-}
-.outline {
-    outline-style: solid;
-}
-.ring-offset-background {
-    --precision-ui-tw-ring-offset-color: hsl(var(--precision-ui-tw-background));
-}
-.transition-all {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-}
-.transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-}
-.duration-200 {
-    transition-duration: 200ms;
-}
-@keyframes enter {
-
-    from {
-        opacity: var(--precision-ui-tw-enter-opacity, 1);
-        transform: translate3d(var(--precision-ui-tw-enter-translate-x, 0), var(--precision-ui-tw-enter-translate-y, 0), 0) scale3d(var(--precision-ui-tw-enter-scale, 1), var(--precision-ui-tw-enter-scale, 1), var(--precision-ui-tw-enter-scale, 1)) rotate(var(--precision-ui-tw-enter-rotate, 0));
-    }
-}
-@keyframes exit {
-
-    to {
-        opacity: var(--precision-ui-tw-exit-opacity, 1);
-        transform: translate3d(var(--precision-ui-tw-exit-translate-x, 0), var(--precision-ui-tw-exit-translate-y, 0), 0) scale3d(var(--precision-ui-tw-exit-scale, 1), var(--precision-ui-tw-exit-scale, 1), var(--precision-ui-tw-exit-scale, 1)) rotate(var(--precision-ui-tw-exit-rotate, 0));
-    }
-}
-.duration-200 {
-    animation-duration: 200ms;
-}
-@import 'media.scss';
-@import 'typography.scss';
-
-html {
-  font-size: 16px;
-  /* FIXME: it was 20, explore and fix if needed */
-}
-
-body {
-  font-family: 'TT Commons', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  /* font-feature-settings: "rlig" 1, "calt" 1; */
-}
-
-.bg-link-gradient {
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-image: linear-gradient(to top, transparent 1px, transparent 1px);
-    /* background-image: linear-gradient(to top, rgba(255,137,106,.3) 1px, transparent 1px); */
-    background-repeat: repeat-x;
-    /* background-position: 0 -3px; */
-    height: 1px;
-    width: 100%;
-    transition: all ease 0.3s;
-  }
-}
-
-.bg-link-white-gradient,
-.link_navy,
-.link_white {
-  @extend .bg-link-gradient;
-}
-
-.link,
-.link_navy,
-.link_white {
-  transition: all ease 0.25s;
-  background-image: linear-gradient(
-    to top,
-    rgba(0, 85, 144, 0) 1px,
-    transparent 1px
-  );
-  background-repeat: repeat-x;
-  background-position: 0 0px;
-  text-decoration: none;
-}
-
-.hover\:cursor-pointer:hover {
-    cursor: pointer;
-}
-
-.hover\:rounded-\[24px\]:hover {
-    border-radius: 24px;
-}
-
-.hover\:bg-accent:hover {
-    background-color: hsl(var(--precision-ui-tw-accent));
-}
-
-.hover\:bg-destructive\/90:hover {
-    background-color: hsl(var(--precision-ui-tw-destructive) / 0.9);
-}
-
-.hover\:bg-navy-opacity-4:hover {
-    background-color: hsl(var(--precision-ui-tw-navy-opacity-4));
-}
-
-.hover\:bg-sapphire-hover:hover {
-    background-color: hsl(var(--precision-ui-tw-sapphire-hover));
-}
-
-.hover\:bg-white:hover {
-    --precision-ui-tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--precision-ui-tw-bg-opacity));
-}
-
-.hover\:bg-whitish-opacity-16:hover {
-    background-color: hsl(var(--precision-ui-tw-whitish-opacity-16));
-}
-
-.hover\:bg-whitish-opacity-24:hover {
-    background-color: hsl(var(--precision-ui-tw-whitish-opacity-24));
-}
-
-.hover\:bg-whitish-opacity-80:hover {
-    background-color: hsl(var(--precision-ui-tw-whitish-opacity-80));
-}
-
-.hover\:text-accent-foreground:hover {
-    color: hsl(var(--precision-ui-tw-accent-foreground));
-}
-
-.hover\:text-navy:hover {
-    color: hsl(var(--precision-ui-tw-navy));
-}
-
-.hover\:underline:hover {
-    text-decoration-line: underline;
-}
-
-.focus-visible\:outline-none:focus-visible {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-}
-
-.focus-visible\:ring-2:focus-visible {
-    --precision-ui-tw-ring-offset-shadow: var(--precision-ui-tw-ring-inset) 0 0 0 var(--precision-ui-tw-ring-offset-width) var(--precision-ui-tw-ring-offset-color);
-    --precision-ui-tw-ring-shadow: var(--precision-ui-tw-ring-inset) 0 0 0 calc(2px + var(--precision-ui-tw-ring-offset-width)) var(--precision-ui-tw-ring-color);
-    box-shadow: var(--precision-ui-tw-ring-offset-shadow), var(--precision-ui-tw-ring-shadow), var(--precision-ui-tw-shadow, 0 0 #0000);
-}
-
-.focus-visible\:ring-ring:focus-visible {
-    --precision-ui-tw-ring-color: hsl(var(--precision-ui-tw-ring));
-}
-
-.focus-visible\:ring-offset-2:focus-visible {
-    --precision-ui-tw-ring-offset-width: 2px;
-}
-
-.disabled\:pointer-events-none:disabled {
-    pointer-events: none;
-}
-
-.disabled\:cursor-not-allowed:disabled {
-    cursor: not-allowed;
-}
-
-.disabled\:opacity-50:disabled {
-    opacity: 0.5;
-}
-
-.group:hover .group-hover\:scale-125 {
-    --precision-ui-tw-scale-x: 1.25;
-    --precision-ui-tw-scale-y: 1.25;
-    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
-}
-
-.group:hover .group-hover\:transform {
-    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
-}
-
-.group:hover .group-hover\:bg-transparent {
-    background-color: transparent;
-}
-
-.dark\:border-destructive:is([data-mode="dark"] *) {
-    border-color: hsl(var(--precision-ui-tw-destructive));
-}
-
-@media (min-width: 640px) {
-
-    .sm\:max-w-xs {
-        max-width: 20rem;
-    }
-}
-
-@media (min-width: 990px) {
-
-    .lg\:max-w-sm {
-        max-width: 24rem;
-    }
-}
-
-@media (min-width: 1280px) {
-
-    .xl\:max-w-md {
-        max-width: 28rem;
-    }
-}
-
-.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
-    --precision-ui-tw-translate-y: -3px;
-    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
-}
-
-.\[\&\>svg\]\:absolute>svg {
-    position: absolute;
-}
-
-.\[\&\>svg\]\:left-4>svg {
-    left: 1rem;
-}
-
-.\[\&\>svg\]\:top-4>svg {
-    top: 1rem;
-}
-
-.\[\&\>svg\]\:text-destructive>svg {
-    color: hsl(var(--precision-ui-tw-destructive));
-}
-
-.\[\&\>svg\]\:text-foreground>svg {
-    color: hsl(var(--precision-ui-tw-foreground));
-}
-
-.\[\&\>svg\~\*\]\:pl-7>svg~* {
-    padding-left: 1.75rem;
-}
-
-.\[\&_p\]\:leading-relaxed p {
-    line-height: 1.625;
-}
+@charset "UTF-8";
+/***
+    The new CSS reset - version 1.11.3 (last updated 25.08.2024)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+ */
+*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+    all: unset;
+    display: revert;
+}
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+/* Fix mobile Safari increase font-size on landscape mode */
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+}
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+    cursor: revert;
+}
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu, summary {
+    list-style: none;
+}
+/* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
+ol {
+    counter-reset: revert;
+}
+/* For images to not be able to exceed their container */
+img {
+    max-inline-size: 100%;
+    max-block-size: 100%;
+}
+/* removes spacing between cells in tables */
+table {
+    border-collapse: collapse;
+}
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input, textarea {
+    -webkit-user-select: auto;
+}
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+    white-space: revert;
+}
+/* minimum style to allow to style meter element */
+meter {
+    -webkit-appearance: revert;
+    -moz-appearance: revert;
+         appearance: revert;
+}
+/* preformatted text - use only for this feature */
+:where(pre) {
+    all: revert;
+    box-sizing: border-box;
+}
+/* reset default text opacity of input placeholder */
+::-moz-placeholder {
+    color: unset;
+}
+::placeholder {
+    color: unset;
+}
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+    display: none;
+}
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+    -moz-user-modify: read-write;
+    -webkit-user-modify: read-write;
+    overflow-wrap: break-word;
+    -webkit-line-break: after-white-space;
+    -webkit-user-select: auto;
+}
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+    -webkit-user-drag: element;
+}
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+    all: revert;
+    box-sizing: border-box;
+}
+/* Remove details summary webkit styles */
+::-webkit-details-marker {
+    display: none;
+}
+:root {
+    /* TODO: check all colors from Figma */
+    /* init */
+    --foreground-rgb: 0, 0, 0;
+    --background-start-rgb: 214, 219, 220;
+    --background-end-rgb: 255, 255, 255;
+    /* shad */
+    --precision-ui-tw-background: 0 0% 100%;
+    --precision-ui-tw-foreground: 222.2 84% 4.9%;
+    --precision-ui-tw-muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --precision-ui-tw-popover: 0 0% 100%;
+    --precision-ui-tw-popover-foreground: 222.2 84% 4.9%;
+    --precision-ui-tw-border: 214.3 31.8% 91.4%;
+    --precision-ui-tw-input: 214.3 31.8% 91.4%;
+    --precision-ui-tw-card: 0 0% 100%;
+    --precision-ui-tw-card-foreground: 222.2 84% 4.9%;
+    --precision-ui-tw-navy: 219, 98%, 24%;
+    --precision-ui-tw-navy-opacity-4: 219, 98%, 24%, 0.04;
+    --precision-ui-tw-navy-opacity-4-absolute: 216, 12%, 92%;
+    --precision-ui-tw-navy-opacity-8: 219, 98%, 24%, 0.08;
+    /* above not in Figma, just for inputs */
+    --precision-ui-tw-navy-opacity-16: 219, 98%, 24%, 0.16;
+    --precision-ui-tw-navy-opacity-32: 219, 98%, 24%, 0.32;
+    --precision-ui-tw-navy-opacity-40: 219, 98%, 24%, 0.4;
+    --precision-ui-tw-navy-opacity-60: 219, 98%, 24%, 0.6;
+    --precision-ui-tw-navy-opacity-80: 219, 98%, 24%, 0.8;
+    /* above not in Figma, for checked checkbox hover */
+    --precision-ui-tw-article-verylight: 225, 95%, 59%;
+    --precision-ui-tw-article-ultramarine: 235, 88%, 69%;
+    --precision-ui-tw-sapphire: 219, 98%, 44%;
+    --precision-ui-tw-sapphire-hover: 219, 78%, 62%;
+    --precision-ui-tw-turquoise: 181, 100%, 41%;
+    --precision-ui-tw-turquoise-opacity-16: 181, 100%, 41%, 0.16;
+    --precision-ui-tw-turquoise-opacity-20: 181, 100%, 41%, 0.2;
+    /* for advantages card */
+    --precision-ui-tw-whitish: 0, 0%, 100%;
+    --precision-ui-tw-whitish-opacity-8: 0, 0%, 100%, 0.08;
+    --precision-ui-tw-whitish-opacity-16: 0, 0%, 100%, 0.16;
+    --precision-ui-tw-whitish-opacity-24: 0, 0%, 100%, 0.24;
+    --precision-ui-tw-whitish-opacity-32: 0, 0%, 100%, 0.32;
+    --precision-ui-tw-whitish-opacity-40: 0, 0%, 100%, 0.4;
+    /* above slider pagination element */
+    --precision-ui-tw-whitish-opacity-60: 0, 0%, 100%, 0.6;
+    --precision-ui-tw-whitish-opacity-80: 0, 0%, 100%, 0.8;
+    /* above not in Figma, for checked checkbox hover */
+    --precision-ui-tw-grey-1: 0, 0%, 95%;
+    --precision-ui-tw-grey-2: 0, 0%, 97%;
+    --precision-ui-tw-danger: 1, 88%, 50%;
+    --precision-ui-tw-primary: 222.2 47.4% 11.2%;
+    --precision-ui-tw-primary-foreground: 210 40% 98%;
+    --precision-ui-tw-secondary: 210 40% 96.1%;
+    --precision-ui-tw-secondary-foreground: 222.2 47.4% 11.2%;
+    --precision-ui-tw-accent: 210 40% 96.1%;
+    --precision-ui-tw-accent-foreground: 222.2 47.4% 11.2%;
+    --precision-ui-tw-destructive: 0 84.2% 60.2%;
+    --precision-ui-tw-destructive-foreground: 210 40% 98%;
+    --precision-ui-tw-ring: 222.2 84% 4.9%;
+    --precision-ui-tw-radius: 0.5rem;
+  }
+.dark {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+    --precision-ui-tw-background: 0 0% 0%;
+    --precision-ui-tw-foreground: 210 40% 98%;
+    --precision-ui-tw-muted: 210 40% 10%;
+    --muted-foreground: 215.4 16.3% 80%;
+    --precision-ui-tw-popover: 0 0% 0%;
+    --precision-ui-tw-popover-foreground: 210 40% 98%;
+    --precision-ui-tw-border: 214.3 31.8% 10%;
+    --precision-ui-tw-input: 214.3 31.8% 10%;
+    --precision-ui-tw-card: 0 0% 0%;
+    --precision-ui-tw-card-foreground: 210 40% 98%;
+    --precision-ui-tw-navy: 219, 98%, 80%;
+    --precision-ui-tw-navy-opacity-4: 219, 98%, 80%, 0.04;
+    --precision-ui-tw-navy-opacity-4-absolute: 216, 12%, 10%;
+    --precision-ui-tw-navy-opacity-8: 219, 98%, 80%, 0.08;
+    --precision-ui-tw-navy-opacity-16: 219, 98%, 80%, 0.16;
+    --precision-ui-tw-navy-opacity-32: 219, 98%, 80%, 0.32;
+    --precision-ui-tw-navy-opacity-40: 219, 98%, 80%, 0.4;
+    --precision-ui-tw-navy-opacity-60: 219, 98%, 80%, 0.6;
+    --precision-ui-tw-navy-opacity-80: 219, 98%, 80%, 0.8;
+    --precision-ui-tw-article-verylight: 225, 95%, 80%;
+    --precision-ui-tw-article-ultramarine: 235, 88%, 80%;
+    --precision-ui-tw-sapphire: 219, 98%, 80%;
+    --precision-ui-tw-sapphire-hover: 219, 78%, 80%;
+    --precision-ui-tw-turquoise: 181, 100%, 80%;
+    --precision-ui-tw-turquoise-opacity-16: 181, 100%, 80%, 0.16;
+    --precision-ui-tw-turquoise-opacity-20: 181, 100%, 80%, 0.2;
+    --precision-ui-tw-whitish: 0, 0%, 0%;
+    --precision-ui-tw-whitish-opacity-8: 0, 0%, 0%, 0.08;
+    --precision-ui-tw-whitish-opacity-16: 0, 0%, 0%, 0.16;
+    --precision-ui-tw-whitish-opacity-24: 0, 0%, 0%, 0.24;
+    --precision-ui-tw-whitish-opacity-32: 0, 0%, 0%, 0.32;
+    --precision-ui-tw-whitish-opacity-40: 0, 0%, 0%, 0.4;
+    --precision-ui-tw-whitish-opacity-60: 0, 0%, 0%, 0.6;
+    --precision-ui-tw-whitish-opacity-80: 0, 0%, 0%, 0.8;
+    --precision-ui-tw-grey-1: 0, 0%, 10%;
+    --precision-ui-tw-grey-2: 0, 0%, 5%;
+    --precision-ui-tw-danger: 1, 88%, 80%;
+    --precision-ui-tw-primary: 222.2 47.4% 90%;
+    --precision-ui-tw-primary-foreground: 210 40% 10%;
+    --precision-ui-tw-secondary: 210 40% 10%;
+    --precision-ui-tw-secondary-foreground: 222.2 47.4% 90%;
+    --precision-ui-tw-accent: 210 40% 10%;
+    --precision-ui-tw-accent-foreground: 222.2 47.4% 90%;
+    --precision-ui-tw-destructive: 0 84.2% 80%;
+    --precision-ui-tw-destructive-foreground: 210 40% 10%;
+    --precision-ui-tw-ring: 210 40% 98%;
+  }
+@media (prefers-color-scheme: dark) {
+    :root {
+      --foreground-rgb: 255, 255, 255;
+      --background-start-rgb: 0, 0, 0;
+      --background-end-rgb: 0, 0, 0;
+    }
+  }
+*{
+    border-color: hsl(var(--precision-ui-tw-border));
+}
+body{
+    background-color: hsl(var(--precision-ui-tw-background));
+    color: hsl(var(--precision-ui-tw-foreground));
+    font-feature-settings: "rlig" 1, "calt" 1;
+}
+:root{
+    --precision-ui-tw-border-spacing-x: 0;
+    --precision-ui-tw-border-spacing-y: 0;
+    --precision-ui-tw-translate-x: 0;
+    --precision-ui-tw-translate-y: 0;
+    --precision-ui-tw-rotate: 0;
+    --precision-ui-tw-skew-x: 0;
+    --precision-ui-tw-skew-y: 0;
+    --precision-ui-tw-scale-x: 1;
+    --precision-ui-tw-scale-y: 1;
+    --precision-ui-tw-pan-x:  ;
+    --precision-ui-tw-pan-y:  ;
+    --precision-ui-tw-pinch-zoom:  ;
+    --precision-ui-tw-scroll-snap-strictness: proximity;
+    --precision-ui-tw-gradient-from-position:  ;
+    --precision-ui-tw-gradient-via-position:  ;
+    --precision-ui-tw-gradient-to-position:  ;
+    --precision-ui-tw-ordinal:  ;
+    --precision-ui-tw-slashed-zero:  ;
+    --precision-ui-tw-numeric-figure:  ;
+    --precision-ui-tw-numeric-spacing:  ;
+    --precision-ui-tw-numeric-fraction:  ;
+    --precision-ui-tw-ring-inset:  ;
+    --precision-ui-tw-ring-offset-width: 0px;
+    --precision-ui-tw-ring-offset-color: #fff;
+    --precision-ui-tw-ring-color: rgb(59 130 246 / 0.5);
+    --precision-ui-tw-ring-offset-shadow: 0 0 #0000;
+    --precision-ui-tw-ring-shadow: 0 0 #0000;
+    --precision-ui-tw-shadow: 0 0 #0000;
+    --precision-ui-tw-shadow-colored: 0 0 #0000;
+    --precision-ui-tw-blur:  ;
+    --precision-ui-tw-brightness:  ;
+    --precision-ui-tw-contrast:  ;
+    --precision-ui-tw-grayscale:  ;
+    --precision-ui-tw-hue-rotate:  ;
+    --precision-ui-tw-invert:  ;
+    --precision-ui-tw-saturate:  ;
+    --precision-ui-tw-sepia:  ;
+    --precision-ui-tw-drop-shadow:  ;
+    --precision-ui-tw-backdrop-blur:  ;
+    --precision-ui-tw-backdrop-brightness:  ;
+    --precision-ui-tw-backdrop-contrast:  ;
+    --precision-ui-tw-backdrop-grayscale:  ;
+    --precision-ui-tw-backdrop-hue-rotate:  ;
+    --precision-ui-tw-backdrop-invert:  ;
+    --precision-ui-tw-backdrop-opacity:  ;
+    --precision-ui-tw-backdrop-saturate:  ;
+    --precision-ui-tw-backdrop-sepia:  ;
+    --precision-ui-tw-contain-size:  ;
+    --precision-ui-tw-contain-layout:  ;
+    --precision-ui-tw-contain-paint:  ;
+    --precision-ui-tw-contain-style:  ;
+}
+::backdrop{
+    --precision-ui-tw-border-spacing-x: 0;
+    --precision-ui-tw-border-spacing-y: 0;
+    --precision-ui-tw-translate-x: 0;
+    --precision-ui-tw-translate-y: 0;
+    --precision-ui-tw-rotate: 0;
+    --precision-ui-tw-skew-x: 0;
+    --precision-ui-tw-skew-y: 0;
+    --precision-ui-tw-scale-x: 1;
+    --precision-ui-tw-scale-y: 1;
+    --precision-ui-tw-pan-x:  ;
+    --precision-ui-tw-pan-y:  ;
+    --precision-ui-tw-pinch-zoom:  ;
+    --precision-ui-tw-scroll-snap-strictness: proximity;
+    --precision-ui-tw-gradient-from-position:  ;
+    --precision-ui-tw-gradient-via-position:  ;
+    --precision-ui-tw-gradient-to-position:  ;
+    --precision-ui-tw-ordinal:  ;
+    --precision-ui-tw-slashed-zero:  ;
+    --precision-ui-tw-numeric-figure:  ;
+    --precision-ui-tw-numeric-spacing:  ;
+    --precision-ui-tw-numeric-fraction:  ;
+    --precision-ui-tw-ring-inset:  ;
+    --precision-ui-tw-ring-offset-width: 0px;
+    --precision-ui-tw-ring-offset-color: #fff;
+    --precision-ui-tw-ring-color: rgb(59 130 246 / 0.5);
+    --precision-ui-tw-ring-offset-shadow: 0 0 #0000;
+    --precision-ui-tw-ring-shadow: 0 0 #0000;
+    --precision-ui-tw-shadow: 0 0 #0000;
+    --precision-ui-tw-shadow-colored: 0 0 #0000;
+    --precision-ui-tw-blur:  ;
+    --precision-ui-tw-brightness:  ;
+    --precision-ui-tw-contrast:  ;
+    --precision-ui-tw-grayscale:  ;
+    --precision-ui-tw-hue-rotate:  ;
+    --precision-ui-tw-invert:  ;
+    --precision-ui-tw-saturate:  ;
+    --precision-ui-tw-sepia:  ;
+    --precision-ui-tw-drop-shadow:  ;
+    --precision-ui-tw-backdrop-blur:  ;
+    --precision-ui-tw-backdrop-brightness:  ;
+    --precision-ui-tw-backdrop-contrast:  ;
+    --precision-ui-tw-backdrop-grayscale:  ;
+    --precision-ui-tw-backdrop-hue-rotate:  ;
+    --precision-ui-tw-backdrop-invert:  ;
+    --precision-ui-tw-backdrop-opacity:  ;
+    --precision-ui-tw-backdrop-saturate:  ;
+    --precision-ui-tw-backdrop-sepia:  ;
+    --precision-ui-tw-contain-size:  ;
+    --precision-ui-tw-contain-layout:  ;
+    --precision-ui-tw-contain-paint:  ;
+    --precision-ui-tw-contain-style:  ;
+}
+.container{
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+}
+@media (min-width: 360px){
+    .container{
+        max-width: 360px;
+    }
+}
+@media (min-width: 640px){
+    .container{
+        max-width: 640px;
+    }
+}
+@media (min-width: 768px){
+    .container{
+        max-width: 768px;
+    }
+}
+@media (min-width: 990px){
+    .container{
+        max-width: 990px;
+    }
+}
+@media (min-width: 1280px){
+    .container{
+        max-width: 1280px;
+    }
+}
+@media (min-width: 1440px){
+    .container{
+        max-width: 1440px;
+    }
+}
+@media (min-width: 1600px){
+    .container{
+        max-width: 1600px;
+    }
+}
+#__next{
+    height: 100%;
+}
+.container {
+    /* @apply max-w-xs px-40 self-center; */
+  }
+@media (min-width: 0) and (max-width: 768px) {
+    .container {
+      padding: 0 1.25rem;
+    }
+  }
+.bg-link-gradient:hover::before, .bg-link-white-gradient:hover::before,
+  .link_navy:hover::before,
+  .link_white:hover::before {
+    background-color: hsl(var(--precision-ui-tw-navy));
+  }
+.link_white:hover::before {
+    background-color: hsl(var(--precision-ui-tw-whitish));
+  }
+.bg-link-gradient-container:hover .bg-link-gradient::before, .bg-link-gradient-container:hover .bg-link-white-gradient::before,
+  .bg-link-gradient-container:hover .link_navy::before,
+  .bg-link-gradient-container:hover .link_white::before {
+    background-color: hsl(var(--precision-ui-tw-navy));
+  }
+.bg-link-gradient-container:hover .bg-link-white-gradient::before {
+    background-color: white;
+  }
+.link, .iit-link, .link_turq, .content a,
+  .link_navy,
+  .link_white {
+    transition: all ease 0.25s;
+    background-image: linear-gradient(to top, rgba(0, 85, 144, 0) 1px, transparent 1px);
+    background-repeat: repeat-x;
+    background-position: 0 0px;
+    text-decoration: none;
+  }
+.link:hover, .iit-link:hover, .link_turq:hover, .content a:hover {
+    background-image: linear-gradient(to top, hsl(var(--precision-ui-tw-turquoise)) 1px, transparent 1px);
+  }
+.link_navy:hover {
+    background-image: linear-gradient(to top, hsl(var(--precision-ui-tw-navy)) 1px, transparent 1px);
+  }
+.link_white:hover {
+    background-image: linear-gradient(to top, hsl(var(--precision-ui-tw-whitish)) 1px, transparent 1px);
+  }
+/* link2 is experiment */
+.sr-only{
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+.absolute{
+    position: absolute;
+}
+.relative{
+    position: relative;
+}
+.-bottom-12{
+    bottom: -3rem;
+}
+.-left-12{
+    left: -3rem;
+}
+.-right-12{
+    right: -3rem;
+}
+.-top-12{
+    top: -3rem;
+}
+.bottom-0{
+    bottom: 0px;
+}
+.bottom-8{
+    bottom: 2rem;
+}
+.bottom-\[1px\]{
+    bottom: 1px;
+}
+.left-0{
+    left: 0px;
+}
+.left-1\/2{
+    left: 50%;
+}
+.left-3{
+    left: 0.75rem;
+}
+.left-\[2px\]{
+    left: 2px;
+}
+.left-\[5px\]{
+    left: 5px;
+}
+.left-auto{
+    left: auto;
+}
+.right-14{
+    right: 3.5rem;
+}
+.right-2{
+    right: 0.5rem;
+}
+.right-3{
+    right: 0.75rem;
+}
+.right-6{
+    right: 1.5rem;
+}
+.right-auto{
+    right: auto;
+}
+.top-0{
+    top: 0px;
+}
+.top-1\/2{
+    top: 50%;
+}
+.top-auto{
+    top: auto;
+}
+.z-0{
+    z-index: 0;
+}
+.z-10{
+    z-index: 10;
+}
+.z-20{
+    z-index: 20;
+}
+.z-30{
+    z-index: 30;
+}
+.z-50{
+    z-index: 50;
+}
+.col-span-1{
+    grid-column: span 1 / span 1;
+}
+.col-span-2{
+    grid-column: span 2 / span 2;
+}
+.col-span-3{
+    grid-column: span 3 / span 3;
+}
+.col-span-7{
+    grid-column: span 7 / span 7;
+}
+.row-start-1{
+    grid-row-start: 1;
+}
+.row-end-3{
+    grid-row-end: 3;
+}
+.mx-auto{
+    margin-left: auto;
+    margin-right: auto;
+}
+.-ml-4{
+    margin-left: -1rem;
+}
+.-mt-4{
+    margin-top: -1rem;
+}
+.mb-1{
+    margin-bottom: 0.25rem;
+}
+.mb-12{
+    margin-bottom: 3rem;
+}
+.mb-2{
+    margin-bottom: 0.5rem;
+}
+.mb-24{
+    margin-bottom: 6rem;
+}
+.mb-5{
+    margin-bottom: 1.25rem;
+}
+.mb-6{
+    margin-bottom: 1.5rem;
+}
+.mt-12{
+    margin-top: 3rem;
+}
+.mt-2{
+    margin-top: 0.5rem;
+}
+.mt-4{
+    margin-top: 1rem;
+}
+.mt-5{
+    margin-top: 1.25rem;
+}
+.mt-6{
+    margin-top: 1.5rem;
+}
+.mt-\[128px\]{
+    margin-top: 128px;
+}
+.mt-\[88px\]{
+    margin-top: 88px;
+}
+.block{
+    display: block;
+}
+.inline{
+    display: inline;
+}
+.flex{
+    display: flex;
+}
+.inline-flex{
+    display: inline-flex;
+}
+.table{
+    display: table;
+}
+.grid{
+    display: grid;
+}
+.contents{
+    display: contents;
+}
+.hidden{
+    display: none;
+}
+.h-1{
+    height: 0.25rem;
+}
+.h-10{
+    height: 2.5rem;
+}
+.h-11{
+    height: 2.75rem;
+}
+.h-14{
+    height: 3.5rem;
+}
+.h-16{
+    height: 4rem;
+}
+.h-4{
+    height: 1rem;
+}
+.h-5{
+    height: 1.25rem;
+}
+.h-8{
+    height: 2rem;
+}
+.h-9{
+    height: 2.25rem;
+}
+.h-\[10px\]{
+    height: 10px;
+}
+.h-\[18px\]{
+    height: 18px;
+}
+.h-\[1px\]{
+    height: 1px;
+}
+.h-\[606px\]{
+    height: 606px;
+}
+.h-full{
+    height: 100%;
+}
+.min-h-\[190px\]{
+    min-height: 190px;
+}
+.min-h-\[300px\]{
+    min-height: 300px;
+}
+.min-h-\[360px\]{
+    min-height: 360px;
+}
+.w-10{
+    width: 2.5rem;
+}
+.w-4{
+    width: 1rem;
+}
+.w-5{
+    width: 1.25rem;
+}
+.w-72{
+    width: 18rem;
+}
+.w-8{
+    width: 2rem;
+}
+.w-\[10px\]{
+    width: 10px;
+}
+.w-\[18px\]{
+    width: 18px;
+}
+.w-\[456px\]{
+    width: 456px;
+}
+.w-\[87\.5\%\]{
+    width: 87.5%;
+}
+.w-\[96\%\]{
+    width: 96%;
+}
+.w-auto{
+    width: auto;
+}
+.w-full{
+    width: 100%;
+}
+.min-w-0{
+    min-width: 0px;
+}
+.max-w-2xl{
+    max-width: 42rem;
+}
+.max-w-6xl{
+    max-width: 72rem;
+}
+.max-w-\[460px\]{
+    max-width: 460px;
+}
+.max-w-\[694px\]{
+    max-width: 694px;
+}
+.max-w-\[800px\]{
+    max-width: 800px;
+}
+.max-w-\[900px\]{
+    max-width: 900px;
+}
+.max-w-md{
+    max-width: 28rem;
+}
+.max-w-sm{
+    max-width: 24rem;
+}
+.shrink-0{
+    flex-shrink: 0;
+}
+.grow-0{
+    flex-grow: 0;
+}
+.basis-full{
+    flex-basis: 100%;
+}
+.-translate-x-1\/2{
+    --precision-ui-tw-translate-x: -50%;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+.-translate-y-1\/2{
+    --precision-ui-tw-translate-y: -50%;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+.translate-y-0{
+    --precision-ui-tw-translate-y: 0px;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+.rotate-90{
+    --precision-ui-tw-rotate: 90deg;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+.transform{
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+.cursor-not-allowed{
+    cursor: not-allowed;
+}
+.cursor-pointer{
+    cursor: pointer;
+}
+.auto-rows-\[222px\]{
+    grid-auto-rows: 222px;
+}
+.grid-cols-1{
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.flex-col{
+    flex-direction: column;
+}
+.items-start{
+    align-items: flex-start;
+}
+.items-center{
+    align-items: center;
+}
+.items-baseline{
+    align-items: baseline;
+}
+.justify-center{
+    justify-content: center;
+}
+.justify-between{
+    justify-content: space-between;
+}
+.gap-1{
+    gap: 0.25rem;
+}
+.gap-12{
+    gap: 3rem;
+}
+.gap-2{
+    gap: 0.5rem;
+}
+.gap-3{
+    gap: 0.75rem;
+}
+.gap-4{
+    gap: 1rem;
+}
+.gap-8{
+    gap: 2rem;
+}
+.space-x-2 > :not([hidden]) ~ :not([hidden]){
+    --precision-ui-tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--precision-ui-tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--precision-ui-tw-space-x-reverse)));
+}
+.space-x-3 > :not([hidden]) ~ :not([hidden]){
+    --precision-ui-tw-space-x-reverse: 0;
+    margin-right: calc(0.75rem * var(--precision-ui-tw-space-x-reverse));
+    margin-left: calc(0.75rem * calc(1 - var(--precision-ui-tw-space-x-reverse)));
+}
+.space-x-4 > :not([hidden]) ~ :not([hidden]){
+    --precision-ui-tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--precision-ui-tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--precision-ui-tw-space-x-reverse)));
+}
+.space-x-5 > :not([hidden]) ~ :not([hidden]){
+    --precision-ui-tw-space-x-reverse: 0;
+    margin-right: calc(1.25rem * var(--precision-ui-tw-space-x-reverse));
+    margin-left: calc(1.25rem * calc(1 - var(--precision-ui-tw-space-x-reverse)));
+}
+.space-y-10 > :not([hidden]) ~ :not([hidden]){
+    --precision-ui-tw-space-y-reverse: 0;
+    margin-top: calc(2.5rem * calc(1 - var(--precision-ui-tw-space-y-reverse)));
+    margin-bottom: calc(2.5rem * var(--precision-ui-tw-space-y-reverse));
+}
+.space-y-12 > :not([hidden]) ~ :not([hidden]){
+    --precision-ui-tw-space-y-reverse: 0;
+    margin-top: calc(3rem * calc(1 - var(--precision-ui-tw-space-y-reverse)));
+    margin-bottom: calc(3rem * var(--precision-ui-tw-space-y-reverse));
+}
+.space-y-2 > :not([hidden]) ~ :not([hidden]){
+    --precision-ui-tw-space-y-reverse: 0;
+    margin-top: calc(0.5rem * calc(1 - var(--precision-ui-tw-space-y-reverse)));
+    margin-bottom: calc(0.5rem * var(--precision-ui-tw-space-y-reverse));
+}
+.space-y-4 > :not([hidden]) ~ :not([hidden]){
+    --precision-ui-tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--precision-ui-tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--precision-ui-tw-space-y-reverse));
+}
+.space-y-6 > :not([hidden]) ~ :not([hidden]){
+    --precision-ui-tw-space-y-reverse: 0;
+    margin-top: calc(1.5rem * calc(1 - var(--precision-ui-tw-space-y-reverse)));
+    margin-bottom: calc(1.5rem * var(--precision-ui-tw-space-y-reverse));
+}
+.overflow-hidden{
+    overflow: hidden;
+}
+.whitespace-nowrap{
+    white-space: nowrap;
+}
+.rounded{
+    border-radius: 0.25rem;
+}
+.rounded-2xl{
+    border-radius: 1rem;
+}
+.rounded-full{
+    border-radius: 9999px;
+}
+.rounded-lg{
+    border-radius: var(--precision-ui-tw-radius);
+}
+.rounded-md{
+    border-radius: calc(var(--precision-ui-tw-radius) - 2px);
+}
+.rounded-sm{
+    border-radius: calc(var(--precision-ui-tw-radius) - 4px);
+}
+.rounded-b-2xl{
+    border-bottom-right-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+}
+.rounded-t-2xl{
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+}
+.border{
+    border-width: 1px;
+}
+.border-\[1px\]{
+    border-width: 1px;
+}
+.border-b{
+    border-bottom-width: 1px;
+}
+.border-b-0{
+    border-bottom-width: 0px;
+}
+.border-r-0{
+    border-right-width: 0px;
+}
+.border-t{
+    border-top-width: 1px;
+}
+.border-t-0{
+    border-top-width: 0px;
+}
+.border-solid{
+    border-style: solid;
+}
+.border-none{
+    border-style: none;
+}
+.border-blue-500{
+    --precision-ui-tw-border-opacity: 1;
+    border-color: rgb(59 130 246 / var(--precision-ui-tw-border-opacity));
+}
+.border-destructive\/50{
+    border-color: hsl(var(--precision-ui-tw-destructive) / 0.5);
+}
+.border-input{
+    border-color: hsl(var(--precision-ui-tw-input));
+}
+.border-navy{
+    border-color: hsl(var(--precision-ui-tw-navy));
+}
+.border-navy-opacity-16{
+    border-color: hsl(var(--precision-ui-tw-navy-opacity-16));
+}
+.border-navy-opacity-32{
+    border-color: hsl(var(--precision-ui-tw-navy-opacity-32));
+}
+.border-red-500{
+    --precision-ui-tw-border-opacity: 1;
+    border-color: rgb(239 68 68 / var(--precision-ui-tw-border-opacity));
+}
+.border-transparent{
+    border-color: transparent;
+}
+.border-whitish{
+    border-color: hsl(var(--precision-ui-tw-whitish));
+}
+.border-whitish-opacity-16{
+    border-color: hsl(var(--precision-ui-tw-whitish-opacity-16));
+}
+.border-whitish-opacity-32{
+    border-color: hsl(var(--precision-ui-tw-whitish-opacity-32));
+}
+.border-b-navy-opacity-32{
+    border-bottom-color: hsl(var(--precision-ui-tw-navy-opacity-32));
+}
+.border-b-whitish-opacity-32{
+    border-bottom-color: hsl(var(--precision-ui-tw-whitish-opacity-32));
+}
+.bg-background{
+    background-color: hsl(var(--precision-ui-tw-background));
+}
+.bg-blue-100{
+    --precision-ui-tw-bg-opacity: 1;
+    background-color: rgb(219 234 254 / var(--precision-ui-tw-bg-opacity));
+}
+.bg-destructive{
+    background-color: hsl(var(--precision-ui-tw-destructive));
+}
+.bg-gray-200{
+    --precision-ui-tw-bg-opacity: 1;
+    background-color: rgb(229 231 235 / var(--precision-ui-tw-bg-opacity));
+}
+.bg-gray-300{
+    --precision-ui-tw-bg-opacity: 1;
+    background-color: rgb(209 213 219 / var(--precision-ui-tw-bg-opacity));
+}
+.bg-grey-1{
+    background-color: hsl(var(--precision-ui-tw-grey-1));
+}
+.bg-grey-2{
+    background-color: hsl(var(--precision-ui-tw-grey-2));
+}
+.bg-navy{
+    background-color: hsl(var(--precision-ui-tw-navy));
+}
+.bg-navy-opacity-4{
+    background-color: hsl(var(--precision-ui-tw-navy-opacity-4));
+}
+.bg-navy-opacity-8{
+    background-color: hsl(var(--precision-ui-tw-navy-opacity-8));
+}
+.bg-popover{
+    background-color: hsl(var(--precision-ui-tw-popover));
+}
+.bg-red-500{
+    --precision-ui-tw-bg-opacity: 1;
+    background-color: rgb(239 68 68 / var(--precision-ui-tw-bg-opacity));
+}
+.bg-sapphire{
+    background-color: hsl(var(--precision-ui-tw-sapphire));
+}
+.bg-transparent{
+    background-color: transparent;
+}
+.bg-turquoise-opacity-16{
+    background-color: hsl(var(--precision-ui-tw-turquoise-opacity-16));
+}
+.bg-turquoise-opacity-20{
+    background-color: hsl(var(--precision-ui-tw-turquoise-opacity-20));
+}
+.bg-white{
+    --precision-ui-tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--precision-ui-tw-bg-opacity));
+}
+.bg-whitish{
+    background-color: hsl(var(--precision-ui-tw-whitish));
+}
+.bg-whitish-opacity-16{
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-16));
+}
+.bg-whitish-opacity-32{
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-32));
+}
+.bg-whitish-opacity-8{
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-8));
+}
+.bg-gradient-to-b{
+    background-image: linear-gradient(to bottom, var(--precision-ui-tw-gradient-stops));
+}
+.from-navy{
+    --precision-ui-tw-gradient-from: hsl(var(--precision-ui-tw-navy)) var(--precision-ui-tw-gradient-from-position);
+    --precision-ui-tw-gradient-to: hsl(var(--precision-ui-tw-navy) / 0) var(--precision-ui-tw-gradient-to-position);
+    --precision-ui-tw-gradient-stops: var(--precision-ui-tw-gradient-from), var(--precision-ui-tw-gradient-to);
+}
+.to-sapphire{
+    --precision-ui-tw-gradient-to: hsl(var(--precision-ui-tw-sapphire)) var(--precision-ui-tw-gradient-to-position);
+}
+.object-contain{
+    -o-object-fit: contain;
+       object-fit: contain;
+}
+.p-0{
+    padding: 0px;
+}
+.p-10{
+    padding: 2.5rem;
+}
+.p-4{
+    padding: 1rem;
+}
+.p-6{
+    padding: 1.5rem;
+}
+.p-\[10px\]{
+    padding: 10px;
+}
+.p-\[5px\]{
+    padding: 5px;
+}
+.px-3{
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+}
+.px-4{
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+.px-6{
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+}
+.px-8{
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+.px-\[13\.5px\]{
+    padding-left: 13.5px;
+    padding-right: 13.5px;
+}
+.px-\[13px\]{
+    padding-left: 13px;
+    padding-right: 13px;
+}
+.px-\[18px\]{
+    padding-left: 18px;
+    padding-right: 18px;
+}
+.py-1{
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+.py-1\.5{
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
+}
+.py-2{
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+.py-4{
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+.py-\[11px\]{
+    padding-top: 11px;
+    padding-bottom: 11px;
+}
+.py-\[120px\]{
+    padding-top: 120px;
+    padding-bottom: 120px;
+}
+.py-\[15px\]{
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+.py-\[88px\]{
+    padding-top: 88px;
+    padding-bottom: 88px;
+}
+.pb-0{
+    padding-bottom: 0px;
+}
+.pb-10{
+    padding-bottom: 2.5rem;
+}
+.pb-32{
+    padding-bottom: 8rem;
+}
+.pb-4{
+    padding-bottom: 1rem;
+}
+.pb-6{
+    padding-bottom: 1.5rem;
+}
+.pb-\[116px\]{
+    padding-bottom: 116px;
+}
+.pb-\[11px\]{
+    padding-bottom: 11px;
+}
+.pb-\[4px\]{
+    padding-bottom: 4px;
+}
+.pb-\[76px\]{
+    padding-bottom: 76px;
+}
+.pl-10{
+    padding-left: 2.5rem;
+}
+.pl-4{
+    padding-left: 1rem;
+}
+.pl-8{
+    padding-left: 2rem;
+}
+.pr-10{
+    padding-right: 2.5rem;
+}
+.pr-2{
+    padding-right: 0.5rem;
+}
+.pr-20{
+    padding-right: 5rem;
+}
+.pr-4{
+    padding-right: 1rem;
+}
+.pr-8{
+    padding-right: 2rem;
+}
+.pt-0{
+    padding-top: 0px;
+}
+.pt-32{
+    padding-top: 8rem;
+}
+.pt-4{
+    padding-top: 1rem;
+}
+.pt-\[14px\]{
+    padding-top: 14px;
+}
+.pt-\[9px\]{
+    padding-top: 9px;
+}
+.text-center{
+    text-align: center;
+}
+.align-middle{
+    vertical-align: middle;
+}
+.text-sm{
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+.font-medium{
+    font-weight: 500;
+}
+.leading-none{
+    line-height: 1;
+}
+.tracking-tight{
+    letter-spacing: -0.025em;
+}
+.text-black{
+    --precision-ui-tw-text-opacity: 1;
+    color: rgb(0 0 0 / var(--precision-ui-tw-text-opacity));
+}
+.text-blue-500{
+    --precision-ui-tw-text-opacity: 1;
+    color: rgb(59 130 246 / var(--precision-ui-tw-text-opacity));
+}
+.text-blue-900{
+    --precision-ui-tw-text-opacity: 1;
+    color: rgb(30 58 138 / var(--precision-ui-tw-text-opacity));
+}
+.text-current{
+    color: currentColor;
+}
+.text-destructive{
+    color: hsl(var(--precision-ui-tw-destructive));
+}
+.text-destructive-foreground{
+    color: hsl(var(--precision-ui-tw-destructive-foreground));
+}
+.text-foreground{
+    color: hsl(var(--precision-ui-tw-foreground));
+}
+.text-muted-foreground{
+    color: hsl(var(--precision-ui-tw-muted-foreground));
+}
+.text-navy{
+    color: hsl(var(--precision-ui-tw-navy));
+}
+.text-navy-opacity-40{
+    color: hsl(var(--precision-ui-tw-navy-opacity-40));
+}
+.text-navy-opacity-60{
+    color: hsl(var(--precision-ui-tw-navy-opacity-60));
+}
+.text-popover-foreground{
+    color: hsl(var(--precision-ui-tw-popover-foreground));
+}
+.text-primary{
+    color: hsl(var(--precision-ui-tw-primary));
+}
+.text-red-500{
+    --precision-ui-tw-text-opacity: 1;
+    color: rgb(239 68 68 / var(--precision-ui-tw-text-opacity));
+}
+.text-turquoise{
+    color: hsl(var(--precision-ui-tw-turquoise));
+}
+.text-white{
+    --precision-ui-tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--precision-ui-tw-text-opacity));
+}
+.text-whitish{
+    color: hsl(var(--precision-ui-tw-whitish));
+}
+.text-whitish-opacity-32{
+    color: hsl(var(--precision-ui-tw-whitish-opacity-32));
+}
+.text-whitish-opacity-60{
+    color: hsl(var(--precision-ui-tw-whitish-opacity-60));
+}
+.underline{
+    text-decoration-line: underline;
+}
+.overline{
+    text-decoration-line: overline;
+}
+.line-through{
+    text-decoration-line: line-through;
+}
+.underline-offset-4{
+    text-underline-offset: 4px;
+}
+.opacity-50{
+    opacity: 0.5;
+}
+.shadow-md{
+    --precision-ui-tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --precision-ui-tw-shadow-colored: 0 4px 6px -1px var(--precision-ui-tw-shadow-color), 0 2px 4px -2px var(--precision-ui-tw-shadow-color);
+    box-shadow: var(--precision-ui-tw-ring-offset-shadow, 0 0 #0000), var(--precision-ui-tw-ring-shadow, 0 0 #0000), var(--precision-ui-tw-shadow);
+}
+.outline-none{
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+.outline{
+    outline-style: solid;
+}
+.ring-offset-background{
+    --precision-ui-tw-ring-offset-color: hsl(var(--precision-ui-tw-background));
+}
+.filter{
+    filter: var(--precision-ui-tw-blur) var(--precision-ui-tw-brightness) var(--precision-ui-tw-contrast) var(--precision-ui-tw-grayscale) var(--precision-ui-tw-hue-rotate) var(--precision-ui-tw-invert) var(--precision-ui-tw-saturate) var(--precision-ui-tw-sepia) var(--precision-ui-tw-drop-shadow);
+}
+.backdrop-blur-\[8px\]{
+    --precision-ui-tw-backdrop-blur: blur(8px);
+    -webkit-backdrop-filter: var(--precision-ui-tw-backdrop-blur) var(--precision-ui-tw-backdrop-brightness) var(--precision-ui-tw-backdrop-contrast) var(--precision-ui-tw-backdrop-grayscale) var(--precision-ui-tw-backdrop-hue-rotate) var(--precision-ui-tw-backdrop-invert) var(--precision-ui-tw-backdrop-opacity) var(--precision-ui-tw-backdrop-saturate) var(--precision-ui-tw-backdrop-sepia);
+            backdrop-filter: var(--precision-ui-tw-backdrop-blur) var(--precision-ui-tw-backdrop-brightness) var(--precision-ui-tw-backdrop-contrast) var(--precision-ui-tw-backdrop-grayscale) var(--precision-ui-tw-backdrop-hue-rotate) var(--precision-ui-tw-backdrop-invert) var(--precision-ui-tw-backdrop-opacity) var(--precision-ui-tw-backdrop-saturate) var(--precision-ui-tw-backdrop-sepia);
+}
+.transition-all{
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+.transition-colors{
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+.transition-transform{
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+.duration-0{
+    transition-duration: 0s;
+}
+.duration-200{
+    transition-duration: 200ms;
+}
+.duration-300{
+    transition-duration: 300ms;
+}
+@keyframes enter{
+    from{
+        opacity: var(--precision-ui-tw-enter-opacity, 1);
+        transform: translate3d(var(--precision-ui-tw-enter-translate-x, 0), var(--precision-ui-tw-enter-translate-y, 0), 0) scale3d(var(--precision-ui-tw-enter-scale, 1), var(--precision-ui-tw-enter-scale, 1), var(--precision-ui-tw-enter-scale, 1)) rotate(var(--precision-ui-tw-enter-rotate, 0));
+    }
+}
+@keyframes exit{
+    to{
+        opacity: var(--precision-ui-tw-exit-opacity, 1);
+        transform: translate3d(var(--precision-ui-tw-exit-translate-x, 0), var(--precision-ui-tw-exit-translate-y, 0), 0) scale3d(var(--precision-ui-tw-exit-scale, 1), var(--precision-ui-tw-exit-scale, 1), var(--precision-ui-tw-exit-scale, 1)) rotate(var(--precision-ui-tw-exit-rotate, 0));
+    }
+}
+.animate-in{
+    animation-name: enter;
+    animation-duration: 150ms;
+    --precision-ui-tw-enter-opacity: initial;
+    --precision-ui-tw-enter-scale: initial;
+    --precision-ui-tw-enter-rotate: initial;
+    --precision-ui-tw-enter-translate-x: initial;
+    --precision-ui-tw-enter-translate-y: initial;
+}
+.fade-in-0{
+    --precision-ui-tw-enter-opacity: 0;
+}
+.zoom-in-95{
+    --precision-ui-tw-enter-scale: .95;
+}
+.duration-0{
+    animation-duration: 0s;
+}
+.duration-200{
+    animation-duration: 200ms;
+}
+.duration-300{
+    animation-duration: 300ms;
+}
+.type__base, .typo_variant_h6_content, .content h5,
+.content .h5, .typo_variant_h6, .content h6,
+.content .h6, .typo_variant_h5, .content h4,
+.content .h4, .typo_variant_h4, .content h3,
+.content .h3, .typo_variant_h3, .content h2,
+.content .h2, .typo_variant_h2, .content h1,
+.content .h1, .typo_variant_h1, .typo_variant_factoid {
+  text-wrap: balance;
+}
+.typo_variant_factoid {
+  font-family: "TT Commons";
+  font-size: clamp(60px, 60px + 1.5vw, 76px);
+  line-height: 1;
+  letter-spacing: -1.52px;
+}
+@media only screen and (max-width: 768pxpx) {
+  .typo_variant_factoid {
+    color: pink;
+  }
+}
+.typo_variant_h1 {
+  font-family: "TT Commons";
+  font-size: clamp(60px, 60px + 1.5vw, 76px);
+  line-height: 0.9;
+  letter-spacing: -1.52px;
+}
+@media only screen and (max-width: 768pxpx) {
+  .typo_variant_h1 {
+    color: red;
+  }
+}
+.typo_variant_h2, .content h1,
+.content .h1 {
+  font-family: "TT Commons";
+  font-size: clamp(45px, 45px + 1.5vw, 57px);
+  line-height: 1;
+  letter-spacing: -0.57px;
+}
+.typo_variant_h3, .content h2,
+.content .h2 {
+  font-family: "TT Commons";
+  font-size: clamp(35px, 35px + 1.5vw, 43px);
+  line-height: 1;
+  letter-spacing: normal;
+}
+.typo_variant_h4, .content h3,
+.content .h3 {
+  font-family: "TT Commons";
+  font-size: clamp(26px, 26px + 1.5vw, 32px);
+  line-height: 1;
+  letter-spacing: normal;
+}
+.typo_variant_h5, .content h4,
+.content .h4 {
+  font-family: "TT Commons";
+  font-size: clamp(19px, 19px + 1.5vw, 24px);
+  line-height: 1.2;
+  letter-spacing: normal;
+}
+.typo_variant_h6, .content h6,
+.content .h6 {
+  font-family: "TT Commons";
+  font-size: clamp(15px, 15px + 1.5vw, 18px);
+  line-height: 1.2;
+  letter-spacing: normal;
+}
+.typo_variant_h6_content, .content h5,
+.content .h5 {
+  font-family: "TT Commons";
+  font-size: clamp(15px, 15px + 1.5vw, 20px);
+  line-height: 1.2;
+  letter-spacing: normal;
+}
+/* Text Variants */
+.typo_variant_subtitle-1 {
+  font-family: "TT Commons";
+  font-size: clamp(16px, 16px + 1.5vw, 20px);
+  line-height: 1.2;
+  letter-spacing: normal;
+}
+.typo_variant_subtitle-2 {
+  font-family: "TT Commons";
+  font-size: clamp(15px, 15px + 1.5vw, 18px);
+  line-height: 1.2;
+  letter-spacing: normal;
+}
+.typo_variant_overline {
+  font-family: "TT Commons";
+  font-size: clamp(12px, 12px + 1.5vw, 15px);
+  line-height: 1.2;
+  letter-spacing: 0.225px;
+  text-transform: uppercase;
+}
+.typo_variant_lead-text {
+  font-family: "TT Commons";
+  font-size: clamp(22px, 22px + 1.5vw, 27px);
+  line-height: 1.1;
+  letter-spacing: normal;
+}
+.typo_variant_body, a.doc-with-icon, .content ol,
+.content ul, .content p {
+  font-family: "TT Commons";
+  font-size: clamp(16px, 16px + 1.5vw, 20px);
+  line-height: 1.25;
+  letter-spacing: normal;
+}
+.typo_variant_small-body {
+  font-family: "TT Commons";
+  font-size: clamp(14px, 14px + 1.5vw, 18px);
+  line-height: 1.3;
+  letter-spacing: normal;
+}
+.typo_variant_caption {
+  font-family: "TT Commons";
+  font-size: clamp(12px, 12px + 1.5vw, 16px);
+  line-height: 1.2;
+  letter-spacing: normal;
+}
+.typo_variant_button, .typo_variant_link {
+  font-family: "TT Commons";
+  font-size: clamp(15px, 15px + 1.5vw, 18px);
+  line-height: 1;
+  letter-spacing: normal;
+}
+.content b,
+.content strong {
+  font-weight: 500;
+  text-shadow: 0 0 0.5px hsla(var(--precision-ui-tw-navy));
+}
+.content p + p, .content p + ol, .content p + ul, .content p + div, .content p + blockquote,
+.content ol + p,
+.content ol + ol,
+.content ol + ul,
+.content ol + div,
+.content ol + blockquote,
+.content ul + p,
+.content ul + ol,
+.content ul + ul,
+.content ul + div,
+.content ul + blockquote,
+.content div + p,
+.content div + ol,
+.content div + ul,
+.content div + div,
+.content div + blockquote {
+  margin-top: 1.4rem;
+}
+.content h6,
+.content .h6 {
+  font-weight: 500;
+}
+.content a {
+  color: hsla(var(--precision-ui-tw-turquoise));
+}
+.content a.more-link {
+  color: hsla(var(--precision-ui-tw-navy));
+}
+.content .table-of-contents a {
+  color: hsla(var(--precision-ui-tw-navy));
+}
+.content .table-of-contents a:hover {
+  background-image: linear-gradient(to top, hsl(var(--precision-ui-tw-navy)) 1px, transparent 1px);
+}
+.content ul {
+  position: relative;
+}
+.content ul > li {
+  position: relative;
+  padding-left: 20px;
+  margin-bottom: 8px;
+}
+.content ul > li::before {
+  content: "—";
+  position: absolute;
+  left: 0;
+  color: hsla(var(--precision-ui-tw-navy-opacity-60));
+}
+.content ul > li > ol {
+  padding-left: 40px;
+}
+ol {
+  position: relative;
+  padding-left: 20px;
+  list-style: decimal;
+}
+ol li {
+  position: relative;
+  margin-bottom: 16px;
+}
+ol li::marker {
+  color: hsla(var(--precision-ui-tw-navy-opacity-60));
+}
+ol li:last-child {
+  margin-bottom: 0;
+}
+.text-whitish-opacity-60.content ul li::before {
+  color: hsla(var(--precision-ui-tw-whitish-opacity-60));
+}
+.content h1,
+.content .h1 {
+  margin-top: 3.6rem;
+  margin-bottom: 1.2rem;
+}
+.content h2,
+.content .h2 {
+  margin-top: 3rem;
+  margin-bottom: 1.2rem;
+}
+.content h3,
+.content .h3 {
+  margin-top: 2.4rem;
+  margin-bottom: 1.2rem;
+}
+.content h4,
+.content .h4 {
+  margin-top: 1.8rem;
+  margin-bottom: 0.9rem;
+}
+.content h5,
+.content .h5 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.6rem;
+}
+.content h6,
+.content .h6 {
+  margin-top: 1.2rem;
+  margin-bottom: 0.3rem;
+}
+html {
+  font-size: 16px;
+  /* FIXME: it was 20, explore and fix if needed */
+}
+body {
+  font-family: "TT Commons", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  /* font-feature-settings: "rlig" 1, "calt" 1; */
+  color: hsl(var(--precision-ui-tw-navy));
+  background: hsl(var(--precision-ui-tw-grey-1));
+  /* background: linear-gradient(
+            to bottom,
+            transparent,
+            rgb(var(--background-end-rgb))
+        )
+        rgb(var(--background-start-rgb)); */
+}
+.bg-link-gradient, .bg-link-white-gradient,
+.link_navy,
+.link_white {
+  position: relative;
+}
+.bg-link-gradient::before, .bg-link-white-gradient::before,
+.link_navy::before,
+.link_white::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(to top, transparent 1px, transparent 1px);
+  /* background-image: linear-gradient(to top, rgba(255,137,106,.3) 1px, transparent 1px); */
+  background-repeat: repeat-x;
+  /* background-position: 0 -3px; */
+  height: 1px;
+  width: 100%;
+  transition: all ease 0.3s;
+}
+body {
+  overflow-x: hidden; /* Prevent horizontal scroll */
+  margin: 0; /* Reset margin */
+}
+.menu-open #main-content {
+  transform: translateX(300px); /* Adjust this value based on your side menu width */
+}
+#main-content {
+  transition: transform 0.6s ease;
+}
+.section-gradient {
+  background: linear-gradient(to right, --precision-ui-tw-primary, --precision-ui-tw-secondary);
+}
+.right-divider, .right-divider_with-tongue::before {
+  position: relative;
+}
+.right-divider::before, .right-divider_with-tongue::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  height: 100%;
+  width: 1px;
+  background: hsla(var(--precision-ui-tw-whitish-opacity-24)); /* TODO: 20 on figma, not in ui kit */
+}
+.right-divider_with-tongue {
+  position: relative;
+}
+.right-divider_with-tongue::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  top: 63%;
+  height: 1px;
+  width: 24px;
+  background: hsla(var(--precision-ui-tw-whitish-opacity-24));
+}
+.achievement-divider {
+  position: relative;
+}
+.achievement-divider::after {
+  content: "";
+  position: absolute;
+  right: -8px;
+  bottom: 0;
+  top: 0;
+  height: 100%;
+  width: 1px;
+  background: hsla(var(--precision-ui-tw-navy-opacity-16));
+}
+.input-container, .input-container_variant_blue:hover::before, .input-container_variant_blue::before, .input-container_variant_default:hover::before, .input-container_variant_default::before {
+  position: relative;
+}
+.input-container::before, .input-container_variant_blue:hover::before, .input-container_variant_blue::before, .input-container_variant_default:hover::before, .input-container_variant_default::before {
+  content: "";
+  position: absolute;
+  left: 8px;
+  bottom: 0;
+  height: 1px;
+  width: calc(100% - 16px);
+  background: transparent;
+  transition: all ease 0.3s;
+  /* background: hsla(var(--precision-ui-tw-navy-opacity-32)); */
+  /* background: red; */
+}
+.input-container_variant_default::before {
+  background: hsla(var(--precision-ui-tw-navy-opacity-16));
+}
+.input-container_variant_default:hover::before {
+  background: hsla(var(--precision-ui-tw-navy));
+}
+.input-container_variant_blue::before {
+  background: hsla(var(--precision-ui-tw-whitish-opacity-32));
+}
+.input-container_variant_blue:hover::before {
+  background: hsla(var(--precision-ui-tw-whitish));
+}
+.horizontal-white-divider-on-center {
+  position: relative;
+}
+.horizontal-white-divider-on-center::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 1px;
+  width: 100%;
+  background: hsla(var(--precision-ui-tw-whitish-opacity-16));
+}
+/* TODO: rename */
+.vertical-white-divider-on-center {
+  position: relative;
+}
+.vertical-white-divider-on-center::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  height: 88px;
+  width: 1px;
+  background: hsla(var(--precision-ui-tw-whitish-opacity-16));
+}
+.author-card {
+  transition: transform 0.2s ease;
+  /* will-change: transform; */
+}
+.author-card:hover {
+  transform: scale3d(1.02, 1.02, 1.02);
+}
+.breadcrumbs {
+  overflow: hidden;
+  counter-reset: list-item;
+  list-style: none;
+  padding: 0;
+}
+.breadcrumbs li {
+  position: relative;
+  display: flex;
+}
+.breadcrumbs li:before {
+  counter-increment: list-item;
+  content: "";
+  display: block;
+  width: calc(var(--counter, 1) * 1rem - 1rem);
+  height: 1px;
+  margin-left: -1rem;
+}
+.breadcrumbs li:last-child .breadcrumb::before {
+  background: hsla(var(--precision-ui-tw-whitish));
+}
+.breadcrumbs li:last-child .breadcrumb::after {
+  display: none;
+}
+.breadcrumb {
+  position: relative;
+  padding-left: 2rem;
+  /* padding-left: calc((var(--counter, 1) * 1rem) + 1rem); */
+}
+.breadcrumb::before {
+  content: "";
+  position: absolute;
+  left: 1rem;
+  /* bottom: 0.5rem; */
+  top: 0.33rem;
+  height: 5px;
+  width: 5px;
+  background: hsla(var(--precision-ui-tw-whitish-opacity-40));
+}
+.breadcrumb::after {
+  content: "";
+  position: absolute;
+  left: 1.15rem;
+  top: 0.65rem;
+  height: 150px;
+  width: 1px;
+  background: transparent;
+  /* border-left: 1px dashed hsla(var(--precision-ui-tw-whitish-opacity-40)); */
+  background-image: linear-gradient(hsla(var(--precision-ui-tw-whitish-opacity-40)) 53%, rgba(255, 255, 255, 0) 0%);
+  background-position: right;
+  background-size: 1px 10px;
+  background-repeat: repeat-y;
+}
+@property --myColor1 {
+  syntax: "<color>";
+  initial-value: #012b7a;
+  inherits: false;
+}
+@property --myColor2 {
+  syntax: "<color>";
+  initial-value: #024fe0;
+  inherits: false;
+}
+.primary-gradient {
+  /* background: linear-gradient(180deg, hsl(var(--precision-ui-tw-navy)) 0%, hsl(var(--precision-ui-tw-sapphire)) 100%); */
+  /* transition: all ease .3s; */
+  background: linear-gradient(var(--myColor1), var(--myColor2));
+  transition: --myColor1 0.3s, --myColor2 0.3s, bottom 0.3s;
+}
+.primary-gradient:hover {
+  /*   background: linear-gradient(180deg, hsl(var(--precision-ui-tw-sapphire)) 0%, hsl(var(--precision-ui-tw-navy)) 100%) */
+  /* --myColor1: red; */
+  --myColor1: #024fe0;
+  /* --myColor2: #E1AF2F; */
+  --myColor2: #012b7a;
+}
+.iit-link {
+  color: hsl(var(--precision-ui-tw-turquoise));
+}
+/* not used */
+.card-animation1 {
+  position: relative;
+}
+.card-animation1::before {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0;
+  content: "";
+  background: white;
+  transition-timing-function: ease-out;
+  transition-duration: 0.15s;
+  transition-property: padding, top, left;
+}
+.card-animation1:hover::before {
+  padding: 4px;
+  top: -4px;
+  left: -4px;
+}
+a.doc-with-icon {
+  position: relative;
+  background: hsl(var(--precision-ui-tw-navy-opacity-4));
+  color: hsl(var(--precision-ui-tw-navy));
+  padding: 8px 16px;
+  padding-left: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  margin-top: 16px;
+  margin-bottom: 24px;
+}
+a.doc-with-icon::before {
+  display: block;
+  content: url("/icons/file_download.svg");
+  width: 32px;
+  height: 32px;
+}
+a.doc-with-icon:hover {
+  background: hsl(var(--precision-ui-tw-navy-opacity-8));
+  border: 1px solid hsl(var(--precision-ui-tw-navy-opacity-16));
+}
+.mix_mb_0 {
+  margin-bottom: 0 !important;
+}
+@media screen and (min-width: 1280px) {
+  .mix_min-h_420 {
+    min-height: 420px;
+  }
+}
+html {
+  --detail-medium-contrast: rgb(234, 234, 234);
+  --background-site: rgb(249, 249, 249);
+  --text-body: rgb(54, 49, 61);
+}
+.embla__progress {
+  border-radius: 1.8rem;
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  background-color: var(--background-site);
+  position: relative;
+  height: 0.6rem;
+  justify-self: flex-end;
+  align-self: center;
+  width: 13rem;
+  max-width: 90%;
+  overflow: hidden;
+}
+.embla__progress__bar {
+  background-color: var(--text-body);
+  position: absolute;
+  width: 100%;
+  top: 0;
+  bottom: 0;
+  left: -100%;
+}
+.embla__dots {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: -0.6rem;
+}
+.embla__dot {
+  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+  background-color: transparent;
+  touch-action: manipulation;
+  display: inline-flex;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 2.6rem;
+  height: 2.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+.embla__dot:after {
+  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
+  width: 1.4rem;
+  height: 1.4rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  content: "";
+}
+.embla__dot--selected:after {
+  box-shadow: inset 0 0 0 0.2rem var(--text-body);
+}
+@keyframes float {
+  0% {
+    transform: translatey(0px) perspective(400px) rotate3d(1, -1, 0, -8deg);
+  }
+  50% {
+    /* transform: translatey(-15px); */
+    transform: translatey(-15px) perspective(400px) rotate3d(1, -1, 0, 8deg);
+  }
+  /* 90% {
+     transform: translatey(0px);
+   } */
+  100% {
+    transform: translatey(0px) perspective(400px) rotate3d(1, -1, 0, -8deg);
+  }
+}
+.floating {
+  animation: float 6s ease-in-out infinite;
+  /* animation-delay: 1s; */
+}
+.file\:border-0::file-selector-button{
+    border-width: 0px;
+}
+.file\:bg-transparent::file-selector-button{
+    background-color: transparent;
+}
+.file\:text-sm::file-selector-button{
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+.file\:font-medium::file-selector-button{
+    font-weight: 500;
+}
+.placeholder\:text-muted-foreground::-moz-placeholder{
+    color: hsl(var(--precision-ui-tw-muted-foreground));
+}
+.placeholder\:text-muted-foreground::placeholder{
+    color: hsl(var(--precision-ui-tw-muted-foreground));
+}
+.hover\:bottom-1:hover{
+    bottom: 0.25rem;
+}
+.hover\:bottom-2:hover{
+    bottom: 0.5rem;
+}
+.hover\:cursor-pointer:hover{
+    cursor: pointer;
+}
+.hover\:rounded-\[24px\]:hover{
+    border-radius: 24px;
+}
+.hover\:bg-accent:hover{
+    background-color: hsl(var(--precision-ui-tw-accent));
+}
+.hover\:bg-destructive\/90:hover{
+    background-color: hsl(var(--precision-ui-tw-destructive) / 0.9);
+}
+.hover\:bg-navy:hover{
+    background-color: hsl(var(--precision-ui-tw-navy));
+}
+.hover\:bg-navy-opacity-4:hover{
+    background-color: hsl(var(--precision-ui-tw-navy-opacity-4));
+}
+.hover\:bg-navy-opacity-4-absolute:hover{
+    background-color: hsl(var(--precision-ui-tw-navy-opacity-4-absolute));
+}
+.hover\:bg-navy-opacity-8:hover{
+    background-color: hsl(var(--precision-ui-tw-navy-opacity-8));
+}
+.hover\:bg-sapphire-hover:hover{
+    background-color: hsl(var(--precision-ui-tw-sapphire-hover));
+}
+.hover\:bg-white:hover{
+    --precision-ui-tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--precision-ui-tw-bg-opacity));
+}
+.hover\:bg-whitish-opacity-16:hover{
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-16));
+}
+.hover\:bg-whitish-opacity-24:hover{
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-24));
+}
+.hover\:bg-whitish-opacity-80:hover{
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-80));
+}
+.hover\:from-sapphire:hover{
+    --precision-ui-tw-gradient-from: hsl(var(--precision-ui-tw-sapphire)) var(--precision-ui-tw-gradient-from-position);
+    --precision-ui-tw-gradient-to: hsl(var(--precision-ui-tw-sapphire) / 0) var(--precision-ui-tw-gradient-to-position);
+    --precision-ui-tw-gradient-stops: var(--precision-ui-tw-gradient-from), var(--precision-ui-tw-gradient-to);
+}
+.hover\:to-navy:hover{
+    --precision-ui-tw-gradient-to: hsl(var(--precision-ui-tw-navy)) var(--precision-ui-tw-gradient-to-position);
+}
+.hover\:text-accent-foreground:hover{
+    color: hsl(var(--precision-ui-tw-accent-foreground));
+}
+.hover\:text-navy:hover{
+    color: hsl(var(--precision-ui-tw-navy));
+}
+.hover\:text-whitish-opacity-60:hover{
+    color: hsl(var(--precision-ui-tw-whitish-opacity-60));
+}
+.hover\:underline:hover{
+    text-decoration-line: underline;
+}
+.focus\:border-navy:focus{
+    border-color: hsl(var(--precision-ui-tw-navy));
+}
+.focus\:border-white:focus{
+    --precision-ui-tw-border-opacity: 1;
+    border-color: rgb(255 255 255 / var(--precision-ui-tw-border-opacity));
+}
+.focus\:outline-none:focus{
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+.focus-visible\:outline-none:focus-visible{
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+.focus-visible\:ring-2:focus-visible{
+    --precision-ui-tw-ring-offset-shadow: var(--precision-ui-tw-ring-inset) 0 0 0 var(--precision-ui-tw-ring-offset-width) var(--precision-ui-tw-ring-offset-color);
+    --precision-ui-tw-ring-shadow: var(--precision-ui-tw-ring-inset) 0 0 0 calc(2px + var(--precision-ui-tw-ring-offset-width)) var(--precision-ui-tw-ring-color);
+    box-shadow: var(--precision-ui-tw-ring-offset-shadow), var(--precision-ui-tw-ring-shadow), var(--precision-ui-tw-shadow, 0 0 #0000);
+}
+.focus-visible\:ring-ring:focus-visible{
+    --precision-ui-tw-ring-color: hsl(var(--precision-ui-tw-ring));
+}
+.focus-visible\:ring-offset-2:focus-visible{
+    --precision-ui-tw-ring-offset-width: 2px;
+}
+.active\:scale-90:active{
+    --precision-ui-tw-scale-x: .9;
+    --precision-ui-tw-scale-y: .9;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+.active\:transform:active{
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+.disabled\:pointer-events-none:disabled{
+    pointer-events: none;
+}
+.disabled\:pointer-events-auto:disabled{
+    pointer-events: auto;
+}
+.disabled\:cursor-not-allowed:disabled{
+    cursor: not-allowed;
+}
+.disabled\:opacity-50:disabled{
+    opacity: 0.5;
+}
+.group:focus-within .group-focus-within\:text-navy-opacity-40{
+    color: hsl(var(--precision-ui-tw-navy-opacity-40));
+}
+.group:focus-within .group-focus-within\:text-whitish-opacity-60{
+    color: hsl(var(--precision-ui-tw-whitish-opacity-60));
+}
+.group:hover .group-hover\:scale-125{
+    --precision-ui-tw-scale-x: 1.25;
+    --precision-ui-tw-scale-y: 1.25;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+.group:hover .group-hover\:transform{
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+.group:hover .group-hover\:bg-transparent{
+    background-color: transparent;
+}
+.group\/informer:hover .group-hover\/informer\:text-navy{
+    color: hsl(var(--precision-ui-tw-navy));
+}
+.group\/submit:hover .group-hover\/submit\:text-whitish{
+    color: hsl(var(--precision-ui-tw-whitish));
+}
+.group:hover .group-hover\:text-whitish{
+    color: hsl(var(--precision-ui-tw-whitish));
+}
+.peer:disabled ~ .peer-disabled\:cursor-not-allowed{
+    cursor: not-allowed;
+}
+.peer:disabled ~ .peer-disabled\:opacity-70{
+    opacity: 0.7;
+}
+.data-\[state\=checked\]\:bg-navy[data-state=checked]{
+    background-color: hsl(var(--precision-ui-tw-navy));
+}
+.data-\[state\=checked\]\:bg-whitish[data-state=checked]{
+    background-color: hsl(var(--precision-ui-tw-whitish));
+}
+.data-\[state\=checked\]\:text-navy[data-state=checked]{
+    color: hsl(var(--precision-ui-tw-navy));
+}
+.data-\[state\=checked\]\:text-whitish[data-state=checked]{
+    color: hsl(var(--precision-ui-tw-whitish));
+}
+.data-\[state\=open\]\:animate-in[data-state=open]{
+    animation-name: enter;
+    animation-duration: 150ms;
+    --precision-ui-tw-enter-opacity: initial;
+    --precision-ui-tw-enter-scale: initial;
+    --precision-ui-tw-enter-rotate: initial;
+    --precision-ui-tw-enter-translate-x: initial;
+    --precision-ui-tw-enter-translate-y: initial;
+}
+.data-\[state\=closed\]\:animate-out[data-state=closed]{
+    animation-name: exit;
+    animation-duration: 150ms;
+    --precision-ui-tw-exit-opacity: initial;
+    --precision-ui-tw-exit-scale: initial;
+    --precision-ui-tw-exit-rotate: initial;
+    --precision-ui-tw-exit-translate-x: initial;
+    --precision-ui-tw-exit-translate-y: initial;
+}
+.data-\[state\=closed\]\:fade-out-0[data-state=closed]{
+    --precision-ui-tw-exit-opacity: 0;
+}
+.data-\[state\=open\]\:fade-in-0[data-state=open]{
+    --precision-ui-tw-enter-opacity: 0;
+}
+.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{
+    --precision-ui-tw-exit-scale: .95;
+}
+.data-\[state\=open\]\:zoom-in-95[data-state=open]{
+    --precision-ui-tw-enter-scale: .95;
+}
+.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{
+    --precision-ui-tw-enter-translate-y: -0.5rem;
+}
+.data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{
+    --precision-ui-tw-enter-translate-x: 0.5rem;
+}
+.data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{
+    --precision-ui-tw-enter-translate-x: -0.5rem;
+}
+.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{
+    --precision-ui-tw-enter-translate-y: 0.5rem;
+}
+.hover\:data-\[state\=checked\]\:bg-navy-opacity-80[data-state=checked]:hover{
+    background-color: hsl(var(--precision-ui-tw-navy-opacity-80));
+}
+.hover\:data-\[state\=checked\]\:bg-whitish-opacity-80[data-state=checked]:hover{
+    background-color: hsl(var(--precision-ui-tw-whitish-opacity-80));
+}
+.dark\:border-destructive:is([data-mode="dark"] *){
+    border-color: hsl(var(--precision-ui-tw-destructive));
+}
+@media (min-width: 640px){
+    .sm\:col-span-1{
+        grid-column: span 1 / span 1;
+    }
+    .sm\:col-span-2{
+        grid-column: span 2 / span 2;
+    }
+    .sm\:col-span-3{
+        grid-column: span 3 / span 3;
+    }
+    .sm\:mt-6{
+        margin-top: 1.5rem;
+    }
+    .sm\:min-h-\[264px\]{
+        min-height: 264px;
+    }
+    .sm\:max-w-xs{
+        max-width: 20rem;
+    }
+    .sm\:grid-cols-2{
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .sm\:grid-cols-3{
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .sm\:grid-cols-9{
+        grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+}
+@media (min-width: 768px){
+    .md\:max-w-3xl{
+        max-width: 48rem;
+    }
+    .md\:basis-1\/2{
+        flex-basis: 50%;
+    }
+}
+@media (min-width: 990px){
+    .lg\:max-w-sm{
+        max-width: 24rem;
+    }
+    .lg\:basis-1\/2{
+        flex-basis: 50%;
+    }
+    .lg\:basis-1\/3{
+        flex-basis: 33.333333%;
+    }
+    .lg\:basis-1\/4{
+        flex-basis: 25%;
+    }
+    .lg\:grid-cols-2{
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-3{
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-4{
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-6{
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+    .lg\:pr-8{
+        padding-right: 2rem;
+    }
+}
+@media (min-width: 1280px){
+    .xl\:block{
+        display: block;
+    }
+    .xl\:hidden{
+        display: none;
+    }
+    .xl\:min-h-\[500px\]{
+        min-height: 500px;
+    }
+    .xl\:max-w-md{
+        max-width: 28rem;
+    }
+    .xl\:pr-28{
+        padding-right: 7rem;
+    }
+}
+.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{
+    --precision-ui-tw-translate-y: -3px;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
+.\[\&\>svg\]\:absolute>svg{
+    position: absolute;
+}
+.\[\&\>svg\]\:left-4>svg{
+    left: 1rem;
+}
+.\[\&\>svg\]\:top-4>svg{
+    top: 1rem;
+}
+.\[\&\>svg\]\:text-destructive>svg{
+    color: hsl(var(--precision-ui-tw-destructive));
+}
+.\[\&\>svg\]\:text-foreground>svg{
+    color: hsl(var(--precision-ui-tw-foreground));
+}
+.\[\&\>svg\~\*\]\:pl-7>svg~*{
+    padding-left: 1.75rem;
+}
+.\[\&_p\]\:leading-relaxed p{
+    line-height: 1.625;
+}