:root{font-family:Montserrat,Trebuchet MS,Gill Sans,Avenir Next,sans-serif;line-height:1.4;font-weight:400;color:#102332;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-1: #eef5f4;--bg-2: #d8e4ef;--panel: #f7f7f7;--panel-border: #d5d5d5;--ink: #122431;--ink-soft: #41596a;--accent: #0f766e;--accent-strong: #065f56;--danger: #b91c1c;--flow-line: #0000ff;--equipotential: #ff0000;--phreatic: #1d4ed8;--no-flow: #ffffff;--soil: #8f6b43;--flow-line-width: 3;--equipotential-width: 3}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 12% 20%,#fffc 0,#fff0 42%),radial-gradient(circle at 88% 86%,#fdf5d7cc 0,#fff0 34%),linear-gradient(145deg,var(--bg-1),var(--bg-2))}body.guide-open{overflow:hidden}#app{width:100%;min-height:100vh;padding:1rem}.layout{display:grid;grid-template-columns:minmax(310px,360px) 1fr;gap:1rem;align-items:stretch;min-height:calc(100vh - 2rem)}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:1rem;overflow-y:auto;max-height:calc(100vh - 2rem);box-shadow:0 8px 24px #0f172a14}.panel h1{margin:0;font-size:1.45rem;letter-spacing:.02em}.subhead{margin:.4rem 0 .8rem;color:var(--ink-soft);font-size:.94rem}.group{border-top:1px solid #d9d8cf;padding-top:.7rem;margin-top:.7rem}.quick-start{margin:0;padding-left:1rem;color:#2a4556;font-size:.82rem}.quick-start li+li{margin-top:.2rem}.group h2{margin:0 0 .45rem;font-size:.95rem;letter-spacing:.02em;text-transform:uppercase;color:#213d50}.grid{display:grid;gap:.45rem .6rem}.grid.two-col{grid-template-columns:1fr 1fr 1fr}label{display:flex;flex-direction:column;gap:.22rem;font-size:.8rem;color:#2a4252}label.inline-check{justify-content:center;align-items:flex-start;gap:.25rem}input[type=number],input[type=text],select{width:100%;padding:.38rem .45rem;border:1px solid #bec9d1;border-radius:6px;font:inherit;font-size:.86rem;color:var(--ink);background:#fcffff}input[type=checkbox]{transform:translateY(.03rem)}.tool-row{display:flex;flex-wrap:wrap;gap:.38rem;margin-bottom:0}button{border:1px solid #9caeb9;background:linear-gradient(180deg,#fdfefe,#e6edf0);color:#102332;font:inherit;font-size:.81rem;padding:.36rem .58rem;border-radius:8px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}button:hover{border-color:#4c6979;transform:translateY(-1px)}button.is-active{border-color:var(--accent-strong);background:linear-gradient(180deg,#d9f3ef,#bae9df);color:#073a35}button.danger{border-color:#d4a8a8;color:var(--danger)}.action-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem}.hint{margin:.45rem 0 0;font-size:.8rem;color:#415a66}.hint code{background:#edf3f8;border:1px solid #d2dee7;border-radius:4px;padding:.06rem .28rem;color:#27475b}.step-hint{margin-top:.35rem;color:#0a4f50;font-weight:600}.status{margin:.5rem 0 0;padding:.44rem .56rem;border-radius:8px;border:1px solid #ccdaea;background:#eef6ff;color:#21435f;font-size:.8rem}#selectionType,#standpipeText{margin:0;font-size:.84rem;color:#314d5f}.inventory-summary{margin:0 0 .35rem;font-size:.8rem;color:#3d596b}.inventory-list{display:grid;gap:.3rem;grid-template-columns:1fr}.inventory-item{text-align:left;border-radius:7px;border:1px solid #bdcad4;background:#f5f9fb;padding:.35rem .45rem;font-size:.78rem}.inventory-item.is-draggable{position:relative;cursor:grab;padding-left:1.25rem}.inventory-item.is-draggable:before{content:"::";position:absolute;left:.42rem;top:50%;transform:translateY(-50%);color:#6b8393;font-weight:700}.inventory-item.is-dragging{opacity:.5;cursor:grabbing}.inventory-item.drop-before{box-shadow:inset 0 3px #0f766e}.inventory-item.drop-after{box-shadow:inset 0 -3px #0f766e}.inventory-item.is-selected{border-color:#0f766e;background:#d9f3ef}.inventory-empty{margin:0;font-size:.78rem;color:#657b8a}.is-hidden{display:none}.group ul{margin:0;padding-left:1rem;color:#2f4b59;font-size:.8rem}.group li+li{margin-top:.22rem}.canvas-wrap{display:flex;flex-direction:column;position:relative;background:linear-gradient(160deg,#f6fbff,#e7eef3 65%,#ecf4eb);border:1px solid #c4d1db;border-radius:14px;box-shadow:inset 0 0 0 1px #fff6,0 8px 24px #0f172a14;overflow:hidden;height:100%;min-height:0}.canvas-wrap.is-file-drag{border-color:#0f766e;box-shadow:inset 0 0 0 2px #0f766e47,0 8px 24px #0f172a14}.canvas-wrap.is-file-drag:after{content:"Drop state file to load";position:absolute;inset:0;display:grid;place-items:center;font-size:1rem;font-weight:700;letter-spacing:.02em;color:#0b4e49;background:#e9fbf8b3;pointer-events:none}.canvas-toolbar{display:flex;align-items:center;gap:.85rem;min-height:44px;padding:.4rem .65rem;border-bottom:1px solid #e3e3e3;background:linear-gradient(180deg,#eff5f9,#f1f1f1)}.canvas-toolbar-left{display:flex;flex-wrap:wrap;align-items:center;gap:.42rem .7rem;flex:1 1 auto;min-width:0}.canvas-toolbar-left .tool-row{flex:1 1 540px}.canvas-ep-head{flex:0 0 172px;font-size:.78rem;max-width:100%}.canvas-toolbar-right{display:flex;align-items:center;gap:.45rem;margin-left:auto}.cursor-readout{flex:0 0 auto;font-size:.78rem;color:#23465f;font-variant-numeric:tabular-nums;white-space:nowrap}.fit-view-btn{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;padding:0}.fit-view-btn svg{width:1rem;height:1rem;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}.guide-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;padding:0;font-size:1rem;font-weight:700;line-height:1}.toolbar-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border:1px solid #9caeb9;border-radius:8px;background:linear-gradient(180deg,#fdfefe,#e6edf0);color:#23465f;cursor:pointer;-webkit-user-select:none;user-select:none}.toolbar-toggle:hover{border-color:#4c6979}.toolbar-toggle input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}.toolbar-toggle-label{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:7px;font-size:.95rem;font-weight:700;line-height:1}.toolbar-toggle input:checked+.toolbar-toggle-label{background:linear-gradient(180deg,#d9f3ef,#bae9df);color:#065f56;box-shadow:inset 0 0 0 1px var(--accent-strong)}.toolbar-toggle:focus-within{outline:2px solid rgba(15,118,110,.34);outline-offset:1px}.canvas-guidance{padding:.28rem .65rem .44rem;border-bottom:1px solid #e3e3e3;background:linear-gradient(180deg,#f4f8fb,#eff4f6)}.canvas-guidance .hint{margin:0;font-size:.76rem}.canvas-guidance .step-hint{margin-top:.15rem}.guide-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:1rem;background:#08121c85}.guide-overlay.is-hidden{display:none}.guide-overlay-panel{width:min(560px,100%);max-height:min(76vh,700px);overflow:auto;border-radius:12px;border:1px solid #bfd0dc;background:#f8fcff;box-shadow:0 24px 54px #04152347;padding:.9rem 1rem 1rem}.guide-overlay-header{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}.guide-overlay-header h2{margin:0;font-size:1rem;letter-spacing:.02em;text-transform:uppercase;color:#17374c}.guide-close-btn{padding:.28rem .55rem}.guide-overlay-content{display:grid;gap:.62rem}.guide-section h3{margin:0 0 .28rem;font-size:.82rem;letter-spacing:.02em;text-transform:uppercase;color:#1a4058}.guide-section ul,.guide-section ol{margin:0;padding-left:1.05rem;color:#2f4b59;font-size:.83rem}.guide-section li+li{margin-top:.28rem}.guide-section code{background:#edf3f8;border:1px solid #d2dee7;border-radius:4px;padding:.06rem .22rem;color:#27475b}#flowCanvas{width:100%;flex:1 1 auto;min-height:0;height:0;display:block;touch-action:none}@media(max-width:980px){#app{padding:.75rem}.layout{grid-template-columns:1fr;align-items:stretch}.panel{order:2;max-height:none}.canvas-wrap{order:1;height:56vh;min-height:330px}.canvas-toolbar{min-height:48px;padding:.45rem .55rem;align-items:flex-start}.canvas-toolbar-left{flex:1 1 auto}.canvas-toolbar-left .tool-row{flex:1 1 100%}.canvas-toolbar-right{margin-left:0;flex:0 0 auto}.cursor-readout{font-size:.75rem}.fit-view-btn,.guide-toggle-btn,.toolbar-toggle{min-height:34px;min-width:34px}.canvas-guidance{padding:.4rem .55rem .5rem}.canvas-ep-head{flex:0 0 170px}.canvas-guidance .hint{font-size:.74rem}}a{font-weight:700;color:#111}#benjy{position:fixed;bottom:5pt;right:5pt;font-size:8pt;z-index:99;background-color:#fff;padding:5pt;border-radius:5pt;color:#111;-webkit-user-select:none;user-select:none;opacity:.8}