@import"https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@400;600&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{font-family:Space Grotesk,sans-serif;background:#f4f4f4;color:#000}.page{min-height:100vh;display:flex;flex-direction:column}.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:30px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 25px;border-bottom:4px solid black;background:#fff;font-weight:600}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;width:100%;max-width:900px}.list-item{display:flex;flex-direction:column;margin-bottom:14px;max-width:600px;width:100%}.card{padding:28px;border:4px solid black;background:#fff;box-shadow:8px 8px #000;transition:.15s;cursor:pointer}.card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px #000}.bg-white{background:#fff}.bg-yellow{background:#ffe500}.bg-pink{background:#ff4f8b}.bg-blue{background:#3abeff}.bg-green{background:#5dff7e}.btn{border:4px solid black;padding:14px 26px;font-family:Anton;font-size:16px;cursor:pointer;box-shadow:6px 6px #000;background:#fff}.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px #000}.btn-yellow{background:#ffe500}.btn-pink{background:#ff4f8b}.btn-green{background:#5dff7e}.input{padding:14px;border:4px solid black;font-family:Space Grotesk;width:100%}.chat-area{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}.msg{max-width:70%;padding:12px 18px;border:3px solid black;background:#fff;font-weight:500}.msg.me{align-self:flex-end;background:#ffe500}.input-row{display:flex;gap:12px;padding:16px;border-top:4px solid black}.typing{opacity:.7;font-style:italic;animation:blink 1s infinite}@keyframes blink{0%,to{opacity:.7}50%{opacity:.3}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:999}.modal{background:#fff;border:4px solid black;padding:35px;width:320px;box-shadow:8px 8px #000;text-align:center}.modal-buttons{display:flex;gap:10px;margin-top:20px;justify-content:center}.watermark{text-align:center;margin-top:20px;font-family:Anton,sans-serif;font-size:14px;letter-spacing:2px;opacity:.6;-webkit-user-select:none;user-select:none}#wm{display:inline-block;animation:floatLoop 3s ease-in-out infinite}@keyframes floatLoop{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.05)}to{transform:translateY(0) scale(1)}}.loading{height:100vh;display:flex;align-items:center;justify-content:center;font-family:Anton;font-size:40px}.chat-area{scroll-behavior:smooth}.card{border:3px solid #000;box-shadow:6px 6px #000;transition:transform .1s ease}.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px #000}.anim-search{display:flex;gap:6px;margin:10px 0}.dot{width:12px;height:12px;background:#000;border:2px solid #000;animation:brutalBounce .5s infinite alternate}.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}@keyframes brutalBounce{0%{transform:translateY(0) scale(1)}to{transform:translateY(-12px) scale(1.2)}}.anim-match{display:flex;align-items:center;justify-content:space-between;margin:15px 0}.user{width:20px;height:20px;background:#000;border:2px solid #000;animation:shakeUser .6s infinite}.arrow{width:30px;height:4px;background:#000;position:relative;animation:pulseArrow .8s infinite}.arrow:after{content:"";position:absolute;right:-6px;top:-4px;width:0;height:0;border-left:10px solid #000;border-top:6px solid transparent;border-bottom:6px solid transparent}@keyframes shakeUser{0%{transform:translate(0)}25%{transform:translate(-2px)}50%{transform:translate(2px)}75%{transform:translate(-1px)}to{transform:translate(0)}}@keyframes pulseArrow{0%{transform:scaleX(1)}50%{transform:scaleX(1.3)}to{transform:scaleX(1)}}.anim-chat{display:flex;flex-direction:column;gap:6px;margin:10px 0}.bubble{width:40px;height:18px;background:#000;border:2px solid #000;animation:popBubble .8s infinite alternate}.bubble.me{align-self:flex-end;animation-delay:.4s}@keyframes popBubble{0%{transform:scale(1)}to{transform:scale(1.15) rotate(-2deg)}}.anim-reveal{margin:15px 0}.lock{width:24px;height:18px;background:#000;border:2px solid #000;position:relative;animation:lockGlitch 1s infinite}.lock:before{content:"";position:absolute;top:-12px;left:4px;width:12px;height:12px;border:3px solid #000;border-bottom:none}@keyframes lockGlitch{0%{transform:rotate(0)}20%{transform:rotate(2deg)}40%{transform:rotate(-2deg)}60%{transform:rotate(1deg)}80%{transform:rotate(-1deg)}to{transform:rotate(0)}}.bubble-area{position:relative;width:100%;height:300px;overflow:hidden}.float-bubble{position:absolute;width:40px;height:20px;background:#0003;transform:rotate(20deg);animation:float 6s infinite ease-in-out}.float-bubble:nth-child(1){top:10%;left:20%}.float-bubble:nth-child(2){top:30%;left:60%}.float-bubble:nth-child(3){top:50%;left:30%}.float-bubble:nth-child(4){top:70%;left:80%}.float-bubble:nth-child(5){top:20%;left:70%}.float-bubble:nth-child(6){top:60%;left:10%}.float-bubble:nth-child(7){top:40%;left:50%}.float-bubble:nth-child(8){top:80%;left:40%}@keyframes float{0%{transform:translateY(0) rotate(20deg);opacity:.3}50%{transform:translateY(-20px) rotate(25deg);opacity:.6}to{transform:translateY(0) rotate(20deg);opacity:.3}}.stage-text{position:absolute;bottom:20px;left:20px;font-weight:700;font-size:14px;letter-spacing:2px;opacity:.6;transition:all .5s ease}.anim-container{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}
