:is(
    [data-unit-visual-extension="material_response_hook"],
    [data-unit-visual-extension="deformation_modes"],
    [data-unit-visual-extension="spring_extension_experiment"],
    [data-unit-visual-extension="hookes_law_graph"],
    [data-unit-visual-extension="spring_network"],
    [data-unit-visual-extension="elastic_energy_area"],
    [data-unit-visual-extension="stress_strain_normalisation"],
    [data-unit-visual-extension="young_modulus_material"],
    [data-unit-visual-extension="young_modulus_experiment"],
    [data-unit-visual-extension="elastic_plastic_paths"],
    [data-unit-visual-extension="geometry_scaling"]
).ch06-visual {
    --ch06-ink: #19383f;
    --ch06-muted: #5a7076;
    --ch06-line: #6f878d;
    --ch06-guide: #aebfc2;
    --ch06-surface: #f3f8f7;
    --ch06-accent: #0a766f;
    --ch06-accent-soft: #d7eee8;
    --ch06-tensile: #087a8f;
    --ch06-compressive: #c46924;
    --ch06-load: #aa4d43;
    --ch06-dimension: #6d5aa3;
    --ch06-trace: #0b7d6d;
    width: 100%;
    max-width: 100%;
    margin: clamp(1rem, 2.6vw, 1.7rem) 0;
    padding: clamp(0.85rem, 2.4vw, 1.3rem);
    overflow: clip;
    border: 1px solid color-mix(in srgb, var(--ch06-accent) 20%, transparent);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, #fdfefd, var(--ch06-surface));
    box-shadow: 0 0.7rem 1.8rem rgb(25 56 63 / 0.06);
    color: var(--ch06-ink);
}

.ch06-visual,
.ch06-visual * {
    box-sizing: border-box;
}

.ch06-visual :is(.ch06-visual-heading, .ch06-state-controls, .ch06-timeline, .ch06-visual-drawing, .ch06-state-summary) {
    min-width: 0;
}

.ch06-visual-kicker {
    margin: 0 0 0.24rem;
    color: var(--ch06-accent);
    font-size: 0.74rem;
    font-weight: 760;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ch06-visual-title {
    margin: 0;
    color: var(--ch06-ink);
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    font-weight: 730;
    letter-spacing: -0.016em;
    line-height: 1.25;
}

.ch06-state-controls {
    display: grid;
    grid-template-columns: repeat(var(--ch06-state-count), minmax(0, 1fr));
    gap: 0.42rem;
    margin: 0.82rem 0 0.66rem;
}

.ch06-visual :is(.ch06-state-button, .ch06-timeline-button) {
    min-width: 0;
    min-height: 2.32rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--ch06-line) 58%, transparent);
    border-radius: 0.7rem;
    background: rgb(255 255 255 / 0.9);
    color: var(--ch06-ink);
    cursor: pointer;
    font: inherit;
    font-size: clamp(0.74rem, 1.45vw, 0.82rem);
    font-weight: 690;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.ch06-visual :is(.ch06-state-button, .ch06-timeline-button):is(:hover, :focus-visible) {
    border-color: var(--ch06-accent);
    outline: 2px solid color-mix(in srgb, var(--ch06-accent) 24%, transparent);
    outline-offset: 1px;
}

.ch06-state-button[aria-pressed="true"] {
    border-color: var(--ch06-accent);
    background: var(--ch06-accent);
    box-shadow: 0 0.25rem 0.7rem rgb(10 118 111 / 0.18);
    color: #fff;
}

.ch06-timeline {
    display: grid;
    grid-template-columns: auto auto minmax(7rem, 1fr) minmax(7rem, auto);
    gap: 0.42rem;
    align-items: center;
    margin: 0 0 0.66rem;
}

.ch06-timeline-button {
    min-height: 2.2rem;
    padding-inline: 0.76rem;
}

.ch06-timeline-button[aria-pressed="true"] {
    border-color: var(--ch06-accent);
    background: var(--ch06-accent-soft);
}

.ch06-timeline-button:disabled {
    cursor: default;
    opacity: 0.55;
}

.ch06-timeline-scrub {
    width: 100%;
    min-width: 0;
    accent-color: var(--ch06-accent);
}

