/* The original captures stay intact; only their presentation moves. */
.my-schedule .stage-art{pointer-events:none}
.my-schedule .screenshot-deck{--shot-height:448px;position:absolute;inset:0 4% 0 auto;width:72%;perspective:1400px;z-index:1;transform:translateZ(-60px)}
.my-schedule .schedule-shot{
  pointer-events:auto;
  position:absolute;left:50%;top:7px;
  height:var(--shot-height);width:calc((var(--shot-height) - 12px) * 1284 / 2778 + 12px);
  border:6px solid #f8faff;border-radius:28px;background:#f8faff;
  box-shadow:0 0 0 1px #d1dbea,0 28px 48px -14px #3e5f8b45,0 5px 12px #29496d12;
  transform-origin:50% 80%;transition:transform .8s cubic-bezier(.22,.8,.2,1),filter .8s,box-shadow .8s;
}
.my-schedule .schedule-shot img{width:100%;height:100%;object-fit:contain;border-radius:21px;pointer-events:none}
.my-schedule .schedule-shot[data-position=front]{z-index:3;transform:translateX(-50%) translateY(10px) rotate(3deg);filter:none}
.my-schedule .schedule-shot[data-position=left]{z-index:1;transform:translateX(-100%) translateY(-6px) rotate(-12deg) scale(.86);filter:brightness(.95) saturate(.78);cursor:pointer}
.my-schedule .schedule-shot[data-position=right]{z-index:2;transform:translateX(-3%) translateY(5px) rotate(13deg) scale(.86);filter:brightness(.97) saturate(.8);cursor:pointer}
.my-schedule .screens .screen-preview{
  display:grid;place-items:center;padding:40px 28px;border:1px solid #e1e7f0;border-radius:16px;
  background:linear-gradient(145deg,#ffffff 0%,#f1f5fb 55%,#eaf0f8 100%);perspective:1100px;overflow:hidden;
  transition:box-shadow .5s,border-color .5s;
}
.my-schedule .screens img{
  width:min(100%,224px);height:auto;border:6px solid #f8faff;border-radius:28px;
  box-shadow:0 0 0 1px #d1dbea,12px 24px 35px -12px #45628938;
  transform:rotateY(-9deg) rotateZ(-3deg);transition:transform .65s cubic-bezier(.22,.8,.2,1),box-shadow .65s;
}
.my-schedule .screens figure:nth-child(2) img{transform:rotateY(0deg) translateY(-3px)}
.my-schedule .screens figure:nth-child(3) img{transform:rotateY(9deg) rotateZ(3deg)}
@media(hover:hover) and (pointer:fine){
  .my-schedule .screens .screen-preview:hover{border-color:#bfd5ee;box-shadow:0 18px 38px -25px #45628960}
  .my-schedule .screens .screen-preview:hover img{transform:rotateY(0deg) rotateZ(0deg) translateY(-8px);box-shadow:0 0 0 1px #d1dbea,0 28px 40px -16px #45628950}
}
.my-schedule .screens .screen-preview:focus-visible img{transform:none}
@media(max-width:1050px){.my-schedule .screenshot-deck{--shot-height:365px;top:35px;width:76%}}
@media(max-width:760px){
  .my-schedule .screenshot-deck{--shot-height:360px;top:6px;width:80%;right:8%}
  .my-schedule .schedule-shot[data-position=left]{transform:translateX(-85%) translateY(-6px) rotate(-10deg) scale(.78)}
  .my-schedule .schedule-shot[data-position=right]{transform:translateX(-15%) translateY(5px) rotate(10deg) scale(.78)}
  .my-schedule .screens figure{width:100%}
  .my-schedule .screens .screen-preview{padding:36px 28px}
}
@media(max-width:360px){.my-schedule .screenshot-deck{--shot-height:310px;right:10%;width:78%}}
@media(prefers-reduced-motion:reduce){.my-schedule .schedule-shot,.my-schedule .screens img{transition:none}}
