.film-host{container:film/inline-size}.film-frame{position:relative;container-type:inline-size}.film-frame--wide{aspect-ratio:1320/610}.film-frame--narrow{aspect-ratio:390/625;max-width:480px;margin-inline-start:auto;margin-inline-end:auto}@container film (min-width:880px){.film-frame--narrow{display:none}}@container film (max-width:879.98px){.film-frame--wide{display:none}}@media (orientation:landscape) and (max-height:599.98px){@container film (min-width:640px){.film-frame--narrow{display:none}.film-frame--wide{display:block}}}.film-rig{transform-origin:0 0;transform:scale(var(--film-scale));animation:.22s cubic-bezier(.16,1,.3,1) both film-cut;position:absolute;top:0;left:0}@keyframes film-cut{0%{opacity:.35}to{opacity:1}}.film-rig--wide{--film-scale:tan(atan2(100cqw, 1320px));width:1320px;height:610px}.film-rig--narrow{--film-scale:tan(atan2(100cqw, 390px));width:390px;height:625px}.film-screen,.film-phone,.film-caption{position:absolute}.film-phone{transform-origin:0 0}.film-rig--wide .film-screen{width:1000px;height:563px;top:0;left:0}.film-rig--wide .film-phone{top:23px;left:1048px;transform:scale(1.05)}.film-rig--wide .film-caption--screen{width:1000px;top:582px;left:0}.film-rig--wide .film-caption--phone{width:269px;top:582px;left:1048px}.film-rig--narrow .film-screen{width:390px;height:300px;top:0;left:0}.film-rig--narrow .film-phone{top:228px;left:199px;transform:scale(.7)}.film-rig--narrow .film-caption--screen{width:190px;top:310px;left:0}.film-rig--narrow .film-caption--phone{width:180px;top:598px;left:199px}.demo-anim{animation-duration:.6s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.demo-stage[data-playing=false] *,.demo-stage[data-playing=false]:before,.demo-stage[data-playing=false]:after{animation-play-state:paused!important}.demo-stage[data-static=true] .demo-anim{animation:none!important}.demo-stage[data-static=true] .demo-static-hide{display:none!important}.demo-stage[data-static=true] .demo-static-dim{opacity:.4}@media (prefers-reduced-motion:reduce){.demo-stage .demo-anim{animation:none!important}.demo-stage .demo-static-hide{display:none!important}.demo-stage .demo-static-dim{opacity:.4}}@keyframes demo-fade-up{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.demo-fade-up{animation-name:demo-fade-up}@keyframes demo-fade{0%{opacity:0}to{opacity:1}}.demo-fade{animation-name:demo-fade}@keyframes demo-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.demo-pop{animation-name:demo-pop;animation-duration:.48s}@keyframes demo-flash-in-out{0%{opacity:0}8%{opacity:1}92%{opacity:1}to{opacity:0}}.demo-flash-in-out{animation-name:demo-flash-in-out}@keyframes demo-fade-out{0%{opacity:1}to{opacity:0;visibility:hidden}}.demo-fade-out{animation-name:demo-fade-out}@keyframes demo-dim{0%{opacity:1}to{opacity:.4}}.demo-dim{animation-name:demo-dim}@keyframes demo-type{0%{width:0}to{width:100%}}.demo-type{white-space:nowrap;vertical-align:bottom;animation-name:demo-type;animation-timing-function:steps(32,end);display:inline-block;overflow:hidden}@keyframes demo-caret{0%,to{opacity:1}50%{opacity:0}}.demo-caret{animation-name:demo-caret;animation-duration:.9s;animation-timing-function:step-end;animation-iteration-count:infinite}@keyframes demo-grow-x{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.demo-grow-x{transform-origin:0;animation-name:demo-grow-x}@keyframes demo-grow-y{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.demo-grow-y{transform-origin:bottom;animation-name:demo-grow-y}@keyframes demo-drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.demo-drain{transform-origin:0;animation-name:demo-drain;animation-timing-function:linear}@keyframes demo-draw{0%{stroke-dashoffset:var(--demo-draw-length,600)}to{stroke-dashoffset:0}}.demo-draw{stroke-dasharray:var(--demo-draw-length,600);animation-name:demo-draw;animation-timing-function:ease-out}@keyframes demo-tap{0%{opacity:0;transform:scale(.3)}20%{opacity:.55}to{opacity:0;transform:scale(1.8)}}.demo-tap{animation-name:demo-tap;animation-duration:.7s;animation-timing-function:cubic-bezier(.22,1,.36,1)}@keyframes demo-spotlight{0%{box-shadow:0 0 #ff634000}25%{box-shadow:0 0 0 4px #ff6340e6}to{box-shadow:0 0 0 4px #ff634000}}.demo-spotlight{animation-name:demo-spotlight;animation-duration:1.6s;animation-timing-function:ease-out}@keyframes demo-pulse{0%,to{opacity:1}50%{opacity:.45}}.demo-pulse{animation-name:demo-pulse;animation-duration:1.6s;animation-iteration-count:infinite}@keyframes demo-confetti{0%{opacity:0;transform:translateY(-20px)rotate(0)}10%{opacity:1}to{opacity:0;transform:translateY(260px)rotate(540deg)}}.demo-confetti{animation-name:demo-confetti;animation-duration:2.2s;animation-timing-function:ease-in}@keyframes demo-focus{0%{opacity:.5;transform:scale(1.12)}70%{opacity:1;transform:scale(1)}to{opacity:1;transform:scale(1)}}.demo-focus{animation-name:demo-focus;animation-duration:1.1s}@keyframes demo-camera-drift{0%{transform:scale(.97)}to{transform:scale(1)}}.demo-camera-drift{transform-origin:50%;animation-name:demo-camera-drift;animation-timing-function:linear}@keyframes demo-cursor{0%{opacity:0;transform:translate(var(--demo-cursor-from-x,0), var(--demo-cursor-from-y,0)) scale(1)}12%{opacity:1}55%{opacity:1;transform:translate(var(--demo-cursor-to-x,0), var(--demo-cursor-to-y,0)) scale(1)}62%{transform:translate(var(--demo-cursor-to-x,0), var(--demo-cursor-to-y,0)) scale(.82)}70%{opacity:1;transform:translate(var(--demo-cursor-to-x,0), var(--demo-cursor-to-y,0)) scale(1)}to{opacity:0;transform:translate(var(--demo-cursor-to-x,0), var(--demo-cursor-to-y,0)) scale(1)}}.demo-cursor{animation-name:demo-cursor;animation-timing-function:cubic-bezier(.5,0,.2,1)}@keyframes demo-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.demo-progress{transform-origin:0;animation-name:demo-progress;animation-timing-function:linear;animation-fill-mode:both}