.guided-demo[hidden]{display:none!important}
.guided-demo{margin:20px 0 30px;border:1px solid #262832;background:#0d0e12;box-shadow:0 3px 14px rgba(0,0,0,.2);overflow:hidden}
.guided-demo-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 16px;background:#30313a;color:#fff}
.guided-demo-head h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0!important;color:#fff!important;font:500 20px/1.3 'Raleway',Arial,sans-serif!important}
.guided-demo-try{display:inline-block;flex:0 0 auto;border:0;border-radius:5px;background:#365f86;color:#fff;text-decoration:none;padding:10px 15px;font:700 14px/1.2 Arial,sans-serif;cursor:pointer}
.guided-demo-try:hover{background:#2f5478;color:#fff}
.guided-demo-frame{position:relative;width:100%;aspect-ratio:16/9;background:#0d0e12;overflow:hidden}
.guided-demo-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#0d0e12;transform:scale(1.3);transform-origin:center}
.guided-demo-details,.guided-demo-controls{display:contents}
.guided-demo-copy{position:absolute;z-index:3;left:50%;bottom:15px;transform:translateX(-50%);width:min(850px,calc(100% - 150px));padding:13px 17px;border:1px solid rgba(255,255,255,.18);border-radius:7px;background:rgba(20,21,27,.86);box-shadow:0 4px 18px rgba(0,0,0,.3);backdrop-filter:blur(4px);color:#fff;text-align:center}
.guided-demo-copy .guided-demo-name{display:none}
.guided-demo-caption{display:block;color:#fff;font:15px/1.45 Arial,sans-serif}
.guided-demo-count{display:none}
.guided-demo-previous,.guided-demo-next{position:absolute;z-index:4;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.42);border-radius:5px;background:rgba(26,28,36,.82);color:#fff;padding:12px 13px;font:700 14px Arial,sans-serif;cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.28)}
.guided-demo-previous:hover,.guided-demo-next:hover{background:#365f86}
.guided-demo-previous[hidden],.guided-demo-next[hidden]{display:none!important}
.guided-demo-previous{left:14px}
.guided-demo-next{right:14px}
.guided-demo-play{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.5);border-radius:6px;background:rgba(32,35,44,.9);color:#fff;padding:13px 19px;font:700 16px Arial,sans-serif;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.35)}
.guided-demo-play:hover{background:#365f86}
#interactive-demo{scroll-margin-top:20px}
@media(max-width:700px){
  .guided-demo-head{gap:10px;padding:10px}
  .guided-demo-head h3{font-size:16px!important}
  .guided-demo-try{padding:9px 11px;font-size:12px}
  .guided-demo-copy{bottom:8px;width:calc(100% - 88px);padding:9px 10px}
  .guided-demo-caption{font-size:13px;line-height:1.35}
  .guided-demo-previous,.guided-demo-next{padding:9px 8px;font-size:12px}
  .guided-demo-previous{left:6px}
  .guided-demo-next{right:6px}
}
