.demo-scene{grid-template-columns:minmax(0,1fr) 270px;grid-template-areas:"install bridge" "analytics analytics" "energy energy"}
.demo-analytics{grid-area:analytics;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;min-width:0;align-items:start}.demo-analytics .demo-loadcurve{grid-area:auto}
.electrical-heatmap{min-width:0;background:#f7f6f1;border:1px solid #e5e1d6;padding:18px 14px;align-self:start}
.heat-head h4{font-size:16px;line-height:1.35;margin:0;color:#173546}.heat-note,.heat-hint{font-size:11px;line-height:1.55;color:#50646d;margin:10px 0 15px}.heat-consumers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.heat-consumers button{min-width:0;min-height:44px;border:1px solid #b7c8c0;background:#fff;color:#173546;font:inherit;font-size:12px;border-radius:3px;padding:7px;cursor:pointer}.heat-consumers button[aria-pressed=true]{background:#173546;border-color:#173546;color:#fff}.heat-consumer-summary{font-weight:600;font-size:12px;color:#173546;margin:14px 0 10px}
.heat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;min-width:0}.heat-cell{position:relative;min-width:0;min-height:49px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--heat-color);color:var(--heat-text);border:1px solid #17354618;border-radius:3px;padding:5px 1px;cursor:pointer}.heat-hour{font-size:11px;line-height:1.2;font-variant-numeric:tabular-nums}.heat-cell-value{font-size:10px;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}.heat-cell.is-selected{outline:2px solid #173546;outline-offset:1px;box-shadow:inset 0 0 0 2px #fff}.heat-cell:focus-visible,.heat-consumers button:focus-visible,.energy-time-controls button:focus-visible,.energy-time-controls select:focus-visible{outline:3px solid #337dba;outline-offset:2px;z-index:2}
.heat-scale-title{font-size:10px;color:#50646d;margin:15px 0 6px}.heat-scale{display:flex;align-items:center;gap:7px;font-size:10px;color:#50646d;margin:0 0 13px}.heat-scale i{height:8px;flex:1;border-radius:3px;background:linear-gradient(90deg,rgb(255,247,225),rgb(242,151,51),rgb(161,38,30))}.heat-value{display:block;font-size:12px;line-height:1.55;font-variant-numeric:tabular-nums;font-weight:600;color:#173546;margin-top:13px}.heat-peak{font-size:11px;line-height:1.55;color:#8c441e;margin:6px 0}.heat-hint{margin-bottom:0}
.energy-time-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:7px;align-items:end;margin-top:12px;max-width:430px}.energy-time-controls label{font-size:10px;line-height:1.4;color:#50646d;display:flex;flex-direction:column;gap:3px;min-width:0}.energy-time-controls select{width:100%;min-width:0;min-height:44px;border:1px solid #b7c8c0;background:#fff;color:#173546;border-radius:3px;padding:7px;font:inherit;font-size:12px}.energy-time-controls button{min-height:44px;min-width:0;border:1px solid #b7c8c0;background:#fff;color:#173546;border-radius:3px;font:inherit;cursor:pointer}.energy-time-controls .energy-previous,.energy-time-controls .energy-next{font-size:24px}.energy-time-controls .energy-play{grid-column:1/-1;font-size:12px}.flow-time-slot{margin:15px 0 8px}.flow-time-slot .energy-time-controls{max-width:460px}.sankey-svg{cursor:default}
@media(max-width:1200px){.demo-analytics{grid-template-columns:minmax(0,1fr)}.heat-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.heat-consumers{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){.demo-scene{grid-template-columns:minmax(0,1fr) 245px;gap:24px}}
@media(max-width:700px){.demo-scene{grid-template-columns:minmax(0,1fr);grid-template-areas:"install" "bridge" "analytics" "energy"}.electrical-heatmap{padding:16px 10px}.heat-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.heat-consumers{grid-template-columns:repeat(2,minmax(0,1fr))}.heat-hour{font-size:10px}.heat-cell-value{font-size:9px}.heat-note,.heat-hint{font-size:11px}.heat-cell{min-height:48px}}
@media(prefers-reduced-motion:reduce){.electrical-heatmap *,.sankey-branch{transition:none!important;animation:none!important}}

.heat-scale-note{font-size:10px;line-height:1.5;color:#50646d;margin:-4px 0 12px}.heat-scale>span{white-space:nowrap;font-variant-numeric:tabular-nums}