:root{font-family:"Segoe UI",Arial,sans-serif;color:#173b3c;background:#f5f3eb;font-size:18px;line-height:1.5}
*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer}a{color:inherit}
.site-header,main,footer{width:min(1380px,calc(100% - 3rem));margin-inline:auto}
.site-header{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{font-weight:800;text-decoration:none;font-size:1.1rem}.brand span{margin-left:.35rem}
.header-actions{display:flex;align-items:center;gap:.75rem}
.prototype-tag{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:#315c54;background:#e6eee4;border:1px solid #cddfd2;padding:.4rem .75rem;border-radius:99px;font-weight:800}
#lang-toggle{border:1px solid #bfd0c7;background:#fff;border-radius:99px;padding:.4rem .8rem;font-size:.8rem;font-weight:800;min-width:48px;min-height:44px}
.intro{padding:4rem 0 4.5rem}.eyebrow{font-size:.7rem;letter-spacing:.16em;font-weight:850;color:#497568;margin:0 0 .8rem;text-transform:uppercase}
.intro h1{font-size:clamp(2.7rem,5.5vw,5.6rem);line-height:1.04;letter-spacing:-.055em;max-width:19ch;margin:0;color:#123a3b}
.lead{font-size:clamp(1.04rem,1.6vw,1.28rem);max-width:66ch;color:#496361;margin:1.35rem 0 0}
.workspace{background:#fff;border:1px solid #dce5df;border-radius:25px;padding:clamp(1rem,3vw,2.2rem);box-shadow:0 20px 70px #143b3010;margin-bottom:5rem}
.workspace-head{display:flex;justify-content:space-between;align-items:end;gap:1rem}.workspace-head h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.04em;margin:0}
.data-disclaimer{font-size:.69rem;color:#647b74;max-width:25ch;text-align:right;margin:0 0 .2rem}
.filters{display:flex;align-items:end;gap:.7rem;flex-wrap:wrap;margin:1.7rem 0 1rem}.filters label{display:flex;flex-direction:column;gap:.3rem;font-size:.72rem;font-weight:800;color:#476c60}
.filters select{background:#f8faf6;border:1px solid #ccdcd3;color:#173b3c;border-radius:10px;min-height:46px;padding:.52rem .8rem;min-width:170px}
.reset-filters{border:0;background:none;color:#246c62;text-decoration:underline;font-size:.73rem;font-weight:750;padding:.7rem;min-height:46px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1rem}.metrics>div{background:#eff5ee;border:1px solid #e1ebe1;border-radius:12px;padding:.65rem 1rem;display:flex;align-items:baseline;gap:.55rem}
.metrics strong{font-size:1.5rem;line-height:1.2;color:#1b6255}.metrics span{font-size:.67rem;color:#557068}
.content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.8fr);gap:1rem}.map-shell{min-width:0}
.map{height:clamp(400px,48vw,610px);position:relative;overflow:hidden;background:#dbe7d5;border-radius:16px;border:1px solid #cbdccf;isolation:isolate}
.map-art{position:absolute;width:100%;height:100%;inset:0}.map-label,.river-label{position:absolute;color:#527162;font-weight:850;font-size:.82rem;letter-spacing:.025em;text-shadow:0 1px #eaf2e5}
.map-label--one{top:23%;left:15%}.map-label--two{top:40%;left:45%}.map-label--three{top:72%;left:32%}.map-label--four{top:66%;left:72%}
.river-label{top:33%;left:65%;color:#648f9a;font-size:.69rem;font-style:italic;transform:rotate(-12deg)}.markers{position:absolute;inset:0}
.marker{position:absolute;transform:translate(-50%,-50%);border:3px solid #fff;color:#fff;background:#478760;border-radius:50%;width:54px;height:54px;display:grid;place-items:center;padding:0;box-shadow:0 4px 18px #173d3560;transition:transform .18s,box-shadow .18s}
.marker:hover,.marker:focus-visible,.marker.is-selected{transform:translate(-50%,-50%) scale(1.17);box-shadow:0 0 0 5px #ffffffaa,0 7px 22px #173d3570;z-index:2}
.marker--water{background:#398a9c}.marker--awareness{background:#cb8753}.marker img{display:block;width:25px;height:25px;filter:brightness(0) invert(1)}
.map-legend{position:absolute;left:.8rem;bottom:.8rem;display:flex;gap:.65rem;flex-wrap:wrap;background:#fffef7ec;border:1px solid #d8e2d9;border-radius:9px;padding:.55rem .7rem;box-shadow:0 3px 15px #1a463024;font-size:.63rem;font-weight:750}
.map-legend>span{display:inline-flex;align-items:center;gap:.3rem}.dot{width:10px;height:10px;border-radius:50%;background:#478760}.dot--water{background:#398a9c}.dot--awareness{background:#cb8753}
.map-caption{font-size:.65rem;color:#687e75;margin:.5rem .15rem 0}.side-panel{border:1px solid #e1e9e3;border-radius:16px;padding:1.25rem;min-width:0;display:flex;flex-direction:column}
.panel-title{display:flex;justify-content:space-between;gap:1rem}.panel-title h3{font-size:1.3rem;line-height:1.15;letter-spacing:-.025em;margin:0}
.detail-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;color:#2f7358;background:#e7f1e6;flex:none}.detail-icon img{display:block;width:25px;height:25px;filter:invert(34%) sepia(16%) saturate(1576%) hue-rotate(92deg)}
.detail-description{color:#5a7168;font-size:.82rem;min-height:3.7em;margin:.8rem 0 1rem}.detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:0}.detail-facts div{border-top:1px solid #e5eee6;padding-top:.55rem}.detail-facts dt{font-size:.63rem;color:#6b8177}.detail-facts dd{font-size:.82rem;font-weight:800;margin:0}
.panel-divider{height:1px;background:#e1e9e3;margin:1.25rem 0}.list-title{display:flex;justify-content:space-between;align-items:center}.list-title h3{font-size:.87rem;margin:0}.list-title span{font-size:.75rem;color:#668076}
.action-list{display:grid;gap:.45rem;max-height:240px;overflow:auto;margin-top:.65rem}.action-item{width:100%;background:#f7faf6;border:1px solid #e3ede6;border-radius:9px;padding:.55rem .65rem;display:flex;align-items:center;gap:.55rem;text-align:left;color:#183e3a}.action-item.is-selected{border-color:#6fa783;background:#eaf4ea}
.action-item-icon{display:grid;place-items:center;width:1.4rem;height:1.4rem;flex:none}.action-item-icon img{display:block;width:18px;height:18px}.action-item strong{font-size:.71rem;display:block;line-height:1.25}.action-item small{display:block;color:#6a8178;font-size:.61rem}.empty-state{font-size:.8rem;color:#657b70}
footer{border-top:1px solid #d5e0d5;padding:1.7rem 0 2.5rem;display:flex;justify-content:space-between;gap:1rem;font-size:.72rem;color:#537266}footer a{font-weight:800;text-decoration:none}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #d28b42;outline-offset:3px}
@media(max-width:900px){.intro{padding:2.5rem 0 3rem}.content-grid{grid-template-columns:1fr}.side-panel{min-height:0}}
@media(max-width:600px){:root{font-size:17px}.site-header,main,footer{width:min(100% - 1.5rem,1380px)}.site-header{min-height:72px}.prototype-tag{font-size:.58rem}.intro h1{font-size:clamp(2.35rem,10vw,3.5rem)}.workspace{border-radius:17px;padding:.8rem;margin-bottom:3rem}.workspace-head{display:block}.data-disclaimer{text-align:left;max-width:none;margin:.7rem 0 0}.filters{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.filters label{min-width:0}.filters select{width:100%;min-width:0;font-size:.72rem}.reset-filters{grid-column:1/-1;justify-self:start;padding-left:0}.metrics{gap:.35rem}.metrics>div{display:block;padding:.5rem}.metrics strong{display:block;font-size:1.2rem}.metrics span{display:block;font-size:.58rem;line-height:1.2}.map{height:460px}.map-label{font-size:.65rem}.river-label{font-size:.55rem}.marker{width:46px;height:46px}.marker img{width:22px;height:22px}.map-legend{font-size:.56rem;gap:.4rem}footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.marker{transition:none}}