.sync-loop-prototype{--sync-loop-duration: 10s;--sync-loop-accent: var(--action-text);container-type:inline-size;display:grid;flex:1 1 100%;gap:1.25rem;inline-size:100%;max-inline-size:69rem;min-inline-size:0;margin:0;margin-inline:auto}[data-sync-loop] [hidden]{display:none}.sync-loop-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);align-items:start;gap:clamp(2rem,4cqi,4rem);overflow:clip;padding:clamp(1.25rem,3cqi,2rem);border:1px solid color-mix(in oklch,var(--foreground) 12%,var(--background));border-radius:1.75rem;background:color-mix(in oklch,var(--muted) 42%,var(--background))}.sync-loop-stage:before{position:absolute;z-index:-1;inset-block:-8%;inset-inline:-4%;background:radial-gradient(ellipse at 48% 48%,color-mix(in oklch,var(--primary) 10%,transparent),transparent 68%);content:"";pointer-events:none}.sync-loop-device{position:relative;z-index:1;min-inline-size:0;aspect-ratio:var(--sync-loop-aspect)}.sync-loop-device--phone{margin-block-start:clamp(2.5rem,6cqi,4.5rem)}.sync-loop-layer{position:absolute;inset:0;inline-size:100%;block-size:100%;opacity:0;box-shadow:none}.sync-loop-layer--after{opacity:1}.sync-loop-layer>picture,.sync-loop-layer img{inline-size:100%;block-size:100%}.sync-loop-layer img{object-fit:contain}.sync-loop-device--phone>.product-capture{border-radius:1rem}.sync-loop-focus-plane{position:absolute;inset:1px;pointer-events:none}.sync-loop-focus{position:absolute;inset-block-start:calc(var(--sync-loop-focus-y) * var(--sync-loop-focus-scale-y, 1));inset-inline-start:calc(var(--sync-loop-focus-x) * var(--sync-loop-focus-scale-x, 1));inline-size:calc(var(--sync-loop-focus-width) * var(--sync-loop-focus-scale-x, 1));block-size:calc(var(--sync-loop-focus-height) * var(--sync-loop-focus-scale-y, 1));border:1px solid color-mix(in oklch,var(--sync-loop-accent) 65%,transparent);border-radius:.45rem;background:color-mix(in oklch,var(--sync-loop-accent) 7%,transparent);box-shadow:0 0 0 3px color-mix(in oklch,var(--sync-loop-accent) 9%,transparent);opacity:0}.sync-loop-ring{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;color:var(--sync-loop-accent);pointer-events:none}.sync-loop-ring--stacked{display:none}.sync-loop-ring-track,.sync-loop-ring-pulse{stroke:currentColor;stroke-linecap:round;vector-effect:non-scaling-stroke}.sync-loop-ring-track{stroke-width:1;opacity:.16}.sync-loop-ring-pulse{stroke-width:3;stroke-dasharray:7 100;stroke-dashoffset:7;opacity:0;filter:drop-shadow(0 0 4px color-mix(in oklch,var(--sync-loop-accent) 28%,transparent))}.sync-loop-surface-toggle{position:absolute;z-index:2;inset:0;inline-size:100%;block-size:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}.sync-loop-surface-toggle:focus-visible{outline:2px solid var(--ring);outline-offset:-4px}.sync-loop-surface-toggle:active{background:color-mix(in oklch,var(--foreground) 2%,transparent)}@container (inline-size < 54rem){.sync-loop-stage{grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,9cqi,4rem)}.sync-loop-device--phone{justify-self:end;inline-size:min(100%,20rem);margin-block-start:0}.sync-loop-ring--wide{display:none}.sync-loop-ring--stacked{display:inline}}@container (inline-size < 36rem){.sync-loop-device--desktop{--sync-loop-focus-scale-x: 2;--sync-loop-focus-scale-y: 2.57485;aspect-ratio:384 / 167}.sync-loop-device--desktop .sync-loop-layer>picture{inline-size:200%;block-size:auto}.sync-loop-device--desktop .sync-loop-layer img{block-size:auto}}@media(prefers-reduced-motion:no-preference){[data-sync-loop][data-loop-enhanced] .sync-loop-layer,[data-sync-loop][data-loop-enhanced] .sync-loop-focus,[data-sync-loop][data-loop-enhanced] .sync-loop-ring-pulse{animation-duration:var(--sync-loop-duration);animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both}[data-sync-loop][data-loop-enhanced] .sync-loop-device--desktop .sync-loop-layer--before{animation-name:sync-loop-desktop-before}[data-sync-loop][data-loop-enhanced] .sync-loop-layer--adding{animation-name:sync-loop-desktop-adding}[data-sync-loop][data-loop-enhanced] .sync-loop-device--desktop .sync-loop-layer--after{animation-name:sync-loop-desktop-after}[data-sync-loop][data-loop-enhanced] .sync-loop-device--phone .sync-loop-layer--before{animation-name:sync-loop-phone-before}[data-sync-loop][data-loop-enhanced] .sync-loop-device--phone .sync-loop-layer--after{animation-name:sync-loop-phone-after}[data-sync-loop][data-loop-enhanced] .sync-loop-device--desktop .sync-loop-focus{animation-name:sync-loop-desktop-focus}[data-sync-loop][data-loop-enhanced] .sync-loop-device--phone .sync-loop-focus{animation-name:sync-loop-phone-focus}[data-sync-loop][data-loop-enhanced] .sync-loop-ring-pulse{animation-name:sync-loop-handoff}[data-sync-loop][data-loop-enhanced][data-loop-state=paused] .sync-loop-layer,[data-sync-loop][data-loop-enhanced][data-loop-state=paused] .sync-loop-focus,[data-sync-loop][data-loop-enhanced][data-loop-state=paused] .sync-loop-ring-pulse{animation-play-state:paused}}@keyframes sync-loop-desktop-before{0%,19.5%,to{opacity:1}20%,99.5%{opacity:0}}@keyframes sync-loop-desktop-adding{0%,19.5%,30%,to{opacity:0}20%,29.5%{opacity:1}}@keyframes sync-loop-desktop-after{0%,29.5%,to{opacity:0}30%,99.5%{opacity:1}}@keyframes sync-loop-phone-before{0%,47.5%,to{opacity:1}48%,99.5%{opacity:0}}@keyframes sync-loop-phone-after{0%,47.5%,to{opacity:0}48%,99.5%{opacity:1}}@keyframes sync-loop-desktop-focus{0%,29.5%,62%,to{opacity:0}31%,56%{opacity:1}}@keyframes sync-loop-phone-focus{0%,47.5%,62%,to{opacity:0}49%,56%{opacity:1}}@keyframes sync-loop-handoff{0%,29.5%{opacity:0;stroke-dashoffset:7}31%{opacity:.8;stroke-dashoffset:0}46.5%{opacity:.8;stroke-dashoffset:-93}48%,to{opacity:0;stroke-dashoffset:-100}}