@layer properties;@layer theme,base,components,utilities;.motion-designer-hero{--motion-hero-green:#2eb844;--motion-hero-green-dim:#15521e;--motion-hero-ease:cubic-bezier(.22, 1, .36, 1);--motion-hero-preview:1.25rem;--motion-hero-header-gap:0rem;--motion-hero-height:calc(100svh - var(--header-height-v2,3.25rem) - var(--motion-hero-header-gap) - var(--motion-hero-preview));height:var(--motion-hero-height)}html[data-header-compact] .motion-designer-hero{--motion-hero-header-gap:.5rem}.motion-designer-hero:after{z-index:1;height:clamp(5rem, calc(var(--motion-hero-height) * .16), 9.3125rem);pointer-events:none;content:"";background:linear-gradient(transparent, var(--qc-background-primary) 88%);position:absolute;inset:auto 0 0}.motion-designer-hero-content{justify-content:center;height:100%;transform:translateY(-10%)}.motion-designer-hero-code-comp{top:15.521%;left:72.083%}.motion-designer-hero-code-values{top:26.771%;left:82.292%}.motion-designer-hero-title{font-size:clamp(2.5rem, 5vw, var(--text-h1));letter-spacing:-.04em;text-transform:uppercase;font-feature-settings:"ss04" 1;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 1.25rem;margin:1rem 0;font-weight:700;line-height:1;display:flex}.motion-designer-hero-title-line{animation:motion-hero-enter .8s var(--motion-hero-ease) .12s both;justify-content:center;align-items:center;gap:1.25rem;display:inline-flex}.motion-designer-hero-title-line:last-child{animation-delay:.192s}.motion-designer-hero-title-slice{vertical-align:baseline;perspective:8em;white-space:pre;display:inline-grid}.motion-designer-hero-title-slice-variant{opacity:0;backface-visibility:hidden;transform-origin:50%;grid-area:1/1;animation:7.2s cubic-bezier(.65,0,.35,1) infinite motion-hero-slice-swap}.motion-designer-hero-title-slice-variant:first-child{opacity:1}.motion-designer-hero-logo-frame{outline:1px solid var(--qc-brand-primary);outline-offset:.14em;width:.8em;height:.8em;animation:motion-hero-logo-enter .96s var(--motion-hero-ease) .2s both;justify-content:center;align-items:center;margin:0 .06em;display:inline-flex;position:relative}.motion-designer-hero-logo-frame:before,.motion-designer-hero-logo-frame:after{border:1px solid var(--qc-brand-primary);background:var(--qc-background-primary);content:"";width:.15em;height:.15em;position:absolute}.motion-designer-hero-logo-frame:before{top:-.22em;left:-.22em}.motion-designer-hero-logo-frame:after{bottom:-.22em;right:-.22em}.motion-designer-hero-logo{width:100%;height:100%}.motion-designer-hero-eyebrow{animation:motion-hero-enter .64s var(--motion-hero-ease) both}.motion-designer-hero-description{animation:motion-hero-enter .72s var(--motion-hero-ease) .256s both}.motion-designer-hero-cta{animation:motion-hero-enter .72s var(--motion-hero-ease) .352s both;margin-top:2rem}.motion-designer-hero-generate{background-image:var(--hf-gradient-special-gloss-lime), linear-gradient(var(--qc-brand-primary), var(--qc-brand-primary));box-shadow:inset 0 -.1875rem 0 color-mix(in srgb, var(--qc-brand-primary) 58%, var(--qc-text-inverse)), 0 .375rem .25rem var(--color-black-24), 0 2rem 1.5rem var(--color-black-16)}.motion-designer-hero[data-paused=true] .motion-designer-hero-title-line,.motion-designer-hero[data-paused=true] .motion-designer-hero-logo-frame,.motion-designer-hero[data-paused=true] .motion-designer-hero-eyebrow,.motion-designer-hero[data-paused=true] .motion-designer-hero-description,.motion-designer-hero[data-paused=true] .motion-designer-hero-cta,.motion-designer-hero[data-paused=true] .motion-designer-hero-title-slice-variant{animation-play-state:paused}@keyframes motion-hero-enter{0%{opacity:0;transform:translateY(1.125rem)}to{opacity:1;transform:translate(0,0)}}@keyframes motion-hero-logo-enter{0%{opacity:0;transform:rotate(-16deg)scale(.82)}to{opacity:1;transform:rotate(0)scale(1)}}@keyframes motion-hero-slice-swap{0%,28.333%{opacity:1;transform:translate(0,0)rotateX(0)}33.333%{opacity:0;transform:translateY(-50%)rotateX(75deg)}33.334%,95%{opacity:0;transform:translateY(50%)rotateX(-75deg)}to{opacity:1;transform:translate(0,0)rotateX(0)}}@media (max-width:767px){.motion-designer-hero-content{grid-template-columns:minmax(0,max-content);align-content:center;justify-items:center;display:grid;transform:none}.motion-designer-hero-title{grid-template-columns:repeat(2,max-content);row-gap:1rem;max-width:100%;display:grid}.motion-designer-hero-title-line:last-child,.motion-designer-hero-title-words{display:contents}.motion-designer-hero-title-word{white-space:nowrap}.motion-designer-hero-title-word+.motion-designer-hero-title-word{grid-column:1/-1}.motion-designer-hero-description{width:0;min-width:100%;max-width:none}.motion-designer-hero-cta{margin-top:1.5rem}}@media (max-width:767px) and (max-height:700px){.motion-designer-hero-title{row-gap:.75rem;font-size:clamp(2rem,8.5vw,2.5rem)}}@media (prefers-reduced-motion:reduce){.motion-designer-hero-title-line,.motion-designer-hero-logo-frame,.motion-designer-hero-eyebrow,.motion-designer-hero-description,.motion-designer-hero-cta,.motion-designer-hero-title-slice-variant{animation:none}}.motion-howto-title-text{color:#0000;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(var(--motion-howto-title-angle,77.643deg), transparent 24.153%, color-mix(in srgb, var(--color-neutral-primary) 13.5%, transparent) 45.226%, color-mix(in srgb, var(--color-neutral-primary) 6%, transparent) 77.836%), linear-gradient(var(--color-font-primary), var(--color-font-primary))}#tutorial-title>span:first-child>span:last-child{--motion-howto-title-angle:84.233deg}#tutorial-title>span:last-child>span:first-child{--motion-howto-title-angle:84.277deg}#tutorial-title>span:last-child>span:last-child{--motion-howto-title-angle:75.9555deg}.motion-howto-step{-webkit-backdrop-filter:blur(.553rem);backdrop-filter:blur(.553rem)}.motion-howto-step-number{box-shadow:inset 0 -.125rem .625rem color-mix(in srgb, var(--color-neutral-5) 30%, transparent), inset 0 -.0625rem .125rem color-mix(in srgb, var(--color-neutral-5) 40%, transparent)}.motion-howto-steps{isolation:isolate;position:relative}.motion-howto-steps:before{z-index:-1;border-radius:inherit;content:"";pointer-events:none;background:linear-gradient(to bottom, color-mix(in srgb, var(--color-white) 1.05%, transparent) 47.446%, color-mix(in srgb, var(--color-white) 7%, transparent));-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem);box-shadow:inset 0 .125rem .1875rem var(--color-white-5), 0 .125rem .25rem -.03125rem color-mix(in srgb, var(--color-black) 12%, transparent);position:absolute;inset:0}.motion-howto-step+.motion-howto-step:before{content:"";background:linear-gradient(to right, transparent, var(--color-qc-border-default), transparent);height:.0625rem;position:absolute;inset:-.75rem 0 auto}@media (min-width:64rem){.motion-howto-step+.motion-howto-step:before{background:linear-gradient(to bottom, transparent, var(--color-qc-border-default), transparent);width:.0625rem;height:auto;inset:0 auto 0 -.8125rem}}