.osl {
  --osl-color: #fe7400;
  --osl-thickness: 3px;
  --osl-x1: 0%;
  --osl-y1: 0%;
  --osl-x2: 100%;
  --osl-y2: 0%;
  --osl-sq-count: 5;
  --osl-sq-size: 16px;
  --osl-sq-gap: 10px;
  --osl-tail-angle: 0deg;
  --osl-tail-length: 200vw;
  --osl-vertex-color: #00bcd4;
  --osl-sq-bias-x: 0.5;
  --osl-sq-bias-y: 0.5;
  --osl-sq-w: calc(
      var(--osl-sq-count) * var(--osl-sq-size)
      + (var(--osl-sq-count) - 1) * var(--osl-sq-gap)
  );
  --osl-sq-half: calc(var(--osl-sq-w) / 2);
  --osl-mid-left: calc(var(--osl-sq-bias-x) * var(--osl-sq-w));
  --osl-mid-right: calc((1 - var(--osl-sq-bias-x)) * var(--osl-sq-w));
  --osl-sq-anchor-x: calc(var(--osl-sq-bias-x) * -100%);
  --osl-sq-anchor-y: calc(var(--osl-sq-bias-y) * -100%);
  --osl-mid-x: calc((var(--osl-x1) + var(--osl-x2)) / 2);
  --osl-mid-y: calc((var(--osl-y1) + var(--osl-y2)) / 2);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.osl .osl-line {
  position: absolute;
  height: var(--osl-thickness);
  background: var(--osl-color);
  transform: translateY(calc(var(--osl-thickness) / -2));
}
.osl .osl-line-h {
  top: var(--osl-y1);
  left: var(--osl-x1);
  width: calc(var(--osl-mid-x) - var(--osl-x1) - var(--osl-mid-left));
}
.osl .osl-line-h-2 {
  top: var(--osl-y2);
  left: calc(var(--osl-mid-x) + var(--osl-mid-right));
  width: calc(var(--osl-x2) - var(--osl-mid-x) - var(--osl-mid-right));
}
.osl .osl-squares {
  position: absolute;
  top: var(--osl-mid-y);
  left: var(--osl-mid-x);
  transform: translate(var(--osl-sq-anchor-x), var(--osl-sq-anchor-y));
  display: flex;
  gap: var(--osl-sq-gap);
}
.osl .osl-squares .osl-square {
  width: var(--osl-sq-size);
  height: var(--osl-sq-size);
  background: var(--osl-color);
}
.osl .osl-mid {
  position: absolute;
  top: var(--osl-mid-y);
  left: var(--osl-mid-x);
  width: var(--osl-mid-w);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--osl-mid-pad, 0px);
  box-sizing: border-box;
  pointer-events: auto;
}
.osl .osl-cap {
  position: absolute;
  width: var(--osl-cap-size, var(--osl-sq-size));
  height: var(--osl-cap-size, var(--osl-sq-size));
  background: var(--osl-color);
  transform: translate(-50%, -50%);
}
.osl .osl-cap-l {
  top: var(--osl-y1);
  left: var(--osl-x1);
}
.osl .osl-cap-r {
  top: var(--osl-y2);
  left: var(--osl-x2);
}
.osl .osl-joint {
  position: absolute;
  top: var(--osl-y2);
  left: var(--osl-x2);
  width: 14px;
  height: 14px;
  background: var(--osl-color);
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px var(--osl-color);
}
.osl .osl-tail {
  position: absolute;
  top: var(--osl-y2);
  left: var(--osl-x2);
  width: var(--osl-tail-length);
  height: var(--osl-thickness);
  background: var(--osl-color);
  transform-origin: 0 50%;
  transform: rotate(var(--osl-tail-angle));
}
.osl .osl-head {
  position: absolute;
  top: var(--osl-y1);
  left: var(--osl-x1);
  width: var(--osl-head-length, var(--osl-tail-length));
  height: var(--osl-thickness);
  background: var(--osl-color);
  transform-origin: 0 50%;
  transform: rotate(var(--osl-head-angle, 0deg));
}
.osl .osl-vertex {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--osl-vertex-color);
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px var(--osl-vertex-color);
}
.osl .osl-vertex::after {
  content: attr(data-name);
  position: absolute;
  top: -8px;
  left: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #006271;
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1;
}

.osl-edge {
  --osl-edge-color: #fe7400;
  --osl-edge-thickness: 2px;
  --osl-edge-x: 0%;
  --osl-edge-y: 0%;
  --osl-edge-angle: 0deg;
  --osl-edge-length: 200vw;
  position: absolute;
  top: var(--osl-edge-y);
  left: var(--osl-edge-x);
  width: var(--osl-edge-length);
  height: var(--osl-edge-thickness);
  background: var(--osl-edge-color);
  transform-origin: 0 50%;
  transform: rotate(var(--osl-edge-angle));
  pointer-events: none;
}