:is(
    [data-unit-visual-extension="orbital_free_fall_lab"],
    [data-unit-visual-extension="radial_local_field_lab"],
    [data-unit-visual-extension="inverse_square_force_lab"],
    [data-unit-visual-extension="field_strength_distance_lab"],
    [data-unit-visual-extension="circular_orbit_lab"],
    [data-unit-visual-extension="geostationary_orbit_lab"],
    [data-unit-visual-extension="potential_reference_lab"],
    [data-unit-visual-extension="potential_energy_map_lab"]
) {
    --ch13-ink: #173b4f;
    --ch13-muted: #607986;
    --ch13-line: #93a8b2;
    --ch13-surface: #f2f8fa;
    --ch13-velocity: #087f9c;
    --ch13-gravity: #c45143;
    --ch13-field: #1f8063;
    --ch13-external: #7255a6;
    --ch13-displacement: #b06b2f;
    --ch13-rotation: #7255a6;
    --ch13-neutral: #536e7b;
    --ch13-one: #0c7894;
    --ch13-two: #b0642c;
    width: 100%;
    min-width: 0;
    margin: clamp(1rem, 2.3vw, 1.65rem) 0;
    padding: clamp(0.88rem, 2.2vw, 1.3rem);
    border: 1px solid color-mix(in srgb, var(--ch13-field) 16%, transparent);
    border-radius: 1.2rem;
    background: linear-gradient(145deg, #fff 0%, var(--ch13-surface) 100%);
    color: var(--ch13-ink);
    box-shadow: 0 0.78rem 2rem rgb(23 59 79 / 0.06);
    overflow: clip;
}

.ch13-visual[data-unit-visual-extension] [hidden] {
    display: none !important;
}

.ch13-visual[data-unit-visual-extension] .ch13-visual-heading {
    display: grid;
    gap: 0.16rem;
    margin-bottom: 0.78rem;
}

.ch13-visual[data-unit-visual-extension] .ch13-visual-heading h3 {
    margin: 0;
    color: var(--ch13-ink);
    font-size: var(--unit-text-heading-medium, 17px);
    font-weight: 760;
    line-height: 1.22;
    letter-spacing: -0.015em;
}

.ch13-visual[data-unit-visual-extension] .ch13-visual-kicker {
    margin: 0;
    color: var(--ch13-field);
    font-size: var(--unit-text-micro, 11px);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-state-controls, .ch13-timeline, .ch13-range-row) {
    width: 100%;
    min-width: 0;
}

.ch13-visual[data-unit-visual-extension] .ch13-state-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
    gap: 0.42rem;
    margin: 0 0 0.66rem;
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-state-button, .ch13-timeline-button) {
    min-width: 0;
    min-height: 38px;
    padding: 0.42rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--ch13-line) 66%, transparent);
    border-radius: 0.68rem;
    background: rgb(255 255 255 / 0.96);
    color: var(--ch13-ink);
    font: inherit;
    font-size: var(--unit-text-meta, 12px);
    font-weight: 740;
    line-height: 1.15;
    cursor: pointer;
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-state-button, .ch13-timeline-button):hover {
    border-color: var(--ch13-field);
}

.ch13-visual[data-unit-visual-extension] .ch13-state-button[aria-pressed="true"] {
    border-color: var(--ch13-field);
    background: var(--ch13-field);
    color: #fff;
    box-shadow: 0 0.3rem 0.8rem rgb(31 128 99 / 0.18);
}

