: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%)}.hero-screen{transition:opacity .42s var(--ease-out, ease)}.hero-screen[data-fading=true]{opacity:0}.hero-sheet{transition:transform .46s var(--ease-out, ease)}.hero-sheet[data-away=true]{transform:translateY(104%)}.hero-dim{transition:opacity .46s var(--ease-out, ease)}.hero-sheet-scroll{transition:transform .6s var(--ease-in-out, ease)}.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 .3s 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 4px hsl(var(--primary) / .6)}.hero-caption{transition:opacity .4s var(--ease-out, ease),transform .4s var(--ease-out, ease)}.hero-caption[data-shown=false]{opacity:.28;transform:translateY(4px)}@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}}.hero-wave{position:absolute;left:-20%;width:140%;height:46%;border-radius:50% 50% 48% 52%/60% 60% 40% 40%;filter:blur(80px);opacity:.28;will-change:transform}.hero-wave-a{top:-10%;background:#3dd6f599;animation:hero-wave-drift 26s ease-in-out infinite}.hero-wave-b{top:22%;background:#5586f68c;animation:hero-wave-drift 34s ease-in-out infinite reverse}.hero-wave-c{top:54%;background:#9c6cef80;animation:hero-wave-drift 42s ease-in-out infinite}@keyframes hero-wave-drift{0%,to{transform:translateZ(0) rotate(-3deg) scaleX(1)}50%{transform:translate3d(6%,4%,0) rotate(3deg) scaleX(1.08)}}[data-soft] .hero-wave{opacity:.18}@media (prefers-reduced-motion: reduce){.hero-wave{animation:none}}