.triangle-motion-canvas{display:none;width:auto;height:min(78svh,818px);max-width:100%;aspect-ratio:1;margin:auto;filter:drop-shadow(2px 5px 5px rgba(35,40,46,.13)) drop-shadow(0 1px 1px rgba(35,40,46,.08))}
.pleated-page #system-panel>.triangle-motion.triangle-motion-ready>img{display:none}
.triangle-motion-ready .triangle-motion-canvas{display:block}
@media(max-width:600px){.triangle-motion-canvas{width:100%;height:auto}}

.triangle-motion-stage{display:none;position:relative;width:min(calc(100% - 90px),78svh,818px);margin:auto}
.triangle-motion-ready .triangle-motion-stage{display:block}
.triangle-motion-stage .triangle-motion-canvas{width:100%;height:auto}
.triangle-motion-handle{position:absolute;left:49.6%;transform:translate(-50%,-50%);width:54px;height:44px;padding:0;border:0;background:transparent;cursor:grab;touch-action:none;z-index:3}
.triangle-motion-handle.dragging{cursor:grabbing}
.triangle-motion-handle:focus-visible{outline:2px solid #d96676;outline-offset:2px;border-radius:8px}
.triangle-motion-hint{position:absolute;left:49.6%;right:-88px;transform:translateY(-50%);display:flex;align-items:center;gap:12px;pointer-events:none;font-size:20px;font-weight:500;white-space:nowrap;color:#555}
.triangle-motion-hint:before{content:"";flex:1;height:1px;background:linear-gradient(90deg,#dd687b88,#d8d8da);margin-left:14px}
.triangle-motion-pulse{display:block;position:relative;flex-shrink:0;width:11px;height:11px;border:2px solid #df6575;border-radius:50%;background:white;box-sizing:content-box}
.triangle-motion-handle .triangle-motion-pulse{margin:auto}
.triangle-motion-pulse:before,.triangle-motion-pulse:after{content:"";position:absolute;inset:-3px;border:1px solid #df6575;border-radius:50%;animation:triangle-handle-pulse 2.4s ease-out infinite}
.triangle-motion-pulse:after{animation-delay:1.2s}
@keyframes triangle-handle-pulse{from{transform:scale(1);opacity:.7}to{transform:scale(2.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.triangle-motion-pulse:before,.triangle-motion-pulse:after{animation:none;opacity:.2}}
@media(max-width:600px){.triangle-motion-stage{width:calc(100% - 76px);margin-left:0}.triangle-motion-hint{right:-74px;font-size:18px;gap:8px}}