/* Isolated tutorial: the example never moves or favorites real vacancies. */
.mj-tutorial{box-sizing:border-box;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid #417c99;border-radius:26px;color:#edf6ff;background:linear-gradient(145deg,rgba(25,53,73,.98),rgba(9,22,40,.98));box-shadow:0 20px 70px #0008;font:inherit}
.mj-tutorial::backdrop{background:#020b18a8;backdrop-filter:blur(3px)}
.mj-tutorial h2{margin:0 0 18px;font-size:24px;line-height:1.25}
.mj-tutorial p{margin:12px 0;line-height:1.45;font-size:15px;overflow-wrap:anywhere}
.mj-tutorial .mj-tutorial-left,.mj-tutorial .mj-tutorial-right{font-weight:700;color:#7ce1f5}
.mj-tutorial button{display:block;width:100%;min-height:48px;margin-top:20px;padding:12px 20px;border:1px solid #42bdf5;border-radius:18px;background:linear-gradient(110deg,#148efa,#5746df);color:white;font:inherit;font-weight:700;cursor:pointer}
.mj-tutorial button:focus-visible{outline:3px solid #7ce1f5;outline-offset:3px}
.mj-tutorial-preview{height:130px;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:20px;background:#06132280}
.mj-tutorial-card{display:grid;place-items:center;width:84px;height:104px;border:1px solid #65c6eb;border-radius:16px;background:linear-gradient(160deg,#164a6c,#1b254e);font-size:23px;font-weight:800;animation:mj-demo-swipe 6s ease-in-out infinite}
.mj-tutorial-hand{position:absolute;font-size:38px;left:calc(50% - 10px);top:67px;animation:mj-demo-swipe 6s ease-in-out infinite}
@keyframes mj-demo-swipe{0%,10%,45%,55%,95%,100%{transform:translateX(0) rotate(0)}25%,35%{transform:translateX(-76px) rotate(-8deg)}70%,80%{transform:translateX(76px) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.mj-tutorial-card,.mj-tutorial-hand{animation:none}}