/* /assets/css/components/user/presence-hover-assets.css */
.presence-tip{position:absolute;bottom:calc(100% + 6px);right:0;min-width:max-content;max-width:220px;
  background:#1f2430;color:#fff;font-size:.72rem;line-height:1.3;padding:6px 10px;border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(var(--tip-shift,0px)) translateY(4px);transition:opacity .15s ease,transform .15s ease;z-index:60;white-space:nowrap;}
.presence-tip::after{content:'';position:absolute;top:100%;right:10px;border:5px solid transparent;
  border-top-color:#1f2430;}
.presence-tip.is-open{opacity:1;visibility:visible;transform:translateX(var(--tip-shift,0px)) translateY(0);pointer-events:none;}
.presence-tip.presence-tip--flip{right:auto;left:0;}
.presence-tip.presence-tip--flip::after{right:auto;left:10px;}
.presence-tip.presence-tip--flip-v{bottom:auto;top:calc(100% + 6px);transform:translateX(var(--tip-shift,0px)) translateY(-4px);}
.presence-tip.presence-tip--flip-v.is-open{transform:translateX(var(--tip-shift,0px)) translateY(0);}
.presence-tip.presence-tip--flip-v::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#1f2430;}
.presence-badge--label{position:relative;}
.presence-badge--label .presence-tip{right:auto;left:0;}
.presence-badge--label .presence-tip::after{right:auto;left:10px;}
.presence-tip-dots{display:inline-flex;align-items:center;gap:3px;}
.presence-tip-dots span{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.35;
  animation:presenceWave 1s infinite ease-in-out;}
.presence-tip-dots span:nth-child(2){animation-delay:.15s;}
.presence-tip-dots span:nth-child(3){animation-delay:.3s;}
@keyframes presenceWave{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-2px);}}
.presence-tip-text{opacity:0;animation:presenceFadeIn .18s ease forwards;}
@keyframes presenceFadeIn{to{opacity:1;}}

