/* demo section: light stage so the dark app window pops */
.sw-demo{color:var(--x-body);background:radial-gradient(900px 480px at 85% 0,rgba(40,163,74,.12),transparent 60%),radial-gradient(800px 480px at 0 100%,rgba(58,86,158,.12),transparent 60%),linear-gradient(180deg,#eef3f9,#e6edf6)}
.sw-demo::before{background-image:linear-gradient(rgba(27,50,93,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(27,50,93,.06) 1px,transparent 1px)}
.sw-demo .ntsx-head h2{color:var(--x-ink)}
.sw-demo .ntsx-head p{color:var(--x-muted)}
.sw-demo .ntsx-eyebrow{color:var(--x-accent)}
.sw-demo-step{color:var(--x-ink);background:#fff;border-color:var(--x-line);box-shadow:var(--x-shadow-sm)}
.sw-demo-step:hover{background:#fff;box-shadow:var(--x-shadow-md)}
.sw-demo-no{color:var(--x-muted);background:var(--x-surface-2)}
.sw-demo-body em{color:var(--x-muted)}
.sw-demo-body > span{color:var(--x-body)}
.sw-demo-step.is-on{background:#fff;border-color:rgba(40,163,74,.6);box-shadow:0 24px 50px -26px rgba(40,163,74,.6)}
.sw-demo-step.is-on .sw-demo-body em{color:var(--x-accent-strong)}
.sw-demo-prog{background:var(--x-line)}
.sw-demo-note{color:var(--x-muted)}
.sw-studio{box-shadow:0 50px 100px -40px rgba(14,34,54,.7),0 0 0 1px rgba(27,50,93,.2)}
.sw-features{border-top:0}
.sw-demo-no{transition:color .3s,box-shadow .3s}
@media (max-width:1100px){
  .sw-demo-grid{display:flex;flex-direction:column;gap:20px}
  .sw-studio{order:-1}
  .sw-demo-steps{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;scrollbar-width:none}
  .sw-demo-steps li{flex:0 0 min(82%,340px);scroll-snap-align:start}
  .sw-demo-step .sw-demo-body > span{max-height:0;opacity:0;margin:0}
  .sw-demo-step.is-on .sw-demo-body > span{max-height:160px;opacity:1;margin-top:6px}
  .sw-studio-menu{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .sw-studio-menu span{flex:none}
}