/* Lab pages (trig + optics) */
.answer {
  flex: 1; min-width: 90px; height: 72px; border-radius: 22px; background: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--ink);
  box-shadow: inset 0 -6px 0 rgba(43,33,80,.1), 0 6px 14px -6px rgba(43,33,80,.4);
  transition: transform .2s cubic-bezier(.3,1.6,.5,1), background .2s;
}
.answer:hover { transform: translateY(-3px); }
.answer.right { background: #b9f5d8; }
.answer.wrong { background: #ffd0da; animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.question { flex: 2; min-width: 240px; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--ink); }
.play-btn {
  flex: none; height: 60px; padding: 0 22px; border-radius: 18px; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  background: linear-gradient(180deg, #ffb347, #ff8a3d); box-shadow: inset 0 -5px 0 rgba(0,0,0,.15);
}
.play-btn.blue { background: linear-gradient(180deg, #6fd0ff, #2f9bff); }
.play-btn.pink { background: linear-gradient(180deg, #ff8ab0, #ff4f86); }
.time-readout {
  flex: none; min-width: 120px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 28px;
  background: #fff; border-radius: 18px; padding: 8px 12px; box-shadow: 0 4px 0 rgba(43,33,80,.1);
}
.toggle-light {
  flex: none; width: 110px; height: 72px; border-radius: 22px; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); opacity: .45; transition: opacity .2s, transform .2s;
}
.toggle-light .ico { font-size: 26px; }
.toggle-light.on { opacity: 1; transform: translateY(-3px); }
.mix-result {
  flex: 1; min-width: 200px; font-family: var(--font-display); font-weight: 700; font-size: 26px; text-align: center;
  padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 rgba(43,33,80,.1);
}
.dot-swatch { display: inline-block; width: 28px; height: 28px; border-radius: 50%; vertical-align: -6px; margin: 0 4px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }