@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
  --font-family-sans: 'IBM Plex Sans', sans-serif;
  --font-family-mono: 'IBM Plex Mono', monospace;
}

/* Ocultar control nativo del navegador (evita doble icono de ojo) */
.login-content input[type="password"]::-ms-reveal,
.login-content input[type="password"]::-ms-clear,
.anima-passwordfield input[type="password"]::-ms-reveal,
.anima-passwordfield input[type="password"]::-ms-clear,
.anima-passwordfield input.anima-passwordfield__input::-ms-reveal,
.anima-passwordfield input.anima-passwordfield__input::-ms-clear {
  display: none;
}

/* PrimaryInput: placeholder (Figma — IBM Plex Sans Light Italic 16px / 24px, #474747) */
.anima-primary-input__field::placeholder {
  font-family: var(--font-family-sans);
  font-weight: 300;
  font-style: italic;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: #474747;
  opacity: 1; /* Firefox aplica opacidad reducida al placeholder por defecto */
  leading-trim: none;
}

/* ============================================
   CLASES TIPOGRÁFICAS GENÉRICAS PREDEFINIDAS
   Basadas en Figma - Sistema Escalable
   ============================================ */

/* --- HEADINGS (H1-H6) - IBM Plex Sans --- */
.text-h1 {
  font-family: var(--font-family-sans);
  font-size: 2.5rem; /* 40px */
  line-height: 3.75rem; /* 60px */
  font-weight: 700; /* Bold */
  letter-spacing: 0;
}

.text-h2 {
  font-family: var(--font-family-sans);
  font-size: 2.25rem; /* 36px */
  line-height: 3.375rem; /* 54px */
  font-weight: 700; /* Bold */
  letter-spacing: 0;
}

.text-h3 {
  font-family: var(--font-family-sans);
  font-size: 2rem; /* 32px */
  line-height: 3rem; /* 48px */
  font-weight: 600; /* Semi Bold */
  letter-spacing: 0;
}

.text-h4 {
  font-family: var(--font-family-sans);
  font-size: 1.75rem; /* 28px */
  line-height: 2.625rem; /* 42px */
  font-weight: 600; /* Semi Bold */
  letter-spacing: 0;
}

.text-h5 {
  font-family: var(--font-family-sans);
  font-size: 1.5rem; /* 24px */
  line-height: 2.25rem; /* 36px */
  font-weight: 500; /* Medium */
  letter-spacing: 0;
}

.text-h6 {
  font-family: var(--font-family-sans);
  font-size: 1.25rem; /* 20px */
  line-height: 1.875rem; /* 30px */
  font-weight: 500; /* Medium */
  letter-spacing: 0;
}

/* --- BODY TEXT - IBM Plex Sans --- */
.text-body-lg {
  font-family: var(--font-family-sans);
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
  font-weight: 400; /* Regular */
  letter-spacing: 0;
}

.text-body-md {
  font-family: var(--font-family-sans);
  font-size: 0.875rem; /* 14px */
  line-height: 1.3125rem; /* 21px */
  font-weight: 400; /* Regular */
  letter-spacing: -0.01em; /* -1% */
}

.text-body-sm {
  font-family: var(--font-family-sans);
  font-size: 0.75rem; /* 12px */
  line-height: 1.125rem; /* 18px */
  font-weight: 400; /* Regular */
  letter-spacing: -0.02em; /* -2% */
}

