.demo-cta-container{text-align:center}.demo-cta-content{margin:0 auto;max-width:720px}.demo-cta-heading{margin-bottom:var(--space-md)}.demo-cta-description{margin-bottom:var(--space-lg)}.demo-cta-trigger{display:inline-flex}.demo-cta-placeholder-notice{color:var(--color-text-secondary);font-size:var(--font-size-small)}.demo-cta-trigger--preview{background:none;border:0;border-radius:var(--radius-card);cursor:pointer;display:block;line-height:0;margin:0 auto;max-width:640px;overflow:hidden;padding:0;position:relative;transition:transform var(--transition-base);width:100%}.demo-cta-preview-image{display:block;height:auto;width:100%}.demo-cta-trigger--preview:before{background:rgba(0,0,0,.2);content:"";inset:0;position:absolute;transition:background-color var(--transition-base)}.demo-cta-trigger--preview:hover:before{background:rgba(0,0,0,.3)}.demo-cta-play-button{align-items:center;background-color:hsla(0,0%,100%,.9);border-radius:var(--radius-full);display:flex;height:72px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:transform var(--transition-base);width:72px}.demo-cta-trigger--preview:hover .demo-cta-play-button{transform:translate(-50%,-50%) scale(1.1)}.demo-cta-play-icon{color:var(--color-primary);font-size:26px;line-height:normal;margin-left:4px}.demo-modal{align-items:center;display:flex;height:100%;justify-content:center;left:0;opacity:0;padding:var(--space-lg);position:fixed;top:0;transition:opacity .4s cubic-bezier(.4,0,.2,1),visibility .4s cubic-bezier(.4,0,.2,1);visibility:hidden;width:100%;z-index:9999}.demo-modal:before{background-color:rgba(0,0,0,.8);content:"";inset:0;opacity:0;position:absolute;transition:opacity .4s cubic-bezier(.4,0,.2,1)}.demo-modal.active{opacity:1;visibility:visible}.demo-modal.active:before{opacity:1}body.demo-modal-open{overflow:hidden}.demo-modal-content{background-color:var(--color-bg-primary);border-radius:var(--radius-card);box-shadow:0 25px 50px -12px rgba(0,0,0,.25);max-height:90vh;max-width:1200px;opacity:0;overflow:hidden;position:relative;transform:scale(.9) translateY(30px);transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s cubic-bezier(.4,0,.2,1);width:100%;z-index:1}.demo-modal.active .demo-modal-content{opacity:1;transform:scale(1) translateY(0)}.demo-modal-close{align-items:center;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.5);border:none;border-radius:var(--radius-full);color:#fff;cursor:pointer;display:flex;font-size:32px;height:48px;justify-content:center;line-height:1;padding-bottom:5px;position:absolute;right:var(--space-md);top:var(--space-md);transition:all var(--transition-base);width:48px;z-index:10}.demo-modal-close:focus,.demo-modal-close:hover{background-color:rgba(0,0,0,.8);outline:2px solid hsla(0,0%,100%,.5);outline-offset:2px;transform:scale(1.1)}.demo-modal-close:active{transform:scale(.95)}.demo-modal-player{aspect-ratio:16/10;background-color:var(--color-bg-secondary);position:relative;width:100%}.demo-modal-player[data-aspect-ratio="16:9"]{aspect-ratio:16/9}.demo-modal-player[data-aspect-ratio="4:3"]{aspect-ratio:4/3}.demo-modal-player[data-aspect-ratio="1:1"]{aspect-ratio:1/1}.demo-modal-player iframe{border:none;height:100%;left:0;position:absolute;top:0;width:100%}.demo-modal-placeholder{align-items:center;display:flex;flex-direction:column;gap:var(--space-sm);inset:0;justify-content:center;padding:var(--space-xl);position:absolute;text-align:center}.demo-modal-placeholder-text{max-width:40ch}.demo-modal-placeholder-button{margin-top:var(--space-sm)}@media (max-width:768px){.demo-modal{padding:var(--space-sm)}.demo-modal-content{max-height:95vh}.demo-modal-close{font-size:24px;height:32px;right:8px;top:8px;width:32px;z-index:100}.demo-modal-placeholder{padding:var(--space-md)}}@media (orientation:landscape) and (max-height:500px){.demo-modal{padding:var(--space-xs)}.demo-modal-content{aspect-ratio:16/9;height:92vh;max-height:92vh;max-width:100%;width:auto}.demo-modal-player{height:100%;inset:0;position:absolute;width:100%}.demo-modal-close{height:32px;right:6px;top:6px;width:32px}}@media (prefers-reduced-motion:reduce){.demo-modal,.demo-modal:before{transition:opacity .1s,visibility .1s}.demo-modal-close,.demo-modal-content{transition:none}}