/* The outside scene stays still; only the two-sided artwork plate rotates. */
/* Examples have hover previews, but are not links or click targets. */
#studioExampleGrid .studio-example { cursor:default; }
#studioExampleGrid .studio-example:focus-visible { outline:2px solid var(--acid); }
html[data-ui-theme] #studioExampleGrid .studio-example-art {
  perspective:1100px;overflow:visible;border:0;background:none;box-shadow:none;transform:none;
}
.studio-example-plate {
  position:absolute;inset:0;border-radius:15px;transform-style:preserve-3d;transform:rotateY(0deg);
  /* Returning to the cover cancels even an in-progress flip on the next paint. */
  transition:none;
}
.studio-example-face {
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;border:1px solid var(--line-strong);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--panel-2);
  box-shadow:inset 0 1px 0 #ffffff30,0 3px 7px -3px var(--finish-shadow),0 12px 22px -15px var(--finish-shadow-deep);
}
.studio-example-front {transform:translateZ(.8px);}
.studio-example-back {transform:rotateY(180deg) translateZ(.8px);}
.studio-example-face::after {
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid #ffffff17;background:linear-gradient(112deg,#ffffff0c,transparent 30%,transparent 72%,#0000000b);
}
.studio-example.is-flipped .studio-example-plate,
[data-collection-flip].is-flipped .studio-example-plate {transform:rotateY(180deg);transition:transform 760ms cubic-bezier(.3,.06,.18,1);}
.studio-example.is-flipped .studio-example-face,
[data-collection-flip].is-flipped .studio-example-face {border-color:var(--secondary);}
.studio-example:focus-visible {outline-offset:6px;border-radius:15px;}
@media(prefers-reduced-motion:reduce){
  .studio-example-plate,.studio-example.is-flipped .studio-example-plate,[data-collection-flip].is-flipped .studio-example-plate {transition:none;transform:none;}
  .studio-example-front,.studio-example-back {transform:none;}
  .studio-example-back {visibility:hidden;}
  .studio-example.is-flipped .studio-example-front,[data-collection-flip].is-flipped .studio-example-front {visibility:hidden;}
  .studio-example.is-flipped .studio-example-back,[data-collection-flip].is-flipped .studio-example-back {visibility:visible;}
}