/** Variante 14px para badges/labels en Sidebar y Header (misma familia y peso). */
.text-body-sm-14 {
  font-family: var(--font-family-sans);
  font-size: 0.875rem; /* 14px */
  line-height: 1.125rem; /* 18px */
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* --- TEXT SIZES ADICIONALES --- */
.text-xsm {
  font-family: var(--font-family-sans);
  font-size: 0.75rem; /* 12px */
  line-height: 1.125rem; /* 18px */
}

.text-xxsm {
  font-family: var(--font-family-sans);
  font-size: 0.5rem; /* 8px */
  line-height: 0.75rem; /* 12px */
}

/* --- NUMBERS - IBM Plex Mono --- */
.font-numbers {
  font-family: var(--font-family-mono);
}

.text-numbers {
  font-family: var(--font-family-mono);
}

/* --- COLORS GENÉRICOS (Clases utilitarias) --- */
.color-black {
  color: #111827; /* gray-900 */
}

.color-white {
  color: #ffffff;
}

.color-gray-900 {
  color: #111827;
}

.color-gray-700 {
  color: #374151;
}

.color-gray-600 {
  color: #4b5563;
}

.color-gray-500 {
  color: #6b7280;
}

.color-gray-400 {
  color: #9ca3af;
}

.color-red-600 {
  color: #dc2626;
}

.color-red-500 {
  color: #ef4444;
}

.color-blue-600 {
  color: #2563eb;
}

.color-green-600 {
  color: #16a34a;
}

.color-green-100 {
  color: #dcfce7;
}

/* --- FONT WEIGHTS PERMITIDOS (según Figma) --- */
.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* --- TEXT STYLES (según Figma: Normal, Italic) --- */
.text-italic {
  font-style: italic;
}

.text-normal {
  font-style: normal;
}

/* ============================================
   ESCALA DE ESPACIADOS (px a rem)
   ============================================ */

:root {
  --space-160: 10rem;   /* 160px */
  --space-96: 6rem;     /* 96px */
  --space-80: 5rem;     /* 80px */
  --space-64: 4rem;     /* 64px */
  --space-48: 3rem;     /* 48px */
  --space-40: 2.5rem;   /* 40px */
  --space-32: 2rem;     /* 32px */
  --space-24: 1.5rem;   /* 24px */
  --space-16: 1rem;     /* 16px */
  --space-12: 0.75rem;  /* 12px */
  --space-8: 0.5rem;    /* 8px */
  --space-4: 0.25rem;   /* 4px */
  --space-2: 0.125rem;  /* 2px */
}

.space-w-160 { width: var(--space-160); }
.space-h-160 { height: var(--space-160); }
.space-160 { width: var(--space-160); height: var(--space-160); }

.space-w-96 { width: var(--space-96); }
.space-h-96 { height: var(--space-96); }
.space-96 { width: var(--space-96); height: var(--space-96); }

.space-w-80 { width: var(--space-80); }
.space-h-80 { height: var(--space-80); }
.space-80 { width: var(--space-80); height: var(--space-80); }

.space-w-64 { width: var(--space-64); }
.space-h-64 { height: var(--space-64); }
.space-64 { width: var(--space-64); height: var(--space-64); }

.space-w-48 { width: var(--space-48); }
.space-h-48 { height: var(--space-48); }
.space-48 { width: var(--space-48); height: var(--space-48); }

.space-w-40 { width: var(--space-40); }
.space-h-40 { height: var(--space-40); }
.space-40 { width: var(--space-40); height: var(--space-40); }

.space-w-32 { width: var(--space-32); }
.space-h-32 { height: var(--space-32); }
.space-32 { width: var(--space-32); height: var(--space-32); }

.space-w-24 { width: var(--space-24); }
.space-h-24 { height: var(--space-24); }
.space-24 { width: var(--space-24); height: var(--space-24); }

.space-w-16 { width: var(--space-16); }
.space-h-16 { height: var(--space-16); }
.space-16 { width: var(--space-16); height: var(--space-16); }

.space-w-12 { width: var(--space-12); }
.space-h-12 { height: var(--space-12); }
.space-12 { width: var(--space-12); height: var(--space-12); }

.space-w-8 { width: var(--space-8); }
.space-h-8 { height: var(--space-8); }
.space-8 { width: var(--space-8); height: var(--space-8); }

.space-w-4 { width: var(--space-4); }
.space-h-4 { height: var(--space-4); }
.space-4 { width: var(--space-4); height: var(--space-4); }

.space-w-2 { width: var(--space-2); }
.space-h-2 { height: var(--space-2); }
.space-2 { width: var(--space-2); height: var(--space-2); }

.space-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #22c55e;
  border-radius: 0.25rem;
}

