/* diffusion.css — spreading particle cloud for viz/diffusion.js (pure DOM). */

.di { display: flex; flex-direction: column; gap: 0.8rem; }
.di-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0a0f1a, #06090f); }
.di-box { position: absolute; left: 4%; right: 4%; top: 6%; bottom: 6%; border: 1.5px solid rgba(148, 163, 184, 0.3); border-radius: 8px; }
.di-parts { position: absolute; inset: 0; pointer-events: none; }
.di-p { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 34% 30%, #f9a8d4, #db2777 65%, #9d174d); box-shadow: 0 0 3px rgba(219, 39, 119, 0.5); }
.di-phase { position: absolute; left: 8px; bottom: 6px; font-size: 0.78rem; font-weight: 600; color: #aebdce; background: rgba(6, 10, 18, 0.6); padding: 2px 7px; border-radius: 5px; }

.di-meter { display: flex; align-items: center; gap: 0.5rem; }
.di-mlbl { font-size: 0.72rem; color: #8aa0b6; flex: 0 0 auto; }
.di-track { flex: 1; height: 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; }
.di-even { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #db2777, #f472b6); transition: width 0.15s linear; }