.cp-plane{width:auto;max-width:97vw;margin:clamp(2px,1vh,12px) auto 0;display:block}
.s9-frame{
  position:relative;
  width:min(1440px, 97vw, calc((100vh - 288px) * 1.7778));
  aspect-ratio:16/9;
  margin:0 auto;
  
  --fw:min(1440px, 97vw, calc((100vh - 288px) * 1.7778));
  font-family:'Poppins',system-ui,Arial,sans-serif;
}


.s9-art{position:absolute;pointer-events:none}
.s9-art img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 22px 46px rgba(236,24,102,.34))}


.s9-swoosh{position:absolute;pointer-events:none}
.s9-swoosh img{width:100%;height:100%;object-fit:fill;display:block;opacity:.9}


.s9-drop{
  position:absolute;width:0;border-left:2px dotted #ec1866;opacity:.85;
  transform:translateX(-1px)}


.s9-plate{
  position:absolute;display:flex;align-items:center;justify-content:center;gap:.55em;
  background:#2a0f1c;border:1.5px solid #ec1866;border-radius:0;
  color:#fff;font-weight:700;line-height:1.2;text-align:center;
  font-family:inherit;cursor:pointer;padding:0 .5em;
  transition:background .18s cubic-bezier(.2,.7,.2,1),
             border-color .18s cubic-bezier(.2,.7,.2,1),
             transform .18s cubic-bezier(.2,.7,.2,1),
             box-shadow .18s cubic-bezier(.2,.7,.2,1);
}
.s9-plate:hover{
  background:#3d1526;border-color:#ff6aa6;transform:translateY(-2px);
  box-shadow:0 8px 26px -8px rgba(236,24,102,.75)}
.s9-plate:focus-visible{outline:2px solid #ff7ab0;outline-offset:3px}


.s9-frame{--s9-pillar-scale:1.18}
.s9-pillar{font-size:calc(var(--fw) * 0.0180 * var(--s9-pillar-scale))}

.s9-pillar .s9-ic{height:48%;width:auto;flex-shrink:0;display:block}
.s9-point{font-size:calc(var(--fw) * 0.0136)}    


.cp-pillar-2.s9-pillar{border-color:#e8c766}
.cp-pillar-2.s9-pillar:hover{border-color:#f8e493}


.s9-rail{
  background:#3a0f22;
  font-size:calc(var(--fw) * 0.0125);
  letter-spacing:.01em;
  z-index:2;
}


.s9-cta{
  position:absolute;left:50%;bottom:-2.5%;transform:translateX(-50%);
  background:linear-gradient(120deg,#ec1866,#8b5cf6);border:none;border-radius:999px;
  color:#fff;font-weight:800;font-family:inherit;cursor:pointer;
  font-size:calc(var(--fw) * 0.0180);padding:.62em 1.7em;letter-spacing:.02em;
  box-shadow:0 0 0 1px rgba(236,24,102,.35),0 12px 40px -10px rgba(236,24,102,.7);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s}
.s9-cta:hover{transform:translateX(-50%) translateY(-2px);
  box-shadow:0 0 0 1px rgba(236,24,102,.5),0 16px 48px -10px rgba(236,24,102,.85)}


.cp-plane .cp-tier,
.cp-plane .cp-pillar,
.cp-plane .cp-rail,
.cp-plane .cp-point,
.cp-plane .cp-loop,
.cp-plane .cp-cta{opacity:0}

.cp-plane-run .cp-tier{animation:cpArtIn 1.1s .5s cubic-bezier(.2,.75,.2,1) both}
@keyframes cpArtIn{from{opacity:0;transform:translateY(-30px) scale(.965)}to{opacity:1;transform:none}}

.cp-plane-run .cp-pillar{animation:cpDrop .7s cubic-bezier(.2,.8,.25,1) both}
.cp-plane-run .cp-pillar-1{animation-delay:3.00s}
.cp-plane-run .cp-pillar-0{animation-delay:3.30s}
.cp-plane-run .cp-pillar-2{animation-delay:3.60s}
@keyframes cpDrop{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}

.cp-plane-run .s9-drop{animation:cpDropLine .7s cubic-bezier(.2,.8,.25,1) both}
@keyframes cpDropLine{from{opacity:0;transform:translateX(-1px) scaleY(0)}
                      to{opacity:.85;transform:translateX(-1px) scaleY(1)}}
.cp-plane .s9-drop{transform-origin:top}

.cp-plane-run .cp-rail{animation:cpSlideL .6s cubic-bezier(.2,.8,.25,1) both}
.cp-plane-run .cp-rail-0{animation-delay:4.50s}
.cp-plane-run .cp-rail-1{animation-delay:4.75s}
.cp-plane-run .cp-rail-2{animation-delay:5.00s}
@keyframes cpSlideL{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}

.cp-plane-run .cp-loop{animation:cpFade .8s 6.10s both}
.cp-plane-run .cp-point{animation:cpRise .6s cubic-bezier(.2,.8,.25,1) both}
.cp-plane-run .cp-point-0{animation-delay:6.20s}
.cp-plane-run .cp-point-1{animation-delay:6.35s}
.cp-plane-run .cp-point-2{animation-delay:6.50s}
.cp-plane-run .cp-point-3{animation-delay:6.65s}
.cp-plane-run .cp-point-4{animation-delay:6.80s}
.cp-plane-run .cp-point-5{animation-delay:6.95s}
@keyframes cpRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.cp-plane-run .cp-cta{animation:cpCtaIn .7s 7.20s cubic-bezier(.2,.8,.25,1) both}
@keyframes cpCtaIn{from{opacity:0;transform:translateX(-50%) translateY(24px)}
                   to{opacity:1;transform:translateX(-50%)}}
@keyframes cpFade{from{opacity:0}to{opacity:1}}


@media (max-width:900px){
  .s9-frame{width:97vw;--fw:97vw}
  .s9-pillar{font-size:calc(var(--fw) * 0.021)}
  .s9-point{font-size:calc(var(--fw) * 0.016)}
}


@media (prefers-reduced-motion:reduce){
  .cp-plane .cp-tier,.cp-plane .cp-pillar,.cp-plane .cp-rail,
  .cp-plane .cp-point,.cp-plane .cp-loop,.cp-plane .cp-cta{opacity:1}
  .cp-plane-run .cp-tier,.cp-plane-run .cp-pillar,.cp-plane-run .cp-rail,
  .cp-plane-run .cp-point,.cp-plane-run .cp-loop,.cp-plane-run .cp-cta,
  .cp-plane-run .s9-drop{animation:none}
  .cp-plane .s9-drop{opacity:.85}
  .cp-plane .cp-cta{transform:translateX(-50%)}
  .s9-plate:hover{transform:none}
}