.space-token-160 { width: var(--space-160); height: var(--space-160); }
.space-token-96 { width: var(--space-96); height: var(--space-96); }
.space-token-80 { width: var(--space-80); height: var(--space-80); }
.space-token-64 { width: var(--space-64); height: var(--space-64); }
.space-token-48 { width: var(--space-48); height: var(--space-48); }
.space-token-40 { width: var(--space-40); height: var(--space-40); }
.space-token-32 { width: var(--space-32); height: var(--space-32); }
.space-token-24 { width: var(--space-24); height: var(--space-24); }
.space-token-16 { width: var(--space-16); height: var(--space-16); }
.space-token-12 { width: var(--space-12); height: var(--space-12); }
.space-token-8 { width: var(--space-8); height: var(--space-8); }
.space-token-4 { width: var(--space-4); height: var(--space-4); }
.space-token-2 { width: var(--space-2); height: var(--space-2); }

/* ============================================
   RADIOS (Border Radius)
   ============================================ */

:root {
  --radius-4: 0.25rem;   /* 4px */
  --radius-8: 0.5rem;    /* 8px */
  --radius-12: 0.75rem;  /* 12px */
  --radius-16: 1rem;     /* 16px - Base */
  --radius-24: 1.5rem;   /* 24px */
  --radius-32: 2rem;     /* 32px */
}

/* Clases utilitarias para border-radius */
.radius-4 {
  border-radius: var(--radius-4);
}

.radius-8 {
  border-radius: var(--radius-8);
}

.radius-12 {
  border-radius: var(--radius-12);
}

.radius-16 {
  border-radius: var(--radius-16);
}

.radius-24 {
  border-radius: var(--radius-24);
}

.radius-32 {
  border-radius: var(--radius-32);
}

/* Clase para visualización de tokens de radio */
.radius-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #22c55e;
}

.radius-token-4 {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-4);
}

.radius-token-8 {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-8);
}

.radius-token-12 {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-12);
}

.radius-token-16 {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-16);
}

.radius-token-24 {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-24);
}

.radius-token-32 {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-32);
}

/* ============================================
   SOMBRAS
   ============================================ */

.shadow {
  box-shadow:
    0px 15px 35px rgba(0, 0, 0, 0.06),
    0px 5px 15px rgba(0, 51, 0, 0.08);
  border-radius: 0.75rem;
  background-color: #ffffff;
}

/* ============================================
   GRID SYSTEM
   ============================================ */

/* Mobile Grid - Solo aplica en breakpoint Mobile (0-480px) */
@media (min-width: var(--breakpoint-sm)) and (max-width: var(--breakpoint-sm-max)) {
  /* Mobile Grid - 2 Columns */
  .grid-mobile-2 {
    display: grid;
    grid-template-columns: repeat(var(--grid-mobile-2-columns), 1fr);
    gap: var(--grid-mobile-2-gutter);
    padding-left: var(--grid-mobile-2-margin);
    padding-right: var(--grid-mobile-2-margin);
  }

  /* Mobile Grid - 3 Columns */
  .grid-mobile-3 {
    display: grid;
    grid-template-columns: repeat(var(--grid-mobile-3-columns), 1fr);
    gap: var(--grid-mobile-3-gutter);
    padding-left: var(--grid-mobile-3-margin);
    padding-right: var(--grid-mobile-3-margin);
  }

  /* Mobile Grid - 4 Columns */
  .grid-mobile-4 {
    display: grid;
    grid-template-columns: repeat(var(--grid-mobile-4-columns), 1fr);
    gap: var(--grid-mobile-4-gutter);
    padding-left: var(--grid-mobile-4-margin);
    padding-right: var(--grid-mobile-4-margin);
  }

  /* Mobile Grid - 8 Columns */
  .grid-mobile-8 {
    display: grid;
    grid-template-columns: repeat(var(--grid-mobile-8-columns), 1fr);
    gap: var(--grid-mobile-8-gutter);
    padding-left: var(--grid-mobile-8-margin);
    padding-right: var(--grid-mobile-8-margin);
  }
}

