.offpeak-city-host{position:relative;width:100%;isolation:isolate;background:transparent;--city-neon:#ccff00;--city-ink:#263027;overflow:visible}
.opcity-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:16/7;background:transparent;overflow:visible;touch-action:pan-y}
.opcity-viewport{position:absolute;inset:0;width:100%;height:100%}
.opcity-art{display:block;width:100%;height:100%;overflow:visible;background:transparent;user-select:none;-webkit-user-drag:none}
.opcity-hotspots{position:absolute;inset:0;pointer-events:none}
.opcity-hotspot{position:absolute;display:flex;align-items:center;gap:6px;transform:translate(-50%,-50%);pointer-events:auto;appearance:none;border:1px solid rgba(56,68,53,.12);border-radius:99px;background:rgba(248,248,246,.91);color:#3c4639;padding:6px 10px 6px 7px;font-family:inherit;font-size:10px;font-weight:500;line-height:1.1;white-space:nowrap;cursor:pointer;box-shadow:0 1px 4px #3441250a,0 0 calc(20px * var(--district-energy,0)) #ccff0035;transition:background .18s,border-color .18s,color .18s,box-shadow .18s;backdrop-filter:blur(3px)}
.opcity-hotspot svg{display:block;width:18px;height:18px;flex:none}
.opcity-hotspot:hover,.opcity-hotspot:focus-visible,.opcity-hotspot[aria-pressed="true"]{background:#ccff00;border-color:#b3dc13;color:#242c19;outline:none;box-shadow:0 0 0 3px #ccff0026}
.opcity-hotspot:focus-visible{outline:2px solid #364326;outline-offset:3px}
.opcity-info{position:absolute;left:5.5%;bottom:8%;width:min(270px,24%);padding:10px 0;color:#566050;pointer-events:none;text-align:left;transition:opacity .2s}
.opcity-kicker{display:block;font-size:9px;line-height:1.5;letter-spacing:.09em;text-transform:uppercase;color:#87907d}
.opcity-info h3{font-family:inherit;font-size:16px;font-weight:500;line-height:1.3;letter-spacing:-.025em;margin:7px 0 6px;color:#35402f}
.opcity-info p{font-family:inherit;font-size:11px;font-weight:400;line-height:1.65;letter-spacing:0;margin:4px 0 0;color:#7c8476;max-width:25ch}
.opcity-info .opcity-hint{font-size:10px;max-width:21ch}
.opcity-info.is-selected{padding:13px 15px;background:rgba(248,248,248,.83);border:1px solid #e7ebdf;border-radius:12px;backdrop-filter:blur(6px)}
.opcity-pause{position:absolute;right:6%;bottom:7%;display:flex;align-items:center;gap:7px;appearance:none;border:1px solid #dce2d4;border-radius:30px;padding:8px 12px;background:rgba(248,248,248,.86);color:#65715b;font-family:inherit;font-size:10px;font-weight:500;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
.opcity-pause:hover{border-color:#b7cd87;color:#334126}.opcity-pause:focus-visible{outline:2px solid #8da76d;outline-offset:3px}.opcity-pause-symbol{font-size:11px;min-width:10px}
@media(max-width:900px){.opcity-hotspot{font-size:9px;padding:5px 8px 5px 6px;gap:4px}.opcity-hotspot svg{width:15px;height:15px}.opcity-info{left:2%;bottom:1%;width:25%}.opcity-info h3{font-size:13px}.opcity-info p{font-size:10px}.opcity-kicker{font-size:8px}.opcity-pause{bottom:2%;right:3%}}
@media(max-width:600px){.opcity-stage{aspect-ratio:1.08;min-height:340px;overflow:hidden}.opcity-viewport{inset:auto;left:50%;top:47%;width:155%;height:auto;aspect-ratio:16/7;transform:translate(-50%,-50%)}.opcity-hotspot{padding:5px;border-radius:50%;width:27px;height:27px;justify-content:center}.opcity-hotspot svg{width:16px;height:16px}.opcity-hotspot>span{display:none}.opcity-info{left:5%;bottom:2%;width:66%;padding:0}.opcity-info.is-selected{padding:9px 11px;bottom:2%;max-width:265px}.opcity-info h3{font-size:12px;margin:3px 0}.opcity-info p{font-size:9px;line-height:1.4;max-width:38ch}.opcity-info .opcity-hint{font-size:9px}.opcity-kicker{font-size:7px}.opcity-pause{right:5%;bottom:4%;padding:7px 8px;font-size:9px}.opcity-pause>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.opcity-hotspot,.opcity-info,.opcity-pause{transition:none}}
.offpeak-city-host .opcity-footer{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:30px;max-width:1090px;margin:12px auto 0;padding:0 32px;min-height:73px}
.offpeak-city-host .opcity-footer .opcity-info{position:static;left:auto;bottom:auto;width:auto;flex:1;max-width:760px;padding:0;background:none;border:0;backdrop-filter:none;border-radius:0;pointer-events:auto}
.offpeak-city-host .opcity-info h3{display:inline;font-size:14px;margin:4px 12px 0 0;line-height:1.6}
.offpeak-city-host .opcity-info p{display:inline;font-size:11px;line-height:1.6;max-width:none;color:#7b8077}
.offpeak-city-host .opcity-info .opcity-hint{display:block;font-size:11px;max-width:none}
.offpeak-city-host .opcity-kicker{color:#92988b;font-size:8px;line-height:1.8;letter-spacing:.08em}
.offpeak-city-host .opcity-footer .opcity-pause{position:static;flex:none;margin-top:4px}
.opcity-sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
.opcity-mobile-nav{display:none}
.opcity-readouts{position:absolute;inset:0;pointer-events:none;color:#ecf2e4;font-family:inherit}
.opcity-reading{position:absolute;top:91.1%;width:18.4%;height:6.7%;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:.3%;white-space:nowrap;text-align:left;line-height:1}
.opcity-reading-label{font-size:clamp(8px,.64vw,11px);font-weight:400;color:#abb69c;letter-spacing:0}
.opcity-reading-row{display:flex;align-items:baseline;gap:7px}
.opcity-reading-value{font-family:inherit;font-size:clamp(14px,1.65vw,27px);font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.opcity-reading-unit{font-size:clamp(7px,.6vw,10px);font-weight:400;color:#a1b18f}
[data-city-instrument]{transition:filter .2s}
[data-city-instrument]:hover{filter:brightness(1.18)}
@media(max-width:600px){
 .offpeak-city-host .opcity-stage{aspect-ratio:auto;min-height:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;scrollbar-width:none}
 .offpeak-city-host .opcity-stage::-webkit-scrollbar{display:none}
 .offpeak-city-host .opcity-viewport{position:relative;inset:auto;left:0;top:0;width:190%;height:auto;aspect-ratio:16/7;transform:none;margin:0}
 .offpeak-city-host .opcity-art{height:auto}
 .offpeak-city-host .opcity-hotspots{display:none}
 .opcity-mobile-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:10px 12px 0}
 .opcity-district-tab{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;appearance:none;background:transparent;border:0;color:#747c6c;border-radius:8px;padding:8px 0;font-family:inherit;font-size:10px;line-height:1.2;letter-spacing:-.02em;cursor:pointer}
 .opcity-district-tab svg{width:19px;height:19px}
 .opcity-district-tab[aria-pressed=true]{background:#ccff00;color:#242a1c}
 .opcity-district-tab:focus-visible{outline:2px solid #59634b;outline-offset:2px}
 .offpeak-city-host .opcity-footer{margin-top:14px;padding:0 22px;gap:12px;min-height:87px}
 .offpeak-city-host .opcity-info h3{font-size:12px;display:block;margin:3px 0}
 .offpeak-city-host .opcity-info p{font-size:9px;line-height:1.5;display:block}
 .offpeak-city-host .opcity-info .opcity-hint{font-size:10px}
 .offpeak-city-host .opcity-footer .opcity-pause{margin-top:0;padding:8px}
 .opcity-reading-label{font-size:8px}.opcity-reading-value{font-size:14px}.opcity-reading-unit{font-size:7px}.opcity-reading-row{gap:4px}
}