/* Animated screen presentation. The unenhanced gallery remains a readable fallback. */
.screen-showcase{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:32px;align-items:center;min-width:0}
.screen-selector,.screen-presentation{min-width:0}
.screen-selector{padding:12px 0}
.screen-count{font-size:.8125rem;font-weight:850;color:#d2a1ff;letter-spacing:.16em}
.screen-name{font-size:2.25rem;letter-spacing:-.04em;margin:16px 0 12px;overflow-wrap:anywhere}
.screen-description{color:var(--muted);font-size:1rem;line-height:1.6;max-width:340px;min-height:78px;margin:0 0 24px;overflow-wrap:anywhere}
.screen-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.screen-choice.button{justify-content:flex-start;min-height:58px;text-align:left;padding:12px;font-size:.875rem;gap:10px}
.screen-choice-number{color:#b99fc9;font-size:.6875rem;letter-spacing:.05em}
.screen-choice[aria-pressed="true"]{background:#d26cff25;border-color:#c991ee;color:#f3d8ff;box-shadow:inset 3px 0 0 #d2a1ff}
.screen-choice[aria-pressed="true"] .screen-choice-number{color:#f3d8ff}
.screens.is-enhanced{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-auto-columns:auto;gap:0;position:relative;isolation:isolate;overflow:hidden;scroll-snap-type:none;padding:25px 0 30px;touch-action:auto;outline-offset:-4px;border-radius:32px;background:radial-gradient(ellipse at center,#914eff17,transparent 70%)}
.screens.is-enhanced .screen-card{grid-area:1 / 1;align-self:stretch;justify-self:center;width:min(350px,calc(100% - 64px));margin:0;min-height:555px;pointer-events:none;transform:translateX(calc(var(--screen-side,1)*100%)) scale(.78);opacity:0;z-index:0;transition:transform 650ms cubic-bezier(.22,.75,.2,1),opacity 450ms ease,border-color 450ms ease,box-shadow 450ms ease;transform-origin:center center;box-shadow:0 20px 50px #08031055}
.screens.is-enhanced .screen-card[data-position="active"]{transform:translateX(0) scale(1);opacity:1;z-index:3;pointer-events:auto;border-color:#b77bdf;box-shadow:0 18px 50px #08031088,0 0 0 1px #dba6ff16,0 0 48px #a64bff16}
.screens.is-enhanced .screen-card[data-position="before"]{transform:translateX(-66%) scale(.84);opacity:.28;z-index:1}
.screens.is-enhanced .screen-card[data-position="after"]{transform:translateX(66%) scale(.84);opacity:.28;z-index:1}
.screen-progress{width:min(220px,70%);height:3px;background:#ffffff12;border-radius:99px;overflow:hidden;margin:18px auto 0}
.screen-progress-fill{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#9965ff,#e0a8ff)}
.screen-hint{margin:12px auto 0;max-width:360px;text-align:center;font-size:.75rem;color:var(--muted);line-height:1.5}
.screen-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.screens.is-enhanced .screen-card[data-position="active"] .screen-ui>*{animation:screen-item-enter 550ms cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--item-delay,160ms)}
.screens.is-enhanced .screen-card[data-position="active"] .chart i{transform-origin:center bottom;animation:screen-chart-grow 900ms cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--detail-delay,240ms)}
.screens.is-enhanced .screen-card[data-position="active"] .calendar span{animation:screen-day-enter 400ms ease both;animation-delay:var(--detail-delay,240ms)}
@keyframes screen-item-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes screen-chart-grow{from{transform:scaleY(.08);opacity:.25}to{transform:scaleY(1);opacity:1}}
@keyframes screen-day-enter{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@media(max-width:1000px) and (min-width:701px){.screen-showcase{grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:18px}.screen-choices{grid-template-columns:minmax(0,1fr)}.screen-choice.button{min-height:48px}.screen-description{min-height:0}}
@media(max-width:700px){
 .screen-showcase{grid-template-columns:minmax(0,1fr);gap:12px}
 .screen-selector{padding:0}.screen-caption{display:none}
 .screen-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .screen-choice.button{justify-content:center;padding:10px 6px;font-size:.75rem;min-height:48px;text-align:center;gap:0}.screen-choice-number{display:none}
 .screens.is-enhanced{padding:20px 0 24px;border-radius:24px}
 .screens.is-enhanced .screen-card{width:min(350px,calc(100% - 36px));min-height:555px}
 .screens.is-enhanced .screen-card[data-position="before"]{transform:translateX(-40%) scale(.86);opacity:.18}
 .screens.is-enhanced .screen-card[data-position="after"]{transform:translateX(40%) scale(.86);opacity:.18}
 .screen-hint{padding-inline:8px}
}
.screen-showcase:not(.is-playing) .screen-progress{visibility:hidden}
/* Actual app captures: preserve full screen aspect ratio and navigation. */
.real-screen .screen-ui{padding:0;min-height:0;background:transparent;overflow:hidden}
.real-screen .screen-screenshot{display:block;width:100%;height:auto;max-height:none;aspect-ratio:9/16;object-fit:contain;border-radius:18px}
.phone.phone-real{padding:8px;min-height:0;overflow:hidden}
.phone-real>img{display:block;width:100%;height:auto;border-radius:30px}

/* Fade the side previews before they reach the clipping boundary. */
.screens.is-enhanced{-webkit-mask-image:linear-gradient(to right,transparent,#000 min(12%,72px),#000 calc(100% - min(12%,72px)),transparent);mask-image:linear-gradient(to right,transparent,#000 min(12%,72px),#000 calc(100% - min(12%,72px)),transparent)}
@media(max-width:700px){.screens.is-enhanced{-webkit-mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent)}}