/* Desktop Grid - Small/Medium (769px - 1440px) */
@media (min-width: var(--breakpoint-base)) and (max-width: var(--breakpoint-base-max)) {
  /* Desktop Grid - 2 Columns */
  .grid-desktop-2 {
    display: grid;
    grid-template-columns: repeat(var(--grid-desktop-2-columns), 1fr);
    gap: var(--grid-desktop-2-gutter);
    padding-left: var(--grid-desktop-2-margin);
    padding-right: var(--grid-desktop-2-margin);
  }

  /* Desktop Grid - 3 Columns */
  .grid-desktop-3 {
    display: grid;
    grid-template-columns: repeat(var(--grid-desktop-3-columns), 1fr);
    gap: var(--grid-desktop-3-gutter);
    padding-left: var(--grid-desktop-3-margin);
    padding-right: var(--grid-desktop-3-margin);
  }

  /* Desktop Grid - 4 Columns */
  .grid-desktop-4 {
    display: grid;
    grid-template-columns: repeat(var(--grid-desktop-4-columns), 1fr);
    gap: var(--grid-desktop-4-gutter);
    padding-left: var(--grid-desktop-4-margin);
    padding-right: var(--grid-desktop-4-margin);
  }

  /* Desktop Grid - 8 Columns */
  .grid-desktop-8 {
    display: grid;
    grid-template-columns: repeat(var(--grid-desktop-8-columns), 1fr);
    gap: var(--grid-desktop-8-gutter);
    padding-left: var(--grid-desktop-8-margin);
    padding-right: var(--grid-desktop-8-margin);
  }
}

