/* CRISPR lesson. All rules scoped under .cr-* */

.cr-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cr-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.cr-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.cr-note .term { color: var(--dim); }
.cr-hero { width: min(88%, 340px); }
.cr-hero img { width: 100%; display: block; }
.cr-hero.cr-tall { width: auto; }
.cr-hero.cr-tall img { height: 210px; width: auto; margin: 0 auto; }
.cr-glab { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.cr-t { fill: var(--text); font: 600 13px var(--sans); text-anchor: middle; }
.cr-t.dim { fill: var(--dim); }
.cr-t.sm { font-size: 12px; }
.cr-t.mono { font: 600 13px var(--mono); }
.cr-t.big { font-size: 14px; }
.cr-t.start { text-anchor: start; }

/* letter grids */
.cr-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; width: 100%; }
.cr-l {
  display: grid; place-items: center; height: 40px; border-radius: 8px; padding: 0;
  font: 600 17px var(--mono); color: var(--text); background: var(--surface); border: 1.5px solid var(--line);
  transition: border-color .2s, background .2s, opacity .3s;
}
button.cr-l { cursor: pointer; }
.cr-ref .cr-l { height: 24px; font-size: 13px; border-radius: 5px; color: var(--dim); }
.cr-ref .cr-l.cr-was { color: var(--gold); border-color: var(--gold); }
.cr-tap .cr-l { height: 44px; }
.cr-tap .cr-l.wrong { border-color: var(--red); background: rgba(216,85,85,.16); }
.cr-tap .cr-l.off { opacity: .45; }
.cr-tap .cr-l.right { border-color: var(--gold); background: rgba(252,192,80,.2); color: var(--gold); opacity: 1; }
.cr-hay { width: 100%; display: block; }
.cr-count { font-size: 14px; color: var(--dim); font-weight: 600; }
.cr-count b { font: 700 20px var(--mono); color: var(--gold); }

