:root {
	--line-label-colour: #E7DD98;
}

html {
	scroll-behavior: smooth;
}

span.labelmargin {
}

span.linelabel {
    --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1092 432' preserveAspectRatio='none' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M1037.09,288.682L742.595,430.586C742.595,430.586 694.501,432.533 158.721,431.792C60.69,431.656 -0.098,327.096 0,215.08C0.096,105.645 54.61,1.338 148.376,0.928C779.311,-1.828 742.092,2.434 742.092,2.434L1038.96,175.782C1108.01,215.447 1111.24,257.555 1037.09,288.682Z' /%3E%3C/svg%3E");

    position: relative;
    isolation: isolate;
    padding: 0px 12px 0px 3px;
    font-size: 75%;
}

span.linelabel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--line-label-colour);
    mask: var(--shape) center / 100% 100% no-repeat;
    -webkit-mask: var(--shape) center / 100% 100% no-repeat;
}

.linelabel a {
    text-decoration: none;
}

.linelabel a:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
}

span.nolinelabel {
    padding: 0px 12px 0px 3px;
	font-size: 75%;
}

a.labelanchor {
	scroll-margin-top: 300px;
}

a.labelanchor:target + span.linelabel {
  --line-label-colour: #a6adff;
}

a.lineanchor {
	scroll-margin-top: 300px;
}

a.lineanchor:target + span.anchoredline {
	background-color: #a6adff;
}

.arrow-from-above-button {
  width: 30px;
  height: 20px;
  border: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 940 753' preserveAspectRatio='none' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M0,499.219L253.125,246.094L253.125,455.859L853.125,455.859L853.125,0L939.844,0L939.844,542.578L253.125,542.578L253.125,752.344L0,499.219Z' fill-rule='nonzero' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}

.arrow-from-below-button {
  width: 30px;
  height: 20px;
  border: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 940 753' preserveAspectRatio='none' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M0,253.125L253.125,506.25L253.125,296.484L853.125,296.484L853.125,752.344L939.844,752.344L939.844,209.766L253.125,209.766L253.125,0L0,253.125Z' fill-rule='nonzero' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}

.arrow-short-button {
  width: auto;                    /* let it grow with the label */
  height: 20px;
  border: 0;
  padding: 0 8px 0 19px;          /* reserve the left strip for the arrow */
  text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 444 507' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M0,253.125L253.125,0L253.125,209.766L443.125,209.766L443.844,296.484L253.125,296.484L253.125,506.25L0,253.125Z' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 4px center;
  background-size: auto 14px;     /* height-driven; width = 14 × 444/507 ≈ 12px */
}