/* Web creator chrome shares Android's glass palette. Keep this after the
   page stylesheet: authored viewers and the native shell have their own UI. */
html:not(.l4u-android-app) {
  --l4u-web-glass-solid: linear-gradient(125deg, #fafafa, #f1f1f3);
  --l4u-web-glass-ink: #2c2c30;
  --l4u-web-glass-muted: #68676f;
  --l4u-web-nav-accent: #8b4f6b;
  --l4u-web-glass-edge: rgba(255, 255, 255, 0.8);
  --l4u-web-glass-highlight: rgba(255, 255, 255, 0.92);
  --l4u-web-glass-rim: rgba(32, 32, 36, 0.11);
  --l4u-web-glass-shadow: rgba(20, 20, 24, 0.17);
  --l4u-web-glass-tint: rgba(255, 255, 255, 0.44);
  --l4u-web-glass-clear: linear-gradient(125deg, rgba(255, 255, 255, 0.64), rgba(246, 246, 248, 0.42) 48%, rgba(232, 232, 236, 0.5));
  --l4u-web-glass-budget: linear-gradient(125deg, rgba(255, 255, 255, 0.86), rgba(245, 245, 247, 0.78) 52%, rgba(235, 235, 239, 0.82));
  --l4u-web-glass-readable: linear-gradient(125deg, rgba(255, 255, 255, 0.93), rgba(246, 246, 248, 0.86) 55%, rgba(237, 237, 240, 0.9));
  --l4u-web-glass-sheen: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 22%, rgba(255, 255, 255, 0.34) 68%, transparent);
  --l4u-web-glass-fill: var(--l4u-web-glass-solid);
  --l4u-web-glass-panel-fill: var(--l4u-web-glass-solid);
  --l4u-web-glass-blur: none;
  --l4u-web-glass-panel-blur: none;
}

html.l4u-dark:not(.l4u-android-app) {
  --l4u-web-glass-solid: #1c1c1e;
  --l4u-web-glass-ink: #f1f1f3;
  --l4u-web-glass-muted: #b6b6bd;
  --l4u-web-nav-accent: #edb6cc;
  --l4u-web-glass-edge: #38383d;
  --l4u-web-glass-highlight: transparent;
  --l4u-web-glass-rim: transparent;
  --l4u-web-glass-shadow: transparent;
  --l4u-web-glass-tint: #303034;
  --l4u-web-glass-clear: #1c1c1e;
  --l4u-web-glass-budget: var(--l4u-web-glass-clear);
  --l4u-web-glass-readable: #242426;
  --l4u-web-glass-sheen: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not(.l4u-android-app):not(.l4u-lite-effects) {
    --l4u-web-glass-fill: var(--l4u-web-glass-clear);
    --l4u-web-glass-panel-fill: var(--l4u-web-glass-readable);
    --l4u-web-glass-blur: blur(18px) saturate(1.08);
    --l4u-web-glass-panel-blur: blur(14px) saturate(1.06);
  }
  html.l4u-lite-effects:not(.l4u-android-app):not(.l4u-minimal-effects) {
    --l4u-web-glass-fill: var(--l4u-web-glass-budget);
    --l4u-web-glass-panel-fill: var(--l4u-web-glass-readable);
    --l4u-web-glass-blur: blur(8px) saturate(1.04);
    --l4u-web-glass-panel-blur: blur(8px) saturate(1.03);
  }
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) .l4u-brand-word {
  color: #805667 !important;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.42rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.055em;
  text-shadow: none !important;
}

html.l4u-dark:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) .l4u-brand-word {
  color: #e1a9c1 !important;
}

html.l4u-dark:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] .l4u-brand-logo {
  filter: none;
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) > [data-l4u-nav] > nav:first-child {
  border: 1px solid var(--l4u-web-glass-edge) !important;
  border-top: 0 !important;
  border-radius: 0 0 1.5rem 1.5rem;
  background: var(--l4u-web-glass-fill) !important;
  color: var(--l4u-web-glass-ink);
  box-shadow: inset 0 1px 0 var(--l4u-web-glass-highlight), inset 0 -1px 0 var(--l4u-web-glass-rim),
    inset 1px 0 0 var(--l4u-web-glass-highlight), 0 7px 22px -7px var(--l4u-web-glass-shadow);
  -webkit-backdrop-filter: var(--l4u-web-glass-blur);
  backdrop-filter: var(--l4u-web-glass-blur);
}

/* Keep the measured flow space while the header follows scroll direction.
   Fixing the inner nav also works on pages that clip body overflow. */
