.mys3d { position: relative; isolation: isolate; min-height: 0; }
.mys3d .stage {
  position: relative; height: 520px; perspective: 1100px;
  touch-action: pan-y;
}
.mys3d .stage::after {
  content: ""; position: absolute; inset: 8% 6%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at var(--mx, 62%) var(--my, 42%), rgba(225, 6, 0, .16), transparent 46%);
}
.mys3d .world {
  position: absolute; left: 50%; top: 48%; width: 850px; height: 590px; z-index: 1;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(var(--rx, 6deg)) rotateY(var(--ry, -12deg)) scale(var(--scale, .68));
}
.mys3d .floor {
  position: absolute; width: 900px; height: 340px; top: 370px; left: -30px;
  transform: rotateX(77deg) translateZ(-125px);
  background: radial-gradient(ellipse, rgba(225, 6, 0, .22), transparent 70%);
  border-radius: 50%;
}
.mys3d .device {
  position: absolute; transform-style: preserve-3d; cursor: pointer;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,.55));
}
.mys3d .device:hover { filter: drop-shadow(0 24px 32px rgba(225, 6, 0, .35)); }
.mys3d .bezel {
  width: 100%; height: 100%; padding: 10px; border: 2px solid #3a3a40; border-radius: 20px;
  background: linear-gradient(145deg, #2a2a2e, #0c0c0e 46%, #1c1c20);
  box-shadow: inset 0 0 0 3px #070708, 0 0 0 1px rgba(255,255,255,.08);
  overflow: hidden;
}
.mys3d .bezel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 9px; }
.mys3d .monitor {
  width: 650px; height: 380px; top: 20px; left: 115px;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), calc(-80px + var(--lz, 0px))) rotateY(calc(-4deg + var(--ryb, 0deg)));
}
.mys3d .monitor .stem { position: absolute; width: 28px; height: 96px; left: 48%; top: 99%; background: linear-gradient(90deg, #2a2a2e, #8a8a90, #1a1a1e); }
.mys3d .monitor .foot { position: absolute; width: 220px; height: 14px; left: 34%; top: 122%; border-radius: 50%; background: #3a3a40; }
.mys3d .tablet {
  width: 530px; height: 290px; top: 305px; left: 0;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), calc(115px + var(--lz, 0px))) rotateY(calc(8deg + var(--ryb, 0deg))) rotateX(calc(5deg + var(--rxb, 0deg)));
}
.mys3d .tablet .bezel { border-radius: 24px; padding: 12px; }
.mys3d .phone {
  width: 166px; height: 315px; left: 570px; top: 270px;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), calc(175px + var(--lz, 0px))) rotateY(calc(-12deg + var(--ryb, 0deg)));
}
.mys3d .phone .bezel { border-radius: 30px; padding: 8px; }
.mys3d .notch { position: absolute; top: 12px; left: 34%; width: 32%; height: 12px; background: #050506; border-radius: 12px; z-index: 2; }
.mys3d .device.is-hot { filter: drop-shadow(0 28px 36px rgba(225, 6, 0, .42)); }
.mys3d .viewer {
  position: fixed; z-index: 80; inset: 0; background: rgba(7, 7, 8, .92);
  display: grid; place-items: center; padding: 64px 20px;
}
.mys3d .viewer[hidden] { display: none; }
.mys3d .viewer img { max-width: min(1100px, 94vw); max-height: 84vh; object-fit: contain; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: #0c0c0e; }
.mys3d .viewer button {
  position: absolute; top: 16px; right: 16px; color: #fff; background: #e10600;
  border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 800;
}
@media (max-width: 900px) {
  .mys3d .stage { height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .mys3d .world, .mys3d .device { transition: none; }
}