/* Instant Coffee lesson. All rules scoped under .ico-* */
.ico-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ico-svg { display: block; width: 100%; max-width: 340px; overflow: visible; }
.ico-mugs, .ico-ch { max-height: 270px; } .ico-tower { max-height: 280px; }
.ico-tank { max-height: 200px; }
.ico-cap { font: 700 14px var(--sans); color: var(--text); }
.ico-read { display: flex; flex-direction: column; align-items: center; padding: 6px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); }
.ico-read b { font: 800 24px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.ico-read span { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.ico-drag { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.ico-gr { fill: #8a5a2b; stroke: #c98a45; stroke-width: 1; }
.ico-steam { fill: none; stroke: #e8e4dc; stroke-width: 3; stroke-linecap: round; opacity: .5; }
.ico-lab { font: 700 15px var(--sans); fill: var(--dim); }
.ico-on { fill: #f4efe6; font-weight: 800; }
.ico-jar { display: block; width: 58%; max-width: 220px; filter: drop-shadow(0 10px 18px rgba(123,92,253,.28)); }

.ico-slab { fill: #5a3216; stroke: #cfe7ff; stroke-width: 2; }
.ico-bit { fill: #6b4423; stroke: #cfe7ff; stroke-width: 1.5; transition: fill 1s, stroke .6s; }
.ico-bit.ico-dry { fill: #b07a40; stroke: #f0c27a; }
.ico-ice { fill: #e6f3ff; transition: opacity .3s; }
.ico-airdot { fill: #8fc3f0; opacity: .7; transition: opacity .25s; }
.ico-wisp { fill: none; stroke: #e6f3ff; stroke-width: 2.5; stroke-linecap: round; }

.ico-drop { stroke: #f4efe6; stroke-width: 1; }
.ico-heat { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 8; opacity: .8; }

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

.ico-pair { flex-direction: row; justify-content: center; gap: 12px; }
.ico-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; }
.ico-card b { font: 800 17px var(--sans); color: var(--text); }
.ico-card span { font: 600 13.5px/1.3 var(--sans); color: var(--dim); }
.ico-card em { font: 800 14px var(--sans); font-style: normal; color: var(--gold); }

@media (max-height: 700px) {
  .ico-mugs, .ico-ch, .ico-tower { max-height: 210px; }
  .ico-tank { max-height: 160px; }
  .ico-jar { max-width: 170px; }
  .ico-photo { max-width: 280px; }
}