.electrophoresis-mechanism,
.em-preview {
    --em-cycle: 12s;
    --em-ease: cubic-bezier(0.2, 0, 0, 1);
}

.electrophoresis-mechanism {
    min-height: 560px;
    grid-template-rows: auto minmax(20rem, 1fr) auto auto;
    background:
        radial-gradient(circle at 50% 46%, rgba(20, 102, 190, 0.07), transparent 38%),
        linear-gradient(145deg, #fff 0%, #f8fbff 100%);
}

.electrophoresis-mechanism .rm-heading strong { color: #1466be; }

.em-stage {
    min-height: 20rem;
    overflow: hidden;
}

.em-gel-scene {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 20rem;
}

.em-gel {
    position: absolute;
    inset: 0.7rem 8% 0.35rem;
    overflow: hidden;
    border: 1px solid rgba(20, 102, 190, 0.16);
    border-radius: 1.1rem;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0 1px, transparent 1px 1.55rem),
        linear-gradient(180deg, rgba(212, 239, 249, 0.82), rgba(190, 224, 240, 0.58));
    box-shadow: inset 0 0 2.2rem rgba(33, 116, 159, 0.08), 0 0.8rem 2rem rgba(21, 25, 43, 0.08);
}

.em-gel::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.42), transparent 28% 72%, rgba(255, 255, 255, 0.2));
    content: '';
    pointer-events: none;
}

.em-field-direction {
    position: absolute;
    z-index: 5;
    top: 8%;
    bottom: 6%;
    left: 4%;
    display: grid;
    color: rgba(21, 25, 43, 0.5);
    font-size: 0.78rem;
    font-weight: 850;
    grid-template-rows: auto 1fr auto;
    place-items: center;
}

.em-field-direction i {
    position: relative;
    width: 1px;
    height: 100%;
    background: rgba(21, 25, 43, 0.2);
}

.em-field-direction i::after {
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.5px solid rgba(21, 25, 43, 0.42);
    border-bottom: 1.5px solid rgba(21, 25, 43, 0.42);
    content: '';
    transform: translateX(-50%) rotate(45deg);
}

.em-lane {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 19%;
}

.em-ladder-lane { left: 24%; }
.em-noir-lane { left: 52%; }

.em-lane-label {
    position: absolute;
    z-index: 8;
    top: 1.6%;
    left: 50%;
    color: rgba(21, 25, 43, 0.72);
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
    transform: translateX(-50%);
}

.em-well,
.em-well-fill {
    position: absolute;
    z-index: 4;
    top: 8%;
    left: 50%;
    width: 68%;
    height: 4.5%;
    border-radius: 0.28rem 0.28rem 0.55rem 0.55rem;
    transform: translateX(-50%);
}

.em-well {
    border: 1px solid rgba(21, 25, 43, 0.28);
    background: rgba(21, 25, 43, 0.06);
    box-shadow: inset 0 0.18rem 0.32rem rgba(21, 25, 43, 0.14);
}