html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) > [data-l4u-nav].l4u-web-header-scroll {
  position: relative;
  top: auto;
  z-index: 1000;
  min-height: var(--l4u-web-header-height);
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) > [data-l4u-nav].l4u-web-header-scroll > nav:first-child {
  position: fixed;
  inset: 0 0 auto;
  transform: translate3d(0, var(--l4u-web-header-offset, 0px), 0);
  transition: none;
}

html:not(.l4u-android-app) [data-l4u-nav].l4u-web-header-scroll > nav.is-web-header-hidden:first-child {
  pointer-events: none;
}

/* The header samples the backdrop once; only the outer nav group has a lens. */
html:not(.l4u-android-app) [data-l4u-nav] .l4u-mobile-nav-menu-pricing .l4u-mobile-nav-panel {
  left: auto;
  right: 0;
  max-width: calc(100vw - 2rem);
  transform-origin: top right;
}

/* A signed-in header has a Settings slot after Pricing, so its panel can use
   the same left-edge anchor as Create without touching the viewport edge. */
@media (min-width: 320px) and (max-width: 767px) {
  html:not(.l4u-android-app) [data-l4u-nav] .l4u-mobile-nav-menu-pricing:has(~ .l4u-settings-nav-link:not(.hidden)) .l4u-mobile-nav-panel {
    left: 0;
    right: auto;
    transform-origin: top left;
  }
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] .l4u-nav-group {
  position: relative;
  border-color: var(--l4u-web-glass-edge) !important;
  background: linear-gradient(135deg, #ffffff33, #ffffff0a) !important;
  box-shadow: inset 0 1px 0 var(--l4u-web-glass-highlight), inset 0 -1px 0 var(--l4u-web-glass-rim);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] .l4u-nav-group::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 1px;
  left: 12%;
  width: 48%;
  height: 1px;
  border-radius: 999px;
  background: var(--l4u-web-glass-sheen);
  opacity: 0.72;
  pointer-events: none;
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-nav-link, .l4u-desktop-nav-toggle, .l4u-mobile-nav-toggle
) {
  color: var(--l4u-web-glass-muted);
  will-change: auto;
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-desktop-nav-toggle, .l4u-mobile-nav-toggle
) {
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.9, 0.24, 1.08);
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-nav-group > .l4u-nav-link,
  .l4u-desktop-nav-menu > .l4u-desktop-nav-toggle,
  .l4u-mobile-nav-menu > .l4u-mobile-nav-toggle
):active {
  transform: scale(0.975);
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-nav-group > .l4u-nav-link,
  .l4u-desktop-nav-menu > .l4u-desktop-nav-toggle,
  .l4u-mobile-nav-menu > .l4u-mobile-nav-toggle
) {
  border-color: transparent !important;
  border-radius: 0.5rem;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html:not(.l4u-android-app) body.l4u-body[data-page]:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-nav-group > .l4u-nav-link.active,
  .l4u-nav-group > .l4u-nav-link:is(:hover, :focus-visible),
  .l4u-desktop-nav-toggle:is(:hover, :focus-visible),
  .l4u-mobile-nav-toggle:is(:hover, :focus-visible),
  .l4u-desktop-nav-menu:is(.is-open, .has-active-link) > .l4u-desktop-nav-toggle,
  .l4u-mobile-nav-menu:is(.is-open, .has-active-link) > .l4u-mobile-nav-toggle
) {
  background: transparent !important;
  color: var(--l4u-web-nav-accent) !important;
  box-shadow: none !important;
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-nav-group > .l4u-nav-link,
  .l4u-desktop-nav-toggle,
  .l4u-mobile-nav-toggle
)::after {
  background: var(--l4u-web-nav-accent);
  box-shadow: none;
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] .l4u-desktop-nav-toggle:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: scaleX(1);
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] .l4u-mobile-nav-toggle:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