.ch13-visual[data-unit-visual-extension] .ch13-timeline {
    display: grid;
    grid-template-columns: max-content max-content minmax(6rem, 1fr) minmax(8rem, max-content);
    align-items: center;
    gap: 0.52rem;
    margin: 0 0 0.66rem;
    padding: 0.54rem 0.62rem;
    border-radius: 0.76rem;
    background: color-mix(in srgb, var(--ch13-rotation) 6%, #fff);
}

.ch13-visual[data-unit-visual-extension][data-motion-mode="loop"] .ch13-timeline {
    grid-template-columns: max-content minmax(6rem, 1fr) minmax(8rem, max-content);
}

.ch13-visual[data-unit-visual-extension] .ch13-timeline-button {
    min-height: 34px;
    color: var(--ch13-rotation);
    white-space: nowrap;
}

.ch13-visual[data-unit-visual-extension] .ch13-timeline-button[aria-pressed="true"] {
    border-color: var(--ch13-rotation);
    background: color-mix(in srgb, var(--ch13-rotation) 9%, #fff);
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-timeline-scrub, .ch13-range) {
    width: 100%;
    min-width: 0;
    accent-color: var(--ch13-rotation);
}

.ch13-visual[data-unit-visual-extension] .ch13-timeline-phase {
    min-width: 0;
    color: var(--ch13-muted);
    font-size: var(--unit-text-meta, 12px);
    font-weight: 680;
    line-height: 1.25;
    text-align: right;
}

.ch13-visual[data-unit-visual-extension] .ch13-range-row {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) minmax(7rem, 1fr) minmax(4.9rem, max-content);
    align-items: center;
    gap: 0.62rem;
    margin: 0 0 0.52rem;
    padding: 0.48rem 0.62rem;
    border-radius: 0.72rem;
    background: rgb(255 255 255 / 0.82);
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-range-label, .ch13-range-output) {
    color: var(--ch13-muted);
    font-size: var(--unit-text-meta, 12px);
    font-weight: 700;
    line-height: 1.2;
}

.ch13-visual[data-unit-visual-extension] .ch13-range-output {
    color: var(--ch13-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-state-panels, .ch13-state-panel) {
    min-width: 0;
}

.ch13-visual[data-unit-visual-extension] .ch13-visual-drawing {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: var(--ch13-drawing-ratio, 720 / 420);
    overflow: clip;
}

.ch13-visual[data-unit-visual-extension] .ch13-visual-drawing > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-math-label, .ch13-text-label) {
    position: absolute;
    z-index: 3;
    max-width: min(14rem, 38%);
    color: var(--ch13-ink);
    font-size: var(--unit-text-meta, 12px);
    font-weight: 720;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-shadow: -2px 0 #fff, 2px 0 #fff, 0 -2px #fff, 0 2px #fff;
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-math-label, .ch13-text-label)[data-math-anchor="start"] {
    transform: translate(0, -50%);
    text-align: left;
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-math-label, .ch13-text-label)[data-math-anchor="end"] {
    transform: translate(-100%, -50%);
    text-align: right;
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-math-label.is-velocity, .ch13-text-label.is-satellite) {
    color: var(--ch13-velocity);
}

.ch13-visual[data-unit-visual-extension] .ch13-math-label.is-gravity {
    color: var(--ch13-gravity);
}

.ch13-visual[data-unit-visual-extension] .ch13-math-label.is-field {
    color: var(--ch13-field);
}

.ch13-visual[data-unit-visual-extension] .ch13-math-label.is-external {
    color: var(--ch13-external);
}

.ch13-visual[data-unit-visual-extension] .ch13-math-label.is-displacement {
    color: var(--ch13-displacement);
}

.ch13-visual[data-unit-visual-extension] .ch13-math-label.is-one {
    color: var(--ch13-one);
}

.ch13-visual[data-unit-visual-extension] .ch13-math-label.is-two {
    color: var(--ch13-two);
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-math-label.is-neutral, .ch13-text-label.is-earth, .ch13-text-label.is-muted) {
    color: var(--ch13-neutral);
}

.ch13-visual[data-unit-visual-extension] .ch13-formula-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.42rem 0.76rem;
    min-width: 0;
    margin-top: 0.38rem;
    padding: 0.54rem 0.66rem;
    border-radius: 0.72rem;
    background: rgb(255 255 255 / 0.84);
    color: var(--ch13-ink);
}

.ch13-visual[data-unit-visual-extension] .ch13-formula-chip {
    min-width: 0;
    max-width: 100%;
    font-size: var(--unit-text-meta, 12px);
    font-weight: 700;
    text-align: center;
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-visual-caption, .ch13-state-verdict) {
    margin: 0.68rem 0 0;
    color: var(--ch13-muted);
    font-size: var(--unit-text-body-small, 13px);
    line-height: 1.48;
}

