/* Short-chain fatty acid lesson. All rules scoped under .sca-* */
.sca-gut { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 8px; }

/* the colon */
.sca-lumen { position: relative; width: 100%; aspect-ratio: 320 / 120; border-radius: 18px 18px 6px 6px; background: radial-gradient(120% 90% at 50% 30%, #2a1f3f, #171226); border: 2px solid var(--line); overflow: hidden; }
.sca-lsv { position: absolute; inset: 0; width: 100%; height: 100%; }
.sca-link { stroke: var(--line-strong); stroke-width: 4; stroke-linecap: round; transition: opacity .4s; }
.sca-chain.sca-eaten .sca-link { opacity: 0; }
.sca-bd polygon { fill: var(--gold); stroke: #b9822a; stroke-width: 2; }
.sca-bd { transition: opacity .35s; }
.sca-bd.sca-gone { opacity: 0; }
.sca-bug rect { fill: #8fd3a8; stroke: #4c9b6b; stroke-width: 2; }
.sca-bug1 rect { fill: #f2a6c4; stroke: #b9668a; }
.sca-bug2 rect { fill: #a9b8ff; stroke: #6474c9; }
.sca-eye { fill: #1b1630; }
.sca-puff { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border-radius: 50%; border: 2px dashed transparent; background: transparent; display: flex; align-items: center; justify-content: center; opacity: 0; scale: 0; transition: opacity .3s, scale .45s cubic-bezier(.2,.8,.2,1.5), border-color .3s; cursor: pointer; }
.sca-puff i { width: 30px; height: 30px; border-radius: 50%; background: var(--sca-c); box-shadow: 0 0 16px var(--sca-c), inset -4px -5px 0 rgba(0,0,0,.18); }
.sca-puff.sca-pop { opacity: 1; scale: 1; }
.sca-puff:disabled { cursor: default; opacity: 1; }
.sca-puff:not(:disabled) { border-color: var(--text); }
.sca-puff.sca-open { scale: .8; }
.sca-ac { --sca-c: #3fd69a; }
.sca-pr { --sca-c: #62b6ff; }
.sca-bu { --sca-c: #a98bff; }
.sca-wall { display: flex; gap: 3px; height: 16px; margin-top: -4px; }
.sca-wall i { flex: 1; border-radius: 0 0 8px 8px; background: #b8667a; }

/* the three, named */
.sca-cards { display: flex; gap: 8px; }
.sca-card { flex: 1 1 0; min-height: 112px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 14px; border: 2px dashed var(--line); background: transparent; text-align: center; }
.sca-card.sca-in { border-style: solid; border-color: var(--sca-c); background: var(--surface); animation: scaIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes scaIn { from { opacity: 0; translate: 0 10px; } }
.sca-card img { width: 46px; height: 46px; object-fit: contain; }
.sca-card b { font: 800 13px var(--sans); color: var(--text); }
.sca-card span { font: 600 12px/1.2 var(--sans); color: var(--dim); }
.sca-tail { display: inline-flex; gap: 3px; margin-top: 3px; flex-wrap: nowrap; }
.sca-tail i { width: 7px; height: 7px; border-radius: 50%; background: #1b1630; border: 1.5px solid var(--text); }
.sca-oil { display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .5s; }
.sca-oil.sca-in { opacity: 1; }
.sca-oil img { width: 30px; height: 30px; object-fit: contain; }
.sca-oil span { font: 700 12px var(--sans); color: var(--dim); white-space: nowrap; }
.sca-oil .sca-tail { gap: 2px; margin: 0; }
.sca-oil .sca-tail i { width: 6px; height: 6px; border-color: var(--gold); }

/* where they go */
.sca-rbox { width: 100%; max-width: 360px; margin: 0 auto; }
.sca-rt { display: block; width: 100%; height: auto; overflow: visible; }
.sca-rlum { fill: #211932; stroke: var(--line); stroke-width: 2; }
.sca-rc { fill: #3a2c3a; stroke: #5c4450; stroke-width: 2; transition: fill .4s, stroke .4s; }
.sca-rc.sca-lit { fill: #b8667a; stroke: #f0a6b6; }
.sca-vessel { stroke: #7a3a48; stroke-width: 18; stroke-linecap: round; }
.sca-lab { font: 700 14px var(--sans); fill: var(--text); text-anchor: middle; }
.sca-lab.sca-dim { fill: var(--dim); }
.sca-lab.sca-act { fill: #3fd69a; }
.sca-lab.sca-prt { fill: #62b6ff; }
.sca-lab.sca-but { fill: #a98bff; }
.sca-org { transition: filter .4s; }
.sca-org.sca-glow { filter: drop-shadow(0 0 10px rgba(252,192,80,.8)); }
.sca-m { fill: var(--sca-c); stroke: rgba(0,0,0,.25); stroke-width: 1.5; transition: opacity .3s; }
.sca-m.sca-gone { opacity: 0; }

/* two mice */
.sca-mice { width: 100%; max-width: 360px; }
.sca-mice .choice img { height: 150px; width: auto; max-width: 100%; object-fit: contain; }
.sca-mflip { scale: -1 1; }

/* the dish */
.sca-bench { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; }
.sca-dropper { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; min-height: 96px; padding: 4px; border-radius: 14px; background: transparent; border: 0; cursor: pointer; font-family: var(--sans); }
.sca-dropper svg { width: 30px; height: 68px; }
.sca-dropper span { font: 700 12px var(--sans); color: #a98bff; }
.sca-dropper:disabled { cursor: default; opacity: 1; }
.sca-bulb { fill: #a98bff; }
.sca-glass { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.sca-juice { fill: #a98bff; }
.sca-dish { --tint: 0; position: relative; width: 186px; height: 186px; border-radius: 50%; margin-top: -10px; border: 3px solid rgba(255,255,255,.35); background: radial-gradient(circle, rgba(169,139,255,calc(var(--tint) * .28)), rgba(255,255,255,.04) 70%); box-shadow: inset 0 0 0 6px rgba(255,255,255,.05); transition: background .6s; }
.sca-dc { position: absolute; left: 50%; top: 50%; width: 38px; height: 34px; margin: -17px 0 0 -19px; border-radius: 45% 55% 50% 50%; background: #6d6470; border: 2px solid #8a8090; transform: rotate(var(--a)) translate(58px) rotate(calc(-1 * var(--a))); scale: .62; transition: scale .5s cubic-bezier(.2,.8,.2,1.5), background .5s, border-color .5s; }
.sca-dc::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(0,0,0,.25); }
.sca-dc.sca-full { scale: 1; background: #d77e93; border-color: #f4b3c2; }
.sca-blob { position: absolute; left: 50%; top: 50%; width: 14px; height: 18px; margin: -9px 0 0 -7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #a98bff; opacity: 0; }
.sca-blob.sca-fall { animation: scaFall .45s ease-in forwards; }
@keyframes scaFall { from { opacity: 1; translate: 0 -96px; } 80% { opacity: 1; translate: 0 0; scale: 1; } to { opacity: 0; translate: 0 0; scale: 3; } }

/* the cow */
.sca-cow { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sca-cowpic img { display: block; width: 210px; max-width: 64vw; height: auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.4)); }
.sca-gt { font: 700 12.5px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.sca-gs { width: 100%; display: flex; flex-direction: column; gap: 6px; opacity: 0; transition: opacity .4s; }
.sca-gs.sca-in { opacity: 1; }
.sca-g .gt i { background: var(--gold); }

/* the swap */
.sca-swap { width: 100%; max-width: 380px; display: flex; gap: 10px; }
.sca-pc { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); transition: border-color .4s; }
.sca-pc b { font: 800 14.5px/1.2 var(--sans); color: var(--text); }
.sca-now { font: 700 12px var(--sans); color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.sca-food { font: 600 13px/1.3 var(--sans); color: var(--dim); transition: opacity .3s, translate .3s; }
.sca-swapping .sca-food { opacity: 0; }
.sca-swapping .sca-us .sca-food { translate: 40px 0; }
.sca-swapping .sca-za .sca-food { translate: -40px 0; }
.sca-pc.sca-hi { border-color: var(--mint); }
.sca-pc.sca-hi .sca-food { color: var(--mint); }
.sca-pc.sca-lo { border-color: var(--gold); }
.sca-pc.sca-lo .sca-food { color: var(--gold); }

@media (max-height: 700px) {
  .sca-card { min-height: 100px; }
  .sca-card img { width: 36px; height: 36px; }
  .sca-rbox { max-width: 310px; }
  .sca-mice .choice img { height: 110px; }
  .sca-dish { width: 160px; height: 160px; }
  .sca-dc { transform: rotate(var(--a)) translate(48px) rotate(calc(-1 * var(--a))); }
  .sca-cowpic img { width: 150px; }
}