/* Complement system lesson. All rules scoped under .cmpl-* */

.cmpl-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cmpl-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.cmpl-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.cmpl-hero { width: min(80%, 320px); }
.cmpl-hero img { width: 100%; display: block; }
.cmpl-t { fill: var(--text); font: 600 14px var(--sans); text-anchor: middle; }
.cmpl-t.dim { fill: var(--dim); font-size: 13px; }
.cmpl-t.sm { font-size: 13px; }
.cmpl-t.gold { fill: var(--gold); }

/* tubes */
.cmpl-glass { fill: none; stroke: var(--text); stroke-width: 2; opacity: .7; }
.cmpl-fluid { fill: rgba(252,192,80,.10); transition: fill .3s; }
.cmpl-tube { transition: opacity .35s; }
.cmpl-tube[data-i="1"] .cmpl-fluid { fill: rgba(252, calc(192 - 110 * var(--heat, 0)), 80, calc(.10 + .14 * var(--heat, 0))); }
.cmpl-one .cmpl-tube:not([data-i="0"]), .cmpl-two .cmpl-tube[data-i="2"] { opacity: .22; }
.cmpl-rod { fill: #7FC8FF; stroke: #0A0E1A; stroke-width: 1; }
.cmpl-bugs { transition: opacity .4s; }
.cmpl-bugs.gone { opacity: 0; }
.cmpl-shard { stroke: #7FC8FF; stroke-width: 2; stroke-linecap: round; opacity: .6; animation: cmpl-in .4s ease-out both; }
@keyframes cmpl-in { from { opacity: 0; } }

/* chain */
.cmpl-germ { fill: rgba(127,200,255,.14); stroke: #7FC8FF; stroke-width: 2.5; transition: opacity .3s; }
.cmpl-germ.thick { stroke-width: 8; }
.cmpl-tb, .cmpl-eat-l { transition: opacity .4s; }
.cmpl-eater { fill: rgba(167,139,250,.20); stroke: var(--violet-bright); stroke-width: 2.5; }
.cmpl-eat-nu { fill: rgba(167,139,250,.35); }
.cmpl-germ.nm { fill: rgba(127,200,255,.14); }
.cmpl-tag { fill: var(--gold); stroke: #0A0E1A; stroke-width: 1; transition: opacity .4s; }
.cmpl-tag.pop, .cmpl-sw.pop, .cmpl-germ.pop { animation: cmpl-in .3s ease-out both; }
.cmpl-tag.gone { opacity: 0; }
.cmpl-tag.first { transform-box: fill-box; transform-origin: center; }
.cmpl-first { cursor: pointer; }
.cmpl-first.pulse .cmpl-tag { animation: cmpl-pulse 1s ease-in-out 4; }
@keyframes cmpl-pulse { 50% { transform: scale(1.7); } }
.cmpl-hit, .cmpl-hitr { fill: transparent; }
.cmpl-count { font-size: 14px; color: var(--dim); }
.cmpl-count b { color: var(--gold); font-size: 18px; }

/* jobs */
.cmpl-jobs { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
.cmpl-jobs.two { grid-template-columns: 1fr 1fr; }
.cmpl-jobs span { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px; text-align: center; font-size: 14px; color: var(--dim); line-height: 1.3; }
.cmpl-jobs b { display: block; font: 700 19px var(--serif); color: var(--gold); margin-bottom: 2px; }

/* ring */
.cmpl-tapme .cmpl-bact { cursor: pointer; }
.cmpl-seg { fill: var(--violet-bright); stroke: #0A0E1A; stroke-width: 1; opacity: 0; transition: opacity .2s; }
.cmpl-seg.in { opacity: 1; }
.cmpl-tapme .cmpl-seg:not(.in) { opacity: .16; }
.cmpl-hole { fill: rgba(127,200,255,.14); }
.open .cmpl-hole { fill: #0A0E1A; }
.cmpl-drop { fill: #7FC8FF; }
.cmpl-bb { transition: opacity .25s; }

/* two cells */
.cmpl-rbc { fill: rgba(216,85,95,.30); stroke: #D8555F; stroke-width: 2.5; }
.cmpl-rbc-in { fill: rgba(216,85,95,.18); }
.cmpl-sw { fill: var(--mint); stroke: #0A0E1A; stroke-width: 1; }
.cmpl-mini-ring { fill: #0A0E1A; stroke: var(--violet-bright); stroke-width: 3; animation: cmpl-in .3s ease-out both; }
.cmpl-left > *, .cmpl-right > * { transition: opacity .3s; }
.cmpl-left { transition: opacity .3s; }
.cmpl-red { fill: #D8555F; opacity: .7; animation: cmpl-in .4s ease-out both; }
.cmpl-steps { display: flex; align-items: center; justify-content: center; gap: 4px; }
.cmpl-steps span { padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--text); }
.cmpl-steps span.x { text-decoration: line-through; color: var(--faint); }
.cmpl-steps i { font-style: normal; color: var(--faint); font-size: 12px; }

.cmpl-big { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 0; text-align: center; }
.cmpl-big b { font: 700 46px var(--serif); color: var(--gold); line-height: 1; }
.cmpl-big span { font-size: 14px; color: var(--dim); max-width: 270px; line-height: 1.35; }

@media (max-height: 700px) {
  .cmpl-hero { width: min(62%, 240px); }
  .cmpl-tubes, .cmpl-ringsc { max-height: 214px; }
  .cmpl-jobs span { padding: 8px 10px; }
  .cmpl-big { padding: 12px 0; }
}