/* left-margin progress line + section dots (assets/spine.js) — same look as the homepage */
.spine{position:fixed;z-index:61;will-change:transform;contain:layout paint;pointer-events:none;overflow:visible}
.spine path{fill:none;stroke-linecap:round}
.spine .sp-bg{stroke:var(--line-2);stroke-width:calc(3px*var(--fs,1));opacity:.75}
.spine .sp-fg{stroke:var(--pri);stroke-width:calc(4.5px*var(--fs,1))}
.spine .sp-node{fill:var(--bg);stroke:var(--line-2);stroke-width:2.5;transition:fill .25s,stroke .25s}
.spine .sp-node.on{fill:var(--yel);stroke:var(--ink)}
.spine .sp-head{fill:var(--pri)}
.spine-nav{position:fixed;inset:0;pointer-events:none;z-index:62}
.spine-nav a{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;pointer-events:auto;text-decoration:none}
.spine-nav a span{position:absolute;left:24px;top:50%;transform:translate(-4px,-50%);white-space:nowrap;font-size:13px;font-weight:700;color:var(--ink);
  background:var(--card);border:1px solid var(--line-2);border-radius:6px;padding:4px 8px;opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.spine-nav a:hover span,.spine-nav a:focus-visible span{opacity:1;transform:translate(0,-50%)}
.spine-nav a:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
/* wide screens: labels sit to the left of the line (open margin) and the current section's name stays visible */
@media (min-width:1640px){
  .spine-nav a span{left:auto;right:24px;transform:translate(4px,-50%)}
  .spine-nav a.on span{opacity:1;transform:translate(0,-50%);background:transparent;border-color:transparent;color:var(--ink-2);font-weight:600}
  .spine-nav a:hover span{background:var(--card);border-color:var(--line-2);color:var(--ink)}
}
@media (max-width:1279px){.spine,.spine-nav{display:none}}