/* Quantum Computer lesson. All rules scoped under .qcm-* */
.qcm-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qcm-note { font-size: 12px; color: var(--faint); text-align: center; }
.qcm-hero img { display: block; width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }
.qcm-cv { --cap: 9999px; display: block; width: min(100%, calc(var(--cap) * var(--ar, 2))); height: auto; margin: 0 auto; }

@media (max-height: 700px) {
  .qcm-cv { --cap: 230px; }
  .qcm-hero img { max-height: 150px; }
}
.qcm-cups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; max-width: 340px; margin: 0 auto; }
.qcm-cup { position: relative; height: 96px; border: 0; padding: 0; background: none; cursor: pointer; }
.qcm-cup::before { content: ''; position: absolute; inset: 8px 4px 0; background: #4A4458; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); border-radius: 6px; transition: transform .25s, background .25s; }
.qcm-cup span { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 700 18px "DM Sans", system-ui, sans-serif; color: #EAE3D7; }
.qcm-cup.wrong::before, .qcm-cup.off::before { transform: translateY(-14px); background: #2E2A3A; }
.qcm-cup.off { opacity: .55; }
.qcm-cup.right::before { transform: translateY(-22px); background: #FCC050; }
.qcm-cup.right span { color: #2A2536; transform: translateY(-22px); }
.qcm-cup.right::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #FF8A7A; }