:root{--ink:#173b38;--muted:#61716c;--teal:#126c62;--paper:#fafaf5;--line:#dce2d8;--mono:'IBM Plex Mono',monospace;--font:'IBM Plex Sans','IBM Plex Sans Thai',sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;color:var(--ink);background:#d5dfdb;font:14px/1.55 var(--font)}html[lang=th]{--font:'IBM Plex Sans Thai','IBM Plex Sans',sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button{color:inherit}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #e3a348;outline-offset:3px}a{color:var(--teal)}.topbar{position:fixed;inset:0 0 auto;height:66px;z-index:20;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:30px;padding:0 24px}.brand{display:flex;align-items:center;text-decoration:none;font-size:19px;letter-spacing:-.7px;font-weight:700;color:var(--ink);white-space:nowrap}.brand span{color:#53a79c;margin:0 2px}.brand svg{width:29px;height:29px;margin-right:11px;fill:none;stroke:var(--teal);stroke-width:2}.header-location{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:26px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:22px}.text-button{background:none;border:0;padding:4px 0;color:var(--teal);font-size:12px;text-decoration:underline;text-underline-offset:4px}.language{display:flex;border:1px solid var(--line);padding:3px;border-radius:7px;gap:2px}.language button{border:0;background:none;padding:5px 10px;border-radius:4px;font-size:12px}.language button[aria-pressed=true]{background:var(--ink);color:white}main{height:100%;padding-top:66px}#map{position:absolute;inset:66px 0 0 390px;background:#d4dfdb}.panel{position:absolute;left:0;top:66px;bottom:0;width:390px;z-index:5;background:var(--paper);border-right:1px solid var(--line);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c4d0c7 transparent}.panel-toggle{display:none}.intro{padding:28px 27px 24px}.eyebrow{text-transform:uppercase;letter-spacing:1.5px;font-size:9px;font-weight:600;color:var(--muted)}h1{font-size:30px;line-height:1.14;font-weight:500;letter-spacing:-1px;margin:14px 0 13px;max-width:300px}p{margin:8px 0;color:var(--muted)}.intro>p{font-size:13px;line-height:1.6}.screening-tag{display:flex;gap:7px;align-items:center;color:#75613f;font-size:10px;margin-top:17px}.screening-tag>span:first-child{width:5px;height:5px;background:#b78337;border-radius:50%}.control-section{padding:23px 27px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:center;gap:10px;margin-bottom:19px}.section-heading h2{font-size:15px;letter-spacing:-.2px;margin:0;font-weight:600}.section-number{font:10px var(--mono);color:#759088}.help{border:1px solid #b9c9be;border-radius:50%;height:18px;min-width:18px;width:18px;padding:0;background:transparent;font:11px/16px var(--mono);color:#648075;display:inline-flex;align-items:center;justify-content:center}.section-heading>.help{margin-left:auto}label{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-bottom:7px}select{background:#fff;color:var(--ink);border:1px solid #d1dace;border-radius:6px;width:100%;height:40px;padding:0 10px;font-size:12px}.year-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 19px}.year-buttons button{font-size:11px;background:#eff2ea;border:1px solid transparent;border-radius:4px;padding:8px 1px}.year-buttons button.active{background:#dfebe1;border-color:#a5c5b4;color:#145447}.projection-readout{display:flex;align-items:center;justify-content:space-between}.big-year{font:500 35px var(--mono);letter-spacing:-1.7px}.projection-readout .micro{display:block;font-size:9px;margin-top:3px}.rise-value{font:500 30px var(--mono);color:var(--teal);letter-spacing:-1px}.unit{font:11px var(--mono);color:var(--muted);margin-left:5px}.range-note{font-size:12px;color:var(--teal);margin-top:12px}.baseline-note{font-size:11px;line-height:1.5;margin:6px 0 19px;color:#677166}input[type=range]{display:block;width:100%;height:5px;accent-color:var(--teal);cursor:pointer;margin:13px 0 8px}input[type=range]::-webkit-slider-thumb{height:18px;width:18px}.axis-labels{display:flex;justify-content:space-between;font:9px var(--mono);color:#7d8c82}.primary-button{border:0;border-radius:5px;background:var(--ink);color:white;width:100%;padding:11px 8px;font-size:12px;font-weight:500;margin-top:17px}.primary-button:hover{background:#216052}.primary-button[aria-pressed=true]{background:var(--teal)}.micro{font-size:10px;line-height:1.6;color:var(--muted)}.source-link{font-size:10px;text-underline-offset:3px}#projection-chart{width:100%;display:block;margin-top:16px;overflow:visible}.chart-key{display:flex;gap:18px;font-size:9px;color:var(--muted);margin-top:3px}.chart-key span{display:flex;align-items:center;gap:5px}.line-key{display:inline-block;height:2px;width:15px;background:var(--teal)}.range-key{display:inline-block;height:7px;width:15px;background:#c9e0cf}.view-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid var(--line);border-radius:6px}.view-buttons button{background:transparent;border:0;border-radius:3px;padding:9px 2px;font-size:10px;line-height:1.4}.view-buttons button.active{background:var(--ink);color:white}#view-description{min-height:32px;margin:10px 0 14px}.opacity-row{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.opacity-row label{margin:0}.opacity-row output{font:10px var(--mono)}.check-row{display:flex;align-items:center;gap:7px;margin:17px 0 0;font-size:11px}.check-row input{accent-color:var(--teal);width:16px;height:16px}.check-row .help{margin-left:auto}.water-input{display:flex;align-items:center;gap:7px;margin:13px 0}.water-input input{width:100%;min-width:0;text-align:right;background:transparent;color:var(--ink);border:0;font:28px var(--mono);appearance:textfield;-moz-appearance:textfield}.water-input input::-webkit-inner-spin-button{appearance:none}.water-input button{border:1px solid var(--line);background:#fff;border-radius:5px;min-width:34px;height:34px}.water-input>span{margin-right:10px}.status-pill{font-size:9px;color:var(--teal);padding:3px 7px;background:#e8efe7;display:inline-block;border-radius:4px}.notice{font-size:10px;line-height:1.6;color:#846333;background:#f3eddd;border-left:2px solid #b6985b;padding:10px 12px;margin-top:18px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:22px}.metrics>div+div{border-left:1px solid var(--line);padding-left:16px}.metric-label{display:flex;align-items:center;gap:6px;font-size:10px;margin-bottom:6px;min-height:32px}.metrics strong{font:500 23px var(--mono);letter-spacing:-.7px}.metrics>div+div strong{color:#a66a23}.panel-footer{border-top:1px solid var(--line);padding:20px 27px;font-size:10px;display:flex;gap:9px;flex-wrap:wrap;color:var(--muted)}.panel-footer button{display:block;width:100%;text-align:left;margin-top:6px}.map-heading{position:absolute;top:94px;left:419px;z-index:3;background:#fafaf5ef;padding:12px 16px;border:1px solid #d9e3d8;border-radius:5px;box-shadow:0 4px 24px #214d3810}.map-heading>div+div{font-size:11px;margin-top:4px;display:flex;align-items:center;gap:6px}.live-dot{height:5px;width:5px;border-radius:50%;background:var(--teal)}.map-tools{position:absolute;top:95px;right:22px;z-index:3}.map-tools button{width:35px;height:35px;background:var(--paper);border:1px solid var(--line);border-radius:4px;font-size:24px}.legend{position:absolute;top:151px;right:22px;width:172px;background:#fafaf5f5;z-index:3;border:1px solid #d7e1d8;padding:15px 16px;border-radius:5px;box-shadow:0 4px 24px #214d3810}.legend h2{font-size:11px;font-weight:600;margin:0 0 12px}.legend-row{display:flex;align-items:center;gap:9px;margin:7px 0;font:10px var(--mono)}.swatch{height:11px;width:24px;border-radius:2px;border:1px solid #00000008;flex-shrink:0}.swatch.isolated{background:repeating-linear-gradient(45deg,#f8e7c3,#f8e7c3 3px,#ba7d27 3px,#ba7d27 4px)}.legend .micro{font-size:9px;border-top:1px solid var(--line);padding-top:10px;margin-top:12px}.inspector{position:absolute;bottom:35px;left:418px;z-index:3;background:#fafaf5f5;width:370px;max-width:calc(100vw - 465px);border:1px solid #d7e1d8;border-radius:6px;padding:14px 17px;box-shadow:0 4px 24px #214d3810}.inspector-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px}.mono{font-family:var(--mono)}#inspect-coordinates{font-size:9px;color:var(--muted)}.inspector p{font-size:11px}.inspector #inspect-values{margin-top:9px}#inspect-values>div{display:flex;justify-content:space-between;gap:20px;font-size:11px;padding:3px 0}#inspect-values strong{font-weight:500;text-align:right}#inspect-values>div>span{color:var(--muted)}.loading-card{position:absolute;top:50%;left:calc(50% + 195px);transform:translate(-50%,-50%);background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 80px #153b3825;border-radius:8px;z-index:8;max-width:420px;width:calc(100% - 50px);padding:24px;display:flex;align-items:center;gap:18px}.loading-card strong{font-size:14px}.loading-card p{font-size:11px}.loading-card.error{border-color:#b88852}.loading-card.error .spinner{display:none}.loading-card button{border:1px solid var(--line);background:white;border-radius:4px;padding:7px 10px}.spinner{height:22px;width:22px;min-width:22px;border:2px solid #d9e5da;border-top-color:var(--teal);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}.tooltip{position:fixed;z-index:50;width:290px;max-width:calc(100vw - 24px);background:#173b38;color:#fff;border:1px solid #496b5f;border-radius:6px;padding:13px 15px;font-size:12px;line-height:1.7;box-shadow:0 6px 24px #14382e28;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}dialog{color:var(--ink);background:var(--paper);border:1px solid #d7e1d8;border-radius:12px;width:720px;max-width:calc(100% - 26px);max-height:85vh;padding:0;box-shadow:0 20px 100px #0004}dialog::backdrop{background:#163b3877;backdrop-filter:blur(3px)}.dialog-header{padding:25px 28px 18px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}.dialog-header h2{margin:5px 0 0;font-size:24px;font-weight:500}.close-button{border:0;background:transparent;align-self:flex-start;font-size:27px}#source-content{padding:6px 28px 28px}#source-content h3{font-size:15px;margin:23px 0 7px}#source-content p{font-size:12px;line-height:1.8}#source-content a{font-size:11px;display:inline-block;margin:0 12px 8px 0}#source-content dl{margin:0}#source-content dt{font-weight:600;font-size:12px;margin-top:13px}#source-content dd{font-size:12px;color:var(--muted);margin:3px 0 0}.maplibregl-ctrl-attrib{font-size:10px!important}.maplibregl-ctrl-bottom-right{right:10px}.maplibregl-ctrl-bottom-left{left:18px}html[lang=th] h1{font-size:28px;line-height:1.4;letter-spacing:-.5px}html[lang=th] .eyebrow{letter-spacing:.2px}html[lang=th] .view-buttons button{font-size:11px}
@media(min-width:1500px){.panel{width:410px}#map{left:410px}.map-heading{left:440px}.inspector{left:440px}}
@media(max-width:1000px) and (min-width:761px){.header-location{display:none}.panel{width:350px}#map{left:350px}.map-heading{left:370px;right:72px}.map-heading .eyebrow{font-size:8px}.legend{top:175px;right:16px;width:150px}.inspector{left:370px;max-width:calc(100vw - 405px)}.intro,.control-section{padding-left:22px;padding-right:22px}.inspector-top{flex-wrap:wrap}}
@media(max-width:760px){.topbar{height:58px;padding:0 15px;gap:10px}.brand{font-size:16px}.brand svg{width:23px;margin-right:7px}.header-location{display:none}.header-actions{gap:10px}.header-actions>.text-button{font-size:10px;max-width:72px;line-height:1.3}.language button{padding:4px 7px}#map{inset:58px 0 0}.panel{top:auto;bottom:0;left:0;width:100%;max-height:53dvh;border-radius:18px 18px 0 0;border:1px solid #d1ddcf;z-index:6;box-shadow:0 -5px 25px #214d3812}.panel-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 22px;background:var(--paper);border:0;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;font-size:13px;font-weight:500}.panel.collapsed #panel-content{display:none}.intro{padding:21px 23px}.intro h1{font-size:26px;max-width:100%;margin:10px 0}.control-section{padding:20px 23px}.map-heading{top:73px;left:14px;right:auto;padding:9px 12px;max-width:calc(100vw - 74px)}.map-heading .eyebrow{font-size:8px}.map-heading>div+div{font-size:10px}.map-tools{top:76px;right:14px}.legend{top:143px;right:14px;width:143px;padding:11px 12px}.legend h2{font-size:10px;margin-bottom:8px}.legend-row{font-size:9px;margin:5px 0}.legend .micro{font-size:8px;line-height:1.5;margin-top:8px;padding-top:8px}.inspector{left:14px;bottom:calc(53dvh + 12px);max-width:calc(100vw - 180px);width:250px;padding:10px 12px}.inspector-top{flex-wrap:wrap;gap:3px;font-size:10px}.inspector p,#inspect-values>div{font-size:10px}#inspect-values>div{gap:8px;flex-wrap:wrap}.inspector #inspect-coordinates{font-size:8px}body.panel-collapsed .inspector{bottom:75px;max-width:calc(100vw - 28px);width:340px}.loading-card{left:50%;top:30%;max-width:340px}.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{bottom:53dvh}.panel-collapsed .maplibregl-ctrl-bottom-left,.panel-collapsed .maplibregl-ctrl-bottom-right{bottom:55px}.maplibregl-ctrl-scale{display:none}html[lang=th] .intro h1{font-size:24px}.dialog-header{padding:21px}#source-content{padding:6px 21px 22px}.eyebrow{letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.spinner{animation:none}}

@media(max-width:760px){.inspector{bottom:calc(53dvh + 32px)}body.panel-collapsed .inspector{bottom:95px}.legend{max-height:calc(47dvh - 156px);overflow-y:auto}body.panel-collapsed .legend{max-height:65dvh}}

/* The default is a night chart-room palette: low glare, high map contrast. */
html[data-theme=dark]{--ink:#e3f0ea;--muted:#a5bbb2;--teal:#72d6bf;--paper:#101b1d;--line:#29413e;color-scheme:dark}
html[data-theme=dark],html[data-theme=dark] body{background:#071113}
html[data-theme=dark] .topbar,html[data-theme=dark] .panel,html[data-theme=dark] .panel-toggle{background:var(--paper)}
html[data-theme=dark] #map{background:#0a1719}
html[data-theme=dark] select,html[data-theme=dark] .water-input button,html[data-theme=dark] .loading-card button{background:#152426;color:var(--ink);border-color:#36514c}
html[data-theme=dark] .year-buttons button{background:#172725;color:#c7d8d1}
html[data-theme=dark] .year-buttons button.active{background:#244840;border-color:#4f9483;color:#ddf9ef}
html[data-theme=dark] .status-pill{background:#173c35;color:#9ce8d4}
html[data-theme=dark] .notice{background:#332b1d;color:#ead5a1;border-left-color:#c99b4e}
html[data-theme=dark] .map-heading,html[data-theme=dark] .legend,html[data-theme=dark] .inspector{background:#111e20f5;border-color:#36504c;box-shadow:0 10px 32px #0008}
html[data-theme=dark] .loading-card,html[data-theme=dark] dialog{background:#111e20;border-color:#36504c;color:var(--ink);box-shadow:0 20px 100px #000b}
html[data-theme=dark] .tooltip{background:#dbece5;color:#10201d;border-color:#dbece5}
html[data-theme=dark] .baseline-note{color:#a5bbb2}
html[data-theme=dark] .range-key{background:#367365}
html[data-theme=dark] .swatch{border-color:#ffffff20}
html[data-theme=dark] .language{background:#0c1618}
html[data-theme=dark] .theme-toggle{background:#0c1618;border-color:#36504c}
html[data-theme=dark] .theme-icon-sun{opacity:.45;transform:scale(.8)}
html[data-theme=dark] .theme-icon-moon{opacity:1;transform:scale(1)}
.theme-toggle{width:35px;height:31px;border:1px solid var(--line);border-radius:7px;background:var(--paper);display:grid;place-items:center;position:relative;padding:0;overflow:hidden;transition:background .2s,border-color .2s,color .2s}
.theme-icon{position:absolute;font-size:18px;line-height:1;transition:opacity .2s,transform .2s}.theme-icon-sun{color:#cc8d2f;opacity:1;transform:scale(1)}.theme-icon-moon{color:#9cd9df;opacity:0;transform:scale(.8)}
html[data-theme=light] .theme-icon-sun{opacity:1;transform:scale(1)}html[data-theme=light] .theme-icon-moon{opacity:0;transform:scale(.8)}
html[data-theme=dark] .maplibregl-ctrl-group,html[data-theme=dark] .maplibregl-ctrl-scale{background:#111e20;color:#e3f0ea;border-color:#36504c}html[data-theme=dark] .maplibregl-ctrl-group button+button{border-color:#36504c}
@media(max-width:760px){.theme-toggle{width:31px;height:29px}.header-actions{gap:7px}.header-actions>.text-button{max-width:62px}}