.showcase-stage{background-color:var(--color-warm-taupe);--phone:280px;--gutter:max(64px, calc((100vw - 1152px) / 2));position:relative}.showcase-pin{overscroll-behavior-x:contain;scrollbar-color:var(--color-ash) transparent;flex-direction:column;gap:40px;padding:72px 0 48px;display:flex;overflow-x:auto}.showcase-track{width:max-content;padding-inline:var(--gutter);align-items:flex-start;gap:144px;display:flex}.showcase-group{flex-direction:column;gap:32px;display:flex}.showcase-label{flex-direction:column;gap:4px;max-width:520px;display:flex}.showcase-phones{align-items:flex-start;gap:40px;display:flex}.showcase-phone{width:var(--phone);margin:0}.showcase-phone img{width:100%;height:auto;display:block}.showcase-foot{padding-inline:var(--gutter);justify-content:space-between;align-items:center;gap:32px;display:flex}.showcase-bar{background-color:var(--color-stone);flex:0 0 200px;height:1px;display:none;position:relative;overflow:hidden}.showcase-bar span{background-color:var(--color-ink);transform-origin:0;position:absolute;inset:0}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference) and (min-height:700px) and (max-height:1600px){.showcase-stage{view-timeline:--showcase block;--phone:clamp(220px, 31svh, 300px);height:260svh}.showcase-pin{box-sizing:border-box;justify-content:center;height:100svh;position:sticky;top:0;overflow:hidden}.showcase-track,.showcase-label,.showcase-bar span{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--showcase;animation-range:contain}.showcase-track{will-change:transform;animation-name:showcase-pan}.showcase-label{animation-name:showcase-drift}.showcase-bar{display:block}.showcase-bar span{animation-name:showcase-progress}.showcase-near,.showcase-far{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--showcase;animation-range:cover}.showcase-near{animation-name:showcase-near}.showcase-far{animation-name:showcase-far}}}@keyframes showcase-pan{0%{transform:translate(0)}to{transform:translate(calc(100vw - 100%))}}@keyframes showcase-drift{0%{transform:translate(-48px)}to{transform:translate(48px)}}@keyframes showcase-near{0%{transform:translateY(64px)}to{transform:translateY(-64px)}}@keyframes showcase-far{0%{transform:translateY(-24px)}to{transform:translateY(24px)}}@keyframes showcase-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
