.demo-video{width:100%;max-width:min(100%, calc(68svh * var(--demo-video-ratio)));aspect-ratio:var(--demo-video-ratio);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-lg);margin:0 auto;position:relative;overflow:hidden}.demo-video:before{content:"";background:linear-gradient(100deg, var(--color-surface) 30%, var(--color-surface-hover) 50%, var(--color-surface) 70%);animation:demo-video-shimmer 1.6s var(--ease-in-out) infinite;background-size:300% 100%;position:absolute;inset:0}.demo-video--poster-ready:before{opacity:0;animation:none}@keyframes demo-video-shimmer{0%{background-position:150% 0}to{background-position:-150% 0}}.demo-video__poster{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .4s var(--ease-out);display:block;position:relative}.demo-video--poster-ready .demo-video__poster{opacity:1}.demo-video__poster--hidden{opacity:0}.demo-video__play{border:1px solid var(--color-border-accent);border-radius:var(--radius-full);background:var(--color-surface-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:72px;height:72px;color:var(--color-accent);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);place-items:center;margin:auto;padding:0;display:grid;position:absolute;inset:0}.demo-video__play:hover,.demo-video__play:focus-visible{background:var(--color-accent);color:var(--color-bg);transform:scale(1.08)}.demo-video__play svg{margin-left:3px}.demo-video__player{opacity:0;width:100%;height:100%;transition:opacity .3s var(--ease-out);background:0 0;display:block;position:absolute;inset:0}.demo-video__player--visible{opacity:1}.demo-video__spinner{border:2px solid var(--color-border-strong);border-top-color:var(--color-accent);border-radius:var(--radius-full);width:40px;height:40px;margin:auto;animation:.8s linear infinite demo-video-spin;position:absolute;inset:0}@keyframes demo-video-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.demo-video:before,.demo-video__spinner{animation:none}.demo-video__poster,.demo-video__player,.demo-video__play{transition:none}}