/* Keyframes used by 02-tutorial-walkthrough. "A"/"B" twins exist so a replay can restart CSS animations by swapping names. */
@keyframes pmgFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
@keyframes pmgWaRowA{from{opacity:0;transform:translateX(-10px);background:#f3eef7}60%{background:#f3eef7}to{opacity:1;transform:none;background:#fff}}
@keyframes pmgWaRowB{from{opacity:0;transform:translateX(-10px);background:#f3eef7}60%{background:#f3eef7}to{opacity:1;transform:none;background:#fff}}
@keyframes pmgTypA{0%{opacity:0;max-height:0;padding:0 11px;margin-bottom:-5px;transform:translateY(6px)}15%{opacity:1;max-height:40px;padding:9px 11px;margin-bottom:0;transform:none}80%{opacity:1;max-height:40px;padding:9px 11px;margin-bottom:0}100%{opacity:0;max-height:0;padding:0 11px;margin-bottom:-5px}}
@keyframes pmgTypB{0%{opacity:0;max-height:0;padding:0 11px;margin-bottom:-5px;transform:translateY(6px)}15%{opacity:1;max-height:40px;padding:9px 11px;margin-bottom:0;transform:none}80%{opacity:1;max-height:40px;padding:9px 11px;margin-bottom:0}100%{opacity:0;max-height:0;padding:0 11px;margin-bottom:-5px}}
@keyframes pmgDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
@keyframes pmgHSA{0%{opacity:0;transform:translateY(14px) scale(.985)}6%{opacity:1;transform:none}93%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
@keyframes pmgHTA{0%,100%{color:#3d3947;background:#fff;border-color:#e6e2eb;box-shadow:none}4%,96%{color:#fff;background:#7c4f99;border-color:#7c4f99;box-shadow:0 4px 12px -6px rgba(124,79,153,.6)}}
@keyframes pmgSeatA{from{background:#fff;border-color:#d9d3e2}to{background:#7c4f99;border-color:#7c4f99}}
@keyframes pmgOutA{from{opacity:1}to{opacity:0}}
@keyframes pmgHSB{0%{opacity:0;transform:translateY(14px) scale(.985)}6%{opacity:1;transform:none}93%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
@keyframes pmgHTB{0%,100%{color:#3d3947;background:#fff;border-color:#e6e2eb;box-shadow:none}4%,96%{color:#fff;background:#7c4f99;border-color:#7c4f99;box-shadow:0 4px 12px -6px rgba(124,79,153,.6)}}
@keyframes pmgSeatB{from{background:#fff;border-color:#d9d3e2}to{background:#7c4f99;border-color:#7c4f99}}
@keyframes pmgOutB{from{opacity:1}to{opacity:0}}
@keyframes pmgTypeWA{from{max-width:0}to{max-width:180px}}
@keyframes pmgGoneA{from{opacity:1;max-height:40px}to{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin:0;border-width:0}}
@keyframes pmgFillA{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pmgTypeWB{from{max-width:0}to{max-width:180px}}
@keyframes pmgGoneB{from{opacity:1;max-height:40px}to{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin:0;border-width:0}}
@keyframes pmgFillB{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pmgSelA{from{border-color:#e3dfe8;box-shadow:none}to{border-color:#7c4f99;box-shadow:0 0 0 2px rgba(124,79,153,.18)}}
@keyframes pmgUnselA{from{border-color:#7c4f99;box-shadow:0 0 0 2px rgba(124,79,153,.18)}to{border-color:#e3dfe8;box-shadow:none}}
@keyframes pmgRingA{0%,100%{box-shadow:none;border-color:#e3dfe8}20%,80%{box-shadow:0 0 0 3px rgba(124,79,153,.22);border-color:#7c4f99}}
@keyframes pmgChipA{from{background:#fff;color:#4c4956;border-color:#e3dfe8}to{background:#2D2340;color:#fff;border-color:#2D2340}}
@keyframes pmgChipOffA{from{background:#2D2340;color:#fff;border-color:#2D2340}to{background:#fff;color:#4c4956;border-color:#e3dfe8}}
@keyframes pmgCheckA{from{background:#fff;border-color:#cfc8d8}to{background:#7c4f99;border-color:#7c4f99}}
@keyframes pmgSelB{from{border-color:#e3dfe8;box-shadow:none}to{border-color:#7c4f99;box-shadow:0 0 0 2px rgba(124,79,153,.18)}}
@keyframes pmgUnselB{from{border-color:#7c4f99;box-shadow:0 0 0 2px rgba(124,79,153,.18)}to{border-color:#e3dfe8;box-shadow:none}}
@keyframes pmgRingB{0%,100%{box-shadow:none;border-color:#e3dfe8}20%,80%{box-shadow:0 0 0 3px rgba(124,79,153,.22);border-color:#7c4f99}}
@keyframes pmgChipB{from{background:#fff;color:#4c4956;border-color:#e3dfe8}to{background:#2D2340;color:#fff;border-color:#2D2340}}
@keyframes pmgChipOffB{from{background:#2D2340;color:#fff;border-color:#2D2340}to{background:#fff;color:#4c4956;border-color:#e3dfe8}}
@keyframes pmgCheckB{from{background:#fff;border-color:#cfc8d8}to{background:#7c4f99;border-color:#7c4f99}}
@keyframes pmgMoveTA{0%{transform:translate(-50%,-50%)}15%{transform:translate(-50%,-50%) scale(1.06)}85%{transform:translate(calc(-50% + 52px),calc(-50% - 14px)) scale(1.06)}100%{transform:translate(calc(-50% + 52px),calc(-50% - 14px))}}
@keyframes pmgMoveTB{0%{transform:translate(-50%,-50%)}15%{transform:translate(-50%,-50%) scale(1.06)}85%{transform:translate(calc(-50% + 52px),calc(-50% - 14px)) scale(1.06)}100%{transform:translate(calc(-50% + 52px),calc(-50% - 14px))}}
@keyframes pmgDragSA{0%{left:86%;top:24%;opacity:0}12%{opacity:1}85%{left:39%;top:30%;opacity:1}100%{left:39%;top:30%;opacity:0}}
@keyframes pmgScrollEA{0%{transform:translateY(0)}36%{transform:translateY(-238px)}70%{transform:translateY(-238px)}100%{transform:translateY(-470px)}}
@keyframes pmgSelDA{to{border-color:#2D2340;box-shadow:0 0 0 2px rgba(45,35,64,.12)}}
@keyframes pmgSwOffA{to{box-shadow:none}}
@keyframes pmgSwOnA{to{box-shadow:0 0 0 2px #fff,0 0 0 3px #2D2340}}
@keyframes pmgFgA{to{color:#7c4f99}}
@keyframes pmgDragSB{0%{left:86%;top:24%;opacity:0}12%{opacity:1}85%{left:39%;top:30%;opacity:1}100%{left:39%;top:30%;opacity:0}}
@keyframes pmgScrollEB{0%{transform:translateY(0)}36%{transform:translateY(-238px)}70%{transform:translateY(-238px)}100%{transform:translateY(-470px)}}
@keyframes pmgSelDB{to{border-color:#2D2340;box-shadow:0 0 0 2px rgba(45,35,64,.12)}}
@keyframes pmgSwOffB{to{box-shadow:none}}
@keyframes pmgSwOnB{to{box-shadow:0 0 0 2px #fff,0 0 0 3px #2D2340}}
@keyframes pmgFgB{to{color:#7c4f99}}
@keyframes pmgGrowRA{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:translateY(-6px)}100%{opacity:1;max-height:40px;padding-top:8px;padding-bottom:8px;transform:none}}
@keyframes pmgGrowBA{0%{opacity:0;max-height:0}100%{opacity:1;max-height:36px}}
@keyframes pmgGrowRB{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:translateY(-6px)}100%{opacity:1;max-height:40px;padding-top:8px;padding-bottom:8px;transform:none}}
@keyframes pmgGrowBB{0%{opacity:0;max-height:0}100%{opacity:1;max-height:36px}}
@keyframes pmgRevA{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pmgRevB{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pmgRing{0%{box-shadow:0 0 0 0 rgba(37,165,95,.45)}70%{box-shadow:0 0 0 9px rgba(37,165,95,0)}100%{box-shadow:0 0 0 0 rgba(37,165,95,0)}}
@keyframes pmgHalo{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:.85;transform:translateX(-50%) scale(1.06)}}
@keyframes pmgSheen{0%,100%{transform:translateX(-30%) rotate(18deg);opacity:.0}45%{opacity:.18}55%{transform:translateX(130%) rotate(18deg);opacity:0}}
@keyframes pmgTapA{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}15%{opacity:.55}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
@keyframes pmgPressA{0%,100%{transform:scale(1)}40%{transform:scale(.86)}}
@keyframes pmgTapB{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}15%{opacity:.55}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
@keyframes pmgPressB{0%,100%{transform:scale(1)}40%{transform:scale(.86)}}

/* Player chrome. Prototype pause rule, scoped so idle poster and reduced-motion steps stay usable. */
[data-pmg-holo][data-paused="1"] [data-holo-live],
[data-pmg-holo][data-paused="1"] [data-holo-live] * {
  animation-play-state: paused !important;
}
[data-pmg-holo][data-state="idle"] [data-holo-live],
[data-pmg-holo][data-state="idle"] [data-holo-toggle],
[data-pmg-holo][data-state="idle"] [data-holo-music] { display: none; }
[data-pmg-tutorial] [data-holo-steps] {
  display: none;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 14px auto 0;
  max-width: 760px;
}
[data-pmg-tutorial]:has([data-pmg-holo].is-stepped) [data-holo-steps] { display: flex; }
[data-pmg-holo].is-stepped [data-scene] { animation: none !important; opacity: 0 !important; }
[data-pmg-holo].is-stepped [data-scene].is-on { opacity: 1 !important; }
[data-pmg-holo] [data-holo-steps] button {
  border: 1px solid #e3dfe8;
  background: #fff;
  color: #3d3450;
  border-radius: 4px;
  padding: 8px 12px;
  font: 700 13px/1 'Assistant', sans-serif;
  cursor: pointer;
}
[data-pmg-holo] [data-holo-steps] button[aria-current="true"] {
  background: #7c4f99;
  border-color: #7c4f99;
  color: #fff;
}
[data-pmg-holo] [data-holo-replay] {
  flex: none;
  border: 1px solid #ddd0e8;
  background: #fff;
  color: #5f3b76;
  border-radius: 4px;
  padding: 6px 10px;
  font: 700 12px/1 'Assistant', sans-serif;
  cursor: pointer;
}
@media (max-width: 760px) {
  [data-pmg-holo] [data-holo-stage] { height: 420px !important; }
  [data-pmg-holo] [data-holo-idle] > div:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-pmg-holo] [data-pmg-float],
  [data-pmg-holo] [data-holo-live],
  [data-pmg-holo] [data-holo-live] * { animation: none !important; }
}