/* Both stage and preview cords use material independently of animation. */
#bead-svg,.bead-preview{--cord-stroke:#647b71;--cord-width:1.4;--cord-opacity:.6;--cord-dash:none;--cord-glow:none}
#bead-svg[data-string=golden],.bead-preview[data-string=golden]{--cord-stroke:#d9ba7c;--cord-width:1.25;--cord-opacity:.85;--cord-dash:3.4 1.8}
#bead-svg[data-string=silk],.bead-preview[data-string=silk]{--cord-stroke:#b0bfba;--cord-width:2;--cord-opacity:.7}
#bead-svg[data-string=braided],.bead-preview[data-string=braided]{--cord-stroke:#aa9773;--cord-width:3.5;--cord-opacity:.8;--cord-dash:2.5 1.2}
#bead-svg[data-string=invisible],.bead-preview[data-string=invisible]{--cord-opacity:0}
#bead-svg[data-string=luminous],.bead-preview[data-string=luminous]{--cord-stroke:#c8e6d7;--cord-width:1;--cord-opacity:.9;--cord-glow:drop-shadow(0 0 2px #c8e6d780)}
#bead-svg #bead-string,.bead-preview .bead-string{fill:none;stroke:var(--cord-stroke);stroke-width:var(--cord-width);opacity:var(--cord-opacity);stroke-opacity:1;stroke-dasharray:var(--cord-dash);stroke-linecap:round;filter:var(--cord-glow)}
#bead-svg[data-animation=crystal] #bead-nodes{filter:drop-shadow(0 4px 6px #0004)}
#bead-svg[data-animation=crystal] #bead-nodes circle{fill-opacity:.88}
#bead-svg[data-animation=orbit] #bead-nodes circle,#bead-svg[data-animation=infinity] #bead-nodes circle{stroke:#d8dfb74d;stroke-width:.8}
#bead-svg[data-animation=crescent] #bead-nodes circle{stroke:#e4d7ac55;stroke-width:.8}
.bead-preview{display:block;width:100%;height:auto;overflow:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){#bead-svg *,.bead-preview *{transition:none!important;animation:none!important}}
.reduced-motion #bead-svg *,.reduced-motion .bead-preview *{transition:none!important;animation:none!important}