:root{--shadow:0 24px 60px rgba(0,0,0,.35)}
/* Root frame keeps constant viewport; steps overlay inside */
.mst-pearl-orbit{
  position:relative;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  color:#fff;
  aspect-ratio:16/7;   /* fixed frame */
  overflow:hidden;     /* hide outgoing step */
}

/* Steps overlay in the same frame */
.mstpo-step{
  position:absolute; top:0; left:0; right:0; bottom:0;
  opacity:0; transform:scale(.98);
  transition:opacity .54s ease, transform .54s ease;
  will-change:opacity,transform;
  pointer-events:none;
}
.mstpo-in{opacity:1; transform:scale(1); pointer-events:auto; z-index:10}
.mstpo-out{z-index:0}
.mstpo-leave{opacity:0; transform:scale(1.04)}
.mstpo-enter{opacity:1; transform:scale(1)}

/* STEP 1 */
.step1-wrapper{ display:flex; align-items:center; justify-content:center }
.step1-pick{position:relative; width:100%; height:100%}
.step1-ellipse{position:absolute; left:50%; top:58%; width:56%; height:42%; transform:translate(-50%,-50%); border:2px dotted rgba(255,255,255,.5); border-radius:50%}
.step1-bigpearl{position:absolute; left:50%; top:58%; width:240px; height:240px; transform:translate(-50%,-50%); display:grid; place-items:center}
.step1-bigpearl img{max-width:100%; height:auto; filter:drop-shadow(0 12px 24px rgba(0,0,0,.4))}
.mstpo-color-fill{display:block; width:100%; height:100%; border-radius:999px; box-shadow:var(--shadow)}
.step1-orbit{position:absolute; inset:0}
.step1-pearl{position:absolute; width:70px; height:70px; transform:translate(-50%,-50%); cursor:pointer; border:0; background:transparent}
.step1-pearl img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
.step1-label{position:absolute; top:-28px; left:50%; transform:translateX(-50%); font-weight:600; text-shadow:0 2px 10px rgba(0,0,0,.45)}
.step1-caption{position:absolute; left:50%; bottom:8%; transform:translateX(-50%); font-weight:700}
.mstpo-color-black{background:#0b0b0b} .mstpo-color-white{background:#f5f5f5}
.mstpo-color-gold{background:linear-gradient(135deg,#e5d188,#b48a1f)} .mstpo-color-pink{background:#ffd1dc}

/* STEP 2 */
.step2-left{position:absolute; left:140px; top:120px; z-index:5; display:flex; flex-direction:column; gap:14px}
.step2-title{font-weight:700}
.step2-cats{display:flex; flex-direction:column; gap:14px}
.step2-cat{width:140px;height:54px;border-radius:12px;background:#ececec;color:#111;font-weight:700;box-shadow:0 10px 28px rgba(0,0,0,.18);cursor:pointer;border:0}
.step2-cat.is-active{background:#fff;box-shadow:0 16px 40px rgba(0,0,0,.28)}
.step2-rail{position:absolute; right:120px; top:100px; z-index:5; display:flex; flex-direction:column; gap:26px}
.mstpo-rail-pearl{width:64px; height:64px; border-radius:999px; border:0; cursor:pointer; overflow:hidden; background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.35)}
.mstpo-rail-pearl img{width:100%; height:100%; object-fit:contain}
.step2-stage{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center}
.step2-orbit{position:absolute; inset:0}
.step2-orbit::before{content:""; position:absolute; left:50%; top:58%; width:68%; height:40%; transform:translate(-50%,-50%); border:2px dashed rgba(255,255,255,.55); border-radius:50%}
.mstpo-item{position:absolute; width:90px; height:90px; border-radius:16px; overflow:hidden; transform:translate(-50%,-50%); box-shadow:var(--shadow); cursor:pointer}
.mstpo-item img{width:100%; height:100%; object-fit:cover}
.step2-center{position:relative; z-index:4; width:420px; text-align:center}
.step2-center-pearl{position:relative; width:360px; height:360px; margin:0 auto 10px; border-radius:999px; background:#0b0b0b; box-shadow:0 28px 70px rgba(0,0,0,.55), inset 0 -10px 40px rgba(255,255,255,.15)}
.step2-center-img{display:none; width:360px; height:360px; margin:0 auto 10px; border-radius:26px; background:center/contain no-repeat; box-shadow:var(--shadow)}
.step2-center-title{margin-bottom:8px}
.step2-next-wrap{margin-top:8px} .step2-next-btn{padding:10px 24px;border-radius:12px;border:0;font-weight:700;cursor:pointer}

/* STEP 3 exact layout */
.step3-wrap{display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap:40px; align-items:center; padding:40px 40px 10px}
.step3-left,.step3-right{height:320px; width:320px; background:rgba(255,255,255,.15); border-radius:34px; backdrop-filter:blur(2px); box-shadow:0 12px 28px rgba(0,0,0,.25); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; cursor:pointer; position:relative}
.step3-ghost-left{width:160px; height:160px; border:4px dotted #000; border-radius:30px; opacity:.6; background:rgba(255,255,255,.25)}
.step3-ghost-right{width:240px; opacity:.9}
.step3-label-left,.step3-label-right{font-weight:800; font-size:22px}
.mstpo-acc-check{position:absolute; left:18px; top:18px; background:#fff; color:#111; width:36px; height:36px; border-radius:999px; display:none; align-items:center; justify-content:center; font-weight:900}
.mstpo-acc-card.is-active .mstpo-acc-check{display:flex}
.step3-center{display:grid; place-items:center; position:relative}
.step3-main{width:520px; height:520px; border-radius:26px; background:center/contain no-repeat; box-shadow:var(--shadow)}
.step3-overlay{position:absolute; top:-6%; left:50%; transform:translateX(-50%); max-width:82%; pointer-events:none; filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.step3-cta{position:absolute; left:0; right:0; bottom:14px; display:flex; gap:16px; justify-content:center; align-items:center}
.mstpo-btn{padding:10px 16px; border-radius:10px; border:0; cursor:pointer}
.mstpo-primary{background:#fff; color:#111; font-weight:800}