.cloning-mechanism {
    --cm-cycle: 10s;
    --cm-ease: cubic-bezier(0.2, 0, 0, 1);
    background:
        radial-gradient(circle at 50% 46%, rgba(116, 101, 232, 0.09), transparent 39%),
        linear-gradient(145deg, #fff 0%, #faf9ff 100%);
}

.cloning-mechanism .rm-heading strong { color: #6658d3; }

.cm-stage {
    position: relative;
    min-height: 22rem;
    overflow: hidden;
}

.cm-enzyme {
    position: absolute;
    z-index: 8;
    display: grid;
    width: 4.5rem;
    height: 5.1rem;
    place-items: center;
    border-radius: 48% 52% 36% 64%;
    background: #7465e8;
    box-shadow: 0 0.75rem 1.45rem rgba(82, 67, 190, 0.16), 0 0 0 0.5rem rgba(116, 101, 232, 0.07);
    color: #fff;
}

.cm-enzyme span {
    max-width: 3.7rem;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1.05;
    text-align: center;
}

.cm-ligation-stage {
    display: grid;
    padding: 0.25rem 1rem;
    grid-template-rows: repeat(2, minmax(9.5rem, 1fr));
    place-items: stretch;
}

.cm-end-legend {
    position: absolute;
    z-index: 12;
    top: 0.62rem;
    right: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: rgba(21, 25, 43, 0.7);
    font-size: 0.66rem;
    font-weight: 750;
}

.cm-end-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }

.cm-end-legend b {
    position: relative;
    display: inline-block;
    width: 0.95rem;
    min-width: 0.95rem;
    height: 0.95rem;
}

.cm-end-legend .cm-legend-p,
.cm-end-p {
    border: 2px solid #d1007f;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
}

.cm-end-legend .cm-legend-oh,
.cm-end-oh {
    border: 0;
    border-radius: 0;
    background: #6658d3;
    clip-path: polygon(50% 3%, 97% 94%, 3% 94%);
}

.cm-end-legend .cm-legend-oh::after,
.cm-end-oh::after {
    position: absolute;
    inset: 2px;
    background: rgba(255, 255, 255, 0.96);
    clip-path: polygon(50% 3%, 97% 94%, 3% 94%);
    content: '';
}

.cm-ligation-track {
    position: relative;
    min-width: 0;
}

.cm-ligation-track + .cm-ligation-track { border-top: 1px solid rgba(21, 25, 43, 0.1); }

.cm-track-label,
.cm-track-result,
.cm-pcr-product-label,
.cm-kld-result {
    position: absolute;
    z-index: 10;
    color: var(--brand-dark);
    font-size: 0.86rem;
    font-weight: 850;
}

.cm-track-label { top: 0.8rem; left: 1%; color: #6658d3; }
.cm-track-result { right: 1%; bottom: 0.8rem; opacity: 0; animation: cm-result-appear var(--cm-cycle) ease-in-out infinite; }
.cm-blunt-track .cm-track-result { animation-delay: -1.2s; }

.cm-dna-piece {
    --cm-end-gap: 0.275rem;
    position: absolute;
    z-index: 4;
    top: 52%;
    width: 32%;
    height: 3.2rem;
    transform: translateY(-50%);
}

.cm-dna-left { left: 12%; animation: cm-ligation-left var(--cm-cycle) var(--cm-ease) infinite; }
.cm-dna-right { right: 12%; animation: cm-ligation-right var(--cm-cycle) var(--cm-ease) infinite; }
.cm-sticky-track .cm-dna-left { animation-name: cm-sticky-left; }
.cm-sticky-track .cm-dna-right { animation-name: cm-sticky-right; }
.cm-blunt-track .cm-dna-piece { animation-delay: -1.2s; }

.cm-dna-piece i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.32rem;
    border-radius: 1rem;
    background: #7465e8;
}

.cm-dna-piece i:first-of-type { top: 0.85rem; }
.cm-dna-piece i:last-of-type { bottom: 0.85rem; }
.cm-sticky-track .cm-dna-left i:first-of-type { width: 100%; }
.cm-sticky-track .cm-dna-left i:last-of-type { width: 86%; }
.cm-sticky-track .cm-dna-right i:first-of-type { right: 0; left: auto; width: 86%; }
.cm-sticky-track .cm-dna-right i:last-of-type { right: 0; left: auto; width: 100%; }

.cm-dna-piece b {
    position: absolute;
    width: 2px;
    height: 2rem;
    background: rgba(21, 25, 43, 0.2);
}

.cm-dna-piece b:first-of-type { top: 0.7rem; left: 28%; }
.cm-dna-piece b:last-of-type { top: 0.7rem; right: 28%; }

.cm-end-label {
    position: absolute;
    z-index: 6;
    display: grid;
    width: 0.95rem;
    min-width: 0.95rem;
    min-height: 0.95rem;
    place-items: center;
    padding: 0;
    box-shadow: 0 0.2rem 0.45rem rgba(21, 25, 43, 0.08);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    animation: cm-end-labels var(--cm-cycle) ease-in-out infinite;
}

.cm-dna-left .cm-end-oh { top: 0.52rem; right: auto; left: 100%; transform: translateX(var(--cm-end-gap)); }
.cm-dna-left .cm-end-p { right: auto; bottom: 0.52rem; left: 100%; transform: translateX(var(--cm-end-gap)); }
.cm-dna-right .cm-end-p { top: 0.52rem; right: 100%; left: auto; transform: translateX(calc(-1 * var(--cm-end-gap))); }
.cm-dna-right .cm-end-oh { right: 100%; bottom: 0.52rem; left: auto; transform: translateX(calc(-1 * var(--cm-end-gap))); }
.cm-sticky-track .cm-dna-left .cm-end-p { left: 86%; transform: translateX(var(--cm-end-gap)); }
.cm-sticky-track .cm-dna-right .cm-end-p { right: 86%; transform: translateX(calc(-1 * var(--cm-end-gap))); }

.cm-cohesive-pairs {
    position: absolute;
    z-index: 3;
    top: calc(52% - 0.75rem);
    left: 45.5%;
    display: flex;
    width: 9%;
    height: 1.5rem;
    justify-content: space-around;
    opacity: 0;
    animation: cm-cohesive-pairs var(--cm-cycle) ease-in-out infinite;
}

.cm-cohesive-pairs i { width: 2px; height: 100%; background: rgba(21, 25, 43, 0.24); }
.cm-blunt-track .cm-cohesive-pairs { display: none; }

.cm-ligase {
    top: 0;
    left: 50%;
    background: #ec008c;
    box-shadow: 0 0.75rem 1.45rem rgba(236, 0, 140, 0.14), 0 0 0 0.5rem rgba(236, 0, 140, 0.06);
    opacity: 0.5;
    transform: translate(-50%, -1rem) scale(0.72);
    animation: cm-ligase-work var(--cm-cycle) var(--cm-ease) infinite;
}

.cm-blunt-track .cm-ligase { animation-delay: -1.2s; }
.cm-blunt-track .cm-end-label { animation-delay: -1.2s; }

.cm-join-flash {
    position: absolute;
    z-index: 7;
    top: 52%;
    left: 50%;
    width: 3rem;
    aspect-ratio: 1;
    border: 2px solid #ec008c;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
    animation: cm-join-flash var(--cm-cycle) ease-out infinite;
}

.cm-blunt-track .cm-join-flash { animation-delay: -1.2s; }

.cm-pcr-stage { --cm-cycle: 10s; }

.cm-pcr-dna {
    position: absolute;
    z-index: 4;
    top: 24%;
    left: 8%;
    width: 84%;
    height: 52%;
    overflow: visible;
}

.cm-pcr-dna path {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.cm-pcr-template {
    stroke: #7465e8;
    stroke-width: 8;
}

.cm-template-top { animation: cm-template-top var(--cm-cycle) var(--cm-ease) infinite; }
.cm-template-bottom { animation: cm-template-bottom var(--cm-cycle) var(--cm-ease) infinite; }

.cm-pcr-dna .cm-primer {
    stroke: #ec008c;
    stroke-width: 11;
    opacity: 0;
    animation: cm-primer-appear var(--cm-cycle) ease-in-out infinite;
}

.cm-pcr-dna .cm-new-strand {
    stroke: #ec008c;
    stroke-width: 8;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.cm-new-strand-top { animation: cm-new-strand-top var(--cm-cycle) linear infinite; }
.cm-new-strand-bottom { animation: cm-new-strand-bottom var(--cm-cycle) linear infinite; }

.cm-polymerase {
    width: 4.2rem;
    height: 4.8rem;
    background: #ec008c;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
}

.cm-polymerase-left { top: 39%; left: 27%; animation: cm-polymerase-left var(--cm-cycle) linear infinite; }
.cm-polymerase-right { top: 61%; left: 73%; animation: cm-polymerase-right var(--cm-cycle) linear infinite; }

.cm-pcr-products {
    position: absolute;
    z-index: 5;
    top: 35%;
    right: 10%;
    left: 10%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9%;
    opacity: 0;
    animation: cm-pcr-products var(--cm-cycle) var(--cm-ease) infinite;
}

.cm-pcr-products div { position: relative; height: 4rem; }
.cm-pcr-products i { position: absolute; right: 0; left: 0; height: 0.34rem; border-radius: 1rem; }
.cm-pcr-products i:first-child { top: 1rem; }
.cm-pcr-products i:last-child { bottom: 1rem; }
.cm-pcr-products .cm-parental-strand { background: repeating-linear-gradient(90deg, #7465e8 0 8%, #8c80ee 8% 9.5%); }
.cm-pcr-products .cm-daughter-strand { background: repeating-linear-gradient(90deg, #ec008c 0 8%, #f044aa 8% 9.5%); }
.cm-pcr-product-label { right: 10%; bottom: 11%; left: 10%; opacity: 0; text-align: center; animation: cm-pcr-label var(--cm-cycle) ease-in-out infinite; }

.cm-proofreading {
    position: absolute;
    z-index: 9;
    top: 1%;
    left: 50%;
    width: min(26rem, 84%);
    height: 5.4rem;
    color: rgba(21, 25, 43, 0.7);
    opacity: 0;
    transform: translateX(-50%);
    animation: cm-proofreading-appear var(--cm-cycle) ease-in-out infinite;
}

.cm-proofreading > strong {
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 0.9rem;
    font-weight: 850;
    white-space: nowrap;
    transform: translateX(-50%);
}

.cm-proofread-status {
    position: absolute;
    top: 1.15rem;
    right: 0;
    left: 0;
    color: rgba(21, 25, 43, 0.72);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.cm-proofread-status b { color: #b33b3b; }
.cm-proofread-status em { color: #23745a; font-style: normal; font-weight: 850; }

.cm-proofread-template,
.cm-proofread-new {
    position: absolute;
    left: 12%;
    height: 0.24rem;
    border-radius: 1rem;
}

.cm-proofread-template { top: 2.9rem; width: 76%; background: #7465e8; }
.cm-proofread-new { top: 3.65rem; width: 54%; background: #ec008c; }

.cm-proofread-mismatch,
.cm-proofread-correct {
    position: absolute;
    z-index: 2;
    top: 3.65rem;
    left: 66%;
    width: 0.58rem;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.cm-proofread-mismatch {
    background: #e45353;
    border-radius: 0.12rem;
    box-shadow: 0 0 0 0.24rem rgba(228, 83, 83, 0.12);
    rotate: 18deg;
    animation: cm-proofread-mismatch var(--cm-cycle) ease-in-out infinite;
}

.cm-proofread-correct {
    background: #ec008c;
    animation: cm-proofread-correct var(--cm-cycle) ease-in-out infinite;
}

.cm-proofread-direction {
    position: absolute;
    top: 4.25rem;
    left: 30%;
    color: rgba(21, 25, 43, 0.68);
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.cm-proofread-enzyme {
    position: absolute;
    z-index: 3;
    top: 3.65rem;
    left: 69%;
    display: grid;
    width: 2.9rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 48% 52% 38% 62%;
    background: #ec008c;
    box-shadow: 0 0 0 0.32rem rgba(236, 0, 140, 0.08);
    color: #fff;
    font-size: 0.52rem;
    font-weight: 850;
    transform: translate(-50%, -50%);
}

.cm-kld-stage {
    --cm-cycle: 18s;
    --cm-kld-label-linear-top: 61%;
    --cm-kld-label-mid-top: 25%;
    --cm-kld-label-final-top: 9%;
    position: relative;
}

.cm-kld-parent-label,
.cm-kld-product-label,
.cm-kld-pcr-badge,
.cm-kld-result {
    position: absolute;
    z-index: 10;
    color: var(--brand-dark);
    font-size: 0.82rem;
    font-weight: 850;
    text-align: center;
}

.cm-kld-parent-label {
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
    animation: cm-kld-parent-label var(--cm-cycle) var(--cm-ease) infinite;
}

.cm-kld-pcr-badge {
    top: 16%;
    left: 50%;
    padding: 0.26rem 0.55rem;
    border-radius: 0.5rem;
    background: rgba(116, 101, 232, 0.1);
    color: #6658d3;
    letter-spacing: 0.06em;
    opacity: 0;
    animation: cm-kld-pcr-badge var(--cm-cycle) ease-in-out infinite;
}

.cm-kld-product-label {
    top: 9%;
    left: 28%;
    width: 22%;
    opacity: 0;
    text-align: right;
    animation: cm-kld-product-label var(--cm-cycle) ease-in-out infinite;
}

.cm-kld-product-label::after,
.cm-kld-result::after {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 76%;
    width: 2.6rem;
    height: 1px;
    background: rgba(21, 25, 43, 0.24);
    content: '';
    rotate: 38deg;
    transform-origin: left center;
}

.cm-kld-product {
    position: absolute;
    z-index: 4;
    top: 8%;
    left: 50%;
    width: min(52%, 23rem);
    overflow: visible;
    transform: translateX(-50%);
}

.cm-kld-substrate {
    fill: none;
    stroke: #ec008c;
    stroke-width: 11;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    animation: cm-kld-workflow-path var(--cm-cycle) var(--cm-ease) infinite;
}

.cm-kld-primer-end {
    fill: #7465e8;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: cm-kld-primer-ends var(--cm-cycle) ease-in-out infinite;
}

.cm-phosphate {
    fill: #fff;
    stroke: #7465e8;
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.cm-phosphate-left { animation: cm-kld-phosphate-left var(--cm-cycle) var(--cm-ease) infinite; }
.cm-phosphate-right { animation: cm-kld-phosphate-right var(--cm-cycle) var(--cm-ease) infinite; }

.cm-kld-pcr-copies {
    position: absolute;
    z-index: 3;
    top: 43%;
    right: 24%;
    left: 24%;
    height: 4.4rem;
    opacity: 0;
    animation: cm-kld-pcr-copies var(--cm-cycle) var(--cm-ease) infinite;
}

.cm-kld-pcr-copies i {
    position: absolute;
    right: 0;
    left: 0;
    height: 0.28rem;
    border-radius: 1rem;
    background: #ec008c;
    transform-origin: center;
}

.cm-kld-pcr-copies i:nth-child(1) { top: 0; }
.cm-kld-pcr-copies i:nth-child(2) { top: 1.5rem; }
.cm-kld-pcr-copies i:nth-child(3) { top: 3rem; }

.cm-kinase,
.cm-kld-ligase,
.cm-dpni { top: 22%; opacity: 0; transform: scale(0.72); }
.cm-kinase { left: 28%; animation: cm-kinase-work var(--cm-cycle) var(--cm-ease) infinite; }
.cm-kld-ligase { right: 16%; background: #ec008c; animation: cm-kld-ligase-work var(--cm-cycle) var(--cm-ease) infinite; }
.cm-kld-result { top: 9%; left: 28%; width: 22%; opacity: 0; text-align: right; animation: cm-kld-result var(--cm-cycle) ease-in-out infinite; }

.cm-parent-plasmid {
    position: absolute;
    z-index: 4;
    top: 48%;
    left: 50%;
    width: 8.6rem;
    aspect-ratio: 1;
    border: 0.72rem solid #7465e8;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: cm-parent-digest var(--cm-cycle) var(--cm-ease) infinite;
}

.cm-methyl { position: absolute; z-index: 5; padding: 0.12rem 0.28rem; border-radius: 0.3rem; background: #ec008c; color: #fff; font-size: 0.56rem; font-style: normal; font-weight: 850; }
.cm-methyl-a { top: -1.1rem; left: 1rem; }
.cm-methyl-b { right: -1rem; bottom: 0.75rem; }
.cm-dpni { left: 17%; background: var(--brand-dark); animation: cm-dpni-work var(--cm-cycle) var(--cm-ease) infinite; }

.cm-parent-fragments { position: absolute; z-index: 4; top: 15%; left: 5%; width: 24%; height: 35%; opacity: 0; animation: cm-parent-fragments var(--cm-cycle) var(--cm-ease) infinite; }
.cm-parent-fragments i { position: absolute; width: 2.4rem; height: 0.46rem; border-radius: 1rem; background: #7465e8; }
.cm-parent-fragments i:nth-child(1) { top: 15%; left: 16%; rotate: -20deg; }
.cm-parent-fragments i:nth-child(2) { top: 22%; right: 12%; rotate: 24deg; }
.cm-parent-fragments i:nth-child(3) { bottom: 18%; left: 20%; rotate: 18deg; }
.cm-parent-fragments i:nth-child(4) { right: 18%; bottom: 12%; rotate: -25deg; }

@keyframes cm-ligation-left { 0%, 22% { transform: translate(0, -50%); } 48%, 84% { transform: translate(19%, -50%); } 100% { opacity: 0; transform: translate(19%, -50%); } }
@keyframes cm-ligation-right { 0%, 22% { transform: translate(0, -50%); } 48%, 84% { transform: translate(-19%, -50%); } 100% { opacity: 0; transform: translate(-19%, -50%); } }
@keyframes cm-sticky-left { 0%, 22% { transform: translate(0, -50%); } 48%, 84% { transform: translate(25.75%, -50%); } 100% { opacity: 0; transform: translate(25.75%, -50%); } }
@keyframes cm-sticky-right { 0%, 22% { transform: translate(0, -50%); } 48%, 84% { transform: translate(-25.75%, -50%); } 100% { opacity: 0; transform: translate(-25.75%, -50%); } }
@keyframes cm-cohesive-pairs { 0%, 39% { opacity: 0; transform: scaleY(0.4); } 48%, 84% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes cm-end-labels { 0%, 38% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes cm-ligase-work { 0%, 18% { top: 0; opacity: 0.45; transform: translate(-50%, -1rem) scale(0.72); } 42%, 60% { top: 33%; opacity: 1; transform: translate(-50%, -50%) scale(1); } 76%, 100% { top: 0; opacity: 0; transform: translate(-50%, -1rem) scale(0.58); } }
@keyframes cm-join-flash { 0%, 47% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); } 55% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); } 67%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); } }
@keyframes cm-result-appear { 0%, 57%, 100% { opacity: 0; translate: 0 0.25rem; } 67%, 88% { opacity: 1; translate: 0 0; } }

@keyframes cm-template-top { 0%, 16% { opacity: 1; transform: translateY(0); } 30%, 70% { opacity: 1; transform: translateY(-10px); } 80%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes cm-template-bottom { 0%, 16% { opacity: 1; transform: translateY(0); } 30%, 70% { opacity: 1; transform: translateY(10px); } 80%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes cm-primer-appear { 0%, 25% { opacity: 0; } 32%, 72% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes cm-polymerase-left { 0%, 38% { top: 39%; left: 27%; opacity: 0; transform: translate(-50%, -50%) scale(0.7); } 39% { top: 39%; left: 27%; opacity: 1; transform: translate(-50%, -50%) scale(0.88); } 68% { top: 39%; left: 84%; opacity: 1; transform: translate(-50%, -50%) scale(1); } 78%, 100% { top: 39%; left: 84%; opacity: 0; transform: translate(-50%, -50%) scale(0.62); } }
@keyframes cm-polymerase-right { 0%, 38% { top: 61%; left: 73%; opacity: 0; transform: translate(-50%, -50%) scale(0.7); } 39% { top: 61%; left: 73%; opacity: 1; transform: translate(-50%, -50%) scale(0.88); } 68% { top: 61%; left: 16%; opacity: 1; transform: translate(-50%, -50%) scale(1); } 78%, 100% { top: 61%; left: 16%; opacity: 0; transform: translate(-50%, -50%) scale(0.62); } }
@keyframes cm-new-strand-top { 0%, 34% { opacity: 0; stroke-dashoffset: 1; } 39% { opacity: 1; stroke-dashoffset: 1; } 50% { opacity: 1; stroke-dashoffset: 0.7; } 60% { opacity: 1; stroke-dashoffset: 0.35; } 68% { opacity: 1; stroke-dashoffset: 0; } 78%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes cm-new-strand-bottom { 0%, 34% { opacity: 0; stroke-dashoffset: 1; } 39% { opacity: 1; stroke-dashoffset: 1; } 50% { opacity: 1; stroke-dashoffset: 0.7; } 60% { opacity: 1; stroke-dashoffset: 0.35; } 68% { opacity: 1; stroke-dashoffset: 0; } 78%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes cm-pcr-products { 0%, 68% { opacity: 0; transform: scale(0.78); } 78%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }
@keyframes cm-pcr-label { 0%, 73%, 100% { opacity: 0; translate: 0 0.25rem; } 82%, 94% { opacity: 1; translate: 0 0; } }
@keyframes cm-proofreading-appear { 0%, 43%, 72%, 100% { opacity: 0; translate: 0 -0.2rem; } 47%, 68% { opacity: 1; translate: 0 0; } }
@keyframes cm-proofread-mismatch { 0%, 46%, 100% { opacity: 0; translate: 0 0; } 49%, 54% { opacity: 1; translate: 0 0; } 58%, 100% { opacity: 0; translate: -1rem 0.75rem; } }
@keyframes cm-proofread-correct { 0%, 55%, 100% { opacity: 0; scale: 0.45; } 59%, 68% { opacity: 1; scale: 1; } 72%, 100% { opacity: 0; scale: 1; } }

@keyframes cm-kld-parent-label {
    0%, 18% { top: 7%; left: 50%; opacity: 1; transform: translateX(-50%) scale(1); }
    30%, 48% { top: 3%; left: 5%; opacity: 1; transform: translateX(0) scale(0.86); }
    58%, 100% { top: 3%; left: 5%; opacity: 0; transform: translateX(0) scale(0.86); }
}
@keyframes cm-kld-pcr-badge { 0%, 9%, 38%, 100% { opacity: 0; transform: translate(-50%, 0.4rem) scale(0.8); } 15%, 30% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes cm-kld-pcr-copies { 0%, 10%, 38%, 100% { opacity: 0; transform: scaleX(0.25); } 18%, 31% { opacity: 0.55; transform: scaleX(1); } }
@keyframes cm-kld-product-label {
    0%, 20% { top: var(--cm-kld-label-linear-top); opacity: 0; translate: 0 0.3rem; }
    28%, 48% { top: var(--cm-kld-label-linear-top); opacity: 1; translate: 0 0; }
    58% { top: var(--cm-kld-label-mid-top); opacity: 1; translate: 0 0; }
    72%, 75% { top: var(--cm-kld-label-final-top); opacity: 1; translate: 0 0; }
    80%, 100% { top: var(--cm-kld-label-final-top); opacity: 0; translate: 0 0.3rem; }
}
@keyframes cm-kld-primer-ends { 0%, 13%, 40%, 100% { opacity: 0; scale: 0.55 1; } 20%, 34% { opacity: 1; scale: 1 1; } }
@keyframes cm-kld-workflow-path {
    0%, 18% { d: path('M35 120 C50 120 65 120 80 120 C88 120 94 120 100 120 C106 120 112 120 120 120 C135 120 150 120 165 120'); opacity: 0; }
    26%, 48% { d: path('M35 120 C50 120 65 120 80 120 C88 120 94 120 100 120 C106 120 112 120 120 120 C135 120 150 120 165 120'); opacity: 1; }
    58% { d: path('M50 130 C52 100 65 70 82 58 C89 53 95 52 100 52 C105 52 111 53 118 58 C135 70 148 100 150 130'); opacity: 1; }
    72% { d: path('M90 150 C58 145 42 120 42 86 C42 56 65 32 100 32 C135 32 158 56 158 86 C158 120 142 145 110 150'); opacity: 1; }
    80%, 96% { d: path('M100 150 C68 150 42 124 42 91 C42 58 68 32 100 32 C132 32 158 58 158 91 C158 124 132 150 100 150'); opacity: 1; }
    100% { d: path('M35 120 C50 120 65 120 80 120 C88 120 94 120 100 120 C106 120 112 120 120 120 C135 120 150 120 165 120'); opacity: 0; }
}
@keyframes cm-kld-phosphate-left {
    0%, 39% { cx: 35px; cy: 120px; opacity: 0; scale: 0.3; }
    46%, 48% { cx: 35px; cy: 120px; opacity: 1; scale: 1; }
    58% { cx: 50px; cy: 130px; opacity: 1; scale: 1; }
    72% { cx: 90px; cy: 150px; opacity: 1; scale: 1; }
    80%, 83% { cx: 100px; cy: 150px; opacity: 1; scale: 1; }
    88%, 100% { cx: 100px; cy: 150px; opacity: 0; scale: 0.35; }
}
@keyframes cm-kld-phosphate-right {
    0%, 39% { cx: 165px; cy: 120px; opacity: 0; scale: 0.3; }
    46%, 48% { cx: 165px; cy: 120px; opacity: 1; scale: 1; }
    58% { cx: 150px; cy: 130px; opacity: 1; scale: 1; }
    72% { cx: 110px; cy: 150px; opacity: 1; scale: 1; }
    80%, 83% { cx: 100px; cy: 150px; opacity: 1; scale: 1; }
    88%, 100% { cx: 100px; cy: 150px; opacity: 0; scale: 0.35; }
}
@keyframes cm-kinase-work {
    0%, 34% { top: 15%; left: 28%; opacity: 0; transform: scale(0.72); }
    40%, 44% { top: 50%; left: 34%; opacity: 1; transform: scale(0.92); }
    49%, 53% { top: 50%; left: 66%; opacity: 1; transform: scale(0.92); }
    60%, 100% { top: 14%; left: 72%; opacity: 0; transform: scale(0.6); }
}
@keyframes cm-kld-ligase-work {
    0%, 54% { top: 14%; right: 16%; opacity: 0; transform: scale(0.72); }
    62% { top: 35%; right: 24%; opacity: 1; transform: scale(0.88); }
    72%, 84% { top: 63%; right: 43%; opacity: 1; transform: scale(1); }
    92%, 100% { top: 13%; right: 18%; opacity: 0; transform: scale(0.65); }
}
@keyframes cm-kld-result { 0%, 81%, 100% { opacity: 0; translate: 0 0.25rem; } 85%, 96% { opacity: 1; translate: 0 0; } }
@keyframes cm-parent-digest {
    0%, 18% { top: 48%; left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    30%, 52% { top: 25%; left: 17%; opacity: 1; transform: translate(-50%, -50%) scale(0.56); }
    60%, 100% { top: 25%; left: 17%; opacity: 0; transform: translate(-50%, -50%) scale(0.56); }
}
@keyframes cm-dpni-work {
    0%, 38% { top: 2%; left: 4%; opacity: 0; transform: scale(0.68); }
    46%, 56% { top: 17%; left: 17%; opacity: 1; transform: scale(0.82); }
    65%, 100% { top: 3%; left: 26%; opacity: 0; transform: scale(0.58); }
}
@keyframes cm-parent-fragments { 0%, 52% { opacity: 0; transform: scale(0.7); } 62%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }

@media (max-width: 720px) {
    .cloning-mechanism { min-height: 500px; grid-template-rows: auto minmax(19rem, 1fr) auto auto; }
    .cm-stage { min-height: 19rem; }
    .cm-enzyme { width: 3.6rem; height: 4.2rem; }
    .cm-enzyme span { max-width: 3rem; font-size: 0.56rem; }
    .cm-ligation-stage {
        min-height: 23.5rem;
        padding: 3rem 0 0.25rem;
        grid-template-rows: repeat(2, minmax(8.5rem, 1fr));
    }
    .cm-end-legend {
        top: 0.55rem;
        right: auto;
        left: 50%;
        gap: 0.65rem;
        font-size: 0.61rem;
        white-space: nowrap;
        transform: translateX(-50%);
    }
    .cm-track-label,
    .cm-track-result,
    .cm-pcr-product-label,
    .cm-kld-result { font-size: 0.7rem; }
    .cm-dna-piece { width: 34%; }
    .cm-dna-left { left: 7%; }
    .cm-dna-right { right: 7%; }
    .cm-kld-stage {
        --cm-kld-label-linear-top: 31%;
        --cm-kld-label-mid-top: 18%;
        --cm-kld-label-final-top: 7%;
        min-height: 25rem;
    }
    .cloning-mechanism.is-kld-mutagenesis { min-height: 610px; grid-template-rows: auto minmax(25rem, 1fr) auto auto; }
    .cm-kld-parent-label,
    .cm-kld-product-label,
    .cm-kld-pcr-badge,
    .cm-kld-result { font-size: 0.68rem; }
    .cm-kld-product-label,
    .cm-kld-result { top: 7%; left: 28%; width: 62%; text-align: left; }
    .cm-kld-product-label::after,
    .cm-kld-result::after { top: calc(100% + 0.3rem); left: 55%; width: 2.6rem; rotate: 38deg; }
    .cm-kld-product { top: 15%; width: min(68%, 17rem); }
    .cm-proofreading { top: 0; width: 90%; }
    .cm-proofreading > strong { font-size: 0.72rem; }
    .cm-proofread-status { font-size: 0.53rem; }
    .cm-proofread-direction { left: 20%; font-size: 0.52rem; }
    .cm-proofread-enzyme { width: 2.35rem; height: 1.95rem; font-size: 0.44rem; }
    .cm-parent-plasmid { width: 6.5rem; border-width: 0.55rem; }
    .cm-parent-fragments { top: 16%; left: 1%; width: 31%; }
    .cm-kinase,
    .cm-kld-ligase,
    .cm-dpni { width: 3.2rem; height: 3.7rem; }

}

/* Captions remain clear of kinase, ligase and the amplicon throughout the cycle. */

.cm-kld-stage { --cm-kld-label-linear-top:35%; --cm-kld-label-mid-top:12%; }
.cm-kld-product-label,.cm-kld-result {left:42%;width:28%;font-size:16px;line-height:1.2;text-align:left;}
.cm-kld-product-label::after,.cm-kld-result::after {left:30%;}
.cm-kld-product-label::after {animation: pa-kld-pointer var(--cm-cycle) ease-in-out infinite;}
@keyframes pa-kld-pointer {0%,48% {width:6rem;rotate:60deg;} 58%,100% {width:2.6rem;rotate:38deg;}}
@media (max-width:720px) {.cm-kld-stage {--cm-kld-label-linear-top:23%;--cm-kld-label-mid-top:1%;}.cm-kld-product-label,.cm-kld-result{left:28%;width:68%;}.cm-kld-product-label::after,.cm-kld-result::after{left:55%;}.cm-kld-product-label::after{animation:none;}}

/* T4 ligase: actual strand endpoints and all end groups use SVG coordinates.
 * The loop holds its final product up to 100%; only a new loop returns to DNA
 * fragments. Neither a fragment nor the enzyme fades during that reset. */
.cloning-mechanism.is-dna-ligation { grid-template-rows: auto auto auto auto; }
.cm-ligation-stage.pa-ligation-stage {
    display: block;
    min-height: 0;
    padding: 0.5rem 0;
    overflow: visible;
}
.pa-ligation-legend.cm-end-legend {
    position: static;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 1rem;
    font-size: 14px;
    line-height: 1.3;
    transform: none;
}
.pa-ligation-track { min-width: 0; padding: 0.8rem 0; }
.pa-ligation-track + .pa-ligation-track { border-top: 1px solid rgba(21, 25, 43, 0.12); }
.pa-ligation-track-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; font-size: 16px; }
.pa-ligation-track-heading strong { color: #6658d3; font-weight: 700; }
.pa-ligation-result { color: #15192b; animation: pa-ligation-result 10s linear infinite; }
.pa-ligation-dna { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; overflow: visible; }
.pa-ligation-dna .pa-ligation-fragment { opacity: 1; }
.pa-ligation-left { animation: pa-ligation-left 10s ease-in-out infinite; }
.pa-ligation-right { animation: pa-ligation-right 10s ease-in-out infinite; }
.pa-ligation-backbone { fill: none; stroke: #7465e8; stroke-width: 6; stroke-linecap: round; opacity: 1; }
.pa-ligation-rungs { fill: none; stroke: #b9b2df; stroke-width: 2; opacity: 1; }
.pa-ligation-polarity { fill: #5e586c; font-size: 24px; text-anchor: middle; font-weight: 650; }
.pa-ligation-end { fill: #fff; stroke-width: 2.5; }
.pa-ligation-p { stroke: #d1007f; }
.pa-ligation-oh { stroke: #6658d3; stroke-linejoin: round; }
.pa-ligation-end-top { animation: pa-ligation-end-top 10s steps(1, end) infinite; }
.pa-ligation-end-bottom { animation: pa-ligation-end-bottom 10s steps(1, end) infinite; }
.pa-ligation-bases { fill: #5545bd; font-size: 23px; font-weight: 700; text-anchor: middle; }
.pa-ligation-pairs { fill: none; stroke: #6f647c; stroke-width: 2; stroke-linecap: round; animation: pa-ligation-pairs 10s steps(1, end) infinite; }
.pa-ligation-bond-top { animation: pa-ligation-bond-top 10s steps(1, end) infinite; }
.pa-ligation-bond-bottom { animation: pa-ligation-bond-bottom 10s steps(1, end) infinite; }
.pa-ligation-enzyme { opacity: 1; animation: pa-ligation-enzyme 10s ease-in-out infinite; }
.pa-ligation-enzyme > path { fill: #ec008c; }
.pa-ligation-enzyme > text { fill: #fff; text-anchor: middle; font-size: 24px; font-weight: 750; }
.pa-ligation-enzyme > .pa-ligation-enzyme-name { font-size: 19px; }
.pa-ligation-step { display: grid; min-height: 2.6em; color: #65606b; font-size: 14px; line-height: 1.3; text-align: center; }
.pa-ligation-step > span { grid-area: 1/1; }
.pa-ligation-step-align { animation: pa-ligation-align-caption 10s steps(1, end) infinite; }
.pa-ligation-step-seal { animation: pa-ligation-seal-caption 10s steps(1, end) infinite; }

@keyframes pa-ligation-left { 0%,16% { transform: translateX(-45px); } 32%,100% { transform: translateX(0); } }
@keyframes pa-ligation-right { 0%,16% { transform: translateX(45px); } 32%,100% { transform: translateX(0); } }
@keyframes pa-ligation-pairs { 0% { opacity: 0; } 32%,100% { opacity: 1; } }
@keyframes pa-ligation-end-top { 0% { opacity: 1; } 46%,100% { opacity: 0; } }
@keyframes pa-ligation-end-bottom { 0% { opacity: 1; } 60%,100% { opacity: 0; } }
@keyframes pa-ligation-bond-top { 0% { opacity: 0; } 46%,100% { opacity: 1; } }
@keyframes pa-ligation-bond-bottom { 0% { opacity: 0; } 60%,100% { opacity: 1; } }
@keyframes pa-ligation-enzyme {
    0%,32% { transform: translate(425px, 46px); }
    42%,48% { transform: translate(var(--ligation-top-x), 81px); }
    56%,62% { transform: translate(var(--ligation-bottom-x), 202px); }
    76%,100% { transform: translate(425px, 46px); }
}
@keyframes pa-ligation-result { 0%,60% { opacity: 0; } 64%,100% { opacity: 1; } }
@keyframes pa-ligation-align-caption { 0% { opacity: 1; } 34%,100% { opacity: 0; } }
@keyframes pa-ligation-seal-caption { 0% { opacity: 0; } 34%,100% { opacity: 1; } }

@media (max-width: 720px) {
    /* Shorter flanking duplexes give the mobile reaction more room, while the
     * same nick/overhang coordinates and polarity are preserved. */
    .pa-ligation-track { overflow: hidden; }
    .pa-ligation-dna { width: 150%; max-width: none; margin-left: -25%; }
    .pa-ligation-outer,
    .pa-ligation-left .pa-ligation-rungs path:nth-child(-n+3),
    .pa-ligation-right .pa-ligation-rungs path:nth-child(n+4) { display: none; }
    .pa-ligation-polarity-left { transform: translateX(100px); }
    .pa-ligation-polarity-right { transform: translateX(-100px); }
    .pa-ligation-enzyme > text { font-size: 30px; transform: translateY(14px); }
    .pa-ligation-enzyme > .pa-ligation-enzyme-name { display: none; }
}

/* DpnI enters and leaves on the free left edge, never through the PCR caption. */
.cm-kld-stage {
    container-type: inline-size;
    min-height: 25rem;
    --pa-kld-dna-size: min(52cqw, 23rem);
    --pa-kld-dna-top: 8%;
    --pa-kld-dpni-x: calc(17% - 2rem);
}
.cm-kld-stage .cm-kld-product { top: var(--pa-kld-dna-top); width: var(--pa-kld-dna-size); }
.cm-kld-stage .cm-kld-parent-label { width: max-content; max-width: 100%; font-size: 16px; line-height: 1.2; animation-name: pa-kld-parent-label; }
.cm-kld-stage .cm-kld-pcr-badge { top: 20%; font-size: 16px; animation-name: pa-kld-pcr-badge; }
.cm-kld-stage .cm-kld-product-label { animation-name: pa-kld-product-label; }
.cm-kld-stage .cm-enzyme span { max-width: none; font-size: 16px; }
.cm-kld-stage .cm-kinase { animation-name: pa-kld-kinase-work; }
.cm-kld-stage .cm-kld-ligase { right: auto; animation-name: pa-kld-ligase-work; }
.cm-kld-stage .cm-dpni { animation-name: pa-kld-dpni-work; }
.cm-kld-stage .cm-kld-substrate { animation-name: pa-kld-workflow-path; }
.cm-kld-stage .cm-phosphate-right { animation: pa-kld-phosphate-right var(--cm-cycle) var(--cm-ease) infinite, pa-kld-phosphate-right-visible var(--cm-cycle) ease-in-out infinite; }
.cm-kld-stage .cm-parent-fragments { animation-name: pa-kld-parent-fragments; }
.cm-kld-stage .cm-kld-result { animation-name: pa-kld-result; }
@keyframes pa-kld-kinase-work {
    0%,34% { top: 88%; left: 44%; opacity: 1; transform: translate(-50%, -50%) scale(0.85); }
    40%,44% { top: calc(var(--pa-kld-dna-top) + var(--pa-kld-dna-size) * .6 + 2rem); left: calc(50% - var(--pa-kld-dna-size) * .325); opacity: 1; transform: translate(-50%, -50%) scale(0.92); }
    48% { top: calc(var(--pa-kld-dna-top) + var(--pa-kld-dna-size) * .6 + 2rem); left: calc(50% + var(--pa-kld-dna-size) * .325); opacity: 1; transform: translate(-50%, -50%) scale(0.92); }
    58% { top: calc(var(--pa-kld-dna-top) + var(--pa-kld-dna-size) * .65 + 2rem); left: calc(50% + var(--pa-kld-dna-size) * .25); opacity: 1; transform: translate(-50%, -50%) scale(0.92); }
    64%,100% { top: 88%; left: 44%; opacity: 1; transform: translate(-50%, -50%) scale(0.85); }
}
@keyframes pa-kld-ligase-work {
    0%,64% { top: 88%; left: 83%; opacity: 1; transform: translate(-50%, -50%) scale(0.85); }
    67% { top: calc(var(--pa-kld-dna-top) + var(--pa-kld-dna-size) * .75 + 2rem); left: calc(50% + var(--pa-kld-dna-size) * .08); opacity: 1; transform: translate(-50%, -50%) scale(0.92); }
    72%,84% { top: calc(var(--pa-kld-dna-top) + var(--pa-kld-dna-size) * .75 + 2rem); left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    96%,100% { top: 88%; left: 83%; opacity: 1; transform: translate(-50%, -50%) scale(0.85); }
}
@keyframes pa-kld-dpni-work {
    0%,38% { top: 88%; left: 10%; opacity: 1; transform: translate(-50%, -50%) scale(0.85); }
    46%,56% { top: 25%; left: var(--pa-kld-dpni-x); opacity: 1; transform: translate(-50%, -50%) scale(0.82); }
    66%,100% { top: 88%; left: 10%; opacity: 1; transform: translate(-50%, -50%) scale(0.85); }
}
@keyframes pa-kld-workflow-path {
    0%,18% { d: path('M35 120 C50 120 65 120 80 120 C88 120 94 120 100 120 C106 120 112 120 120 120 C135 120 150 120 165 120'); opacity: 0; }
    26%,48% { d: path('M35 120 C50 120 65 120 80 120 C88 120 94 120 100 120 C106 120 112 120 120 120 C135 120 150 120 165 120'); opacity: 1; }
    58% { d: path('M50 130 C52 100 65 70 82 58 C89 53 95 52 100 52 C105 52 111 53 118 58 C135 70 148 100 150 130'); opacity: 1; }
    72% { d: path('M90 150 C58 145 42 120 42 86 C42 56 65 32 100 32 C135 32 158 56 158 86 C158 120 142 145 110 150'); opacity: 1; }
    80%,100% { d: path('M100 150 C68 150 42 124 42 91 C42 58 68 32 100 32 C132 32 158 58 158 91 C158 124 132 150 100 150'); opacity: 1; }
}
@keyframes pa-kld-phosphate-right {
    0%,48% { cx: 165px; cy: 120px; }
    58% { cx: 150px; cy: 130px; }
    72% { cx: 110px; cy: 150px; }
    80%,100% { cx: 100px; cy: 150px; }
}
@keyframes pa-kld-phosphate-right-visible { 0%,48% { opacity: 0; scale: 0.3; } 53%,83% { opacity: 1; scale: 1; } 88%,100% { opacity: 0; scale: 0.35; } }
@keyframes pa-kld-parent-fragments { 0%,52% { opacity: 0; transform: scale(0.7); } 62%,100% { opacity: 1; transform: scale(1); } }
@keyframes pa-kld-result { 0%,81% { opacity: 0; translate: 0 0.25rem; } 85%,100% { opacity: 1; translate: 0 0; } }
@keyframes pa-kld-pcr-badge { 0%,9%,20%,100% { opacity: 0; transform: translate(-50%, .4rem) scale(.8); } 15%,18% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes pa-kld-parent-label {
    0%,18% { top: 7%; left: 50%; opacity: 1; transform: translateX(-50%) scale(1); }
    30%,48% { top: 3%; left: 5%; opacity: 1; transform: translateX(0) scale(.86); }
    52%,100% { top: 3%; left: 5%; opacity: 0; transform: translateX(0) scale(.86); }
}
@keyframes pa-kld-product-label {
    0%,26% { top: var(--cm-kld-label-linear-top); opacity: 0; translate: 0 .3rem; }
    28%,48% { top: var(--cm-kld-label-linear-top); opacity: 1; translate: 0 0; }
    58% { top: var(--cm-kld-label-mid-top); opacity: 1; translate: 0 0; }
    72%,75% { top: var(--cm-kld-label-final-top); opacity: 1; translate: 0 0; }
    80%,100% { top: var(--cm-kld-label-final-top); opacity: 0; translate: 0 .3rem; }
}
@media (max-width:720px) {
    .cm-kld-stage { --pa-kld-dna-size: 68cqw; --pa-kld-dna-top: 15%; --pa-kld-dpni-x: calc(17% - .5rem); }
    .cm-kld-stage .cm-kld-product-label,
    .cm-kld-stage .cm-kld-result { left: 31%; width: 65%; }
}