.demo-control-bar{position:sticky;top:0;z-index:45;margin:0 0 1rem;border:1px solid #d9dee8;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-radius:14px;box-shadow:0 10px 28px rgba(16,24,40,.08)}
.demo-control-bar__inner{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;flex-wrap:wrap}.demo-control-bar__status{display:flex;align-items:center;gap:.55rem;margin-right:auto;font-size:.9rem}.demo-control-bar__dot{width:.55rem;height:.55rem;border-radius:99px;background:#22a06b;box-shadow:0 0 0 4px rgba(34,160,107,.12)}
.demo-control-bar button,.demo-control-bar a{border:0;background:transparent;color:#344054;font:inherit;font-weight:650;padding:.55rem .7rem;border-radius:9px;text-decoration:none;cursor:pointer}.demo-control-bar button:hover,.demo-control-bar a:hover{background:#f2f4f7}.demo-control-bar .is-primary{background:#111827;color:#fff}.demo-control-bar .is-primary:hover{background:#273142}
.demo-scenario-panel{display:none;border-top:1px solid #eaecf0;padding:1rem}.demo-scenario-panel.is-open{display:block}.demo-scenario-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.demo-scenario-card{display:block;text-align:left;border:1px solid #e4e7ec!important;background:#fff!important;padding:.9rem!important}.demo-scenario-card strong,.demo-scenario-card small{display:block}.demo-scenario-card small{color:#667085;margin-top:.25rem;font-weight:400}
.demo-toast{position:fixed;right:1.25rem;bottom:1.25rem;z-index:100;background:#111827;color:#fff;padding:.85rem 1rem;border-radius:12px;box-shadow:0 18px 45px rgba(0,0,0,.22);max-width:340px}.demo-mobile-note{display:none;margin-bottom:1rem;padding:.85rem 1rem;border-radius:12px;background:#fff8e6;border:1px solid #f4d58d;color:#6b4f00}
.connected-story{padding:2rem 0}.connected-story__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem}.connected-story__step{position:relative;border:1px solid #e4e7ec;background:#fff;border-radius:16px;padding:1rem;text-decoration:none;color:inherit}.connected-story__step span{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:#111827;color:#fff;font-weight:700}.connected-story__step strong,.connected-story__step small{display:block}.connected-story__step strong{margin-top:.8rem}.connected-story__step small{margin-top:.25rem;color:#667085}.connected-story__step:not(:last-child):after{content:'→';position:absolute;right:-.65rem;top:50%;transform:translateY(-50%);z-index:2;color:#98a2b3;font-weight:800}
@media(max-width:900px){.demo-scenario-grid{grid-template-columns:1fr}.connected-story__grid{grid-template-columns:1fr 1fr}.connected-story__step:not(:last-child):after{display:none}}
@media(max-width:640px){.demo-control-bar{position:relative}.demo-control-bar__inner{align-items:stretch}.demo-control-bar__status{width:100%}.demo-control-bar button,.demo-control-bar a{text-align:center;flex:1}.demo-mobile-note{display:block}.connected-story__grid{grid-template-columns:1fr}}