:is(
    [data-unit-visual-extension="piezoelectric_transducer"],
    [data-unit-visual-extension="ultrasound_pulse_echo"],
    [data-unit-visual-extension="acoustic_impedance_boundary"],
    [data-unit-visual-extension="ultrasound_diagnostic_scan"],
    [data-unit-visual-extension="xray_tube_timeline"],
    [data-unit-visual-extension="xray_attenuation_contrast"],
    [data-unit-visual-extension="ct_reconstruction"],
    [data-unit-visual-extension="pet_tracer_distribution"],
    [data-unit-visual-extension="positron_electron_annihilation"],
    [data-unit-visual-extension="pet_coincidence_reconstruction"]
) {
    --ch24-ink: #17343d;
    --ch24-muted: #607984;
    --ch24-line: #78929b;
    --ch24-grid: #dbe7ea;
    --ch24-surface: #f4f9fa;
    --ch24-primary: #116f86;
    --ch24-electric: #75539f;
    --ch24-ultrasound: #0f7c83;
    --ch24-echo: #b8662a;
    --ch24-transmitted: #2f7d61;
    --ch24-electron: #276caa;
    --ch24-xray: #b44949;
    --ch24-tracer: #3d7c5a;
    --ch24-positron: #7b4fa2;
    --ch24-particle: #3f708c;
    --ch24-gamma: #a43f82;
    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(--ch24-primary) 18%, transparent);
    border-radius: 1.2rem;
    background: linear-gradient(145deg, #fff 0%, var(--ch24-surface) 100%);
    color: var(--ch24-ink);
    box-shadow: 0 0.78rem 1.9rem rgb(23 52 61 / 0.07);
    overflow: clip;
}

:is(
    [data-unit-visual-extension="piezoelectric_transducer"],
    [data-unit-visual-extension="ultrasound_pulse_echo"],
    [data-unit-visual-extension="acoustic_impedance_boundary"],
    [data-unit-visual-extension="ultrasound_diagnostic_scan"],
    [data-unit-visual-extension="xray_tube_timeline"],
    [data-unit-visual-extension="xray_attenuation_contrast"],
    [data-unit-visual-extension="ct_reconstruction"],
    [data-unit-visual-extension="pet_tracer_distribution"],
    [data-unit-visual-extension="positron_electron_annihilation"],
    [data-unit-visual-extension="pet_coincidence_reconstruction"]
) :is(.ch24-visual-stage, .ch24-visual-panel, .ch24-timeline) {
    min-width: 0;
}

.ch24-visual-heading {
    display: grid;
    gap: 0.18rem;
    margin-bottom: 0.82rem;
}

.ch24-visual-heading :is(h3, p),
.ch24-visual-caption {
    margin: 0;
}

.ch24-visual-heading h3 {
    color: var(--ch24-ink);
    font-size: var(--unit-text-heading-medium, 17px);
    line-height: 1.22;
}

.ch24-visual-kicker {
    color: var(--ch24-primary);
    font-size: max(12px, var(--unit-text-micro, 11px));
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ch24-visual-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.42rem;
    width: 100%;
    min-width: 0;
    margin-bottom: 0.78rem;
}

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

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

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

.ch24-visual-control[aria-pressed="true"] {
    border-color: var(--ch24-primary);
    background: var(--ch24-primary);
    color: #fff;
    box-shadow: 0 0.32rem 0.82rem rgb(17 111 134 / 0.2);
}

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

.ch24-visual-drawing {
    position: relative;
    width: 100%;
    aspect-ratio: 720 / 400;
    border-radius: 0.92rem;
    background: rgb(255 255 255 / 0.82);
    container-type: inline-size;
    overflow: clip;
}

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

.ch24-overlay {
    position: absolute;
    z-index: 5;
    max-width: 46%;
    color: var(--ch24-ink);
    font-size: max(12px, clamp(0.61rem, 2.1cqw, 0.94rem));
    font-weight: 620;
    line-height: 1.12;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ch24-overlay[data-overlay-anchor="start"] {
    text-align: left;
    transform: translate(0, -50%);
}

.ch24-overlay[data-overlay-anchor="end"] {
    text-align: right;
    transform: translate(-100%, -50%);
}

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

.ch24-overlay.is-formula {
    max-width: 92%;
    color: var(--ch24-ink);
    font-size: max(12px, clamp(0.62rem, 2.15cqw, 0.98rem));
    font-weight: 700;
}

.ch24-overlay.is-compact {
    max-width: 58%;
    font-size: max(12px, clamp(0.54rem, 1.85cqw, 0.86rem));
}

.ch24-overlay.is-muted {
    color: var(--ch24-muted);
    font-size: max(12px, clamp(0.55rem, 1.75cqw, 0.78rem));
    font-weight: 590;
}

.ch24-overlay.is-in-object {
    max-width: 28%;
    color: var(--ch24-ink);
    font-size: max(12px, clamp(0.48rem, 1.65cqw, 0.75rem));
    font-weight: 760;
}

.ch24-overlay.is-particle-label {
    font-size: max(12px, clamp(0.68rem, 2.35cqw, 1.08rem));
    font-weight: 780;
}

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

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

.ch24-timeline-controls {
    display: grid;
    grid-template-columns: auto minmax(9rem, 1fr) minmax(7rem, auto);
    gap: 0.7rem;
    align-items: center;
    margin-top: 0.58rem;
    padding: 0.52rem;
    border-top: 1px solid rgb(118 145 154 / 0.22);
}

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

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

.ch24-timeline-label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
    color: var(--ch24-muted);
    font-size: max(12px, var(--unit-text-meta, 12px));
}

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

