/* THE DEMO SITE ONLY: loaded by the demo Worker's injected tag (demo/worker-demo.mjs), never by the real site.
   Brand: midnight bar, blue pill (the Reaching Millions tokens from styles.css, with literal fallbacks for the /p/ player). */
.vs-demo-banner { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 34px; padding: calc(6px + env(safe-area-inset-top, 0px)) 16px 6px; box-sizing: border-box;
  background: var(--rm-midnight, #070D1A); color: var(--rm-ink-on-dark, #E6EAF2);
  border-bottom: 1px solid var(--rm-line-on-dark, #1F2A40);
  font: 500 13px/1.35 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em; text-align: center; }
.vs-demo-pill { flex: none; padding: 2px 9px; border-radius: 999px; background: var(--rm-blue, #0070E5); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* The topbar pads itself for the notch; with the banner above it, the banner takes that inset instead. */
html[data-demo] .topbar { padding-top: 0; }
@media (min-width: 761px) { html[data-demo] .topbar { height: 84px; } html[data-demo] .tb-badge { top: 12px; } }
@media (max-width: 760px) { html[data-demo] .topbar { min-height: 64px; } html[data-demo] .tb-badge { top: 7px; } }

/* Action controls: visibly off, but still answer a tap with the toast. */
.vs-demo-locked, .vs-demo-locked:hover { opacity: .5; cursor: not-allowed !important; filter: saturate(.6); }
.vs-demo-locked:disabled { opacity: .45; }
input.vs-demo-locked[readonly], textarea.vs-demo-locked[readonly] { cursor: not-allowed; }

.vs-demo-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 2147483000;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none; max-width: calc(100% - 32px); box-sizing: border-box;
  padding: 11px 18px; border-radius: 12px; background: var(--rm-midnight, #070D1A); color: #fff;
  border: 1px solid var(--rm-blue, #0070E5); box-shadow: 0 10px 30px rgba(7, 13, 26, .35);
  font: 600 14px/1.35 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center;
  transition: opacity .18s ease, transform .18s ease; }
.vs-demo-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .vs-demo-toast { transition: none; } }