*{box-sizing:border-box} :root{--paper:#fcfaef;--ink:#233f35;--muted:#68776b;--line:#d7d8c9;--red:#a52a3e;--green:#446f59;--rust:#9b6650}body{margin:0;color:var(--ink);background:var(--paper);font:14px/1.5 system-ui,sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:var(--paper);border-radius:4px}button:hover{background:#e9ecdd}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ab6c43;outline-offset:3px}button[hidden],[hidden]{display:none!important}header{height:90px;display:flex;align-items:center;gap:35px;padding:18px 28px;border-bottom:1px solid var(--line)}.brand{font:bold 30px/1 Georgia,serif;letter-spacing:-1.5px;text-decoration:none;color:var(--ink)}.brand span{color:var(--red)}.brand small{display:block;font:9px/2.5 system-ui;letter-spacing:4px}.heading{border-left:1px solid var(--line);padding-left:26px}.heading>span,.eyebrow{font-size:9px;font-weight:650;letter-spacing:1.7px}.heading h1{font:28px/1.1 Georgia,serif;margin:3px 0}.round{margin-left:auto;width:34px;height:34px;border-radius:50%;font:21px Georgia}#steps{height:48px;display:flex;justify-content:center;gap:28px;border-bottom:1px solid var(--line)}#steps button{border:0;border-bottom:3px solid transparent;border-radius:0;background:none;font-size:12px;padding:0 7px}#steps button span{font-size:10px;opacity:.6;margin-right:5px}#steps button[aria-current=step]{border-bottom-color:var(--red);font-weight:650}main{display:grid;grid-template-columns:minmax(0,1fr) 334px;height:calc(100dvh - 176px);min-height:540px}#scene{position:relative;overflow:hidden;background:#ccd7cd;touch-action:none}#world,#world canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.scene-top{position:absolute;inset:20px 20px auto;display:flex;justify-content:space-between;pointer-events:none}.plan-label{display:flex;align-items:center;background:#fcfaefee;box-shadow:0 4px 15px #223b3110;padding:9px 12px;gap:9px;border-radius:3px;font-size:11px}.plan-label b{display:grid;place-items:center;border-radius:50%;width:24px;height:24px;background:var(--green);color:var(--paper);font:italic 17px Georgia}#plan-label-b b{background:var(--rust)}#baseline-label{position:absolute;top:22px;left:24px;background:#fcfaefe8;padding:12px 17px;font-size:10px;letter-spacing:1.4px}#baseline-label span{display:block;letter-spacing:0;font-size:11px;color:var(--muted);margin-top:3px}#wipe{position:absolute;inset:0;pointer-events:none;--cut:50%}.wipe-line{position:absolute;top:0;bottom:0;left:var(--cut);border-left:2px solid #fff9e9;box-shadow:1px 0 4px #203e3550}.wipe-handle{position:absolute;top:49%;left:var(--cut);transform:translate(-50%,-50%);border-radius:30px;background:var(--paper);box-shadow:0 2px 12px #183d3640;padding:5px 10px;font-size:22px}#split{position:absolute;top:calc(49% - 20px);left:6%;width:88%;height:40px;opacity:0;cursor:ew-resize}#split:focus-visible{opacity:.8}#scene-hint{position:absolute;bottom:65px;width:100%;text-align:center;font-size:10px;letter-spacing:.5px;text-shadow:0 0 6px white;pointer-events:none}.viewbar{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:3px;white-space:nowrap;padding:4px;background:#fcfaefd9;border-radius:5px;box-shadow:0 4px 25px #223f3510}.viewbar button{padding:9px 10px;font-size:11px;background:transparent;border:0}.viewbar button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.viewbar i{border-left:1px solid var(--line);margin:6px 3px}#story{padding:24px 24px 15px;overflow:auto;border-left:1px solid var(--line);scrollbar-width:thin}h2{font:29px/1.15 Georgia,serif;letter-spacing:-.4px;margin:12px 0 16px}#intro{color:#5b6c60;font-size:12px;line-height:1.65}#metric-pair{display:grid;grid-template-columns:1fr 1fr;margin:20px 0;gap:8px}.metric{padding:13px 10px;background:#e9eddf;border-top:3px solid var(--green)}.metric.b{border-color:var(--rust);background:#eee7db}.metric strong{font:30px/1.1 Georgia;display:block}.metric span{font-size:11px;display:block;margin-top:4px}.metric small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.explanation{margin:17px 0;padding:0 0 0 12px;border-left:2px solid var(--green)}.explanation.b{border-color:var(--rust)}.explanation h3{font:18px/1.25 Georgia;margin:0 0 6px}.explanation p{font-size:11px;line-height:1.65;margin:0;color:#5d6b5e}#conditions{padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px}#event{margin:7px 0 13px;width:100%;background:#f8f6e9;border:1px solid var(--line);padding:9px;color:var(--ink)}.check{display:flex;align-items:flex-start;gap:8px;cursor:pointer}.check input{accent-color:var(--green);margin-top:4px}.check small{display:block;color:var(--muted);margin-top:4px;font-size:10px}#people{border-top:1px solid var(--line);padding-top:14px;margin-top:22px}#person-buttons{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}#person-buttons button{padding:5px 8px;font-size:10px;border-radius:20px}#person-buttons button[aria-pressed=true]{background:var(--ink);color:var(--paper)}#voice{position:relative;background:#efeede;padding:16px;margin-top:15px;border-radius:3px}#close-voice{position:absolute;top:5px;right:7px;border:0;background:none;font-size:20px}#voice h3{font:25px Georgia;margin:6px 0 12px}#voice-quotes p{font:15px/1.5 Georgia;margin:8px 0 14px}#voice-quotes b{font:10px system-ui;display:block;margin-bottom:4px;color:var(--muted)}#voice>small{font-size:9px;color:var(--muted)}.primary{width:100%;padding:13px 12px;background:var(--ink);border-color:var(--ink);color:var(--paper);text-align:left;margin-top:22px}.primary:hover{background:#375b49}.secondary{padding:10px;font-size:11px;margin-top:8px;width:100%;text-align:left}.note{font-size:9px;color:#7a8275;margin:15px 0 0;line-height:1.6}#toast{font-size:11px;color:#62765b}.hotspot{position:absolute;transform:translate(-50%,-110%);padding:4px 9px;background:#fffcebeb;border:0;border-radius:20px;font-size:10px;box-shadow:0 2px 7px #1c39272b;white-space:nowrap}.hotspot i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.hotspot:hover{background:white}#hotspots{position:absolute;inset:0;pointer-events:none}#hotspots button{pointer-events:auto}#walk-pad{position:absolute;left:20px;bottom:80px;text-align:center}#walk-pad button{width:38px;height:38px;background:#fcfaefde;margin:2px;font-size:19px}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#e7e9dc;font:23px Georgia}footer{height:38px;display:flex;align-items:center;gap:24px;padding:0 26px;font-size:9px;letter-spacing:1px;border-top:1px solid var(--line)}footer button,footer a{font-size:10px;letter-spacing:0;border:0;background:none;color:var(--muted);text-decoration:underline}footer>span{margin-right:auto}dialog{border:0;background:var(--paper);color:var(--ink);max-width:620px;width:calc(100% - 30px);padding:32px;max-height:85dvh;box-shadow:0 20px 100px #162f3340}dialog::backdrop{background:#18392e70;backdrop-filter:blur(4px)}dialog p{font-size:13px;line-height:1.7}dialog a{color:inherit}#close-method{position:absolute;right:13px;top:9px;border:0;background:none;font-size:26px}#choice>div{display:grid;gap:6px}#choice [data-select]{padding:11px;text-align:left;font-size:12px}#choice [aria-pressed=true]{background:var(--ink);color:var(--paper)}#choice p{font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.nojs{position:fixed;inset:45% 15% auto;background:var(--paper);padding:30px;z-index:100}
#next{position:sticky;bottom:0;z-index:3;box-shadow:0 -8px 16px var(--paper)}
@media(min-width:1550px){main{grid-template-columns:minmax(0,1fr) 380px}#story{padding:28px 30px}h2{font-size:33px}#intro{font-size:13px}.explanation p{font-size:12px}}
@media(max-width:850px){header{height:75px;padding:12px 16px;gap:18px}.brand{font-size:25px}.heading{padding-left:17px}.heading h1{font-size:23px}.heading>span{font-size:8px}#steps{height:42px;gap:7px}#steps button{font-size:10px;padding:0 5px}main{height:auto;display:flex;flex-direction:column;min-height:0}#scene{height:55dvh;min-height:360px}#story{border-left:0;border-top:1px solid var(--line);padding:22px;overflow:visible}#story h2{max-width:500px}#metric-pair{max-width:440px}.viewbar button{padding:8px}.viewbar button span{display:none}.viewbar{bottom:10px}#scene-hint{bottom:58px;font-size:9px}.scene-top{inset:12px 10px auto}.plan-label{font-size:9px;padding:6px;gap:6px}.plan-label b{width:20px;height:20px;font-size:14px}#baseline-label{top:14px;left:14px;font-size:9px;padding:8px 10px}.hotspot{font-size:9px;padding:3px 6px}footer{height:auto;min-height:46px;flex-wrap:wrap;padding:10px 16px;gap:6px 18px}footer>span{width:100%}.heading h1{letter-spacing:-.5px}}
@media(max-width:400px){header{gap:12px}.heading{padding-left:12px}.heading h1{font-size:20px}.brand{font-size:24px}#steps{gap:0;justify-content:space-around}#steps button span{display:none}#steps button{font-size:9px}.plan-label span{max-width:90px;line-height:1.25}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

#height-button{margin:0 0 14px;border-color:#a9b59b;font-size:12px;color:#315c4b;background:#edf0df}
#water-state{position:absolute;top:69px;left:50%;transform:translateX(-50%);background:#fcfaefec;border:1px solid #b7c5b5;padding:6px 11px;font-size:10px;border-radius:20px;text-align:center;max-width:90%;white-space:nowrap}
#section-dialog{max-width:1000px;width:calc(100% - 30px)}#section-dialog h2{font:30px Georgia;margin:12px 0}#close-section{position:absolute;right:13px;top:9px;border:0;background:none;font-size:26px}#section-panels{display:grid;grid-template-columns:1fr 1fr;gap:22px}#section-panels article{min-width:0}#section-panels h3{font:20px Georgia}#section-panels svg{width:100%;background:#f3f1e5;border-radius:5px}#section-panels svg text{font:11px system-ui;fill:#334f42}#section-panels article p{font-size:12px}.section-note{font-size:11px!important;color:#62735f}.test-summary{border:1px solid #b6c5ad;background:#edf0df;padding:12px}
#terrain-markers{position:absolute;inset:0;pointer-events:none}.terrain-marker{position:absolute;transform:translate(-50%,-100%);background:#fcfaefed;color:#315744;padding:4px 8px;border:1px solid #9baf96;font-size:10px;border-radius:3px;text-align:center;white-space:nowrap;box-shadow:0 2px 6px #29432920}.terrain-marker:after{content:'';position:absolute;left:50%;height:12px;width:1px;background:#58775c;top:100%}
@media(max-width:850px){#section-panels{grid-template-columns:1fr;gap:10px}#section-dialog{padding:25px 18px}#water-state{font-size:9px;top:53px;max-width:94%;white-space:normal;width:max-content}.terrain-marker{font-size:8px;padding:3px 5px}}

/* The expanded scene works in mobile browsers without a fullscreen permission. */
.scene-expanded #terrain-markers .terrain-marker{display:block;font-size:10px}
#expand-scene{position:absolute;right:15px;bottom:19px;display:flex;align-items:center;gap:5px;min-height:42px;padding:7px 11px;background:#fcfaefed;border-color:#d9dfcc;font-size:12px;z-index:8;box-shadow:0 3px 15px #24433818}#expand-scene>span:first-child{font-size:20px}.scene-expanded{overflow:hidden}.scene-expanded #scene{position:fixed;inset:0;z-index:100;height:100dvh;width:100vw;min-height:0}.scene-expanded #expand-scene{top:70px;bottom:auto}.scene-expanded .viewbar{bottom:max(18px,env(safe-area-inset-bottom))}.scene-expanded #scene-hint{display:block;bottom:80px}.scene-expanded .scene-top{inset:max(18px,env(safe-area-inset-top)) 18px auto}
@media(max-width:850px){#expand-scene{right:9px;bottom:57px;padding:5px 8px;min-height:38px;font-size:10px}.scene-expanded #expand-scene{top:80px}.scene-expanded #scene-hint{font-size:11px;background:#fcfaefb8;padding:6px 12px;bottom:72px;width:auto;left:50%;transform:translateX(-50%);white-space:nowrap}.scene-expanded #focus-caption,.scene-expanded #water-state{top:52px}.scene-expanded #walk-pad{bottom:120px}}
.loading-card{padding:25px;text-align:center;max-width:510px}.loading-card #loading-message{font:25px/1.3 Georgia,serif;margin:0 0 12px}.loading-card #loading-detail{font:14px/1.5 system-ui,sans-serif;margin:0;color:#4d6254}#loading-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px;font:13px/1.5 system-ui,sans-serif}#loading-actions button{padding:10px 14px}#loading-actions a{color:inherit;padding:8px}#scene:has(#loading:not([hidden])) .viewbar,#scene:has(#loading:not([hidden])) #expand-scene{visibility:hidden}@media(max-width:850px){.loading-card{padding:16px}.loading-card #loading-message{font-size:20px}.loading-card #loading-detail{font-size:12px}#loading-actions{margin-top:12px;gap:4px;font-size:12px}}
/* Narrative context follows the existing typography and mobile layout. */
#case-brief{border-top:1px solid var(--line);margin-top:20px;padding-top:15px}#case-brief p{font-size:13px;line-height:1.65;margin:10px 0}#case-brief .micro{font-size:11px}#voice-bio{font:13px/1.55 system-ui,sans-serif;margin:0 0 15px;color:#506454}#voice-moment{display:block;font-size:9px;letter-spacing:1px}#flood-count-note{margin:-4px 0 17px}dialog h3{font:21px/1.25 Georgia,serif;margin:24px 0 10px}
/* ribera-3: readable decisions and controls, no action covering the story. */
.metric strong.metric-text{font-size:23px;line-height:1.2;margin:7px 0}
div#profile-inline svg text{font-size:11.5px}
main{grid-template-columns:minmax(0,1fr) 420px}#story{padding:24px 25px 28px}#intro{font-size:14px;line-height:1.55}h2{font-size:29px}.eyebrow{font-size:10px;letter-spacing:1.4px}.micro,.note{font-size:11px;line-height:1.55;color:#5d6b60}.metric span,.metric small,.explanation p{font-size:12px}.explanation h3{font-size:19px}#metric-pair{margin:16px 0;gap:10px}.metric{padding:12px}.metric strong{font-size:34px}#next{position:static;box-shadow:none;margin-top:24px}button:disabled{cursor:not-allowed;opacity:.48}.secondary{font-size:13px;padding:12px}#height-button{font-size:13px;margin:6px 0 14px}
.decision-table{border-collapse:collapse;width:100%;font-size:12px;line-height:1.4}.decision-table caption{text-align:left;font:20px Georgia;margin:8px 0 13px}.decision-table td,.decision-table th{padding:10px 7px;vertical-align:top;border-bottom:1px solid #d3d7c6;text-align:left}.decision-table thead th{font-weight:700}.decision-table td:nth-child(2){background:#e9eddf}.decision-table td:nth-child(3){background:#f0e8df}.decision-table tbody th{font-size:11px;width:25%;font-weight:500}.decision-table td strong{font:30px Georgia;display:block}.decision-table small{font-size:11px;display:block;margin-top:5px}.decision-table th:nth-child(2){color:#446f59}.decision-table th:nth-child(3){color:#905d44}
#people{margin:18px 0 8px;padding-top:12px}#person-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}#person-buttons button{font-size:13px;min-height:40px;border-radius:5px;padding:8px 4px}#voice{margin:12px 0 20px;padding:20px}#voice-quotes p{font-size:17px;line-height:1.5}#voice-quotes b{font-size:12px;margin-bottom:7px}#voice>small{font-size:11px}#close-voice{width:30px;height:30px}
#test-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}#test-buttons button{min-height:58px;padding:9px 6px;text-align:left;font-size:13px;line-height:1.3}#test-buttons button[aria-pressed=true]{color:var(--paper);background:#294c3f;border-color:#294c3f}#test-note{margin:9px 0}#test-takeaway{font-size:14px;line-height:1.55;border-left:3px solid #7c9d7c;padding-left:13px}#profile-title{font:20px Georgia;margin:22px 0 12px}#profile-inline{background:#f1f1e5;border:1px solid #dce0cf;padding:10px;border-radius:4px}#profile-inline svg{width:100%;display:block}#profile-inline text{font:10px system-ui;fill:#2c5145}#profile-inline .profile-letter{font:bold 21px Georgia}#profile-inline .micro{margin:8px 4px 0;font-size:10px}
#conditions{margin:18px 0;padding:14px;font-size:13px}summary{cursor:pointer}#conditions summary,#brief-review summary{font-size:13px;padding:5px 0;font-weight:600}#conditions[open]>summary{margin-bottom:12px}#brief-review{margin:20px 0;border-top:1px solid var(--line);padding-top:12px}#conditions .check small{font-size:12px}#event{font-size:13px}#test-next-wrap .primary{margin-top:14px}#test-next-wrap:not([hidden])+#next{background:transparent;color:#294c3f;border:1px solid #b9c6b2;margin-top:10px;font-size:12px}
#choice{margin-top:17px}#choice .choice-buttons{display:grid;gap:9px}#choice [data-select]{padding:13px;border-left:4px solid #446f59;background:#e9eddf}#choice [data-select=defensa]{border-left-color:#9b6650;background:#f0e8df}#choice [data-select][aria-pressed=true]{background:#294c3f;color:var(--paper)}#choice [data-select] b{display:block;font:18px Georgia}#choice [data-select] span{display:block;font-size:12px;margin-top:5px}#choice p{font-size:13px}#decision-detail{display:block!important}#decision-detail[hidden]{display:none!important}#decision-text{font:23px Georgia!important;margin:25px 0 14px}#decision-fields{margin:0}#decision-fields dt{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#64765f;margin-top:19px;font-weight:700}#decision-fields dd{margin:5px 0 0;font-size:14px;line-height:1.55}.acceptance{margin-top:24px;padding:13px;background:#e9eddf;border:1px solid #b3c3aa;font-size:14px}.acceptance input{margin-top:5px;flex:none}.check input{width:17px;height:17px}#decision-status{font-size:12px!important;color:#52704f}#decision-reply{font:18px/1.5 Georgia;margin:20px 0;padding-left:13px;border-left:3px solid #91a27e}#choice .test-summary{margin:23px 0 8px;font-size:12px}#choice #download{font-size:13px}
.viewbar{gap:2px;padding:5px}.viewbar button,.viewbar summary{font-size:12px;padding:10px 9px;min-height:38px}.viewbar summary{list-style:none;white-space:nowrap}.viewbar summary:after{content:' ▴'}.viewbar #explore{position:relative;border-left:1px solid #c8d0bd}.explore-menu{position:absolute;bottom:calc(100% + 12px);right:-5px;min-width:200px;background:#fcfaef;border:1px solid #ccd3bf;border-radius:6px;box-shadow:0 8px 30px #163b3540;padding:7px;z-index:15}.explore-menu button{width:100%;text-align:left;font-size:13px!important;display:block}.explore-menu button:hover{background:#e5eadb}.viewbar #explore:not([open]) .explore-menu{display:none}#walk-pad #exit-walk{display:block;width:auto;font-size:12px;height:35px;padding:5px 12px;margin-bottom:8px}
#focus-caption{position:absolute;left:50%;top:70px;transform:translateX(-50%);max-width:90%;width:max-content;background:#fcfaefed;border:1px solid #b2c2aa;border-radius:4px;padding:7px 12px;font-size:12px;text-align:center;pointer-events:none}#water-state{font-size:12px;padding:7px 12px}#focus-caption:not([hidden])~.viewbar{z-index:6}#water-state:has(~#focus-caption:not([hidden])){display:none}.dialog-close{position:absolute;right:13px;top:9px;border:0;background:none;font-size:26px}footer{font-size:10px;gap:16px}footer button,footer a{font-size:11px}
@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 450px}#story{padding:26px 30px}h2{font-size:32px}}
@media(max-width:850px){header{height:74px}#steps{height:44px;gap:7px}#steps button{font-size:11px}main{display:flex;min-height:0;height:auto;overflow:visible}#scene{position:sticky;top:0;z-index:5;height:clamp(240px,34svh,340px);min-height:240px;flex:none;width:100%;box-shadow:0 2px 8px #173b3020}#story{padding:20px 20px 28px;overflow:visible;scroll-margin-top:calc(clamp(240px,34svh,340px) + 8px)}#story h2{font-size:28px;margin:10px 0 13px}#intro{font-size:13px;line-height:1.5}.heading>span{font-size:7px;letter-spacing:1px}.viewbar{bottom:8px;max-width:calc(100% - 12px);gap:0;padding:3px}.viewbar button,.viewbar summary{font-size:11px;padding:8px;min-height:38px}#scene-hint{display:none}.scene-top{inset:8px 8px auto}.plan-label{font-size:10px;padding:5px 6px;gap:4px}.plan-label span{max-width:110px}.plan-label b{width:19px;height:19px}.terrain-marker{display:none}#water-state,#focus-caption{top:44px;font-size:10px;max-width:94%;width:max-content;white-space:normal;padding:5px 9px}#people,#test-sequence,#voice,#choice{scroll-margin-top:calc(clamp(240px,34svh,340px) + 12px)}#people{margin-top:14px}#person-buttons{gap:6px}.hotspot{font-size:10px}#test-buttons button{font-size:12px;min-height:48px}#test-note{margin:8px 0 0;font-size:11px}.metric strong{font-size:30px}#choice [data-select]{padding:11px}#choice [data-select] b{font-size:18px}#choice [data-select] span{font-size:12px}#voice-quotes p{font-size:17px}#next{position:static}#walk-pad{bottom:60px;left:12px}footer{gap:9px 16px;padding-bottom:16px}}
@media(max-width:400px){header{gap:9px;padding:12px}.heading{padding-left:10px}.heading h1{font-size:20px}.brand{font-size:23px}#steps{gap:0}#steps button{font-size:10px;padding:0 4px}#story{padding:18px 16px 26px}#story h2{font-size:25px}#choice{margin-top:14px}.viewbar button,.viewbar summary{padding:7px;font-size:10px}}