@layer moderncss{@layer components{@layer button{@scope (.dark){button{color:var(--theme-surface-on-surface);background:var(--theme-primary-on-primary);border:1px solid var(--theme-outline-variant);&:hover,&:focus-visible{background:var(--theme-button-secondary-hover)}&.secondary{color:var(--theme-surface-surface);background:var(--theme-nav-button-hover);&:hover,&:focus-visible{background:var(--theme-button-secondary-inverse-hover)}}}}}@layer navbar{@media (width < 930px){header:has(.menu-checkbox:checked){&,& nav{overflow:auto;overscroll-behavior:contain}}}@layer hidey-bar{.header-wrapper:not(.header-wrapper:has(.menu-checkbox:checked)){transition:translate .25s;translate:0 0;@container scroll-state(scrolled:bottom){translate:0 -100%}}}}@layer carousel{@layer scroll-snapping{@layer base-setup{@supports (scroll-padding-inline:3rem){.carousel{scroll-padding-inline:3rem;scroll-snap-type:x mandatory;>*{scroll-snap-align:start}@media (width>=930px){padding-inline:3rem calc(40vi - 3rem)}}}}@layer snapped-effects{.carousel>*{container-type:scroll-state;@supports (container-type:scroll-state){>figure{opacity:.25;transition:opacity .5s ease;@container scroll-state(snapped:x){opacity:1}}>*:not(figure){transition:opacity .5s ease,translate .5s ease;transition-delay:0s;opacity:0;translate:0 calc(.5rem * ( sibling-index() - 1 )) 0;@container scroll-state(snapped:x){transition-delay:.2s;opacity:1;translate:0 0 0}}}}}}@layer niceties{.carousel{scrollbar-width:none;overscroll-behavior-x:contain}}@layer scroll-buttons{.carousel{position:relative;scroll-behavior:smooth;anchor-name:--carousel}}}}@layer animations{@layer revealing-welcome-items{#welcome{svg,.cta{@starting-style{translate:0 50% 0;opacity:0}}}}@layer scroll-triggered-typewriter-effect{@supports (timeline-trigger-name:--t){.typewriter{background:linear-gradient(90deg,var(--typewriter-text-color,var(--theme-surface-on-surface)) 0 0) 0/calc(var(--n,100) * 1ch) no-repeat transparent;-webkit-background-clip:text;color:transparent;animation:text 2s ease-in both;&::after{content:"|";--hdr-gradient:linear-gradient(in oklch,oklch(80% .3 34),oklch(90% .3 200));--sdr-gradient:linear-gradient(#ff4700,#0ff);background:var(--hdr-gradient);background-clip:text;color:transparent;animation:blink .2s 1.4s ease infinite alternate both}}#product *:has(>.typewriter){timeline-trigger:--t view() cover 30% cover 1000%;trigger-scope:--t;.typewriter{animation-trigger:--t play-once;&::after{animation-trigger:--t play-once;animation-delay:1.6s}}}.carousel>*{timeline-trigger:--t view(inline) entry 90% exit 50%;trigger-scope:--t;.typewriter{--typewriter-text-color:white;animation-trigger:--t play-forwards reset;animation-duration:1.5s;&::after{animation-trigger:--t play-forwards reset;animation-delay:.9s}}}#beforeyougo>.card{timeline-trigger:--t view() cover 30% cover 1000%;trigger-scope:--t;.typewriter{--typewriter-text-color:white;animation-trigger:--t play-once;animation-duration:2s;&::after{animation-trigger:--t play-once;animation-delay:1s}}}}}@layer moving-icons{@layer slide-in{#product .icons{timeline-trigger:--t view() cover 30% cover 1000%;trigger-scope:--t;animation:slide-in 1s ease both;animation-trigger:--t play-once}}@layer wobble{#product .icon{animation:wobble 4s ease infinite alternate;animation-delay:calc(mod(sibling-index(),5) * -1s)}}}@layer product-features{@supports (timeline-trigger-name:--t){@media (width>=930px){#features .feature{timeline-trigger:--t view() entry 100% cover 50%;trigger-scope:--t;h3{animation:fade-a-bit 500ms ease both;animation-trigger:--t play-forwards play-backwards}p{position:relative;&::after{content:"";position:absolute;bottom:0;left:0;right:0;height:100%;transform-origin:0 100%;background:#fff;animation:fake-clip-it 500ms ease both;animation-trigger:--t play-forwards play-backwards}}img:not(.feature:first-child img){animation:fade-in 500ms ease both;animation-trigger:--t play-forwards play-backwards}}}}}@layer scroll-driven-animations{@supports ((animation-timeline:scroll()) and (animation-range:0% 100%)){#beforeyougo .card{animation:scale-up linear both;animation-timeline:view();animation-range:entry 50% entry 100%}}}}}@layer components{@layer button{button{background:var(--theme-primary-primary);color:var(--theme-primary-on-primary);border:0px;border-radius:999px;padding:.6em 1.5em;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:.4rem;font-size:.9em;cursor:pointer;transition:.15s background ease-out;&:hover,&:focus-visible{background:var(--theme-button-states-primary-hovered)}&:has(span+.material-symbols-outlined){padding-inline-end:1em}&:has(.material-symbols-outlined+span){padding-inline-start:1em}&.secondary{color:var(--theme-surface-on-surface);background:var(--theme-secondary-button);border:1px solid var(--theme-outline-variant);&:hover,&:focus-visible{background:var(--theme-button-secondary-hover)}}}}@layer navbar{@layer shared{.menu-checkbox{display:none}}@layer mobile{@media (width < 930px){.menu-button{cursor:pointer;width:3.5em;border-radius:999px;text-align:center;place-content:center;transition:.15s background ease-out;&:hover,&:focus-visible{background:var(--theme-button-states-hovered)}}.menu-checkbox:checked{&~nav{position:fixed;inset:0;top:2.75em;display:block;background:var(--palette-grey-0)}&~.menu-button{[data-show-when=closed]{display:none!important}}&~.menu-button{background:var(--theme-primary-primary);color:var(--theme-primary-on-primary);&:hover,&:focus-visible{background:var(--theme-button-states-primary-hovered)}}}.menu-checkbox:not(:checked){&~.menu-button{[data-show-when=open]{display:none!important}}}header button{display:none}}}@layer large{@media (width>=930px){.menu-button{display:none}}}}@layer card{.card{border-radius:2em;&.dark{background:var(--theme-primary-primary);color:var(--theme-surface-surface)}}}}@layer layout{@layer navigation{.header-wrapper{position:fixed;top:0;left:0;right:0;background:var(--theme-surface-surface);z-index:1}header{button,.menu-button{margin-left:auto}}}@layer welcome{#welcome{p{span{display:block;font-size:.7em;color:var(--theme-surface-on-surface-variant)}}.cta{display:flex;flex-direction:row;flex-wrap:wrap;gap:.3em;justify-content:center;width:90%;margin:0 auto;button{font-size:1.15em}}}}@layer video{#video{iframe{width:100%;height:auto;aspect-ratio:16/9;max-height:75vh;border-radius:2em;overflow:clip}}}@layer product{#product{.icons{grid-column:fullbleed}.icons{height:max(24em,40vb);display:flex;flex-direction:row;gap:.5rem;align-items:center;overflow-x:clip;.icon{flex:0 0 clamp(4rem,10vw,6rem);aspect-ratio:1;border-radius:50%;background:rgba(183,191,217,.09);border:1px solid var(--theme-outline-variant);backdrop-filter:blur(5px);display:grid;place-content:center;span{font-size:2em!important}}}}#features{.feature{padding-bottom:2rem;h3{font-weight:350;font-size:1.25em;line-height:1.1;margin-block-end:1rem}img{border-radius:2em}p{font-weight:300;line-height:1.2;color:var(--theme-surface-on-surface-variant)}}@media (width>=930px){.img-wrapper{position:absolute;right:0;top:0;bottom:0;width:50%;container-type:inline-size}.feature{padding-block:15vb;grid-column:1;display:grid;place-content:center;p{width:60%;max-width:60ch;text-wrap:pretty}}}}}@layer developers{#developers{.intro{color:var(--theme-surface-on-surface-variant);font-size:1.1em;line-height:1.2;font-weight:320;padding:.5rem 0;@media (width>=930px){width:calc(30vw - 1.5rem);margin-left:auto}}.carousel{grid-column:fullbleed;padding-inline:3rem;width:100%;overflow-x:scroll;display:flex;gap:2rem;.developer{flex:0 0 100%;overflow:clip;@media (width>=930px){flex-basis:60vi}figure{display:grid;place-items:center;>*{grid-area:1/1}figcaption{color:white;font-size:2em}}img{border-radius:2em}h3{font-weight:350;font-size:1.25em;line-height:1.1;margin-block-end:.5rem}p{width:40%;text-wrap:pretty;color:var(--theme-surface-on-surface-variant);letter-spacing:.05rem;font-weight:300}a{display:flex;flex-direction:row;align-items:center;gap:.25em;color:var(--theme-surface-on-surface-variant);text-decoration:none;font-weight:300;transition:gap .15s ease-in;&:hover,&:focus-visible{gap:.5em}&::after{font-family:"Material Symbols Outlined";font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;content:""}}}}}}@layer who{#who{h3{font-weight:400;font-size:1.75em;line-height:1.1;@media (width>=930px){font-size:2.5em}span{color:var(--theme-surface-on-surface-variant)}}button{font-size:1.15em;justify-self:center}}}@layer beforeyougo{#beforeyougo{.card{width:100%;height:auto;aspect-ratio:4/3;max-height:80vh;display:grid;padding:4em;gap:1rem;align-content:center}.buttons{display:flex;flex-direction:column;gap:.25rem;font-size:1.2em;align-items:start;@media (width>930px){flex-direction:row}}}}}@layer base{section{min-height:100dvh;&.center{place-content:safe center;justify-items:center}}h2{font-size:2.5em;font-weight:350;margin:.5rem 0;line-height:1;@media (width>=930px){width:50%;max-width:25ch}}}@layer reset{figure{margin:0}}@layer util{.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}}