.ch13-visual[data-unit-visual-extension] .ch13-state-verdict {
    min-height: 2.65em;
    margin: 0.54rem 0 0;
    padding: 0.58rem 0.7rem;
    border-left: 3px solid var(--ch13-field);
    border-radius: 0.2rem 0.64rem 0.64rem 0.2rem;
    background: color-mix(in srgb, var(--ch13-field) 5%, #fff);
    color: var(--ch13-ink);
    font-weight: 650;
}

.ch13-visual[data-unit-visual-extension] .ch13-orbit-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.38rem 1rem;
    margin-top: 0.28rem;
    color: var(--ch13-muted);
    font-size: var(--unit-text-meta, 12px);
    font-weight: 720;
}

.ch13-visual[data-unit-visual-extension] .ch13-orbit-legend .is-satellite {
    color: var(--ch13-velocity);
}

.ch13-visual[data-unit-visual-extension] .ch13-orbit-legend .is-surface {
    color: var(--ch13-displacement);
}

.ch13-visual[data-unit-visual-extension] .ch13-visual-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.38rem 1rem;
    margin-top: 0.3rem;
    color: var(--ch13-muted);
    font-size: var(--unit-text-meta, 12px);
    font-weight: 710;
    line-height: 1.35;
}

.ch13-visual[data-unit-visual-extension] .ch13-visual-legend > span {
    display: inline-flex;
    min-width: 0;
    align-items: baseline;
    gap: 0.32rem;
}

.ch13-visual[data-unit-visual-extension] .ch13-visual-legend :is(.is-velocity, .is-horizontal) {
    color: var(--ch13-velocity);
}

.ch13-visual[data-unit-visual-extension] .ch13-visual-legend :is(.is-gravity, .is-vertical) {
    color: var(--ch13-gravity);
}

.ch13-visual[data-unit-visual-extension] .ch13-visual-legend .is-field {
    color: var(--ch13-field);
}

.ch13-visual[data-unit-visual-extension] .ch13-visual-legend .is-centre {
    color: var(--ch13-ink);
}

.ch13-visual[data-unit-visual-extension] .ch13-legend-symbol {
    flex: none;
    font-weight: 780;
}

.ch13-visual[data-unit-visual-extension] .ch13-axis-legend {
    padding: 0.3rem 0.54rem;
    border-radius: 0.62rem;
    background: rgb(255 255 255 / 0.78);
}

.ch13-visual[data-unit-visual-extension] .ch13-comparison-readout {
    margin-top: 0.34rem;
    padding: 0.46rem 0.58rem;
    border-radius: 0.62rem;
    background: rgb(255 255 255 / 0.86);
    color: var(--ch13-gravity);
    font-size: var(--unit-text-meta, 12px);
    font-weight: 740;
    text-align: center;
}

.ch13-visual[data-unit-visual-extension] .ch13-graph-readout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.38rem;
    margin-top: 0.36rem;
}

.ch13-visual[data-unit-visual-extension] .ch13-graph-readout > span {
    min-width: 0;
    padding: 0.46rem 0.58rem;
    border-radius: 0.62rem;
    background: rgb(255 255 255 / 0.86);
    font-size: var(--unit-text-meta, 12px);
    font-weight: 710;
    text-align: center;
}

.ch13-visual[data-unit-visual-extension] .ch13-graph-readout .is-one {
    color: var(--ch13-one);
}

.ch13-visual[data-unit-visual-extension] .ch13-graph-readout .is-two {
    color: var(--ch13-two);
}

