/* Recombinant DNA lesson. All rules scoped under .rd-* */
.rd-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rd-sc > svg { display: block; width: 100%; max-width: 400px; height: auto; overflow: visible; }
.rd-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.rd-hero img { width: 260px; max-width: 100%; max-height: 38vh; object-fit: contain; display: block; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123,92,253,.35)); }
.rd-t { fill: var(--text); font: 600 13px var(--sans); text-anchor: middle; }
.rd-t.dim { fill: var(--dim); }
.rd-t.sm { font-size: 12px; }
.rd-t.gold { fill: var(--gold); font-weight: 700; }
.rd-t.mono { font: 700 15px var(--mono); }

/* find the sites */
.rd-sites { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--dim); }
.rd-sites b { font: 700 18px var(--mono); letter-spacing: .12em; color: var(--gold); padding: 3px 10px; border: 1.5px solid var(--gold); border-radius: 8px; background: rgba(252,192,80,.12); }
.rd-find { display: flex; flex-direction: column; gap: 8px; }
.rd-frow { display: grid; grid-template-columns: repeat(9, 34px); gap: 3px; }
.rd-fl { height: 44px; padding: 0; border-radius: 8px; font: 700 17px var(--mono); color: var(--text); background: var(--surface); border: 1.5px solid var(--line); cursor: pointer; transition: background .2s, border-color .2s; }
.rd-fl.hit { background: rgba(63,214,154,.2); border-color: var(--mint); color: var(--mint); }
.rd-fl.miss { background: rgba(216,85,85,.2); border-color: var(--red); }
.rd-found { font-size: 13px; font-weight: 700; color: var(--dim); }
.rd-found b { color: var(--mint); font-family: var(--mono); }

/* the staggered cut */
.rd-cell { fill: rgba(169,155,255,.16); stroke: var(--violet-bright); stroke-width: 1.2; transition: fill .3s, stroke .3s; }
.rd-zig { fill: none; stroke: var(--mint); stroke-width: 3; stroke-dasharray: 4 4; stroke-linejoin: round; }
.rd-cut.cut .rd-zig { opacity: 0; }
.rd-cut.tails .rd-bl .rd-cell:nth-of-type(n+4), .rd-cut.tails .rd-tr .rd-cell:nth-of-type(-n+4) { fill: rgba(252,192,80,.25); stroke: var(--gold); }
.rd-keys { display: flex; gap: 14px; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.rd-keys span { display: inline-flex; align-items: center; gap: 6px; }
.rd-keys b { display: inline-block; width: 16px; height: 11px; border-radius: 3px; background: rgba(252,192,80,.3); border: 1.5px solid var(--gold); }

/* the ring and the frog piece */
.rd-ring { touch-action: none; }
.rd-rng { fill: none; stroke: var(--violet-bright); stroke-width: 10; stroke-linecap: butt; }
.rd-rtail, .rd-ftail { fill: none; stroke: var(--gold); stroke-width: 5; }
.rd-fp { fill: none; stroke: #6FCB6A; stroke-width: 10; }
.rd-fhit { fill: none; stroke: transparent; stroke-width: 60; }
.rd-frog { cursor: grab; }
.rd-ring.drag .rd-frog { cursor: grabbing; }
.rd-flab { fill: #8FE08A; font-weight: 700; text-anchor: end; }
.rd-ring.match .rd-rtail, .rd-ring.match .rd-ftail { stroke-width: 7; filter: drop-shadow(0 0 4px rgba(252,192,80,.8)); }
.rd-ring.stuck .rd-glab, .rd-ring.stuck .rd-flab { opacity: 0; }
.rd-seals circle { fill: var(--mint); opacity: 0; transition: opacity .3s; }
.rd-ring.sealed .rd-seals circle { opacity: 1; }
.rd-ring.sealed .rd-rtail, .rd-ring.sealed .rd-ftail { opacity: 0; }
.rd-steps { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rd-steps span { font-size: 12.5px; font-weight: 700; color: var(--faint); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); transition: color .3s, border-color .3s; }
.rd-steps span.on { color: var(--gold); border-color: var(--gold); }
.rd-steps i { color: var(--faint); font-style: normal; }

/* inside the cell */
.rd-bac { fill: rgba(123,92,253,.1); stroke: var(--violet-bright); stroke-width: 2; }
.rd-rna path { fill: none; stroke: #8FE08A; stroke-width: 3; stroke-linecap: round; }
.rd-rna { opacity: 0; transition: opacity .8s; }
.rd-cell2.on .rd-rna { opacity: 1; }
.rd-cell2 .rd-rng, .rd-cell2 .rd-fp { stroke-width: 6; }
.rd-chain { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; }
.rd-chain span { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); font-size: 15px; font-weight: 600; color: var(--text); animation: rdIn .3s ease-out both; }
.rd-chain span:nth-child(2) { animation-delay: .15s; } .rd-chain span:nth-child(3) { animation-delay: .3s; } .rd-chain span:nth-child(4) { animation-delay: .45s; }
.rd-chain b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 13px; flex: none; }
@keyframes rdIn { from { opacity: 0; transform: translateY(6px); } }

/* cards */
.rd-lab { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; flex-wrap: nowrap; }
.rd-lab div { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line-strong); text-align: center; }
.rd-lab b { font-size: 15px; color: var(--text); }
.rd-lab span { font-size: 13px; color: var(--dim); line-height: 1.3; }
.rd-lab i { font-style: normal; color: var(--faint); font-weight: 700; }
.rd-two { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 330px; }
.rd-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--violet-bright); }
.rd-card.dim { border-color: var(--line-strong); }
.rd-card.gold { border-color: var(--gold); background: rgba(252,192,80,.08); }
.rd-card b { font-size: 16px; color: var(--text); }
.rd-card span { font-size: 14px; color: var(--dim); }

@media (max-height: 700px) {
  .rd-hero img { width: 200px; }
  .rd-chain span { padding: 8px 12px; font-size: 14px; }
}