/* Schrödinger's Cat lesson. All rules scoped under .cat-* */
.cat-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cat-note { font-size: 14px; color: #BDB5C9; text-align: center; }
.cat-cv { --cap: 9999px; display: block; width: min(100%, calc(var(--cap) * var(--ar, 2))); height: auto; margin: 0 auto; }
.cat-full { flex: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 16px 8px; box-sizing: border-box; }

/* ---------- the crate ---------- */
.cat-crate { position: relative; width: min(88vw, 400px, calc((100vh - 420px) * 290 / 330)); margin-bottom: 24px; aspect-ratio: 290 / 330; }
.cat-in { position: absolute; left: 6%; right: 6%; top: 0; bottom: 0; overflow: hidden; }
.cat-pet { position: absolute; left: 50%; bottom: 20%; width: 82%; transform: translate(-50%, 0); transition: transform .6s cubic-bezier(.3, .7, .3, 1); filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.cat-front { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; border-radius: 10px 10px 16px 16px; background: linear-gradient(#8A5A3C, #6E452D); box-shadow: inset 0 0 0 4px #5A3722, 0 8px 16px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; }
.cat-front span { font: 800 15px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #F4E3C3; padding: 6px 12px; border: 2px dashed rgba(244,227,195,.6); border-radius: 8px; }
.cat-lid { position: absolute; left: -2%; right: -2%; bottom: 50%; height: 7%; border-radius: 8px; background: linear-gradient(#9C6A48, #7A4E33); box-shadow: inset 0 0 0 3px #5A3722; transform-origin: 50% 100%; transform: translate(-30%, -700%) rotate(-25deg); opacity: 0; transition: transform .6s cubic-bezier(.3, .7, .3, 1), opacity .4s; }
.cat-crate.cat-s-shut .cat-pet { transform: translate(-50%, 110%); }
.cat-crate.cat-s-shut .cat-lid { transform: none; opacity: 1; }
.cat-front span { opacity: 0; transition: opacity .3s; }
.cat-crate.cat-s-shut .cat-front span { opacity: 1; }

/* ---------- the air ---------- */
.cat-read { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.cat-read span { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.cat-read b { font: 800 20px var(--sans); color: #9FD8FF; }
.cat-read i { font: 600 12px var(--sans); font-style: normal; color: var(--dim); min-height: 15px; }
.cat-read.cat-s-heat b { color: #FF9A6E; }
/* Fixed height leaves room for the answer row, so the panel doesn't shrink when the question arrives. */
.cat-full .cat-cv { flex: 0 0 auto; min-height: 0; width: auto; height: clamp(220px, calc(100vh - 470px), 380px); max-width: 100%; border-radius: 16px; background: #17131F; }

/* ---------- in the lab ---------- */
.choices.cat-rows .choice { display: flex; align-items: center; gap: 14px; text-align: left; padding: 6px 14px 6px 8px; }
.choices.cat-rows .choice img { width: 136px; height: 136px; object-fit: contain; flex: 0 0 auto; }
.choices.cat-rows .choice span { font: 700 16px var(--sans); }

@media (max-height: 700px) {
  .choices.cat-rows .choice img { width: 92px; height: 92px; }
  .cat-cv { --cap: 230px; }
  .cat-full .cat-cv { height: clamp(200px, calc(100vh - 430px), 300px); }
  .cat-crate { width: min(64vw, 230px); }
}