.cs-demo { --cs-purple:#c39aef; --cs-ink:#ecd5ff; position:relative; min-width:0; width:100%; max-width:600px; overflow:hidden; border:1px solid #40534a; border-radius:24px; background:radial-gradient(ellipse at 100% 0,rgba(128,84,180,.14),transparent 65%),#0c251c; box-shadow:0 28px 80px #0003; }
.cs-demo [hidden] { display:none!important; }
.cs-demo .p-icon { width:20px; height:20px; flex-shrink:0; }
.cs-stream-status > i { width:7px; height:7px; border-radius:50%; background:var(--cs-purple); box-shadow:0 0 15px #c39aef88; }
.cs-stage-heading { padding:22px 24px 12px; }
.cs-stage-heading h2 { font-size:clamp(21px,2.3vw,28px); line-height:1.18; letter-spacing:-.7px; margin:0 0 8px; }
.cs-heading-word { display:inline-block; border-radius:4px; }
.cs-heading-emphasis { color:#d3a4ff; }
.cs-stage-heading p { font-size:12px; line-height:1.6; color:#b1c9bd; margin:0; }
.cs-canvas { position:relative; height:320px; overflow:hidden; margin:0; touch-action:pan-y pinch-zoom; cursor:grab; }
.cs-canvas:active { cursor:grabbing; }
.cs-canvas .cs-scene { user-select:none; }
.cs-finale { cursor:default; }
.cs-scene { position:absolute; inset:0; padding:8px 24px 12px; }
.cs-problem { display:flex; flex-direction:column; justify-content:center; }
.cs-problem-source { display:flex; align-items:center; gap:7px; margin-bottom:18px; color:#bfd0c7; font-size:9px; font-weight:700; letter-spacing:1px; }
.cs-problem-source > svg { width:25px; height:18px; color:#80b6ff; flex-shrink:0; }
.cs-problem-source small { margin-left:auto; font-size:7px; font-weight:500; letter-spacing:.6px; color:#a9c4b6; }
.cs-problem-metric { display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid #365647; border-radius:15px; background:linear-gradient(110deg,#1b3a2f,#102c23); }
.cs-problem-metric > span:first-child { font-size:clamp(15px,1.8vw,19px); font-weight:600; color:#dce9e1; }
.cs-problem-metric > span:first-child > span { margin-left:5px; color:#9ab3a5; }
.cs-problem-metric > strong { margin-left:auto; font-size:clamp(38px,4vw,48px); line-height:1; letter-spacing:-2px; font-variant-numeric:tabular-nums; color:#f5faf7; }
.cs-problem-drop { display:flex; align-items:center; justify-content:center; gap:10px; height:38px; color:#e98789; }
.cs-problem-drop > span { width:30px; height:1px; background:#e9878933; }
.cs-problem-drop svg { width:22px; height:26px; }
.cs-problem-metric--warning { border-color:#e7757966; background:linear-gradient(110deg,#482629,#291d20); box-shadow:0 8px 30px #e45e6810; }
.cs-problem-metric--warning > strong { color:#ff969c; }
.cs-problem-alarm { display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border-radius:50%; background:#ff6d791a; border:1px solid #ff7f8940; color:#ff969c; box-shadow:0 0 22px #ff6d7926; }
.cs-problem-alarm svg { width:23px; height:23px; }
.cs-problem-summary { text-align:center; margin-top:20px; }
.cs-problem-summary > strong { font-size:17px; letter-spacing:-.3px; color:#ff969c; }
.cs-problem-summary p { margin:6px 0 0; font-size:11px; line-height:1.6; color:#b1c9bd; }
.cs-feed-label,.cs-filter-label { display:flex; align-items:center; gap:8px; color:#cfdfd6; font-size:12px; margin-bottom:14px; }
.cs-feed-label > span { font-size:8px; color:#5de8ab; margin-left:auto; letter-spacing:1px; }
.cs-feed-window { height:210px; overflow:hidden; mask-image:linear-gradient(transparent,#000 6%,#000 85%,transparent); }
.cs-feed-group { display:grid; gap:10px; padding-bottom:10px; }
.cs-contact,.cs-signal-card { display:flex; align-items:center; gap:12px; padding:13px; background:#143b2c; border:1px solid #28503e; border-radius:13px; min-width:0; }
.cs-avatar { display:grid; place-items:center; flex-shrink:0; width:35px; height:35px; background:#ffffff0a; border:1px solid #ffffff12; color:#a9c4b6; font-size:14px; font-weight:700; border-radius:50%; }
.cs-contact > div,.cs-signal-card > div,.cs-rule > div { min-width:0; }
.cs-contact strong,.cs-signal-card strong,.cs-rule strong { display:block; font-size:12px; line-height:1.5; }
.cs-contact small,.cs-rule small { display:block; font-size:10px; color:#a9c4b6; margin-top:3px; line-height:1.5; }
.cs-new { font-size:8px; margin-left:auto; color:#54dfa3; }
.cs-feed-note,.cs-scene-note { text-align:center; color:#a9c4b6; font-size:11px; line-height:1.6; margin:14px 0 0; }
.cs-filter-label { color:var(--cs-ink); }
.cs-signal-card { margin-bottom:12px; background:linear-gradient(105deg,#36204c,#1c2926); border-color:#8054b470; }
.cs-signal-card .cs-avatar { background:#8054b42b; color:var(--cs-ink); border-color:#8054b470; }
.cs-signal-badge { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--cs-ink); margin-top:4px; }
.cs-signal-badge .p-icon { width:13px; height:13px; }
.cs-check { margin-left:auto; color:var(--cs-purple); }
.cs-rules-head { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:14px; margin-bottom:14px; border:1px solid #8054b470; border-radius:12px; background:#36204c66; font-size:12px; }
.cs-rules-head > span { display:flex; align-items:center; gap:7px; }
.cs-rules-head strong { color:var(--cs-ink); }
.cs-rule { display:flex; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid #ffffff0d; }
.cs-rule-tick { color:var(--cs-purple); }
.cs-toggle { margin-left:auto; width:27px; height:16px; background:#8054b4; border-radius:20px; flex-shrink:0; }
.cs-toggle::after { content:''; display:block; width:10px; height:10px; background:#ecd5ff; border-radius:50%; margin:3px 3px 3px auto; }
.cs-saved { display:flex; justify-content:center; align-items:center; gap:6px; font-size:11px; color:var(--cs-ink); margin:18px 0 0; }
.cs-transfer-route { display:flex; align-items:center; margin:16px 0 20px; }
.cs-brand { display:flex; flex-direction:column; align-items:center; gap:13px; flex-shrink:0; width:86px; font-size:12px; }
.cs-brand img { border-radius:20px; border:1px solid #4b6556; object-fit:cover; }
.cs-brand > svg { width:76px; height:76px; color:#61a5ff; }
.cs-packet-path { position:relative; height:2px; flex:1; margin:0 5px 30px; background:linear-gradient(90deg,#8054b433,#c39aef,#8054b433); }
.cs-packet-path i { position:absolute; top:-3px; left:0; height:8px; width:8px; border-radius:50%; background:#d7b5ff; box-shadow:0 0 14px #c39aef; opacity:0; }
.cs-stream-status { display:flex; justify-content:center; align-items:center; gap:8px; font-size:15px; font-weight:650; color:var(--cs-ink); }
.cs-mini-signals { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:18px 0; }
.cs-mini-signals span { font-size:12px; line-height:1.4; padding:6px 9px; background:#36204c; border:1px solid #8054b460; border-radius:20px; color:var(--cs-ink); }
.cs-radar { width:min(260px,calc(100% - 36px)); height:200px; position:relative; margin:22px auto 0; }
.cs-radar-ring { position:absolute; inset:20px; border:1px solid #8054b450; border-radius:50%; background:radial-gradient(circle,#8054b408,transparent); }
.cs-radar-ring-two { inset:60px; }
.cs-meta-centre { position:absolute; top:calc(50% - 43px); left:calc(50% - 43px); width:86px; height:86px; display:grid; place-content:center; text-align:center; background:#102c24; border:1px solid #8054b490; border-radius:24px; box-shadow:0 0 40px #8054b420; }
.cs-meta-centre svg { width:59px; height:40px; color:#61a5ff; }
.cs-meta-centre strong { font-size:11px; }
.cs-person { position:absolute; display:grid; place-items:center; width:42px; height:42px; background:#36204c; border:1px solid #8054b4; border-radius:50%; color:var(--cs-ink); }
.cs-person > i { position:absolute; right:-4px; bottom:-3px; background:#c39aef; color:#241332; border-radius:50%; width:15px; height:15px; display:grid; place-items:center; }
.cs-person > i .p-icon { width:11px; height:11px; }
.cs-person-0 { top:0; left:calc(50% - 21px); }.cs-person-1 { top:32px; right:8px; }.cs-person-2 { bottom:32px; right:8px; }.cs-person-3 { bottom:0; left:calc(50% - 21px); }.cs-person-4 { bottom:32px; left:8px; }.cs-person-5 { top:32px; left:8px; }
.cs-similar-network { position:absolute; inset:0; transform:rotate(var(--network-angle)); pointer-events:none; }
.cs-network-lines { position:absolute; left:-20px; top:-25px; width:82px; height:70px; color:#a67ad2; opacity:.55; }
.cs-similar { position:absolute; display:grid; place-items:center; width:17px; height:17px; border:1px solid #8054b4; border-radius:50%; background:#251d34; color:#d7b5ff; }
.cs-similar .p-icon { width:11px; height:11px; transform:rotate(calc(0deg - var(--network-angle))); }
.cs-similar-0 { top:-20px; left:12px; }.cs-similar-1 { top:-8px; left:-14px; }.cs-similar-2 { top:-8px; right:-14px; }
/* The outer customer networks extend 25px below the oval. */
.cs-discovery-copy { text-align:center; font-size:16px; font-weight:700; color:var(--cs-ink); margin:42px 0 0; }
.cs-finale { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; text-align:center; color:#29113f; background:radial-gradient(ellipse at 80% 0,#f1d5ff,transparent 70%),linear-gradient(135deg,#d8b0ff,#a47be1); border-radius:inherit; }
.cs-close { position:absolute; top:12px; right:14px; display:grid; place-items:center; width:30px; height:30px; padding:0; line-height:1; border:1px solid #59317840; border-radius:50%; background:#ffffff30; color:#36134f; cursor:pointer; }
.cs-close .p-icon { display:block; width:16px; height:16px; }
.cs-finale-icon { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; border-radius:50%; background:#59317820; margin-bottom:14px; }
.cs-finale-kicker { font-size:9px; font-weight:750; letter-spacing:1px; }
.cs-finale h3 { font-size:clamp(38px,4.5vw,48px); line-height:1; letter-spacing:-2px; margin:16px 0; color:#29113f; }
.cs-finale p { font-size:13px; line-height:1.6; margin:0 0 24px; color:#45265f; }
.cs-finale a { display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 18px; border-radius:12px; background:#301345; color:#faefff; font-size:13px; font-weight:700; text-decoration:none; box-shadow:0 8px 25px #48226740; }
.cs-finale a:hover { background:#4b2269; }
.cs-finale small { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:11px; margin-top:18px; color:#655174; line-height:1.5; }
.cs-finale small strong { font-weight:700; }
.cs-finale small .p-icon { width:14px; height:14px; }
.cs-footer { display:flex; align-items:center; justify-content:center; gap:14px; padding:4px 24px 10px; }
.cs-progress { display:flex; align-items:center; gap:0; }
.cs-progress button { display:grid; place-items:center; width:28px; height:32px; padding:0; border:0; border-radius:6px; background:transparent; cursor:pointer; }
.cs-progress button > span { width:6px; height:6px; border-radius:50%; background:#ffffff40; transition:background .2s,transform .2s; }
.cs-progress button.is-active > span { background:#c39aef; box-shadow:0 0 9px #c39aef66; transform:scale(1.3); }
.cs-progress button:hover > span { background:#ecd5ff; }
.cs-accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.cs-footer > button { display:grid; place-items:center; width:28px; height:28px; padding:0; border:1px solid #ffffff18; border-radius:50%; color:var(--cs-ink); background:none; font:inherit; font-size:11px; cursor:pointer; }
.cs-canvas > .cs-slide-arrow { display:none; }
@media (min-width:768px) and (hover:hover) and (pointer:fine) {
  .cs-canvas > .cs-slide-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:1; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid #ffffff26; border-radius:50%; color:#e4d3f6; background:#171126df; opacity:0; pointer-events:none; cursor:pointer; transition:opacity .2s,background .2s; }
  .cs-slide-arrow--previous { left:4px; }
  .cs-slide-arrow--next { right:4px; }
  .cs-demo:hover .cs-slide-arrow,.cs-demo:focus-within .cs-slide-arrow { opacity:.65; pointer-events:auto; }
  .cs-canvas > .cs-slide-arrow:hover,.cs-canvas > .cs-slide-arrow:focus-visible { opacity:1; background:#36204c; }
  .cs-slide-arrow .p-icon { width:16px; height:16px; }
  .cs-slide-arrow--previous .p-icon { transform:rotate(90deg); }
  .cs-slide-arrow--next .p-icon { transform:rotate(-90deg); }
}
.cs-demo :focus-visible { outline:2px solid #ecd5ff; outline-offset:4px; }
@media(max-width:400px) { .cs-footer { padding-inline:16px; }.cs-stage-heading { padding-inline:16px; }.cs-scene { padding-inline:16px; }.cs-brand { width:70px; }.cs-brand img { width:62px; height:62px; }.cs-brand > svg { width:62px; height:62px; }.cs-rule strong { font-size:11px; } }