/* the mugshot: a phage's DNA gets in, a piece is snipped and stored */
.cr-cell { fill: rgba(123,92,253,.10); stroke: var(--violet-bright); stroke-width: 2; }
.cr-own { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.cr-dia { fill: var(--faint); }
.cr-chipr { stroke-width: 1.5; }
.cr-chipr.old { fill: rgba(169,155,255,.18); stroke: var(--violet-bright); }
.cr-chipr.new { fill: rgba(252,192,80,.18); stroke: var(--gold); opacity: 0; transition: opacity .3s; }
.cr-slot { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 4 3; }
.cr-t.red { fill: #FF8A8A; }
.cr-t.gold { fill: var(--gold); }
.cr-phimg { transition: transform 1s cubic-bezier(.3,.7,.4,1), opacity .6s; }
.cr-inj, .cr-piece { opacity: 0; transition: opacity .5s; }
.cr-piece { transition: opacity .3s, transform .9s cubic-bezier(.3,.7,.3,1); }
.cr-snips line { stroke: var(--mint); stroke-width: 2.5; opacity: 0; transition: opacity .2s; }
.cr-mug.s1 .cr-phimg { transform: translateY(14px); }
.cr-mug.s1 .cr-inj { opacity: 1; }
.cr-mug.s2 .cr-snips line { opacity: 1; }
.cr-mug.s2 .cr-inj .pc { fill: var(--gold); }
.cr-mug.s3 .cr-inj { opacity: 0; }
.cr-mug.s3 .cr-snips line { opacity: 0; }
.cr-mug.s3 .cr-phimg { opacity: 0; }
.cr-mug.s3 .cr-piece { opacity: 1; }
.cr-mug.s3 .cr-chipr.new { opacity: 1; }
.cr-steps { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cr-steps span { font-size: 12.5px; font-weight: 700; color: var(--faint); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); transition: color .3s, border-color .3s; }
.cr-steps span.on { color: var(--gold); border-color: var(--gold); }
.cr-steps i { color: var(--faint); font-style: normal; }

/* chips of letters, the phages and the cell's stored pieces */
.cr-chip { display: inline-flex; gap: 1px; padding: 3px 5px; border-radius: 6px; background: var(--surface); border: 1.5px solid var(--line-strong); }
.cr-chip i { font: 600 14px var(--mono); font-style: normal; color: var(--text); width: 10px; text-align: center; border-radius: 2px; }
.cr-chip.old { background: rgba(169,155,255,.14); border-color: var(--violet-bright); }
.cr-chip.new { background: rgba(252,192,80,.14); border-color: var(--gold); }
.cr-chip.glow { box-shadow: 0 0 0 3px rgba(252,192,80,.35); }
.cr-chip i.m { color: var(--mint); }
.cr-chip i.x { color: #FF8A8A; background: rgba(216,85,85,.25); }
.cr-phages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.cr-pb {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 8px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 14px; color: inherit; cursor: pointer; transition: border-color .2s, opacity .3s;
}
.cr-pb img { height: 58px; width: auto; display: block; transition: filter .3s, opacity .3s; }
.cr-pl { font-size: 12px; font-weight: 700; color: var(--dim); }
.cr-pb.wrong { border-color: var(--red); }
.cr-pb.off { opacity: .5; }
.cr-pb.right { border-color: var(--mint); }
.cr-pb.right .cr-pl { color: var(--mint); }
.cr-slash { position: absolute; left: 20%; top: 30px; width: 60%; height: 3px; background: var(--mint); border-radius: 2px; transform: rotate(-28deg) scaleX(0); transform-origin: left center; transition: transform .25s; }
.cr-pb.cut .cr-slash { transform: rotate(-28deg) scaleX(1); }
.cr-pb.cut img { filter: grayscale(.8); opacity: .45; }
.cr-hcell {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px 12px; border: 2px solid var(--violet-bright); background: rgba(123,92,253,.10); border-radius: 40px;
}
.cr-mem { display: flex; align-items: center; gap: 6px; }
.cr-rep { display: inline-block; width: 10px; height: 10px; background: var(--faint); transform: rotate(45deg); flex: none; }
.cr-cas { position: absolute; left: 14px; top: -13px; padding: 3px 10px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 12px; font-weight: 800; }
.cr-wide .cr-mem { gap: 5px; }
.cr-wide .cr-chip i { width: 9px; font-size: 13px; }
.cr-keys { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.cr-keys span { display: inline-flex; align-items: center; gap: 6px; }
.cr-keys .cr-rep { width: 9px; height: 9px; }
.cr-kc { display: inline-block; width: 16px; height: 11px; border-radius: 3px; background: rgba(169,155,255,.3); border: 1.5px solid var(--violet-bright); }
.cr-kg { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #5A5550; }
.cr-kp { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--mint); }

.cr-cup svg { width: 120px; height: auto; display: block; }
.cr-cup .cr-t { font-size: 14px; }
.cr-cupb { fill: #EDE6D8; }
.cr-cupt { fill: #F8F3EA; stroke: #CFC6B4; stroke-width: 1.5; }
.cr-rod { fill: var(--violet); }

/* the guide you drag */
.cr-drag { touch-action: none; cursor: grab; }
.cr-rail { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.cr-grab { fill: transparent; }
.cr-c9 { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 1.5; }
.cr-t.c9t { fill: #fff; font-weight: 800; }
.cr-gbox { fill: rgba(123,92,253,.25); stroke: var(--violet-bright); stroke-width: 1.5; }
.cr-t.gl { fill: #fff; }
.cr-hl rect.m { fill: rgba(63,214,154,.28); }
.cr-hl rect.x { fill: rgba(216,85,85,.22); }
.cr-dl, .cr-dr { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.cr-drag.cut .cr-dl { transform: translateX(-7px); }
.cr-drag.cut .cr-dr { transform: translateX(7px); }
.cr-cutl { stroke: var(--mint); stroke-width: 3; opacity: 0; transition: opacity .2s; }
.cr-drag.cut .cr-cutl { opacity: 1; }
.cr-drag.cut .cr-gbox { stroke: var(--mint); }
.cr-hl { transition: opacity .2s; }
.cr-drag.cut .cr-hl { opacity: 0; }

/* how long the guide has to be */
.cr-strip { display: flex; gap: 2px; min-height: 26px; flex-wrap: nowrap; }
.cr-strip i { width: 15px; height: 24px; display: grid; place-items: center; border-radius: 3px; font: 600 13px var(--mono); font-style: normal; color: #fff; background: rgba(123,92,253,.28); border: 1px solid var(--violet-bright); }
.cr-bign { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cr-bign b { font: 700 40px var(--mono); color: var(--red); line-height: 1.1; transition: color .3s; }
.cr-bign.one b { color: var(--mint); }
.cr-bign span { font-size: 13px; color: var(--dim); max-width: 260px; line-height: 1.3; }
.cr-lbar { width: 100%; height: 10px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.cr-lbar i { display: block; height: 100%; background: var(--red); border-radius: 999px; transition: width .25s; }

/* the cut, the glue and the patch */
.cr-cutstrand { display: flex; align-items: center; justify-content: center; }
.cr-cutstrand i {
  width: 16px; height: 30px; display: grid; place-items: center; flex: none; font: 600 14px var(--mono); font-style: normal; color: var(--text);
  background: rgba(252,192,80,.12); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transition: width .4s, opacity .4s, color .3s, background .3s;
}
.cr-cutstrand i.sp { margin-right: 5px; }
.cr-cutstrand i.x { color: #FF8A8A; background: rgba(216,85,85,.3); }
.cr-cutstrand i.gone { width: 0; opacity: 0; }
.cr-cutstrand i.cp { background: rgba(63,214,154,.16); }
.cr-cutstrand i.fix { color: var(--mint); background: rgba(63,214,154,.35); font-weight: 800; }
.cr-gap { width: 0; height: 30px; flex: none; transition: width .4s; }
.cr-cutstrand.open .cr-gap { width: 20px; }
.cr-out { min-height: 18px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FF8A8A; text-align: center; }
.cr-out.ok { color: var(--mint); }
.cr-after { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cr-words { display: flex; gap: 6px; justify-content: center; animation: crIn .3s ease-out both; }
.cr-w { display: flex; padding: 3px 5px; border-radius: 6px; border: 1.5px solid var(--mint); background: rgba(63,214,154,.12); }
.cr-w.x { border-color: var(--red); background: rgba(216,85,85,.16); }
.cr-w i { font: 600 14px var(--mono); font-style: normal; width: 10px; text-align: center; color: var(--text); }
.cr-words.dim .cr-w { border-color: var(--line-strong); background: none; }
.cr-words.dim .cr-w i { color: var(--dim); }
@keyframes crIn { from { opacity: 0; transform: translateY(5px); } }
.cr-patch { display: inline-flex; gap: 1px; margin-right: 10px; }
.cr-patch i { width: 13px; height: 22px; display: grid; place-items: center; font: 600 13px var(--mono); font-style: normal; color: var(--mint); background: rgba(63,214,154,.12); border-top: 1.5px solid var(--mint); border-bottom: 1.5px solid var(--mint); }
.cr-patch i:nth-child(5) { color: var(--gold); background: rgba(252,192,80,.2); }

/* medicine */
.cr-pool { display: grid; grid-template-columns: repeat(6, 44px); gap: 12px; justify-content: center; padding: 8px 0; }
.cr-pool i { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--violet-bright); background: rgba(123,92,253,.12); position: relative; transition: background .3s, border-color .3s; }
.cr-pool i b { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 3px; margin-left: -1.5px; background: var(--gold); border-radius: 2px; transform: scaleY(0); transition: transform .2s; }
.cr-pool i.cut b { transform: scaleY(1); }
.cr-pool i.g { border-color: #5A5550; background: rgba(90,85,80,.35); }
.cr-pool i.g b { background: #8A847B; }
.cr-pool i.p { border-color: var(--mint); background: rgba(63,214,154,.25); }
.cr-pool i.p b { background: var(--mint); }
.cr-swbox { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.cr-crack { fill: none; stroke: var(--red); stroke-width: 3; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.cr-sw.broke .cr-crack { opacity: 1; }
.cr-sw.broke .cr-swg { opacity: .5; }
.cr-swg { transition: opacity .4s; }
.cr-arrow { fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; }
.cr-hbf { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.cr-sw.on .cr-hbf { fill: rgba(63,214,154,.18); stroke: var(--mint); }
.cr-sw.on .cr-hbft { fill: var(--mint); }
.cr-rbc { fill: #C8423F; stroke: #E86A66; stroke-width: 1.5; transition: d .8s; }
.cr-dimple { fill: #A8322F; opacity: 0; transition: opacity .6s .3s; }
.cr-sw.round .cr-dimple { opacity: 1; }
.cr-dots { display: grid; grid-template-columns: repeat(8, 22px); gap: 9px; justify-content: center; padding: 6px 0; }
.cr-dots i { width: 22px; height: 22px; border-radius: 50%; background: #5A5550; }
.cr-dots i.ok { background: var(--mint); }

/* other jobs */
.cr-glass { fill: rgba(169,155,255,.08); stroke: var(--violet-bright); stroke-width: 2.5; }
.cr-tag { fill: #5A5550; transition: fill .4s; }
.cr-halo { opacity: 0; transition: opacity .8s; }
.cr-tube.lit .cr-tag { fill: var(--gold); }
.cr-tube.lit .cr-halo { opacity: 1; }
.cr-mem2 { fill: none; stroke: var(--violet-bright); stroke-width: 4; }
.cr-stem { fill: #6F6A9A; }
.cr-knob { fill: var(--gold); transition: opacity .4s, transform .5s; transform-box: fill-box; transform-origin: center; }
.cr-pig.gone .cr-knob { opacity: 0; transform: translateY(-20px); }
.cr-lead { stroke: var(--faint); stroke-width: 1.5; }
.cr-vir circle { fill: rgba(216,85,85,.3); stroke: #FF8A8A; stroke-width: 2; }
.cr-vir path { stroke: #FF8A8A; stroke-width: 2.5; stroke-linecap: round; }

@media (max-height: 700px) {
  .cr-hero.cr-tall img { height: 170px; }
  .cr-l { height: 34px; font-size: 15px; }
  .cr-tap .cr-l { height: 44px; }
  .cr-ref .cr-l { height: 20px; font-size: 12px; }
  .cr-pool { grid-template-columns: repeat(6, 40px); gap: 10px; }
  .cr-pool i { width: 40px; height: 40px; }
  .cr-dots { grid-template-columns: repeat(8, 18px); gap: 8px; }
  .cr-dots i { width: 18px; height: 18px; }
}