html,body,#root{background:#b7d4ea;width:100%;height:100%;margin:0;overflow:hidden}*{box-sizing:border-box}body{font-family:Segoe UI,Candara,system-ui,sans-serif}:root{--ui-font:"Segoe UI", "Candara", system-ui, sans-serif;--ui-line:color-mix(in srgb, var(--ws-ink) 12%, transparent);--ui-line-soft:color-mix(in srgb, var(--ws-timber) 22%, white);--ui-chip:color-mix(in srgb, var(--ws-accent) 9%, white);--ui-card:color-mix(in srgb, white 88%, var(--ws-plaster));--ui-shadow:0 10px 28px color-mix(in srgb, var(--ws-ink) 14%, transparent);--ui-leak-ink:color-mix(in srgb, var(--ws-leak) 62%, var(--ws-ink));--ui-leak-tint:color-mix(in srgb, var(--ws-leak) 16%, white);--ui-saving-ink:color-mix(in srgb, var(--ws-saving) 52%, var(--ws-ink));--ui-saving-tint:color-mix(in srgb, var(--ws-saving) 18%, white);--ui-water-tint:color-mix(in srgb, var(--ws-water) 16%, white)}.app-shell{background:var(--ws-sky-day);width:100%;height:100%;position:relative;overflow:hidden}.app-shell canvas{display:block;width:100%!important;height:100%!important}.overlay{pointer-events:none;z-index:20;font-family:var(--ui-font);color:var(--ws-ink);position:absolute;inset:0}.overlay .panel{pointer-events:auto;background:var(--ws-panel);border:1px solid var(--ui-line);box-shadow:var(--ui-shadow);-webkit-backdrop-filter:blur(12px)saturate(1.1);backdrop-filter:blur(12px)saturate(1.1)}.topbar{border-radius:16px;align-items:center;gap:16px;padding:10px 14px;display:flex;position:absolute;top:12px;left:12px;right:12px}.brand{align-items:center;gap:10px;min-width:168px;display:flex}.scale-tabs{background:var(--ui-chip);border-radius:999px;flex-shrink:0;gap:2px;padding:3px;display:flex}.scale-tabs button{background:0 0;border:none;border-radius:999px;padding:6px 14px}.scale-tabs button.on,.scale-tabs button:hover{background:var(--ws-accent);color:#fff}.brand strong{letter-spacing:.02em;font-size:16px;display:block}.brand .sub{color:var(--ws-ink-soft);font-size:11px;display:block}.mark{background:linear-gradient(160deg, var(--ws-water), var(--ws-water-deep));border-radius:50% 50% 50% 8px;width:28px;height:28px;transform:rotate(45deg)}.clock{font-variant-numeric:tabular-nums;flex-direction:column;display:flex}.clock .day{color:var(--ws-ink-soft);font-size:12px}.clock .time{font-size:20px;font-weight:650}.weather{background:var(--ui-water-tint);color:color-mix(in srgb, var(--ws-water-deep) 70%, var(--ws-ink));border-radius:10px;flex-direction:column;padding:4px 10px;font-size:12px;display:flex}.weather.drought{background:color-mix(in srgb, var(--ws-sky-drought) 70%, white);color:var(--ui-leak-ink)}.speeds{gap:4px;margin-left:auto;display:flex}.overlay button{font:inherit;border:1px solid color-mix(in srgb, var(--ws-ink-soft) 32%, white);color:var(--ws-ink);cursor:pointer;background:#fff;border-radius:999px;padding:6px 12px;transition:background-color .12s,border-color .12s,color .12s}.overlay button.on,.overlay button:hover{background:var(--ws-accent);color:#fff;border-color:var(--ws-accent)}.overlay button:focus-visible{outline:2px solid var(--ws-gold);outline-offset:2px}.overlay button:disabled{opacity:.45;cursor:not-allowed;background:var(--ui-chip);color:var(--ws-ink-soft);border-color:var(--ui-line)}.overlay button.ghost{background:0 0}.overlay button.ghost:hover{background:var(--ui-chip);color:var(--ws-ink);border-color:color-mix(in srgb, var(--ws-ink-soft) 32%, white)}.zoom-row{border-radius:999px;align-items:center;gap:6px;padding:6px 8px;display:flex;position:absolute;top:72px;left:50%;transform:translate(-50%)}.zoom-row .hint{color:var(--ws-ink-soft);white-space:nowrap;padding:0 8px;font-size:11px}.zoom-row .hint kbd{font:inherit;color:var(--ws-ink);font-weight:700}@media (width<=1400px){.zoom-row .hint{display:none}}.zoom-row .divider{background:var(--ui-line);width:1px;height:18px;margin:0 2px}.zoom-row button.icon{min-width:32px;padding:5px 8px;font-size:15px;line-height:1}.zoom-row .rotate-pair{background:var(--ui-chip);border-radius:999px;gap:2px;padding:2px;display:flex}.zoom-row .rotate-pair button{background:0 0;border-color:#0000}.zoom-row .rotate-pair button:hover{background:var(--ws-accent);color:#fff}.zoom-row button.quality{letter-spacing:.04em;min-width:40px;font-size:11px;font-weight:700}.zoom-row button.quality.low{background:var(--ui-chip);color:var(--ws-ink-soft);border-color:#0000}.zoom-row button.quality.low:hover{background:var(--ws-accent);color:#fff}.cycle-caption{color:color-mix(in srgb, var(--ws-water-deep) 60%, var(--ws-ink));letter-spacing:.02em;padding:4px 12px;font-size:12px;font-weight:600}.left,.right{border-radius:18px;width:300px;max-height:calc(100% - 210px);padding:14px 14px 10px;position:absolute;top:124px;overflow:auto}.left{left:12px}.right{right:12px}.right.selected{border-color:color-mix(in srgb, var(--ws-gold) 70%, white);box-shadow:0 0 0 2px color-mix(in srgb, var(--ws-gold) 45%, transparent), var(--ui-shadow)}.left h2,.right h2,.left h3,.right h3{text-transform:uppercase;letter-spacing:.08em;color:var(--ws-ink-soft);margin:0 0 8px;font-size:13px;font-weight:700}.left section{margin-bottom:14px}.metrics{grid-template-columns:1fr 1fr;gap:8px;display:grid}.metrics div{background:var(--ui-card);border:1px solid var(--ui-line-soft);border-radius:10px;padding:8px}.metrics span{color:var(--ws-ink-soft);font-size:11px;display:block}.metrics strong{font-size:15px}.hero-metric{font-variant-numeric:tabular-nums;margin:0;font-size:22px;font-weight:750}.hero-sub{margin:8px 0 0;font-size:14px;font-weight:650}.leak-loud{background:color-mix(in srgb, var(--ws-leak) 22%, white);color:var(--ui-leak-ink);border-left:4px solid var(--ws-leak);border-radius:10px;margin:10px 0 6px;padding:8px 10px;font-size:13px;font-weight:800;line-height:1.35}.leak-quiet{color:var(--ws-ink-soft);margin:10px 0 6px;font-size:12px}.bill-note{margin:0 0 8px;font-size:12px}.bill-note.warn{color:var(--ui-leak-ink)}.wide-meter{width:100%;height:10px;margin-top:6px}.insp-bars{margin:12px 0 4px}.insp-bars h3{margin-top:10px}.bar-row.hot .bar-label{color:var(--ws-accent);font-weight:700}.pay-line,.rate-line{color:var(--ws-ink-soft);margin:8px 0 0;font-size:11px;line-height:1.4}.bill-card{background:var(--ui-card);border:1px solid var(--ui-line-soft);border-radius:12px;padding:10px 10px 4px}.bill-lines{margin:8px 0 6px;padding-left:16px;font-size:12px;line-height:1.45}.bill-lines .warn,.facts li.warn{color:var(--ui-leak-ink)}.bill-lines .save{color:var(--ui-saving-ink)}.payback{color:var(--ui-saving-ink)!important;font-size:11px!important}.bar-row{grid-template-columns:78px 1fr 52px;align-items:center;gap:6px;margin:4px 0;font-size:11px;display:grid}.bar-track{background:color-mix(in srgb, var(--ws-ink-soft) 14%, white);border-radius:99px;height:8px;overflow:hidden}.bar-fill{border-radius:99px;height:100%}.bar-fill.src-mains{background:var(--ws-water-deep)}.bar-fill.src-rain{background:var(--ws-water)}.bar-fill.src-grey{background:var(--ws-greywater)}.bar-val{text-align:right;font-variant-numeric:tabular-nums}.status-grid{gap:8px;display:grid}.status-grid div{grid-template-columns:72px 1fr auto;align-items:center;gap:8px;font-size:12px;display:grid}.status-grid meter{width:100%;height:8px}.overlay meter{accent-color:var(--ws-water)}.overlay meter::-webkit-meter-bar{background:color-mix(in srgb, var(--ws-ink-soft) 14%, white);border:none;border-radius:99px}.overlay meter::-webkit-meter-optimum-value{background:linear-gradient(90deg, var(--ws-water-deep), var(--ws-water));border-radius:99px}.overlay meter::-webkit-meter-suboptimum-value{background:linear-gradient(90deg, var(--ws-water-deep), var(--ws-water));border-radius:99px}.overlay meter::-webkit-meter-even-less-good-value{background:linear-gradient(90deg, var(--ws-water-deep), var(--ws-water));border-radius:99px}.overlay input[type=checkbox]{accent-color:var(--ws-accent)}.toggle{cursor:pointer;align-items:center;gap:8px;margin:6px 0;font-size:13px;display:flex}.forecast{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.forecast div{background:var(--ui-card);border:1px solid var(--ui-line-soft);text-align:center;border-radius:8px;flex-direction:column;gap:2px;padding:6px 2px;font-size:10px;display:flex}.forecast .dry{background:color-mix(in srgb, var(--ws-sky-drought) 60%, white);border-color:color-mix(in srgb, var(--ws-leak) 25%, white);color:var(--ui-leak-ink)}.forecast.compact{grid-template-columns:repeat(7,1fr);gap:3px}.forecast.compact div{padding:5px 1px;font-size:10px}.inspector .muted{color:var(--ws-ink-soft);font-size:13px;line-height:1.45}.insp-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.facts p,.facts li{font-size:13px;line-height:1.4}.facts ul{margin:8px 0 0;padding-left:16px}.upgrades article{background:var(--ui-card);border:1px solid var(--ui-line-soft);border-radius:10px;margin:8px 0;padding:8px}.upgrades article.owned{opacity:.7}.upgrades article header{justify-content:space-between;gap:8px;font-size:13px;display:flex}.upgrades article p{color:var(--ws-ink-soft);margin:4px 0 8px;font-size:12px}.source-picks{gap:4px;margin-top:6px;display:flex}.events{border-radius:14px;width:300px;margin:0;padding:10px 12px;font-size:12px;list-style:none;position:absolute;bottom:12px;left:12px}.events li{border-left:3px solid var(--ui-line);margin:4px 0;padding-left:10px;animation:.22s event-in}.events li.leaving{animation:.4s forwards event-out}@keyframes event-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes event-out{to{opacity:0;transform:translateY(6px)}}.events .warn{color:var(--ui-leak-ink);border-left-color:var(--ws-leak)}.events .good{color:var(--ui-saving-ink);border-left-color:var(--ws-saving)}.outcome{border-radius:14px;max-width:360px;padding:10px 12px;font-size:13px;position:absolute;bottom:12px;right:12px}.outcome.good{background:color-mix(in srgb, var(--ui-saving-tint) 92%, transparent);color:var(--ui-saving-ink)}.outcome.warn{background:color-mix(in srgb, var(--ui-leak-tint) 92%, transparent);color:var(--ui-leak-ink)}@media (width<=1100px){.left,.right,.events{width:250px}.zoom-row .hint{display:none}.brand{min-width:0}}.world-leak-label{font-family:var(--ui-font);background:var(--ws-leak);color:#fff;white-space:nowrap;pointer-events:none;width:max-content;max-width:4.75rem;box-shadow:0 3px 8px color-mix(in srgb, var(--ws-ink) 28%, transparent);letter-spacing:.01em;border-radius:999px;padding:2px 6px;font-size:11px;font-weight:700;line-height:1.15}.world-tag{font-family:var(--ui-font);background:var(--ws-accent);color:#fff;white-space:nowrap;pointer-events:none;width:max-content;box-shadow:0 3px 8px color-mix(in srgb, var(--ws-ink) 28%, transparent);border-radius:999px;padding:2px 7px;font-size:11px;font-weight:700;line-height:1.15}.world-room-label{font-family:var(--ui-font);letter-spacing:.04em;text-transform:uppercase;color:var(--ws-ink);background:var(--ws-panel);border:1px solid var(--ui-line);white-space:nowrap;box-shadow:0 3px 10px color-mix(in srgb, var(--ws-ink) 18%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}