.xo-intro-on,.xo-intro-on body{overflow:hidden}
.xo-intro{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;color:var(--xo-on-dark);overflow:hidden;background:linear-gradient(165deg,var(--xo-accent-700) 0%,var(--xo-accent) 55%,var(--xo-accent-400) 130%);padding:max(16px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));transition:opacity .45s ease,transform .45s ease;touch-action:pan-y}
.xo-intro[hidden]{display:none}
.xo-intro.is-out{opacity:0;transform:scale(1.03)}
.xo-intro__bg span{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 70%);will-change:transform}
.xo-intro__bg span:nth-child(1){width:70vmax;height:70vmax;left:-25vmax;top:-20vmax;animation:xoIntroFloat 14s ease-in-out infinite alternate}
.xo-intro__bg span:nth-child(2){width:55vmax;height:55vmax;right:-20vmax;bottom:-15vmax;animation:xoIntroFloat 18s ease-in-out infinite alternate-reverse}
.xo-intro__bg span:nth-child(3){width:30vmax;height:30vmax;right:10%;top:18%;opacity:.6;animation:xoIntroFloat 11s ease-in-out infinite alternate}
.xo-intro__top{position:relative;display:flex;flex-direction:column;gap:14px;width:100%;max-width:480px;margin:0 auto}
.xo-intro__bars{display:flex;gap:6px}
.xo-intro__bar{flex:1;height:3px;border-radius:calc(3px*var(--xo-rk));background:rgba(255,255,255,.28);overflow:hidden}
.xo-intro__bar i{display:block;height:100%;width:100%;background:var(--xo-card);transform:scaleX(0);transform-origin:0 50%}
.xo-intro__bar.is-done i{transform:none}
.xo-intro__bar.is-on i{animation:xoIntroBar 4.5s linear forwards}
.xo-intro__bar:last-child.is-on i{animation-duration:.6s}
.xo-intro__head{display:flex;align-items:center;justify-content:space-between;min-height:36px}
.xo-intro__logo{height:26px;width:auto;max-width:150px}
.xo-intro__name{font-size:16px;font-weight:800;letter-spacing:-.01em}
.xo-intro__skip{border:0;background:rgba(255,255,255,.14);color:var(--xo-on-dark);font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:99px;cursor:pointer;transition:background .2s}
.xo-intro__skip:hover{background:rgba(255,255,255,.24)}
.xo-intro__slides{position:relative;flex:1;width:100%;max-width:480px;margin:0 auto}
.xo-intro__slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;opacity:0;visibility:hidden;transform:translateX(40px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility .5s}
.xo-intro__slide.is-past{transform:translateX(-40px)}
.xo-intro__slide.is-on{opacity:1;visibility:visible;transform:none}
.xo-intro__art{position:relative;display:grid;place-items:center;width:170px;height:170px;margin-bottom:18px}
.xo-intro__ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.35)}
.xo-intro__slide.is-on .xo-intro__ring{animation:xoIntroRing 2.8s ease-out infinite}
.xo-intro__slide.is-on .xo-intro__ring--2{animation-delay:1.4s}
.xo-intro__tile{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:calc(26px*var(--xo-rk));background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);box-shadow:0 18px 40px rgba(0,0,0,.18);transform:scale(.7) rotate(-8deg);opacity:0;transition:transform .7s cubic-bezier(.2,1.4,.4,1) .1s,opacity .4s .1s}
.xo-intro__slide.is-on .xo-intro__tile{transform:none;opacity:1}
.xo-intro__tile .xo-i{width:38px;height:38px;color:var(--xo-on-dark);animation:xoIntroBob 3s ease-in-out infinite}
.xo-intro__title{margin:0;font-size:clamp(24px,6.4vw,32px);line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--xo-on-dark);opacity:0;transform:translateY(14px);transition:opacity .5s .2s,transform .6s cubic-bezier(.2,.8,.2,1) .2s}
.xo-intro__text{margin:0;max-width:330px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.86);opacity:0;transform:translateY(14px);transition:opacity .5s .32s,transform .6s cubic-bezier(.2,.8,.2,1) .32s}
.xo-intro__slide.is-on .xo-intro__title,.xo-intro__slide.is-on .xo-intro__text{opacity:1;transform:none}
.xo-intro__foot{position:relative;width:100%;max-width:480px;margin:0 auto}
.xo-intro__next{min-height:52px;gap:8px;background:var(--xo-card);color:var(--xo-accent-700);border:0;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.18);transition:transform .2s,box-shadow .2s}
.xo-intro__next:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(0,0,0,.22)}
.xo-intro__next.is-last .xo-i{display:none}
@keyframes xoIntroBar{to{transform:scaleX(1)}}
@keyframes xoIntroFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(6vmax,4vmax,0)}}
@keyframes xoIntroRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.25);opacity:0}}
@keyframes xoIntroBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.xo-intro__bg span,.xo-intro__ring,.xo-intro__tile .xo-i{animation:none!important}.xo-intro__slide,.xo-intro__title,.xo-intro__text,.xo-intro__tile{transition:opacity .2s}}