.motion-pending{opacity:0}
.button,.nav-install{transition:transform 220ms cubic-bezier(.22,1,.36,1),background-color 220ms,box-shadow 220ms}
.button>span,.text-link>span,.nav-install>span{display:inline-block;transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.steps .step-art{transition:transform 320ms cubic-bezier(.22,1,.36,1),border-color 320ms,background-color 320ms}
.snippet-window{transition:transform 400ms cubic-bezier(.22,1,.36,1),border-color 300ms}
.question-list summary:after{transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.question-list details[open] summary:after{transform:rotate(180deg)}
.question-list details[open]>p,.question-list details[open]>a{animation:answer-in 260ms cubic-bezier(.22,1,.36,1) both}
@keyframes answer-in{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
@media(hover:hover) and (pointer:fine){
 .button:hover,.nav-install:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0002}
 .button:hover>span,.text-link:hover>span,.nav-install:hover>span{transform:translate(2px,-2px)}
 .steps article:hover .step-art{transform:translateY(-5px);border-color:#9b7a64;background-color:#282624}
 .snippet-window:hover{transform:rotate(0deg) translateY(-4px);border-color:#b39178}
}
.button:active,.nav-install:active{transform:translateY(0) scale(.98)}
@media(prefers-reduced-motion:reduce){
 .motion-pending{opacity:1}
 .button,.nav-install,.button>span,.text-link>span,.nav-install>span,.steps .step-art,.snippet-window,.question-list summary:after{transition:none}
 .button:hover,.nav-install:hover,.button:active,.nav-install:active,.steps article:hover .step-art{transform:none}
 .snippet-window:hover{transform:rotate(-2deg)}
 .question-list details[open]>p,.question-list details[open]>a{animation:none}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.snippet-window:hover{transform:none}}
/* Masked typography and a scroll-settled product surface. */
.hero h1>.headline-line{display:block;overflow:clip;color:var(--text);padding-bottom:.12em;margin-bottom:-.12em}
.headline-inner{display:block;transform-origin:left bottom}
.hero h1 .headline-inner>span{color:var(--orange)}
.product-window{transform-origin:center top}
.step-graph{width:100%;height:100%;overflow:visible}
.step-wire{fill:none;stroke:#f7a06b;stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:0}
.step-wire.violet{stroke:#aa9bdd}
.step-node rect{fill:#2a2928;stroke:#66615c}
.step-node text{fill:#ded6cd;text-anchor:middle;font:12px 'Helvetica Neue',sans-serif}
.step-graph circle{fill:#f7a06b}
.code-art{display:inline-block}
@media(prefers-reduced-motion:reduce){.product-window{transform:none!important}.headline-inner{transform:none!important}}