.demo-page{background:#0c0f1a;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.demo-header{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(15,23,42,.95);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.demo-viewport{flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.demo-frame{border-radius:10px;flex-shrink:0;width:1280px;height:800px;transition:transform .7s cubic-bezier(.4,0,.15,1);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 25px 80px -12px rgba(0,0,0,.6)}@media (min-width:1024px){.demo-frame{transform:scale(var(--frame-scale,.85))}}@media (max-width:1023px){.demo-frame{transform:var(--m-transform,scale(.3));transform-origin:0 0;position:absolute;top:0;left:0}}.demo-screen-enter{animation:.35s ease-out demoFadeIn}@keyframes demoFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.demo-modal-backdrop{z-index:50;background:rgba(0,0,0,.5);justify-content:center;align-items:center;animation:.3s ease-out demoFadeIn;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.demo-tooltip{z-index:200;background:#fff;position:absolute;overflow:hidden;box-shadow:0 20px 60px -10px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06)}@media (min-width:1024px){.demo-tooltip{border-radius:16px;width:400px;animation:.35s cubic-bezier(.34,1.56,.64,1) tooltipUp;bottom:24px;left:50%;transform:translate(-50%)}}@media (max-width:1023px){.demo-tooltip{padding-bottom:env(safe-area-inset-bottom,0px);border-radius:20px 20px 0 0;animation:.35s ease-out tooltipSheetUp;bottom:0;left:0;right:0}}@keyframes tooltipUp{0%{opacity:0;transform:translate(-50%)translateY(16px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes tooltipSheetUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.demo-tooltip[data-step]{animation:.3s ease-out tooltipPulse}@keyframes tooltipPulse{0%{opacity:.7;transform:translate(-50%)scale(.98)}to{opacity:1;transform:translate(-50%)scale(1)}}@media (max-width:1023px){@keyframes tooltipPulse{0%{opacity:.7}to{opacity:1}}}