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

body{

    background:linear-gradient(
        180deg,
        #2d3763 0%,
        #222a4b 40%,
        #15192b 100%
    );
    color:#ffffff;

    font-family:
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "Helvetica Neue",
    Arial,
    sans-serif;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:30px;

}

.container{

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

    padding:35px;

    border-radius:24px;

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

    backdrop-filter:blur(10px);

    border:1px solid #e1e2eb36;

    animation:fadeIn .8s ease;
}

h1{

    margin-bottom:12px;

    font-size:32px;

    font-weight:700;

    letter-spacing:1px;

    line-height:1.3;

}

video{

    width:100%;

    border-radius:16px;

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

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

}

.tip{

    margin-top:20px;

    color:#b9bfd8;

    font-size:16px;

    line-height:1.8;

}
@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.logo{

    width:35%;

    max-width:250px;

    min-width:100px;

    height:auto;

    display:block;

    margin:0 auto 30px;

}

.subtitle{

    margin-top:-8px;

    margin-bottom:30px;

    color:#e4e7f1;

    font-size:15px;

    letter-spacing:2px;

}

.ending-message{

    opacity:0;

    transform:translateY(20px);

    transition:.8s;

    margin-top:30px;

}

.ending-message.show{

    opacity:1;

    transform:translateY(0);

}

.ending-message h2{

    margin-bottom:12px;

}

.ending-message p{

    color:#d0d5ea;

    line-height:1.8;

}