.froot-preview{color:#242127;background:#eeedf0;flex-direction:column;align-items:center;gap:20px;min-height:100svh;padding:24px;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;display:flex}.froot-preview-header{justify-content:space-between;align-items:center;width:min(100%,900px);font-size:13px;display:flex}.froot-preview .froot-onboarding{width:min(402px,100%,45.9954svh - 64.3936px);box-shadow:0 16px 64px #3e243d14}.froot-preview-pause{color:#706773;background:0 0;border:0;padding:4px 12px;font-size:12px}.froot-onboarding{color:#000;width:min(402px,100%);font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;container-type:inline-size}.froot-screen{aspect-ratio:402/874;isolation:isolate;background:#fff;width:100%;position:relative;overflow:hidden}.froot-top-controls{z-index:2;height:10.945cqw;position:absolute;top:18.408cqw;left:3.98cqw;right:3.98cqw}.froot-glass-button{color:#1a1a1a;background:linear-gradient(#ebebeb 0%,#f4f4f4 45%,#fff 100%);border:.125cqw solid #e8e8e8;border-radius:100px;height:10.945cqw;position:absolute;top:0;box-shadow:inset 0 .3cqw .5cqw #fff,0 1.99cqw 3.73cqw #00000005}.froot-skip{opacity:1;cursor:default;place-items:center;width:15.423cqw;padding:0;font-size:4.23cqw;font-weight:500;line-height:4.975cqw;display:grid;right:0}.froot-back{place-items:center;width:10.945cqw;padding:0;transition:filter .18s,transform .18s;display:grid;left:0}.froot-back svg{stroke-width:2px;width:6.47cqw;height:6.47cqw}.froot-dots{justify-content:center;align-items:center;gap:1.99cqw;width:29.85cqw;height:11.94cqw;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%)}.froot-dots span{background:#bfbfbf;border-radius:50%;width:1.99cqw;height:1.99cqw;transition:background-color .25s}.froot-dots .is-current{background:#1a1a1a}.froot-media{aspect-ratio:1;width:75.373cqw;animation:.48s ease-out both froot-media-in;position:absolute;top:49.254cqw;left:12.189cqw}.froot-media :is(img,video){object-fit:cover;width:100%;height:100%;display:block}.froot-copy{text-align:center;width:88.06cqw;position:absolute;top:133.582cqw;left:5.97cqw}.froot-copy h1{letter-spacing:.0945cqw;margin:0;font-size:6.965cqw;font-weight:700;line-height:8.458cqw;animation:.52s cubic-bezier(.2,.7,.2,1) both froot-copy-in}.froot-copy p{letter-spacing:-.112cqw;white-space:nowrap;color:#3c3c4399;margin:3.98cqw 0 0;font-size:4.975cqw;font-weight:400;line-height:6.219cqw;animation:.52s cubic-bezier(.2,.7,.2,1) 90ms both froot-copy-in}.froot-next{isolation:isolate;color:#4c041d;letter-spacing:-.0647cqw;background:linear-gradient(78.535deg,#ff95a4 11.282%,#e96da8 99.076%);border:0;place-items:center;width:100%;height:17.91cqw;padding:0;font-size:5.473cqw;line-height:6.965cqw;display:grid;position:absolute;bottom:0;left:0;overflow:hidden}.froot-next:before{content:"";z-index:-1;opacity:0;background:#000;transition:opacity .16s;position:absolute;inset:0}.froot-next:after{content:"";z-index:-1;background:linear-gradient(110deg,#0000 38%,#fff6 50%,#0000 62%);transition:transform .65s cubic-bezier(.2,.7,.2,1);position:absolute;inset:-100% -50%;transform:translate(-75%)}.froot-next span{transition:transform .25s}.froot-next:active:before{opacity:.1}.froot-next:active span{transform:scale(.96)}.froot-onboarding button:focus-visible{outline-offset:-5px;outline:2px solid #4c041d}.concept-pink{--concept-color:#ed8fac}.froot-phone{width:min(402px,100%);position:relative;container-type:inline-size}.froot-phone .froot-onboarding{width:100%}.froot-phone .froot-screen{border-radius:13.93cqw}.concept-froot .concept-visual,.playground-modal-froot .playground-modal-media{container-type:size}.concept-froot .concept-open-trigger{border-radius:inherit;background:0 0;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.concept-froot .concept-open-trigger:focus-visible{outline-offset:-6px;outline:2px solid #e6e6ee}.concept-froot .concept-copy,.concept-froot .concept-visual{pointer-events:none}.concept-froot .froot-phone{pointer-events:auto;width:min(402px,41.1cqh,92%);position:absolute;bottom:6cqh;left:50%;transform:translate(-50%)}.playground-modal-froot .froot-interactive-phone{flex:none;width:min(402px,42cqh,90%)}.playground-modal-froot .froot-media video{object-fit:cover;border-radius:0;width:100%;max-width:none;height:100%}@media (hover:hover){.froot-next:hover:after{transform:translate(75%)}.froot-next:hover span{transform:translateY(-.5cqw)}.froot-next:active span{transform:scale(.96)}.froot-back:hover{filter:brightness(.96)}}@keyframes froot-copy-in{0%{opacity:0;transform:translateY(3cqw)}to{opacity:1;transform:translateY(0)}}@keyframes froot-media-in{0%{opacity:0}to{opacity:1}}@media (max-width:500px){.froot-preview{gap:16px;padding:16px 12px}.froot-preview-header{font-size:11px}.froot-preview .froot-onboarding{width:min(402px,100%,45.9954svh - 50.595px)}}@media (prefers-reduced-motion:reduce){.froot-onboarding *,.froot-onboarding :after{transition:none!important;animation:none!important}.froot-next:hover span{transform:none}.froot-next:after{display:none}}