.tpm-wrapper{

    max-width:1300px;

    margin:auto;

    padding:40px 20px 80px;

}

.tpm-header{

    text-align:center;

    margin-bottom:60px;

}

.tpm-icon{

    font-size:54px;

    margin-bottom:15px;

}

.tpm-header h1{

    margin-bottom:10px;

    font-size:42px;

    font-weight:700;

}

.tpm-subtitle{

    color:#666;

    font-size:18px;

}

.tpm-download{

    margin-top:25px;

    background:#F7941D;

    color:#fff;

    border:none;

    border-radius:8px;

    padding:16px 34px;

    font-size:18px;

    cursor:pointer;

}

.tpm-download:disabled{

    opacity:.5;

    cursor:not-allowed;

}

.tpm-gallery{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:20px;

}

.tpm-gallery a{

    display:block;

    overflow:hidden;

    border-radius:12px;

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

}

.tpm-gallery img{

    width:100%;

    display:block;

    aspect-ratio:4/3;

    object-fit:cover;

    transition:.25s;

    background:#eee;

}

.tpm-gallery img:hover{

    transform:scale(1.05);

}

.tpm-gallery a{

    position:relative;

}

.tpm-gallery a::after{

    content:"🔍";

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    color:white;

    background:rgba(0,0,0,.35);

    opacity:0;

    transition:.2s;

}

.tpm-gallery a:hover::after{

    opacity:1;

}

@media(max-width:768px){

    .tpm-wrapper{

        padding:20px;

    }

    .tpm-header h1{

        font-size:30px;

    }

    .tpm-gallery{

        grid-template-columns:1fr;

    }

    .tpm-download{

        width:100%;

    }

}

.tpm-survey{

    max-width:700px;

    margin:auto;

    text-align:center;

}

.tpm-question{

    margin:40px 0;

}

.tpm-question>label{

    display:block;

    font-size:20px;

    font-weight:600;

    margin-bottom:15px;

}

.tpm-stars{

    display:flex;

    flex-direction:row-reverse;

    justify-content:center;

}

.tpm-stars input{

    display:none;

}

.tpm-stars label{

    font-size:42px;

    color:#ddd;

    cursor:pointer;

    transition:.2s;

}

.tpm-stars label:hover,

.tpm-stars label:hover ~ label{

    color:#F7941D;

}

.tpm-stars input:checked ~ label{

    color:#F7941D;

}

.tpm-input{

    width:100%;

    padding:15px;

    border-radius:8px;

    border:1px solid #ddd;

    font-size:18px;

    box-sizing:border-box;

}

.tpm-recommend{

    display:flex;

    justify-content:center;

    gap:30px;

    font-size:20px;

}