*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:linear-gradient(135deg,#eaf3ff,#d9ebff);
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.main{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;
    padding:20px;
}

/* ===========================
   Assistant
=========================== */

.assistant{
    display:flex;
    flex-direction:column;
    align-items:center;
    animation:walkIn 1.8s ease forwards;
    transform:translateX(-450px);
}

.boy{
    width:230px;
    height:auto;
    display:block;
    animation:bounce 2s infinite;
    transition:.4s;
    user-select:none;
    pointer-events:none;
}

.speech{
    margin-top:15px;
    background:#ffffff;
    color:#2563eb;
    padding:15px 20px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    font-size:16px;
    font-weight:bold;
    text-align:center;
    max-width:260px;
    position:relative;
    animation:float 2s infinite;
}

.speech::after{
    content:"";
    position:absolute;
    left:35px;
    bottom:-12px;
    border-width:12px 12px 0;
    border-style:solid;
    border-color:#ffffff transparent transparent transparent;
}

/* ===========================
   Form
=========================== */

.container{
    width:390px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    padding:35px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
    text-align:center;
}

h1{
    color:#2563eb;
    font-size:38px;
    margin-bottom:15px;
}

p{
    color:#555;
    font-size:17px;
    margin-bottom:20px;
}

input{
    width:100%;
    padding:16px;
    border:2px solid #d1d5db;
    border-radius:12px;
    font-size:17px;
    outline:none;
    transition:.3s;
}

input:focus{
    border-color:#2563eb;
    box-shadow:0 0 20px rgba(37,99,235,.35);
}

.highlight{
    animation:glow 1s infinite;
    border:2px solid #2563eb;
}

button{
    width:100%;
    margin-top:20px;
    padding:16px;
    border:none;
    border-radius:12px;
    background:#2563eb;
    color:white;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

button:hover{
    background:#1d4ed8;
    transform:scale(1.05);
}

#status{
    margin-top:20px;
    min-height:24px;
    font-size:18px;
    font-weight:bold;
    color:#16a34a;
}

#map{
    display:none;
}

/* ===========================
   Animations
=========================== */

@keyframes walkIn{

    from{
        transform:translateX(-450px);
        opacity:0;
    }

    to{
        transform:translateX(0);
        opacity:1;
    }

}

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes bounce{

    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    25%{
        transform:translateY(-8px) rotate(-3deg);
    }

    50%{
        transform:translateY(-15px) rotate(3deg);
    }

    75%{
        transform:translateY(-8px) rotate(-3deg);
    }

}

@keyframes glow{

    0%{
        box-shadow:0 0 5px #2563eb;
    }

    50%{
        box-shadow:0 0 25px #2563eb;
    }

    100%{
        box-shadow:0 0 5px #2563eb;
    }

}

/* ===========================
   Mobile
=========================== */

@media(max-width:768px){

    body{
        overflow:auto;
    }

    .main{
        flex-direction:column;
        gap:20px;
        padding:20px;
    }

    .boy{
        width:190px;
    }

    .speech{
        max-width:220px;
        font-size:15px;
    }

    .container{
        width:100%;
        max-width:380px;
    }

}