:root{--ink:#f3eee4;--muted:rgba(234,238,232,.66);--line:rgba(216,231,225,.17);--glass:rgba(9,29,33,.58);--accent:#e9bb83;--mint:#79d3bd;--shadow:0 24px 80px rgba(0,12,16,.28)}
*{box-sizing:border-box}html,body,#app,#scene{width:100%;height:100%;margin:0;overflow:hidden}body{background:#5ca2cf;color:var(--ink);font-family:Inter,"SF Pro Display","Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a,input{font:inherit}button{color:inherit}canvas{display:block;width:100%;height:100%;outline:none}.atmosphere{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,transparent 38%,rgba(3,13,20,.075) 100%),linear-gradient(180deg,rgba(237,248,253,.045),transparent 46%,rgba(4,12,16,.085))}.glass{background:linear-gradient(145deg,rgba(10,37,42,.68),rgba(7,25,30,.45));border:1px solid rgba(210,230,224,.18);box-shadow:var(--shadow);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)}#rainFx{position:fixed;z-index:4;inset:0;pointer-events:none;width:100%;height:100%}
.topbar{position:fixed;z-index:10;left:24px;right:24px;top:20px;height:58px;border-radius:17px;display:flex;align-items:center;padding:0 12px 0 18px}.brand{color:var(--ink);text-decoration:none;letter-spacing:.18em;font-size:14px}#toggleUi{margin-left:16px}
.story{position:fixed;z-index:8;left:24px;top:96px;width:346px;border-radius:22px;padding:27px 28px 24px}.kicker,.control-head p,.legend>p,.selection>p{margin:0 0 11px;color:var(--mint);font-size:10px;font-weight:800;letter-spacing:.19em}.story h1{font-family:Georgia,"Times New Roman",serif;font-size:47px;line-height:.94;font-weight:400;letter-spacing:-.045em;margin:0 0 19px}.story h1 em{color:#ead7b9;font-weight:400}.dek{font-size:13px;line-height:1.65;color:rgba(239,240,232,.74);margin:0 0 21px}.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;margin-bottom:17px}.facts div+div{border-left:1px solid var(--line);padding-left:14px}.facts strong{display:block;font-size:18px;font-variant-numeric:tabular-nums}.facts span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.evidence{margin:0;color:rgba(228,231,225,.57);font-size:10px;line-height:1.5}.evidence span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px}
.controls{position:fixed;z-index:8;right:24px;top:96px;width:320px;border-radius:22px;padding:22px}.control-head{display:flex;align-items:center}.control-head>div{flex:1}.control-head p{margin-bottom:4px}.control-head h2{font-size:21px;margin:0}.control-body{display:block}.controls.collapsed{width:230px}.controls.collapsed .control-body{display:none}.range-row{display:block;margin-top:24px}.range-row>span{display:flex;justify-content:space-between;font-size:12px;margin-bottom:12px}.range-row output{color:var(--accent);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent)}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:rgba(1,13,17,.3);padding:4px;border-radius:13px;margin:20px 0 10px}.segmented button{border:0;background:transparent;border-radius:10px;padding:10px 5px;font-size:11px;cursor:pointer}.segmented button.active{background:rgba(234,214,182,.92);color:#173138;font-weight:800}.view-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.view-grid button{display:flex;gap:8px;align-items:center;background:rgba(202,222,216,.06);border:1px solid var(--line);border-radius:11px;padding:11px 10px;text-align:left;font-size:11px;cursor:pointer}.view-grid button span{font-size:9px;color:var(--accent)}.view-grid button.active{border-color:rgba(233,187,131,.64);background:rgba(233,187,131,.12)}.compare{width:100%;margin:13px 0 17px;border:1px solid rgba(233,187,131,.35);background:rgba(233,187,131,.1);border-radius:12px;padding:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;font-size:11px}.compare:active,.compare.active{background:rgba(233,187,131,.84);color:#19333a}.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;border-top:1px solid var(--line);padding-top:15px}.legend>p{grid-column:1/-1;margin:0 0 3px}.legend div{display:flex;gap:7px;align-items:center;font-size:9px;color:var(--muted)}.legend i{width:10px;height:10px;background:var(--c);border-radius:3px}
.view-grid button:last-child:nth-child(odd){grid-column:1/-1;justify-content:center}
.hud{position:fixed;z-index:8;left:50%;bottom:20px;transform:translateX(-50%);height:44px;border-radius:16px;display:flex;align-items:center;gap:14px;padding:0 16px;color:var(--muted);font-size:9px;letter-spacing:.08em}.hud span{display:flex;align-items:baseline;gap:5px}.hud i{font-style:normal;color:var(--ink);font-size:11px;font-variant-numeric:tabular-nums}.hud b{padding-left:13px;border-left:1px solid var(--line);color:var(--accent);font-size:9px;white-space:nowrap}.selection{position:fixed;z-index:12;left:24px;bottom:20px;width:330px;border-radius:20px;padding:20px}.selection h2{font-size:20px;margin:0 30px 12px 0}.selection p{font-size:11px;color:var(--muted);line-height:1.55;margin:5px 0}.selection>p{color:var(--mint)}
#labels{position:fixed;inset:0;pointer-events:none;z-index:5}.label{position:absolute;transform:translate(-50%,-50%);padding:7px 10px;border:1px solid rgba(239,232,216,.25);border-radius:999px;background:rgba(9,28,32,.55);backdrop-filter:blur(10px);font-size:9px;font-weight:700;letter-spacing:.08em;white-space:nowrap;color:#f1e8d9}
#loading{position:fixed;z-index:40;inset:0;background:#0a242a;display:grid;place-content:center;text-align:center;transition:opacity .7s,visibility .7s}.loader-mark{font-family:Georgia,serif;font-size:32px;letter-spacing:.12em}.loader-line{width:280px;height:2px;background:rgba(255,255,255,.12);margin:28px auto 14px;overflow:hidden}.loader-line span{display:block;height:100%;width:4%;background:var(--accent);transition:width .25s}.loader-text,#loaderText{font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}#loading.done{opacity:0;visibility:hidden}
body.ui-hidden .topbar,body.ui-hidden .story,body.ui-hidden .controls,body.ui-hidden .hud,body.ui-hidden .selection{opacity:0;pointer-events:none}body.ui-hidden .atmosphere{opacity:.65}.topbar,.story,.controls,.hud,.selection{transition:opacity .25s,transform .25s}
@media(max-width:900px){.story{width:300px}.controls{top:auto;bottom:75px;width:280px}.story h1{font-size:39px}.hud{left:24px;transform:none}.legend{display:none}}@media(max-width:680px){.topbar{left:10px;right:10px;top:10px}.story{left:10px;top:84px;width:calc(100% - 20px);padding:18px}.story h1{font-size:34px}.story .dek,.story .facts,.story .evidence{display:none}.controls{left:10px;right:10px;bottom:64px;width:auto}.controls .legend{display:none}.hud{left:10px;right:10px;bottom:10px;transform:none;justify-content:center}.hud span:nth-child(n+2){display:none}}
.flood-launch{width:100%;margin:0 0 17px;border:1px solid rgba(91,189,207,.38);background:linear-gradient(110deg,rgba(46,129,148,.19),rgba(29,91,107,.08));border-radius:12px;padding:12px 13px;cursor:pointer;display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;text-align:left;align-items:center;column-gap:8px}.flood-launch>span{grid-row:1/3;font-size:24px;color:#80d6df}.flood-launch b{font-size:11px}.flood-launch small{margin-top:2px;color:rgba(159,218,222,.7);font-size:8px;letter-spacing:.13em}.flood-launch:hover,.flood-launch.active{border-color:rgba(128,214,223,.75);background:rgba(46,129,148,.25)}
.flood-lab{position:fixed;z-index:16;right:24px;top:96px;width:390px;max-height:calc(100vh - 126px);overflow:auto;border-radius:22px;padding:22px;background:linear-gradient(145deg,rgba(7,30,37,.86),rgba(6,22,28,.72))}.flood-lab[hidden]{display:none}.flood-head{display:flex;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:16px}.flood-head>div{flex:1}.flood-head p{margin:0 0 4px;color:#80d6df;font-size:9px;font-weight:800;letter-spacing:.18em}.flood-head h2{margin:0;font-size:22px}.flood-scope{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:16px 0;padding:13px;border:1px solid rgba(128,214,223,.18);border-radius:13px;background:rgba(29,96,110,.12)}.flood-scope span{font-size:8px;letter-spacing:.15em;color:#80d6df;align-self:center}.flood-scope b{font-size:13px;text-align:right}.flood-scope small{grid-column:1/-1;color:var(--muted);font-size:9px;line-height:1.45}.flood-select{display:block;margin:0 0 7px;color:var(--muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.flood-lab select{width:100%;padding:12px 34px 12px 12px;border:1px solid var(--line);border-radius:11px;background:rgba(7,25,30,.9);color:var(--ink);font-size:11px;outline:none}.flood-lab select:focus{border-color:rgba(128,214,223,.7)}.flood-state{display:flex;align-items:center;gap:9px;margin:12px 0 0;padding:11px 12px;border-radius:11px;background:rgba(230,160,92,.11);color:#f0c28c;font-size:10px;line-height:1.4}.flood-state i{width:7px;height:7px;flex:none;border-radius:50%;background:#e5a15e;box-shadow:0 0 0 4px rgba(229,161,94,.1)}.flood-state.screening{background:rgba(90,166,183,.12);color:#9ed8df}.flood-state.screening i{background:#70c3cf}.flood-state.ready{background:rgba(83,181,143,.13);color:#9cdec1}.flood-state.ready i{background:#64c69e}.flood-observed{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.flood-observed div{padding:10px;border:1px solid rgba(214,231,226,.1);border-radius:10px;background:rgba(255,255,255,.025)}.flood-observed span,.flood-observed b{display:block}.flood-observed span{font-size:8px;color:var(--muted);margin-bottom:4px}.flood-observed b{font-size:12px}.flood-section{margin-top:16px}.flood-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:9px}.flood-section-title span{color:var(--accent)}.flood-chips{display:flex;flex-wrap:wrap;gap:6px}.flood-chips span{padding:6px 8px;border-radius:999px;background:rgba(229,161,94,.1);border:1px solid rgba(229,161,94,.2);color:#e8c197;font-size:8px}.flood-chips .screening-chip{background:rgba(90,166,183,.1);border-color:rgba(90,166,183,.22);color:#a8d7dc}.flood-run{width:100%;margin:17px 0 14px;padding:12px;border:0;border-radius:12px;background:#66bea9;color:#0c2a2f;display:flex;align-items:center;justify-content:space-between;text-align:left}.flood-run span{font-size:11px;font-weight:800}.flood-run small{font-size:8px}.flood-run:disabled{cursor:not-allowed;background:rgba(204,215,210,.09);color:rgba(224,231,226,.42);border:1px solid rgba(204,215,210,.1)}.flood-proof{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}.flood-proof div+div{border-left:1px solid var(--line);padding-left:10px}.flood-proof strong,.flood-proof span{display:block}.flood-proof strong{font-size:12px}.flood-proof span{font-size:7px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}.flood-note{font-size:9px;color:var(--muted);line-height:1.55;margin:13px 0}.flood-evidence{color:#e7c18f;font-size:9px;text-decoration:none;font-weight:700}.flood-evidence:hover{text-decoration:underline}.flood-lab:not([hidden])~#loading{pointer-events:none}
body.ui-hidden .flood-lab{opacity:0;pointer-events:none}.flood-lab{transition:opacity .25s,transform .25s}body.flood-open .controls{opacity:0;pointer-events:none}@media(max-width:900px){.flood-lab{left:24px;right:auto;width:360px}}@media(max-width:680px){.flood-lab{left:10px;right:10px;top:84px;width:auto;max-height:calc(100vh - 158px)}.flood-observed{grid-template-columns:1fr 1fr}}
.rain-control{margin-top:14px;padding:13px;border-radius:14px;border:1px solid rgba(126,210,220,.18);background:linear-gradient(135deg,rgba(44,110,126,.14),rgba(255,255,255,.025))}.rain-control-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.rain-control-head label{font-size:9px;font-weight:750}.rain-control-head output{font-size:12px;font-weight:800;color:#a5e0e6;font-variant-numeric:tabular-nums}.rain-control input{width:100%;accent-color:#7ccbd6}.rain-scale{display:flex;justify-content:space-between;margin-top:3px;color:rgba(228,236,233,.45);font-size:7px}.rain-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:7px;margin-top:11px}.rain-actions button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;border:1px solid rgba(128,214,223,.22);border-radius:10px;background:rgba(81,157,173,.1);cursor:pointer;font-size:9px}.rain-actions button:hover,.rain-actions button.active{background:rgba(104,190,204,.22);border-color:rgba(128,214,223,.55)}.rain-control p{margin:9px 0 0;color:var(--muted);font-size:8px;line-height:1.5}
.ioc-kpis{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border:1px solid rgba(137,216,223,.13);border-radius:12px;overflow:hidden;background:rgba(3,17,21,.22)}.ioc-kpis div{padding:10px 9px}.ioc-kpis div+div{border-left:1px solid rgba(137,216,223,.1)}.ioc-kpis span,.ioc-kpis strong{display:block}.ioc-kpis span{font-size:7px;color:rgba(218,232,229,.48);margin-bottom:5px}.ioc-kpis strong{font-size:13px;font-variant-numeric:tabular-nums}.tide-head{margin-top:16px;padding-top:13px;border-top:1px solid rgba(136,210,218,.12)}.rain-actions .worst-case{grid-column:1/-1;background:rgba(223,77,55,.1);border-color:rgba(244,105,82,.3);color:#ffc2b5}.rain-actions .worst-case:hover{background:rgba(226,63,43,.24);border-color:rgba(255,111,88,.7)}.flood-audit{margin-top:12px;border-top:1px solid var(--line);padding-top:11px}.flood-audit summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:rgba(229,237,233,.72);font-size:9px;list-style:none}.flood-audit summary::-webkit-details-marker{display:none}.flood-audit summary:after{content:'+';font-size:16px;margin-left:8px}.flood-audit[open] summary:after{content:'−'}.flood-audit summary b{margin-left:auto;color:var(--accent);font-size:8px}.flood-audit .flood-section{margin-top:12px}.alert-label{border-color:rgba(255,85,68,.7);background:rgba(89,11,13,.72);color:#ffd6cd;box-shadow:0 0 22px rgba(255,38,31,.28)}.ioc-alert-bar{position:fixed;z-index:18;left:50%;top:92px;transform:translateX(-50%);min-width:570px;height:48px;display:flex;align-items:center;gap:11px;padding:0 15px;border:1px solid rgba(255,113,91,.7);border-radius:13px;background:linear-gradient(90deg,rgba(92,12,15,.92),rgba(37,15,20,.82));box-shadow:0 12px 50px rgba(220,27,24,.25);backdrop-filter:blur(18px)}.ioc-alert-bar[hidden]{display:none}.ioc-alert-bar .alert-pulse{width:9px;height:9px;border-radius:50%;background:#ff5142;box-shadow:0 0 0 0 rgba(255,72,59,.7);animation:alertPulse 1.5s infinite}.ioc-alert-bar>strong{font-size:11px;letter-spacing:.08em}.ioc-alert-bar>b{font-size:8px;color:#ffb2a5;font-weight:650}.ioc-alert-bar>div{margin-left:auto;display:flex;gap:6px}.ioc-alert-bar>div span{padding:5px 7px;border-radius:7px;background:rgba(255,255,255,.08);font-size:8px;font-variant-numeric:tabular-nums}@keyframes alertPulse{70%{box-shadow:0 0 0 10px rgba(255,72,59,0)}100%{box-shadow:0 0 0 0 rgba(255,72,59,0)}}body[data-ioc-level=yellow] .ioc-kpis div:first-child strong{color:#f0d068}body[data-ioc-level=orange] .ioc-kpis div:first-child strong{color:#f2a35e}body[data-ioc-level=red] .ioc-kpis div:first-child strong{color:#ff6658}body[data-ioc-level=red] .flood-lab{border-color:rgba(255,94,75,.28);box-shadow:0 24px 90px rgba(37,0,5,.4),inset 0 1px rgba(255,128,104,.08)}body[data-ioc-level=red] .rain-control{border-color:rgba(255,91,72,.25)}
@media(max-width:900px){.ioc-alert-bar{top:84px;min-width:0;width:calc(100% - 48px)}.ioc-alert-bar>b{display:none}}@media(max-width:680px){.ioc-kpis{grid-template-columns:repeat(3,1fr)}.ioc-alert-bar{left:10px;right:10px;top:76px;width:auto;transform:none}.ioc-alert-bar>div span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){.ioc-alert-bar .alert-pulse{animation:none}}

/* Unified map shell · 30B */
:root{
  --edge:16px;
  --rail:44px;
  --panel-w:304px;
  --flood-w:372px;
  --control-size:32px;
  --glass-edge:rgba(224,239,235,.2);
}
.glass{
  background:linear-gradient(145deg,rgba(13,39,44,.5),rgba(6,23,28,.33));
  border-color:var(--glass-edge);
  box-shadow:0 12px 42px rgba(0,12,16,.18),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(17px) saturate(1.12);
  -webkit-backdrop-filter:blur(17px) saturate(1.12);
}
.topbar{
  left:var(--edge);
  right:auto;
  top:var(--edge);
  width:auto;
  min-width:0;
  height:var(--rail);
  padding:0 6px 0 16px;
  gap:12px;
  border-radius:13px;
}
.brand{font-size:12px;letter-spacing:.16em;white-space:nowrap}
.chrome-button,.panel-toggle{
  width:var(--control-size);
  min-width:var(--control-size);
  height:var(--control-size);
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(220,237,232,.15);
  border-radius:9px;
  background:rgba(221,238,233,.045);
  color:rgba(244,247,241,.78);
  cursor:pointer;
  font-size:12px;
  line-height:1;
  font-weight:750;
}
.chrome-button:hover,.chrome-button:focus-visible,.panel-toggle:hover,.panel-toggle:focus-visible{
  outline:none;
  border-color:rgba(121,211,189,.55);
  background:rgba(121,211,189,.1);
}
#toggleUi{margin:0;font-size:9px;letter-spacing:.08em}
.toggle-show-icon{display:none}
.story,.controls,.flood-lab,.selection{border-radius:15px}
.story{
  left:var(--edge);
  top:calc(var(--edge) + var(--rail) + 10px);
  width:var(--panel-w);
  padding:16px;
}
.story.collapsed{width:286px;padding:11px 12px}
.story .kicker,.control-head p{
  margin:0 0 3px;
  color:var(--mint);
  font-size:7px;
  font-weight:800;
  letter-spacing:.15em;
}
.story-head,.control-head,.selection-head,.flood-head{display:flex;align-items:center;gap:14px}
.story-head>div,.control-head>div,.selection-head>div:first-child,.flood-head>div:first-child{min-width:0;flex:1}
.story-head h2,.control-head h2{
  margin:0;
  font-size:13px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.story-body{max-height:460px;margin-top:18px}
.story h1{font-size:39px;margin-bottom:15px}
.story .dek{font-size:11px;line-height:1.55;margin-bottom:16px}
.story .facts{padding:12px 0;margin-bottom:13px}
.story .facts strong{font-size:15px}
.panel-actions{display:flex;align-items:center;gap:6px;flex:none;margin-left:10px}
.flood-head>.panel-actions{flex:0 0 auto}
.panel-body{
  opacity:1;
  overflow:hidden;
  transition:max-height .26s cubic-bezier(.2,.72,.2,1),opacity .14s ease,margin .26s ease;
}
.collapsed>.panel-body{max-height:0!important;opacity:0;pointer-events:none;margin-top:0!important;margin-bottom:0!important}
.controls{
  right:var(--edge);
  top:var(--edge);
  width:var(--panel-w);
  padding:16px;
}
.controls.collapsed{width:236px;padding:11px 12px}
.control-body{max-height:calc(100vh - 84px);margin-top:12px;overflow:auto;padding-right:2px;scrollbar-width:thin}
.range-row{margin-top:7px}
.segmented{margin:14px 0 8px}
.segmented button,.view-grid button,.compare,.flood-launch{min-height:40px}
.view-grid button{padding:9px}
.compare{margin:10px 0}
.flood-launch{margin-bottom:10px}
.legend{padding-top:11px}
.hud{
  left:50%;
  bottom:var(--edge);
  height:34px;
  border-radius:11px;
  gap:11px;
  padding:0 12px;
  font-size:7px;
}
.hud i{font-size:9px}.hud b{font-size:7px;padding-left:10px}
.selection{left:var(--edge);bottom:var(--edge);width:300px;padding:13px}
.selection-head h2{font-size:15px;margin:1px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selection-head p{font-size:7px;margin:0;color:var(--mint);letter-spacing:.15em}
.selection #selectedBody{max-height:180px;margin-top:9px;overflow:auto}
.selection.collapsed{width:270px}.selection.collapsed .selection-head h2{font-size:12px}
.flood-lab{
  right:var(--edge);
  top:var(--edge);
  width:var(--flood-w);
  max-height:calc(100vh - 32px);
  padding:16px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(8,31,37,.66),rgba(4,19,24,.43));
}
.flood-lab.collapsed{width:320px;padding:11px 12px}
.flood-head{min-height:40px;padding-bottom:12px}
.flood-head p{margin:0 0 3px;color:#80d6df;font-size:7px;font-weight:800;letter-spacing:.14em}
.flood-head h2{margin:0;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flood-lab.collapsed .flood-head{min-height:32px;border-bottom:0;padding-bottom:0}
.flood-content{max-height:calc(100vh - 112px);overflow:auto;padding-right:3px;scrollbar-width:thin}
.flood-compact{display:none;align-items:baseline;gap:8px;padding:8px 3px 0;margin-top:8px;border-top:1px solid var(--line)}
.flood-compact span{font-size:9px;color:#9ed8df}.flood-compact b{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums}.flood-compact small{font-size:7px;color:var(--muted)}
.flood-lab.collapsed .flood-compact{display:flex}
.flood-scope{margin:12px 0}.flood-lab select{height:40px;padding-top:0;padding-bottom:0}
.ioc-kpis{margin-top:9px}.rain-control{margin-top:10px}.rain-actions button{min-height:40px}.flood-observed{margin-top:9px}.flood-audit{margin-top:9px}
body.flood-open .story,body.flood-open .controls{opacity:0;visibility:hidden;pointer-events:none}
body.ui-hidden .flood-lab,body.ui-hidden .ioc-alert-bar{opacity:0;pointer-events:none}
.ioc-alert-bar{top:var(--edge);height:44px;min-width:520px;border-radius:12px;padding:0 12px}
.ioc-alert-bar>strong{font-size:9px}.ioc-alert-bar>b{font-size:7px}.ioc-alert-bar>div span{font-size:7px}
@media(max-width:900px){
  :root{--edge:10px;--panel-w:282px;--flood-w:350px}
  .story{width:var(--panel-w)}
  .controls{top:var(--edge);bottom:auto;width:var(--panel-w)}
  .hud{left:50%;transform:translateX(-50%)}
  .flood-lab{left:auto;right:var(--edge);width:var(--flood-w)}
  .flood-lab.collapsed{width:304px}
  .ioc-alert-bar{top:calc(var(--edge) + var(--rail) + 6px);width:auto;min-width:0}
}
@media(max-width:540px){
  :root{--edge:8px;--rail:40px}
  .topbar{left:var(--edge);top:var(--edge);height:var(--rail)}
  .story{left:var(--edge);top:calc(var(--edge) + var(--rail) + 8px);width:calc(100% - 16px)}
  .story.collapsed{width:212px}
  .controls{left:auto;right:var(--edge);top:calc(var(--edge) + var(--rail) + 8px);bottom:auto;width:calc(100% - 16px)}
  .controls.collapsed{width:118px}
  .controls.collapsed .control-head>div p{display:none}
  .controls.collapsed .control-head h2{font-size:10px}
  .flood-lab{left:var(--edge);right:var(--edge);top:calc(var(--edge) + var(--rail) + 8px);width:auto;max-height:calc(100vh - 164px)}
  .flood-lab.collapsed{left:auto;width:260px}
  .flood-content{max-height:calc(100vh - 132px)}
  .hud{left:var(--edge);right:var(--edge);bottom:var(--edge);transform:none;height:32px}
  .selection{left:var(--edge);bottom:50px;width:calc(100% - 16px)}
  .ioc-alert-bar{left:var(--edge);right:var(--edge);top:calc(var(--edge) + var(--rail) + 8px);height:40px;transform:none}
  .ioc-alert-bar>div span:nth-child(n+2){display:none}
}
@media(max-width:360px){.story.collapsed{width:178px}.controls.collapsed{width:108px}}
@media(prefers-reduced-motion:reduce){.panel-body,.panel-toggle svg{transition:none}}

/* Navigation and control geometry · 28B */
.story{display:none}
.chrome-button svg,.panel-toggle svg,.nav-flood svg{
  display:block;
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.panel-toggle svg{transition:transform .2s ease}
.panel-toggle:not(.is-collapsed) svg{transform:rotate(180deg)}
.nav-dock{
  position:fixed;
  z-index:9;
  left:var(--edge);
  top:calc(var(--edge) + var(--rail) + 10px);
  width:248px;
  padding:12px;
  border-radius:15px;
  transition:width .22s ease,opacity .25s ease,transform .25s ease;
}
.nav-dock.collapsed{width:184px}
.nav-head{display:flex;align-items:center;gap:12px;min-height:32px}
.nav-head>div{min-width:0;flex:1}
.nav-head p{margin:0 0 3px;color:var(--mint);font-size:7px;font-weight:800;letter-spacing:.15em}
.nav-head h2{margin:0;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-body{max-height:282px;margin-top:10px}
.nav-views{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.nav-views button,.nav-light button,.nav-quality button,.nav-flood{
  min-width:0;
  height:40px;
  border:1px solid rgba(220,237,232,.14);
  border-radius:10px;
  background:rgba(221,238,233,.045);
  color:rgba(244,247,241,.75);
  cursor:pointer;
  font-size:9px;
  font-weight:700;
}
.nav-views button:hover,.nav-views button:focus-visible,.nav-light button:hover,.nav-light button:focus-visible,.nav-quality button:hover:not(:disabled),.nav-quality button:focus-visible,.nav-flood:hover,.nav-flood:focus-visible{
  outline:none;
  border-color:rgba(121,211,189,.55);
  background:rgba(121,211,189,.1);
}
.nav-views button.active,.nav-light button.active,.nav-quality button.active,.nav-flood.active{
  border-color:rgba(233,187,131,.62);
  background:rgba(233,187,131,.16);
  color:#fff3e4;
}
.nav-light{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:8px;padding:3px;border-radius:11px;background:rgba(1,13,17,.2)}
.nav-light button{height:32px;border-color:transparent;border-radius:8px;font-size:8px}
.nav-quality{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:6px;padding:3px;border-radius:11px;background:rgba(1,13,17,.2)}
.nav-quality button{height:32px;border-color:transparent;border-radius:8px;font-size:8px}
.nav-quality button:disabled{opacity:.38;cursor:not-allowed}
.nav-flood{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.ioc-alert-bar{
  left:calc(var(--edge) + 264px);
  right:calc(var(--edge) + var(--flood-w) + 12px);
  width:auto;
  min-width:0;
  max-width:480px;
  margin-inline:auto;
  transform:none;
}
body.ui-hidden .nav-dock{opacity:0;pointer-events:none}
body.ui-hidden .topbar,body.ui-hidden .nav-dock,body.ui-hidden .controls,body.ui-hidden .hud,body.ui-hidden .selection{transition:opacity .25s,transform .25s}
body.ui-hidden .topbar{
  width:44px;
  height:44px;
  padding:6px;
  opacity:1;
  pointer-events:auto;
  transform:none;
}
body.ui-hidden .topbar .brand{display:none}
body.ui-hidden #toggleUi{width:32px;height:32px;padding:0;display:grid;place-items:center}
#toggleUi .toggle-show-icon{display:none}
body.ui-hidden #toggleUi .toggle-hide-icon{display:none}
body.ui-hidden #toggleUi .toggle-show-icon{display:block}

@media(max-width:540px){
  .nav-dock,.nav-dock.collapsed{
    left:var(--edge);
    right:var(--edge);
    top:auto;
    bottom:48px;
    width:auto;
    padding:7px;
    border-radius:13px;
  }
  .nav-head{display:none}
  .nav-body,.nav-dock.collapsed>.panel-body{
    display:flex;
    align-items:center;
    gap:6px;
    max-height:none!important;
    margin:0!important;
    opacity:1!important;
    overflow-x:auto;
    pointer-events:auto!important;
    scrollbar-width:none;
  }
  .nav-body::-webkit-scrollbar{display:none}
  .nav-views{display:flex;flex:0 0 auto;gap:6px}
  .nav-views button{flex:0 0 auto;height:36px;padding:0 12px}
  .nav-light{display:none}
  .nav-quality{display:flex;flex:0 0 auto;gap:3px;margin:0}
  .nav-quality button{flex:0 0 auto;height:36px;padding:0 10px}
  .nav-flood{flex:0 0 auto;width:auto;height:36px;margin:0;padding:0 12px}
  .selection{bottom:102px}
  .ioc-alert-bar{display:none!important}
}

/* Legibility and interaction QA · 30B */
:root{
  --button-text:12px;
  --meta-text:9px;
  --body-text:11px;
}
button:focus-visible,select:focus-visible,a:focus-visible{
  outline:2px solid rgba(121,211,189,.88);
  outline-offset:2px;
}
.button-icon,.compare .button-icon,.flood-launch .button-icon,.rain-actions .button-icon{
  display:block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.compare .button-icon path:last-child,.rain-play-icon path{fill:currentColor;stroke:none}
#toggleRain .rain-pause-icon{display:none}
#toggleRain.active .rain-play-icon{display:none}
#toggleRain.active .rain-pause-icon{display:block}

.nav-head p,.story .kicker,.control-head p,.selection-head p,.flood-head p{font-size:9px}
.nav-head h2,.story-head h2,.control-head h2{font-size:14px}
.flood-head h2{font-size:17px}
.nav-views button,.nav-light button,.nav-quality button,.nav-flood{
  min-height:40px;
  font-size:var(--button-text);
  line-height:1.2;
}
.nav-light button{height:40px;padding:0 4px;font-size:12px;white-space:nowrap}
.nav-quality button{height:40px;padding:0 4px;font-size:12px;white-space:nowrap}
.segmented button,.view-grid button,.compare,.flood-launch{
  min-height:44px;
  font-size:var(--button-text);
  line-height:1.25;
}
.segmented button{font-size:12px}
.view-grid button{font-size:12px}
.view-grid button span{font-size:10px}
.compare{font-size:12px}
.flood-launch{grid-template-columns:24px 1fr}
.flood-launch>.button-icon{grid-row:1/3}
.flood-launch b{font-size:12px}
.flood-launch small{font-size:9px}
.legend div{font-size:10px}

.flood-select{font-size:10px}
.flood-lab select{height:44px;font-size:12px}
.flood-state{font-size:11px}
.flood-scope span{font-size:9px}
.flood-scope small{font-size:10px}
.ioc-kpis span{font-size:9px}
.ioc-kpis strong{font-size:14px}
.rain-control-head label{font-size:10px}
.rain-control-head output{font-size:13px}
.rain-scale{font-size:8.5px}
.rain-actions button{min-height:44px;font-size:12px;line-height:1.2}
.rain-control p{font-size:10px}
.flood-observed span{font-size:9px}
.flood-observed b{font-size:13px}
.flood-section-title{font-size:10px}
.flood-chips span{font-size:9px}
.flood-run{min-height:44px;font-size:12px}
.flood-run span{font-size:12px}
.flood-run small{font-size:9px}
.flood-audit summary{min-height:36px;font-size:10px}
.flood-audit summary b{font-size:9px}
.flood-note,.flood-evidence{font-size:10px}
.flood-proof span{font-size:8px}

@media(max-width:540px){
  .nav-views button,.nav-flood{height:40px;font-size:12px}
  .nav-dock,.nav-dock.collapsed{bottom:52px}
  .selection{bottom:110px}
}