/* states_of_matter.css — particle box + thermometer for viz/states_of_matter.js (pure DOM). */

.sm { display: flex; flex-direction: column; gap: 0.85rem; }
.sm-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 220px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0a0f1a, #06090f); }
.sm-box { position: absolute; left: 8%; right: 8%; top: 8%; bottom: 8%; border: 2px solid rgba(148, 163, 184, 0.4); border-radius: 8px; background: rgba(255, 255, 255, 0.015); }
.sm-parts { position: absolute; inset: 0; pointer-events: none; }
.sm-p { position: absolute; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 34% 30%, #93c5fd, #3b82f6 62%, #1d4ed8); box-shadow: 0 0 3px rgba(59, 130, 246, 0.5); }

.sm-thermo { position: absolute; right: 12px; top: 14%; bottom: 14%; width: 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); overflow: hidden; display: flex; align-items: flex-end; }
.sm-merc { width: 100%; height: calc(var(--t, 0.2) * 100%); border-radius: 5px; background: linear-gradient(180deg, #fb7185, #ef4444); transition: height 0.12s linear; }

.sm-state { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 10px; border-radius: 5px; background: rgba(6, 10, 18, 0.6); color: #aebdce; }
.sm-state.sm-solid { color: #07121d; background: #38bdf8; } .sm-state.sm-liquid { color: #07121d; background: #34d399; } .sm-state.sm-gas { color: #07121d; background: #fb923c; }