/* WebAxis concept bar - shared by every concept site in /examples/.
   In normal flow at the very top of <body> (never fixed), so it never covers
   the concept's own header. The floating "get one like this" pill appears
   once the visitor has scrolled past the first screen. */
.wx-bar{position:relative;z-index:2147483000;display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:44px;padding:0 max(16px,env(safe-area-inset-left));background:#0B0C0E;color:#F0EDE6;
  font:500 13px/1 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.01em;border-bottom:1px solid rgba(213,187,144,.22)}
.wx-bar *{box-sizing:border-box}
.wx-bar a{color:inherit;text-decoration:none}
.wx-brand{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-width:0}
.wx-brand svg{flex:none}
.wx-brand b{font-weight:600}
.wx-brand span{color:#ACA69B;overflow:hidden;text-overflow:ellipsis}
.wx-actions{display:inline-flex;align-items:center;gap:8px;flex:none}
.wx-link{display:inline-flex;align-items:center;min-height:36px;padding:0 11px;border-radius:999px;color:#D5BB90}
.wx-link:hover,.wx-link:focus-visible{background:rgba(213,187,144,.12)}
.wx-cta{display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;background:#A97B4F;color:#0B0C0E!important;font-weight:600}
.wx-cta:hover,.wx-cta:focus-visible{background:#C89E6E}
.wx-bar a:focus-visible,.wx-pill:focus-visible{outline:2px solid #E2CFAE;outline-offset:2px}
@media (max-width:640px){.wx-brand span{display:none}.wx-link.wx-book{display:none}.wx-bar{font-size:12.5px}}
.wx-pill{position:fixed;right:16px;bottom:16px;z-index:2147483000;display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:999px;background:#0B0C0E;color:#F0EDE6;text-decoration:none;
  font:600 14px/1 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.55);border:1px solid rgba(213,187,144,.35);
  transform:translateY(140%);opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s,visibility .45s}
.wx-pill.is-on{transform:none;opacity:1;visibility:visible}
.wx-pill i{width:8px;height:8px;border-radius:50%;background:#25D366;flex:none}
@media (prefers-reduced-motion:reduce){.wx-pill{transition:none}}