.motion-lab{margin-block:34px 50px}.lab-label{color:var(--lacquer);font:700 10.5px/1.2 var(--util);letter-spacing:.1em;text-transform:uppercase;margin:0 0 9px}.motion-status{background:var(--paper-2);border:2px solid var(--ink);margin-block-end:18px;padding:22px}.motion-status h2,.test-card h2,.js-test h2{font:700 clamp(1.15rem, 3vw, 1.5rem)/1.15 var(--display);letter-spacing:-.02em;margin:0}.motion-status>p:not(.lab-label),.test-card>p:not(.lab-label),.js-test>p:not(.lab-label){color:var(--muted);margin:9px 0 0;font-size:16px;line-height:1.45}.lab-actions{flex-wrap:wrap;gap:8px;margin-block-start:17px;display:flex}.motion-lab button{border:1px solid var(--control);min-height:42px;color:var(--ink);cursor:pointer;font:11px/1.2 var(--util);letter-spacing:.05em;text-transform:uppercase;background:0 0;padding:9px 13px}.motion-lab button:hover,.motion-lab button:focus-visible{border-color:var(--lacquer);color:var(--lacquer)}#force-motion{background:var(--ink);border-color:var(--ink);color:var(--paper)}#force-motion:hover,#force-motion:focus-visible{background:var(--lacquer);border-color:var(--lacquer);color:var(--paper)}.test-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.test-card{background:var(--paper-2);min-height:270px;padding:20px;overflow:hidden}.spinner{border:5px solid var(--rule);border-radius:50%;width:92px;height:92px;margin:22px auto;animation:1.6s linear infinite spin;position:relative}.spinner i{background:var(--lacquer);border-radius:50%;width:18px;height:18px;position:absolute;inset:-9px auto auto 35px}@keyframes spin{to{transform:rotate(360deg)}}.bouncers{justify-content:center;align-items:end;gap:10px;height:105px;margin-block:10px 18px;display:flex}.bouncers i{background:var(--sea);border-radius:50%;width:18px;height:18px;animation:1.25s ease-in-out infinite bounce}.bouncers i:nth-child(2){animation-delay:.12s}.bouncers i:nth-child(3){animation-delay:.24s}.bouncers i:nth-child(4){animation-delay:.36s}.bouncers i:nth-child(5){animation-delay:.48s}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-62px)}}.pulse{background:var(--lacquer);width:96px;height:96px;color:var(--paper);border-radius:50%;place-items:center;margin:20px auto;animation:1.7s ease-in-out infinite pulse;display:grid}.pulse span{font:750 17px/1 var(--display)}@keyframes pulse{50%{opacity:.55;transform:scale(.72)}}.track-test{background:var(--rule);height:56px;margin-block:40px 34px;padding:7px}.slider{background:var(--ochre);width:42px;height:42px;animation:2.2s ease-in-out infinite alternate slide;display:block}@keyframes slide{to{transform:translate(calc(100cqw - 56px))}}.track-test{container-type:inline-size}.colour-chip{background:var(--lacquer);width:96px;height:96px;margin:20px auto;animation:3s step-end infinite colour}@keyframes colour{33%{background:var(--sea);transform:rotate(45deg)}66%{background:var(--ochre);transform:rotate(90deg)}}.test-clock{border:5px solid var(--ink);border-radius:50%;width:104px;height:104px;margin:16px auto;position:relative}.test-clock i,.test-clock b{background:var(--ink);transform-origin:50% 100%;border-radius:4px;width:4px;position:absolute;inset-block-end:50%;inset-inline-start:50%}.test-clock i{height:38px;animation:2s linear infinite clock}.test-clock b{height:27px;animation:10s linear infinite clock}.test-clock span{background:var(--lacquer);border-radius:50%;width:9px;height:9px;position:absolute;inset:50% auto auto 50%;transform:translate(-2.5px,-4.5px)}@keyframes clock{to{transform:rotate(360deg)}}.js-test{background:var(--paper-2);margin-block-start:10px;padding:22px}.js-track{background:var(--rule);height:18px;margin-block:20px 12px;overflow:hidden}.js-track span{background:var(--sea);transform-origin:0;width:100%;height:100%;display:block;transform:scaleX(0)}#js-readout{min-height:1.5em;font-family:var(--util);font-size:12px}.motion-lab.restarting *{animation:none!important}@media (width<=650px){.test-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.spinner,.bouncers i,.pulse,.slider,.colour-chip,.test-clock i,.test-clock b{animation:none}.motion-lab.force-motion .spinner{animation:1.6s linear infinite spin!important}.motion-lab.force-motion .bouncers i{animation:1.25s ease-in-out infinite bounce!important}.motion-lab.force-motion .bouncers i:nth-child(2){animation-delay:.12s!important}.motion-lab.force-motion .bouncers i:nth-child(3){animation-delay:.24s!important}.motion-lab.force-motion .bouncers i:nth-child(4){animation-delay:.36s!important}.motion-lab.force-motion .bouncers i:nth-child(5){animation-delay:.48s!important}.motion-lab.force-motion .pulse{animation:1.7s ease-in-out infinite pulse!important}.motion-lab.force-motion .slider{animation:2.2s ease-in-out infinite alternate slide!important}.motion-lab.force-motion .colour-chip{animation:3s step-end infinite colour!important}.motion-lab.force-motion .test-clock i{animation:2s linear infinite clock!important}.motion-lab.force-motion .test-clock b{animation:10s linear infinite clock!important}}.motion-lab.force-motion .spinner{animation:1.6s linear infinite spin!important}.motion-lab.force-motion .bouncers i{animation:1.25s ease-in-out infinite bounce!important}.motion-lab.force-motion .bouncers i:nth-child(2){animation-delay:.12s!important}.motion-lab.force-motion .bouncers i:nth-child(3){animation-delay:.24s!important}.motion-lab.force-motion .bouncers i:nth-child(4){animation-delay:.36s!important}.motion-lab.force-motion .bouncers i:nth-child(5){animation-delay:.48s!important}.motion-lab.force-motion .pulse{animation:1.7s ease-in-out infinite pulse!important}.motion-lab.force-motion .slider{animation:2.2s ease-in-out infinite alternate slide!important}.motion-lab.force-motion .colour-chip{animation:3s step-end infinite colour!important}.motion-lab.force-motion .test-clock i{animation:2s linear infinite clock!important}.motion-lab.force-motion .test-clock b{animation:10s linear infinite clock!important}.motion-lab.paused .spinner,.motion-lab.paused .bouncers i,.motion-lab.paused .pulse,.motion-lab.paused .slider,.motion-lab.paused .colour-chip,.motion-lab.paused .test-clock i,.motion-lab.paused .test-clock b{animation-play-state:paused!important}.motion-lab.force-motion.restarting *{animation:none!important}