/* ===== STAGE (1920x1080 design space) ===== */
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;--sw:1920;transform-origin:0 0;overflow:hidden;background:#000;--c1:#19e3ff;--c2:#ff2fa0}
#stage.paused *{animation-play-state:paused!important}
#bg{position:absolute;inset:0;width:100%;height:100%;filter:brightness(var(--br))}
#main{position:absolute;inset:60px 80px 130px;display:flex;flex-direction:column;align-items:var(--ai);justify-content:var(--jc)}
#tw{position:relative;max-width:calc(var(--sw)*1px - 160px);filter:drop-shadow(0 calc(var(--sh)*1px) calc(var(--sh)*1.5px) #000b) drop-shadow(0 0 calc(var(--gl)*.5px) var(--c1))}
#tw.hud{padding:50px 90px}
#tw.hud::before,#tw.hud::after{content:"";position:absolute;width:90px;height:90px;border:6px solid var(--c1);animation:hu calc(2s/var(--sp)) ease-in-out infinite alternate}
#tw.hud::before{left:0;top:0;border-right:0;border-bottom:0}#tw.hud::after{right:0;bottom:0;border-left:0;border-top:0}
@keyframes hu{to{opacity:.35;transform:scale(1.1)}}
#tx{font:var(--fw) calc(var(--fz)*1px)/var(--lh) var(--ff);font-style:var(--fi);letter-spacing:calc(var(--ls)*1em);text-align:var(--al);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--c1);-webkit-text-stroke:calc(var(--ow)*1px) var(--oc);paint-order:stroke fill}
#tx .k{display:inline-block;width:.07em;height:.85em;background:var(--c1);vertical-align:-.08em;margin-left:.04em;animation:bk .7s steps(1) infinite}
@keyframes bk{50%{opacity:0}}
#sb{font:600 max(34px,calc(var(--fz)*.24px))/1.25 var(--ff);letter-spacing:.08em;color:#fff;text-align:var(--al);max-width:calc(var(--sw)*1px - 160px);margin-top:26px;text-shadow:0 0 18px var(--c1),0 2px 6px #000}
#badge{position:absolute;left:50px;top:40px;display:flex;align-items:center;gap:14px;background:#000a;border:2px solid #ff2a3a;border-radius:10px;padding:8px 24px 8px 18px;font:900 40px Orbitron,sans-serif;color:#fff;letter-spacing:.1em}
#badge i{width:26px;height:26px;border-radius:50%;background:#ff1f3d;box-shadow:0 0 18px #ff1f3d;animation:bl 1.2s ease-in-out infinite}
@keyframes bl{50%{opacity:.25;transform:scale(.8)}}
#clock{position:absolute;right:50px;top:44px;font:700 46px Orbitron,sans-serif;color:#fff;text-shadow:0 0 16px var(--c1),0 2px 6px #000;font-variant-numeric:tabular-nums}
#tkr{position:absolute;left:0;right:0;bottom:0;height:96px;background:#000b;border-top:3px solid var(--c1);overflow:hidden}
#tks{position:absolute;left:0;top:0;white-space:nowrap;line-height:93px;font:700 44px/93px var(--ff);color:#fff;animation:tk linear infinite}
@keyframes tk{from{transform:translateX(calc(var(--sw)*1px))}to{transform:translateX(-100%)}}
#stage.clean #badge,#stage.clean #clock,#stage.clean #tkr,#stage.clean #sb{display:none}
/* ===== 20 TEXT STYLES ===== */
.s2,.s5,.s7,.s8,.s12,.s17,.s19{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes gs{to{background-position:200% 0}}@keyframes g3{to{background-position:150% 0}}
.s0{color:#fff;text-shadow:0 0 .03em #fff,0 0 calc(var(--gl)*.4px) var(--c1),0 0 calc(var(--gl)*.9px) var(--c1),0 0 calc(var(--gl)*1.8px) var(--c1);animation:fl calc(5s/var(--sp)) infinite}
@keyframes fl{0%,89%,93%,100%{opacity:1}90%{opacity:.55}91%{opacity:1}92%{opacity:.7}}
.s1{text-shadow:.02em .02em var(--c2),.04em .04em var(--c2),.06em .06em var(--c2),.08em .08em #0009,.12em .14em .1em #000c;animation:sw calc(7s/var(--sp)) ease-in-out infinite alternate}
@keyframes sw{from{transform:perspective(1400px) rotateY(calc(-14deg*var(--in))) rotateX(calc(5deg*var(--in)))}to{transform:perspective(1400px) rotateY(calc(14deg*var(--in))) rotateX(calc(-3deg*var(--in)))}}
.s2{background:linear-gradient(0deg,#d10000,#ff6a00 40%,#ffd000 75%,#fff6c8);background-size:100% 220%;animation:fi calc(1.6s/var(--sp)) ease-in-out infinite}
@keyframes fi{0%,100%{background-position:0 0;transform:scale(1)}50%{background-position:0 100%;transform:scale(calc(1 + .02*var(--in)),calc(1 + .05*var(--in))) skewX(calc(1deg*var(--in)))}}
.s3{color:#fff;text-shadow:0 0 .05em #fff,0 0 calc(var(--gl)*.8px) var(--c1),0 0 calc(var(--gl)*2px) var(--c1);animation:zp calc(3s/var(--sp)) infinite}
@keyframes zp{0%,18%,22%,60%,64%,100%{filter:none}19%{filter:brightness(3)}20%{filter:brightness(1)}21%{filter:brightness(4)}61%{filter:brightness(2.5)}62%{filter:brightness(.8)}63%{filter:brightness(3.5)}}
.s4{color:#fff;animation:gl calc(2.4s/var(--sp)) steps(1) infinite}
@keyframes gl{0%,70%,100%{transform:none;text-shadow:-.02em 0 #f0f,.02em 0 #0ff}72%{transform:translate(calc(-14px*var(--in)),0) skewX(calc(-8deg*var(--in)));text-shadow:-.06em 0 #f0f,.06em 0 #0ff}74%{transform:translate(calc(12px*var(--in)),calc(-4px*var(--in)));text-shadow:.05em 0 #f0f,-.05em 0 #0ff}76%{transform:none}90%{transform:translate(calc(6px*var(--in)),0) skewX(calc(5deg*var(--in)));text-shadow:-.04em .01em var(--c1),.04em 0 #0ff}92%{transform:none}}
.s5{background:linear-gradient(100deg,var(--c1),#fff 25%,var(--c2) 50%,#fff 75%,var(--c1));background-size:300% 100%;animation:g3 calc(5s/var(--sp)) linear infinite}
.s6{text-transform:uppercase;text-shadow:.04em .04em 0 var(--c2),-.02em -.02em 0 #0ff9;animation:cy calc(3.4s/var(--sp)) steps(1) infinite}
@keyframes cy{0%,100%{transform:none}50%{transform:skewX(calc(-6deg*var(--in)))}52%{transform:translateX(calc(10px*var(--in)))}54%{transform:none}80%{transform:translate(calc(-8px*var(--in)),2px)}82%{transform:none}}
.s7{background:linear-gradient(110deg,#7a4b00,#e6b422 20%,#fff3b0 35%,#d49a00 50%,#8a5a00 65%,#ffe27a 85%,#7a4b00);background-size:200% 100%;animation:gs calc(4s/var(--sp)) linear infinite}
.s8{background:linear-gradient(90deg,#f33,#fb0,#3f6,#0cf,#85f,#f3c,#f33);background-size:200% 100%;animation:gs calc(4s/var(--sp)) linear infinite}
.s9{text-shadow:0 0 .1em var(--c1)}
.s10{text-shadow:0 0 .08em var(--c2);animation:zo calc(3s/var(--sp)) ease-in-out infinite}
@keyframes zo{50%{transform:scale(calc(1 + .22*var(--in)))}}
.s11{text-shadow:0 .05em 0 var(--c2);animation:bo calc(1.2s/var(--sp)) infinite}
@keyframes bo{0%,100%{transform:none}30%{transform:translateY(calc(-60px*var(--in))) scale(calc(1 - .03*var(--in)),calc(1 + .06*var(--in)))}55%{transform:scale(calc(1 + .06*var(--in)),calc(1 - .08*var(--in)))}70%{transform:translateY(calc(-14px*var(--in)))}}
.s12{background:linear-gradient(90deg,var(--c1),var(--c2),var(--c1));background-size:200% 100%;animation:fl2 calc(5s/var(--sp)) ease-in-out infinite alternate,gs calc(5s/var(--sp)) linear infinite}
@keyframes fl2{from{transform:translateY(calc(-26px*var(--in))) rotate(calc(-1.2deg*var(--in)))}to{transform:translateY(calc(26px*var(--in))) rotate(calc(1.2deg*var(--in)))}}
.s13{text-shadow:.03em .03em 0 var(--c2),.06em .06em .08em #000a;animation:r3 calc(8s/var(--sp)) ease-in-out infinite}
@keyframes r3{0%,60%{transform:perspective(1400px) rotateY(calc(-10deg*var(--in)))}30%{transform:perspective(1400px) rotateY(calc(10deg*var(--in)))}100%{transform:perspective(1400px) rotateY(350deg)}}
.s14{color:#fff;text-shadow:0 0 .1em var(--c1);animation:pr calc(6s/var(--sp)) ease-in-out infinite}
@keyframes pr{0%{filter:blur(18px);opacity:.35;transform:scale(1.15)}18%,86%{filter:blur(0);opacity:1;transform:none}100%{filter:blur(10px);opacity:.5;transform:scale(1.05)}}
.s15{color:#f4f1ff;text-shadow:0 .04em .2em #000,0 0 .3em var(--c1);animation:ci calc(9s/var(--sp)) ease-in-out infinite alternate}
@keyframes ci{from{transform:none;opacity:.82;filter:blur(1px)}to{transform:scale(calc(1 + .07*var(--in)));opacity:1;filter:none}}
.s16{text-shadow:.03em .03em 0 #000;animation:im calc(3s/var(--sp)) infinite}
@keyframes im{0%{transform:scale(calc(1 + .5*var(--in)));opacity:.4}6%{transform:none;opacity:1}8%{transform:translate(calc(-16px*var(--in)),calc(8px*var(--in)))}10%{transform:translate(calc(14px*var(--in)),calc(-10px*var(--in)))}12%{transform:translate(calc(-8px*var(--in)),0)}14%,100%{transform:none}}
.s17{background:linear-gradient(120deg,var(--c1),var(--c2),#fff,var(--c2),var(--c1));background-size:300% 100%;animation:lq calc(6s/var(--sp)) linear infinite}
@keyframes lq{0%{background-position:0 0}50%{transform:scale(calc(1 + .04*var(--in)),calc(1 - .04*var(--in)))}100%{background-position:150% 0}}
.s18{text-shadow:0 0 .12em var(--c1);animation:hv calc(3s/var(--sp)) steps(1) infinite}
@keyframes hv{0%,100%{opacity:1}40%{opacity:.85}42%{opacity:1}70%{opacity:.9}72%{opacity:1}}
.s19{font-style:italic;text-transform:uppercase;background:linear-gradient(180deg,#fff,var(--c1) 45%,var(--c2));animation:ga calc(2.8s/var(--sp)) ease-in-out infinite}
@keyframes ga{0%,100%{transform:skewX(-8deg)}8%{transform:skewX(-8deg) scale(calc(1 + .18*var(--in)))}16%{transform:skewX(-8deg)}50%{transform:skewX(-8deg) scale(calc(1 + .04*var(--in)));filter:brightness(1.4)}}
@media(prefers-reduced-motion:reduce){#tx,#tks,#tw::before,#tw::after,#badge i{animation:none!important}}