.tutorial-presentation {
  position: fixed;
  inset: 0;
  z-index: var(--app-layer-coach);
  color: var(--app-text);
  pointer-events: none;
}
.tutorial-presentation[hidden] { display: none; }
.tutorial-presentation__focus {
  position: fixed;
  left: var(--tutorial-focus-left, 0px);
  top: var(--tutorial-focus-top, 0px);
  width: var(--tutorial-focus-width, 1px);
  height: var(--tutorial-focus-height, 1px);
  box-sizing: border-box;
  border: 3px solid var(--app-accent);
  border-radius: var(--panel-radius);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--app-accent) 24%, transparent), 0 0 34px color-mix(in srgb, var(--app-accent) 72%, transparent);
  animation: tutorial-presentation-focus 1.05s ease-in-out infinite;
}
.tutorial-presentation[data-camera-mode="closeup"] .tutorial-presentation__focus {
  border-width: 4px;
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--app-accent) 28%, transparent), 0 0 46px color-mix(in srgb, var(--app-accent) 82%, transparent);
}
.tutorial-presentation__cursor {
  position: fixed;
  left: var(--tutorial-cursor-x, 24px);
  top: var(--tutorial-cursor-y, 24px);
  width: 34px;
  height: 34px;
  border: 3px solid var(--status-warning-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--status-warning-bg) 72%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--status-warning-border) 24%, transparent), 0 0 22px color-mix(in srgb, var(--status-warning-border) 75%, transparent);
  transform: translate(-50%, -50%);
  transition: left var(--tutorial-cursor-duration, 360ms) cubic-bezier(.2, .8, .2, 1), top var(--tutorial-cursor-duration, 360ms) cubic-bezier(.2, .8, .2, 1);
}
.tutorial-presentation[data-state="ready"] .tutorial-presentation__focus,
.tutorial-presentation[data-state="ready"] .tutorial-presentation__cursor,
.tutorial-presentation[data-state="ready"] .tutorial-presentation__ripple,
.tutorial-presentation[data-state="target-lost"] .tutorial-presentation__focus,
.tutorial-presentation[data-state="target-lost"] .tutorial-presentation__cursor,
.tutorial-presentation[data-state="target-lost"] .tutorial-presentation__ripple,
.tutorial-presentation[data-cursor-visible="false"] .tutorial-presentation__cursor,
.tutorial-presentation[data-cursor-visible="false"] .tutorial-presentation__ripple { display: none; }
.tutorial-presentation__cursor span {
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background: var(--status-danger-border);
}
.tutorial-presentation__ripple {
  position: fixed;
  left: var(--tutorial-cursor-x, 24px);
  top: var(--tutorial-cursor-y, 24px);
  width: 22px;
  height: 22px;
  border: 3px solid var(--status-danger-border);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
}
.tutorial-presentation__ripple.is-active { animation: tutorial-presentation-ripple 620ms ease-out; }
.tutorial-presentation__caption {
  position: fixed;
  left: clamp(18px, 3vw, 56px);
  top: clamp(72px, 10vh, 130px);
  width: min(390px, calc(100vw - 36px));
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 64%, var(--app-line));
  border-radius: var(--panel-radius);
  background: color-mix(in srgb, var(--app-panel) 94%, transparent);
  box-shadow: var(--app-popover-shadow);
  backdrop-filter: blur(16px);
}
.tutorial-presentation[data-caption-placement="bottom"] .tutorial-presentation__caption {
  top: auto;
  bottom: clamp(78px, 12vh, 148px);
}
.tutorial-presentation__caption[hidden],
.tutorial-presentation__subtitle[hidden],
.tutorial-presentation__camera[hidden] { display: none; }
.tutorial-presentation__caption small { color: var(--app-accent-readable); font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.tutorial-presentation__caption strong { color: var(--app-text); font-size: 20px; line-height: 1.25; }
.tutorial-presentation__caption span { color: var(--app-secondary); font-size: 13px; line-height: 1.55; }
.tutorial-presentation__subtitle {
  position: fixed;
  left: 50%;
  bottom: clamp(24px, 5vh, 64px);
  max-width: min(980px, calc(100vw - 48px));
  padding: 9px 16px;
  border: 1px solid var(--app-line);
  border-radius: var(--control-radius);
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-panel) 94%, transparent);
  box-shadow: var(--app-popover-shadow);
  font-size: clamp(18px, 1.45vw, 28px);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
}
.tutorial-presentation__camera {
  position: fixed;
  right: clamp(18px, 3vw, 56px);
  top: clamp(72px, 10vh, 130px);
  padding: 7px 11px;
  border: 1px solid var(--status-warning-border);
  border-radius: 999px;
  color: var(--status-warning-text);
  background: var(--status-warning-bg);
  font-size: 12px;
  font-weight: 850;
}
@keyframes tutorial-presentation-focus { 0%, 100% { opacity: .74; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }
@keyframes tutorial-presentation-ripple { 0% { opacity: .94; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.5); } }
@media (prefers-reduced-motion: reduce) {
  .tutorial-presentation__focus,
  .tutorial-presentation__ripple.is-active { animation: none !important; }
  .tutorial-presentation__cursor { transition: none; }
}