/* Decaffeination lesson. All rules scoped under .dcf-* */
.dcf-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dcf-svg { display: block; width: 100%; max-width: 340px; max-height: 260px; overflow: visible; }
.dcf-tall { max-height: 290px; }
.dcf-key { display: flex; gap: 18px; font: 700 13.5px var(--sans); color: var(--dim); }
.dcf-key span { display: flex; align-items: center; gap: 6px; }
.dcf-key i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.dcf-k1 { background: var(--gold); }
.dcf-k2 { background: var(--violet-bright); box-shadow: 0 0 8px var(--violet); }
.dcf-fl { fill: var(--gold); }
.dcf-caf { fill: var(--violet-bright); stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 0 4px rgba(123,92,253,.9)); }
.dcf-in { animation: dcfIn .35s ease-out both; }
@keyframes dcfIn { from { opacity: 0; } }
.dcf-open { animation: dcfOpen .7s cubic-bezier(.2,.8,.2,1.2) both; transform-origin: center; transform-box: fill-box; }
@keyframes dcfOpen { from { opacity: 0; transform: scale(.4); } }
.dcf-bean ellipse { transition: fill .6s; }
.dcf-pale ellipse { fill: #b9c79c; }
.dcf-tank { fill: rgba(143,195,240,.22); stroke: rgba(143,195,240,.6); stroke-width: 2; transition: opacity .4s; }
.dcf-co2 { fill: rgba(169,155,255,.12); stroke: rgba(169,155,255,.5); }
.dcf-coal { cursor: pointer; }
.dcf-lab { font: 700 13px var(--sans); color: var(--dim); margin-top: -4px; }

.dcf-pair { flex-direction: row; justify-content: center; gap: 12px; }
.dcf-card { flex: 1 1 0; max-width: 160px; display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); text-align: center; }
.dcf-card b { font: 800 17px var(--sans); color: var(--text); }
.dcf-card span { font: 600 13.5px/1.3 var(--sans); color: var(--dim); }

.dcf-photo { margin: 0; width: 100%; max-width: 330px; }
.dcf-photo img { display: block; width: 100%; border-radius: 10px; background: #fff; }
.dcf-photo figcaption { margin-top: 6px; font: 600 12.5px var(--sans); color: var(--faint); text-align: center; }

.dcf-grid { max-height: 210px; }
.dcf-stay { animation: dcfPulse .9s ease-in-out 3; transform-origin: center; transform-box: fill-box; }
@keyframes dcfPulse { 50% { transform: scale(1.5); } }
.dcf-read { display: flex; align-items: baseline; gap: 8px; padding: 4px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); }
.dcf-read b { font: 800 24px var(--sans); color: var(--violet-bright); font-variant-numeric: tabular-nums; min-width: 2.2em; text-align: right; }
.dcf-read span { font: 700 13px var(--sans); color: var(--dim); }

@media (max-height: 700px) {
  .dcf-svg { max-height: 214px; }
  .dcf-tall { max-height: 236px; }
  .dcf-grid { max-height: 170px; }
  .dcf-photo { max-width: 280px; }
}