.righello{
  --passo:17px;
  --tacca:8px;
  --colmo:48px;
  --mano:72px;
  --spessore:1px;
  --raggio:5;
  --fioco:.7;
  position:relative;
  z-index:1;
  flex:none;
  align-self:center;
  height:62%;
  width:var(--mano);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
  background-image:repeating-linear-gradient(to bottom,
    var(--linea) 0 var(--spessore),
    transparent var(--spessore) var(--passo));
  background-size:var(--tacca) 100%;
  background-position:left top;
  background-repeat:repeat-y;
  filter:drop-shadow(0 0 2px var(--ink)) drop-shadow(0 0 6px var(--ink));
}
.righello.is-onda{background-image:none}
.righello__t{
  --r:0;
  position:absolute;
  left:0;
  width:calc(var(--tacca) + var(--r,0) * (var(--colmo) - var(--tacca)));
  height:calc(var(--spessore) * (1 + var(--r,0) * .4));
  background:var(--linea);
  opacity:calc(var(--fioco) + var(--r,0) * (1 - var(--fioco)));
  pointer-events:none;
}
.righello__mano{
  position:absolute;
  left:0;
  width:var(--mano);
  height:var(--spessore);
  background:var(--paper);
  pointer-events:none;
  top:calc(var(--q,0) * (100% - var(--spessore)));
  transition:top var(--t-quick,220ms) var(--e-out,ease);
}
@supports (top:round(down,1px,1px)){
  .righello__mano{
    top:round(down,calc(var(--q,0) * (100% - var(--spessore))),var(--passo));
  }
}
@media (prefers-reduced-motion: reduce){
  .righello__mano{transition:none}
}