:root { --p: #4ade80; --bg: #020617; --painel: #09090b; --txt: #fff; --dim: #52525b; --bez: cubic-bezier(0.34, 1.56, 0.64, 1); }
        * { margin:0; padding:0; box-sizing:border-box; font-family:'Nunito',sans-serif; }
        
        body { display:flex; align-items:center; justify-content:center; height:100vh; background:var(--bg) url('/img/area51.jpg') center/110% no-repeat; box-shadow:inset 0 0 0 1000px rgba(0,0,0,0.6); overflow:hidden; transition:background-position .1s ease-out; }
        
        .container { display:flex; width:900px; height:600px; background:var(--painel); border-radius:30px; box-shadow:0 0 40px rgba(74,222,128,0.1), 0 25px 60px rgba(0,0,0,0.8); overflow:hidden; z-index:10; }

        /* --- ILUSTRAÇÃO --- */
        .illus { flex:1.1; position:relative; background:var(--p) radial-gradient(#000 1px, transparent 1px); background-size:20px 20px; border-right:2px solid #000; overflow:hidden; }
        svg { width:100%; height:100%; position:absolute; bottom:-20px; }
        
        #chars { transition:transform .3s ease-out; transform-origin:center 90%; transform-box:view-box; }
        .g-char { transition:transform .4s var(--bez); transform-origin:bottom center; }
        .pupil, .mouth { transition:all .3s var(--bez); }
        .eye { transform-origin:center; transform-box:fill-box; transition:transform .1s; }

        /* ANIMAÇÕES (Entrada + Idle) */
        @keyframes enter { to { transform:translate(0,0) scale(1) rotate(0); opacity:1; } }
        .anim { animation:enter var(--bez) forwards; opacity:0; }
        
        #et-grey .anim { transform:translateY(-100vh) scale(.8,1.2); animation-duration:1.2s; animation-delay:.1s; }
        #et-green .anim { transform:translateX(-100vw) scale(1.2,.8) rotate(-20deg); animation-duration:1.3s; animation-delay:.3s; }
        #et-purple .anim { transform:translateX(100vw) scale(1.2,.8) rotate(20deg); animation-duration:1.5s; animation-delay:.5s; }
        #et-plasma .anim { transform:translateY(100vh) scale(.8,1.2); animation-duration:1.4s; animation-delay:.7s; }

        @keyframes breathe { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
        @keyframes stretch { 0%,100%{transform:scaleY(1)} 20%{transform:scaleY(1.08)} 30%{transform:scaleY(1)} }
        
        .body-in { transform-origin:bottom center; transform-box:fill-box; }
        #et-grey .body-in { animation:stretch 5s ease-in-out infinite 1.3s; }
        #et-green .body-in, #et-purple .body-in, #et-plasma .body-in { animation:breathe 3s ease-in-out infinite; }
        #et-green .body-in{animation-delay:1.7s} #et-purple .body-in{animation-delay:2s} #et-plasma .body-in{animation-delay:2.2s}

        /* ESTADOS (Interação) */
        .blink .eye { transform:scaleY(.1); }
        
        /* 1. Assustado (Erro) */
        @keyframes shake { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-15px)} 30%{transform:translateX(12px)} 45%{transform:translateX(-8px)} 60%{transform:translateX(4px)} 75%{transform:translateX(-2px)} }
        .shake .g-char { animation:shake .5s ease-in-out; }
        .illus.scared .body-in { transform:rotate(-6deg) translateY(10px) !important; animation:none !important; }
        .illus.scared .eye { transform:scale(1.3) !important; }
        .illus.scared .pupil { transform:translate(6px, 8px) scale(.6) !important; }
        .illus.scared .mouth { height:18px!important; width:14px!important; rx:7px!important; transform:translateY(6px); fill:#000!important; }

        /* 2. Curioso (Senha) - CORRIGIDO AQUI */
        .illus.curious:not(.scared) .pupil { transform:translate(8px, 1px) !important; }
        .illus.curious #et-grey   { transform:translateX(10px) rotate(8deg) !important; }
        .illus.curious #et-green  { transform:translateX(12px) rotate(12deg) !important; }
        .illus.curious #et-purple { transform:translateX(8px) rotate(6deg) !important; }  /* Volta a inclinar */
        .illus.curious #et-plasma { transform:translateX(6px) rotate(15deg) !important; } /* Volta a inclinar */

        /* 3. Exposto e Outros */
        .illus.exposed:not(.scared) .pupil { transform:translate(-7px, 3px) !important; }
        .illus.exposed:not(.curious) .mouth { height:2px!important; width:8px!important; transform:translateY(-2px); }
        
        .illus.look:not(.scared) #et-grey .pupil { transform:translate(6px, 4px) !important; }
        .illus.look:not(.scared) #et-green .pupil { transform:translate(-6px, -4px) !important; }
        .illus.impressed .mouth { height:14px!important; width:14px!important; rx:50%; transform:translateY(4px); }

        /* --- FORMULÁRIO --- */
        .form { flex:1; padding:60px; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:20; }
        h2 { font-size:36px; font-weight:800; color:var(--txt); text-transform:uppercase; letter-spacing:-1px; margin-bottom:10px; }
        .sub { color:var(--p); margin-bottom:40px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
        
        .inp-grp { margin-bottom:25px; }
        .inp-box { position:relative; display:flex; align-items:center; }
        label { display:block; margin-bottom:10px; font-weight:700; font-size:14px; color:#e4e4e7; margin-left:5px; }
        
        input { width:100%; padding:16px 45px 16px 50px; background:#18181b; border:2px solid #27272a; border-radius:16px; font-size:15px; font-weight:600; color:var(--txt); outline:none; transition:all .3s cubic-bezier(.25,.8,.25,1); }
        input:focus { background:#000; border-color:var(--p); box-shadow:0 0 20px rgba(74,222,128,.2); transform:translateY(-2px); }
        input:focus ~ .ico { fill:var(--p); }

        .ico { position:absolute; left:18px; width:24px; height:24px; fill:var(--dim); transition:fill .3s; pointer-events:none; z-index:2; top:50%; transform:translateY(-50%); }
        
        .tog-pass { position:absolute; right:18px; width:24px; height:24px; cursor:pointer; background:none; border:none; padding:0; fill:var(--dim); transition:all .3s; z-index:5; top:15%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; }
        .tog-pass:hover { fill:var(--p); transform:translateY(-50%) scale(1.1); }

        .btn { width:100%; padding:18px; margin-top:20px; background:linear-gradient(135deg, #4ade80, #16a34a); color:#022c22; border:none; border-radius:16px; font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:all .3s var(--bez); box-shadow:0 10px 20px -5px rgba(74,222,128,.3); }
        .btn:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 15px 30px -5px rgba(74,222,128,.5); filter:brightness(1.1); }
        .btn:active { transform:scale(.95); }