.model-visual,.model-visual.day,.model-visual.night{background:#e9eddf;padding-top:22px}.model-visual:before{display:none}.model-intro{margin-top:20px}.model-intro h2{font-size:23px;font-weight:500}.model-intro p{font-size:10px;margin-top:6px}.model-stage{position:relative;height:300px;margin:5px -15px 0;overflow:hidden;isolation:isolate}.model-stage canvas{display:block;position:absolute;inset:0;width:100%;height:100%}.model-fallback{width:100%;height:100%;object-fit:contain}.model-stage.is-ready .model-fallback{display:none}.model-corner{position:absolute;left:15px;right:15px;bottom:4px;display:flex;justify-content:space-between;gap:15px;pointer-events:none;font:500 7px system-ui;letter-spacing:1px;color:#6b7f60}.model-corner>span:last-child{font-size:10px;letter-spacing:0}.compass-label{position:absolute;font:650 10px system-ui;left:20px;top:20px;pointer-events:none;display:none;transform:translate(-50%,-50%)}.is-ready .compass-label{display:block}.model-labels{position:absolute;inset:0;pointer-events:none}.device-label{position:absolute;transform:translate(-50%,-50%);font-size:8px;background:#fcfdf2e8;border:1px solid #cad8bd;border-radius:4px;padding:2px 5px;white-space:nowrap;box-shadow:0 2px 6px #223e2412}.device-label.solar{border-color:#c7a548}.device-label.inverter{border-color:#86a78b}.device-label.grid{border-color:#96abb8;color:#466e80}.model-status{font-size:8px;min-height:15px;color:#8a967e;text-align:center;margin:0 0 7px}.model-view-controls{display:flex;border-top:1px solid #cdd7c0;border-bottom:1px solid #cdd7c0;padding:8px 0;gap:4px;align-items:center}.model-view-controls button{background:transparent;padding:5px 9px;font-size:9px;border-radius:4px}.model-view-controls button[aria-pressed=true]{background:var(--ink);color:#fff}.model-view-controls button:disabled{opacity:.4;cursor:default}.model-view-controls #reset-model{margin-left:auto;color:#7a8e6e;font-size:8px}.daylight-control{margin-top:15px}.daylight-control>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:10px}.daylight-control output{font:500 15px system-ui;color:var(--ink)}#daylight-time{width:100%;height:4px;accent-color:#a4892a;margin:14px 0 8px;cursor:pointer}.daylight-labels{display:flex;justify-content:space-between;gap:10px;font:9px system-ui;color:#859378}.daylight-labels>span:nth-child(2){font-family:'Noto Sans Thai',sans-serif;font-size:8px}.model-extra{display:flex;justify-content:space-between;gap:14px;align-items:center;margin:12px 0 16px;font-size:9px}.model-extra label{display:flex;align-items:center;gap:5px}.model-extra input{margin:0}.model-extra button{background:transparent;font-size:9px;text-decoration:underline;text-underline-offset:3px;padding:3px 0}.energy-demo{border-top:1px solid #c9d5bb;padding-top:14px}.energy-demo-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.energy-demo-heading>span{font-size:10px;font-weight:500}.energy-demo-heading>div{display:flex;gap:3px}.energy-demo-heading button{background:#f5f7ec;border:1px solid #d0dabf;border-radius:4px;padding:3px 10px;font-size:9px}.energy-demo-heading button[aria-pressed=true]{background:#d1dec0;border-color:#8fa47e}.energy-chart{display:block;width:100%;height:auto;max-height:105px;margin-top:8px;overflow:visible}.energy-chart text{font:8px system-ui;fill:#8a997b}.energy-legend{display:flex;gap:16px;font-size:8px;flex-wrap:wrap;margin:8px 0 13px;color:#6d8060}.energy-legend>span{display:flex;align-items:center;gap:5px}.energy-legend i{display:inline-block;width:13px;height:3px;border-radius:2px}.energy-legend .solar{background:#bb961e}.energy-legend .home{background:#315e55}.energy-legend .grid{background:#7099ae}.energy-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:12px;border-top:1px solid #ced8c2}.energy-summary>div{display:flex;flex-direction:column;border-right:1px solid #ced8c2;padding-right:5px}.energy-summary>div:last-child{border-right:0}.energy-summary span{font-size:9px}.energy-summary b{font:500 25px/1.5 system-ui;letter-spacing:-1px}.energy-summary small{font-size:8px;color:#859477}.energy-demo #energy-story{font-size:10px;color:#44613c;margin-top:13px;min-height:34px}.energy-disclosure{font-size:8px;margin-top:6px;color:#8b987c;line-height:1.7}.model-assumptions{border-top:1px solid #cdd7bf;margin-top:15px;padding:11px 0;font-size:9px;color:#73866a}.model-assumptions summary{cursor:pointer}.model-assumptions p{font-size:9px;line-height:1.8;margin-top:9px}.model-visual .visual-bottom{margin-top:auto}.model-visual .visual-bottom>span{font-size:8px;max-width:60%}.intake .annual{margin-top:20px;border-top-color:var(--line);padding:15px 0 0}.intake .annual strong{font-size:24px}.intake .annual>small{font-size:9px}.intake .annual>small:last-child{font-size:8px}.intake .scope{margin-top:13px}.model-visual .visual-top>small{font:550 7px system-ui;letter-spacing:1px}.model-visual .pill{font:500 9px system-ui}.model-visual .house{display:none}
@media(max-width:1050px){.model-stage{height:285px}.model-visual{padding-inline:22px}.model-intro h2{font-size:21px}.model-view-controls button{padding-inline:7px}.energy-demo-heading>span{font-size:9px}.energy-legend{gap:10px}}
@media(max-width:760px){.model-visual{order:1;padding:22px 24px 0;min-height:0}.model-intro{margin-top:18px}.model-stage{height:325px}.model-view-controls button{font-size:11px;padding:7px 10px}.model-view-controls #reset-model{font-size:10px}.model-status{font-size:9px}.daylight-control>div:first-child{font-size:12px}.daylight-control output{font-size:16px}.daylight-labels{font-size:10px}.daylight-labels>span:nth-child(2){font-size:9px}.model-extra{font-size:11px;margin:15px 0}.model-extra button{font-size:10px}.energy-demo-heading>span{font-size:11px}.energy-demo-heading button{font-size:11px;padding:4px 10px}.energy-legend{font-size:9px;gap:12px}.energy-summary span{font-size:10px}.energy-summary b{font-size:27px}.energy-summary small{font-size:9px}.energy-demo #energy-story{font-size:11px}.energy-disclosure{font-size:9px}.model-assumptions,.model-assumptions p{font-size:10px}.model-visual .visual-bottom>span{font-size:9px}.model-visual .visual-bottom{margin-top:5px}.device-label{font-size:8px}.model-corner{font-size:7px}.model-intro p{font-size:11px}.intake .annual>small{font-size:10px}.model-visual .visual-top>small{font-size:7px}.model-visual .pill{font-size:10px}}
@media(max-width:390px){.model-visual{padding-inline:19px}.model-stage{height:300px}.model-intro h2{font-size:21px}.energy-demo-heading{align-items:start}.energy-demo-heading>span{max-width:160px}.energy-legend{font-size:8px;gap:10px}.daylight-labels>span:nth-child(2){font-size:8px}.model-extra{font-size:10px}}

.model-extra{flex-wrap:wrap;gap:8px 12px}.model-stage:not(.is-ready) .model-labels{display:none}.compass-label{z-index:5;background:#edf1e4dd;border-radius:50%;padding:2px 4px}.selfuse-teaching{border-top:1px solid var(--line);margin-top:26px;padding-top:23px}.selfuse-teaching .eyebrow{font-size:8px;color:#8a9d74}.selfuse-teaching h3{font-size:22px;font-weight:500;margin-top:10px}.energy-mini-route{display:flex;gap:8px;align-items:center;margin:16px 0;font-size:9px}.energy-mini-route span{background:#eff3e7;border:1px solid #d3deca;border-radius:5px;padding:6px 8px}.energy-mini-route b{font-weight:400;color:#8c9f7b}.selfuse-teaching>p{font-size:11px;max-width:350px}.compare-heading{font-size:9px;color:#8b987e;margin-top:19px}.selfuse-compare{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:10px 0 15px}.selfuse-compare>div{border-left:2px solid #a4bb84;padding-left:14px}.selfuse-compare small{font-size:10px;color:#7d9071;display:block}.selfuse-compare b{font:500 31px/1.5 system-ui;letter-spacing:-1px}.selfuse-compare>div:last-child b{color:#93a58a}.selfuse-teaching>small{font-size:9px;color:#97a28b;line-height:1.8;display:block}.model-visual .visual-bottom{margin-top:0}
@media(max-width:760px){.selfuse-teaching h3{font-size:23px}.selfuse-teaching>p{font-size:12px}.selfuse-teaching>small{font-size:10px}.compare-heading{font-size:10px}.energy-mini-route{font-size:10px}.selfuse-compare small{font-size:11px}}

@media(max-width:760px){.workspace .model-visual{order:0}.workspace .intake{order:1}}

.generation-level{font-size:8px;color:#849676;margin-top:7px}@media(max-width:760px){.generation-level{font-size:10px}}

.sun-time-label{font:500 7px system-ui;color:#977b24;border:0;background:#f4f1dbb0;padding:1px 4px;box-shadow:none;z-index:4}.model-extra button:disabled{opacity:.5;cursor:default}

.ev-control{margin-top:14px;padding:12px;border:1px solid #b8c9ac;border-radius:8px;background:#f4f7eb}.ev-control label{display:flex;gap:9px;align-items:center;cursor:pointer;font-size:11px}.ev-control input{accent-color:#315e55;width:16px;height:16px;margin:0}.ev-control label span{flex:1}.ev-control small{display:block;font-size:8px;color:#829174;margin-top:3px}.ev-control label b{font:600 12px system-ui;color:#3f7866}.ev-control p{font-size:10px;border-top:1px solid #d5dfc9;padding-top:9px;margin-top:10px}.ev-control strong{color:#315e55}.ev-control p>span,.ev-control strong{font:600 15px system-ui;margin-left:5px}.device-label.ev{border-color:#68a18a;color:#315e55}@media(max-width:760px){.ev-control label{font-size:12px}.ev-control small{font-size:9px}.ev-control p{font-size:11px}}