:root{--device-body: 220 9% 13%;--device-rim: 220 8% 34%;--device-edge: 0 0% 100% / .1;--device-base: 220 7% 22%;--device-base-edge: 0 0% 100% / .14;--device-shadow: 0 0% 0% / .55;--stage-glow: var(--primary) / .16}:root.light{--device-body: 222 12% 14%;--device-rim: 220 8% 46%;--device-edge: 0 0% 100% / .16;--device-base: 220 8% 78%;--device-base-edge: 0 0% 100% / .7;--device-shadow: 220 40% 12% / .22;--stage-glow: var(--primary) / .1}.hero-phone{background:hsl(var(--device-body));box-shadow:inset 0 0 0 1.5px hsl(var(--device-rim)),inset 0 1px 0 2px hsl(var(--device-edge)),0 30px 60px -20px hsl(var(--device-shadow)),0 60px 120px -40px hsl(var(--device-shadow))}.hero-laptop-lid{background:hsl(var(--device-body));box-shadow:inset 0 0 0 1px hsl(var(--device-rim)),inset 0 1px 0 1px hsl(var(--device-edge)),0 40px 80px -30px hsl(var(--device-shadow))}.hero-laptop-base{background:hsl(var(--device-base));box-shadow:inset 0 1px hsl(var(--device-base-edge)),0 18px 30px -12px hsl(var(--device-shadow))}.hero-notch{background:hsl(var(--device-body))}.hero-glow{background:radial-gradient(ellipse 50% 50% at 50% 50%,hsl(var(--stage-glow)),transparent 70%)}:root{--hero-ease: cubic-bezier(.22, .61, .36, 1);--hero-ease-in-out: cubic-bezier(.45, 0, .25, 1)}.hero-screen{transition:opacity .6s var(--hero-ease-in-out)}.hero-screen[data-fading=true]{opacity:0}.hero-sheet{transition:transform .72s var(--hero-ease-in-out)}.hero-sheet[data-away=true]{transform:translateY(104%)}.hero-dim{transition:opacity .72s var(--hero-ease-in-out)}.hero-sheet-scroll{transition:transform .9s var(--hero-ease-in-out)}.hero-sheet-scroll[data-down=true]{transform:translateY(-128px)}.hero-sheet[data-down=true] .hero-sheet-scroll{-webkit-mask-image:linear-gradient(to bottom,transparent 128px,black 172px);mask-image:linear-gradient(to bottom,transparent 128px,black 172px)}.hero-setup [role=switch],.hero-setup [role=radiogroup]{transition:box-shadow .48s var(--hero-ease)}.hero-setup[data-changing=lookout] [role=switch],.hero-setup[data-changing=gmail] [data-app=gmail] [role=radiogroup],.hero-setup[data-changing=slack] [data-app=slack] [role=radiogroup]{box-shadow:0 0 0 2px hsl(var(--background)),0 0 0 3.5px hsl(var(--primary) / .45)}.hero-caption{transition:opacity .6s var(--hero-ease),transform .6s var(--hero-ease)}.hero-caption[data-shown=false]{opacity:.28;transform:translateY(2px)}@keyframes hero-arrive{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes hero-fade{0%{opacity:0}to{opacity:1}}[data-hero-stage] .msg-in,[data-hero-stage] .you-in,[data-hero-stage] .step-in{animation:hero-arrive .56s var(--hero-ease) backwards}[data-hero-stage] .screen-in{animation:hero-fade .48s var(--hero-ease) backwards}[data-hero-stage] .status-in{animation:hero-fade .42s var(--hero-ease) backwards}[data-hero-stage] .reply-in>*{animation:hero-arrive .56s var(--hero-ease) backwards}@media (prefers-reduced-motion: reduce){.hero-screen,.hero-sheet,.hero-sheet-scroll,.hero-dim,.hero-caption,.hero-setup [role=switch],.hero-setup [role=radiogroup]{transition:none}[data-hero-stage] .msg-in,[data-hero-stage] .you-in,[data-hero-stage] .step-in,[data-hero-stage] .screen-in,[data-hero-stage] .status-in,[data-hero-stage] .reply-in>*{animation:none}}:root{--wave-a: 194 62% 68%;--wave-b: 220 60% 70%;--wave-c: 250 42% 76%}.hero-wave{position:absolute;left:-20%;width:140%;height:46%;border-radius:50% 50% 48% 52%/60% 60% 40% 40%;filter:blur(96px);opacity:.42;will-change:transform}.hero-wave-a{top:-12%;background:hsl(var(--wave-a) / .55);animation:hero-wave-drift 48s var(--hero-ease-in-out) infinite}.hero-wave-b{top:20%;background:hsl(var(--wave-b) / .5);animation:hero-wave-drift 62s var(--hero-ease-in-out) infinite reverse}.hero-wave-c{top:52%;background:hsl(var(--wave-c) / .45);animation:hero-wave-drift 76s var(--hero-ease-in-out) infinite}@keyframes hero-wave-drift{0%,to{transform:translateZ(0) rotate(-1.5deg) scaleX(1)}50%{transform:translate3d(3%,2%,0) rotate(1.5deg) scaleX(1.04)}}[data-soft] .hero-wave{opacity:.28}@media (prefers-reduced-motion: reduce){.hero-wave{animation:none}}