.sh{--sh-d:12s}.sh-phone{position:relative;width:272px;height:560px;border-radius:46px;background:#0b0b0f;padding:9px;box-shadow:inset 0 0 0 1.5px #2a2a33,0 40px 80px -36px rgba(150,47,191,.6),0 18px 40px -24px rgba(11,11,15,.45)}.sh-phone:before{content:"";position:absolute;right:-3px;top:120px;width:3px;height:56px;border-radius:0 3px 3px 0;background:#1c1c22}.sh-screen{position:relative;height:100%;overflow:hidden;border-radius:38px;background:#fff}.sh-status{position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 22px 0 26px;background:#fff;font-size:12px;color:#0b0b0f}.sh-status b{font-weight:700;letter-spacing:-.01em}.sh-status i{width:22px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1.5px #0b0b0f;background:linear-gradient(90deg,#0b0b0f 70%,transparent 0) 2px 2px /15px 6px no-repeat}.sh-notch{position:absolute;left:50%;top:8px;width:78px;height:22px;transform:translateX(-50%);border-radius:9999px;background:#0b0b0f}.sh-scene{position:absolute;inset:34px 0 0;overflow:hidden;opacity:0;background:#fff}.sh-s4{opacity:1}.sh-shot{display:block;width:100%;height:auto}.sh-tap{position:absolute;left:58%;top:52%;width:34px;height:34px;margin:-17px;border-radius:9999px;background:rgba(214,41,118,.28);box-shadow:0 0 0 2px rgba(255,255,255,.9);opacity:0}.sh-pan{will-change:transform}.sh-toast{position:absolute;left:50%;bottom:16px;display:inline-flex;align-items:center;gap:7px;transform:translateX(-50%);white-space:nowrap;border-radius:9999px;background:#0b0b0f;padding:9px 14px;font-size:12px;font-weight:700;color:#fff;box-shadow:0 14px 30px -12px rgba(11,11,15,.6);opacity:0}.sh-live i,.sh-toast i{width:16px;height:16px;border-radius:9999px;background:#dfff4f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%230b0b0f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% /12px no-repeat}.sh-fan{background:radial-gradient(120% 80% at 50% 30%,#fbeef6 0,#f1efff 55%,#fff 100%)}.sh-fan-c{position:absolute;top:34px;left:50%;width:150px;height:316px;margin-left:-75px;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 0 0 4px #0b0b0f,0 20px 40px -18px rgba(11,11,15,.55)}.sh-fan-c:first-child{transform:translateX(-62px) rotate(-9deg) scale(.82);opacity:.9}.sh-fan-c:nth-child(2){transform:translateX(62px) rotate(9deg) scale(.82);opacity:.9}.sh-fan-c:nth-child(3){z-index:2}.sh-toast-look{bottom:20px}.sh-live{position:absolute;left:50%;bottom:18px;display:inline-flex;align-items:center;gap:7px;transform:translateX(-50%);white-space:nowrap;border-radius:9999px;background:#fff;padding:9px 15px 9px 10px;font-size:12.5px;font-weight:700;color:#0b0b0f;box-shadow:0 0 0 1px #ececf1,0 16px 34px -14px rgba(11,11,15,.55)}.sh-steps{display:flex;gap:6px}.sh-step{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;background:#fff;padding:6px 11px 6px 6px;font-size:12.5px;font-weight:600;color:#6b6b76;box-shadow:0 0 0 1px #ececf1;white-space:nowrap}.sh-step em{display:grid;place-items:center;width:20px;height:20px;border-radius:9999px;background:#f1f1f4;font-style:normal;font-size:11px;font-weight:700;color:#0b0b0f}.sh-step:last-child{color:#0b0b0f;box-shadow:0 0 0 1.5px #0b0b0f}.sh-step:last-child em{background:#dfff4f}@media (prefers-reduced-motion:no-preference){.sh-run .sh-s4{opacity:0}.sh-run .sh-scene{animation:sh-scene var(--sh-d) linear infinite}.sh-run .sh-s2{animation-delay:calc(var(--sh-d) * -.75)}.sh-run .sh-s3{animation-delay:calc(var(--sh-d) * -.5)}.sh-run .sh-s4{animation-delay:calc(var(--sh-d) * -.25)}.sh-run .sh-tap{animation:sh-tap var(--sh-d) ease-out infinite}.sh-run .sh-pan{animation:sh-pan var(--sh-d) ease-in-out infinite;animation-delay:calc(var(--sh-d) * -.75)}.sh-run .sh-s2 .sh-toast{animation:sh-pop var(--sh-d) cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:calc(var(--sh-d) * -.75)}.sh-run .sh-fan-c:first-child{animation:sh-fan-l var(--sh-d) cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--sh-d) * -.5)}.sh-run .sh-fan-c:nth-child(2){animation:sh-fan-r var(--sh-d) cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--sh-d) * -.5)}.sh-run .sh-s3 .sh-toast{animation:sh-pop var(--sh-d) cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:calc(var(--sh-d) * -.5)}.sh-run .sh-live{animation:sh-pop var(--sh-d) cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:calc(var(--sh-d) * -.25)}.sh-run .sh-step{animation:sh-step var(--sh-d) linear infinite;animation-delay:calc(var(--sh-d) * (var(--n) * .25 - 1))}.sh-run .sh-step em{animation:sh-step-em var(--sh-d) linear infinite;animation-delay:inherit}.sh-run .sh-step:last-child{color:#6b6b76;box-shadow:0 0 0 1px #ececf1}.sh-run .sh-step:last-child em{background:#f1f1f4}.sh.sh-pause *{animation-play-state:paused!important}}@keyframes sh-scene{0%{opacity:0;transform:scale(1.03)}23%,3%{opacity:1;transform:none}26%,to{opacity:0;transform:none}}@keyframes sh-tap{0%,5%{opacity:0;transform:scale(.4)}8%{opacity:1;transform:scale(1)}13%,to{opacity:0;transform:scale(1.6)}}@keyframes sh-pan{0%,6%{transform:none}20%,to{transform:translateY(-34px)}}@keyframes sh-pop{0%,9%{opacity:0;transform:translate(-50%,14px) scale(.9)}13%,23%{opacity:1;transform:translate(-50%)}26%,to{opacity:0;transform:translate(-50%)}}@keyframes sh-fan-l{0%,2%{transform:translateX(0) rotate(0) scale(.9)}10%,to{transform:translateX(-62px) rotate(-9deg) scale(.82)}}@keyframes sh-fan-r{0%,2%{transform:translateX(0) rotate(0) scale(.9)}10%,to{transform:translateX(62px) rotate(9deg) scale(.82)}}@keyframes sh-step{0%,24.9%{color:#0b0b0f;box-shadow:0 0 0 1.5px #0b0b0f}25%,to{color:#6b6b76;box-shadow:0 0 0 1px #ececf1}}@keyframes sh-step-em{0%,24.9%{background:#dfff4f}25%,to{background:#f1f1f4}}@media (max-width:767px){.sh-phone{width:248px;height:510px;border-radius:42px;padding:8px}.sh-screen{border-radius:35px}.sh-fan-c{width:136px;height:286px;margin-left:-68px}.sh-steps{flex-wrap:wrap;justify-content:center}}