.tutorial-help {
  width: 34px; height: 34px; padding: 0 !important; border-radius: 50% !important;
  background: #f2eadc !important; color: #52745b !important;
  font: 800 18px Fredoka !important; cursor: pointer;
}
.tutorial-overlay {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-end;
  justify-content: center; padding: 26px; pointer-events: none;
}
.tutorial-overlay.open { display: flex; pointer-events: auto; }
.tutorial-shade {
  position: absolute; inset: 0; background: rgba(31,39,33,.64); backdrop-filter: blur(2px);
}
.tutorial-spotlight {
  display: none; position: fixed; z-index: 101; border: 5px solid #f1b37f;
  border-radius: 18px; box-shadow: 0 0 0 9999px rgba(31,39,33,.64), 0 0 0 10px rgba(255,245,226,.7);
  pointer-events: none; transition: .22s;
}
.tutorial-overlay.has-spotlight .tutorial-shade { background: transparent; backdrop-filter: none; }
.tutorial-overlay.has-spotlight .tutorial-spotlight { display: block; }
.tutorial-card {
  position: relative; z-index: 102; width: min(620px,calc(100vw - 32px)); min-height: 255px;
  padding: 31px 34px 25px 154px; border: 3px solid #e8c89e; border-radius: 28px;
  background: linear-gradient(145deg,#fffdf8,#f8eddd); box-shadow: 0 24px 70px rgba(35,31,25,.35); color: var(--ink);
}
.tutorial-guide { position: absolute; left: 20px; bottom: 18px; width: 116px; height: 205px; display: grid; place-items: end center; overflow: hidden; }
.tutorial-guide img { display: block; width: 112px; height: 200px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 7px 6px rgba(71,45,25,.2)); }
.tutorial-step-label { color: #9d7047; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.tutorial-card h2 { margin: 7px 32px 7px 0; font: 700 27px Fredoka; line-height: 1.1; }
.tutorial-card p { min-height: 52px; margin: 0 0 10px; color: #5f6e65; font-size: 14px; line-height: 1.55; }
.tutorial-close { position: absolute; right: 16px; top: 12px; border: 0; background: transparent; color: #877769; font-size: 28px; cursor: pointer; }
.tutorial-dots { display: flex; gap: 5px; margin: 5px 0 18px; }
.tutorial-dots i { width: 7px; height: 7px; border-radius: 50%; background: #dccdbb; }
.tutorial-dots i.active { width: 20px; border-radius: 8px; background: #e9a176; }
.tutorial-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tutorial-actions > div { display: flex; gap: 8px; }
.tutorial-skip,.tutorial-back { border: 0; background: transparent; color: #766a60; font-size: 12px; font-weight: 800; cursor: pointer; }
.tutorial-back { padding: 10px 14px; border: 1px solid #ddd1c2; border-radius: 12px; background: #fff; }
.tutorial-next { border: 0; border-radius: 12px; padding: 11px 17px; background: #52745b; color: white; font-weight: 800; cursor: pointer; }
.tutorial-next span { margin-left: 8px; }
.tutorial-overlay.position-top { align-items: flex-start; padding-top: 96px; }
.tutorial-overlay.position-center { align-items: center; }
@media(max-width:700px) {
  .tutorial-overlay { padding: 15px 15px 88px; }
  .tutorial-card { padding: 24px 22px 21px; min-height: 300px; }
  .tutorial-guide { left: auto; right: 12px; top: -71px; width: 78px; height: 100px; }
  .tutorial-guide img { width: 73px; height: 100px; }
  .tutorial-card h2 { font-size: 24px; margin-right: 58px; }
  .tutorial-card p { min-height: 75px; }
  .tutorial-actions { align-items: flex-end; }
  .tutorial-overlay.position-top { padding-top: 115px; padding-bottom: 15px; }
}