/* Keep the portrait fixed while changing only eyewear. */
.frame-overlay{opacity:0;transition:opacity 700ms ease-in-out}
.frame-overlay.is-active{opacity:1}
/* Remove excessive vertical gaps while retaining natural scrolling. */
@media(min-width:900px) and (min-height:700px){
 #story,#experience,#merchant{min-height:0;justify-content:flex-start}
 #story{padding-top:60px;padding-bottom:36px}
 #experience{padding-top:48px;padding-bottom:48px}
 #merchant{padding-top:48px;padding-bottom:60px}
}
.experience-points p{border-top:0;padding-top:0}
.merchant-simple li:not(:last-child):before,.merchant-simple li:not(:last-child):after{content:none}
/* The front and temples occupy separate planes in the rotating preview. */
.demo-preview{perspective:350px}
.demo-preview .demo-glasses{width:100px;height:50px;transform-style:preserve-3d}
.demo-preview .demo-glasses img{left:0;top:0;width:100px;height:50px;transform:translateZ(0.5px)}
.demo-preview .temple{position:absolute;top:20px;width:57px;height:3px;border-radius:3px;background:#29292d;transform-style:preserve-3d;box-shadow:0 1px 1px #0004;backface-visibility:visible}
.demo-preview .temple:after{content:'';position:absolute;right:-2px;top:0;width:10px;height:3px;border-radius:3px;background:#29292d;transform:rotate(40deg);transform-origin:left}
.demo-preview .temple-left{left:2px;transform-origin:left center;transform:rotateY(-90deg)}
.demo-preview .temple-right{right:2px;transform-origin:right center;transform:rotateY(90deg)}
.demo-preview .temple-right:after{right:auto;left:-2px;transform:rotate(-40deg);transform-origin:right}
@keyframes frame-inspection{0%,12%,100%{transform:rotateX(-8deg) rotateY(0deg)}32%{transform:rotateX(-8deg) rotateY(58deg)}52%{transform:rotateX(-8deg) rotateY(0deg)}72%{transform:rotateX(-8deg) rotateY(-58deg)}88%{transform:rotateX(-8deg) rotateY(0deg)}}
@media(prefers-reduced-motion:reduce){.frame-overlay{transition:none}.demo-preview .demo-glasses{animation:none}}