:root{
  --ink:#f2f7f5;--muted:#b9cbc6;--dim:#86a09a;
  --navy:#0b1f33;--teal:#19a7a9;--green:#5fc26e;--orange:#f08c2e;
  --glass:rgba(8,26,38,.62);--line:rgba(255,255,255,.14);
  --font:'Manrope','Noto Sans Thai',system-ui,sans-serif;--thai:'Noto Sans Thai','Manrope',sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--navy);color:var(--ink);font-family:var(--thai);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:4px}
img{max-width:100%;display:block}
b{font-weight:600;color:#fff}

/* ---- fixed 3D backdrop ---- */
#scene{position:fixed;inset:0;z-index:0}
#scene canvas{display:block}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,20,32,.35),rgba(6,20,32,0) 30%,rgba(6,20,32,0) 70%,rgba(6,20,32,.55));transition:background .8s}
body.dark-mode .veil{background:linear-gradient(180deg,rgba(4,14,26,.75),rgba(4,14,26,.6) 40%,rgba(4,14,26,.82))}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- header ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:20;height:84px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:background .5s,backdrop-filter .5s}
.top.solid{background:rgba(6,20,32,.55);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;font-family:var(--font);font-weight:500;letter-spacing:5px;font-size:15px}
.brand img{width:44px;height:44px;border-radius:50%;background:#fff;padding:2px;box-shadow:0 0 0 1px var(--line)}
.brand small{display:block;font-size:8px;letter-spacing:2.4px;color:var(--muted);margin-top:4px;font-weight:400}
.top nav{display:flex;gap:26px;font-size:12px;color:#d5e3df;letter-spacing:.3px}
.top nav a{opacity:.8;padding:6px 0;border-bottom:1px solid transparent;transition:.25s}
.top nav a:hover,.top nav a.on{opacity:1;border-color:var(--green)}
.top-actions{display:flex;align-items:center;gap:16px;font-size:12px}
.ghost{color:#d5e3df;opacity:.85}
.pill{border:1px solid var(--line);border-radius:30px;padding:9px 18px;font-size:12px;background:rgba(255,255,255,.04);transition:.25s}
.pill:hover{background:rgba(255,255,255,.12)}
.burger{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.burger span{width:22px;height:1px;background:#fff;transition:.3s}
.top.open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}.top.open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---- chapter rail ---- */
.chapter-rail{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:15;font-family:var(--font)}
.chapter-rail ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:14px}
.chapter-rail a{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1.6px;color:var(--dim);transition:.3s;padding:6px 0}
.chapter-rail a span{display:none;color:#fff;white-space:nowrap}
.chapter-rail a.on span{display:inline}
.chapter-rail a i{width:6px;height:6px;border:1px solid var(--muted);border-radius:50%;transition:.3s}
.chapter-rail a:hover i{border-color:#fff}
.chapter-rail a.on i{width:22px;border-radius:4px;background:var(--green);border-color:var(--green)}
.pager{position:fixed;top:50%;z-index:15;width:46px;height:46px;margin-top:-23px;border:1px solid var(--line);border-radius:50%;background:rgba(6,20,32,.35);backdrop-filter:blur(10px);font-size:18px;display:grid;place-items:center;transition:.3s}
.pager:hover{background:rgba(255,255,255,.14)}
.pager[disabled]{opacity:0;pointer-events:none}
#prev{left:18px}#next{right:18px}
.progress{position:fixed;left:0;top:0;height:2px;z-index:25;background:linear-gradient(90deg,var(--teal),var(--green));width:0;transition:width .2s}

/* ---- chapters ---- */
main{position:fixed;inset:0;z-index:5;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:none}
main::-webkit-scrollbar{display:none}
.chapter{flex:0 0 100vw;width:100vw;height:100vh;height:100svh;overflow-y:auto;overflow-x:hidden;scroll-snap-align:start;scroll-snap-stop:always;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;position:relative;display:flex;flex-direction:column;justify-content:center;padding:120px 6% 100px;gap:40px}
.chapter{justify-content:flex-start}.chapter>:first-child{margin-top:auto}.chapter>:last-child{margin-bottom:auto}
.hero,.footer-chapter{align-items:center;text-align:center}
.center-mark{display:flex;flex-direction:column;align-items:center;gap:18px}
.logo-lg{width:110px;height:110px;border-radius:50%;background:#fff;padding:4px;box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.3)}
.logo-md{width:72px;height:72px;border-radius:50%;background:#fff;padding:3px}
.spaced{font-family:var(--font);font-weight:300;letter-spacing:.42em;text-indent:.42em}
h1{margin:0;font-size:clamp(34px,5vw,64px);line-height:1.2;text-shadow:0 4px 30px rgba(0,0,0,.35)}
h2.spaced{font-size:clamp(26px,3.4vw,40px);margin:0}
.tag{margin:0;font-weight:300;color:#e3efeb;font-size:clamp(13px,1.3vw,16px);text-shadow:0 2px 20px rgba(0,0,0,.4)}
.scroll-hint{position:absolute;bottom:70px;right:6%;display:flex;flex-direction:row;align-items:center;gap:10px;font-family:var(--font);font-size:9px;letter-spacing:3px;color:var(--muted)}
.scroll-hint span{width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--green));animation:slide 2.2s infinite}
@keyframes slide{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.block{max-width:520px;opacity:0;transform:translateX(56px);transition:opacity .9s ease,transform .9s ease}
.block.in{opacity:1;transform:none}
.block.left{align-self:flex-start}
.block.right{align-self:flex-end;text-align:left}
.center-block{align-self:center;text-align:center}
.eyebrow{font-family:var(--font);font-size:10px;letter-spacing:3px;color:#9fd9c9;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--green)}
.center-block .eyebrow{justify-content:center}
h2{font-weight:300;font-size:clamp(28px,3.2vw,46px);line-height:1.35;margin:0 0 20px;letter-spacing:-.3px;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.block p{color:#dbe7e3;font-weight:300;margin:0 0 14px;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.mission{list-style:none;padding:0;margin:22px 0;display:grid;gap:12px}
.mission li{padding-left:18px;border-left:1px solid var(--green);font-weight:300;color:#dbe7e3}
.fine{font-size:12px;color:var(--dim);font-weight:300}
.center-note{text-align:center;align-self:center}
.todo{border:1px dashed var(--orange);color:#ffd2a8;padding:1px 8px;border-radius:20px;font-size:11px}
.sample{display:inline-block;border:1px solid rgba(240,140,46,.5);color:#ffcf9b;padding:1px 9px;border-radius:20px;font-size:10px;letter-spacing:.5px;vertical-align:middle;background:rgba(240,140,46,.08)}

/* cards */
.cards{display:grid;gap:16px;width:100%;opacity:0;transform:translateX(60px);transition:opacity 1s .15s,transform 1s .15s}
.cards.in{opacity:1;transform:none}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards article{background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:14px;padding:26px 24px;transition:.35s;position:relative;overflow:hidden}
.cards article:hover{transform:translateY(-4px);border-color:rgba(95,194,110,.5)}
.cards h3{margin:8px 0 10px;font-weight:500;font-size:17px}
.cards p{margin:0;font-size:13px;color:var(--muted);font-weight:300}
.cards .num{font-family:var(--font);font-size:11px;letter-spacing:2px;color:var(--teal)}
.cards .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{font-size:10px;letter-spacing:.4px;padding:3px 10px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.chip.ai{border-color:rgba(240,140,46,.5);color:#ffd2a8}
.chip.ok{border-color:rgba(95,194,110,.5);color:#bdf0c6}
.chip.wait{border-color:rgba(240,140,46,.5);color:#ffd2a8}
.cards .ai-next{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px;color:#f5dcc4}
.cards .ai-next b{color:var(--orange);font-family:var(--font);font-size:10px;letter-spacing:2px;display:block;margin-bottom:4px}
.cards.small article{padding:22px 20px}
.cards a.go{display:inline-block;margin-top:14px;font-size:12px;color:#bdf0c6}

.actions{display:flex;gap:14px;flex-wrap:wrap}
.actions.center{justify-content:center;align-self:center}
.cta{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.4);border-radius:40px;padding:13px 26px;font-size:13px;letter-spacing:.3px;backdrop-filter:blur(10px);background:rgba(255,255,255,.06);transition:.3s;color:#fff}
.cta:hover{background:rgba(255,255,255,.16);border-color:#fff}
.cta.solid{background:var(--green);color:#0a2a1a;border-color:var(--green);font-weight:500}
.cta.solid:hover{background:#7bd689}

/* panels */
.panel{background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:14px;padding:20px 22px;opacity:0;transform:translateX(60px);transition:opacity 1s .1s,transform 1s .1s}
.panel.in{opacity:1;transform:none}
.panel.wide{width:100%}
.panel-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font);font-size:11px;letter-spacing:2px;color:#9fd9c9;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-weight:500;text-align:left;font-size:11px;letter-spacing:1px;color:var(--dim);padding:8px 6px;border-bottom:1px solid var(--line)}
td{padding:10px 6px;border-bottom:1px solid rgba(255,255,255,.06);font-weight:300;color:#e2ece9;vertical-align:top}
tr:last-child td{border:0}
.status{display:inline-flex;align-items:center;gap:6px;font-size:11px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.status.warn::before{background:var(--orange)}.status.alert::before{background:#ff6b6b}
.river-grid{display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:16px;width:100%}
.map-panel svg{width:100%;height:auto}
.risk{fill:rgba(240,140,46,.18);stroke:rgba(240,140,46,.6);stroke-width:.8;stroke-dasharray:3 3}
.riverline{fill:none;stroke:url(#rg);stroke-width:4;stroke-linecap:round}
.stations circle{fill:#fff;stroke:var(--teal);stroke-width:2}
.stations .warn{fill:var(--orange);stroke:#fff}
.map-panel text{font-size:9px;fill:var(--muted);font-family:var(--thai)}
.alerts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.alerts li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:13px;font-weight:300}
.alerts time{font-family:var(--font);font-size:10px;color:var(--dim);letter-spacing:1px;padding-top:3px}
.alerts b{display:block;font-weight:500}

/* gallery */
.filters{display:flex;gap:8px;justify-content:center;align-self:center}
.filters button{border:1px solid var(--line);border-radius:30px;padding:8px 16px;font-size:12px;color:var(--muted);transition:.25s}
.filters button.on{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%}
.gallery figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(14px);transition:.35s;opacity:0;transform:translateX(40px)}
.gallery figure.in{opacity:1;transform:none}
.gallery figure.hide{display:none}
.gallery .art{aspect-ratio:4/3;background:linear-gradient(135deg,var(--c1),var(--c2));position:relative}
.gallery .art::after{content:attr(data-k);position:absolute;left:12px;top:10px;font-family:var(--font);font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.75)}
.gallery figcaption{padding:14px 16px}
.gallery h4{margin:0 0 4px;font-weight:500;font-size:14px}
.gallery small{display:block;color:var(--dim);font-size:11.5px;font-weight:300}

/* data */
.steps{list-style:none;counter-reset:s;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.steps li{counter-increment:s;font-size:12px;border:1px solid var(--line);border-radius:30px;padding:6px 12px 6px 8px;display:flex;align-items:center;gap:8px;color:var(--muted)}
.steps li::before{content:counter(s);width:20px;height:20px;border-radius:50%;background:rgba(95,194,110,.2);color:#bdf0c6;font-size:10px;display:grid;place-items:center;font-family:var(--font)}
.datasets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%}
.datasets article{background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateX(48px);transition:.8s}
.datasets article.in{opacity:1;transform:none}
.datasets h3{margin:0;font-weight:500;font-size:16px}
.datasets p{margin:0;font-size:12.5px;color:var(--muted);font-weight:300;flex:1}
.datasets .meta{display:flex;gap:6px;flex-wrap:wrap}
.datasets .req{align-self:flex-start;border:1px solid rgba(95,194,110,.6);border-radius:30px;padding:8px 16px;font-size:12px;color:#bdf0c6;transition:.25s;margin-top:6px}
.datasets .req:hover{background:rgba(95,194,110,.18)}
.myreq{width:min(680px,100%);align-self:center}
.reqlist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.reqlist li{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:13px;font-weight:300;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.reqlist li:last-child{border:0}
.reqlist .empty{color:var(--dim);grid-template-columns:1fr}
.reqlist small{display:block;color:var(--dim);font-size:11px}
.reqlist .dl{border:1px solid rgba(95,194,110,.6);border-radius:20px;padding:4px 12px;font-size:11px;color:#bdf0c6}

/* external links */
.links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%}
.links a{background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:grid;gap:6px;transition:.3s;opacity:0;transform:translateX(40px)}
.links a.in{opacity:1;transform:none}
.links a:hover{border-color:rgba(25,167,169,.7);transform:translateY(-3px)}
.links h3{margin:0;font-weight:500;font-size:15px}
.links p{margin:0;font-size:12.5px;color:var(--muted);font-weight:300}
.links small{font-family:var(--font);font-size:10px;letter-spacing:1.5px;color:var(--teal)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%}
.stats div{text-align:center;padding:26px 16px;border:1px solid var(--line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);opacity:0;transform:translateX(40px);transition:.8s}
.stats div.in{opacity:1;transform:none}
.stats strong{display:block;font-family:var(--font);font-weight:300;font-size:clamp(30px,3.5vw,48px);line-height:1.1;color:#fff}
.stats span{font-size:12px;color:var(--muted);font-weight:300}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%}
.quotes blockquote{margin:0;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;padding:24px;font-weight:300;font-size:14px;color:#e2ece9;opacity:0;transform:translateX(40px);transition:.8s}
.quotes blockquote.in{opacity:1;transform:none}
.quotes cite{display:block;margin-top:14px;font-style:normal;font-size:12px;color:var(--teal)}

footer{position:absolute;bottom:56px;left:4%;right:4%;border-top:1px solid var(--line);min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:var(--dim);font-weight:300;font-family:var(--font)}

/* modal */
.modal{width:min(480px,92vw);border:1px solid rgba(255,255,255,.18);border-radius:16px;background:#0f2a3a;color:var(--ink);padding:36px;box-shadow:0 30px 100px rgba(0,0,0,.5)}
.modal::backdrop{background:rgba(4,14,24,.75);backdrop-filter:blur(8px)}
.modal h3{margin:0 0 6px;font-weight:400;font-size:24px}
.modal form{display:grid;gap:14px;margin-top:18px}
.modal label{display:grid;gap:6px;font-size:12px;color:var(--muted)}
.modal label.check{grid-template-columns:auto 1fr;align-items:start;gap:10px}
.modal input,.modal select,.modal textarea{font:inherit;color:#fff;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
.modal select option{color:#000}
.modal .close{position:absolute;right:14px;top:10px;font-size:26px;color:var(--muted)}
.modal .cta{justify-content:center}

#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);z-index:50;background:#102f3f;border:1px solid rgba(95,194,110,.5);border-radius:40px;padding:12px 22px;font-size:13px;opacity:0;pointer-events:none;transition:.4s}
#toast.show{opacity:1;transform:translate(-50%,0)}
#loading{position:fixed;inset:0;z-index:60;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-size:13px;color:var(--muted);transition:opacity .9s}
#loading img{width:84px;height:84px;border-radius:50%;background:#fff;padding:3px;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
#loading button{border:1px solid var(--line);padding:10px 20px;border-radius:30px}

/* ---- responsive ---- */
@media(max-width:1200px){.top nav{display:none}.cards.four{grid-template-columns:repeat(2,1fr)}.gallery{grid-template-columns:repeat(3,1fr)}.river-grid{grid-template-columns:1fr 1fr}.river-grid .map-panel{grid-column:1/-1}}
@media(max-width:860px){
  .top{height:70px}.top-actions{display:none}.burger{display:flex}
  .top nav{position:fixed;inset:70px 0 auto 0;flex-direction:column;background:rgba(6,20,32,.96);padding:20px 6% 28px;gap:14px;font-size:15px;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:.4s}
  .top.open nav{display:flex;transform:none}
  .chapter-rail{bottom:14px}.chapter-rail a span{display:none!important}.chapter-rail ol{gap:8px}.pager{display:none}.scroll-hint{right:auto;left:50%;transform:translateX(-50%)}
  .chapter{padding:100px 6% 80px;gap:28px}
  .cards.three,.cards.four,.datasets,.links,.quotes,.river-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}.gallery{grid-template-columns:repeat(2,1fr)}
  .block.right{align-self:flex-start}
  footer{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0;position:relative;left:0;right:0;margin-top:40px}
  .usage th:nth-child(3),.usage td:nth-child(3){display:none}.sensors td:nth-child(2),.sensors td:nth-child(3){white-space:nowrap}
  .logo-lg{width:84px;height:84px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.block,.cards,.panel,.gallery figure,.datasets article,.links a,.stats div,.quotes blockquote{opacity:1;transform:none}}