/* /assets/css/components/layout/pwa-install.css */
  .pwa-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;
    background:rgba(8,6,10,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    opacity:0;transition:opacity .22s ease;padding:0;}
  .pwa-modal.is-open{opacity:1;}
  .pwa-modal.hidden{display:none!important;} /* beat this component's own display:flex when closed */
  @media (min-width:480px){.pwa-modal{align-items:center;padding:1rem;}}
  .pwa-sheet{position:relative;width:100%;max-width:440px;background:var(--paper);color:var(--ink);
    border:1px solid var(--rule);border-bottom:0;border-radius:22px 22px 0 0;
    padding:1.5rem 1.35rem calc(1.35rem + env(safe-area-inset-bottom));
    box-shadow:0 -24px 60px -24px rgba(0,0,0,.5);
    transform:translateY(24px);opacity:.6;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .26s ease;}
  .pwa-modal.is-open .pwa-sheet{transform:translateY(0);opacity:1;}
  @media (min-width:480px){.pwa-sheet{border-bottom:1px solid var(--rule);border-radius:22px;transform:translateY(8px) scale(.97);}}
  .pwa-sheet__grip{display:block;width:40px;height:4px;border-radius:99px;background:var(--rule);margin:-.35rem auto 1rem;}
  @media (min-width:480px){.pwa-sheet__grip{display:none;}}
  .pwa-x{position:absolute;top:.75rem;inset-inline-end:.85rem;width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:1.35rem;line-height:1;
    color:var(--ink-soft);background:transparent;transition:background .15s ease,color .15s ease;}
  .pwa-x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);}
  .pwa-brand{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;padding-inline-end:1.5rem;}
  .pwa-brand__icon{border-radius:14px;border:1px solid var(--rule);flex:0 0 auto;object-fit:contain;background:var(--paper-2);}
  .pwa-brand__title{font-size:1.15rem;font-weight:700;line-height:1.15;color:var(--ink);margin:0;}
  .pwa-brand__desc{font-size:.83rem;line-height:1.4;color:var(--ink-soft);margin:.25rem 0 0;}
  .pwa-benefits{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-direction:column;gap:.5rem;}
  .pwa-benefits li{position:relative;padding-inline-start:1.6rem;font-size:.85rem;color:var(--ink-2);}
  .pwa-benefits li::before{content:'';position:absolute;inset-inline-start:0;top:.15rem;width:16px;height:16px;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a06b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");}
  .pwa-cta{width:100%;justify-content:center;}
  .pwa-panel__title{font-weight:700;font-size:.95rem;margin:0 0 .35rem;color:var(--ink);}
  .pwa-panel__desc{font-size:.85rem;line-height:1.5;color:var(--ink-soft);margin:0;}
  .pwa-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
  .pwa-steps li{display:flex;align-items:center;gap:.75rem;font-size:.88rem;line-height:1.35;color:var(--ink-2);
    counter-increment:s;background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;padding:.7rem .85rem;}
  .pwa-steps__ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    color:var(--ink);background:var(--paper);border:1px solid var(--rule);position:relative;}
  .pwa-steps__ic::after{content:counter(s);position:absolute;top:-6px;inset-inline-start:-6px;width:18px;height:18px;
    border-radius:50%;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;
    color:var(--paper);background:var(--ink);}
  .pwa-steps__txt strong{color:var(--ink);font-weight:700;}
  .pwa-note{font-size:.75rem;color:var(--ink-soft);margin:.75rem 0 0;text-align:center;}
  .pwa-later{display:block;width:100%;margin-top:1rem;padding:.6rem;font-size:.82rem;font-weight:600;
    color:var(--ink-soft);background:transparent;border-radius:12px;transition:color .15s ease;}
  .pwa-later:hover{color:var(--ink);}
  /* Success toast (built by pwa-install.js) */
  .pwa-toast{position:fixed;inset-inline:0;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:130;
    display:flex;justify-content:center;padding:0 1rem;opacity:0;transform:translateY(12px);
    transition:opacity .3s ease,transform .3s ease;pointer-events:none;}
  .pwa-toast.is-open{opacity:1;transform:translateY(0);}
  .pwa-toast__card{display:flex;align-items:center;gap:.7rem;max-width:360px;width:100%;
    background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:16px;
    padding:.75rem .9rem;box-shadow:0 20px 45px -18px rgba(0,0,0,.5);}
  .pwa-toast__card img{border-radius:10px;flex:0 0 auto;}
  .pwa-toast__title{margin:0;font-weight:700;font-size:.88rem;}
  .pwa-toast__body{margin:.1rem 0 0;font-size:.78rem;color:var(--ink-soft);}

/* Waiting a moment for the browser to offer one-tap install. */
.pwa-cta[aria-busy="true"]{opacity:.6;cursor:progress;}

