.fpc-curve {
    position: relative;
    display: block;
    width: 100%;
}

.fpc-hero-curve { aspect-ratio: 1.04; }
.fpc-matrix-curve { aspect-ratio: 640 / 520; }

.fpc-curve-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fpc-curve.is-interactive {
    cursor: crosshair;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
}

.fpc-curve.is-interactive [data-curve-marker] { cursor: grab; }
.fpc-curve.is-dragging,
.fpc-curve.is-dragging [data-curve-marker] { cursor: grabbing; }

.fpc-curve .fpc-curve-help,
.fpc-curve .fpc-curve-control {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.fpc-curve .fpc-curve-control { pointer-events: none; }
.fpc-curve .fpc-curve-control[hidden],
.fpc-curve .fpc-curve-help[hidden] { display: none; }

/* The native slider gives keyboard and assistive technology users the same
   interaction without adding controls to the resting illustration. */
.fpc-curve:focus-within {
    outline: 2px solid var(--fpc-blue, #2860ff);
    outline-offset: 6px;
    border-radius: 2px;
}

.fpc-curve .fpc-curve-control:focus-visible {
    left: 12%;
    right: 12%;
    bottom: 12px;
    width: 76%;
    height: 24px;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    accent-color: var(--fpc-blue, #2860ff);
    pointer-events: auto;
    cursor: pointer;
}

@media (max-width: 767px) {
    .fpc-hero-curve { aspect-ratio: 1.3; }
}

@container fpc-section (max-width: 800px) {
    .fpc-hero-curve { aspect-ratio: 1.3; }
}

@media print {
    .fpc-curve .fpc-curve-control { display: none; }
    .fpc-curve { outline: 0; }
}