.mlp-prail {
  position: fixed; left: 50%; z-index: 79;
  top: calc(14px + var(--mel-promo-h, 0px));
  width: min(1120px, calc(100vw - 32px));
  padding: 5px; border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 18px 40px -24px rgba(11,21,48,0.38), 0 2px 6px -2px rgba(11,21,48,0.08);
  transform: translate(-50%, -26px) scale(0.96); opacity: 0; pointer-events: none;
  transition: transform .55s cubic-bezier(.2,.9,.25,1.1), opacity .25s ease;
  font-family: Poppins, system-ui, sans-serif;
}
html.dark .mlp-prail {
  background: #111624; border-color: rgba(255,255,255,0.08);
  box-shadow: 0 20px 44px -22px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05);
}
.mlp-prail.is-on { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; transition-delay: .08s; }
/* The landing nav pops off while the products own the screen. */
.mlp-landing-nav { transition: top .34s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.2,.9,.25,1), opacity .28s ease !important; }
html[data-products-mode="1"] .mlp-landing-nav { transform: translate(-50%, -140%) !important; opacity: 0 !important; visibility: hidden; pointer-events: none; transition: transform .5s cubic-bezier(.2,.9,.25,1), opacity .28s ease, visibility 0s linear .5s !important; }
.mlp-prail ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); }
.mlp-prail li { position: relative; z-index: 1; display: flex; min-width: 0; }
/* the gliding raised pill under the product on screen */
.mlp-prail li.mlp-prail-thumb {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: calc(100% / var(--n, 7));
  border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(11,21,48,0.08), 0 6px 14px -6px rgba(11,21,48,0.22), inset 0 1px 0 #fff;
  transform: translateX(calc(var(--i) * 100%));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
html.dark .mlp-prail li.mlp-prail-thumb {
  background: linear-gradient(180deg, #263047, #1C2436);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
}
.mlp-prail li.mlp-prail-thumb::after {
  content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 22%, transparent);
  transition: background-color .4s ease;
}
.mlp-prail a {
  flex: 1; min-width: 0; padding: 9px 12px 9px 26px; border-radius: 999px; text-align: center;
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  color: rgba(15,23,42,0.46); transition: color .3s ease;
}
html.dark .mlp-prail a { color: rgba(226,232,240,0.46); }
.mlp-prail li.is-active a { color: #0B1530; font-weight: 600; }
html.dark .mlp-prail li.is-active a { color: #F8FAFC; }
.mlp-prail a:hover { color: rgba(15,23,42,0.8); }
html.dark .mlp-prail a:hover { color: rgba(248,250,252,0.85); }
.mlp-prail a:focus-visible { outline: 2px solid #6D28D9; outline-offset: -2px; }

/* Mobile products mode: the menu tile (it overlaps the deck's top edge)
   steps aside; the Discord pill and theme toggle sit above it and stay. */
#mlp-mobile-nav { transition: opacity .28s ease, visibility .28s; }
html[data-products-mode="1"] #mlp-mobile-nav { opacity: 0 !important; visibility: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .mlp-prail, .mlp-prail li.mlp-prail-thumb { transition: none; }
}