* {
    box-sizing: border-box;
}

.touch-card{

    display:flex;
    gap:40px;

    align-items:center;
    justify-content:center;

    margin:50px auto;
    padding:30px;

    max-width:900px;

    border-radius:20px;

    background:#2b2d35;

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

    box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.04);

    color:white;

}

.touch-scene{

    width:420px;

    height:320px;

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

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

}

.touch-info{

    width:300px;

    display:flex;

    flex-direction:column;

    gap:22px;

}

.slider-title{

    display:block;

    font-size:18px;

    font-weight:600;

    margin-bottom:8px;

}

.slider-labels{

    display:flex;

    justify-content:space-between;

    font-size:12px;

    color:#bdbdbd;

    margin-bottom:8px;

}

#distanceSlider{

    width:100%;

    cursor:pointer;

    accent-color:#2e7dff;

}

.force-bar{

    width:100%;

    height:14px;

    border-radius:999px;

    background:#3a3a3a;

    overflow:hidden;

}

#forceFill{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #ffb347,
        #ff595e
    );

    transition:width .15s ease-out;

}

#forceText{

    margin-top:8px;

    font-size:15px;

    color:#d7d7d7;

    font-weight:500;

}

#finger{

    position:absolute;

    width:140px;

    left:120px;

    top: -150px;  

    background:transparent;

    transform-origin:center bottom;

    z-index:2;

}

#surface{
    position:absolute;

    width:300px;

    height:12px;    

    left:60px;

    bottom:60px;

    object-fit:cover;

    border-radius:3px;
}

@media (max-width: 768px) {

    .touch-card {
        width: 100%;
        max-width: 100%;
        margin: 30px 0;
        padding: 22px 18px 26px;

        display: flex;
        flex-direction: column;

        gap: 26px;

        align-items: stretch;
        justify-content: flex-start;

        border-radius: 18px;
    }

    .touch-scene {
        width: 100%;
        height: 220px;

        flex-shrink: 0;

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

        border-radius: 12px;
    }

    #surface {
        width: 230px;
        height: 12px;

        left: 50%;
        bottom: 38px;

        transform: translateX(-50%);

        border-radius: 4px;
    }

    #finger{
        position:absolute;

        left: 10%;
        top:-180px;

        background:transparent;

        transform:translateX(-50%);
        transform-origin:center bottom;

        z-index:2;
    }

    .touch-info {
        width: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: column;

        gap: 18px;
    }

    .slider-title {
        font-size: 20px;
        line-height: 1.25;

        text-align: center;

        margin-bottom: 0;
    }

    .slider-labels {
        width: 100%;

        display: flex;
        justify-content: space-between;

        gap: 12px;

        font-size: 14px;
        line-height: 1.3;

        color: #bdbdbd;

        margin-bottom: -8px;
    }

    #distanceSlider {
        width: 100%;
        height: 6px;

        cursor: pointer;
    }

    .force-bar {
        width: 100%;
        height: 14px;

        margin-top: -2px;
    }

    #forceText {
        margin-top: -4px;

        text-align: center;

        font-size: 16px;
        line-height: 1.5;
    }

    .touch-info br {
        display: none;
    }
}