#hydro-sim{position:fixed;right:18px;bottom:76px;width:330px;max-height:calc(100vh - 104px);overflow:auto;z-index:4;background:#112129f5;color:#edf4f5;border:1px solid #44606b;border-radius:16px;padding:18px;box-shadow:0 18px 50px #0005}#hydro-sim h2{margin:0;font-size:19px}#hydro-sim p{color:#b5c9d0}#hydro-sim button,#hydro-sim select{color:#e3edf1;background:#213842;border-color:#49636e;padding:9px;font-size:13px}#hydro-sim button:hover{background:#304d5a}#hydro-sim button:disabled{opacity:.42;cursor:not-allowed}#hydro-sim .sim-row{display:flex;gap:6px;margin:8px 0}#hydro-sim .sim-row>*{flex:1;min-width:0}#hydro-sim select{margin:4px 0;width:100%}#hydro-sim label{margin:12px 0 3px;font-size:12px;color:#b5c9d0}#hydro-sim #sim-start{background:#187957;border-color:#32a379}#hydro-sim #sim-emergency{background:#8c3235;border-color:#ca5d61}#hydro-sim .sim-meter{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}#hydro-sim .sim-meter div{padding:11px;background:#0a171e;border-radius:9px;font-size:11px;color:#afc5ce}#hydro-sim .sim-meter strong{display:block;font-size:25px;color:#ecf7f9;font-variant-numeric:tabular-nums}#hydro-sim #sim-state{display:block;margin:8px 0;color:#9fe4cb}#hydro-sim #sim-message{min-height:38px;font-size:12px;margin:8px 0}#hydro-sim #sim-volume{width:100%;accent-color:#53b993}#hydro-sim .sim-note{font-size:10px;line-height:1.4;margin-bottom:0}#sim-collapse{float:right}#hydro-sim:has(#sim-body[hidden]){width:280px}body:has(#hydro-sim) #move{left:20px;right:auto;bottom:82px}body:has(#hydro-sim) #card{right:365px;max-width:260px}#sim-crosshair{position:fixed;left:50%;top:50%;z-index:1;color:#ecffff;pointer-events:none;text-shadow:0 1px 3px #000;font-size:21px;opacity:.6}#sim-entry{display:block;background:#187957;color:white;padding:14px 20px;border-radius:9px;text-decoration:none;margin:18px 0;width:fit-content}
@media(max-width:760px){#hydro-sim{right:10px;bottom:66px;width:285px;max-height:52vh;padding:12px}body:has(#hydro-sim) aside:has(#collapse-body[hidden]){width:210px}body:has(#hydro-sim) #card{top:10px;right:10px;bottom:auto;max-width:210px}body:has(#hydro-sim) #move{left:10px;bottom:68px;flex-direction:column}#hydro-sim .sim-meter strong{font-size:20px}}

#hydro-sim details{border-top:1px solid #344f59;padding:9px 0;font-size:12px}#hydro-sim summary{cursor:pointer;color:#bce9d9;padding:4px 0}#sim-circuit-list{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px 0}#hydro-sim #sim-circuit-list button{font-size:11px;text-align:left;min-height:45px}#hydro-sim #sim-circuit-list button[aria-pressed=true]{border-left:3px solid #68c598}#hydro-sim #sim-circuit-list button[aria-pressed=false]{border-left:3px solid #a47568;background:#382e30}#hydro-sim #sim-log{padding-left:18px;font-size:11px;color:#b5c9d0}#hydro-sim #sim-log li{margin:5px 0}#sim-hint{position:fixed;left:50%;top:25px;transform:translateX(-50%);background:#102129ed;color:#c3f1dd;padding:10px 16px;border:1px solid #567568;border-radius:8px;z-index:3;pointer-events:none;font:13px system-ui;max-width:40vw}#hydro-sim button:active{transform:translateY(1px);filter:brightness(1.2)}#hydro-sim #sim-state{position:sticky;top:-18px;background:#112129;z-index:1;padding:7px 0}#hydro-sim .sim-meter strong{font-size:21px}#hydro-sim .sim-meter div{padding:8px}#hydro-sim .sim-meter{gap:5px;margin:9px 0}
