/* static_electricity.css — charged-balloon scene drawn by viz/static_electricity.js (SVG + buttons). */

.se { display: flex; flex-direction: column; gap: 0.7rem; }
.se-string { stroke: rgba(203, 213, 225, 0.6); stroke-width: 1; }
.se-mount { stroke: rgba(148, 163, 184, 0.7); stroke-width: 3; stroke-linecap: round; }
.se-peg { fill: rgba(203, 213, 225, 0.9); }
.se-balloon { fill: url(#se-bal-grad); stroke: #fecaca; stroke-width: 1.4; transition: cx 0.5s cubic-bezier(0.22, 1, 0.36, 1), cy 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.se-shine { fill: #ffffff; opacity: 0.32; }
.se-knot { fill: #dc2626; }
.se-balloon2 { fill: url(#se-bal2-grad); stroke: #fdba74; stroke-width: 1.4; }
.se-wall { fill: rgba(148, 163, 184, 0.18); stroke: rgba(148, 163, 184, 0.4); stroke-width: 1; }
.se-head { fill: #fbbf24; stroke: #fcd34d; stroke-width: 1.2; }
.se-hair { stroke: #92400e; stroke-width: 2; stroke-linecap: round; transition: x2 0.4s ease, y2 0.4s ease; }
.se-cloth { fill: rgba(96, 165, 250, 0.12); stroke: rgba(96, 165, 250, 0.4); stroke-width: 1; }
.se-clbl { fill: #8aa0b6; font-size: 9px; font-weight: 600; }
.se-neg circle { fill: rgba(59, 130, 246, 0.85); } .se-neg line { stroke: #fff; stroke-width: 1.4; }
.se-pos circle { fill: rgba(239, 68, 68, 0.85); } .se-pos line { stroke: #fff; stroke-width: 1.4; }
.se-force { stroke: #34d399; stroke-width: 2.6; }
.se-fhead { fill: #34d399; }
.se-flbl { fill: #6ee7b7; font-size: 11px; font-weight: 700; }

.se-targets { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.se-tlbl { font-size: 0.82rem; color: #9fb0c3; font-weight: 600; }
.se-tbtn { cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600; color: #cbd5e1; padding: 0.3rem 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; }
.se-tbtn:hover { background: rgba(255, 255, 255, 0.09); }
.se-tbtn.se-on { color: #07121d; background: #ef4444; border-color: #ef4444; }