.ch24-timeline-output {
    color: var(--ch24-ink);
    font-size: max(12px, var(--unit-text-meta, 12px));
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.ch24-arrowhead {
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch24-arrowhead.is-electric { stroke: var(--ch24-electric); }
.ch24-arrowhead.is-ultrasound { stroke: var(--ch24-ultrasound); }
.ch24-arrowhead.is-echo { stroke: var(--ch24-echo); }
.ch24-arrowhead.is-transmitted { stroke: var(--ch24-transmitted); }
.ch24-arrowhead.is-electron { stroke: var(--ch24-electron); }
.ch24-arrowhead.is-xray { stroke: var(--ch24-xray); }
.ch24-arrowhead.is-tracer { stroke: var(--ch24-tracer); }
.ch24-arrowhead.is-positron { stroke: var(--ch24-positron); }
.ch24-arrowhead.is-particle { stroke: var(--ch24-particle); }
.ch24-arrowhead.is-gamma { stroke: var(--ch24-gamma); }

.ch24-axis,
.ch24-vector,
.ch24-guide,
.ch24-boundary,
.ch24-time-rail,
.ch24-electrode,
.ch24-cathode,
.ch24-detector-array,
.ch24-detector-segment,
.ch24-response-line,
.ch24-sweep,
.ch24-trace,
.ch24-wave {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch24-axis {
    stroke: var(--ch24-ink);
    stroke-width: 1.55;
}

.ch24-vector {
    stroke-width: 2.55;
}

.ch24-vector.is-electric { stroke: var(--ch24-electric); }
.ch24-vector.is-ultrasound { stroke: var(--ch24-ultrasound); }
.ch24-vector.is-echo { stroke: var(--ch24-echo); }
.ch24-vector.is-transmitted { stroke: var(--ch24-transmitted); }
.ch24-vector.is-electron { stroke: var(--ch24-electron); }
.ch24-vector.is-xray { stroke: var(--ch24-xray); }
.ch24-vector.is-tracer { stroke: var(--ch24-tracer); }
.ch24-vector.is-positron { stroke: var(--ch24-positron); }
.ch24-vector.is-particle { stroke: var(--ch24-particle); }
.ch24-vector.is-gamma { stroke: var(--ch24-gamma); }

.ch24-guide {
    stroke: var(--ch24-grid);
    stroke-width: 1;
    stroke-dasharray: 5 6;
}

.ch24-guide.is-projection { stroke: color-mix(in srgb, var(--ch24-xray) 26%, #fff); }

.ch24-probe {
    fill: #e3ecef;
    stroke: var(--ch24-line);
    stroke-width: 1.5;
}

.ch24-crystal {
    fill: #eee7f6;
    stroke: var(--ch24-electric);
    stroke-width: 1.7;
}

.ch24-electrode,
.ch24-cathode {
    stroke: var(--ch24-electric);
    stroke-width: 2.2;
}

.ch24-tissue,
.ch24-scan-tissue,
.ch24-body-section,
.ch24-body-outline {
    fill: #f3e9e2;
    stroke: #b78a72;
    stroke-width: 1.45;
}

.ch24-boundary {
    stroke: var(--ch24-line);
    stroke-width: 1.25;
    stroke-dasharray: 6 5;
}

.ch24-wave {
    stroke-width: 2.05;
}

.ch24-wave.is-ultrasound { stroke: var(--ch24-ultrasound); }
.ch24-wave.is-echo { stroke: var(--ch24-echo); }

.ch24-time-rail {
    stroke: var(--ch24-line);
    stroke-width: 1.45;
}

.ch24-trace {
    stroke: var(--ch24-primary);
    stroke-width: 2.3;
}

.ch24-electrical-signal {
    fill: none;
    stroke: var(--ch24-electric);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch24-centre-point,
.ch24-interaction-point,
.ch24-image-point {
    fill: var(--ch24-primary);
    stroke: #fff;
    stroke-width: 1.25;
}

.ch24-interaction-point { fill: var(--ch24-gamma); }

.ch24-medium.is-one { fill: #edf5f7; stroke: var(--ch24-primary); stroke-width: 1.35; }
.ch24-medium.is-two { fill: #eef2eb; stroke: var(--ch24-transmitted); stroke-width: 1.35; }

.ch24-plot {
    fill: none;
    stroke: var(--ch24-primary);
    stroke-width: 2.4;
}

.ch24-bscan-dots,
.ch24-image-point {
    fill: var(--ch24-echo);
}

.ch24-vacuum-tube {
    fill: #f7fafb;
    stroke: var(--ch24-line);
    stroke-width: 1.55;
}

.ch24-filament {
    fill: none;
    stroke: #c45f37;
    stroke-width: 2.2;
}

.ch24-target {
    fill: #dfe7e9;
    stroke: var(--ch24-ink);
    stroke-width: 1.55;
}

.ch24-particle {
    stroke: #fff;
    stroke-width: 1.4;
}

.ch24-particle.is-electron { fill: var(--ch24-electron); }
.ch24-particle.is-positron { fill: var(--ch24-positron); }
.ch24-particle.is-tracer { fill: var(--ch24-tracer); }

.ch24-absorber {
    stroke-width: 1.35;
}

.ch24-absorber.is-one { fill: #e4eff2; stroke: var(--ch24-primary); }
.ch24-absorber.is-two { fill: #f0e4e1; stroke: var(--ch24-xray); }

.ch24-detector-bar {
    fill: var(--ch24-xray);
    stroke: #fff;
    stroke-width: 1;
}

.ch24-detector-bar.is-two { fill: color-mix(in srgb, var(--ch24-xray) 68%, #fff); }

.ch24-sweep {
    stroke: color-mix(in srgb, var(--ch24-xray) 58%, #fff);
    stroke-width: 1.2;
    stroke-dasharray: 4 5;
}

.ch24-ct-ring,
.ch24-pet-ring {
    fill: none;
    stroke: var(--ch24-line);
    stroke-width: 10;
}

.ch24-structure.is-one,
.ch24-image-region.is-one { fill: #d7e6eb; stroke: var(--ch24-primary); stroke-width: 1.2; }
.ch24-structure.is-two,
.ch24-image-region.is-two { fill: #e9d8d0; stroke: #a55c46; stroke-width: 1.2; }

.ch24-xray-source {
    fill: var(--ch24-xray);
    stroke: #fff;
    stroke-width: 1.2;
}

.ch24-detector-array,
.ch24-detector-segment {
    stroke: var(--ch24-ink);
    stroke-width: 5;
}

.ch24-reconstruction-area,
.ch24-concentration-map {
    fill: #f7fafb;
    stroke: var(--ch24-line);
    stroke-width: 1.25;
}

.ch24-slice {
    fill: rgb(17 111 134 / 0.12);
    stroke: var(--ch24-primary);
    stroke-width: 1.25;
}

.ch24-uptake-region {
    fill: rgb(61 124 90 / 0.2);
    stroke: var(--ch24-tracer);
    stroke-width: 1.5;
}

.ch24-syringe {
    fill: #edf4f1;
    stroke: var(--ch24-tracer);
    stroke-width: 1.45;
}

.ch24-response-line {
    stroke: color-mix(in srgb, var(--ch24-gamma) 58%, #fff);
    stroke-width: 1.35;
}

.ch24-response-line.is-single {
    stroke: var(--ch24-gamma);
    stroke-width: 2.1;
}

.ch24-heat-region {
    fill: var(--ch24-tracer);
    stroke: #fff;
    stroke-width: 0.8;
}

@media (max-width: 600px) {
    :is(
        [data-unit-visual-extension="piezoelectric_transducer"],
        [data-unit-visual-extension="ultrasound_pulse_echo"],
        [data-unit-visual-extension="acoustic_impedance_boundary"],
        [data-unit-visual-extension="ultrasound_diagnostic_scan"],
        [data-unit-visual-extension="xray_tube_timeline"],
        [data-unit-visual-extension="xray_attenuation_contrast"],
        [data-unit-visual-extension="ct_reconstruction"],
        [data-unit-visual-extension="pet_tracer_distribution"],
        [data-unit-visual-extension="positron_electron_annihilation"],
        [data-unit-visual-extension="pet_coincidence_reconstruction"]
    ) {
        padding: 0.78rem;
        border-radius: 1rem;
    }

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

    .ch24-visual-control {
        height: 38px;
        font-size: max(12px, var(--unit-text-meta, 11px));
    }

    .ch24-timeline-controls {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.45rem;
        padding: 0.46rem;
    }

    .ch24-timeline-play {
        width: 100%;
        min-height: 42px;
    }

    .ch24-timeline-output {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        [data-unit-visual-extension="piezoelectric_transducer"],
        [data-unit-visual-extension="ultrasound_pulse_echo"],
        [data-unit-visual-extension="acoustic_impedance_boundary"],
        [data-unit-visual-extension="ultrasound_diagnostic_scan"],
        [data-unit-visual-extension="xray_tube_timeline"],
        [data-unit-visual-extension="xray_attenuation_contrast"],
        [data-unit-visual-extension="ct_reconstruction"],
        [data-unit-visual-extension="pet_tracer_distribution"],
        [data-unit-visual-extension="positron_electron_annihilation"],
        [data-unit-visual-extension="pet_coincidence_reconstruction"]
    ) * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}