/* Explainer controls use the product page's purple actions and selected cards.
   Controllers still own primary-action promotion, labels and disabled states. */
.g3-page{--control-purple:#7249c3;--control-purple-hover:#5d37a7}
.g3-page :is(#playback-toggle,#skip-layer,.assembly-stage-navigation>button,.assembly-stage-navigation>a,#assembly-cancel-next){
 display:inline-flex;align-items:center;justify-content:center;min-height:44px;
 padding:11px 20px;border:1px solid var(--control-purple);border-radius:999px;
 background:#fff;color:var(--control-purple);font:650 14px/1.3 Inter,system-ui,sans-serif;
 text-decoration:none;cursor:pointer;
}
.g3-page :is(#playback-toggle,.assembly-stage-navigation>.assembly-primary,.return-link>.primary){background:var(--control-purple);border-color:var(--control-purple);color:#fff}
.g3-page :is(#playback-toggle,.assembly-stage-navigation>.assembly-primary,.return-link>.primary):hover:not(:disabled){background:var(--control-purple-hover);border-color:var(--control-purple-hover)}
.g3-page :is(#skip-layer,.assembly-stage-navigation>button:not(.assembly-primary),#assembly-cancel-next):hover:not(:disabled){background:#f5f0fc}
/* Two-line stage labels need a stable height so Next never jumps during playback. */
.g3-page :is(#assembly-play,#assembly-next,#assembly-firmer){min-height:64px}
.g3-page .assembly-stage-navigation>[hidden]{display:none!important}
.g3-page :is(#playback-toggle,#skip-layer,.assembly-stage-navigation>button):disabled{background:#f7f7f7;border-color:#e8e5de;color:#787878;opacity:1;cursor:default}
.g3-page :is(#reset-view,.assembly-secondary button){min-height:44px;padding:8px 4px;font:600 13px/1.3 Inter,system-ui,sans-serif;color:#0857a6;text-decoration:underline;text-underline-offset:3px}
.g3-page :is(#playback-toggle,#skip-layer,#reset-view,.assembly-controls button,.assembly-stage-navigation>a,#assembly-cancel-next,.feel-controls button):focus-visible{outline:3px solid #0857a6;outline-offset:4px}
.g3-page .feel-controls{padding:0;gap:10px;background:transparent}
.g3-page .feel-controls button{border:2px solid #e8e5de;border-radius:18px;background:#fff;color:#1e1e1e}
.g3-page .feel-controls button:hover{border-color:var(--control-purple)}
.g3-page .feel-controls button[aria-pressed="true"]{border-color:var(--control-purple);background:#f5f0fc;color:#1e1e1e}
.g3-page .feel-controls button .feel-action{color:#625e66}
@media(max-width:820px){
 .g3-page :is(#playback-toggle,#skip-layer,.assembly-stage-navigation>button,.assembly-stage-navigation>a){padding:10px 14px}
 .g3-page :is(#assembly-play,#assembly-next,#assembly-firmer){font-size:13px;padding:10px 12px}
 .g3-page .feel-controls{gap:8px}
}