:is(
    [data-unit-visual-extension="luminosity_flux_budget"],
    [data-unit-visual-extension="inverse_square_spreading"],
    [data-unit-visual-extension="standard_candle_distance"],
    [data-unit-visual-extension="wien_spectrum_shift"],
    [data-unit-visual-extension="stellar_radius_solver"],
    [data-unit-visual-extension="spectral_line_reference"],
    [data-unit-visual-extension="redshift_wave_train"],
    [data-unit-visual-extension="hubble_distance_velocity"],
    [data-unit-visual-extension="expanding_universe_history"]
) {
    --ch25-ink: #162a45;
    --ch25-muted: #61728a;
    --ch25-line: #778aa4;
    --ch25-grid: #dce5f0;
    --ch25-surface: #f4f7fc;
    --ch25-primary: #4657a8;
    --ch25-wave: #2d8bb7;
    --ch25-energy: #d8952f;
    --ch25-recession: #c65369;
    --ch25-inference: #278f7f;
    margin: clamp(1.1rem, 2.5vw, 1.75rem) 0;
    padding: clamp(0.9rem, 2.5vw, 1.4rem);
    border: 1px solid color-mix(in srgb, var(--ch25-primary) 18%, transparent);
    border-radius: 1.2rem;
    background: linear-gradient(145deg, #fff 0%, var(--ch25-surface) 100%);
    color: var(--ch25-ink);
    box-shadow: 0 0.78rem 1.9rem rgb(22 42 69 / 0.07);
    overflow: clip;
}

.ch25-visual,
.ch25-visual-panels,
.ch25-visual-panel,
.ch25-timeline {
    min-width: 0;
}

.ch25-visual-head {
    display: grid;
    gap: 0.62rem;
    margin-bottom: 0.78rem;
}

.ch25-visual-kicker {
    margin: 0;
    color: var(--ch25-primary);
    font-size: var(--unit-text-heading-medium, 17px);
    font-weight: 800;
    line-height: 1.25;
}

.ch25-visual-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.42rem;
    min-width: 0;
}

.ch25-visual-control {
    min-width: 0;
    min-height: 40px;
    padding: 0.44rem 0.34rem;
    border: 1px solid color-mix(in srgb, var(--ch25-line) 62%, transparent);
    border-radius: 0.68rem;
    background: rgb(255 255 255 / 0.95);
    color: var(--ch25-ink);
    font: inherit;
    font-size: var(--unit-text-meta, 12px);
    font-weight: 760;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.ch25-visual-control:is(:hover, :focus-visible) {
    border-color: var(--ch25-primary);
    outline: none;
}

.ch25-visual-control:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch25-primary) 24%, transparent);
}

.ch25-visual-control[aria-pressed="true"] {
    border-color: var(--ch25-primary);
    background: var(--ch25-primary);
    color: #fff;
    box-shadow: 0 0.32rem 0.82rem rgb(70 87 168 / 0.22);
}

.ch25-visual-panel[hidden] {
    display: none !important;
}

.ch25-visual-drawing {
    position: relative;
    width: 100%;
    aspect-ratio: 720 / 430;
    border-radius: 0.92rem;
    background:
        radial-gradient(circle at 82% 14%, rgb(158 171 231 / 0.15), transparent 28%),
        linear-gradient(180deg, #fbfdff, #f1f5fb);
    container-type: inline-size;
    overflow: clip;
}

.ch25-visual-drawing > svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow: visible;
}

.ch25-overlay {
    position: absolute;
    z-index: 6;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    max-width: 42%;
    color: var(--ch25-ink);
    font-size: clamp(0.58rem, 2.02cqw, 0.94rem);
    font-weight: 650;
    line-height: 1.12;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ch25-overlay mjx-container {
    margin: 0 !important;
    max-width: 100%;
}

.ch25-overlay.is-formula {
    max-width: 48%;
    color: var(--ch25-ink);
    font-size: clamp(0.61rem, 2.1cqw, 0.97rem);
    font-weight: 730;
}

.ch25-overlay.is-compact {
    max-width: 39%;
    font-size: clamp(0.5rem, 1.72cqw, 0.82rem);
}

.ch25-overlay.is-chip {
    max-width: 34%;
    padding: 0.21rem 0.4rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.92);
    color: var(--ch25-ink);
    box-shadow: 0 0.18rem 0.5rem rgb(22 42 69 / 0.1);
    font-size: clamp(0.5rem, 1.68cqw, 0.79rem);
}

.ch25-overlay.is-muted {
    max-width: 42%;
    color: var(--ch25-muted);
    font-size: clamp(0.48rem, 1.62cqw, 0.76rem);
    font-weight: 590;
}

.ch25-overlay.is-warning {
    max-width: 45%;
    color: #a13f55;
    font-size: clamp(0.53rem, 1.82cqw, 0.84rem);
    font-weight: 760;
}

.ch25-overlay.is-vertical {
    writing-mode: vertical-rl;
    transform: translate(-50%, -50%) rotate(180deg);
}

.ch25-visual-caption {
    display: grid;
    gap: 0.22rem;
    padding: 0.72rem 0.22rem 0;
    color: var(--ch25-muted);
    font-size: var(--unit-text-body, 14px);
    line-height: 1.45;
}

