/* Fermentation lesson. All rules scoped under .fm-* */
.fm-scene { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; }
.fm-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* the jar */
.fm-jar { --rate: 1; }
.fm-jar svg { width: 100%; height: auto; display: block; }
.fm-jar .glass { fill: rgba(255,255,255,.04); stroke: var(--line-strong); stroke-width: 2.5; stroke-linejoin: round; }
.fm-jar .neck { fill: none; stroke: var(--line-strong); stroke-width: 2.5; }
.fm-jar .liq { fill: #d9a83a; opacity: .85; transition: fill .8s, opacity .8s; }
.fm-jar .foam { fill: rgba(255,255,255,.55); opacity: 0; transition: opacity .5s; }
.fm-jar.busy .foam { opacity: 1; }
.fm-jar .lid { fill: #b48a3c; stroke: #6e4f18; stroke-width: 1.5; opacity: 0; transform: translateY(-22px); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.fm-jar.lidded .lid { opacity: 1; transform: none; }
.fm-jar .bubbles circle { fill: rgba(255,255,255,.6); opacity: 0; }
.fm-jar.busy .bubbles circle { animation: fmRise calc(var(--d) / var(--rate)) linear infinite; animation-delay: var(--o); }
@keyframes fmRise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .85; } 100% { transform: translateY(-104px); opacity: 0; } }

/* meters */
.fm-meters { display: flex; flex-direction: column; gap: 10px; }
.fm-m .l { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 700; color: var(--dim); }
.fm-m .l b { font-family: var(--mono); font-size: 13px; color: var(--text); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.fm-m .t { height: 12px; border-radius: 999px; background: var(--raised); overflow: hidden; margin-top: 4px; }
.fm-m .t i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--violet); transition: width .2s, background .3s; }
.fm-m.k-sugar .t i { background: var(--gold); }
.fm-m.k-alc .t i, .fm-m.k-acid .t i { background: #E07FD0; }
.fm-m.k-gas .t i, .fm-m.k-rate .t i { background: var(--mint); }
.fm-m.cap .t i { background: var(--red); }
.fm-m.cap .l b { color: #FF8A8A; }
.fm-status { font-size: 13px; font-weight: 700; color: var(--dim); min-height: 18px; }
.fm-status.on { color: var(--mint); } .fm-status.bad { color: #FF8A8A; }
.fm-note { font-size: 12px; font-weight: 600; color: var(--faint); }

/* the sugar's energy: left in the alcohol against taken by the yeast */
.fm-energy { display: flex; flex-direction: column; gap: 10px; }
.fm-energy .fm-cap { font-size: 12px; font-weight: 700; color: var(--dim); }
.fm-energy .er { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.fm-energy .er em { font: 600 13px var(--mono); color: var(--text); font-style: normal; }
.fm-energy .er i { grid-column: 1 / -1; display: block; height: 12px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.fm-energy .er b { display: block; height: 100%; width: 0; border-radius: 999px; background: #E07FD0; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.fm-energy .er.got b { background: var(--mint); }
.fm-energy.real .er em { color: var(--gold); }

/* salted cabbage */
.fm-jar.kraut .liq { fill: #9fc27a; opacity: .35; }
.fm-jar .shred { fill: none; stroke: #b9d98f; stroke-width: 3; stroke-linecap: round; opacity: .7; }
.fm-lab { fill: var(--mint); opacity: 0; transition: opacity .25s; }
.fm-lab.on { opacity: 1; }
.fm-rot { fill: var(--red); transition: opacity .3s; }
.fm-m.k-lab .t i { background: var(--mint); }
.fm-m.k-rot .t i { background: var(--red); }
.fm-m.k-air .t i { background: var(--violet-bright); }

/* two roads for sugar */
.fm-roads { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.fm-road { padding: 12px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.fm-road.fer { border-color: rgba(252,192,80,.55); }
.fm-road.burn { border-color: rgba(169,155,255,.45); }
.fm-rn { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fm-road.fer .fm-rn { color: var(--gold); } .fm-road.burn .fm-rn { color: var(--violet-bright); }
.fm-rc { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.fm-rc span { font-size: 13px; font-weight: 700; padding: 5px 9px; border-radius: 999px; background: var(--raised); }
.fm-rc i { font-style: normal; color: var(--faint); }
.fm-rt { font-size: 13px; color: var(--dim); }

@media (max-height: 700px) {
  .fm-scene { grid-template-columns: 96px 1fr; gap: 12px; }
}