.device-preview{align-items:center;height:100%;display:flex}.device-preview__body{background:#000;height:100%;transition:aspect-ratio .45s cubic-bezier(.25,.1,.2,1),border-radius .45s cubic-bezier(.25,.1,.2,1);position:relative;box-shadow:0 32px 64px #00000040,0 12px 24px #00000026}.device-preview__screen-mask{transition:top .45s cubic-bezier(.25,.1,.2,1),bottom .45s cubic-bezier(.25,.1,.2,1),left .45s cubic-bezier(.25,.1,.2,1),right .45s cubic-bezier(.25,.1,.2,1),border-radius .45s cubic-bezier(.25,.1,.2,1);position:absolute;overflow:hidden}.device-preview__screen{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .35s cubic-bezier(.25,.1,.2,1);position:absolute;inset:0}.device-preview__screen--active{opacity:1}.device-preview video.device-preview__screen{object-fit:cover}.device-preview__overlay{z-index:2;border:2px solid var(--color-brand-accent);background:color-mix(in srgb, var(--color-brand-accent) 16%, transparent);pointer-events:none;position:absolute}.device-preview__overlay--rect{border-radius:4px}.device-preview__overlay--circle{border-radius:50%}.device-preview__overlay--pulse:after{content:"";border:2px solid var(--color-brand-accent);border-radius:inherit;position:absolute;inset:-2px}.device-preview__overlay-label{white-space:nowrap;background:var(--color-brand-accent);color:#fff;border-radius:4px;padding:2px 8px;font-size:.72rem;font-weight:600;line-height:1.3;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}@media (prefers-reduced-motion:no-preference){.device-preview__overlay--pulse:after{animation:1.8s ease-out infinite device-preview-pulse}}@keyframes device-preview-pulse{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}