#detection-banner {
    width: calc(100vw - 2 * var(--body-margin-horizontal));
    height: var(--detection-banner-height);
}
#detection-banner > svg {
    width: 100%;
    height: 100%;
    --top-and-bottom-view-height: calc(
        (var(--svgHeight) - var(--between-layers-height)) / 2);
    --top-view-y: var(--top-and-bottom-view-height);
    --transition-layer-y: calc(var(--top-view-y) + var(--between-layers-height));
    --bottom-view-y: var(--svgHeight);
}
#detection-banner #detections-top {
    transform:
        translateX(calc((var(--svgWidth) / 2) * 1px)) /* put 0 in middle of screen */
        translateY(calc(var(--top-view-y) * 1px))
        scaleX(var(--top-scaling-factor))
        translateX(calc(var(--currentFrame) * -1px))  /* currentFrame on left edge */
        scaleY(calc(-1 * var(--top-and-bottom-view-height) / var(--maxCount)));
}
#detection-banner #detections-bottom {
    transform:
        translateY(calc(var(--bottom-view-y) * 1px))
        scaleX(calc(var(--svgWidth) / var(--totalNumberOfFrames)))
        scaleY(calc(-1 * var(--top-and-bottom-view-height) / var(--maxCount)));
}
#detection-banner .all-detections {
    stroke: silver;
    fill: silver;
}
#detection-banner .visible-detections {
    stroke: red;
    fill: red;
}
#detection-banner #cursor {
    stroke: hsl(0 0% 30%);
    fill: hsl(0 0% 30%);
    transform: scaleY(var(--top-and-bottom-view-height));
}
#detection-banner #cursor path {
    vector-effect: non-scaling-stroke;
}

#detection-banner #cursor-top {
    transform: translateX(calc((var(--svgWidth) / 2) * 1px));
}

#detection-banner #cursor-bottom {
    transform: translateX(
        calc(var(--currentFrame) / var(--totalNumberOfFrames) * 100%)
    ) translateY(calc(var(--transition-layer-y) * 1px));
}
#detection-banner #cursor-bottom > rect {
    fill: hsl(0 0% 70% / 30%);
    stroke: hsl(0 0% 30% / 40%);
    stroke-dasharray: 2 4;
    vector-effect: non-scaling-stroke;
    --itemWidth: calc(
        var(--svgWidth) * var(--svgWidth)
        / (var(--totalNumberOfFrames) * var(--top-scaling-factor)));
    x: calc(-1 * var(--itemWidth) / 2 * 1px);
    width: calc(var(--itemWidth) * 1px);
    height: calc(var(--top-and-bottom-view-height) * 1px);
}

#detection-banner #detection-lines > path {
    vector-effect: non-scaling-stroke;
}
#detection-banner .horizontal-rulers line {
    vector-effect: non-scaling-stroke;
    stroke: hsl(0 0% 30% / 40%);
}

#detection-banner .horizontal-rulers text {
    fill: hsl(0 0% 20% / 80%);
    font-family: monospace;
    font-size: .7em;
}