.tutorial-overlay { position: fixed; inset: 0; z-index: 1000; }
.tutorial-shade { position: fixed; background: rgba(0, 0, 0, .78); pointer-events: auto; }
.tutorial-focus { position: fixed; border: 2px dashed var(--primary); box-shadow: 0 0 18px rgba(129, 210, 138, .5), inset 0 0 14px rgba(129, 210, 138, .14); pointer-events: none; }
.tutorial-callout { position: fixed; z-index: 2; border-right: 2px solid var(--primary); border-left: 2px solid var(--primary); padding: 20px; background: linear-gradient(90deg, rgba(129, 210, 138, .16), rgba(25, 27, 26, .98) 25%, rgba(25, 27, 26, .98) 75%, rgba(129, 210, 138, .16)); box-shadow: 0 16px 50px rgba(0, 0, 0, .55); }
.tutorial-progress { margin: 0 0 8px; color: var(--secondary); font: 11px/1 var(--font-mono); letter-spacing: .12em; }
.tutorial-callout h2 { margin: 0 0 9px; color: var(--primary); font: 600 23px/1.15 var(--font-display); }
.tutorial-copy { margin: 0; color: var(--text); font-size: 15px; line-height: 1.55; }
.tutorial-error { min-height: 17px; margin: 8px 0 0; color: var(--danger); font: 11px/1.4 var(--font-mono); }
.tutorial-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 10px; }
.tutorial-actions .button { padding: 9px 13px; font: 11px/1.2 var(--font-mono); text-transform: uppercase; }
.tutorial-skip { margin-right: auto; color: var(--muted); }
.tutorial-arrow { position: fixed; z-index: 1; height: 2px; background: var(--primary); pointer-events: none; transform-origin: 0 50%; }
.tutorial-arrow::after { position: absolute; top: -5px; right: -1px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--primary); content: ''; }

@media (max-width: 520px) {
  .tutorial-callout { padding: 16px; }
  .tutorial-callout h2 { font-size: 20px; }
  .tutorial-copy { font-size: 14px; }
  .tutorial-actions { flex-wrap: wrap; }
  .tutorial-skip { width: 100%; margin-right: 0; }
}