/* gas_piston.css — the gas cylinder + piston for viz/gas_piston.js (pure DOM). */

.gp { display: flex; flex-direction: column; gap: 0.85rem; }
.gp-stage { position: relative; width: 100%; aspect-ratio: 16 / 8; min-height: 200px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0a0f1a, #06090f); }
.gp-cyl { position: absolute; left: 6%; right: 16%; top: 12%; bottom: 12%; border: 2.5px solid #64748b; border-radius: 8px; background: rgba(255, 255, 255, 0.02); }
.gp-chamber { position: absolute; top: 13.5%; height: 73%; border-radius: 6px 0 0 6px; background: rgba(56, 189, 248, 0.1); transition: width 0.08s linear; }
.gp-parts { position: absolute; inset: 0; pointer-events: none; }
.gp-p { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 34% 30%, #bae6fd, #38bdf8); box-shadow: 0 0 3px rgba(56, 189, 248, 0.6); }

.gp-piston { position: absolute; top: 9%; height: 80%; width: 10px; transform: translateX(-50%); z-index: 3; border-radius: 3px;
  background: linear-gradient(90deg, #94a3b8, #cbd5e1); box-shadow: -2px 0 6px rgba(0, 0, 0, 0.4); transition: left 0.08s linear; }
.gp-rod { position: absolute; left: 100%; top: 50%; width: 60px; height: 6px; transform: translateY(-50%); background: linear-gradient(90deg, #64748b, #475569); border-radius: 3px; }

.gp-gaugewrap { position: absolute; right: 14px; top: 16%; bottom: 16%; width: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); display: flex; align-items: flex-end; }
.gp-gauge { width: 100%; border-radius: 7px; background: linear-gradient(180deg, #fbbf24, #f59e0b); transition: height 0.12s linear; }
.gp-glab { position: absolute; bottom: -1.05rem; left: 50%; transform: translateX(-50%); font-size: 0.72rem; font-weight: 700; color: #8aa0b6; }