:root{--cx27-navy:#071f33;--cx27-teal:#087d98;--cx27-cyan:#35d4ff;--cx27-white:#fff;--cx27-shadow:0 18px 46px rgba(3,25,42,.22)}
.cx27-demo-route{position:fixed;right:18px;bottom:22px;z-index:9999;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 15px;border-radius:999px;background:var(--cx27-navy);color:#fff;box-shadow:var(--cx27-shadow);border:1px solid rgba(53,212,255,.35);font:700 12px/1.1 Arial,sans-serif;letter-spacing:.035em;text-transform:uppercase;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.cx27-demo-route:hover,.cx27-demo-route:focus{transform:translateY(-2px);box-shadow:0 22px 54px rgba(3,25,42,.3);outline:2px solid rgba(53,212,255,.7);outline-offset:2px}
.cx27-demo-route .cx27-dot{width:9px;height:9px;border-radius:50%;background:var(--cx27-cyan);box-shadow:0 0 0 5px rgba(53,212,255,.12)}
.cx27-demo-route small{display:block;color:#bfeef8;font-size:9px;font-weight:600;letter-spacing:.02em;text-transform:none;margin-top:2px}
.cx27-demo-ribbon{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:9998;width:min(780px,calc(100vw - 170px));display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:14px 16px 14px 18px;border:1px solid rgba(8,125,152,.24);border-radius:18px;background:rgba(255,255,255,.97);box-shadow:var(--cx27-shadow);backdrop-filter:blur(14px);color:var(--cx27-navy)}
.cx27-demo-ribbon b{font:800 13px/1.2 Arial,sans-serif;color:var(--cx27-navy);letter-spacing:.025em;text-transform:uppercase}.cx27-demo-ribbon p{margin:4px 0 0;color:#27465b;font:500 13px/1.4 Arial,sans-serif}.cx27-demo-ribbon a{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:11px;background:var(--cx27-teal);color:#fff!important;text-decoration:none!important;font:800 12px/1 Arial,sans-serif;letter-spacing:.03em;text-transform:uppercase}.cx27-demo-ribbon a:hover,.cx27-demo-ribbon a:focus{background:#06677e;outline:2px solid rgba(8,125,152,.3);outline-offset:2px}.cx27-demo-ribbon button{position:absolute;top:7px;right:8px;border:0;background:transparent;color:#45667a;font-size:18px;cursor:pointer;line-height:1;padding:3px 6px}
.cx27-nav-demo{display:inline-flex!important;align-items:center;gap:6px;font-weight:800!important;color:#087d98!important}.cx27-nav-demo:before{content:'●';font-size:8px;color:#087d98}
body.cxd-body .cx27-demo-route{bottom:18px}.cx27-on-demo .cx27-demo-route{background:#087d98}.cx27-on-demo .cx27-demo-route small{color:#eafcff}
@media(max-width:920px){.cx27-demo-ribbon{display:none}.cx27-demo-route{right:12px;bottom:12px;max-width:calc(100vw - 24px);padding:11px 14px}.cx27-demo-route small{display:none}}
@media(prefers-reduced-motion:reduce){.cx27-demo-route{transition:none}}