/* Mutation lesson. All rules scoped under .mu-* */
.mu-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mu-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.mu-cap { font-size: 12.5px; color: var(--dim); text-align: center; }
.mu-hero { display: grid; place-items: center; }
.mu-hero img { width: 300px; max-width: 100%; max-height: 36vh; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.mu-lab { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* the copier */
.mu-tape { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; width: 100%; }
.mu-l { display: grid; place-items: center; height: 30px; border-radius: 6px; font: 600 15px var(--mono); color: var(--dim); background: var(--surface); border: 1.5px solid var(--line); transition: border-color .15s, color .15s, background .15s; }
.mu-orig .mu-l.on { color: var(--gold); border-color: var(--gold); background: rgba(252,192,80,.16); }
.mu-copy .mu-l { color: var(--text); }
.mu-copy .mu-l.ok { border-color: rgba(63,214,154,.5); }
.mu-copy .mu-l.bad { color: #FF8A8A; border-color: var(--red); background: rgba(216,85,85,.18); }
.mu-timer { width: 100%; height: 8px; border-radius: 999px; background: var(--raised); overflow: hidden; margin-top: 4px; }
.mu-timer i { display: block; height: 100%; width: 100%; background: var(--gold); border-radius: 999px; }
.mu-tally { font-size: 14px; font-weight: 700; color: var(--dim); }
.mu-tally b { color: #FF8A8A; font-variant-numeric: tabular-nums; }
.mu-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mu-key { height: 64px; border-radius: 16px; font: 700 26px var(--mono); color: var(--text); background: var(--raised); border: 2px solid var(--line-strong); box-shadow: 0 4px 0 rgba(0,0,0,.35); cursor: pointer; }
.mu-key:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.mu-key:disabled { opacity: .4; }
.mu-big { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 0; }
.mu-big b { font: 700 34px var(--mono); color: var(--gold); letter-spacing: -.01em; }
.mu-big span { font-size: 14px; color: var(--dim); font-weight: 600; }

/* a gene and its protein */
.mu-gene { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.mu-word { display: grid; place-items: center; height: 40px; border-radius: 10px; font: 600 17px var(--mono); letter-spacing: .06em; color: var(--text); background: var(--surface); border: 1.5px solid var(--line-strong); }
.mu-word.hi { color: var(--gold); border-color: var(--gold); background: rgba(252,192,80,.14); }
.mu-arrow { color: var(--faint); font-size: 16px; line-height: 1; }
.mu-chain { display: flex; align-items: center; gap: 4px; min-height: 34px; }
.mu-bead { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(0,0,0,.25); }
.mu-bead.g { background: var(--gold); }
.mu-bead.v { background: var(--violet-bright); }
.mu-bead.m { background: var(--mint); }
.mu-bead.r { background: var(--streak); }
.mu-chain .mu-bead { animation: muIn .25s cubic-bezier(.2,.8,.2,1) both; }
@keyframes muIn { from { transform: scale(.3); opacity: 0; } }
.mu-stop { display: inline-block; padding: 3px 7px; border-radius: 6px; background: var(--red); color: #fff; font: 800 12px var(--sans); letter-spacing: .06em; }
.mu-cut { font-size: 12.5px; font-weight: 700; color: #FF8A8A; margin-left: 4px; }
.mu-key-t { display: grid; grid-template-columns: repeat(5, auto); justify-content: center; gap: 6px 12px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); margin-top: 4px; }
.mu-key-t span { display: inline-flex; align-items: center; gap: 6px; }
.mu-key-t code { font: 600 14px var(--mono); color: var(--text); }
.mu-key-t .mu-bead { width: 18px; height: 18px; }

/* where they land */
.mu-dna { fill: var(--raised); stroke: var(--line-strong); stroke-width: 1; }
.mu-gn { fill: var(--gold); }
.mu-drop line { stroke: #FF8A8A; stroke-width: 2.5; stroke-linecap: round; animation: muDrop .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes muDrop { from { opacity: 0; transform: translateY(-8px); } }
.mu-legend { display: flex; gap: 16px; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.mu-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mu-kg { display: inline-block; width: 4px; height: 14px; background: var(--gold); }
.mu-kd { display: inline-block; width: 18px; height: 10px; border-radius: 5px; background: var(--raised); border: 1px solid var(--line-strong); }
.mu-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.mu-three div { display: flex; flex-direction: column; gap: 4px; padding: 14px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.mu-three b { font-size: 18px; color: var(--gold); }
.mu-three span { font-size: 14px; font-weight: 700; color: var(--text); }
.mu-three small { font-size: 12px; color: var(--dim); line-height: 1.3; }

/* which cell */
.mu-t { fill: var(--dim); font: 700 12px var(--sans); text-anchor: middle; }
.mu-sk { fill: #D9A48A; stroke: #A9735C; stroke-width: 1; transition: fill .3s; }
.mu-sk.mut { fill: #FF6B6B; stroke: #fff; stroke-width: 1.5; }
.mu-sun line { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.mu-skin.burn .mu-sun line { opacity: 1; }
.mu-egg { fill: rgba(169,155,255,.18); stroke: var(--violet-bright); stroke-width: 2; }
.mu-nuc { fill: var(--violet-bright); }
.mu-ages { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.mu-ages div { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.mu-ages b { font-size: 16px; color: var(--gold); }
.mu-ages span { font-size: 14px; color: var(--text); line-height: 1.35; }