/* FlowX liquid-glass layer: restrained accents over Stellar's dark titanium base. */
:root {
  --flowx-glass-bg: rgb(20 25 32 / 58%);
  --flowx-glass-border: rgb(231 198 107 / 18%);
  --flowx-glass-shadow: 0 1.2rem 3rem rgb(0 0 0 / 24%);
}

.l_left,
.l_right,
.widget-wrapper,
.article,
.search-wrapper {
  background: var(--flowx-glass-bg);
  border: 1px solid var(--flowx-glass-border);
  box-shadow: var(--flowx-glass-shadow);
}

.widget-wrapper,
.article,
.search-wrapper {
  position: relative;
  overflow: hidden;
  transition: border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
}

.widget-wrapper::before,
.article::before,
.search-wrapper::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(125deg, rgb(255 255 255 / 8%), transparent 28%, transparent 72%, rgb(113 215 255 / 5%));
  opacity: .72;
  transform: translateX(-18%);
  transition: transform 520ms ease, opacity 260ms ease;
}

.article:hover,
.widget-wrapper:hover,
.search-wrapper:focus-within {
  border-color: rgb(113 215 255 / 30%);
  box-shadow: 0 1.4rem 3.2rem rgb(0 0 0 / 28%), 0 0 1.8rem rgb(113 215 255 / 8%);
}

.article:hover::before,
.widget-wrapper:hover::before,
.search-wrapper:focus-within::before {
  opacity: 1;
  transform: translateX(18%);
}

.menu .ui-collection__item.is-active {
  box-shadow: inset 0 0 0 1px rgb(231 198 107 / 22%), 0 0 1.2rem rgb(231 198 107 / 9%);
}

.menu .ui-collection__item.is-active .ui-collection__indicator {
  background: linear-gradient(180deg, #f5de91, #71d7ff);
  box-shadow: 0 0 .65rem rgb(113 215 255 / 70%);
}

.search-button,
.search-input,
.menu-item a,
.flowx-intro__enter {
  border-color: rgb(231 198 107 / 34%);
  background-color: rgb(12 16 22 / 52%);
  box-shadow: inset 0 1px rgb(255 255 255 / 9%), 0 0 .9rem rgb(113 215 255 / 4%);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .l_left,
  .l_right,
  .widget-wrapper,
  .article,
  .search-wrapper,
  .search-button,
  .search-input,
  .menu-item a {
    -webkit-backdrop-filter: saturate(145%) blur(18px);
    backdrop-filter: saturate(145%) blur(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .l_left, .l_right, .widget-wrapper, .article, .search-wrapper { transition: none !important; }
}

@media (max-width: 700px) {
  .l_left, .l_right, .widget-wrapper, .article, .search-wrapper {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .flowx-focus-grid { grid-template-columns: 1fr !important; }
}

.flowx-focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1.2rem 0 1.5rem; }
.flowx-focus-card { position: relative; display: grid; gap: .28rem; min-height: 8rem; padding: 1rem; border: 1px solid rgb(231 198 107 / 24%); border-radius: .9rem; color: inherit; background: rgb(13 18 24 / 58%); box-shadow: inset 0 1px rgb(255 255 255 / 8%), 0 .8rem 1.8rem rgb(0 0 0 / 16%); transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.flowx-focus-card:hover { transform: translateY(-3px); border-color: rgb(113 215 255 / 55%); box-shadow: 0 1rem 2rem rgb(0 0 0 / 24%), 0 0 1.4rem rgb(113 215 255 / 10%); }
.flowx-focus-card__icon { display: block; width: 2.4rem; height: 2.4rem; color: #71d7ff; filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 55%)) drop-shadow(0 0 .45rem rgb(113 215 255 / 18%)); transform: perspective(160px) rotateX(5deg) rotateY(-8deg); transform-origin: center; }
.flowx-focus-card__icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.flowx-focus-card__icon svg path { filter: drop-shadow(.5px .5px 0 rgb(255 255 255 / 28%)); }
.flowx-focus-card--ml .flowx-focus-card__icon svg circle { fill: currentColor; stroke: rgb(255 255 255 / 35%); stroke-width: .8; }
.flowx-focus-card--ml .mlp-links path { opacity: .7; stroke-width: 1.15; }
.flowx-focus-card--ml .flowx-focus-card__icon svg { display: none; }
.flowx-focus-card--ml .flowx-focus-card__icon::after { content: "🧠"; display: block; font-size: 2rem; line-height: 1.15; filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 58%)); }
.flowx-focus-card--cfd .flowx-focus-card__icon svg,
.flowx-focus-card--viz .flowx-focus-card__icon svg { display: none; }
.flowx-focus-card--cfd .flowx-focus-card__icon::after,
.flowx-focus-card--viz .flowx-focus-card__icon::after { display: block; font-size: 2rem; line-height: 1.15; filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 58%)); }
.flowx-focus-card--cfd .flowx-focus-card__icon::after { content: "🌊"; }
.flowx-focus-card--viz .flowx-focus-card__icon::after { content: "🥽"; }
.flowx-focus-card strong { color: #f5de91; font-size: .95rem; }
.flowx-focus-card small { color: rgb(232 237 242 / 62%); font-size: .72rem; line-height: 1.35; }
.flowx-focus-card--ml .flowx-focus-card__icon { color: #f5de91; }
.flowx-focus-card--viz .flowx-focus-card__icon { color: #b52a38; }

/* Stellar adds a '#' permalink marker before h2 headings on tech pages.
   Keep the anchor itself, but keep the landing page headings clean. */
.l_body[layout="page"] article.content h2 > a:first-child::before {
  content: none !important;
}