.jb-ul {
  --jb-ul-color: #10a9c9;
  --jb-ul-thickness: 6px;
  --jb-ul-offset: 6px;
  --jb-ul-width: 0px;
  --jb-ul-opacity: 1;
  --jb-ul-size: 3;
  --jb-oval-color: #b7d11e;
  --jb-oval-thick: 4px;
  --jb-oval-pad-x: 16px;
  --jb-oval-pad-y: 8px;
  --jb-oval-tail-left-len: 44px;
  --jb-oval-tail-right-len: 24px;
  --jb-oval-tail-left-offset: 0px;
  --jb-oval-tail-right-offset: 0px;
  --jb-circle-y: 0px;
  --jb-circle-scale: 1;
  --jb-ul-size-mult: calc(1.1 + (var(--jb-ul-size, 3) * 0.6));
  position: relative;
  display: inline-block;
  line-height: 1.1;
}
.jb-ul__text { position: relative; z-index: 2; }
.jb-ul--oval {
  position: relative;
  display: inline-block;
  padding-top: calc(var(--jb-oval-pad-y, 8px) + ((var(--jb-ul-size, 3) - 1) * 1.4px));
  padding-bottom: calc(var(--jb-oval-pad-y, 8px) + ((var(--jb-ul-size, 3) - 1) * 1.4px));
  padding-left: calc(var(--jb-oval-pad-x, 16px) + (var(--jb-ul-width, 0px) * 0.5));
  padding-right: calc(var(--jb-oval-pad-x, 16px) + (var(--jb-ul-width, 0px) * 0.5));
  transform: translateY(var(--jb-ul-offset, 0px)) rotate(-2deg);
}
.jb-ul__circle-svg {
  position: absolute;
  left: calc((var(--jb-ul-width, 0px) * -0.5) - 2px);
  top: calc((var(--jb-oval-thick, 4px) * -0.55) + var(--jb-circle-y, 0px));
  width: calc(100% + var(--jb-ul-width, 0px) + 4px);
  height: calc(100% * var(--jb-circle-scale, 1));
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  transform: rotate(1deg);
}

.jb-ul__circle {
  fill: none;
  stroke: var(--jb-oval-color, #b7d11e);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--jb-ul-opacity, 1);
}
.jb-ul__circle--main { stroke-width: var(--jb-oval-thick, 4px); }
.jb-ul__circle--ghost {
  stroke-width: calc(var(--jb-oval-thick, 4px) * 0.25);
  opacity: calc(var(--jb-ul-opacity, 1) * 0.18);
}
.jb-ul__circle--open { stroke-dasharray: 252 42; stroke-dashoffset: 18; }
.jb-ul--oval-tail-left::before,
.jb-ul--oval-tail-right::after {
  content: "";
  position: absolute;
  background: var(--jb-oval-color, #b7d11e);
  border-radius: 9999px;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(183, 209, 30, 0.35);
}
.jb-ul--oval-tail-left::before {
  left: calc(50% - 2px);
  bottom: calc((var(--jb-oval-thick, 4px) * -0.40) + var(--jb-oval-tail-left-offset, 0px));
  width: calc(var(--jb-oval-tail-left-len, 44px) + (var(--jb-ul-width, 0px) * 0.10));
  height: calc(var(--jb-oval-thick, 4px) * 0.95);
  transform-origin: right center;
  transform: rotate(-4deg) translateX(calc(var(--jb-oval-tail-left-len, 44px) * -1));
}
.jb-ul--oval-tail-right::after {
  left: calc(50% - 1px);
  bottom: calc((var(--jb-oval-thick, 4px) * -0.18) + var(--jb-oval-tail-right-offset, 0px));
  width: calc(var(--jb-oval-tail-right-len, 24px) + (var(--jb-ul-width, 0px) * 0.06));
  height: calc(var(--jb-oval-thick, 4px) * 0.88);
  transform-origin: left center;
  transform: rotate(-1deg);
}
.jb-ul__svg {
  position: absolute;
  left: calc(var(--jb-ul-width, 0px) * -1);
  width: calc(100% + (var(--jb-ul-width, 0px) * 2));
  height: calc(var(--jb-ul-thickness, 8px) * var(--jb-ul-size-mult));
  bottom: calc(var(--jb-ul-offset, 8px) * -1);
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.jb-ul__path { fill: none; stroke: var(--jb-ul-color, #10a9c9); stroke-width: var(--jb-ul-thickness, 8px); stroke-linecap: round; stroke-linejoin: round; opacity: var(--jb-ul-opacity, 1); }
.jb-ul__path--second { opacity: calc(var(--jb-ul-opacity, 1) * 0.88); }
.jb-ul__marker { fill: none; stroke: var(--jb-ul-color, #10a9c9); stroke-width: calc(var(--jb-ul-thickness, 8px) * 0.88); stroke-linecap: round; stroke-linejoin: round; }
.jb-ul__marker--a { opacity: calc(var(--jb-ul-opacity, 1) * 0.95); }
.jb-ul__marker--b, .jb-ul__marker--c { opacity: calc(var(--jb-ul-opacity, 1) * 0.85); }
.jb-ul--highlight .jb-ul__text { background: linear-gradient(transparent 48%, var(--jb-ul-color, #fff36d) 48%); opacity: var(--jb-ul-opacity, 1); }
.jbmark-builder { background:#fff; border:1px solid #dcdcde; border-radius:8px; padding:18px; margin:18px 0 28px; max-width:1180px; }
.jbmark-builder-grid { display:grid; grid-template-columns:repeat(4, minmax(180px,1fr)); gap:14px; align-items:end; }
.jbmark-builder-grid label { display:block; font-weight:600; }
.jbmark-builder-grid input[type="text"], .jbmark-builder-grid select { width:100%; margin-top:5px; }
.jbmark-builder-grid input[type="range"] { width:100%; margin-top:8px; }
.jbmark-preview-box { margin-top:20px; padding:34px; min-height:170px; background:#f6f7f7; border:1px dashed #c3c4c7; border-radius:8px; overflow:auto; }
[data-jbmark-preview] { padding:28px; }
[data-jbmark-output] { width:100%; max-width:1000px; font-family:Consolas, Monaco, monospace; }
@media (max-width: 900px) { .jbmark-builder-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 600px) { .jbmark-builder-grid { grid-template-columns:1fr; } }