.motion{padding-bottom:3rem}.motion h2{margin:1.75rem 0 .5rem;font-size:1.15rem}.motion__stage{gap:1.5rem;padding-top:1rem;display:grid}.motion__phone{aspect-ratio:9/20;touch-action:pan-y;width:min(68vw,320px);box-shadow:0 0 0 1px var(--rule-strong), 0 24px 60px -20px #000000e6;background:#000;border:5px solid #1a1d27;border-radius:40px;justify-self:center;position:relative;overflow:hidden}.motion__phone img,.motion__phone canvas,.motion__phone video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.motion__phone canvas{opacity:0;transition:opacity .6s var(--ease)}.motion__phone.is-drawing canvas{opacity:1}.motion__info .page-head{padding-top:0}.motion__badge,.motion-cards__badge{border:1px solid var(--rule-strong);font:600 12px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--text);border-radius:999px;justify-self:start;padding:.2rem .6rem}.motion__facts{border-top:1px solid var(--rule);gap:0;max-width:26rem;margin:1.25rem 0;display:grid}.motion__facts div{border-bottom:1px solid var(--rule);justify-content:space-between;gap:1rem;padding:.7rem 0;display:flex}.motion__facts dt{color:var(--muted)}.motion__facts dd{text-align:right;margin:0}.motion__note{max-width:30rem;font-size:14px}.motion__info>p.muted{max-width:34rem}.motion__how{max-width:36rem;color:var(--muted);gap:.6rem;margin:0;padding-left:1.1rem;font-size:15px;display:grid}@media (width>=800px){.motion__stage{grid-template-columns:320px minmax(0,1fr);align-items:start;gap:3rem;padding-top:1.5rem}}.motion-cards{grid-template-columns:repeat(auto-fill,minmax(min(46%,11rem),1fr));gap:1.5rem 1rem;margin:1rem 0 0;padding:0;list-style:none;display:grid}.motion-cards a{color:var(--text);gap:.6rem;text-decoration:none;display:grid}.motion-cards__frame{aspect-ratio:9/20;border-radius:var(--r-media);background:var(--raise);display:block;position:relative;overflow:hidden}.motion-cards__frame img,.motion-cards__frame video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.motion-cards__frame img{transition:transform .5s var(--ease)}.motion-cards__frame video{opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}.motion-cards__frame video.is-playing{opacity:1}.motion-cards a:hover img,.motion-cards a:focus-visible img{transform:scale(1.04)}.motion-cards__badge{z-index:1;background:#09090b99;position:absolute;top:.6rem;left:.6rem}.motion-cards strong{font-size:15px;font-weight:600}@media (prefers-reduced-motion:reduce){.motion__phone canvas,.motion-cards__frame img{transition:none}}
