/* App screens on a 3D ring that turns slowly; drag it sideways, it keeps the throw and slows down */
.ring-stage{--cw:190px;--ch:calc(var(--cw) * 2.164);position:relative;width:100%;height:calc(var(--ch) * 1.32);
  margin-top:20px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  perspective:3000px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ring-stage.is-dragging{cursor:grabbing}
.ring-tilt{transform-style:preserve-3d;transform:rotateX(-7deg)}
.ring-spin{position:relative;width:var(--cw);height:var(--ch);transform-style:preserve-3d;will-change:transform}
.ring-card{position:absolute;inset:0;margin:0;transform-style:preserve-3d}
.ring-face{position:absolute;inset:0;border-radius:26px;padding:6px;background:#0F172A;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 18px 40px -18px rgba(15,23,42,.5),0 4px 10px -4px rgba(15,23,42,.25)}
.ring-face img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:20px;background:#F2F4F8;pointer-events:none;-webkit-user-drag:none}
/* The rear side of each card: the same screen, turned and in shadow */
.ring-face--back{transform:rotateY(180deg);filter:brightness(.35)}

.ring-note{margin-top:14px!important;font-size:.9375rem;color:var(--ink-soft)}
.ring-pause{font:inherit;cursor:pointer;color:var(--ink);background:rgba(255,255,255,.7);margin-top:10px;
  border:1px solid rgba(15,23,42,.14);border-radius:999px;min-height:44px;padding:0 16px;
  display:inline-flex;align-items:center;gap:8px;transition:background .16s var(--ease)}
.ring-pause svg{width:18px;height:18px}
@media (hover:hover){.ring-pause:hover{background:#fff}}

@media (max-width:759px){
  .ring-stage{--cw:96px}
  .ring-face{border-radius:16px;padding:4px}
  .ring-face img{border-radius:12px}
}