/* Upright app screens, arranged around the progress calendar. */
.app-showcase-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.app-showcase-scroll::-webkit-scrollbar{display:none}
.app-showcase-scroll:focus-visible{outline:2px solid #667653;outline-offset:-3px}
.app-showcase-stage{position:relative;width:100%;min-width:900px;max-width:1600px;aspect-ratio:2/1;margin:0 auto;isolation:isolate}
.app-showcase-screen{position:absolute;display:block;border-radius:clamp(22px,2.1vw,38px);overflow:hidden;background:#eae8d2;box-shadow:0 6px 20px #282b2310;transition:box-shadow .2s ease}
.app-showcase-screen img{display:block;width:100%;height:auto;aspect-ratio:1/2}
.app-showcase-screen[data-screen-position="outer-left"]{left:0;top:12%;width:19%;z-index:1}
.app-showcase-screen[data-screen-position="inner-left"]{left:18.5%;top:8%;width:21%;z-index:2}
.app-showcase-screen[data-screen-position="center"]{left:37.5%;top:0;width:25%;z-index:3}
.app-showcase-screen[data-screen-position="inner-right"]{left:60.5%;top:8%;width:21%;z-index:2}
.app-showcase-screen[data-screen-position="outer-right"]{left:81%;top:12%;width:19%;z-index:1}
.app-showcase-screen:hover{box-shadow:0 12px 32px #282b2326}
.app-showcase-screen:focus-visible{outline:3px solid #667653;outline-offset:-3px;z-index:4}
@media(prefers-reduced-motion:reduce){.app-showcase-screen{transition:none}}

@media(max-width:640px){
  .app-showcase-scroll{scroll-snap-type:x mandatory;scroll-padding-inline:24px}
  .app-showcase-stage{display:flex;align-items:flex-start;gap:16px;width:max-content;min-width:0;max-width:none;aspect-ratio:auto;margin:0;padding:12px 24px 24px}
  .app-showcase-screen[data-screen-position]{position:relative;inset:auto;width:min(76vw,300px);flex:0 0 auto;border-radius:24px;scroll-snap-align:center}
}