/* Elliot Media — styles.css */
html,body{margin:0;height:100%;background:#000;overflow:hidden}
[hidden]{display:none!important}
.if{display:contents}
#loader{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#000;transition:opacity .8s ease,visibility .8s}
#loader.done{opacity:0;visibility:hidden}
.ld-mark rect{stroke:#46e4ff;stroke-dasharray:900;stroke-dashoffset:900;animation:ld-draw 2.4s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(70,228,255,0.6))}
.ld-mark rect:nth-child(even){stroke:#ff5ad2}
@keyframes ld-draw{0%{stroke-dashoffset:900}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-900}}
.ld-label{margin:6px 0 0;font-family:Michroma,system-ui,sans-serif;font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:#9feaff}
.ld-bar{width:220px;height:4px;background:repeating-linear-gradient(90deg,rgba(70,228,255,0.15) 0 8px,transparent 8px 11px)}
.ld-bar span{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s ease;background:repeating-linear-gradient(90deg,#46e4ff 0 8px,transparent 8px 11px);filter:drop-shadow(0 0 4px rgba(70,228,255,0.8))}
.ld-pct{margin:0;font-family:Michroma,system-ui,sans-serif;font-size:9px;letter-spacing:0.24em;color:#7f9cb0}
#loader.gate .ld-bar,#loader.gate .ld-pct{display:none}
.ld-gate{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:8px;animation:ld-gate-in .8s cubic-bezier(.2,.8,.2,1) both}
.ld-gate .eng-box{filter:drop-shadow(0 0 12px rgba(70,228,255,0.45))}
.ld-hint{margin:0;display:flex;align-items:center;gap:8px;font-family:Michroma,system-ui,sans-serif;font-size:9px;letter-spacing:0.26em;text-transform:uppercase;color:#8fb1c4}
@keyframes ld-gate-in{0%{opacity:0;transform:scaleY(0.05)}40%{opacity:1;transform:scaleY(0.05)}55%{opacity:.4}70%{opacity:1}100%{transform:none}}
@media (prefers-reduced-motion: reduce){.ld-mark rect{animation:none;stroke-dashoffset:0}}
:root{--vh:100vh}
@supports (height:100dvh){:root{--vh:100dvh}}
.replay{opacity:0;animation:rp-in 1.2s ease 3.2s forwards}
.replay:hover{background:rgba(255,255,255,0.12)}
.replay:focus-visible{outline:2px solid #c99bff;outline-offset:3px}
.hot:focus{outline:none}
.hot:focus-visible{outline:1px dashed rgba(160,220,255,0.6);outline-offset:2px}
.hud{transform:perspective(1400px) translateY(-50%) rotateY(-8deg);transform-origin:100% 50%;background:radial-gradient(130% 100% at 0% 50%,rgba(14,52,82,0.62),rgba(6,16,34,0.5) 55%,rgba(6,12,30,0.32) 100%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hud::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(120,240,255,0.035) 0 1px,transparent 1px 3px)}
.hud::after{content:"";position:absolute;inset:-20%;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(160,240,255,0.07) 50%,transparent 60%);animation:hud-glare 7s ease-in-out infinite}
.hud-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hud-frame .ln{fill:none;stroke:#46e4ff;stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 3px rgba(70,228,255,0.85))}
.hud-frame .ln.mg{stroke:#ff5ad2;stroke-width:2;filter:drop-shadow(0 0 4px rgba(255,90,210,0.85))}
.hud-frame .ln.dim{stroke:rgba(70,228,255,0.3)}
.hud-ruler{position:absolute;left:16px;top:56px;bottom:56px;width:9px;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(70,228,255,0.55) 0 1px,transparent 1px 9px);-webkit-mask:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);mask:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent)}
.hud-ruler::after{content:"";position:absolute;left:-4px;width:17px;height:2px;top:0;background:#ff5ad2;box-shadow:0 0 6px #ff5ad2;animation:hud-ruler 3.4s ease-in-out infinite alternate}
.hud-micro{position:absolute;right:12px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:Michroma,system-ui,sans-serif;font-size:8px;letter-spacing:0.32em;text-transform:uppercase;color:rgba(70,228,255,0.5);pointer-events:none;white-space:nowrap}
.hud-dot{width:7px;height:7px;border-radius:50%;background:#5dff9e;box-shadow:0 0 8px #5dff9e;flex:none;animation:hud-blink 1.6s steps(2,jump-none) infinite}
.hud-seg{display:flex;gap:3px;margin-left:auto}.hud-seg i{width:10px;height:4px;background:rgba(70,228,255,0.25)}
.hud-seg i:nth-child(-n+3){background:#46e4ff;box-shadow:0 0 5px rgba(70,228,255,0.8)}.hud-seg i:nth-child(3){animation:hud-blink 1.1s steps(2,jump-none) infinite}
.holo{text-shadow:0 0 14px rgba(70,228,255,0.55),0 0 2px rgba(255,255,255,0.7)}
.hud-rule{height:2px;margin:16px 0 16px;background:linear-gradient(90deg,#46e4ff 0 22%,transparent 22% 24%,rgba(70,228,255,0.35) 24% 70%,transparent 70% 72%,#ff5ad2 72% 80%,transparent 80%)}
.hud-lab{font-family:Michroma,system-ui,sans-serif;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:#9fc3d4}
.hud-val{font-family:Michroma,system-ui,sans-serif;font-size:15px;color:#7fefff;text-align:right;text-shadow:0 0 8px rgba(70,228,255,0.5)}
.gauge{display:block;height:8px;background:repeating-linear-gradient(90deg,rgba(70,228,255,0.14) 0 7px,transparent 7px 10px)}
.gauge > span{display:block;height:100%;background:repeating-linear-gradient(90deg,#46e4ff 0 7px,transparent 7px 10px);filter:drop-shadow(0 0 3px rgba(70,228,255,0.7))}
.gauge.vi{background:repeating-linear-gradient(90deg,rgba(141,92,255,0.18) 0 7px,transparent 7px 10px)}.gauge.vi > span{background:repeating-linear-gradient(90deg,#a982ff 0 7px,transparent 7px 10px);filter:drop-shadow(0 0 3px rgba(141,92,255,0.8))}
.gauge.mg{background:repeating-linear-gradient(90deg,rgba(255,90,210,0.16) 0 7px,transparent 7px 10px)}.gauge.mg > span{background:repeating-linear-gradient(90deg,#ff5ad2 0 7px,transparent 7px 10px);filter:drop-shadow(0 0 3px rgba(255,90,210,0.8))}
.mod{position:relative;padding-left:18px}.mod::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;border-top:2px solid #46e4ff;border-right:2px solid #46e4ff;transform:translateY(-50%) rotate(45deg) scale(0.7)}
.mod:nth-child(2)::before,.mod:nth-child(3)::before{border-color:#ff5ad2}
.hud-back{position:relative;transition:color .25s,letter-spacing .3s,text-shadow .25s}
.hud-back svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hud-back::before{content:"";position:absolute;left:10px;right:10px;bottom:7px;height:1px;background:linear-gradient(90deg,transparent,#46e4ff 30%,#ff5ad2 70%,transparent);transform:scaleX(0.25);opacity:0.55;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.hud-back::after{content:"";position:absolute;top:9px;bottom:9px;left:6px;right:6px;border-left:1px solid #46e4ff;border-right:1px solid #ff5ad2;opacity:0;transform:scaleX(1.12);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.hud-back:hover,.hud-back:focus-visible{color:#ffffff!important;letter-spacing:0.26em!important;text-shadow:0 0 10px rgba(70,228,255,0.9),0 0 22px rgba(255,90,210,0.45)}
.hud-back:hover svg,.hud-back:focus-visible svg{transform:translateX(-5px)}
.hud-back:hover::before,.hud-back:focus-visible::before{transform:scaleX(1);opacity:1}
.hud-back:hover::after,.hud-back:focus-visible::after{opacity:1;transform:scaleX(1)}
.hud-x:hover{color:#ff5ad2!important}
.hud-x:focus-visible,.hud-back:focus-visible{outline:2px solid #ff5ad2;outline-offset:3px}
.hud.enter{animation:hud-on .75s linear 1.4s both}
.hud.enter .ln{animation:hud-draw .9s cubic-bezier(.3,.7,.2,1) 1.45s both}
.hud.enter .gauge > span{animation:hud-fill 1.1s cubic-bezier(.2,.8,.2,1) 2.6s both}
.hud .reveal{animation:hud-rev .5s ease both;animation-delay:calc(2.05s + var(--i) * 0.08s)}
.hud.leave{animation:hud-off .5s ease-in both}
.hud.leave .reveal{animation:hud-fade .2s ease both;animation-delay:0s}
@keyframes hud-on{0%{opacity:0;filter:brightness(3)}8%{opacity:.85}12%{opacity:.1}20%{opacity:.95}24%{opacity:.25}36%{opacity:1;filter:brightness(1.8)}100%{opacity:1;filter:none}}
@keyframes hud-off{0%{opacity:1;transform:perspective(1400px) translateY(-50%) rotateY(-8deg)}25%{opacity:.35}35%{opacity:.9;transform:perspective(1400px) translateY(-50%) rotateY(-8deg) scaleY(1)}100%{opacity:0;transform:perspective(1400px) translateY(-50%) rotateY(-8deg) scaleY(0.02);filter:brightness(2.5)}}
@keyframes hud-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hud-fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hud-rev{from{opacity:0;transform:translateX(16px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes hud-fade{from{opacity:1}to{opacity:0}}
@keyframes hud-ruler{from{top:0}to{top:calc(100% - 2px)}}
@keyframes hud-blink{50%{opacity:.25}}
@keyframes hud-glare{0%,60%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
@media (max-width: 720px){.hud{top:auto!important;bottom:12px;transform:none;padding:24px 22px 20px 34px!important}.hud-micro{display:none}.hud-ruler{left:10px}@keyframes hud-off{to{opacity:0}}}
@media (prefers-reduced-motion: reduce){.hud.enter,.hud.leave,.hud .reveal,.hud.enter .ln,.hud.enter .gauge > span,.hud::after,.hud-ruler::after,.hud-dot,.hud-seg i{animation:none}}
.eng-wrap{filter:drop-shadow(0 0 10px rgba(70,228,255,0.35));animation:eng-breathe 3.2s ease-in-out 1.4s infinite}
.engage{clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%)}
.engage::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#46e4ff,#8d5cff,#ff5ad2,#46e4ff);background-size:300% 100%;animation:eng-flow 5s linear infinite}
.engage::after{content:"";position:absolute;inset:0;clip-path:polygon(17px 1px,calc(100% - 17px) 1px,calc(100% - 1.5px) 50%,calc(100% - 17px) calc(100% - 1px),17px calc(100% - 1px),1.5px 50%);background:rgba(4,10,26,0.88);transition:background .3s}
.eng-txt{position:relative;z-index:2;transition:letter-spacing .35s cubic-bezier(.2,.8,.2,1),text-shadow .3s,color .3s}
.eng-shine{position:absolute;z-index:1;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,transparent,rgba(160,240,255,0.35),transparent);transform:skewX(-20deg);opacity:0}
.eng-c{position:absolute;width:12px;height:12px;border-color:#46e4ff;border-style:solid;border-width:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s;pointer-events:none}
.eng-c.tl{left:-12px;top:-8px;border-left-width:1.5px;border-top-width:1.5px}.eng-c.tr{right:-12px;top:-8px;border-right-width:1.5px;border-top-width:1.5px;border-color:#ff5ad2}
.eng-c.bl{left:-12px;bottom:-8px;border-left-width:1.5px;border-bottom-width:1.5px;border-color:#ff5ad2}.eng-c.br{right:-12px;bottom:-8px;border-right-width:1.5px;border-bottom-width:1.5px}
.engage:hover::after,.engage:focus-visible::after{background:rgba(20,50,80,0.82)}
.engage:hover .eng-txt,.engage:focus-visible .eng-txt{color:#fff;letter-spacing:0.62em;text-shadow:-2px 0 rgba(255,90,210,0.8),2px 0 rgba(70,228,255,0.8),0 0 14px rgba(70,228,255,0.9)}
.engage:hover .eng-shine,.engage:focus-visible .eng-shine{animation:eng-shine .9s ease}
.engage:focus{outline:none}
.eng-box:hover .eng-c.tl,.engage:focus-visible ~ .eng-c.tl{transform:translate(-6px,-6px)}.eng-box:hover .eng-c.tr,.engage:focus-visible ~ .eng-c.tr{transform:translate(6px,-6px)}
.eng-box:hover .eng-c.bl,.engage:focus-visible ~ .eng-c.bl{transform:translate(-6px,6px)}.eng-box:hover .eng-c.br,.engage:focus-visible ~ .eng-c.br{transform:translate(6px,6px)}
.eng-wrap.in .eng-box{animation:eng-in .9s cubic-bezier(.2,.8,.2,1) both}
.eng-wrap.in .eng-hint{animation:eng-fadein .8s ease .9s both}
.eng-wrap.out{animation:eng-out .6s ease-in both}
@keyframes eng-in{0%{opacity:0;transform:scaleX(0.02) scaleY(0.06)}35%{opacity:1;transform:scaleX(1) scaleY(0.06)}45%{opacity:.3}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes eng-out{0%{opacity:1;transform:translateX(-50%);filter:brightness(1)}20%{opacity:1;transform:translateX(-50%);filter:brightness(2.6) drop-shadow(0 0 24px #46e4ff)}100%{opacity:0;transform:translateX(-50%) scaleX(1.6) scaleY(0.02);filter:brightness(3)}}
@keyframes eng-fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes eng-flow{to{background-position:300% 0}}
@keyframes eng-shine{from{left:-40%;opacity:1}to{left:110%;opacity:1}}
@keyframes eng-breathe{0%,100%{filter:drop-shadow(0 0 8px rgba(70,228,255,0.3))}50%{filter:drop-shadow(0 0 18px rgba(141,92,255,0.6))}}
.snd:hover,.snd:focus-visible{background:rgba(70,228,255,0.12)!important;border-color:rgba(70,228,255,0.7)!important;color:#46e4ff!important}
.snd .eq i{background:#7f8896;box-shadow:none;transition:background .25s,box-shadow .25s}
.snd:hover .eq i,.snd:focus-visible .eq i{background:#46e4ff;box-shadow:0 0 4px rgba(70,228,255,0.8)}
.snd:hover .eq i:nth-child(3),.snd:focus-visible .eq i:nth-child(3){background:#ff5ad2}
.snd:focus-visible{outline:2px solid #ff5ad2;outline-offset:3px}
.snd.mus.playing svg.mus-on{animation:mus-bob 2.4s ease-in-out infinite}
@keyframes mus-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.eq{display:flex;align-items:flex-end;gap:2px;height:16px}.eq i{display:block;width:3px;animation:eq 1s ease-in-out infinite alternate}
.eq i:nth-child(1){height:40%;animation-delay:-.2s}.eq i:nth-child(2){height:90%;animation-delay:-.6s}.eq i:nth-child(3){height:60%;animation-delay:-.4s}.eq i:nth-child(4){height:75%;animation-delay:-.8s}
@keyframes eq{from{transform:scaleY(0.3)}to{transform:scaleY(1)}}
.eq i{transform-origin:bottom}
@media (prefers-reduced-motion: reduce){.eng-wrap,.eng-wrap.in .eng-box,.eng-wrap.in .eng-hint,.eng-wrap.out,.engage::before,.eq i{animation:none}}
.brand{animation:brand-in 1.1s cubic-bezier(.2,.8,.2,1) .25s both}
.brand-mark{position:relative;overflow:visible;transition:transform .3s}
.brand-mark > g:first-of-type rect{fill:url(#bm-lin)}
.bm-grey{fill:#c6cdd7;opacity:0.9;animation:bm-grey 10s cubic-bezier(.45,0,.25,1) 1s infinite;transition:opacity .35s}
.brand-glow{position:absolute;left:6px;top:50%;width:56px;height:40px;margin-top:-20px;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(70,228,255,0.45),rgba(141,92,255,0.18) 60%,transparent);opacity:0;filter:blur(6px);animation:brand-glow 10s cubic-bezier(.45,0,.25,1) 1s infinite;transition:opacity .35s}
.bm-shine{transform:skewX(-20deg) translateX(0);animation:brand-shine 10s cubic-bezier(.45,0,.25,1) 1s infinite}
.brand-ping{position:absolute;left:34px;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(70,228,255,0.75);border-radius:50%;opacity:0;pointer-events:none;animation:brand-ping 10s cubic-bezier(.2,.6,.3,1) 1s infinite}
.brand-ping.p2{animation-delay:1.45s;border-color:rgba(141,92,255,0.7)}.brand-ping.p3{animation-delay:1.9s;border-color:rgba(255,90,210,0.65)}
.brand-name{color:#b4bcc8;animation:brand-name 10s cubic-bezier(.45,0,.25,1) 1s infinite;transition:color .3s,letter-spacing .35s,text-shadow .3s}
@keyframes bm-grey{0%,58%{opacity:0.9}68%,84%{opacity:0}96%,100%{opacity:0.9}}
@keyframes brand-glow{0%,58%{opacity:0}68%,82%{opacity:1}96%,100%{opacity:0}}
@keyframes brand-shine{0%,64%{transform:skewX(-20deg) translateX(0)}80%,100%{transform:skewX(-20deg) translateX(900px)}}
@keyframes brand-ping{0%,62%{opacity:0;transform:scale(0.55)}63%{opacity:0.8;transform:scale(0.6)}80%,100%{opacity:0;transform:scale(2.3)}}
@keyframes brand-name{0%,58%{color:#b4bcc8;text-shadow:0 0 0 rgba(70,228,255,0)}68%,82%{color:#eafcff;text-shadow:0 0 10px rgba(70,228,255,0.55)}96%,100%{color:#b4bcc8;text-shadow:0 0 0 rgba(70,228,255,0)}}
.brand:hover .bm-grey,.brand:focus-visible .bm-grey{animation:none;opacity:0}
.brand:hover .brand-glow,.brand:focus-visible .brand-glow{animation:none;opacity:1}
.brand:hover .brand-mark,.brand:focus-visible .brand-mark{transform:scale(1.04)}
.brand:hover .brand-name,.brand:focus-visible .brand-name{animation:none;color:#ffffff;letter-spacing:0.38em;text-shadow:-1px 0 rgba(255,90,210,0.7),1px 0 rgba(70,228,255,0.7)}
.brand:focus{outline:none}.brand:focus-visible{outline:1px dashed rgba(160,220,255,0.6);outline-offset:2px}
@keyframes brand-in{0%{opacity:0;transform:translateX(-16px);filter:blur(4px)}40%{opacity:1}48%{opacity:.3}56%{opacity:1}100%{opacity:1;transform:none;filter:none}}
@media (max-width: 560px){.brand-name{font-size:11px;letter-spacing:0.24em}}
@media (prefers-reduced-motion: reduce){.brand,.bm-grey,.brand-glow,.bm-shine,.brand-ping,.brand-name{animation:none}}
.pf{transform:translateX(-50%)}
.pf-card{position:relative;display:flex;flex-direction:column;padding:12px 12px 16px;background:linear-gradient(170deg,rgba(12,36,64,0.8),rgba(8,10,30,0.74));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s}
.pf-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(120,240,255,0.035) 0 1px,transparent 1px 3px);z-index:2}
.pf-card::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(170,240,255,0.10),transparent);transform:skewX(-18deg);z-index:3}
.pf-card:hover{transform:translateY(-8px);background:linear-gradient(170deg,rgba(16,48,82,0.86),rgba(10,14,38,0.8))}
.pf-card:hover::after{animation:pf-sweep .9s ease}
.pf-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.pf-frame .ln{fill:none;stroke:rgba(70,228,255,0.75);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke .3s;filter:drop-shadow(0 0 3px rgba(70,228,255,0.7))}
.pf-frame .ln.mg{stroke:#ff5ad2;stroke-width:2;filter:drop-shadow(0 0 4px rgba(255,90,210,0.8))}
.pf-card:hover .pf-frame .ln{stroke:#9ff4ff}
.pf-thumb{position:relative;height:clamp(110px,17vh,170px);overflow:hidden;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.pf-thumb > *{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pf-idx{position:absolute;left:10px;top:6px;z-index:3;font-family:Michroma,system-ui,sans-serif;font-size:26px;color:transparent;-webkit-text-stroke:1px rgba(220,250,255,0.75);letter-spacing:0.04em}
.pf-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:14px 6px 0;flex:1}
.pf-body h3{margin:0;font-family:Michroma,system-ui,sans-serif;font-weight:400;font-size:18px;letter-spacing:0.08em;color:#ffffff;text-shadow:0 0 12px rgba(70,228,255,0.5)}
.pf-body p{margin:0;color:#a9c6d6;font-size:14px}
.pf-visit svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pf-visit:hover,.pf-visit:focus-visible{color:#fff;letter-spacing:0.26em;text-shadow:0 0 10px rgba(70,228,255,0.9),0 0 22px rgba(255,90,210,0.45)}
.pf-visit:hover::after,.pf-visit:focus-visible::after{transform:scaleX(1);opacity:1}
.pf-visit:hover svg,.pf-visit:focus-visible svg{transform:translate(3px,-3px)}
.pf-visit:focus{outline:none}.pf-visit:focus-visible{outline:1px dashed rgba(255,90,210,0.7);outline-offset:4px}
.pf.enter .pf-head{animation:hud-rev .5s ease 1.3s backwards}
.pf.enter .pf-frame .ln{animation:hud-draw .9s cubic-bezier(.3,.7,.2,1) backwards;animation-delay:calc(1.9s + var(--c) * 0.17s)}
.pf.leave .pf-head{animation:hud-fade .3s ease both}
@keyframes pf-card-in{0%{opacity:0;transform:translateY(40px) scaleY(0.03);filter:brightness(3)}30%{opacity:1;transform:translateY(0) scaleY(0.03)}40%{opacity:.35}52%{opacity:1}100%{opacity:1;transform:none;filter:none}}
@keyframes pf-card-out{0%{opacity:1;transform:none}30%{opacity:.5}40%{opacity:1;filter:brightness(1.8)}100%{opacity:0;transform:scaleY(0.02);filter:brightness(3)}}
@keyframes pf-sweep{from{left:-60%}to{left:130%}}
.pf-track{transform:translateX(calc(var(--off) * -1 * (100% + 22px) / 3));transition:transform .75s cubic-bezier(.65,0,.25,1)}
.pf-card{flex:0 0 calc((100% - 44px) / 3);min-width:0;max-width:calc((100% - 44px) / 3);box-sizing:border-box}
.pf-track > *{box-sizing:border-box}
.pf-track.sl-l .pf-card,.pf-track.sl-r .pf-card{animation:pf-shift .75s ease}
.pf-track.sl-r .pf-card{--sk:-3deg}.pf-track.sl-l .pf-card{--sk:3deg}
@keyframes pf-shift{0%{filter:none}35%{transform:skewX(var(--sk)) scale(0.97);filter:brightness(1.35) saturate(1.3)}60%{filter:brightness(1.1)}100%{transform:none;filter:none}}
.pf-wipe{position:absolute;top:0;bottom:0;width:22%;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(70,228,255,0.18),rgba(255,90,210,0.12),transparent);mix-blend-mode:screen}
.pf-wipe.sl-r{animation:pf-wipe-r .75s ease}.pf-wipe.sl-l{animation:pf-wipe-l .75s ease}
@keyframes pf-wipe-r{0%{left:100%;opacity:1}100%{left:-25%;opacity:0.2}}
@keyframes pf-wipe-l{0%{left:-25%;opacity:1}100%{left:100%;opacity:0.2}}
.pf-nav{position:relative;transition:color .25s,transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s,filter .3s;filter:drop-shadow(0 0 4px rgba(70,228,255,0.6))}
.pf-nav::before{content:"";position:absolute;inset:8px 6px;border:1px solid rgba(70,228,255,0.25);clip-path:polygon(0 0,100% 12%,100% 88%,0 100%);transition:border-color .3s,background .3s}
.pf-nav.next::before{clip-path:polygon(0 12%,100% 0,100% 100%,0 88%)}
.pf-nav:hover{color:#ffffff!important;filter:drop-shadow(0 0 10px rgba(70,228,255,0.95)) drop-shadow(0 0 18px rgba(255,90,210,0.5))}
.pf-nav:hover::before{border-color:rgba(70,228,255,0.7);background:rgba(70,228,255,0.08)}
.pf-nav.prev:hover{transform:translateX(-4px)}.pf-nav.next:hover{transform:translateX(4px)}
.pf-nav:active{transform:scale(0.92)!important}
.pf-nav.off{opacity:0.25;filter:none;cursor:default!important}.pf-nav.off:hover{transform:none;color:#46e4ff!important;filter:none}
.pf-nav:focus{outline:none}.pf-nav:focus-visible{outline:1px dashed rgba(255,90,210,0.7);outline-offset:2px}
.pf-dots{display:flex;gap:5px}.pf-dots i{display:block;width:16px;height:3px;background:rgba(70,228,255,0.2);transition:background .4s,box-shadow .4s,width .4s}
.pf-dots i.on{background:#46e4ff;box-shadow:0 0 6px rgba(70,228,255,0.8);width:24px}
.pf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pf-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.18) 0 1px,transparent 1px 3px)}
.pf-thumb .s1,.pf-thumb .s2{position:absolute;display:block}
.pf-circ{display:none;position:absolute;inset:0;width:100%;height:100%}
.pf-thumb.has-img .s1,.pf-thumb.has-img .s2,.pf-thumb.has-img .pf-circ{display:none!important}
.pf-card:hover .pf-thumb .s1,.pf-card:hover .pf-thumb .s2,.pf-card:hover .pf-img,.pf-card:hover .pf-circ{transform:scale(1.06)}
.pf-thumb .s1,.pf-thumb .s2,.pf-circ{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.a1{background:linear-gradient(180deg,#0f0326 0%,#3a0a55 52%,#12031f 52.5%,#12031f 100%)}
.a1 .s1{left:50%;top:14%;width:44%;aspect-ratio:1;margin-left:-22%;border-radius:50%;background:linear-gradient(180deg,#ffd36b,#ff5ad2 70%);-webkit-mask:linear-gradient(180deg,#000 0 52%,transparent 52% 56%,#000 56% 62%,transparent 62% 66%,#000 66% 71%,transparent 71% 75%,#000 75% 79%,transparent 79%);mask:linear-gradient(180deg,#000 0 52%,transparent 52% 56%,#000 56% 62%,transparent 62% 66%,#000 66% 71%,transparent 71% 75%,#000 75% 79%,transparent 79%);filter:drop-shadow(0 0 18px rgba(255,90,210,0.7))}
.a1 .s2{left:-50%;right:-50%;bottom:-10%;height:62%;transform-origin:50% 0;transform:perspective(160px) rotateX(58deg);background:linear-gradient(transparent 0 calc(100% - 1px),rgba(255,90,210,0.9) 0) 0 0/100% 16px,linear-gradient(90deg,transparent 0 calc(100% - 1px),rgba(70,228,255,0.8) 0) 0 0/28px 100%;animation:a1-run 1.4s linear infinite}
.pf-card:hover .a1 .s2{transform:perspective(160px) rotateX(58deg) scale(1.06)}
@keyframes a1-run{to{background-position:0 16px,0 0}}
.a2{background:radial-gradient(120% 90% at 30% 20%,#06261c,#020a08 70%)}
.a2::before{content:"> boot night_ops.sys\A> signal lock ......... ok\A> streams: 04 // latency 12ms\A> render city.grid ████████▒▒";white-space:pre;position:absolute;left:14px;top:42px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;line-height:16px;color:#5dff9e;text-shadow:0 0 6px rgba(93,255,158,0.6);animation:a2-type 2.4s steps(4,end) 2.2s both}
.a2 .s1{left:14px;top:108px;width:7px;height:11px;background:#5dff9e;animation:hud-blink 1s steps(2,jump-none) infinite}
@keyframes a2-type{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.a3{background:#061a36;background-image:repeating-linear-gradient(0deg,rgba(80,160,255,0.16) 0 1px,transparent 1px 16px),repeating-linear-gradient(90deg,rgba(80,160,255,0.16) 0 1px,transparent 1px 16px)}
.a3 .pf-circ{display:block}
.pf-circ .tr{fill:none;stroke:#46a8ff;stroke-width:1.6;stroke-dasharray:6 6;animation:a3-flow 1.6s linear infinite;filter:drop-shadow(0 0 3px rgba(70,168,255,0.9))}
.pf-circ .chip{fill:rgba(70,228,255,0.12);stroke:#46e4ff;stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(70,228,255,0.8))}
.pf-circ .nd{fill:#ff5ad2;filter:drop-shadow(0 0 4px #ff5ad2)}
@keyframes a3-flow{to{stroke-dashoffset:-24}}
.a4{background:radial-gradient(circle at 50% 62%,#073029,#020b0a 72%)}
.a4 .s1{left:50%;top:62%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:repeating-radial-gradient(circle,rgba(93,255,200,0.28) 0 1px,transparent 1px 22px),linear-gradient(90deg,transparent calc(50% - 0.5px),rgba(93,255,200,0.3) 0 calc(50% + 0.5px),transparent 0),linear-gradient(0deg,transparent calc(50% - 0.5px),rgba(93,255,200,0.3) 0 calc(50% + 0.5px),transparent 0)}
.a4 .s2{left:50%;top:62%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:conic-gradient(from 0deg,rgba(93,255,200,0.5),rgba(93,255,200,0) 70deg,transparent 360deg);animation:a4-spin 3.2s linear infinite}
.a4::before{content:"";position:absolute;left:62%;top:40%;width:6px;height:6px;border-radius:50%;background:#ff5ad2;box-shadow:0 0 8px #ff5ad2,-90px 30px 0 -1px #5dff9e,40px 34px 0 -1px #5dff9e;animation:hud-blink 1.6s steps(2,jump-none) infinite;z-index:1}
@keyframes a4-spin{to{rotate:360deg}}
.a5{background:linear-gradient(180deg,#14052a,#2a0a40)}
.a5 .s1{left:6%;right:6%;bottom:16%;height:58%;background:repeating-linear-gradient(90deg,#ff5ad2 0 5px,transparent 5px 10px);filter:drop-shadow(0 0 6px rgba(255,90,210,0.7));clip-path:polygon(0 100%,0 62%,8% 40%,16% 70%,24% 30%,32% 55%,40% 20%,48% 60%,56% 35%,64% 75%,72% 25%,80% 50%,88% 38%,96% 66%,100% 45%,100% 100%);animation:a5-wave 1.4s ease-in-out infinite alternate}
.a5 .s2{left:6%;right:6%;bottom:16%;height:1px;background:linear-gradient(90deg,transparent,#46e4ff,transparent);box-shadow:0 0 8px #46e4ff}
@keyframes a5-wave{from{clip-path:polygon(0 100%,0 62%,8% 40%,16% 70%,24% 30%,32% 55%,40% 20%,48% 60%,56% 35%,64% 75%,72% 25%,80% 50%,88% 38%,96% 66%,100% 45%,100% 100%)}to{clip-path:polygon(0 100%,0 40%,8% 70%,16% 35%,24% 60%,32% 25%,40% 58%,48% 30%,56% 72%,64% 28%,72% 62%,80% 30%,88% 64%,96% 36%,100% 70%,100% 100%)}}
.a6{background:#04030f;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#cfe9ff,transparent),radial-gradient(1px 1px at 85% 70%,#fff,transparent),radial-gradient(1px 1px at 35% 80%,#ffd6f2,transparent),radial-gradient(1px 1px at 55% 50%,#fff,transparent)}
.a6 .s1{left:50%;top:55%;width:34%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 35% 32%,#b08cff,#4a22a8 45%,#160a3a 75%);box-shadow:0 0 30px rgba(141,92,255,0.6)}
.a6 .s2{left:50%;top:55%;width:78%;height:20%;translate:-50% -50%;rotate:-14deg;border-radius:50%;border:2px solid rgba(255,170,230,0.75);box-shadow:0 0 10px rgba(255,90,210,0.6);-webkit-mask:linear-gradient(180deg,transparent 0 46%,#000 46%);mask:linear-gradient(180deg,transparent 0 46%,#000 46%);animation:a6-glint 4s ease-in-out infinite}
@keyframes a6-glint{50%{border-color:rgba(160,240,255,0.9);box-shadow:0 0 14px rgba(70,228,255,0.8)}}
.pf-visit{position:relative;align-self:flex-end;margin-top:auto;padding-top:8px;min-height:44px;display:inline-flex;align-items:center;gap:8px;color:#bff6ff;text-decoration:none;font-family:Michroma,system-ui,sans-serif;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;transition:color .25s,letter-spacing .3s,text-shadow .25s}
.pf-visit::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:linear-gradient(270deg,#46e4ff,#ff5ad2 70%,transparent);transform:scaleX(0.3);transform-origin:100% 50%;opacity:.6;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.pf.enter .pf-card{animation:pf-card-in .85s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(1.55s + var(--c) * 0.17s)}
.pf.enter .pf-body{animation:hud-rev .5s ease backwards;animation-delay:calc(2.1s + var(--c) * 0.17s)}
.pf.enter .pf-nav,.pf.enter .pf-foot{animation:hud-rev .5s ease 2.3s backwards}
.pf.leave .pf-card{animation:pf-card-out .45s ease-in both;animation-delay:calc(var(--c) * 0.07s)}
.pf.leave .pf-nav,.pf.leave .pf-foot{animation:hud-fade .25s ease both}
@media (max-width: 640px){.pf-track{transform:translateX(calc(var(--off) * -1 * (100% + 22px)))}.pf-card{flex-basis:100%;max-width:100%}.pf-head{margin:0 0 12px!important}.pf-row{grid-template-columns:36px minmax(0,1fr) 36px!important;gap:6px!important}.pf-nav{width:36px!important}.pf-thumb{height:120px}}
@media (prefers-reduced-motion: reduce){.pf-track{transition:none}.pf.enter .pf-head,.pf.enter .pf-card,.pf.enter .pf-frame .ln,.pf.enter .pf-body,.pf.enter .pf-nav,.pf.enter .pf-foot,.pf.leave .pf-head,.pf.leave .pf-card,.pf-track .pf-card,.pf-wipe,.a1 .s2,.a2::before,.a2 .s1,.pf-circ .tr,.a4 .s2,.a5 .s1,.a6 .s2,.pf-card:hover::after{animation:none!important}}
.hud-text{max-height:min(46vh,420px);overflow-y:auto;scrollbar-width:none;padding-right:4px;-webkit-mask:linear-gradient(180deg,#000 calc(100% - 28px),transparent);mask:linear-gradient(180deg,#000 calc(100% - 28px),transparent)}
.hud-text::-webkit-scrollbar{display:none}
.hud-text p:nth-child(even){color:#a9c6d6}
.hud.hud-l{transform:perspective(1400px) translateY(-50%) rotateY(8deg);transform-origin:100% 50%;background:radial-gradient(130% 100% at 100% 50%,rgba(14,52,82,0.62),rgba(6,16,34,0.52) 55%,rgba(6,12,30,0.36) 100%)}
.hud.hud-l.leave{animation:hud-off-l .5s ease-in both}
.hud.hud-l{scrollbar-width:none}.hud.hud-l::-webkit-scrollbar{display:none}
@keyframes hud-off-l{0%{opacity:1;transform:perspective(1400px) translateY(-50%) rotateY(8deg)}25%{opacity:.35}35%{opacity:.9;transform:perspective(1400px) translateY(-50%) rotateY(8deg) scaleY(1)}100%{opacity:0;transform:perspective(1400px) translateY(-50%) rotateY(8deg) scaleY(0.02);filter:brightness(2.5)}}
.ct-info li{display:grid;grid-template-columns:18px 78px minmax(0,1fr);align-items:center;gap:10px;color:#46e4ff;min-height:30px}
.ct-k{font-family:Michroma,system-ui,sans-serif;font-size:9px;letter-spacing:0.24em;text-transform:uppercase;color:#7f9cb0}
.ct-v{color:#eafcff;font-size:15px;text-decoration:none;overflow-wrap:anywhere;transition:color .25s,text-shadow .25s}
a.ct-v{display:inline-flex;align-items:center;min-height:30px;width:max-content;max-width:100%;background:linear-gradient(90deg,#46e4ff,#ff5ad2) 0 100%/0% 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.8,.2,1),color .25s,text-shadow .25s}
a.ct-v:hover,a.ct-v:focus-visible{color:#ffffff;text-shadow:0 0 10px rgba(70,228,255,0.8);background-size:100% 1px;outline:none}
.fld{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.fld label{font-family:Michroma,system-ui,sans-serif;font-size:9px;letter-spacing:0.26em;text-transform:uppercase;color:#7fefff}
.in-wrap{position:relative}
.in-wrap::before,.in-wrap::after{content:"";position:absolute;top:-3px;width:8px;height:8px;border-top:1px solid #46e4ff;opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.in-wrap::before{left:-3px;border-left:1px solid #46e4ff;transform:translate(4px,4px)}.in-wrap::after{right:-3px;border-right:1px solid #ff5ad2;border-top-color:#ff5ad2;transform:translate(-4px,4px)}
.in-wrap:focus-within::before,.in-wrap:focus-within::after{opacity:1;transform:none}
.fld input,.fld textarea{display:block;width:100%;box-sizing:border-box;background:rgba(70,228,255,0.05);border:0;border-bottom:1px solid rgba(70,228,255,0.35);color:#eafcff;font-family:'Exo 2',system-ui,sans-serif;font-size:15px;line-height:1.4;padding:8px 10px;outline:none;resize:none;border-radius:0;transition:background .3s,border-color .3s;caret-color:#ff5ad2}
.fld input:focus,.fld textarea:focus{background:rgba(70,228,255,0.11)}
.fld [aria-invalid="true"]{border-bottom-color:#ff5ad2;background:rgba(255,90,210,0.07)}
.fl{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#46e4ff,#8d5cff,#ff5ad2);box-shadow:0 0 8px rgba(70,228,255,0.7);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.in-wrap:focus-within .fl{transform:scaleX(1)}
.err{min-height:15px;font-size:12px;line-height:15px;color:#ff9ccf}
.ct-status{font-family:Michroma,system-ui,sans-serif;font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:#9feaff;max-width:220px;line-height:1.5}
.tx{clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);transition:filter .3s}
.tx::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#46e4ff,#8d5cff,#ff5ad2,#46e4ff);background-size:300% 100%;animation:eng-flow 5s linear infinite}
.tx::after{content:"";position:absolute;inset:0;clip-path:polygon(17px 1px,calc(100% - 17px) 1px,calc(100% - 1.5px) 50%,calc(100% - 17px) calc(100% - 1px),17px calc(100% - 1px),1.5px 50%);background:rgba(4,10,26,0.9);transition:background .3s}
.tx-bar{position:absolute;z-index:1;left:2px;top:2px;bottom:2px;width:calc(100% - 4px);background:linear-gradient(90deg,rgba(70,228,255,0.15),rgba(70,228,255,0.55));transform:scaleX(0);transform-origin:0 50%;clip-path:polygon(17px 1px,calc(100% - 17px) 1px,calc(100% - 1.5px) 50%,calc(100% - 17px) calc(100% - 1px),17px calc(100% - 1px),1.5px 50%)}
.tx-txt{position:relative;z-index:2;transition:letter-spacing .35s cubic-bezier(.2,.8,.2,1),text-shadow .3s,color .3s}
.tx-box:hover .tx::after,.tx:focus-visible::after{background:rgba(20,50,80,0.85)}
.tx-box:hover .tx-txt,.tx:focus-visible .tx-txt{color:#fff;letter-spacing:0.5em;text-shadow:-2px 0 rgba(255,90,210,0.8),2px 0 rgba(70,228,255,0.8),0 0 14px rgba(70,228,255,0.9)}
.tx:focus{outline:none}
.tx-box:hover .eng-c.tl,.tx:focus-visible ~ .eng-c.tl{transform:translate(-5px,-5px)}.tx-box:hover .eng-c.tr,.tx:focus-visible ~ .eng-c.tr{transform:translate(5px,-5px)}
.tx-box:hover .eng-c.bl,.tx:focus-visible ~ .eng-c.bl{transform:translate(-5px,5px)}.tx-box:hover .eng-c.br,.tx:focus-visible ~ .eng-c.br{transform:translate(5px,5px)}
.tx.sending{cursor:progress;filter:drop-shadow(0 0 12px rgba(70,228,255,0.7))}
.tx.sending .tx-bar{animation:tx-fill 2.2s cubic-bezier(.4,0,.2,1) both}
.tx.sending .tx-txt{animation:hud-blink .5s steps(2,jump-none) infinite}
.tx.sent::before{background:linear-gradient(90deg,#5dff9e,#46e4ff,#5dff9e);background-size:300% 100%}
.tx.sent .tx-bar{transform:scaleX(1);background:linear-gradient(90deg,rgba(93,255,158,0.2),rgba(93,255,158,0.45))}
.tx.sent .tx-txt{color:#eafff3;text-shadow:0 0 12px rgba(93,255,158,0.8)}
.tx.bad{animation:tx-shake .4s ease}
@keyframes tx-fill{0%{transform:scaleX(0)}20%{transform:scaleX(0.3)}55%{transform:scaleX(0.55)}100%{transform:scaleX(1)}}
@keyframes tx-shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (max-width: 720px){.hud.hud-l{top:auto!important;bottom:12px;transform:none}@keyframes hud-off-l{to{opacity:0}}.ct-info li{grid-template-columns:18px 64px minmax(0,1fr)}}
@media (prefers-reduced-motion: reduce){.hud.hud-l.leave,.tx::before,.tx.sending .tx-bar,.tx.sending .tx-txt,.tx.bad{animation:none}.tx.sending .tx-bar{transform:scaleX(1)}}
.tx.dis{cursor:not-allowed}
.tx.dis::before{background:rgba(140,160,180,0.35);animation:none}
.tx.dis .tx-txt{color:#7f8b9a}
.tx-box:hover .tx.dis .tx-txt{color:#9aa6b4;letter-spacing:0.4em;text-shadow:none}
.tx-box:hover .tx.dis::after{background:rgba(4,10,26,0.9)}
.tx-box:has(.tx.dis) .eng-c{border-color:rgba(140,160,180,0.4)!important;transform:none!important}
.ct-status{transition:color .3s}
.hud-l.ct-busy .ct-info,.hud-l.ct-busy .ct-form{animation:ct-clear .6s cubic-bezier(.6,0,.8,.3) forwards;pointer-events:none}
.hud-l.ct-busy .ct-form{animation-delay:.08s}
@keyframes ct-clear{0%{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}25%{opacity:1;transform:translateX(-6px) skewX(-4deg);filter:brightness(1.8) hue-rotate(40deg)}45%{opacity:.6;transform:translateX(8px);clip-path:inset(20% 0 30% 0)}70%{opacity:.4;clip-path:inset(45% 0 45% 0)}100%{opacity:0;transform:scaleY(0.02);clip-path:inset(49% 0 49% 0);visibility:hidden}}
.ct-over{position:absolute;left:40px;right:48px;top:110px;bottom:70px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.ct-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;pointer-events:auto;animation:ct-card-in .7s cubic-bezier(.2,.8,.2,1) .45s backwards}
.ok-state,.fail-state{animation-delay:0s}
@keyframes ct-card-in{0%{opacity:0;transform:scaleY(0.04);filter:brightness(3)}30%{opacity:1;transform:scaleY(0.04)}40%{opacity:.4}52%{opacity:1}100%{transform:none;filter:none}}
.ct-h{margin:0;font-family:Michroma,system-ui,sans-serif;font-size:15px;letter-spacing:0.2em;text-transform:uppercase;color:#eafcff;text-shadow:0 0 12px rgba(70,228,255,0.6)}
.ct-msg{margin:0;max-width:320px;color:#cfe9f5;font-size:15px}
.ct-sub{margin:0;font-family:Michroma,system-ui,sans-serif;font-size:9px;letter-spacing:0.24em;text-transform:uppercase;color:#7f9cb0}
.ct-dots i{font-style:normal;animation:ct-dot 1.2s infinite}.ct-dots i:nth-child(2){animation-delay:.2s}.ct-dots i:nth-child(3){animation-delay:.4s}
@keyframes ct-dot{0%,100%{opacity:.2}40%{opacity:1}}
.ct-sig{position:relative;width:110px;height:110px}
.ct-sig i{position:absolute;inset:0;border-radius:50%;border:1.5px solid #46e4ff;opacity:0;animation:ct-ring 1.8s cubic-bezier(.2,.6,.3,1) infinite}
.ct-sig i:nth-child(2){animation-delay:.6s;border-color:#8d5cff}.ct-sig i:nth-child(3){animation-delay:1.2s;border-color:#ff5ad2}
.ct-sig b{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#eafcff;box-shadow:0 0 14px #46e4ff,0 0 30px rgba(70,228,255,0.7);animation:hud-blink .6s steps(2,jump-none) infinite}
@keyframes ct-ring{0%{opacity:.9;transform:scale(0.15)}100%{opacity:0;transform:scale(1)}}
.ct-prog{width:240px;height:6px;background:repeating-linear-gradient(90deg,rgba(70,228,255,0.15) 0 8px,transparent 8px 11px)}
.ct-prog span{display:block;height:100%;background:repeating-linear-gradient(90deg,#46e4ff 0 8px,transparent 8px 11px);filter:drop-shadow(0 0 4px rgba(70,228,255,0.8));animation:ct-fill 2.6s cubic-bezier(.4,0,.2,1) .4s both}
@keyframes ct-fill{0%{clip-path:inset(0 100% 0 0)}35%{clip-path:inset(0 60% 0 0)}60%{clip-path:inset(0 42% 0 0)}100%{clip-path:inset(0 0 0 0)}}
.ct-ok circle{stroke:#5dff9e;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(93,255,158,0.8));animation:ct-draw .7s ease-out .1s forwards}
.ct-ok path{stroke:#eafff3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(93,255,158,0.9));animation:ct-draw .45s ease-out .65s forwards}
@keyframes ct-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.hud-l.ct-busy .ct-info,.hud-l.ct-busy .ct-form{animation:none;opacity:0;visibility:hidden}.ct-card,.ct-sig i,.ct-prog span,.ct-dots i{animation:none}.ct-ok circle,.ct-ok path{animation:none;stroke-dashoffset:0}}
.rotate{display:none;position:fixed;inset:0;z-index:70;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:radial-gradient(120% 80% at 50% 40%,rgba(10,26,52,0.97),rgba(2,4,12,0.99))}
.rot-ico{filter:drop-shadow(0 0 10px rgba(70,228,255,0.6))}
.rot-phone{transform-origin:42px 40px;animation:rot-turn 2.6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes rot-turn{0%,25%{transform:rotate(0deg)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0deg)}}
.rot-h{margin:0;font-family:Michroma,system-ui,sans-serif;font-size:16px;letter-spacing:0.22em;text-transform:uppercase;color:#eafcff;text-shadow:0 0 12px rgba(70,228,255,0.6)}
.rot-s{margin:0;font-family:'Exo 2',system-ui,sans-serif;font-size:15px;color:#a9c6d6;max-width:280px}
@media (orientation: portrait) and (hover: none) and (pointer: coarse){.rotate{display:flex}}
@media (prefers-reduced-motion: reduce){.rot-phone{animation:none;transform:rotate(-90deg)}}
@media (max-height: 520px){
.hud{padding:16px 30px 12px 28px!important;max-height:calc(var(--vh) - 16px)!important}
.hud-micro,.hud-ruler{display:none}
#hud-title,#ct-title,#pf-title{font-size:19px!important}
.hud-rule{margin:8px 0!important}
.hud-text{max-height:calc(var(--vh) - 170px)}
.hud-text p{margin-bottom:10px!important;font-size:14px}
.hud.hud-l{overflow:hidden!important;top:50%!important;padding:22px 44px 20px 36px!important;max-height:calc(var(--vh) - 28px)!important;width:min(470px,54vw)!important}
.hud-l .hud-scroll{max-height:calc(var(--vh) - 70px)!important}
.hud,.hud.hud-l{transform:translateY(-50%)!important}
@keyframes hud-off{0%{opacity:1;transform:translateY(-50%)}30%{opacity:.4}40%{opacity:.9}100%{opacity:0;transform:translateY(-50%) scaleY(0.02)}}
@keyframes hud-off-l{0%{opacity:1;transform:translateY(-50%)}30%{opacity:.4}40%{opacity:.9}100%{opacity:0;transform:translateY(-50%) scaleY(0.02)}}
.hud-l .hud-scroll{max-height:calc(var(--vh) - 46px)!important}
.hud:not(.hud-l){width:min(380px,44vw)!important}
.hud:not(.hud-l) .hud-text p{font-size:13px}
.hud.hud-l::-webkit-scrollbar{display:none}
.ct-info{margin-bottom:8px!important}.ct-info li{min-height:24px}a.ct-v{min-height:24px}
.fld{margin-bottom:2px}.fld input,.fld textarea{padding:6px 10px;font-size:14px}.fld textarea{height:52px}
.err{min-height:12px;font-size:11px;line-height:12px}
.ct-over{top:80px;bottom:56px}
.pf{bottom:8px!important}
.pf-head{margin-bottom:8px!important}
.pf-thumb{height:72px}
.pf-idx{font-size:18px}
.pf-body{padding-top:8px;gap:3px}
.pf-body h3{font-size:14px}
.pf-body p{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf-visit{min-height:34px;padding-top:2px}
.pf-nav{height:64px!important}
.pf-foot{margin-top:6px!important}
.eng-hint{display:none!important}
}
.hud-scroll{min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;max-height:calc(var(--vh) - 146px);margin-right:-10px;padding-right:10px}
.hud-scroll::-webkit-scrollbar{display:none}
@media (hover: none) and (pointer: coarse), (max-height: 520px){.in-panel .brand,.in-panel .snd{display:none!important}}
*{-webkit-tap-highlight-color:transparent}
/* the animated header forms its own layer; keep the close button above it so its whole square is tappable */
.hud .hud-x{z-index:6}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
@keyframes rp-in{to{opacity:1}}
@media (prefers-reduced-motion: reduce){.replay{animation:none;opacity:1}}

/* text copy of the site for search engines, AI tools and screen readers (shown when scripts are off) */
.seo-copy{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:normal;border:0}