/* Soft product-studio treatment: a shallow glass stage instead of a deep frame. */
.viewer-shell {
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 24px;
  box-shadow: 0 24px 72px rgba(73, 107, 157, .12), inset 0 0 44px rgba(255, 255, 255, .54);
  backdrop-filter: blur(18px) saturate(115%);
}

.viewer-topbar,
.story-stage-foot {
  background: rgba(255, 255, 255, .34);
  border-color: rgba(45, 99, 232, .09);
}

.canvas-wrap {
  background:
    radial-gradient(circle at 51% 48%, rgba(45, 99, 232, .12), transparent 32%),
    radial-gradient(circle at 67% 63%, rgba(255, 117, 71, .09), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(235, 243, 252, .72));
}

.story-stage .viewer-shell {
  box-shadow: 0 24px 72px rgba(73, 107, 157, .12), inset 0 0 44px rgba(255, 255, 255, .54);
}

.story-stage .canvas-wrap::after {
  content: '';
  position: absolute;
  inset: 10% 12%;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  filter: blur(42px);
  opacity: .7;
}

.canvas-label,
.viewer-topbar,
.story-stage-foot {
  text-shadow: 0 1px 10px rgba(255, 255, 255, .85);
}

@media (max-width: 720px) {
  .story-stage .viewer-shell {
    border-radius: 20px;
    box-shadow: 0 18px 52px rgba(73, 107, 157, .14), inset 0 0 32px rgba(255, 255, 255, .5);
  }
}