/* Yeast lesson. All rules scoped under .yst-* */
.yst-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.yst-body { fill: #EADBB4; stroke: #BFA46A; stroke-width: 2; }
.yst-shine { fill: #fff; opacity: .4; }
.yst-scar { fill: rgba(150,120,60,.22); stroke: #8F7440; stroke-width: 2.6; }

/* 0. the spoonful */
.yst-open { flex: 1; justify-content: center; min-height: 0; }
.yst-lens-svg { display: block; width: min(100%, 340px); max-height: 100%; height: auto; }
.yst-heap circle { fill: #B48A4C; }
.yst-heap { transition: opacity .5s; }
.yst-zoom .yst-heap { opacity: 0; }
.yst-lens { transform-origin: 150px 200px; transform: scale(.05); opacity: 0; transition: transform 1s cubic-bezier(.3,.7,.2,1), opacity .4s; }
.yst-zoom .yst-lens { transform: none; opacity: 1; }
.yst-glass { fill: #141B2E; }
.yst-rim { fill: none; stroke: var(--violet-bright); stroke-width: 4; filter: drop-shadow(0 0 8px rgba(123,92,253,.6)); }
.yst-water { fill: rgba(110,170,230,.22); }
.yst-c { transform-box: fill-box; transform-origin: center; transition: transform 1s cubic-bezier(.2,.8,.2,1.3); }
.yst-c .yst-body { transition: fill .9s, stroke .9s; }
.yst-wr { fill: none; stroke: #6E512A; stroke-width: 2; stroke-linecap: round; transition: opacity .6s; }
.yst-dry .yst-c { transform: scale(.66, .48); }
.yst-dry .yst-c .yst-body { fill: #9C7A45; stroke: #6E512A; }
.yst-dry .yst-shine { opacity: .12; }
.yst-wet .yst-wr { opacity: 0; }
.yst-wet .yst-c { animation: ystWob 1.4s ease-in-out .9s 4 alternate; }
.yst-wet g:nth-child(even) > .yst-c { animation-delay: 1.3s; }
@keyframes ystWob { to { transform: scale(1.06, .94) rotate(4deg); } }

/* 1. one cell */
.yst-big { display: block; width: min(100%, 330px); height: auto; }
.yst-mom { cursor: pointer; }
.yst-kid { opacity: .9; }
.yst-new { animation: ystPop .4s cubic-bezier(.2,.8,.2,1.6) both; transform-box: fill-box; transform-origin: center; }
@keyframes ystPop { from { transform: scale(0); } }
.yst-count { font: 700 13px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.yst-count b { font: 800 22px var(--sans); color: var(--gold); margin-left: 6px; font-variant-numeric: tabular-nums; vertical-align: -2px; }

/* in-scene picks */
.yst-pk { width: 100%; }
.yst-pk .choices.yst-three, .yst-pk .choices.yst-ask { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 8px; width: 100%; }
.yst-pk .choice { flex: 1 1 0; min-width: 0; padding: 6px 4px 8px; min-height: 0; background: transparent; border-color: transparent; box-shadow: none; flex-direction: column; justify-content: flex-start; gap: 4px; }
.yst-pk .choice.right { border-color: var(--mint); background: rgba(63,214,154,.08); }
.yst-pk .choice.wrong { border-color: var(--red); background: rgba(216,85,85,.08); }
.yst-cell { display: block; width: 100%; max-width: 112px; height: auto; margin: 0 auto; filter: drop-shadow(0 6px 12px rgba(123,92,253,.25)); }
.yst-n { font: 800 14px var(--sans); color: var(--gold); }

/* 5 and 6. three cups */
.yst-row { display: flex; flex-direction: row; justify-content: center; gap: 8px; width: 100%; }
.yst-cup { flex: 1 1 0; min-width: 0; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 6px; background: transparent; border: 2px solid transparent; border-radius: 14px; color: var(--text); font-family: var(--sans); cursor: pointer; }
.yst-cup:disabled { cursor: default; color: var(--text); opacity: 1; }
.yst-cupsvg { display: block; width: 100%; max-width: 92px; height: auto; overflow: visible; }
.yst-cupbody { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.55); stroke-width: 2.5; stroke-linejoin: round; }
.yst-liq { opacity: .85; }
.yst-liq-cold { fill: #3D6FA8; }
.yst-liq-warm { fill: #8A6B3A; }
.yst-liq-hot { fill: #8A6B3A; }
.yst-dots circle { fill: #EADBB4; transition: fill .6s; }
.yst-steam { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2.5; stroke-linecap: round; }
.yst-foam { fill: #F1E6C8; opacity: 0; transform-box: fill-box; transform-origin: bottom; transform: scaleY(.2); transition: opacity .6s, transform 1.4s cubic-bezier(.2,.8,.2,1); }
.yst-bub circle { fill: rgba(255,255,255,.75); opacity: 0; }
.yst-lab { font: 700 12.5px/1.2 var(--sans); color: var(--dim); text-align: center; }
.yst-res { min-height: 17px; font: 800 13px/1.2 var(--sans); color: var(--gold); text-align: center; }
.yst-go.yst-warm .yst-foam { opacity: 1; transform: none; }
.yst-go.yst-warm .yst-bub circle { animation: ystRise 1s ease-in 4; }
.yst-go.yst-cold .yst-bub circle { animation: ystRise 2.6s ease-in 2; }
.yst-go.yst-cold .yst-bub circle:nth-child(2) { animation-delay: .9s; }
.yst-go.yst-warm .yst-bub circle:nth-child(2) { animation-delay: .3s; }
.yst-go.yst-warm .yst-bub circle:nth-child(3) { animation-delay: .6s; }
.yst-go.yst-hot .yst-dots circle { fill: #6B6B6B; }
.yst-go.yst-hot .yst-res { color: var(--dim); }
@keyframes ystRise { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } }
.yst-ask .choice { padding: 0; }
.yst-ask .yst-cup { max-width: none; width: 100%; cursor: inherit; }

/* 7 and 8. history */
.yst-joke img { display: block; max-width: 100%; max-height: 240px; width: auto; height: auto; filter: drop-shadow(0 10px 18px rgba(123,92,253,.3)); transition: rotate .4s; }
.yst-laugh img { animation: ystHop .45s ease-out 2; }
@keyframes ystHop { 50% { translate: 0 -8px; rotate: -3deg; } }
.yst-past img { display: block; max-height: 220px; max-width: 100%; width: auto; border-radius: 12px; border: 1px solid var(--line-strong); }
.yst-cap { font: 600 12.5px var(--sans); color: var(--dim); }

/* 9. genes */
.yst-gl { font: 700 13px var(--sans); color: var(--dim); text-align: center; }
.yst-grid { display: grid; grid-template-columns: repeat(23, minmax(0, 10px)); gap: 2px; justify-content: center; }
.yst-grid i { display: block; aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,.12); transition: background .3s; }
.yst-grid i.yst-on { background: var(--gold); box-shadow: 0 0 4px rgba(252,192,80,.6); }

@media (max-height: 700px) {
  .yst-big { width: min(100%, 280px); }
  .yst-cell { max-width: 96px; }
  .yst-joke img { max-height: 190px; }
  .yst-past img { max-height: 170px; }
  .yst-grid { grid-template-columns: repeat(23, minmax(0, 8px)); }
}