.sxs-root{--sxs-glass:rgba(17,15,46,.82);--sxs-line:#2d2958;--sxs-ink:#f3f1ff;--sxs-mute:#aaa6cf;--sxs-vio:#8b5cf6;--sxs-blue:#5b6cff;--sxs-cy:#22d3ee;--sxs-paper:#ffffff;--sxs-paper-ink:#14102e;
  --sxs-fd:'Bricolage Grotesque',Georgia,'Segoe UI',sans-serif;--sxs-fb:'Figtree','Segoe UI',system-ui,sans-serif;color:var(--sxs-ink);font-family:var(--sxs-fb);line-height:1.2}
.sxs-root *{box-sizing:border-box}
/* stage */
.sxs-stage-wrap{position:relative;width:100%;max-width:700px;margin-inline:auto;aspect-ratio:620/730;overflow:hidden}
.sxs-stage{position:absolute;top:0;left:0;width:620px;height:730px;transform-origin:0 0}
.sxs-ribbon{position:absolute;left:10px;right:10px;top:0;height:104px;padding:14px 18px;border-radius:18px;background:var(--sxs-glass);border:1px solid var(--sxs-line);overflow:hidden}
.sxs-rb-top{display:flex;justify-content:space-between;font:600 14px var(--sxs-fb);color:var(--sxs-mute);font-variant-numeric:tabular-nums}
.sxs-wave{position:absolute;left:18px;right:18px;bottom:16px;height:46px;display:flex;align-items:center;gap:3px}
.sxs-wave i{flex:1;background:#5646c4;border-radius:2px}
.sxs-scan{position:absolute;top:10px;bottom:6px;left:18px;width:3px;background:var(--sxs-cy);box-shadow:0 0 18px 4px rgba(34,211,238,.55);opacity:0}
.sxs-go-scan .sxs-scan{animation:sxs-scan 2.6s linear both}
@keyframes sxs-scan{0%{left:18px;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(100% - 21px);opacity:0}}
.sxs-hit{position:absolute;bottom:10px;height:56px;width:11%;border:2px solid var(--sxs-vio);border-radius:10px;background:rgba(139,92,246,.26);box-shadow:0 0 22px rgba(139,92,246,.7);opacity:0;transform:scale(.92);transition:opacity .4s,transform .4s}
.sxs-s-scan .sxs-hit{opacity:1;transform:none}
.sxs-h1{left:12%}.sxs-h2{left:43%}.sxs-h3{left:71%}
.sxs-s-scan .sxs-h1{transition-delay:.5s}.sxs-s-scan .sxs-h2{transition-delay:1.3s}.sxs-s-scan .sxs-h3{transition-delay:2.1s}

.sxs-ph{position:absolute;border-radius:34px;border:6px solid #1c1942;background:radial-gradient(120% 70% at 50% 0,#4b27b8 0,#1a1250 52%,#090722 100%);overflow:hidden;box-shadow:0 40px 70px -30px rgba(139,92,246,.6);opacity:0;transform:translateY(60px) rotate(var(--rot,0deg)) scale(.92);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.sxs-s-clips .sxs-ph{opacity:1;transform:rotate(var(--rot,0deg))}
.sxs-s-clips .sxs-ph-l,.sxs-s-clips .sxs-ph-r{opacity:.9}
.sxs-ph-c{left:200px;top:140px;width:220px;height:450px;z-index:3}
.sxs-ph-l{left:14px;top:215px;width:170px;height:340px;--rot:-5deg;z-index:2;transition-delay:.25s}
.sxs-ph-r{left:436px;top:215px;width:170px;height:340px;--rot:5deg;z-index:2;transition-delay:.4s}
.sxs-notch{position:absolute;top:8px;left:50%;width:56px;height:6px;margin-left:-28px;border-radius:9px;background:#0a0820}
.sxs-hook{position:absolute;top:26px;left:12px;right:12px;padding:9px 11px;border-radius:12px;background:var(--sxs-paper);color:var(--sxs-paper-ink);font:700 15px/1.12 var(--sxs-fd)}
.sxs-caps{position:absolute;left:10px;right:10px;bottom:76px;text-align:center;font:800 25px/1.05 var(--sxs-fd);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.sxs-caps b{color:var(--sxs-cy);font-weight:800}
.sxs-chip{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:var(--sxs-cy);color:#04222b;font:700 13px var(--sxs-fb);white-space:nowrap}
.sxs-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18)}
.sxs-prog i{display:block;height:100%;background:var(--sxs-cy);transform-origin:0 50%;animation:sxs-prog 8s linear infinite}
@keyframes sxs-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sxs-ph-l .sxs-hook,.sxs-ph-r .sxs-hook{top:22px;left:9px;right:9px;padding:7px 8px;font-size:12px;border-radius:10px}
.sxs-ph-l .sxs-caps,.sxs-ph-r .sxs-caps{bottom:62px;font-size:19px}
.sxs-ph-l .sxs-chip,.sxs-ph-r .sxs-chip{bottom:20px;font-size:11px;padding:6px 11px}

.sxs-card{position:absolute;border-radius:18px;background:var(--sxs-glass);border:1px solid var(--sxs-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 24px 50px -28px rgba(0,0,0,.9);z-index:5;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.sxs-deliv{left:0;top:572px;width:274px;padding:15px 18px 10px}
.sxs-s-deliv .sxs-deliv{opacity:1;transform:none}
.sxs-deliv h4{margin:0 0 6px;font:700 14px var(--sxs-fb);color:#8fe9f7}
.sxs-dr{display:flex;align-items:center;gap:10px;padding:5px 0;font:600 18px var(--sxs-fb);color:#7a75b3;transition:color .3s}
.sxs-ck{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #4a4585;display:grid;place-items:center;transition:background .3s,border-color .3s}
.sxs-ck svg{opacity:0;transition:opacity .25s}
.sxs-s-t1 .sxs-r1,.sxs-s-t2 .sxs-r2,.sxs-s-t3 .sxs-r3{color:var(--sxs-ink)}
.sxs-s-t1 .sxs-r1 .sxs-ck,.sxs-s-t2 .sxs-r2 .sxs-ck,.sxs-s-t3 .sxs-r3 .sxs-ck{background:var(--sxs-cy);border-color:var(--sxs-cy)}
.sxs-s-t1 .sxs-r1 .sxs-ck svg,.sxs-s-t2 .sxs-r2 .sxs-ck svg,.sxs-s-t3 .sxs-r3 .sxs-ck svg{opacity:1}
.sxs-appr{right:0;top:598px;width:270px;padding:14px}
.sxs-s-appr .sxs-appr{opacity:1;transform:none}
.sxs-stt{position:relative;height:24px;margin-bottom:12px;font:700 17px var(--sxs-fb)}
.sxs-stt span{position:absolute;left:0;top:0;display:flex;align-items:center;gap:9px;white-space:nowrap;transition:opacity .3s}
.sxs-stt span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sxs-cy);box-shadow:0 0 10px var(--sxs-cy)}
.sxs-stt .sxs-b{opacity:0}
.sxs-stt .sxs-b::before{background:var(--sxs-vio);box-shadow:0 0 10px var(--sxs-vio)}
.sxs-s-pub .sxs-stt .sxs-a{opacity:0}.sxs-s-pub .sxs-stt .sxs-b{opacity:1}
.sxs-ap-btn{position:relative;height:46px;display:grid;place-items:center;border-radius:999px;background:linear-gradient(135deg,var(--sxs-blue),var(--sxs-vio));color:#fff;font:700 18px var(--sxs-fb);transition:background .3s,color .3s}
.sxs-ap-btn span{grid-area:1/1;transition:opacity .2s}
.sxs-ap-btn .sxs-x{opacity:0}
.sxs-s-done .sxs-ap-btn{background:var(--sxs-cy);color:#04222b}
.sxs-s-done .sxs-ap-btn .sxs-y{opacity:0}.sxs-s-done .sxs-ap-btn .sxs-x{opacity:1}
.sxs-ap-btn::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid #fff;opacity:0}
.sxs-s-done .sxs-ap-btn::after{animation:sxs-ripple .9s ease-out}
@keyframes sxs-ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5,1.9)}}
.sxs-done{right:22px;top:118px;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border-color:var(--sxs-cy);font:700 16px var(--sxs-fb);z-index:6;transform:translateY(-8px)}
.sxs-s-pub .sxs-done{opacity:1;transform:none}

.sxs-ph-img{position:absolute;left:0;right:0;bottom:0;top:62px;background:center/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.sxs-ph-l .sxs-ph-img,.sxs-ph-r .sxs-ph-img{top:46px}
.sxs-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,26,.35) 0,transparent 26%,transparent 50%,rgba(7,6,26,.92) 100%);pointer-events:none}
.sxs-notch,.sxs-hook,.sxs-caps,.sxs-chip,.sxs-prog{z-index:2}

/* v5: eyebrow, photo motion, glass sheen, beams, reels rail */
.sxs-ph-img{animation:sxs-kb 11s ease-in-out infinite alternate;transform-origin:50% 40%}
.sxs-ph-l .sxs-ph-img{animation-duration:13s;animation-delay:-3s}
.sxs-ph-r .sxs-ph-img{animation-duration:12s;animation-delay:-6s}
@keyframes sxs-kb{from{transform:scale(1)}to{transform:scale(1.09)}}
.sxs-ph::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.03) 24%,transparent 40%)}
.sxs-beams{position:absolute;left:0;top:0;width:620px;height:730px;z-index:1;pointer-events:none;opacity:0;transition:opacity .8s .2s}
.sxs-s-clips .sxs-beams{opacity:1}
.sxs-beams path{fill:none;stroke:url(#sxs-bg1);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 7;animation:sxs-flow 1.4s linear infinite}
@keyframes sxs-flow{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion:reduce){.sxs-ph-img{animation:none}.sxs-beams path{animation:none}}