/* Desktop Grid - Large (1441px+) */
@media (min-width: var(--breakpoint-lg)) {
  /* Desktop Large Grid - 12 Columns */
  .grid-desktop-lg-12 {
    display: grid;
    grid-template-columns: repeat(var(--grid-desktop-lg-12-columns), 1fr);
    gap: var(--grid-desktop-lg-12-gutter);
    padding-left: var(--grid-desktop-lg-12-margin);
    padding-right: var(--grid-desktop-lg-12-margin);
  }

  /* Desktop Large Grid - 16 Columns */
  .grid-desktop-lg-16 {
    display: grid;
    grid-template-columns: repeat(var(--grid-desktop-lg-16-columns), 1fr);
    gap: var(--grid-desktop-lg-16-gutter);
    padding-left: var(--grid-desktop-lg-16-margin);
    padding-right: var(--grid-desktop-lg-16-margin);
  }
}
@theme {
  /* Brand colors */
  --color-brand: #56B676;
  --color-brand-50: #EDF7F1;
  --color-brand-100: #D0EAD8;
  --color-brand-200: #B3DDBE;
  --color-brand-300: #96D0A6;
  --color-brand-400: #77C38E;
  --color-brand-500: #56B676;
  --color-brand-600: #47915F;
  --color-brand-700: #376E49;
  --color-brand-800: #294D34;
  --color-brand-900: #1A2E20;

  /* Main colors */
  --color-main: #38656D;
  --color-main-50: #EEF5F6;
  --color-main-100: #D3DFE1;
  --color-main-200: #D3DFE1;
  --color-main-300: #9EB5B9;
  --color-main-400: #84A0A5;
  --color-main-500: #6B8C92;
  --color-main-600: #52787F;
  --color-main-700: #38656D;
  --color-main-800: #29474C;
  --color-main-900: #1B2B2E;
  --color-main-950: #091011;

  /* Text primary (cyan-19) - alias de main-800 para títulos y texto principal */
  --color-cyan-19: var(--color-main-800);

  /* Secondary colors */
  --color-secondary: #6D3856;
  --color-secondary-50: #F6EEF3;
  --color-secondary-100: #E2D2DB;
  --color-secondary-200: #CEB7C3;
  --color-secondary-300: #BB9CAC;
  --color-secondary-400: #A78296;
  --color-secondary-500: #946980;
  --color-secondary-600: #80506B;
  --color-secondary-700: #6D3856;
  --color-secondary-800: #4C293D;
  --color-secondary-900: #2E1B25;
  --color-secondary-950: #11090D;

  /* Tertiary colors */
  --color-tertiary: #A06F11;
  --color-tertiary-50: #FEF6E7;
  --color-tertiary-100: #FBE5C5;
  --color-tertiary-200: #F6D4A3;
  --color-tertiary-300: #F0C382;
  --color-tertiary-400: #E8B261;
  --color-tertiary-500: #DEA23D;
  --color-tertiary-600: #D4920A;
  --color-tertiary-700: #A06F11;
  --color-tertiary-800: #6E4D11;
  --color-tertiary-900: #402E0E;
  --color-tertiary-950: #181101;

  /* Grey colors */
  --color-grey-50: #F3F3F3;
  --color-grey-100: #DDDDDD;
  --color-grey-200: #C4C4C4;
  --color-grey-300: #AAAAAA;
  --color-grey-400: #919191;
  --color-grey-500: #777777;
  --color-grey-600: #5F5F5F;
  --color-grey-700: #474747;
  --color-grey-800: #303030;
  --color-grey-900: #181818;
  --color-grey-950: #0C0C0C;

  /* Neutrals */
  --color-neutrals-white: #FFF;
  --color-neutrals-black: #000;

  /* Info colors */
  --color-info-50: #F0F3FC;
  --color-info-100: #E1E7F9;
  --color-info-200: #C4D0F3;
  --color-info-300: #A6B8EE;
  --color-info-400: #89A1E8;
  --color-info-500: #6B89E2;
  --color-info-600: #5873C2;
  --color-info-700: #455DA2;
  --color-info-800: #334681;
  --color-info-900: #203061;
  --color-info-950: #162551;

  /* Status colors */
  --color-status-error: #B30808;
  --color-status-success: #0A742C;
  --color-status-warning: #CC4908;
  --color-status-state: #334681;

  /* Breakpoints */
  --breakpoint-sm: 0px;
  --breakpoint-sm-max: 480px;
  --breakpoint-md: 481px;
  --breakpoint-md-max: 768px;
  --breakpoint-base: 769px;
  --breakpoint-base-max: 1440px;
  --breakpoint-lg: 1441px;

  /* Grid System - Mobile */
  --grid-mobile-2-columns: 2;
  --grid-mobile-2-margin: 1.25rem; /* 20px */
  --grid-mobile-2-gutter: 1.25rem; /* 20px */

  --grid-mobile-3-columns: 3;
  --grid-mobile-3-margin: 1.25rem; /* 20px */
  --grid-mobile-3-gutter: 1.25rem; /* 20px */

  --grid-mobile-4-columns: 4;
  --grid-mobile-4-margin: 1.25rem; /* 20px */
  --grid-mobile-4-gutter: 1rem; /* 16px */

  --grid-mobile-8-columns: 8;
  --grid-mobile-8-margin: 1.25rem; /* 20px */
  --grid-mobile-8-gutter: 0.75rem; /* 12px */

  /* Grid System - Desktop (Small/Medium) */
  /* Estandarizado: layouts amplios (2-4 cols) usan margin 64px y gutter 32px */
  /* Layouts densos (8 cols) usan margin 32px y gutter 24px para aprovechar mejor el espacio */
  --grid-desktop-2-columns: 2;
  --grid-desktop-2-margin: 4rem; /* 64px */
  --grid-desktop-2-gutter: 2rem; /* 32px */

  --grid-desktop-3-columns: 3;
  --grid-desktop-3-margin: 4rem; /* 64px */
  --grid-desktop-3-gutter: 2rem; /* 32px */

  --grid-desktop-4-columns: 4;
  --grid-desktop-4-margin: 4rem; /* 64px - Estandarizado */
  --grid-desktop-4-gutter: 2rem; /* 32px */

  --grid-desktop-8-columns: 8;
  --grid-desktop-8-margin: 2rem; /* 32px */
  --grid-desktop-8-gutter: 1.5rem; /* 24px */

  /* Grid System - Desktop (Large) */
  --grid-desktop-lg-12-columns: 12;
  --grid-desktop-lg-12-margin: 2rem; /* 32px */
  --grid-desktop-lg-12-gutter: 1.25rem; /* 20px */

  --grid-desktop-lg-16-columns: 16;
  --grid-desktop-lg-16-margin: 2rem; /* 32px */
  --grid-desktop-lg-16-gutter: 1.25rem; /* 20px */

  /* Radius tokens */
  --radius-4: 0.25rem;   /* 4px */
  --radius-8: 0.5rem;    /* 8px */
  --radius-12: 0.75rem;  /* 12px */
  --radius-16: 1rem;     /* 16px - Base */
  --radius-24: 1.5rem;   /* 24px */
  --radius-32: 2rem;     /* 32px */
}

