.l8-report-spectrum {
    --l8-spectrum-field: #f1e7dc;
    position: relative;
    width: 100vw;
    height: clamp(440px, 44vw, 680px);
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    isolation: isolate;
    contain: layout paint;
    background: var(--l8-spectrum-field);
}

.l8-report-spectrum--parchment {
    --l8-spectrum-field: #f1e7dc;
}

.l8-report-spectrum--umber {
    --l8-spectrum-field: #72503f;
}

.l8-report-spectrum__canvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.l8-report-spectrum + .nc-spectrum__section,
.l8-report-spectrum + .nc-ledger__section {
    border-top: 0;
}

@media (max-width: 760px) {
    .l8-report-spectrum {
        height: clamp(340px, 82vw, 460px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .l8-report-spectrum__canvas {
        animation: none !important;
    }
}

@media (forced-colors: active) {
    .l8-report-spectrum {
        border-block: 1px solid CanvasText;
        background: Canvas;
    }

    .l8-report-spectrum__canvas {
        display: none;
    }
}

@media print {
    .l8-report-spectrum {
        display: none;
    }
}