/* Mojo Layers attribution on every demo site (templates, examples, industry templates).
   Injected by scripts/build-site.mjs; self-contained so no style's CSS can restyle it. */
.mlx-credit, .mlx-foot { all: initial; box-sizing: border-box; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  font: 500 13px/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #e7e9ef; background: #0e1116; -webkit-font-smoothing: antialiased; letter-spacing: 0; }
.mlx-credit { position: relative; z-index: 2147483000; width: 100%; padding: 9px max(16px, env(safe-area-inset-right, 0px)) 9px max(16px, env(safe-area-inset-left, 0px)); padding-top: max(9px, env(safe-area-inset-top, 0px)); justify-content: center; text-align: center; }
.mlx-credit :where(a, span, b), .mlx-foot :where(a, span, b) { all: unset; box-sizing: border-box; }
.mlx-credit a, .mlx-foot a { cursor: pointer; color: #ffffff; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; text-decoration: none; }
.mlx-credit a:focus-visible, .mlx-foot a:focus-visible { outline: 2px solid #8fa2ff; outline-offset: 3px; }
.mlx-mark { width: 18px; height: 18px; flex: none; display: block; }
.mlx-brand { font-weight: 650; }
.mlx-txt { color: #b7bccb; }
.mlx-txt b { font-weight: 650; color: #e7e9ef; }
.mlx-cta { padding: 5px 11px 5px 12px; background: #ffffff; color: #0e1116 !important; font-weight: 650; transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s; }
.mlx-cta:hover { transform: translateY(-1px); background: #eef0ff; }
.mlx-cta svg, .mlx-foot svg.mlx-arrow { width: 13px; height: 13px; flex: none; display: block; }
.mlx-foot { width: 100%; justify-content: center; padding: 14px max(16px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); font-size: 12.5px; color: #b7bccb; text-align: center; }
.mlx-foot { display: block; }
.mlx-foot a { display: inline; color: #ffffff; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.mlx-foot a:hover { text-decoration-color: #fff; }
.mlx-foot svg.mlx-arrow { display: inline-block; vertical-align: -1px; margin-left: 3px; }
.mlx-short { display: none; }
@media (max-width: 560px) { .mlx-credit .mlx-long, .mlx-credit .mlx-txt { display: none; } .mlx-short { display: inline; color: #b7bccb; font-weight: 500; } .mlx-credit { gap: 8px 12px; font-size: 12.5px; flex-wrap: nowrap; } }
html.mlx-framed .mlx-credit, html.mlx-framed .mlx-foot { display: none; }
@media print { .mlx-credit, .mlx-foot { display: none; } }