.ch13-visual[data-unit-visual-extension] .ch13-graph-readout .is-change {
    grid-column: 1 / -1;
    color: var(--ch13-ink);
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-guide, .ch13-zero-asymptote) {
    fill: none;
    stroke: color-mix(in srgb, var(--ch13-line) 74%, #fff);
    stroke-width: 1.05;
    stroke-dasharray: 5 7;
}

.ch13-visual[data-unit-visual-extension] .ch13-zero-asymptote {
    stroke: color-mix(in srgb, var(--ch13-neutral) 64%, #fff);
}

.ch13-visual[data-unit-visual-extension] .ch13-vector {
    fill: none;
    stroke-width: 2.35;
    stroke-linecap: round;
}

.ch13-visual[data-unit-visual-extension] .ch13-vector.is-velocity {
    stroke: var(--ch13-velocity);
}

.ch13-visual[data-unit-visual-extension] .ch13-vector.is-gravity {
    stroke: var(--ch13-gravity);
}

.ch13-visual[data-unit-visual-extension] .ch13-vector.is-field {
    stroke: var(--ch13-field);
}

.ch13-visual[data-unit-visual-extension] .ch13-vector.is-external {
    stroke: var(--ch13-external);
}

.ch13-visual[data-unit-visual-extension] .ch13-vector.is-displacement {
    stroke: var(--ch13-displacement);
}

.ch13-visual[data-unit-visual-extension] .ch13-arrowhead {
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch13-visual[data-unit-visual-extension] .ch13-arrowhead.is-velocity {
    stroke: var(--ch13-velocity);
}

.ch13-visual[data-unit-visual-extension] .ch13-arrowhead.is-gravity {
    stroke: var(--ch13-gravity);
}

.ch13-visual[data-unit-visual-extension] .ch13-arrowhead.is-field {
    stroke: var(--ch13-field);
}

.ch13-visual[data-unit-visual-extension] .ch13-arrowhead.is-external {
    stroke: var(--ch13-external);
}

.ch13-visual[data-unit-visual-extension] .ch13-arrowhead.is-displacement {
    stroke: var(--ch13-displacement);
}

.ch13-visual[data-unit-visual-extension] .ch13-arrowhead.is-rotation {
    stroke: var(--ch13-rotation);
}

.ch13-visual[data-unit-visual-extension] .ch13-arrowhead.is-neutral {
    stroke: var(--ch13-neutral);
}

.ch13-visual[data-unit-visual-extension] .ch13-planet {
    fill: color-mix(in srgb, var(--ch13-field) 17%, #fff);
    stroke: var(--ch13-field);
    stroke-width: 1.7;
}

.ch13-visual[data-unit-visual-extension] .ch13-orbit {
    fill: none;
    stroke: color-mix(in srgb, var(--ch13-line) 72%, #fff);
    stroke-width: 1.3;
    stroke-dasharray: 5 7;
}

.ch13-visual[data-unit-visual-extension] .ch13-orbit.is-polar {
    stroke: color-mix(in srgb, var(--ch13-gravity) 55%, #fff);
}

.ch13-visual[data-unit-visual-extension] .ch13-rotation-arc {
    fill: none;
    stroke: var(--ch13-rotation);
    stroke-width: 1.8;
    stroke-linecap: round;
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-centre-point, .ch13-interaction-point) {
    fill: var(--ch13-ink);
    stroke: none;
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-satellite, .ch13-probe, .ch13-loose-object) {
    fill: var(--ch13-velocity);
    stroke: #fff;
    stroke-width: 2;
}

.ch13-visual[data-unit-visual-extension] .ch13-surface-point {
    fill: var(--ch13-displacement);
    stroke: #fff;
    stroke-width: 1.8;
}

.ch13-visual[data-unit-visual-extension] .ch13-craft-body {
    fill: color-mix(in srgb, var(--ch13-velocity) 19%, #fff);
    stroke: var(--ch13-velocity);
    stroke-width: 1.8;
}

.ch13-visual[data-unit-visual-extension] .ch13-craft-window {
    fill: #fff;
    stroke: var(--ch13-velocity);
    stroke-width: 1.2;
}

.ch13-visual[data-unit-visual-extension] .ch13-astronaut-head {
    fill: #fff;
    stroke: var(--ch13-neutral);
    stroke-width: 1.5;
}

.ch13-visual[data-unit-visual-extension] .ch13-astronaut-line {
    stroke: var(--ch13-neutral);
    stroke-width: 2.3;
    stroke-linecap: round;
}

.ch13-visual[data-unit-visual-extension] .ch13-local-window-cue {
    fill: none;
    stroke: var(--ch13-displacement);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
}

.ch13-visual[data-unit-visual-extension] .ch13-surface-curve {
    fill: color-mix(in srgb, var(--ch13-field) 10%, #fff);
    stroke: var(--ch13-field);
    stroke-width: 2;
}

.ch13-visual[data-unit-visual-extension] .ch13-mass {
    stroke-width: 1.8;
}

.ch13-visual[data-unit-visual-extension] .ch13-mass.is-one {
    fill: color-mix(in srgb, var(--ch13-one) 20%, #fff);
    stroke: var(--ch13-one);
}

.ch13-visual[data-unit-visual-extension] .ch13-mass.is-two {
    fill: color-mix(in srgb, var(--ch13-two) 20%, #fff);
    stroke: var(--ch13-two);
}

.ch13-visual[data-unit-visual-extension] :is(.ch13-dimension-line, .ch13-dimension-tick) {
    stroke: var(--ch13-neutral);
    stroke-width: 1.15;
}

.ch13-visual[data-unit-visual-extension] .ch13-surface-cue {
    stroke: color-mix(in srgb, var(--ch13-field) 54%, #fff);
    stroke-width: 1.2;
    stroke-dasharray: 4 6;
}

.ch13-visual[data-unit-visual-extension] .ch13-equator {
    fill: none;
    stroke: var(--ch13-displacement);
    stroke-width: 2;
}

.ch13-visual[data-unit-visual-extension] .ch13-axis {
    fill: none;
    stroke: var(--ch13-neutral);
    stroke-width: 1.35;
}

.ch13-visual[data-unit-visual-extension] .ch13-excluded-region {
    fill: color-mix(in srgb, var(--ch13-line) 12%, #fff);
    stroke: none;
}

.ch13-visual[data-unit-visual-extension] .ch13-potential-curve {
    fill: none;
    stroke: var(--ch13-external);
    stroke-width: 3;
    stroke-linecap: round;
}

.ch13-visual[data-unit-visual-extension] .ch13-graph-point {
    stroke: #fff;
    stroke-width: 2;
}

.ch13-visual[data-unit-visual-extension] .ch13-graph-point.is-one {
    fill: var(--ch13-one);
}

.ch13-visual[data-unit-visual-extension] .ch13-graph-point.is-two {
    fill: var(--ch13-two);
}

.ch13-visual[data-unit-visual-extension] .ch13-guide.is-second {
    stroke: color-mix(in srgb, var(--ch13-two) 60%, #fff);
}

@media (max-width: 560px) {
    :is(
        [data-unit-visual-extension="orbital_free_fall_lab"],
        [data-unit-visual-extension="radial_local_field_lab"],
        [data-unit-visual-extension="inverse_square_force_lab"],
        [data-unit-visual-extension="field_strength_distance_lab"],
        [data-unit-visual-extension="circular_orbit_lab"],
        [data-unit-visual-extension="geostationary_orbit_lab"],
        [data-unit-visual-extension="potential_reference_lab"],
        [data-unit-visual-extension="potential_energy_map_lab"]
    ) {
        padding: 0.76rem;
        border-radius: 1rem;
    }

    .ch13-visual[data-unit-visual-extension] .ch13-state-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ch13-visual[data-unit-visual-extension] .ch13-timeline,
    .ch13-visual[data-unit-visual-extension][data-motion-mode="loop"] .ch13-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.44rem;
    }

    .ch13-visual[data-unit-visual-extension] .ch13-timeline-scrub {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ch13-visual[data-unit-visual-extension] .ch13-timeline-phase {
        grid-column: 1 / -1;
        text-align: left;
        white-space: normal;
    }

    .ch13-visual[data-unit-visual-extension][data-motion-mode="loop"] .ch13-timeline-phase {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .ch13-visual[data-unit-visual-extension] .ch13-range-row {
        grid-template-columns: minmax(0, 1fr) max-content;
        gap: 0.38rem 0.5rem;
    }

    .ch13-visual[data-unit-visual-extension] .ch13-range {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ch13-visual[data-unit-visual-extension] :is(.ch13-math-label, .ch13-text-label) {
        max-width: 44%;
        font-size: max(10.5px, var(--unit-text-meta, 12px));
    }

    .ch13-visual[data-unit-visual-extension] .ch13-formula-strip {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.34rem;
    }

    .ch13-visual[data-unit-visual-extension] .ch13-formula-chip {
        overflow-wrap: anywhere;
    }

    .ch13-visual[data-unit-visual-extension] .ch13-graph-readout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ch13-visual[data-unit-visual-extension] .ch13-graph-readout .is-change {
        grid-column: auto;
    }

    .ch13-visual[data-unit-visual-extension] .ch13-visual-legend {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 0.3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ch13-visual[data-unit-visual-extension] * {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}