@property --preview-browser-x{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --preview-browser-y{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --preview-browser-z{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --preview-browser-scale{syntax: "<number>"; inherits: false; initial-value: 1;}@property --preview-phone-x{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --preview-phone-y{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --preview-phone-z{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@media(prefers-reduced-motion:no-preference)and (forced-colors:none){html[data-preview-depth=ready] .browser-frame[data-preview-angle=tilted]{--preview-browser-x: 8deg;--preview-browser-y: -6deg;--preview-browser-z: -.5deg;--preview-browser-scale: .94;transform-origin:50% 0;transform:perspective(2800px) rotateX(var(--preview-browser-x, 0deg)) rotateY(var(--preview-browser-y, 0deg)) rotate(var(--preview-browser-z, 0deg)) scale(var(--preview-browser-scale, 1))}html[data-preview-depth=ready] .browser-frame:not([data-preview-angle=tilted]){transform:none;transition:none;will-change:auto}html[data-preview-depth=ready] .demo-card[data-preview-phone]{perspective:1350px}html[data-preview-depth=ready] .demo-card[data-preview-phone]>.phone-frame{transform-origin:50% 50%;transform:rotateX(var(--preview-phone-x, 0deg)) rotateY(var(--preview-phone-y, 0deg)) rotate(var(--preview-phone-z, 0deg)) translateZ(2px);transition:transform .32s cubic-bezier(.22,.61,.36,1)}html[data-preview-depth=ready] .demo-card[data-preview-phone][data-preview-visible]>.phone-frame{will-change:transform}html[data-preview-depth=ready] .demo-card[data-preview-phone]:focus-within>.phone-frame{transform:none;will-change:auto}}@media(max-width:760px)and (prefers-reduced-motion:no-preference)and (forced-colors:none){html[data-preview-depth=ready] .browser-frame[data-preview-angle=tilted]{--preview-browser-x: 2.4deg;--preview-browser-y: -2.4deg;--preview-browser-z: -.16deg;--preview-browser-scale: .977}}@media(hover:hover)and (pointer:fine)and (prefers-reduced-motion:no-preference)and (forced-colors:none){html[data-preview-depth=ready] .demo-card[data-preview-phone]:hover>.phone-frame{transform:none}}@media(prefers-reduced-motion:reduce),(forced-colors:active){.browser-frame[data-preview-angle],.demo-card[data-preview-phone]>.phone-frame{transform:none!important;will-change:auto!important;transition:none}}