.constructor-page .diagram-scroll {
    background:
        linear-gradient(rgba(124, 157, 151, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 157, 151, .12) 1px, transparent 1px),
        #10191d;
    background-size: 24px 24px;
    scrollbar-color: #54716e #18262a;
}

.constructor-page .diagram {
    background:
        linear-gradient(rgba(124, 157, 151, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 157, 151, .1) 1px, transparent 1px),
        #10191d;
    background-size: 24px 24px;
    box-shadow: inset 0 0 0 1px #38504e;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .3));
}

.constructor-page .diagram > image {
    filter: invert(1) grayscale(1) brightness(2.8) contrast(1.25);
    mix-blend-mode: screen;
}

.constructor-page .diagram-watermark-text {
    fill: #83d4b4;
    opacity: .24;
}

.constructor-page .detail-hit {
    stroke: rgba(235, 248, 240, .88);
    stroke-width: 1.1;
}

.constructor-page .detail-hit:hover,
.constructor-page .detail-hit:focus-visible {
    fill: rgba(43, 218, 159, .19);
    stroke: #b9f3d3;
    filter: drop-shadow(0 0 4px rgba(96, 224, 169, .42));
}

.constructor-page .detail-hit.selected {
    fill: rgba(218, 227, 224, .46);
    stroke: rgba(233, 240, 237, .82);
    filter: none;
}

.constructor-page .selected-swatch {
    border-color: rgba(233, 240, 237, .82);
    background: rgba(218, 227, 224, .46);
}

.constructor-page .dimension-line,
.constructor-page .dimension-tick {
    stroke: #c5d3cf;
}

.constructor-page .dimension-extension {
    stroke: rgba(197, 211, 207, .68);
}

.constructor-page .dimension-text {
    fill: #e5ece9;
    stroke: #10191d;
}

.constructor-page .diagram-label-background {
    fill: #3a4b4a;
    fill-opacity: .96;
    stroke: #cbd8d3;
}

.constructor-page .diagram-label-connector {
    stroke: #c5d3cf;
}

.constructor-page .diagram-selection-rectangle {
    fill: rgba(77, 232, 164, .21);
    stroke: #a8f2c8;
}

.constructor-page .diagram-scroll.is-erasing .detail-hit.selected:hover,
.constructor-page .diagram-scroll.is-erasing .detail-hit.selected:focus-visible {
    fill: rgba(231, 113, 68, .54);
    stroke: #ffba91;
    filter: drop-shadow(0 0 4px rgba(255, 138, 91, .5));
}

.constructor-page .diagram-scroll.is-erasing .diagram-selection-rectangle {
    fill: rgba(231, 113, 68, .18);
    stroke: #ffba91;
}

.constructor-page .diagram-scroll.is-panning .detail-hit:hover {
    fill: rgba(255, 107, 44, .001);
    stroke: rgba(235, 248, 240, .88);
    filter: none;
}

.constructor-page .diagram-scroll.is-panning .detail-hit.selected:hover {
    fill: rgba(218, 227, 224, .46);
    stroke: rgba(233, 240, 237, .82);
}