.pe-frame{position:absolute;inset:24px;display:flex;flex-direction:column;justify-content:center;gap:14px;border:10px solid #8d6e63;border-radius:14px;background:#fdfdf8;box-shadow:inset 0 0 12px rgba(0,0,0,.08)}.pe-row{position:relative;height:44px;flex:0 0 auto}.pe-row::before{content:'';position:absolute;left:8px;right:8px;top:50%;height:6px;transform:translateY(-50%);background:linear-gradient(#b0a08e,#8d7b66);border-radius:3px}.pe-bead{position:absolute;top:50%;width:40px;height:40px;transform:translateY(-50%);border-radius:50%;cursor:pointer;transition:left .25s ease;box-shadow:inset -4px -4px 6px rgba(0,0,0,.25),inset 3px 3px 5px rgba(255,255,255,.5);touch-action:none}.pe-bead-red{background:radial-gradient(circle at 35% 30%,#ff7b6b,#c0392b 70%);border:1px solid #8f2a20}.pe-bead-white{background:radial-gradient(circle at 35% 30%,#fff,#d5d5d5 70%);border:1px solid #a5a5a5}.pe-frame.pe-compact{gap:6px}.pe-frame.pe-compact .pe-row{height:34px}.pe-frame.pe-compact .pe-bead{width:30px;height:30px}