/* Step 1. Use the shared kit. Step 2. Layer the film stage and controls. Step 3. Fit the phone. */
*{box-sizing:border-box}body{margin:0;background:var(--wum-stage-bg);color:var(--wum-stage-ink);font-family:var(--wum-body);overflow:hidden}button,a,input{touch-action:manipulation}button{font:500 12px var(--wum-mono);color:var(--wum-stage-ink);border:1px solid var(--wum-stage-glass-line);background:var(--wum-stage-glass);border-radius:3px;padding:11px 14px;cursor:pointer;backdrop-filter:blur(16px)}button:hover,button[aria-pressed=true]{border-color:var(--wum-stage-accent);color:var(--wum-stage-focus)}button:disabled{opacity:.4;cursor:wait}:focus-visible{outline:2px solid var(--wum-stage-focus);outline-offset:4px}[hidden]{display:none!important}#stage{position:relative;height:calc(100svh - 50px);min-height:580px;isolation:isolate}#scene,#scene canvas,.vignette{position:absolute;inset:0;width:100%;height:100%}#scene canvas{display:block;touch-action:none}.vignette{pointer-events:none;background:linear-gradient(180deg,rgba(7,6,10,.5),transparent 24%,transparent 50%,rgba(7,6,10,.88)),linear-gradient(90deg,rgba(7,6,10,.15),transparent 65%);z-index:1}.intro{position:absolute;left:7vw;top:24%;max-width:620px;z-index:3;transition:opacity .7s,transform .7s}.intro.away{opacity:0;transform:translateY(-25px);pointer-events:none}.eyebrow{font:11px var(--wum-mono);letter-spacing:.14em;color:var(--wum-stage-accent)}.status-dot{display:inline-block;width:5px;height:5px;background:currentColor;border-radius:50%;margin-right:8px}h1{font:600 clamp(54px,6.5vw,100px)/.94 var(--wum-display);letter-spacing:-.025em;margin:24px 0}h1 em{font-style:normal;color:var(--wum-stage-focus)}.intro p:not(.eyebrow){font-size:15px;line-height:1.6;max-width:410px;color:var(--wum-stage-muted)}.primary{margin-top:18px;font-family:var(--wum-body);font-size:14px;background:var(--wum-stage-ink);color:var(--wum-stage-bg);border:none;padding:15px 20px;min-width:210px;display:flex;justify-content:space-between;gap:40px}.primary:hover{color:var(--wum-card-accent)}.topline{position:absolute;z-index:3;top:22px;left:32px;right:32px;display:flex;justify-content:space-between;gap:16px;align-items:start}.topline p{font:11px var(--wum-mono);color:var(--wum-stage-muted);margin:10px 0}.compass{position:absolute;right:36px;top:110px;width:60px;text-align:center;z-index:2;font:11px var(--wum-mono);color:var(--wum-stage-muted);pointer-events:none}.compass svg{width:60px;fill:none;stroke:var(--wum-stage-muted);stroke-width:.7}.compass path{fill:var(--wum-stage-focus);stroke:none}.compass small{font-size:8px;white-space:nowrap;display:block;letter-spacing:.12em}.caption{position:absolute;left:32px;bottom:280px;z-index:2;pointer-events:none;max-width:400px}.caption p{font:500 24px var(--wum-display);letter-spacing:.02em;margin:0 0 6px}.caption span{font:12px/1.5 var(--wum-body);color:var(--wum-stage-muted)}.controls{position:absolute;bottom:142px;left:32px;right:32px;z-index:3;display:grid;grid-template-columns:1fr 220px;gap:15px}.view-controls,.system-controls{display:flex;gap:6px;flex-wrap:wrap}.reveal-control{padding:0 4px}.reveal-control label{display:flex;justify-content:space-between;font:10px var(--wum-mono);color:var(--wum-stage-muted);margin-bottom:9px}.reveal-control input{width:100%;accent-color:var(--wum-stage-accent);cursor:pointer}.system-controls{grid-column:1/-1}.timebar{position:absolute;bottom:0;left:0;right:0;padding:18px 32px 16px;z-index:3;border-top:1px solid var(--wum-stage-glass-line);background:var(--wum-stage-glass);backdrop-filter:blur(16px)}.time-head{display:flex;justify-content:space-between;font:11px var(--wum-mono);margin-bottom:12px;color:var(--wum-stage-muted)}#eras{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}#eras button{text-align:left;border:none;border-top:2px solid var(--era);border-radius:0;padding:8px 5px;background:transparent;color:var(--wum-stage-muted);font-size:10px}#eras button[aria-pressed=true]{color:var(--era);background:var(--wum-stage-glass)}#budget{font:10px var(--wum-mono);color:var(--wum-stage-muted);margin:10px 0 0}#inspector{position:absolute;z-index:4;right:32px;top:140px;width:300px;padding:24px;border:1px solid var(--wum-stage-glass-line);background:var(--wum-stage-glass);backdrop-filter:blur(20px)}#inspector h2,#about h2,#fallback h2{font:500 36px/1 var(--wum-display);margin:12px 0 18px}#inspector p:not(.eyebrow){font-size:13px;color:var(--wum-stage-muted);line-height:1.6}#closeInspect,#closeAbout{position:absolute;right:10px;top:10px;border:none;font-size:20px;padding:4px 9px}#about{position:absolute;inset:16px 16px 16px auto;width:min(540px,calc(100% - 32px));z-index:8;background:var(--wum-stage-bg);padding:40px;overflow:auto;border:1px solid var(--wum-stage-glass-line);box-shadow:0 0 120px var(--wum-stage-bg)}#about p{font-size:14px;line-height:1.6;color:var(--wum-stage-muted)}.truth{border-block:1px solid var(--wum-stage-glass-line);margin:24px 0;padding:10px 0}#sources{display:grid;gap:8px;margin-top:24px}#sources a,#fallback a{font-size:12px;color:var(--wum-stage-accent)}#fallback{position:absolute;z-index:10;inset:22% 20%;background:var(--wum-stage-bg);border:1px solid var(--wum-stage-glass-line);padding:35px;height:max-content}#fallback a{display:block;margin-top:20px}#fallback p{line-height:1.6;color:var(--wum-stage-muted)}
@media(max-width:700px){#stage{height:calc(100svh - 50px);min-height:620px}.topline{top:15px;left:16px;right:16px}.topline button{font-size:9px;padding:9px}.intro{top:19%;left:24px;right:24px}.intro h1{font-size:60px}.intro p:not(.eyebrow){font-size:13px;max-width:290px}.compass{right:16px;top:92px;transform:scale(.8);transform-origin:right top}.caption{left:16px;right:16px;bottom:340px;max-width:300px}.caption p{font-size:21px}.controls{left:16px;right:16px;bottom:166px;grid-template-columns:1fr;gap:12px}.view-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.view-controls button{padding:10px 4px;font-size:9px}.reveal-control label{margin-bottom:5px}.system-controls{gap:4px}.system-controls button{font-size:9px;padding:9px 7px}.timebar{padding:13px 16px 16px}#eras{grid-template-columns:repeat(4,1fr);gap:4px}#eras button{font-size:9px;padding:6px 3px}#budget{font-size:8px;line-height:1.5}#inspector{top:118px;right:16px;left:16px;width:auto;padding:16px}#inspector h2{font-size:26px;margin:10px 0}#inspector p:not(.eyebrow){font-size:11px}#about{padding:28px 22px}#fallback{inset:20% 16px}.caption:has(+.controls[hidden]){display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.clock{display:flex;gap:8px;align-items:center;font:10px var(--wum-mono);color:var(--wum-stage-muted);padding:0 8px}.clock input{width:90px;accent-color:var(--wum-stage-accent)}.clock output{color:var(--wum-stage-focus)}@media(max-width:700px){.clock{font-size:9px}.clock input{width:65px}}

/* Step 4. The working water inspector stays above the scene, clear of era controls. */
#waterPanel{position:absolute;z-index:5;top:100px;right:32px;bottom:280px;width:410px;padding:22px;background:var(--wum-stage-glass);backdrop-filter:blur(24px);border:1px solid var(--wum-stage-glass-line);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#waterPanel header{display:flex;align-items:center;justify-content:space-between;gap:8px}#waterPanel .eyebrow{font-size:9px;letter-spacing:.08em;margin:0}#closeWater{padding:4px 9px;font-size:18px}#waterPanel h2{font:500 36px/1.05 var(--wum-display);margin:12px 0 7px}.water-scope{font:11px var(--wum-mono);color:var(--wum-stage-muted);margin:0 0 14px}.reserve-readout{display:flex;gap:20px;align-items:center}.reserve-readout>strong{font:500 60px/1 var(--wum-display);color:var(--wum-sea-stage)}.reserve-readout div{display:grid;gap:6px;font:12px var(--wum-mono)}.reserve-readout small{font-size:8px;color:var(--wum-stage-muted);letter-spacing:.1em}
#waterGauge{height:5px;background:var(--wum-stage-glass-line);margin:12px 0}#waterGauge i{display:block;height:100%;width:100%;background:var(--wum-sea-stage);transition:width .35s}#waterPanel[data-alert=true] #waterGauge i{background:var(--wum-stage-accent)}#waterPanel[data-alert=true] .reserve-readout>strong{color:var(--wum-stage-accent)}#waterStatus{font:11px/1.5 var(--wum-mono);min-height:33px;margin:8px 0;color:var(--wum-stage-focus)}.water-budget{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;border-block:1px solid var(--wum-stage-glass-line);padding:11px 0}.water-budget div{display:grid;gap:5px}.water-budget small{font:8px var(--wum-mono);color:var(--wum-stage-muted)}.water-budget strong{font:15px var(--wum-mono)}.water-unit{font-size:9px;color:var(--wum-stage-muted);margin:8px 0 12px}.water-lines{display:grid;gap:6px;margin-bottom:6px}.water-lines button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;font-size:10px;padding:10px}.water-lines button span{color:var(--wum-sea-stage)}.water-lines button[aria-pressed=true] span{color:var(--wum-stage-accent)}#waterRecycler{width:100%;font-size:10px;padding:10px}.water-power{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}.water-power button{font-size:9px;padding:9px}.water-power #waterSharedPower{grid-column:1/-1}.water-time{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:12px}.water-time span{font:10px var(--wum-mono);margin-right:auto}.water-time button{font-size:9px;padding:8px}#waterNotice{font:10px/1.4 var(--wum-mono);color:var(--wum-stage-muted);margin:10px 0}#waterPanel details{font-size:10px;color:var(--wum-stage-muted);line-height:1.6;border-top:1px solid var(--wum-stage-glass-line);padding-top:8px}#waterPanel summary{cursor:pointer;color:var(--wum-stage-focus)}#waterPanel details p{margin:8px 0}#waterPanel a{color:var(--wum-stage-accent)}
@media(max-width:700px){#waterPanel{left:16px;right:16px;top:86px;bottom:260px;width:auto;padding:14px}#waterPanel h2{font-size:29px}.reserve-readout>strong{font-size:42px}.reserve-readout{gap:16px}.water-budget strong{font-size:13px}#waterStatus{font-size:10px;min-height:30px}#stage:has(#waterPanel:not([hidden])) .caption,#stage:has(#waterPanel:not([hidden])) .compass,#stage:has(#waterPanel:not([hidden])) .view-controls,#stage:has(#waterPanel:not([hidden])) .reveal-control{display:none}}
.size-controls{display:inline-flex;gap:6px}@media(max-width:700px){.size-controls{gap:4px}.size-controls button{font-size:9px;padding:9px 7px}}

.power-controls[hidden],.power-note[hidden]{display:none}.power-note{margin:8px 0 0;max-width:62ch;font:400 12px/1.5 var(--wum-body);color:var(--wum-stage-muted)}