/* Extracted from adn-helicoidal-prototype.html and scoped to the WordPress plugin wrapper. */

		.cm-dna-prototype {
			color-scheme: dark;
			--bg-a: #425067;
			--bg-b: #2b9aaa;
			--bg-c: #768196;
			--tube: #7f8eaa;
			--tube-light: #a9b7d4;
			--tube-dark: #4f5f7c;
			--text: #eef7ff;
			--muted: rgba(238, 247, 255, 0.72);
		}

		.cm-dna-prototype * {
			box-sizing: border-box;
		}

		.cm-dna-loader {
			position: absolute;
			inset: 0;
			z-index: 80;
			display: grid;
			place-items: center;
			align-content: center;
			gap: 12px;
			padding: 24px;
			text-align: center;
			background:
				radial-gradient(circle at 50% 46%, rgba(80, 207, 219, 0.28), transparent 30%),
				linear-gradient(135deg, rgba(6, 16, 29, 0.92), rgba(25, 72, 91, 0.84));
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity 0.34s ease, visibility 0.34s ease;
		}

		.cm-dna-prototype.is-loading .cm-dna-loader {
			opacity: 1;
			visibility: visible;
		}

		.cm-dna-loader strong {
			color: #f5fbff;
			font-size: clamp(1.05rem, 2.4vw, 1.65rem);
			font-weight: 950;
			letter-spacing: 0.03em;
		}

		.cm-dna-loader small {
			color: rgba(225, 244, 255, 0.74);
			font-size: clamp(0.76rem, 1.6vw, 0.94rem);
			font-weight: 800;
			letter-spacing: 0.12em;
			text-transform: uppercase;
		}

		.cm-dna-loader-orbit {
			position: relative;
			width: 78px;
			height: 78px;
			border: 2px solid rgba(229, 246, 255, 0.18);
			border-radius: 999px;
			box-shadow:
				inset 0 0 22px rgba(125, 211, 252, 0.18),
				0 0 34px rgba(125, 211, 252, 0.2);
			animation: loaderSpin 1.25s linear infinite;
		}

		.cm-dna-loader-orbit span {
			position: absolute;
			width: 13px;
			height: 13px;
			border-radius: 999px;
			background: #eef7ff;
			box-shadow: 0 0 18px rgba(238, 247, 255, 0.9);
		}

		.cm-dna-loader-orbit span:nth-child(1) {
			top: -7px;
			left: 50%;
			transform: translateX(-50%);
		}

		.cm-dna-loader-orbit span:nth-child(2) {
			right: 6px;
			bottom: 8px;
			background: #7dd3fc;
		}

		.cm-dna-loader-orbit span:nth-child(3) {
			left: 6px;
			bottom: 8px;
			background: #9bffbd;
		}

		.cm-dna-prototype {
			position: relative;
			margin: 0;
			min-height: 100vh;
			min-height: 100dvh;
			font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
			color: var(--text);
			background:
				radial-gradient(circle at 50% 46%, rgba(53, 178, 193, 0.96), transparent 33%),
				radial-gradient(circle at 14% 31%, rgba(184, 211, 221, 0.24), transparent 11%),
				radial-gradient(circle at 37% 84%, rgba(205, 224, 231, 0.32), transparent 10%),
				radial-gradient(circle at 86% 35%, rgba(190, 210, 222, 0.22), transparent 12%),
				radial-gradient(circle at 81% 82%, rgba(187, 209, 220, 0.25), transparent 10%),
				linear-gradient(110deg, var(--bg-a), var(--bg-b) 52%, var(--bg-c));
			background-position:
				50% 46%,
				14% 31%,
				37% 84%,
				86% 35%,
				81% 82%,
				center;
			background-size:
				120% 120%,
				110% 110%,
				115% 115%,
				112% 112%,
				112% 112%,
				100% 100%;
			isolation: isolate;
			overflow: hidden;
			animation: bgLiquidShift 8s ease-in-out infinite alternate;
		}

		.cm-dna-prototype::before {
			content: "";
			position: absolute;
			z-index: 0;
			inset: -26%;
			background:
				radial-gradient(ellipse at 18% 34%, rgba(205, 230, 242, 0.34), transparent 18%),
				radial-gradient(ellipse at 72% 24%, rgba(102, 219, 231, 0.34), transparent 20%),
				radial-gradient(ellipse at 48% 74%, rgba(48, 129, 173, 0.38), transparent 24%),
				conic-gradient(from 40deg at 52% 50%, rgba(255,255,255,0.06), rgba(53, 176, 196, 0.2), rgba(38, 66, 98, 0.08), rgba(255,255,255,0.06));
			filter: blur(28px) saturate(1.18);
			mix-blend-mode: screen;
			opacity: 0.74;
			pointer-events: none;
			transform: translate3d(0, 0, 0) scale(1.06);
			animation: liquidDrift 19s ease-in-out infinite alternate;
		}

		.cm-dna-prototype::after {
			content: "";
			position: absolute;
			z-index: 1;
			inset: 0;
			background:
				radial-gradient(circle at center, transparent 0 45%, rgba(18, 24, 40, 0.34) 100%),
				linear-gradient(90deg, rgba(255,255,255,0.03), transparent 18% 82%, rgba(255,255,255,0.03));
			pointer-events: none;
		}

		.cm-dna-prototype .liquid-bg {
			position: absolute;
			z-index: 1;
			inset: -18%;
			overflow: hidden;
			pointer-events: none;
			filter: blur(10px) saturate(1.18);
			mix-blend-mode: screen;
			opacity: 0.86;
		}

		.cm-dna-prototype .liquid-blob,
		.cm-dna-prototype .liquid-current {
			position: absolute;
			display: block;
			will-change: transform, border-radius, opacity;
		}

		.cm-dna-prototype .liquid-blob {
			width: 34vw;
			height: 34vw;
			min-width: 360px;
			min-height: 360px;
			border-radius: 43% 57% 48% 52% / 55% 43% 57% 45%;
			background:
				radial-gradient(circle at 34% 30%, rgba(234, 251, 255, 0.58), transparent 0 18%),
				radial-gradient(circle at 50% 55%, rgba(74, 219, 232, 0.48), transparent 0 55%),
				radial-gradient(circle at 65% 68%, rgba(31, 90, 141, 0.34), transparent 0 66%);
		}

		.cm-dna-prototype .liquid-blob:nth-child(1) {
			left: 0;
			top: 20%;
			animation: blobSwimA 7.5s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .liquid-blob:nth-child(2) {
			right: 2%;
			top: 4%;
			width: 42vw;
			height: 42vw;
			animation: blobSwimB 9s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .liquid-blob:nth-child(3) {
			left: 35%;
			bottom: -2%;
			width: 48vw;
			height: 30vw;
			animation: blobSwimC 8.2s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .liquid-current {
			left: -20%;
			top: 38%;
			width: 140%;
			height: 24%;
			border-radius: 50%;
			background:
				linear-gradient(90deg, transparent 0 12%, rgba(238, 250, 255, 0.16), transparent 58%),
				linear-gradient(100deg, transparent 0 24%, rgba(52, 211, 228, 0.2), transparent 72%);
			opacity: 0.9;
			transform: skewY(-7deg);
			animation: currentFlow 5.5s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .stage {
			position: absolute;
			z-index: 2;
			inset: 0;
			display: grid;
			place-items: center;
			overflow: hidden;
		}

		.cm-dna-prototype .stage::before {
			content: "";
			position: absolute;
			inset: 8% -12% 16%;
			z-index: 0;
			background:
				radial-gradient(ellipse at 24% 52%, rgba(178, 226, 237, 0.28), transparent 22%),
				radial-gradient(ellipse at 62% 42%, rgba(29, 170, 197, 0.28), transparent 28%),
				radial-gradient(ellipse at 78% 60%, rgba(168, 195, 218, 0.22), transparent 18%),
				linear-gradient(105deg, transparent 20%, rgba(232, 248, 255, 0.08), transparent 62%);
			border-radius: 45% 55% 42% 58% / 54% 45% 55% 46%;
			filter: blur(24px);
			opacity: 0.9;
			pointer-events: none;
			transform: translate3d(0, 0, 0);
			animation: liquidBehindDna 12.5s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .dna-svg {
			position: relative;
			z-index: 2;
			width: 118vw;
			height: min(74vw, 74vh);
			min-height: 460px;
			max-height: 760px;
			overflow: visible;
			filter: drop-shadow(0 28px 28px rgba(20, 30, 50, 0.28));
			transition: transform 1.15s cubic-bezier(.18,.84,.18,1);
		}

		.cm-dna-prototype .controls {
			position: absolute;
			z-index: 20;
			left: 24px;
			right: 24px;
			bottom: 22px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			pointer-events: none;
		}

		.cm-dna-prototype .caption {
			max-width: min(620px, 68vw);
			padding: 14px 16px;
			border: 1px solid rgba(229, 246, 255, 0.26);
			border-radius: 20px;
			background: rgba(7, 20, 35, 0.72);
			backdrop-filter: blur(12px);
			box-shadow: 0 18px 46px rgba(5, 12, 22, 0.34);
			pointer-events: auto;
		}

		.cm-dna-prototype .caption span {
			display: block;
			margin-bottom: 4px;
			color: rgba(232, 246, 255, 0.86);
			font-size: 0.72rem;
			font-weight: 900;
			letter-spacing: 0.14em;
			text-transform: uppercase;
		}

		.cm-dna-prototype .caption strong {
			display: block;
			color: #f8fdff;
			font-size: clamp(1rem, 1.5vw, 1.22rem);
			line-height: 1.28;
		}

		.cm-dna-prototype .actions {
			display: flex;
			align-items: center;
			gap: 10px;
			pointer-events: auto;
		}

		.cm-dna-prototype button {
			appearance: none;
			border: 0;
			cursor: pointer;
			font: inherit;
		}

		.cm-dna-prototype .btn {
			min-height: 44px;
			padding: 0.72rem 1rem;
			border-radius: 999px;
			border: 1px solid rgba(229, 246, 255, 0.22);
			background: rgba(7, 20, 35, 0.68);
			color: #f4fbff;
			font-weight: 900;
			backdrop-filter: blur(12px);
			box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
			transition: transform 0.18s ease, background 0.18s ease;
		}

		.cm-dna-prototype .btn:hover {
			transform: translateY(-1px);
			background: rgba(12, 36, 56, 0.82);
		}

		.cm-dna-prototype .btn:disabled,
		.cm-dna-prototype .btn:disabled:hover {
			cursor: not-allowed;
			opacity: 0.46;
			transform: none;
		}

		.cm-dna-prototype .btn.primary {
			background: rgba(238, 247, 255, 0.92);
			color: #203044;
		}

		.cm-dna-prototype .btn-reset-icon {
			display: none;
		}

		.cm-dna-prototype .rail {
			stroke: url(#tubeGradient);
			stroke-width: 30;
			stroke-linecap: round;
			fill: none;
		}

		.cm-dna-prototype .rail-highlight {
			stroke: rgba(223, 234, 255, 0.42);
			stroke-width: 7;
			stroke-linecap: round;
			fill: none;
			opacity: 0.72;
			filter: blur(0.2px);
		}

		.cm-dna-prototype .base-rod {
			stroke-width: 22;
			stroke-linecap: round;
			filter: drop-shadow(0 6px 5px rgba(18, 28, 45, 0.38));
			mix-blend-mode: normal;
			transition:
				x1 1.2s cubic-bezier(.18,.84,.18,1),
				y1 1.2s cubic-bezier(.18,.84,.18,1),
				x2 1.2s cubic-bezier(.18,.84,.18,1),
				y2 1.2s cubic-bezier(.18,.84,.18,1),
				opacity 0.35s ease,
				filter 0.35s ease,
				stroke-width 0.35s ease;
		}

		.cm-dna-prototype .base-rod.is-back {
			stroke-width: 17;
		}

		.cm-dna-prototype .base-rod.is-front {
			stroke-width: 23;
		}

		.cm-dna-prototype .rail-piece,
		.cm-dna-prototype .highlight-piece {
			stroke-linecap: round;
			transition:
				x1 1.2s cubic-bezier(.18,.84,.18,1),
				y1 1.2s cubic-bezier(.18,.84,.18,1),
				x2 1.2s cubic-bezier(.18,.84,.18,1),
				y2 1.2s cubic-bezier(.18,.84,.18,1),
				opacity 0.3s ease;
		}

		.cm-dna-prototype .rail-piece.is-back,
		.cm-dna-prototype .highlight-piece.is-back {
			opacity: 0.58;
		}

		.cm-dna-prototype .rail-piece.is-front,
		.cm-dna-prototype .highlight-piece.is-front {
			opacity: 1;
		}

		.cm-dna-prototype #rails-back,
		.cm-dna-prototype #rails-front {
			filter: url(#softTubeShadow);
		}

		.cm-dna-prototype .direction-overlay {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.45s ease;
		}

		.cm-dna-prototype .dna-scroll-track {
			transform-box: fill-box;
			transform-origin: 0 0;
			will-change: transform;
		}

		.cm-dna-prototype .dna-strip-copy {
			opacity: 0;
			transition: opacity 0.35s ease;
		}

		.cm-dna-prototype .stage.is-scrolling .dna-svg,
		.cm-dna-prototype .stage.is-fullwidth .dna-svg {
			width: 100vw;
			height: 100vh;
			min-height: 0;
			max-height: none;
		}

		.cm-dna-prototype .stage.is-fork-overview .dna-svg {
			transform: scale(0.86);
		}

		.cm-dna-prototype .stage.is-scrolling .dna-scroll-track {
			animation: none;
		}

		.cm-dna-prototype .stage.is-scrolling .dna-strip-copy {
			opacity: 1;
		}

		.cm-dna-prototype .stage.show-elongation-loop .dna-strip-copy {
			opacity: 1;
		}

		.cm-dna-prototype .stage.is-scrolling .rail {
			filter: drop-shadow(0 0 8px rgba(232, 246, 255, 0.2));
		}

		.cm-dna-prototype .stage.is-fullwidth .rail {
			filter: drop-shadow(0 0 8px rgba(232, 246, 255, 0.2));
		}

		.cm-dna-prototype .stage.show-direction .direction-overlay {
			opacity: 1;
		}

		.cm-dna-prototype .stage.show-direction .rail {
			filter: drop-shadow(0 0 10px rgba(238, 249, 255, 0.28));
		}

		.cm-dna-prototype .helicase-layer {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.45s ease;
			will-change: transform, opacity;
		}

		.cm-dna-prototype .stage.is-helicase .helicase-layer {
			opacity: 1;
		}

		.cm-dna-prototype .stage.is-helicase .rail {
			filter: drop-shadow(0 0 12px rgba(232, 246, 255, 0.24));
		}

		.cm-dna-prototype .stage.is-single-top .rail,
		.cm-dna-prototype .stage.is-single-bottom .rail {
			filter: drop-shadow(0 0 14px rgba(232, 246, 255, 0.28));
		}

		.cm-dna-prototype .stage.is-single-bottom .dna-svg {
			width: 100vw;
			height: 100vh;
			min-height: 0;
			max-height: none;
			transform: scale(1.08) translateY(-2vh);
		}

		.cm-dna-prototype .stage.show-double-dna .dna-svg,
		.cm-dna-prototype .stage.show-double-helix .dna-svg {
			width: 100vw;
			height: 100vh;
			min-height: 0;
			max-height: none;
			transform: none;
		}

		.cm-dna-prototype .primase-layer,
		.cm-dna-prototype .polymerase-layer,
		.cm-dna-prototype .elongation-synthesis-layer,
		.cm-dna-prototype .fork-overview-synthesis-layer,
		.cm-dna-prototype .lagging-overview-layer,
		.cm-dna-prototype .double-dna-layer,
		.cm-dna-prototype .double-helix-layer,
		.cm-dna-prototype .lagging-primer-layer,
		.cm-dna-prototype .rna-primer-layer {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.45s ease;
			will-change: transform, opacity;
		}

		.cm-dna-prototype .stage.is-primase .primase-layer,
		.cm-dna-prototype .stage.is-polymerase .polymerase-layer,
		.cm-dna-prototype .stage.show-elongation-loop .elongation-synthesis-layer,
		.cm-dna-prototype .stage.is-fork-overview .fork-overview-synthesis-layer,
		.cm-dna-prototype .stage.show-lagging-overview .lagging-overview-layer,
		.cm-dna-prototype .stage.show-double-dna .double-dna-layer,
		.cm-dna-prototype .stage.show-double-helix .double-helix-layer,
		.cm-dna-prototype .stage.show-lagging-primers .lagging-primer-layer,
		.cm-dna-prototype .stage.show-lagging-fill .lagging-primer-layer,
		.cm-dna-prototype .stage.show-okazaki-fragments .lagging-primer-layer,
		.cm-dna-prototype .stage.show-exonuclease-cleanup .lagging-primer-layer,
		.cm-dna-prototype .stage.show-lagging-repair .lagging-primer-layer,
		.cm-dna-prototype .stage.show-ligase .lagging-primer-layer,
		.cm-dna-prototype .stage.show-rna-primer .rna-primer-layer {
			opacity: 1;
		}

		.cm-dna-prototype .stage.is-fork-overview .helicase-label {
			opacity: 0;
		}

		.cm-dna-prototype .stage.show-double-dna #dna-scroll-track,
		.cm-dna-prototype .stage.show-double-helix #dna-scroll-track {
			opacity: 0;
		}

		.cm-dna-prototype .stage.show-double-helix .double-helix-layer {
			animation: doubleHelixReveal 0.9s cubic-bezier(.18,.84,.18,1) both;
		}

		.cm-dna-prototype .stage.show-elongation-loop.show-rna-primer .rna-primer-layer {
			animation: primerLeavesView 6.25s linear forwards;
		}

		@keyframes primerLeavesView {
			0%,
			82% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes loaderSpin {
			to {
				transform: rotate(360deg);
			}
		}

		@keyframes doubleHelixReveal {
			0% {
				opacity: 0;
				filter: blur(4px);
				transform: scale(0.96);
			}

			100% {
				opacity: 1;
				filter: blur(0);
				transform: scale(1);
			}
		}

		.cm-dna-prototype .primase-body,
		.cm-dna-prototype .polymerase-body {
			filter: url(#primaseShadow);
			transform-box: fill-box;
			transform-origin: center;
		}

		.cm-dna-prototype .stage.primase-working .primase-body {
			animation: primaseBreathe 1.05s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .stage.show-lagging-primers .lagging-primase.is-active .primase-body {
			animation: primaseBreathe 0.92s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .stage.show-lagging-fill .lagging-polymerase.is-active .polymerase-body,
		.cm-dna-prototype .stage.show-lagging-repair .lagging-polymerase.is-active .polymerase-body {
			animation: polymeraseBreathe 0.9s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .stage.show-exonuclease-cleanup .lagging-exonuclease.is-active .exonuclease-body {
			animation: exonucleaseBite 0.74s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .stage.show-ligase .lagging-ligase.is-active .ligase-body {
			animation: ligaseSeal 0.82s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .polymerase-body {
			filter: url(#polymeraseShadow);
		}

		.cm-dna-prototype .stage.polymerase-working .polymerase-body {
			animation: polymeraseBreathe 0.95s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .primase-lobe {
			fill: url(#primaseGradient);
			stroke: rgba(255, 230, 204, 0.16);
			stroke-width: 3;
		}

		.cm-dna-prototype .polymerase-lobe {
			fill: url(#polymeraseGradient);
			stroke: rgba(214, 243, 255, 0.18);
			stroke-width: 3;
		}

		.cm-dna-prototype .primase-pocket {
			fill: rgba(73, 35, 24, 0.42);
			filter: blur(0.35px);
		}

		.cm-dna-prototype .polymerase-pocket {
			fill: rgba(12, 39, 68, 0.45);
			filter: blur(0.35px);
		}

		.cm-dna-prototype .primase-ridge {
			fill: none;
			stroke: rgba(255, 225, 190, 0.24);
			stroke-width: 7;
			stroke-linecap: round;
		}

		.cm-dna-prototype .polymerase-ridge {
			fill: none;
			stroke: rgba(230, 250, 255, 0.25);
			stroke-width: 7;
			stroke-linecap: round;
		}

		.cm-dna-prototype .polymerase-grip {
			fill: none;
			stroke: rgba(236, 250, 255, 0.64);
			stroke-linecap: round;
			stroke-width: 12;
			filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.52));
		}

		.cm-dna-prototype .polymerase-contact-glow {
			fill: rgba(255, 255, 255, 0.32);
			filter: url(#forkGlow);
			transform-box: fill-box;
			transform-origin: center;
			animation: contactPulse 0.95s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .primase-label text,
		.cm-dna-prototype .polymerase-label text,
		.cm-dna-prototype .rna-label text {
			fill: rgba(248, 253, 255, 0.96);
			font-weight: 950;
			filter: drop-shadow(0 7px 12px rgba(18, 28, 45, 0.38));
		}

		.cm-dna-prototype .primase-label text {
			font-size: 52px;
		}

		.cm-dna-prototype .rna-label text {
			font-size: 34px;
			letter-spacing: 0.08em;
			text-transform: uppercase;
		}

		.cm-dna-prototype .polymerase-label text {
			font-size: 44px;
		}

		.cm-dna-prototype .primase-label path,
		.cm-dna-prototype .polymerase-label path,
		.cm-dna-prototype .rna-label path {
			fill: none;
			stroke: rgba(248, 253, 255, 0.9);
			stroke-linecap: round;
			stroke-width: 5;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
		}

		.cm-dna-prototype .rna-backbone {
			stroke: #517dff;
			stroke-width: 30;
			stroke-linecap: round;
			fill: none;
			filter:
				drop-shadow(0 0 8px rgba(91, 154, 255, 0.5))
				drop-shadow(0 8px 9px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .rna-base-link {
			stroke-width: 20;
			stroke-linecap: round;
			filter: drop-shadow(0 5px 5px rgba(18, 28, 45, 0.32));
			transition: opacity 0.35s ease, stroke-width 0.35s ease, filter 0.35s ease;
		}

		.cm-dna-prototype .rna-base-link.is-rna-selected {
			stroke-width: 30;
			filter:
				drop-shadow(0 0 12px rgba(255, 176, 76, 0.95))
				drop-shadow(0 8px 10px rgba(18, 28, 45, 0.38));
		}

		.cm-dna-prototype .lagging-rna-backbone {
			stroke: #517dff;
			stroke-width: 24;
			stroke-linecap: round;
			fill: none;
			filter:
				drop-shadow(0 0 8px rgba(91, 154, 255, 0.5))
				drop-shadow(0 8px 9px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .lagging-rna-base-link {
			stroke-width: 19;
			stroke-linecap: round;
			filter: drop-shadow(0 5px 5px rgba(18, 28, 45, 0.32));
		}

		.cm-dna-prototype .lagging-rna-bond {
			stroke: rgba(237, 249, 255, 0.72);
			stroke-width: 4;
			stroke-linecap: round;
			filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.36));
		}

		.cm-dna-prototype .lagging-dna-backbone {
			stroke: #517dff;
			stroke-width: 24;
			stroke-linecap: round;
			fill: none;
			filter:
				drop-shadow(0 0 8px rgba(91, 154, 255, 0.48))
				drop-shadow(0 8px 9px rgba(18, 28, 45, 0.32));
		}

		.cm-dna-prototype .lagging-dna-base-link {
			stroke-width: 19;
			stroke-linecap: round;
			filter: drop-shadow(0 5px 5px rgba(18, 28, 45, 0.32));
		}

		.cm-dna-prototype .lagging-dna-base-link.is-growing {
			stroke-width: 25;
			filter:
				drop-shadow(0 0 12px rgba(255, 255, 255, 0.72))
				drop-shadow(0 8px 10px rgba(18, 28, 45, 0.38));
		}

		.cm-dna-prototype .lagging-dna-backbone.is-okazaki,
		.cm-dna-prototype .lagging-dna-base-link.is-okazaki {
			filter:
				drop-shadow(0 0 14px rgba(255, 255, 255, 0.86))
				drop-shadow(0 0 22px rgba(93, 172, 255, 0.64))
				drop-shadow(0 8px 10px rgba(18, 28, 45, 0.38));
		}

		.cm-dna-prototype .lagging-dna-base-link.is-okazaki {
			stroke-width: 25;
		}

		.cm-dna-prototype .lagging-dna-bond {
			stroke: rgba(237, 249, 255, 0.72);
			stroke-width: 4;
			stroke-linecap: round;
			filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.36));
		}

		.cm-dna-prototype .lagging-dna-bond.is-okazaki {
			stroke: rgba(255, 255, 255, 0.96);
			stroke-width: 6;
			filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.72));
		}

		.cm-dna-prototype .lagging-repair-backbone,
		.cm-dna-prototype .lagging-complete-backbone {
			stroke: #517dff;
			stroke-linecap: round;
			fill: none;
			filter:
				drop-shadow(0 0 10px rgba(91, 154, 255, 0.54))
				drop-shadow(0 8px 9px rgba(18, 28, 45, 0.32));
		}

		.cm-dna-prototype .lagging-repair-backbone {
			stroke-width: 24;
		}

		.cm-dna-prototype .lagging-complete-backbone {
			stroke-width: 27;
			filter:
				drop-shadow(0 0 14px rgba(255, 255, 255, 0.72))
				drop-shadow(0 0 24px rgba(91, 154, 255, 0.58))
				drop-shadow(0 8px 10px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .lagging-repair-base-link {
			stroke-width: 19;
			stroke-linecap: round;
			filter: drop-shadow(0 5px 5px rgba(18, 28, 45, 0.32));
		}

		.cm-dna-prototype .lagging-repair-base-link.is-growing {
			stroke-width: 25;
			filter:
				drop-shadow(0 0 12px rgba(255, 255, 255, 0.72))
				drop-shadow(0 8px 10px rgba(18, 28, 45, 0.38));
		}

		.cm-dna-prototype .lagging-repair-bond {
			stroke: rgba(237, 249, 255, 0.78);
			stroke-width: 4;
			stroke-linecap: round;
			filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.4));
		}

		.cm-dna-prototype .lagging-ligase {
			opacity: 0;
			will-change: transform, opacity;
		}

		.cm-dna-prototype .ligase-body {
			filter: url(#polymeraseShadow);
			transform-box: fill-box;
			transform-origin: center;
		}

		.cm-dna-prototype .ligase-lobe {
			fill: rgba(86, 205, 187, 0.94);
			stroke: rgba(221, 255, 248, 0.24);
			stroke-width: 3;
		}

		.cm-dna-prototype .ligase-pocket {
			fill: rgba(20, 86, 95, 0.42);
			filter: blur(0.35px);
		}

		.cm-dna-prototype .ligase-ridge {
			fill: none;
			stroke: rgba(229, 255, 249, 0.72);
			stroke-linecap: round;
			stroke-width: 8;
			filter: drop-shadow(0 0 8px rgba(194, 255, 246, 0.52));
		}

		.cm-dna-prototype .ligase-label text {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 36px;
			font-weight: 950;
			letter-spacing: 0.02em;
			filter: drop-shadow(0 7px 12px rgba(18, 28, 45, 0.38));
		}

		.cm-dna-prototype .ligase-label path {
			fill: none;
			stroke: rgba(248, 253, 255, 0.9);
			stroke-linecap: round;
			stroke-width: 4;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
		}

		.cm-dna-prototype .ligase-seal-glow {
			fill: rgba(184, 255, 244, 0.25);
			filter: blur(0.4px);
		}

		.cm-dna-prototype .lagging-primase-label text {
			fill: rgba(248, 253, 255, 0.96);
			font-size: 34px;
			font-weight: 950;
			letter-spacing: 0.04em;
			filter: drop-shadow(0 7px 12px rgba(18, 28, 45, 0.38));
		}

		.cm-dna-prototype .lagging-primase-label path {
			fill: none;
			stroke: rgba(248, 253, 255, 0.86);
			stroke-linecap: round;
			stroke-width: 4;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
		}

		.cm-dna-prototype .lagging-polymerase {
			opacity: 0;
			will-change: transform, opacity;
		}

		.cm-dna-prototype .lagging-polymerase-label text {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 34px;
			font-weight: 950;
			letter-spacing: 0.02em;
			filter: drop-shadow(0 7px 12px rgba(18, 28, 45, 0.38));
		}

		.cm-dna-prototype .lagging-polymerase-label path {
			fill: none;
			stroke: rgba(248, 253, 255, 0.9);
			stroke-linecap: round;
			stroke-width: 4;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
		}

		.cm-dna-prototype .okazaki-fragments-label {
			opacity: 0;
			transition: opacity 0.45s ease;
		}

		.cm-dna-prototype .okazaki-fragments-label text {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 52px;
			font-weight: 950;
			letter-spacing: 0.01em;
			filter: drop-shadow(0 10px 16px rgba(18, 28, 45, 0.4));
		}

		.cm-dna-prototype .okazaki-fragments-card {
			fill: rgba(32, 74, 93, 0.82);
			stroke: rgba(210, 241, 255, 0.34);
			stroke-width: 3;
			filter: drop-shadow(0 22px 28px rgba(18, 28, 45, 0.26));
		}

		.cm-dna-prototype .okazaki-fragments-label path {
			fill: none;
			stroke: rgba(248, 253, 255, 0.92);
			stroke-linecap: round;
			stroke-width: 5;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.46));
		}

		.cm-dna-prototype .lagging-exonuclease {
			opacity: 0;
			will-change: transform, opacity;
		}

		.cm-dna-prototype .exonuclease-body {
			filter: url(#polymeraseShadow);
			transform-box: fill-box;
			transform-origin: center;
		}

		.cm-dna-prototype .exonuclease-lobe {
			fill: rgba(238, 134, 80, 0.94);
			stroke: rgba(255, 230, 208, 0.22);
			stroke-width: 3;
		}

		.cm-dna-prototype .exonuclease-pocket {
			fill: rgba(89, 44, 35, 0.48);
			filter: blur(0.35px);
		}

		.cm-dna-prototype .exonuclease-jaw {
			fill: none;
			stroke: rgba(255, 235, 196, 0.7);
			stroke-linecap: round;
			stroke-width: 8;
			filter: drop-shadow(0 0 8px rgba(255, 210, 142, 0.45));
		}

		.cm-dna-prototype .exonuclease-label text {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 36px;
			font-weight: 950;
			letter-spacing: 0.02em;
			filter: drop-shadow(0 7px 12px rgba(18, 28, 45, 0.38));
		}

		.cm-dna-prototype .exonuclease-label path {
			fill: none;
			stroke: rgba(248, 253, 255, 0.9);
			stroke-linecap: round;
			stroke-width: 4;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
		}

		.cm-dna-prototype .exonuclease-cleanup-glow {
			fill: rgba(255, 231, 171, 0.26);
			filter: blur(0.4px);
		}

		.cm-dna-prototype .new-dna-backbone {
			stroke: #517dff;
			stroke-width: 28;
			stroke-linecap: round;
			fill: none;
			filter:
				drop-shadow(0 0 8px rgba(232, 246, 255, 0.28))
				drop-shadow(0 8px 9px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .overview-new-backbone {
			stroke: #517dff;
			stroke-width: 22;
			stroke-linecap: round;
			fill: none;
			filter:
				drop-shadow(0 0 8px rgba(91, 154, 255, 0.44))
				drop-shadow(0 8px 9px rgba(18, 28, 45, 0.3));
		}

		.cm-dna-prototype .overview-rna-backbone {
			stroke: #517dff;
			stroke-width: 22;
			stroke-linecap: round;
			fill: none;
			filter:
				drop-shadow(0 0 10px rgba(91, 154, 255, 0.58))
				drop-shadow(0 8px 9px rgba(18, 28, 45, 0.28));
		}

		.cm-dna-prototype .lagging-overview-backbone,
		.cm-dna-prototype .lagging-overview-rna-backbone,
		.cm-dna-prototype .lagging-overview-dna-backbone,
		.cm-dna-prototype .lagging-overview-repair-backbone {
			stroke: #517dff;
			stroke-width: 22;
			stroke-linecap: round;
			fill: none;
			filter:
				drop-shadow(0 0 8px rgba(91, 154, 255, 0.46))
				drop-shadow(0 7px 8px rgba(18, 28, 45, 0.28));
		}

		.cm-dna-prototype .lagging-overview-rna-backbone {
			filter:
				drop-shadow(0 0 10px rgba(91, 154, 255, 0.58))
				drop-shadow(0 7px 8px rgba(18, 28, 45, 0.28));
		}

		.cm-dna-prototype .lagging-overview-base-link,
		.cm-dna-prototype .lagging-overview-bond {
			stroke-linecap: round;
			filter: drop-shadow(0 4px 5px rgba(18, 28, 45, 0.32));
		}

		.cm-dna-prototype .lagging-overview-base-link {
			stroke-width: 22;
		}

		.cm-dna-prototype .lagging-overview-base-link.is-growing {
			stroke-width: 27;
			filter:
				drop-shadow(0 0 10px rgba(255, 255, 255, 0.72))
				drop-shadow(0 7px 8px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .lagging-overview-bond {
			stroke: rgba(237, 249, 255, 0.74);
			stroke-width: 4;
		}

		.cm-dna-prototype .lagging-overview-flow {
			fill: none;
			stroke: rgba(246, 253, 255, 0.66);
			stroke-width: 3;
			stroke-linecap: round;
			stroke-dasharray: 10 14;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
			animation: dashFlow 1.7s linear infinite;
		}

		.cm-dna-prototype .lagging-overview-note {
			fill: rgba(248, 253, 255, 0.92);
			font-size: 28px;
			font-weight: 900;
			letter-spacing: 0.03em;
			filter: drop-shadow(0 7px 10px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .lagging-overview-enzyme-label text {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 30px;
			font-weight: 950;
			letter-spacing: 0.02em;
			filter: drop-shadow(0 7px 12px rgba(18, 28, 45, 0.36));
		}

		.cm-dna-prototype .lagging-overview-enzyme-label path {
			fill: none;
			stroke: rgba(248, 253, 255, 0.88);
			stroke-linecap: round;
			stroke-width: 3.5;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.42));
		}

		.cm-dna-prototype .double-dna-label {
			fill: rgba(248, 253, 255, 0.94);
			font-size: 31px;
			font-weight: 950;
			letter-spacing: 0.03em;
			filter: drop-shadow(0 8px 12px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .double-dna-rail {
			stroke: rgba(116, 132, 161, 0.94);
			stroke-width: 23;
			stroke-linecap: round;
			filter:
				drop-shadow(0 0 10px rgba(222, 236, 255, 0.22))
				drop-shadow(0 8px 9px rgba(18, 28, 45, 0.32));
		}

		.cm-dna-prototype .double-dna-rail.is-dim {
			opacity: 0.38;
		}

		.cm-dna-prototype .double-dna-rail.is-highlight {
			stroke: rgba(220, 234, 255, 0.98);
			stroke-width: 27;
			filter:
				drop-shadow(0 0 12px rgba(255, 255, 255, 0.66))
				drop-shadow(0 0 24px rgba(93, 172, 255, 0.5))
				drop-shadow(0 8px 10px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .double-dna-base {
			stroke-width: 22;
			stroke-linecap: round;
			filter: drop-shadow(0 6px 5px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .double-dna-base.is-dim {
			opacity: 0.34;
		}

		.cm-dna-prototype .double-dna-base.is-highlight {
			stroke-width: 27;
			opacity: 1;
			filter:
				drop-shadow(0 0 10px rgba(255, 255, 255, 0.64))
				drop-shadow(0 7px 8px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .double-helix-layer {
			transform-box: fill-box;
			transform-origin: center;
		}

		.cm-dna-prototype .double-helix-rail {
			stroke: rgba(112, 128, 158, 0.96);
			stroke-width: 25;
			stroke-linecap: round;
			fill: none;
			filter:
				drop-shadow(0 0 12px rgba(225, 238, 255, 0.22))
				drop-shadow(0 10px 12px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .double-helix-shine {
			stroke: rgba(228, 240, 255, 0.5);
			stroke-width: 6;
			stroke-linecap: round;
			fill: none;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.34));
		}

		.cm-dna-prototype .double-helix-base {
			stroke-width: 18;
			stroke-linecap: round;
			filter: drop-shadow(0 6px 6px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .double-helix-base.is-back {
			opacity: 0.38;
			stroke-width: 15;
		}

		.cm-dna-prototype .double-helix-base.is-front {
			opacity: 1;
			stroke-width: 22;
			filter:
				drop-shadow(0 0 10px rgba(255, 255, 255, 0.42))
				drop-shadow(0 7px 8px rgba(18, 28, 45, 0.36));
		}

		.cm-dna-prototype .new-dna-base-link,
		.cm-dna-prototype .incoming-base,
		.cm-dna-prototype .overview-new-base-link,
		.cm-dna-prototype .overview-rna-base-link,
		.cm-dna-prototype .overview-incoming-base {
			stroke-width: 20;
			stroke-linecap: round;
			filter: drop-shadow(0 5px 5px rgba(18, 28, 45, 0.32));
		}

		.cm-dna-prototype .new-dna-base-link.is-growing,
		.cm-dna-prototype .overview-new-base-link.is-growing {
			stroke-width: 26;
			filter:
				drop-shadow(0 0 12px rgba(255, 255, 255, 0.72))
				drop-shadow(0 8px 10px rgba(18, 28, 45, 0.38));
		}

		.cm-dna-prototype .incoming-base,
		.cm-dna-prototype .overview-incoming-base {
			filter:
				drop-shadow(0 0 10px rgba(255, 255, 255, 0.56))
				drop-shadow(0 8px 9px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .overview-rna-label text {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 34px;
			font-weight: 950;
			letter-spacing: 0.08em;
			filter: drop-shadow(0 8px 14px rgba(18, 28, 45, 0.36));
		}

		.cm-dna-prototype .overview-rna-label path {
			fill: none;
			stroke: rgba(248, 253, 255, 0.92);
			stroke-linecap: round;
			stroke-width: 4;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
		}

		.cm-dna-prototype .nucleotide-pool-halo {
			fill: rgba(242, 250, 255, 0.18);
			filter: url(#forkGlow);
			opacity: 0.75;
		}

		.cm-dna-prototype .uracil-label,
		.cm-dna-prototype .primer-name-label {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.45s ease, transform 0.45s ease;
			transform: translateY(14px);
		}

		.cm-dna-prototype .stage.show-uracil-label .uracil-label,
		.cm-dna-prototype .stage.show-primer-name .primer-name-label {
			opacity: 1;
			transform: translateY(0);
		}

		.cm-dna-prototype .stage.show-primer-name .rna-label {
			opacity: 0 !important;
		}

		.cm-dna-prototype .stage.show-elongation-label .rna-label {
			opacity: 0 !important;
		}

		.cm-dna-prototype .stage.show-elongation-loop .rna-label {
			opacity: 0 !important;
		}

		.cm-dna-prototype .elongation-label {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.45s ease, transform 0.45s ease;
			transform: translateY(18px);
		}

		.cm-dna-prototype .stage.show-elongation-label .elongation-label {
			opacity: 1;
			transform: translateY(0);
		}

		.cm-dna-prototype .continuous-strand-label {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.45s ease, transform 0.45s ease;
			transform: translateY(-10px);
		}

		.cm-dna-prototype .stage.show-elongation-loop .continuous-strand-label {
			opacity: 1;
			transform: translateY(0);
		}

		.cm-dna-prototype .continuous-strand-card {
			fill: rgba(23, 38, 57, 0.48);
			stroke: rgba(245, 252, 255, 0.25);
			stroke-width: 2;
			filter: drop-shadow(0 18px 34px rgba(18, 28, 45, 0.28));
		}

		.cm-dna-prototype .continuous-strand-label text {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 36px;
			font-weight: 950;
			letter-spacing: 0.01em;
			filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.34));
		}

		.cm-dna-prototype .discontinuous-strand-overlay {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.45s ease, transform 0.45s ease;
			transform: translateY(12px);
		}

		.cm-dna-prototype .stage.show-bottom-discontinuous .discontinuous-strand-overlay {
			opacity: 1;
			transform: translateY(0);
		}

		.cm-dna-prototype .discontinuous-card {
			fill: rgba(23, 38, 57, 0.46);
			stroke: rgba(245, 252, 255, 0.26);
			stroke-width: 2;
			filter: drop-shadow(0 18px 34px rgba(18, 28, 45, 0.28));
		}

		.cm-dna-prototype .discontinuous-title {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 52px;
			font-weight: 950;
			letter-spacing: 0.01em;
			filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.36));
		}

		.cm-dna-prototype .discontinuous-subtitle {
			fill: rgba(221, 240, 249, 0.95);
			font-size: 31px;
			font-weight: 850;
			letter-spacing: 0.04em;
		}

		.cm-dna-prototype .bottom-direction-note {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 42px;
			font-weight: 950;
			filter:
				drop-shadow(0 0 12px rgba(255, 255, 255, 0.46))
				drop-shadow(0 8px 18px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .bottom-direction-track {
			fill: none;
			stroke: rgba(248, 253, 255, 0.48);
			stroke-dasharray: 18 18;
			stroke-linecap: round;
			stroke-width: 5;
			filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.42));
			animation: dashFlow 1.25s linear infinite;
		}

		.cm-dna-prototype .elongation-card {
			fill: rgba(23, 38, 57, 0.44);
			stroke: rgba(245, 252, 255, 0.24);
			stroke-width: 2;
			filter: drop-shadow(0 18px 34px rgba(18, 28, 45, 0.28));
		}

		.cm-dna-prototype .elongation-label text {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 52px;
			font-weight: 950;
			letter-spacing: 0.01em;
			filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.36));
		}

		.cm-dna-prototype .uracil-label text,
		.cm-dna-prototype .primer-name-label text {
			fill: rgba(248, 253, 255, 0.98);
			font-weight: 950;
			filter: drop-shadow(0 8px 14px rgba(18, 28, 45, 0.36));
		}

		.cm-dna-prototype .uracil-label text {
			font-size: 42px;
		}

		.cm-dna-prototype .primer-name-label text {
			font-size: 44px;
		}

		.cm-dna-prototype .uracil-label path,
		.cm-dna-prototype .primer-name-label path {
			fill: none;
			stroke: rgba(248, 253, 255, 0.92);
			stroke-linecap: round;
			stroke-width: 5;
			filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.5));
		}

		.cm-dna-prototype .fork-label {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.45s ease, transform 0.45s ease;
			transform: translateY(18px);
		}

		.cm-dna-prototype .stage.show-fork-label .fork-label {
			opacity: 1;
			transform: translateY(0);
		}

		.cm-dna-prototype .fork-label-card {
			fill: rgba(23, 38, 57, 0.38);
			stroke: rgba(245, 252, 255, 0.22);
			stroke-width: 2;
			filter: drop-shadow(0 18px 34px rgba(18, 28, 45, 0.28));
		}

		.cm-dna-prototype .fork-label text {
			fill: rgba(248, 253, 255, 0.96);
			font-size: 48px;
			font-weight: 950;
			letter-spacing: 0.01em;
			filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.42));
		}

		.cm-dna-prototype .fork-label path {
			fill: none;
			stroke: rgba(248, 253, 255, 0.52);
			stroke-dasharray: 14 16;
			stroke-linecap: round;
			stroke-width: 4;
			filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.42));
			animation: dashFlow 1.35s linear infinite;
		}

		.cm-dna-prototype .single-direction-overlay {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.45s ease;
		}

		.cm-dna-prototype .stage.show-top-direction .single-direction-overlay {
			opacity: 1;
		}

		.cm-dna-prototype .top-direction-title {
			fill: rgba(238, 247, 255, 0.92);
			font-size: 31px;
			font-weight: 950;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			filter: drop-shadow(0 8px 14px rgba(18, 28, 45, 0.34));
		}

		.cm-dna-prototype .top-prime-label {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 66px;
			font-weight: 950;
			filter:
				drop-shadow(0 0 12px rgba(255, 255, 255, 0.76))
				drop-shadow(0 8px 18px rgba(18, 28, 45, 0.36));
		}

		.cm-dna-prototype .top-direction-track {
			fill: none;
			stroke: rgba(248, 253, 255, 0.5);
			stroke-dasharray: 20 20;
			stroke-linecap: round;
			stroke-width: 6;
			filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
			animation: dashFlow 1.25s linear infinite;
		}

		.cm-dna-prototype .top-writing-note {
			opacity: 0;
			transform: translateY(18px);
		}

		.cm-dna-prototype .stage.show-top-direction .top-writing-note {
			animation: writingNoteIn 0.75s ease 1.25s forwards;
		}

		.cm-dna-prototype .top-writing-card {
			fill: rgba(23, 38, 57, 0.42);
			stroke: rgba(245, 252, 255, 0.24);
			stroke-width: 2;
			filter: drop-shadow(0 18px 34px rgba(18, 28, 45, 0.25));
		}

		.cm-dna-prototype .top-writing-note text {
			fill: rgba(248, 253, 255, 0.98);
			font-size: 46px;
			font-weight: 950;
			filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.38));
		}

		.cm-dna-prototype .helicase-body {
			filter: url(#helicaseShadow);
			transform-box: fill-box;
			transform-origin: center;
			animation: helicaseBreathe 1.1s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .helicase-lobe {
			fill: url(#helicaseGradient);
			stroke: rgba(255, 228, 200, 0.14);
			stroke-width: 3;
		}

		.cm-dna-prototype .helicase-pocket {
			fill: rgba(83, 38, 26, 0.42);
			filter: blur(0.4px);
		}

		.cm-dna-prototype .helicase-ridge {
			fill: none;
			stroke: rgba(255, 222, 185, 0.24);
			stroke-width: 8;
			stroke-linecap: round;
		}

		.cm-dna-prototype .helicase-label text {
			fill: rgba(248, 253, 255, 0.96);
			font-size: 58px;
			font-weight: 900;
			letter-spacing: 0.01em;
			filter: drop-shadow(0 7px 12px rgba(18, 28, 45, 0.36));
		}

		.cm-dna-prototype .helicase-label path {
			fill: none;
			stroke: rgba(248, 253, 255, 0.92);
			stroke-linecap: round;
			stroke-width: 5;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.52));
		}

		.cm-dna-prototype .helicase-fork-flare {
			filter: url(#forkGlow);
			opacity: 0.78;
			animation: forkFlare 0.95s ease-in-out infinite alternate;
		}

		.cm-dna-prototype .fork-flare-core {
			fill: rgba(245, 252, 255, 0.38);
		}

		.cm-dna-prototype .fork-spark {
			fill: rgba(255, 255, 255, 0.9);
		}

		.cm-dna-prototype .direction-label {
			fill: rgba(248, 253, 255, 0.96);
			font-size: 64px;
			font-weight: 900;
			letter-spacing: 0.02em;
			text-shadow:
				0 0 12px rgba(255, 255, 255, 0.78),
				0 8px 18px rgba(18, 28, 45, 0.36);
		}

		.cm-dna-prototype .direction-note {
			fill: rgba(238, 247, 255, 0.86);
			font-size: 26px;
			font-weight: 900;
			letter-spacing: 0.08em;
			text-transform: uppercase;
		}

		.cm-dna-prototype .direction-path {
			fill: none;
			stroke: rgba(245, 252, 255, 0.46);
			stroke-linecap: round;
			stroke-width: 6;
			stroke-dasharray: 18 20;
			filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.46));
			animation: dashFlow 1.35s linear infinite;
		}

		.cm-dna-prototype .direction-path.is-bottom {
			animation-direction: reverse;
		}

		.cm-dna-prototype .direction-beam {
			filter:
				drop-shadow(0 0 8px rgba(255, 255, 255, 0.96))
				drop-shadow(0 0 24px rgba(255, 255, 255, 0.78));
		}

		.cm-dna-prototype .beam-halo {
			fill: rgba(255, 255, 255, 0.3);
		}

		.cm-dna-prototype .beam-core {
			fill: rgba(255, 255, 255, 0.94);
		}

		.cm-dna-prototype .beam-spark {
			fill: rgba(255, 255, 255, 0.82);
		}

		.cm-dna-prototype .stage.has-highlight .rail {
			opacity: 0.74;
		}

		.cm-dna-prototype .stage.has-highlight .rail-highlight {
			opacity: 0.48;
		}

		.cm-dna-prototype .stage.has-highlight .base-rod {
			opacity: 0.18 !important;
			stroke-width: 16;
			filter: drop-shadow(0 3px 4px rgba(18, 28, 45, 0.28));
		}

		.cm-dna-prototype .stage.has-highlight .base-rod.is-selected {
			animation: selectedPulse 1.35s ease-in-out infinite;
			opacity: 1 !important;
			stroke-width: 34;
			filter:
				drop-shadow(0 0 10px rgba(255, 255, 255, 0.78))
				drop-shadow(0 10px 12px rgba(18, 28, 45, 0.42));
		}

		@keyframes selectedPulse {
			0%,
			100% {
				filter:
					drop-shadow(0 0 8px rgba(255, 255, 255, 0.62))
					drop-shadow(0 10px 12px rgba(18, 28, 45, 0.4));
			}

			50% {
				filter:
					drop-shadow(0 0 18px rgba(255, 255, 255, 0.95))
					drop-shadow(0 12px 16px rgba(18, 28, 45, 0.46));
			}
		}

		@keyframes dashFlow {
			to {
				stroke-dashoffset: -38;
			}
		}

		@keyframes helicaseBreathe {
			0% {
				transform: rotate(-1.5deg) scale(0.985);
			}

			100% {
				transform: rotate(1.5deg) scale(1.025);
			}
		}

		@keyframes primaseBreathe {
			0% {
				transform: rotate(1deg) scale(0.99);
			}

			100% {
				transform: rotate(-1.2deg) scale(1.025);
			}
		}

		@keyframes polymeraseBreathe {
			0% {
				transform: rotate(-1deg) scale(0.99);
			}

			100% {
				transform: rotate(1.1deg) scale(1.025);
			}
		}

		@keyframes exonucleaseBite {
			0% {
				transform: rotate(-1deg) scale(0.985);
			}

			100% {
				transform: rotate(1.4deg) scale(1.035);
			}
		}

		@keyframes ligaseSeal {
			0% {
				transform: rotate(1deg) scale(0.99);
			}

			100% {
				transform: rotate(-1.2deg) scale(1.03);
			}
		}

		@keyframes contactPulse {
			0% {
				opacity: 0.34;
				transform: scale(0.88);
			}

			100% {
				opacity: 0.86;
				transform: scale(1.08);
			}
		}

		@keyframes forkFlare {
			0% {
				opacity: 0.42;
				transform: translateX(-8px) scaleX(0.86);
			}

			100% {
				opacity: 0.92;
				transform: translateX(6px) scaleX(1.08);
			}
		}

		@keyframes writingNoteIn {
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes bgLiquidShift {
			0% {
				background-position:
					48% 44%,
					10% 29%,
					34% 86%,
					88% 32%,
					78% 84%,
					center;
			}

			100% {
				background-position:
					54% 49%,
					18% 35%,
					42% 79%,
					80% 40%,
					87% 78%,
					center;
			}
		}

		@keyframes blobSwimA {
			0% {
				border-radius: 43% 57% 48% 52% / 55% 43% 57% 45%;
				transform: translate3d(-6vw, -3vh, 0) rotate(-6deg) scale(0.94);
			}

			100% {
				border-radius: 58% 42% 62% 38% / 42% 60% 40% 58%;
				transform: translate3d(13vw, 7vh, 0) rotate(8deg) scale(1.08);
			}
		}

		@keyframes blobSwimB {
			0% {
				border-radius: 55% 45% 44% 56% / 46% 57% 43% 54%;
				transform: translate3d(7vw, -2vh, 0) rotate(7deg) scale(1);
			}

			100% {
				border-radius: 41% 59% 57% 43% / 59% 38% 62% 41%;
				transform: translate3d(-15vw, 8vh, 0) rotate(-9deg) scale(1.1);
			}
		}

		@keyframes blobSwimC {
			0% {
				border-radius: 60% 40% 48% 52% / 47% 58% 42% 53%;
				transform: translate3d(-8vw, 5vh, 0) rotate(4deg) scale(1.04);
			}

			100% {
				border-radius: 43% 57% 64% 36% / 62% 43% 57% 38%;
				transform: translate3d(10vw, -7vh, 0) rotate(-7deg) scale(0.96);
			}
		}

		@keyframes currentFlow {
			0% {
				opacity: 0.52;
				transform: translate3d(-9vw, -2vh, 0) skewY(-7deg) scaleY(0.9);
			}

			100% {
				opacity: 0.95;
				transform: translate3d(11vw, 3vh, 0) skewY(5deg) scaleY(1.18);
			}
		}

		@media (max-width: 760px) {
			.cm-dna-prototype .dna-svg {
				width: 150vw;
				height: 72vh;
			}

			.cm-dna-prototype .controls {
				align-items: stretch;
				flex-direction: column;
				left: 16px;
				right: auto;
				bottom: 16px;
				width: min(358px, calc(100vw - 32px));
				max-width: min(358px, calc(100vw - 32px));
			}

			.cm-dna-prototype .caption {
				max-width: 100%;
				overflow: hidden;
				min-width: 0;
			}

			.cm-dna-prototype .caption strong {
				font-size: 0.98rem;
				overflow-wrap: anywhere;
			}

			.cm-dna-prototype .actions {
				display: grid;
				gap: 8px;
				grid-template-columns: 1fr 1.18fr;
				min-width: 0;
				width: 100%;
			}

			.cm-dna-prototype .btn {
				flex: 1;
				min-width: 0;
				padding-inline: 0.72rem;
				white-space: nowrap;
				width: 100%;
			}
		}

		@keyframes liquidDrift {
			0% {
				transform: translate3d(-2.5%, -1.5%, 0) rotate(-2deg) scale(1.06);
			}

			45% {
				transform: translate3d(2%, 2.8%, 0) rotate(1.5deg) scale(1.12);
			}

			100% {
				transform: translate3d(-1%, 3.5%, 0) rotate(4deg) scale(1.08);
			}
		}

		@keyframes liquidBehindDna {
			0% {
				border-radius: 45% 55% 42% 58% / 54% 45% 55% 46%;
				transform: translate3d(-3%, -2%, 0) scaleX(1.04) scaleY(0.98);
			}

			50% {
				border-radius: 58% 42% 53% 47% / 43% 59% 41% 57%;
				transform: translate3d(2%, 3%, 0) scaleX(0.98) scaleY(1.05);
			}

			100% {
				border-radius: 41% 59% 48% 52% / 58% 40% 60% 42%;
				transform: translate3d(4%, -1%, 0) scaleX(1.06) scaleY(1.02);
			}
		}

		@media (prefers-reduced-motion: reduce) {
			.cm-dna-prototype .stage.has-highlight .base-rod.is-selected,
			.cm-dna-prototype .stage.show-double-helix .double-helix-layer,
			.cm-dna-prototype .stage.polymerase-working .polymerase-body,
			.cm-dna-prototype .polymerase-contact-glow {
				animation: none;
			}
		}
	

.cm-dna-prototype {
	width: 100%;
	height: min(920px, 100dvh);
	min-height: 640px;
	border-radius: 24px;
	box-shadow: 0 26px 62px rgba(6, 12, 22, 0.32);
}

.cm-dna-prototype-brand {
	position: absolute;
	z-index: 24;
	top: 18px;
	left: 22px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 13px 9px 10px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(17, 29, 47, 0.34);
	backdrop-filter: blur(13px);
	box-shadow: 0 14px 30px rgba(18, 28, 45, 0.2);
	pointer-events: none;
}

.cm-dna-prototype-brand img {
	display: block;
	width: 34px;
	height: 34px;
	object-fit: contain;
	border-radius: 50%;
}

.cm-dna-prototype-brand span {
	color: rgba(248, 253, 255, 0.94);
	font-size: 0.86rem;
	font-weight: 950;
	letter-spacing: 0.02em;
	text-shadow: 0 6px 12px rgba(18, 28, 45, 0.36);
}

.cm-dna-fullscreen-btn {
	position: absolute;
	z-index: 26;
	top: 18px;
	right: 22px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 0.58rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.17);
	border-radius: 999px;
	background: rgba(17, 29, 47, 0.36);
	color: rgba(248, 253, 255, 0.96);
	backdrop-filter: blur(13px);
	box-shadow: 0 14px 30px rgba(18, 28, 45, 0.2);
}

.cm-dna-fullscreen-btn span {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(238, 247, 255, 0.16);
	font-size: 1rem;
	line-height: 1;
}

.cm-dna-fullscreen-btn strong {
	font-size: 0.82rem;
	font-weight: 950;
	letter-spacing: 0.01em;
}

.cm-dna-fullscreen-btn:hover {
	background: rgba(17, 29, 47, 0.52);
	transform: translateY(-1px);
}

.cm-dna-scene-panel {
	position: absolute;
	z-index: 23;
	top: 82px;
	right: 22px;
	bottom: 98px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: min(370px, 29vw);
	min-width: 320px;
	padding: 18px;
	border: 1px solid rgba(229, 246, 255, 0.28);
	border-radius: 26px;
	background:
		radial-gradient(circle at 86% 0%, rgba(105, 186, 214, 0.16), transparent 34%),
		linear-gradient(180deg, rgba(7, 24, 39, 0.94), rgba(4, 14, 27, 0.9));
	color: #f8fdff;
	backdrop-filter: blur(16px);
	box-shadow: 0 24px 54px rgba(5, 12, 22, 0.44);
	overflow: hidden;
}

.cm-dna-scene-panel-head {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.cm-dna-scene-eyebrow {
	color: rgba(207, 238, 255, 0.92);
	font-size: 0.7rem;
	font-weight: 950;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cm-dna-scene-panel h2,
.cm-dna-scene-panel h3,
.cm-dna-scene-panel p {
	margin: 0;
}

.cm-dna-scene-panel h2 {
  color: #f8fdff !important;
  font-size: clamp(1.02rem, 1.25vw, 1.32rem);
  font-weight: 950;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.58), 0 0 20px rgba(158, 224, 255, 0.24);
}

.cm-dna-scene-panel-head p {
	color: rgba(232, 246, 255, 0.94);
	font-size: 0.88rem;
	line-height: 1.45;
}

.cm-dna-scene-progress {
	display: grid;
	gap: 8px;
}

.cm-dna-scene-progress span {
	color: rgba(232, 246, 255, 0.86);
	font-size: 0.74rem;
	font-weight: 900;
}

.cm-dna-scene-progress div {
	height: 9px;
	border-radius: 999px;
	background: rgba(238, 247, 255, 0.18);
	overflow: hidden;
}

.cm-dna-scene-progress i {
	display: block;
	width: 0%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #eef7ff, #7dd3fc 48%, #5b8cff);
	box-shadow: 0 0 18px rgba(238, 247, 255, 0.46);
	transition: width 0.35s ease;
}

.cm-dna-scene-detail {
  position: relative;
  overflow: hidden;
  padding: 16px 16px 16px 20px;
  border: 1px solid rgba(229, 246, 255, 0.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 0%, rgba(128, 220, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(8, 28, 47, 0.96), rgba(2, 10, 20, 0.9));
  color: #f8fdff;
  font-size: 0.93rem;
  line-height: 1.58;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 16px 34px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(110, 211, 255, 0.13);
}

.cm-dna-scene-detail::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e9fbff, #75d6ff 42%, #4d82ff);
  box-shadow: 0 0 18px rgba(142, 221, 255, 0.72);
}

.cm-dna-scene-menu-block {
	display: flex;
	min-height: 0;
	flex: 1;
	flex-direction: column;
	gap: 10px;
}

.cm-dna-scene-menu-block h3 {
	color: rgba(232, 246, 255, 0.92);
	font-size: 0.76rem;
	font-weight: 950;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-dna-scene-menu {
	display: grid;
	gap: 8px;
	min-height: 0;
	padding-right: 4px;
	overflow: auto;
	scrollbar-color: rgba(238, 247, 255, 0.32) transparent;
}

.cm-dna-scene-jump {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	width: 100%;
	padding: 10px 11px;
	border: 1px solid rgba(229, 246, 255, 0.18);
	border-radius: 16px;
	background: rgba(5, 16, 30, 0.62);
	color: #f8fdff;
	text-align: left;
}

.cm-dna-scene-jump:hover {
	background: rgba(12, 36, 56, 0.76);
}

.cm-dna-scene-jump.is-active {
	border-color: rgba(238, 247, 255, 0.72);
	background: linear-gradient(135deg, rgba(226, 244, 255, 0.22), rgba(91, 140, 255, 0.18));
	box-shadow: 0 0 18px rgba(238, 247, 255, 0.2);
}

.cm-dna-scene-jump-number {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(238, 247, 255, 0.24);
	font-size: 0.72rem;
	font-weight: 950;
}

.cm-dna-scene-jump-copy {
	min-width: 0;
}

.cm-dna-scene-jump strong {
	display: block;
	overflow: hidden;
	font-size: 0.82rem;
	font-weight: 900;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cm-dna-scene-jump-kicker {
	display: block;
	margin-top: 2px;
	overflow: hidden;
	color: rgba(232, 246, 255, 0.78);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (min-width: 1025px) {
	.cm-dna-prototype .stage {
		inset: 0 414px 0 0;
	}

	.cm-dna-prototype .dna-svg {
		width: 118%;
	}

	.cm-dna-prototype .stage.is-scrolling .dna-svg,
	.cm-dna-prototype .stage.is-fullwidth .dna-svg,
	.cm-dna-prototype .stage.is-single-bottom .dna-svg,
	.cm-dna-prototype .stage.show-double-dna .dna-svg,
	.cm-dna-prototype .stage.show-double-helix .dna-svg {
		width: 100%;
		height: 100%;
	}

	.cm-dna-prototype .controls {
		right: 414px;
	}

	.cm-dna-prototype .caption {
		max-width: min(620px, calc(100vw - 560px));
	}
}

.cm-dna-prototype:fullscreen {
	width: 100vw;
	height: 100dvh;
	min-height: 100dvh;
	border-radius: 0;
}

body.cm-dna-page-body .cm-dna-page-content {
	padding: 0;
	gap: 0;
	overflow: hidden;
}

body.cm-dna-page-body .cm-dna-prototype {
	height: calc(100dvh - 74px);
	min-height: 620px;
	border-radius: 0;
	box-shadow: none;
}

@media (max-width: 760px) {
	.cm-dna-prototype {
		height: auto;
		min-height: 560px;
		border-radius: 0;
		overflow: auto;
	}

	body.cm-dna-page-body .cm-dna-prototype {
		height: auto;
		min-height: 560px;
	}

	body.cm-dna-page-body .cm-dna-page-content {
		overflow: auto;
	}

	.cm-dna-prototype-brand {
		top: 12px;
		left: 12px;
		padding: 7px 10px 7px 8px;
	}

	.cm-dna-prototype-brand img {
		width: 28px;
		height: 28px;
	}

	.cm-dna-prototype-brand span {
		font-size: 0.74rem;
	}

	.cm-dna-fullscreen-btn {
		top: 12px;
		right: 12px;
		min-height: 40px;
		padding: 0.5rem 0.68rem;
	}

	.cm-dna-fullscreen-btn strong {
		display: none;
	}

	.cm-dna-prototype .stage {
		position: relative;
		inset: auto;
		height: min(68svh, 620px);
		min-height: 430px;
	}

	.cm-dna-prototype .controls {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		display: grid;
		gap: 9px;
		margin: -2px 12px 10px;
		padding: 10px;
		border: 1px solid rgba(229, 246, 255, 0.18);
		border-radius: 20px;
		background:
			linear-gradient(180deg, rgba(7, 22, 38, 0.82), rgba(3, 11, 22, 0.74));
		box-shadow: 0 14px 30px rgba(4, 10, 20, 0.24);
		backdrop-filter: blur(12px);
		pointer-events: auto;
	}

	.cm-dna-prototype .controls .caption {
		max-width: none;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
	}

	.cm-dna-prototype .controls .caption span {
		margin-bottom: 2px;
		color: rgba(204, 231, 245, 0.82);
		font-size: 0.58rem;
		letter-spacing: 0.12em;
	}

	.cm-dna-prototype .controls .caption strong {
		display: -webkit-box;
		color: #f8fdff;
		font-size: 0.78rem;
		line-height: 1.22;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.cm-dna-scene-panel {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		width: auto;
		min-width: 0;
		max-height: none;
		margin: 10px 12px 12px;
		padding: 15px;
	}

	.cm-dna-scene-menu {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-height: 300px;
	}

	.cm-dna-scene-jump {
		padding: 9px;
	}

	.cm-dna-prototype .actions {
		display: grid;
		grid-template-columns: 1fr 1.18fr;
		gap: 8px;
		width: 100%;
	}

	.cm-dna-prototype #prev-btn {
		order: 1;
	}

	.cm-dna-prototype #next-btn {
		order: 2;
	}

	.cm-dna-prototype .btn {
		min-height: 38px;
		width: 100%;
		padding: 0.48rem 0.7rem;
		border-radius: 14px;
		font-size: 0.82rem;
		line-height: 1;
		box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
	}

	.cm-dna-prototype .reset-btn {
		position: static;
		order: 3;
		grid-column: 1 / -1;
		justify-self: center;
		display: inline-grid;
		place-items: center;
		width: 42px;
		min-width: 42px;
		min-height: 34px;
		height: 34px;
		margin-top: 2px;
		padding: 0;
		border-radius: 12px;
		background: rgba(238, 247, 255, 0.09);
		box-shadow: inset 0 0 0 1px rgba(229, 246, 255, 0.12);
	}

	.cm-dna-prototype .btn-reset-icon {
		display: inline;
		font-size: 0.98rem;
		line-height: 1;
	}

	.cm-dna-prototype .btn-reset-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.cm-dna-prototype .btn.primary {
		background: linear-gradient(135deg, rgba(239, 249, 255, 0.96), rgba(142, 211, 255, 0.92));
		color: #0f2639;
		box-shadow: 0 12px 24px rgba(31, 132, 178, 0.24);
	}

	.cm-dna-prototype .stage.show-direction .dna-svg,
	.cm-dna-prototype .stage.show-double-dna .dna-svg,
	.cm-dna-prototype .stage.show-double-helix .dna-svg {
		width: 222vw;
		height: min(56svh, 430px);
		min-height: 380px;
		max-height: 430px;
		transform: none;
	}

	.cm-dna-prototype .stage.show-direction .dna-svg {
		width: 100vw;
		height: min(52svh, 410px);
		min-height: 360px;
		max-height: 410px;
		object-fit: contain;
	}

	.cm-dna-prototype .stage.show-double-dna .dna-svg,
	.cm-dna-prototype .stage.show-double-helix .dna-svg {
		width: 232vw;
		height: min(58svh, 440px);
		min-height: 390px;
		max-height: 440px;
	}
}

@media (min-width: 761px) and (max-width: 1024px) {
	.cm-dna-prototype {
		height: auto;
		min-height: 720px;
		overflow: auto;
	}

	body.cm-dna-page-body .cm-dna-page-content {
		overflow: auto;
	}

	body.cm-dna-page-body .cm-dna-prototype {
		height: auto;
		min-height: 720px;
	}

	.cm-dna-prototype .stage {
		position: relative;
		inset: auto;
		height: min(66svh, 660px);
		min-height: 520px;
	}

	.cm-dna-scene-panel {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		width: auto;
		min-width: 0;
		max-height: none;
		margin: 12px 18px 16px;
	}

	.cm-dna-scene-menu {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-height: 320px;
	}

	.cm-dna-prototype .controls {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		margin: 0 18px 14px;
		padding: 10px;
		border: 1px solid rgba(229, 246, 255, 0.18);
		border-radius: 20px;
		background: linear-gradient(180deg, rgba(7, 22, 38, 0.82), rgba(3, 11, 22, 0.74));
		backdrop-filter: blur(12px);
		box-shadow: 0 14px 30px rgba(4, 10, 20, 0.24);
		pointer-events: auto;
	}

	.cm-dna-prototype .controls .caption {
		max-width: none;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
	}

	.cm-dna-prototype .actions {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		width: 100%;
	}
}