.frame17{
  position:relative; container-type:inline-size; width:100vw; height:100svh; min-height:360px;
  background:#000; color:#d9d9d9; overflow:hidden;
  font-family:'Directory Albert','Portfolio CJK',sans-serif; font-synthesis:none;
}
.frame17-window{
  position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;
  background:radial-gradient(ellipse at 50% 58.38%,#000 0%,#030304 17%,#0c0d10 56%,#17191d 100%);
}
.frame17-window[data-dragging]{cursor:grabbing}
.frame17-window:focus-visible{outline:1px solid #a7b7c8;outline-offset:-1px}
.frame17-camera{
  width:1748px;height:var(--camera-height,740px);position:absolute;left:0;top:0;
  transform:scale(var(--camera-scale,1));transform-origin:0 0;
  perspective:940px;perspective-origin:50% 50%;
}
.frame17-rotor{
  position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%;
  transform:rotateZ(var(--drum-angle,0deg));transition:transform 420ms cubic-bezier(.2,.65,.25,1);
}
.frame17-window[data-dragging] .frame17-rotor{transition:none}
.frame17-card{
  position:absolute;left:50%;top:50%;width:var(--card-width);aspect-ratio:var(--card-ratio);
  max-width:none;object-fit:cover;display:block;pointer-events:none;
  border:1px solid #9ba8b64d;filter:brightness(var(--card-light));
  /* Keep the width tangent to the circumference and the height parallel to Z.
     No counter-roll: every frame is part of the rotating inner wall. */
  transform:translate(-50%,-50%) translateZ(var(--card-z)) rotateZ(var(--card-angle))
    translateY(-780px) rotateX(-90deg);
}
@media(prefers-reduced-motion:reduce){.frame17-rotor{transition:none}}