.ohm-play { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.ohm-locks, .ohm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.ohm-locks button[aria-pressed=true] { border-color: var(--u); background: #354333; }
.ohm-visuals { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ohm-triangle { position: relative; height: 320px; background: var(--bg); border-radius: 16px; }
.ohm-triangle > svg { width: 100%; height: 100%; position: absolute; }
.ohm-handle { position: absolute; transform: translate(-50%, -50%); touch-action: none; cursor: grab; padding: 7px 12px; min-width: 76px; border-color: currentColor; background: #20313f; text-align: center; border-radius: 12px; border: 1px solid; user-select: none; }
.ohm-handle:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
.ohm-handle[aria-disabled=true] { cursor: default; background: #354333; }
.ohm-handle b { display: block; font-size: 1.25rem; }
.ohm-handle small { display: block; font-size: .75rem; white-space: nowrap; }
.ohm-circuit { background: var(--bg); border-radius: 16px; padding: 12px; }
.ohm-circuit svg { width: 100%; display: block; }
.ohm-circuit text { fill: var(--text); font: 14px system-ui; text-anchor: middle; }
.ohm-circuit .ohm-wire { fill: none; stroke: #607c8d; stroke-width: 4; }
.ohm-flow { fill: none; stroke: var(--i); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 23; animation: ohm-flow 1s linear infinite; }
@keyframes ohm-flow { to { stroke-dashoffset: -24; } }
.ohm-play.ohm-paused .ohm-flow { animation-play-state: paused; }
.ohm-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.ohm-control { min-width: 0; }
.ohm-control label { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ohm-control output { font-weight: 700; font-variant-numeric: tabular-nums; }
.ohm-control input { accent-color: var(--quantity); }
.ohm-scale { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.ohm-scale span { display: block; height: 100%; background: var(--quantity); }
.ohm-equation { font-size: clamp(1.3rem, 3vw, 2rem); color: var(--u); font-variant-numeric: tabular-nums; margin-top: 20px; }
@media (max-width: 740px) { .ohm-visuals, .ohm-controls { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ohm-flow { animation: none; } }
