/* Capsaicin lesson. Everything scoped under .cap-*. */
.cap-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cap-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.cap-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

/* the cut chili */
.figure.cap-fig { width: min(100%, 340px); }

/* the desert test */
.cap-field { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cap-an { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); min-height: 210px; transition: border-color .3s; }
.cap-an img { width: 100%; max-width: 130px; height: 96px; object-fit: contain; transition: transform .4s; }
.cap-an b { font-size: 13.5px; font-weight: 800; color: var(--text); text-align: center; }
.cap-an.eat img { animation: capNom .5s ease-in-out 2; }
@keyframes capNom { 50% { transform: translateY(6px) rotate(-4deg); } }
.cap-an.no img { transform: rotate(8deg) translateX(8px); opacity: .75; }
.cap-st { font-size: 13px; line-height: 1.3; color: var(--dim); text-align: center; min-height: 34px; }
.cap-st.bad b { color: #FF8A8A; } .cap-st.good b { color: var(--mint); }
.cap-seeds { display: flex; gap: 5px; min-height: 14px; }
.cap-seeds i { width: 9px; height: 12px; border-radius: 50%; background: #f1e3bf; opacity: 0; animation: capIn .3s forwards; }
.cap-seeds i.dead { background: #6e6258; transform: scale(.7) rotate(40deg); border-radius: 3px; }
.cap-seeds i.live { background: #f1e3bf; box-shadow: 0 -6px 0 -2px var(--mint); }
@keyframes capIn { to { opacity: 1; } }
.cap-field.hot .cap-an { border-color: rgba(216,85,85,.5); }

@media (max-height: 700px) {
  .cap-an { min-height: 0; padding: 8px 6px; }
  .cap-an img { height: 72px; }
}