:root{--bg:#dfe8ee;--panel:#ffffffe0;--panel-solid:#fff;--ink:#15212b;--muted:#5b6b78;--line:#15212b1f;--accent:#1f6fd1;--accent-soft:#e3eefb;--rain:#3b82c4;--river:#0e9aa7;--sea:#7b5cc4;--north:#d9822b;--warn:#c2410c;--ok:#15803d;--caution:#ca8a04}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e161d;--panel:#141d25e6;--panel-solid:#141d25;--ink:#e6edf2;--muted:#93a3b0;--line:#e6edf21f;--accent:#5aa2ff;--accent-soft:#1b2c40}}:root[data-theme=dark]{--bg:#0e161d;--panel:#141d25e6;--panel-solid:#141d25;--ink:#e6edf2;--muted:#93a3b0;--line:#e6edf21f;--accent:#5aa2ff;--accent-soft:#1b2c40}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);margin:0;font-family:IBM Plex Sans Thai,system-ui,sans-serif;font-size:14px;overflow:hidden}#stage{position:fixed;inset:0}#stage canvas{display:block}#panel{background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);z-index:5;border-radius:14px;width:360px;padding:16px 16px 20px;position:fixed;top:12px;bottom:12px;left:12px;overflow-y:auto}h1{margin:0 0 2px;font-size:20px;line-height:1.3}.sub{color:var(--muted);margin:0 0 12px;font-size:12.5px}h2{text-transform:none;letter-spacing:.02em;color:var(--muted);margin:16px 0 8px;font-size:13px;font-weight:600}.presets{grid-template-columns:1fr 1fr;gap:6px;display:grid}.presets button{font:inherit;text-align:left;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink);cursor:pointer;border-radius:9px;padding:8px 10px;font-size:12.5px;line-height:1.3}.presets button:hover{border-color:var(--accent)}.presets button.on{background:var(--accent-soft);border-color:var(--accent)}.ctl{margin:10px 0}.ctl .row{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.ctl label{font-weight:500}.ctl .val{font-variant-numeric:tabular-nums;font-weight:600}.ctl .hint{color:var(--muted);margin-top:1px;font-size:11.5px}.dot{vertical-align:1px;border-radius:50%;width:9px;height:9px;margin-right:6px;display:inline-block}input[type=range]{width:100%;accent-color:var(--accent);margin:4px 0 0}.toggles label{cursor:pointer;align-items:center;gap:8px;padding:5px 0;display:flex}.toggles input{accent-color:var(--accent);width:16px;height:16px}.gauge{border:1px solid var(--line);background:var(--panel-solid);border-radius:10px;padding:10px}.gauge .t{justify-content:space-between;font-size:12.5px;display:flex}.bar{background:var(--line);border-radius:6px;height:10px;margin:8px 0 4px;position:relative;overflow:hidden}.bar i{background:var(--river);border-radius:6px;transition:width .3s;position:absolute;top:0;bottom:0;left:0}.bar b{background:var(--ink);width:2px;position:absolute;top:-2px;bottom:-2px}.stats{grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;display:grid}.stat{border:1px solid var(--line);background:var(--panel-solid);border-radius:10px;padding:8px 10px}.stat .k{color:var(--muted);font-size:11.5px}.stat .v{font-variant-numeric:tabular-nums;font-size:18px;font-weight:700}.causes{margin-top:8px}.cause{grid-template-columns:92px 1fr 64px;align-items:center;gap:8px;margin:4px 0;font-size:12.5px;display:grid}.cause .cb{background:var(--line);border-radius:4px;height:8px;overflow:hidden}.cause .cb i{height:100%;display:block}.cause .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}#explain{margin:10px 0 0;padding:0;list-style:none}#explain li{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;margin-bottom:6px;padding:7px 10px;font-size:12.8px;line-height:1.5}#explain li.warn{border-color:var(--warn)}#explain li.ok{border-color:var(--ok)}details{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}summary{cursor:pointer;font-weight:600}details p{margin:8px 0;font-size:12.8px;line-height:1.6}.disc{color:var(--muted);margin-top:14px;font-size:11.5px;line-height:1.5}#topbar{z-index:5;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:calc(100% - 400px);display:flex;position:fixed;top:12px;right:12px}#topbar button{font:inherit;border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);cursor:pointer;border-radius:9px;padding:7px 11px;font-size:12.5px}#topbar button.on{background:var(--accent);color:#fff;border-color:var(--accent)}#legend{background:var(--panel);border:1px solid var(--line);z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;min-width:200px;padding:10px 12px;font-size:12px;position:fixed;bottom:12px;right:12px}#legend .ramp{border-radius:5px;height:10px;margin:6px 0 3px}#legend .ticks{color:var(--muted);justify-content:space-between;font-size:11px;display:flex}#tip{pointer-events:none;background:var(--panel-solid);border:1px solid var(--line);z-index:6;border-radius:9px;padding:7px 10px;font-size:12px;line-height:1.5;display:none;position:fixed;box-shadow:0 4px 18px #00000026}#labels{pointer-events:none;z-index:2;position:fixed;inset:0;overflow:hidden}.lbl{white-space:nowrap;color:#15212b;background:#ffffffd1;border:1px solid #00000014;border-radius:6px;padding:2px 7px;font-size:11.5px;font-weight:600;position:absolute;transform:translate(-50%,-100%)}.lbl.infra{color:#9a3412;background:#fff3e6}.lbl.big{color:#2f5f8a;background:0 0;border:none;font-size:15px;font-weight:700}.lbl.flow{color:#0b6b74;background:#e9f7f8}#clock{z-index:5;background:var(--panel);border:1px solid var(--line);border-radius:999px;align-items:center;gap:10px;padding:6px 8px 6px 14px;font-size:12.5px;display:flex;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}#clock button{font:inherit;background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:999px;padding:5px 12px;font-size:12.5px}#topbar .seg{display:inline-flex}#topbar .seg button{border-radius:0;margin-left:-1px}#topbar .seg button:first-child{border-radius:9px 0 0 9px;margin-left:0}#topbar .seg button:last-child{border-radius:0 9px 9px 0}#topbar .seg button:only-child{border-radius:9px}#topbar button:disabled{opacity:.6;cursor:progress}.study-note{border:1px solid var(--warn);color:var(--ink);border-radius:9px;padding:8px 10px}#attrib{z-index:5;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:8px;max-width:calc(100% - 640px);padding:4px 8px;font-size:11px;position:fixed;bottom:12px;left:384px}@media (width<=820px){#attrib{max-width:none;font-size:10px;inset:auto 8px calc(46vh + 66px)}#panel{width:auto;height:46vh;inset:auto 8px 8px}#topbar{justify-content:flex-start;max-width:none;top:8px;left:8px;right:8px}#legend{display:none}#clock{bottom:calc(46vh + 16px)}}#stage canvas.picking{cursor:crosshair}.lbl.me{color:#fff;z-index:3;background:#e4572e;border-color:#0000}#locmsg{z-index:6;background:var(--panel-solid);max-width:min(420px,100% - 400px);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:9px;padding:8px 12px;font-size:12.5px;line-height:1.5;position:fixed;top:100px;right:12px;box-shadow:0 4px 18px #00000026}#place{z-index:5;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;width:340px;max-height:calc(100% - 260px);padding:12px 14px 10px;font-size:12.5px;line-height:1.45;position:fixed;bottom:140px;right:12px;overflow-y:auto}#place .head{justify-content:space-between;align-items:center;gap:8px;display:flex}#place .head b{font-size:16px}#place .x{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 6px;font-size:18px;line-height:1}#place .x:hover,#place .x:focus-visible{color:var(--ink);background:var(--line)}#place .meta{color:var(--muted);margin:4px 0 8px;font-size:11.5px}#place .note{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;margin-bottom:8px;padding:6px 10px}#place .now{border:1px solid var(--line);background:var(--panel-solid);border-radius:10px;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;padding:8px 10px;display:grid}#place .now .k{color:var(--muted);grid-column:1/-1;font-size:11.5px}#place .now .v{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700}#place .now .v.wet{color:var(--warn)}#place .now .g{color:var(--muted);grid-column:1/-1;font-size:11.5px}#place .loading{color:var(--muted);margin:8px 0}#place table{border-collapse:collapse;width:100%;margin-top:8px;font-size:12px}#place th,#place td{text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;padding:4px}#place thead th{color:var(--muted);font-size:11px;font-weight:600}#place tbody th{font-weight:500}#place td.d{white-space:nowrap;font-variant-numeric:tabular-nums}#place .bar{background:var(--line);vertical-align:1px;border-radius:3px;width:40px;height:6px;margin-right:6px;display:inline-block;overflow:hidden}#place .bar i{background:var(--river);height:100%;display:block}#place .chip{white-space:nowrap;align-items:center;gap:4px;font-size:11px;display:inline-flex}#place .chip i{border-radius:50%;width:8px;height:8px}#place .sum{margin:8px 0 6px;font-weight:500}#place .acts{flex-wrap:wrap;gap:6px;display:flex}#place .acts button{font:inherit;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink);cursor:pointer;border-radius:8px;padding:6px 10px;font-size:12px}#place .acts button:hover,#place .acts button:focus-visible{border-color:var(--accent)}#place .fine{color:var(--muted);margin:8px 0 0;font-size:10.5px}#place .fc{border:1px solid var(--line);background:var(--panel-solid);border-radius:10px;margin-top:8px;padding:8px 10px}#place .fc .k{color:var(--muted);font-size:11.5px}#place .fc .lvl-0{--lvl:var(--ok)}#place .fc .lvl-1{--lvl:var(--caution)}#place .fc .lvl-2{--lvl:var(--warn)}#place .fc .tm{grid-template-columns:auto 1fr;align-items:baseline;gap:0 10px;margin:4px 0 2px;display:grid}#place .fc .tm .pc{color:var(--lvl);font-variant-numeric:tabular-nums;grid-row:span 2;font-size:26px;font-weight:700}#place .fc .tm .lv{color:var(--lvl);font-weight:600}#place .fc .tm .tl,#place .fc .in,#place .fc .need{color:var(--muted);font-size:11.5px}#place .fc .need b{color:var(--ink);font-weight:600}#place .fc ol{text-align:center;font-variant-numeric:tabular-nums;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0 0;padding:0;font-size:10.5px;list-style:none;display:grid}#place .fc ol .cb{background:var(--line);border-radius:4px;align-items:flex-end;height:28px;margin:2px 0;display:flex;overflow:hidden}#place .fc ol .cb i{background:var(--lvl);width:100%;min-height:2px;display:block}#place .fc ol b{color:var(--lvl);font-weight:600}#place .fc .err{color:var(--muted);justify-content:space-between;align-items:center;gap:8px;display:flex}#place .fc .err button{font:inherit;border:1px solid var(--line);background:var(--panel-solid);color:var(--ink);cursor:pointer;border-radius:8px;padding:4px 10px;font-size:12px}@media (width<=820px){#place{width:auto;max-height:calc(54vh - 120px - var(--topbar-bottom,220px));inset:auto 8px calc(46vh + 112px)}#locmsg{max-width:none;inset:auto 8px calc(46vh + 112px)}}#place .intro{margin:6px 0 10px;font-size:13px;line-height:1.55}#place .acts button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}#place .acts button.primary:hover,#place .acts button.primary:focus-visible{filter:brightness(1.08)}#clock{white-space:nowrap}@media (width<=820px){#clock{gap:6px;font-size:11.5px}}