body,html{--demo-frame-width:min(1024px,calc(100vw - 80px));--demo-frame-height:627px;--demo-frame-max-width:100%;--demo-frame-max-height:100vh}.disable-animations *{animation:none!important;transition:none!important}.disable-animations .demo-container-image-left img,.disable-animations .demo-container-image-right img,.disable-animations .gradient-layer{transition:opacity 1.2s ease-in-out!important}.disable-animations .recorder-container{transition:opacity .2s ease-in-out!important}.disable-animations .recorder-container.show{transition:opacity .2s ease-in-out 1s!important}.disable-animations .cursor-container,.disable-animations .notes-container,.disable-animations .slack-container{transition:scale .15s cubic-bezier(.4,0,.6,1),translate .15s cubic-bezier(.4,0,.6,1),opacity .1s ease-out,filter .15s ease-out!important}.disable-animations .dyn-border,.disable-animations .dyn-recording-window{transition:width .5s cubic-bezier(.25,.1,.1,1),height .5s cubic-bezier(.25,.1,.1,1),clip-path .5s cubic-bezier(.25,.1,.1,1),opacity .2s ease!important}.disable-animations .dyn-waveform.active{animation:dyn-waveform-fade .5s ease!important}.disable-animations .dyn-button{transition:background-color .25s cubic-bezier(.25,.1,.1,1),opacity .25s cubic-bezier(.25,.1,.1,1) .2s!important}.disable-animations .demo-container-gradient.slow-transition .gradient-layer,.disable-animations .demo-container-image-left.slow-transition img,.disable-animations .demo-container-image-right.slow-transition img,.disable-animations.slow-transition .gradient-layer{transition:opacity 8s ease-in-out!important}.demo-container{position:relative;background-color:#000;background-attachment:fixed;margin:0 auto;overflow:visible!important;--base-transition-delay:0.1s}@media (min-width:800px){.demo-container{min-height:350vh}}.demo-container-inner{height:100vh;width:100vw;overflow:hidden;left:0}.demo-loader{transition:opacity .2s ease-in-out;opacity:1}.demo-loader.loaded{opacity:0;pointer-events:none}.demo-container-intro{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:100000;gap:24px}@media (max-width:800px){.demo-container-intro{gap:0}.demo-container-intro .intro-header{font-size:36px;line-height:38.52px;letter-spacing:-1.8px}.demo-container-intro .intro-1{margin-top:12px}.demo-container-intro .intro-2{width:289px;margin:24px auto}.demo-container-intro .intro-demo{margin-top:12px;padding:12px 18px;border-radius:99px;background:hsla(0,0%,100%,.08)}}.intro-download{position:relative;min-height:44px;display:flex;justify-content:center}.intro-download-buttons{display:flex;justify-content:center;align-items:center;gap:12px;transition:opacity .25s ease-out}.intro-download-buttons.transitioning,.intro-download-email{opacity:0;pointer-events:none}.intro-download-email{position:absolute;top:0;left:50%;transform:translateX(-50%);transition:opacity .25s ease-out}.intro-download-email.visible{opacity:1;pointer-events:auto}.demo-container-frame{max-width:var(--demo-frame-max-width);overflow:hidden;border-radius:0;inset:0;z-index:1;margin:0 auto;width:100%;height:100%;background:#000}.demo-container-frame,.demo-container-instructions{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute}.demo-container-instructions{z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:450px;padding:0 8px;text-align:center;font-size:24px;color:hsla(0,0%,100%,.65)}.demo-container-instructions.show{transition:opacity .5s ease-in-out .5s;opacity:1!important}.demo-container-instructions.hide{transition:opacity .3s ease-in-out;opacity:0!important}.demo-container-instructions.day{color:rgba(0,0,0,.6)}.demo-container-instructions.day .keyboard-shortcut{color:rgba(0,0,0,.9)}.demo-container-menubar{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;top:-120px;transform:translateX(-50%);will-change:top;transition:top .7s cubic-bezier(.65,.02,.34,.96);z-index:9998;width:var(--demo-frame-width);max-width:1024px;pointer-events:none}.menubar-item-bg{background:linear-gradient(180deg,hsla(0,0%,100%,.07),hsla(0,0%,100%,.05)),hsla(0,0%,100%,.04);backdrop-filter:blur(20px)}.demo-container-menubar.animate{transition:top .7s cubic-bezier(.65,.02,.34,.96) calc(var(--base-transition-delay) + 1.4s);top:calc(50% - 313.5px)}.demo-container-dock{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;bottom:calc(50% - 293.5px);transform:translateX(-50%);background:linear-gradient(180deg,hsla(0,0%,100%,0),rgba(0,0,0,.2)),rgba(0,0,0,.4);padding:2px;border-radius:20px;border:1px solid hsla(0,0%,48%,.4);outline:.5px solid rgba(0,0,0,.6);box-shadow:0 0 0 .33px rgba(0,0,0,.5);backdrop-filter:blur(20px)}.demo-container-dock .dock-item:active img{filter:brightness(.5)}.demo-container-dock .dock-tooltip{-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#eaeaea;padding:2.2px 9px;border-radius:4px;position:relative;color:rgba(0,0,0,.9);backdrop-filter:blur(10px);font-size:13px;z-index:100010;box-shadow:0 0 2px .4px rgba(0,0,0,.5)}.demo-container-dock .dock-tooltip:after{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:12px;height:8px;background:#eaeaea;clip-path:polygon(0 0,100% 0,50% 100%);box-shadow:0 0 2px .4px rgba(0,0,0,.5)}.cursor-container,.notes-container,.slack-container{position:absolute;opacity:0;z-index:0;border:1px solid hsla(0,0%,100%,.1);box-shadow:0 8px 32px rgba(0,0,0,.3)}.recorder-container{transition:opacity .2s ease-in-out;position:absolute;opacity:0;z-index:0}.inactive .window-control-close,.inactive .window-control-maximize,.inactive .window-control-minimize{background-color:#555!important}.inactive .top-bar:hover .window-control-close{background-color:#ec6a5e!important}.inactive .top-bar:hover .window-control-minimize{background-color:#f4bf4f!important}.inactive .top-bar:hover .window-control-maximize{background-color:#61c554!important}.cursor-container,.notes-container,.slack-container{transition:scale .15s cubic-bezier(.4,0,.6,1),translate .15s cubic-bezier(.4,0,.6,1),opacity .1s ease-out,filter .15s ease-out}.cursor-container.minimized,.notes-container.minimized,.slack-container.minimized{scale:0;translate:0 280px;opacity:0;filter:brightness(1.3);pointer-events:none}.cursor-container.show,.notes-container.show,.recorder-container.show,.slack-container.show{opacity:1}.recorder-container.show{transition:opacity .2s ease-in-out 1s}.demo-container-image{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;width:100%;height:100%;inset:0;z-index:1;transform:scale(1);will-change:transform;background-blend-mode:normal,overlay,normal,normal;transition:transform 1.4s ease-in-out 1.1s;img{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;opacity:0;z-index:1;--face-transition-duration:1s;--face-transition-delay:0.6s;&.evening{transition:opacity var(--face-transition-duration) linear calc(var(--face-transition-delay) + .8s);z-index:4}}&.day img.day,&.dusk img.dusk,&.evening img.evening,&.night img.night{opacity:1!important}&.animate{transition:transform .8s cubic-bezier(.67,.02,.8,.99);transform:scale(2.2);transition-delay:var(--base-transition-delay);img.evening{transition:opacity var(--face-transition-duration) linear var(--face-transition-delay);opacity:1!important}}@media (max-width:800px){img{height:72%;min-width:150.5vh;width:auto}}}.demo-container-image-left{position:absolute;left:0;top:0;height:75vh;width:50vw;z-index:1;pointer-events:none}.demo-container-image-left img{display:block;height:100%;width:auto;opacity:0;transition:opacity 1.2s ease-in-out;position:absolute;top:0;left:0}.demo-container-image-left.slow-transition img{transition:opacity 8s ease-in-out}.demo-container-image-left img.evening{z-index:4}.demo-container-image-left.day img.day,.demo-container-image-left.dusk img.dusk,.demo-container-image-left.evening img.evening,.demo-container-image-left.night img.night{opacity:1!important}.demo-container-image-right{position:absolute;right:0;bottom:0;height:75vh;width:50vw;z-index:1;pointer-events:none}.demo-container-image-right img{display:block;height:100%;width:auto;opacity:0;transition:opacity 1.2s ease-in-out;position:absolute;top:0;right:0}.demo-container-image-right.slow-transition img{transition:opacity 8s ease-in-out}.demo-container-image-right img.evening{z-index:4}.demo-container-image-right.day img.day,.demo-container-image-right.dusk img.dusk,.demo-container-image-right.evening img.evening,.demo-container-image-right.night img.night{opacity:1!important}@media (max-width:800px){.demo-container-image-left,.demo-container-image-right{display:none}}.demo-container-gradient{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;width:100%;height:100%;inset:0;z-index:0;will-change:transform,height,top}.gradient-layer{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease-in-out}.demo-container-gradient.slow-transition .gradient-layer{transition:opacity 8s ease-in-out}.gradient-layer.day{background:linear-gradient(90deg,rgba(25,74,232,.2) 2.75%,rgba(255,190,10,.2) 99.26%),radial-gradient(170.32% 104.24% at 50% -.22%,rgba(38,84,144,.5) 17.02%,hsla(0,0%,100%,.5) 100%),radial-gradient(570.89% 154.84% at 50% -37.73%,rgba(0,0,0,.5) 0,rgba(2,32,68,.5) 21%,rgba(31,93,135,.5) 45.71%,rgba(93,109,142,.5) 61.83%,rgba(159,138,145,.5) 73.67%,hsla(13,39%,68%,.5) 80.39%,rgba(255,226,97,.5) 88%,rgba(255,126,34,.5) 92.69%,rgba(205,122,21,.5) 97.68%),linear-gradient(180deg,#2c84d7,#84a9ff),linear-gradient(180deg,#000 -11.51%,#022044 18.08%,#1f5d87 52.9%,#5d6d8e 75.62%,#9f8a91 92.29%,#cd9b8d 101.77%,#ffc261 112.49%,#ffc422 119.1%,#cd4015 126.13%),linear-gradient(0deg,#000,#000),#fff;background-blend-mode:overlay,screen,overlay,normal,normal,normal,normal}.gradient-layer.dusk{background:linear-gradient(90deg,rgba(25,153,232,.15) 2.75%,rgba(164,91,242,.15) 99.26%),linear-gradient(180deg,rgba(0,0,0,.5) .85%,rgba(0,5,46,.5) 25.81%,rgba(41,40,94,.5) 58.36%,rgba(84,60,123,.5) 79.52%,rgba(133,90,146,.5) 95.8%,rgba(195,134,171,.5) 107.19%),linear-gradient(180deg,#000 .85%,#112d72 33.4%,#4b52aa 49.68%,#a887dc 70.84%,#e6c4e7 95.8%,#fcdbef 107.19%),#000;background-blend-mode:overlay,normal,normal,normal}.gradient-layer.night{background:linear-gradient(90deg,rgba(25,153,232,.1) 2.75%,rgba(164,91,242,.1) 99.26%),radial-gradient(83.41% 104.24% at 50% -.22%,rgba(38,84,144,0) 72.08%,hsla(0,100%,73%,0) 100%),radial-gradient(609.81% 213.79% at 50% -37.73%,rgba(0,0,0,.5) 0,rgba(2,32,68,.5) 21%,rgba(31,93,135,.5) 45.71%,rgba(93,109,142,.5) 61.83%,rgba(159,138,145,.5) 73.67%,hsla(13,39%,68%,.5) 80.39%,rgba(255,162,97,.5) 88%,rgba(255,126,34,.5) 92.69%,rgba(205,64,21,.5) 97.68%),linear-gradient(180deg,#000 -11.51%,#022044 18.08%,#1f5d87 52.9%,#5d6d8e 75.62%,#9f8a91 92.29%,#cd9b8d 101.77%,#ffa261 112.49%,#ff7e22 119.1%,#cd4015 126.13%),#000;background-blend-mode:overlay,overlay,normal,normal,normal}.demo-container-gradient.day .gradient-layer.day,.demo-container-gradient.dusk .gradient-layer.dusk,.demo-container-gradient.night .gradient-layer.night{opacity:1}.demo-container-post-links{position:absolute;width:var(--demo-frame-width);bottom:calc(50% - 380px);left:50%;transform:translateX(-50%);z-index:2;opacity:0;transition:opacity .5s ease-in-out}.demo-container-post-links.animate{opacity:1;transition-delay:calc(var(--base-transition-delay) + 1s)}.download-cta-mac{position:relative;border:1px solid transparent;background-clip:padding-box;transition:all .2s ease-in-out;background:linear-gradient(180deg,#fff,#f0f0f0);box-shadow:0 2px 6px rgba(0,0,0,.08)}.download-cta-mac:hover{background:linear-gradient(180deg,#f0f0f0,#e8e8e8);box-shadow:0 4px 8px rgba(0,0,0,.12)}.download-cta-mac:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(0,0,0,.12),rgba(0,0,0,.08) 50%,rgba(0,0,0,.04));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.download-cta-windows{position:relative;border:1px solid transparent;background-clip:padding-box;transition:all .2s ease-in-out;background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.95));backdrop-filter:blur(8px)}.download-cta-windows:hover{background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.85));box-shadow:0 4px 12px rgba(0,0,0,.15)}.download-cta-windows:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.08) 50%,hsla(0,0%,100%,.05));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.download-cta-post{position:relative;border:1px solid transparent;background-clip:padding-box;transition:all .2s ease-in-out;background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.95));backdrop-filter:blur(8px)}.download-cta-post:hover{background:linear-gradient(180deg,rgba(30,30,30,.95),#141414);box-shadow:0 4px 12px rgba(0,0,0,.2);transform:scale(1.02);filter:brightness(1.03)}.download-cta-post:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,hsla(0,0%,100%,.2),hsla(0,0%,100%,.15) 50%,hsla(0,0%,100%,.1));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.download-requirements{color:hsla(0,0%,100%,.7);font-size:12px;font-weight:400;letter-spacing:.2px}.download-cta-ios{position:relative;border-radius:999px;background:linear-gradient(135deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,.1) 50%,hsla(0,0%,100%,.05));transition:all .2s ease-in-out;color:hsla(0,0%,100%,.9);font-weight:500;letter-spacing:.3px;.download-now{color:hsla(0,0%,100%,.6);font-weight:400;transition:color .2s ease-in-out}}.download-cta-ios:hover{background:linear-gradient(135deg,hsla(0,0%,100%,.2),hsla(0,0%,100%,.15) 50%,hsla(0,0%,100%,.1));.download-now{color:hsla(0,0%,100%,.8)}}.download-cta-ios:before{content:"";position:absolute;inset:-1px;border-radius:999px;padding:1px;background:linear-gradient(135deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,.2) 50%,hsla(0,0%,100%,.1));animation:rotate 4s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes rotate{0%{background-position:0 0}to{background-position:200% 0}}.floating-nav{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:1000000;display:flex;align-items:center;gap:18px;padding:4px 4px 4px 15px;background:linear-gradient(90deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,.05)),linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.7));backdrop-filter:blur(5px);border-radius:1000px;border:none;box-shadow:0 0 0 1px rgba(0,0,0,.8);overflow:hidden}.floating-nav:before{content:"";position:absolute;inset:0;border-radius:1000px;padding:1px;background:linear-gradient(90deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 60%,hsla(0,0%,100%,.3));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.floating-nav-link{font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:-.14px;color:hsla(0,0%,100%,.35);text-decoration:none;text-shadow:0 .15px .1px rgba(0,0,0,.5);transition:color .2s ease-out}.floating-nav-link:hover{color:hsla(0,0%,100%,.6)}.floating-nav-link.active{color:hsla(0,0%,100%,.8)}.floating-nav-download{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px;background:#fff;border-radius:1000px;border:none;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:-.14px;color:#000;text-decoration:none;transition:background .2s ease-out}.floating-nav-download:hover{background:hsla(0,0%,100%,.9)}.floating-nav-download svg{flex-shrink:0}.time-switcher{position:absolute;top:24px;right:24px;z-index:100001;display:flex;align-items:center;justify-content:center;gap:0;padding:5px;background:rgba(0,0,0,.6);backdrop-filter:blur(20px);border-radius:17px;border:1px solid hsla(0,0%,100%,.1);opacity:0;transition:opacity .3s ease-in-out}.time-switcher.visible{opacity:1}.time-switcher-highlight{position:absolute;width:24px;height:24px;top:5px;background:hsla(0,0%,100%,.15);border-radius:12px}.time-switcher button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:hsla(0,0%,100%,.4);background:transparent;border:none;cursor:pointer;transition:color .2s ease-in-out}.time-switcher button:hover{color:hsla(0,0%,100%,.7)}.time-switcher button.active{color:hsla(0,0%,100%,.95)}.demo-container-gradient{transition:opacity .4s ease-in-out}.demo-container-gradient.transitioning{opacity:0}.demo-replay-overlay{position:absolute;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}.replay-button{display:flex;align-items:center;gap:12px;padding:8px 20px 8px 8px;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:1000px;color:#fff;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease-out}.replay-button:hover{background:hsla(0,0%,100%,.15);border-color:hsla(0,0%,100%,.3)}.replay-button-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:hsla(0,0%,100%,.15);border-radius:50%}.demo-container-frame{position:relative}.demo-container-frame:after{content:"";position:absolute;inset:calc(50% - 313.5px) calc(50% - min(512px, calc(50vw - 40px)));border-radius:18px;pointer-events:none;z-index:-1;box-shadow:0 0 80px 20px rgba(100,140,200,.08),0 0 120px 40px rgba(80,100,180,.05),0 0 180px 60px rgba(60,80,140,.03);opacity:0;transition:opacity .5s ease-in-out}.demo-container.show-glow .demo-container-frame:after{opacity:1}