.pins-demo{font-family:inherit;color:#253735}
.pins-stage{height:350px;position:relative;background:linear-gradient(145deg,#ece7db,#faf7ef);border:1px solid #d9d2c3;border-radius:12px;overflow:hidden}
.pins-stage canvas{display:block;width:100%;height:100%;touch-action:none}
.pins-force{position:absolute;top:14px;right:14px;z-index:2;display:flex;gap:5px;padding:10px 9px 8px;background:#f7e9d0f2;border:1px solid #cbb58b;border-radius:9px;box-shadow:0 5px 15px #4d382119;opacity:0;transform:translateY(-9px) rotate(-3deg);transition:opacity .65s ease,transform .65s ease;pointer-events:none}
.pins-force.is-shown{opacity:1;transform:translateY(0) rotate(0)}
.pins-force-cell{display:grid;grid-template-rows:21px 31px 17px;align-items:end;justify-items:center;width:20px;border-radius:4px;transition:background .2s ease,transform .2s ease;color:var(--pin-color)}
.pins-force-cell b{font-size:15px;line-height:20px;align-self:start}.pins-force-cell em{font:600 12px Consolas,monospace;line-height:17px;font-style:normal}
.pins-force-bar{display:block;width:9px;background:var(--pin-color);border-radius:2px 2px 0 0;background-image:repeating-linear-gradient(to top,transparent 0 6px,#fff8 6px 7px)}
.pins-force-cell.is-active{background:#fffaf0;transform:translateY(-3px);box-shadow:0 0 0 2px #c5ac7c66}
@media(max-width:500px){.pins-stage{height:310px}.pins-force{top:10px;right:10px;gap:3px;padding:8px 6px}.pins-force-cell{width:18px}}