:is(
    [data-unit-visual-extension="mass_energy_ledger"],
    [data-unit-visual-extension="nuclear_equation_balance"],
    [data-unit-visual-extension="mass_defect_binding_ledger"],
    [data-unit-visual-extension="binding_energy_curve"],
    [data-unit-visual-extension="fission_fusion_timeline"],
    [data-unit-visual-extension="random_decay_evidence"],
    [data-unit-visual-extension="activity_decay_constant"],
    [data-unit-visual-extension="exponential_decay_graph"],
    [data-unit-visual-extension="half_life_experiment"]
) {
    --ch23-ink: #17343d;
    --ch23-muted: #607984;
    --ch23-line: #76919a;
    --ch23-grid: #dce8eb;
    --ch23-surface: #f3f8f9;
    --ch23-primary: #116f86;
    --ch23-secondary: #a5532f;
    --ch23-energy-in: #7452a0;
    --ch23-energy-out: #c47b1d;
    --ch23-proton: #b74e45;
    --ch23-neutron: #4f7689;
    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(--ch23-primary) 18%, transparent);
    border-radius: 1.2rem;
    background: linear-gradient(145deg, #fff 0%, var(--ch23-surface) 100%);
    color: var(--ch23-ink);
    box-shadow: 0 0.78rem 1.9rem rgb(23 52 61 / 0.07);
    overflow: clip;
}

:is(
    [data-unit-visual-extension="mass_energy_ledger"],
    [data-unit-visual-extension="nuclear_equation_balance"],
    [data-unit-visual-extension="mass_defect_binding_ledger"],
    [data-unit-visual-extension="binding_energy_curve"],
    [data-unit-visual-extension="fission_fusion_timeline"],
    [data-unit-visual-extension="random_decay_evidence"],
    [data-unit-visual-extension="activity_decay_constant"],
    [data-unit-visual-extension="exponential_decay_graph"],
    [data-unit-visual-extension="half_life_experiment"]
) :is(.ch23-visual-stage, .ch23-visual-panel, .ch23-timeline) {
    min-width: 0;
}

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

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

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

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

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

.ch23-visual-control {
    min-width: 0;
    height: 40px;
    padding: 0.44rem 0.34rem;
    border: 1px solid color-mix(in srgb, var(--ch23-line) 62%, transparent);
    border-radius: 0.68rem;
    background: rgb(255 255 255 / 0.94);
    color: var(--ch23-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;
}

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

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

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

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

.ch23-visual-drawing {
    position: relative;
    width: 100%;
    aspect-ratio: 720 / 400;
    border: 1px solid rgb(118 145 154 / 0.18);
    border-radius: 0.92rem;
    background: rgb(255 255 255 / 0.93);
    container-type: inline-size;
    overflow: clip;
}

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

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

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

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

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

.ch23-overlay.is-formula {
    max-width: 88%;
    color: var(--ch23-ink);
    font-size: clamp(12px, 2.25cqw, 16px);
    font-weight: 700;
}

.ch23-overlay.is-equation {
    max-width: 92%;
    font-size: clamp(12px, 2cqw, 14.5px);
}

.ch23-overlay.is-tick,
.ch23-overlay.is-measure,
.ch23-overlay.is-window-count {
    color: var(--ch23-muted);
    font-size: clamp(12px, 1.7cqw, 13px);
}

.ch23-overlay.is-muted {
    color: var(--ch23-muted);
    font-size: clamp(12px, 1.75cqw, 13px);
    font-weight: 590;
}

.ch23-overlay.is-emphasis,
.ch23-overlay.is-primary {
    color: var(--ch23-primary);
    font-weight: 780;
}

.ch23-overlay.is-secondary {
    color: var(--ch23-secondary);
    font-weight: 780;
}

.ch23-overlay.is-energy-in { color: var(--ch23-energy-in); }
.ch23-overlay.is-energy-out { color: var(--ch23-energy-out); }

.ch23-overlay.is-in-object {
    max-width: 22%;
    color: #fff;
    font-size: clamp(12px, 1.7cqw, 13px);
    font-weight: 760;
}

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

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

.ch23-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: 1px solid rgb(118 145 154 / 0.2);
    border-radius: 0.76rem;
    background: rgb(245 250 251 / 0.96);
}

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

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

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

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

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

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

.ch23-arrowhead.is-axis { stroke: var(--ch23-ink); }
.ch23-arrowhead.is-primary { stroke: var(--ch23-primary); }
.ch23-arrowhead.is-secondary { stroke: var(--ch23-secondary); }
.ch23-arrowhead.is-energy-in { stroke: var(--ch23-energy-in); }
.ch23-arrowhead.is-energy-out { stroke: var(--ch23-energy-out); }

.ch23-axis,
.ch23-vector,
.ch23-guide,
.ch23-time-rail,
.ch23-mass-bar,
.ch23-detector-slot,
.ch23-tangent {
    fill: none;
    stroke-linecap: round;
}

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

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

.ch23-vector.is-primary { stroke: var(--ch23-primary); }
.ch23-vector.is-secondary { stroke: var(--ch23-secondary); }
.ch23-vector.is-energy-in { stroke: var(--ch23-energy-in); }
.ch23-vector.is-energy-out { stroke: var(--ch23-energy-out); stroke-dasharray: 80; }

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

.ch23-guide.is-strong-range {
    stroke: color-mix(in srgb, var(--ch23-primary) 45%, #fff);
}

.ch23-system-boundary,
.ch23-sample-boundary {
    fill: rgb(240 247 248 / 0.72);
    stroke: var(--ch23-line);
    stroke-width: 1.2;
    stroke-dasharray: 7 6;
}

.ch23-system-object {
    fill: var(--ch23-primary);
    stroke: #fff;
    stroke-width: 2;
}

.ch23-centre-point,
.ch23-point {
    fill: var(--ch23-primary);
    stroke: #fff;
    stroke-width: 1.4;
}

.ch23-point.is-start { fill: var(--ch23-secondary); }
.ch23-point.is-end,
.ch23-point.is-peak { fill: var(--ch23-primary); }

.ch23-equation-lane {
    fill: rgb(244 249 250 / 0.9);
    stroke: rgb(118 145 154 / 0.32);
    stroke-width: 1.1;
}

.ch23-nucleon,
.ch23-sample-nucleus {
    stroke: #fff;
    stroke-width: 1.25;
}

.ch23-nucleon.is-proton { fill: var(--ch23-proton); }
.ch23-nucleon.is-neutron { fill: var(--ch23-neutron); }

.ch23-nucleus {
    fill: color-mix(in srgb, var(--ch23-primary) 17%, #fff);
    stroke: var(--ch23-primary);
    stroke-width: 1.7;
}

.ch23-nucleus.is-light,
.ch23-nucleus.is-positive { fill: #f1e9f7; stroke: var(--ch23-energy-in); }
.ch23-nucleus.is-heavy { fill: #e8f1f3; }
.ch23-nucleus.is-product { fill: #e7f3ee; stroke: #347c61; }
.ch23-nucleus.is-fragment-a { fill: #e8f1f3; stroke: var(--ch23-primary); }
.ch23-nucleus.is-fragment-b { fill: #f7ece6; stroke: var(--ch23-secondary); }

.ch23-mass-bar {
    stroke-width: 7;
}

.ch23-mass-bar.is-separated { stroke: var(--ch23-energy-in); }
.ch23-mass-bar.is-bound { stroke: var(--ch23-primary); }

.ch23-plot {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.45;
}

.ch23-plot.is-binding,
.ch23-plot.is-number,
.ch23-plot.is-tangent,
.ch23-plot.is-half-life { stroke: var(--ch23-primary); }
.ch23-plot.is-activity { stroke: var(--ch23-energy-in); }
.ch23-plot.is-count { stroke: var(--ch23-secondary); }
.ch23-plot.is-barrier { stroke: var(--ch23-energy-in); }

.ch23-vector.is-curve-route {
    stroke-width: 2.2;
}

.ch23-energy-column {
    stroke-width: 1.4;
}

.ch23-energy-column.is-reactant { fill: #f1eafa; stroke: var(--ch23-energy-in); }
.ch23-energy-column.is-product { fill: #e8f3ee; stroke: var(--ch23-primary); }

.ch23-gamma {
    fill: none;
    stroke: var(--ch23-energy-out);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch23-time-rail {
    stroke: var(--ch23-line);
    stroke-width: 1.6;
}

.ch23-event {
    fill: var(--ch23-energy-out);
    stroke: #fff;
    stroke-width: 1.1;
}

.ch23-sample-nucleus.is-remaining { fill: var(--ch23-primary); }
.ch23-sample-nucleus.is-decayed { fill: #d9e3e6; }

.ch23-detector {
    fill: #e5edf0;
    stroke: var(--ch23-line);
    stroke-width: 1.4;
}

.ch23-detector-slot {
    stroke: var(--ch23-primary);
    stroke-width: 3;
}

.ch23-tangent {
    stroke: var(--ch23-secondary);
    stroke-width: 1.65;
    stroke-dasharray: 6 5;
}

.ch23-source.is-covered {
    fill: #eef2f3;
    stroke: var(--ch23-line);
    stroke-width: 1.3;
}

@media (max-width: 600px) {
    :is(
        [data-unit-visual-extension="mass_energy_ledger"],
        [data-unit-visual-extension="nuclear_equation_balance"],
        [data-unit-visual-extension="mass_defect_binding_ledger"],
        [data-unit-visual-extension="binding_energy_curve"],
        [data-unit-visual-extension="fission_fusion_timeline"],
        [data-unit-visual-extension="random_decay_evidence"],
        [data-unit-visual-extension="activity_decay_constant"],
        [data-unit-visual-extension="exponential_decay_graph"],
        [data-unit-visual-extension="half_life_experiment"]
    ) {
        padding: 0.78rem;
        border-radius: 1rem;
    }

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

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

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

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

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

@media (max-width: 520px) {
    body[data-unit-id="ch23"] #mass-energy-equivalence .unit-derivation-formula.is-very-long > mjx-container,
    body[data-unit-id="ch23"] #mass-defect-and-binding-energy .unit-derivation-formula.is-very-long > mjx-container {
        display: inline-block;
        transform: scale(.78);
        transform-origin: left center;
    }

    body[data-unit-id="ch23"] #mass-defect-and-binding-energy .unit-formula {
        font-size: .62em;
    }

    body[data-unit-id="ch23"] #exponential-radioactive-decay .unit-formula {
        font-size: .72em;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        [data-unit-visual-extension="mass_energy_ledger"],
        [data-unit-visual-extension="nuclear_equation_balance"],
        [data-unit-visual-extension="mass_defect_binding_ledger"],
        [data-unit-visual-extension="binding_energy_curve"],
        [data-unit-visual-extension="fission_fusion_timeline"],
        [data-unit-visual-extension="random_decay_evidence"],
        [data-unit-visual-extension="activity_decay_constant"],
        [data-unit-visual-extension="exponential_decay_graph"],
        [data-unit-visual-extension="half_life_experiment"]
    ) * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}