.mlp-hub { display: none; }
@media (max-width: 767px) {
  .mlp-hub {
    /* Dark: the circle is a lit glass disc, rim plus a soft cyan halo. */
    --hub-circle: radial-gradient(120% 120% at 50% 0%, #1D2648 0%, #121832 60%, #0E1329 100%);
    --hub-icon: #67E8F9; --hub-label: var(--mel-text-secondary); --hub-ring: #67E8F9;
    --hub-circle-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(167,139,250,.26), 0 0 22px -6px rgba(34,211,238,.34);
    --hub-circle-press: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(103,232,249,.6), 0 0 30px -4px rgba(34,211,238,.5);
    /* The fixed nav floats over the top of the screen: reserve it so the
       column centres in the space a reader can actually see. */
    --hub-nav: calc(var(--mel-promo-h, 0px) + 76px);
    box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100svh; margin: 0; scroll-margin-top: 0;
    padding: calc(var(--hub-nav) + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
      calc(52px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    text-align: center; font-family: Poppins, system-ui, sans-serif;
  }
  .light .mlp-hub {
    --hub-circle: #f2f5f9; --hub-icon: #1E3A8A; --hub-label: #334155; --hub-ring: #1E3A8A;
    --hub-circle-shadow: 5px 5px 12px rgba(15,23,42,.16), -3px -3px 9px rgba(255,255,255,.98), inset 0 1px 0 rgba(255,255,255,.9);
    --hub-circle-press: inset 3px 3px 6px rgba(15,23,42,.09), inset -2px -2px 5px rgba(255,255,255,.92);
  }
  .mlp-hub-col { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 360px; }

  .mlp-hub-title { margin: 0 0 36px; font-size: 30px; font-weight: 700; line-height: 1.12; letter-spacing: -.03em;
    color: var(--mel-text-primary); text-wrap: balance; }

  /* Primary: the hero's own primary button (mlp-hero-btn is-primary, same
     gradient, 16px radius and arrow knob), 56px tall and full width. The
     left inset mirrors knob + right inset so the label sits on the true
     centre. Dark: a cyan halo breathes on a pseudo layer (opacity only). */
  .mlp-hub .mlp-hub-primary { position: relative; box-sizing: border-box; width: 100%; min-height: 56px;
    padding: 9px 9px 9px 56px; border-radius: 16px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .mlp-hub .mlp-hub-primary .mlp-hero-knob { width: 38px; height: 38px; }
  .mlp-hub .mlp-hub-primary .mlp-hero-btn-lbl { font-size: 15px; }
  .mlp-hub-primary::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 1px rgba(103,232,249,.38), 0 0 34px -4px rgba(34,211,238,.5); opacity: .2;
    animation: mlp-hub-breathe 3.2s ease-in-out infinite; }
  @keyframes mlp-hub-breathe { 50% { opacity: 1; } }
  .light .mlp-hub-primary::after { display: none; }
  .mlp-hub .mlp-hub-primary:hover { transform: none; }
  .mlp-hub .mlp-hub-primary:active { transform: scale(.98); }

  /* 2x2: four round keys, one word each, like a home screen icon grid. */
  .mlp-hub-grid { display: grid; grid-template-columns: repeat(2, 100px); justify-content: center;
    column-gap: 24px; row-gap: 26px; margin: 44px 0 0; padding: 0; list-style: none; }
  .mlp-hub-grid > li { display: flex; justify-content: center; }
  .mlp-hub-key { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; min-height: 44px;
    padding: 4px 0; border: 0; border-radius: 18px; background: none; font: inherit; color: var(--hub-label);
    text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .mlp-hub-key:focus-visible { outline: 2px solid var(--hub-ring); outline-offset: 2px; }
  .mlp-hub-circle { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
    color: var(--hub-icon); background: var(--hub-circle); box-shadow: var(--hub-circle-shadow);
    transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease; }
  .mlp-hub-key:active .mlp-hub-circle { transform: scale(.94); box-shadow: var(--hub-circle-press); }
  .mlp-hub-circle.is-discord { background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 22px -4px rgba(88,101,242,.65); }
  .light .mlp-hub-circle.is-discord { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 5px 5px 12px rgba(71,82,196,.3), -3px -3px 9px rgba(255,255,255,.98); }
  .mlp-hub-key:active .mlp-hub-circle.is-discord { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 30px -2px rgba(88,101,242,.8); }
  .light .mlp-hub-key:active .mlp-hub-circle.is-discord { box-shadow: inset 2px 2px 5px rgba(20,24,80,.35); }
  .mlp-hub-circle img { width: 28px; height: 28px; object-fit: contain; }
  .mlp-hub-label { max-width: 100%; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .mlp-hub-slack { display: flex; justify-content: center; margin-top: 44px; }
  .mlp-hub-slack a:focus-visible { outline: 2px solid var(--hub-ring); outline-offset: 3px; }

  /* Enter: one staggered rise, armed only by JS once the hub is below the
     fold, so prerendered / no-JS markup is always visible. */
  .mlp-hub[data-enter="armed"] [data-rise] { opacity: 0; transform: translateY(12px); }
  .mlp-hub[data-enter="in"] [data-rise] { opacity: 1; transform: none;
    transition: opacity .45s ease calc(var(--i, 0) * 50ms), transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 50ms); }
}
@media (max-width: 359px) {
  .mlp-hub-grid { grid-template-columns: repeat(2, 96px); column-gap: 20px; }
  .mlp-hub-title { font-size: 27px; }
}
@media (max-width: 767px) and (max-height: 640px) {
  .mlp-hub-title { margin-bottom: 26px; }
  .mlp-hub-grid { margin-top: 32px; row-gap: 20px; }
  .mlp-hub-slack { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .mlp-hub-circle { transition: none; }
  .mlp-hub-primary::after { animation: none; opacity: .6; }
}