/* Espresso lesson. All rules scoped under .esp-* */
.esp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.esp-svg { display: block; width: 100%; max-width: 340px; overflow: visible; }
.esp-pots { max-height: 290px; }
.esp-water { fill: #8fc3f0; opacity: .6; }
.esp-pour { fill: #8fc3f0; opacity: 0; }
.esp-drip { fill: #5a3216; opacity: 0; transition: opacity .3s; }
.esp-labs { display: flex; justify-content: space-around; width: 100%; max-width: 340px; font: 700 13px var(--sans); color: var(--dim); text-align: center; }
.esp-labs span { width: 45%; }

.esp-read { display: flex; flex-direction: column; align-items: center; padding: 6px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); }
.esp-read span { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.esp-read b { font: 800 26px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; transition: color .3s; }
.esp-read.up b { color: var(--gold); }
.esp-grind { max-height: 200px; }
.esp-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.esp-chunk { filter: drop-shadow(0 0 8px rgba(252,192,80,.5)); }
.esp-bit { filter: drop-shadow(0 0 5px rgba(252,192,80,.45)); }

.esp-mach { max-height: 300px; }
.esp-drag { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.esp-gr { font: 800 17px var(--sans); fill: #1d1f26; }

.esp-foam { max-height: 240px; }
.esp-lab { font: 700 15px var(--sans); fill: var(--dim); }
.esp-big { font: 800 17px var(--sans); fill: var(--text); }
.esp-gas { fill: #f4efe6; opacity: .9; transition: opacity .2s; }
.esp-bb { fill: #f6dcae; }

.esp-photo { margin: 0; width: 100%; max-width: 360px; }
.esp-photo img { display: block; width: 100%; border-radius: 12px; }
.esp-photo figcaption { margin-top: 6px; font: 600 12.5px var(--sans); color: var(--faint); text-align: center; }

.esp-pk { width: 100%; }
.esp-pk .choices.esp-two { flex-direction: row; justify-content: center; gap: 12px; }
.esp-pk .choice { flex: 1 1 0; max-width: 170px; padding: 8px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.esp-pk .choice span { font: 700 14px var(--sans); }
.esp-cup { width: 120px; height: 130px; }
.esp-mg { min-height: 20px; font: 800 15px var(--sans); color: var(--gold); }
.esp-caf { fill: var(--gold); stroke: #fff6; stroke-width: 1; animation: espPop .3s ease-out both; }
@keyframes espPop { from { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; } }

.esp-bag { display: block; width: 62%; max-width: 230px; filter: drop-shadow(0 10px 18px rgba(123,92,253,.28)); }

@media (max-height: 700px) {
  .esp-pots { max-height: 214px; }
  .esp-mach { max-height: 262px; }
  .esp-foam { max-height: 206px; }
  .esp-cup { width: 100px; height: 108px; }
  .esp-photo { max-width: 300px; }
  .esp-bag { max-width: 180px; }
}