html:not(.l4u-android-app) body.l4u-body[data-page]:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-nav-group > .l4u-nav-link,
  .l4u-desktop-nav-toggle,
  .l4u-mobile-nav-toggle
):focus-visible {
  outline: 2px solid var(--l4u-web-nav-accent) !important;
  outline-offset: -3px;
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-desktop-nav-panel, .l4u-mobile-nav-panel
),
html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) :is(
  .l4u-toast, .l4u-earn-toast, .l4u-earn-modal-card, .l4u-cookie-consent-card,
  .l4u-modal-card:not(.l4u-modal-card-tiktok):not(.l4u-paymongo-confirm-card):not(.l4u-paymongo-loading-card)
) {
  border: 1px solid var(--l4u-web-glass-edge) !important;
  border-radius: 1.5rem;
  background: var(--l4u-web-glass-panel-fill) !important;
  color: var(--l4u-web-glass-ink);
  box-shadow: inset 0 1px 0 var(--l4u-web-glass-highlight), inset 0 -1px 0 var(--l4u-web-glass-rim),
    0 10px 28px -8px var(--l4u-web-glass-shadow) !important;
  -webkit-backdrop-filter: var(--l4u-web-glass-panel-blur);
  backdrop-filter: var(--l4u-web-glass-panel-blur);
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-desktop-nav-panel, .l4u-mobile-nav-panel
)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 1px;
  right: 1rem;
  left: 1rem;
  height: 1px;
  border-radius: 999px;
  background: var(--l4u-web-glass-sheen);
  opacity: 0.72;
  pointer-events: none;
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) :is(
  .l4u-modal-backdrop, .l4u-earn-modal-backdrop, .l4u-cookie-consent-backdrop
) {
  background: rgba(24, 18, 34, 0.3);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) .l4u-earn-toast.is-error {
  --l4u-web-glass-panel-fill: linear-gradient(125deg, #862a3df2, #681e2feb);
  --l4u-web-glass-edge: #ffd2dbb3;
  --l4u-web-glass-ink: #fff7f9;
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html:not(.l4u-android-app) {
    --l4u-web-glass-fill: var(--l4u-web-glass-solid) !important;
    --l4u-web-glass-panel-fill: var(--l4u-web-glass-solid) !important;
    --l4u-web-glass-blur: none !important;
    --l4u-web-glass-panel-blur: none !important;
  }

  html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
    .l4u-nav-group, .l4u-desktop-nav-panel, .l4u-mobile-nav-panel
  )::before,
  html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
    .l4u-desktop-nav-panel, .l4u-mobile-nav-panel
  )::after {
    display: none;
  }
}

@media (forced-colors: active) {
  html:not(.l4u-android-app) {
    --l4u-web-glass-solid: Canvas;
    --l4u-web-glass-fill: Canvas !important;
    --l4u-web-glass-panel-fill: Canvas !important;
    --l4u-web-glass-ink: CanvasText;
    --l4u-web-glass-muted: CanvasText;
    --l4u-web-glass-edge: CanvasText;
    --l4u-web-glass-highlight: transparent;
    --l4u-web-glass-rim: transparent;
    --l4u-web-glass-shadow: transparent;
    --l4u-web-glass-blur: none !important;
    --l4u-web-glass-panel-blur: none !important;
  }

  html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
    .l4u-nav-group, .l4u-desktop-nav-panel, .l4u-mobile-nav-panel
  )::before,
  html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
    .l4u-desktop-nav-panel, .l4u-mobile-nav-panel
  )::after {
    display: none;
  }

  html:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) :is(
    [data-l4u-nav] > nav:first-child, .l4u-nav-group,
    .l4u-desktop-nav-panel, .l4u-mobile-nav-panel
  ) {
    box-shadow: none !important;
  }
}

/* The local motion preference only affects app chrome, never authored viewer
   scenes. Keep functional loading indicators visible while removing decoration. */
html.l4u-reduced-motion:not(.l4u-android-app),
html.l4u-reduced-motion:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) {
  scroll-behavior: auto !important;
}

html.l4u-reduced-motion:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) :is(
  .l4u-background, .l4u-blob, .l4u-memory-object, .l4u-memory-sparkle,
  .l4u-marquee-loop, .l4u-web-spa-view.is-entering, .l4u-faq-item.is-filtering-in,
  .l4u-toast, .l4u-earn-toast, .l4u-stationery-heart.is-dynamic,
  .l4u-stationery-sparkle.is-dynamic, .l4u-stationery-step-panel, .l4u-stationery-step-arrow
),
html.l4u-reduced-motion:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) :is(
  .l4u-background, .l4u-community-live-dot, .l4u-notebook-banner-typed
)::after,
html.l4u-reduced-motion:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) .l4u-background::before {
  animation: none !important;
}

