.preview-frame-wrap{width:100%;max-width:var(--preview-max-width);display:flex;justify-content:center;align-items:center}.preview-frame,.preview-frame-wrap{max-height:var(--preview-max-height)}.preview-frame{aspect-ratio:var(--preview-aspect);width:min(100%,calc(var(--preview-max-height) * var(--preview-width) / var(--preview-height)));position:relative;overflow:hidden;isolation:isolate}.preview-frame--device{padding:8px;border-radius:36px;background:#f6f9fc;box-shadow:0 50px 100px -20px rgba(50,50,93,.25),0 30px 60px -30px rgba(0,0,0,.3),inset 0 -2px 6px 0 rgba(10,37,64,.35)}.preview-frame--minimal{padding:0;border-radius:32px;background:#fff;box-shadow:0 30px 80px -30px rgba(15,23,42,.35),0 12px 30px -20px rgba(15,23,42,.3)}.preview-frame--none{padding:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}.preview-frame--glass{padding:8px;border-radius:36px;background:hsla(0,0%,100%,.35);backdrop-filter:blur(18px);box-shadow:0 40px 100px -30px rgba(15,23,42,.45),inset 0 1px 0 hsla(0,0%,100%,.6)}.preview-frame__viewport{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;isolation:isolate}.preview-frame--device .preview-frame__viewport,.preview-frame--glass .preview-frame__viewport{border-radius:30px}.preview-frame--minimal .preview-frame__viewport{border-radius:32px}.preview-frame--none .preview-frame__viewport{border-radius:inherit}@keyframes comments-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes screen-in{0%{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}@keyframes dm-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-comments-up{animation:comments-up .5s cubic-bezier(.22,1,.36,1) both}.animate-fade-in{animation:fade-in .25s ease-out both}.animate-screen-in{animation:screen-in .35s ease-out both}.animate-dm-in{opacity:0;animation:dm-in .5s ease-out both}