/* A canvas is revealed only after a complete building frame has been rendered. */
html:not([data-ready=true]) #stage{opacity:0!important;pointer-events:none}
html[data-ready=true] #stage{opacity:1;transition:opacity .7s ease}
#stage canvas:focus-visible{outline:1px solid var(--hkn-accent);outline-offset:-6px}
#stage canvas{cursor:grab}#stage canvas:active{cursor:grabbing}
#transition-frame{pointer-events:none}
.hero .thermal-panel{width:304px;padding:16px;top:112px;max-height:calc(100% - 240px);overflow:auto;background:#0b151ded}
.thermal-panel .temperatures{margin-bottom:12px;font-size:9px}
.thermal-panel .temperatures strong{font-size:17px;margin-top:4px}
.thermal-panel input{margin:10px 0}
.thermal-panel .thermal-result{padding-block:5px;margin-bottom:0}
.thermal-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin:12px 0}
.thermal-kpis>div:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;border-top:1px solid #334049;padding-top:12px}
.thermal-kpis>div:last-child small{grid-column:1/-1;margin-top:2px}
.thermal-kpis span{display:block;font-size:10px;color:#adc0c6;margin-bottom:6px}
.thermal-kpis strong{font-size:26px;line-height:1;font-weight:400;color:var(--hkn-accent);font-variant-numeric:tabular-nums}
.thermal-kpis small{display:block;font-size:9px;color:#91a5ad;margin-top:6px}
.thermal-kpis>div:nth-child(2) strong{color:#61cfe1}
.thermal-chart-legend{display:flex;justify-content:space-between;font-size:9px;color:var(--hkn-accent);gap:15px}
.thermal-chart-legend span:last-child{color:#61cfe1}
.thermal-performance-chart{display:block;width:100%;height:130px;overflow:visible}
.thermal-performance-chart text{fill:#97aab3;font-size:9px;font-family:var(--hkn-font-family)}
.thermal-grid{stroke:#9bb0ba20;stroke-width:1;fill:none}
.thermal-r-curve,.thermal-cost-curve{stroke-width:2.5;fill:none;stroke-linecap:round}
.thermal-r-curve{stroke:var(--hkn-accent)}.thermal-cost-curve{stroke:#61cfe1}
.thermal-cursor{stroke:#cadad855;stroke-width:1;stroke-dasharray:3 4;fill:none}
.thermal-chart-caption{font-size:9px;color:#91a5ad;text-align:center;margin-top:-5px}
body[data-mode=thermal] .hero .story{width:29vw}
@media(min-width:701px) and (max-width:1100px){.hero .thermal-panel{width:235px;right:26px;padding:14px}.thermal-kpis{gap:10px}.thermal-kpis strong{font-size:23px}}
@media(max-width:700px){
 .hero .thermal-panel{top:780px;right:20px;left:20px;width:auto;max-height:none;padding:18px;overflow:visible}
 body[data-mode=thermal] .hero{min-height:1490px}
 body[data-mode=thermal] .hero .story{width:calc(100% - 40px)}
 .thermal-performance-chart{height:145px}
}
@media(prefers-reduced-motion:reduce){html[data-ready=true] #stage{transition:none}}