.flaps-host{user-select:none;width:100%;height:100%}.flaps-frame{position:relative;width:280px;height:260px;margin:0 auto;background:repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),linear-gradient(180deg,#4a5260 0,#2c333d 25%,#1a1f26 100%);border:1px solid #11161c;border-radius:10px;box-shadow:0 12px 24px rgba(0,0,0,.7),0 4px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.45);font-family:'Segoe UI',Arial,sans-serif;overflow:hidden}.flaps-screw{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#d8d8d4 0,#6a6a66 60%,#2a2a26 100%);border:1px solid #1a1a16;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.55);pointer-events:none;z-index:8}.flaps-screw::before{content:"";position:absolute;top:50%;left:14%;right:14%;height:1.4px;margin-top:-.7px;background:linear-gradient(90deg,#050608,#2a2a26 50%,#050608);border-radius:1px}.flaps-screw-tl{top:6px;left:6px}.flaps-screw-tr{top:6px;right:6px}.flaps-screw-bl{bottom:6px;left:6px}.flaps-screw-br{bottom:6px;right:6px}.flaps-screw-tl::before{transform:rotate(38deg)}.flaps-screw-tr::before{transform:rotate(-22deg)}.flaps-screw-bl::before{transform:rotate(-58deg)}.flaps-screw-br::before{transform:rotate(15deg)}.flaps-id{position:absolute;top:8px;right:26px;font:700 9px 'Segoe UI',Arial,sans-serif;letter-spacing:1.5px;color:#6a8294;pointer-events:none;z-index:6}.flaps-label{position:absolute;top:50%;left:140px;right:12px;text-align:center;transform:translateY(-50%);font:700 16px 'Segoe UI',Arial,sans-serif;letter-spacing:4px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.45);pointer-events:none;z-index:6}.flaps-track{position:absolute;top:30px;bottom:12px;left:18px;width:76px;z-index:2}.flaps-slot{position:absolute;top:40px;bottom:0;left:50%;width:18px;margin-left:-9px;background:linear-gradient(180deg,#15181d 0,#0d1116 100%);border:1px solid #050709;border-radius:4px;box-shadow:inset 0 2px 4px rgba(0,0,0,.85)}.flaps-pos{position:absolute;left:0;right:0;height:0;pointer-events:none;z-index:3}.flaps-pos>.lbl-l,.flaps-pos>.lbl-r{position:absolute;top:0;font:700 11px 'Segoe UI',Arial,sans-serif;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.5);cursor:pointer;pointer-events:auto;user-select:none;white-space:nowrap;transform:translateY(-50%)}.flaps-pos>.lbl-l{right:50%;margin-right:14px}.flaps-pos>.lbl-r{left:50%;margin-left:14px}.flaps-pos>.tick-l,.flaps-pos>.tick-r{position:absolute;top:0;width:6px;height:1.4px;background:#fff;pointer-events:none;transform:translateY(-50%)}.flaps-pos>.tick-l{right:50%;margin-right:8px}.flaps-pos>.tick-r{left:50%;margin-left:8px}.flaps-lever{position:absolute;left:50%;margin-left:-22px;width:44px;height:80px;cursor:ns-resize;z-index:5;transition:top 280ms cubic-bezier(.4, 0, .2, 1.4)}.flaps-lever.is-dragging{transition:none}.flaps-lever-knob{position:absolute;top:0;left:0;right:0;height:56px;background:linear-gradient(180deg,#f8f8f4 0,#c4c4c0 18%,#f0f0ec 40%,#888884 78%,#5a5a56 100%);border:1px solid #2a2a26;border-radius:22px 22px 6px 6px;box-shadow:inset 2px 1px 0 rgba(255,255,255,.55),inset -2px -2px 4px rgba(0,0,0,.3),0 4px 6px rgba(0,0,0,.45)}.flaps-lever-knob::after{content:"";position:absolute;top:6px;bottom:6px;left:12px;width:4px;border-radius:2px;background:linear-gradient(180deg,rgba(255,255,255,.75) 0,rgba(255,255,255,0) 100%);pointer-events:none}.flaps-lever-neck{position:absolute;top:50px;left:12px;right:12px;height:24px;background:linear-gradient(180deg,#6a6a66 0,#2c2c28 50%,#15151a 100%);border-radius:0 0 8px 8px;box-shadow:inset 1px 0 0 rgba(255,255,255,.2),inset -1px 0 0 rgba(0,0,0,.4)}.flaps-lever-shaft{position:absolute;top:70px;left:16px;right:16px;bottom:-160px;background:linear-gradient(180deg,#4a4a46 0,#2c2c28 60%,#15151a 100%);border-radius:0 0 4px 4px}