/* A few meaningful moments, with the full body kept visible in the player. */
#screen-tutorial [hidden] { display: none !important; }
#screen-tutorial .tut-stance-caption {
  margin: 10px 0 0; color: var(--p-muted); font-size: 11px; line-height: 1.7;
}
.tut-keyframes { padding: 14px 20px; margin-top: 8px; border-top: 1px solid var(--p-line); }
#screen-tutorial .tut-lesson-heading { padding-bottom: 16px; }
.tut-keyframes h4 { margin: 0; font: 700 13px/1.7 var(--p-font); color: var(--p-ink); }
.tut-keyframe-hint { margin: 3px 0 10px; font: 400 11px/1.7 var(--p-font); color: var(--p-muted); }
.tut-keyframe-buttons { display: flex; gap: 6px; }
.tut-keyframe-buttons button {
  display: flex; flex: 1; min-width: 0; min-height: 48px; align-items: center; justify-content: center;
  gap: 6px; padding: 9px 8px; border: 1px solid var(--p-line); border-radius: 10px;
  background: var(--p-bg); color: var(--p-ink); font: 650 11px/1.55 var(--p-font); cursor: pointer;
}
.tut-keyframe-number { color: var(--p-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.tut-keyframe-buttons button[aria-pressed="true"] {
  border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); background: var(--p-raised);
}
.tut-keyframe-buttons button[aria-pressed="true"] .tut-keyframe-number { color: var(--p-accent); }
.tut-keyframe-cue { min-height: 3.4em; margin: 10px 0 0; color: var(--p-muted); font: 400 12px/1.7 var(--p-font); text-wrap: pretty; }
.tut-self-practice {
  margin: 0 0 20px; padding: 20px; background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 18px;
}
.tut-self-practice h4 { margin: 0; font: 750 16px/1.6 var(--p-font); letter-spacing: -.025em; color: var(--p-ink); }
.tut-self-practice .tut-practice-note { margin: 12px 0 16px; font: 400 13px/1.85 var(--p-font); color: var(--p-ink); }
#tut-practice-pause {
  width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--p-ink); border-radius: 11px;
  background: var(--p-ink); color: var(--p-paper); font: 650 12px/1.6 var(--p-font); cursor: pointer;
}
.tut-practice-scope { margin: 10px 0 0; font: 400 11px/1.7 var(--p-font); color: var(--p-muted); text-align: center; }
.tut-practice-status { margin: 0; color: var(--p-accent); font: 500 12px/1.8 var(--p-font); }
.tut-practice-status:not(:empty) { margin-top: 12px; }
.tut-keyframe-buttons button:focus-visible, #tut-practice-pause:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tut-keyframe-buttons button:hover { border-color: var(--p-accent); }
}
@media (max-width: 359px) {
  .tut-keyframes { padding-inline: 12px; }
  .tut-keyframe-buttons { gap: 4px; }
  .tut-keyframe-buttons button { flex-direction: column; gap: 2px; padding: 7px 3px; font-size: 10px; }
  .tut-self-practice { padding: 16px; }
}
@media (min-width: 900px) and (max-height: 1050px) {
  #screen-tutorial .tutorial-header .back-btn { position: absolute; top: 18px; left: 24px; }
  #screen-tutorial .tutorial-heading { padding: 0 245px 0 100px; max-width: none; }
  #screen-tutorial .tutorial-eyebrow { margin-bottom: 4px; }
  #screen-tutorial .tutorial-title { font-size: 30px; }
  #screen-tutorial .tutorial-tabs { padding-block: 12px; }
  .tutorial-player { position: static; }
  #screen-tutorial .tutorial-stage { height: clamp(300px, 42svh, 440px); }
}
@media (prefers-reduced-motion: reduce) {
  .tut-keyframe-buttons button, #tut-practice-pause { animation: none !important; transition: none !important; }
}