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

body{

    font-family:Inter,sans-serif;
    background:#f7f7f5;
    color:#222;
    min-height:100vh;
    overflow-x:hidden;

}

.background{

    position:fixed;
    inset:0;

    background:
        radial-gradient(circle at top,#ffffff,#f2f2f2);

    z-index:-1;

}

.container{

    width:min(900px,90%);
    margin:auto;

    padding:80px 0;

    text-align:center;

}

h1{

    font-size:3rem;
    font-weight:600;
    margin-bottom:10px;

}

.subtitle{

    color:#777;
    margin-bottom:60px;

}

.countdown{

    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;

    margin:30px 0;

}

.time-box{

    width:100px;

    padding:20px;

    background:white;

    border-radius:18px;

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

}

.time-box span{

    display:block;

    font-size:2rem;
    font-weight:600;

}

.time-box small{

    color:#777;

}

#status{

    color:#888;
    margin-top:20px;

}

.photo{

    width:100%;
    border-radius:18px;
    margin:60px 0;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.message{

    max-width:650px;
    margin:auto;
    min-height:100px;

}

#typewriter{

    font-size:1.2rem;
    line-height:1.9;

}

#typewriter::after{

    content:"|";

    animation:blink .8s infinite;

}

@keyframes blink{

50%{

opacity:0;

}

}

.gift-section{

    margin-top:70px;

}

button{

    margin-top:40px;

    border:none;

    background:#222;

    color:white;

    padding:16px 38px;

    border-radius:999px;

    cursor:pointer;

    font-size:1rem;

    transition:.3s;

}

button:hover:not(:disabled){

    transform:translateY(-3px);

}

button:disabled{

    background:#aaa;
    cursor:not-allowed;

}

#giftWrapper{

    display:flex;
    justify-content:center;
    perspective:1000px;

}

.gift{

    width:170px;
    height:170px;
    position:relative;

    transform-style:preserve-3d;

    cursor:pointer;

}

.box{

    position:absolute;

    bottom:0;

    width:170px;
    height:120px;

    background:#ececec;

    border-radius:6px;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.lid{

    position:absolute;

    width:180px;
    height:45px;

    background:#dcdcdc;

    left:-5px;
    top:18px;

    border-radius:6px;

    transform-origin:left center;

    transition:1.4s cubic-bezier(.2,1,.2,1);

    z-index:5;

}

.ribbon{

    position:absolute;
    background:#888;

}

.vertical{

    width:18px;
    height:120px;
    left:76px;

}

.horizontal{

    width:170px;
    height:18px;
    top:50px;

}

.gift.open .lid{

    transform:
        rotateZ(-10deg)
        rotateX(-135deg)
        translateY(-35px);

}

.gift.open{

    animation:bounce .8s ease;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

40%{

transform:translateY(-12px);

}

70%{

transform:translateY(5px);

}

}

.gift-content{

    margin-top:80px;

    opacity:0;

    transform:translateY(40px);

    transition:1.2s;

    pointer-events:none;

}

.gift-content.show{

    opacity:1;
    transform:none;
    pointer-events:auto;

}

@media(max-width:700px){

h1{

font-size:2.2rem;

}

.time-box{

width:80px;

}

}