/* /assets/themes/editorial/assets/css/components/layout/footer.css */
    .ed-footer-heading {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.22em;
      color: var(--ink-soft);
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 1rem;
    }
    .ed-footer-link {
      display: inline-flex; align-items: center;
      font-family: 'Inter', sans-serif;
      font-size: 0.875rem; font-weight: 400;
      color: var(--ink-2);
      text-decoration: none;
      transition: color 0.18s ease, padding-left 0.18s ease;
      padding: 0.25rem 0;
      position: relative;
    }
    .ed-footer-link::before {
      content: '→';
      opacity: 0; margin-right: 0;
      transition: opacity 0.18s ease, margin-right 0.18s ease;
      color: var(--theme-600);
    }
    .ed-footer-link:hover { color: var(--ink); }
    .ed-footer-link:hover::before { opacity: 1; margin-right: 0.4rem; }
    html.dark .ed-footer-link:hover::before { color: var(--theme-300); }
    [dir="rtl"] .ed-footer-link:hover { padding-left: 0; padding-right: 0; }

    /* Newsletter card */
    .ed-newsletter {
      position: relative;
      background: var(--ink);
      color: var(--paper);
      border-radius: 1.5rem;
      overflow: hidden;
    }
    html.dark .ed-newsletter { background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); }
    .ed-newsletter::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image: var(--noise); opacity: 0.18;
      mix-blend-mode: overlay;
    }
    .ed-newsletter-input {
      background: rgba(255,255,255,0.06);
      color: inherit;
      border: 1px solid rgba(255,255,255,0.18);
      padding: 0.85rem 1.25rem;
      border-radius: 999px;
      font-size: 0.9rem;
      width: 100%;
      transition: border-color 0.18s ease, background 0.18s ease;
    }
    .ed-newsletter-input::placeholder { color: rgba(255,255,255,0.55); }
    .ed-newsletter-input:focus { outline: none; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.10); }
    html.dark .ed-newsletter-input {
      background: rgba(0,0,0,0.18); border-color: var(--rule);
    }
    html.dark .ed-newsletter-input::placeholder { color: var(--ink-soft); }

    .ed-newsletter-btn {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.85rem 1.6rem;
      border-radius: 999px;
      background: var(--paper);
      color: var(--ink);
      font-family: 'Inter', sans-serif;
      font-weight: 600; font-size: 0.85rem;
      transition: transform 0.18s ease, background 0.18s ease;
    }
    .ed-newsletter-btn:hover { background: var(--theme-300); transform: translateY(-1px); }
    html.dark .ed-newsletter-btn { background: var(--ink); color: var(--paper); }
    html.dark .ed-newsletter-btn:hover { background: var(--theme-600); }

/* Age confirmation on the newsletter form (subscribe.php re-checks it
   server-side). Takes its own full-width row rather than sitting beside the
   button: the form is a flex row on sm+, and a third item there squeezes the
   input at exactly the widths where it is already tightest. */
#newsletter-form { flex-wrap: wrap; }

.ed-newsletter-age {
  flex: 1 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.45;
  opacity: 0.85;
  cursor: pointer;
}

/* Drawn rather than native: after dark the browser's own box, and the
   kernel's dark input fill, make a filled grey square that on a light
   footer reads as already ticked. */
