/* One browser window becomes a workspace, then the centre of a connected system. */
.si-experiential .si-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:42px;margin:34px 0 48px}
.si-preview{--pv-progress:0;--pv-cycle:3s;margin:0;min-width:0;color:#3444ad;isolation:isolate}
.si-preview [hidden]{display:none!important}
.pv-meta{display:flex;align-items:center;justify-content:space-between;min-height:34px;font:8px/1.4 Syne,Pretendard,sans-serif;letter-spacing:.08em;border-bottom:1px solid #c8cee4}
.pv-meta button{font:10px/1.4 Pretendard,sans-serif;letter-spacing:0;padding:8px 0 8px 14px;color:#5d6a96}
.pv-stage{position:relative;aspect-ratio:600/390;overflow:hidden;background:linear-gradient(#8d9ac00b 1px,transparent 1px),linear-gradient(90deg,#8d9ac00b 1px,transparent 1px);background-size:24px 24px;container-type:inline-size}
.pv-window{display:flex;flex-direction:column;position:absolute;left:7%;top:10%;width:86%;height:80%;border:1px solid #8b99c0;background:#faf9f4;overflow:hidden;box-shadow:0 10px 28px #2634760c;transform:rotate(-2deg);transition:left 1s cubic-bezier(.65,0,.25,1),top 1s cubic-bezier(.65,0,.25,1),width 1s cubic-bezier(.65,0,.25,1),height 1s cubic-bezier(.65,0,.25,1),transform 1s,background .8s,border-color .8s}
.pv-chrome{flex:0 0 9%;height:9%;min-height:17px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #a3afcf66;color:#6d7ca3;transition:opacity .4s}
.pv-chrome>span{display:flex;gap:4px}.pv-chrome i{width:3px;height:3px;border-radius:50%;background:#8b99c0}.pv-chrome small{font:7px/1.2 monospace}.pv-chrome>b{font:12px/1 Syne}
.pv-screen{flex:1;min-height:0;position:relative}
.pv-web,.pv-ops,.pv-core{position:absolute;inset:0;transition:opacity .5s,transform .8s;overflow:hidden}
.pv-web{padding:3% 5%;color:#25346f}
.pv-web>header{display:flex;align-items:center;justify-content:space-between;height:12%}.pv-web>header>b{font:800 18px/.9 Syne;letter-spacing:-.08em}.pv-web>header>span{font:5px/1.4 Syne;letter-spacing:.05em}
.pv-web-body{height:76%;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:12px}
.pv-web-body>div>small{font:6px/1.3 Syne;letter-spacing:.06em}
.pv-web-body strong{display:block;font:600 clamp(21px,6.8cqw,40px)/.95 Syne,sans-serif;letter-spacing:-.07em;margin:9px 0 13px}
.pv-web-body strong em{font-style:normal;position:relative}.pv-web-body strong em:after{content:'';position:absolute;height:3px;background:#c9f000;bottom:-5px;left:0;right:0;transform-origin:left;animation:pv-underline var(--pv-cycle) infinite}
.pv-web-cta{display:inline-flex;align-items:center;gap:15px;background:#d7ff00;padding:7px 8px;font:6px Syne}.pv-web-cta i{font:normal 12px/1 Syne}
.pv-web-poster{height:86%;position:relative;background:#4453d9;color:#f4f1e9;padding:12%;overflow:hidden}
.pv-web-poster>span{display:block;position:relative;z-index:1;font:600 clamp(7px,2cqw,11px)/1.2 Syne;letter-spacing:-.04em}
.pv-web-poster>b{position:absolute;bottom:8%;right:4%;font:800 clamp(45px,17cqw,90px)/.8 Syne;letter-spacing:-.12em;color:#d6ddff}.pv-web-poster>b>span{color:#d7ff00}
.pv-web-poster>i{position:absolute;bottom:6%;left:12%;font:normal 4px Syne;letter-spacing:.1em}
.pv-web>footer{height:12%;border-top:1px solid #cdd2df;display:flex;align-items:center;justify-content:space-between;gap:6px;font:5px Syne;letter-spacing:.06em}.pv-web>footer>i{height:1px;flex:1;background:#cdd2df}
.pv-ops{display:grid;grid-template-columns:17% 1fr;opacity:0;transform:translateY(14px);background:#202943;color:#dde5fc}
.pv-ops>aside{position:relative;border-right:1px solid #a9bcf124;padding:15% 16%}.pv-ops>aside>b{font:800 15px/.9 Syne;white-space:nowrap}.pv-ops>aside>b>span{font-size:6px;font-weight:500;margin-left:2px}
.pv-ops>aside>i{display:block;width:100%;height:4px;background:#697ca350;margin:15px 0}.pv-ops>aside>i.active{background:#aebdff}.pv-ops>aside>span{position:absolute;bottom:12px;font:8px monospace;color:#d7ff00}
.pv-ops-main{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(4px,1.4cqw,8px);min-width:0;min-height:0;padding:5%}.pv-ops-main>header>span{font:5px monospace;letter-spacing:.1em;color:#96a8d3}.pv-ops-main>header>b{display:flex;align-items:center;justify-content:space-between;margin-top:5px;font:600 16px/1.2 Syne}.pv-ops-main>header>b>span{font:4px monospace;color:#d7ff00}
.pv-workflow{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0}.pv-workflow>span{position:relative;font:4px monospace;color:#aab9db;padding:5px 0;border-top:1px solid #667aa2}.pv-workflow i{display:block;font:normal 8px/1.4 Pretendard;margin-top:5px;color:#f0f4fc}.pv-workflow>span:before{content:'';position:absolute;top:-2px;left:0;width:4px;height:4px;border-radius:50%;background:#d7ff00;animation:pv-status 2.4s infinite}.pv-workflow>span:nth-child(2):before{animation-delay:.4s}.pv-workflow>span:nth-child(3):before{animation-delay:.8s}
.pv-ops-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;min-height:0}.pv-chart,.pv-queue{padding:7px;border:1px solid #50658b70;overflow:hidden}.pv-chart>span,.pv-queue>span{display:block;font:4px monospace;color:#acbce0}.pv-chart{display:flex;flex-direction:column}.pv-chart>span{flex:none}.pv-chart svg{display:block;flex:1;min-height:0;width:100%;height:0;overflow:visible;margin-top:5px}.pv-chart-grid{stroke:#7d91bc33;stroke-width:1;fill:none}.pv-chart-line{stroke:#bac7ff;stroke-width:2;fill:none;stroke-dasharray:1;animation:pv-line var(--pv-cycle) infinite}
.pv-queue i{display:block;height:3px;background:#9db0e05c;margin:9px 0;transform-origin:left;animation:pv-bars 2.4s infinite}.pv-queue i:nth-of-type(2){width:75%;animation-delay:.3s}.pv-queue i:nth-of-type(3){width:90%;animation-delay:.6s}.pv-queue i:nth-of-type(4){width:55%;animation-delay:.9s}
.pv-ops-footer{display:flex;justify-content:space-between;gap:5px;padding-top:0;font:4px monospace;letter-spacing:.04em;color:#acbce0}.pv-ops-footer b{color:#d7ff00}
.pv-core{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;opacity:0;transform:scale(.85);color:#eef2ff}.pv-core>b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#d7ff00;color:#3444ad;font:800 24px/1 Syne;letter-spacing:-.07em;padding-right:3px}.pv-core>span{font:8px Syne;letter-spacing:.05em}.pv-core>small{font:5px monospace;letter-spacing:.06em;color:#ccd5ff}
.pv-network{position:absolute;inset:0;opacity:0;transition:opacity .6s .2s}.pv-network>svg{position:absolute;width:100%;height:100%;inset:0;overflow:visible}.pv-wires{stroke:#96a4d1;stroke-width:1.3;fill:none}.pv-signals{fill:none;stroke:#4353d9;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 190;animation:pv-signal var(--pv-cycle) linear infinite}
.pv-node{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;width:16.3%;height:13%;border:1px solid #abb7d6;background:#f4f5f7;font:6px monospace;white-space:nowrap}.pv-node>i{font:normal 5px Syne;color:#8b98bc}.pv-node-a,.pv-node-c{top:21.2%}.pv-node-b,.pv-node-d{top:65.8%}.pv-node-a,.pv-node-b{left:0}.pv-node-c,.pv-node-d{right:0}.pv-network-note{position:absolute;bottom:9%;left:0;right:0;text-align:center;font:5px monospace;letter-spacing:.08em;color:#6f7fba}
.si-preview[data-scene="1"] .pv-window{background:#202943;transform:rotate(0deg);border-color:#4f6086}
.si-preview[data-scene="1"] .pv-chrome{background:#202943;border-color:#798bb040}
.si-preview:not([data-scene="0"]) .pv-web{opacity:0;transform:translateY(-14px)}
.si-preview[data-scene="1"] .pv-ops{opacity:1;transform:none}
.si-preview[data-scene="2"] .pv-window{left:34%;top:34%;width:32%;height:34%;background:#4453d9;border-color:#4453d9;transform:none;box-shadow:none;border-radius:8px}
.si-preview[data-scene="2"] .pv-chrome{opacity:0;position:absolute;pointer-events:none}.si-preview[data-scene="2"] .pv-screen{height:100%}
.si-preview[data-scene="2"] .pv-core{opacity:1;transform:none;transition-delay:.35s}.si-preview[data-scene="2"] .pv-network{opacity:1;transition-delay:.55s}
.pv-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #c8cee4}
.pv-controls button{position:relative;display:flex;align-items:center;gap:9px;min-width:0;padding:16px 8px;font:11px/1.3 Pretendard,sans-serif;text-align:left;color:#7b86aa;border-bottom:1px solid #c8cee4;white-space:nowrap}.pv-controls button>small{font:8px Syne;opacity:.6}.pv-controls button[aria-pressed=true]{color:#3444ad}.pv-controls button[aria-pressed=true]:before{content:'';position:absolute;height:2px;top:-1px;left:0;right:0;background:#c5ceef}.pv-controls button[aria-pressed=true]:after{content:'';position:absolute;height:2px;top:-1px;left:0;right:0;background:#4453d9;transform:scaleX(var(--pv-progress));transform-origin:left}.pv-controls button:hover{background:#e6eaf4}
.si-preview figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:15px;color:#647396;font-size:11px;line-height:1.5}.si-preview figcaption small{font:6px/1.5 monospace;align-self:center;white-space:nowrap}
.si-preview :is(button):focus-visible{outline-color:#4453d9;outline-offset:-3px}
.si-preview *, .si-preview *:before,.si-preview *:after{animation-play-state:paused}
.si-preview[data-running=true][data-scene="0"] .pv-web-body strong em:after,.si-preview[data-running=true][data-scene="1"] :is(.pv-workflow>span:before,.pv-chart-line,.pv-queue i),.si-preview[data-running=true][data-scene="2"] .pv-signals{animation-play-state:running}
@keyframes pv-underline{0%,12%{transform:scaleX(0)}35%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes pv-status{0%,80%,100%{opacity:.25}20%,55%{opacity:1}}
@keyframes pv-line{0%,10%{stroke-dashoffset:1}65%,100%{stroke-dashoffset:0}}
@keyframes pv-bars{0%,100%{transform:scaleX(.65)}50%{transform:scaleX(1)}}
@keyframes pv-signal{to{stroke-dashoffset:-191}}
@media(max-width:1000px){.si-experiential .si-hero-grid{gap:24px}.pv-ops-main>header>b{font-size:13px}.pv-core>b{width:36px;height:36px;font-size:18px}.pv-core{gap:6px}.pv-core>span{font-size:6px}.pv-core>small{font-size:4px}.pv-controls button{font-size:10px;padding:14px 4px;gap:5px}.si-preview figcaption{font-size:10px}.si-preview figcaption small{font-size:5px}}
@media(max-width:700px){.si-experiential .si-hero-grid{display:block;margin-bottom:28px}.si-preview{margin:32px auto 0;max-width:540px}.pv-stage{aspect-ratio:600/430}.pv-chart,.pv-queue{padding:4px}.pv-meta{font-size:7px}.pv-window{left:5%;width:90%}.pv-controls button{font-size:11px;padding:15px 6px}.si-preview figcaption{padding-top:12px}.pv-web-body strong{font-size:7cqw}.pv-ops-main>header>b{font-size:14px}.pv-ops-main{padding:5%}.pv-ops>aside>b{font-size:12px}.pv-ops>aside>i{margin:12px 0}.pv-queue i{margin:7px 0}.pv-core>span{font-size:7px}}
@media(max-width:380px){.pv-stage{aspect-ratio:6/5}}
@media(prefers-reduced-motion:reduce){.si-preview *,.si-preview *:before,.si-preview *:after{transition:none!important;animation:none!important}.pv-controls button[aria-pressed=true]:after{transform:scaleX(1)}}
body[data-motion-enabled=false] .si-preview *,body[data-motion-enabled=false] .si-preview *:before,body[data-motion-enabled=false] .si-preview *:after{animation-play-state:paused!important;transition:none!important}