.app-preview{--max-tilt:38;--tilt-angle:38deg;position:relative;display:block;width:100%;aspect-ratio:5/3;margin:0 auto 42px;overflow:visible;border-radius:22px;background:#fcfcfd;box-shadow:0 22px 36px #1c26333b,0 3px 8px #1c26331a;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:#24252a;transform:perspective(clamp(300px,110vw,1100px)) rotateX(var(--tilt-angle)) scale(.88);transform-origin:center center;transform-style:preserve-3d;transition:opacity 500ms ease}
/* Reserve room for the projected edges while the desktop preview tilts. */
@media(min-width:1001px){.app-preview{width:calc(100% - max(0px,min(calc(25vw - 250px),calc(1600px - 100vw),116px)))}}
.hero-loading .app-preview{opacity:0;animation:preview-load-fallback 500ms ease 4s forwards}
@keyframes preview-load-fallback{to{opacity:1}}
.app-preview::before{content:"";position:absolute;inset:8px;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,#ff8c24,#ff375f,#cb30dc,#0095ff,#00bfc8,#30c54b,#ff8c24);background-size:300% 100%;filter:blur(28px);opacity:0;transition:opacity 700ms ease;animation:preview-glow 5s ease-in-out infinite alternate;animation-play-state:paused}
.app-preview.is-badge-hovered::before{opacity:.55;animation-play-state:running}
@keyframes preview-glow{from{background-position:0% 50%;transform:translate3d(0,9px,-1px) scale(.99)}to{background-position:100% 50%;transform:translate3d(0,9px,-1px) scale(1.04)}}
.map-background-picture,.map-background{display:block;width:100%;height:100%;border-radius:inherit}
.map-background{object-fit:cover}
/* The only live part of the preview; the surrounding window will come from the background image. */
/* Native capture: 2400x1440. Content starts at x=496, below the toolbar at y=105. */
.map-erase,.map-canvas{position:absolute;left:20.666667%;top:7.291667%;width:79.333333%;height:92.708333%}
.map-erase{background:#fff;border-bottom-right-radius:inherit;pointer-events:none}
.map-canvas{transform-style:preserve-3d;touch-action:pan-y}
.map-avatar{position:absolute;z-index:1;border-radius:50%;background-image:var(--atlas-image);background-size:var(--atlas-width) var(--atlas-height);background-position:var(--atlas-x) var(--atlas-y);transform:translate3d(-50%,-50%,0);transition:left 280ms cubic-bezier(.22,1,.36,1),top 280ms cubic-bezier(.22,1,.36,1),width 280ms cubic-bezier(.22,1,.36,1),height 280ms cubic-bezier(.22,1,.36,1),transform 280ms cubic-bezier(.22,1,.36,1);cursor:default;will-change:left,top,width,height,transform}
.map-avatar[hidden]{display:none}
.map-avatar.is-settling{z-index:2;transition-duration:380ms}
.map-avatar.is-active{z-index:3;transform:translate3d(-50%,-50%,var(--avatar-lift,110px));transition-duration:380ms}
/* One complete jump per portrait; stopping the wave leaves underway jumps to settle. */
.map-avatar.is-wave-rising:not(.is-active){z-index:2;animation:contact-wave 540ms ease-in-out both}
@keyframes contact-wave{
  0%,100%{transform:translate3d(-50%,-50%,0) scale(1)}
  50%{transform:translate3d(-50%,calc(-50% - var(--wave-rise,14px)),var(--wave-lift,48px)) scale(1.22)}
}
.map-avatar:focus-visible{outline:2px solid #0877eb;outline-offset:2px}
@media(max-width:550px){.app-preview{border-radius:15px;margin-bottom:25px}}
@media(max-width:650px) and (pointer:coarse){.map-canvas{pointer-events:none}}
@media(prefers-reduced-motion:reduce){.hero-loading .app-preview{opacity:0;animation:preview-load-fallback 0s 4s forwards!important}.app-preview::before{animation:none;transition:none}.map-avatar{transition:none!important}.map-avatar.is-wave-rising{animation:none}}