/* 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; }

/* most do nothing */
.mu-three { display: grid; grid-template-columns: repeat(2, 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; }