.ch06-timeline-phase {
    overflow: hidden;
    color: var(--ch06-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 680;
    line-height: 1.15;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch06-visual-drawing {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: clip;
    border-block: 1px solid color-mix(in srgb, var(--ch06-line) 21%, transparent);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(240 247 245 / 0.88));
}

.ch06-visual-drawing > svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.ch06-math-label,
.ch06-plain-label {
    position: absolute;
    z-index: 2;
    max-width: 42%;
    margin: 0;
    color: var(--ch06-ink);
    font-size: max(13px, 0.82rem);
    font-weight: 670;
    line-height: 1.14;
    pointer-events: none;
    text-align: center;
    text-shadow:
        -2px -2px 0 rgb(255 255 255 / 0.94),
        2px -2px 0 rgb(255 255 255 / 0.94),
        -2px 2px 0 rgb(255 255 255 / 0.94),
        2px 2px 0 rgb(255 255 255 / 0.94);
    transform: translate(-50%, -50%);
}

.ch06-math-label {
    position: absolute;
    max-width: none;
}

.ch06-math-label {
    white-space: nowrap;
}

.ch06-plain-label {
    color: #425c62;
    font-weight: 630;
}

.ch06-math-label[data-math-anchor="start"],
.ch06-plain-label[data-math-anchor="start"] {
    text-align: start;
    transform: translate(0, -50%);
}

.ch06-math-label[data-math-anchor="end"],
.ch06-plain-label[data-math-anchor="end"] {
    text-align: end;
    transform: translate(-100%, -50%);
}

.ch06-math-label[hidden],
.ch06-plain-label[hidden] {
    display: none !important;
}

.ch06-math-label.is-emphasis {
    color: var(--ch06-accent);
    font-size: max(13px, 0.9rem);
    font-weight: 760;
}

.ch06-math-label.is-primary {
    color: var(--ch06-tensile);
}

.ch06-math-label.is-secondary {
    color: var(--ch06-compressive);
}

.ch06-math-label .mjx-container {
    margin: 0 !important;
}

.ch06-state-summary {
    display: grid;
    grid-template-columns: minmax(8rem, 0.75fr) minmax(0, 1.55fr) minmax(7rem, 0.7fr);
    gap: 0.52rem 0.85rem;
    align-items: start;
    margin-top: 0.68rem;
    padding-top: 0.7rem;
    border-top: 1px solid color-mix(in srgb, var(--ch06-line) 22%, transparent);
}

.ch06-state-title,
.ch06-state-text,
.ch06-state-result {
    min-width: 0;
    margin: 0;
}

.ch06-state-title {
    color: var(--ch06-ink);
    font-size: 0.9rem;
    line-height: 1.35;
}

.ch06-state-text {
    color: var(--ch06-muted);
    font-size: 0.86rem;
    line-height: 1.48;
}

.ch06-state-result {
    color: var(--ch06-accent);
    font-size: 0.86rem;
    font-weight: 720;
    line-height: 1.35;
    text-align: end;
}

.ch06-state-result .mjx-container {
    margin: 0 !important;
}

.ch06-visual svg :is(
    line,
    path,
    rect,
    circle
) {
    vector-effect: non-scaling-stroke;
}

.ch06-axis {
    stroke: #536c72;
    stroke-width: 1.4;
}

.ch06-arrowhead {
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch06-arrowhead.is-axis {
    stroke: #536c72;
}

.ch06-arrowhead.is-tensile {
    stroke: var(--ch06-tensile);
}

.ch06-arrowhead.is-compressive {
    stroke: var(--ch06-compressive);
}

.ch06-arrowhead.is-load {
    stroke: var(--ch06-load);
}

.ch06-arrowhead.is-dimension {
    stroke: var(--ch06-dimension);
}

.ch06-arrowhead.is-trace {
    stroke: var(--ch06-trace);
}

.ch06-vector {
    fill: none;
    stroke-width: 2.25;
    stroke-linecap: round;
}

.ch06-vector.is-tensile {
    stroke: var(--ch06-tensile);
}

.ch06-vector.is-compressive {
    stroke: var(--ch06-compressive);
}

.ch06-vector.is-load {
    stroke: var(--ch06-load);
}

.ch06-vector.is-dimension {
    stroke: var(--ch06-dimension);
}

.ch06-vector.is-trace {
    stroke: var(--ch06-trace);
}

.ch06-dimension-line,
.ch06-dimension-tick {
    fill: none;
    stroke: var(--ch06-dimension);
    stroke-width: 1.25;
}

.ch06-reference-guide,
.ch06-construction,
.ch06-cut-leader {
    fill: none;
    stroke: var(--ch06-guide);
    stroke-width: 1.1;
    stroke-dasharray: 5 5;
}

.ch06-cut-leader {
    stroke-dasharray: 3 4;
}

.ch06-reference-outline {
    fill: none;
    stroke: #91a6aa;
    stroke-width: 1.15;
    stroke-dasharray: 6 5;
}

.ch06-specimen {
    fill: #d9ebe7;
    stroke: #3d7774;
    stroke-width: 1.7;
}

.ch06-beam {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
}

.ch06-beam.is-compressive {
    stroke: var(--ch06-compressive);
}

.ch06-beam.is-tensile {
    stroke: var(--ch06-tensile);
}

.ch06-support-fill {
    fill: #879ba0;
    stroke: #526a70;
    stroke-width: 1.2;
}

.ch06-rigid-support {
    stroke: #51696f;
    stroke-width: 3;
    stroke-linecap: round;
}

.ch06-spring {
    fill: none;
    stroke: var(--ch06-tensile);
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch06-spring.is-secondary {
    stroke: var(--ch06-compressive);
}

.ch06-clamp {
    fill: #657b80;
    stroke: #40595f;
    stroke-width: 1.25;
}

.ch06-hanger {
    fill: #d9e3e4;
    stroke: #536c72;
    stroke-width: 1.45;
}

.ch06-pointer,
.ch06-fiducial {
    stroke: #2e6870;
    stroke-width: 2;
    stroke-linecap: round;
}

.ch06-ruler {
    stroke: #62797e;
    stroke-width: 1.5;
}

.ch06-ruler-tick {
    stroke: #7e9296;
    stroke-width: 1.05;
}

.ch06-wire-line {
    fill: none;
    stroke: #2f6d72;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch06-pulley {
    fill: #edf3f2;
    stroke: #5d7479;
    stroke-width: 1.55;
}

.ch06-microscope-arm {
    fill: none;
    stroke: #6a7f84;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ch06-micrometer-frame {
    fill: rgb(224 234 234 / 0.5);
    stroke: #62797e;
    stroke-width: 1.65;
    stroke-linejoin: round;
}

.ch06-diameter-line {
    stroke: var(--ch06-dimension);
    stroke-width: 1.4;
}

.ch06-diameter-sample {
    fill: #f7fbfa;
    stroke: var(--ch06-tensile);
    stroke-width: 1.45;
}

.ch06-wire-cross {
    fill: var(--ch06-tensile);
    stroke: none;
}

.ch06-plot {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.35;
}

.ch06-plot.is-primary,
.ch06-plot.is-loading {
    stroke: var(--ch06-tensile);
}

.ch06-plot.is-secondary {
    stroke: var(--ch06-compressive);
}

.ch06-plot.is-secondary.is-coincident {
    stroke-dasharray: 8 6;
    stroke-width: 1.75;
}

.ch06-plot.is-unloading {
    stroke: var(--ch06-compressive);
    stroke-dasharray: 8 5;
}

.ch06-gradient {
    fill: none;
    stroke: var(--ch06-dimension);
    stroke-width: 1.35;
    stroke-dasharray: 6 4;
}

.ch06-limit-envelope {
    fill: none;
    stroke: var(--ch06-guide);
    stroke-width: 1.15;
    stroke-dasharray: 4 5;
}

.ch06-energy-area {
    fill: rgb(10 118 111 / 0.2);
    stroke: none;
}

.ch06-energy-reference {
    fill: rgb(196 105 36 / 0.16);
    stroke: var(--ch06-compressive);
    stroke-width: 1.05;
    stroke-dasharray: 4 4;
}

.ch06-area-strip {
    fill: rgb(10 118 111 / 0.14);
    stroke: rgb(10 118 111 / 0.6);
    stroke-width: 0.85;
}

.ch06-data-point,
.ch06-semantic-point,
.ch06-connector-point {
    stroke: none;
}

.ch06-data-point {
    fill: var(--ch06-tensile);
}

.ch06-data-point.is-reference {
    fill: var(--ch06-compressive);
}

.ch06-data-point:is(.is-limit, .is-elastic-limit) {
    fill: var(--ch06-compressive);
}

.ch06-data-point.is-current {
    fill: var(--ch06-trace);
}

.ch06-semantic-point {
    fill: var(--ch06-load);
}

.ch06-connector-point {
    fill: #536c72;
}

.ch06-trace-arrow {
    stroke-width: 2.4;
}

.ch06-cut-face {
    fill: #edf7f5;
    stroke: #3d7774;
    stroke-width: 1.65;
}

@media (max-width: 580px) {
    .ch06-visual {
        padding: 0.78rem;
        border-radius: 0.95rem;
    }

    .ch06-state-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.36rem;
    }

    .ch06-visual :is(.ch06-state-button, .ch06-timeline-button) {
        min-height: 2.26rem;
        padding-inline: 0.48rem;
        font-size: 0.76rem;
    }

    .ch06-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .ch06-timeline-scrub,
    .ch06-timeline-phase {
        grid-column: 1 / -1;
    }

    .ch06-timeline-phase {
        min-height: 1.05rem;
        text-align: center;
    }

    .ch06-math-label,
    .ch06-plain-label,
    .ch06-math-label.is-emphasis {
        max-width: 44%;
        font-size: 13px;
    }

    .ch06-state-summary {
        grid-template-columns: 1fr;
        gap: 0.28rem;
    }

    .ch06-state-result {
        text-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ch06-visual *,
    .ch06-visual *::before,
    .ch06-visual *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}