*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    height:100vh;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    font-family:"Microsoft YaHei",sans-serif;

    background:linear-gradient(135deg,#f6f9fc 0%,#e9efff 100%);

    color:#333;

    overflow:hidden;

}

.container{

    width:90%;
    max-width:700px;

    text-align:center;

    margin-top:15vh;

}

h1{

    font-size:62px;

    font-weight:800;

    color:#222;

    letter-spacing:-2px;

    text-shadow:0 4px 12px rgba(0,0,0,.06);

    margin-bottom:22px;

}

.desc{

    font-size:22px;

    color:#555;

    line-height:1.9;

    margin-bottom:60px;

}

.desc span{

    color:#4f7cff;

    font-weight:600;

}

.input-box{

    width:100%;

    max-width:520px;

    margin:auto;

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.9);

    border-radius:24px;

    padding:18px 24px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

input{

    width:100%;

    border:none;

    outline:none;

    background:none;

    text-align:center;

    font-size:22px;

    letter-spacing:4px;

    color:#222;

}

input::placeholder{

    color:#aaa;

    letter-spacing:2px;

}

.btn{

    margin-top:35px;

    display:inline-block;

    padding:18px 48px;

    border-radius:50px;

    background:rgba(255,255,255,.75);

    border:1px solid rgba(255,255,255,.9);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    color:#333;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

    cursor:pointer;

}

.btn:hover{

    transform:translateY(-3px);

    background:#fff;

    color:#4f7cff;

    box-shadow:0 15px 35px rgba(79,124,255,.15);

}

.tips{

    margin-top:35px;

    color:#999;

    font-size:15px;

    line-height:2;

}

.footer{

    position:absolute;

    bottom:40px;

    width:100%;

    text-align:center;

    color:#aaa;

    font-size:14px;

}

/* 背景装饰 */

.circle{

    position:absolute;

    border-radius:50%;

    filter:blur(10px);

    opacity:.35;

    z-index:-1;

}

.c1{

    width:260px;
    height:260px;

    background:#b9cfff;

    left:-80px;
    top:-80px;

}

.c2{

    width:220px;
    height:220px;

    background:#d8e4ff;

    right:-60px;
    bottom:80px;

}

.c3{

    width:120px;
    height:120px;

    background:#ffffff;

    right:18%;

    top:18%;

}

@media(max-width:768px){

    .container{

        margin-top:13vh;

    }

    h1{

        font-size:48px;

    }

    .desc{

        font-size:18px;

        margin-bottom:45px;

    }

    input{

        font-size:18px;

    }

    .btn{

        width:100%;

        max-width:320px;

    }

}