.xp{background:radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--blush) 70%, var(--background)), var(--background) 60%);perspective:1400px;place-items:center;display:grid;position:fixed;inset:0;overflow:hidden}.xp-bokeh{filter:blur(2px);opacity:.55;background:radial-gradient(circle, color-mix(in oklab, var(--gold) 55%, transparent), transparent 70%);animation:xp-float var(--d,9s) ease-in-out var(--dl,0s) infinite alternate;border-radius:50%;position:absolute}@keyframes xp-float{0%{transform:translateY(20px)scale(.9)}to{transform:translate(14px,-40px)scale(1.1)}}.xp-title{text-align:center;transition:opacity .6s,transform .6s;position:absolute;top:12svh;left:0;right:0}.xp-title h1{animation:2.4s cubic-bezier(.6,0,.2,1) both xp-ink}@keyframes xp-ink{0%{clip-path:inset(0 100% 0 0);filter:blur(4px)}to{clip-path:inset(0);filter:blur()}}.xp-hint{text-align:center;transition:opacity .4s;animation:2.6s ease-in-out infinite xp-breath;position:absolute;bottom:12svh;left:0;right:0}@keyframes xp-breath{50%{opacity:.45}}.xp-env{aspect-ratio:4/3;width:min(84vw,22rem);transform-style:preserve-3d;animation:1.6s cubic-bezier(.2,.9,.2,1) both xp-arrive,5s ease-in-out 1.6s infinite xp-hover;position:relative}@keyframes xp-arrive{0%{opacity:0;transform:translateY(60vh)rotateX(50deg)rotate(-8deg)}to{opacity:1;transform:none}}@keyframes xp-hover{50%{transform:translateY(-8px)rotate(.6deg)}}.xp-back,.xp-pocket,.xp-flap-f,.xp-flap-b{position:absolute}.xp-back{background:var(--paper);box-shadow:0 30px 50px -25px color-mix(in oklab, var(--foreground) 45%, transparent);border-radius:6px;inset:0}.xp-pocket{z-index:3;background:linear-gradient(180deg, var(--paper), color-mix(in oklab, var(--paper) 90%, var(--gold)));clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);border-radius:6px;inset:0}.xp-flap{z-index:4;transform-origin:top;height:60%;transform-style:preserve-3d;position:absolute;inset:0 0 auto}.xp-flap-f,.xp-flap-b{clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;inset:0}.xp-flap-f{background:linear-gradient(170deg, var(--blush), color-mix(in oklab, var(--blush) 80%, var(--primary)))}.xp-flap-b{background:var(--paper);transform:rotateX(180deg)}.xp-ribbon{z-index:4;pointer-events:none;width:160%;max-width:none;position:absolute;top:60%;left:50%}.xp-ribbon.a{transform:translate(-50%,-50%)rotate(32deg)}.xp-ribbon.b{transform:translate(-50%,-50%)rotate(-32deg)}.xp-seal{z-index:6;border-radius:50%;width:6.5rem;height:6.5rem;position:absolute;top:60%;left:50%;transform:translate(-50%,-50%)}.xp-seal:before{content:"";border:1px solid color-mix(in oklab, var(--gold) 70%, transparent);border-radius:50%;animation:2.6s ease-out infinite xp-ring;position:absolute;inset:-18px}@keyframes xp-ring{0%{opacity:.9;transform:scale(.7)}to{opacity:0;transform:scale(1.4)}}.xp-seal img{width:100%;height:100%;filter:drop-shadow(0 6px 8px color-mix(in oklab, var(--foreground) 30%, transparent));position:absolute;inset:0}.xp-seal .l{clip-path:polygon(0 0,55% 0,42% 50%,58% 100%,0 100%)}.xp-seal .r{clip-path:polygon(55% 0,100% 0,100% 100%,58% 100%,42% 50%)}.xp-burst{z-index:5;pointer-events:none;opacity:0;width:10px;height:10px;position:absolute;top:60%;left:50%;transform:translate(-50%,-50%)}.xp-burst i{transform-origin:50% 0;background:linear-gradient(color-mix(in oklab, var(--gold) 80%, transparent), transparent);width:2px;height:46vmax;transform:rotate(var(--r)) scaleY(0);position:absolute;top:50%;left:50%}.xp-glow{background:radial-gradient(circle, color-mix(in oklab, var(--paper) 95%, var(--gold)), transparent 35%);border-radius:50%;position:absolute;inset:-40vmax;transform:scale(0)}.xp-spark{z-index:7;opacity:0;pointer-events:none;background:var(--gold);width:6px;height:6px;box-shadow:0 0 8px var(--gold);border-radius:50%;position:absolute;top:60%;left:50%}.xp-letter{z-index:2;transform-origin:50% 100%;border-radius:3px;flex-direction:column;align-items:center;padding-top:6%;display:flex;position:absolute;inset:4% 6%}.xp-letter .frame{border:1px solid color-mix(in oklab, var(--gold) 60%, transparent);border-radius:2px;position:absolute;inset:6px}.xp-letter .frame2{border:1px solid color-mix(in oklab, var(--primary) 35%, transparent);border-radius:2px;position:absolute;inset:10px}.xp-letter>*{position:relative}.xp-letter .w{opacity:0}.is-open .xp-env{animation:1.2s cubic-bezier(.6,0,.4,1) 2.6s forwards xp-settle}@keyframes xp-settle{to{transform:translateY(16svh)scale(.9)}}.is-open .xp-title,.is-open .xp-hint{opacity:0;animation:none;transform:translateY(-10px)}.is-open .xp-seal:before{opacity:0;animation:none}.is-open .xp-seal .w{animation:.25s ease-out forwards xp-press}@keyframes xp-press{50%{transform:scale(.9)}to{opacity:0;transform:scale(1.08)}}.is-open .xp-seal .l{animation:1s cubic-bezier(.5,0,.8,.4) .25s forwards xp-fall-l}.is-open .xp-seal .r{animation:1s cubic-bezier(.5,0,.8,.4) .25s forwards xp-fall-r}@keyframes xp-fall-l{to{opacity:0;transform:translate(-70px,140px)rotate(-60deg)}}@keyframes xp-fall-r{to{opacity:0;transform:translate(70px,160px)rotate(55deg)}}.is-open .xp-burst{animation:1.4s ease-out .2s forwards xp-show}@keyframes xp-show{0%{opacity:0}15%{opacity:1}to{opacity:0}}.is-open .xp-burst i{animation:1.2s cubic-bezier(.2,.8,.2,1) .2s forwards xp-ray}@keyframes xp-ray{to{transform:rotate(var(--r)) scaleY(1)}}.is-open .xp-glow{animation:1.4s ease-out .2s forwards xp-glow}@keyframes xp-glow{40%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.3)}}.is-open .xp-spark{animation:xp-spark 1.3s var(--dl) cubic-bezier(.1,.7,.3,1) forwards}@keyframes xp-spark{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.3)}}.is-open .xp-ribbon.a{animation:.9s cubic-bezier(.6,0,.4,1) .5s forwards xp-rib-a}.is-open .xp-ribbon.b{animation:.9s cubic-bezier(.6,0,.4,1) .5s forwards xp-rib-b}@keyframes xp-rib-a{to{opacity:0;transform:translate(-130%,-50%)rotate(32deg)}}@keyframes xp-rib-b{to{opacity:0;transform:translate(30%,-50%)rotate(-32deg)}}.is-open .xp-flap{animation:1s cubic-bezier(.5,0,.3,1) 1s forwards xp-flap}@keyframes xp-flap{0%{z-index:4;transform:rotateX(0)}49%{z-index:4}50%{z-index:1}to{z-index:1;transform:rotateX(180deg)}}.is-open .xp-letter{animation:1.6s cubic-bezier(.3,0,.1,1) 1.8s forwards xp-rise}@keyframes xp-rise{0%{transform:none}55%{z-index:2;transform:translateY(-75%)rotate(-2deg)}56%{z-index:8}to{z-index:8;transform:translateY(-58%)scale(1.25)rotate(0)}}.is-open .xp-letter .w{animation:xp-word .8s var(--dl) ease-out forwards}@keyframes xp-word{0%{opacity:0;filter:blur(3px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}@media (prefers-reduced-motion:reduce){.xp *,.xp :before{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}