/* Shared card frame. One class on the root, everything else via data-*.
   Values from the live site: tile-surface / item-type modes for padding,
   scss/components/_cards.scss (.tt-product-card::before) for shadow and grow.

   Hover is a number like on the Button: --_hover is 0 or 1. The card sets it
   on its own hover; a parent can set --tt-card-hover: 1. The surface grows
   outwards by --_grow-size (half of the live site's 0.5rem), so the content
   never moves. A cover image on top grows up, left and right with it. */
.NeoTZFuezh2Ifp4sXQoA {
  --_t: var(--transition-base, 0.3s cubic-bezier(0.65, 0, 0.35, 1));
  --_hover: var(--tt-card-hover, 0);

  /* Surface: Card */
  --_pad: 1.5rem;
  --_radius: 1.2rem;
  --_radius-hover: 1.7rem;
  --_grow-size: 0px;

  /* Theme: Light */
  --_bg: var(--white-a-100, #fff);
  --_fg: var(--black-a-100, #0d0d0d);
  --tt-heading-color: var(--black-a-100, #0d0d0d);
  --tt-text-color: var(--black-a-60, rgba(13, 13, 13, 0.6));
  /* Buttons and other components with Background: Auto read this toggle:
     initial = light, empty = dark (see Button.module.css). */
  --tt-dark: initial;

  /* Shadow: Soft */
  --_shadow-rest: 0 4px 10px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
  --_shadow-hover: 0 20px 34px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03),
    0 1px 8px rgba(0, 0, 0, 0.02);

  /* Geometry shared by surface and both shadow layers. */
  --_inset: calc(var(--_grow-size) * var(--_hover) * -1);
  --_r: calc(var(--_radius) + (var(--_radius-hover) - var(--_radius)) * var(--_hover));

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* min-height, not height: a fixed height would stop the list from
     stretching cards in a row to the same height. */
  min-height: 100%;
  margin: 0;
  color: var(--_fg);
  text-decoration: none;

  /* Inside a Card List: take the width the list hands down. If the host
     element is display: contents, this element is the flex item itself. */
  flex: 0 0 var(--tt-card-width, auto);
  min-width: 0;
  scroll-snap-align: start;
}

.NeoTZFuezh2Ifp4sXQoA,
.NeoTZFuezh2Ifp4sXQoA *,
.NeoTZFuezh2Ifp4sXQoA::before,
.NeoTZFuezh2Ifp4sXQoA::after {
  box-sizing: border-box;
}

.K7JOsTwAkVetE3ZXRboI {
  display: block;
}

/* ---------- Surface ---------- */

/* Card Small is for dense content (e.g. inside an Info Card): --_space
   scales the gaps between its parts down with the padding. */
.NeoTZFuezh2Ifp4sXQoA[data-surface="card-small"] {
  --_space: 0.5;
  --_pad: 1rem;
  --_radius: 0.8rem;
  --_radius-hover: 1.1rem;
}

.NeoTZFuezh2Ifp4sXQoA[data-surface="card-large"] {
  --_pad: 2rem;
}

/* Glass: based on .tt-blog-card.glass on the live site: translucent white,
   a fine white rim and a light edge along the top. */
.NeoTZFuezh2Ifp4sXQoA:is([data-surface="glass"], [data-surface="glass-blur"]) {
  --_bg: rgba(255, 255, 255, 0.72);
  --_edge:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 2px 4px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(13, 13, 13, 0.04);
}

/* Glass Blur adds a frosted, slightly saturated blur, so the fill can be
   lighter. A backdrop blur is redrawn on every frame when something moves
   behind it (shader, video, marquee), so plain Glass is the cheap option there. */
.NeoTZFuezh2Ifp4sXQoA[data-surface="glass-blur"] {
  --_bg: rgba(255, 255, 255, 0.45);
  --_frost: blur(16px) saturate(160%);
}

/* Soft: a light grey tint with a fine border and no shadow, for quiet rows
   such as illustration cards. Translucent, so it works on any light section. */
.NeoTZFuezh2Ifp4sXQoA[data-surface="soft"] {
  --_bg: rgba(13, 13, 13, 0.035);
  --_edge: inset 0 0 0 1px rgba(13, 13, 13, 0.06);
  --_shadow-rest: none;
  --_shadow-hover: none;
}

.NeoTZFuezh2Ifp4sXQoA[data-surface="plain"] {
  --_pad: 1rem;
  --_bg: transparent;
  --_shadow-rest: none;
  --_shadow-hover: none;
}

@media (max-width: 767px) {
  .NeoTZFuezh2Ifp4sXQoA { --_pad: 1rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-surface="card-small"] { --_pad: 0.875rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-surface="card-large"] { --_pad: 1.5rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-surface="plain"] { --_pad: 0.75rem; }
}

/* ---------- Theme ---------- */

.NeoTZFuezh2Ifp4sXQoA[data-theme="dark"] {
  --_bg: hsla(0, 0%, 16%, 0.6);
  --_fg: var(--white-a-100, #fff);
  --tt-heading-color: var(--white-a-100, #fff);
  --tt-text-color: var(--white-a-60, rgba(255, 255, 255, 0.6));
  --tt-dark: ;
}

.NeoTZFuezh2Ifp4sXQoA[data-theme="dark"]:is([data-surface="glass"], [data-surface="glass-blur"]) {
  --_bg: rgba(255, 255, 255, 0.1);
  --_edge:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 2px 1px rgba(255, 255, 255, 0.12);
}

.NeoTZFuezh2Ifp4sXQoA[data-theme="dark"][data-surface="glass-blur"] {
  --_bg: rgba(255, 255, 255, 0.06);
  --_frost: blur(16px) saturate(140%);
}

.NeoTZFuezh2Ifp4sXQoA[data-theme="dark"][data-surface="soft"] {
  --_bg: rgba(255, 255, 255, 0.05);
  --_edge: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.NeoTZFuezh2Ifp4sXQoA[data-theme="dark"][data-surface="plain"] {
  --_bg: transparent;
}

/* ---------- Max width ----------
   Caps the width the page or a Card List hands down, per breakpoint. Tablet
   and Mobile without a value keep the larger breakpoint's. */
.NeoTZFuezh2Ifp4sXQoA {
  max-width: var(--_max, none);
}

.NeoTZFuezh2Ifp4sXQoA[data-max="small"] { --_max: 16rem; }
.NeoTZFuezh2Ifp4sXQoA[data-max="medium"] { --_max: 20rem; }
.NeoTZFuezh2Ifp4sXQoA[data-max="large"] { --_max: 24rem; }
.NeoTZFuezh2Ifp4sXQoA[data-max="x-large"] { --_max: 32rem; }

@media (max-width: 991px) {
  .NeoTZFuezh2Ifp4sXQoA[data-max-tablet="none"] { --_max: none; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-tablet="small"] { --_max: 16rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-tablet="medium"] { --_max: 20rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-tablet="large"] { --_max: 24rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-tablet="x-large"] { --_max: 32rem; }
}

@media (max-width: 767px) {
  .NeoTZFuezh2Ifp4sXQoA[data-max-mobile="none"] { --_max: none; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-mobile="small"] { --_max: 16rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-mobile="medium"] { --_max: 20rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-mobile="large"] { --_max: 24rem; }
  .NeoTZFuezh2Ifp4sXQoA[data-max-mobile="x-large"] { --_max: 32rem; }
}

/* ---------- Shadow and hover ---------- */

.NeoTZFuezh2Ifp4sXQoA[data-shadow="none"] {
  --_shadow-rest: none;
  --_shadow-hover: none;
}

/* Hover Auto resolves in CardFrame.tsx: grow only when the card is a link.
   Without grow nothing moves: no growth, rounder corners or deeper shadow. */
.NeoTZFuezh2Ifp4sXQoA[data-hover="grow"] {
  --_grow-size: 0.25rem;
}

/* Real hover only on devices that hover, so touch doesn't leave cards stuck. */
@media (hover: hover) {
  .NeoTZFuezh2Ifp4sXQoA[data-hover="grow"]:hover {
    --_hover: 1;
  }
}

.NeoTZFuezh2Ifp4sXQoA[data-hover="grow"][data-linked]:focus-visible {
  --_hover: 1;
}

.NeoTZFuezh2Ifp4sXQoA[data-linked]:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.55);
  outline-offset: 0.75rem;
  border-radius: var(--_r);
}

/* A linked card hands its hover to Visual only buttons inside it. */
.NeoTZFuezh2Ifp4sXQoA[data-linked] {
  --tt-btn-hover: var(--_hover);
}

/* Rest and hover shadow on two layers behind the surface, so the hover
   shadow can fade in instead of jumping. */
.NeoTZFuezh2Ifp4sXQoA::before,
.NeoTZFuezh2Ifp4sXQoA::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(var(--_inset) + 1px);
  border-radius: var(--_r);
  pointer-events: none;
  transition:
    inset var(--_t),
    border-radius var(--_t),
    opacity var(--_t);
}

.NeoTZFuezh2Ifp4sXQoA::before {
  box-shadow: var(--_shadow-rest);
}

.NeoTZFuezh2Ifp4sXQoA::after {
  box-shadow: var(--_shadow-hover);
  opacity: var(--_hover);
}

.NeoTZFuezh2Ifp4sXQoA > [data-part="surface"] {
  position: absolute;
  z-index: 1;
  inset: var(--_inset);
  border-radius: var(--_r);
  background-color: var(--_bg);
  box-shadow: var(--_edge, none);
  -webkit-backdrop-filter: var(--_frost, none);
  backdrop-filter: var(--_frost, none);
  transition:
    inset var(--_t),
    border-radius var(--_t),
    background-color var(--_t);
}

/* The top area keeps its size in the layout (3:2), so the content below never
   moves. Its image is positioned with the surface's inset on top, left and
   right, so it grows with the frame and keeps the frame's corner radius. */
.NeoTZFuezh2Ifp4sXQoA > [data-part="top"] {
  position: relative;
  z-index: 2;
  aspect-ratio: 3 / 2;
}

.NeoTZFuezh2Ifp4sXQoA > [data-part="top"] > * {
  position: absolute;
  top: var(--_inset);
  left: var(--_inset);
  width: calc(100% - 2 * var(--_inset));
  height: calc(100% - var(--_inset));
  border-radius: var(--_r) var(--_r) 0.5rem 0.5rem;
  object-fit: cover;
  transition:
    top var(--_t),
    left var(--_t),
    width var(--_t),
    height var(--_t),
    border-radius var(--_t);
}

.NeoTZFuezh2Ifp4sXQoA > [data-part="content"] {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(0.75rem * var(--_space, 1));
  padding: var(--_pad);
}

/* Webflow wraps slot content in one element; display: contents lets the
   heading, text and buttons inside take the content's gap. */
.NeoTZFuezh2Ifp4sXQoA > [data-part="content"] ::slotted(*) {
  display: contents;
}

/* Like the live site: no growing on small screens, only the shadow changes. */
@media (max-width: 767px) {
  .NeoTZFuezh2Ifp4sXQoA[data-hover="grow"] {
    --_grow-size: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .NeoTZFuezh2Ifp4sXQoA {
    --_grow-size: 0px;
  }
}

/* Buttons sit in the slot. Items align to the top, so a button with a note
   under it doesn't push its neighbours out of line. */
.xN_ptZnlEpWOQkbYs6AP {
  --_gap: 0.75rem;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: var(--tt-buttons-justify, flex-start);
  gap: var(--_gap);
  box-sizing: border-box;
}

/* Webflow wraps slot content in one element; display: contents lets each
   button become a flex item of the group. */
.xN_ptZnlEpWOQkbYs6AP ::slotted(*) {
  display: contents;
}

.xN_ptZnlEpWOQkbYs6AP[data-gap="x-small"] { --_gap: 0.25rem; }
.xN_ptZnlEpWOQkbYs6AP[data-gap="small"] { --_gap: 0.5rem; }
.xN_ptZnlEpWOQkbYs6AP[data-gap="large"] { --_gap: 1rem; }
.xN_ptZnlEpWOQkbYs6AP[data-gap="x-large"] { --_gap: 1.5rem; }

/* Space above: same scale as the site's .top-* utilities (scss/base/_globals.scss). */
.xN_ptZnlEpWOQkbYs6AP[data-space-above="xx-small"] { margin-top: 1rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="x-small"] { margin-top: 1.5rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="small"] { margin-top: 2rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="normal"] { margin-top: 3rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="medium"] { margin-top: 4rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="large"] { margin-top: 6rem; }
.xN_ptZnlEpWOQkbYs6AP[data-space-above="x-large"] { margin-top: 8rem; }

/* Without Align (Auto) the group follows the component around it. */
.xN_ptZnlEpWOQkbYs6AP[data-align="left"] { justify-content: flex-start; }
.xN_ptZnlEpWOQkbYs6AP[data-align="center"] { justify-content: center; }
.xN_ptZnlEpWOQkbYs6AP[data-align="right"] { justify-content: flex-end; }

@media (max-width: 479px) {
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="normal"] { margin-top: 2.5rem; }
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="medium"] { margin-top: 3rem; }
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="large"] { margin-top: 5rem; }
  .xN_ptZnlEpWOQkbYs6AP[data-space-above="x-large"] { margin-top: 6rem; }

  .xN_ptZnlEpWOQkbYs6AP[data-stack] {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Inner layout of the Info Card. The frame (surface, theme, shadow, hover)
   comes from CardFrame.module.css. Title sizes and colors match the Card
   heading and the Button's text colors, so the names mean the same thing. */
.YHOhU4TMokK0_iICN_WL {
  --_title: 0.8rem;
  --_title-lh: 1.25;
  --_title-color: var(--tt-heading-color);
  --_columns: 2;
  --_logo-gap: 1.25rem;

  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.25rem;
}

.YHOhU4TMokK0_iICN_WL *,
.YHOhU4TMokK0_iICN_WL *::before,
.YHOhU4TMokK0_iICN_WL *::after {
  box-sizing: border-box;
}

.Zorw1EUl0th3O8fN2GwN {
  display: block;
}

/* Webflow wraps slot content in one element; display: contents lets the
   cards and logos inside become grid and flex items. */
.YHOhU4TMokK0_iICN_WL > [data-part] ::slotted(*) {
  display: contents;
}

/* ---------- Title ---------- */

.YHOhU4TMokK0_iICN_WL[data-title-size="small"] { --_title: 1rem; --_title-lh: 1.2; }
.YHOhU4TMokK0_iICN_WL[data-title-size="medium"] { --_title: 1.3rem; --_title-lh: 1.2; }
.YHOhU4TMokK0_iICN_WL[data-title-size="large"] { --_title: 1.9rem; --_title-lh: 1.1; }

@media (max-width: 767px) {
  .YHOhU4TMokK0_iICN_WL[data-title-size="medium"] { --_title: 1.2rem; }
  .YHOhU4TMokK0_iICN_WL[data-title-size="large"] { --_title: 1.5rem; }
}

.YHOhU4TMokK0_iICN_WL[data-title-color="brand"] { --_title-color: #4c39f9; }
.YHOhU4TMokK0_iICN_WL[data-title-color="purple"] { --_title-color: var(--purple-600, #6f00ff); }

.YHOhU4TMokK0_iICN_WL > [data-part="title"] {
  margin: 0;
  color: var(--_title-color);
  font-size: var(--_title);
  line-height: var(--_title-lh);
  font-weight: 600;
  font-feature-settings: "ss03" on, "ss08" on, "ss12" on;
  text-wrap: balance;
}

.YHOhU4TMokK0_iICN_WL[data-uppercase] > [data-part="title"] {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Content ---------- */

/* Columns per Webflow breakpoint (Tablet <= 991px, Mobile landscape <= 767px,
   Mobile <= 479px). A breakpoint without a value keeps the larger one's. */
.YHOhU4TMokK0_iICN_WL[data-columns="1"] { --_columns: 1; }
.YHOhU4TMokK0_iICN_WL[data-columns="3"] { --_columns: 3; }

@media (max-width: 991px) {
  .YHOhU4TMokK0_iICN_WL[data-columns-tablet="1"] { --_columns: 1; }
  .YHOhU4TMokK0_iICN_WL[data-columns-tablet="2"] { --_columns: 2; }
  .YHOhU4TMokK0_iICN_WL[data-columns-tablet="3"] { --_columns: 3; }
}

@media (max-width: 767px) {
  .YHOhU4TMokK0_iICN_WL[data-columns-mobile-landscape="1"] { --_columns: 1; }
  .YHOhU4TMokK0_iICN_WL[data-columns-mobile-landscape="2"] { --_columns: 2; }
  .YHOhU4TMokK0_iICN_WL[data-columns-mobile-landscape="3"] { --_columns: 3; }
}

@media (max-width: 479px) {
  .YHOhU4TMokK0_iICN_WL[data-columns-mobile="1"] { --_columns: 1; }
  .YHOhU4TMokK0_iICN_WL[data-columns-mobile="2"] { --_columns: 2; }
  .YHOhU4TMokK0_iICN_WL[data-columns-mobile="3"] { --_columns: 3; }
}

.YHOhU4TMokK0_iICN_WL > [data-part="content"] {
  display: grid;
  grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
  gap: 0.5rem;
}

/* ---------- Logos ---------- */

.YHOhU4TMokK0_iICN_WL[data-logo-gap="small"] { --_logo-gap: 0.75rem; }
.YHOhU4TMokK0_iICN_WL[data-logo-gap="large"] { --_logo-gap: 2rem; }

/* Logo components in the slot read --tt-logo-height, like in Marquee and
   Logo Grid. Badges are mostly square, so they keep the same height instead
   of the balanced sizing for wordmarks. */
.YHOhU4TMokK0_iICN_WL {
  --tt-logo-height: 2.5rem;
  --tt-logo-balance: 0;
}

.YHOhU4TMokK0_iICN_WL[data-logo-height="small"] { --tt-logo-height: 1.6rem; }
.YHOhU4TMokK0_iICN_WL[data-logo-height="medium"] { --tt-logo-height: 3rem; }
.YHOhU4TMokK0_iICN_WL[data-logo-height="large"] { --tt-logo-height: 3.5rem; }

.YHOhU4TMokK0_iICN_WL > [data-part="logos"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_logo-gap);
}

/* ---------- Action ---------- */

/* The Button Group inside follows the alignment. */
.YHOhU4TMokK0_iICN_WL > [data-part="action"] {
  --tt-buttons-justify: flex-start;
  margin-top: auto;
}

.YHOhU4TMokK0_iICN_WL[data-align="center"] > [data-part="action"] {
  --tt-buttons-justify: center;
}

/* ---------- Align ---------- */

/* Only the title and the rows: text-align would inherit into slotted cards. */
.YHOhU4TMokK0_iICN_WL[data-align="center"] > [data-part="title"] {
  text-align: center;
}

.YHOhU4TMokK0_iICN_WL[data-align="center"] > [data-part="logos"] {
  justify-content: center;
}

/* A logo at a fixed height (live site: .tt-logo-item, 2.5rem). Narrower than
   its logo, the box shrinks and the image scales down inside it with
   object-fit: contain, so it keeps its proportions. */
.Inn8SsZnlL4YGk8w3GCH {
  --_h: var(--tt-logo-height, 2.5rem);
  /* Balanced sizing (see Logo.tsx): 3:1 is the reference shape. */
  --_ratio: 3;
  --_balance: var(--tt-logo-balance, 1);

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: var(--_h);
  /* Browsers without pow() keep the plain height above. */
  height: calc(var(--_h) * clamp(0.7, pow(calc(3 / var(--_ratio)), calc(0.4 * var(--_balance))), 1.3));
  color: inherit;
  text-decoration: none;
}

.Inn8SsZnlL4YGk8w3GCH[data-height="small"] { --_h: 1.6rem; }
.Inn8SsZnlL4YGk8w3GCH[data-height="regular"] { --_h: 2.5rem; }
.Inn8SsZnlL4YGk8w3GCH[data-height="medium"] { --_h: 3rem; }
.Inn8SsZnlL4YGk8w3GCH[data-height="large"] { --_h: 3.5rem; }

.t0W1rYskRxyjmi7RlKID {
  display: block;
}

.Inn8SsZnlL4YGk8w3GCH [data-part="image"] {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter var(--transition-base, 0.25s ease), opacity var(--transition-base, 0.25s ease);
}

.Inn8SsZnlL4YGk8w3GCH [data-part="placeholder"] {
  width: calc(var(--_h) * 3);
  height: 100%;
  border-radius: 0.3rem;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* Muted via filter, so the original colors return on hover. */
.Inn8SsZnlL4YGk8w3GCH[data-color="muted"] [data-part="image"] {
  filter: grayscale(1);
  opacity: 0.6;
}

.Inn8SsZnlL4YGk8w3GCH[data-color="muted"]:hover [data-part="image"] {
  filter: none;
  opacity: 1;
}

/* One color: the image stays for size and alt text but is see-through; a
   layer on top paints --_fill through the image's shape (--_mask, set
   inline). Same box and contain fit as the image, so they line up. */
.Inn8SsZnlL4YGk8w3GCH[data-filled] {
  --_fill: currentColor;

  position: relative;
}

.Inn8SsZnlL4YGk8w3GCH[data-filled] [data-part="image"] {
  opacity: 0;
}

.Inn8SsZnlL4YGk8w3GCH[data-filled]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--_fill);
  -webkit-mask: var(--_mask) center / contain no-repeat;
  mask: var(--_mask) center / contain no-repeat;
  pointer-events: none;
}

.Inn8SsZnlL4YGk8w3GCH[data-color="brand"] { --_fill: #4c39f9; }
.Inn8SsZnlL4YGk8w3GCH[data-color="purple"] { --_fill: var(--purple-600, #6f00ff); }
.Inn8SsZnlL4YGk8w3GCH[data-color="black"] { --_fill: var(--black-a-100, #0d0d0d); }
.Inn8SsZnlL4YGk8w3GCH[data-color="white"] { --_fill: var(--white-a-100, #fff); }