.u2-demo{position:relative;max-width:min(1080px,calc(100svw - 2rem));margin-inline:auto}@media(min-width:768px){.u2-demo{max-width:min(1080px,calc(100svw - 2rem),84svh)}}.u2-demo-viewport{position:relative;aspect-ratio:var(--demo-ratio, 16 / 9);background:var(--u2-card)}.u2-demo-video{display:block;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}.u2-demo-toggle{position:absolute;right:14px;bottom:14px;z-index:1;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;color:var(--u2-ink);background:color-mix(in srgb,var(--u2-card) 94%,transparent);box-shadow:0 0 0 1px rgb(var(--u2-shadow-rgb) / .06),0 4px 12px -4px rgb(var(--u2-shadow-rgb) / .28);cursor:pointer;transition:background-color var(--u2-dur-hover) var(--u2-ease),box-shadow var(--u2-dur-hover) var(--u2-ease)}.u2-demo-toggle:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%}.u2-demo-toggle svg{width:16px;height:16px}@media(hover:hover)and (pointer:fine){.u2-demo-toggle:hover{background:var(--u2-card);box-shadow:0 0 0 1px rgb(var(--u2-shadow-rgb) / .1),0 6px 16px -4px rgb(var(--u2-shadow-rgb) / .3)}}@media(prefers-reduced-motion:reduce){.u2-demo-toggle{transition:none}}