.mbti-scale{--c-base:26px;--c-step:5px}@media (min-width:640px){.mbti-scale{--c-base:40px;--c-step:12px}}.mbti-stage{--_p:var(--mbti-primary,#4f46e5);--_a:var(--mbti-accent,#7c3aed);--_g:var(--mbti-glow,#a78bfa);isolation:isolate;border-radius:var(--radius-xl);color:#f7f7ff;background:radial-gradient(120% 90% at 15% -10%,color-mix(in srgb,var(--_a)55%,transparent)0%,transparent 55%),radial-gradient(90% 80% at 100% 0%,color-mix(in srgb,var(--_p)45%,transparent)0%,transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--_p)92%,#05010f)0%,#0b0a1f 100%);position:relative;overflow:hidden}.mbti-stage:before{content:"";z-index:-1;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--_g)40%,transparent)0%,transparent 45%);animation:12s ease-in-out infinite alternate mbti-bloom;position:absolute;inset:-30%}@keyframes mbti-bloom{0%{opacity:.7;transform:translateY(0)scale(1)}to{opacity:1;transform:translateY(-4%)scale(1.08)}}.mbti-float{animation:6s ease-in-out infinite mbti-float}@keyframes mbti-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.mbti-rise{opacity:0;animation:.6s cubic-bezier(.16,1,.3,1) forwards mbti-rise}@keyframes mbti-rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.mbti-q-enter{animation:.4s cubic-bezier(.16,1,.3,1) mbti-q-enter}@keyframes mbti-q-enter{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}.mbti-bar-fill{width:0;animation:1s cubic-bezier(.16,1,.3,1) .15s forwards mbti-bar}@keyframes mbti-bar{to{width:var(--_w,50%)}}.mbti-pop{animation:.7s cubic-bezier(.22,1.4,.4,1) both mbti-pop}@keyframes mbti-pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media print{.mbti-noprint{display:none!important}.mbti-stage{-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}.mbti-result .rounded-xl,.mbti-result .rounded-2xl{break-inside:avoid}.mbti-rise{opacity:1!important;animation:none!important}}@media (prefers-reduced-motion:reduce){.mbti-stage:before,.mbti-float,.mbti-rise,.mbti-q-enter,.mbti-bar-fill,.mbti-pop{animation:none}.mbti-rise{opacity:1}.mbti-bar-fill{width:var(--_w,50%)}}
