/* Oncogene lesson. All rules scoped under .on-* */
.on-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.on-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.on-cap { font-size: 12.5px; color: var(--dim); text-align: center; }
.on-hero { display: grid; place-items: center; }
.on-hero img { width: 300px; max-width: 100%; max-height: 36vh; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.on-hero.on-wide img { width: 340px; max-height: 30vh; }
.on-t { fill: var(--dim); font: 700 13px var(--sans); text-anchor: middle; }

/* the tissue */
.on-tissue { max-width: 400px; }
.on-hole { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 4 3; }
.on-cell rect { fill: #E3A58C; stroke: #A96F58; stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.on-cell circle { fill: #7A4A3A; transition: fill .2s; }
.on-cell { cursor: pointer; }
.on-cell.sig circle { fill: var(--gold); }
.on-cell.sig rect { stroke: var(--gold); }
.on-cell.mut rect { fill: #FF6B6B; stroke: #fff; }
.on-cell.mut circle { fill: var(--gold); }
.on-cell.target rect { stroke: var(--gold); stroke-width: 3; }
.on-pl { animation: onPop .25s cubic-bezier(.2,.8,.2,1) both; }
@keyframes onPop { from { opacity: 0; } }
.on-legend { display: flex; gap: 16px; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.on-legend span { display: inline-flex; align-items: center; gap: 6px; }
.on-kc { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: #E3A58C; }
.on-kc.on-km { background: #FF6B6B; }
.on-kh { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1.5px dashed var(--faint); }

/* inside a cell: the RAS switch */
.on-big { fill: rgba(227,165,140,.14); stroke: #E3A58C; stroke-width: 2; }
.on-sigm circle { fill: var(--violet-bright); transition: transform .8s cubic-bezier(.3,.7,.3,1); }
.on-inside.s1 .on-sigm circle { transform: translateX(62px); }
.on-sw rect { fill: var(--raised); stroke: var(--line-strong); stroke-width: 2; transition: fill .3s, stroke .3s; }
.on-knob { fill: var(--dim); transition: transform .35s cubic-bezier(.3,.7,.3,1), fill .3s; }
.on-inside.s2 .on-sw rect, .on-sw.lit rect { fill: rgba(252,192,80,.3); stroke: var(--gold); }
.on-inside.s2 .on-knob { transform: translateX(38px); fill: var(--gold); }
.on-sw.lit .on-knob { fill: var(--gold); }
.on-swl { fill: var(--text); font-size: 15px; font-weight: 800; }
.on-state { font-size: 13px; }
.on-steps { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.on-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; }
.on-steps span.on { color: var(--gold); border-color: var(--gold); }
.on-steps i { color: var(--faint); font-style: normal; }

/* copies of the switch */
.on-two { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.on-copy { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); flex: 1; max-width: 160px; }
.on-copy svg { width: 100px; height: auto; display: block; overflow: visible; }
.on-copy span { font-size: 14px; font-weight: 700; color: var(--text); text-align: center; line-height: 1.25; }
.on-copy small { display: block; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.on-jam { stroke: #FF6B6B; stroke-width: 4; stroke-linecap: round; }
.on-arr { font-style: normal; color: var(--faint); font-size: 20px; }
.on-cellcopies { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 14px 10px; border-radius: 28px; border: 2px solid #E3A58C; background: rgba(227,165,140,.10); }
.on-verdict { text-align: center; font-size: 14px; font-weight: 700; color: #FF8A8A; opacity: 0; transition: opacity .3s; min-height: 18px; }
.on-verdict.on { opacity: 1; }
.on-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.on-stat div { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 18px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.on-stat b { font: 700 28px var(--mono); color: var(--gold); }
.on-stat span { font-size: 13.5px; color: var(--text); line-height: 1.3; }

/* the history */
.on-find { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.on-find div { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.on-find b { font: 700 15px var(--mono); color: var(--gold); min-width: 52px; }
.on-find span { font-size: 14px; color: var(--text); line-height: 1.35; }
.on-find .on-q { border-color: var(--gold); }
.on-unk b { display: grid; place-items: center; width: 100px; height: 50px; font: 700 30px var(--mono); color: var(--faint); }
.on-find .on-later { opacity: 0; transition: opacity .4s; }
.on-find .on-later.on { opacity: 1; }