.intro-logo{display:none;position:absolute;left:50%;top:50%;width:clamp(180px,32vw,420px);height:auto;pointer-events:none;z-index:6;transform:translate(-50%,-50%);filter:brightness(0) invert(1)}
.intro-playing .intro-logo{display:block;opacity:0}
.intro-playing h1{opacity:0}
.intro-running .intro-logo{animation:logoFlyThrough 2.75s both}
.intro-running h1{animation:titleArrives .45s 2.5s ease-out both}
@keyframes logoFlyThrough{
0%{opacity:0;transform:translate(-50%,-50%) scale(.025);animation-timing-function:cubic-bezier(.16,1,.3,1)}
27%{opacity:1;transform:translate(-50%,-50%) scale(1.16);animation-timing-function:ease-in-out}
38%{opacity:1;transform:translate(-50%,-50%) scale(.94);animation-timing-function:ease-in-out}
47%{opacity:1;transform:translate(-50%,-50%) scale(1.035);animation-timing-function:ease-in-out}
55%,79%{opacity:1;transform:translate(-50%,-50%) scale(1);animation-timing-function:cubic-bezier(.55,0,.85,.35)}
100%{opacity:0;transform:translate(-50%,-50%) scale(9)}}
@keyframes titleArrives{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.surprise-toggle{display:block;position:relative;width:260px;height:78px;border:2px solid transparent;border-radius:999px;background:linear-gradient(#14132e,#14132e) padding-box,linear-gradient(#fa73ff,#ffa070) border-box;padding:8px;margin:20px auto;cursor:pointer;color:white;-webkit-tap-highlight-color:transparent}
.surprise-toggle > span{display:grid;place-items:center;width:178px;height:58px;padding:0 18px;border-radius:999px;background:linear-gradient(170deg,#ef77fc,#ffa070);font:600 22px/1 var(--font);transition:transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 3px 14px #ef77fc20}
.surprise-toggle[aria-checked=true] > span{transform:translateX(62px)}
.surprise-toggle[aria-checked=true]{box-shadow:0 0 24px #ef77fc25}
.surprise-toggle:focus-visible{outline:3px solid #7bdefc;outline-offset:5px}
.skill-lane[hidden]{display:none!important}
.surprise-quote{flex:0 0 190px;width:190px;min-height:112px;box-sizing:border-box;margin:0 5px 12px;padding:20px 17px;position:relative;direction:rtl;border-radius:27px;background:var(--quote-color);color:#14132e;font-size:20px;font-weight:600;line-height:1.18;text-align:center;display:grid;place-items:center}
.surprise-quote:after{content:"";position:absolute;bottom:-10px;right:27px;width:23px;height:24px;background:var(--quote-color);clip-path:polygon(0 0,100% 0,100% 100%)}
@media(min-width:761px){.surprise-quote{flex-basis:228px;width:228px;min-height:132px;font-size:24px;padding:22px}.surprise-toggle{margin-block:24px}}
@media(prefers-reduced-motion:reduce){.surprise-toggle > span{transition:none}.intro-playing h1{opacity:1;animation:none}.intro-playing .intro-logo{display:none}}

/* A sustained powered-on halo; activation burst is handled by the switch. */
.surprise-toggle{isolation:isolate;overflow:visible;transition:box-shadow .3s}
.surprise-toggle[aria-checked=true]{box-shadow:0 0 12px #ef77fcaa,0 0 32px #ef77fc88,0 0 60px #7bdefc55}
.surprise-toggle:before{content:"";position:absolute;inset:-8px;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(100deg,#ef77fc,#7bdefc,#a8fc77);filter:blur(17px);opacity:0;transition:opacity .3s}
.surprise-toggle[aria-checked=true]:before{opacity:.55;animation:boostHalo 2s ease-in-out infinite alternate}
.boost-particle{position:absolute;left:50%;top:50%;pointer-events:none;width:var(--size);height:var(--size);border-radius:50%;background:var(--spark);box-shadow:0 0 9px var(--spark);z-index:3}
@keyframes boostHalo{to{opacity:.85;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.surprise-toggle:before{animation:none!important;transition:none}.boost-particle{display:none}}