html[data-modern-ui="ready"] body {
  position: relative;
  isolation: isolate;
  background: var(--mui-color-bg);
}

html[data-modern-ui="ready"] body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 4%, var(--mui-liquid-env-a), transparent 28rem),
    radial-gradient(circle at 92% 16%, var(--mui-liquid-env-b), transparent 31rem),
    radial-gradient(circle at 50% 104%, var(--mui-liquid-env-c), transparent 36rem),
    var(--mui-color-bg);
}

html[data-modern-ui="ready"] .liquid-glass {
  position: relative;
  overflow: hidden;
}

html[data-modern-ui="ready"] :where(
  .liquid-glass,
  .nav,
  .header--mobile,
  .dropdown .menu
) {
  isolation: isolate;
  border: 1px solid var(--mui-liquid-border);
  background: var(--mui-liquid-surface);
  box-shadow: var(--mui-liquid-shadow);
}

html[data-modern-ui="ready"] :where(
  .liquid-glass,
  .nav,
  .header--mobile,
  .dropdown .menu
)::before,
html[data-modern-ui="ready"] :where(
  .liquid-glass,
  .nav,
  .header--mobile,
  .dropdown .menu
)::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
  border-radius: inherit;
}

html[data-modern-ui="ready"] :where(
  .liquid-glass,
  .nav,
  .header--mobile,
  .dropdown .menu
)::before {
  inset: 0;
  padding: 1px;
  background:
    linear-gradient(
      145deg,
      var(--mui-liquid-highlight),
      color-mix(in srgb, var(--mui-liquid-highlight) 24%, transparent) 34%,
      transparent 58%,
      color-mix(in srgb, var(--mui-liquid-highlight) 18%, transparent) 82%,
      var(--mui-liquid-inner-lowlight)
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

html[data-modern-ui="ready"] :where(
  .liquid-glass,
  .nav,
  .header--mobile,
  .dropdown .menu
)::after {
  inset: 0;
  opacity: 0.72;
  background-image:
    radial-gradient(circle at 14% -12%, var(--mui-liquid-highlight), transparent 34%),
    radial-gradient(circle at 88% 120%, var(--mui-liquid-env-a), transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  background-size: auto, auto, 96px 96px;
  mix-blend-mode: soft-light;
}

html[data-modern-ui="ready"] :where(
  .liquid-glass,
  .nav,
  .header--mobile,
  .dropdown .menu
) > * {
  position: relative;
  z-index: 1;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-modern-ui="ready"] .liquid-glass,
  html[data-modern-ui="ready"] .nav,
  html[data-modern-ui="ready"] .header--mobile,
  html[data-modern-ui="ready"] .dropdown .menu {
    -webkit-backdrop-filter:
      blur(var(--mui-liquid-blur))
      saturate(var(--mui-liquid-saturate))
      contrast(var(--mui-liquid-contrast));
    backdrop-filter:
      blur(var(--mui-liquid-blur))
      saturate(var(--mui-liquid-saturate))
      contrast(var(--mui-liquid-contrast));
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-modern-ui="ready"] .liquid-glass,
  html[data-modern-ui="ready"] .nav,
  html[data-modern-ui="ready"] .header--mobile,
  html[data-modern-ui="ready"] .dropdown .menu {
    background: var(--mui-color-surface-raised);
  }
}

html[data-modern-ui="ready"] .liquid-glass-interactive {
  transition:
    transform var(--mui-duration-fast) var(--mui-ease-out),
    border-color var(--mui-duration-fast) var(--mui-ease-out),
    box-shadow var(--mui-duration-normal) var(--mui-ease-out),
    background-color var(--mui-duration-normal) var(--mui-ease-out);
}

html[data-modern-ui="ready"] .liquid-glass-interactive:hover {
  border-color: color-mix(in srgb, var(--mui-liquid-highlight) 70%, var(--mui-liquid-border));
  box-shadow: var(--mui-liquid-shadow-strong);
  transform: translateY(-1px);
}

html[data-modern-ui="ready"] .liquid-glass-interactive:active {
  transform: translateY(0) scale(0.99);
}

html[data-modern-ui="ready"] .nav {
  --mui-liquid-blur: 20px;
  top: 8px;
  right: max(12px, calc((100vw - 1480px) / 2));
  left: max(12px, calc((100vw - 1480px) / 2));
  width: auto;
  overflow: visible;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(247, 249, 255, 0.22));
  box-shadow:
    0 10px 34px rgba(39, 52, 78, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(95, 116, 154, 0.06);
}

html[data-modern-ui="ready"] .header--mobile {
  background: var(--mui-liquid-surface-strong);
  border-color: var(--mui-liquid-border);
  box-shadow: var(--mui-liquid-shadow);
}

html[data-modern-ui="ready"].theme--dark .nav {
  background:
    linear-gradient(135deg, rgba(40, 43, 53, 0.6), rgba(21, 23, 29, 0.48));
  box-shadow:
    0 12px 38px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

html[data-modern-ui="ready"].modern-ui--scrolled .nav {
  --mui-liquid-blur: 30px;
  background: var(--mui-liquid-surface-strong);
  border-color: color-mix(in srgb, var(--mui-liquid-border) 82%, var(--mui-color-border));
  box-shadow: var(--mui-liquid-shadow-strong);
}

html[data-modern-ui="ready"] .dropdown .menu {
  --mui-liquid-blur: 28px;
  position: relative;
  overflow: hidden;
  border-radius: 17px;
  background: var(--mui-liquid-surface-strong);
  box-shadow: var(--mui-liquid-shadow-strong);
}

@media (max-width: 600px) {
  html[data-modern-ui="ready"] .nav {
    top: 0;
    right: 0;
    left: 0;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-modern-ui="ready"] .liquid-glass-interactive {
    transform: none;
  }
}