/* NLACE webfonts — servidas localmente desde ./fonts */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("./fonts/Inter-VariableFont_opsz_wght.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;src:url("./fonts/Inter-Italic-VariableFont_opsz_wght.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("./fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2")}
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

/* NLACE Design System — colors_and_type.css
   CSS variables canonicas de marca (tipo + color) + selectores semanticos
   (h1, h2, code, p, etc). El bloque :root sale generado desde tokens/*.json. */

/* Webfonts — Inter + Space Grotesk como TTF variables en /fonts.
   JetBrains Mono (code) se trae de Google Fonts como equivalente libre. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Colores de marca y neutros */
  --nl-400: #a1a1aa;
  --nl-500: #71717a;
  --nl-700: #3f3f46;
  --nl-900: #0f1011;
  --nl-bg: #efefef;
  --nl-text: #0f1011;
  --nl-black: #0f1011;
  --nl-primary: #5869f7;
  --nl-primary-dark: #2d3bc4;
  --nl-accent: #fc624b;
  --nl-accent-warm: #ff8c42;
  --nl-pink: #f76dee;
  --nl-magenta: #b717af;
  --nl-success: #42cf8a;
  --nl-success-dark: #2ba36a;
  --nl-success-text: #053a23;
  --nl-success-bg: #eaf9f1;
  --nl-danger: #fc624b;
  --nl-cyan: #a5f3fc;
  --nl-blue-24: #1a1a5e;
  --nl-blue-28: #2d1f6e;
  --nl-white: #ffffff;
  --nl-surface: #dbdcd7;
  --nl-border-soft: #dbdcd7;
  --nl-border-ui: #c6c7c2;

  /* Opacidades semánticas */
  --nl-primary-10: rgba(88, 105, 247, 0.1);
  --nl-primary-20: rgba(88, 105, 247, 0.2);
  --nl-accent-10: rgba(252, 98, 75, 0.1);
  --nl-danger-8: rgba(252, 98, 75, 0.08);

  /* Aliases semánticos */
  --fg-1: var(--nl-text);
  --fg-2: var(--nl-700);
  --fg-3: var(--nl-500);
  --fg-4: var(--nl-400);
  --bg-1: var(--nl-bg);
  --bg-2: var(--nl-white);
  --line-soft: var(--nl-border-soft);
  --line-ui: var(--nl-border-ui);

  /* Tipografía */
  --nl-font-display: "Space Grotesk", system-ui, sans-serif;
  --nl-font-body: Inter, system-ui, sans-serif;
  --nl-font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
  --nl-tracking-tight: -0.03em;
  --nl-tracking-normal: -0.018em;
  --nl-tracking-ui: 0.08em;

  /* Radios */
  --nl-radius-input: 10px;
  --nl-radius-card: 20px;
  --nl-radius-pill: 9999px;

  /* Sombras */
  --nl-shadow-card: 0 2px 12px rgba(20, 20, 20, 0.08);
  --nl-shadow-hover: 0 10px 28px rgba(20, 20, 20, 0.14);

  /* Motion */
  --nl-dur-ui: 220ms;
  --nl-dur-reveal: 480ms;
  --nl-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Gradientes */
  --nl-grad-hero: linear-gradient(135deg, #5869f7 0%, #b717af 60%, #f76dee 100%);
  --nl-grad-primary: linear-gradient(135deg, #5869f7 0%, #2d3bc4 100%);
  --nl-grad-accent: linear-gradient(135deg, #fc624b 0%, #f76dee 100%);
  --nl-grad-mint: linear-gradient(135deg, #42cf8a 0%, #2ba36a 100%);
  --nl-grad-dark: linear-gradient(180deg, #0f1011 0%, #2d3bc4 100%);
  --nl-grad-surface: linear-gradient(135deg, #ffffff 0%, #dbdcd7 100%);
  --nl-grad-brand: linear-gradient(90deg, #5869f7 0%, #fc624b 100%);
  --nl-grad-warm: linear-gradient(90deg, #fc624b 0%, #ff8c42 100%);
}

/* ── Base ─────────────────────────────────────────────────────── */
body {
  font-family: var(--nl-font-body);
  background:  var(--nl-bg);
  color:       var(--nl-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Headings — display font, tight tracking ──────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nl-font-display);
  letter-spacing: var(--nl-tracking-normal);
  color: var(--nl-text);
  margin: 0;
}
h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 700; letter-spacing: var(--nl-tracking-tight); line-height: 1.05; }
h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1.12; }
h3 { font-size: 28px; font-weight: 600; line-height: 1.2; }
h4 { font-size: 22px; font-weight: 600; line-height: 1.25; }
h5 { font-size: 18px; font-weight: 600; line-height: 1.3; }
h6 { font-size: 14px; font-weight: 600; line-height: 1.3;
     text-transform: uppercase; letter-spacing: var(--nl-tracking-ui); color: var(--nl-500); }

/* ── Body text ────────────────────────────────────────────────── */
p    { font-size: 16px; line-height: 1.55; color: var(--nl-700); margin: 0; }
small{ font-size: 13px; color: var(--nl-500); }
a    { color: var(--nl-primary); text-decoration: none; border-bottom: 1px solid transparent;
       transition: border-color var(--nl-dur-ui) var(--nl-ease); }
a:hover { border-bottom-color: var(--nl-primary); }

/* ── Texto sobre superficies de marca oscuras ─────────────────────
   Los selectores base de h1–h6 y p fijan color tinta, lo que pisa el
   color claro heredado de un contenedor oscuro (p. ej. Card accent =
   .bg-nl-primary). Estas reglas garantizan contraste sobre superficies
   de marca: cualquier texto dentro de .bg-nl-primary, .nl-on-dark o
   [data-nl-surface="dark"] sale en blanco. */
.bg-nl-primary, .nl-on-dark, [data-nl-surface="dark"] { color: #fff; }
.bg-nl-primary :is(h1, h2, h3, h4, h5, h6, p, small),
.nl-on-dark :is(h1, h2, h3, h4, h5, h6, p, small),
[data-nl-surface="dark"] :is(h1, h2, h3, h4, h5, h6, p, small) { color: #fff; }
.bg-nl-primary h6, .nl-on-dark h6, [data-nl-surface="dark"] h6 { color: rgba(255, 255, 255, 0.85); }
.bg-nl-primary a, .nl-on-dark a, [data-nl-surface="dark"] a { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.5); }

/* ── Mono / code ──────────────────────────────────────────────── */
code, kbd, samp {
  font-family: var(--nl-font-mono);
  font-size: 0.9em;
  background: #f4f4f5;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--nl-900);
}
pre {
  font-family: var(--nl-font-mono);
  background: var(--nl-900);
  color: #fafafa;
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 13px;
  overflow-x: auto;
}

/* ── Utility classes ──────────────────────────────────────────── */
.nl-eyebrow {
  font-family: var(--nl-font-body);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--nl-tracking-ui);
  color: var(--nl-primary);
}
.nl-text-gradient {
  background: var(--nl-grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nl-lead { font-size: 20px; line-height: 1.45; color: var(--nl-700); }

/* ── Overlays sobre imagen (scrim de legibilidad) ─────────────────
   Capa absoluta encima de una imagen; el texto va sobre la capa.
   Gradiente desde abajo: oscurece el pie y deja ver la imagen arriba.
   Nunca un tinte plano y opaco. */
.nl-overlay-dark {
  background: linear-gradient(to top,
    rgba(15, 16, 17, 0.80) 0%,
    rgba(15, 16, 17, 0.34) 45%,
    rgba(15, 16, 17, 0.08) 100%);
}
.nl-overlay-brand {
  background: linear-gradient(to top,
    rgba(45, 59, 196, 0.78) 0%,
    rgba(45, 59, 196, 0.26) 48%,
    rgba(45, 59, 196, 0.06) 100%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── Tailwind utilities + --tw-* defaults (preset NLACE) ── */
*, ::before, ::after { border-width: 0; border-style: solid; border-color: currentColor; }
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
.pointer-events-none {
    pointer-events: none
}
.visible {
    visibility: visible
}
.fixed {
    position: fixed
}
.absolute {
    position: absolute
}
.relative {
    position: relative
}
.inset-0 {
    inset: 0px
}
.bottom-full {
    bottom: 100%
}
.left-0 {
    left: 0px
}
.left-1\/2 {
    left: 50%
}
.left-full {
    left: 100%
}
.right-0 {
    right: 0px
}
.right-full {
    right: 100%
}
.top-1\/2 {
    top: 50%
}
.top-full {
    top: 100%
}
.z-50 {
    z-index: 50
}
.z-\[100\] {
    z-index: 100
}
.my-1\.5 {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem
}
.-mb-1 {
    margin-bottom: -0.25rem
}
.-mb-px {
    margin-bottom: -1px
}
.-ml-1 {
    margin-left: -0.25rem
}
.-mr-1 {
    margin-right: -0.25rem
}
.-mt-1 {
    margin-top: -0.25rem
}
.mb-2 {
    margin-bottom: 0.5rem
}
.ml-2 {
    margin-left: 0.5rem
}
.mr-2 {
    margin-right: 0.5rem
}
.mt-0\.5 {
    margin-top: 0.125rem
}
.mt-2 {
    margin-top: 0.5rem
}
.block {
    display: block
}
.flex {
    display: flex
}
.inline-flex {
    display: inline-flex
}
.table {
    display: table
}
.grid {
    display: grid
}
.hidden {
    display: none
}
.h-10 {
    height: 2.5rem
}
.h-12 {
    height: 3rem
}
.h-16 {
    height: 4rem
}
.h-2 {
    height: 0.5rem
}
.h-24 {
    height: 6rem
}
.h-3 {
    height: 0.75rem
}
.h-3\.5 {
    height: 0.875rem
}
.h-32 {
    height: 8rem
}
.h-4 {
    height: 1rem
}
.h-5 {
    height: 1.25rem
}
.h-6 {
    height: 1.5rem
}
.h-7 {
    height: 1.75rem
}
.h-8 {
    height: 2rem
}
.h-px {
    height: 1px
}
.min-h-\[44px\] {
    min-height: 44px
}
.w-10 {
    width: 2.5rem
}
.w-12 {
    width: 3rem
}
.w-16 {
    width: 4rem
}
.w-2 {
    width: 0.5rem
}
.w-24 {
    width: 6rem
}
.w-3\.5 {
    width: 0.875rem
}
.w-32 {
    width: 8rem
}
.w-4 {
    width: 1rem
}
.w-40 {
    width: 10rem
}
.w-48 {
    width: 12rem
}
.w-5 {
    width: 1.25rem
}
.w-56 {
    width: 14rem
}
.w-6 {
    width: 1.5rem
}
.w-64 {
    width: 16rem
}
.w-8 {
    width: 2rem
}
.w-9 {
    width: 2.25rem
}
.w-full {
    width: 100%
}
.w-max {
    width: max-content
}
.min-w-\[200px\] {
    min-width: 200px
}
.max-w-2xl {
    max-width: 42rem
}
.max-w-lg {
    max-width: 32rem
}
.max-w-sm {
    max-width: 24rem
}
.flex-1 {
    flex: 1 1 0%
}
.shrink-0 {
    flex-shrink: 0
}
.border-collapse {
    border-collapse: collapse
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-4 {
    --tw-translate-x: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-5 {
    --tw-translate-x: 1.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-45 {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.animate-\[fadeUp_0\.2s_ease\] {
    animation: fadeUp 0.2s ease
}
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.animate-fade-up {
    animation: fadeUp 0.48s cubic-bezier(0.22,1,0.36,1) both
}
@keyframes shimmer {
    0% {
        background-position: -200% 0
    }
    100% {
        background-position: 200% 0
    }
}
.animate-shimmer {
    animation: shimmer 1.4s ease-in-out infinite
}
@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}
.animate-spin-nl {
    animation: spin 0.7s linear infinite
}
.cursor-not-allowed {
    cursor: not-allowed
}
.cursor-pointer {
    cursor: pointer
}
.select-none {
    user-select: none
}
.resize {
    resize: both
}
.flex-col {
    flex-direction: column
}
.place-items-center {
    place-items: center
}
.items-start {
    align-items: flex-start
}
.items-center {
    align-items: center
}
.justify-end {
    justify-content: flex-end
}
.justify-center {
    justify-content: center
}
.justify-between {
    justify-content: space-between
}
.gap-0\.5 {
    gap: 0.125rem
}
.gap-1 {
    gap: 0.25rem
}
.gap-1\.5 {
    gap: 0.375rem
}
.gap-2 {
    gap: 0.5rem
}
.gap-2\.5 {
    gap: 0.625rem
}
.gap-3 {
    gap: 0.75rem
}
.gap-3\.5 {
    gap: 0.875rem
}
.gap-4 {
    gap: 1rem
}
.gap-6 {
    gap: 1.5rem
}
.overflow-hidden {
    overflow: hidden
}
.overflow-x-auto {
    overflow-x: auto
}
.whitespace-nowrap {
    white-space: nowrap
}
.rounded {
    border-radius: 0.25rem
}
.rounded-\[14px\] {
    border-radius: 14px
}
.rounded-\[22\%\] {
    border-radius: 22%
}
.rounded-\[8px\] {
    border-radius: 8px
}
.rounded-\[9px\] {
    border-radius: 9px
}
.rounded-card {
    border-radius: 20px
}
.rounded-full {
    border-radius: 9999px
}
.rounded-input {
    border-radius: 10px
}
.rounded-lg {
    border-radius: 0.5rem
}
.rounded-md {
    border-radius: 0.375rem
}
.rounded-pill {
    border-radius: 9999px
}
.border {
    border-width: 1px
}
.border-2 {
    border-width: 2px
}
.border-\[1\.5px\] {
    border-width: 1.5px
}
.border-\[2\.5px\] {
    border-width: 2.5px
}
.border-\[3px\] {
    border-width: 3px
}
.border-b {
    border-bottom-width: 1px
}
.border-b-2 {
    border-bottom-width: 2px
}
.border-l-\[3px\] {
    border-left-width: 3px
}
.border-nl-border-soft {
    --tw-border-opacity: 1;
    border-color: rgb(219 220 215 / var(--tw-border-opacity, 1))
}
.border-nl-border-ui {
    --tw-border-opacity: 1;
    border-color: rgb(198 199 194 / var(--tw-border-opacity, 1))
}
.border-nl-danger {
    --tw-border-opacity: 1;
    border-color: rgb(252 98 75 / var(--tw-border-opacity, 1))
}
.border-nl-primary {
    --tw-border-opacity: 1;
    border-color: rgb(88 105 247 / var(--tw-border-opacity, 1))
}
.border-nl-success-dark {
    --tw-border-opacity: 1;
    border-color: rgb(43 163 106 / var(--tw-border-opacity, 1))
}
.border-transparent {
    border-color: transparent
}
.border-white\/50 {
    border-color: rgb(255 255 255 / 0.5)
}
.border-yellow-400 {
    --tw-border-opacity: 1;
    border-color: rgb(250 204 21 / var(--tw-border-opacity, 1))
}
.border-t-nl-primary {
    --tw-border-opacity: 1;
    border-top-color: rgb(88 105 247 / var(--tw-border-opacity, 1))
}
.bg-nl-400\/15 {
    background-color: rgb(161 161 170 / 0.15)
}
.bg-nl-400\/45 {
    background-color: rgb(161 161 170 / 0.45)
}
.bg-nl-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(15 16 17 / var(--tw-bg-opacity, 1))
}
.bg-nl-900\/45 {
    background-color: rgb(15 16 17 / 0.45)
}
.bg-nl-accent {
    --tw-bg-opacity: 1;
    background-color: rgb(252 98 75 / var(--tw-bg-opacity, 1))
}
.bg-nl-accent\/10 {
    background-color: rgb(252 98 75 / 0.1)
}
.bg-nl-border-soft {
    --tw-bg-opacity: 1;
    background-color: rgb(219 220 215 / var(--tw-bg-opacity, 1))
}
.bg-nl-danger {
    --tw-bg-opacity: 1;
    background-color: rgb(252 98 75 / var(--tw-bg-opacity, 1))
}
.bg-nl-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(88 105 247 / var(--tw-bg-opacity, 1))
}
.bg-nl-primary\/10 {
    background-color: rgb(88 105 247 / 0.1)
}
.bg-nl-success {
    --tw-bg-opacity: 1;
    background-color: rgb(66 207 138 / var(--tw-bg-opacity, 1))
}
.bg-nl-success-bg {
    --tw-bg-opacity: 1;
    background-color: rgb(234 249 241 / var(--tw-bg-opacity, 1))
}
.bg-nl-success\/20 {
    background-color: rgb(66 207 138 / 0.2)
}
.bg-transparent {
    background-color: transparent
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}
.bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1))
}
.bg-nl-accent {
    background-image: linear-gradient(135deg, #fc624b 0%, #f76dee 100%)
}
.bg-nl-primary {
    background-image: linear-gradient(135deg, #5869f7 0%, #2d3bc4 100%)
}
.bg-\[length\:200\%_100\%\] {
    background-size: 200% 100%
}
.p-0\.5 {
    padding: 0.125rem
}
.p-1 {
    padding: 0.25rem
}
.p-1\.5 {
    padding: 0.375rem
}
.p-4 {
    padding: 1rem
}
.p-6 {
    padding: 1.5rem
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem
}
.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}
.px-\[14px\] {
    padding-left: 14px;
    padding-right: 14px
}
.px-\[22px\] {
    padding-left: 22px;
    padding-right: 22px
}
.px-\[30px\] {
    padding-left: 30px;
    padding-right: 30px
}
.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem
}
.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-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem
}
.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem
}
.py-\[11px\] {
    padding-top: 11px;
    padding-bottom: 11px
}
.py-\[15px\] {
    padding-top: 15px;
    padding-bottom: 15px
}
.pb-3 {
    padding-bottom: 0.75rem
}
.pb-5 {
    padding-bottom: 1.25rem
}
.pt-4 {
    padding-top: 1rem
}
.pt-5 {
    padding-top: 1.25rem
}
.text-left {
    text-align: left
}
.text-center {
    text-align: center
}
.text-right {
    text-align: right
}
.font-body {
    font-family: Inter, system-ui, sans-serif
}
.font-display {
    font-family: "Space Grotesk", system-ui, sans-serif
}
.font-mono {
    font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace
}
.text-\[0\.68rem\] {
    font-size: 0.68rem
}
.text-\[0\.72rem\] {
    font-size: 0.72rem
}
.text-\[0\.76rem\] {
    font-size: 0.76rem
}
.text-\[0\.78rem\] {
    font-size: 0.78rem
}
.text-\[0\.82rem\] {
    font-size: 0.82rem
}
.text-\[0\.85rem\] {
    font-size: 0.85rem
}
.text-\[0\.86rem\] {
    font-size: 0.86rem
}
.text-\[0\.88rem\] {
    font-size: 0.88rem
}
.text-\[0\.8rem\] {
    font-size: 0.8rem
}
.text-\[0\.95rem\] {
    font-size: 0.95rem
}
.text-\[0\.9rem\] {
    font-size: 0.9rem
}
.text-\[1\.15rem\] {
    font-size: 1.15rem
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}
.font-medium {
    font-weight: 500
}
.font-semibold {
    font-weight: 600
}
.uppercase {
    text-transform: uppercase
}
.leading-relaxed {
    line-height: 1.625
}
.tracking-\[0\.06em\] {
    letter-spacing: 0.06em
}
.text-\[\#d64f2a\] {
    --tw-text-opacity: 1;
    color: rgb(214 79 42 / var(--tw-text-opacity, 1))
}
.text-nl-400 {
    --tw-text-opacity: 1;
    color: rgb(161 161 170 / var(--tw-text-opacity, 1))
}
.text-nl-500 {
    --tw-text-opacity: 1;
    color: rgb(113 113 122 / var(--tw-text-opacity, 1))
}
.text-nl-700 {
    --tw-text-opacity: 1;
    color: rgb(63 63 70 / var(--tw-text-opacity, 1))
}
.text-nl-danger {
    --tw-text-opacity: 1;
    color: rgb(252 98 75 / var(--tw-text-opacity, 1))
}
.text-nl-primary {
    --tw-text-opacity: 1;
    color: rgb(88 105 247 / var(--tw-text-opacity, 1))
}
.text-nl-success-text {
    --tw-text-opacity: 1;
    color: rgb(5 58 35 / var(--tw-text-opacity, 1))
}
.text-nl-text {
    --tw-text-opacity: 1;
    color: rgb(15 16 17 / var(--tw-text-opacity, 1))
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
.text-yellow-700 {
    --tw-text-opacity: 1;
    color: rgb(161 98 7 / var(--tw-text-opacity, 1))
}
.underline {
    text-decoration-line: underline
}
.opacity-0 {
    opacity: 0
}
.opacity-50 {
    opacity: 0.5
}
.opacity-80 {
    opacity: 0.8
}
.shadow-card {
    --tw-shadow: 0 2px 12px rgba(20, 20, 20, 0.08);
    --tw-shadow-colored: 0 2px 12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-hover {
    --tw-shadow: 0 10px 28px rgba(20, 20, 20, 0.14);
    --tw-shadow-colored: 0 10px 28px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.backdrop-blur-\[2px\] {
    --tw-backdrop-blur: blur(2px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--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-150 {
    transition-duration: 150ms
}
.duration-ui {
    transition-duration: 220ms
}
.ease-nl {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1)
}
.placeholder\:text-nl-400::placeholder {
    --tw-text-opacity: 1;
    color: rgb(161 161 170 / var(--tw-text-opacity, 1))
}
.last\:border-0:last-child {
    border-width: 0px
}
.hover\:-translate-y-0\.5:hover {
    --tw-translate-y: -0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:-translate-y-\[3px\]:hover {
    --tw-translate-y: -3px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.hover\:bg-nl-400\/15:hover {
    background-color: rgb(161 161 170 / 0.15)
}
.hover\:bg-nl-primary\/5:hover {
    background-color: rgb(88 105 247 / 0.05)
}
.hover\:text-nl-text:hover {
    --tw-text-opacity: 1;
    color: rgb(15 16 17 / var(--tw-text-opacity, 1))
}
.hover\:shadow-hover:hover {
    --tw-shadow: 0 10px 28px rgba(20, 20, 20, 0.14);
    --tw-shadow-colored: 0 10px 28px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.focus\:border-nl-primary:focus {
    --tw-border-opacity: 1;
    border-color: rgb(88 105 247 / var(--tw-border-opacity, 1))
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.focus\:ring-4:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus\:ring-nl-danger\/20:focus {
    --tw-ring-color: rgb(252 98 75 / 0.2)
}
.focus\:ring-nl-primary\/20:focus {
    --tw-ring-color: rgb(88 105 247 / 0.2)
}
.focus\:ring-nl-success-dark\/20:focus {
    --tw-ring-color: rgb(43 163 106 / 0.2)
}
.disabled\:translate-y-0:disabled {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed
}
.disabled\:opacity-40:disabled {
    opacity: 0.4
}
.disabled\:opacity-50:disabled {
    opacity: 0.5
}
.disabled\:shadow-none:disabled {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.group\/tt:focus-within .group-focus-within\/tt\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group\/tt:focus-within .group-focus-within\/tt\:opacity-100 {
    opacity: 1
}
.group\/tt:hover .group-hover\/tt\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group\/tt:hover .group-hover\/tt\:opacity-100 {
    opacity: 1
}