.ch25-visual-caption strong {
    color: var(--ch25-ink);
    font-size: var(--unit-text-label, 13px);
}

.ch25-timeline-controls {
    display: grid;
    grid-template-columns: auto auto minmax(8rem, 1fr) minmax(6.8rem, auto);
    gap: 0.62rem;
    align-items: center;
    margin-top: 0.55rem;
    padding: 0.52rem 0.2rem 0;
    border-top: 1px solid rgb(119 138 164 / 0.22);
}

.ch25-timeline-play {
    min-width: 6.1rem;
    min-height: 38px;
    padding: 0.42rem 0.68rem;
    border: 1px solid var(--ch25-primary);
    border-radius: 0.58rem;
    background: #fff;
    color: var(--ch25-primary);
    font: inherit;
    font-size: var(--unit-text-meta, 12px);
    font-weight: 780;
    cursor: pointer;
}

.ch25-timeline-play:is(:hover, :focus-visible) {
    background: var(--ch25-primary);
    color: #fff;
    outline: none;
}

.ch25-timeline-label,
.ch25-timeline-status {
    color: var(--ch25-muted);
    font-size: var(--unit-text-meta, 12px);
    white-space: nowrap;
}

.ch25-timeline-range {
    width: 100%;
    min-width: 0;
    accent-color: var(--ch25-primary);
}

.ch25-timeline-status {
    color: var(--ch25-ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ch25-axis {
    fill: none;
    stroke: var(--ch25-line);
    stroke-width: 1.4;
}

.ch25-guide,
.ch25-space-grid {
    fill: none;
    stroke: var(--ch25-grid);
    stroke-width: 1.05;
    stroke-dasharray: 5 6;
}

.ch25-space-grid {
    stroke-width: 0.85;
    stroke-dasharray: 3 7;
}

.ch25-wavefront,
.ch25-ray,
.ch25-wave,
.ch25-plot,
.ch25-response-line {
    fill: none;
    stroke: var(--ch25-wave);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch25-wavefront {
    stroke-width: 1.8;
}

.ch25-ray {
    stroke-width: 1.5;
}

.ch25-spectrum-plot {
    stroke-width: 3;
}

.ch25-response-line {
    stroke: var(--ch25-primary);
    stroke-width: 2.4;
}

.ch25-vector {
    fill: none;
    stroke-width: 2.6;
    stroke-linecap: round;
}

.ch25-arrowhead {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch25-point {
    fill: var(--ch25-primary);
    stroke: #fff;
    stroke-width: 1.2;
}

.ch25-star {
    stroke: rgb(133 93 34 / 0.45);
    stroke-width: 1.2;
}

.ch25-star-glow {
    filter: blur(3px);
}

.ch25-detector-patch,
.ch25-detector {
    fill: #dfe7f2;
    stroke: #566b87;
    stroke-width: 1.4;
}

.ch25-observer {
    fill: #e8eef7;
    stroke: #566b87;
    stroke-width: 1.5;
}

.ch25-galaxy-halo {
    fill: rgb(118 101 185 / 0.11);
    stroke: rgb(80 76 151 / 0.34);
    stroke-width: 1.2;
}

.ch25-spectrum-rail {
    stroke: rgb(59 74 104 / 0.42);
    stroke-width: 1;
    rx: 8px;
}

.ch25-spectral-line {
    stroke-linecap: round;
}

.ch25-galaxy {
    fill: #7d74bd;
    stroke: #fff;
    stroke-width: 1.4;
}

@media (max-width: 620px) {
    :is(
        [data-unit-visual-extension="luminosity_flux_budget"],
        [data-unit-visual-extension="inverse_square_spreading"],
        [data-unit-visual-extension="standard_candle_distance"],
        [data-unit-visual-extension="wien_spectrum_shift"],
        [data-unit-visual-extension="stellar_radius_solver"],
        [data-unit-visual-extension="spectral_line_reference"],
        [data-unit-visual-extension="redshift_wave_train"],
        [data-unit-visual-extension="hubble_distance_velocity"],
        [data-unit-visual-extension="expanding_universe_history"]
    ) {
        padding: 0.78rem;
        border-radius: 0.95rem;
    }

    .ch25-visual-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ch25-visual-control {
        min-height: 42px;
        white-space: normal;
    }

    .ch25-timeline-controls {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ch25-timeline-label {
        display: none;
    }

    .ch25-timeline-range {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ch25-timeline-status {
        text-align: right;
    }

    .ch25-overlay {
        font-size: clamp(0.66rem, 2.85cqw, 0.94rem);
    }

    .ch25-overlay.is-formula {
        max-width: 45%;
        font-size: clamp(0.68rem, 2.95cqw, 0.97rem);
    }

    .ch25-overlay.is-compact {
        max-width: 41%;
        font-size: clamp(0.64rem, 2.5cqw, 0.82rem);
    }

    .ch25-overlay.is-chip,
    .ch25-overlay.is-muted {
        font-size: clamp(0.64rem, 2.45cqw, 0.79rem);
    }

    .ch25-overlay.is-warning {
        font-size: clamp(0.66rem, 2.65cqw, 0.84rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ch25-star-glow {
        filter: none;
    }

    .ch25-visual *,
    .ch25-visual *::before,
    .ch25-visual *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}