html.l4u-reduced-motion:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) :is(
  [data-l4u-nav], [data-l4u-nav] *, .l4u-reveal, .l4u-modal, .l4u-modal-card,
  .l4u-modal-backdrop, .l4u-earn-modal, .l4u-earn-modal-card, .l4u-toast,
  .l4u-cookie-consent-card, .l4u-community-avatar, .l4u-hero-create-button,
  .l4u-stationery-package, .l4u-stationery-paper-button, .l4u-stationery-action-button,
  .l4u-stationery-payment-method, .l4u-stationery-social-choice,
  .l4u-settings-row *, .l4u-create-wizard-back, .l4u-create-wizard-next,
  .l4u-immersive-editor-action, .l4u-claw-editor-action
) {
  transition: none !important;
}

html.l4u-reduced-motion:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-nav-group > .l4u-nav-link,
  .l4u-desktop-nav-menu > .l4u-desktop-nav-toggle,
  .l4u-mobile-nav-menu > .l4u-mobile-nav-toggle
):active {
  transform: none;
}

html.l4u-reduced-motion:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) :is(
  .l4u-stationery-heart.is-dynamic, .l4u-stationery-sparkle.is-dynamic
) { opacity: 0.72; }

/* Dark mode uses flat, neutral chrome; light mode retains the glass finish. */
html.l4u-dark:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) .l4u-cookie-consent-accept {
  background: #e4e4e7;
  color: #18181b;
  border-color: #e4e4e7;
  box-shadow: none;
}

html.l4u-dark:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) .l4u-cookie-consent-accept:focus-visible {
  outline-color: #a6a6ad;
}

html.l4u-dark:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) :is(
  .l4u-modal-backdrop, .l4u-earn-modal-backdrop, .l4u-cookie-consent-backdrop
) { background: #0009; }

html.l4u-dark:not(.l4u-android-app) {
  --l4u-web-glass-blur: none !important;
  --l4u-web-glass-panel-blur: none !important;
}

html.l4u-dark:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) > [data-l4u-nav] > nav:first-child {
  border-radius: 0;
  border-inline: 0 !important;
  box-shadow: 0 7px 20px -8px rgba(0, 0, 0, 0.65);
}

html.l4u-dark:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] .l4u-nav-group {
  background: #242426 !important;
  box-shadow: none;
}

html.l4u-dark:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) :is(
  .l4u-desktop-nav-panel, .l4u-mobile-nav-panel, .l4u-toast, .l4u-earn-toast,
  .l4u-earn-modal-card, .l4u-cookie-consent-card,
  .l4u-modal-card:not(.l4u-modal-card-tiktok):not(.l4u-paymongo-confirm-card):not(.l4u-paymongo-loading-card)
) {
  border-radius: 1rem;
  box-shadow: 0 10px 28px #0003 !important;
}

/* A few small rose details identify app actions without tinting dark surfaces. */
html.l4u-dark:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-nav-free-credit-badge, .l4u-nav-free-credit-chip
) {
  border-color: #775467 !important;
  background: #303033 !important;
  color: var(--l4u-web-nav-accent) !important;
  box-shadow: none !important;
  text-shadow: none;
  filter: none;
}

html.l4u-dark:not(.l4u-android-app) body.l4u-body:not([data-page="viewer"]) [data-l4u-nav] :is(
  .l4u-desktop-nav-panel .l4u-nav-link > .material-symbols-outlined,
  .l4u-mobile-nav-panel .l4u-nav-link > .material-symbols-outlined,
  .l4u-credit-pill-coin
) {
  color: var(--l4u-web-nav-accent) !important;
  box-shadow: none !important;
  text-shadow: none;
  filter: none;
}

@media (max-width: 640px), (max-height: 600px) {
  html:not(.l4u-android-app) body.l4u-body[data-page="earn"].l4u-earn-modal-open
    #l4uWebContentStage {
    z-index: 1001;
  }

  /* A transformed SPA view anchors fixed descendants to the page stage.
     Let the Earn dialog use the actual viewport on the mobile website. */
  html:not(.l4u-android-app) body.l4u-body[data-page="earn"]
    .l4u-web-spa-view[data-l4u-web-view="earn"] {
    transform: none;
  }
}

@media (max-width: 640px) {
  html:not(.l4u-android-app) body.l4u-body[data-page="earn"]
    .l4u-partner-contact-modal {
    overflow-y: hidden;
  }

  html:not(.l4u-android-app) body.l4u-body[data-page="earn"]
    .l4u-partner-contact-modal .l4u-partner-contact-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: min(92dvh, calc(100dvh - max(0.45rem, env(safe-area-inset-top, 0px)) - env(safe-area-inset-bottom, 0px)));
    border-radius: 1.25rem 1.25rem 0 0 !important;
  }

  html:not(.l4u-android-app) body.l4u-body[data-page="earn"]
    .l4u-partner-application-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}