/* "What we fixed" toggle: gentle wiggle every ~5s while the demo panel is still unopened. */
#demoToggle.is-wiggling {animation:bf-wiggle 5s ease-in-out 1s infinite;transform-origin:50% 60%}
@keyframes bf-wiggle {
  0%, 82%, 100% {transform:rotate(0)}
  85% {transform:rotate(-6deg)}
  88% {transform:rotate(5deg)}
  91% {transform:rotate(-4deg)}
  94% {transform:rotate(3deg)}
  97% {transform:rotate(-1deg)}
}
#demoToggle.is-wiggling:hover, #demoToggle.is-wiggling:focus-visible {animation-play-state:paused}
@media (prefers-reduced-motion: reduce) {#demoToggle.is-wiggling {animation:none}}

/* Customer view | Kim's view switch in the demo banner (all pages, all sizes). */
.view-switch {display:inline-flex;padding:2px;border-radius:8px;background:rgba(255,255,255,.12);gap:2px}
.view-switch a {display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:6px;color:inherit;text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap;opacity:.85}
.view-switch a:hover {opacity:1}
.view-switch a[aria-current="page"] {background:#fff;color:var(--green);opacity:1}
.view-switch a:focus-visible {outline:2px solid var(--accent);outline-offset:1px}
.vs-short {display:none}
@media (max-width:520px){.vs-long{display:none}.vs-short{display:inline}.view-switch a{padding:0 8px;font-size:12px}.demo-brand strong{font-size:12px;white-space:nowrap}#demoToggle{font-size:12px;gap:2px}}