.how-demo{grid-template-columns:minmax(0,1fr);display:grid}.how-demo__frame{margin:20px 0 56px}.how-demo__tick,.how-demo__caption:not([data-last]),.demo-frame__fade{display:none}@media (min-width:1100px) and (prefers-reduced-motion:no-preference){.how-demo{grid-template-rows:repeat(4,auto) 34vh;grid-template-columns:280px minmax(0,1fr);column-gap:40px}.how-demo__step{grid-column:1;grid-row:var(--row);align-items:center;min-height:55vh;transition:opacity .3s;display:flex}.how-demo__step[data-state=todo]{opacity:.4}.how-demo__step[data-state=done]{opacity:.65}.how-demo__step[data-state=done] .how-demo__num{display:none}.how-demo__step[data-state=done] .how-demo__tick{display:block}.how-demo__frame{opacity:0;grid-area:1/2/-1;align-self:start;margin:0;transition:opacity .35s;position:sticky;top:88px}.how-demo__frame[data-active=true]{opacity:1}.how-demo__caption:not([data-last]){display:block}.demo-frame{height:min(600px,100svh - 170px)}.demo-frame__body{overflow:hidden}.demo-frame__fade{pointer-events:none;background:linear-gradient(to bottom, transparent, var(--am-raised));height:72px;display:block;position:absolute;inset:auto 0 0}}