:root{color-scheme:dark;--page:#081f2c;--panel:#102b39;--panel2:#123341;--line:#2d4b59;--text:#f0f3e8;--muted:#94adad;--accent:#83d6c7;--yellow:#e1c184;--red:#fc897c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:14px/1.45 Inter,'Segoe UI',Arial,sans-serif;background:var(--page);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}.app{min-width:320px;min-height:100vh;max-width:1900px;margin:auto}.header{display:flex;align-items:center;gap:26px;min-height:92px;padding:17px 32px;border-bottom:1px solid #2a4451;background:#092431}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;min-width:258px}.brand-symbol{width:43px;height:43px;display:grid;place-items:center;font-size:29px;font-weight:800;letter-spacing:-5px;border:1px solid #567e80;color:#a8f0dd;background:#163847;transform:skewX(-8deg)}.brand-splash{color:#d6a960;font-weight:300;margin-left:1px}.brand-words strong{display:block;font-size:19px;letter-spacing:3px;font-weight:750}.brand-words small{display:block;font-size:8px;color:#a6c8c8;letter-spacing:1.55px;margin-top:1px}.header-title{display:flex;flex-direction:column;border-left:1px solid #345360;padding-left:25px;font-size:18px;font-weight:550;line-height:1.5}.eyebrow{font-size:9px;letter-spacing:2.3px;font-weight:750;color:var(--accent)}.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.offline-pill{color:#a5c5bc;font-size:9px;letter-spacing:1.2px;border:1px solid #35565c;border-radius:80px;padding:11px 14px;white-space:nowrap}.tiny-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#74d2af;margin-right:8px;box-shadow:0 0 10px #4acf9b}.quiet-button{padding:10px 14px;background:transparent;color:#d7e5df;border:1px solid #395863;border-radius:3px;letter-spacing:1px;font-size:11px}.quiet-button:hover,.icon-button:hover,.outline-btn:hover,.export-btn:hover{border-color:#94d4c9;color:white}.dashboard{display:grid;grid-template-columns:minmax(0,1fr) 335px;grid-template-rows:530px auto;gap:0;align-items:stretch}.viewport-panel{background:#112f3d;min-width:0;display:flex;flex-direction:column;border-bottom:1px solid #34535d}.viewport-toolbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid #254957;font-size:10px;letter-spacing:1.3px;font-weight:700}.viewport-heading{display:flex;gap:10px;align-items:center;color:#b2d3cd}.square-marker{width:8px;height:8px;border:1px solid #9ed7bd;transform:rotate(45deg)}.toolbar-micro{font-size:9px;color:#688d91;font-weight:500}.divider-dot{color:var(--yellow);padding:0 8px}.viewport-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(ellipse at center,#9bc6bb 0%,#789b99 70%,#557b7e 100%)}#world{display:block;width:100%;height:100%;cursor:grab;touch-action:none}#world:active{cursor:grabbing}.viewport-gradient{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(3,31,44,.35),transparent 30%,transparent 70%,rgba(19,51,63,.09))}.view-tag{position:absolute;z-index:1;display:flex;align-items:center;gap:8px;color:#294f58;font-size:9px;font-weight:850;letter-spacing:1px;background:rgba(237,245,220,.88);padding:8px 11px;box-shadow:0 4px 12px #26423f33;pointer-events:none}.view-tag-river{left:13%;top:37%}.view-tag-polder{right:16%;top:45%}.view-tag-index{color:#668d86;font-size:8px;padding-right:5px;border-right:1px solid #8eb1a8}.view-lower{position:absolute;pointer-events:none;left:25px;right:25px;bottom:22px;display:flex;justify-content:space-between;align-items:end;gap:12px;color:#fff}.location-bug{display:flex;flex-direction:column;gap:1px;text-shadow:0 1px 8px #183f49}.mini-topline{color:#d1e8d9;font-size:9px;letter-spacing:1.6px}.location-bug strong{font-size:21px;letter-spacing:2px}.location-bug span:last-child{font-size:10px;color:#e2e8e1}.camera-hint{font-size:9px;letter-spacing:1.3px;color:#e5f4e8;white-space:nowrap}.viewport-footer{height:48px;display:flex;align-items:center;gap:24px;padding:0 24px;background:#0b2735;font-size:10px;color:#92b3b3}.key{display:flex;align-items:center;gap:7px;white-space:nowrap}.key span:last-child{color:#e0eade;font-weight:700}.key-line{display:inline-block;width:14px;height:3px;margin-right:3px}.river-line{background:#4eabc0}.canal-line{background:#9edac9}.viewport-utilities{display:flex;gap:12px;align-items:center;margin-left:auto}.icon-button{background:transparent;color:#bdd9d6;border:1px solid #45616b;font-size:20px;width:30px;height:29px;line-height:1;border-radius:4px}.simulation-label{font-size:8px;letter-spacing:1.15px;color:#7e9da1}.controls-panel{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;background:#0c2836;border-left:1px solid #33515d;min-height:0}.panel-kicker{display:flex;justify-content:space-between;padding:23px 23px 9px}.version{font-size:10px;color:#819fa1}.panel-title-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 23px 20px}.panel-title-row h2{margin:0;font-size:23px;letter-spacing:-.8px;font-weight:550}.state-badge{font-size:9px;letter-spacing:1px;white-space:nowrap;border:1px solid #426f68;color:#a5f1cd;border-radius:30px;padding:6px 9px}.state-badge.high{color:#f9d487;border-color:#9e8750}.state-badge.flood{color:#ffa69b;border-color:#a95859}.controls-scroll{padding:0 23px 24px;overflow-y:auto;flex:1;min-height:250px;scrollbar-color:#3c6570 transparent;scrollbar-width:thin}.field-label{display:block;margin-bottom:9px;color:#9eb9b8;font-size:9px;font-weight:800;letter-spacing:1.5px}.field-select{appearance:none;width:100%;padding:12px 32px 12px 12px;border:1px solid #41616a;border-radius:3px;color:#e8f2e9;background:#173745 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='m1 1 4.5 4.5L10 1' stroke='%23a7d9cc' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;font-size:12px}.section-sep{margin:26px 0 19px;color:#6c999e;font-size:9px;letter-spacing:1.8px;font-weight:800;border-bottom:1px solid #36515a;padding-bottom:10px}.slider-block{margin-bottom:22px}.slider-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.slider-top label{font-size:12px;color:#e2eae3}.slider-top output{font-size:12px;color:#a9e7d5;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}.slider-block input[type=range]{display:block;margin:14px 0 4px;width:100%;height:4px;accent-color:var(--accent);cursor:pointer}.slider-hints{display:flex;justify-content:space-between;color:#6f959b;font-size:9px;letter-spacing:.5px}.switch-divider{border-top:1px solid #31515b;margin:15px 0}.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0;cursor:pointer}.toggle-text strong{display:block;font-size:12px;font-weight:580}.toggle-text small{display:block;color:#8caaab;font-size:10px;margin-top:3px}.toggle input{position:absolute;opacity:0;width:1px;height:1px}.switch{position:relative;flex-shrink:0;border:1px solid #47616b;background:#263c47;width:37px;height:21px;border-radius:20px;transition:background .15s}.switch:before{content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:#a3b4b2;transition:transform .15s}.toggle input:checked+.switch{background:#4bc0ac;border-color:#66d9bd}.toggle input:checked+.switch:before{transform:translateX(16px);background:#072e39}.toggle input:focus-visible+.switch{outline:2px solid white;outline-offset:3px}.power-toggle{border-top:1px solid #31515b;padding-top:18px}.play-controls{margin-top:auto;padding:17px 22px 22px;border-top:1px solid #35545d;background:#0b2734;display:grid;grid-template-columns:1fr auto;gap:13px}.sim-time,.speed-label{display:flex;flex-direction:column;gap:3px}.sim-time span,.speed-label span{font-size:9px;letter-spacing:1.5px;color:#7fa5a9}.sim-time strong{font-size:22px;letter-spacing:2px;font-variant-numeric:tabular-nums;font-weight:550}.speed-label select{border:1px solid #43616e;color:#e3f4e9;background:#183b4b;border-radius:2px;padding:5px;font-size:11px}.transport{display:flex;gap:8px;grid-column:1 / 3}.primary-btn,.outline-btn{border:1px solid #7dd4c3;border-radius:3px;padding:12px 10px;font-size:11px;font-weight:750;letter-spacing:1.4px}.primary-btn{background:#a7e0ce;color:#0e3a40;flex:1}.primary-btn:hover{background:#c6f4e5}.outline-btn{color:#b9d7d0;background:transparent;min-width:92px;border-color:#45636a}.analytics-panel{grid-column:1;grid-row:2;background:#0d2634;padding:24px 25px 26px}.analytics-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.analytics-header h2{margin:3px 0 0;font-size:24px;letter-spacing:-.4px;font-weight:500}.export-btn{color:#a8c9c7;background:transparent;border:1px solid #46626a;border-radius:3px;padding:10px 12px;font-size:9px;letter-spacing:1.4px}.export-btn>span:first-child{font-size:14px;margin-right:5px}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.stat{min-width:0;border:1px solid #345260;padding:17px 15px;background:#11313f;min-height:135px}.stat>span:first-child{display:block;font-size:9px;letter-spacing:1.2px;font-weight:800;color:#99bbb9;min-height:22px}.stat-value{display:flex;align-items:baseline;gap:8px;margin:8px 0}.stat-value strong{font-size:31px;line-height:1;letter-spacing:-1px;font-weight:550;font-variant-numeric:tabular-nums}.stat-value small{color:#a0cbc7;font-size:12px}.stat-caption{font-size:10px;color:#8aadaf;display:flex;gap:8px;align-items:center}.stat-dot{background:#638c94;width:3px;height:3px;border-radius:50%}.analytics-bottom{margin-top:13px;display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,.9fr);gap:13px}.chart-card{border:1px solid #35545f;background:#10313f;padding:18px 17px 12px;min-width:0}.chart-title{display:flex;justify-content:space-between;gap:5px;margin-bottom:4px}.chart-title>div:first-child{display:flex;flex-direction:column}.chart-title span:first-child{font-size:9px;letter-spacing:1.3px;font-weight:800;color:#bfd9d4}.chart-subtitle{color:#88a9a9!important;font-size:10px!important;letter-spacing:0!important;font-weight:400!important;margin-top:4px}.chart-legend{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:9px;color:#b6d5d0}.chart-legend i{width:14px;height:2px;background:#9be8d7}#history-chart{width:100%;height:184px;display:block}.engineering-note{padding:18px 18px 14px;background:#183a44;border:1px solid #40606a;display:flex;flex-direction:column}.note-icon{font-size:30px;color:#bfdfc8;margin:8px 0 1px}.engineering-note h3{margin:0;font-size:17px;font-weight:550;letter-spacing:-.25px}.engineering-note p{font-size:11px;line-height:1.65;color:#b3cac6;margin:8px 0 11px}.balance-line{display:flex;justify-content:space-between;gap:6px;border-top:1px solid #46616a;padding-top:12px;font-size:9px;color:#9cbbb6;letter-spacing:.6px}.balance-line strong{color:#a3dfd1;white-space:nowrap}.model-disclaimer{font-size:9px;color:#91aaa8;line-height:1.4;margin-top:8px}.footer{min-height:49px;border-top:1px solid #2f4d56;padding:16px 33px;display:flex;justify-content:space-between;gap:15px;color:#708f94;font-size:9px;letter-spacing:1.3px}.light-separator{color:#b6bb82;margin:0 5px}dialog{max-width:540px;width:calc(100% - 35px);border:1px solid #789c96;border-radius:8px;padding:24px 29px 30px;background:#0e2d3a;color:#e8f2eb;box-shadow:0 25px 70px #020e18}.dialog-heading{display:flex;justify-content:space-between;align-items:center}dialog h2{font-size:27px;font-weight:550}dialog h3{font-size:14px;color:#b7e3d7;margin-top:20px}dialog p{color:#bfd0ce;line-height:1.75}dialog .help-warning{border-left:3px solid #d7bc80;padding-left:12px;color:#ead6ad}dialog::backdrop{background:#05151add}#help-close{font-size:26px;color:#cee3dc;background:none;border:0}.render-error{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:40px;background:#113640;color:white;font-size:17px}.render-error[hidden]{display:none}@media(max-width:1230px){.dashboard{grid-template-columns:minmax(0,1fr) 315px}.header-title{font-size:15px}.brand{min-width:235px}.toolbar-micro{display:none}.analytics-bottom{grid-template-columns:1fr}.engineering-note{min-height:170px}.stat-value strong{font-size:26px}}@media(max-width:970px){.dashboard{grid-template-columns:minmax(0,1fr);grid-template-rows:500px auto auto}.viewport-panel{grid-column:1;grid-row:1}.controls-panel{grid-column:1;grid-row:2;border-left:0;border-bottom:1px solid #35545d}.controls-scroll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;padding-bottom:10px;overflow:visible}.controls-scroll .field-label,.controls-scroll .field-select,.controls-scroll .section-sep,.controls-scroll .switch-divider{grid-column:1 / 3}.play-controls{grid-template-columns:1fr auto}.analytics-panel{grid-row:3}.header-title{display:none}.header-actions{margin-left:auto}.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:590px){.header{min-height:68px;padding:12px 14px;gap:7px}.brand{min-width:0;gap:8px}.brand-symbol{width:36px;height:36px;font-size:25px}.brand-words strong{font-size:14px;letter-spacing:1.2px}.brand-words small{font-size:6px;letter-spacing:.5px}.header-actions{gap:4px}.offline-pill{display:none}.quiet-button{padding:9px 8px;font-size:10px}.dashboard{grid-template-rows:390px auto auto}.viewport-toolbar{height:43px;padding:0 14px;font-size:9px}.view-tag{font-size:8px;padding:6px}.view-tag-river{left:7%;top:34%}.view-tag-polder{right:7%;top:55%}.view-lower{left:13px;right:13px;bottom:12px}.location-bug strong{font-size:15px}.location-bug span:last-child{font-size:8px}.camera-hint{display:none}.viewport-footer{gap:8px;font-size:9px;padding:0 10px}.simulation-label{display:none}.panel-kicker,.panel-title-row{padding-left:18px;padding-right:18px}.controls-scroll{grid-template-columns:1fr;padding:0 18px 12px}.controls-scroll .field-label,.controls-scroll .field-select,.controls-scroll .section-sep,.controls-scroll .switch-divider{grid-column:1}.analytics-panel{padding:20px 13px}.analytics-header h2{font-size:22px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{min-height:120px;padding:12px}.stat-value strong{font-size:27px}.analytics-bottom{grid-template-columns:1fr}.footer{padding:12px 15px;flex-direction:column;font-size:8px;gap:5px}}