#hint_stage {
    display: none;
    position: absolute;
    left: 0; bottom: 5rem; width: 40rem; height: 20rem;
    background-color: var(--catalog-bg-color); 
    backdrop-filter: blur(3rem);
    background-size: 78%;
    background-image: url(images/hint_mouse.svg);
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: all;
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s;
    transform-origin: left bottom;
    transform: scale(1.0);
    opacity: 1;
}

#hint_stage.close {
    transform: scale(0.7);
    opacity: 0;
}

#hint_stage .gradient {
    position: absolute;
    left: 10%; top: 0; width: auto; height: 1px; right: 10%;
    background: var(--gradient-bg-color1);
    background: linear-gradient(90deg, var(--gradient-bg-color2) 0%, var(--gradient-bg-color1) 50%, var(--gradient-bg-color2) 100%);
}

#hint_stage .hint_close {
    position: absolute;
    right: 0; top: 0; width: 4rem; height: 4rem;
}

@media (pointer: fine) {
    #hint_stage {
        display: block;
    }
}