@keyframes demo-pulse{0%{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}@keyframes demo-spin{to{transform:rotate(360deg)}}@keyframes demo-word{0%{opacity:0}to{opacity:1}}@keyframes demo-blink{0%,49%{opacity:1}50%,to{opacity:0}}@keyframes demo-wave{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@keyframes demo-press{0%,to{transform:scale(1)}45%{transform:scale(.84)}}@layer components{.demo-body{letter-spacing:-.003em;font-size:.9375rem;line-height:1.45}.demo-meta{font-size:.9375rem;line-height:1.35}@media (min-width:640px){.demo-meta{font-size:.8125rem}}.demo-reveal{opacity:0;transform:translateY(6px)}.demo-fade{opacity:0}.demo-reveal[data-show=true],.demo-fade[data-show=true]{opacity:1;transform:none}.demo-grow-y{transform-origin:bottom;transform:scaleY(0)}.demo-draw-x{transform-origin:0;transform:scaleX(0)}.demo-draw-y{transform-origin:top;transform:scaleY(0)}.demo-grow-y[data-show=true],.demo-draw-x[data-show=true],.demo-draw-y[data-show=true]{transform:none}.demo-slot{position:relative}.demo-slot:before{content:"";border-radius:inherit;pointer-events:none;border:1px dashed #d4d6d9;position:absolute;inset:0}.demo-slot[data-show=true]:before{opacity:0}.demo-frame[data-armed=true] .demo-slot:before{transition:opacity .42s}.demo-odo{display:block;position:relative;overflow:hidden}.demo-odo:before{content:"0";color:var(--color-faint,#707379);position:absolute;inset:0}.demo-odo>span{opacity:0;display:block;transform:translateY(100%)}.demo-odo[data-show=true]:before{opacity:0;transform:translateY(-100%)}.demo-odo[data-show=true]>span{opacity:1;transform:none}.demo-frame[data-armed=true] :is(.demo-reveal,.demo-fade,.demo-odo>span){transition:opacity .42s var(--ease-out-soft,ease-out), transform .42s var(--ease-out-soft,ease-out)}.demo-frame[data-armed=true] :is(.demo-grow-y,.demo-draw-x,.demo-draw-y){transition:transform .76s var(--ease-out-soft,ease-out)}.demo-frame[data-armed=true] .demo-odo:before{transition:opacity .42s var(--ease-out-soft,ease-out), transform .42s var(--ease-out-soft,ease-out)}.demo-words .w{opacity:0}.demo-words[data-state=shown] .w{opacity:1}.demo-words[data-state=typing] .w{animation:.14s ease-out both demo-word;animation-delay:calc(var(--i,0) * 60ms)}.demo-caret{vertical-align:-.15em;opacity:0;background:currentColor;width:2px;height:1.05em;margin-left:2px;display:inline-block}.demo-caret[data-on=true]{animation:.9s linear infinite demo-blink}.demo-here{background:var(--color-waypoint,#ff5c00);border-radius:9999px;width:.625rem;height:.625rem;display:block;position:relative}.demo-here:after{content:"";border-radius:inherit;background:inherit;animation:1.4s ease-out infinite demo-pulse;position:absolute;inset:0}.demo-spinner{animation:.8s linear infinite demo-spin}.demo-progress{transform-origin:0;transform:scaleX(var(--p,0))}.demo-frame[data-armed=true] .demo-progress{transition:transform .6s var(--ease-out-soft,ease-out)}.demo-wave>span{transform:scaleY(.3)}.demo-wave[data-on=true]>span{animation:.82s ease-in-out infinite demo-wave;animation-delay:calc(var(--i,0) * -150ms)}.demo-press[data-on=true]{animation:demo-press .38s var(--ease-out-soft,ease-out)}.demo-frame[data-paused=true] *,.demo-frame[data-paused=true] :after{animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){.demo-frame *,.demo-frame :before,.demo-frame :after{transition:none!important;animation:none!important}.demo-words .w{opacity:1}}}