:root{--bg:#050505;--fg:#f4f4f1;--muted:#8c8c87;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif}
body{overflow:hidden}
.cs{position:relative;min-height:100svh;display:grid;place-items:center;isolation:isolate;background:
radial-gradient(circle at 50% 45%,rgba(255,255,255,.055),transparent 38%),#050505;overflow:hidden;padding:32px}
.cs::before{content:"";position:absolute;inset:-30%;z-index:-3;background:conic-gradient(from 130deg at 50% 50%,transparent 0 43%,rgba(255,255,255,.025) 47%,transparent 51% 100%);animation:rotateBg 18s linear infinite}
.cs__noise{position:absolute;inset:0;z-index:-1;opacity:.12;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");animation:noise .18s steps(2) infinite}
.cs__scanlines{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.22;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.028) 4px)}
.cs__flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
.cs__content{position:relative;z-index:1;width:min(100%,1100px);text-align:center;display:flex;flex-direction:column;align-items:center}
.cs__logo-wrap{width:min(72vw,560px);margin:0 auto 28px}
.cs__logo-glitch{position:relative;width:100%;filter:invert(1);animation:logoJolt 7s infinite}
.cs__logo{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.cs__logo--slice{position:absolute;inset:0;opacity:0;pointer-events:none}
.cs__logo--slice-a{filter:drop-shadow(8px 0 0 rgba(255,0,60,.85));clip-path:inset(10% 0 62% 0);animation:sliceA 3.8s infinite steps(1)}
.cs__logo--slice-b{filter:drop-shadow(-8px 0 0 rgba(0,220,255,.85));clip-path:inset(64% 0 8% 0);animation:sliceB 3.8s .07s infinite steps(1)}
.cs__status{margin:0 0 18px;font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.22em;color:#b9b9b4;text-transform:uppercase;display:flex;gap:10px;align-items:center}
.cs__dot{width:6px;height:6px;border-radius:50%;background:#f4f4f1;box-shadow:0 0 18px rgba(255,255,255,.7);animation:blink 1.2s steps(1) infinite}
.cs__title{position:relative;margin:0;font-size:clamp(44px,9vw,124px);line-height:.86;letter-spacing:-.055em;font-weight:900;text-transform:uppercase}
.cs__title::before,.cs__title::after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none}
.cs__title::before{transform:translateX(3px);text-shadow:-4px 0 #00d9ff;clip-path:inset(12% 0 58% 0);animation:textGlitchA 4s infinite steps(1)}
.cs__title::after{transform:translateX(-3px);text-shadow:4px 0 #ff174f;clip-path:inset(63% 0 8% 0);animation:textGlitchB 4s .08s infinite steps(1)}
.cs__subtext{max-width:560px;margin:22px 0 0;color:var(--muted);font-size:clamp(12px,1.4vw,15px);letter-spacing:.16em;text-transform:uppercase}
.cs__signal{display:flex;gap:5px;height:22px;align-items:end;margin-top:32px}
.cs__signal span{width:2px;height:4px;background:#bdbdb8;animation:eq .9s infinite ease-in-out}
.cs__signal span:nth-child(2){animation-delay:.13s}.cs__signal span:nth-child(3){animation-delay:.26s}.cs__signal span:nth-child(4){animation-delay:.39s}.cs__signal span:nth-child(5){animation-delay:.52s}
.cs__form{display:grid;grid-template-columns:minmax(0,1fr) auto;width:min(100%,460px);margin-top:34px;border:1px solid var(--line);background:rgba(255,255,255,.025);position:relative}
.cs__form input,.cs__form button{height:48px;border:0;background:transparent;color:var(--fg);font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em}
.cs__form input{min-width:0;padding:0 16px;outline:0}.cs__form input::placeholder{color:#666}
.cs__form button{padding:0 18px;border-left:1px solid var(--line);cursor:pointer}.cs__form button:hover{background:#f4f4f1;color:#050505}
.cs__form-message{grid-column:1/-1;margin:0;padding:10px 14px;border-top:1px solid var(--line);font:600 10px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-align:left}
.cs__footer{position:absolute;left:22px;right:22px;bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:16px;font:600 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:#666;text-transform:uppercase;z-index:3}
.cs__footer-code{white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@keyframes rotateBg{to{transform:rotate(360deg)}}
@keyframes noise{0%{transform:translate(0)}25%{transform:translate(1.5%,-1%)}50%{transform:translate(-1%,1.2%)}75%{transform:translate(.8%,1.5%)}100%{transform:translate(-1.2%,-.6%)}}
@keyframes blink{0%,68%,100%{opacity:1}69%,79%{opacity:.18}}
@keyframes eq{0%,100%{height:4px;opacity:.3}50%{height:20px;opacity:1}}
@keyframes logoJolt{0%,91%,100%{transform:none}92%{transform:translateX(-2px) skewX(-2deg)}93%{transform:translateX(2px) skewX(1deg)}94%{transform:none}}
@keyframes sliceA{0%,77%,81%,100%{opacity:0;transform:none}78%{opacity:.9;transform:translateX(7px)}79%{opacity:.7;transform:translateX(-4px)}80%{opacity:.9;transform:translateX(2px)}}
@keyframes sliceB{0%,77%,81%,100%{opacity:0;transform:none}78%{opacity:.9;transform:translateX(-8px)}79%{opacity:.7;transform:translateX(4px)}80%{opacity:.9;transform:translateX(-2px)}}
@keyframes textGlitchA{0%,84%,88%,100%{opacity:0;transform:translateX(3px)}85%{opacity:.8;transform:translateX(8px)}86%{opacity:.75;transform:translateX(-5px)}87%{opacity:.8;transform:translateX(2px)}}
@keyframes textGlitchB{0%,84%,88%,100%{opacity:0;transform:translateX(-3px)}85%{opacity:.8;transform:translateX(-7px)}86%{opacity:.75;transform:translateX(5px)}87%{opacity:.8;transform:translateX(-2px)}}
@media(max-width:640px){.cs{padding:24px}.cs__logo-wrap{width:min(82vw,430px);margin-bottom:24px}.cs__title{font-size:clamp(48px,18vw,82px)}.cs__subtext{font-size:10px;line-height:1.7;max-width:300px}.cs__footer{left:16px;right:16px}.cs__form{grid-template-columns:1fr}.cs__form button{border-left:0;border-top:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}}
