/* DNA Sequencing lesson. All rules scoped under .sq-* */
.sq-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sq-sc > svg { display: block; width: 100%; max-width: 400px; height: auto; overflow: visible; }
.sq-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.sq-glab { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.sq-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)); }
.sq-t { fill: var(--text); font: 600 13px var(--sans); text-anchor: middle; }
.sq-t.dim { fill: var(--dim); }
.sq-t.sm { font-size: 12px; }
.sq-t.start { text-anchor: start; }

/* beads: a strand, letters unknown */
.sq-beads { display: flex; gap: 4px; min-height: 22px; }
.sq-beads i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 700 15px var(--mono); font-style: normal; }
.sq-q i { color: var(--faint); background: var(--surface); border: 1.5px dashed var(--line-strong); }
.sq-copies { display: flex; flex-direction: column; gap: 5px; width: 100%; align-items: center; min-height: 160px; }
.sq-copy { align-self: center; width: 268px; }
.sq-copy i { height: 22px; background: rgba(169,155,255,.22); border: 1.5px solid var(--violet-bright); animation: sqIn .15s ease-out both; font-size: 13px; }
.sq-copy i.sq-stop { background: rgba(216,85,85,.35); border-color: #FF8A8A; color: #fff; }
@keyframes sqIn { from { opacity: 0; transform: scale(.6); } }
.sq-keys { display: flex; gap: 14px; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.sq-keys span { display: inline-flex; align-items: center; gap: 6px; }
.sq-kn, .sq-kt { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font: 700 11px/1 var(--mono); }
.sq-kn { background: rgba(169,155,255,.22); border: 1.5px solid var(--violet-bright); }
.sq-kt { background: rgba(216,85,85,.35); border: 1.5px solid #FF8A8A; color: #fff; font-size: 12px; }

/* the gel */
.sq-jelly { fill: rgba(169,155,255,.07); stroke: var(--line-strong); stroke-width: 1.5; }
.sq-well { fill: var(--bg); stroke: var(--faint); stroke-width: 1.2; }
.sq-lane { font: 800 15px var(--mono); transition: opacity .5s; }
.sq-arrow { fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sq-bhit { fill: transparent; }
.sq-bar { fill: #D9D2C4; transition: fill .4s; }
.sq-bin { cursor: pointer; }
.sq-bin.wrong .sq-bar { fill: var(--red); }
.sq-bin.off { opacity: .55; }
.sq-bin.right .sq-bar, .sq-band.lit .sq-bar { fill: var(--gold); }
.sq-gel.one .sq-band.lit .sq-bar { stroke: #fff; stroke-width: 1; }
.sq-rd { font: 700 17px var(--mono); }
.sq-gel.one .sq-lane, .sq-gel.one .sq-well { opacity: 0; }

/* rebuilding from pieces */
.sq-asm { display: flex; flex-direction: column; gap: 5px; width: 320px; max-width: 100%; }
.sq-arow { display: flex; }
.sq-arow i { width: 20px; height: 24px; flex: none; display: grid; place-items: center; font: 600 14px var(--mono); font-style: normal; color: var(--text); background: rgba(169,155,255,.18); border-top: 1.5px solid var(--violet-bright); border-bottom: 1.5px solid var(--violet-bright); }
.sq-arow.in { animation: sqIn .25s ease-out both; }
.sq-arow i.ov { background: rgba(63,214,154,.28); border-color: var(--mint); }
.sq-cons { width: 320px; max-width: 100%; }
.sq-cons i { background: var(--surface); border-color: var(--line); color: var(--gold); }
.sq-cons i.on { background: rgba(252,192,80,.14); border-color: var(--gold); }
.sq-frag { font-family: var(--mono); letter-spacing: .1em; min-height: 44px; }

/* repeats */
.sq-rep, .sq-piece, .sq-ghost { display: flex; }
.sq-rep i, .sq-piece i, .sq-ghost i { width: 16px; height: 24px; flex: none; display: grid; place-items: center; font: 600 13px var(--mono); font-style: normal; }
.sq-rep i { color: var(--text); background: rgba(252,192,80,.1); border-top: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); }
.sq-piece i { color: #fff; background: rgba(123,92,253,.35); border-top: 1.5px solid var(--violet-bright); border-bottom: 1.5px solid var(--violet-bright); }
.sq-ghosts { width: 320px; display: flex; flex-direction: column; gap: 4px; }
.sq-ghost { animation: sqIn .25s ease-out both; }
.sq-ghost i { color: var(--mint); background: rgba(63,214,154,.14); border-top: 1.5px solid var(--mint); border-bottom: 1.5px solid var(--mint); height: 20px; }
.sq-long { width: 320px; height: 26px; border-radius: 6px; border: 2px solid var(--mint); background: rgba(63,214,154,.14); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--mint); opacity: 0; transform: scaleX(.2); transition: opacity .4s, transform .6s cubic-bezier(.2,.8,.2,1); }
.sq-long.on { opacity: 1; transform: none; }
.sq-done { position: relative; width: 100%; height: 30px; border-radius: 999px; background: var(--surface); overflow: hidden; border: 1px solid var(--line); }
.sq-done i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); border-radius: 999px; }
.sq-done b { position: absolute; right: 12px; top: 5px; font: 700 14px var(--mono); color: var(--bg); }

/* cost */
.sq-cost { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.sq-crow { display: grid; grid-template-columns: 78px 1fr; gap: 4px 10px; align-items: center; }
.sq-crow span { font-size: 13px; font-weight: 700; color: var(--dim); }
.sq-crow b { grid-column: 2; font: 700 15px var(--mono); color: var(--text); min-height: 18px; }
.sq-ctrack { height: 16px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.sq-ctrack i { display: block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.sq-crow.y01 i { background: var(--red); }
.sq-crow.you i { background: var(--violet-bright); }
.sq-crow.y22 i { background: var(--mint); }

/* outbreak */
.sq-germs { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.sq-grow span { display: block; font-size: 12.5px; font-weight: 700; color: var(--dim); margin-bottom: 3px; }
.sq-grow.other span { color: var(--faint); }
.sq-gseq { display: flex; gap: 2px; }
.sq-gseq i { flex: 1; max-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; font: 600 14px var(--mono); font-style: normal; color: var(--text); background: var(--surface); border: 1.5px solid var(--line); transition: background .3s, border-color .3s; }
.sq-gseq i.m { background: rgba(63,214,154,.16); border-color: var(--mint); }
.sq-gseq i.x { background: rgba(216,85,85,.25); border-color: var(--red); color: #FF8A8A; }

@media (max-height: 700px) {
  .sq-hero img { width: 200px; }
  .sq-copies { min-height: 115px; gap: 4px; }
  .sq-beads.sq-copy i { height: 18px; }
  .sq-beads i { height: 26px; }
  .sq-germs { gap: 6px; }
  .sq-gseq i { height: 22px; }
}