/* ============================================
   Animación Charly (abeja IA Nucleus Labs)
   Flotación suave en el header
   ============================================ */

@keyframes charly-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

.charly-float {
  animation: charly-float 3.5s ease-in-out infinite;
}

/* Animación de viaje de Bee desde el header hasta la sección central y regreso (trayectoria más natural, tipo abeja) */
@keyframes bee-travel {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  12% {
    transform: translate3d(50px, -6px, 0) rotate(-8deg) scale(1.02);
  }
  24% {
    transform: translate3d(110px, 26px, 0) rotate(6deg) scale(1.04);
  }
  38% {
    transform: translate3d(170px, 70px, 0) rotate(-10deg) scale(1.07);
  }
  52% {
    /* Punto más lejano, cerca de "Bienvenido a Anima DS" */
    transform: translate3d(230px, 120px, 0) rotate(5deg) scale(1.1);
  }
  66% {
    transform: translate3d(180px, 85px, 0) rotate(-6deg) scale(1.06);
  }
  80% {
    transform: translate3d(90px, 30px, 0) rotate(3deg) scale(1.03);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

.bee-travel {
  animation: bee-travel 3.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Flotación sutil durante el viaje */
@keyframes bee-travel-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

.bee-travel-inner {
  animation: bee-travel-float 0.8s ease-in-out infinite;
}

/* ============================================
   Fondo de panal tenue para el header
   ============================================ */

.header-honeycomb {
  position: relative;
  overflow: hidden;
}

.header-honeycomb::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='140' height='120' viewBox='0 0 140 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='0.7' stroke-opacity='0.45'%3E%3Cpath d='M20 10 L35 10 L43 24 L35 38 L20 38 L12 24 Z'/%3E%3Cpath d='M48 10 L63 10 L71 24 L63 38 L48 38 L40 24 Z'/%3E%3Cpath d='M76 10 L91 10 L99 24 L91 38 L76 38 L68 24 Z'/%3E%3Cpath d='M34 38 L49 38 L57 52 L49 66 L34 66 L26 52 Z'/%3E%3Cpath d='M62 38 L77 38 L85 52 L77 66 L62 66 L54 52 Z'/%3E%3Cpath d='M90 38 L105 38 L113 52 L105 66 L90 66 L82 52 Z'/%3E%3Cpath d='M20 66 L35 66 L43 80 L35 94 L20 94 L12 80 Z'/%3E%3Cpath d='M48 66 L63 66 L71 80 L63 94 L48 94 L40 80 Z'/%3E%3Cpath d='M76 66 L91 66 L99 80 L91 94 L76 94 L68 80 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 120px;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity: 0.85;
}