/* Essential amino acid lesson. All rules scoped under .eaa-* */
.eaa-sc { width: 100%; display: flex; justify-content: center; }

/* the shelf of twenty jars */
.eaa-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; width: min(100%, 340px); }
.eaa-jar { position: relative; height: 44px; padding: 7px 3px 2px; border-radius: 8px 8px 11px 11px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), var(--raised);
  font: 700 12px/1.08 var(--sans); color: var(--text); display: flex; align-items: center; justify-content: center; text-align: center; hyphens: manual; cursor: pointer;
  transition: opacity .35s, transform .35s, border-color .35s, box-shadow .35s, color .35s; }
.eaa-jar::before { content: ''; position: absolute; left: 22%; right: 22%; top: -1px; height: 5px; border-radius: 0 0 3px 3px; background: var(--violet); opacity: .8; }
.eaa-jar span { overflow-wrap: anywhere; }
.eaa-drop .eaa-jar { animation: eaaDrop .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: var(--d); }
@keyframes eaaDrop { from { opacity: 0; transform: translateY(-34px); } }
.eaa-jar.eaa-out { opacity: .28; transform: translateY(-5px) scale(.92); border-style: dashed; }
.eaa-jar.eaa-ess { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgba(252,192,80,.4); }
.eaa-jar.eaa-ess::before { background: var(--gold); }
.eaa-jar.eaa-mk { opacity: .35; }
.eaa-jar.eaa-ess.eaa-out { opacity: .4; box-shadow: none; }

/* Rose's students */
.eaa-full { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.eaa-full img { width: 100%; max-height: 100%; object-fit: contain; }

/* the barrel */
.eaa-bw { width: min(100%, 330px); }
.eaa-bar { display: block; width: 100%; height: auto; overflow: visible; }
.eaa-st { fill: url(#eaaWood); stroke: rgba(0,0,0,.35); stroke-width: 1; }
.eaa-hoop { fill: #9a98a6; stroke: rgba(0,0,0,.3); }
.eaa-liq { fill: var(--gold); opacity: .78; }
.eaa-top { fill: #ffe3a6; }
.eaa-pour { stroke: var(--gold); stroke-width: 6; stroke-linecap: round; fill: none; opacity: 0; transition: opacity .25s; }
.eaa-pouring .eaa-pour { opacity: .9; }
.eaa-spill { stroke: #fff1cc; stroke-width: 8; stroke-linecap: round; fill: none; stroke-dasharray: 12 5; filter: drop-shadow(0 0 4px rgba(252,192,80,.9)); }
.eaa-spilling .eaa-spill { animation: eaaFlow .5s linear infinite; }
@keyframes eaaFlow { to { stroke-dashoffset: -16; } }
.eaa-pud { fill: #fff1cc; opacity: .85; }
.eaa-lb { font: 700 12px var(--sans); fill: var(--text); text-anchor: middle; }
.eaa-f2 { opacity: 0; transition: opacity .4s; }
.eaa-two .eaa-f2 { opacity: 1; }

@media (max-height: 700px) {
  .eaa-jar { height: 40px; }
  .eaa-bw { width: min(100%, 300px); }
}