/* craft signature "beadstring" (Bag Charm): 12 beads thread onto a gold string, a charm drops on the end and sways. Compositor-only (transform/opacity); string draw = one small stroke-dashoffset.
   One-shot via .bs-go (replayed by class toggle); idle sway = ONE element, runs only while .bs-live (IntersectionObserver). Everything visible without JS / with reduced motion. */
.bs-stage{--b0:#F4A6B7;--b1:#FFF6EE;--b2:#D95F85;--b3:#E8C77A;position:relative;width:min(100%,400px);aspect-ratio:400/600;margin:0 auto}
.bs-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.bs-halo{fill:var(--sig-bg,#FADCE5)}
.bs-tw{fill:#E2B85C}
.bs-ring{fill:none;stroke:#D4A94E;stroke-width:5}
.bs-ring2{fill:none;stroke:#D4A94E;stroke-width:4}
.bs-str{fill:none;stroke:#C9A24B;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.bs-bd{transform-box:fill-box;transform-origin:50% 50%}
.bs-fill{fill:var(--b0)}
.bs-k1 .bs-fill{fill:var(--b1);stroke:rgba(110,50,70,.16);stroke-width:1}
.bs-k2 .bs-fill{fill:var(--b2)}.bs-k3 .bs-fill{fill:var(--b3)}
.bs-hl{fill:#fff;opacity:.6}
.bs-ca{fill:var(--b2)}.bs-cb{fill:var(--b0)}.bs-cc{fill:#E2B85C}
.bs-cl{fill:none;stroke:rgba(255,255,255,.6);stroke-width:3;stroke-linecap:round}
.bs-fz{fill:none;stroke:rgba(255,255,255,.75);stroke-width:4;stroke-dasharray:.5 7;stroke-linecap:round}
.bs-ch{display:none;transform-box:fill-box;transform-origin:50% 0}
.bs-ch.is-on{display:inline}
.bs-sw{transform-box:fill-box;transform-origin:50% 0}
/* controls */
.bs-ctl{margin-top:20px;text-align:center}
.bs-q{margin:14px 0 8px;font:600 14px/1.3 var(--f-hand,var(--f-body));letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.bs-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.bs-pal,.bs-chb,.bs-replay{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:6px 18px;border:1.5px solid #D9A9BA;border-radius:999px;background:var(--paper,#fff);color:var(--ink);font:600 15px/1 var(--f-hand,var(--f-body));cursor:pointer;transition:transform .15s var(--ease,ease),background-color .2s}
.bs-pal{padding-left:8px}
.bs-pal[aria-pressed=true],.bs-chb[aria-pressed=true]{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.bs-replay{border-style:dashed}
.bs-pal:focus-visible,.bs-chb:focus-visible,.bs-replay:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.bs-sw2{display:inline-flex;overflow:hidden;border-radius:999px;border:1.5px solid #D9A9BA;background:#fff}
.bs-sw2 i{width:13px;height:24px}
.bs-cap{margin:12px auto 0;max-width:42ch;font-size:14.5px;color:var(--mute)}
/* one-shot threading: html.cf-js only, so no-JS / failed JS shows the finished charm */
.cf-js .bs-str{stroke-dashoffset:1}
.cf-js .bs-bd{transform:scale(0);opacity:0;will-change:transform}
.cf-js .bs-ch{opacity:0;transform:scale(.3)}
.cf-js .bs-tw{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.cf-js .bs-go .bs-str{stroke-dashoffset:0;transition:stroke-dashoffset 1.25s cubic-bezier(.5,.05,.25,1) .1s}
.cf-js .bs-go .bs-bd{transform:none;opacity:1;will-change:auto;transition:transform .55s var(--bounce,cubic-bezier(.34,1.56,.64,1)) calc(.2s + var(--i)*95ms),opacity .25s ease calc(.2s + var(--i)*95ms)}
.cf-js .bs-go .bs-ch.is-on{animation:bs-drop .85s var(--bounce,cubic-bezier(.34,1.56,.64,1)) 1.45s both}
.cf-js .bs-go .bs-ch.is-on.bs-swap{animation:bs-drop .65s var(--bounce,cubic-bezier(.34,1.56,.64,1)) 0s both}
.cf-js .bs-go .bs-tw{opacity:1;transition:opacity .6s ease 1.5s}
@keyframes bs-drop{from{opacity:0;transform:translateY(-14px) scale(.3) rotate(-16deg)}to{opacity:1;transform:none}}
.bs-live .bs-sw{animation:bs-idle 4.8s ease-in-out infinite}
@keyframes bs-idle{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
.bs-boing{animation:bs-boing .42s var(--bounce,cubic-bezier(.34,1.56,.64,1))}
@keyframes bs-boing{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.cf-js .bs-str,.cf-js .bs-bd,.cf-js .bs-ch,.cf-js .bs-tw{transform:none!important;opacity:1!important;stroke-dashoffset:0!important;transition:none!important;animation:none!important;will-change:auto}.bs-live .bs-sw,.bs-boing{animation:none!important}}