/* Actual still captures with a short, illustrative pointer gesture. */
.click-example{background:linear-gradient(145deg,#fff,#f7fafb);}
.click-context{position:absolute;inset:16px 20px auto;color:#73828b;font-size:11px;letter-spacing:.06em;line-height:1.5;}
.click-context::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;border-radius:50%;background:#b7c8d2;}
.click-stage{position:absolute;inset:46px 0 8px;display:flex;align-items:center;justify-content:center;}
.click-shot{position:relative;width:calc(100% - 44px);max-width:340px;flex:none;}
.click-shot-install{max-width:240px;}
.click-shot-download{max-width:340px;}
.click-shot img{display:block;width:100%;height:auto;}
.click-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.click-highlight{fill:none;stroke:#237ac2;stroke-width:2;vector-effect:non-scaling-stroke;}
.click-cursor{transform-origin:0 0;filter:drop-shadow(0 3px 3px #173f6150);}
.click-cursor path{fill:#153e62;stroke:white;stroke-width:2;stroke-linejoin:round;}
.click-ripple{fill:none;stroke:#368fd3;stroke-width:2;opacity:0;transform-origin:0 0;}
@media(prefers-reduced-motion:no-preference){
.is-clicking .click-cursor{animation:bookhalo-click-pointer 3.2s ease infinite both;}
.is-clicking .click-ripple{animation:bookhalo-click-ripple 3.2s ease infinite both;}
@keyframes bookhalo-click-pointer{0%{transform:translate(24px,20px);opacity:0;}12%{opacity:1;}38%,45%{transform:translate(0,0) scale(1);opacity:1;}51%{transform:translate(0,0) scale(.84);}59%,100%{transform:translate(0,0) scale(1);opacity:1;}}
@keyframes bookhalo-click-ripple{0%,47%{opacity:0;transform:scale(.3);}52%{opacity:.8;transform:scale(.45);}76%,100%{opacity:0;transform:scale(2);}}
}
@media(max-width:760px){.click-context{inset:12px 16px auto;font-size:10px;}.click-stage{inset:34px 0 8px;}.click-shot{width:calc(100% - 32px);}.click-shot-install{max-width:200px;}}

/* Place supplemental information inside its corresponding step. */
.steps-preview-description .step-link{display:inline-block;margin-top:18px;font-size:12px;line-height:1.8;}
.step-details{margin-top:22px;padding-top:18px;border-top:1px solid #dce3de;}
.step-details h4{font-size:14px;line-height:1.7;margin:0;color:#354e5c;}
.steps-preview-description .step-details p{font-size:11px;line-height:1.9;margin-top:8px;}
.steps-preview-description .step-handoff{margin-top:20px;font-size:12px;}
[data-step="install"] .click-example,[data-step="run"] .click-example{aspect-ratio:auto;}
[data-step="install"] .click-stage,[data-step="run"] .click-stage{position:relative;inset:auto;padding:40px 12px 28px;}
[data-step="install"] .click-shot,[data-step="run"] .click-shot{width:100%;max-width:none;}
.click-toggle{position:absolute;right:10px;bottom:8px;border:1px solid #cfdae0;border-radius:50%;width:28px;height:28px;background:#fff;color:#34556b;font-size:12px;cursor:pointer;z-index:2;}
.click-toggle[hidden]{display:none;}.click-toggle:focus-visible{outline:2px solid #237ac2;outline-offset:2px;}
@media(max-width:760px){.step-details{margin-top:16px;padding-top:13px;}.step-details h4{font-size:13px;}.steps-preview-description .step-details p{font-size:10px;}.steps-preview-description .step-link{margin-top:12px;}.steps-preview-description .step-handoff{font-size:11px;}.click-context{inset:10px 12px auto;}[data-step="install"] .click-stage,[data-step="run"] .click-stage{padding:32px 8px 30px;}}