.demo-banner {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.35rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(87, 166, 255, .42);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(28, 89, 145, .2), rgba(14, 16, 17, .88) 65%);
  color: #b9c9d8;
  font-size: .78rem;
  letter-spacing: .02em;
  box-shadow: 0 0 24px rgba(50, 135, 225, .08);
}

.demo-banner strong {
  color: #8ec8ff;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.demo-banner a {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin-left: auto;
  color: #cfe8ff;
  font-weight: 800;
  white-space: nowrap;
}

.demo-banner a:hover,
.demo-banner a:focus-visible {
  color: #fff;
}

.demo-banner-dot {
  width: .55rem;
  height: .55rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #55aeff;
  box-shadow: 0 0 14px rgba(85, 174, 255, .8);
  animation: demo-pulse 2s ease-in-out infinite;
}

.mode-pill {
  border-color: rgba(87, 166, 255, .42);
  background: rgba(31, 91, 146, .14);
  color: #9bd0ff;
}

.mode-dot {
  background: #55aeff;
  box-shadow: 0 0 11px rgba(85, 174, 255, .85);
}

@keyframes demo-pulse {
  0%, 100% { transform: scale(.86); opacity: .65; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (max-width: 760px) {
  html {
    min-width: 0;
  }

  .demo-banner {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .4rem .6rem;
  }

  .demo-banner strong {
    width: calc(100% - 1.2rem);
  }

  .demo-banner a {
    width: 100%;
    margin: .15rem 0 0 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-banner-dot { animation: none; }
}