:root {
      --banner-bg: rgba(1,1,2,0.5); /* slate-900 */
      --banner-fg: #FFFFFF;
      --banner-radius: 14px;
      --banner-padding-y: 10px;
      --banner-padding-x: 18px;
      --banner-shadow: 0 8px 24px rgba(0,0,0,0.2);
      --banner-z: 9999;
      --banner-duration: 420ms;
      --banner-ease: cubic-bezier(.22, .61, .36, 1); /* standard ease-out */
    }

    /* The banner */
    .banner {
      position: fixed;
      top: env(safe-area-inset-top, 0);
      left: 50%;
      transform: translateX(-50%);
      background: var(--banner-bg);
      color: var(--banner-fg);
      padding: var(--banner-padding-y) var(--banner-padding-x);
      border-radius: var(--banner-radius);
      box-shadow: var(--banner-shadow);
      z-index: var(--banner-z);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      will-change: transform, opacity;
      transition:
        transform var(--banner-duration) var(--banner-ease),
        opacity var(--banner-duration) var(--banner-ease);
    }

    .banner__text {
      font-weight: 700;
      font-size: 16px; 
      letter-spacing: .3px;
      white-space: nowrap;
    }

    /* Slide up + fade when hidden */
    .banner.is-hidden {
      transform: translate(-50%, calc(-100% - 20px)); /* move completely out of view */
      opacity: 0;
    }

    /* Respect reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {
      .banner {
        transition: none;
      }
      .banner.is-hidden {
        display: none;
      }
    }

    /* Optional helper: focus outline for accessibility */
    .banner:focus-visible {
      outline: 3px solid #60a5fa; /* blue-400 */
      outline-offset: 4px;
    }