.ed-newsletter-age input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1rem; height: 1rem; margin: 0.15rem 0 0; flex-shrink: 0; color: inherit !important;
  display: inline-grid; place-content: center;
  border: 1.5px solid currentColor !important; border-radius: 3px; background: transparent !important;
  cursor: pointer;
}
.ed-newsletter-age input[type="checkbox"]:checked {
  background: var(--theme-600, currentColor) !important; border-color: var(--theme-600, currentColor) !important;
}
.ed-newsletter-age input[type="checkbox"]:checked::before {
  content: ''; width: 0.55rem; height: 0.3rem; transform: translateY(-1px) rotate(-45deg);
  border-left: 2px solid var(--paper, #fff); border-bottom: 2px solid var(--paper, #fff);
}
.ed-newsletter-age input[type="checkbox"]:focus-visible { outline: 2px solid var(--theme-600, currentColor); outline-offset: 2px; }

/* /assets/themes/editorial/assets/css/components/layout/footer-legal.css */
      .ed-floating-nav {
        background: var(--paper);
        border: 1px solid var(--rule);
        border-radius: 999px;
        padding: 6px;
        box-shadow: 0 30px 60px -20px rgba(0,0,0,0.20), 0 12px 24px -12px rgba(0,0,0,0.12);
        max-width: min(calc(100vw - 3rem), 920px);
        overflow-x: auto;
        scrollbar-width: none;
      }
      .ed-floating-nav::-webkit-scrollbar { display: none; }
      html.dark .ed-floating-nav {
        background: var(--paper-2);
        box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
      }
      .ed-floating-link {
        display: inline-flex; align-items: center;
        padding: 9px 16px;
        border-radius: 999px;
        font-family: 'Inter', sans-serif;
        font-size: 0.82rem; font-weight: 500;
        color: var(--ink-2);
        text-decoration: none;
        transition: background 0.18s ease, color 0.18s ease;
        white-space: nowrap;
      }
      .ed-floating-link:hover { background: var(--paper-2); color: var(--ink); }
      html.dark .ed-floating-link:hover { background: rgba(255,255,255,0.04); color: var(--ink); }
      .ed-floating-link.active {
        background: var(--ink);
        color: var(--paper);
        font-weight: 600;
      }
      html.dark .ed-floating-link.active { background: var(--theme-600); color: #fff; }

      .truncate-soft {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
      }

/* /assets/css/components/layout/floating-nav-more.css */
/* The floating pill (#ob-floating-nav) stays one row whatever its markup's
   flex-wrap says: links that don't fit move into the More popover
   (assets/js/floating-nav-more.js), or, without that script, the row
   scrolls sideways. Loaded next to each footer-legal.css. */
#ob-floating-nav.ed-floating-nav { flex-wrap: nowrap; overflow-x: auto; max-width: min(calc(100vw - 3rem), 920px); }
#ob-floating-nav .ed-floating-link { flex: none; white-space: nowrap; }
/* The icon and label are separate flex items, so the space between them in
   the markup collapses; the gap puts it back on every theme's pill, on the
   inline axis so it mirrors right to left. A label alone has nothing to
   space from. */
#ob-floating-nav .ed-floating-link, [data-px-fold="pill"][data-px-fold] > a, [data-px-fold="pill"] .ed-floating-more-sheet > a { display: inline-flex; align-items: center; column-gap: .5rem; }
#ob-floating-nav[data-px-more="1"] { overflow: visible; }
.ed-floating-more { position: relative; flex: none; display: inline-flex; }
.ed-floating-more[hidden] { display: none; }
.ed-floating-more-sheet {
  position: absolute; inset-inline-end: 0; bottom: calc(100% + 10px);
  min-width: 200px; max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--fn-paper, var(--paper, #fff)); color: var(--fn-ink-2, var(--ink-2, inherit));
  border: 1px solid var(--fn-rule, var(--rule, rgba(0,0,0,.12))); border-radius: 16px;
  box-shadow: 0 20px 44px -16px rgba(0,0,0,0.30);
}
.ed-floating-more-sheet[hidden] { display: none; }
html.dark .ed-floating-more-sheet { background: var(--fn-paper-2, var(--paper-2, #111)); }
.ed-floating-more-sheet .ed-floating-link { justify-content: flex-start; }
/* In the popover a long label wraps rather than run past it or end in an
   ellipsis (the pills print their labels in .truncate-soft); the row's own
   links stay on one line. */
.ed-floating-more-sheet { width: max-content; max-width: min(22rem, calc(100vw - 2rem)); }
#ob-floating-nav .ed-floating-more-sheet > a, [data-px-fold] .ed-floating-more-sheet > a, .ed-subnav-items .ed-floating-more-sheet > a { white-space: normal; overflow-wrap: break-word; }
.ed-floating-more-sheet > a .truncate-soft, .ed-floating-more-sheet > a .truncate-soft-sm { white-space: normal; overflow: visible; text-overflow: clip; }

/* A theme's own pill (data-px-fold="pill") and the account sub-nav
   (.ed-subnav-items, which lists every account page a plugin adds) stay one
   row the same way, or scroll sideways without the script. The sub-nav's
   popover opens downwards. Loaded next to each context-subnav.php too. */
[data-px-fold="pill"][data-px-fold] { flex-wrap: nowrap; overflow-x: auto; max-width: min(calc(100vw - 3rem), 920px); }
.ed-subnav .ed-subnav-items.ed-subnav-items { flex-wrap: nowrap; overflow-x: auto; flex: 1 1 auto; min-width: 0; }
[data-px-fold] > a, .ed-subnav-items > a { flex: none; white-space: nowrap; }
[data-px-fold][data-px-more="1"], .ed-subnav .ed-subnav-items[data-px-more="1"] { overflow: visible; }
.ed-floating-more[data-down] .ed-floating-more-sheet { bottom: auto; top: calc(100% + 8px); z-index: 60; }
.ed-subnav-items .ed-floating-more-sheet .ed-subnav-item { justify-content: flex-start; }

/* /assets/themes/prism/assets/css/components/layout/back-to-top.css */
/* Prism back-to-top: a round white button on a soft shadow, the arrow
   and the word for "top" on it; a ring of the accent draws itself round
   the rim on hover or focus, and a press settles it. */
.psm-b2t {
  position: fixed; z-index: 40; inset-inline-end: 24px; bottom: 96px;
  width: 56px; height: 56px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid var(--rule); border-radius: 50%;
  background: var(--paper-2); color: var(--ink);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .3, 1), visibility 0s linear .3s;
  cursor: pointer;
}
.psm-b2t.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .3, 1); }
.psm-b2t__ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); pointer-events: none; }
.psm-b2t__ring circle { fill: none; stroke: var(--psm-accent); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .5s cubic-bezier(.2, .8, .3, 1); }
.psm-b2t:hover .psm-b2t__ring circle, .psm-b2t:focus-visible .psm-b2t__ring circle { stroke-dashoffset: 0; }
.psm-b2t__arrow { display: block; }
.psm-b2t__label { font: 600 9.5px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); max-width: 46px; text-align: center; overflow-wrap: anywhere; }
.psm-b2t:active { transform: translateY(1px) scale(.97); }
.psm-b2t:focus-visible { outline: 2px solid var(--psm-focus); outline-offset: 3px; }
@media (max-width: 1023px) { .psm-b2t { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 16px; width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .psm-b2t, .psm-b2t.is-visible, .psm-b2t__ring circle { transition: none; } }

/* /assets/css/includes/footer/mobile-explore-nav.css */
.ed-mobile-nav {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 14px 8px 10px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.22), 0 8px 16px -8px rgba(0,0,0,0.10);
}
html.dark .ed-mobile-nav {
  background: var(--paper-2);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.ed-mobile-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.ed-mobile-link:hover { color: var(--ink); }
.ed-mobile-link.active {
  color: var(--nav-accent, var(--theme-600));
  font-weight: 700;
  background: var(--paper-2);
}
html.dark .ed-mobile-link.active { background: rgba(255,255,255,0.05); }

@supports not (backdrop-filter: blur(1px)) {
  .mobile-glass-header { background: var(--paper) !important; }
}

/* /assets/css/components/layout/header-strip-fit.css */
/* Each theme keeps its desktop status strip on one line (white-space: nowrap
   on .hdr-strip .ed-status and everything in it), which its dropdowns would
   inherit: a long label, or a link assets/js/header-strip-fit.js folded into
   More, then ran past the menu or was cut off by it. A dropdown in the strip
   wraps its labels instead, as wide as its longest one up to a limit. */
.hdr-strip .ed-status .ed-dropdown { width: max-content; min-width: 14rem; max-width: min(22rem, calc(100vw - 2rem)); }
.hdr-strip .ed-status .ed-dropdown, .hdr-strip .ed-status .ed-dropdown * { white-space: normal; text-overflow: clip; }
.hdr-strip .ed-status .ed-dropdown .ed-dropdown-item { overflow-wrap: break-word; }

/* /assets/css/includes/footer/slide-up-animation.css */
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.animate-slide-up { animation: slide-up 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* /assets/css/includes/footer/language-suggest.css */
/* The one-time language suggestion (assets/js/includes/footer/language-suggest.js). */
.px-lang-suggest {
  position: fixed;
  z-index: 60;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--rule, rgba(0, 0, 0, .12));
  background: var(--paper, #fff);
  color: var(--ink, #111);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  font-size: 15px;
  line-height: 1.4;
}
.px-lang-suggest__text { margin: 0; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.px-lang-suggest__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.px-lang-suggest button {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid var(--ink, #111);
}
.px-lang-suggest__accept { background: var(--ink, #111); color: var(--paper, #fff); }
.px-lang-suggest__dismiss { background: transparent; color: var(--ink, #111); }
@media (max-width: 480px) {
  .px-lang-suggest { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
  .px-lang-suggest__actions { width: 100%; }
  .px-lang-suggest button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .px-lang-suggest { animation: px-lang-suggest-in .25s ease-out; }
  @keyframes px-lang-suggest-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}