/* Nathan's guide reserves its own space; all workstation targets stay touchable. */
body.tutorial-active { --dock-height: 144px; }
body.tutorial-active .coach-dock { display: none; }
.tutorial-focus-layer, .tutorial-focus-layer *, .tutorial-guide, .tutorial-guide * { pointer-events: none !important; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tutorial-focus-layer { position: absolute; inset: 0; z-index: 32; overflow: hidden; }
.tutorial-focus-layer .tutorial-focus-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
.tutorial-focus-badge text { font: 800 14px var(--heading, sans-serif); }
.tutorial-focus-ring { filter: drop-shadow(0 2px 2px #29262155); }
.tutorial-drag-cursor { position: absolute; left: 0; top: 0; width: 31px; height: 40px; filter: drop-shadow(2px 3px 1px #29262166); animation: tutorial-drag-demo 3.2s ease-in-out infinite; will-change: transform, opacity; }
.tutorial-drag-cursor svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tutorial-focus-layer[data-gesture="swipe"] .tutorial-drag-cursor { animation: tutorial-spread-demo 2.4s ease-in-out infinite; }
.tutorial-focus-layer.is-interacting .tutorial-drag-cursor, .tutorial-focus-layer.is-interacting .tutorial-gesture-route { opacity: 0; }
.tutorial-guide { position: absolute; left: 0; right: 0; bottom: 0; min-width: 0; height: calc(var(--dock-height, 144px) + var(--safe-bottom, 0px)); padding: 12px max(24px, var(--safe-right, 0px)) calc(12px + var(--safe-bottom, 0px)) max(24px, var(--safe-left, 0px)); display: flex; align-items: center; gap: 20px; background: #fff8ec; border-top: 4px solid #ff7009; box-shadow: 0 -5px 20px #2926211c; z-index: 35; }
.tutorial-nathan { width: 80px; height: 104px; flex: 0 0 80px; align-self: center; filter: drop-shadow(2px 3px 0 #bd7f4933); }
.tutorial-nathan svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tutorial-guide-content { flex: 1; min-width: 0; max-width: 1040px; }
.tutorial-coach-label { color: #8f3b00; font: 700 9px/1.15 var(--body, sans-serif); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 5px; }
.tutorial-coach-label .copy-en, .tutorial-coach-label .copy-vi { display: inline; font-size: inherit; line-height: inherit; opacity: 1; margin: 0; }
.tutorial-coach-label .copy-vi::before { content: ' · '; }
.tutorial-heading { display: flex; align-items: flex-start; gap: 12px; }
.tutorial-title { margin: 0; flex: 1; min-width: 0; font: 700 18px/1.16 var(--heading, sans-serif); letter-spacing: -.35px; color: #292621; }
.tutorial-title .copy-en, .tutorial-title .copy-vi { display: block; font-size: inherit; line-height: inherit; opacity: 1; margin: 0; }
.tutorial-title .copy-vi { font-family: var(--body, sans-serif); font-weight: 650; font-size: 14px; line-height: 1.22; margin-top: 2px; letter-spacing: 0; color: #794118; }
.tutorial-count { flex: 0 0 auto; align-self: center; min-width: 54px; background: #ff7009; color: #292621; border-radius: 7px; padding: 7px 9px; text-align: center; font: 800 14px/1 var(--heading, sans-serif); white-space: nowrap; }
.tutorial-instruction { margin: 5px 0 0; font: 500 14px/1.25 var(--body, sans-serif); color: #3b332b; }
.tutorial-instruction .copy-en, .tutorial-instruction .copy-vi { font-size: inherit; line-height: inherit; opacity: 1; margin: 0; }
.tutorial-instruction .copy-vi { font-size: 12px; line-height: 1.25; color: #70533e; margin-top: 2px; }
.tutorial-progress { display: flex; gap: 5px; margin-top: 8px; height: 5px; align-items: stretch; width: 200px; max-width: 68%; }
.tutorial-progress i { display: block; flex: 1; min-width: 0; border-radius: 4px; background: #dfcbb8; }
.tutorial-progress i.done { background: #9c3d00; }
.tutorial-progress i.current { background: #ff7009; box-shadow: 0 0 0 2px #ff700933; }
.tutorial-step-pop .tutorial-nathan { animation: tutorial-nathan-pop .32s ease-out both; }
.language-en .tutorial-guide .copy-vi, .language-vi .tutorial-guide .copy-en { display: none; }
.language-vi .tutorial-coach-label .copy-vi::before { content: ''; }
.language-vi .tutorial-title .copy-vi { color: #292621; font-size: 18px; }
.language-vi .tutorial-instruction .copy-vi { font-size: 14px; color: #3b332b; }
@keyframes tutorial-drag-demo {
  0%, 9% { transform: translate3d(var(--guide-sx), var(--guide-sy), 0) scale(1); opacity: 0; }
  16% { transform: translate3d(var(--guide-sx), var(--guide-sy), 0) scale(.9); opacity: 1; }
  50% { transform: translate3d(var(--guide-mx), var(--guide-my), 0) scale(1); opacity: 1; }
  79%, 87% { transform: translate3d(var(--guide-ex), var(--guide-ey), 0) scale(.9); opacity: 1; }
  95%, 100% { transform: translate3d(var(--guide-ex), var(--guide-ey), 0) scale(1); opacity: 0; }
}
@keyframes tutorial-spread-demo {
  0%, 100% { transform: translate3d(var(--guide-sx), var(--guide-sy), 0); opacity: .8; }
  50% { transform: translate3d(var(--guide-ex), var(--guide-ey), 0); opacity: 1; }
}
@keyframes tutorial-nathan-pop { from { transform: translateY(12px) scale(.94); opacity: .5; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media (max-width: 900px), (max-height: 600px) {
  body.tutorial-active { --dock-height: 128px; }
  .tutorial-guide { padding: 8px max(14px, var(--safe-right, 0px)) calc(8px + var(--safe-bottom, 0px)) max(14px, var(--safe-left, 0px)); gap: 12px; border-top-width: 3px; }
  .tutorial-nathan { width: 52px; height: 70px; flex-basis: 52px; }
  .tutorial-coach-label { font-size: 8px; letter-spacing: .25px; margin-bottom: 3px; }
  .tutorial-title { font-size: 14px; letter-spacing: -.15px; }
  .tutorial-title .copy-vi { font-size: 12px; line-height: 1.2; margin-top: 1px; }
  .tutorial-count { min-width: 46px; font-size: 12px; padding: 5px 6px; }
  .tutorial-instruction { font-size: 12px; line-height: 1.22; margin-top: 4px; }
  .tutorial-instruction .copy-vi { font-size: 11px; line-height: 1.22; margin-top: 1px; }
  .tutorial-progress { margin-top: 5px; height: 4px; width: 160px; gap: 4px; }
  .tutorial-drag-cursor { width: 26px; height: 34px; }
  .language-vi .tutorial-title .copy-vi { font-size: 16px; }
  .language-vi .tutorial-instruction .copy-vi { font-size: 13px; }
}
@media (max-width: 620px) and (orientation: landscape) {
  .tutorial-guide { gap: 9px; padding-left: max(10px, var(--safe-left, 0px)); padding-right: max(10px, var(--safe-right, 0px)); }
  .tutorial-nathan { width: 48px; height: 64px; flex-basis: 48px; }
  .tutorial-heading { gap: 6px; }
  .tutorial-coach-label { font-size: 7px; }
  .tutorial-count { min-width: 42px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-drag-cursor, .tutorial-focus-layer[data-gesture="swipe"] .tutorial-drag-cursor { animation: none; opacity: .9; transform: translate3d(var(--guide-sx), var(--guide-sy), 0); }
  .tutorial-step-pop .tutorial-nathan { animation: none; }
}