.bead-visual{display:block;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff9,var(--bead-color) 48%,#0004);box-shadow:inset -2px -3px 5px #0002,0 2px 5px #524b4030;pointer-events:none}.bead-visual.size-8mm{transform:scale(.78)}.bead-visual.size-12mm{transform:scale(1.12)}.bead-visual.shape-faceted{clip-path:polygon(50% 0,88% 18%,100% 55%,72% 100%,28% 100%,0 55%,12% 18%)}.bead-visual.shape-cube{border-radius:7px}.bead-visual.shape-heart{border-radius:0;clip-path:polygon(50% 88%,7% 43%,8% 20%,24% 7%,43% 9%,50% 22%,57% 9%,76% 7%,92% 20%,93% 43%)}.bead-visual.shape-spacer{height:14px;border-radius:4px;background:linear-gradient(135deg,#fff7,var(--bead-color) 35%,#59481f 100%)}.bead-visual.kind-metal{box-shadow:inset 0 0 0 2px #fff7,0 2px 5px #57481f55}.bead-visual.kind-photo{box-shadow:inset 0 0 0 2px #9c927f,0 2px 5px #57481f33}.tray-slot .bead-visual{width:100%;height:100%;margin:auto}.tray-slot.filled{border-style:solid;border-color:#a99e8e;background:#f8f5ee;cursor:grab}.delete-zone{cursor:pointer;transition:.2s ease}.delete-zone.show{transform:scale(1.03);box-shadow:0 8px 20px #594b3d20}.bead-choice:focus-visible,.tray-slot:focus-visible{outline:2px solid #393833;outline-offset:2px}@media(max-width:720px){.bead-choice{min-height:60px}.bead-choice span{font-size:10px}.tray-slot .bead-visual.size-12mm{transform:scale(1.08)}}