.em-well-fill { z-index: 5; opacity: 0; }
.em-ladder-fill { background: #594bb9; animation: em-well-load var(--em-cycle) ease-in-out infinite; }
.em-noir-fill { background: #111522; animation: em-noir-well var(--em-cycle) ease-in-out infinite; }

.em-loading-drop {
    position: absolute;
    z-index: 7;
    top: -7%;
    left: 50%;
    width: 0.72rem;
    height: 1rem;
    border-radius: 60% 40% 62% 38%;
    opacity: 0;
    transform: translateX(-50%) rotate(45deg);
}

.em-ladder-drop { background: #594bb9; animation: em-drop-load var(--em-cycle) var(--em-ease) infinite; }
.em-noir-drop { background: #111522; animation: em-drop-load var(--em-cycle) var(--em-ease) infinite; animation-delay: 0.25s; }

.em-ladder-bands,
.em-noir-bands {
    position: absolute;
    inset: 0;
}

.em-ladder-band,
.em-noir-band {
    position: absolute;
    z-index: 3;
    top: 10%;
    left: 50%;
    height: 0.22rem;
    border-radius: 1rem;
    opacity: 0;
    transform: translateX(-50%);
    animation: em-band-run var(--em-cycle) var(--em-ease) infinite;
}

.em-ladder-band {
    width: 56%;
    background: #594bb9;
    box-shadow: 0 0 0.35rem rgba(89, 75, 185, 0.22);
}

.em-ladder-band.is-reference { width: 72%; height: 0.3rem; background: #3f329e; }
.em-noir-band { width: 68%; height: 0.34rem; box-shadow: 0 0 0.45rem currentColor; }

.em-ladder-band.is-10000 { --em-y: 18%; }
.em-ladder-band.is-8000 { --em-y: 22%; }
.em-ladder-band.is-6000 { --em-y: 28%; }
.em-ladder-band.is-5000 { --em-y: 33%; }
.em-ladder-band.is-4000 { --em-y: 39%; }
.em-ladder-band.is-3000 { --em-y: 46%; }
.em-ladder-band.is-2500 { --em-y: 51%; }
.em-ladder-band.is-2000 { --em-y: 57%; }
.em-ladder-band.is-1500 { --em-y: 64%; }
.em-ladder-band.is-1000 { --em-y: 73%; }
.em-ladder-band.is-750 { --em-y: 79%; }
.em-ladder-band.is-500 { --em-y: 86%; }
.em-ladder-band.is-250 { --em-y: 93%; }

.em-noir-band.is-blue-high { --em-y: 22%; color: #1859c9; background: currentColor; }
.em-noir-band.is-orange { --em-y: 46%; color: #ee8424; background: currentColor; }
.em-noir-band.is-violet-low { --em-y: 86%; color: #7547d8; background: currentColor; }
.em-noir-band.is-yellow { --em-y: 96%; color: #edc927; background: currentColor; }

.em-ladder-readout {
    position: absolute;
    z-index: 6;
    top: 0;
    bottom: 0;
    left: 7%;
    width: 18%;
    color: rgba(21, 25, 43, 0.58);
    font-size: 0.52rem;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.em-ladder-readout span {
    position: absolute;
    top: var(--em-y);
    right: 0;
    padding-right: 1.4rem;
    opacity: 0;
    white-space: nowrap;
    transform: translateY(-50%);
    animation: em-readout-appear var(--em-cycle) ease-in-out infinite;
}

.em-ladder-readout span::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1rem;
    height: 1px;
    background: rgba(21, 25, 43, 0.18);
    content: '';
}

.em-ladder-readout .is-reference { color: rgba(21, 25, 43, 0.82); font-weight: 900; }
.em-ladder-readout .is-10000 { --em-y: 18%; }
.em-ladder-readout .is-8000 { --em-y: 22%; }
.em-ladder-readout .is-6000 { --em-y: 28%; }
.em-ladder-readout .is-5000 { --em-y: 33%; }
.em-ladder-readout .is-4000 { --em-y: 39%; }
.em-ladder-readout .is-3000 { --em-y: 46%; }
.em-ladder-readout .is-2500 { --em-y: 51%; }
.em-ladder-readout .is-2000 { --em-y: 57%; }
.em-ladder-readout .is-1500 { --em-y: 64%; }
.em-ladder-readout .is-1000 { --em-y: 73%; }
.em-ladder-readout .is-750 { --em-y: 79%; }
.em-ladder-readout .is-500 { --em-y: 86%; }
.em-ladder-readout .is-250 { --em-y: 93%; }

.em-dye-readout {
    position: absolute;
    z-index: 6;
    top: 0;
    right: 4%;
    bottom: 0;
    width: 19%;
    color: rgba(21, 25, 43, 0.7);
    font-size: 0.68rem;
    font-weight: 800;
}

.em-dye-readout span {
    position: absolute;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    opacity: 0;
    white-space: nowrap;
    transform: translateY(-50%);
    animation: em-readout-appear var(--em-cycle) ease-in-out infinite;
}

.em-dye-readout span::before {
    width: 1.4rem;
    height: 1px;
    background: rgba(21, 25, 43, 0.18);
    content: '';
}

.em-dye-readout span > i { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.em-dye-readout .is-blue-high { top: 22%; }
.em-dye-readout .is-blue-high > i { background: #1859c9; }
.em-dye-readout .is-orange { top: 46%; }
.em-dye-readout .is-orange > i { background: #ee8424; }
.em-dye-readout .is-violet-low { top: 86%; }
.em-dye-readout .is-violet-low > i { background: #7547d8; }
.em-dye-readout .is-yellow { top: 96%; }
.em-dye-readout .is-yellow > i { background: #edc927; }

.em-preview {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 298px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--brand-dark);
    font: inherit;
    text-align: left;
}

.em-preview .em-gel-scene { min-height: 298px; }
.em-preview .em-gel { inset: 0.9rem 5% 2.35rem; }
.em-preview .em-dye-readout { right: 2%; width: 22%; font-size: 0.56rem; }
.em-preview .em-dye-readout span::before { width: 0.55rem; }
.em-preview .em-dye-readout span > i { display: none; }
.em-preview :is(.em-loading-drop, .em-well-fill, .em-ladder-band, .em-noir-band, .em-ladder-readout span, .em-dye-readout span) {
    animation: none;
}
.em-preview .em-loading-drop { opacity: 0; }
.em-preview .em-ladder-fill { opacity: 0.18; }
.em-preview .em-noir-fill { opacity: 0.12; }
.em-preview :is(.em-ladder-band, .em-noir-band) {
    top: var(--em-y);
    opacity: 1;
}
.em-preview :is(.em-ladder-readout span, .em-dye-readout span) {
    opacity: 1;
    translate: 0 0;
}

@keyframes em-drop-load {
    0%, 3% { top: -7%; opacity: 0; scale: 0.8; }
    7% { opacity: 1; }
    15% { top: 8%; opacity: 1; scale: 1; }
    18%, 100% { top: 8%; opacity: 0; scale: 0.55; }
}

@keyframes em-well-load {
    0%, 11% { opacity: 0; }
    16%, 28% { opacity: 0.92; }
    34%, 100% { opacity: 0.18; }
}

@keyframes em-noir-well {
    0%, 11% { opacity: 0; }
    16%, 28% { opacity: 1; }
    34%, 100% { opacity: 0.12; }
}

@keyframes em-band-run {
    0%, 20% { top: 10%; opacity: 0; }
    27% { top: 11%; opacity: 1; }
    76%, 100% { top: var(--em-y); opacity: 1; }
}

@keyframes em-readout-appear {
    0%, 67% { opacity: 0; translate: 0 0.2rem; }
    78%, 100% { opacity: 1; translate: 0 0; }
}

@media (max-width: 720px) {
    .electrophoresis-mechanism {
        min-height: 510px;
        grid-template-rows: auto minmax(18rem, 1fr) auto auto;
    }
    .em-stage,
    .em-gel-scene { min-height: 20rem; }
    .em-gel { inset: 0.55rem 1% 0.25rem; }
    .em-ladder-lane { left: 32%; width: 14%; }
    .em-noir-lane { left: 51%; width: 14%; }
    .em-dye-readout { right: 1%; width: 28%; font-size: 11px; line-height: 1; color: #394657; }
    .em-ladder-readout { left: 3%; width: 25%; font-size: 11px; line-height: 1; color: #394657; }
    .em-ladder-readout span { padding-right: .35rem; }
    .em-ladder-readout span::after { width: .2rem; }
    .em-dye-readout span { gap: 0.18rem; }
    .em-dye-readout span::before { display: none; }
    .em-dye-readout span > i { display: none; }
    .em-field-direction { left: 2.5%; }
    .em-preview { min-height: 228px; }
    .em-preview .em-gel-scene { min-height: 228px; }
    .em-preview .em-gel { inset: 0.65rem 2% 2.15rem; }
    .em-preview .em-field-direction { display: none; }
    .em-preview .em-ladder-lane { left: 32%; width: 14%; }
    .em-preview .em-noir-lane { left: 51%; width: 14%; }
    .em-preview .em-ladder-readout { left: 2%; width: 27%; font-size: 9px; }
    .em-preview .em-dye-readout { right: 1%; width: 28%; }
}