.ag-cord-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.ag-cords path, .ag-cord-base {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ag-strand-ambient { stroke: #23160f30; stroke-width: 7.5; }
.ag-strand-shadow  { stroke: #2315106e; stroke-width: 4.8; }
.ag-strand-core    { stroke: #421615; stroke-width: 5.05; }
.ag-strand-rope    { stroke: #8b2a25; stroke-width: 3.92; }
.ag-strand-groove  { stroke: #681e1dcc; stroke-width: 1.23; }
.ag-strand-ply     { stroke: #a23a30; stroke-width: 1.64; }
.ag-strand-wear    { stroke: #ac5b48; stroke-width: 1.7; }
.ag-strand-fiber   { stroke: #cf7965a6; stroke-width: .65; }
.ag-strand-nap     { stroke: #d5a78b9e; stroke-width: .62; }
.ag-strand-lint    { stroke: #ab735cb3; stroke-width: .57; }
.ag-strand-knot-shadow { stroke: #1c120ecc; stroke-width: 3.8; transform: translate(.8px, 1.5px); }
.ag-strand-knot        { stroke: #7f211e; stroke-width: 3.6; }
.ag-strand-knot-light  { stroke: #b94f3e; stroke-width: 1.2; transform: translate(-.5px, -.6px); }
.ag-pin {
  position: absolute;
  display: block;
  width: 51px;
  height: 51px;
  transform: translate(-50%, -50%);
  background: url('./materials/archive-tacks.png') left center / 300% 100% no-repeat;
}