.sps{--sps-cycle:6.5s;background:radial-gradient(120% 120% at 85% 10%,#12345a 0%,#0b1a2e 55%,#08111f 100%)}.sps-glow{pointer-events:none;background:radial-gradient(closest-side,#3aa0dc47,#0000);height:520px;position:absolute;inset:auto -10% -40% 40%}.sps-stage{padding:0 0 28px;position:relative}.sps-browser{background:#0f1d33;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 30px 80px #00000073,0 0 0 1px #ffffff14}.sps-bar{background:#16263f;align-items:center;gap:6px;padding:9px 12px;display:flex}.sps-dot{background:#ffffff38;border-radius:999px;width:10px;height:10px}.sps-url{color:#ffffffbf;white-space:nowrap;background:#ffffff12;border-radius:6px;flex:1;min-width:0;margin-left:10px;padding:3px 10px;font-size:11px;overflow:hidden}.sps-url-text{display:inline-block}.sps-live{color:#9ff0bd;letter-spacing:.08em;background:#22c55e29;border:1px solid #22c55e80;border-radius:999px;flex:none;padding:2px 8px;font-size:10px;font-weight:800}.sps-canvas{aspect-ratio:16/10;background:#f4f1ea;position:relative}.sps-shot,.sps-phone-shot{opacity:0;position:absolute;inset:0}.sps-shot.is-on,.sps-phone-shot.is-on{opacity:1}.sps-wire{opacity:0;position:absolute;inset:0}.sps-w{background:#d9d3c6;border-radius:6px;position:absolute}.sps-w--nav{background:#cfc8b9;height:6%;top:4%;left:4%;right:4%}.sps-w--hero{background:#e4dfd4;height:48%;top:14%;left:4%;right:4%}.sps-w--h1{width:42%;height:9%;top:24%;left:9%}.sps-w--p{width:34%;height:4%;top:37%;left:9%}.sps-w--btn{background:#b9b0a0;width:15%;height:7%;top:46%;left:9%}.sps-w--card{width:28.6%;height:27%;top:67%}.sps-w--c1{left:4%}.sps-w--c2{left:35.7%}.sps-w--c3{left:67.4%}.sps-phone{aspect-ratio:390/844;background:#0b1220;border:6px solid #0b1220;border-radius:22px;width:26%;max-width:150px;position:absolute;bottom:0;right:-2%;overflow:hidden;box-shadow:0 24px 50px #00000080}.sps-notch{z-index:2;background:#0b1220;border-radius:999px;width:34%;height:8px;position:absolute;top:4px;left:50%;transform:translate(-50%)}.sps-cursor{z-index:3;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2-3 7z' fill='%23fff' stroke='%23111' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat;width:18px;height:18px;position:absolute;top:58%;left:62%}.sps-step-bar{background:#ffffff24;border-radius:999px;height:4px;display:block;overflow:hidden}.sps-step-bar>span{border-radius:inherit;transform-origin:0;background:linear-gradient(90deg,#3aa0dc,#8cc8ec);height:100%;display:block}@media (max-width:640px){.sps-phone{width:30%;right:0}.sps-live{display:none}}@media (prefers-reduced-motion:no-preference){.sps--play .sps-wire{animation:sps-wire var(--sps-cycle) linear both}.sps--play .sps-w{animation:sps-draw var(--sps-cycle) cubic-bezier(.2, .7, .2, 1) both}.sps--play .sps-w--hero{animation-delay:80ms}.sps--play .sps-w--h1{animation-delay:.2s}.sps--play .sps-w--p{animation-delay:.3s}.sps--play .sps-w--btn{animation-delay:.38s}.sps--play .sps-w--c1{animation-delay:.46s}.sps--play .sps-w--c2{animation-delay:.54s}.sps--play .sps-w--c3{animation-delay:.62s}.sps--play .sps-shot{transition:opacity .25s}.sps--play .sps-shot.is-on{animation:sps-wipe var(--sps-cycle) cubic-bezier(.65, 0, .35, 1) both}.sps--play .sps-shot.is-on img{animation:sps-push var(--sps-cycle) ease-out both}.sps--play .sps-phone-shot{transition:opacity .25s}.sps--play .sps-phone-shot.is-on{animation:sps-phone-in var(--sps-cycle) cubic-bezier(.2, .8, .2, 1) both}.sps--play .sps-phone{animation:6s ease-in-out infinite sps-float}.sps--play .sps-live{animation:sps-live var(--sps-cycle) ease both}.sps--play .sps-url-text{animation:sps-url var(--sps-cycle) steps(24, end) both}.sps--play .sps-cursor{animation:sps-cursor var(--sps-cycle) ease-in-out both}.sps--play .sps-step-bar>span,.sps--play .sps-step{animation-duration:var(--sps-cycle);animation-timing-function:linear;animation-fill-mode:both}.sps--play .sps-step:first-child .sps-step-bar>span{animation-name:sps-fill-1}.sps--play .sps-step:nth-child(2) .sps-step-bar>span{animation-name:sps-fill-2}.sps--play .sps-step:nth-child(3) .sps-step-bar>span{animation-name:sps-fill-3}.sps--play .sps-step:nth-child(4) .sps-step-bar>span{animation-name:sps-fill-4}.sps--play .sps-step:first-child{animation-name:sps-step-1}.sps--play .sps-step:nth-child(2){animation-name:sps-step-2}.sps--play .sps-step:nth-child(3){animation-name:sps-step-3}.sps--play .sps-step:nth-child(4){animation-name:sps-step-4}}@keyframes sps-wire{0%{opacity:1}40%{opacity:1}44%,to{opacity:0}}@keyframes sps-draw{0%{transform-origin:0;opacity:0;transform:scaleX(0)}10%,to{transform-origin:0;opacity:1;transform:scaleX(1)}}@keyframes sps-wipe{0%,18%{clip-path:inset(0 100% 0 0)}38%,to{clip-path:inset(0)}}@keyframes sps-push{0%,40%{transform:scale(1)}to{transform:scale(1.06)}}@keyframes sps-phone-in{0%,40%{transform:translateY(105%)}52%,to{transform:translateY(0)}}@keyframes sps-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes sps-live{0%,56%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1.12)}66%,to{opacity:1;transform:scale(1)}}@keyframes sps-url{0%,56%{clip-path:inset(0 100% 0 0)}68%,to{clip-path:inset(0)}}@keyframes sps-cursor{0%,16%{opacity:0;transform:translate(-120px,40px)}20%{opacity:1}34%{opacity:1;transform:translate(0)}36%{transform:translate(0)scale(.8)}38%{transform:translate(0)scale(1)}44%,to{opacity:0;transform:translate(10px,-10px)}}@keyframes sps-fill-1{0%{transform:scaleX(0)}18%,to{transform:scaleX(1)}}@keyframes sps-fill-2{0%,18%{transform:scaleX(0)}40%,to{transform:scaleX(1)}}@keyframes sps-fill-3{0%,40%{transform:scaleX(0)}56%,to{transform:scaleX(1)}}@keyframes sps-fill-4{0%,56%{transform:scaleX(0)}80%,to{transform:scaleX(1)}}@keyframes sps-step-1{0%,18%{opacity:1}22%,to{opacity:.6}}@keyframes sps-step-2{0%,16%{opacity:.6}18%,40%{opacity:1}44%,to{opacity:.6}}@keyframes sps-step-3{0%,38%{opacity:.6}40%,56%{opacity:1}60%,to{opacity:.6}}@keyframes sps-step-4{0%,54%{opacity:.6}56%,to{opacity:1}}