@media (max-width: 640px) {
    .compact-mobile-step-hint {
        position: fixed;
        z-index: 10050;
        top: 0;
        left: 0;
        width: max-content;
        max-width: min(240px, calc(100vw - 24px));
        padding: 7px 10px;
        color: #eef5f1;
        background: rgba(22, 28, 29, .97);
        border: 1px solid rgba(96, 116, 109, .58);
        border-radius: 10px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
        font-size: .72rem;
        font-weight: 750;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, calc(-100% + 5px)) scale(.98);
        transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    }

    .compact-mobile-step-hint::before {
        content: '';
        position: absolute;
        top: auto;
        bottom: -5px;
        left: var(--step-hint-arrow-x, 50%);
        width: 9px;
        height: 9px;
        background: rgba(22, 28, 29, .97);
        border-right: 1px solid rgba(96, 116, 109, .58);
        border-bottom: 1px solid rgba(96, 116, 109, .58);
        transform: translateX(-50%) rotate(45deg);
    }

    .compact-mobile-step-hint.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -100%) scale(1);
    }

    html.light-theme .compact-mobile-step-hint {
        color: #17311f;
        background: rgba(247, 249, 248, .98);
        border-color: #c7d1cb;
        box-shadow: 0 10px 24px rgba(40, 60, 49, .16);
    }

    html.light-theme .compact-mobile-step-hint::before {
        background: rgba(247, 249, 248, .98);
        border-color: #c7d1cb;
    }
}