@media (pointer: coarse) and (max-width: 768px), 
(pointer: coarse) and (orientation: landscape) and (max-height: 500px) { 
 
    .tutorial-modal { 
        width: calc(100vw - 30px); 
        max-width: calc(100vw - 30px); 
        padding: 16px 18px; 
    } 
 
    .tutorial-modal-positioning { 
        visibility: hidden; 
        opacity: 0; 
    } 
 
    .tutorial-modal-positioning.tutorial-modal-ready { 
        visibility: visible; 
        opacity: 1; 
    } 
 
    .tutorial-title { 
        font-size: 20px; 
        margin-bottom: 8px; 
    } 
 
    .tutorial-text { 
        font-size: 12px; 
        line-height: 1.35; 
        margin-bottom: 14px; 
    } 
 
    .tutorial-footer { 
        gap: 8px; 
    } 
 
    .tutorial-actions { 
        gap: 6px; 
    } 
 
    .tutorial-btn { 
        gap: 4px; 
        padding: 6px 10px; 
        font-size: 12px; 
    } 
 
    .tutorial-dots { 
        gap: 4px; 
    } 
 
    .tutorial-dot { 
        width: 14px; 
        height: 5px; 
    } 
 
    .tutorial-dot.active { 
        width: 22px; 
    } 
 
    .tutorial-arrow { 
        width: 42px; 
        height: 50px; 
    } 
 
    .tutorial-modal-add-layers { 
        top: 60px !important; 
        left: 6px !important; 
        right: 6px !important; 
        width: auto !important; 
        max-width: none !important; 
        transform: none !important; 
        padding: 10px 12px; 
        border: 1px solid var(--primary-color, #2bbfa4); 
        border-radius: 8px; 
    } 
 
    .tutorial-modal-add-layers .tutorial-close { 
        top: 6px; 
        right: 6px; 
        width: 16px; 
        height: 16px; 
    } 
 
    .tutorial-modal-add-layers .tutorial-title { 
        font-size: 17px; 
        margin-bottom: 6px; 
    } 
 
    .tutorial-modal-add-layers .tutorial-text { 
        font-size: 11px; 
        line-height: 1.3; 
        margin-bottom: 8px; 
    } 
 
    .tutorial-modal-add-layers .tutorial-footer { 
        gap: 6px; 
    } 
 
    .tutorial-modal-add-layers .tutorial-actions { 
        gap: 5px; 
    } 
 
    .tutorial-modal-add-layers .tutorial-btn { 
        padding: 5px 8px; 
        font-size: 11px; 
    } 
 
    .tutorial-modal-add-layers .tutorial-dots { 
        gap: 3px; 
    } 
 
    .tutorial-modal-add-layers .tutorial-dot { 
        width: 11px; 
        height: 4px; 
    } 
 
    .tutorial-modal-add-layers .tutorial-dot.active { 
        width: 18px; 
    } 
 
    body.tutorial-active[data-tutorial-step="step2-add-layers"] #add-layers { 
        padding-top: 150px !important; 
        box-sizing: border-box; 
    } 
 
    .tutorial-modal-compact { 
        width: 280px; 
        max-width: 280px; 
        padding: 8px 10px; 
    } 
 
    .tutorial-modal-compact .tutorial-close { 
        top: 5px; 
        right: 5px; 
        width: 13px; 
        height: 13px; 
    } 
 
    .tutorial-modal-compact .tutorial-title { 
        font-size: 14px; 
        margin-bottom: 5px; 
    } 
 
    .tutorial-modal-compact .tutorial-text { 
        font-size: 10px; 
        line-height: 1.25; 
        margin-bottom: 7px; 
    } 
 
    .tutorial-modal-compact .tutorial-footer { 
        gap: 5px; 
    } 
 
    .tutorial-modal-compact .tutorial-actions { 
        gap: 4px; 
    } 
 
    .tutorial-modal-compact .tutorial-btn { 
        gap: 3px; 
        padding: 4px 6px; 
        font-size: 9px; 
    } 
 
    .tutorial-modal-compact .tutorial-dots { 
        gap: 3px; 
    } 
 
    .tutorial-modal-compact .tutorial-dot { 
        width: 9px; 
        height: 4px; 
    } 
 
    .tutorial-modal-compact .tutorial-dot.active { 
        width: 14px; 
    } 
 
    .tutorial-arrow-step5, 
    .tutorial-arrow-step6 { 
        left: -18px; 
        width: 28px; 
        height: 34px; 
    } 
}