@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Press+Start+2P&family=Rubik+Glitch&display=swap');
*{box-sizing:border-box}
:root,html,body{width:100%;max-width:100%;overflow-x:hidden}
html,body{
margin:0;padding:0;color:#fff;font-family:'Rubik Glitch',cursive;
background:linear-gradient(270deg,#ff00cc,#3333ff,#00ffcc,#ff6600,#ff0000,#00ff99);
background-size:1200% 1200%;
animation:bg-shift 8s ease infinite
}
@keyframes bg-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
h1{
font-family:'Monoton',cursive;text-align:center;font-size:4rem;margin:2rem 0;
text-shadow:0 0 5px #fff,0 0 20px #ff00cc,0 0 40px #ff00cc;
animation:flicker 3s infinite alternate,spinScale 10s linear infinite
}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.3}}
@keyframes spinScale{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}
.chaos{
font-family:'Press Start 2P',monospace;padding:1rem;border-radius:12px;background:rgba(0,0,0,.3);
margin:1rem auto;max-width:90%;box-shadow:0 0 15px rgba(255,255,255,.7);
animation:pulse 2s infinite ease-in-out,wobble 5s infinite
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}
@media (min-width:992px){.chaos{max-width:60%}}
.rainbow{display:inline-block;background:linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet);
background-size:400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:rainbow-move 2s linear infinite}
@keyframes rainbow-move{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.glitch{position:relative;color:#fff;font-size:2rem;text-align:center;animation:shake 1s infinite}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;width:100%}
.glitch::before{left:2px;text-shadow:-2px 0 red;animation:glitch-anim 2s infinite linear alternate-reverse}
.glitch::after{left:-2px;text-shadow:-2px 0 blue;animation:glitch-anim 3s infinite linear alternate-reverse}
@keyframes glitch-anim{0%{clip:rect(0,9999px,0,0)}25%{clip:rect(0,9999px,50px,0)}50%{clip:rect(0,9999px,100px,0)}75%{clip:rect(0,9999px,20px,0)}100%{clip:rect(0,9999px,80px,0)}}
@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2px,2px) rotate(-1deg)}50%{transform:translate(2px,-2px) rotate(1deg)}75%{transform:translate(-1px,1px) rotate(0)}}
.matrix{font-family:monospace;white-space:pre;overflow:hidden}
.sticky{position:sticky;top:0;z-index:5}
.tilt{transform-style:preserve-3d;will-change:transform;animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.glass{
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:16px;
-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
position:relative;overflow:hidden
}
.glass::after{
content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
background-size:3px 3px;pointer-events:none;mix-blend-mode:overlay
}
.sigil{
position:fixed;
top:50%;
font-size:clamp(24px,4vw,64px);
line-height:1;
color:#fff;
opacity:.2;
filter:grayscale(1) contrast(1.15);
pointer-events:none;
user-select:none;
mix-blend-mode:screen;
will-change:filter,transform;
contain:paint;
transform:translateY(-50%);
}
.sigil-left{left:max(1rem,env(safe-area-inset-left))}
.sigil-right{right:max(1rem,env(safe-area-inset-right))}
.sigil-center{left:50%;transform:translate(-50%,-50%)}
.prompt-block{
font-family:'Press Start 2P',monospace;padding:1rem;border-radius:12px;background:rgba(0,0,0,.5);
margin:1rem auto;max-width:90%;box-shadow:0 0 15px rgba(255,255,255,.7);position:relative
}
.prompt-header{font-size:1.2rem;margin-bottom:.5rem;color:#0ff}
.prompt-text{font-size:.8rem;white-space:pre-wrap;background:rgba(0,0,0,.3);padding:.5rem;border-radius:8px;overflow-x:auto}
.copy-btn{
font-family:'Press Start 2P',monospace;position:absolute;bottom:.5rem;right:.5rem;font-size:.7rem;
background:#111;color:#fff;border:1px solid #fff;padding:.3rem .6rem;border-radius:6px;cursor:pointer
}
.copy-btn:active{transform:scale(.95)}
.particle{
position:fixed;z-index:9999;width:8px;height:8px;border-radius:50%;pointer-events:none;
transform:translate(-50%,-50%);animation:puff 600ms ease-out forwards;contain:paint
}
@keyframes puff{
from{transform:translate(-50%,-50%) scale(1);opacity:1}
to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.6);opacity:0}
}
.blobs{position:fixed;inset:auto 0 0 0;height:45vh;z-index:0;pointer-events:none;filter:blur(30px);opacity:.25}
.blob{position:absolute;border-radius:40% 60% 50% 50%/60% 40% 60% 40%;mix-blend-mode:screen}
.b1{left:10%;bottom:-10%;width:40vmin;height:40vmin;background:#ff00cc;animation:blob1 18s ease-in-out infinite}
.b2{left:40%;bottom:-15%;width:45vmin;height:45vmin;background:#3333ff;animation:blob2 22s ease-in-out infinite}
.b3{right:8%;bottom:-12%;width:38vmin;height:38vmin;background:#00ffcc;animation:blob3 20s ease-in-out infinite}
@keyframes blob1{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-6vmin) scale(1.05)}
}
@keyframes blob2{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-8vmin) scale(1.08)}
}
@keyframes blob3{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-5vmin) scale(1.04)}
}