/* Food processing lesson. All rules scoped under .fpr-* */
.fpr-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fpr-tl { font: 700 15px var(--sans); fill: #7A5A12; }

/* the kernel */
.fpr-ks { width: 100%; max-width: 200px; height: auto; display: block; overflow: visible; cursor: pointer; }
.fpr-drop { animation: fprDrop .7s cubic-bezier(.3,1.5,.6,1) both; }
@keyframes fprDrop { from { transform: translateY(-160px); } }
.fpr-whole { fill: #F6C230; stroke: #D59A12; stroke-width: 4; transition: opacity .5s; }
.fpr-cut { opacity: 0; transition: opacity .5s .15s; }
.fpr-open .fpr-whole { opacity: 0; }
.fpr-open .fpr-cut { opacity: 1; }
.fpr-skin { fill: #E9A91C; }
.fpr-starch { fill: #FBEBB4; }
.fpr-germ { fill: #F2C46A; stroke: #D59A12; stroke-width: 2; }
.fpr-g { fill: #FFB71B; stroke: #7A5A12; stroke-width: 2; }
.fpr-x { fill: #8C8798; stroke: #5D586A; stroke-width: 2; transition: fill .4s, stroke .4s; }
.fpr-x.fpr-free { fill: #FFB71B; stroke: #7A5A12; }
.fpr-key { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font: 700 13px var(--sans); color: var(--dim); opacity: 0; transition: opacity .5s; }
.fpr-key.fpr-on { opacity: 1; }
.fpr-key span { display: flex; align-items: center; gap: 6px; }
.fpr-key i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.fpr-kg { background: #FFB71B; }
.fpr-kx { background: #8C8798; }

/* the mill */
.fpr-mill { cursor: default; }
.fpr-mill .fpr-skin, .fpr-mill .fpr-germ, .fpr-mill .fpr-tg, .fpr-mill .fpr-x, .fpr-mill .fpr-g1, .fpr-mill .fpr-g2 { transition: transform 1.1s cubic-bezier(.4,0,.6,1), opacity 1.1s; }
.fpr-milled .fpr-skin { opacity: 0; }
.fpr-milled .fpr-germ, .fpr-milled .fpr-tg, .fpr-milled .fpr-x4, .fpr-milled .fpr-x5, .fpr-milled .fpr-g2 { transform: translate(60px, 60px); opacity: 0; }
.fpr-milled .fpr-x0, .fpr-milled .fpr-x2 { transform: translate(-70px, 10px); opacity: 0; }
.fpr-milled .fpr-x1, .fpr-milled .fpr-x3, .fpr-milled .fpr-g1 { transform: translate(70px, -10px); opacity: 0; }

/* the pot */
.fpr-inpot .fpr-tl { display: none; }
.fpr-pot { width: 100%; max-width: 330px; height: auto; display: block; overflow: visible; touch-action: none; cursor: grab; }
.fpr-potb { fill: #3A3350; stroke: #5B5375; stroke-width: 3; }
.fpr-water { fill: rgba(90, 160, 230, .45); transition: fill 1s; }
.fpr-water.fpr-milky { fill: rgba(230, 230, 240, .55); }
.fpr-spoon { stroke: #B98A55; stroke-width: 6; stroke-linecap: round; }
.fpr-bowl { fill: #B98A55; }
.fpr-pow { fill: #F7F5EE; }
.fpr-lt { fill: var(--text); }
.fpr-lime { transition: opacity .5s; }
.fpr-lime.fpr-tip { opacity: 0; }

/* picks */
.fpr-pk { width: 100%; }
.fpr-bags .fpr-bag { width: 100%; height: clamp(96px, 15vh, 140px); display: block; }

/* the ward */
.fpr-ward { width: 100%; max-width: 340px; height: auto; display: block; overflow: visible; }
.fpr-hd, .fpr-bd { fill: #A99BFF; }
.fpr-hd.fpr-sick, .fpr-bd.fpr-sick { fill: #8C8798; }
.fpr-sep { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 4; }
.fpr-plate { opacity: 0; transition: opacity .5s; }
.fpr-fed .fpr-plate { opacity: 1; }
.fpr-fed .fpr-full { transition-delay: .4s; }
.fpr-dish { fill: #EAE3D7; }
.fpr-mushf { fill: #F2C94C; }
.fpr-egg { fill: #FFFFFF; stroke: #F2C94C; stroke-width: 2; }
.fpr-meat { fill: #B5533C; }
.fpr-milk { fill: #F7F7F7; }
.fpr-wl { display: flex; justify-content: space-around; width: 100%; max-width: 340px; font: 700 13px var(--sans); color: var(--dim); }

/* the bag */
.fpr-one { width: 150px; }
.fpr-one .fpr-bag { width: 100%; height: auto; display: block; }
.fpr-one .fpr-bt { font-size: 13px; }
.fpr-sack { fill: #E9DCC0; stroke: #B9A47C; stroke-width: 2; }
.fpr-fold { fill: #D9C9A6; stroke: #B9A47C; stroke-width: 2; }
.fpr-bt { font: 800 19px var(--sans); fill: #3A2E14; }
.fpr-bs { font: 700 12.5px var(--sans); fill: #6A5A34; }
.fpr-bdots circle { fill: #FFB71B; stroke: #7A5A12; stroke-width: 1.5; transition: opacity .5s; }
.fpr-empty .fpr-bdots circle { opacity: 0; }
.fpr-rain { position: absolute; inset: 0; pointer-events: none; }
.fpr-rain i { position: absolute; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #FFB71B; animation: fprRain .7s ease-in both; }
@keyframes fprRain { from { transform: translateY(-20px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(110px); opacity: 0; } }

@media (max-height: 700px) {
  .fpr-ks { max-width: 175px; }
  .fpr-pot { max-width: 290px; }
  .fpr-one { width: 120px; }
}