:where(.astro-pakjl4rv)[data-interactive-card]>div:where(.astro-pakjl4rv)[aria-hidden=true]{background:radial-gradient(320px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),color-mix(in oklch,var(--sl-color-text-accent) 13%,transparent) 0%,transparent 70%)}.bento-item:where(.astro-6tjqyt5d){display:flex;flex-direction:column;gap:1rem;min-height:11rem;border:1px solid var(--chameleon-border);border-radius:.5rem;background:var(--chameleon-card);padding:1.25rem;box-shadow:var(--sl-shadow-sm)}.chip:where(.astro-6tjqyt5d){border:1px solid var(--chameleon-border);border-radius:999rem;background:var(--chameleon-muted);padding:.35rem .65rem;color:var(--chameleon-card-foreground);font-size:.875rem}.workflow:where(.astro-22cdqia5){display:flex;flex-direction:column;gap:1.5rem}.workflow-tabs:where(.astro-22cdqia5){display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem}.workflow-tab:where(.astro-22cdqia5){position:relative;display:flex;min-width:11rem;flex:1 0 11rem;flex-direction:column;gap:.35rem;border:1px solid transparent;border-radius:.5rem;background:transparent;color:var(--chameleon-muted-foreground);cursor:pointer;font:inherit;margin:0;padding:.8rem;text-align:start;transition:border-color .16s ease,background-color .16s ease,color .16s ease}.workflow-tab:where(.astro-22cdqia5):hover,.workflow-tab:where(.astro-22cdqia5):focus-visible{border-color:var(--chameleon-border);background:var(--chameleon-muted);color:var(--chameleon-foreground)}.workflow-tab:where(.astro-22cdqia5):focus-visible{outline:2px solid var(--chameleon-ring);outline-offset:2px}.workflow-tab:where(.astro-22cdqia5)[aria-selected=true]{border-color:var(--chameleon-border);background:var(--chameleon-background);color:var(--chameleon-foreground)}.workflow-tab-number:where(.astro-22cdqia5){font-weight:700}.workflow-tab-title:where(.astro-22cdqia5){color:inherit;font-size:.95rem;font-weight:700;line-height:1.25}.workflow-tab-progress:where(.astro-22cdqia5){width:100%;height:2px;overflow:hidden;border-radius:999px;background:transparent;opacity:0}.workflow-tab-progress:where(.astro-22cdqia5):before{content:"";display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:var(--chameleon-primary)}.workflow-tab:where(.astro-22cdqia5)[aria-selected=true] .workflow-tab-progress:where(.astro-22cdqia5):before{animation:workflow-progress var(--workflow-step-duration) linear forwards}.workflow:where(.astro-22cdqia5)[data-animation-state=reset] .workflow-tab:where(.astro-22cdqia5)[aria-selected=true] .workflow-tab-progress:where(.astro-22cdqia5):before{animation:none}.workflow-tab:where(.astro-22cdqia5)[aria-selected=true] .workflow-tab-progress:where(.astro-22cdqia5){background:var(--chameleon-border);opacity:1}.workflow-panels:where(.astro-22cdqia5){overflow:hidden;height:var(--workflow-panel-height, auto);min-width:0;flex:1 1 auto}.workflow-panel-track:where(.astro-22cdqia5){display:flex;height:100%;flex-direction:column;transform:translate3d(0,var(--track-offset),0);transition:transform var(--workflow-panel-transition-duration) ease-in-out;will-change:transform}.workflow-panel:where(.astro-22cdqia5){display:flex;height:var(--workflow-panel-height, auto);min-height:var(--workflow-panel-height, auto);flex:0 0 var(--workflow-panel-height, auto);flex-direction:column;gap:1rem;margin:0}.workflow-panel:where(.astro-22cdqia5)[data-panel-state=idle]{pointer-events:none}.workflow-panel:where(.astro-22cdqia5)[data-animation-state=reset] .site-camera:where(.astro-22cdqia5),.workflow-panel:where(.astro-22cdqia5)[data-animation-state=reset] .demo-popup:where(.astro-22cdqia5),.workflow-panel:where(.astro-22cdqia5)[data-animation-state=reset] .demo-cursor-motion:where(.astro-22cdqia5),.workflow-panel:where(.astro-22cdqia5)[data-animation-state=reset] .cursor-click-burst:where(.astro-22cdqia5),.workflow-panel:where(.astro-22cdqia5)[data-animation-state=reset] .demo-settings-button:where(.astro-22cdqia5):before{animation:none}.panel-copy:where(.astro-22cdqia5){display:flex;flex-direction:column;gap:.35rem}.panel-copy:where(.astro-22cdqia5) span:where(.astro-22cdqia5){color:var(--chameleon-primary);font-size:.78rem;font-weight:700;letter-spacing:0;text-transform:uppercase}.panel-copy:where(.astro-22cdqia5) h3:where(.astro-22cdqia5){color:var(--chameleon-foreground);font-size:1.25rem;line-height:1.2}.panel-copy:where(.astro-22cdqia5) p:where(.astro-22cdqia5){color:var(--chameleon-muted-foreground);font-size:.95rem;line-height:1.65}.site-to-popup-demo:where(.astro-22cdqia5){--extension-base-x: 80.016%;--extension-base-y: 2.528%;--extension-screen-x: 74%;--extension-screen-y: 5.45%;--popup-top: 4.85%;--popup-right: 1rem;--settings-screen-x: calc(100% - var(--popup-right) - 2.125rem);--settings-screen-y: calc(var(--popup-top) + 1.875rem);--cursor-start-x: 38%;--cursor-start-y: 58%;--cursor-tip-x: .32rem;--cursor-tip-y: .14rem;--cursor-scale: .96;aspect-ratio:1919 / 969}.site-camera:where(.astro-22cdqia5){position:absolute;inset:0;width:100%;height:100%;transform-origin:0 0;animation:site-camera-zoom var(--workflow-step-duration) ease-in-out infinite;will-change:transform}.site-shot:where(.astro-22cdqia5){display:block;width:100%;height:100%;object-fit:fill}.demo-popup:where(.astro-22cdqia5){top:var(--popup-top);right:var(--popup-right);width:clamp(24rem,52%,28.25rem);margin:0;opacity:0;pointer-events:auto;transform:translate3d(0,-.75rem,0) scale(.985);animation:demo-popup-enter var(--workflow-step-duration) ease-in-out infinite;will-change:transform,opacity}.demo-popup-header:where(.astro-22cdqia5){align-items:center;margin:0}.demo-popup-brand:where(.astro-22cdqia5),.demo-popup-actions:where(.astro-22cdqia5){align-items:center;line-height:1;margin:0}.demo-popup-title:where(.astro-22cdqia5){line-height:1}.demo-popup-icon-button:where(.astro-22cdqia5){display:inline-flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center}.demo-settings-button:where(.astro-22cdqia5){position:relative;isolation:isolate;overflow:hidden;appearance:none;width:2.25rem;height:2.25rem;padding:0;border:1px solid transparent;background:transparent;color:inherit;cursor:pointer;font:inherit;pointer-events:auto;transition:background-color .16s ease,color .16s ease}.demo-settings-button:where(.astro-22cdqia5):before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#3a302c80;opacity:0;animation:demo-settings-hover var(--workflow-step-duration) ease-in-out infinite;transition:opacity .16s ease}.demo-settings-button:where(.astro-22cdqia5):hover,.demo-settings-button:where(.astro-22cdqia5):focus-visible{border-color:transparent;background:#3a302c80;box-shadow:none;outline:none}.demo-settings-button:where(.astro-22cdqia5):hover:before,.demo-settings-button:where(.astro-22cdqia5):focus-visible:before{opacity:0}.demo-settings-button:where(.astro-22cdqia5) svg{position:relative;z-index:1;pointer-events:none}.demo-cursor-motion:where(.astro-22cdqia5){position:absolute;inset:0;z-index:50;width:100%;height:100%;transform:translate3d(var(--cursor-start-x),var(--cursor-start-y),0);animation:demo-cursor-path var(--workflow-step-duration) ease-in-out infinite;pointer-events:none;will-change:transform,opacity}.demo-cursor:where(.astro-22cdqia5){position:absolute;top:0;left:0;width:1.45rem;height:1.65rem;color:var(--chameleon-primary);transform:translate3d(calc(-1 * var(--cursor-tip-x)),calc(-1 * var(--cursor-tip-y)),0) scale(var(--cursor-scale));filter:drop-shadow(0 .18rem .28rem rgb(0 0 0 / 32%))}.demo-cursor-outline:where(.astro-22cdqia5){fill:var(--chameleon-primary-foreground);stroke:var(--chameleon-primary-foreground);stroke-linejoin:round;stroke-width:1.7}.demo-cursor-fill:where(.astro-22cdqia5){fill:currentColor;stroke:var(--chameleon-ring);stroke-linejoin:round;stroke-width:.45}.click-burst:where(.astro-22cdqia5){position:absolute;z-index:45;width:2.3rem;height:2.3rem;opacity:0;pointer-events:none;transform:translate3d(-50%,-50%,0) scale(.72);will-change:transform,opacity}.cursor-click-burst:where(.astro-22cdqia5){top:0;left:0;animation:cursor-click-burst var(--workflow-step-duration) ease-out infinite}.click-burst:where(.astro-22cdqia5):before{content:"";position:absolute;inset:.78rem;border:2px solid var(--chameleon-primary);border-radius:999px;box-shadow:0 0 .45rem color-mix(in oklch,var(--chameleon-ring) 42%,transparent)}.click-burst:where(.astro-22cdqia5) span:where(.astro-22cdqia5){position:absolute;top:50%;left:50%;width:.16rem;height:.58rem;border-radius:999px;background:var(--chameleon-primary);box-shadow:0 0 0 1px var(--chameleon-primary-foreground);transform-origin:center 1.05rem}.click-burst:where(.astro-22cdqia5) span:where(.astro-22cdqia5):nth-child(1){transform:translate(-50%,-50%) rotate(0) translateY(-.72rem)}.click-burst:where(.astro-22cdqia5) span:where(.astro-22cdqia5):nth-child(2){transform:translate(-50%,-50%) rotate(45deg) translateY(-.72rem)}.click-burst:where(.astro-22cdqia5) span:where(.astro-22cdqia5):nth-child(3){transform:translate(-50%,-50%) rotate(90deg) translateY(-.72rem)}.click-burst:where(.astro-22cdqia5) span:where(.astro-22cdqia5):nth-child(4){transform:translate(-50%,-50%) rotate(135deg) translateY(-.72rem)}.click-burst:where(.astro-22cdqia5) span:where(.astro-22cdqia5):nth-child(5){transform:translate(-50%,-50%) rotate(180deg) translateY(-.72rem)}.click-burst:where(.astro-22cdqia5) span:where(.astro-22cdqia5):nth-child(6){transform:translate(-50%,-50%) rotate(225deg) translateY(-.72rem)}.demo-popup:where(.astro-22cdqia5) svg{stroke-width:2.15}.mockups:where(.astro-22cdqia5){display:flex;flex-direction:column;gap:1rem}.browser-mock:where(.astro-22cdqia5),.popup-mock:where(.astro-22cdqia5){overflow:hidden;border:1px solid var(--chameleon-border);border-radius:.5rem;background:var(--chameleon-background);box-shadow:var(--sl-shadow-md)}.mock-header:where(.astro-22cdqia5){display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--chameleon-border);padding:.8rem}.dot:where(.astro-22cdqia5){width:.65rem;height:.65rem;flex:0 0 auto;border-radius:999rem;background:var(--chameleon-border)}.address:where(.astro-22cdqia5){overflow:hidden;border-radius:999rem;background:var(--chameleon-muted);color:var(--chameleon-muted-foreground);font-family:var(--__sl-font-mono);font-size:.8rem;padding:.25rem .75rem;text-overflow:ellipsis;white-space:nowrap}.mock-body:where(.astro-22cdqia5){display:flex;flex-direction:column;gap:1rem;padding:1rem}.rule-panel:where(.astro-22cdqia5){display:flex;flex-direction:column;gap:.75rem}.field:where(.astro-22cdqia5){display:flex;flex-direction:column;gap:.2rem;border:1px solid var(--chameleon-border);border-radius:.5rem;padding:.75rem}.field:where(.astro-22cdqia5) span:where(.astro-22cdqia5){color:var(--chameleon-muted-foreground);font-size:.75rem}.field:where(.astro-22cdqia5) strong:where(.astro-22cdqia5){overflow-wrap:anywhere;color:var(--chameleon-card-foreground);font-size:.9rem}pre:where(.astro-22cdqia5){overflow-x:auto;border:1px solid var(--chameleon-border);border-radius:.5rem;background:var(--chameleon-card);color:var(--chameleon-card-foreground);font-size:.875rem;padding:1rem}.popup-mock:where(.astro-22cdqia5){display:flex;flex-direction:column;gap:.75rem;padding:1rem}.popup-title:where(.astro-22cdqia5){color:var(--chameleon-card-foreground);font-weight:700}.popup-rule:where(.astro-22cdqia5){display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--chameleon-border);border-radius:.5rem;color:var(--chameleon-muted-foreground);font-size:.875rem;padding:.75rem}.popup-rule:where(.astro-22cdqia5) i:where(.astro-22cdqia5){width:2rem;height:1.1rem;flex:0 0 auto;border-radius:999rem;background:var(--chameleon-muted)}.popup-rule:where(.astro-22cdqia5).enabled{color:var(--chameleon-card-foreground)}.popup-rule:where(.astro-22cdqia5).enabled i:where(.astro-22cdqia5){background:var(--chameleon-primary)}@keyframes workflow-progress{to{transform:scaleX(1)}}@media(min-width:50rem){.workflow:where(.astro-22cdqia5){flex-direction:row;gap:1.5rem;align-items:stretch}.workflow-tabs:where(.astro-22cdqia5){flex:0 0 min(15rem,32%);flex-direction:column;overflow:visible;padding-bottom:0}.workflow-tab:where(.astro-22cdqia5){min-width:0;flex:0 0 auto}.mockups:where(.astro-22cdqia5){flex-direction:row;align-items:stretch}.browser-mock:where(.astro-22cdqia5){flex:1 1 68%}.popup-mock:where(.astro-22cdqia5){flex:1 1 13rem}.mock-body:where(.astro-22cdqia5){flex-direction:row}.rule-panel:where(.astro-22cdqia5){flex:0 1 40%}pre:where(.astro-22cdqia5){flex:1 1 60%}}@media(max-width:38rem){.site-to-popup-demo:where(.astro-22cdqia5){--extension-screen-x: 74%;--extension-screen-y: 5.45%;--popup-top: 7%;--popup-right: .75rem;--settings-screen-x: calc(100% - var(--popup-right) - 2.125rem);--settings-screen-y: calc(var(--popup-top) + 1.875rem)}.demo-popup:where(.astro-22cdqia5){width:min(22rem,calc(100% - 1.5rem))}}@media(prefers-reduced-motion:reduce){.workflow-tab:where(.astro-22cdqia5){transition:none}.workflow-tab:where(.astro-22cdqia5)[aria-selected=true] .workflow-tab-progress:where(.astro-22cdqia5):before{animation:none;transform:scaleX(1)}.workflow-panel-track:where(.astro-22cdqia5){transition:none}.site-camera:where(.astro-22cdqia5),.demo-cursor-motion:where(.astro-22cdqia5),.cursor-click-burst:where(.astro-22cdqia5),.demo-popup:where(.astro-22cdqia5),.demo-settings-button:where(.astro-22cdqia5):before{animation:none}.site-camera:where(.astro-22cdqia5){transform:translate3d(-98%,0,0) scale(2.15)}.demo-cursor-motion:where(.astro-22cdqia5),.cursor-click-burst:where(.astro-22cdqia5){opacity:0}.demo-popup:where(.astro-22cdqia5){opacity:1;transform:none}.demo-settings-button:where(.astro-22cdqia5):before{opacity:1}}
