/* The shot images share one camera, canvas and coincident interface geometry. */
.cp-s1w{clip-path:inset(0 calc((1 - var(--q1,0))*100%) 0 0)}
.cp-s2x{clip-path:inset(0 0 0 calc((1 - var(--q2,0))*100%))}
.cp-rot{left:-4%;right:-4%}.cp-gate{top:52%!important}.cp-gate[style*="left"]{left:6%!important}.cp-gate[style*="right"]{right:6%!important}
.cp-card .cad-media img{object-fit:contain;padding:20px;box-sizing:border-box;filter:drop-shadow(0 16px 18px #11131924)}
.cp-card .cp-cap{display:block}.cp-card .cp-cap p{white-space:normal;margin-top:9px;line-height:1.5}.cp-card .cp-ex{border-style:solid;border-width:1px;font-weight:500;font-size:11px;letter-spacing:.02em}
.cp-card:focus-visible .cp-media{box-shadow:0 0 0 3px var(--cream),0 0 0 5px #736455}
.cad-context{max-width:920px;font-size:15px;line-height:1.65;color:var(--mute);margin-right:auto;margin-top:-18px}
.cp-ppin{gap:28px;min-height:780px}.cp-parts .cp-h2{max-width:950px;font-size:clamp(34px,4.2vw,62px)}
.cp-pl img{filter:drop-shadow(0 14px 12px #25221e26)}
@media(max-width:820px){.cad-context{margin-top:0;font-size:13px}.cp-ppin{gap:24px}.cp-card .cad-media img{padding:12px}.cp-card .cp-ex{max-width:54%;font-size:10px}.cp-card .cp-cap h3{font-size:23px}.cp-rot{left:-10%;right:-10%}}
.shot-mode{display:inline-flex;gap:4px;border:1px solid #f3eee52c;border-radius:999px;padding:4px;margin-top:24px;background:#ffffff06}.shot-mode button{cursor:pointer;border:0;border-radius:999px;background:transparent;color:#b8b2a7;font:650 15px/1.2 var(--body,system-ui);padding:11px 25px;min-width:76px}.shot-mode button[aria-pressed=true]{background:#f3eee5;color:#16171b}.shot-mode button:focus-visible{outline:2px solid #ffb78e;outline-offset:3px}.three-shot-layers{display:none;position:absolute;inset:0}.three-shot-layers img{position:absolute;inset:0;width:100%}.three-shot-layers [data-shot="1"]{clip-path:inset(0 calc((1 - var(--q1,0))*100%) 0 0)}.three-shot-layers [data-shot="2"]{clip-path:inset(0 calc((1 - var(--q2,0))*100%) 0 0)}.three-shot-layers [data-shot="3"]{clip-path:inset(0 0 0 calc((1 - var(--q3,0))*100%))}.cp-stage[data-mode="3"] .three-shot-layers{display:block}.cp-stage[data-mode="3"] :is(.cp-s1w,.cp-s2x,.cp-gate,.cp-chip:not(.three-chip)){display:none}.three-chip{display:none}.cp-stage[data-mode="3"] .three-chip{display:block}.cp-chip.three-chip span{display:none}.cp-stage[data-step="1"] .three-chip .t1,.cp-stage[data-step="2"] .three-chip .t2,.cp-stage[data-step="3"] .three-chip .t3,.cp-stage[data-step="4"] .three-chip .t4{display:inline}
.cp-card .cad-media{background-image:radial-gradient(ellipse at 50% 25%,#ffffff12,transparent 70%)}.cp-card .cad-media img{padding:5px;filter:drop-shadow(0 24px 22px #11131938)}.cp-card.paired-cad .cp-ex{color:#202327!important}.cp-seq-copy #cp-how{font-size:clamp(34px,3.5vw,56px)!important}.cp-seq-copy .cp-steps{margin-top:24px}.cp-seq-copy .cp-step{padding-block:14px}
@media(max-width:820px){.shot-mode{margin-top:14px}.shot-mode button{padding:9px 21px}.cp-seq-copy #cp-how{font-size:28px!important;line-height:1.12}.cp-seq-copy>p{font-size:11px!important;margin-top:12px!important}.cp-seq-copy .cp-steps{margin-top:12px}.cp-seq-copy .cp-step{padding-block:8px}.cp-seq-copy .cp-step .step-title{font-size:19px}.cp-card .cad-media img{padding:6px}}

@media(max-width:640px){.cp-pin{padding-top:76px;box-sizing:border-box;gap:8px}.cp-stage{width:min(240px,60vw,27svh)}.cp-rot{left:-4%;right:-4%}}
