/* reaction_rate.css — bouncing reactant particles for viz/reaction_rate.js (pure DOM). */

.rr { display: flex; flex-direction: column; gap: 0.85rem; }
.rr-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 210px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: radial-gradient(120% 90% at 50% 30%, rgba(104, 130, 176, 0.08), transparent 60%), linear-gradient(180deg, #0a0f1a, #06090f); }
.rr-flask { position: absolute; left: 5%; right: 5%; top: 6%; bottom: 6%; border: 2px solid rgba(148, 163, 184, 0.4); border-radius: 10px; background: rgba(56, 189, 248, 0.04); }
.rr-parts { position: absolute; inset: 0; pointer-events: none; }
.rr-p { position: absolute; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 34% 30%, #a7f3d0, #10b981 62%, #047857); box-shadow: 0 0 4px rgba(16, 185, 129, 0.5); transition: background 0.1s; }
.rr-p.rr-react { background: radial-gradient(circle at 40% 32%, #fff7d6, #fbbf24 55%, #f97316); box-shadow: 0 0 10px 3px rgba(251, 191, 36, 0.85); }

.rr-cats { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.rr-clbl { font-size: 0.85rem; color: #9fb0c3; font-weight: 600; margin-right: 0.2rem; }
.rr-catbtn { cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; color: #cbd5e1; padding: 0.28rem 0.7rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.12s ease; }
.rr-catbtn:hover { background: rgba(255, 255, 255, 0.09); }
.rr-catbtn.rr-on { color: #07121d; background: #8fa8cf; border-color: #8fa8cf; }