:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) {
    --ch21-ink: #18313d;
    --ch21-muted: #5d7380;
    --ch21-line: #708996;
    --ch21-grid: #dce7eb;
    --ch21-surface: #f4f9fa;
    --ch21-surface-strong: #e7f2f4;
    --ch21-primary: #126d86;
    --ch21-secondary: #df5b08;
    --ch21-power: #74489a;
    --ch21-current: #0067b9;
    --ch21-blocked: #9d3f36;
    --ch21-inactive: #a9b7bf;
    --ch21-inactive-fill: #f3f6f7;
    --ch21-shared: #6842a6;
    --ch21-charge: #9a5b11;
    --ch21-measure: #5f4da8;
    margin: clamp(1.1rem, 2.6vw, 1.8rem) 0;
    padding: clamp(0.95rem, 2.6vw, 1.45rem);
    border: 1px solid color-mix(in srgb, var(--ch21-primary) 19%, transparent);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, #fdfefe 0%, var(--ch21-surface) 100%);
    color: var(--ch21-ink);
    box-shadow: 0 0.8rem 2rem rgb(24 49 61 / 0.07);
    overflow: clip;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-heading {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.85rem;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-heading h3 {
    margin: 0;
    color: var(--ch21-ink);
    font-size: var(--unit-text-heading-medium, 17px);
    line-height: 1.2;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-kicker {
    margin: 0;
    color: var(--ch21-primary);
    font-size: var(--unit-text-micro, 11px);
    font-weight: 800;
    letter-spacing: 0.072em;
    text-transform: uppercase;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-controls {
    display: grid;
    grid-template-columns: repeat(var(--ch21-control-count, 4), minmax(0, 1fr));
    gap: 0.42rem;
    width: 100%;
    min-width: 0;
    margin-bottom: 0.82rem;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-control {
    min-width: 0;
    height: 40px;
    padding: 0.45rem 0.38rem;
    border: 1px solid color-mix(in srgb, var(--ch21-line) 60%, transparent);
    border-radius: 0.7rem;
    background: rgb(255 255 255 / 0.92);
    color: var(--ch21-ink);
    font: inherit;
    font-size: var(--unit-text-meta, 12px);
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-control:is(:hover, :focus-visible) {
    border-color: var(--ch21-primary);
    outline: none;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-control:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch21-primary) 24%, transparent);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-control[aria-pressed="true"] {
    border-color: var(--ch21-primary);
    background: var(--ch21-primary);
    color: #fff;
    box-shadow: 0 0.34rem 0.86rem rgb(18 109 134 / 0.2);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) :is(.ch21-visual-stage, .ch21-visual-panel) {
    min-width: 0;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-panel[hidden] {
    display: none !important;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-drawing {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ch21-drawing-ratio, 720 / 390);
    border: 1px solid rgb(112 137 150 / 0.18);
    border-radius: 0.94rem;
    background: rgb(255 255 255 / 0.88);
    container-type: inline-size;
    overflow: clip;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-drawing > svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: inherit;
    overflow: visible;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label {
    position: absolute;
    z-index: 5;
    max-width: 58%;
    color: var(--ch21-ink);
    font-size: clamp(12px, 2.15cqw, 0.97rem);
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label[data-math-anchor="start"] {
    transform: translate(0, -50%);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label[data-math-anchor="end"] {
    transform: translate(-100%, -50%);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label mjx-container {
    margin: 0 !important;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label:is(.is-status, .is-note) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label.is-formula {
    font-size: clamp(12px, 1.98cqw, 0.92rem);
    font-weight: 680;
    text-shadow: 0 0 5px #fff, 0 0 5px #fff;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label.is-context {
    color: var(--ch21-muted);
    font-size: clamp(12px, 1.72cqw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 0 5px #fff, 0 0 5px #fff;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label:is(.is-tick, .is-legend, .is-axis-symbol, .is-component, .is-measure, .is-point-label) {
    font-size: clamp(12px, 1.8cqw, 0.9rem);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label:is(.is-point-label, .is-component, .is-polarity, .is-current) {
    text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label.is-current {
    color: var(--ch21-current);
    font-weight: 800;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label.is-muted {
    color: var(--ch21-muted);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label.is-charge-note {
    color: var(--ch21-charge);
    font-weight: 800;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-math-label.is-discharge-note {
    color: var(--ch21-secondary);
    font-weight: 800;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) svg :is(.ch21-grid, .ch21-axis, .ch21-guide, .ch21-timeline, .ch21-wave, .ch21-wave-phase, .ch21-measure, .ch21-average-line, .ch21-legend-line, .ch21-wire, .ch21-resistor, .ch21-capacitor-plate, .ch21-current-arrow, .ch21-charge-arrow, .ch21-diode, .ch21-diode-bar, .ch21-block-cross, .ch21-arrowhead, .ch21-ac-glyph, .ch21-rectified-source-glyph, .ch21-flow-route, .ch21-smoothing-cursor) {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-grid {
    stroke: var(--ch21-grid);
    stroke-width: 1;
    stroke-dasharray: 3 7;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-axis {
    stroke: var(--ch21-ink);
    stroke-width: 1.4;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-guide {
    stroke: var(--ch21-line);
    stroke-width: 1.05;
    stroke-dasharray: 6 6;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-timeline {
    stroke: var(--ch21-line);
    stroke-width: 1.1;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-wave {
    stroke: var(--ch21-primary);
    stroke-width: 2.4;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-wave:is(.is-secondary, .is-reference, .is-rectified-guide) {
    stroke-width: 1.8;
    stroke-dasharray: 8 6;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-wave.is-secondary {
    stroke: var(--ch21-secondary);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-wave:is(.is-reference, .is-rectified-guide) {
    stroke: var(--ch21-line);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-wave.is-rectified-guide {
    opacity: 0.58;
    stroke-dasharray: 3 7;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-wave:is(.is-power, .is-smoothed, .is-rectified) {
    stroke: var(--ch21-power);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-wave.is-smoothed {
    stroke-width: 2.6;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-wave-phase {
    stroke-width: 2.6;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-wave-phase.is-charge {
    stroke: var(--ch21-charge);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-wave-phase.is-discharge {
    stroke: var(--ch21-secondary);
    stroke-dasharray: 9 5;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-measure {
    stroke: var(--ch21-measure);
    stroke-width: 1.8;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-average-line {
    stroke: var(--ch21-power);
    stroke-width: 1.7;
    stroke-dasharray: 11 5 2 5;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-power-area {
    fill: rgb(116 72 154 / 0.1);
    stroke: none;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-sign-area {
    stroke: none;
    opacity: 0.09;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-sign-area.is-positive {
    fill: var(--ch21-primary);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-sign-area.is-negative {
    fill: var(--ch21-secondary);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-point {
    fill: #fff;
    stroke: var(--ch21-primary);
    stroke-width: 1.8;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-node {
    fill: var(--ch21-ink);
    stroke: none;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-point.is-selected {
    fill: var(--ch21-primary);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-point.is-charge {
    fill: #fff;
    stroke: var(--ch21-charge);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) :is(.ch21-wire, .ch21-resistor, .ch21-capacitor-plate) {
    stroke: var(--ch21-ink);
    stroke-width: 2;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-rectified-source-glyph {
    fill: none;
    stroke: var(--ch21-primary);
    stroke-width: 2.15;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) :is(.ch21-wire, .ch21-resistor).is-conducting {
    stroke: var(--ch21-current);
    stroke-width: 2.6;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-source {
    fill: #fff;
    stroke: var(--ch21-ink);
    stroke-width: 2;
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"]
) .ch21-ac-glyph {
    fill: none;
    stroke: var(--ch21-primary);
    stroke-width: 2.25;
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"]
) .ch21-node.is-terminal {
    fill: #fff;
    stroke: var(--ch21-ink);
    stroke-width: 1.8;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) :is(.ch21-diode, .ch21-diode-bar) {
    stroke: var(--ch21-line);
    stroke-width: 1.9;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-diode {
    fill: #fff;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) :is(.ch21-diode, .ch21-diode-bar).is-conducting {
    stroke: var(--ch21-current);
    stroke-width: 2.6;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) :is(.ch21-diode, .ch21-diode-bar).is-blocked {
    stroke: var(--ch21-blocked);
    stroke-width: 1.9;
    stroke-dasharray: none;
    opacity: 0.78;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-block-cross {
    stroke: var(--ch21-blocked);
    stroke-width: 2.1;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-current-arrow {
    stroke: var(--ch21-current);
    stroke-width: 2.4;
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"]
) .ch21-current-arrow.is-emphasis {
    stroke-width: 2.6;
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"]
) .ch21-flow-route {
    fill: none;
    stroke: var(--ch21-current);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[data-unit-visual-extension="bridge_rectifier_path"] :is(.ch21-wire, .ch21-resistor).is-inactive {
    stroke: var(--ch21-inactive);
    stroke-width: 1.7;
    opacity: 0.72;
}

[data-unit-visual-extension="bridge_rectifier_path"] :is(.ch21-diode, .ch21-diode-bar).is-blocked {
    stroke: var(--ch21-inactive);
    stroke-width: 1.7;
    opacity: 0.8;
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-diode.is-blocked {
    fill: var(--ch21-inactive-fill);
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-math-label.is-diode-label.is-inactive {
    color: #81939c;
    opacity: 0.82;
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-math-label.is-diode-label.is-conducting {
    color: var(--ch21-current);
    font-weight: 800;
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"]
) .ch21-flow-route.is-animated-path {
    stroke: transparent;
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-flow-route.is-a-path {
    stroke: var(--ch21-current);
    opacity: 1;
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-flow-route.is-b-path {
    stroke: var(--ch21-secondary);
    stroke-dasharray: 10 6;
    opacity: 1;
}

[data-unit-visual-extension="bridge_rectifier_path"] :is(.ch21-flow-route, .ch21-resistor).is-shared-path {
    stroke: var(--ch21-shared);
    stroke-width: 2.7;
    opacity: 1;
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-path-legend {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-path-legend.is-a-path {
    stroke: var(--ch21-current);
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-path-legend.is-b-path {
    stroke: var(--ch21-secondary);
    stroke-dasharray: 9 5;
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-path-legend.is-shared-path {
    stroke: var(--ch21-shared);
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-current-arrow.is-shared {
    stroke: var(--ch21-shared);
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-math-label.is-shared {
    color: var(--ch21-shared);
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"]
) .ch21-current-tracer {
    fill: var(--ch21-current);
    stroke: #fff;
    stroke-width: 2.2;
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"]
) .ch21-math-label.is-current-main {
    font-size: clamp(12px, 2.45cqw, 1.02rem);
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"]
) .ch21-finite-timeline {
    display: grid;
    gap: 0.55rem;
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"]
) .ch21-current-timeline-controls {
    display: grid;
    grid-template-columns: max-content minmax(8rem, 1fr) minmax(6.8rem, max-content);
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"]
) .ch21-current-play {
    min-height: 2.15rem;
    padding: 0.36rem 0.62rem;
    border: 1px solid var(--ch21-current);
    border-radius: 0.72rem;
    background: var(--ch21-current);
    color: #fff;
    font: inherit;
    font-size: var(--unit-text-meta, 12px);
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"]
) .ch21-current-play:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ch21-current) 28%, transparent);
    outline-offset: 2px;
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"]
) .ch21-current-range {
    width: 100%;
    min-width: 0;
    accent-color: var(--ch21-current);
}

:is(
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"]
) .ch21-current-output {
    color: var(--ch21-current);
    font-size: var(--unit-text-meta, 12px);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

[data-unit-visual-extension="smoothing_charge_discharge"] .ch21-smoothing-cursor {
    stroke: var(--ch21-muted);
    stroke-width: 1.35;
    stroke-dasharray: 5 5;
}

[data-unit-visual-extension="smoothing_charge_discharge"] .ch21-smoothing-sample {
    stroke-width: 2;
}

[data-unit-visual-extension="smoothing_charge_discharge"] .ch21-smoothing-sample.is-input {
    fill: #fff;
    stroke: var(--ch21-line);
}

[data-unit-visual-extension="smoothing_charge_discharge"] .ch21-smoothing-sample.is-capacitor {
    fill: var(--ch21-power);
    stroke: #fff;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-charge-arrow {
    stroke: var(--ch21-charge);
    stroke-width: 2.4;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-arrowhead {
    stroke-width: 1.8;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-arrowhead.is-axis {
    stroke: var(--ch21-ink);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-arrowhead.is-current {
    stroke: var(--ch21-current);
}

[data-unit-visual-extension="bridge_rectifier_path"] .ch21-arrowhead.is-shared {
    stroke: var(--ch21-shared);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-arrowhead.is-charge {
    stroke: var(--ch21-charge);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-arrowhead.is-measure {
    stroke: var(--ch21-measure);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-legend-line {
    stroke-width: 2.2;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-legend-line.is-primary {
    stroke: var(--ch21-primary);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-legend-line.is-output {
    stroke: var(--ch21-power);
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-legend-line.is-secondary {
    stroke: var(--ch21-secondary);
    stroke-dasharray: 8 5;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-legend-line.is-reference {
    stroke: var(--ch21-line);
    stroke-dasharray: 8 6;
}

:is(
    [data-unit-visual-extension="ac_waveform_identity"],
    [data-unit-visual-extension="sinusoid_equation_reader"],
    [data-unit-visual-extension="resistive_power_rms_story"],
    [data-unit-visual-extension="half_wave_diode_path"],
    [data-unit-visual-extension="bridge_rectifier_path"],
    [data-unit-visual-extension="smoothing_charge_discharge"],
    [data-unit-visual-extension="ripple_parameter_compare"]
) .ch21-visual-caption {
    min-height: 2.9em;
    margin: 0.68rem 0 0;
    color: var(--ch21-muted);
    font-size: var(--unit-text-body-small, 13px);
    line-height: 1.45;
}

@media (max-width: 620px) {
    :is(
        [data-unit-visual-extension="ac_waveform_identity"],
        [data-unit-visual-extension="sinusoid_equation_reader"],
        [data-unit-visual-extension="resistive_power_rms_story"],
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"],
        [data-unit-visual-extension="ripple_parameter_compare"]
    ) {
        padding: 0.8rem;
        border-radius: 1rem;
    }

    :is(
        [data-unit-visual-extension="ac_waveform_identity"],
        [data-unit-visual-extension="sinusoid_equation_reader"],
        [data-unit-visual-extension="resistive_power_rms_story"],
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"],
        [data-unit-visual-extension="ripple_parameter_compare"]
    ) .ch21-visual-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        max-width: 100%;
        padding: 0;
        overflow: visible;
    }

    :is(
        [data-unit-visual-extension="ac_waveform_identity"],
        [data-unit-visual-extension="sinusoid_equation_reader"],
        [data-unit-visual-extension="resistive_power_rms_story"],
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"],
        [data-unit-visual-extension="ripple_parameter_compare"]
    ) .ch21-visual-control {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding-inline: 0.55rem;
    }

    :is(
        [data-unit-visual-extension="ac_waveform_identity"],
        [data-unit-visual-extension="sinusoid_equation_reader"],
        [data-unit-visual-extension="resistive_power_rms_story"],
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"],
        [data-unit-visual-extension="ripple_parameter_compare"]
    ) .ch21-math-label {
        font-size: clamp(12px, 2.5cqw, 0.9rem);
    }

    :is(
        [data-unit-visual-extension="ac_waveform_identity"],
        [data-unit-visual-extension="sinusoid_equation_reader"],
        [data-unit-visual-extension="resistive_power_rms_story"],
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"],
        [data-unit-visual-extension="ripple_parameter_compare"]
    ) .ch21-math-label.is-wide {
        font-size: clamp(12px, 2.2cqw, 0.88rem);
    }

    :is(
        [data-unit-visual-extension="ac_waveform_identity"],
        [data-unit-visual-extension="sinusoid_equation_reader"],
        [data-unit-visual-extension="resistive_power_rms_story"],
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"],
        [data-unit-visual-extension="ripple_parameter_compare"]
    ) .ch21-visual-caption {
        min-height: 0;
        font-size: 0.79rem;
    }

    :is(
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"]
    ) .ch21-current-timeline-controls {
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 0.45rem;
    }

    :is(
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"]
    ) .ch21-current-play {
        grid-column: auto;
        width: auto;
    }

    :is(
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"]
    ) .ch21-current-output {
        grid-column: 1 / -1;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        [data-unit-visual-extension="ac_waveform_identity"],
        [data-unit-visual-extension="sinusoid_equation_reader"],
        [data-unit-visual-extension="resistive_power_rms_story"],
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"],
        [data-unit-visual-extension="ripple_parameter_compare"]
    ) .ch21-visual-control,
    :is(
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"]
    ) .ch21-current-play {
        scroll-behavior: auto;
        transition: none;
    }
}

@media (forced-colors: active) {
    :is(
        [data-unit-visual-extension="ac_waveform_identity"],
        [data-unit-visual-extension="sinusoid_equation_reader"],
        [data-unit-visual-extension="resistive_power_rms_story"],
        [data-unit-visual-extension="half_wave_diode_path"],
        [data-unit-visual-extension="bridge_rectifier_path"],
        [data-unit-visual-extension="smoothing_charge_discharge"],
        [data-unit-visual-extension="ripple_parameter_compare"]
    ) :is(.ch21-wave, .ch21-wire, .ch21-resistor, .ch21-diode, .ch21-diode-bar, .ch21-current-arrow, .ch21-charge-arrow, .ch21-block-cross, .ch21-flow-route, .ch21-ac-glyph, .ch21-rectified-source-glyph, .ch21-smoothing-cursor) {
        stroke: CanvasText;
    }
}